/* =========================================================
   KI-Kennzeichnung – tw-sachverstand.de
   Erfüllt sichtbare Kennzeichnungspflicht (EU AI Act, Art. 50).
   Maschinenlesbare Kennzeichnung erfolgt zusätzlich über IPTC-Metadaten.
   ========================================================= */

/* Bild/Video-Container mit KI-Markierung
   Verwendung:
   <figure class="ki-bild">
     <img src="..." alt="...">
     <figcaption>Symbolbild, KI-generiert.</figcaption>
   </figure>
*/
.ki-bild{
  position:relative;
  display:block;
  margin:0;
}
.ki-bild > img,
.ki-bild > video{
  display:block;
  width:100%;
  height:auto;
}

/* Wasserzeichen (Variante v3 – Kreis) als CSS-Pseudo-Element.
   Dezent gehalten — niedrige Deckkraft, kleinerer Durchmesser.
*/
.ki-bild::after,
.ki-hero::after{
  content:"KI";
  position:absolute;
  bottom:12px;
  right:12px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(26,26,26,.35);
  border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.8);
  font:600 10px/32px Helvetica, Arial, sans-serif;
  text-align:center;
  letter-spacing:.5px;
  pointer-events:none;
  z-index:5;
}

/* Hero-Variante: das Wasserzeichen sitzt im Hero-Container, der bereits
   position:relative hat und ein CSS-background-Bild trägt.
   Klasse .ki-hero zusätzlich auf das .hero-Element setzen.
*/
.ki-hero{
  position:relative;
}

/* Caption (Bildunterschrift) – dezent, kleiner, weniger Kontrast */
.ki-bild > figcaption,
.ki-caption{
  display:block;
  margin-top:6px;
  padding:0 4px;
  font:italic 10px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#9CA3AF;
  opacity:.85;
  text-align:left;
}

/* Hero-Caption: schwebt unten links über dem Hero, sehr dezent */
.ki-hero-caption{
  position:absolute;
  bottom:12px;
  left:14px;
  font:italic 10px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:rgba(255,255,255,.6);
  background:rgba(0,0,0,.18);
  padding:2px 7px;
  border-radius:3px;
  letter-spacing:.2px;
  pointer-events:none;
  z-index:5;
}

/* Mobile-Anpassung */
@media (max-width: 640px){
  .ki-bild::after,
  .ki-hero::after{
    width:26px;
    height:26px;
    font-size:9px;
    line-height:26px;
    bottom:8px;
    right:8px;
  }
  .ki-hero-caption{
    bottom:8px;
    left:8px;
    font-size:9px;
  }
}

/* Sonderfall: Person-Karten im Team-Bereich (index.html).
   Kreis-Bild → Wasserzeichen unten rechts ausserhalb des Kreises wäre
   schwierig. Stattdessen kleines Badge unten rechts auf dem Kreis,
   plus Caption unter Name/Rolle.
*/
.person-card .ki-bild{
  display:inline-block;
}