/*
 * Familie "album" für Stage-Specials (scene.template = "album").
 * Fotoalbum: schwarze Albumseite, Abzüge mit weißem Rand und Klebeband, Etiketten-Schlagzeile (Prägeband),
 * Schreibmaschinenzettel, Stationsliste, Eintrittskarte.
 * Alle Maße in Container-Einheiten (cqw): 100cqw = Breite der Bühne (Kiosk: 2160 px).
 * Vertrag: docs/ribery-special.md (ALB-01 bis ALB-12).
 */

.stage-special-scene.album-scene {

    --al-page: #171412;
    --al-page-light: #231e1b;
    --al-cream: #f2e9d8;
    --al-cream-soft: rgba(242, 233, 216, .9);
    --al-print: #f6f1e6;
    --al-ink: #1c1815;
    --al-red: #dc052d;
    --al-type: "Courier New", "Liberation Mono", ui-monospace, monospace;

    inset: 0;
    display: block;
    container-type: size;
    background:
        radial-gradient(120cqw 80cqw at 50% 0%, rgba(255, 255, 255, .06), transparent 60%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 .3cqw, transparent .3cqw .6cqw),
        linear-gradient(180deg, var(--al-page-light), var(--al-page));
    color: var(--al-cream);
    transform: none;
    transition: opacity 900ms ease;
    overflow: hidden;
    z-index: 2;

}

.album-scene * { box-sizing: border-box; }

#stage.has-album .stage-rotation-indicator[data-mode="slide"] { opacity: 0; }

/* ---------- Slides ---------- */

.al-slides { position: absolute; inset: 0; }

.album-slide.stage-special-slide {

    /* Echte Bühne ca. 100 x 107 cqw: Etikett, Abzug und Text teilen sich die Höhe, Text wird nie abgeschnitten. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.4cqw;
    padding: 12cqw 6cqw 19.5cqw;
    transform: none;
    transition: opacity 900ms ease;
    overflow: hidden;

}

/* ---------- Kopf der Seite: Zeile und Prägeband-Etikett ---------- */

.al-head { position: relative; z-index: 4; flex: 0 0 auto; }

.al-kicker {

    display: flex;
    align-items: center;
    gap: 1.4cqw;
    margin: 0 0 1.4cqw;
    color: var(--al-cream-soft);
    font-family: var(--al-type);
    font-size: 2.4cqw;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;

}

.al-kicker i { width: 4cqw; height: .3cqw; background: var(--al-red); }
.al-kicker:empty { display: none; }

.al-head h2 { margin: 0; line-height: 1; }

.al-head h2 span {

    display: inline;
    padding: .5cqw 1.8cqw;
    background: var(--al-red);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: #fff;
    font-family: var(--font-display);
    font-size: 6cqw;
    font-weight: 900;
    line-height: 1.38;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-shadow: .12cqw .12cqw 0 rgba(0, 0, 0, .35), -.08cqw -.08cqw 0 rgba(255, 255, 255, .25);
    box-shadow: 0 .5cqw 1.2cqw rgba(0, 0, 0, .4);

}

.al-subtitle {

    margin: 1.6cqw 0 0;
    color: var(--al-cream);
    font-family: var(--font-display);
    font-size: 3cqw;
    font-weight: 800;
    line-height: 1.15;

}

.album-slide.is-active .al-head > * { animation: al-rise 800ms cubic-bezier(.2, .7, .2, 1) both; }
.album-slide.is-active .al-head > :nth-child(2) { animation-delay: 120ms; }
.album-slide.is-active .al-head > :nth-child(3) { animation-delay: 240ms; }

@keyframes al-rise {

    from { opacity: 0; transform: translateY(2cqw); }
    to { opacity: 1; transform: none; }

}

/* ---------- Medienbereich: Abzug mit Klebeband ---------- */

.al-media { position: relative; flex: 1 1 0; min-height: 14cqw; }

.al-photo {

    position: absolute;
    inset: 1.4cqw 1.2cqw 1cqw;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5cqw 1.5cqw 0;
    background: var(--al-print);
    box-shadow: 0 1cqw 2.6cqw rgba(0, 0, 0, .65), 0 .15cqw .3cqw rgba(0, 0, 0, .5);
    transform: rotate(var(--al-tilt, 0deg));

}

/* Klebeband oben links und rechts unten */
.al-photo::before,
.al-photo::after {

    content: "";
    position: absolute;
    z-index: 2;
    width: 11cqw;
    height: 3.4cqw;
    background: rgba(242, 233, 216, .62);
    box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .25);

}

