/* ============================================================
   KI-Kennzeichnung (#472, Plan 3.5/3.8) - Hinweiszeile der Produktgalerie
   <span class="ai-caption ai-caption--generated|--modified" aria-hidden="true">
     <img class="ai-caption__icon" alt="" aria-hidden="true">Satz
   </span>
   Gesetzt von includes/javascript/product_gallery.js (_setAiCaption):
   - in der Bildunterschrift (.pg-caption) hinter der Beschreibung, bzw. allein,
     wenn keine Beschreibung da ist; in der Lightbox direkt unter dem Bild.
   - KEIN Overlay auf dem Bild (Abnahme Sorin 24.09.: mit dem eingebrannten Icon
     oben rechts wirkte es doppelt und unruhig).
   - rein visuell (aria-hidden): Screenreader bekommen den Satz genau einmal ueber
     den alt-Text des Bildes (Plan 3.8); nicht fokussierbar, nicht interaktiv.
   - Kontrast: #666 auf Weiss = 5,74:1 (WCAG AA 4,5:1); 12 px.
   - "bearbeitet" vs. "erstellt": anderer Text und anderes Icon, nicht nur Farbe.
   ============================================================ */

.ai-caption {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    max-width: 100%;
    color: #666;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    line-height: 1.3;
    vertical-align: top; /* baseline eines inline-flex mit Bild vorn waere das Bild */
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
    user-select: none;
}

/* hinter einer Beschreibung: kleiner Abstand */
.pg-caption .ai-caption {
    margin-left: 0.8em;
}

/* ohne Beschreibung: eigene Zeile, kein Einzug */
.pg-caption .ai-caption--alone {
    margin-left: 0;
}

/* Icon (schwarze Pille "AI GENERATED/MODIFIED"): Die SVGs haben viel Leerraum in
   der viewBox; die negativen Raender schneiden ihn weg, sichtbar bleibt eine
   Pille von 1,1em Hoehe. Aendern sich die SVGs, muessen die Raender mit. */
.ai-caption .ai-caption__icon {
    flex: 0 0 auto;
    display: block;
    height: 2.341em;
    width: auto;
    max-width: none;
    max-height: none;
    margin: -0.596em -0.819em -0.645em -0.856em;
    border: 0;
    padding: 0;
}

.ai-caption--modified .ai-caption__icon {
    margin-left: -0.954em;
    margin-right: -0.987em;
}

/* Lightbox: eigene Zeile direkt unter dem Bild (flex-Kind von .pg-lightbox) */
.pg-lightbox .ai-caption--lb {
    align-self: center;
    flex: 0 0 auto;
    margin-top: 8px;
    max-width: 90vw;
    font-size: 13px;
}

/* noscript-Fallback unter dem SEO-Bild */
.ai-label-noscript {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.3;
    color: #666;
}