/*
 * Familie "taktik" für Stage-Specials (scene.template = "taktik").
 * Taktiktafel: heller Grund, Spielfeldlinien, Rückennummer, Laufwege.
 * Alle Maße in Container-Einheiten (cqw): 100cqw = Breite der Bühne (Kiosk: 2160 px).
 * Vertrag: docs/lahm-special.md (TAKTIK-01 bis TAKTIK-08).
 */

.stage-special-scene.taktik-scene {

    --tk-paper: #e6e5e0;
    --tk-paper-deep: #d7d6d0;
    --tk-ink: #14161a;
    --tk-ink-soft: rgba(20, 22, 26, .68);
    --tk-red: #dc052d;
    --tk-line: rgba(20, 22, 26, .13);

    inset: 0;
    display: block;
    container-type: size;
    background:
        radial-gradient(circle at 80% 18%, rgba(255, 255, 255, .55), transparent 55%),
        linear-gradient(180deg, var(--tk-paper), var(--tk-paper-deep));
    color: var(--tk-ink);
    transform: none;
    transition: opacity 900ms ease;
    overflow: hidden;
    z-index: 2;

}

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

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

/* ---------- Spielfeld im Hintergrund ---------- */

.tk-field { position: absolute; inset: 0; }
.tk-field svg { width: 100%; height: 100%; }

.tk-pitch-lines path,
.tk-pitch-centre { fill: none; stroke: var(--tk-line); stroke-width: .35; stroke-linecap: round; }
.tk-field .tk-pitch-lines path,
.tk-field .tk-pitch-centre { stroke: rgba(20, 22, 26, .08); stroke-width: .5; }

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

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

.taktik-slide.stage-special-slide {

    display: block;
    transform: none;
    transition: opacity 900ms ease;
    overflow: hidden;

}

/* Rückennummer als Umriss (TAKTIK-02) */

.tk-number {

    position: absolute;
    left: 3cqw;
    top: 11cqw;
    color: transparent;
    -webkit-text-stroke: .28cqw rgba(20, 22, 26, .22);
    font-family: var(--font-display);
    font-size: 46cqw;
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.03em;
    pointer-events: none;

}

.taktik-slide.is-active .tk-number { animation: tk-number-in 1300ms cubic-bezier(.2, .7, .2, 1) both; }

@keyframes tk-number-in {

    from { opacity: 0; transform: translateX(-5cqw); }
    to { opacity: 1; transform: none; }

}

/* Foto, diagonal angeschnitten (TAKTIK-04) */

.tk-stripe {

    position: absolute;
    left: 31cqw;
    top: 8cqw;
    width: 69cqw;
    height: min(58cqw, 48cqh);
    background: var(--tk-red);
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(3cqw);

}

.tk-photo {

    position: absolute;
    left: 36cqw;
    top: 8cqw;
    width: 64cqw;
    height: min(58cqw, 48cqh);
    margin: 0;
    overflow: hidden;
    background: #bfbdb6;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);

}

.tk-photo img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--tk-focus, 50% 25%);

}

.taktik-slide.is-active .tk-photo img { animation: tk-zoom var(--tk-dur, 16s) cubic-bezier(.25, .1, .25, 1) both; }

@keyframes tk-zoom {

    from { transform: scale(1.02); }
    to { transform: scale(1.1); }

}

.tk-photo figcaption {

    position: absolute;
    right: 2.4cqw;
    bottom: 1.6cqw;
    padding: .3cqw .8cqw;
    background: rgba(20, 22, 26, .6);
    color: rgba(255, 255, 255, .85);
    font-family: var(--font-body);
    font-size: 1.5cqw;
    letter-spacing: .05em;
    text-transform: uppercase;

}

/* Text */

.tk-copy {

    position: absolute;
    left: 6cqw;
    right: 6cqw;
    bottom: 19cqw;
    z-index: 3;

}

.tk-kicker {

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

}

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

.tk-copy h2 {

    margin: 0;
    max-width: 78cqw;
    color: var(--tk-ink);
    font-family: var(--font-display);
    font-size: 7.4cqw;
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.005em;
    text-transform: uppercase;

}

.tk-subtitle {

    margin: 1.6cqw 0 0;
    color: var(--tk-ink);
    font-family: var(--font-display);
    font-size: 2.7cqw;
    font-weight: 800;
    line-height: 1.15;

}

.tk-body {

    max-width: 74cqw;
    margin: 1.6cqw 0 0;
    color: var(--tk-ink-soft);
    font-family: var(--font-body);
    font-size: 2.35cqw;
    line-height: 1.32;

}

