/*!
 * fiz_ai_label - Kennzeichnung KI-generierter Bilder
 * GPL-2.0-or-later
 */

/*
 * Schlichtes CSS statt SCSS, mit Absicht: Die Extension bringt keinen
 * Node-Build mit, und ohne Build-Schritt ist sie in einem fremden Projekt
 * wirklich nur einzubinden. Das ist die Vorgabe aus `scss.md` fuer
 * eigenstaendige Extensions.
 *
 * KEINE festen Farben in den Regeln selbst. Alles liest zwei eigene
 * Stellgroessen, und die lesen ihrerseits `--bs-*`, damit die Marke einem
 * Wechsel des Farbschemas von selbst folgt. Welches Schema gilt, entscheidet
 * `data-bs-theme` an der Gruppe - gesetzt vom Skript, nachdem es die
 * Helligkeit des Bildes hinter der Marke gemessen hat.
 *
 * Die Zuordnung ist Absicht und nicht zufaellig:
 *   `--bs-emphasis-color` ist im hellen Schema fast schwarz, im dunklen fast
 *   weiss - genau die Grundform. `--bs-body-bg` ist umgekehrt - genau die
 *   Beschriftung.
 *
 * Die Rueckfallwerte sind kein Schmuck: Ohne sie faellt die GANZE Deklaration
 * aus, sobald ein Projekt die `--bs-*`-Variablen nicht mitbringt. Und weil
 * dann auch kein Bootstrap-Farbschema da ist, das sie umdreht, drehen die
 * Rueckfallwerte unter `[data-bs-theme="dark"]` selbst - die Extension
 * braucht Bootstrap also nicht, nutzt es aber, wenn es da ist.
 */

/*
 * DIE STELLGROESSEN STEHEN IN `:where()`, DIE BAUTEILE NICHT.
 *
 * `:where()` zaehlt in der Spezifitaet null. Jede Projektregel gewinnt damit
 * gegen diese Vorgabewerte - auch eine mit nur einer Klasse und auch dann,
 * wenn das Projekt-Stylesheet VOR diesem geladen wird.
 *
 * Das ist keine Feinheit, sondern die Behebung eines Fehlers: Das Partial
 * meldet dieses Stylesheet per `f:asset.css` an, und das landet hinter der
 * `main.css` des Projekts. Eine Projektregel `.fiz-ai-label-group {
 * --fiz-ai-label-opacity: .3 }` hatte deshalb dieselbe Spezifitaet, stand aber
 * frueher im Dokument - und blieb wirkungslos. Gemessen am 29.10.2026: Der
 * Wert kam in der `main.css` an, die Marke zeigte trotzdem 0,75.
 *
 * Nur die Stellgroessen liegen so offen. Lage, Stapelreihenfolge und die
 * Gegenkanten darunter sind Bauteile und keine Einstellungen; sie behalten
 * ihre normale Spezifitaet, damit sie nicht aus Versehen gekippt werden.
 */
