/*
 * Galerie mit Vorschaustreifen (Layout 4120).
 *
 * Nach dem Entwurf des Auftraggebers vom 2026-09-04. Übernommen sind Aufbau
 * und Maße: Karte mit Schatten, Bühne im Verhältnis 16:9, Vorschaubilder
 * 105x70 mit 3 Pixel Rahmen, Zähler unten rechts, Lupe oben rechts.
 *
 * Geändert ist die Farbe des aktiven Vorschaubildes: #1687ff aus dem Entwurf
 * gegen das Blau der Staffel (#398ee7). Gemessen gegen das Weiß der Karte
 * ergibt es 3,39:1 und hält damit die Schwelle von 3,0:1, die für Flächen und
 * Bedienelemente gilt.
 *
 * Eigene Datei und kein SCSS: sie wird nur auf Seiten mit dieser Galerie
 * geladen (siehe 67_Imagegrid.typoscript), main.css tragen alle Seiten.
 *
 * KEINE RUNDEN ECKEN, auf Ansage vom 2026-09-04. Der Entwurf hatte 16px an der
 * Karte, 12px an der Buehne, 9px an den Vorschaubildern und 8px am Zaehler.
 * Die Knoepfe bleiben rund - das sind Kreise und keine Ecken.
 */

.bw-streifen {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* --- Die Bühne ------------------------------------------------------------ */

.bw-streifen__buehne {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}

.bw-streifen__buehne-link {
    display: block;
    cursor: zoom-in;
}

.bw-streifen__buehne-bild {
    display: block;
    width: 100%;
    /*
     * aspect-ratio am Bild und nicht am Kasten: so kennt der Browser die Höhe,
     * bevor das Bild geladen ist, und der Inhalt darunter springt beim Laden
     * nicht nach unten.
     */
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}

.bw-streifen__stand {
    position: absolute;
    right: 14px;
    bottom: 14px;
    margin: 0;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1;
}

.bw-streifen__lupe {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 1.125rem;
    cursor: pointer;
}

.bw-streifen__lupe:hover,
.bw-streifen__lupe:focus-visible {
    background: rgba(0, 0, 0, 0.8);
}

/* --- Der Streifen -------------------------------------------------------- */

.bw-streifen__leiste {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.bw-streifen__blatt {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f3f5;
    color: #1f2937;
    cursor: pointer;
}

.bw-streifen__blatt:hover,
.bw-streifen__blatt:focus-visible {
    background: #e5e7eb;
}

.bw-streifen__blatt[disabled] {
    opacity: 0.35;
    cursor: default;
}

.bw-streifen__spur {
    display: flex;
    flex: 1;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Die Leiste selbst stört im Streifen mehr als sie hilft. */
    scrollbar-width: none;
}

.bw-streifen__spur::-webkit-scrollbar {
    display: none;
}

.bw-streifen__spur-glied {
    /* Gegen `.frame-default li { margin-bottom: 6px }` aus main.css. */
    margin: 0;
    flex: 0 0 auto;
}

.bw-streifen__vorschau {
    display: block;
    width: 105px;
    height: 70px;
    overflow: hidden;
    border: 3px solid transparent;
    cursor: pointer;
}

.bw-streifen__vorschau img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bw-streifen__vorschau--jetzt {
    border-color: #398ee7;
}

.bw-streifen__vorschau:focus-visible {
    outline: 2px solid #245f9e;
    outline-offset: 2px;
}

/* --- Die Großansicht ----------------------------------------------------- */

.bw-streifen__dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 30px;
    border: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
}

.bw-streifen__dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bw-streifen__dialog::backdrop {
    background: rgba(0, 0, 0, 0.9);
}

.bw-streifen__dialog-inhalt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    max-width: 95vw;
}

.bw-streifen__grossbild {
    max-width: 95vw;
    max-height: 82vh;
    object-fit: contain;
}

.bw-streifen__beschriftung {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    font-size: 0.9375rem;
    text-align: center;
}

.bw-streifen__dialog-stand {
    opacity: 0.7;
    white-space: nowrap;
}

.bw-streifen__zu,
.bw-streifen__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
}

.bw-streifen__zu:hover,
.bw-streifen__nav:hover,
.bw-streifen__zu:focus-visible,
.bw-streifen__nav:focus-visible {
    background: rgba(255, 255, 255, 0.3);
}

.bw-streifen__zu {
    top: 20px;
    right: 25px;
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
}

.bw-streifen__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 1.75rem;
}

.bw-streifen__nav--zurueck {
    left: 25px;
}

.bw-streifen__nav--vor {
    right: 25px;
}

/* --- Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 600px) {
    .bw-streifen {
        padding: 10px;
    }

    .bw-streifen__vorschau {
        width: 78px;
        height: 55px;
    }

    .bw-streifen__blatt {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .bw-streifen__nav {
        width: 42px;
        height: 42px;
    }

    .bw-streifen__nav--zurueck {
        left: 8px;
    }

    .bw-streifen__nav--vor {
        right: 8px;
    }

    .bw-streifen__dialog {
        padding: 12px;
    }
}

/*
 * Wer keine Bewegung will, bekommt keine: das sanfte Rollen des Streifens ist
 * Schmuck und lässt sich abstellen.
 */
@media (prefers-reduced-motion: reduce) {
    .bw-streifen__spur {
        scroll-behavior: auto;
    }
}

/*
 * Der Wechsel alle fuenf Sekunden (siehe bildstreifen.js) haelt an, solange
 * die Maus auf der Galerie liegt. Das ist nicht nur Bequemlichkeit: eine
 * Galerie, die unter dem Zeiger weiterlaeuft, ist nicht bedienbar.
 *
 * Sichtbar wird das am Zaehler - er wird blasser, solange es laeuft, und
 * steht voll da, wenn es haelt. Ohne dieses Zeichen weiss niemand, warum das
 * Bild manchmal wechselt und manchmal nicht.
 */
.bw-streifen--laeuft .bw-streifen__stand {
    opacity: 0.75;
}

.bw-streifen__stand {
    transition: opacity 0.2s ease;
}