/* Register 1 — Slide-Strecke. Scroll-Snap statt JS-Karussell:
   jeder Loop füllt den Viewport, die Caption ist der Eingang ins Werk. */
.slides {
    height: 100dvh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    /* Der Raum braucht keine Scrollbar — Zähler und Snap geben die Orientierung */
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.slides::-webkit-scrollbar { display: none; }

/* ---- Filterwechsel: die Strecke verschwimmt und kommt neu ----
   Dieselbe Sprache wie beim Scrollen zwischen den Slides: was nicht gilt,
   wird unscharf. Nur die Strecke bekommt einen eigenen Namen — Kopfzeile,
   Rail und Zähler bleiben stehen, sonst verschwämme die Bedienung mit.
   Ausgelöst von panek.js (document.startViewTransition).

   Den Namen trägt die Strecke nur während des Wechsels (.filtert am <html>).
   Dauerhaft vergeben, läge sie auch beim Seitenübergang zum Werk in einer
   eigenen Ebene — über der Seite, und die fährt dann ohne sie davon. */
.filtert .slides { view-transition-name: strecke; }

::view-transition-old(strecke) {
    animation: strecke-weg 0.35s ease-in both;
}

::view-transition-new(strecke) {
    /* Erst weg, dann her: gleichzeitig lägen zwei unscharfe Strecken
       übereinander und ergäben Matsch. */
    animation: strecke-her 0.5s ease-out 0.2s both;
}

@keyframes strecke-weg {
    to { opacity: 0; filter: blur(28px); }
}

@keyframes strecke-her {
    from { opacity: 0; filter: blur(28px); }
}

.slide {
    position: relative;
    height: 100dvh;
    scroll-snap-align: start;
}

/* Werk-Slide: das Bild läuft über die volle Breite, die Angaben liegen
   links darüber. Kein eigener Textgrund — der Loop soll ungeschnitten
   durchlaufen. */
.slide-werk { position: relative; }


/* Die Spalte reicht über den ganzen Slide, sonst hätte das sticky darin
   keinen Laufweg. Der Verlauf oben nimmt die weggeschobenen Angaben weg,
   bevor sie durch den Schriftzug laufen — ein Deckel ginge hier nicht,
   der stünde als Kasten im Bild. */
.slide-spalte {
    position: relative;
    z-index: 5;
    height: 100%;
    /* Breit genug, dass ein langer Titel in Garamond auf dem Desktop in zwei
       Zeilen passt („Finsternis der Barmherzigkeit | Darkness of Mercy"
       stand bei 30rem in drei). Der Grund liegt nur hinter der Schrift, das
       Bild bleibt daneben frei. */
    max-width: min(46rem, 60vw);
    /* Der Vorlauf hält die Angaben aus dem Ausblendband heraus — sonst
       kämen sie schon verblasst herein statt erst verblasst zu gehen. */
    padding: calc(var(--bar-height) + 1.25rem) 0 0 1.25rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0,
        transparent calc(var(--bar-height) * 0.5), #000 calc(var(--bar-height) + 1.25rem));
    mask-image: linear-gradient(to bottom, transparent 0,
        transparent calc(var(--bar-height) * 0.5), #000 calc(var(--bar-height) + 1.25rem));
}

/* sticky statt absolut: die Angaben bleiben oben stehen, bis die des
   nächsten Slides sie hochschieben. */
.slide-caption {
    position: sticky;
    top: calc(var(--bar-height) + 1.25rem);
    display: block;
    padding-bottom: 2rem;
}

/* Der Grund sitzt am Inline-Kasten, nicht am Absatz: nur so bricht er pro
   Zeile um und die Kante folgt dem Flattersatz statt einem Rechteck.
   Seitlich ein fester Abstand in rem, nicht in em: sonst hätte der große
   Titel mehr Luft als die kleinen Zeilen darunter, und deren Text stünde
   nicht bündig unter dem Titel. */
.slide-caption span {
    background: var(--ink-black);
    padding: 0.08em 0.6rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Der Titel in Garamond, gerade und nicht fett: die Ruhe kommt aus der
   Schrift, nicht aus Fettung oder Versalien. Die Werkart darunter bleibt
   Grotesk und ordnet nur ein — deutlich kleiner und in Asche. */
.slide-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 3.5vw, 3.3rem);
    /* Nicht enger: der schwarze Grund jeder Zeile ist rund 1,37 em hoch
       (Garamond hat lange Unterlängen). Bei weniger Zeilenhöhe deckt der
       Balken der zweiten Zeile die Unterlängen der ersten ab — das g in
       „Adagio Largo". */
    line-height: 1.4;
    letter-spacing: 0;
    text-wrap: balance;
}

/* Wie die Kennung auf der Komplexseite: Versalien, weit gesperrt, rot. */
.slide-kennung {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--blood);
}

.slide-untertitel {
    margin-top: 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--ash);
}