:where(.fiz-ai-label-group) {
  --fiz-ai-label-size: 1.75rem;
  --fiz-ai-label-gap: .375rem;
  --fiz-ai-label-inset: .75rem;

  /*
   * Deckkraft der Zeichen. Eine Marke, die voll deckend auf dem Bild liegt,
   * draengt sich vor; ein Viertel Durchlass nimmt ihr das, ohne sie
   * unleserlich zu machen. Beim Ueberfahren und im geoeffneten Zustand geht
   * sie auf volle Deckkraft - das ist gleichzeitig die Rueckmeldung der Maus.
   *
   * Projektseitig in einer Zeile anders zu setzen:
   *   .fiz-ai-label-group { --fiz-ai-label-opacity: .6; }
   */
  --fiz-ai-label-opacity: .75;

  --fiz-ai-label-body: var(--bs-emphasis-color, #212529);
  --fiz-ai-label-ink: var(--bs-body-bg, #fff);
}

.fiz-ai-label-group {
  position: absolute;
  z-index: 2;

  /*
   * DIE GEGENKANTEN MUESSEN AUSDRUECKLICH AUF `auto`.
   *
   * Bootstraps `.ratio > *` setzt `top: 0; left: 0; width: 100%; height: 100%`
   * an JEDES direkte Kind. Steht die Marke in einem `.ratio`-Kasten - in den
   * News-Karten ist das so -, gewinnen `left` und `width` gegen das `right`
   * hier, und die Marke sitzt ploetzlich links in voller Breite. Genau das
   * war in den News zu sehen.
   */
  top: auto;
  left: auto;
  right: var(--fiz-ai-label-inset);
  bottom: var(--fiz-ai-label-inset);
  width: auto;
  height: auto;
}

/* Ohne Bootstrap-Farbschema drehen die Rueckfallwerte selbst. */
.fiz-ai-label-group[data-bs-theme="dark"] {
  --fiz-ai-label-body: var(--bs-emphasis-color, #fff);
  --fiz-ai-label-ink: var(--bs-body-bg, #212529);
}

/*
 * Lage waehlbar: unten rechts ist die Vorgabe, unten links die Alternative.
 * Oben gibt es bewusst nicht - dort stehen in der Regel Ueberschrift oder
 * Verlauf.
 */
.fiz-ai-label-group-start {
  right: auto;
  left: var(--fiz-ai-label-inset);
}

/*
 * DIE GANZE MARKE IST EINE SCHALTFLAECHE.
 *
 * Frueher war nur das "i" ein `button` und das KI-Zeichen ein `span`, der
 * zwar den Zeigefinger trug, aber auf keinen Klick reagierte. Jetzt liegen
 * beide Zeichen IN der Schaltflaeche - was wie ein Bedienelement aussieht,
 * ist eines.
 *
 * Sie traegt keine eigene Flaeche und keinen Rahmen: sichtbar sind nur die
 * Zeichen. `appearance: none` raeumt die Browservorgaben des `button` weg,
 * ohne dass dafuer ein Dutzend Einzelangaben noetig waeren.
 */
.fiz-ai-label-toggle {
  display: flex;
  align-items: flex-end;
  gap: var(--fiz-ai-label-gap);
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  color: var(--fiz-ai-label-body);
  cursor: pointer;
  opacity: var(--fiz-ai-label-opacity);

  /*
   * DAS "i" DARF BEIM AUFKLAPPEN NICHT WANDERN - und beim Ueberfahren auch
   * nicht.
   *
   * Die Gruppe haengt an der buendigen Kante, die Breite richtet sich nach
   * dem Inhalt. Wird aus dem runden Zeichen die Pille, waechst die
   * Schaltflaeche nach innen; das "i" steht im Dokument ZULETZT und bleibt
   * damit an der Kante stehen (gemessen: 0 px Versatz).
   *
   * Beim Ueberfahren wuerde eine Vergroesserung um den Mittelpunkt die Kante
   * mitnehmen. `transform-origin` auf genau diese Kante gelegt, waechst das
   * Zeichen nur nach innen.
   */
  transform-origin: bottom right;
  transition: opacity .15s ease-out, transform .15s ease-out;
}

.fiz-ai-label-group-start .fiz-ai-label-toggle {
  /*
   * Bei linker Lage muss das "i" an die LINKE Kante. Die Reihenfolge im
   * Dokument bleibt gleich - nur die Anzeige dreht sich, damit Tastatur und
   * Vorlesesoftware weiter dieselbe Folge bekommen.
   */
  flex-direction: row-reverse;
  transform-origin: bottom left;
}

/*
 * Rueckmeldung beim Ueberfahren: volle Deckkraft und ein Hauch groesser.
 * Vorher aenderte sich beim Ueberfahren NICHTS - es gab im ganzen Stylesheet
 * keine einzige `:hover`-Regel. Zusammen mit der Sprechblase des `title`,
 * die das Skript zwischen "anzeigen" und "schliessen" umstellt, ist nun
 * sichtbar, dass hier etwas hinterlegt ist und was ein Klick tut.
 */
.fiz-ai-label-toggle:hover,
.fiz-ai-label-toggle:focus-visible,
.fiz-ai-label-toggle[aria-expanded="true"] {
  opacity: 1;
}

@media (hover: hover) {
  .fiz-ai-label-toggle:hover {
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fiz-ai-label-toggle {
    transition: none;
  }
}

/*
 * Der Fokusring kommt von Bootstrap, damit er aussieht wie ueberall sonst im
 * Projekt. Entfernt wird er nicht - eine Schaltflaeche ohne sichtbaren Fokus
 * ist mit der Tastatur nicht bedienbar.
 */
.fiz-ai-label-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width, .25rem) var(--bs-focus-ring-color, rgba(13, 110, 253, .25));
  border-radius: 2rem;
}

.fiz-ai-label-mark {
  display: block;
}

.fiz-ai-label-mark svg {
  display: block;
  height: var(--fiz-ai-label-size);
  width: auto;
}

.fiz-ai-label-ink {
  fill: var(--fiz-ai-label-ink);
}

/*
 * ZWEI MARKEN, EINE SICHTBAR.
 *
 * Eingeklappt steht das runde Grundzeichen, ausgeklappt die Pille mit dem
 * Klartext. Beide liegen im Dokument; `hidden` schaltet um. Kein `display`
 * ueber eine Klasse, weil `hidden` dasselbe ohne Stylesheet leistet - faellt
 * dieses CSS aus, ist trotzdem nur eine der beiden Marken zu sehen.
 */
.fiz-ai-label-mark[hidden] {
  display: none;
}

/*
 * Die Quellenangabe. Sie klappt UEBER dem Bild auf und nicht darunter: Ein
 * Feld unterhalb wuerde den Textfluss der Seite verschieben, sobald jemand
 * darauf tippt.
 */
.fiz-ai-label-detail {
  position: absolute;
  right: 0;
  bottom: calc(var(--fiz-ai-label-size) + var(--fiz-ai-label-gap));

  /*
   * Flach und breit statt hoch und schmal: So verdeckt das Feld weniger vom
   * Bild. `max-content` haelt es so schmal wie noetig, die Obergrenze
   * verhindert, dass ein langer Quellentext ueber das Bild hinauslaeuft.
   */
  width: max-content;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: .375rem .625rem;
  border-radius: var(--bs-border-radius, .25rem);

  /*
   * Das Feld bleibt VOLL deckend, auch wenn die Zeichen es nicht sind: Es
   * traegt Text, und Text auf einem Foto braucht seinen Grund. Dass das
   * moeglich ist, liegt daran, dass das Feld neben der Schaltflaeche liegt
   * und nicht in ihr - eine Deckkraft an der Gruppe wuerde es mitnehmen.
   */
  background-color: var(--fiz-ai-label-body);
  color: var(--fiz-ai-label-ink);

  /* Noch einen Tick kleiner als Bootstraps `small` (.875rem). */
  font-size: .8125rem;
  line-height: 1.4;
  text-align: left;
}

/* Bei linker Lage klappt das Feld auch nach links auf. */
.fiz-ai-label-group-start .fiz-ai-label-detail {
  right: auto;
  left: 0;
}

.fiz-ai-label-detail[hidden] {
  display: none;
}

.fiz-ai-label-detail p {
  margin: 0;
}

.fiz-ai-label-detail p + p {
  margin-top: .25rem;
}

.fiz-ai-label-link {
  color: inherit;
}

/*
 * Das Pfeilzeichen des externen Links. Als Markup im Dokument und nicht als
 * eigene Datei: Es kommt genau einmal vor, und eine vierte SVG-Datei fuer
 * zwei Striche waere eine Datei zu viel. Gezeichnet wird es hier - Strichart
 * und Staerke gehoeren ins Stylesheet, nicht ins Template.
 */
.fiz-ai-label-external {
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-left: .25em;
  vertical-align: -.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * Unsichtbar, aber vorgelesen. Eigene Klasse statt Bootstraps
 * `.visually-hidden`: Die Extension soll in einem Projekt ohne Bootstrap
 * genauso funktionieren, und eine fremde Klasse aus einem Fremd-Stylesheet
 * nachzubauen hiesse, sie zu uebernehmen.
 */
.fiz-ai-label-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * Bezugsrahmen fuer die absolute Lage. Die Klasse gehoert an den Kasten, der
 * das Bild umschliesst. Ein Projekt, dessen Bildrahmen schon `position:
 * relative` traegt, braucht sie nicht.
 */
.fiz-ai-label-anchor {
  position: relative;
}