/* Kennzeichnung KI-generierter Bilder.
   Geteilte Komponente wie fake-interaction.* und scroll-reveal.*.

   Verwendung: jedes Inhaltsbild in <span class="ai-bild"> wickeln und den Badge
   als letztes Kind ergaenzen:

     <span class="ai-bild">
       <img src="..." alt="...">
       <span class="ai-bild__badge">KI-generiert</span>
     </span>

   Beschriftung einheitlich "KI-generiert" (wird per text-transform in
   Grossbuchstaben gesetzt). Eingebaut in allen sechs Demos: fotografin, fitnessstudio,
   designstudio, handwerk, restaurant, beratung. Der alte Onlineshop-Ordner
   wurde am 24.09. geloescht (Sicherung in .tmp/onlineshop-alt).

   Der Badge ist bewusst NICHT aria-hidden — die Kennzeichnung soll auch per
   Screenreader ankommen, nicht nur visuell. */

.ai-bild {
  position: relative;
  display: block;
  /* Bewusst OHNE height: Der Wrapper schmiegt sich an das Bild, damit der Badge
     an der Bildunterkante sitzt und nachfolgende Texte nicht verschoben werden.

     ACHTUNG beim Einbauen in weitere Demos: Liegt das Bild in einem Container
     mit fester Hoehe und ist selbst auf `height: 100%` gesetzt (z.B. eine
     Rasterzelle mit `overflow: hidden`), verliert es durch den Wrapper seinen
     Hoehenbezug und faellt auf sein Seitenverhaeltnis zurueck — es wird zu hoch
     und laeuft aus der Zelle. Dann in der Demo-CSS gezielt nachziehen:
         .<container> .ai-bild { height: 100%; }
     Niemals pauschal hier setzen: bei gestreckten Grid-Karten wuerde der Wrapper
     sonst die Kartenhoehe statt der Bildhoehe annehmen und Badge samt Text
     nach unten aus der Karte schieben. */
}

.ai-bild__badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  /* damit der Badge auf hellen wie dunklen Bildern lesbar bleibt */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);

  /* Liegt das Bild in einem Container, der per transform skaliert wird, wuerde
     der Badge mitskalieren und waere zwischendurch unlesbar. Das JS der Demo
     kann den aktuellen Faktor nach --ai-badge-gegenscale schreiben, dann wird
     er hier wieder herausgerechnet. Ohne gesetzten Wert passiert nichts. */
  transform: scale(calc(1 / var(--ai-badge-gegenscale, 1)));
  transform-origin: 100% 100%;
}

@media (max-width: 480px) {
  .ai-bild__badge { font-size: 8px; padding: 3px 6px; right: 6px; bottom: 6px; }
}