/*
 * Familie "titan" für Stage-Specials (scene.template = "titan").
 * Modern aggressiv: schwarze Bühne, Vereinsrot, Weiß; Schlagzeile schlägt Wort für Wort ein, Bildschirm zuckt,
 * Fotos kommen mit Diagonalschnitt, Glitch und Rot-Duoton, Zahlen zählen hoch.
 * Alle Maße in Container-Einheiten (cqw): 100cqw = Breite der Bühne (Kiosk: 2160 px).
 * Bewegung nur über CSS (keine JavaScript-Timer). Vertrag: docs/kahn-special.md (TIT-20 bis TIT-34).
 * Ruhige Variante: scene.fx = "lite" (ohne Dauerbewegung) und prefers-reduced-motion (ohne jede Bewegung).
 */

/* Zähler (TIT-25): ganze Zahl, die per Animation von 0 hochläuft. */
@property --tt-n {

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

}

.stage-special-scene.titan-scene {

    --tt-black: #050506;
    --tt-ink: #0e0e12;
    --tt-panel: #131318;
    --tt-red: #dc052d;
    --tt-hot: #ff2a4d;
    --tt-white: #ffffff;
    --tt-soft: #e7e7ec;
    --tt-grey: #8f8f9a;

    inset: 0;
    display: block;
    container-type: size;
    background:
        radial-gradient(90% 60% at 88% 0%, rgba(220, 5, 45, .34), transparent 62%),
        radial-gradient(70% 50% at 0% 100%, rgba(220, 5, 45, .16), transparent 60%),
        linear-gradient(180deg, #0b0b0e, var(--tt-black));
    color: var(--tt-white);
    transform: none;
    transition: opacity 500ms ease;
    overflow: hidden;
    z-index: 2;

}

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

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

/* ---------- Dauerhafte Ebenen: Netz, Schrägen, Scanlinien ---------- */

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

/* Netz-Motiv: zwei Rautenscharen wie ein Tornetz */
.tt-net {

    inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 .14cqw, transparent .14cqw 2.4cqw),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 .14cqw, transparent .14cqw 2.4cqw);
    -webkit-mask-image: linear-gradient(180deg, transparent 5%, #000 40%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 5%, #000 40%, #000 80%, transparent 100%);

}

.tt-slash { background: var(--tt-red); opacity: .12; transform: skewX(-18deg); }
.tt-slash-a { right: -6cqw; top: 0; bottom: 0; width: 22cqw; }
.tt-slash-b { right: 22cqw; top: 38cqw; bottom: 0; width: 3cqw; opacity: .22; }

.tt-scan {

    inset: -10cqw 0;
    z-index: 7;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 .12cqw, transparent .12cqw .42cqw);
    opacity: .5;
    animation: tt-scan 7s linear infinite;

}

.tt-vignette {

    inset: 0;
    z-index: 7;
    background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55));

}

@keyframes tt-scan { from { transform: translateY(0); } to { transform: translateY(.84cqw); } }

.tt-fx.is-lite .tt-scan { animation: none; }
.tt-fx.is-lite .tt-slash { opacity: .08; }

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

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

.titan-slide.stage-special-slide {

    display: block;
    transform: none;
    transition: opacity 140ms linear;
    overflow: hidden;

}

/* Das Zucken (Shake) liegt auf einer vollflächigen Hülle, damit absolute Kinder ihren Bezugsrahmen behalten. */
.tt-shake {

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

}

/* ---------- Einschlag: Blitz und Zucken beim Slide-Start ---------- */

.tt-impact { position: absolute; inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; }

.titan-slide.is-active .tt-impact { animation: tt-flash 360ms ease-out 140ms both; }
.titan-slide.is-round-start.is-active .tt-impact { background: var(--tt-red); animation: tt-flash-round 760ms ease-out 100ms both; }

@keyframes tt-flash { 0% { opacity: 0; } 10% { opacity: .5; } 100% { opacity: 0; } }
@keyframes tt-flash-round { 0% { opacity: 0; } 8% { opacity: .9; } 24% { opacity: .15; } 36% { opacity: .6; } 100% { opacity: 0; } }

.titan-slide.is-active .tt-shake { animation: tt-shake 540ms steps(1, end) 160ms both; }
.titan-slide.is-round-start.is-active .tt-shake { animation-name: tt-shake-hard; animation-duration: 760ms; animation-delay: 100ms; }

@keyframes tt-shake {

    0% { transform: translate(0, 0); }
    12% { transform: translate(-1.3cqw, .7cqw); }
    24% { transform: translate(1.1cqw, -.9cqw); }
    36% { transform: translate(-.8cqw, -.5cqw); }
    48% { transform: translate(.7cqw, .6cqw); }
    60% { transform: translate(-.4cqw, .3cqw); }
    72% { transform: translate(.3cqw, -.2cqw); }
    100% { transform: translate(0, 0); }

}

@keyframes tt-shake-hard {

    0% { transform: translate(0, 0); }
    8% { transform: translate(-2.4cqw, 1.2cqw); }
    16% { transform: translate(2.2cqw, -1.6cqw); }
    26% { transform: translate(-1.8cqw, -1cqw); }
    36% { transform: translate(1.5cqw, 1.2cqw); }
    48% { transform: translate(-1cqw, .6cqw); }
    60% { transform: translate(.8cqw, -.5cqw); }
    74% { transform: translate(-.4cqw, .3cqw); }
    100% { transform: translate(0, 0); }

}

/* Runde als Umrisswort hinter der ersten Slide eines Kapitels */
.tt-round-mark {

    position: absolute;
    z-index: 1;
    left: -1cqw;
    top: 13cqw;
    color: transparent;
    -webkit-text-stroke: .32cqw rgba(220, 5, 45, .5);
    font-family: var(--font-display);
    font-size: 26cqw;
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.02em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-7deg) skewX(-8deg);
    pointer-events: none;

}

