/*
 * Familie "libero" für Stage-Specials (scene.template = "libero").
 * Der Torwart als Libero: Nachtblau, Flutlicht-Weiß, Torwart-Neongelb, Vereinsrot als Akzent.
 * Spielfeldlinien, Radar-Sweep, Ringe um den Strafraum; Fotos öffnen sich als wachsender Kreis, die Schlagzeile
 * gleitet Wort für Wort aus einer Maske, Zahlen zählen hoch, Heatmap und Passlinie zeichnen sich.
 * Maße in Container-Einheiten (cqw): 100cqw = Breite der Bühne (Kiosk: 2160 px). Bewegung nur über CSS.
 * Vertrag: docs/neuer-special.md (LIB-20 bis LIB-36). Ruhige Variante: scene.fx = "lite" und prefers-reduced-motion.
 */

@property --lb-n {

    syntax: "<integer>";
    inherits: false;
    initial-value: 0;

}

.stage-special-scene.libero-scene {

    --lb-night: #050913;
    --lb-deep: #0a1329;
    --lb-panel: #0f1b38;
    --lb-line: rgba(168, 205, 255, .2);
    --lb-lime: #d7ff3a;
    --lb-red: #dc052d;
    --lb-white: #f4f8ff;
    --lb-soft: #cfdcf2;
    --lb-grey: #7f93b8;

    inset: 0;
    display: block;
    container-type: size;
    background:
        radial-gradient(80% 50% at 50% 0%, rgba(120, 170, 255, .2), transparent 62%),
        radial-gradient(70% 45% at 100% 100%, rgba(220, 5, 45, .2), transparent 62%),
        linear-gradient(180deg, var(--lb-deep), var(--lb-night));
    color: var(--lb-white);
    transform: none;
    transition: opacity 500ms ease;
    overflow: hidden;
    z-index: 2;

}

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

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

/* ---------- Dauerebenen: Raster, Spielfeldlinien, Radar-Sweep, Leuchtfeuer ---------- */

.lb-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lb-fx i { position: absolute; display: block; pointer-events: none; }

.lb-grid {

    inset: 0;
    background:
        linear-gradient(var(--lb-line) .1cqw, transparent .1cqw) 0 0 / 100% 6cqw,
        linear-gradient(90deg, var(--lb-line) .1cqw, transparent .1cqw) 0 0 / 6cqw 100%;
    opacity: .28;
    -webkit-mask-image: radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 80%);
    mask-image: radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 80%);

}

/* Strafraum, Torraum und Mittelkreis als statische Linien über die ganze Bühne */
.lb-fieldlines {

    left: 6cqw;
    right: 6cqw;
    top: 12cqw;
    bottom: 18cqw;
    border: .25cqw solid var(--lb-line);
    opacity: .75;
    background:
        linear-gradient(var(--lb-line), var(--lb-line)) 50% 50% / 100% .25cqw no-repeat;

}

.lb-fieldlines::before {

    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30cqw;
    height: 30cqw;
    margin: -15cqw 0 0 -15cqw;
    border: .25cqw solid var(--lb-line);
    border-radius: 50%;

}

.lb-fieldlines::after {

    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 62%;
    height: 22%;
    transform: translateX(-50%);
    border: .25cqw solid var(--lb-line);
    border-bottom: 0;

}

/* Radar-Sweep: ein langsamer Lichtkegel um die Strafraumkante (Dauerbewegung 1) */
.lb-sweep {

    left: 50%;
    bottom: 14cqw;
    width: 190cqw;
    height: 190cqw;
    margin-left: -95cqw;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(215, 255, 58, 0) 0deg, rgba(215, 255, 58, 0) 300deg, rgba(215, 255, 58, .1) 345deg, rgba(215, 255, 58, .24) 360deg);
    transform-origin: 50% 50%;
    animation: lb-sweep 14s linear infinite;
    -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
    translate: 0 50%;

}

/* Leuchtfeuer: ein Ring, der vom Tor aus nach oben wächst (Dauerbewegung 2) */
.lb-beacon {

    left: 50%;
    bottom: 14cqw;
    width: 36cqw;
    height: 36cqw;
    margin-left: -18cqw;
    border: .3cqw solid rgba(215, 255, 58, .55);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(50%) scale(.2);
    animation: lb-beacon 6s ease-out infinite;

}

.lb-vignette { inset: 0; z-index: 7; background: radial-gradient(120% 90% at 50% 45%, transparent 58%, rgba(2, 4, 10, .6)); }

@keyframes lb-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes lb-beacon {

    0% { opacity: .75; transform: translateY(50%) scale(.2); }
    70% { opacity: 0; transform: translateY(50%) scale(3.4); }
    100% { opacity: 0; transform: translateY(50%) scale(3.4); }

}

.lb-fx.is-lite .lb-sweep, .lb-fx.is-lite .lb-beacon { animation: none; }
.lb-fx.is-lite .lb-sweep { opacity: .5; }
.lb-fx.is-lite .lb-beacon { display: none; }

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

