/* OneQrew v7 — KI-Kennzeichnung (EU-KI-VO Art. 50).

   Handkopie aus src/assets/scss/blocks/_ai-label.scss (dort steht die
   ausfuehrliche Begruendung jeder Regel, inkl. der Kunden-Bugs, die die
   Spezifitaet so und nicht anders erzwungen haben). Bewusst BYTE-NAH an der
   Legacy-Quelle: identische Selektoren, identische Spezifitaet, kein
   ".oq-v7"-Praefix. Faellt eine Seite auf den Legacy-Fallback zurueck
   (App\V7\StyleLoader::needsLegacyFallback()), laedt das kompilierte
   Legacy-Bundle (dist/css/app.css, Abschnitt "AI-LABEL") parallel zu dieser
   Datei — beide Regelsaetze muessen dieselbe Spezifitaet tragen, sonst
   kippen genau die dort dokumentierten Kaempfe (media-slider-simple,
   msoft.de Card-Slider) in eine andere Richtung, obwohl beide Bundles
   inhaltlich dasselbe meinen.

   Das Badge ist Rechtsangabe, keine Deko: keine v7-Farbtoken
   (--oq-farbe-*), keine v7-Schrifttoken — dieselbe Entscheidung wie in der
   SCSS-Quelle, das Aussehen soll unabhaengig vom Theme/Paket immer gleich
   lesbar bleiben. Ueberschreibbar pro Kundenseite via Custom Properties
   (ohne !important): --aiml-bg, --aiml-fg, --aiml-radius, --aiml-offset,
   --aiml-gap.

   Laedt unbedingt bei jedem v7-Request, unabhaengig vom Block-Inventar
   (App\V7\StyleLoader::enqueueAiLabelStyle(), aufgerufen aus enqueue()) —
   das Badge kann an jedem Bild haengen, gleich welcher Block es rendert,
   genau wie kern.css/chrome.css. Nicht Teil von StyleLoader::IMMER/buildPlan(),
   damit der bestehende Selbsttest (scripts/v7-selftest.php, prueft files
   auf genau ['kern','chrome']) unangetastet bleibt.

   Aenderungen immer auch in ki-kennzeichnung.min.css UND in der Legacy-Quelle
   src/assets/scss/blocks/_ai-label.scss nachziehen — zwei Ausgaben, ein
   Vertrag. Die Legacy-Quelle selbst NICHT hierher verschieben oder umbauen. */

.aiml-figure {
  /* Eigenstaendiger Positionierungs- und Container-Query-Kontext fuer den
     oq_ai_image()-Pfad. Bei sibling-injizierten Badges liefert der jeweilige
     Theme-Container (meist .relative) den Kontext. */
  position: relative;
  display: block;
  margin: 0;
  container-type: inline-size;
}

/* Der Elternknoten des Badges macht sich selbst zum Anker. Zwingend
   :where() (siehe SCSS-Quelle, media-slider-simple-Bug): traegt null
   Spezifitaet bei, sonst schlaegt diese Regel Block-eigene Positionierung
   mit derselben Spezifitaet wie eine einzelne Klasse. */
:where(:has(> .aiml-badge)) {
  position: relative;
}

.aiml-badge {
  --aiml-bg: rgba(17, 17, 17, 0.72);
  --aiml-fg: #fff;
  --aiml-radius: 999px;
  --aiml-offset: 10px;
  --aiml-gap: 6px;

  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--aiml-gap);
  max-width: calc(100% - (var(--aiml-offset) * 2));
  margin: 0;
  padding: 5px 9px;
  box-sizing: border-box;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--aiml-radius);
  background: var(--aiml-bg);
  color: var(--aiml-fg);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  pointer-events: none;
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .aiml-badge {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

.aiml-badge__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: block;
}

.aiml-badge__text {
  display: block;
}