.titan-slide.is-round-start.is-active .tt-round-mark { animation: tt-mark 900ms cubic-bezier(.12, .9, .2, 1) 60ms both; }

@keyframes tt-mark { from { opacity: 0; transform: translateX(14cqw) rotate(-7deg) skewX(-8deg) scale(1.3); } to { opacity: 1; } }

/* ---------- Schlagzeile ---------- */

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

.tt-kicker {

    display: flex;
    align-items: center;
    gap: 1.6cqw;
    margin: 0 0 1.6cqw;
    font-family: var(--font-display);
    font-size: 2.2cqw;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tt-grey);

}

.tt-kicker:empty { display: none; }

/* der Kicker selbst ist der rote Winkel; die Kategorie dahinter bleibt grau */
.tt-kicker::before {

    content: "";
    order: 0;
    flex: 0 0 auto;
    width: 1.1cqw;
    height: 3cqw;
    background: var(--tt-red);
    transform: skewX(-18deg);

}

.tt-kicker i { flex: 0 0 auto; width: 3.4cqw; height: .3cqw; background: var(--tt-red); }

.tt-head h2 {

    margin: 0;
    font-family: var(--font-display);
    font-size: 9.6cqw;
    font-weight: 900;
    line-height: .88;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: var(--tt-white);
    text-shadow: .45cqw .45cqw 0 var(--tt-red);

}

.tt-w { display: inline-block; transform: skewX(-8deg); transform-origin: 50% 85%; }
.tt-head h2 .tt-w:last-child { color: var(--tt-red); text-shadow: .45cqw .45cqw 0 #000; }

.titan-slide.is-active .tt-w { animation: tt-slam 520ms cubic-bezier(.12, .9, .2, 1) calc(var(--i, 0) * 110ms) both; }

@keyframes tt-slam {

    0% { opacity: 0; transform: translateY(-7cqw) scale(2.3) skewX(-14deg); }
    55% { opacity: 1; transform: translateY(0) scale(.93) skewX(-8deg); }
    78% { transform: scale(1.04) skewX(-8deg); }
    100% { opacity: 1; transform: scale(1) skewX(-8deg); }

}

.tt-subtitle {

    margin: 1.8cqw 0 0;
    color: var(--tt-soft);
    font-family: var(--font-display);
    font-size: 3.1cqw;
    font-weight: 800;
    line-height: 1.12;
    text-transform: uppercase;
    letter-spacing: .02em;

}

.titan-slide.is-active .tt-kicker { animation: tt-slide-l 420ms cubic-bezier(.2, .9, .2, 1) 20ms both; }
.titan-slide.is-active .tt-subtitle { animation: tt-slide-l 520ms cubic-bezier(.2, .9, .2, 1) 520ms both; }

@keyframes tt-slide-l { from { opacity: 0; transform: translateX(-9cqw); } to { opacity: 1; transform: none; } }

/* Hervorhebung im Text (TIT-24) */
.titan-scene mark { padding: 0 .55cqw; background: var(--tt-red); color: #fff; font-weight: 900; }

/* ---------- Medienbereich und Foto ---------- */

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

.tt-photo {

    position: absolute;
    inset: 0;
    margin: 0;
    background: #000;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

}

.tt-photo::before {

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

}

.tt-photo::after {

    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(220, 5, 45, .9), rgba(220, 5, 45, .2));
    mix-blend-mode: multiply;
    opacity: 0;
    pointer-events: none;

}

.tt-img, .tt-ghost {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--tt-focus, 50% 50%);
    display: block;

}

.tt-img { filter: contrast(1.1) saturate(1.05); }

/* TIT-30: ZEIT-10-Entsprechung: kleine oder Hochformat-Fotos ganz auf die schwarze Fläche */
.tt-fit-contain .tt-img, .tt-fit-contain .tt-ghost { object-fit: contain; }

.tt-ghost { opacity: 0; mix-blend-mode: screen; pointer-events: none; }

.titan-slide.is-active .tt-photo { animation: tt-cut 520ms cubic-bezier(.2, .8, .2, 1) 100ms both; }
.titan-slide.is-active .tt-photo::after { animation: tt-duo 1500ms ease-out 100ms both; }
.titan-slide.is-active .tt-img { animation: tt-heat 1500ms ease-out 100ms both, tt-push var(--tt-dur, 16s) linear 100ms both; }
.titan-slide.is-active .tt-ghost-a { animation: tt-glitch-a 760ms steps(1, end) 140ms both; }
.titan-slide.is-active .tt-ghost-b { animation: tt-glitch-b 760ms steps(1, end) 200ms both; }

@keyframes tt-cut {

    from { clip-path: polygon(0 0, 0 0, -12% 100%, 0 100%); }
    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

}