.lb-slides { position: absolute; inset: 0; z-index: 2; }

.libero-slide.stage-special-slide { display: block; transform: none; transition: opacity 160ms linear; overflow: hidden; }

.lb-inner {

    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 2.4cqw;
    padding: 11.5cqw 5cqw 17.5cqw;

}

/* Blitz beim Slide-Start: weiches Flutlicht statt harter Schlag */
.lb-flash { position: absolute; inset: 0; z-index: 8; background: radial-gradient(60% 40% at 50% 100%, rgba(215, 255, 58, .55), transparent 70%); opacity: 0; pointer-events: none; }

.libero-slide.is-active .lb-flash { animation: lb-flash 900ms ease-out 80ms both; }

@keyframes lb-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* Zone: Umrisswort und drei Ringimpulse aus der Strafraumkante */
.lb-zone-mark {

    position: absolute;
    z-index: 1;
    right: -1cqw;
    top: 12cqw;
    color: transparent;
    -webkit-text-stroke: .2cqw rgba(215, 255, 58, .2);
    font-family: var(--font-display);
    font-size: 24cqw;
    font-weight: 900;
    line-height: .8;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;

}

.libero-slide.is-zone-start.is-active .lb-zone-mark { animation: lb-zone-mark 1100ms cubic-bezier(.16, 1, .3, 1) 60ms both; }

@keyframes lb-zone-mark { from { opacity: 0; transform: translateX(-12cqw); } to { opacity: 1; } }

.lb-pulse { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

.lb-pulse i {

    position: absolute;
    left: 50%;
    bottom: 14cqw;
    width: 30cqw;
    height: 30cqw;
    margin-left: -15cqw;
    border: .35cqw solid var(--lb-lime);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(50%) scale(.1);

}

.libero-slide.is-active .lb-pulse i { animation: lb-pulse 1600ms cubic-bezier(.2, .7, .2, 1) calc(var(--p, 0) * 260ms) both; }
.lb-pulse i:nth-child(1) { --p: 0; }
.lb-pulse i:nth-child(2) { --p: 1; }
.lb-pulse i:nth-child(3) { --p: 2; }

@keyframes lb-pulse { 0% { opacity: .9; transform: translateY(50%) scale(.1); } 100% { opacity: 0; transform: translateY(50%) scale(4.2); } }

/* ---------- Schlagzeile: gleitet aus einer Maske ---------- */

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

.lb-kicker {

    display: flex;
    align-items: center;
    gap: 1.6cqw;
    margin: 0 0 1.6cqw;
    font-family: var(--font-display);
    font-size: 2.1cqw;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lb-grey);

}

.lb-kicker:empty { display: none; }
.lb-kicker::before { content: ""; flex: 0 0 auto; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--lb-lime); box-shadow: 0 0 1.4cqw var(--lb-lime); }
.lb-kicker i { flex: 0 0 auto; width: 5cqw; height: .25cqw; background: var(--lb-lime); opacity: .6; }

.lb-head h2 {

    margin: 0;
    font-family: var(--font-display);
    font-size: 9cqw;
    font-weight: 900;
    line-height: .94;
    letter-spacing: .005em;
    text-transform: uppercase;
    color: var(--lb-white);

}

.lb-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.lb-w > span { display: inline-block; }
.lb-head h2 .lb-w:last-child > span { color: var(--lb-lime); }

.libero-slide.is-active .lb-w > span { animation: lb-glide 760ms cubic-bezier(.16, 1, .3, 1) calc(120ms + var(--i, 0) * 120ms) both; }

@keyframes lb-glide { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }

.lb-subtitle {

    margin: 1.8cqw 0 0;
    color: var(--lb-soft);
    font-family: var(--font-display);
    font-size: 3cqw;
    font-weight: 700;
    line-height: 1.14;
    text-transform: uppercase;
    letter-spacing: .04em;

}

.libero-slide.is-active .lb-kicker { animation: lb-rise 600ms cubic-bezier(.16, 1, .3, 1) 20ms both; }
.libero-slide.is-active .lb-subtitle { animation: lb-rise 700ms cubic-bezier(.16, 1, .3, 1) 560ms both; }

@keyframes lb-rise { from { opacity: 0; transform: translateY(2.4cqw); } to { opacity: 1; transform: none; } }

.libero-scene mark { padding: 0 .6cqw; background: var(--lb-lime); color: #07101f; font-weight: 900; }

/* ---------- Medienbereich und Foto (Radius-Reveal) ---------- */

.lb-media { position: relative; z-index: 3; flex: 1 1 0; min-height: 14cqw; }

.lb-photo {

    position: absolute;
    inset: 0;
    margin: 0;
    background: #02050c;
    overflow: hidden;
    border: .25cqw solid var(--lb-line);

}

.lb-photo::before {

    content: "";
    position: absolute;
    inset: 50% 0 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent, rgba(2, 5, 12, .8));
    pointer-events: none;

}

