/* KI-Kennzeichnungs-Badge (EU-KI-VO Art. 50)

   Portiert aus dem BU-Theme (src/assets/scss/blocks/_ai-label.scss, Stand
   2026-11-09) als reines CSS: gleiche Selektoren, gleiche Reihenfolge, gleiche
   Spezifitaet. Einzige inhaltliche Aenderung: Schrift ueber --mq-font
   (tokens.css) statt --font-book. Die Begruendungen unten stammen aus den
   Kunden-Bugs im BU-Theme und gelten hier genauso - nicht "aufraeumen".

   Rechtsangabe, keine Deko: kein Fade-in, keine Animation. Das Badge ist ein
   absolut positioniertes Geschwister im vorhandenen (positionierten) Bild-
   container - NIE ueber eine img/picture-Adjazenz gestylt, damit Imagifys
   <picture>-Wrap nichts bricht.

   Ueberschreibbar via Custom Properties (ohne !important):
     --aiml-bg, --aiml-fg, --aiml-radius, --aiml-offset, --aiml-gap */

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

/* Der Elternknoten des Badges macht sich selbst zum Anker.

   `position: relative` ist fuer die Filter-Schicht noetig: sie haengt das Badge
   in Container, die nicht zwingend positioniert sind. Bewusst kein
   Wrapper-Element: das wuerde `> img`-Selektoren und den Imagify-sicheren
   Markup-Vertrag brechen.

   KEIN `container-type: inline-size` an dieser Stelle. `container-type` schaltet
   neben dem Query-Kontext auch Size- bzw. Inline-Size-Containment ein: die
   Inline-Groesse des Elements wird dann ohne seinen Inhalt bestimmt. In einem
   Container, dessen Breite sich aus dem Inhalt ergibt (Flex-Item mit
   `flex-basis: auto`, Shrink-to-fit-Block, Grid-Spur `auto`), faellt die Breite
   damit auf 0 - und das Bild darin verschwindet. Die Regel haengt an
   `:has(> .aiml-badge)`, greift also ausschliesslich bei gekennzeichneten
   Bildern: ein Bild MIT KI-Label kollabierte, dasselbe Bild ohne Label blieb
   heil (BU: taifun-software.de, KPI-Grid). Die Kompakt-Query unten bleibt damit
   auf den meisterq_ai_image()-Pfad beschraenkt; im Sibling-Pfad entscheidet
   PHP (Renderer::ICON_ONLY_MAX_WIDTH) ueber Icon-only.

   `:where()` ist hier ZWINGEND und keine Kosmetik. `:has(> .aiml-badge)` hat die
   Spezifitaet einer Klasse (0,1,0) - exakt so viel wie eine Block-Regel. Bei
   Gleichstand entscheidet die Ladereihenfolge: im BU-Theme hat das Badge einem
   Slider sein `position: absolute` weggenommen, das Bild sprang auf eine
   andere Groesse. Ein gekennzeichnetes Bild sah damit anders aus als dasselbe
   Bild ohne Kennzeichnung.

   `:where()` steuert null Spezifitaet bei. Damit gilt die Deklaration nur dort,
   wo der Container gar keine eigene Positionierung mitbringt - genau der Fall,
   fuer den sie gedacht ist. Jede Block-Regel gewinnt. Ein absolut oder relativ
   positionierter Container verankert das Badge ohnehin. */
: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; /* optische Mitte Icon/Text, nicht vertical-align */
  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); /* Haarlinie: grenzt auch auf sehr dunklen Bildern ab */
  border-radius: var(--aiml-radius);
  background: var(--aiml-bg);
  color: var(--aiml-fg);

  font-family: var(--mq-font), ui-sans-serif, system-ui, 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; /* blockiert keine Links/Lightboxen (Ausnahme: Tooltip-Modus) */
}

/* backdrop-filter als Progressive Enhancement. */
@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;
}

/* Tooltip-Langtext: standardmaessig nur fuer Screenreader, im Tooltip-Modus
   sichtbar auf Hover/Fokus. */
.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 -------------------------------------------------------
   Ausrichtung folgt der Badge-Position, damit der Tooltip nicht ueber den
   Bild-/Bildschirmrand hinauslaeuft: rechts sitzende Badges lassen ihn nach
   links wachsen, oben sitzende nach unten. Die Anker-Regeln stehen auch am
   (unsichtbar geclippten) Zustand - sichtbar wird nur der Box-Stil. */
.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.

   BU (msoft.de): eine kundenseitige Regel mit ID-Spezifitaet setzte pauschal
   `display: block; width: 100%; height: 100%` auf JEDES Kind des
   Bildcontainers - also auch auf das Badge. Aus der Pill wurde eine Flaeche
   ueber dem ganzen Kartenbild. Gegen solche Regeln kommt `.aiml-badge` nicht
   an, deshalb hier `!important` - beschraenkt auf die drei
   Geometrie-Eigenschaften. Farben, Radius, Offsets und Abstaende bleiben ohne
   `!important` und damit ueberschreibbar. `max-width` (siehe oben) begrenzt
   weiterhin.

   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).

   Das Badge ist absolut positioniert und richtet sich am naechsten
   positionierten Vorfahren aus - in der Praxis am Bild-Wrapper des Blocks. Ist
   der Wrapper hoeher als das Bild, saesse das Badge im Leerraum darunter statt
   im Bild (BU: msoft.de, 90px unter der Bildkante).

   CSS Anchor Positioning bindet das Badge an das Medien-Element selbst. Der
   zweite Parameter von `anchor()` ist der Fallback: findet sich kein Anker,
   greift `0px` und damit exakt das bisherige Verhalten am Wrapper. Browser ohne
   Anchor Positioning ueberspringen den Block per `@supports` und behalten
   ebenfalls das bisherige Verhalten. */
@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. Greift nur im meisterq_ai_image()-Pfad (.aiml-figure, siehe oben);
   der Sibling-Pfad entscheidet in PHP anhand der Bildbreite (< 400px). Der
   Mindestbreiten-Gate (PHP) faengt Thumbnails bereits vorher ab. Der Wert steht
   als Literal, weil Container-Queries keine Custom Properties in der Bedingung
   akzeptieren. */
@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;
  }
}

/* MeisterQ (nicht aus dem BU-Theme): die Bildbox im Abschnitt "Vergleich mit
   Umschalter" (.mqp-office) hat 60px Eckradius und overflow:hidden. Bei 10px
   Abstand schnitt die Rundung das rechte Ende der Pill ab (ab etwa 14px frei).
   Nur der Abstand wird groesser, ueber die dafuer vorgesehene Custom Property;
   die Spezifitaet (0,2,0) schlaegt die Vorgabe an .aiml-badge. */
.mqp-office .aiml-badge {
  --aiml-offset: 18px;
}

/* 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;
  }
}