.al-photo::before { top: -1.7cqw; left: 6cqw; transform: rotate(-5deg); }
.al-photo::after { right: 5cqw; bottom: -1.5cqw; transform: rotate(4deg); }

.al-photo img {

    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    object-fit: cover;
    object-position: var(--al-focus, 50% 50%);
    display: block;
    background: #000;

}

/* ALB-10: Hochformat- oder kleine Fotos (slide.fit = "contain") stehen ganz auf der schwarzen Fläche. */
.al-fit-contain .al-photo img { object-fit: contain; }

.al-photo figcaption {

    flex: 0 0 auto;
    padding: 1.1cqw .4cqw 1.4cqw;
    color: var(--al-ink);
    font-family: var(--al-type);
    font-size: 1.95cqw;
    font-weight: 700;
    line-height: 1.25;

}

/* Abzug wird eingeklebt: fällt leicht von oben auf, Band erscheint danach */
.album-slide.is-active .al-photo { animation: al-stick 900ms cubic-bezier(.2, .8, .25, 1) both; }
.album-slide.is-active .al-photo::before,
.album-slide.is-active .al-photo::after { animation: al-fade 500ms ease 700ms both; }

@keyframes al-stick {

    from { opacity: 0; transform: translateY(-3cqw) rotate(calc(var(--al-tilt, 0deg) * -2.5)) scale(1.04); }
    to { opacity: 1; transform: rotate(var(--al-tilt, 0deg)); }

}

@keyframes al-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Text ---------- */

.al-copy { position: relative; z-index: 4; flex: 0 0 auto; }

.al-body {

    max-width: none;
    margin: 0 0 1.2cqw;
    color: var(--al-cream-soft);
    font-family: var(--font-body);
    font-size: 2.8cqw;
    line-height: 1.28;

}

.al-body:first-child::first-letter { color: var(--al-red); font-family: var(--font-display); font-weight: 900; }

.album-slide.is-active .al-copy > * { animation: al-rise 900ms cubic-bezier(.2, .7, .2, 1) 350ms both; }

