/* ════════════════════════════════════════════════════════════════
   KI-KENNZEICHNUNG — Badge fuer KI-generierte Bilder
   Gehoert zu inc/ai-disclosure.php + assets/js/dsp-ai-badge.js

   Grundsatz: so dezent wie moeglich, aber zuverlaessig lesbar.
   Kontrast weiss auf rgba(15,20,24,.66) liegt auch ueber einem rein
   weissen Bild noch bei ca. 6:1 → WCAG AA erfuellt.

   Aufbau: aussen ein .dsp-ai-badge-slot (positioniert), innen das
   sichtbare .dsp-ai-badge. Der Slot ist bewusst ein <span> und kein <a>:
   das Theme setzt an vielen Stellen sehr spezifische Regeln auf
   ".woocommerce-product-gallery__image > a" (Bildflaeche auf volle
   Kachelgroesse). Ein <a> als direktes Kind wuerde dadurch auf
   Kachelgroesse aufgeblasen.
════════════════════════════════════════════════════════════════ */

/* Container, in den das Badge gesetzt wird (per JS vergeben) */
.dsp-ai-host {
    position: relative;
}

/* ── Slot: Positionierung ──────────────────────────────────────── */
.dsp-ai-badge-slot {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: 8px !important;
    bottom: 8px !important;

    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: calc(100% - 16px) !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;

    line-height: 0;
    z-index: 120;
    pointer-events: none;
}

.dsp-ai-badge-slot > .dsp-ai-badge {
    pointer-events: auto;
}

/* ── Badge ─────────────────────────────────────────────────────── */
.dsp-ai-badge {
    position: static;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin: 0;
    padding: 3px 7px;
    max-width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(15, 20, 24, 0.66);

    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.015em;
    white-space: nowrap;
    color: #ffffff;
    text-decoration: none;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

a.dsp-ai-badge:hover,
a.dsp-ai-badge:focus-visible {
    background: rgba(15, 20, 24, 0.86);
    border-color: rgba(255, 255, 255, 0.34);
    color: #ffffff;
    text-decoration: none;
}

a.dsp-ai-badge:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.dsp-ai-badge__icon {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    display: block;
    opacity: 0.9;
}

/* ── Kleine Bildflaechen (Thumbnails, Kacheln): nur Icon ───────── */
.dsp-ai-badge-slot--mini {
    right: 4px !important;
    bottom: 4px !important;
}

.dsp-ai-badge-slot--mini .dsp-ai-badge {
    padding: 2px;
    gap: 0;
    border-radius: 3px;
}

.dsp-ai-badge-slot--mini .dsp-ai-badge__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Hero der Startseite ───────────────────────────────────────── */
/* Das Hero-Bild liegt vollflaechig hinter dem Text (inset:0), der dunkle
   Verlauf davor hat z-index 2 → Badge muss darueber liegen.
   Position links unten statt rechts unten: rechts unten sitzt das
   Shopauskunft-Widget (.dsp-shopauskunft-above). Links liegt zudem der
   kraeftigste Teil des dunklen Verlaufs → beste Lesbarkeit. */
.dsp-ai-badge-slot--hero {
    left: 14px !important;
    right: auto !important;
    bottom: 12px !important;
    z-index: 5;
}

.dsp-ai-badge-slot--hero .dsp-ai-badge {
    background: rgba(9, 18, 15, 0.58);
    border-color: rgba(255, 255, 255, 0.22);
}

.dsp-ai-badge-slot--hero a.dsp-ai-badge:hover,
.dsp-ai-badge-slot--hero a.dsp-ai-badge:focus-visible {
    background: rgba(9, 18, 15, 0.82);
}

/* ── Kategorie-Kacheln der Startseite ──────────────────────────── */
/* Unten links sitzen Titel, Beschreibung und der "Entdecken"-Button.
   Frei ist die obere rechte Ecke. */
.dsp-cat-tile > .dsp-ai-badge-slot {
    top: 8px !important;
    bottom: auto !important;
    right: 8px !important;
}

/* ── Fallback ohne JavaScript: WooCommerce-Galerie-Kachel ──────── */
/* inc/ai-disclosure.php setzt .dsp-ai-image an die Galerie-Kachel. */
.woocommerce-product-gallery__image.dsp-ai-image {
    position: relative;
}

.woocommerce-product-gallery__image.dsp-ai-image::after {
    content: 'KI-generiert';
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 119;

    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(15, 20, 24, 0.66);

    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.015em;
    white-space: nowrap;
    color: #ffffff;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Sobald JS das eigene Badge gesetzt hat, entfaellt der CSS-Fallback,
   damit der Hinweis nicht doppelt erscheint. */
.woocommerce-product-gallery__image.dsp-ai-image.dsp-ai-host::after {
    content: none;
}

/* ── Erklaerseite: Legende ─────────────────────────────────────── */
.dsp-ai-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0.4rem 0 1.2rem;
    padding: 6px 10px;
    border: 1px solid #d7dde1;
    border-radius: 5px;
    background: #f5f7f8;
    font-size: 0.85rem;
    color: var(--text-mid, #555);
}

/* ── Mobil ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dsp-ai-badge-slot {
        right: 6px !important;
        bottom: 6px !important;
        max-width: calc(100% - 12px) !important;
    }

    .dsp-ai-badge,
    .woocommerce-product-gallery__image.dsp-ai-image::after {
        padding: 2px 6px;
        font-size: 10px;
    }

    .woocommerce-product-gallery__image.dsp-ai-image::after {
        right: 6px;
        bottom: 6px;
    }

    /* Mobil ist im Hero weder links noch rechts unten Platz: .dsp-hero__image
       ragt links ueber den Viewport hinaus, rechts liegt die feste
       Kategorien-Leiste (.dsp-cat-rail), unten das Shopauskunft-Widget.
       Freier Streifen ist die Mitte zwischen Checkliste und Widget. Die
       Zentrierung ist ausserdem unempfindlich gegen den seitlichen
       Ueberhang des Hero-Bildes. */
    .dsp-ai-badge-slot--hero {
        left: 50% !important;
        right: auto !important;
        bottom: 52px !important;
        transform: translateX(-50%);
    }

    .dsp-ai-badge__icon {
        width: 10px;
        height: 10px;
    }
}

/* ── Druck: Hinweis muss auch auf Papier erhalten bleiben ──────── */
@media print {
    .dsp-ai-badge {
        background: none;
        border-color: #666;
        color: #000;
        box-shadow: none;
    }
}