/* ============================================================
   Kennzeichnung KI-generierter Medien
   Kanon 7.10 / 7.10a / 5.2a / 5.2b / 5.2c · aus Kit v3.1

   EU 2024/1689 Art. 50, anwendbar seit 02.08.2026.

   DIESE DATEI WIRD ALS LETZTE GELADEN. Grund: Der Härteblock am
   Ende muss am Ende der Kaskade stehen und außerhalb jeder
   Medienabfrage (5.2a). Steht er in einem @media-Kontext, hält er
   nur dort — und die maschinelle Prüfung meldet Grün, obwohl die
   Härtung fehlt.

   ------------------------------------------------------------
   KONTRAST — gerechnet, nicht übernommen (7.10, 5.27)

   Der schlimmste Fall ist ein reinweißer Bildbereich unter der
   Trägerfläche: weißer Text auf --ki-ink bei --ki-deckkraft.
   Gerechnet am 11.08.2026 für die Projektfarbe:

     Ink       Deckkraft   Kontrast
     #2A2A26      65 %       4.62    knapp über AA
     #2A2A26      70 %       5.43    gewählt
     #2A2A26      72 %       5.76
     #2A2A26      75 %       6.41

   Die Kit-Tabelle nennt 65 % als Empfehlung — aber nur bis
   einschließlich Ink #1C1C1E. Unser Anthrazit #2A2A26 ist heller,
   deshalb wurde gerechnet statt übernommen. 4.62 bestünde AA,
   liegt aber nur 0.12 über der Grenze; jede spätere Aufhellung
   der Markenfarbe würde es kippen. 70 % gibt Reserve.

   Die halbtransparenten Icon-Varianten des EU-Pakets (50 %)
   fallen mit 3,76:1 durch und werden nicht verwendet.
   ------------------------------------------------------------
   POSITION unten LINKS — rechts kollidiert mit Videoplayer-
   Bedienelementen. Wo unten links bereits etwas sitzt, weicht das
   Label über einen Modifier aus (5.2b).
   ============================================================ */

:root{
  --ki-ink:#2A2A26;        /* Projektfarbe Anthrazit — siehe Rechnung oben */
  --ki-deckkraft:.70;      /* nur senken, wenn neu gerechnet */
  --ki-radius:2px;         /* entspricht --so-radius */
  --ki-zeichen:url("/assets/img/ai-icons/ai-icon-light.svg");
}

/* Der Wrapper ist Voraussetzung, nicht Kosmetik: ohne
   position:relative greift die absolute Platzierung nicht. */
.ki-medium{position:relative;display:block;margin:0}
.ki-medium img,
.ki-medium video{display:block;width:100%;height:auto}

/* ============================================================
   GENERISCHE EBENE (Kanon 5.2 / 5.2c)

   .pflichtangabe trägt Platzierung und Härtung, die zweite Klasse
   das Aussehen der jeweiligen Angabeart:

     <p class="pflichtangabe ki-hinweis">        KI-Kennzeichnung
     <p class="pflichtangabe bildnachweis">      Urhebervermerk
     <p class="pflichtangabe werbekennzeichen">  "Anzeige"

   Ein Platzierungsmechanismus, mehrere Angabearten. Wer für den
   Bildnachweis eine zweite Mechanik baut, baut auch die zweite
   Fehlerserie.
   ============================================================ */
.pflichtangabe,
.ki-hinweis{
  position:absolute;
  left:.75rem;
  bottom:.75rem;
  /* Großzügig (7.14). Der Stapelkontext des Trägers entscheidet
     ohnehin; ist dessen Kette negativ, gehört die Angabe an den
     Abschnitt, nicht an den Träger. */
  z-index:999;
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  padding:.2rem .48rem;
  border-radius:var(--ki-radius);
  font-size:.72rem;
  line-height:1.3;
  letter-spacing:.04em;
  font-weight:500;
  color:#fff;
  background:color-mix(in srgb,
             var(--ki-ink) calc(var(--ki-deckkraft) * 100%), transparent);
  pointer-events:none;
}