.lb-img {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--lb-focus, 50% 50%);
    display: block;
    filter: saturate(1.05) contrast(1.05);

}

.lb-fit-contain .lb-img { object-fit: contain; }

.libero-slide.is-active .lb-photo { animation: lb-reveal 1200ms cubic-bezier(.2, .8, .2, 1) 100ms both; }
.libero-slide.is-active .lb-img { animation: lb-cool 1400ms ease-out 100ms both, lb-drift var(--lb-dur, 16s) linear 100ms both; }

@keyframes lb-reveal { from { clip-path: circle(0% at 50% 100%); } to { clip-path: circle(150% at 50% 100%); } }
@keyframes lb-cool { from { filter: grayscale(.9) brightness(.7) contrast(1.2) hue-rotate(-10deg); } to { filter: saturate(1.05) contrast(1.05); } }
@keyframes lb-drift { from { transform: scale(1.12) translateX(-.8cqw); } to { transform: scale(1.02) translateX(.4cqw); } }

/* Suchlauf: eine Neonlinie läuft einmal über das Foto */
.lb-sweepline {

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: .45cqw;
    background: var(--lb-lime);
    box-shadow: 0 0 2.4cqw var(--lb-lime), 0 0 6cqw rgba(215, 255, 58, .5);
    opacity: 0;

}

.libero-slide.is-active .lb-sweepline { animation: lb-scanline 1500ms cubic-bezier(.4, 0, .2, 1) 400ms both; }

@keyframes lb-scanline { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(100cqw); } }

/* Fadenkreuz-Ecken */
.lb-corner { position: absolute; z-index: 4; width: 3cqw; height: 3cqw; border: 0 solid var(--lb-lime); pointer-events: none; }
.lb-corner-tl { top: 1.4cqw; left: 1.4cqw; border-top-width: .35cqw; border-left-width: .35cqw; }
.lb-corner-tr { top: 1.4cqw; right: 1.4cqw; border-top-width: .35cqw; border-right-width: .35cqw; }
.lb-corner-bl { bottom: 1.4cqw; left: 1.4cqw; border-bottom-width: .35cqw; border-left-width: .35cqw; }
.lb-corner-br { bottom: 1.4cqw; right: 1.4cqw; border-bottom-width: .35cqw; border-right-width: .35cqw; }

.libero-slide.is-active .lb-corner { animation: lb-lock 700ms cubic-bezier(.16, 1, .3, 1) 900ms both; }

@keyframes lb-lock { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: none; } }

/* Bildnachweis (SPEC-13) */
.lb-photo figcaption {

    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    max-width: 92%;
    padding: .6cqw 2.2cqw .6cqw 1.8cqw;
    background: rgba(5, 9, 19, .86);
    border-top: .2cqw solid var(--lb-lime);
    color: var(--lb-soft);
    font-family: var(--font-body);
    font-size: 1.7cqw;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.2;

}

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

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

.lb-body {

    margin: 0 0 1.3cqw;
    padding-left: 2.2cqw;
    border-left: .5cqw solid var(--lb-lime);
    color: var(--lb-soft);
    font-family: var(--font-body);
    font-size: 2.9cqw;
    line-height: 1.3;

}

.libero-slide.is-active .lb-body { animation: lb-rise 700ms cubic-bezier(.16, 1, .3, 1) 700ms both; }
.libero-slide.is-active .lb-body:nth-child(2) { animation-delay: 900ms; }
.libero-slide.is-active .lb-body:nth-child(3) { animation-delay: 1100ms; }