.slide-caption:hover .slide-title { color: var(--blood); }

.slide-mehr {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: var(--blood);
}

/* Die Bildbahn trägt den Blur beim Scrollen (siehe dummy.js) — läge er auf
   dem ganzen Slide, verlöre die Caption ihr sticky und würde mitwischen. */
.slide-buehne {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Bild-Slides sitzen im selben Kasten wie die Loops: ein Slide muss kein
   Bewegtbild tragen. */
.slide-video,
.slide-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--ink-black) center / cover no-repeat;
}

@media (max-width: 52rem) {
    .slide-spalte { max-width: none; padding-right: 1.25rem; }
}

/* ---- Vita-Slide: der Einstieg sagt erst, wer sie ist ---- */
.slide-vita {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1.25rem;
}

.slide-vita > :not(.vita-bilder) { position: relative; z-index: 1; }

/* Die Startbilder unverändert, ohne Abdunkeln: gestapelt, panek.js wechselt
   nur .aktiv. Überblendung wie in der Fotostrecke. */
.vita-bilder {
    position: absolute;
    inset: 0;
}

.vita-bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.vita-bild.aktiv { opacity: 1; }

.vita-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* ohne Abdunkeln liegt der Name auch auf hellen Bildern */
    text-shadow: 0 0 14px rgba(16, 14, 12, 0.9);
}

.vita-rollen {
    /* die eine Kursiv-Störung dieser Seite */
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--blood);
}

.vita-text {
    margin-top: 1.25rem;
    max-width: 32rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--bone);
    text-shadow: 0 0 14px rgba(16, 14, 12, 0.9);
}

.slide-counter {
    position: fixed;
    right: 1.25rem;
    bottom: 1.5rem;
    z-index: 10;
    font: 0.85rem var(--font-mono);
    letter-spacing: 0.08em;
    text-shadow: 0 1px 12px rgba(16, 14, 12, 0.95);
    opacity: 0; /* erst ab dem ersten Werk-Slide, nicht auf der Vita */
    transition: opacity 0.3s ease;
}

.slide-counter.aktiv { opacity: 1; }

/* ---- Der nächste Termin auf dem Startbildschirm ----
   Eine Zeile, kein Kasten: sie soll die Vita nicht unterbrechen, sondern
   unter ihr liegen wie eine Fußnote, die zufällig aktuell ist. */
.vita-termin {
    margin-top: 2rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-shadow: 0 0 14px rgba(16, 14, 12, 0.9);
}

.vita-termin a {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: baseline;
    color: var(--bone);
    border-bottom: 1px solid transparent;
}

.vita-termin a:hover { border-bottom-color: var(--blood); }

.vt-marke {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--blood);
}

.vt-datum { font-variant-numeric: tabular-nums; }
.vt-ort { color: var(--ash); }

/* ---- Filter der Werkübersicht ----
   Anetas Rubriken, klein in der Kopfzeile neben dem Namen. Sichtbar nur,
   solange man in der Strecke steht: auf dem Startbildschirm gibt es nichts
   zu filtern. body.in-strecke setzt panek.js. */
.werkfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

.werkfilter button {
    /* Die Trefferfläche ist höher als die Schrift, die Kopfzeile nicht */
    padding: 0.6rem 0;
    border: 0;
    background: none;
    color: var(--ash);
    font: inherit;
    letter-spacing: 0.04em;
    text-align: inherit;
    text-transform: lowercase;
    cursor: pointer;
}

.werkfilter button:hover { color: var(--bone); }

/* Aktiv wie in der Rail: nur über Farbe */
.werkfilter button[aria-pressed="true"] { color: var(--blood); }

.werkfilter-kopf {
    margin: 0 auto 0 2.5rem;
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.in-strecke .werkfilter-kopf {
    opacity: 1;
    visibility: visible;
}

/* Schmal ist neben dem Namen kein Platz. Dort steht der Filter im
   aufklappbaren Menü, direkt unter „works", zu dem er gehört. */
.werkfilter-menue { display: none; }

@media (max-width: 44rem) {
    .werkfilter-kopf { display: none; }

    .werkfilter-menue { display: flex; }

    .rail.offen .werkfilter-menue { font-size: 1.1rem; }
}

/* Nachweis für fremdes Material im Loop: klein unten rechts, über dem
   Seitenzähler, der dort fest steht. Auf schwarzem Grund wie Titel und Jahr
   links oben — ein Schatten allein trug auf hellen Bildern nicht (Lullaby).
   Leise in Asche: er muss dastehen, nicht auffallen. */
.slide-nachweis {
    position: absolute;
    right: 1.25rem;
    bottom: 3.4rem;
    max-width: min(22rem, 60vw);
    text-align: right;
    font-size: 0.72rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--ash);
}

.slide-nachweis span {
    background: var(--ink-black);
    padding: 0.15em 0.5rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}