.taktik-slide.is-active .tk-copy > * { animation: tk-rise 900ms cubic-bezier(.2, .7, .2, 1) both; }
.taktik-slide.is-active .tk-copy > :nth-child(2) { animation-delay: 120ms; }
.taktik-slide.is-active .tk-copy > :nth-child(3) { animation-delay: 220ms; }
.taktik-slide.is-active .tk-copy > :nth-child(4) { animation-delay: 320ms; }

@keyframes tk-rise {

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

}

.tk-facts {

    position: absolute;
    left: 6cqw;
    right: 6cqw;
    bottom: 10cqw;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 1cqw;

}

.tk-facts span {

    padding: .8cqw 1.6cqw;
    border: .2cqw solid var(--tk-ink);
    color: var(--tk-ink);
    font-family: var(--font-display);
    font-size: 1.7cqw;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;

}

/* Ohne Foto: der Text rückt nach oben, die Nummer bleibt Leitmotiv */

.tk-layout-cutout.no-photo .tk-copy { top: 44cqw; bottom: auto; }
.tk-layout-cutout.no-photo .tk-number { left: auto; right: 3cqw; }

/* ---------- Layout pitch (TAKTIK-03) ---------- */

.tk-layout-pitch .tk-copy { top: 13cqw; bottom: auto; }
.tk-layout-pitch .tk-copy h2 { font-size: 6.4cqw; }
/* Die Rückennummer bleibt Hintergrund und darf den Titel nicht stören. */
.tk-layout-pitch .tk-number,
.tk-layout-scoreline .tk-number,
.tk-layout-stats .tk-number,
.tk-layout-timeline .tk-number,
.tk-layout-quote .tk-number { opacity: .5; left: auto; right: 2cqw; top: 6cqw; font-size: 34cqw; }

.tk-pitch {

    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(92cqw, calc((100cqh - 54cqw) * 1.5));
    top: 41cqw;
    overflow: visible;

}

.tk-pitch-lines path { stroke: rgba(20, 22, 26, .55); stroke-width: .28; }
.tk-pitch .tk-pitch-centre { stroke: rgba(20, 22, 26, .55); stroke-width: .28; }
.tk-pitch-dot { fill: rgba(20, 22, 26, .6); }

.tk-route {

    fill: none;
    stroke: var(--tk-red);
    stroke-width: .9;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;

}

.taktik-slide.is-active .tk-route { animation: tk-draw 2600ms cubic-bezier(.45, .05, .3, 1) 500ms both; }

@keyframes tk-draw { to { stroke-dashoffset: 0; } }

.tk-stop circle { fill: var(--tk-paper); stroke: var(--tk-red); stroke-width: .7; opacity: 0; }
.tk-stop text { opacity: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; }
.tk-stop-label { fill: var(--tk-ink); font-size: 2.8px; letter-spacing: .04em; }
.tk-stop-year { fill: var(--tk-red); font-size: 2.2px; letter-spacing: .12em; }

.taktik-slide.is-active .tk-stop circle,
.taktik-slide.is-active .tk-stop text {

    animation: tk-pop 500ms ease both;
    animation-delay: calc(500ms + var(--tk-delay, 0ms));

}