.lb-quote { margin: 1.6cqw 0 0; padding: 0; }
.lb-quote p { margin: 0; color: var(--lb-white); font-family: var(--font-display); font-size: 3.5cqw; font-weight: 800; line-height: 1.12; }
.lb-quote footer { margin-top: 1cqw; color: var(--lb-lime); font-family: var(--font-display); font-size: 2cqw; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.libero-slide.is-active .lb-quote { animation: lb-rise 700ms cubic-bezier(.16, 1, .3, 1) 900ms both; }

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

.lb-facts span {

    padding: .7cqw 1.9cqw;
    border: .2cqw solid var(--lb-lime);
    border-radius: 99cqw;
    color: var(--lb-lime);
    font-family: var(--font-display);
    font-size: 2cqw;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;

}

.libero-slide.is-active .lb-facts span { animation: lb-rise 600ms cubic-bezier(.16, 1, .3, 1) 1200ms both; }
.libero-slide.is-active .lb-facts span:nth-child(2) { animation-delay: 1350ms; }
.libero-slide.is-active .lb-facts span:nth-child(3) { animation-delay: 1500ms; }

.libero-slide.no-media .lb-copy { margin-top: 2cqw; }

/* ---------- Zähler (LIB-25) ---------- */

.lb-count { --lb-n: var(--lb-to, 0); counter-reset: lb-c var(--lb-n); }
.lb-count::after { content: counter(lb-c); }

.libero-slide.is-active .lb-count { animation: lb-countup 1800ms cubic-bezier(.15, .8, .2, 1) 420ms both; }

@keyframes lb-countup { from { --lb-n: 0; } }

/* ---------- Layout titel: Vollbild-Foto, Schlagzeile unten ---------- */

.lb-layout-titel .lb-inner { justify-content: flex-end; }
.lb-layout-titel .lb-media { position: absolute; inset: 0; z-index: 1; flex: none; min-height: 0; }
.lb-layout-titel .lb-photo { border: 0; }
.lb-layout-titel .lb-photo::before { inset: 25% 0 0; background: linear-gradient(180deg, transparent, rgba(2, 5, 12, .94) 72%); }
.lb-layout-titel .lb-photo figcaption { bottom: auto; top: 10.5cqw; }
.lb-layout-titel .lb-head h2 { font-size: 13.5cqw; line-height: .88; }
.lb-layout-titel .lb-copy, .lb-layout-titel .lb-head, .lb-layout-titel .lb-facts { z-index: 5; }
.lb-layout-titel .lb-zone-mark { display: none; }

/* ---------- Layout zahl: Riesenzahl ---------- */

.lb-big { position: relative; z-index: 3; flex: 1 1 0; min-height: 30cqw; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.lb-big-value {

    display: block;
    color: var(--lb-white);
    font-family: var(--font-display);
    font-size: min(var(--lb-fs, 38cqw), calc(100cqh - 13cqw));
    font-weight: 900;
    line-height: .86;
    letter-spacing: -.02em;
    text-shadow: 0 0 3cqw rgba(215, 255, 58, .45);

}

.lb-big small {

    display: block;
    margin-top: 2.2cqw;
    padding: .7cqw 2.6cqw;
    border: .25cqw solid var(--lb-lime);
    border-radius: 99cqw;
    color: var(--lb-lime);
    font-family: var(--font-display);
    font-size: 2.5cqw;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;

}

.libero-slide.is-active .lb-big-value:not(.lb-count) { animation: lb-rise 800ms cubic-bezier(.16, 1, .3, 1) 300ms both; }
.libero-slide.is-active .lb-big small { animation: lb-rise 600ms cubic-bezier(.16, 1, .3, 1) 1000ms both; }

/* ---------- Layout stats: Zahlenkacheln ---------- */

.lb-media-stats { display: flex; flex-direction: column; gap: 2cqw; min-height: 18cqw; }
.lb-media-stats .lb-photo { position: relative; inset: auto; flex: 1 1 0; min-height: 16cqw; }
.lb-media-stats:not(.has-photo) { justify-content: center; }

.lb-stats { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8cqw; }
.lb-stats[data-count="1"] { grid-template-columns: 1fr; }
.lb-stats[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

.lb-stat { position: relative; padding: 2cqw 2.2cqw 1.8cqw; background: rgba(15, 27, 56, .86); border: .2cqw solid var(--lb-line); border-top: .45cqw solid var(--lb-lime); }

.lb-stat-value { display: block; color: var(--lb-white); font-family: var(--font-display); font-size: 8.4cqw; font-weight: 900; line-height: .92; white-space: nowrap; }
.lb-media-stats.has-photo .lb-stat-value { font-size: 6cqw; }
.lb-stats[data-count="3"] .lb-stat-value { font-size: 7cqw; }
.lb-stat small { display: block; margin-top: 1cqw; color: var(--lb-lime); font-family: var(--font-display); font-size: 2cqw; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.libero-slide.is-active .lb-stat { animation: lb-rise 700ms cubic-bezier(.16, 1, .3, 1) calc(500ms + var(--i, 0) * 200ms) both; }

/* ---------- Layout radius: Ringe um das Tor ---------- */

.lb-media-radius { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 30cqw; }

.lb-radius { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }

.lb-rings { position: relative; height: 100%; max-width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }

.lb-ring {

    position: absolute;
    left: 50%;
    bottom: 0;
    width: var(--lb-r, 50%);
    aspect-ratio: 1;
    border: .35cqw solid rgba(215, 255, 58, .75);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(215, 255, 58, .03), rgba(215, 255, 58, .1));
    transform: translate(-50%, 50%) scale(0);

}

.lb-ring:nth-child(odd) { border-color: rgba(168, 205, 255, .7); background: radial-gradient(closest-side, rgba(168, 205, 255, .02), rgba(168, 205, 255, .08)); }

.lb-ring span {

    position: absolute;
    left: 50%;
    top: 0;
    padding: .5cqw 1.6cqw;
    background: var(--lb-night);
    border: .2cqw solid currentColor;
    border-radius: 99cqw;
    color: var(--lb-lime);
    font-family: var(--font-display);
    font-size: 2cqw;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);

}

.lb-ring:nth-child(odd) span { color: var(--lb-soft); }

.libero-slide.is-active .lb-ring { animation: lb-ring-in 1300ms cubic-bezier(.16, 1, .3, 1) calc(300ms + var(--i, 0) * 420ms) both; }

@keyframes lb-ring-in { from { transform: translate(-50%, 50%) scale(0); } to { transform: translate(-50%, 50%) scale(1); } }

.lb-center {

    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 3;
    padding: 1cqw 3cqw;
    background: var(--lb-lime);
    border-radius: 99cqw 99cqw 0 0;
    color: #07101f;
    font-family: var(--font-display);
    font-size: 3cqw;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    transform: translateX(-50%);

}

.libero-slide.is-active .lb-center { animation: lb-rise 600ms cubic-bezier(.16, 1, .3, 1) 200ms both; }

.lb-schema { margin-top: 1.6cqw; color: var(--lb-grey); font-family: var(--font-body); font-size: 1.8cqw; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Layouts heat und pass: Spielfeldkarte ---------- */

.lb-media-map { display: flex; align-items: center; justify-content: center; min-height: 30cqw; }

.lb-heat { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.lb-pitch { width: 100%; flex: 1 1 0; min-height: 0; color: var(--lb-soft); }

.lb-lines { stroke: rgba(207, 220, 242, .7); stroke-width: .28; }
.lb-lines .lb-goal { stroke: var(--lb-lime); stroke-width: .5; }

.lb-blob { transform-box: fill-box; transform-origin: center; transform: scale(0); }

.libero-slide.is-active .lb-blob { animation: lb-blob 1500ms cubic-bezier(.16, 1, .3, 1) calc(400ms + var(--i, 0) * 450ms) both; }

@keyframes lb-blob { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

.lb-zone-tag {

    position: absolute;
    padding: .4cqw 1.4cqw;
    background: var(--lb-night);
    border: .2cqw solid var(--lb-lime);
    border-radius: 99cqw;
    color: var(--lb-lime);
    font-family: var(--font-display);
    font-size: 1.9cqw;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);

}

.libero-slide.is-active .lb-zone-tag { animation: lb-rise 700ms cubic-bezier(.16, 1, .3, 1) calc(900ms + var(--i, 0) * 450ms) both; }

.lb-pass-line { stroke: var(--lb-lime); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 .8px var(--lb-lime)); }
.lb-pass-from, .lb-pass-to { fill: var(--lb-lime); opacity: 0; }
.lb-pass-ring { stroke: var(--lb-lime); stroke-width: .4; opacity: 0; transform-box: fill-box; transform-origin: center; }

.libero-slide.is-active .lb-pass-line { animation: lb-pass-draw 2200ms cubic-bezier(.4, 0, .2, 1) 600ms both; }
.libero-slide.is-active .lb-pass-from { animation: lb-fade 400ms ease-out 400ms both; }
.libero-slide.is-active .lb-pass-to { animation: lb-fade 400ms ease-out 2700ms both; }
.libero-slide.is-active .lb-pass-ring { animation: lb-pass-ring 1400ms ease-out 2700ms both; }
.libero-slide.is-active .lb-zone-tag.is-to { animation-delay: 2700ms; }

@keyframes lb-pass-draw { to { stroke-dashoffset: 0; } }
@keyframes lb-fade { to { opacity: 1; } }
@keyframes lb-pass-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(4); } }

/* ---------- Layout vs ---------- */

.lb-media-versus { display: flex; align-items: center; min-height: 34cqw; }
.lb-versus { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 2.4cqw; }

.lb-vs-side { padding: 3cqw 2.6cqw; background: rgba(15, 27, 56, .82); border: .2cqw solid var(--lb-line); display: flex; flex-direction: column; gap: 1cqw; }
.lb-vs-side small { color: var(--lb-grey); font-family: var(--font-display); font-size: 2cqw; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.lb-vs-side strong { color: var(--lb-white); font-family: var(--font-display); font-size: 12cqw; font-weight: 900; line-height: .9; }
.lb-vs-side b { color: var(--lb-soft); font-family: var(--font-display); font-size: 2.4cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lb-vs-side p { margin: 0; color: var(--lb-soft); font-family: var(--font-body); font-size: 2.2cqw; line-height: 1.25; }
.lb-vs-left { opacity: .8; }
.lb-vs-right { border-top: .5cqw solid var(--lb-lime); }
.lb-vs-right strong { color: var(--lb-lime); text-shadow: 0 0 3cqw rgba(215, 255, 58, .4); }
.lb-vs-line { width: .3cqw; background: linear-gradient(180deg, transparent, var(--lb-lime), transparent); transform-origin: 50% 50%; }

.libero-slide.is-active .lb-vs-left { animation: lb-from-l 900ms cubic-bezier(.16, 1, .3, 1) 300ms both; }
.libero-slide.is-active .lb-vs-right { animation: lb-from-r 900ms cubic-bezier(.16, 1, .3, 1) 700ms both; }
.libero-slide.is-active .lb-vs-line { animation: lb-line-in 700ms cubic-bezier(.16, 1, .3, 1) 560ms both; }

@keyframes lb-from-l { from { opacity: 0; transform: translateX(-30cqw); } to { opacity: .8; transform: none; } }
@keyframes lb-from-r { from { opacity: 0; transform: translateX(30cqw); } to { opacity: 1; transform: none; } }
@keyframes lb-line-in { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }

/* ---------- Layout zeit: Zeitleiste mit wachsender Linie ---------- */

.lb-media-timeline { display: flex; align-items: center; min-height: 30cqw; }

.lb-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 4cqw; width: 100%; display: grid; gap: 0; }

.lb-timeline::before { content: ""; position: absolute; left: 1cqw; top: 2cqw; bottom: 2cqw; width: .3cqw; background: var(--lb-lime); opacity: .55; transform-origin: 50% 0; }
.libero-slide.is-active .lb-timeline::before { animation: lb-grow 1800ms cubic-bezier(.4, 0, .2, 1) 300ms both; }

@keyframes lb-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.lb-timeline li { position: relative; display: grid; grid-template-columns: 17cqw 1fr; align-items: baseline; gap: 2cqw; padding: 1.7cqw 0; border-bottom: .15cqw solid var(--lb-line); }
.lb-timeline li:last-child { border-bottom: 0; }
.lb-timeline li::before { content: ""; position: absolute; left: -3.35cqw; top: 3.1cqw; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--lb-lime); box-shadow: 0 0 1.6cqw var(--lb-lime); }
.lb-timeline b { color: var(--lb-lime); font-family: var(--font-display); font-size: 5cqw; font-weight: 900; line-height: .95; text-align: right; white-space: nowrap; }
.lb-timeline span { color: var(--lb-soft); font-family: var(--font-body); font-size: 2.8cqw; line-height: 1.22; }

.libero-slide.is-active .lb-timeline li { animation: lb-rise 700ms cubic-bezier(.16, 1, .3, 1) calc(500ms + var(--i, 0) * 320ms) both; }

/* ---------- Layout zitat ---------- */

.lb-layout-zitat .lb-inner { justify-content: center; }
.lb-layout-zitat .lb-head h2 { font-size: 4.4cqw; line-height: 1; }
.lb-layout-zitat .lb-head { padding-bottom: 1cqw; }

.lb-layout-zitat .lb-quote { position: relative; margin: 2cqw 0 0; padding: 11cqw 0 0 2cqw; }

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

    content: "\201E";
    position: absolute;
    top: -6cqw;
    left: 0;
    color: var(--lb-lime);
    font-family: var(--font-display);
    font-size: 20cqw;
    font-weight: 900;
    line-height: 1;
    opacity: .9;

}