.al-quote { margin: 1.4cqw 0 0; padding: 1.4cqw 0 0; border-top: .25cqw dashed rgba(242, 233, 216, .4); }
.al-quote p { margin: 0; color: var(--al-cream); font-family: var(--font-display); font-size: 3.3cqw; font-weight: 800; line-height: 1.15; }
.al-quote footer { margin-top: .9cqw; color: var(--al-red); font-family: var(--al-type); font-size: 2cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.al-facts { position: relative; z-index: 4; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 1cqw; }

.al-facts span {

    padding: .6cqw 1.5cqw;
    border: .2cqw solid rgba(242, 233, 216, .55);
    color: var(--al-cream);
    font-family: var(--al-type);
    font-size: 2.1cqw;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;

}

/* Große Umrisszahl als Leitmotiv für Slides ohne Foto (slide.big) */

.al-big {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 14cqw;
    color: transparent;
    -webkit-text-stroke: .3cqw rgba(242, 233, 216, .16);
    font-family: var(--font-display);
    font-size: 34cqw;
    font-weight: 900;
    line-height: .8;
    text-align: center;
    letter-spacing: -.02em;
    pointer-events: none;

}

.album-slide.is-active .al-big { animation: al-fade 1400ms ease both; }

.album-slide.no-media .al-copy { margin-top: 2cqw; }
.album-slide.no-media .al-body { font-size: 3.3cqw; }
.al-layout-zitat.no-media .al-quote p { font-size: 4.4cqw; }

/* ---------- Layout titel (ALB-03) ---------- */

.al-layout-titel .al-head h2 span { font-size: 6.4cqw; line-height: 1.34; }
.al-layout-titel .al-subtitle { margin-top: 1.2cqw; font-size: 2.7cqw; }
.al-layout-titel .al-facts span { font-size: 1.9cqw; }

/* ---------- Layout karte: Eintrittskarte (ALB-08) ---------- */

.al-media-ticket { display: flex; flex-direction: column; gap: 2.6cqw; min-height: 34cqw; }

.al-ticket {

    position: relative;
    flex: 0 0 auto;
    margin: 0 1.2cqw;
    padding: 2.6cqw 3cqw;
    background: var(--al-cream);
    color: var(--al-ink);
    box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .6);
    transform: rotate(-.6deg);
    /* Eingerissene Kanten links und rechts */
    -webkit-mask: radial-gradient(circle 1.6cqw at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 1.6cqw at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 1.6cqw at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 1.6cqw at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;

}

.al-ticket-main { padding-bottom: 1.6cqw; border-bottom: .3cqw dashed rgba(28, 24, 21, .45); }

.al-ticket-label { margin: 0 0 1cqw; color: var(--al-red); font-family: var(--al-type); font-size: 2cqw; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-align: center; }

.al-ticket-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; }