@keyframes tk-pop { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Layout scoreline (TAKTIK-05) ---------- */

.tk-layout-scoreline .tk-copy { top: 13cqw; bottom: auto; }
.tk-layout-scoreline .tk-copy h2 { font-size: 6.4cqw; }

.tk-board {

    position: absolute;
    left: 6cqw;
    right: 6cqw;
    top: 46cqw;
    padding: 3cqw 4cqw;
    background: var(--tk-ink);
    color: #fff;
    box-shadow: 1.2cqw 1.2cqw 0 var(--tk-red);

}

.tk-board-meta {

    margin: 0 0 2cqw;
    color: rgba(255, 255, 255, .65);
    font-family: var(--font-display);
    font-size: 1.8cqw;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;

}

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

.tk-team {

    font-family: var(--font-display);
    font-size: 3.6cqw;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;

}

.tk-team:last-child { text-align: right; }

.tk-result { display: flex; align-items: center; gap: 1.2cqw; font-family: var(--font-display); font-weight: 900; }
.tk-result b { font-size: 15cqw; line-height: .9; }
.tk-result i { color: var(--tk-red); font-size: 11cqw; font-style: normal; line-height: .9; }

.taktik-slide.is-active .tk-result b { animation: tk-count 900ms cubic-bezier(.2, .7, .2, 1) 300ms both; }

@keyframes tk-count {

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

}

.tk-board-notes {

    margin: 2.4cqw 0 0;
    padding: 2cqw 0 0;
    border-top: .2cqw solid rgba(255, 255, 255, .25);
    list-style: none;
    display: grid;
    gap: 1cqw;
    font-family: var(--font-body);
    font-size: 2.2cqw;

}

.tk-board-notes li::before { content: "\25CF"; margin-right: 1.2cqw; color: var(--tk-red); font-size: 1.4cqw; vertical-align: .15cqw; }

/* ---------- Layout stats ---------- */

.tk-layout-stats .tk-copy,
.tk-layout-timeline .tk-copy,
.tk-layout-quote .tk-copy { top: 13cqw; bottom: auto; }
.tk-layout-stats .tk-copy h2,
.tk-layout-timeline .tk-copy h2 { font-size: 6.4cqw; }

.tk-stats {

    position: absolute;
    left: 6cqw;
    right: 6cqw;
    top: 48cqw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6cqw;

}

.tk-stats[data-count="1"] { grid-template-columns: 1fr; }
.tk-stats[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

.tk-stat {

    padding: 2.4cqw 2.6cqw;
    background: #fff;
    border-top: .6cqw solid var(--tk-red);
    box-shadow: 0 .6cqw 1.6cqw rgba(20, 22, 26, .14);

}

.tk-stat strong {

    display: block;
    color: var(--tk-ink);
    font-family: var(--font-display);
    font-size: 8cqw;
    font-weight: 900;
    line-height: .95;

}

.tk-stat small {

    display: block;
    margin-top: 1cqw;
    color: var(--tk-red);
    font-family: var(--font-display);
    font-size: 1.8cqw;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;

}

.tk-stat span { display: block; margin-top: .8cqw; color: var(--tk-ink-soft); font-family: var(--font-body); font-size: 1.9cqw; }

.taktik-slide.is-active .tk-stat { animation: tk-rise 800ms cubic-bezier(.2, .7, .2, 1) both; }
.taktik-slide.is-active .tk-stat:nth-child(2) { animation-delay: 140ms; }
.taktik-slide.is-active .tk-stat:nth-child(3) { animation-delay: 280ms; }
.taktik-slide.is-active .tk-stat:nth-child(n+4) { animation-delay: 400ms; }

/* ---------- Layout timeline ---------- */

.tk-timeline-list {

    position: absolute;
    left: 8cqw;
    right: 6cqw;
    top: 46cqw;
    margin: 0;
    padding: 0 0 0 4cqw;
    list-style: none;
    border-left: .4cqw solid var(--tk-ink);
    display: grid;
    gap: 2.2cqw;

}

.tk-timeline-list li { position: relative; display: grid; grid-template-columns: 15cqw 1fr; align-items: baseline; gap: 2cqw; }

.tk-timeline-list li::before {

    content: "";
    position: absolute;
    left: -5.1cqw;
    top: 1.6cqw;
    width: 1.4cqw;
    height: 1.4cqw;
    border: .35cqw solid var(--tk-red);
    border-radius: 50%;
    background: var(--tk-paper);

}

.tk-timeline-list strong { color: var(--tk-red); font-family: var(--font-display); font-size: 5cqw; font-weight: 900; line-height: 1; }
.tk-timeline-list span { color: var(--tk-ink); font-family: var(--font-body); font-size: 2.6cqw; line-height: 1.25; }

.taktik-slide.is-active .tk-timeline-list li { animation: tk-rise 800ms cubic-bezier(.2, .7, .2, 1) both; }
.taktik-slide.is-active .tk-timeline-list li:nth-child(2) { animation-delay: 160ms; }
.taktik-slide.is-active .tk-timeline-list li:nth-child(3) { animation-delay: 320ms; }
.taktik-slide.is-active .tk-timeline-list li:nth-child(4) { animation-delay: 480ms; }
.taktik-slide.is-active .tk-timeline-list li:nth-child(n+5) { animation-delay: 640ms; }

/* ---------- Layout quote ---------- */

.tk-layout-quote .tk-photo,
.tk-layout-quote .tk-stripe { left: 64cqw; top: 46cqw; width: 36cqw; height: 46cqw; }
.tk-layout-quote.has-photo .tk-quote { right: 38cqw; }

.tk-quote { position: absolute; left: 6cqw; right: 6cqw; top: 44cqw; }

.tk-quote-mark {

    display: block;
    height: 7cqw;
    color: var(--tk-red);
    font-family: var(--font-display);
    font-size: 17cqw;
    font-weight: 900;
    line-height: 1;

}

.tk-quote p {

    margin: 0;
    color: var(--tk-ink);
    font-family: var(--font-display);
    font-size: 4.4cqw;
    font-weight: 800;
    line-height: 1.12;

}

.tk-quote footer {

    margin-top: 2cqw;
    color: var(--tk-red);
    font-family: var(--font-display);
    font-size: 2cqw;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;

}

.tk-layout-quote .tk-facts { display: none; }

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

.tk-header {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 2.4cqw 5cqw;

}

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

.tk-title { display: grid; gap: .5cqw; font-family: var(--font-display); text-transform: uppercase; }
.tk-title strong { color: var(--tk-ink); font-size: 2.4cqw; font-weight: 900; letter-spacing: .08em; line-height: 1; }
.tk-title span { color: var(--tk-red); font-size: 1.5cqw; font-weight: 800; letter-spacing: .2em; }

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

/* ---------- Spielminute und Fortschritt (SPEC-31) ---------- */

.tk-clock {

    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 2.6cqw;
    background: linear-gradient(0deg, var(--tk-paper-deep) 55%, transparent);

}

.tk-minute { grid-row: 1 / span 2; display: flex; align-items: baseline; color: var(--tk-ink); font-family: var(--font-display); font-weight: 900; }
.tk-minute b { font-size: 5.4cqw; line-height: 1; min-width: 7.2cqw; text-align: right; }
.tk-minute i { color: var(--tk-red); font-size: 3.4cqw; font-style: normal; }

.tk-track { display: flex; gap: .35cqw; }
.tk-bar { position: relative; flex: 1; height: .8cqw; overflow: hidden; background: rgba(20, 22, 26, .18); }
.tk-bar.is-chapter-start { margin-left: 1.2cqw; }
.tk-bar i { position: absolute; inset: 0; width: 0; background: var(--tk-red); }
.tk-bar.is-past i { width: 100%; background: var(--tk-ink); }
.tk-bar.is-current i { animation: tk-fill linear both; }

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

.tk-chapters { display: flex; gap: 1.2cqw; margin-top: .9cqw; font-family: var(--font-display); text-transform: uppercase; }
.tk-chapters[data-count="0"] { display: none; }
.tk-chapters span { flex-basis: 0; min-width: 0; color: var(--tk-ink-soft); font-size: 1.5cqw; font-weight: 900; letter-spacing: .1em; white-space: nowrap; opacity: .55; transition: opacity 600ms ease; }
.tk-chapters span.is-current { color: var(--tk-ink); opacity: 1; }

/* ---------- Qualitätsanhebung QS-20 (docs/special-quality-standard.md): größere Schrift, Einschlag, Schnitt ---------- */

.tk-kicker { font-size: 2.1cqw; }
.tk-body { font-size: 2.8cqw; }
.tk-facts span { font-size: 2cqw; }
.tk-stat small { font-size: 2.1cqw; }
.tk-stat span { font-size: 2.1cqw; }
.tk-photo figcaption { font-size: 1.5cqw; }

/* Die Schlagzeile schlägt ein: aus größerer Form, kurz unscharf, dann scharf. */
.taktik-scene .taktik-slide.is-active .tk-copy > h2 { animation: tk-slam 600ms cubic-bezier(.15, .9, .2, 1) 200ms both; }

@keyframes tk-slam {

    from { opacity: 0; transform: translateX(-2.4cqw) scale(1.12); filter: blur(.6cqw); }
    55% { opacity: 1; filter: blur(0); }
    to { opacity: 1; transform: none; filter: none; }

}

/* Roter Schnitt: ein Vereinsrot-Streifen fährt beim Slide-Wechsel einmal schräg durchs Bild. */
.taktik-slide::after {

    content: "";
    position: absolute;
    left: -30%;
    top: -10%;
    width: 24%;
    height: 120%;
    z-index: 7;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(220, 5, 45, .85) 40%, rgba(255, 255, 255, .85) 55%, transparent);
    transform: skewX(-18deg);
    opacity: 0;

}

.taktik-slide.is-active::after { animation: qs-tk-cut 900ms cubic-bezier(.5, 0, .2, 1) both; }

@keyframes qs-tk-cut {

    0% { opacity: 1; transform: skewX(-18deg) translateX(0); }
    100% { opacity: 1; transform: skewX(-18deg) translateX(620%); }

}

/* Die Rückennummer pocht langsam (eine Dauerbewegung). */
.taktik-slide.is-active .tk-number { animation: tk-number-in 1300ms cubic-bezier(.2, .7, .2, 1) both, qs-tk-glow 5s ease-in-out 1300ms infinite; }

@keyframes qs-tk-glow {

    0%, 100% { -webkit-text-stroke-color: rgba(20, 22, 26, .22); }
    50% { -webkit-text-stroke-color: rgba(220, 5, 45, .55); }

}

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

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

}

