/* Fotostrecke — am Werk und auf Textseiten.

   Ohne Skript stehen die Bilder untereinander. Erst .laeuft (vom Skript
   gesetzt) stapelt sie in eine Zelle und blendet über. */

.fotostrecke { margin: 1.75rem 0 0; }

.fs-buehne {
    display: grid;
    gap: 1rem;
    background: #000;
}

.fs-bild {
    display: block;
    width: 100%;
    height: auto;
    max-height: 75dvh;
    object-fit: contain;
}

/* Gestapelt über ein Raster statt über position:absolute: die Zelle ist so
   hoch wie das höchste Bild. Hoch- und Querformate wechseln sich ab, ohne
   dass die Seite darunter springt. */
.fotostrecke.laeuft .fs-buehne { gap: 0; }

.fotostrecke.laeuft .fs-bild {
    grid-area: 1 / 1;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.fotostrecke.laeuft .fs-bild.aktiv { opacity: 1; }

/* Leiste unter dem Bild: Steuerung links, Nachweis rechts daneben.
   Gleicher leiser Satz wie der Bildnachweis sonst. */
.fs-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 1.25rem;
    margin-top: 0.45rem;
}

.fs-leiste .bildnachweis { margin-top: 0; }

.fs-steuerung {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ash);
    font-variant-numeric: tabular-nums;
}

.fs-steuerung[hidden] { display: none; }

.fs-steuerung button {
    background: none;
    border: 0;
    padding: 0 0.15rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--bone);
    cursor: pointer;
}

.fs-steuerung button:hover,
.fs-steuerung button:focus-visible { color: var(--blood); }

/* Ohne Skript stehen alle Bilder da, der Nachweis in der Leiste gehört aber
   nur zum ersten. Dann lieber keiner als ein falscher. */
.fotostrecke[data-fotostrecke]:not(.laeuft) .fs-nachweis { display: none; }

/* Unten auf der Werkseite: Abstand wie die Videos daneben. */
.werk-fotostrecke { margin-top: 2.5rem; }
.werk-fotostrecke .fotostrecke { margin-top: 0; }

/* Auf Textseiten sitzt die Strecke unter einer Blocküberschrift. */
.seite-block .fotostrecke { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .fotostrecke.laeuft .fs-bild { transition: none; }
}