.al-team { font-family: var(--font-display); font-size: 3.4cqw; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.al-team-away { text-align: right; }

.al-score { display: flex; align-items: baseline; gap: 1cqw; font-family: var(--font-display); font-size: 9.6cqw; font-weight: 900; line-height: .9; }
.al-score i { color: var(--al-red); font-style: normal; }

.al-ticket-note { margin: 1cqw 0 0; font-family: var(--al-type); font-size: 2cqw; font-weight: 700; text-align: center; }

.al-goals { list-style: none; margin: 1.4cqw 0 0; padding: 0; display: grid; gap: .7cqw; }

.al-goals li { display: flex; align-items: baseline; gap: 1.6cqw; opacity: 0; font-family: var(--al-type); font-size: 2.4cqw; font-weight: 700; }
.al-goals li b { min-width: 7.5cqw; color: var(--al-red); }
.al-goals li small { color: rgba(28, 24, 21, .72); font-size: 1.95cqw; }
.al-goals li.is-away { padding-left: 3cqw; }

.album-slide.is-active .al-goals li { animation: al-rise 700ms cubic-bezier(.2, .7, .2, 1) var(--al-goal-delay, 700ms) both; }

.al-photo-small { position: relative; inset: auto; flex: 1 1 0; min-height: 14cqw; margin: 0 1.2cqw; }

/* ---------- Layout zahlen (ALB-06) ---------- */

.al-media-stats { display: flex; flex-direction: column; gap: 2.4cqw; min-height: 18cqw; }
.al-media-stats .al-photo { position: relative; inset: auto; flex: 1 1 0; min-height: 16cqw; margin: 1.4cqw 1.2cqw 0; }

.al-stats { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8cqw; padding: 0 .6cqw; }
.al-stats[data-count="1"] { grid-template-columns: 1fr; }
.al-stats[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.al-media-stats:not(.has-photo) { justify-content: center; }
.al-media-stats:not(.has-photo) .al-stat strong { font-size: 7.4cqw; }

/* Etikett-Kacheln: Zettel mit Stempelzahl */
.al-stat { padding: 1.8cqw 2cqw; background: var(--al-cream); box-shadow: 0 .6cqw 1.4cqw rgba(0, 0, 0, .5); transform: rotate(-.5deg); }
.al-stat:nth-child(even) { transform: rotate(.6deg); }

.al-stat strong { display: block; color: var(--al-ink); font-family: var(--font-display); font-size: 5cqw; font-weight: 900; line-height: .95; white-space: nowrap; }
.al-stat small { display: block; margin-top: .8cqw; color: var(--al-red); font-family: var(--al-type); font-size: 2cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.album-slide.is-active .al-stat { animation: al-rise 800ms cubic-bezier(.2, .7, .2, 1) 500ms both; }
.album-slide.is-active .al-stat:nth-child(2) { animation-delay: 700ms; }
.album-slide.is-active .al-stat:nth-child(3) { animation-delay: 900ms; }
.album-slide.is-active .al-stat:nth-child(4) { animation-delay: 1100ms; }

/* ---------- Layout zitat (ALB-09): Schreibmaschinenzettel ---------- */

.al-layout-zitat .al-head h2 span { font-size: 5cqw; }

.al-layout-zitat .al-quote {

    position: relative;
    margin: 0 1cqw;
    padding: 5.4cqw 3.4cqw 2.6cqw;
    border: 0;
    background: var(--al-cream);
    box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .6);
    transform: rotate(.5deg);

}

.al-layout-zitat .al-quote::before {

    content: "\201E";
    position: absolute;
    top: -.2cqw;
    left: 2.4cqw;
    color: var(--al-red);
    font-family: var(--font-display);
    font-size: 13cqw;
    font-weight: 900;
    line-height: 1;

}

.al-layout-zitat .al-quote p { color: var(--al-ink); font-family: var(--al-type); font-size: 3.6cqw; font-weight: 700; line-height: 1.22; padding-left: 7cqw; }
.al-layout-zitat .al-quote footer { padding-left: 7cqw; }

/* ---------- Layout galerie (ALB-05) ---------- */

.al-media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.al-media-duo .al-photo { position: relative; inset: auto; min-height: 20cqw; margin: 1.8cqw 0 1cqw; }
.al-media-duo .al-photo:nth-child(2) { transform: rotate(calc(var(--al-tilt, 0deg) * -1.2)); }
.al-media-duo .al-photo:only-child { grid-column: 1 / -1; }

/* ---------- Layout etappen (ALB-07): Stationsliste ---------- */

.al-media-stations { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }

.al-stations {

    list-style: none;
    margin: 0 1cqw;
    padding: 2cqw 3cqw;
    display: grid;
    gap: .9cqw;
    background: var(--al-cream);
    color: var(--al-ink);
    box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .6);
    transform: rotate(-.4deg);

}

.al-stations li {

    display: grid;
    grid-template-columns: 17cqw 1fr;
    grid-template-areas: "year place" "year note";
    column-gap: 2cqw;
    align-items: baseline;
    padding-bottom: .8cqw;
    border-bottom: .22cqw dashed rgba(28, 24, 21, .35);
    opacity: 0;

}

.al-stations li:last-child { padding-bottom: 0; border-bottom: 0; }

.al-stations b { grid-area: year; color: var(--al-red); font-family: var(--al-type); font-size: 2.7cqw; font-weight: 700; letter-spacing: .02em; }
.al-stations strong { grid-area: place; font-family: var(--font-display); font-size: 3.2cqw; font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.al-stations small { grid-area: note; font-family: var(--al-type); font-size: 2cqw; font-weight: 700; line-height: 1.25; color: rgba(28, 24, 21, .78); }

.album-slide.is-active .al-stations li { animation: al-rise 700ms cubic-bezier(.2, .7, .2, 1) var(--al-row-delay, 500ms) both; }

/* ---------- Kopfzeile: Albumtitel ---------- */

.al-header {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 1.8cqw 5cqw;
    background: rgba(10, 8, 7, .78);
    border-bottom: .25cqw solid rgba(242, 233, 216, .35);

}

.al-header img { width: 6cqw; height: auto; }

.al-title { min-width: 0; display: grid; gap: .5cqw; font-family: var(--font-display); text-transform: uppercase; }
.al-title strong { color: var(--al-cream); font-size: 3.2cqw; font-weight: 900; letter-spacing: .08em; line-height: 1; }
.al-title span { color: var(--al-red); font-family: var(--al-type); font-size: 2cqw; font-weight: 700; letter-spacing: .1em; }

.al-chapter-now { flex: 0 0 auto; margin-left: auto; text-align: right; text-transform: uppercase; white-space: nowrap; }
.al-chapter-now.is-empty { visibility: hidden; }
.al-chapter-now small { display: block; color: var(--al-cream-soft); font-family: var(--al-type); font-size: 1.9cqw; font-weight: 700; letter-spacing: .14em; }
.al-chapter-now strong { display: block; margin-top: .5cqw; color: var(--al-cream); font-family: var(--font-display); font-size: 3.2cqw; font-weight: 900; letter-spacing: .08em; }

/* ---------- Fußleiste: Bildnummer, Fortschritt, Albumseiten (SPEC-31) ---------- */

.al-foot {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 2.4cqw;
    padding: 1.6cqw 5cqw 3cqw;
    background: linear-gradient(0deg, var(--al-page) 60%, transparent);

}

.al-nr { grid-row: 2; grid-column: 1; display: flex; align-items: baseline; gap: .5cqw; padding: .7cqw 1.4cqw; background: var(--al-cream); color: var(--al-ink); font-family: var(--font-display); font-weight: 900; }
.al-nr small { margin-right: .8cqw; color: var(--al-red); font-family: var(--al-type); font-size: 2cqw; letter-spacing: .1em; text-transform: uppercase; }
.al-nr b { min-width: 5.4cqw; font-size: 5cqw; line-height: 1; text-align: right; }
.al-nr i { font-size: 2.6cqw; font-style: normal; opacity: .7; }
.al-nr span { font-size: 3cqw; opacity: .8; }

.al-track { grid-row: 2; grid-column: 2; display: flex; gap: .35cqw; }
.al-bar { position: relative; flex: 1; height: 1.4cqw; overflow: hidden; background: rgba(242, 233, 216, .2); }
.al-bar.is-chapter-start { margin-left: 1.4cqw; }
.al-bar i { position: absolute; inset: 0; width: 0; background: var(--al-red); }
.al-bar.is-past i { width: 100%; background: var(--al-cream); }
.al-bar.is-current i { animation: al-fill linear both; }

@keyframes al-fill { from { width: 0; } to { width: 100%; } }

.al-chapters { grid-column: 1 / -1; grid-row: 1; display: flex; gap: .4cqw; margin: 0 0 1.2cqw; font-family: var(--font-display); }
.al-chapters span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .5cqw 0 .6cqw; border-bottom: .5cqw solid transparent; color: var(--al-cream-soft); text-align: center; font-size: 2cqw; font-weight: 800; opacity: .75; transition: opacity 600ms ease, color 600ms ease; }
.al-chapters span.is-current { color: var(--al-cream); border-bottom-color: var(--al-red); opacity: 1; }
.al-chapters[data-count="0"] { display: none; }

/* =====================================================================================================
   Variante "lehrer" (scene.variant, LAT-20 bis LAT-24): Schultafel statt Albumseite.
   Grund: tiefes Tafelgrün mit Kreidewischern, Holzrahmen mit rotem Streifen, roter Kreidestrich unter der Schlagzeile,
   Schwamm-Wisch beim Slidewechsel. Abzüge, Etikett, Zettel und Ticket bleiben (Familie album).
   Der Selektor hängt am Marker .al-header[data-variant]; ohne Variante ändert sich nichts (SPEC-35).
   ===================================================================================================== */

.stage-special-scene.album-scene:has(.al-header[data-variant="lehrer"]) {

    --al-page: #0b1a14;
    --al-page-light: #14291f;
    --al-cream: #f4f1e6;
    --al-cream-soft: rgba(244, 241, 230, .92);

    background:
        radial-gradient(60cqw 28cqw at 22% 18%, rgba(255, 255, 255, .075), transparent 70%),
        radial-gradient(50cqw 24cqw at 82% 62%, rgba(255, 255, 255, .055), transparent 70%),
        radial-gradient(40cqw 16cqw at 40% 94%, rgba(255, 255, 255, .05), transparent 70%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 .25cqw, transparent .25cqw 3.2cqw),
        linear-gradient(180deg, var(--al-page-light), var(--al-page));
    box-shadow:
        inset 0 0 0 1.2cqw #3b2a1b,
        inset 0 0 0 1.55cqw #dc052d,
        inset 0 0 0 1.75cqw #2a1d12,
        inset 0 0 14cqw rgba(0, 0, 0, .55);

}

.al-header[data-variant="lehrer"] { background: rgba(6, 14, 10, .82); border-bottom: .3cqw solid rgba(244, 241, 230, .45); margin: 1.75cqw 1.75cqw 0; padding: 1.4cqw 3.4cqw; }

/* Roter Kreidestrich unter der Schlagzeile, wird von links gezogen. */
.album-scene:has(.al-header[data-variant="lehrer"]) .al-head::after {

    content: "";
    display: block;
    width: 62%;
    height: .6cqw;
    margin-top: 1.4cqw;
    background: linear-gradient(90deg, #dc052d 0 70%, rgba(220, 5, 45, .55) 70% 82%, transparent 82% 86%, #dc052d 86% 100%);
    border-radius: .3cqw;
    transform-origin: 0 50%;
    transform: scaleX(0);

}

.album-scene:has(.al-header[data-variant="lehrer"]) .album-slide.is-active .al-head::after { animation: al-chalk-draw 900ms cubic-bezier(.3, .7, .2, 1) 420ms forwards; }

/* Schwamm-Wisch: ein heller Streifen fährt beim Slidewechsel einmal quer über die Tafel. */
.album-scene:has(.al-header[data-variant="lehrer"]) .album-slide::after {

    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -40%;
    width: 36%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .17), transparent);
    transform: skewX(-14deg) translateX(0);
    opacity: 0;
    pointer-events: none;
    z-index: 5;

}