/* =====================================================================================================
   Variante "general" (scene.variant = "general", Hitzfeld, docs/hitzfeld-special.md, HIT-20 bis HIT-26):
   Kommandotafel. Gleiche Layouts wie die helle Taktiktafel, aber schwarzer Grund, weiße Linien,
   rotes Schulterband, ein rotes Lichtband, das langsam über die Tafel wandert, und pochende Nummer.
   Die Variante hängt am Marker .tk-field[data-variant="general"]; die helle Variante bleibt unverändert (SPEC-35).
   ===================================================================================================== */

.taktik-scene:has(.tk-field[data-variant="general"]) {

    --tk-paper: #15171b;
    --tk-paper-deep: #08090b;
    --tk-ink: #ffffff;
    --tk-ink-soft: rgba(255, 255, 255, .82);
    --tk-line: rgba(255, 255, 255, .14);

    background:
        radial-gradient(circle at 84% 12%, rgba(220, 5, 45, .34), transparent 46%),
        radial-gradient(circle at 10% 92%, rgba(220, 5, 45, .2), transparent 52%),
        linear-gradient(180deg, var(--tk-paper), var(--tk-paper-deep));

}

.taktik-scene:has(.tk-field[data-variant="general"]) .tk-field .tk-pitch-lines path,
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-field .tk-pitch-centre { stroke: rgba(255, 255, 255, .07); }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-pitch-lines path,
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-pitch .tk-pitch-centre { stroke: rgba(255, 255, 255, .42); }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-pitch-dot { fill: rgba(255, 255, 255, .6); }