@keyframes tt-duo { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes tt-heat { from { filter: grayscale(.95) contrast(1.35) brightness(.8); } to { filter: grayscale(0) contrast(1.1) saturate(1.05) brightness(1); } }
@keyframes tt-push { from { transform: scale(1.14); } to { transform: scale(1.02); } }

@keyframes tt-glitch-a {

    0% { opacity: .9; transform: translateX(-2cqw); clip-path: inset(8% 0 72% 0); filter: grayscale(1) sepia(1) saturate(9) hue-rotate(-35deg); }
    16% { opacity: .9; transform: translateX(1.7cqw); clip-path: inset(52% 0 22% 0); }
    32% { opacity: .8; transform: translateX(-1.2cqw); clip-path: inset(28% 0 48% 0); }
    48% { opacity: .85; transform: translateX(2.2cqw); clip-path: inset(74% 0 6% 0); }
    64% { opacity: .6; transform: translateX(-.8cqw); clip-path: inset(40% 0 38% 0); }
    80% { opacity: 0; transform: none; clip-path: inset(0); }
    100% { opacity: 0; }

}

@keyframes tt-glitch-b {

    0% { opacity: .75; transform: translateX(1.8cqw); clip-path: inset(62% 0 14% 0); filter: grayscale(1) brightness(1.7) contrast(1.4); }
    20% { opacity: .7; transform: translateX(-2cqw); clip-path: inset(18% 0 62% 0); }
    40% { opacity: .75; transform: translateX(1cqw); clip-path: inset(80% 0 2% 0); }
    60% { opacity: .5; transform: translateX(-1.5cqw); clip-path: inset(36% 0 44% 0); }
    78% { opacity: 0; transform: none; clip-path: inset(0); }
    100% { opacity: 0; }

}

/* Eckklammern wie ein Zielfernrohr */
.tt-corner { position: absolute; z-index: 4; width: 3.6cqw; height: 3.6cqw; border: 0 solid var(--tt-red); pointer-events: none; }
.tt-corner-tl { top: 1.4cqw; left: 1.4cqw; border-top-width: .6cqw; border-left-width: .6cqw; }
.tt-corner-tr { top: 1.4cqw; right: 1.4cqw; border-top-width: .6cqw; border-right-width: .6cqw; }
.tt-corner-bl { bottom: 1.4cqw; left: 1.4cqw; border-bottom-width: .6cqw; border-left-width: .6cqw; }
.tt-corner-br { bottom: 1.4cqw; right: 1.4cqw; border-bottom-width: .6cqw; border-right-width: .6cqw; }

.titan-slide.is-active .tt-corner { animation: tt-lock 520ms cubic-bezier(.2, .9, .2, 1) 560ms both; }

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

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

    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    max-width: 90%;
    padding: .6cqw 3cqw .6cqw 1.8cqw;
    background: var(--tt-red);
    clip-path: polygon(0 0, 100% 0, calc(100% - 1.6cqw) 100%, 0 100%);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1.8cqw;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.2;
    text-transform: uppercase;

}

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

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

.tt-body {

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

}

.titan-slide.is-active .tt-body { animation: tt-slide-l 520ms cubic-bezier(.2, .9, .2, 1) 640ms both; }
.titan-slide.is-active .tt-body:nth-child(2) { animation-delay: 820ms; }
.titan-slide.is-active .tt-body:nth-child(3) { animation-delay: 1000ms; }

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

.titan-slide.is-active .tt-quote { animation: tt-slide-l 520ms cubic-bezier(.2, .9, .2, 1) 900ms both; }

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

.tt-facts span {

    padding: .7cqw 1.9cqw;
    background: var(--tt-white);
    clip-path: polygon(1cqw 0, 100% 0, calc(100% - 1cqw) 100%, 0 100%);
    color: #000;
    font-family: var(--font-display);
    font-size: 2.1cqw;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;

}

.titan-slide.is-active .tt-facts span { animation: tt-slide-l 440ms cubic-bezier(.2, .9, .2, 1) 1100ms both; }
.titan-slide.is-active .tt-facts span:nth-child(2) { animation-delay: 1250ms; }
.titan-slide.is-active .tt-facts span:nth-child(3) { animation-delay: 1400ms; }

.titan-slide.no-media .tt-copy { margin-top: 2cqw; }

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

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

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

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

/* ---------- Layout titel (TIT-31): Vollbild-Foto, Schlagzeile unten ---------- */

.tt-layout-titel .tt-shake { justify-content: flex-end; }
.tt-layout-titel .tt-media { position: absolute; inset: 0; z-index: 1; flex: none; min-height: 0; }
.tt-layout-titel .tt-photo::before { inset: 28% 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .92) 70%); }
.tt-layout-titel .tt-photo figcaption { bottom: auto; top: 10.5cqw; }
.tt-layout-titel .tt-head h2 { font-size: 15cqw; line-height: .82; }
.tt-layout-titel .tt-copy, .tt-layout-titel .tt-head, .tt-layout-titel .tt-facts { z-index: 5; }
.tt-layout-titel .tt-round-mark { display: none; }
.tt-layout-titel.no-media .tt-head h2 { font-size: 15cqw; }

/* ---------- Layout zahl (TIT-26): Riesenzahl ---------- */

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

.tt-big-value {

    display: block;
    color: var(--tt-white);
    font-family: var(--font-display);
    font-size: min(var(--tt-fs, 40cqw), calc(100cqh - 13cqw));
    font-weight: 900;
    line-height: .85;
    letter-spacing: -.03em;
    text-shadow: 1.1cqw 1.1cqw 0 var(--tt-red);
    transform: skewX(-8deg);

}

.tt-big small {

    display: block;
    margin-top: 2.2cqw;
    padding: .7cqw 2.4cqw;
    background: var(--tt-red);
    clip-path: polygon(1.2cqw 0, 100% 0, calc(100% - 1.2cqw) 100%, 0 100%);
    color: #fff;
    font-family: var(--font-display);
    font-size: 2.6cqw;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;

}

.titan-slide.is-active .tt-big-value:not(.tt-count) { animation: tt-slam 640ms cubic-bezier(.12, .9, .2, 1) 300ms both; }
.titan-slide.is-active .tt-big small { animation: tt-slide-l 480ms cubic-bezier(.2, .9, .2, 1) 1000ms both; }

/* ---------- Layout stats (TIT-25): Zahlenkacheln mit Zähler ---------- */

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

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

.tt-stat {

    padding: 2cqw 2.2cqw 1.8cqw;
    background: var(--tt-panel);
    border-left: .9cqw solid var(--tt-red);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2cqw), calc(100% - 2cqw) 100%, 0 100%);

}