.album-scene:has(.al-header[data-variant="lehrer"]) .album-slide.is-active::after { animation: al-sponge 1400ms ease-out 120ms both; }

@keyframes al-chalk-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes al-sponge {

    0% { opacity: 0; transform: skewX(-14deg) translateX(0); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: skewX(-14deg) translateX(420%); }

}

/* =====================================================================================================
   Backdrop-Preset "kreide" (QS-11, LAT-22): Kreidestaub steigt auf, das Foto atmet, der Schein pocht,
   die Acht glimmt wie frisch an die Tafel geschrieben. Passt zu: Lehrer, Trainer-Legenden, ruhige Würde mit Funken.
   Regeln wie in special-backdrop.css: nur transform/opacity, läuft nur in der Arena-Pause, kein JavaScript.
   ===================================================================================================== */

.stage-special-backdrop[data-anim="kreide"],
.stage-special-backdrop[data-anim="kreide"] *,
.stage-special-backdrop[data-anim="kreide"]::before,
.stage-special-backdrop[data-anim="kreide"]::after { animation-play-state: paused; }

#frame:has(.arena-svg-scene.is-stage-active) .stage-special-backdrop[data-anim="kreide"],
#frame:has(.arena-svg-scene.is-stage-active) .stage-special-backdrop[data-anim="kreide"] *,
#frame:has(.arena-svg-scene.is-stage-active) .stage-special-backdrop[data-anim="kreide"]::before,
#frame:has(.arena-svg-scene.is-stage-active) .stage-special-backdrop[data-anim="kreide"]::after { animation-play-state: running; }