.aiml-badge__desc {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Position ------------------------------------------------------- */
.aiml-badge[data-aiml-pos="br"] { right: var(--aiml-offset); bottom: var(--aiml-offset); }
.aiml-badge[data-aiml-pos="bl"] { left: var(--aiml-offset); bottom: var(--aiml-offset); }
.aiml-badge[data-aiml-pos="tr"] { right: var(--aiml-offset); top: var(--aiml-offset); }
.aiml-badge[data-aiml-pos="tl"] { left: var(--aiml-offset); top: var(--aiml-offset); }

/* --- Stil: nur Icon --------------------------------------------------- */
.aiml-badge--icon {
  padding: 6px;
}

.aiml-badge--icon .aiml-badge__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Stil: Balken ueber volle Bildbreite ------------------------------- */
.aiml-badge--bar {
  --aiml-radius: 0;
  left: 0;
  right: 0;
  max-width: none;
  justify-content: flex-start;
  border-left: 0;
  border-right: 0;
}

.aiml-badge--bar[data-aiml-pos="br"],
.aiml-badge--bar[data-aiml-pos="bl"] { bottom: 0; top: auto; }
.aiml-badge--bar[data-aiml-pos="tr"],
.aiml-badge--bar[data-aiml-pos="tl"] { top: 0; bottom: auto; }

/* --- Tooltip-Modus ------------------------------------------------------ */
.aiml-badge[data-aiml-pos="br"] .aiml-badge__desc,
.aiml-badge[data-aiml-pos="tr"] .aiml-badge__desc { right: 0; left: auto; }
.aiml-badge[data-aiml-pos="bl"] .aiml-badge__desc,
.aiml-badge[data-aiml-pos="tl"] .aiml-badge__desc { left: 0; right: auto; }
.aiml-badge[data-aiml-pos="br"] .aiml-badge__desc,
.aiml-badge[data-aiml-pos="bl"] .aiml-badge__desc { bottom: calc(100% + 6px); top: auto; }
.aiml-badge[data-aiml-pos="tr"] .aiml-badge__desc,
.aiml-badge[data-aiml-pos="tl"] .aiml-badge__desc { top: calc(100% + 6px); bottom: auto; }

.aiml-badge--tooltip {
  pointer-events: auto;
  cursor: help;
  outline-offset: 2px;
}

.aiml-badge--tooltip:hover .aiml-badge__desc,
.aiml-badge--tooltip:focus-visible .aiml-badge__desc,
.aiml-badge--tooltip:focus-within .aiml-badge__desc {
  position: absolute;
  width: max-content;
  max-width: min(240px, 78vw);
  height: auto;
  clip: auto;
  margin: 0;
  padding: 6px 8px;
  overflow: visible;
  white-space: normal;
  border-radius: 6px;
  background: var(--aiml-bg);
  color: var(--aiml-fg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 400;
  line-height: 1.3;
  z-index: 3;
}

/* Fremde Layout-Regeln duerfen die Geometrie des Badges nicht veraendern
   (msoft.de-Fix, siehe SCSS-Quelle) — deshalb hier auf die drei
   Geometrie-Eigenschaften begrenztes !important. Der Balken-Stil ist
   ausgenommen: der will die volle Breite. */
.aiml-badge:not(.aiml-badge--bar) {
  display: inline-flex !important;
  inline-size: max-content !important;
  block-size: auto !important;
}

/* Anker am Bild statt am Container (Progressive Enhancement, siehe
   SCSS-Quelle fuer die msoft.de-Text/Media-Begruendung). */
@supports (anchor-name: --aiml-media) {
  :where(:has(> .aiml-badge)) > :is(img, picture, video, canvas, svg) {
    anchor-name: --aiml-media;
  }

  .aiml-badge:not(.aiml-badge--bar) {
    position-anchor: --aiml-media;
  }

  .aiml-badge:not(.aiml-badge--bar)[data-aiml-pos="br"] {
    right: calc(anchor(right, 0px) + var(--aiml-offset));
    bottom: calc(anchor(bottom, 0px) + var(--aiml-offset));
  }
  .aiml-badge:not(.aiml-badge--bar)[data-aiml-pos="bl"] {
    left: calc(anchor(left, 0px) + var(--aiml-offset));
    bottom: calc(anchor(bottom, 0px) + var(--aiml-offset));
  }
  .aiml-badge:not(.aiml-badge--bar)[data-aiml-pos="tr"] {
    right: calc(anchor(right, 0px) + var(--aiml-offset));
    top: calc(anchor(top, 0px) + var(--aiml-offset));
  }
  .aiml-badge:not(.aiml-badge--bar)[data-aiml-pos="tl"] {
    left: calc(anchor(left, 0px) + var(--aiml-offset));
    top: calc(anchor(top, 0px) + var(--aiml-offset));
  }
}

/* Schmale Container: auf Icon reduzieren, Text bleibt fuer Screenreader
   erhalten (Schwelle 400px, siehe SCSS-Quelle). */
@container (max-width: 400px) {
  .aiml-badge:not(.aiml-badge--bar) {
    padding: 6px;
  }

  .aiml-badge:not(.aiml-badge--bar) .aiml-badge__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Ausdruck: Badge sichtbar halten, Transparenz aufloesen. */
@media print {
  .aiml-badge {
    background: #111 !important;
    color: #fff !important;
    border-color: #555 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}