.tt-stat-value { display: block; color: var(--tt-white); font-family: var(--font-display); font-size: 9cqw; font-weight: 900; line-height: .9; white-space: nowrap; transform: skewX(-8deg); transform-origin: left bottom; }
.tt-media-stats.has-photo .tt-stat-value { font-size: 6.4cqw; }
.tt-stats[data-count="3"] .tt-stat-value { font-size: 7.4cqw; }
.tt-stat small { display: block; margin-top: 1cqw; color: var(--tt-hot); font-family: var(--font-display); font-size: 2.1cqw; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.titan-slide.is-active .tt-stat { animation: tt-slam 520ms cubic-bezier(.12, .9, .2, 1) calc(500ms + var(--i, 0) * 200ms) both; }

/* ---------- Layout elfer (TIT-27): Elfmeter-Tafel ---------- */

.tt-media-board { display: flex; flex-direction: column; justify-content: center; min-height: 40cqw; }
.tt-shootout { display: flex; flex-direction: column; gap: 2.4cqw; }

.tt-shoot-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; }
.tt-shoot-score span { font-family: var(--font-display); font-size: 3.4cqw; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tt-shoot-score span:last-child { text-align: right; color: var(--tt-grey); }
.tt-shoot-score strong { display: flex; align-items: baseline; gap: 1cqw; font-family: var(--font-display); font-size: 11cqw; font-weight: 900; line-height: .9; text-shadow: .7cqw .7cqw 0 var(--tt-red); }
.tt-shoot-score strong i { color: var(--tt-red); font-style: normal; text-shadow: none; }

.titan-slide.is-active .tt-shoot-score strong { animation: tt-slam 640ms cubic-bezier(.12, .9, .2, 1) 7600ms both; }

.tt-kicks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1cqw; }

.tt-kick {

    position: relative;
    min-width: 0;
    padding: 2.4cqw .9cqw 2cqw;
    background: var(--tt-panel);
    border-bottom: .6cqw solid var(--tt-white);
    text-align: center;
    overflow: hidden;

}

.tt-kick b { display: block; color: var(--tt-white); font-family: var(--font-display); font-size: 1.55cqw; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; line-height: 1.1; }
.tt-kick span { display: block; margin-top: .9cqw; color: var(--tt-soft); font-family: var(--font-display); font-size: 1.7cqw; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tt-kick small { display: block; margin-top: .4cqw; color: var(--tt-hot); font-family: var(--font-body); font-size: 1.5cqw; font-weight: 800; text-transform: uppercase; }

.tt-kick.is-goal { border-bottom-color: var(--tt-white); }
.tt-kick.is-goal span { color: var(--tt-white); }

.tt-kick.is-miss, .tt-kick.is-post, .tt-kick.is-bar { background: #2a0610; border-bottom-color: var(--tt-red); }
.tt-kick.is-miss span, .tt-kick.is-post span, .tt-kick.is-bar span { color: var(--tt-hot); }

.tt-kick.is-saved { background: var(--tt-red); border-bottom-color: #fff; }
.tt-kick.is-saved span, .tt-kick.is-saved small { color: #fff; }

.tt-kicks-away .tt-kick { border-bottom-color: var(--tt-grey); }
.tt-kicks-away .tt-kick.is-goal span { color: var(--tt-soft); }
.tt-kicks-away .tt-kick.is-miss, .tt-kicks-away .tt-kick.is-post, .tt-kicks-away .tt-kick.is-bar { border-bottom-color: var(--tt-red); }
.tt-kicks-away .tt-kick.is-saved { border-bottom-color: #fff; }

.titan-slide.is-active .tt-kick { animation: tt-kick 420ms cubic-bezier(.12, .9, .2, 1) calc(900ms + var(--tt-k, 0) * 460ms) both; }
.titan-slide.is-active .tt-kick.is-saved { animation: tt-kick 420ms cubic-bezier(.12, .9, .2, 1) calc(900ms + var(--tt-k, 0) * 460ms) both, tt-saved 700ms ease-out calc(1300ms + var(--tt-k, 0) * 460ms) both; }

@keyframes tt-kick { from { opacity: 0; transform: translateY(-4cqw) scale(1.8); } to { opacity: 1; transform: none; } }
@keyframes tt-saved { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .9); } 100% { box-shadow: 0 0 0 2.4cqw rgba(255, 255, 255, 0); } }

/* ---------- Layout vs (TIT-28): Gegenüberstellung ---------- */

.tt-media-versus { display: flex; min-height: 40cqw; }

.tt-versus { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }

.tt-vs-side { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 3cqw 3cqw 3cqw 2cqw; min-width: 0; }
.tt-vs-right { align-items: flex-end; text-align: right; padding: 3cqw 2cqw 3cqw 3cqw; }

.tt-vs-side small { color: var(--tt-grey); font-family: var(--font-display); font-size: 2.6cqw; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; }
.tt-vs-side strong { display: block; margin: 1.2cqw 0 1cqw; font-family: var(--font-display); font-size: 16cqw; font-weight: 900; line-height: .85; letter-spacing: -.03em; transform: skewX(-8deg); }
.tt-vs-side b { display: block; font-family: var(--font-display); font-size: 3cqw; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.tt-vs-side p { margin: 1.2cqw 0 0; color: var(--tt-soft); font-family: var(--font-body); font-size: 2.4cqw; line-height: 1.25; }

.tt-vs-left strong { color: var(--tt-grey); }
.tt-vs-left b { color: var(--tt-grey); }
.tt-vs-right strong { color: var(--tt-white); text-shadow: .9cqw .9cqw 0 var(--tt-red); }
.tt-vs-right b { color: var(--tt-red); }

.tt-vs-slash { position: absolute; left: 50%; top: 1cqw; bottom: 1cqw; width: 1.2cqw; margin-left: -.6cqw; background: var(--tt-white); transform: skewX(-14deg); }

.titan-slide.is-active .tt-vs-left { animation: tt-from-l 520ms cubic-bezier(.12, .9, .2, 1) 300ms both; }
.titan-slide.is-active .tt-vs-right { animation: tt-from-r 520ms cubic-bezier(.12, .9, .2, 1) 700ms both; }
.titan-slide.is-active .tt-vs-slash { animation: tt-slash-in 360ms cubic-bezier(.12, .9, .2, 1) 560ms both; }

@keyframes tt-from-l { from { opacity: 0; transform: translateX(-60cqw); } to { opacity: 1; transform: none; } }
@keyframes tt-from-r { from { opacity: 0; transform: translateX(60cqw); } to { opacity: 1; transform: none; } }
@keyframes tt-slash-in { from { opacity: 0; transform: skewX(-14deg) scaleY(0); } to { opacity: 1; transform: skewX(-14deg) scaleY(1); } }

/* ---------- Layout zeit (TIT-29): Zeitleiste ---------- */

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

.tt-timeline { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 0; }

.tt-timeline li { display: grid; grid-template-columns: 17cqw 1fr; align-items: baseline; gap: 2cqw; padding: 1.8cqw 0; border-top: .25cqw solid rgba(255, 255, 255, .18); }
.tt-timeline li:last-child { border-bottom: .25cqw solid rgba(255, 255, 255, .18); }
.tt-timeline b { color: var(--tt-red); font-family: var(--font-display); font-size: 5.4cqw; font-weight: 900; line-height: .95; text-align: right; transform: skewX(-8deg); transform-origin: right bottom; white-space: nowrap; }
.tt-timeline span { color: var(--tt-soft); font-family: var(--font-body); font-size: 2.8cqw; line-height: 1.22; }

.titan-slide.is-active .tt-timeline li { animation: tt-from-r 420ms cubic-bezier(.12, .9, .2, 1) calc(500ms + var(--i, 0) * 320ms) both; }

/* ---------- Layout zitat (TIT-32) ---------- */

.tt-layout-zitat .tt-shake { justify-content: center; }
.tt-layout-zitat .tt-head h2 { font-size: 4.6cqw; line-height: 1; }
.tt-layout-zitat .tt-head { padding-bottom: 1cqw; }

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

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

    content: "\201E";
    position: absolute;
    top: -3cqw;
    left: 0;
    color: var(--tt-red);
    font-family: var(--font-display);
    font-size: 26cqw;
    font-weight: 900;
    line-height: 1;

}

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

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

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

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

.tt-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(0, 0, 0, .92), rgba(0, 0, 0, .55) 80%, transparent);
    border-bottom: .3cqw solid var(--tt-red);

}

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

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

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

/* ---------- Fußleiste: Runden, Nummer, Segmente (SPEC-31) ---------- */

.tt-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(0, 0, 0, .94) 55%, transparent);

}