/* Lichtband: ein breiter roter Schimmer wandert alle 9 s über die Tafel (Dauerbewegung 1, nur transform). */
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-field::after {

    content: "";
    position: absolute;
    left: -40%;
    top: -10%;
    width: 36%;
    height: 120%;
    background: linear-gradient(90deg, transparent, rgba(220, 5, 45, .16) 50%, transparent);
    transform: skewX(-18deg);
    animation: gen-sweep 9s ease-in-out infinite;
    pointer-events: none;

}

@keyframes gen-sweep {

    0% { transform: skewX(-18deg) translateX(0); }
    100% { transform: skewX(-18deg) translateX(420%); }

}

/* Rotes Schulterband links an jeder Slide */
.taktik-scene:has(.tk-field[data-variant="general"]) .taktik-slide::before {

    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1.3cqw;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(180deg, #dc052d, #8c0319);

}

/* Nummer: weißer Umriss, der rot pocht (Dauerbewegung 2) */
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-number { -webkit-text-stroke-color: rgba(255, 255, 255, .2); }
.taktik-scene:has(.tk-field[data-variant="general"]) .taktik-slide.is-active .tk-number { animation: tk-number-in 1300ms cubic-bezier(.2, .7, .2, 1) both, gen-glow 4.6s ease-in-out 1300ms infinite; }

@keyframes gen-glow {

    0%, 100% { -webkit-text-stroke-color: rgba(255, 255, 255, .2); }
    50% { -webkit-text-stroke-color: rgba(220, 5, 45, .75); }

}

.taktik-scene:has(.tk-field[data-variant="general"]) .tk-copy h2 { text-shadow: .3cqw .3cqw 0 rgba(220, 5, 45, .75); }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-photo { background: #20242b; }

.taktik-scene:has(.tk-field[data-variant="general"]) .tk-board { background: #1d2026; box-shadow: 1.2cqw 1.2cqw 0 var(--tk-red); }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-board-meta { color: rgba(255, 255, 255, .8); }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-stat { background: #1d2026; box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .5); }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-bar { background: rgba(255, 255, 255, .22); }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-chapters span { opacity: .7; }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-chapters span.is-current { opacity: 1; }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-stop circle { fill: #15171b; }

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

    .taktik-scene:has(.tk-field[data-variant="general"]) .tk-field::after { display: none; }

}

/* general: größere Zitate, Anführungszeichen überdeckt den Text nicht */
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-quote { top: 40cqw; }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-quote-mark { height: 13cqw; font-size: 14cqw; line-height: 1; }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-quote p { font-size: 5.6cqw; line-height: 1.1; text-transform: uppercase; }
.taktik-scene:has(.tk-field[data-variant="general"]) .tk-quote footer { font-size: 2.1cqw; }