/* 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; }

.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%;
    max-width: min(30rem, 46vw);
    /* 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. */
.slide-caption span {
    background: var(--ink-black);
    padding: 0.08em 0.35em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Beide Zeilen Grotesk und kursiv. Der Titel trägt, die Werkart ordnet
   nur ein — deshalb deutlich kleiner und in Asche. */
.slide-title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.slide-untertitel {
    margin-top: 0.35rem;
    font-family: var(--font-ui);
    font-weight: 500;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--ash);
}

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

.slide-teaser {
    margin-top: 1.1rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--bone);
    max-width: 24rem;
}

.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;
}

.slide-video {
    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;
    /* die skalierte Noise-Canvas darf nicht über den Slide hinauslaufen */
    overflow: hidden;
}

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

.vita-noise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* sanfter Blur als letzter Pass; scale kaschiert die Blur-Ränder */
    filter: blur(2.5px);
    transform: scale(1.02);
}

.vita-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 0.9;
    text-transform: uppercase;
}

.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);
}

/* Letzter Slide: die Bibliothek liegt am Ende des Raums */
.slide-index {
    display: block;
    padding: calc(var(--bar-height) + 1rem) 12rem 3rem 1.25rem;
    overflow-y: auto;
    scrollbar-width: none;
}

.slide-index::-webkit-scrollbar { display: none; }

.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; }