.lb-layout-zitat .lb-quote p { position: relative; font-size: var(--lb-qs, 6.2cqw); line-height: 1.06; text-transform: uppercase; letter-spacing: 0; }
.lb-layout-zitat .lb-quote footer { margin-top: 2cqw; font-size: 2.4cqw; }
.lb-layout-zitat .lb-copy { margin-top: 2cqw; }

/* ---------- Layout galerie ---------- */

.lb-media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.lb-media-duo .lb-photo { position: relative; inset: auto; min-height: 20cqw; }
.lb-media-duo .lb-photo:only-child { grid-column: 1 / -1; }

/* ---------- Kopfzeile ---------- */

.lb-header {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 1.6cqw 5cqw;
    background: linear-gradient(180deg, rgba(5, 9, 19, .95), rgba(5, 9, 19, .55) 80%, transparent);
    border-bottom: .2cqw solid var(--lb-line);

}

.lb-header img { width: 5.6cqw; height: auto; }

.lb-title { display: grid; gap: .5cqw; font-family: var(--font-display); text-transform: uppercase; }
.lb-title strong { color: var(--lb-white); font-size: 3.4cqw; font-weight: 900; letter-spacing: .1em; line-height: 1; }
.lb-title span { color: var(--lb-lime); font-size: 2cqw; font-weight: 700; letter-spacing: .14em; }