/* Rückfall für Browser ohne color-mix (Safari < 16.2).
   Wert entspricht --ki-ink #2A2A26 bei 70 % — mitziehen, falls
   die Ink je geändert wird. */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .pflichtangabe,
  .ki-hinweis{background:rgba(42,42,38,.70)}
}

/* KEIN backdrop-filter (7.10, 13.2). Statisch wäre er unkritisch,
   in scrollgebundenen Sektionen rastert er je Frame neu —
   Kostenklasse 3, mobil unzulässig. Die Deckkraft trägt den
   Kontrast allein. */

/* Das Zeichen ist ein SPAN mit Hintergrundbild, KEIN <img>
   (Kanon 7.15) — ein span ist gegen Bildebenen-Animationen durch
   seine Bauart immun. */
.pflichtangabe .ki-icon,
.ki-hinweis .ki-icon{
  width:.95em;
  height:1em;
  flex:0 0 auto;
  display:block;
  max-width:none;
  background:var(--ki-zeichen) center/contain no-repeat;
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact;
}

/* Großflächige Bänder: in den AUSSCHNITT rechnen statt an den
   Elementrand setzen (Kanon 7.13). Kopfbühnen sind regelmäßig
   höher als das Fenster; die Angabe säße dann korrekt auf dem
   Bild und wäre beim Aufruf NICHT zu sehen. Der zweite Wert
   schiebt sie um genau den Überstand nach oben.
   100svh statt 100vh — sonst liegt sie mobil hinter der
   eingeblendeten Adressleiste. */
.so-hero .pflichtangabe,
.so-hero .ki-hinweis{
  left:var(--so-rand,1rem);
  bottom:max(1.2rem, calc(100% - 100svh + 1.2rem));
}

/* Die schmale Fassung steht NICHT hier, sondern nach dem
   Härteblock — siehe die Begründung dort. An dieser Stelle stünde
   sie wirkungslos. Position und Abstände sind hier unkritisch,
   weil der Härteblock sie nicht anfasst: */
@media (max-width:520px){
  .pflichtangabe,
  .ki-hinweis{left:.5rem;bottom:.5rem}
  .so-hero .pflichtangabe,
  .so-hero .ki-hinweis{left:.75rem}
}

/* --- Platzierungsvarianten (5.2b / 5.2c) --------------------
   Welcher Modifier greift, entscheidet die Auflösung aus 5.2c:
   1. Feld an der Datei  2. Container-Regel  3. global  4. Standard
   Das aufgelöste Ergebnis steht als data-platzierung im Markup.

   VERKLEINERT: kleine Kacheln. Der Maßstab sinkt, der Kontrast
   nicht — die Deckkraft bleibt unverändert (5.27). */
.pflichtangabe--klein,
.ki-hinweis--klein{
  font-size:.62rem;
  padding:.15rem .38rem;
  gap:.24rem;
  left:.45rem;
  bottom:.45rem;
}
.pflichtangabe--klein .ki-icon,
.ki-hinweis--klein .ki-icon{width:.9em;height:.9em}

/* VERSCHOBEN: wo unten links schon etwas sitzt. */
.pflichtangabe--rechts,
.ki-hinweis--rechts{left:auto;right:.75rem}
.pflichtangabe--rechts.pflichtangabe--klein,
.ki-hinweis--rechts.ki-hinweis--klein{right:.45rem}

/* OBEN: wo der untere Rand beschnitten oder überlagert ist. */
.pflichtangabe--oben,
.ki-hinweis--oben{bottom:auto;top:.75rem}
.pflichtangabe--oben.pflichtangabe--klein{top:.45rem}