.stage-special-backdrop[data-anim="kreide"] .stage-special-ghost { opacity: 0; }

.stage-special-backdrop[data-anim="kreide"] > img:not(.stage-special-ghost) { animation: qs-bd-breathe 9s ease-in-out infinite; }
.stage-special-backdrop[data-anim="kreide"]::before { animation: qs-bd-ember-pulse 5.2s ease-in-out infinite; }

.stage-special-backdrop[data-anim="kreide"]::after {

    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    will-change: transform, opacity;
    background-image:
        radial-gradient(circle at 9% 22%, rgba(255, 255, 255, .95) 0 .22vw, rgba(255, 255, 255, .28) .4vw, transparent .75vw),
        radial-gradient(circle at 24% 68%, rgba(255, 255, 255, .9) 0 .3vw, rgba(255, 255, 255, .25) .5vw, transparent .9vw),
        radial-gradient(circle at 39% 14%, rgba(220, 5, 45, 1) 0 .34vw, rgba(220, 5, 45, .35) .55vw, transparent 1vw),
        radial-gradient(circle at 52% 52%, rgba(255, 255, 255, .95) 0 .18vw, rgba(255, 255, 255, .25) .34vw, transparent .65vw),
        radial-gradient(circle at 63% 86%, rgba(255, 255, 255, .9) 0 .28vw, rgba(255, 255, 255, .25) .46vw, transparent .85vw),
        radial-gradient(circle at 71% 34%, rgba(220, 5, 45, 1) 0 .26vw, rgba(220, 5, 45, .3) .44vw, transparent .8vw),
        radial-gradient(circle at 84% 62%, rgba(255, 255, 255, .95) 0 .24vw, rgba(255, 255, 255, .28) .42vw, transparent .8vw),
        radial-gradient(circle at 93% 16%, rgba(255, 255, 255, .9) 0 .32vw, rgba(255, 255, 255, .25) .52vw, transparent .95vw),
        radial-gradient(circle at 15% 90%, rgba(255, 255, 255, .9) 0 .2vw, rgba(255, 255, 255, .25) .38vw, transparent .7vw),
        radial-gradient(circle at 46% 38%, rgba(220, 5, 45, 1) 0 .3vw, rgba(220, 5, 45, .3) .5vw, transparent .9vw),
        radial-gradient(circle at 78% 94%, rgba(255, 255, 255, .95) 0 .26vw, rgba(255, 255, 255, .25) .44vw, transparent .8vw),
        radial-gradient(circle at 31% 40%, rgba(255, 255, 255, .85) 0 .16vw, rgba(255, 255, 255, .22) .3vw, transparent .6vw);
    background-size: 100% 50%;
    background-repeat: repeat-y;
    mix-blend-mode: screen;
    animation: qs-bd-rise 11s linear infinite;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 80%, transparent 100%);

}

.stage-special-backdrop[data-anim="kreide"] .stage-special-watermark-text { animation: qs-bd-glimmer 5.2s ease-in-out infinite; }

/* ---------- Ruhige Variante (QS-13): bei reduzierter Bewegung steht alles im Endzustand ---------- */

@media (prefers-reduced-motion: reduce) {

    .album-scene *, .album-scene *::before, .album-scene *::after { animation: none !important; transition: none !important; }
    .al-bar.is-current i { width: 100%; }
    .album-scene:has(.al-header[data-variant="lehrer"]) .al-head::after { transform: scaleX(1); }
    .album-scene:has(.al-header[data-variant="lehrer"]) .album-slide::after { display: none; }

    .stage-special-backdrop[data-anim="kreide"],
    .stage-special-backdrop[data-anim="kreide"] *,
    .stage-special-backdrop[data-anim="kreide"]::before,
    .stage-special-backdrop[data-anim="kreide"]::after { animation: none !important; }

    .stage-special-backdrop[data-anim="kreide"]::after { display: none; }

}