.lb-chapter-now { margin-left: auto; text-align: right; font-family: var(--font-display); text-transform: uppercase; }
.lb-chapter-now.is-empty { visibility: hidden; }
.lb-chapter-now small { display: block; color: var(--lb-grey); font-size: 1.9cqw; font-weight: 700; letter-spacing: .22em; }
.lb-chapter-now strong { display: block; margin-top: .5cqw; color: var(--lb-white); font-size: 3.4cqw; font-weight: 900; letter-spacing: .08em; }

/* ---------- Fußleiste: Zonen, Nummer, Ticks (SPEC-31) ---------- */

.lb-foot {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 2.4cqw;
    padding: 4cqw 5cqw 3cqw;
    background: linear-gradient(0deg, rgba(5, 9, 19, .96) 55%, transparent);

}

.lb-chapters { grid-column: 1 / -1; grid-row: 1; display: flex; gap: .5cqw; margin: 0 0 1.2cqw; font-family: var(--font-display); }
.lb-chapters span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .5cqw 0 .6cqw; border-bottom: .35cqw solid rgba(168, 205, 255, .16); color: var(--lb-grey); text-align: center; font-size: 1.8cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: color 200ms linear; }
.lb-chapters span.is-current { color: var(--lb-white); border-bottom-color: var(--lb-lime); }
.lb-chapters[data-count="0"] { display: none; }