/* ============================================================
   HÄRTEBLOCK (Kanon 5.2a) — Pflicht, nicht Kür

   Ursache der Fehlbilder: Element-Selektoren wie `.kachel img`
   erfassen JEDES Bild im Baustein — auch das EU-Icon im Label.
   Folge: Das Icon wurde absolut positioniert und auf
   Containergröße gezogen. Dieselbe Klasse auf dem Absatz:
   `.karte p` setzt margin und font-size, Spezifität (0,1,1)
   schlägt `.ki-hinweis` (0,1,0) — das Label rutschte hoch und
   wurde größer.

   ZWEISTUFIG, einer genügt nicht: Die verursachenden Selektoren
   im Projekt-CSS werden um :not() geschärft — das ist der
   eigentliche Fix. Dieser Block ist die zweite Sicherung. Eine
   Komponente mit Rechtsbezug darf nicht davon abhängen, dass
   künftig jemand an eine Ausnahme denkt. `!important` ist hier
   das richtige Werkzeug, nicht Bequemlichkeit.

   DIESER BLOCK STEHT AM ENDE DER KASKADE UND AUSSERHALB JEDER
   MEDIENABFRAGE.
   ============================================================ */
.pflichtangabe,
.ki-hinweis{
  white-space:nowrap;
  margin:0 !important;
  flex:none !important;
  color:#fff !important;
  width:auto !important;
  max-width:none !important;
  text-align:left !important;
  text-transform:none !important;
  font-size:.72rem !important;
  line-height:1.3 !important;
}
.pflichtangabe--klein,
.ki-hinweis--klein{font-size:.62rem !important}
.pflichtangabe .ki-icon,
.ki-hinweis .ki-icon{
  position:static !important;
  inset:auto !important;
  width:.95em !important;
  height:.95em !important;
  min-width:0 !important;
  max-width:none !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* ------------------------------------------------------------
   SCHMALE FASSUNG — steht bewusst NACH dem Härteblock.

   BEFUND (Projekt Schulze Outdoor Living, p.003, gemessen mit
   03-PRUEFUNG/pruefe-kaskade.py):

   In der Kit-Vorlage steht die 520px-Regel VOR dem Härteblock und
   trägt kein !important. Der Härteblock setzt danach
   `font-size:.72rem !important` — bei gleicher Spezifität (0,1,0)
   gewinnt !important gegen nicht-!important. Ergebnis:

     Selektor                                   Wert
     .ki-hinweis  [@media (max-width:520px)]    .68rem
     .ki-hinweis                                .72rem !important  ← gewinnt

   Die mobile Verkleinerung des Labels war damit **wirkungslos**.
   Der Kanon benennt dieses Muster für den Druckblock ("Wer oben
   härtet, schuldet jeder Medienabfrage darunter dasselbe") — für
   die 520px-Regel fehlt derselbe Schluss.

   Konsequenz hier: nach hinten verschoben und mit !important
   versehen, genau wie der Druckblock. Der Kontrast ändert sich
   dadurch nicht (5.27) — nur der Maßstab.
   ------------------------------------------------------------ */
@media (max-width:520px){
  .pflichtangabe,
  .ki-hinweis{font-size:.68rem !important}
  .pflichtangabe--klein,
  .ki-hinweis--klein{font-size:.60rem !important}
}

/* Druck: die absolute Überlagerung überlebt den Export nicht
   zuverlässig — deshalb als Zeile unter dem Bild. Kein Ersatz
   fürs Einbrennen (7.10), nur Rückfallebene.

   GEGENPROBE zum Härteblock: color braucht hier ebenfalls
   !important, sonst gewinnt die Härtung oben und das Label
   stünde im Druck weiß auf weiß. Wer oben härtet, schuldet
   jeder Medienabfrage darunter dasselbe. */
@media print{
  .pflichtangabe,
  .ki-hinweis{
    position:static;
    background:none !important;
    color:#000 !important;
    padding:.2rem 0 0;
  }
  .pflichtangabe .ki-icon,
  .ki-hinweis .ki-icon{
    background-image:url("/assets/img/ai-icons/ai-icon-dark.svg") !important;
  }
}