.tt-chapters { grid-column: 1 / -1; grid-row: 1; display: flex; gap: .5cqw; margin: 0 0 1.2cqw; font-family: var(--font-display); }
.tt-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 rgba(255, 255, 255, .14); color: var(--tt-grey); text-align: center; font-size: 1.8cqw; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transition: color 200ms linear; }
.tt-chapters span.is-current { color: var(--tt-white); border-bottom-color: var(--tt-red); }
.tt-chapters[data-count="0"] { display: none; }

.tt-nr { grid-row: 2; grid-column: 1; display: flex; align-items: baseline; gap: .6cqw; padding: .6cqw 1.8cqw; background: var(--tt-red); clip-path: polygon(1.2cqw 0, 100% 0, calc(100% - 1.2cqw) 100%, 0 100%); color: #fff; font-family: var(--font-display); font-weight: 900; }
.tt-nr b { font-size: 4.6cqw; line-height: 1; }
.tt-nr i { font-size: 2.6cqw; font-style: normal; opacity: .75; }
.tt-nr span { font-size: 2.8cqw; opacity: .85; }

.tt-track { grid-row: 2; grid-column: 2; display: flex; gap: .35cqw; }
.tt-bar { position: relative; flex: 1; height: 1.5cqw; overflow: hidden; background: rgba(255, 255, 255, .14); transform: skewX(-18deg); }
.tt-bar.is-chapter-start { margin-left: 1.4cqw; }
.tt-bar i { position: absolute; inset: 0; width: 0; background: var(--tt-red); }
.tt-bar.is-past i { width: 100%; background: var(--tt-white); }
.tt-bar.is-current i { animation: tt-fill linear both; }

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

/* ---------- Layout tafel (LEW-20): LED-Anzeigetafel, Torzeilen leuchten nacheinander auf ---------- */

.tt-media-tafel { display: flex; align-items: flex-start; flex: 0 0 auto; min-height: 0; }

.tt-tafel { width: 100%; padding: 2cqw 3.4cqw; background: #020203; border: .5cqw solid #2a2a31; box-shadow: inset 0 0 6cqw rgba(220, 5, 45, .22); }

.tt-tafel-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; padding-bottom: 1.4cqw; border-bottom: .3cqw solid rgba(255, 255, 255, .2); font-family: var(--font-display); text-transform: uppercase; }
.tt-tafel-head span { color: var(--tt-soft); font-size: 2.8cqw; font-weight: 900; letter-spacing: .08em; }
.tt-tafel-head span:last-child { text-align: right; }
.tt-tafel-head strong { display: flex; align-items: baseline; gap: 1cqw; color: #ff3b3b; font-size: 8cqw; font-weight: 900; line-height: .9; text-shadow: 0 0 2.4cqw rgba(255, 59, 59, .8); transform: skewX(-8deg); font-variant-numeric: tabular-nums; }
.tt-tafel-head strong i { font-style: normal; opacity: .7; }

.tt-tafel-goals { list-style: none; margin: 0; padding: .6cqw 0 0; display: grid; gap: 0; }
.tt-tafel-goals li { display: grid; grid-template-columns: 14cqw 1fr auto; align-items: baseline; gap: 2cqw; padding: .9cqw 0; border-bottom: .2cqw solid rgba(255, 255, 255, .12); }
.tt-tafel-goals b { color: #ff3b3b; font-family: var(--font-display); font-size: 4.6cqw; font-weight: 900; line-height: 1; text-align: right; text-shadow: 0 0 1.6cqw rgba(255, 59, 59, .7); font-variant-numeric: tabular-nums; }
.tt-tafel-goals span { color: var(--tt-white); font-family: var(--font-display); font-size: 3.6cqw; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tt-tafel-goals em { padding: .3cqw 1.4cqw; background: var(--tt-red); color: #fff; font-family: var(--font-display); font-size: 2.2cqw; font-style: normal; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; clip-path: polygon(.8cqw 0, 100% 0, calc(100% - .8cqw) 100%, 0 100%); }

.tt-tafel-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 2cqw; padding-top: 1.2cqw; font-family: var(--font-display); text-transform: uppercase; }
.tt-tafel-sum { color: var(--tt-white); font-size: 8cqw; font-weight: 900; line-height: .9; text-shadow: .8cqw .8cqw 0 var(--tt-red); transform: skewX(-8deg); font-variant-numeric: tabular-nums; }
.tt-tafel-total small { color: var(--tt-grey); font-size: 2.6cqw; font-weight: 900; letter-spacing: .2em; }

.titan-slide.is-active .tt-tafel-head strong { animation: tt-slam 560ms cubic-bezier(.12, .9, .2, 1) 300ms both; }
.titan-slide.is-active .tt-tafel-goals li { animation: tt-led-on 520ms steps(1, end) calc(900ms + var(--i, 0) * 520ms) both; }
.titan-slide.is-active .tt-tafel-total { animation: tt-slide-l 520ms cubic-bezier(.2, .9, .2, 1) calc(1000ms + var(--tt-rows, 5) * 520ms) both; }

@keyframes tt-led-on {

    0% { opacity: 0; }
    20% { opacity: 1; background: rgba(255, 59, 59, .55); }
    40% { opacity: .2; background: transparent; }
    60% { opacity: 1; background: rgba(255, 59, 59, .35); }
    100% { opacity: 1; background: transparent; }

}

/* ---------- Variante "torjaeger" (scene.variant, LEW-21): Torlinie, rotes Netz, LED-Zähler (Lewandowski) ---------- */
/* Die Variante hängt am Marker .tt-fx[data-variant="torjaeger"]; die Standard-Familie bleibt unverändert (SPEC-35). */

.titan-scene:has(.tt-fx[data-variant="torjaeger"]) { background: radial-gradient(90% 60% at 12% 0%, rgba(220, 5, 45, .42), transparent 62%), radial-gradient(80% 50% at 100% 100%, rgba(220, 5, 45, .26), transparent 60%), linear-gradient(180deg, #0c0708, var(--tt-black)); }

.tt-fx[data-variant="torjaeger"] .tt-net {

    background:
        repeating-linear-gradient(45deg, rgba(255, 60, 90, .16) 0 .16cqw, transparent .16cqw 2.4cqw),
        repeating-linear-gradient(-45deg, rgba(255, 60, 90, .16) 0 .16cqw, transparent .16cqw 2.4cqw);
    animation: tt-net-sway 9s ease-in-out infinite alternate;

}

.tt-fx[data-variant="torjaeger"] .tt-slash-b { background: #fff; opacity: .12; }

/* Torlinie unter der Schlagzeile: wächst von links, links ein roter Pfosten */
.titan-scene:has(.tt-fx[data-variant="torjaeger"]) .tt-head::after {

    content: "";
    display: block;
    width: 100%;
    height: .7cqw;
    margin-top: 1.8cqw;
    background: linear-gradient(90deg, var(--tt-red) 0 6cqw, #fff 6cqw);
    transform-origin: left center;

}

.titan-scene:has(.tt-fx[data-variant="torjaeger"]) .titan-slide.is-active .tt-head::after { animation: tt-torlinie 700ms cubic-bezier(.12, .9, .2, 1) 260ms both; }
.titan-scene:has(.tt-fx[data-variant="torjaeger"]) .tt-layout-titel .tt-head::after, .titan-scene:has(.tt-fx[data-variant="torjaeger"]) .tt-layout-zitat .tt-head::after { display: none; }

/* Seitenzahl als LED-Anzeige */
.titan-scene:has(.tt-fx[data-variant="torjaeger"]) .tt-nr { background: #000; border: .25cqw solid var(--tt-red); color: #ff3b3b; text-shadow: 0 0 1.4cqw rgba(255, 59, 59, .8); font-variant-numeric: tabular-nums; }

@keyframes tt-torlinie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tt-net-sway { from { transform: translate(0, 0); } to { transform: translate(-2.4cqw, 1.2cqw); } }

.tt-fx.is-lite[data-variant="torjaeger"] .tt-net { animation: none; }

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

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

    .titan-scene *, .titan-scene *::before, .titan-scene *::after { animation: none !important; transition: none !important; }
    .tt-bar.is-current i { width: 100%; }
    .tt-ghost { display: none; }

}

/* ---------- Variante "strom" (scene.variant, MEN-21): Leiterbahnen, Kabel-Linie, Funken (Mennekes) ---------- */
/* Die Variante hängt am Marker .tt-fx[data-variant="strom"]; die Standard-Familie und die anderen Varianten bleiben unverändert (SPEC-35). */

.titan-scene:has(.tt-fx[data-variant="strom"]) { background: radial-gradient(90% 60% at 10% 0%, rgba(220, 5, 45, .4), transparent 62%), radial-gradient(70% 45% at 100% 100%, rgba(120, 200, 255, .13), transparent 60%), linear-gradient(180deg, #0a0a0f, var(--tt-black)); }

/* Leiterbahnen statt Tornetz: feine Waagerechte und Senkrechte (stehen still, damit je Slide höchstens zwei Dauerbewegungen laufen) */
.tt-fx[data-variant="strom"] .tt-net {

    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 .12cqw, transparent .12cqw 3.2cqw),
        repeating-linear-gradient(90deg, rgba(255, 60, 90, .12) 0 .12cqw, transparent .12cqw 9.6cqw);

}

.tt-fx[data-variant="strom"] .tt-slash-b { background: #bfe9ff; opacity: .16; animation: tt-strom-flicker 4.4s steps(1, end) infinite; }

/* Kabel unter der Schlagzeile: roter Stecker links, weißer Leiter, Funke am Ende */
.titan-scene:has(.tt-fx[data-variant="strom"]) .tt-head::after {

    content: "";
    display: block;
    width: 100%;
    height: .7cqw;
    margin-top: 1.8cqw;
    background: linear-gradient(90deg, var(--tt-red) 0 6cqw, #fff 6cqw calc(100% - 3cqw), #bfe9ff calc(100% - 3cqw));
    box-shadow: 0 0 1.6cqw rgba(190, 235, 255, .45);
    transform-origin: left center;

}

.titan-scene:has(.tt-fx[data-variant="strom"]) .titan-slide.is-active .tt-head::after { animation: tt-torlinie 700ms cubic-bezier(.12, .9, .2, 1) 260ms both; }
.titan-scene:has(.tt-fx[data-variant="strom"]) .tt-layout-titel .tt-head::after, .titan-scene:has(.tt-fx[data-variant="strom"]) .tt-layout-zitat .tt-head::after { display: none; }

/* Seitenzahl als Spannungsanzeige */
.titan-scene:has(.tt-fx[data-variant="strom"]) .tt-nr { background: #05070c; border: .25cqw solid #bfe9ff; color: #e6f7ff; text-shadow: 0 0 1.4cqw rgba(150, 220, 255, .8); font-variant-numeric: tabular-nums; }

@keyframes tt-strom-flicker {

    0%, 30% { opacity: .1; }
    31% { opacity: .42; }
    33% { opacity: .08; }
    34%, 71% { opacity: .1; }
    72% { opacity: .5; }
    74% { opacity: .1; }
    75%, 100% { opacity: .12; }

}

.tt-fx.is-lite[data-variant="strom"] .tt-slash-b { animation: none; }

/* ---------- Backdrop "krizzeln" (BACKDROP-06): Spannung in der Arena-Pause ---------- */
/* Gilt nur für Specials mit stageRotation.backdropAnimation = "krizzeln". Die Bewegung läuft nur, solange die
   Arena-Pause sichtbar ist (sonst steht sie hinter den Slides still); Transform, Opazität und Filter, kein Layout. */

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

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

/* Das Bild zittert in kleinen Sprüngen und flackert in der Helligkeit. */
.stage-special-backdrop[data-anim="krizzeln"] > img:not(.stage-special-ghost) { animation: tt-bd-jitter 1.9s steps(1, end) infinite; }

@keyframes tt-bd-jitter {

    0% { transform: translate(0, 0); filter: saturate(1.18) contrast(1.08) brightness(.86) drop-shadow(0 0 50px rgba(220, 5, 45, .36)); }
    8% { transform: translate(.25vw, -.18vw); }
    16% { transform: translate(-.2vw, .15vw); filter: saturate(1.3) contrast(1.2) brightness(1.08) drop-shadow(0 0 60px rgba(220, 5, 45, .6)); }
    24% { transform: translate(.1vw, .2vw); filter: saturate(1.18) contrast(1.08) brightness(.86) drop-shadow(0 0 50px rgba(220, 5, 45, .36)); }
    40% { transform: translate(-.28vw, -.1vw); }
    52% { transform: translate(.18vw, .12vw); filter: saturate(1.4) contrast(1.25) brightness(1.18) drop-shadow(0 0 70px rgba(220, 5, 45, .7)); }
    56% { transform: translate(0, 0); filter: saturate(1.18) contrast(1.08) brightness(.8) drop-shadow(0 0 50px rgba(220, 5, 45, .3)); }
    72% { transform: translate(.22vw, -.2vw); filter: saturate(1.18) contrast(1.08) brightness(.86) drop-shadow(0 0 50px rgba(220, 5, 45, .36)); }
    88% { transform: translate(-.15vw, .18vw); }
    100% { transform: translate(0, 0); }

}

/* Glitch-Schübe: zwei Kopien blitzen mit versetzten Streifen auf, dazwischen Ruhe (Spannung). */
.stage-special-backdrop .stage-special-ghost { opacity: 0; mix-blend-mode: screen; transform: none; }

.stage-special-backdrop[data-anim="krizzeln"] .stage-special-ghost:nth-of-type(2) { animation: tt-bd-burst-a 4.6s steps(1, end) infinite; }
.stage-special-backdrop[data-anim="krizzeln"] .stage-special-ghost:nth-of-type(3) { animation: tt-bd-burst-b 4.6s steps(1, end) 120ms infinite; }

@keyframes tt-bd-burst-a {

    0%, 78% { opacity: 0; }
    79% { opacity: .9; transform: translateX(-1.6vw); clip-path: inset(10% 0 70% 0); filter: grayscale(1) sepia(1) saturate(9) hue-rotate(-35deg); }
    82% { opacity: .9; transform: translateX(1.3vw); clip-path: inset(55% 0 20% 0); }
    85% { opacity: .8; transform: translateX(-.9vw); clip-path: inset(30% 0 45% 0); }
    88% { opacity: .85; transform: translateX(1.8vw); clip-path: inset(76% 0 4% 0); }
    91%, 100% { opacity: 0; transform: none; clip-path: inset(0); }

}

@keyframes tt-bd-burst-b {

    0%, 80% { opacity: 0; }
    81% { opacity: .7; transform: translateX(1.4vw); clip-path: inset(60% 0 15% 0); filter: grayscale(1) brightness(1.7) contrast(1.4); }
    84% { opacity: .7; transform: translateX(-1.6vw); clip-path: inset(18% 0 62% 0); }
    87% { opacity: .6; transform: translateX(.8vw); clip-path: inset(82% 0 2% 0); }
    90%, 100% { opacity: 0; transform: none; clip-path: inset(0); }

}

/* Herzschlag: der rote Schein hinter dem Bild pocht doppelt, dann Pause. */
.stage-special-backdrop[data-anim="krizzeln"]::before { animation: tt-bd-beat 1.7s ease-out infinite; }

@keyframes tt-bd-beat {

    0% { opacity: .3; transform: scale(1); }
    12% { opacity: .95; transform: scale(1.08); }
    24% { opacity: .4; transform: scale(1.01); }
    36% { opacity: .85; transform: scale(1.06); }
    55%, 100% { opacity: .3; transform: scale(1); }

}

/* Krizzeln: Kritzelstriche in Rot und Weiß über dem Bild, die in harten Schritten springen. */
.stage-special-backdrop[data-anim="krizzeln"]::after {

    content: "";
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    background:
        repeating-linear-gradient(63deg, transparent 0 1.1vw, rgba(255, 255, 255, .34) 1.1vw 1.2vw, transparent 1.2vw 2.7vw),
        repeating-linear-gradient(-28deg, transparent 0 1.8vw, rgba(220, 5, 45, .5) 1.8vw 1.95vw, transparent 1.95vw 3.6vw);
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 70%);
    mask-image: linear-gradient(90deg, transparent 30%, #000 70%);
    opacity: .5;
    animation: tt-bd-scribble .72s steps(1, end) infinite;
    pointer-events: none;

}

@keyframes tt-bd-scribble {

    0% { transform: translate(0, 0) rotate(0deg); opacity: .5; }
    25% { transform: translate(.8vw, -.6vw) rotate(.6deg); opacity: .22; }
    50% { transform: translate(-.6vw, .7vw) rotate(-.5deg); opacity: .55; }
    75% { transform: translate(.4vw, .9vw) rotate(.3deg); opacity: .3; }
    100% { transform: translate(0, 0) rotate(0deg); opacity: .5; }

}

/* Die Rückennummer flackert wie ein defektes Leuchtschild und zuckt seitlich. */
.stage-special-backdrop[data-anim="krizzeln"] .stage-special-watermark-text { animation: tt-bd-flicker 3.3s steps(1, end) infinite; }
.stage-special-backdrop[data-anim="krizzeln"] .stage-special-watermark-caption { animation: tt-bd-caption 3.3s steps(1, end) infinite; }

@keyframes tt-bd-flicker {

    0% { opacity: 1; transform: translateX(0); }
    9% { opacity: .35; transform: translateX(.5vw); }
    11% { opacity: 1; transform: translateX(-.4vw); }
    13% { opacity: .55; transform: translateX(0); }
    15% { opacity: 1; }
    52% { opacity: .75; transform: translateX(-.6vw); text-shadow: 0 0 9vw rgba(255, 42, 77, .85); }
    54% { opacity: 1; transform: translateX(.3vw); text-shadow: 0 0 5vw rgba(220, 5, 45, .35); }
    81% { opacity: .5; transform: translateX(0); }
    83% { opacity: 1; }
    100% { opacity: 1; }

}

@keyframes tt-bd-caption {

    0%, 40% { opacity: 1; }
    41% { opacity: .2; }
    43% { opacity: 1; }
    80% { opacity: .35; }
    82%, 100% { opacity: 1; }

}

/* ---------- Backdrop "strom" (QS-11): Blitzbögen, pochender Schein, langsamer Zoom ---------- */
/* Gilt nur für stageRotation.backdropAnimation = "strom". Ebenen nach QS-14: ::before Schein, ::after Blitzbögen. */

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

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

.stage-special-backdrop[data-anim="strom"] > img:not(.stage-special-ghost) { animation: tt-bd-stromzoom 13s ease-in-out infinite alternate; }
.stage-special-backdrop[data-anim="strom"]::before { animation: tt-bd-strompuls 2.2s ease-in-out infinite; }

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

    content: "";
    position: absolute;
    left: -6%;
    top: 0;
    width: 112%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='miter' stroke-linecap='square'%3E%3Cpath d='M64 0 L57 21 L65 23 L52 50 L60 52 L46 100' stroke='rgba(255,40,70,.55)' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M64 0 L57 21 L65 23 L52 50 L60 52 L46 100' stroke='rgba(255,255,255,.95)' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M86 0 L81 17 L87 19 L77 42 L83 44 L73 72' stroke='rgba(255,40,70,.5)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M86 0 L81 17 L87 19 L77 42 L83 44 L73 72' stroke='rgba(190,235,255,.95)' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M34 0 L29 15 L35 17 L24 40 L30 42 L18 78' stroke='rgba(255,40,70,.45)' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M34 0 L29 15 L35 17 L24 40 L30 42 L18 78' stroke='rgba(255,255,255,.9)' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: 0;
    animation: tt-bd-bogen 3.8s steps(1, end) infinite;
    will-change: transform, opacity;

}

@keyframes tt-bd-stromzoom {

    from { transform: scale(1); }
    to { transform: scale(1.06); }

}

@keyframes tt-bd-strompuls {

    0%, 100% { opacity: .35; transform: scale(1); }
    50% { opacity: .95; transform: scale(1.07); }

}

@keyframes tt-bd-bogen {

    0%, 52% { opacity: 0; transform: translateX(0); }
    53% { opacity: 1; transform: translateX(-.8vw); }
    55% { opacity: .15; transform: translateX(.6vw); }
    57% { opacity: .95; transform: translateX(1.4vw); }
    60% { opacity: 0; }
    74% { opacity: 0; transform: translateX(-3vw); }
    75% { opacity: .9; transform: translateX(-2.4vw); }
    77% { opacity: .1; }
    78% { opacity: 1; transform: translateX(-3.4vw); }
    81%, 100% { opacity: 0; }

}

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

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

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

}