.lb-nr { grid-row: 2; grid-column: 1; display: flex; align-items: baseline; gap: .6cqw; padding: .6cqw 2cqw; border: .2cqw solid var(--lb-lime); border-radius: 99cqw; color: var(--lb-lime); font-family: var(--font-display); font-weight: 900; }
.lb-nr b { font-size: 4.2cqw; line-height: 1; }
.lb-nr i { font-size: 2.4cqw; font-style: normal; opacity: .7; }
.lb-nr span { font-size: 2.6cqw; opacity: .8; }

.lb-track { grid-row: 2; grid-column: 2; display: flex; gap: .35cqw; align-items: flex-end; }
.lb-tick { position: relative; flex: 1; height: 2.2cqw; overflow: hidden; background: rgba(168, 205, 255, .16); border-radius: .3cqw; }
.lb-tick.is-chapter-start { margin-left: 1.4cqw; }
.lb-tick i { position: absolute; inset: 0; width: 0; background: var(--lb-lime); }
.lb-tick.is-past i { width: 100%; background: var(--lb-white); opacity: .85; }
.lb-tick.is-current i { animation: lb-fill linear both; }

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

/* ---------- Reduzierte Bewegung (LIB-34) ---------- */

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

    .libero-scene *, .libero-scene *::before, .libero-scene *::after { animation: none !important; transition: none !important; }
    .lb-tick.is-current i { width: 100%; }
    .lb-pass-line { stroke-dashoffset: 0; }
    .lb-pass-from, .lb-pass-to { opacity: 1; }
    .lb-ring, .lb-blob { transform: translate(-50%, 50%) scale(1); }
    .lb-blob { transform: none; }
    .lb-sweepline, .lb-pulse, .lb-flash { display: none; }

}

/* ---------- Variante "sechser" (scene.variant, KIM-21): Rot-Schwarz statt Nachtblau, Rückennummer als Umriss (Kimmich) ---------- */
/* Die Variante hängt am Marker .lb-fx[data-variant="sechser"]; Standard und andere Varianten bleiben unverändert (SPEC-35).
   Sie setzt nur Farben und eine statische Umrisszahl, es kommt keine Dauerbewegung hinzu (LIB-32). */

.libero-scene:has(.lb-fx[data-variant="sechser"]) {

    --lb-night: #090205;
    --lb-deep: #1d0611;
    --lb-panel: #2a0b17;
    --lb-line: rgba(255, 150, 165, .22);
    --lb-lime: #ff4a68;
    --lb-soft: #f1d9de;
    --lb-grey: #c9a3ab;
    background:
        radial-gradient(80% 50% at 50% 0%, rgba(220, 5, 45, .34), transparent 62%),
        radial-gradient(70% 45% at 100% 100%, rgba(255, 255, 255, .07), transparent 62%),
        linear-gradient(180deg, var(--lb-deep), var(--lb-night));

}

.lb-fx[data-variant="sechser"] .lb-sweep { background: conic-gradient(from 0deg, rgba(255, 74, 104, 0) 0deg, rgba(255, 74, 104, 0) 300deg, rgba(255, 74, 104, .12) 345deg, rgba(255, 74, 104, .3) 360deg); }
.lb-fx[data-variant="sechser"] .lb-beacon { border-color: rgba(255, 74, 104, .6); }

/* Die Sechs als stehender Umriss rechts hinter allem (statisch) */
.lb-fx[data-variant="sechser"]::after {

    content: "6";
    position: absolute;
    right: -6cqw;
    top: 8cqw;
    font-family: var(--font-display);
    font-size: 118cqw;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: .3cqw rgba(255, 74, 104, .16);

}

.libero-scene:has(.lb-fx[data-variant="sechser"]) .lb-flash { background: radial-gradient(60% 40% at 50% 100%, rgba(255, 74, 104, .5), transparent 70%); }
.libero-scene:has(.lb-fx[data-variant="sechser"]) .lb-vs-right strong { text-shadow: 0 0 3cqw rgba(255, 74, 104, .45); }
.libero-scene:has(.lb-fx[data-variant="sechser"]) .lb-ring { border-color: rgba(255, 74, 104, .75); background: radial-gradient(closest-side, rgba(255, 74, 104, .03), rgba(255, 74, 104, .12)); }
.libero-scene:has(.lb-fx[data-variant="sechser"]) .lb-ring:nth-child(odd) { border-color: rgba(255, 255, 255, .7); background: radial-gradient(closest-side, rgba(255, 255, 255, .02), rgba(255, 255, 255, .08)); }

/* ---------- Backdrop "radar" (BACKDROP-06): Flutlicht-Radar in der Arena-Pause ---------- */
/* Gilt nur für Specials mit stageRotation.backdropAnimation = "radar". Läuft nur, solange die Arena-Pause sichtbar
   ist; Transform, Opazität und Filter, kein Layout. */

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

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

