/*
 * Kennzeichnung KI-erzeugter Bilder
 *
 * ANLASS
 *
 * Seit August 2026 verlangt der EU AI Act, dass fotorealistische KI-Bilder
 * beim ersten Laden der Seite sichtbar gekennzeichnet sind.
 *
 * 🔴 WARUM DAS HIER STEHT UND NICHT IM MARKUP
 *
 * Die Seite laeuft unter einer strengen Content-Security-Policy. Ein
 * style="position: relative" im HTML wird vom Browser verworfen - das Label
 * saesse dann irgendwo auf der Seite statt auf dem Bild. Gestaltung gehoert
 * deshalb ausnahmslos hierher, im Markup stehen nur Klassennamen.
 *
 * 🔴 DAS LABEL IST EINE PFLICHTANGABE, KEINE ZIERDE
 *
 * Es darf deshalb nicht erst beim Ueberfahren erscheinen, nicht durch
 * darueberliegende Elemente verdeckt werden und nicht im Bild untergehen.
 * Daher: eigener Schlagschatten, kraeftiger Grund, hoher z-index.
 */

/* ===== Rahmen um das Bild ===== */

.ki-bild {
    position: relative;
    display: inline-block;
    /* Das Bild bestimmt die Groesse - der Rahmen darf nichts verschieben. */
    line-height: 0;
    max-width: 100%;
}

.ki-bild > img {
    max-width: 100%;
}

/* ===== Das Label ===== */

.ki-bild__hinweis {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 10;

    background: rgba(0, 0, 0, 0.68);
    color: #ffffff;
    /* Ein eigener Zeichensatz, damit das Label nicht mit einer Zierschrift
       des Themes unleserlich wird. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;

    padding: 2px 6px;
    border-radius: 3px;
    /* Auf sehr hellen Bildern traegt der Grund allein nicht weit genug. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);

    /* Der Hinweis wird nie versehentlich mitkopiert oder angeklickt. */
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

/* ===== Vorschaubild: nur das Kuerzel ===== */

.ki-bild--thumbnail .ki-bild__hinweis {
    right: 3px;
    bottom: 3px;
    font-size: 10px;
    padding: 1px 4px;
}

/* ===== Detailansicht und Hero: der vollstaendige Satz ===== */

.ki-bild--detail .ki-bild__hinweis,
.ki-bild--hero .ki-bild__hinweis {
    font-size: 12px;
    padding: 3px 8px;
}

/*
 * Hero-Banner: Das Bild wird ueber fit_mode/scale_percent skaliert und kann
 * ueber seinen Rahmen hinausragen. Das Label bleibt am sichtbaren Rand des
 * Rahmens - sonst schoebe eine Vergroesserung ueber 100 % es aus dem Bild.
 */
.ki-bild--hero {
    display: block;
    width: 100%;
    overflow: hidden;
}

.ki-bild--hero .ki-bild__hinweis {
    right: 10px;
    bottom: 10px;
}

/*
 * Das Label allein, ohne .ki-bild-Rahmen.
 *
 * Fuer Stellen, an denen das Bild bereits im Template steht und nicht
 * umgebaut werden kann - der Hero-Banner etwa liegt in einem eigenen
 * Container mit Verlaufsschleier und Aktionsflaeche. Der umgebende Container
 * bringt sein position: relative selbst mit.
 */
.ki-bild__hinweis--hero {
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    padding: 3px 8px;
    /* Ueber dem Schleier, der sonst den Text daempft. */
    z-index: 12;
}

.ki-bild__hinweis--thumbnail {
    right: 3px;
    bottom: 3px;
    font-size: 10px;
    padding: 1px 4px;
}

/*
 * 🔴 Der Bildkasten der Speisekarte traegt selbst KEIN position: relative.
 *
 * Nachgesehen in assets/css/style.css: weder .menu-list-layout
 * .menu-item-image noch .menu-grid-layout .menu-item-image setzen es. Ein
 * absolut gestelltes Label richtet sich dann am naechsten positionierten
 * Vorfahren aus - es landete irgendwo auf der Karte statt auf dem Bild.
 *
 * Nur dort nachgeruestet, wo tatsaechlich ein Label steht: Alle Bildkaesten
 * umzustellen haette Auswirkungen auf Anordnungen, die heute funktionieren.
 */
.menu-item-image:has(> .ki-bild__hinweis) {
    position: relative;
}

/*
 * Dasselbe fuer alle uebrigen Bildkaesten der Karte.
 *
 * Die Speisekarte rendert Artikel, Spar-Menues, Angebote und Combos in acht
 * beinahe wortgleichen Bloecken, deren Bildkaesten unterschiedlich heissen -
 * manche haben ueberhaupt keine eigene Klasse (`<div class="flex-shrink-0">`).
 * Statt acht Sonderregeln greift eine allgemeine.
 *
 * Sie wirkt ausschliesslich dort, wo tatsaechlich ein Label steht, also nur
 * an gekennzeichneten Bildern. Der eigene Rahmen .ki-bild bringt sein
 * position: relative schon mit und ist ausgenommen.
 */
:has(> .ki-bild__hinweis):not(.ki-bild) {
    position: relative;
}

.ki-bild__hinweis--detail {
    font-size: 12px;
    padding: 3px 8px;
}

/*
 * ===== Grossansicht (Bildergalerie) =====
 *
 * 🔴 DER GRUND, WARUM ES HIER EINE EIGENE REGEL BRAUCHT (20.09.2026)
 *
 * Gemeldet: "Text muss lesbar sein." Das Label sass in der Galerie am unteren
 * Rand des Anzeigebereichs - und der ist schwarz. Ein Schild aus
 * rgba(0, 0, 0, 0.68) auf schwarzem Grund ist kein Schild mehr, der Text
 * schwebte grau im Dunkeln.
 *
 * Deshalb hier: deckender Grund, heller Rand, groessere Schrift. Es ist eine
 * Pflichtangabe - sie muss man lesen koennen, ohne danach zu suchen.
 */
.gallery-main-display {
    position: relative;
}

.gallery-main-display .ki-bild__hinweis {
    right: 12px;
    bottom: 12px;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;

    /* Deckend statt durchscheinend - der Grund dahinter ist schwarz. */
    background: #1f2937;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    text-shadow: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* ===== Schmale Anzeigen ===== */

@media (max-width: 480px) {
    .ki-bild__hinweis {
        font-size: 10px;
        padding: 1px 5px;
    }

    /* Auf dem Telefon wuerde der volle Satz das halbe Bild verdecken -
       das Kuerzel bleibt lesbar und erfuellt den Zweck. */
    .ki-bild--detail .ki-bild__hinweis,
    .ki-bild--hero .ki-bild__hinweis {
        font-size: 11px;
        padding: 2px 6px;
    }
}

/* ===== Bei erhoehtem Kontrastbedarf ===== */

@media (prefers-contrast: more) {
    .ki-bild__hinweis {
        background: #000000;
        border: 1px solid #ffffff;
        text-shadow: none;
    }
}

/* ===== Druck ===== */

@media print {
    /* Auf Papier gilt die Angabe genauso - nur ohne Transparenz, die
       Drucker unterschiedlich wiedergeben. */
    .ki-bild__hinweis {
        background: #000000;
        color: #ffffff;
        text-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}