/* Das Bild atmet ruhig und kühl, dazu ein neongelber Schein. */
.stage-special-backdrop[data-anim="radar"] > img:not(.stage-special-ghost) { animation: lb-bd-breathe 7s ease-in-out infinite; }

@keyframes lb-bd-breathe {

    0%, 100% { transform: scale(1); filter: saturate(1.1) contrast(1.05) brightness(.92) drop-shadow(0 0 40px rgba(215, 255, 58, .22)); }
    50% { transform: scale(1.025); filter: saturate(1.2) contrast(1.1) brightness(1.04) drop-shadow(0 0 70px rgba(215, 255, 58, .45)); }

}

/* Ein Ring wächst alle 5 Sekunden aus dem Bild nach außen. */
.stage-special-backdrop[data-anim="radar"]::before { animation: lb-bd-ring 5s ease-out infinite; }

@keyframes lb-bd-ring {

    0% { opacity: .7; transform: scale(.55); }
    75%, 100% { opacity: 0; transform: scale(1.35); }

}

/* Ein Sweep-Lichtband zieht von links nach rechts über das Bild. */
.stage-special-backdrop[data-anim="radar"]::after {

    content: "";
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    background: linear-gradient(90deg, transparent 40%, rgba(215, 255, 58, .26) 50%, transparent 60%);
    background-size: 220% 100%;
    animation: lb-bd-sweep 6.5s linear infinite;
    pointer-events: none;

}

@keyframes lb-bd-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.stage-special-backdrop[data-anim="radar"] .stage-special-watermark-text { animation: lb-bd-number 5s ease-in-out infinite; }

@keyframes lb-bd-number {

    0%, 100% { opacity: .85; text-shadow: 0 0 3vw rgba(215, 255, 58, .15); }
    50% { opacity: 1; text-shadow: 0 0 7vw rgba(215, 255, 58, .5); }

}

/* ---------- Backdrop "takt" (KIM-22): Sechser-Takt in der Arena-Pause (Kimmich) ---------- */
/* Gilt nur für Specials mit stageRotation.backdropAnimation = "takt". Läuft nur, solange die Arena-Pause sichtbar ist;
   Transform, Opazität und Filter, kein Layout. Ebenen nach QS-14: ::before = Takt-Ring (zwei Schläge), ::after = Passlinien. */

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

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

/* Das Foto schlägt im Takt (zwei Schläge, dann Ruhe) und glüht rot. */
.stage-special-backdrop[data-anim="takt"] > img:not(.stage-special-ghost) { animation: lb-bd-takt 2.4s ease-in-out infinite; }

@keyframes lb-bd-takt {

    0%, 100% { transform: scale(1); filter: saturate(1.1) contrast(1.06) brightness(.94) drop-shadow(0 0 40px rgba(220, 5, 45, .3)); }
    12% { transform: scale(1.03); filter: saturate(1.25) contrast(1.12) brightness(1.08) drop-shadow(0 0 80px rgba(255, 60, 90, .7)); }
    24% { transform: scale(1.005); filter: saturate(1.1) contrast(1.06) brightness(.98) drop-shadow(0 0 50px rgba(220, 5, 45, .4)); }
    36% { transform: scale(1.02); filter: saturate(1.2) contrast(1.1) brightness(1.04) drop-shadow(0 0 70px rgba(255, 60, 90, .55)); }

}

/* Ein roter Ring schlägt im selben Takt aus dem Bild nach außen. */
.stage-special-backdrop[data-anim="takt"]::before { animation: lb-bd-taktring 2.4s ease-out infinite; }

@keyframes lb-bd-taktring {

    0% { opacity: .8; transform: scale(.5); }
    12% { opacity: .8; transform: scale(.7); }
    45%, 100% { opacity: 0; transform: scale(1.4); }

}

/* Drei Passlinien ziehen versetzt von links nach rechts über das Bild. */
.stage-special-backdrop[data-anim="takt"]::after {

    content: "";
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    background:
        linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .5) 50%, transparent 54%) 0 22% / 260% .5% no-repeat,
        linear-gradient(90deg, transparent 46%, rgba(255, 74, 104, .65) 50%, transparent 54%) 0 52% / 260% .7% no-repeat,
        linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .4) 50%, transparent 54%) 0 80% / 260% .4% no-repeat;
    animation: lb-bd-pass 3.6s linear infinite;
    pointer-events: none;

}

@keyframes lb-bd-pass { from { transform: translateX(-40%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(40%); opacity: 0; } }

.stage-special-backdrop[data-anim="takt"] .stage-special-watermark-text { animation: lb-bd-taktnr 2.4s ease-in-out infinite; }

@keyframes lb-bd-taktnr {

    0%, 100% { opacity: .85; text-shadow: 0 0 3vw rgba(220, 5, 45, .2); }
    12%, 36% { opacity: 1; text-shadow: 0 0 7vw rgba(255, 60, 90, .6); }

}

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

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

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

}