/* ============================================================
   BUY ME — themes.css (v18 „drei welten“)
   Jede Seite der Triple-Single ist eine eigene Welt:
     A · theme-red  → RIOT PUNK        (fotokopie, tape, gewalt)
     B · theme-cyan → NEON RIVIERA ’86 (chrome, sonne, bloom)
     C · theme-gold → ONE-TAKE CINEMA  (letterbox, serif, flare)
   Lädt NACH styles.css und überschreibt gezielt.
   ============================================================ */

:root { --magenta: #ff2d95; }

/* ============================================================
   NEUE FX-ELEMENTE (welt-spezifisch getriggert aus app.js)
   ============================================================ */

/* FLARE — anamorphotischer licht-streifen (cinema) */
#flare {
  position: fixed; left: -20vw; top: 50%; width: 140vw; height: 4px;
  z-index: 56; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(140,190,255,0.55) 30%,
    #fff 50%, rgba(255,178,0,0.55) 70%, transparent 100%);
  box-shadow: 0 0 34px 8px rgba(255,190,80,0.35), 0 0 90px 30px rgba(140,190,255,0.18);
  mix-blend-mode: screen;
}
body.flare #flare { animation: flareSweep 0.7s ease-out; }
@keyframes flareSweep {
  0%   { opacity: 0; transform: translateY(-4vh) scaleX(0.2); }
  25%  { opacity: 0.9; transform: translateY(0) scaleX(1.05); }
  100% { opacity: 0; transform: translateY(3vh) scaleX(1); }
}

/* BLOOM — licht-puls statt schlag (riviera) — nur auf dem canvas */
body.bloom #bg { animation: bloomPulse 0.5s ease-out; }
@keyframes bloomPulse {
  0%   { filter: none; }
  30%  { filter: brightness(1.45) saturate(1.6) blur(1px); }
  100% { filter: none; }
}

/* HUESWEEP — farb-schleife über die welt (riviera, alle 16 beats) */
body.huesweep #bg { animation: hueSweep 0.9s ease-in-out; }
@keyframes hueSweep {
  0%   { filter: none; }
  40%  { filter: hue-rotate(40deg) saturate(1.5) brightness(1.2); }
  100% { filter: none; }
}

/* PUSH-IN — langsamer kamera-schub (cinema) */
body.theme-gold.pushin #world { animation: pushIn 0.8s cubic-bezier(.2,.7,.3,1); }
@keyframes pushIn {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.022); }
  100% { transform: scale(1); }
}

/* LETTERBOX — cinemascope-balken (cinema) */
#letterbox { position: fixed; inset: 0; z-index: 52; pointer-events: none; }
#letterbox::before, #letterbox::after {
  content: ''; position: absolute; left: 0; right: 0; height: 8vh;
  background: #000; transition: transform 1.1s cubic-bezier(.3,.8,.3,1);
}
#letterbox::before { top: 0; transform: translateY(-100%); }
#letterbox::after  { bottom: 0; transform: translateY(100%); }
body.theme-gold.playing #letterbox::before { transform: translateY(0); }
body.theme-gold.playing #letterbox::after  { transform: translateY(0); }

/* washes & shockwave folgen der welt-farbe */
body.theme-cyan #redwash { background: var(--cyan); }
body.theme-gold #redwash { background: var(--gold); }
body.theme-cyan #shockwave { border-color: var(--cyan); box-shadow: 0 0 60px var(--cyan), inset 0 0 60px var(--cyan); }
body.theme-gold #shockwave { border-color: var(--gold); box-shadow: 0 0 60px var(--gold), inset 0 0 60px var(--gold); }

/* ============================================================
   WELT A — RIOT PUNK (theme-red) · roh, gekippt, geklebt
   ============================================================ */
body.theme-red .subline-wrap { transform: rotate(-1.1deg); }
body.theme-red .quote { transform: rotate(0.7deg); }
body.theme-red .qa { transform: rotate(-0.5deg); }
body.theme-red .anti { transform: rotate(-1deg); }
/* tape-streifen hinter den setup-zeilen */
body.theme-red .sl-top {
  display: inline-block; margin: 0 auto;
  background: rgba(255,255,255,0.07);
  padding: 0.1em 0.6em;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
/* stamps knallen härter (border wie ein echter stempel) */
body.theme-red .scene-stamp .stamp {
  border: 4px solid currentColor; padding: 0.05em 0.25em;
  transform: rotate(-2deg);
}

/* ============================================================
   WELT B — NEON RIVIERA ’86 (theme-cyan)
   chrome-typo · magenta-sekundär · bloom statt gewalt
   ============================================================ */

/* chrome-verlauf für die großen worte */
body.theme-cyan .sl-bottom,
body.theme-cyan .bu-line.bu-cyan,
body.theme-cyan .anti-line.big,
body.theme-cyan .huge,
body.theme-cyan .stamp.cyan,
body.theme-cyan .trio-line.cyan,
body.theme-cyan .wave-word,
body.theme-cyan .rain-word,
body.theme-cyan .burst-center,
body.theme-cyan .climax .bang,
body.theme-cyan .endcard-cyan .endcard-cta {
  color: transparent;
  background: linear-gradient(180deg,
    #ffffff 0%, #cfe9ff 30%, #7cd7ff 48%,
    #2b6fae 52%, #ff7ac8 72%, #ffd6f2 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(0,247,255,0.35)) drop-shadow(0 2px 0 rgba(255,45,149,0.35));
}
body.theme-cyan .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--cyan);
  filter: drop-shadow(0 0 14px rgba(0,247,255,0.4));
}

/* magenta als zweite stimme */
body.theme-cyan .qa-q { color: var(--magenta); }
body.theme-cyan .q-mark { color: var(--magenta); }
body.theme-cyan .crash { color: var(--magenta); }
body.theme-cyan .sl-top { color: rgba(255,214,242,0.72); }
body.theme-cyan .climax-sub { color: var(--magenta) !important; }
body.theme-cyan .endcard-tag { color: rgba(255,122,200,0.75); }

/* weicher: kaum scanlines, feineres korn, sanfter kick */
body.theme-cyan .scanlines { opacity: 0.14; }
body.theme-cyan .grain { opacity: calc(0.05 + var(--treble, 0) * 0.06); }
body.theme-cyan .vignette {
  background: radial-gradient(ellipse at center,
    transparent 32%, rgba(10,0,30,0.45) 80%, rgba(5,0,20,0.9) 100%);
}
body.theme-cyan.kick #world { animation: kickSoft 0.3s ease-out; }
@keyframes kickSoft {
  0%   { transform: scale(1); filter: none; }
  40%  { transform: scale(1.006); filter: brightness(1.12) saturate(1.2); }
  100% { transform: scale(1); filter: none; }
}

/* neon-sign akzente */
body.theme-cyan #theme-tag {
  font-family: 'Monoton', var(--f-mono); font-weight: 400;
  letter-spacing: 0.2em; color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan), 0 0 30px rgba(0,247,255,0.5);
}
body.theme-cyan #ticker {
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  color: #06001a;
}
body.theme-cyan #progress {
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 12px rgba(255,45,149,0.6);
}
/* szenen gleiten statt schneiden */
body.theme-cyan .scene { transition: opacity 0.55s ease, transform 1.2s ease, visibility 0s linear 0.55s; transform: scale(1.02); }
body.theme-cyan .scene.active { transition: opacity 0.55s ease, transform 2.4s ease, visibility 0s linear 0s; }

/* ============================================================
   WELT C — ONE-TAKE CINEMA (theme-gold)
   bebas-silhouette · serif-zitate · letterbox · film-look
   ============================================================ */
body.theme-gold { --f-display: 'Bebas Neue', 'Anton', sans-serif; }

/* zitate & leise zeilen werden serif — der 8-mile-moment */
body.theme-gold .q-text,
body.theme-gold .sl-top {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 600;
  letter-spacing: 0.01em;
}
body.theme-gold .q-mark { font-family: 'Playfair Display', Georgia, serif; color: var(--gold); }

/* welt-farben durchziehen (statt punk-rot) */
body.theme-gold .sl-bottom { color: var(--gold); text-shadow: 0 0 36px rgba(255,178,0,0.45); }
body.theme-gold .trio-line.red,
body.theme-gold .stamp.red { color: var(--gold); text-shadow: 0 0 40px rgba(255,178,0,0.5), 0 0 80px rgba(255,178,0,0.3); }
body.theme-gold .bu-line.bu-red {
  color: var(--gold);
  text-shadow: 0 0 var(--bass-glow) var(--gold), 0 0 calc(var(--bass-glow) * 2) rgba(255,178,0,0.4);
}
body.theme-gold .climax .bang { color: var(--gold); text-shadow: 0 0 30px var(--gold), 0 0 60px rgba(255,178,0,0.5); }
body.theme-gold .endcard-red .endcard-cta { color: var(--gold); }
body.theme-gold .endcard-red .endcard-mail .ec-cur { color: var(--gold); }
body.theme-gold .boot-line[data-i="2"] { color: var(--gold); }
body.theme-gold .wave-word, body.theme-gold .rain-word, body.theme-gold .burst-center { color: var(--gold); }
body.theme-gold .q-text .codeword {
  color: var(--gold); background: rgba(255,178,0,0.08);
  border-color: rgba(255,178,0,0.35);
  font-style: normal;
}
body.theme-gold .crash { color: var(--gold); }

/* typografie: weite laufweite = cinemascope */
body.theme-gold .qa-a { letter-spacing: 0.05em; }
body.theme-gold .sl-bottom { letter-spacing: 0.05em; }
body.theme-gold .endcard-cta { letter-spacing: 0.1em; }

/* film statt CRT: keine scanlines, mehr korn, warme vignette */
body.theme-gold .scanlines { display: none; }
body.theme-gold .grain { opacity: calc(0.15 + var(--treble, 0) * 0.10); }
body.theme-gold .vignette {
  background: radial-gradient(ellipse at center,
    transparent 26%, rgba(20,8,0,0.5) 75%, rgba(8,3,0,0.95) 100%);
}

/* gate weave — das bild atmet wie eine filmrolle */
body.theme-gold.playing #scenes { animation: filmWeave 7s ease-in-out infinite; }
@keyframes filmWeave {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1.5px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1.5px, 0.5px); }
}

/* kick = sanftes aufleuchten, keine sprünge (one take, ruhige hand) */
body.theme-gold.kick #world { animation: kickCine 0.26s ease-out; }
@keyframes kickCine {
  0%   { filter: none; }
  40%  { filter: brightness(1.15) contrast(1.05); }
  100% { filter: none; }
}

/* film-leader ticker + goldene timeline */
body.theme-gold #ticker {
  background: #0b0803; color: var(--gold);
  border-top: 1px dashed rgba(255,178,0,0.55);
  letter-spacing: 0.26em;
}
body.theme-gold #hud { letter-spacing: 0.2em; color: rgba(255,220,160,0.75); }
body.theme-gold #theme-tag { color: var(--gold); }

/* ============================================================
   WELT D — FESTA / BALADA (theme-verde)
   brasilianische open-air-nacht · verde-amarelo-rosa · freude
   ============================================================ */
:root { --verde: #00d664; --amarelo: #ffd500; --rosa: #ff2d95; }

body.theme-verde {
  --accent: #00d664;
  --accent-rgb: 0, 214, 100;
  --f-display: 'Fredoka', 'Anton', sans-serif;
}

/* farb-wiring (spiegelt theme-cyan/gold) */
body.theme-verde #ticker {
  background: linear-gradient(90deg, var(--verde), var(--amarelo));
  color: #06180c; letter-spacing: 0.2em;
}
body.theme-verde #progress { background: linear-gradient(90deg, var(--verde), var(--amarelo)); box-shadow: 0 0 12px rgba(0,214,100,0.6); }
body.theme-verde .dot { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
body.theme-verde #theme-tag { color: var(--verde); text-shadow: 0 0 10px rgba(0,214,100,0.6); }
body.theme-verde #hud { color: rgba(190,255,210,0.78); }
body.theme-verde #controls button:hover { border-color: var(--verde); color: var(--verde); box-shadow: 0 0 12px rgba(0,214,100,0.45); }
body.theme-verde .qa-q { color: var(--amarelo); }
body.theme-verde .q-mark { color: var(--amarelo); }
body.theme-verde #redwash { background: var(--verde); }
body.theme-verde #shockwave { border-color: var(--verde); box-shadow: 0 0 60px var(--verde), inset 0 0 60px var(--verde); }

/* hero-wörter: tropischer verlauf (verde → amarelo → rosa) */
body.theme-verde .sl-bottom,
body.theme-verde .huge,
body.theme-verde .bu-line.bu-red,
body.theme-verde .anti-line.big,
body.theme-verde .wave-word,
body.theme-verde .rain-word,
body.theme-verde .burst-center,
body.theme-verde .climax .bang,
body.theme-verde .endcard-red .endcard-cta {
  color: transparent;
  background: linear-gradient(120deg, #00d664 0%, #7dff9e 28%, #ffd500 58%, #ff2d95 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(0,214,100,0.35));
}
body.theme-verde .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--verde);
  filter: drop-shadow(0 0 12px rgba(0,214,100,0.4));
}

/* einzel-akzente in welt-farbe */
body.theme-verde .sl-bottom strong { color: var(--amarelo); -webkit-text-fill-color: var(--amarelo); }
body.theme-verde .trio-line.verde { color: var(--verde); text-shadow: 0 0 40px rgba(0,214,100,0.55), 0 0 80px rgba(0,214,100,0.3); }
body.theme-verde .scene-stamp.active .bio-h .stamp.verde { color: var(--verde); text-shadow: 0 0 40px rgba(0,214,100,0.5); }
body.theme-verde .crash { color: var(--rosa); }
body.theme-verde .boot-line[data-i="2"] { color: var(--amarelo); }
body.theme-verde .boot-line[data-i="3"] { color: var(--verde); }
body.theme-verde .q-text .codeword {
  color: var(--verde); background: rgba(0,214,100,0.08);
  border-color: rgba(0,214,100,0.35);
}
body.theme-verde .climax-sub { color: var(--amarelo); }
body.theme-verde .endcard-red .endcard-mail .ec-cur { color: var(--verde); }
body.theme-verde .endcard-tag { color: rgba(255,213,0,0.72); }

/* trio-line.verde auch global nutzbar (falls kein theme aktiv) */
.trio-line.verde { color: var(--verde); }

/* img-tint verde */
.img-wrap.tint-verde img { filter: brightness(0.52) contrast(1.18) saturate(1.25) hue-rotate(70deg); }

/* party-look: sattes korn, kaum scanlines, grün-warme vignette, hüpf-kick */
body.theme-verde .scanlines { opacity: 0.1; }
body.theme-verde .grain { opacity: calc(0.08 + var(--treble, 0) * 0.08); }
body.theme-verde .vignette {
  background: radial-gradient(ellipse at center, transparent 34%, rgba(0,20,10,0.42) 80%, rgba(4,10,2,0.9) 100%);
}
body.theme-verde.kick #world { animation: kickBounce 0.32s cubic-bezier(.3,1.7,.4,1); }
@keyframes kickBounce {
  0%   { transform: scale(1) translateY(0); }
  35%  { transform: scale(1.02) translateY(-6px); filter: saturate(1.4) brightness(1.15); }
  100% { transform: scale(1) translateY(0); filter: none; }
}
/* szenen springen fröhlich rein */
body.theme-verde .scene { transform: scale(1.05) translateY(8px); }
body.theme-verde .scene.active { transition: opacity 0.3s ease, transform 0.7s cubic-bezier(.3,1.5,.4,1), visibility 0s linear 0s; transform: scale(1) translateY(0); }

/* ============================================================
   WELT E — ESTÁDIO / AI SE EU TE PEGO (theme-laranja)
   jumbotron-nacht · torjubel · bernstein-amarelo-magenta
   ============================================================ */
:root { --laranja: #ffb036; --laranja-magenta: #ff2d78; }

body.theme-laranja {
  --accent: #ffb036;
  --accent-rgb: 255, 176, 54;
  --f-display: 'Bungee', 'Anton', sans-serif;
}

/* farb-wiring */
body.theme-laranja #ticker {
  background: linear-gradient(90deg, var(--laranja), var(--laranja-magenta));
  color: #150a02; letter-spacing: 0.18em;
}
body.theme-laranja #progress { background: linear-gradient(90deg, var(--laranja), var(--laranja-magenta)); box-shadow: 0 0 12px rgba(255,176,54,0.6); }
body.theme-laranja .dot { background: var(--laranja); box-shadow: 0 0 8px var(--laranja); }
body.theme-laranja #theme-tag { color: var(--laranja); text-shadow: 0 0 10px rgba(255,176,54,0.6); }
body.theme-laranja #hud { color: rgba(255,224,180,0.8); }
body.theme-laranja #controls button:hover { border-color: var(--laranja); color: var(--laranja); box-shadow: 0 0 12px rgba(255,176,54,0.45); }
body.theme-laranja .qa-q { color: var(--laranja-magenta); }
body.theme-laranja .q-mark { color: var(--laranja-magenta); }
body.theme-laranja #redwash { background: var(--laranja); }
body.theme-laranja #shockwave { border-color: var(--laranja); box-shadow: 0 0 60px var(--laranja), inset 0 0 60px var(--laranja); }

/* hero-wörter: flutlicht-verlauf (weiss → bernstein → magenta) */
body.theme-laranja .sl-bottom,
body.theme-laranja .huge,
body.theme-laranja .bu-line.bu-red,
body.theme-laranja .anti-line.big,
body.theme-laranja .wave-word,
body.theme-laranja .rain-word,
body.theme-laranja .burst-center,
body.theme-laranja .climax .bang,
body.theme-laranja .endcard-red .endcard-cta {
  color: transparent;
  background: linear-gradient(120deg, #fff2d6 0%, #ffb036 44%, #ff2d78 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(255,176,54,0.4));
}
body.theme-laranja .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--laranja);
  filter: drop-shadow(0 0 12px rgba(255,176,54,0.45));
}

/* akzente */
body.theme-laranja .sl-bottom strong { color: #fff2d6; -webkit-text-fill-color: #fff2d6; }
body.theme-laranja .trio-line.laranja { color: var(--laranja); text-shadow: 0 0 40px rgba(255,176,54,0.55), 0 0 80px rgba(255,45,120,0.3); }
body.theme-laranja .scene-stamp.active .bio-h .stamp.laranja { color: var(--laranja); text-shadow: 0 0 40px rgba(255,176,54,0.5); }
body.theme-laranja .crash { color: var(--laranja-magenta); }
body.theme-laranja .boot-line[data-i="2"] { color: var(--laranja); }
body.theme-laranja .boot-line[data-i="3"] { color: var(--laranja-magenta); }
body.theme-laranja .q-text .codeword {
  color: var(--laranja); background: rgba(255,176,54,0.08);
  border-color: rgba(255,176,54,0.35);
}
body.theme-laranja .climax-sub { color: var(--laranja-magenta); }
body.theme-laranja .endcard-red .endcard-mail .ec-cur { color: var(--laranja); }
body.theme-laranja .endcard-tag { color: rgba(255,176,54,0.72); }
.trio-line.laranja { color: var(--laranja); }

/* img-tint laranja */
.img-wrap.tint-laranja img { filter: brightness(0.5) contrast(1.2) saturate(1.2) sepia(0.35) hue-rotate(-18deg); }

/* stadion-look: leichte scanlines, warm-blaue vignette, wuchtiger kick */
body.theme-laranja .scanlines { opacity: 0.14; }
body.theme-laranja .grain { opacity: calc(0.08 + var(--treble, 0) * 0.08); }
body.theme-laranja .vignette {
  background: radial-gradient(ellipse at center, transparent 32%, rgba(6,10,24,0.45) 80%, rgba(4,4,10,0.92) 100%);
}
body.theme-laranja.kick #world { animation: kickStadium 0.28s cubic-bezier(.3,1.5,.4,1); }
@keyframes kickStadium {
  0%   { transform: scale(1); filter: none; }
  35%  { transform: scale(1.018); filter: brightness(1.2) contrast(1.06); }
  100% { transform: scale(1); filter: none; }
}

/* ============================================================
   WELT F — GALA / ATEMLOS (theme-silber)
   arena-gala-nacht · platin-eisblau-magenta · glamour
   ============================================================ */
:root { --silber: #a0d2ff; --silber-mag: #ff4fa3; --platin: #ebf0ff; }

body.theme-silber {
  --accent: #a0d2ff;
  --accent-rgb: 160, 210, 255;
  --f-display: 'Cinzel', 'Anton', serif;
}

/* farb-wiring */
body.theme-silber #ticker {
  background: linear-gradient(90deg, var(--platin), var(--silber) 50%, var(--silber-mag));
  color: #0a0620; letter-spacing: 0.2em;
}
body.theme-silber #progress { background: linear-gradient(90deg, var(--silber), var(--silber-mag)); box-shadow: 0 0 12px rgba(160,210,255,0.6); }
body.theme-silber .dot { background: var(--silber); box-shadow: 0 0 8px var(--silber); }
body.theme-silber #theme-tag { color: var(--silber); text-shadow: 0 0 10px rgba(160,210,255,0.6); }
body.theme-silber #hud { color: rgba(220,232,255,0.82); }
body.theme-silber #controls button:hover { border-color: var(--silber); color: var(--silber); box-shadow: 0 0 12px rgba(160,210,255,0.45); }
body.theme-silber .qa-q { color: var(--silber-mag); }
body.theme-silber .q-mark { color: var(--silber-mag); }
body.theme-silber #redwash { background: var(--silber); }
body.theme-silber #shockwave { border-color: var(--silber-mag); box-shadow: 0 0 60px var(--silber-mag), inset 0 0 60px var(--silber-mag); }

/* hero-wörter: platin-verlauf mit magenta-akzent */
body.theme-silber .sl-bottom,
body.theme-silber .huge,
body.theme-silber .bu-line.bu-red,
body.theme-silber .anti-line.big,
body.theme-silber .wave-word,
body.theme-silber .rain-word,
body.theme-silber .burst-center,
body.theme-silber .climax .bang,
body.theme-silber .endcard-red .endcard-cta {
  color: transparent;
  background: linear-gradient(160deg, #ffffff 0%, #dfeeff 32%, #a0d2ff 58%, #ff9ed0 84%, #ff4fa3 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(160,210,255,0.4));
}
body.theme-silber .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--silber);
  filter: drop-shadow(0 0 12px rgba(160,210,255,0.45));
}

/* akzente */
body.theme-silber .sl-bottom strong { color: var(--silber-mag); -webkit-text-fill-color: var(--silber-mag); }
body.theme-silber .trio-line.silber { color: var(--platin); text-shadow: 0 0 40px rgba(160,210,255,0.6), 0 0 80px rgba(255,79,163,0.3); }
body.theme-silber .scene-stamp.active .bio-h .stamp.silber { color: var(--silber); text-shadow: 0 0 40px rgba(160,210,255,0.5); }
body.theme-silber .crash { color: var(--silber-mag); }
body.theme-silber .boot-line[data-i="2"] { color: var(--silber); }
body.theme-silber .boot-line[data-i="3"] { color: var(--silber-mag); }
body.theme-silber .q-text .codeword {
  color: var(--silber); background: rgba(160,210,255,0.08);
  border-color: rgba(160,210,255,0.35);
}
body.theme-silber .climax-sub { color: var(--silber-mag); }
body.theme-silber .endcard-red .endcard-mail .ec-cur { color: var(--silber); }
body.theme-silber .endcard-tag { color: rgba(160,210,255,0.75); }
.trio-line.silber { color: var(--platin); }

/* gala-typo etwas luftiger (cinzel = versal-serif) */
body.theme-silber .qa-a, body.theme-silber .climax-text, body.theme-silber .endcard-cta { letter-spacing: 0.04em; }

/* img-tint silber (kühl, hell, entsättigt) */
.img-wrap.tint-silber img { filter: brightness(0.6) contrast(1.12) saturate(0.7) hue-rotate(180deg); }

/* gala-look: feines korn, kaum scanlines, kühle vignette, sanfter glanz-kick */
body.theme-silber .scanlines { opacity: 0.1; }
body.theme-silber .grain { opacity: calc(0.06 + var(--treble, 0) * 0.06); }
body.theme-silber .vignette {
  background: radial-gradient(ellipse at center, transparent 34%, rgba(10,8,32,0.45) 80%, rgba(5,3,15,0.92) 100%);
}
body.theme-silber.kick #world { animation: kickGlanz 0.3s ease-out; }
@keyframes kickGlanz {
  0%   { transform: scale(1); filter: none; }
  40%  { transform: scale(1.008); filter: brightness(1.18) saturate(1.15); }
  100% { transform: scale(1); filter: none; }
}
body.theme-silber .scene { transform: scale(1.03); }
body.theme-silber .scene.active { transition: opacity 0.5s ease, transform 2.2s ease, visibility 0s linear 0s; transform: scale(1); }

/* ============================================================
   WELT G — VIVA LA VIDA / REVOLUTION (theme-royal)
   barock-revolution · königsblau-antikgold-creme · gemälde
   ============================================================ */
:root { --royal: #e0b04a; --royal-blau: #5a82dc; --royal-krone: #c0392b; --royal-creme: #f3e6c4; }

body.theme-royal {
  --accent: #e0b04a;
  --accent-rgb: 224, 176, 74;
  --f-display: 'Cinzel Decorative', 'Cinzel', serif;
}

/* farb-wiring */
body.theme-royal #ticker {
  background: linear-gradient(90deg, var(--royal), var(--royal-creme) 55%, var(--royal));
  color: #0a1230; letter-spacing: 0.2em;
}
body.theme-royal #progress { background: linear-gradient(90deg, var(--royal-blau), var(--royal)); box-shadow: 0 0 12px rgba(224,176,74,0.6); }
body.theme-royal .dot { background: var(--royal); box-shadow: 0 0 8px var(--royal); }
body.theme-royal #theme-tag { color: var(--royal); text-shadow: 0 0 10px rgba(224,176,74,0.6); }
body.theme-royal #hud { color: rgba(243,230,196,0.82); }
body.theme-royal #controls button:hover { border-color: var(--royal); color: var(--royal); box-shadow: 0 0 12px rgba(224,176,74,0.45); }
body.theme-royal .qa-q { color: var(--royal-creme); }
body.theme-royal .q-mark { color: var(--royal); }
body.theme-royal #redwash { background: var(--royal); }
body.theme-royal #shockwave { border-color: var(--royal); box-shadow: 0 0 60px var(--royal), inset 0 0 60px var(--royal); }

/* hero-wörter: antikgold-verlauf mit creme-glanz */
body.theme-royal .sl-bottom,
body.theme-royal .huge,
body.theme-royal .bu-line.bu-red,
body.theme-royal .anti-line.big,
body.theme-royal .wave-word,
body.theme-royal .rain-word,
body.theme-royal .burst-center,
body.theme-royal .climax .bang,
body.theme-royal .endcard-red .endcard-cta {
  color: transparent;
  background: linear-gradient(160deg, #fff6dd 0%, #f3e6c4 26%, #e0b04a 58%, #b8862f 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(224,176,74,0.4));
}
body.theme-royal .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--royal);
  filter: drop-shadow(0 0 12px rgba(224,176,74,0.45));
}

/* akzente */
body.theme-royal .sl-bottom strong { color: var(--royal-creme); -webkit-text-fill-color: var(--royal-creme); }
body.theme-royal .trio-line.royal { color: var(--royal); text-shadow: 0 0 40px rgba(224,176,74,0.6), 0 0 80px rgba(90,130,220,0.3); }
body.theme-royal .scene-stamp.active .bio-h .stamp.royal { color: var(--royal); text-shadow: 0 0 40px rgba(224,176,74,0.5); }
body.theme-royal .crash { color: var(--royal-krone); }
body.theme-royal .boot-line[data-i="2"] { color: var(--royal); }
body.theme-royal .boot-line[data-i="3"] { color: var(--royal-creme); }
body.theme-royal .q-text .codeword {
  color: var(--royal); background: rgba(224,176,74,0.08);
  border-color: rgba(224,176,74,0.35);
}
body.theme-royal .climax-sub { color: var(--royal-creme); }
body.theme-royal .endcard-red .endcard-mail .ec-cur { color: var(--royal); }
body.theme-royal .endcard-tag { color: rgba(243,230,196,0.75); }
.trio-line.royal { color: var(--royal); }

/* barocke typo: etwas mehr laufweite */
body.theme-royal .qa-a, body.theme-royal .climax-text, body.theme-royal .endcard-cta { letter-spacing: 0.03em; }

/* img-tint royal (kühl-blau + gold) */
.img-wrap.tint-royal img { filter: brightness(0.55) contrast(1.15) saturate(1.05) sepia(0.25) hue-rotate(185deg); }

/* gemälde-look: sattes korn, kaum scanlines, königsblaue vignette, würdevoller kick */
body.theme-royal .scanlines { opacity: 0.08; }
body.theme-royal .grain { opacity: calc(0.1 + var(--treble, 0) * 0.08); }
body.theme-royal .vignette {
  background: radial-gradient(ellipse at center, transparent 30%, rgba(6,14,40,0.5) 78%, rgba(4,8,24,0.94) 100%);
}
body.theme-royal.kick #world { animation: kickKron 0.3s ease-out; }
@keyframes kickKron {
  0%   { transform: scale(1); filter: none; }
  40%  { transform: scale(1.01); filter: brightness(1.16) saturate(1.2) sepia(0.1); }
  100% { transform: scale(1); filter: none; }
}
body.theme-royal .scene { transform: scale(1.03); }
body.theme-royal .scene.active { transition: opacity 0.5s ease, transform 2.4s ease, visibility 0s linear 0s; transform: scale(1); }

/* ============================================================
   WELT H — 99 LUFTBALLONS / HORIZONT (theme-himmel)
   dämmerungshimmel · ballonrot · himmelblau · radar-grün · NDW
   ============================================================ */
:root { --himmel: #e63946; --himmel-blau: #78aae6; --himmel-creme: #f5ecd6; }

body.theme-himmel {
  --accent: #e63946;
  --accent-rgb: 230, 57, 70;
  --f-display: 'Righteous', 'Anton', sans-serif;
}

/* farb-wiring */
body.theme-himmel #ticker {
  background: linear-gradient(90deg, var(--himmel), var(--himmel-blau));
  color: #0b1030; letter-spacing: 0.18em;
}
body.theme-himmel #progress { background: linear-gradient(90deg, var(--himmel-blau), var(--himmel)); box-shadow: 0 0 12px rgba(230,57,70,0.6); }
body.theme-himmel .dot { background: var(--himmel); box-shadow: 0 0 8px var(--himmel); }
body.theme-himmel #theme-tag { color: var(--himmel); text-shadow: 0 0 10px rgba(230,57,70,0.6); }
body.theme-himmel #hud { color: rgba(233,240,255,0.82); }
body.theme-himmel #controls button:hover { border-color: var(--himmel); color: var(--himmel); box-shadow: 0 0 12px rgba(230,57,70,0.45); }
body.theme-himmel .qa-q { color: var(--himmel-blau); }
body.theme-himmel .q-mark { color: var(--himmel); }
body.theme-himmel #redwash { background: var(--himmel); }
body.theme-himmel #shockwave { border-color: var(--himmel); box-shadow: 0 0 60px var(--himmel), inset 0 0 60px var(--himmel); }

/* hero-wörter: himmel→ballon-verlauf (blau → creme → rot) */
body.theme-himmel .sl-bottom,
body.theme-himmel .huge,
body.theme-himmel .bu-line.bu-red,
body.theme-himmel .anti-line.big,
body.theme-himmel .wave-word,
body.theme-himmel .rain-word,
body.theme-himmel .burst-center,
body.theme-himmel .climax .bang,
body.theme-himmel .endcard-red .endcard-cta {
  color: transparent;
  background: linear-gradient(150deg, #cfe2ff 0%, #f5ecd6 40%, #ff7a63 68%, #e63946 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(230,57,70,0.35));
}
body.theme-himmel .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--himmel);
  filter: drop-shadow(0 0 12px rgba(230,57,70,0.45));
}

/* akzente */
body.theme-himmel .sl-bottom strong { color: var(--himmel-blau); -webkit-text-fill-color: var(--himmel-blau); }
body.theme-himmel .trio-line.himmel { color: var(--himmel); text-shadow: 0 0 40px rgba(230,57,70,0.55), 0 0 80px rgba(120,170,230,0.3); }
body.theme-himmel .scene-stamp.active .bio-h .stamp.himmel { color: var(--himmel); text-shadow: 0 0 40px rgba(230,57,70,0.5); }
body.theme-himmel .crash { color: var(--himmel); }
body.theme-himmel .boot-line[data-i="2"] { color: var(--himmel); }
body.theme-himmel .boot-line[data-i="3"] { color: var(--himmel-blau); }
body.theme-himmel .q-text .codeword {
  color: var(--himmel-blau); background: rgba(120,170,230,0.08);
  border-color: rgba(120,170,230,0.35);
}
body.theme-himmel .climax-sub { color: var(--himmel-blau); }
body.theme-himmel .endcard-red .endcard-mail .ec-cur { color: var(--himmel); }
body.theme-himmel .endcard-tag { color: rgba(120,170,230,0.8); }
.trio-line.himmel { color: var(--himmel); }

/* img-tint himmel (kühl-blau tag/dämmerung) */
.img-wrap.tint-himmel img { filter: brightness(0.6) contrast(1.1) saturate(1.05) hue-rotate(175deg); }

/* himmel-look: kaum scanlines, weiches korn, luftige vignette, leichter kick */
body.theme-himmel .scanlines { opacity: 0.08; }
body.theme-himmel .grain { opacity: calc(0.06 + var(--treble, 0) * 0.06); }
body.theme-himmel .vignette {
  background: radial-gradient(ellipse at center 40%, transparent 40%, rgba(11,16,48,0.4) 82%, rgba(8,10,34,0.9) 100%);
}
body.theme-himmel.kick #world { animation: kickLuft 0.34s ease-out; }
@keyframes kickLuft {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-5px) scale(1.006); filter: brightness(1.1); }
  100% { transform: translateY(0) scale(1); filter: none; }
}
body.theme-himmel .scene { transform: translateY(10px) scale(1.02); }
body.theme-himmel .scene.active { transition: opacity 0.45s ease, transform 1.6s cubic-bezier(.2,.7,.3,1), visibility 0s linear 0s; transform: translateY(0) scale(1); }

/* ============================================================
   WELT I — HULAPALU / VOLKSFEST (theme-alpen)
   alpen-oktoberfest · alpenblau-weiss-bier · volks-rock'n'roll
   ============================================================ */
:root { --alpen: #3b7dd8; --alpen-bier: #e8ac4a; --alpen-edel: #f0f4ff; }

body.theme-alpen {
  --accent: #3b7dd8;
  --accent-rgb: 59, 125, 216;
  --f-display: 'Alfa Slab One', 'Anton', serif;
}

/* farb-wiring */
body.theme-alpen #ticker {
  background: linear-gradient(90deg, var(--alpen), var(--alpen-edel) 50%, var(--alpen-bier));
  color: #0b1836; letter-spacing: 0.16em;
}
body.theme-alpen #progress { background: linear-gradient(90deg, var(--alpen), var(--alpen-bier)); box-shadow: 0 0 12px rgba(59,125,216,0.6); }
body.theme-alpen .dot { background: var(--alpen); box-shadow: 0 0 8px var(--alpen); }
body.theme-alpen #theme-tag { color: var(--alpen); text-shadow: 0 0 10px rgba(59,125,216,0.6); }
body.theme-alpen #hud { color: rgba(224,235,255,0.82); }
body.theme-alpen #controls button:hover { border-color: var(--alpen); color: var(--alpen); box-shadow: 0 0 12px rgba(59,125,216,0.45); }
body.theme-alpen .qa-q { color: var(--alpen-bier); }
body.theme-alpen .q-mark { color: var(--alpen); }
body.theme-alpen #redwash { background: var(--alpen); }
body.theme-alpen #shockwave { border-color: var(--alpen-bier); box-shadow: 0 0 60px var(--alpen-bier), inset 0 0 60px var(--alpen-bier); }

/* hero-wörter: alpenblau → weiss → bier-verlauf */
body.theme-alpen .sl-bottom,
body.theme-alpen .huge,
body.theme-alpen .bu-line.bu-red,
body.theme-alpen .anti-line.big,
body.theme-alpen .wave-word,
body.theme-alpen .rain-word,
body.theme-alpen .burst-center,
body.theme-alpen .climax .bang,
body.theme-alpen .endcard-red .endcard-cta {
  color: transparent;
  background: linear-gradient(150deg, #3b7dd8 0%, #cfe0ff 38%, #ffffff 55%, #e8ac4a 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(59,125,216,0.35));
}
body.theme-alpen .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--alpen);
  filter: drop-shadow(0 0 12px rgba(59,125,216,0.45));
}

/* akzente */
body.theme-alpen .sl-bottom strong { color: var(--alpen-bier); -webkit-text-fill-color: var(--alpen-bier); }
body.theme-alpen .trio-line.alpen { color: var(--alpen); text-shadow: 0 0 40px rgba(59,125,216,0.55), 0 0 80px rgba(232,172,74,0.3); }
body.theme-alpen .scene-stamp.active .bio-h .stamp.alpen { color: var(--alpen); text-shadow: 0 0 40px rgba(59,125,216,0.5); }
body.theme-alpen .crash { color: var(--alpen-bier); }
body.theme-alpen .boot-line[data-i="2"] { color: var(--alpen); }
body.theme-alpen .boot-line[data-i="3"] { color: var(--alpen-bier); }
body.theme-alpen .q-text .codeword {
  color: var(--alpen-bier); background: rgba(232,172,74,0.08);
  border-color: rgba(232,172,74,0.35);
}
body.theme-alpen .climax-sub { color: var(--alpen-bier); }
body.theme-alpen .endcard-red .endcard-mail .ec-cur { color: var(--alpen); }
body.theme-alpen .endcard-tag { color: rgba(232,172,74,0.8); }
.trio-line.alpen { color: var(--alpen); }

/* slab-typo etwas enger führen (fat slab) */
body.theme-alpen .qa-a, body.theme-alpen .climax-text { letter-spacing: 0; }
body.theme-alpen .endcard-cta { letter-spacing: 0.02em; }

/* img-tint alpen (kühl-blau) */
.img-wrap.tint-alpen img { filter: brightness(0.58) contrast(1.12) saturate(1.05) hue-rotate(190deg); }

/* volksfest-look: kaum scanlines, weiches korn, blaue vignette, schunkel-kick */
body.theme-alpen .scanlines { opacity: 0.08; }
body.theme-alpen .grain { opacity: calc(0.07 + var(--treble, 0) * 0.06); }
body.theme-alpen .vignette {
  background: radial-gradient(ellipse at center, transparent 32%, rgba(11,24,54,0.42) 80%, rgba(8,16,38,0.9) 100%);
}
body.theme-alpen.kick #world { animation: kickSchunkel 0.4s ease-in-out; }
@keyframes kickSchunkel {
  0%   { transform: rotate(0deg) scale(1); }
  30%  { transform: rotate(-0.6deg) translateX(-6px) scale(1.006); }
  70%  { transform: rotate(0.6deg) translateX(6px); }
  100% { transform: rotate(0deg) translateX(0) scale(1); }
}

/* ============================================================
   WELT J — WE WILL ROCK YOU / ARENA (theme-arena)
   stadium-stomp · charcoal-crimson-champion-gold · queen
   ============================================================ */
:root { --arena: #e8c268; --arena-crimson: #ce2a2e; --arena-creme: #f3ead2; }

body.theme-arena {
  --accent: #e8c268;
  --accent-rgb: 232, 194, 104;
  --f-display: 'Archivo Black', 'Anton', sans-serif;
}

/* farb-wiring */
body.theme-arena #ticker {
  background: linear-gradient(90deg, var(--arena-crimson), var(--arena) 55%, var(--arena-creme));
  color: #140a06; letter-spacing: 0.18em;
}
body.theme-arena #progress { background: linear-gradient(90deg, var(--arena-crimson), var(--arena)); box-shadow: 0 0 12px rgba(232,194,104,0.6); }
body.theme-arena .dot { background: var(--arena-crimson); box-shadow: 0 0 8px var(--arena-crimson); }
body.theme-arena #theme-tag { color: var(--arena); text-shadow: 0 0 10px rgba(232,194,104,0.6); }
body.theme-arena #hud { color: rgba(243,234,210,0.82); }
body.theme-arena #controls button:hover { border-color: var(--arena); color: var(--arena); box-shadow: 0 0 12px rgba(232,194,104,0.45); }
body.theme-arena .qa-q { color: var(--arena-crimson); }
body.theme-arena .q-mark { color: var(--arena); }
body.theme-arena #redwash { background: var(--arena-crimson); }
body.theme-arena #shockwave { border-color: var(--arena); box-shadow: 0 0 60px var(--arena), inset 0 0 60px var(--arena); }

/* hero-wörter: champion-gold-verlauf mit crimson-fuss */
body.theme-arena .sl-bottom,
body.theme-arena .huge,
body.theme-arena .bu-line.bu-red,
body.theme-arena .anti-line.big,
body.theme-arena .wave-word,
body.theme-arena .rain-word,
body.theme-arena .burst-center,
body.theme-arena .climax .bang,
body.theme-arena .endcard-red .endcard-cta {
  color: transparent;
  background: linear-gradient(160deg, #fff6dd 0%, #f3ead2 24%, #e8c268 56%, #b5451f 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(232,194,104,0.4));
}
body.theme-arena .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--arena);
  filter: drop-shadow(0 0 12px rgba(232,194,104,0.45));
}

/* akzente */
body.theme-arena .sl-bottom strong { color: var(--arena-crimson); -webkit-text-fill-color: var(--arena-crimson); }
body.theme-arena .trio-line.arena { color: var(--arena); text-shadow: 0 0 40px rgba(232,194,104,0.55), 0 0 80px rgba(206,42,46,0.35); }
body.theme-arena .scene-stamp.active .bio-h .stamp.arena { color: var(--arena); text-shadow: 0 0 40px rgba(232,194,104,0.5); }
body.theme-arena .crash { color: var(--arena-crimson); }
body.theme-arena .boot-line[data-i="2"] { color: var(--arena-crimson); }
body.theme-arena .boot-line[data-i="3"] { color: var(--arena); }
body.theme-arena .q-text .codeword {
  color: var(--arena); background: rgba(232,194,104,0.08);
  border-color: rgba(232,194,104,0.35);
}
body.theme-arena .climax-sub { color: var(--arena-crimson); }
body.theme-arena .endcard-red .endcard-mail .ec-cur { color: var(--arena); }
body.theme-arena .endcard-tag { color: rgba(232,194,104,0.8); }
.trio-line.arena { color: var(--arena); }

/* archivo-black ist wuchtig → laufweite minimal */
body.theme-arena .qa-a, body.theme-arena .climax-text, body.theme-arena .endcard-cta { letter-spacing: 0; }

/* img-tint arena (gritty, warm-desaturiert) */
.img-wrap.tint-arena img { filter: brightness(0.5) contrast(1.25) saturate(0.85) sepia(0.2) hue-rotate(-8deg); }

/* arena-look: leichte scanlines, sattes korn, dunkle vignette, harter stomp-kick */
body.theme-arena .scanlines { opacity: 0.12; }
body.theme-arena .grain { opacity: calc(0.1 + var(--treble, 0) * 0.08); }
body.theme-arena .vignette {
  background: radial-gradient(ellipse at center 42%, transparent 30%, rgba(14,8,10,0.5) 78%, rgba(6,4,6,0.95) 100%);
}
body.theme-arena.kick #world { animation: kickStomp 0.2s cubic-bezier(.3,1.4,.4,1); }
@keyframes kickStomp {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(3px) scale(1.012); filter: brightness(1.18) contrast(1.1); }
  100% { transform: translateY(0) scale(1); filter: none; }
}

/* ============================================================
   WELT K — ALL SUMMER LONG / SOMMER (theme-sommer)
   seeufer-sonnenuntergang · dusk-lila · sonnen-orange · see-gold · kid rock
   ============================================================ */
:root { --sommer: #ff9e4a; --sommer-glow: #ffb86c; --sommer-dusk: #c65e9a; --sommer-creme: #ffe9c2; }

body.theme-sommer {
  --accent: #ff9e4a;
  --accent-rgb: 255, 158, 74;
  --f-display: 'Ultra', 'Alfa Slab One', Georgia, serif;
}

/* farb-wiring */
body.theme-sommer #ticker {
  background: linear-gradient(90deg, var(--sommer-dusk), var(--sommer) 55%, var(--sommer-creme));
  color: #2a1206; letter-spacing: 0.16em;
}
body.theme-sommer #progress { background: linear-gradient(90deg, var(--sommer-dusk), var(--sommer)); box-shadow: 0 0 12px rgba(255,158,74,0.6); }
body.theme-sommer .dot { background: var(--sommer-dusk); box-shadow: 0 0 8px var(--sommer-dusk); }
body.theme-sommer #theme-tag { color: var(--sommer); text-shadow: 0 0 10px rgba(255,158,74,0.6); }
body.theme-sommer #hud { color: rgba(255,233,194,0.82); }
body.theme-sommer #controls button:hover { border-color: var(--sommer); color: var(--sommer); box-shadow: 0 0 12px rgba(255,158,74,0.45); }
body.theme-sommer .qa-q { color: var(--sommer-dusk); }
body.theme-sommer .q-mark { color: var(--sommer); }
body.theme-sommer #redwash { background: var(--sommer); }
body.theme-sommer #shockwave { border-color: var(--sommer); box-shadow: 0 0 60px var(--sommer), inset 0 0 60px var(--sommer); }

/* hero-wörter: sonnenuntergangs-verlauf (creme → gold → orange → dusk) */
body.theme-sommer .sl-bottom,
body.theme-sommer .huge,
body.theme-sommer .bu-line.bu-red,
body.theme-sommer .anti-line.big,
body.theme-sommer .wave-word,
body.theme-sommer .rain-word,
body.theme-sommer .burst-center,
body.theme-sommer .climax .bang,
body.theme-sommer .endcard-red .endcard-cta {
  color: transparent;
  background: linear-gradient(160deg, #fff3dc 0%, #ffce8a 30%, #ff9e4a 62%, #c65e9a 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(255,158,74,0.42));
}
body.theme-sommer .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--sommer);
  filter: drop-shadow(0 0 12px rgba(255,158,74,0.45));
}

/* akzente */
body.theme-sommer .sl-bottom strong { color: var(--sommer-dusk); -webkit-text-fill-color: var(--sommer-dusk); }
body.theme-sommer .trio-line.sommer { color: var(--sommer); text-shadow: 0 0 40px rgba(255,158,74,0.55), 0 0 80px rgba(198,94,154,0.3); }
body.theme-sommer .scene-stamp.active .bio-h .stamp.sommer { color: var(--sommer); text-shadow: 0 0 40px rgba(255,158,74,0.5); }
body.theme-sommer .crash { color: var(--sommer-dusk); }
body.theme-sommer .boot-line[data-i="2"] { color: var(--sommer-dusk); }
body.theme-sommer .boot-line[data-i="3"] { color: var(--sommer); }
body.theme-sommer .q-text .codeword {
  color: var(--sommer); background: rgba(255,158,74,0.08);
  border-color: rgba(255,158,74,0.35);
}
body.theme-sommer .climax-sub { color: var(--sommer-dusk); }
body.theme-sommer .endcard-red .endcard-mail .ec-cur { color: var(--sommer); }
body.theme-sommer .endcard-tag { color: rgba(255,206,138,0.82); }
.trio-line.sommer { color: var(--sommer); }

/* Ultra ist fett & hoch → laufweite minimal */
body.theme-sommer .qa-a, body.theme-sommer .climax-text, body.theme-sommer .endcard-cta { letter-spacing: 0; }

/* img-tint sommer (goldene stunde, warm) */
.img-wrap.tint-sommer img { filter: brightness(0.62) contrast(1.1) saturate(1.15) sepia(0.28) hue-rotate(-12deg); }

/* sommer-look: kaum scanlines, warmes korn, dusk-lila vignette, weicher sonnen-sway */
body.theme-sommer .scanlines { opacity: 0.07; }
body.theme-sommer .grain { opacity: calc(0.06 + var(--treble, 0) * 0.06); }
body.theme-sommer .vignette {
  background: radial-gradient(ellipse at center 46%, transparent 34%, rgba(58,26,72,0.4) 80%, rgba(20,10,30,0.9) 100%);
}
body.theme-sommer.kick #world { animation: kickSonne 0.42s ease-in-out; }
@keyframes kickSonne {
  0%   { transform: scale(1); filter: brightness(1); }
  34%  { transform: scale(1.008); filter: brightness(1.12) saturate(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ============================================================
   WELT L — WITH A LITTLE HELP FROM MY FRIENDS (theme-freunde)
   warme all-star-konstellation · amber/rose/violett/creme · beatles
   ============================================================ */
:root { --freunde: #f6a94c; --freunde-rose: #ff7aa8; --freunde-violet: #b06ad6; --freunde-creme: #ffe6cf; }

body.theme-freunde {
  --accent: #f6a94c;
  --accent-rgb: 246, 169, 76;
  --f-display: 'Fraunces', 'Playfair Display', Georgia, serif;
}

/* farb-wiring */
body.theme-freunde #ticker {
  background: linear-gradient(90deg, var(--freunde-violet), var(--freunde-rose) 48%, var(--freunde) 100%);
  color: #2a1220; letter-spacing: 0.15em;
}
body.theme-freunde #progress { background: linear-gradient(90deg, var(--freunde-violet), var(--freunde)); box-shadow: 0 0 12px rgba(246,169,76,0.6); }
body.theme-freunde .dot { background: var(--freunde-rose); box-shadow: 0 0 8px var(--freunde-rose); }
body.theme-freunde #theme-tag { color: var(--freunde); text-shadow: 0 0 10px rgba(246,169,76,0.6); }
body.theme-freunde #hud { color: rgba(255,230,207,0.82); }
body.theme-freunde #controls button:hover { border-color: var(--freunde); color: var(--freunde); box-shadow: 0 0 12px rgba(246,169,76,0.45); }
body.theme-freunde .qa-q { color: var(--freunde-rose); }
body.theme-freunde .q-mark { color: var(--freunde); }
body.theme-freunde #redwash { background: var(--freunde); }
body.theme-freunde #shockwave { border-color: var(--freunde); box-shadow: 0 0 60px var(--freunde), inset 0 0 60px var(--freunde); }

/* hero-wörter: warmer all-star-verlauf (creme → amber → rose → violett) */
body.theme-freunde .sl-bottom,
body.theme-freunde .huge,
body.theme-freunde .bu-line.bu-red,
body.theme-freunde .anti-line.big,
body.theme-freunde .wave-word,
body.theme-freunde .rain-word,
body.theme-freunde .burst-center,
body.theme-freunde .climax .bang,
body.theme-freunde .endcard-red .endcard-cta {
  color: transparent;
  background: linear-gradient(160deg, #fff2e0 0%, #f6a94c 42%, #ff7aa8 74%, #b06ad6 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(246,169,76,0.42));
}
body.theme-freunde .huge.outline {
  color: transparent; background: none;
  -webkit-text-stroke: 2px var(--freunde);
  filter: drop-shadow(0 0 12px rgba(246,169,76,0.45));
}

/* akzente */
body.theme-freunde .sl-bottom strong { color: var(--freunde-rose); -webkit-text-fill-color: var(--freunde-rose); }
body.theme-freunde .trio-line.freunde { color: var(--freunde); text-shadow: 0 0 40px rgba(246,169,76,0.55), 0 0 80px rgba(176,106,214,0.3); }
body.theme-freunde .scene-stamp.active .bio-h .stamp.freunde { color: var(--freunde); text-shadow: 0 0 40px rgba(246,169,76,0.5); }
body.theme-freunde .crash { color: var(--freunde-rose); }
body.theme-freunde .boot-line[data-i="2"] { color: var(--freunde-rose); }
body.theme-freunde .boot-line[data-i="3"] { color: var(--freunde); }
body.theme-freunde .q-text .codeword {
  color: var(--freunde); background: rgba(246,169,76,0.08);
  border-color: rgba(246,169,76,0.35);
}
body.theme-freunde .climax-sub { color: var(--freunde-rose); }
body.theme-freunde .endcard-red .endcard-mail .ec-cur { color: var(--freunde); }
body.theme-freunde .endcard-tag { color: rgba(255,178,138,0.82); }
.trio-line.freunde { color: var(--freunde); }

/* Fraunces (warmer serif) → laufweite etwas offener, damit die kurven atmen */
body.theme-freunde .qa-a, body.theme-freunde .climax-text, body.theme-freunde .endcard-cta { letter-spacing: 0.01em; }

/* img-tint freunde (warm, rosé-gold) */
.img-wrap.tint-freunde img { filter: brightness(0.6) contrast(1.08) saturate(1.12) sepia(0.22) hue-rotate(-18deg); }

/* freunde-look: kaum scanlines, weiches warmes korn, aubergine vignette, herzlicher sway */
body.theme-freunde .scanlines { opacity: 0.06; }
body.theme-freunde .grain { opacity: calc(0.06 + var(--treble, 0) * 0.05); }
body.theme-freunde .vignette {
  background: radial-gradient(ellipse at center 52%, transparent 36%, rgba(48,20,52,0.4) 80%, rgba(24,10,28,0.9) 100%);
}
body.theme-freunde.kick #world { animation: kickWarm 0.44s ease-in-out; }
@keyframes kickWarm {
  0%   { transform: scale(1); filter: brightness(1); }
  36%  { transform: scale(1.006); filter: brightness(1.1) saturate(1.06); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ============================================================
   WELT M — POMPEII / RUIN (theme-ruin)
   asche/ember/petrol · klassischer serif (cormorant) · bastille
   ============================================================ */
:root { --ruin: #e8783c; --ruin-petrol: #4a8a96; --ruin-ash: #cdd2d6; --ruin-creme: #e6e2da; }
body.theme-ruin { --accent: #e8783c; --accent-rgb: 232, 120, 60; --f-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; }
body.theme-ruin #ticker { background: linear-gradient(90deg, var(--ruin-petrol), var(--ruin) 60%, var(--ruin-creme)); color: #1a1410; letter-spacing: 0.16em; }
body.theme-ruin #progress { background: linear-gradient(90deg, var(--ruin-petrol), var(--ruin)); box-shadow: 0 0 12px rgba(232,120,60,0.6); }
body.theme-ruin .dot { background: var(--ruin); box-shadow: 0 0 8px var(--ruin); }
body.theme-ruin #theme-tag { color: var(--ruin); text-shadow: 0 0 10px rgba(232,120,60,0.6); }
body.theme-ruin #hud { color: rgba(205,210,214,0.82); }
body.theme-ruin #controls button:hover { border-color: var(--ruin); color: var(--ruin); box-shadow: 0 0 12px rgba(232,120,60,0.45); }
body.theme-ruin .qa-q { color: var(--ruin-petrol); }
body.theme-ruin .q-mark { color: var(--ruin); }
body.theme-ruin #redwash { background: var(--ruin); }
body.theme-ruin #shockwave { border-color: var(--ruin); box-shadow: 0 0 60px var(--ruin), inset 0 0 60px var(--ruin); }
body.theme-ruin .sl-bottom, body.theme-ruin .huge, body.theme-ruin .bu-line.bu-red, body.theme-ruin .anti-line.big,
body.theme-ruin .wave-word, body.theme-ruin .rain-word, body.theme-ruin .burst-center, body.theme-ruin .climax .bang,
body.theme-ruin .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #eef0f0 0%, #cdd2d6 26%, #e8783c 72%, #3f7d88 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 14px rgba(232,120,60,0.4));
}
body.theme-ruin .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--ruin); filter: drop-shadow(0 0 12px rgba(232,120,60,0.45)); }
body.theme-ruin .sl-bottom strong { color: var(--ruin-petrol); -webkit-text-fill-color: var(--ruin-petrol); }
body.theme-ruin .trio-line.ruin { color: var(--ruin); text-shadow: 0 0 40px rgba(232,120,60,0.55), 0 0 80px rgba(74,138,150,0.3); }
body.theme-ruin .scene-stamp.active .bio-h .stamp.ruin { color: var(--ruin); text-shadow: 0 0 40px rgba(232,120,60,0.5); }
body.theme-ruin .crash { color: var(--ruin-petrol); }
body.theme-ruin .boot-line[data-i="2"] { color: var(--ruin-petrol); }
body.theme-ruin .boot-line[data-i="3"] { color: var(--ruin); }
body.theme-ruin .q-text .codeword { color: var(--ruin); background: rgba(232,120,60,0.08); border-color: rgba(232,120,60,0.35); }
body.theme-ruin .climax-sub { color: var(--ruin-petrol); }
body.theme-ruin .endcard-red .endcard-mail .ec-cur { color: var(--ruin); }
body.theme-ruin .endcard-tag { color: rgba(205,210,214,0.8); }
.trio-line.ruin { color: var(--ruin); }
body.theme-ruin .qa-a, body.theme-ruin .climax-text { letter-spacing: 0.01em; }
.img-wrap.tint-ruin img { filter: brightness(0.55) contrast(1.15) saturate(0.92) sepia(0.14); }
body.theme-ruin .scanlines { opacity: 0.09; }
body.theme-ruin .grain { opacity: calc(0.09 + var(--treble, 0) * 0.07); }
body.theme-ruin .vignette { background: radial-gradient(ellipse at center 48%, transparent 32%, rgba(20,26,28,0.46) 80%, rgba(10,14,16,0.94) 100%); }
body.theme-ruin.kick #world { animation: kickBeben 0.4s ease-in-out; }
@keyframes kickBeben { 0%{transform:translate(0,0);} 25%{transform:translate(-2px,1px);} 55%{transform:translate(2px,-1px);} 100%{transform:translate(0,0);} }

/* ============================================================
   WELT N — WHISKEY IN THE JAR / METALL (theme-metall)
   smaragd/stahl/amber · metal-font · metallica live dublin
   ============================================================ */
:root { --metall: #2ee082; --metall-steel: #b4c0cd; --metall-amber: #f5aa3c; }
body.theme-metall { --accent: #2ee082; --accent-rgb: 46, 224, 130; --f-display: 'Metal Mania', 'Archivo Black', sans-serif; }
body.theme-metall #ticker { background: linear-gradient(90deg, #0a3d28, var(--metall) 55%, var(--metall-amber)); color: #06140d; letter-spacing: 0.14em; }
body.theme-metall #progress { background: linear-gradient(90deg, #0a6b40, var(--metall)); box-shadow: 0 0 12px rgba(46,224,130,0.6); }
body.theme-metall .dot { background: var(--metall); box-shadow: 0 0 8px var(--metall); }
body.theme-metall #theme-tag { color: var(--metall); text-shadow: 0 0 10px rgba(46,224,130,0.6); }
body.theme-metall #hud { color: rgba(180,192,205,0.82); }
body.theme-metall #controls button:hover { border-color: var(--metall); color: var(--metall); box-shadow: 0 0 12px rgba(46,224,130,0.45); }
body.theme-metall .qa-q { color: var(--metall-amber); }
body.theme-metall .q-mark { color: var(--metall); }
body.theme-metall #redwash { background: var(--metall); }
body.theme-metall #shockwave { border-color: var(--metall); box-shadow: 0 0 60px var(--metall), inset 0 0 60px var(--metall); }
body.theme-metall .sl-bottom, body.theme-metall .huge, body.theme-metall .bu-line.bu-red, body.theme-metall .anti-line.big,
body.theme-metall .wave-word, body.theme-metall .rain-word, body.theme-metall .burst-center, body.theme-metall .climax .bang,
body.theme-metall .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #eafff4 0%, #b4c0cd 26%, #2ee082 62%, #f5aa3c 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 14px rgba(46,224,130,0.45));
}
body.theme-metall .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--metall); filter: drop-shadow(0 0 12px rgba(46,224,130,0.5)); }
body.theme-metall .sl-bottom strong { color: var(--metall-amber); -webkit-text-fill-color: var(--metall-amber); }
body.theme-metall .trio-line.metall { color: var(--metall); text-shadow: 0 0 40px rgba(46,224,130,0.55), 0 0 80px rgba(245,170,60,0.3); }
body.theme-metall .scene-stamp.active .bio-h .stamp.metall { color: var(--metall); text-shadow: 0 0 40px rgba(46,224,130,0.5); }
body.theme-metall .crash { color: var(--metall-amber); }
body.theme-metall .boot-line[data-i="2"] { color: var(--metall-amber); }
body.theme-metall .boot-line[data-i="3"] { color: var(--metall); }
body.theme-metall .q-text .codeword { color: var(--metall); background: rgba(46,224,130,0.08); border-color: rgba(46,224,130,0.35); }
body.theme-metall .climax-sub { color: var(--metall-amber); }
body.theme-metall .endcard-red .endcard-mail .ec-cur { color: var(--metall); }
body.theme-metall .endcard-tag { color: rgba(180,192,205,0.8); }
.trio-line.metall { color: var(--metall); }
body.theme-metall .qa-a, body.theme-metall .climax-text, body.theme-metall .endcard-cta { letter-spacing: 0.01em; }
.img-wrap.tint-metall img { filter: brightness(0.5) contrast(1.28) saturate(1.15) hue-rotate(75deg); }
body.theme-metall .scanlines { opacity: 0.14; }
body.theme-metall .grain { opacity: calc(0.1 + var(--treble, 0) * 0.08); }
body.theme-metall .vignette { background: radial-gradient(ellipse at center 44%, transparent 30%, rgba(6,20,14,0.5) 78%, rgba(3,10,7,0.95) 100%); }
body.theme-metall.kick #world { animation: kickHeadbang 0.22s cubic-bezier(.3,1.3,.4,1); }
@keyframes kickHeadbang { 0%{transform:translateY(0) scale(1);} 40%{transform:translateY(4px) scale(1.012); filter:brightness(1.2) contrast(1.1);} 100%{transform:translateY(0) scale(1); filter:none;} }

/* ============================================================
   WELT O — LASS DIE LEUTE REDEN / COMIC (theme-comic)
   pop-art gelb/pink/cyan · comic-font (bangers) · die ärzte
   ============================================================ */
:root { --comic: #ffd60a; --comic-pink: #ff2d82; --comic-cyan: #00b4e6; --comic-ink: #0a0a0e; }
body.theme-comic { --accent: #ffd60a; --accent-rgb: 255, 214, 10; --f-display: 'Bangers', 'Archivo Black', sans-serif; }
body.theme-comic #ticker { background: linear-gradient(90deg, var(--comic-pink), var(--comic) 55%, var(--comic-cyan)); color: #0a0a0e; letter-spacing: 0.12em; }
body.theme-comic #progress { background: linear-gradient(90deg, var(--comic-pink), var(--comic)); box-shadow: 0 0 12px rgba(255,214,10,0.6); }
body.theme-comic .dot { background: var(--comic-pink); box-shadow: 0 0 8px var(--comic-pink); }
body.theme-comic #theme-tag { color: var(--comic); text-shadow: 0 0 10px rgba(255,214,10,0.6); }
body.theme-comic #hud { color: rgba(255,240,180,0.85); }
body.theme-comic #controls button:hover { border-color: var(--comic); color: var(--comic); box-shadow: 0 0 12px rgba(255,214,10,0.45); }
body.theme-comic .qa-q { color: var(--comic-cyan); }
body.theme-comic .q-mark { color: var(--comic-pink); }
body.theme-comic #redwash { background: var(--comic-pink); }
body.theme-comic #shockwave { border-color: var(--comic); box-shadow: 0 0 60px var(--comic), inset 0 0 60px var(--comic); }
body.theme-comic .sl-bottom, body.theme-comic .huge, body.theme-comic .bu-line.bu-red, body.theme-comic .anti-line.big,
body.theme-comic .wave-word, body.theme-comic .rain-word, body.theme-comic .burst-center, body.theme-comic .climax .bang,
body.theme-comic .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #fff2a8 0%, #ffd60a 42%, #ff2d82 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(3px 3px 0 rgba(10,10,14,0.9)) drop-shadow(0 0 14px rgba(255,214,10,0.4));
}
body.theme-comic .huge.outline { color: transparent; background: none; -webkit-text-stroke: 3px var(--comic-ink); filter: drop-shadow(2px 2px 0 var(--comic)); }
body.theme-comic .sl-bottom strong { color: var(--comic-pink); -webkit-text-fill-color: var(--comic-pink); }
body.theme-comic .trio-line.comic { color: var(--comic); text-shadow: 3px 3px 0 rgba(10,10,14,0.9), 0 0 40px rgba(255,214,10,0.5); }
body.theme-comic .scene-stamp.active .bio-h .stamp.comic { color: var(--comic); text-shadow: 3px 3px 0 rgba(10,10,14,0.9); }
body.theme-comic .crash { color: var(--comic-pink); }
body.theme-comic .boot-line[data-i="2"] { color: var(--comic-pink); }
body.theme-comic .boot-line[data-i="3"] { color: var(--comic-cyan); }
body.theme-comic .q-text .codeword { color: var(--comic-ink); background: var(--comic); border-color: var(--comic-ink); }
body.theme-comic .climax-sub { color: var(--comic-pink); }
body.theme-comic .endcard-red .endcard-mail .ec-cur { color: var(--comic); }
body.theme-comic .endcard-tag { color: rgba(0,180,230,0.9); }
.trio-line.comic { color: var(--comic); }
body.theme-comic .qa-a, body.theme-comic .climax-text, body.theme-comic .endcard-cta { letter-spacing: 0.02em; }
.img-wrap.tint-comic img { filter: brightness(0.68) contrast(1.3) saturate(1.5); }
body.theme-comic .scanlines { opacity: 0.05; }
body.theme-comic .grain { opacity: calc(0.05 + var(--treble, 0) * 0.05); }
body.theme-comic .vignette { background: radial-gradient(ellipse at center 46%, transparent 40%, rgba(30,20,10,0.4) 82%, rgba(16,12,8,0.9) 100%); }
body.theme-comic.kick #world { animation: kickPop 0.24s cubic-bezier(.3,1.5,.4,1); }
@keyframes kickPop { 0%{transform:scale(1) rotate(0);} 40%{transform:scale(1.016) rotate(-0.4deg);} 100%{transform:scale(1) rotate(0);} }

/* ============================================================
   WELT P — LET ME ENTERTAIN YOU / SHOW (theme-show) — DER HEADLINER
   showbiz magenta/gold/spotlight · poster-font (passion one) · robbie williams
   ============================================================ */
:root { --show: #ff2d96; --show-gold: #ffc446; --show-cyan: #5a9cff; --show-creme: #fff0f6; }
body.theme-show { --accent: #ff2d96; --accent-rgb: 255, 45, 150; --f-display: 'Passion One', 'Archivo Black', sans-serif; }
body.theme-show #ticker { background: linear-gradient(90deg, var(--show), var(--show-gold) 55%, var(--show-cyan)); color: #1a0512; letter-spacing: 0.14em; }
body.theme-show #progress { background: linear-gradient(90deg, var(--show), var(--show-gold)); box-shadow: 0 0 12px rgba(255,45,150,0.6); }
body.theme-show .dot { background: var(--show); box-shadow: 0 0 8px var(--show); }
body.theme-show #theme-tag { color: var(--show-gold); text-shadow: 0 0 10px rgba(255,196,70,0.6); }
body.theme-show #hud { color: rgba(255,240,246,0.85); }
body.theme-show #controls button:hover { border-color: var(--show); color: var(--show); box-shadow: 0 0 12px rgba(255,45,150,0.45); }
body.theme-show .qa-q { color: var(--show-cyan); }
body.theme-show .q-mark { color: var(--show-gold); }
body.theme-show #redwash { background: var(--show); }
body.theme-show #shockwave { border-color: var(--show-gold); box-shadow: 0 0 60px var(--show-gold), inset 0 0 60px var(--show); }
body.theme-show .sl-bottom, body.theme-show .huge, body.theme-show .bu-line.bu-red, body.theme-show .anti-line.big,
body.theme-show .wave-word, body.theme-show .rain-word, body.theme-show .burst-center, body.theme-show .climax .bang,
body.theme-show .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #fff0f6 0%, #ffc446 38%, #ff2d96 72%, #a23bd6 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 18px rgba(255,45,150,0.45));
}
body.theme-show .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--show-gold); filter: drop-shadow(0 0 12px rgba(255,196,70,0.5)); }
body.theme-show .sl-bottom strong { color: var(--show-gold); -webkit-text-fill-color: var(--show-gold); }
body.theme-show .trio-line.show { color: var(--show); text-shadow: 0 0 40px rgba(255,45,150,0.6), 0 0 80px rgba(255,196,70,0.35); }
body.theme-show .scene-stamp.active .bio-h .stamp.show { color: var(--show-gold); text-shadow: 0 0 40px rgba(255,196,70,0.55); }
body.theme-show .crash { color: var(--show-gold); }
body.theme-show .boot-line[data-i="2"] { color: var(--show-cyan); }
body.theme-show .boot-line[data-i="3"] { color: var(--show-gold); }
body.theme-show .q-text .codeword { color: var(--show-gold); background: rgba(255,45,150,0.1); border-color: rgba(255,196,70,0.4); }
body.theme-show .climax-sub { color: var(--show-gold); }
body.theme-show .endcard-red .endcard-mail .ec-cur { color: var(--show-gold); }
body.theme-show .endcard-tag { color: rgba(90,156,255,0.9); }
.trio-line.show { color: var(--show); }
body.theme-show .qa-a, body.theme-show .climax-text, body.theme-show .endcard-cta { letter-spacing: 0.01em; }
.img-wrap.tint-show img { filter: brightness(0.6) contrast(1.18) saturate(1.35) hue-rotate(-8deg); }
body.theme-show .scanlines { opacity: 0.06; }
body.theme-show .grain { opacity: calc(0.06 + var(--treble, 0) * 0.05); }
body.theme-show .vignette { background: radial-gradient(ellipse at center 44%, transparent 34%, rgba(48,8,40,0.42) 80%, rgba(24,4,20,0.92) 100%); }
body.theme-show.kick #world { animation: kickShow 0.28s cubic-bezier(.3,1.5,.4,1); }
@keyframes kickShow { 0%{transform:scale(1);} 42%{transform:scale(1.014); filter:brightness(1.12) saturate(1.1);} 100%{transform:scale(1); filter:none;} }

/* ============================================================
   WELT Q — I'M ALWAYS HERE / BAYWATCH (theme-beach)
   sonnenstrand: türkis-ozean/rot-boje/sand/sonnengelb · titan one · rettungsschwimmer
   ============================================================ */
:root { --beach: #ff4a4a; --beach-sea: #18b9d4; --beach-sun: #ffd23f; --beach-sand: #f4e2b0; --beach-creme: #fff6e6; }
body.theme-beach { --accent: #ff4a4a; --accent-rgb: 255, 74, 74; --f-display: 'Titan One', 'Ultra', sans-serif; }
body.theme-beach #ticker { background: linear-gradient(90deg, var(--beach-sea), var(--beach-sun) 52%, var(--beach)); color: #06303a; letter-spacing: 0.12em; }
body.theme-beach #progress { background: linear-gradient(90deg, var(--beach-sea), var(--beach-sun) 60%, var(--beach)); box-shadow: 0 0 12px rgba(24,185,212,0.6); }
body.theme-beach .dot { background: var(--beach); box-shadow: 0 0 8px var(--beach); }
body.theme-beach #theme-tag { color: var(--beach-sun); text-shadow: 0 0 10px rgba(255,210,63,0.6); }
body.theme-beach #hud { color: rgba(255,246,230,0.88); }
body.theme-beach #controls button:hover { border-color: var(--beach); color: var(--beach); box-shadow: 0 0 12px rgba(255,74,74,0.45); }
body.theme-beach .qa-q { color: var(--beach-sea); }
body.theme-beach .q-mark { color: var(--beach-sun); }
body.theme-beach #redwash { background: var(--beach); }
body.theme-beach #shockwave { border-color: var(--beach-sun); box-shadow: 0 0 60px var(--beach-sun), inset 0 0 60px var(--beach-sea); }
body.theme-beach .sl-bottom, body.theme-beach .huge, body.theme-beach .bu-line.bu-red, body.theme-beach .anti-line.big,
body.theme-beach .wave-word, body.theme-beach .rain-word, body.theme-beach .burst-center, body.theme-beach .climax .bang,
body.theme-beach .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #fff6e6 0%, #ffd23f 34%, #ff4a4a 66%, #18b9d4 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 16px rgba(255,74,74,0.42));
}
body.theme-beach .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--beach-sun); filter: drop-shadow(0 0 12px rgba(255,210,63,0.5)); }
body.theme-beach .sl-bottom strong { color: var(--beach); -webkit-text-fill-color: var(--beach); }
body.theme-beach .trio-line.beach { color: var(--beach); text-shadow: 0 0 40px rgba(255,74,74,0.55), 0 0 80px rgba(255,210,63,0.3); }
body.theme-beach .scene-stamp.active .bio-h .stamp.beach { color: var(--beach); text-shadow: 0 0 40px rgba(255,74,74,0.5); }
body.theme-beach .crash { color: var(--beach); }
body.theme-beach .boot-line[data-i="2"] { color: var(--beach-sea); }
body.theme-beach .boot-line[data-i="3"] { color: var(--beach-sun); }
body.theme-beach .q-text .codeword { color: var(--beach-sea); background: rgba(24,185,212,0.1); border-color: rgba(255,210,63,0.4); }
body.theme-beach .climax-sub { color: var(--beach-sun); }
body.theme-beach .endcard-red .endcard-mail .ec-cur { color: var(--beach-sun); }
body.theme-beach .endcard-tag { color: rgba(24,185,212,0.95); }
.trio-line.beach { color: var(--beach); }
body.theme-beach .qa-a, body.theme-beach .climax-text, body.theme-beach .endcard-cta { letter-spacing: 0.01em; }
.img-wrap.tint-beach img { filter: brightness(0.66) contrast(1.14) saturate(1.4) hue-rotate(8deg); }
body.theme-beach .scanlines { opacity: 0.05; }
body.theme-beach .grain { opacity: calc(0.05 + var(--treble, 0) * 0.05); }
body.theme-beach .vignette { background: radial-gradient(ellipse at center 42%, transparent 40%, rgba(10,60,72,0.36) 82%, rgba(6,36,44,0.9) 100%); }
body.theme-beach.kick #world { animation: kickBeach 0.26s cubic-bezier(.3,1.5,.4,1); }
@keyframes kickBeach { 0%{transform:scale(1);} 42%{transform:scale(1.013); filter:brightness(1.1) saturate(1.12);} 100%{transform:scale(1); filter:none;} }

/* ============================================================
   WELT Q — YOU NEVER CAN TELL / PULP FICTION (theme-diner)
   50s-neon-diner: neon-rot/creme/chrom-türkis/amber · monoton (neon-tube) · tarantino-noir
   ============================================================ */
:root { --diner: #ff2e4c; --diner-cream: #f5e6c8; --diner-teal: #2ec5c5; --diner-amber: #ffb642; --diner-gold: #ffd478; }
body.theme-diner { --accent: #ff2e4c; --accent-rgb: 255, 46, 76; --f-display: 'Monoton', 'Anton', sans-serif; }
body.theme-diner #ticker { background: linear-gradient(90deg, var(--diner), var(--diner-amber) 54%, var(--diner-teal)); color: #1a0a10; letter-spacing: 0.16em; }
body.theme-diner #progress { background: linear-gradient(90deg, var(--diner), var(--diner-amber)); box-shadow: 0 0 12px rgba(255,46,76,0.7); }
body.theme-diner .dot { background: var(--diner); box-shadow: 0 0 8px var(--diner); }
body.theme-diner #theme-tag { color: var(--diner-teal); text-shadow: 0 0 10px rgba(46,197,197,0.7); }
body.theme-diner #hud { color: rgba(245,230,200,0.85); }
body.theme-diner #controls button:hover { border-color: var(--diner); color: var(--diner); box-shadow: 0 0 12px rgba(255,46,76,0.5); }
body.theme-diner .qa-q { color: var(--diner-teal); }
body.theme-diner .q-mark { color: var(--diner-amber); }
body.theme-diner #redwash { background: var(--diner); }
body.theme-diner #shockwave { border-color: var(--diner-teal); box-shadow: 0 0 60px var(--diner-teal), inset 0 0 60px var(--diner); }
/* grosse worte als leuchtende neon-röhren (statt gradient-clip) */
body.theme-diner .sl-bottom, body.theme-diner .huge, body.theme-diner .bu-line.bu-red, body.theme-diner .anti-line.big,
body.theme-diner .wave-word, body.theme-diner .rain-word, body.theme-diner .burst-center, body.theme-diner .climax .bang,
body.theme-diner .endcard-red .endcard-cta {
  color: var(--diner-cream); -webkit-text-fill-color: var(--diner-cream); background: none;
  text-shadow: 0 0 6px rgba(255,46,76,0.95), 0 0 20px rgba(255,46,76,0.7), 0 0 42px rgba(46,197,197,0.35);
}
body.theme-diner .huge.outline { color: transparent; -webkit-text-fill-color: transparent; background: none; -webkit-text-stroke: 2px var(--diner); filter: drop-shadow(0 0 12px rgba(255,46,76,0.6)); text-shadow: none; }
body.theme-diner .sl-bottom strong { color: var(--diner); -webkit-text-fill-color: var(--diner); text-shadow: 0 0 14px rgba(255,46,76,0.8); }
body.theme-diner .trio-line.diner { color: var(--diner); text-shadow: 0 0 8px rgba(255,46,76,0.9), 0 0 26px rgba(255,46,76,0.6); }
body.theme-diner .trio-line.cream { color: var(--diner-cream); text-shadow: 0 0 8px rgba(245,230,200,0.6), 0 0 24px rgba(255,182,66,0.4); }
body.theme-diner .scene-stamp.active .bio-h .stamp.diner { color: var(--diner); text-shadow: 0 0 10px rgba(255,46,76,0.8), 0 0 30px rgba(255,46,76,0.5); }
body.theme-diner .scene-stamp.active .bio-h .stamp.cream { color: var(--diner-cream); text-shadow: 0 0 10px rgba(255,182,66,0.6); }
body.theme-diner .crash { color: var(--diner-amber); }
body.theme-diner .boot-line[data-i="2"] { color: var(--diner-teal); }
body.theme-diner .boot-line[data-i="3"] { color: var(--diner-amber); }
body.theme-diner .q-text .codeword { color: var(--diner-teal); background: rgba(46,197,197,0.1); border-color: rgba(255,182,66,0.4); }
body.theme-diner .climax-sub { color: var(--diner-amber); }
body.theme-diner .endcard-red .endcard-mail .ec-cur { color: var(--diner-amber); }
body.theme-diner .endcard-tag { color: rgba(46,197,197,0.95); }
.trio-line.diner { color: var(--diner); }
.trio-line.cream { color: var(--diner-cream); }
body.theme-diner .qa-a, body.theme-diner .climax-text, body.theme-diner .endcard-cta { letter-spacing: 0.02em; }
.img-wrap.tint-diner img { filter: brightness(0.6) contrast(1.22) saturate(1.28) sepia(0.18) hue-rotate(-6deg); }
body.theme-diner .scanlines { opacity: 0.09; }
body.theme-diner .grain { opacity: calc(0.08 + var(--treble, 0) * 0.06); }
body.theme-diner .vignette { background: radial-gradient(ellipse at center 44%, transparent 32%, rgba(30,6,16,0.5) 78%, rgba(12,3,8,0.95) 100%); }
body.theme-diner.kick #world { animation: kickDiner 0.26s cubic-bezier(.3,1.5,.4,1); }
@keyframes kickDiner { 0%{transform:scale(1);} 44%{transform:scale(1.012) rotate(-0.3deg); filter:brightness(1.14) saturate(1.1);} 100%{transform:scale(1) rotate(0); filter:none;} }

/* ============================================================
   WELT R — DEIN IST MEIN GANZES HERZ (theme-herz)
   romantische hingabe-ballade: rose-rot/rose-gold/pink/creme · playfair italic · heinz rudolf kunze
   ============================================================ */
:root { --herz: #e63b5a; --herz-rose: #ff8aa0; --herz-gold: #ffc896; --herz-cream: #ffeee6; }
body.theme-herz { --accent: #e63b5a; --accent-rgb: 230, 59, 90; --f-display: 'Playfair Display', 'Cormorant Garamond', serif; }
body.theme-herz .huge, body.theme-herz .wave-word, body.theme-herz .burst-center, body.theme-herz .climax .bang,
body.theme-herz .sl-bottom, body.theme-herz .bu-line, body.theme-herz .anti-line.big, body.theme-herz .rain-word,
body.theme-herz .trio-line, body.theme-herz .endcard-cta { font-style: italic; }
body.theme-herz #ticker { background: linear-gradient(90deg, var(--herz), var(--herz-gold) 55%, var(--herz-rose)); color: #2a0710; letter-spacing: 0.12em; }
body.theme-herz #progress { background: linear-gradient(90deg, var(--herz), var(--herz-rose)); box-shadow: 0 0 12px rgba(230,59,90,0.6); }
body.theme-herz .dot { background: var(--herz); box-shadow: 0 0 8px var(--herz); }
body.theme-herz #theme-tag { color: var(--herz-gold); text-shadow: 0 0 10px rgba(255,200,150,0.6); }
body.theme-herz #hud { color: rgba(255,238,230,0.85); }
body.theme-herz #controls button:hover { border-color: var(--herz); color: var(--herz); box-shadow: 0 0 12px rgba(230,59,90,0.45); }
body.theme-herz .qa-q { color: var(--herz-rose); }
body.theme-herz .q-mark { color: var(--herz-gold); }
body.theme-herz #redwash { background: var(--herz); }
body.theme-herz #shockwave { border-color: var(--herz-rose); box-shadow: 0 0 60px var(--herz-rose), inset 0 0 60px var(--herz); }
body.theme-herz .sl-bottom, body.theme-herz .huge, body.theme-herz .bu-line.bu-red, body.theme-herz .anti-line.big,
body.theme-herz .wave-word, body.theme-herz .rain-word, body.theme-herz .burst-center, body.theme-herz .climax .bang,
body.theme-herz .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #ffeee6 0%, #ffc896 36%, #ff8aa0 64%, #e63b5a 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 16px rgba(230,59,90,0.42));
}
body.theme-herz .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--herz-gold); filter: drop-shadow(0 0 12px rgba(255,200,150,0.5)); }
body.theme-herz .sl-bottom strong { color: var(--herz); -webkit-text-fill-color: var(--herz); }
body.theme-herz .trio-line.herz { color: var(--herz); text-shadow: 0 0 40px rgba(230,59,90,0.55), 0 0 80px rgba(255,138,160,0.3); }
body.theme-herz .trio-line.cream { color: var(--herz-cream); text-shadow: 0 0 30px rgba(255,238,230,0.5), 0 0 60px rgba(255,200,150,0.35); }
body.theme-herz .scene-stamp.active .bio-h .stamp.herz { color: var(--herz); text-shadow: 0 0 40px rgba(230,59,90,0.5); }
body.theme-herz .scene-stamp.active .bio-h .stamp.cream { color: var(--herz-cream); text-shadow: 0 0 30px rgba(255,200,150,0.5); }
body.theme-herz .crash { color: var(--herz); }
body.theme-herz .boot-line[data-i="2"] { color: var(--herz-rose); }
body.theme-herz .boot-line[data-i="3"] { color: var(--herz-gold); }
body.theme-herz .q-text .codeword { color: var(--herz-gold); background: rgba(230,59,90,0.1); border-color: rgba(255,138,160,0.4); }
body.theme-herz .climax-sub { color: var(--herz-gold); }
body.theme-herz .endcard-red .endcard-mail .ec-cur { color: var(--herz-gold); }
body.theme-herz .endcard-tag { color: rgba(255,138,160,0.95); }
.trio-line.herz { color: var(--herz); }
body.theme-herz .qa-a, body.theme-herz .climax-text, body.theme-herz .endcard-cta { letter-spacing: 0.01em; }
.img-wrap.tint-herz img { filter: brightness(0.62) contrast(1.12) saturate(1.32) sepia(0.12) hue-rotate(-12deg); }
body.theme-herz .scanlines { opacity: 0.05; }
body.theme-herz .grain { opacity: calc(0.05 + var(--treble, 0) * 0.05); }
body.theme-herz .vignette { background: radial-gradient(ellipse at center 42%, transparent 36%, rgba(48,10,26,0.44) 80%, rgba(22,7,16,0.94) 100%); }
body.theme-herz.kick #world { animation: kickHerz 0.3s cubic-bezier(.3,1.4,.4,1); }
@keyframes kickHerz { 0%{transform:scale(1);} 30%{transform:scale(1.016); filter:brightness(1.1) saturate(1.1);} 55%{transform:scale(1.006);} 72%{transform:scale(1.012);} 100%{transform:scale(1); filter:none;} }

/* ============================================================
   WELT S — JODELAUTOMAT / SCHÜRZENJÄGER (theme-automat)
   mechanische spieldosen-/uhrwerk-welt: messing/holz/kupfer/creme · rye (woodtype) · NICHT alpen
   ============================================================ */
:root { --automat: #d9a441; --automat-copper: #c97b4a; --automat-wood: #6b4423; --automat-green: #789e5c; --automat-cream: #f5e8c8; }
body.theme-automat { --accent: #d9a441; --accent-rgb: 217, 164, 65; --f-display: 'Rye', 'Alfa Slab One', serif; }
body.theme-automat #ticker { background: linear-gradient(90deg, var(--automat), var(--automat-copper) 55%, var(--automat-wood)); color: #221306; letter-spacing: 0.12em; }
body.theme-automat #progress { background: linear-gradient(90deg, var(--automat-wood), var(--automat) 60%, var(--automat-cream)); box-shadow: 0 0 12px rgba(217,164,65,0.6); }
body.theme-automat .dot { background: var(--automat); box-shadow: 0 0 8px var(--automat); }
body.theme-automat #theme-tag { color: var(--automat-cream); text-shadow: 0 0 10px rgba(217,164,65,0.6); }
body.theme-automat #hud { color: rgba(245,232,200,0.85); }
body.theme-automat #controls button:hover { border-color: var(--automat); color: var(--automat); box-shadow: 0 0 12px rgba(217,164,65,0.45); }
body.theme-automat .qa-q { color: var(--automat-green); }
body.theme-automat .q-mark { color: var(--automat-copper); }
body.theme-automat #redwash { background: var(--automat-copper); }
body.theme-automat #shockwave { border-color: var(--automat); box-shadow: 0 0 60px var(--automat), inset 0 0 60px var(--automat-copper); }
body.theme-automat .sl-bottom, body.theme-automat .huge, body.theme-automat .bu-line.bu-red, body.theme-automat .anti-line.big,
body.theme-automat .wave-word, body.theme-automat .rain-word, body.theme-automat .burst-center, body.theme-automat .climax .bang,
body.theme-automat .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #f5e8c8 0%, #d9a441 44%, #b3742a 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 14px rgba(217,164,65,0.4));
}
body.theme-automat .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--automat); filter: drop-shadow(0 0 12px rgba(217,164,65,0.5)); }
body.theme-automat .sl-bottom strong { color: var(--automat-copper); -webkit-text-fill-color: var(--automat-copper); }
body.theme-automat .trio-line.automat { color: var(--automat); text-shadow: 0 0 40px rgba(217,164,65,0.5), 0 0 80px rgba(201,123,74,0.3); }
body.theme-automat .trio-line.cream { color: var(--automat-cream); text-shadow: 0 0 30px rgba(245,232,200,0.5), 0 0 60px rgba(217,164,65,0.3); }
body.theme-automat .scene-stamp.active .bio-h .stamp.automat { color: var(--automat); text-shadow: 0 0 40px rgba(217,164,65,0.5); }
body.theme-automat .scene-stamp.active .bio-h .stamp.cream { color: var(--automat-cream); text-shadow: 0 0 30px rgba(217,164,65,0.4); }
body.theme-automat .crash { color: var(--automat-copper); }
body.theme-automat .boot-line[data-i="2"] { color: var(--automat-green); }
body.theme-automat .boot-line[data-i="3"] { color: var(--automat-copper); }
body.theme-automat .q-text .codeword { color: var(--automat-cream); background: rgba(217,164,65,0.1); border-color: rgba(201,123,74,0.4); }
body.theme-automat .climax-sub { color: var(--automat-cream); }
body.theme-automat .endcard-red .endcard-mail .ec-cur { color: var(--automat-copper); }
body.theme-automat .endcard-tag { color: rgba(120,158,92,0.95); }
.trio-line.automat { color: var(--automat); }
body.theme-automat .qa-a, body.theme-automat .climax-text, body.theme-automat .endcard-cta { letter-spacing: 0.01em; }
.img-wrap.tint-automat img { filter: brightness(0.62) contrast(1.14) saturate(1.2) sepia(0.32) hue-rotate(-8deg); }
body.theme-automat .scanlines { opacity: 0.06; }
body.theme-automat .grain { opacity: calc(0.07 + var(--treble, 0) * 0.05); }
body.theme-automat .vignette { background: radial-gradient(ellipse at center 46%, transparent 34%, rgba(34,19,8,0.46) 80%, rgba(16,10,4,0.94) 100%); }
body.theme-automat.kick #world { animation: kickAutomat 0.24s cubic-bezier(.3,1.6,.4,1); }
@keyframes kickAutomat { 0%{transform:scale(1) rotate(0);} 40%{transform:scale(1.01) rotate(0.4deg); filter:brightness(1.12) saturate(1.08);} 100%{transform:scale(1) rotate(0); filter:none;} }

/* ============================================================
   WELT T — JUPITER CALLING / LENINGRAD COWBOYS (theme-kosmos)
   retro-space-age: cyan-signal/violett/amber-jupiter/creme · orbitron · deep space
   ============================================================ */
:root { --kosmos: #5adcff; --kosmos-violet: #9678ff; --kosmos-amber: #f0b05a; --kosmos-red: #d25032; --kosmos-cream: #eafaff; }
body.theme-kosmos { --accent: #5adcff; --accent-rgb: 90, 220, 255; --f-display: 'Orbitron', 'Archivo Black', sans-serif; }
body.theme-kosmos #ticker { background: linear-gradient(90deg, var(--kosmos), var(--kosmos-violet) 55%, var(--kosmos-amber)); color: #05081a; letter-spacing: 0.16em; }
body.theme-kosmos #progress { background: linear-gradient(90deg, var(--kosmos-violet), var(--kosmos) 60%, var(--kosmos-cream)); box-shadow: 0 0 12px rgba(90,220,255,0.7); }
body.theme-kosmos .dot { background: var(--kosmos); box-shadow: 0 0 8px var(--kosmos); }
body.theme-kosmos #theme-tag { color: var(--kosmos-amber); text-shadow: 0 0 10px rgba(240,176,90,0.6); }
body.theme-kosmos #hud { color: rgba(234,250,255,0.85); }
body.theme-kosmos #controls button:hover { border-color: var(--kosmos); color: var(--kosmos); box-shadow: 0 0 12px rgba(90,220,255,0.5); }
body.theme-kosmos .qa-q { color: var(--kosmos-violet); }
body.theme-kosmos .q-mark { color: var(--kosmos-amber); }
body.theme-kosmos #redwash { background: var(--kosmos-violet); }
body.theme-kosmos #shockwave { border-color: var(--kosmos); box-shadow: 0 0 60px var(--kosmos), inset 0 0 60px var(--kosmos-violet); }
body.theme-kosmos .sl-bottom, body.theme-kosmos .huge, body.theme-kosmos .bu-line.bu-red, body.theme-kosmos .anti-line.big,
body.theme-kosmos .wave-word, body.theme-kosmos .rain-word, body.theme-kosmos .burst-center, body.theme-kosmos .climax .bang,
body.theme-kosmos .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #eafaff 0%, #5adcff 40%, #9678ff 76%, #f0b05a 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 16px rgba(90,220,255,0.42));
}
body.theme-kosmos .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--kosmos); filter: drop-shadow(0 0 12px rgba(90,220,255,0.55)); }
body.theme-kosmos .sl-bottom strong { color: var(--kosmos); -webkit-text-fill-color: var(--kosmos); }
body.theme-kosmos .trio-line.kosmos { color: var(--kosmos); text-shadow: 0 0 40px rgba(90,220,255,0.6), 0 0 80px rgba(150,120,255,0.35); }
body.theme-kosmos .trio-line.cream { color: var(--kosmos-cream); text-shadow: 0 0 30px rgba(234,250,255,0.5), 0 0 60px rgba(90,220,255,0.4); }
body.theme-kosmos .scene-stamp.active .bio-h .stamp.kosmos { color: var(--kosmos); text-shadow: 0 0 40px rgba(90,220,255,0.55); }
body.theme-kosmos .scene-stamp.active .bio-h .stamp.cream { color: var(--kosmos-cream); text-shadow: 0 0 30px rgba(90,220,255,0.4); }
body.theme-kosmos .crash { color: var(--kosmos-amber); }
body.theme-kosmos .boot-line[data-i="2"] { color: var(--kosmos-violet); }
body.theme-kosmos .boot-line[data-i="3"] { color: var(--kosmos-amber); }
body.theme-kosmos .q-text .codeword { color: var(--kosmos-amber); background: rgba(90,220,255,0.1); border-color: rgba(150,120,255,0.4); }
body.theme-kosmos .climax-sub { color: var(--kosmos-amber); }
body.theme-kosmos .endcard-red .endcard-mail .ec-cur { color: var(--kosmos-amber); }
body.theme-kosmos .endcard-tag { color: rgba(150,120,255,0.95); }
.trio-line.kosmos { color: var(--kosmos); }
body.theme-kosmos .qa-a, body.theme-kosmos .climax-text, body.theme-kosmos .endcard-cta { letter-spacing: 0.03em; }
.img-wrap.tint-kosmos img { filter: brightness(0.6) contrast(1.2) saturate(1.3) hue-rotate(180deg); }
body.theme-kosmos .scanlines { opacity: 0.06; }
body.theme-kosmos .grain { opacity: calc(0.05 + var(--treble, 0) * 0.05); }
body.theme-kosmos .vignette { background: radial-gradient(ellipse at center 44%, transparent 36%, rgba(12,8,40,0.5) 80%, rgba(5,3,16,0.95) 100%); }
body.theme-kosmos.kick #world { animation: kickKosmos 0.28s cubic-bezier(.3,1.5,.4,1); }
@keyframes kickKosmos { 0%{transform:scale(1);} 42%{transform:scale(1.014); filter:brightness(1.12) saturate(1.14);} 100%{transform:scale(1); filter:none;} }

/* ============================================================
   WELT U — JAVA LIFE (theme-code)
   developer/matrix-welt: terminal-grün/java-orange/creme · jetbrains mono · code der läuft
   ============================================================ */
:root { --code: #4af07a; --code-java: #e77a14; --code-red: #d0402c; --code-cyan: #5ad6ff; --code-cream: #dcffe6; }
body.theme-code { --accent: #4af07a; --accent-rgb: 74, 240, 122; --f-display: 'JetBrains Mono', monospace; }
body.theme-code .huge, body.theme-code .wave-word, body.theme-code .burst-center, body.theme-code .climax .bang,
body.theme-code .sl-bottom, body.theme-code .bu-line, body.theme-code .trio-line, body.theme-code .endcard-cta,
body.theme-code .name-big, body.theme-code .qa-a { font-weight: 800; letter-spacing: -0.02em; }
body.theme-code #ticker { background: linear-gradient(90deg, var(--code), var(--code-java) 60%, var(--code-cyan)); color: #04120a; letter-spacing: 0.1em; }
body.theme-code #progress { background: linear-gradient(90deg, var(--code), var(--code-java)); box-shadow: 0 0 12px rgba(74,240,122,0.7); }
body.theme-code .dot { background: var(--code); box-shadow: 0 0 8px var(--code); }
body.theme-code #theme-tag { color: var(--code-java); text-shadow: 0 0 10px rgba(231,122,20,0.6); }
body.theme-code #hud { color: rgba(220,255,230,0.85); }
body.theme-code #controls button:hover { border-color: var(--code); color: var(--code); box-shadow: 0 0 12px rgba(74,240,122,0.5); }
body.theme-code .qa-q { color: var(--code-cyan); }
body.theme-code .q-mark { color: var(--code-java); }
body.theme-code #redwash { background: var(--code); }
body.theme-code #shockwave { border-color: var(--code); box-shadow: 0 0 60px var(--code), inset 0 0 60px var(--code-java); }
body.theme-code .sl-bottom, body.theme-code .huge, body.theme-code .bu-line.bu-red, body.theme-code .anti-line.big,
body.theme-code .wave-word, body.theme-code .rain-word, body.theme-code .burst-center, body.theme-code .climax .bang,
body.theme-code .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #dcffe6 0%, #4af07a 46%, #e77a14 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 14px rgba(74,240,122,0.42));
}
body.theme-code .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--code); filter: drop-shadow(0 0 12px rgba(74,240,122,0.55)); }
body.theme-code .sl-bottom strong { color: var(--code-java); -webkit-text-fill-color: var(--code-java); }
body.theme-code .trio-line.code { color: var(--code); text-shadow: 0 0 40px rgba(74,240,122,0.6), 0 0 80px rgba(231,122,20,0.3); }
body.theme-code .trio-line.cream { color: var(--code-cream); text-shadow: 0 0 30px rgba(220,255,230,0.5), 0 0 60px rgba(74,240,122,0.35); }
body.theme-code .scene-stamp.active .bio-h .stamp.code { color: var(--code); text-shadow: 0 0 40px rgba(74,240,122,0.55); }
body.theme-code .scene-stamp.active .bio-h .stamp.cream { color: var(--code-cream); text-shadow: 0 0 30px rgba(74,240,122,0.4); }
body.theme-code .crash { color: var(--code-java); }
body.theme-code .boot-line[data-i="2"] { color: var(--code-cyan); }
body.theme-code .boot-line[data-i="3"] { color: var(--code-java); }
body.theme-code .q-text .codeword { color: var(--code-java); background: rgba(74,240,122,0.1); border-color: rgba(231,122,20,0.4); }
body.theme-code .climax-sub { color: var(--code-java); }
body.theme-code .endcard-red .endcard-mail .ec-cur { color: var(--code-java); }
body.theme-code .endcard-tag { color: rgba(90,214,255,0.95); }
.trio-line.code { color: var(--code); }
body.theme-code .qa-a, body.theme-code .climax-text, body.theme-code .endcard-cta { letter-spacing: 0em; }
.img-wrap.tint-code img { filter: brightness(0.55) contrast(1.25) saturate(1.15) hue-rotate(75deg) sepia(0.15); }
body.theme-code .scanlines { opacity: 0.14; }
body.theme-code .grain { opacity: calc(0.08 + var(--treble, 0) * 0.06); }
body.theme-code .vignette { background: radial-gradient(ellipse at center 46%, transparent 34%, rgba(2,16,10,0.5) 80%, rgba(1,6,4,0.96) 100%); }
body.theme-code.kick #world { animation: kickCode 0.2s steps(2, end); }
@keyframes kickCode { 0%{transform:translate(0,0); filter:none;} 50%{transform:translate(-2px,1px); filter:brightness(1.15) saturate(1.2) hue-rotate(6deg);} 100%{transform:translate(0,0); filter:none;} }

/* ============================================================
   WELT V — NODE.JS SONG (theme-node)
   server/event-loop-welt: node-grün/cyan-paket/creme · chakra petch · non-blocking
   ============================================================ */
:root { --node: #83cd29; --node-d: #3c873a; --node-cyan: #5ae1c8; --node-cream: #e0ffd2; }
body.theme-node { --accent: #83cd29; --accent-rgb: 131, 205, 41; --f-display: 'Chakra Petch', 'Space Grotesk', sans-serif; }
body.theme-node .huge, body.theme-node .wave-word, body.theme-node .burst-center, body.theme-node .climax .bang,
body.theme-node .sl-bottom, body.theme-node .trio-line, body.theme-node .endcard-cta { font-weight: 700; }
body.theme-node #ticker { background: linear-gradient(90deg, var(--node), var(--node-cyan) 60%, var(--node-d)); color: #06180a; letter-spacing: 0.1em; }
body.theme-node #progress { background: linear-gradient(90deg, var(--node-d), var(--node) 60%, var(--node-cyan)); box-shadow: 0 0 12px rgba(131,205,41,0.7); }
body.theme-node .dot { background: var(--node); box-shadow: 0 0 8px var(--node); }
body.theme-node #theme-tag { color: var(--node-cyan); text-shadow: 0 0 10px rgba(90,225,200,0.6); }
body.theme-node #hud { color: rgba(224,255,210,0.85); }
body.theme-node #controls button:hover { border-color: var(--node); color: var(--node); box-shadow: 0 0 12px rgba(131,205,41,0.5); }
body.theme-node .qa-q { color: var(--node-cyan); }
body.theme-node .q-mark { color: var(--node); }
body.theme-node #redwash { background: var(--node); }
body.theme-node #shockwave { border-color: var(--node); box-shadow: 0 0 60px var(--node), inset 0 0 60px var(--node-cyan); }
body.theme-node .sl-bottom, body.theme-node .huge, body.theme-node .bu-line.bu-red, body.theme-node .anti-line.big,
body.theme-node .wave-word, body.theme-node .rain-word, body.theme-node .burst-center, body.theme-node .climax .bang,
body.theme-node .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(160deg, #e0ffd2 0%, #83cd29 46%, #5ae1c8 100%);
  -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 14px rgba(131,205,41,0.42));
}
body.theme-node .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--node); filter: drop-shadow(0 0 12px rgba(131,205,41,0.55)); }
body.theme-node .sl-bottom strong { color: var(--node); -webkit-text-fill-color: var(--node); }
body.theme-node .trio-line.node { color: var(--node); text-shadow: 0 0 40px rgba(131,205,41,0.6), 0 0 80px rgba(90,225,200,0.3); }
body.theme-node .trio-line.cream { color: var(--node-cream); text-shadow: 0 0 30px rgba(224,255,210,0.5), 0 0 60px rgba(131,205,41,0.35); }
body.theme-node .scene-stamp.active .bio-h .stamp.node { color: var(--node); text-shadow: 0 0 40px rgba(131,205,41,0.55); }
body.theme-node .crash { color: var(--node-cyan); }
body.theme-node .boot-line[data-i="2"] { color: var(--node-cyan); }
body.theme-node .boot-line[data-i="3"] { color: var(--node); }
body.theme-node .q-text .codeword { color: var(--node-cyan); background: rgba(131,205,41,0.1); border-color: rgba(90,225,200,0.4); }
body.theme-node .climax-sub { color: var(--node-cyan); }
body.theme-node .endcard-red .endcard-mail .ec-cur { color: var(--node-cyan); }
body.theme-node .endcard-tag { color: rgba(90,225,200,0.95); }
.trio-line.node { color: var(--node); }
body.theme-node .qa-a, body.theme-node .climax-text, body.theme-node .endcard-cta { letter-spacing: 0.01em; }
.img-wrap.tint-node img { filter: brightness(0.6) contrast(1.2) saturate(1.2) hue-rotate(60deg); }
body.theme-node .scanlines { opacity: 0.07; }
body.theme-node .grain { opacity: calc(0.05 + var(--treble, 0) * 0.05); }
body.theme-node .vignette { background: radial-gradient(ellipse at center 46%, transparent 36%, rgba(6,24,12,0.48) 80%, rgba(3,10,5,0.95) 100%); }
body.theme-node.kick #world { animation: kickNode 0.24s cubic-bezier(.3,1.5,.4,1); }
@keyframes kickNode { 0%{transform:scale(1);} 42%{transform:scale(1.012); filter:brightness(1.12) saturate(1.14);} 100%{transform:scale(1); filter:none;} }

/* ============================================================
   WELT W — UND WENN EIN LIED (theme-lied)
   warme open-air-anthem: twilight-gold/amber/rose/creme · spectral · mit viel liebe
   ============================================================ */
:root { --lied: #f5c451; --lied-amber: #f09646; --lied-rose: #ffb696; --lied-cream: #fff4dc; }
body.theme-lied { --accent: #f5c451; --accent-rgb: 245, 196, 81; --f-display: 'Spectral', 'Fraunces', serif; }
body.theme-lied .huge, body.theme-lied .wave-word, body.theme-lied .burst-center, body.theme-lied .climax .bang,
body.theme-lied .sl-bottom, body.theme-lied .trio-line, body.theme-lied .endcard-cta,
body.theme-lied .name-big, body.theme-lied .qa-a { font-weight: 700; letter-spacing: 0.005em; }
body.theme-lied #ticker { background: linear-gradient(90deg, var(--lied), var(--lied-amber) 55%, var(--lied-rose)); color: #201207; letter-spacing: 0.12em; }
body.theme-lied #progress { background: linear-gradient(90deg, var(--lied-amber), var(--lied) 60%, var(--lied-rose)); box-shadow: 0 0 12px rgba(245,196,81,0.7); }
body.theme-lied .dot { background: var(--lied); box-shadow: 0 0 8px var(--lied); }
body.theme-lied #theme-tag { color: var(--lied-rose); text-shadow: 0 0 10px rgba(255,182,150,0.6); }
body.theme-lied #hud { color: rgba(255,244,220,0.85); }
body.theme-lied #controls button:hover { border-color: var(--lied); color: var(--lied); box-shadow: 0 0 12px rgba(245,196,81,0.5); }
body.theme-lied .qa-q { color: var(--lied-rose); }
body.theme-lied .q-mark { color: var(--lied-amber); }
body.theme-lied #redwash { background: var(--lied-amber); }
body.theme-lied #shockwave { border-color: var(--lied); box-shadow: 0 0 60px var(--lied), inset 0 0 60px var(--lied-rose); }
body.theme-lied .sl-bottom, body.theme-lied .huge, body.theme-lied .bu-line.bu-red, body.theme-lied .anti-line.big,
body.theme-lied .wave-word, body.theme-lied .rain-word, body.theme-lied .burst-center, body.theme-lied .climax .bang,
body.theme-lied .endcard-red .endcard-cta {
  background: linear-gradient(180deg, var(--lied-cream), var(--lied) 55%, var(--lied-amber));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(245,196,81,0.5));
}
body.theme-lied .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--lied); filter: drop-shadow(0 0 12px rgba(245,196,81,0.55)); }
body.theme-lied .sl-bottom strong { color: var(--lied-rose); -webkit-text-fill-color: var(--lied-rose); }
body.theme-lied .trio-line.lied { color: var(--lied); text-shadow: 0 0 40px rgba(245,196,81,0.6), 0 0 80px rgba(240,150,70,0.3); }
body.theme-lied .trio-line.cream { color: var(--lied-cream); text-shadow: 0 0 30px rgba(255,244,220,0.5), 0 0 60px rgba(245,196,81,0.35); }
body.theme-lied .scene-stamp.active .bio-h .stamp.lied { color: var(--lied); text-shadow: 0 0 40px rgba(245,196,81,0.55); }
body.theme-lied .scene-stamp.active .bio-h .stamp.cream { color: var(--lied-cream); text-shadow: 0 0 30px rgba(255,244,220,0.4); }
body.theme-lied .crash { color: var(--lied-amber); }
body.theme-lied .boot-line[data-i="2"] { color: var(--lied-rose); }
body.theme-lied .boot-line[data-i="3"] { color: var(--lied); }
body.theme-lied .q-text .codeword { color: var(--lied-amber); background: rgba(245,196,81,0.1); border-color: rgba(255,182,150,0.4); }
body.theme-lied .climax-sub { color: var(--lied-rose); }
body.theme-lied .endcard-red .endcard-mail .ec-cur { color: var(--lied-amber); }
body.theme-lied .endcard-tag { color: rgba(255,182,150,0.95); }
.trio-line.lied { color: var(--lied); }
body.theme-lied .qa-a, body.theme-lied .climax-text, body.theme-lied .endcard-cta { letter-spacing: 0.01em; }
.img-wrap.tint-lied img { filter: brightness(0.62) contrast(1.14) saturate(1.25) sepia(0.28) hue-rotate(-8deg); }
body.theme-lied .scanlines { opacity: 0.05; }
body.theme-lied .grain { opacity: calc(0.05 + var(--treble, 0) * 0.05); }
body.theme-lied .vignette { background: radial-gradient(ellipse at center 44%, transparent 38%, rgba(20,14,15,0.5) 80%, rgba(10,6,7,0.96) 100%); }
body.theme-lied.kick #world { animation: kickLied 0.26s cubic-bezier(.3,1.5,.4,1); }
@keyframes kickLied { 0%{transform:scale(1);} 44%{transform:scale(1.011); filter:brightness(1.1) saturate(1.1);} 100%{transform:scale(1); filter:none;} }

/* ============================================================
   WELT X — LOOKING FOR FREEDOM (theme-freiheit)
   berlin/mauerfall '89: nacht-blau + freiheits-gold + suchscheinwerfer-cyan
   + feuerwerk-rot · oswald · mauern fallen
   ============================================================ */
:root { --frei: #ffd24a; --frei-sky: #5abaff; --frei-spark: #ff5c78; --frei-cream: #fff2d0; }
body.theme-freiheit { --accent: #ffd24a; --accent-rgb: 255, 210, 74; --f-display: 'Oswald', 'Anton', sans-serif; }
body.theme-freiheit .huge, body.theme-freiheit .wave-word, body.theme-freiheit .burst-center, body.theme-freiheit .climax .bang,
body.theme-freiheit .sl-bottom, body.theme-freiheit .trio-line, body.theme-freiheit .endcard-cta,
body.theme-freiheit .name-big, body.theme-freiheit .qa-a { font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; }
body.theme-freiheit #ticker { background: linear-gradient(90deg, var(--frei), var(--frei-cream) 50%, var(--frei-sky)); color: #0b1024; letter-spacing: 0.12em; }
body.theme-freiheit #progress { background: linear-gradient(90deg, var(--frei-sky), var(--frei) 60%, var(--frei-cream)); box-shadow: 0 0 12px rgba(255,210,74,0.7); }
body.theme-freiheit .dot { background: var(--frei); box-shadow: 0 0 8px var(--frei); }
body.theme-freiheit #theme-tag { color: var(--frei-sky); text-shadow: 0 0 10px rgba(90,186,255,0.6); }
body.theme-freiheit #hud { color: rgba(255,242,208,0.85); }
body.theme-freiheit #controls button:hover { border-color: var(--frei); color: var(--frei); box-shadow: 0 0 12px rgba(255,210,74,0.5); }
body.theme-freiheit .qa-q { color: var(--frei-sky); }
body.theme-freiheit .q-mark { color: var(--frei-spark); }
body.theme-freiheit #redwash { background: var(--frei); }
body.theme-freiheit #shockwave { border-color: var(--frei); box-shadow: 0 0 60px var(--frei), inset 0 0 60px var(--frei-sky); }
body.theme-freiheit .sl-bottom, body.theme-freiheit .huge, body.theme-freiheit .bu-line.bu-red, body.theme-freiheit .anti-line.big,
body.theme-freiheit .wave-word, body.theme-freiheit .rain-word, body.theme-freiheit .burst-center, body.theme-freiheit .climax .bang,
body.theme-freiheit .endcard-red .endcard-cta {
  background: linear-gradient(180deg, var(--frei-cream), var(--frei) 58%, #e0a828);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(255,210,74,0.5));
}
body.theme-freiheit .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--frei); filter: drop-shadow(0 0 12px rgba(255,210,74,0.55)); }
body.theme-freiheit .sl-bottom strong { color: var(--frei-sky); -webkit-text-fill-color: var(--frei-sky); }
body.theme-freiheit .trio-line.frei { color: var(--frei); text-shadow: 0 0 40px rgba(255,210,74,0.6), 0 0 80px rgba(90,186,255,0.3); }
body.theme-freiheit .trio-line.cream { color: var(--frei-cream); text-shadow: 0 0 30px rgba(255,242,208,0.5), 0 0 60px rgba(255,210,74,0.35); }
body.theme-freiheit .scene-stamp.active .bio-h .stamp.frei { color: var(--frei); text-shadow: 0 0 40px rgba(255,210,74,0.55); }
body.theme-freiheit .scene-stamp.active .bio-h .stamp.cream { color: var(--frei-cream); text-shadow: 0 0 30px rgba(255,242,208,0.4); }
body.theme-freiheit .crash { color: var(--frei-spark); }
body.theme-freiheit .boot-line[data-i="2"] { color: var(--frei-sky); }
body.theme-freiheit .boot-line[data-i="3"] { color: var(--frei); }
body.theme-freiheit .q-text .codeword { color: var(--frei-sky); background: rgba(255,210,74,0.1); border-color: rgba(90,186,255,0.4); }
body.theme-freiheit .climax-sub { color: var(--frei-sky); }
body.theme-freiheit .endcard-red .endcard-mail .ec-cur { color: var(--frei-spark); }
body.theme-freiheit .endcard-tag { color: rgba(90,186,255,0.95); }
.trio-line.frei { color: var(--frei); }
body.theme-freiheit .qa-a, body.theme-freiheit .climax-text, body.theme-freiheit .endcard-cta { letter-spacing: 0.02em; }
.img-wrap.tint-frei img { filter: brightness(0.52) contrast(1.18) saturate(1.1) sepia(0.3) hue-rotate(178deg); }
body.theme-freiheit .scanlines { opacity: 0.06; }
body.theme-freiheit .grain { opacity: calc(0.05 + var(--treble, 0) * 0.06); }
body.theme-freiheit .vignette { background: radial-gradient(ellipse at center 42%, transparent 36%, rgba(8,12,28,0.55) 80%, rgba(3,6,16,0.97) 100%); }
body.theme-freiheit.kick #world { animation: kickFrei 0.24s cubic-bezier(.3,1.5,.4,1); }
@keyframes kickFrei { 0%{transform:scale(1);} 42%{transform:scale(1.013); filter:brightness(1.14) saturate(1.12);} 100%{transform:scale(1); filter:none;} }

/* ============================================================
   WELT Y — I DON'T EVER GIVE UP (theme-grind)
   never-give-up/launch: ignition-orange + mars-rot + telemetrie-cyan · teko
   · harte, treibende welt
   ============================================================ */
:root { --grind: #ff6a2b; --grind-mars: #ff423a; --grind-sky: #4fe0ff; --grind-cream: #fff0dc; }
body.theme-grind { --accent: #ff6a2b; --accent-rgb: 255, 106, 43; --f-display: 'Teko', 'Oswald', sans-serif; }
body.theme-grind .huge, body.theme-grind .wave-word, body.theme-grind .burst-center, body.theme-grind .climax .bang,
body.theme-grind .sl-bottom, body.theme-grind .trio-line, body.theme-grind .endcard-cta,
body.theme-grind .name-big, body.theme-grind .qa-a { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
body.theme-grind #ticker { background: linear-gradient(90deg, var(--grind), var(--grind-mars) 55%, var(--grind-cream)); color: #150803; letter-spacing: 0.12em; }
body.theme-grind #progress { background: linear-gradient(90deg, var(--grind-mars), var(--grind) 60%, var(--grind-cream)); box-shadow: 0 0 12px rgba(255,106,43,0.7); }
body.theme-grind .dot { background: var(--grind); box-shadow: 0 0 8px var(--grind); }
body.theme-grind #theme-tag { color: var(--grind-sky); text-shadow: 0 0 10px rgba(79,224,255,0.6); }
body.theme-grind #hud { color: rgba(255,240,220,0.85); }
body.theme-grind #controls button:hover { border-color: var(--grind); color: var(--grind); box-shadow: 0 0 12px rgba(255,106,43,0.5); }
body.theme-grind .qa-q { color: var(--grind-sky); }
body.theme-grind .q-mark { color: var(--grind-mars); }
body.theme-grind #redwash { background: var(--grind); }
body.theme-grind #shockwave { border-color: var(--grind); box-shadow: 0 0 60px var(--grind), inset 0 0 60px var(--grind-mars); }
body.theme-grind .sl-bottom, body.theme-grind .huge, body.theme-grind .bu-line.bu-red, body.theme-grind .anti-line.big,
body.theme-grind .wave-word, body.theme-grind .rain-word, body.theme-grind .burst-center, body.theme-grind .climax .bang,
body.theme-grind .endcard-red .endcard-cta {
  background: linear-gradient(180deg, var(--grind-cream), var(--grind) 52%, var(--grind-mars));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(255,106,43,0.55));
}
body.theme-grind .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--grind); filter: drop-shadow(0 0 12px rgba(255,106,43,0.55)); }
body.theme-grind .sl-bottom strong { color: var(--grind-sky); -webkit-text-fill-color: var(--grind-sky); }
body.theme-grind .trio-line.grind { color: var(--grind); text-shadow: 0 0 40px rgba(255,106,43,0.6), 0 0 80px rgba(255,66,58,0.3); }
body.theme-grind .trio-line.cream { color: var(--grind-cream); text-shadow: 0 0 30px rgba(255,240,220,0.5), 0 0 60px rgba(255,106,43,0.35); }
body.theme-grind .scene-stamp.active .bio-h .stamp.grind { color: var(--grind); text-shadow: 0 0 40px rgba(255,106,43,0.55); }
body.theme-grind .scene-stamp.active .bio-h .stamp.cream { color: var(--grind-cream); text-shadow: 0 0 30px rgba(255,240,220,0.4); }
body.theme-grind .crash { color: var(--grind-mars); }
body.theme-grind .boot-line[data-i="2"] { color: var(--grind-sky); }
body.theme-grind .boot-line[data-i="3"] { color: var(--grind); }
body.theme-grind .q-text .codeword { color: var(--grind-sky); background: rgba(255,106,43,0.1); border-color: rgba(255,66,58,0.4); }
body.theme-grind .climax-sub { color: var(--grind-sky); }
body.theme-grind .endcard-red .endcard-mail .ec-cur { color: var(--grind-mars); }
body.theme-grind .endcard-tag { color: rgba(79,224,255,0.95); }
.trio-line.grind { color: var(--grind); }
body.theme-grind .qa-a, body.theme-grind .climax-text, body.theme-grind .endcard-cta { letter-spacing: 0.03em; }
.img-wrap.tint-grind img { filter: brightness(0.55) contrast(1.25) saturate(1.35) sepia(0.3) hue-rotate(-18deg); }
body.theme-grind .scanlines { opacity: 0.09; }
body.theme-grind .grain { opacity: calc(0.06 + var(--treble, 0) * 0.06); }
body.theme-grind .vignette { background: radial-gradient(ellipse at center 46%, transparent 34%, rgba(20,8,6,0.55) 80%, rgba(8,4,3,0.97) 100%); }
body.theme-grind.kick #world { animation: kickGrind 0.2s steps(2, end); }
@keyframes kickGrind { 0%{transform:scale(1);} 50%{transform:scale(1.014) translateY(-0.4%); filter:brightness(1.18) saturate(1.2);} 100%{transform:scale(1); filter:none;} }

/* ============================================================
   WELT Z — FREUNDE FÜRS LEBEN (theme-serie)
   90er-TV-vorspann: röhren-bernstein + tv-cyan + vhs-magenta · bevan
   ============================================================ */
:root { --serie: #f0a637; --serie-cyan: #63d9e8; --serie-mag: #ff4fa3; --serie-cream: #fff2d8; }
body.theme-serie { --accent: #f0a637; --accent-rgb: 240, 166, 55; --f-display: 'Bevan', 'Alfa Slab One', serif; }
body.theme-serie .huge, body.theme-serie .wave-word, body.theme-serie .burst-center, body.theme-serie .climax .bang,
body.theme-serie .sl-bottom, body.theme-serie .trio-line, body.theme-serie .endcard-cta,
body.theme-serie .name-big, body.theme-serie .qa-a { font-weight: 400; letter-spacing: 0.01em; }
body.theme-serie #ticker { background: linear-gradient(90deg, var(--serie), var(--serie-cream) 55%, var(--serie-cyan)); color: #1c1108; letter-spacing: 0.1em; }
body.theme-serie #progress { background: linear-gradient(90deg, var(--serie-cyan), var(--serie) 60%, var(--serie-cream)); box-shadow: 0 0 12px rgba(240,166,55,0.7); }
body.theme-serie .dot { background: var(--serie); box-shadow: 0 0 8px var(--serie); }
body.theme-serie #theme-tag { color: var(--serie-cyan); text-shadow: 0 0 10px rgba(99,217,232,0.6); }
body.theme-serie #hud { color: rgba(255,242,216,0.85); }
body.theme-serie #controls button:hover { border-color: var(--serie); color: var(--serie); box-shadow: 0 0 12px rgba(240,166,55,0.5); }
body.theme-serie .qa-q { color: var(--serie-cyan); }
body.theme-serie .q-mark { color: var(--serie-mag); }
body.theme-serie #redwash { background: var(--serie); }
body.theme-serie #shockwave { border-color: var(--serie); box-shadow: 0 0 60px var(--serie), inset 0 0 60px var(--serie-cyan); }
body.theme-serie .sl-bottom, body.theme-serie .huge, body.theme-serie .bu-line.bu-red, body.theme-serie .anti-line.big,
body.theme-serie .wave-word, body.theme-serie .rain-word, body.theme-serie .burst-center, body.theme-serie .climax .bang,
body.theme-serie .endcard-red .endcard-cta {
  background: linear-gradient(180deg, var(--serie-cream), var(--serie) 58%, #c97f24);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(240,166,55,0.5)) drop-shadow(2px 0 0 rgba(255,79,163,0.25));
}
body.theme-serie .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--serie); filter: drop-shadow(0 0 12px rgba(240,166,55,0.55)); }
body.theme-serie .sl-bottom strong { color: var(--serie-cyan); -webkit-text-fill-color: var(--serie-cyan); }
body.theme-serie .trio-line.serie { color: var(--serie); text-shadow: 0 0 36px rgba(240,166,55,0.6), 2px 0 0 rgba(255,79,163,0.3); }
body.theme-serie .trio-line.cream { color: var(--serie-cream); text-shadow: 0 0 28px rgba(255,242,216,0.5), -2px 0 0 rgba(99,217,232,0.3); }
body.theme-serie .scene-stamp.active .bio-h .stamp.serie { color: var(--serie); text-shadow: 0 0 36px rgba(240,166,55,0.55); }
body.theme-serie .scene-stamp.active .bio-h .stamp.cream { color: var(--serie-cream); text-shadow: 0 0 26px rgba(255,242,216,0.4); }
body.theme-serie .crash { color: var(--serie-mag); }
body.theme-serie .boot-line[data-i="2"] { color: var(--serie-cyan); }
body.theme-serie .boot-line[data-i="3"] { color: var(--serie); }
body.theme-serie .q-text .codeword { color: var(--serie-cyan); background: rgba(240,166,55,0.1); border-color: rgba(255,79,163,0.4); }
body.theme-serie .climax-sub { color: var(--serie-cyan); }
body.theme-serie .endcard-red .endcard-mail .ec-cur { color: var(--serie-mag); }
body.theme-serie .endcard-tag { color: rgba(99,217,232,0.95); }
.trio-line.serie { color: var(--serie); }
body.theme-serie .qa-a, body.theme-serie .climax-text, body.theme-serie .endcard-cta { letter-spacing: 0.01em; }
.img-wrap.tint-serie img { filter: brightness(0.6) contrast(1.1) saturate(0.9) sepia(0.35); }
body.theme-serie .scanlines { opacity: 0.16; }
body.theme-serie .grain { opacity: calc(0.09 + var(--treble, 0) * 0.07); }
body.theme-serie .vignette { background: radial-gradient(ellipse at center 46%, transparent 30%, rgba(18,12,8,0.5) 76%, rgba(6,5,4,0.97) 100%); }
body.theme-serie.kick #world { animation: kickSerie 0.2s steps(2, end); }
@keyframes kickSerie { 0%{transform:scale(1);} 50%{transform:scale(1.008) translateX(0.3%); filter:brightness(1.12) saturate(1.1);} 100%{transform:scale(1); filter:none;} }

/* ============================================================
   PICKER v18/v19 — n welten, jede karte IST ihr look
   flex-zentriert → beliebig viele karten sitzen sauber (3-up / 2-up / 1-up)
   ============================================================ */
.picker-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.picker-grid .track-card { flex: 1 1 320px; max-width: 400px; min-width: 260px; }

/* picker scrollbar bei vielen karten / kurzen viewports
   (margin:auto zentriert, erlaubt aber scroll-past wenn inhalt > höhe) */
#picker { overflow-y: auto; overflow-x: hidden; }
.picker-inner { margin: auto; padding: 4.5rem 1rem; }
@media (max-width: 600px) {
  .picker-grid .track-card { min-height: 150px; }
}
.track-card {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(250px, 34vh, 350px);
}
.track-card > * { position: relative; z-index: 2; }
.track-card::before { z-index: 3; }
.tc-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* — karte A: riot punk — hazard-streifen + blast */
.track-card[data-song="kaufmich"] .tc-art {
  background:
    radial-gradient(circle at 18% 115%, rgba(255,0,51,0.45), transparent 55%),
    radial-gradient(circle at 90% -10%, rgba(255,0,51,0.25), transparent 45%),
    repeating-linear-gradient(-45deg, rgba(255,0,51,0.12) 0 12px, transparent 12px 30px);
}
.track-card[data-song="kaufmich"]:hover .tc-art { animation: riotShift 0.5s steps(3) infinite; }
@keyframes riotShift {
  0% { transform: translate(0,0); }
  33% { transform: translate(-6px, 2px); }
  66% { transform: translate(4px, -3px); }
  100% { transform: translate(0,0); }
}
.track-card[data-song="kaufmich"] .tc-title { transform: rotate(-1.6deg); }

/* — karte B: riviera — sonnenuntergang + grid-boden */
.track-card[data-song="unmoeglich"] .tc-art {
  background:
    radial-gradient(circle at 50% 62%, #ffd75e 0%, #ff8a3d 9%, rgba(255,45,149,0.85) 16%, transparent 30%),
    linear-gradient(180deg, #08021f 0%, #26073f 42%, #71134f 62%, #ff2d95 71.8%, #02000a 72.2%, #02000a 100%);
}
.track-card[data-song="unmoeglich"] .tc-art::after {
  content: ''; position: absolute; left: -20%; right: -20%; bottom: 0; height: 30%;
  background:
    repeating-linear-gradient(90deg, rgba(0,247,255,0.35) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(180deg, rgba(0,247,255,0.35) 0 1px, transparent 1px 16px);
  transform: perspective(160px) rotateX(55deg);
  transform-origin: 50% 0;
}
.track-card[data-song="unmoeglich"] .tc-art::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,0,10,0.55) 0%, rgba(2,0,10,0.15) 55%, rgba(2,0,10,0.7) 100%);
}
.track-card[data-song="unmoeglich"] .tc-title {
  color: transparent;
  background: linear-gradient(180deg, #fff 5%, #bfe6ff 35%, #62c8f0 49%, #2b6fae 53%, #ff7ac8 75%, #ffd6f2 100%);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="unmoeglich"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(0,247,255,0.55)); }

/* — karte C: cinema — letterbox + spotlight */
.track-card[data-song="loseyourself"] .tc-art {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,178,0,0.32), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(255,120,0,0.28), transparent 55%),
    #060300;
}
.track-card[data-song="loseyourself"] .tc-art::before,
.track-card[data-song="loseyourself"] .tc-art::after {
  content: ''; position: absolute; left: 0; right: 0; height: 13%;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(255,178,0,0.18) 16px 22px, transparent 22px 38px),
    #000;
}
.track-card[data-song="loseyourself"] .tc-art::before { top: 0; }
.track-card[data-song="loseyourself"] .tc-art::after { bottom: 0; }
.track-card[data-song="loseyourself"] .tc-title {
  font-family: 'Bebas Neue', var(--f-display);
  letter-spacing: 0.12em; color: #ffe9c4;
}

/* — karte D: festa — tropische neon-nacht + konfetti */
.track-card.verde { border-color: rgba(0,214,100,0.35); background: linear-gradient(180deg, rgba(0,214,100,0.05), rgba(0,0,0,0.6)); }
.track-card.verde::before { background: linear-gradient(120deg, transparent 30%, rgba(0,214,100,0.2) 50%, transparent 70%); }
.track-card.verde:hover { border-color: var(--verde); box-shadow: 0 12px 40px rgba(0,214,100,0.35); }
.track-card[data-song="balada"] .tc-art {
  background:
    radial-gradient(circle at 20% 10%, rgba(0,214,100,0.5), transparent 42%),
    radial-gradient(circle at 84% 20%, rgba(255,45,149,0.42), transparent 40%),
    radial-gradient(circle at 50% 122%, rgba(255,213,0,0.5), transparent 55%),
    linear-gradient(180deg, #02140c 0%, #062313 60%, #0a0400 100%);
}
.track-card[data-song="balada"] .tc-art::after {
  content: ''; position: absolute; inset: -20%;
  background-image:
    radial-gradient(circle, #ffd500 0 2px, transparent 2.5px),
    radial-gradient(circle, #00d664 0 2px, transparent 2.5px),
    radial-gradient(circle, #ff2d95 0 2px, transparent 2.5px),
    radial-gradient(circle, #ffffff 0 1.5px, transparent 2px);
  background-size: 66px 66px, 84px 84px, 104px 104px, 52px 52px;
  background-position: 0 0, 30px 22px, 15px 48px, 45px 10px;
  opacity: 0.55;
}
.track-card[data-song="balada"]:hover .tc-art::after { animation: confettiDrift 3s linear infinite; }
@keyframes confettiDrift { from { transform: translateY(0); } to { transform: translateY(66px); } }
.track-card[data-song="balada"] .tc-title {
  font-family: 'Fredoka', var(--f-display); font-weight: 700; letter-spacing: 0.01em;
  color: transparent;
  background: linear-gradient(120deg, #00d664, #ffd500 55%, #ff2d95);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="balada"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(0,214,100,0.55)); }

/* — karte E: estádio — jumbotron-dotmatrix + flutlicht */
.track-card.laranja { border-color: rgba(255,176,54,0.35); background: linear-gradient(180deg, rgba(255,176,54,0.05), rgba(0,0,0,0.6)); }
.track-card.laranja::before { background: linear-gradient(120deg, transparent 30%, rgba(255,176,54,0.2) 50%, transparent 70%); }
.track-card.laranja:hover { border-color: var(--laranja); box-shadow: 0 12px 40px rgba(255,176,54,0.35); }
.track-card[data-song="aisepego"] .tc-art {
  background:
    radial-gradient(circle at 20% -8%, rgba(255,240,214,0.5), transparent 34%),
    radial-gradient(circle at 80% -8%, rgba(255,240,214,0.45), transparent 34%),
    radial-gradient(circle at 50% 118%, rgba(255,45,120,0.4), transparent 55%),
    linear-gradient(180deg, #05070f 0%, #0a0b16 60%, #0b0603 100%);
}
.track-card[data-song="aisepego"] .tc-art::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,176,54,0.55) 0 1.4px, transparent 1.8px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 30%, #000 100%);
  opacity: 0.6;
}
.track-card[data-song="aisepego"] .tc-title {
  font-family: 'Bungee', var(--f-display); letter-spacing: 0.01em; font-size: clamp(1.8rem, 4vw, 3rem);
  color: transparent;
  background: linear-gradient(120deg, #fff2d6, #ffb036 50%, #ff2d78);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="aisepego"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(255,176,54,0.55)); }

/* — karte F: gala — glitzer-lichtvorhang + spotlight-glanz */
.track-card.silber { border-color: rgba(160,210,255,0.35); background: linear-gradient(180deg, rgba(160,210,255,0.05), rgba(0,0,0,0.6)); }
.track-card.silber::before { background: linear-gradient(120deg, transparent 30%, rgba(235,240,255,0.22) 50%, transparent 70%); }
.track-card.silber:hover { border-color: var(--silber); box-shadow: 0 12px 40px rgba(160,210,255,0.35); }
.track-card[data-song="atemlos"] .tc-art {
  background:
    radial-gradient(circle at 50% -12%, rgba(235,240,255,0.5), transparent 42%),
    radial-gradient(circle at 15% 118%, rgba(160,210,255,0.35), transparent 45%),
    radial-gradient(circle at 85% 118%, rgba(255,79,163,0.35), transparent 45%),
    linear-gradient(180deg, #0a0620 0%, #0c0a26 55%, #05030f 100%);
}
.track-card[data-song="atemlos"] .tc-art::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(235,240,255,0.8) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(160,210,255,0.6) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,79,163,0.55) 0 1px, transparent 1.6px);
  background-size: 40px 70px, 58px 90px, 74px 110px;
  background-position: 8px 0, 30px 24px, 50px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  opacity: 0.7;
}
.track-card[data-song="atemlos"]:hover .tc-art::after { animation: confettiDrift 3.5s linear infinite; }
.track-card[data-song="atemlos"] .tc-title {
  font-family: 'Cinzel', var(--f-display); font-weight: 700; letter-spacing: 0.04em;
  color: transparent;
  background: linear-gradient(160deg, #ffffff, #a0d2ff 55%, #ff4fa3);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="atemlos"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(160,210,255,0.55)); }

/* — karte G: viva — barocke morgendämmerung + strahlenkranz + blattgold */
.track-card.royal { border-color: rgba(224,176,74,0.35); background: linear-gradient(180deg, rgba(224,176,74,0.05), rgba(0,0,0,0.6)); }
.track-card.royal::before { background: linear-gradient(120deg, transparent 30%, rgba(224,176,74,0.22) 50%, transparent 70%); }
.track-card.royal:hover { border-color: var(--royal); box-shadow: 0 12px 40px rgba(224,176,74,0.35); }
.track-card[data-song="vivalavida"] .tc-art {
  background:
    radial-gradient(circle at 50% 34%, rgba(255,246,221,0.55), rgba(224,176,74,0.25) 22%, transparent 46%),
    conic-gradient(from 0deg at 50% 34%, rgba(224,176,74,0.28) 0 6deg, transparent 6deg 18deg, rgba(224,176,74,0.22) 18deg 24deg, transparent 24deg 36deg),
    linear-gradient(180deg, #1a2f74 0%, #12224f 55%, #060e28 100%);
}
.track-card[data-song="vivalavida"] .tc-art::after {
  content: ''; position: absolute; inset: -20%;
  background-image:
    radial-gradient(circle, rgba(224,176,74,0.85) 0 1.4px, transparent 2px),
    radial-gradient(circle, rgba(243,230,196,0.7) 0 1.2px, transparent 1.8px);
  background-size: 54px 80px, 78px 104px;
  background-position: 0 0, 26px 30px;
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 20%, #000 100%);
  opacity: 0.6;
}
.track-card[data-song="vivalavida"]:hover .tc-art::after { animation: confettiDrift 4s linear infinite; }
.track-card[data-song="vivalavida"] .tc-title {
  font-family: 'Cinzel Decorative', 'Cinzel', var(--f-display); font-weight: 700; letter-spacing: 0.02em; font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  color: transparent;
  background: linear-gradient(160deg, #fff6dd, #e0b04a 55%, #b8862f);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="vivalavida"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(224,176,74,0.55)); }

/* — karte H: himmel — dämmerungshimmel + aufsteigende ballons */
.track-card.himmel { border-color: rgba(230,57,70,0.35); background: linear-gradient(180deg, rgba(120,170,230,0.05), rgba(0,0,0,0.6)); }
.track-card.himmel::before { background: linear-gradient(120deg, transparent 30%, rgba(230,57,70,0.2) 50%, transparent 70%); }
.track-card.himmel:hover { border-color: var(--himmel); box-shadow: 0 12px 40px rgba(230,57,70,0.35); }
.track-card[data-song="luftballons"] .tc-art {
  background: linear-gradient(180deg, #0b1030 0%, #1a2b52 45%, #5a4a6a 78%, #c9744a 100%);
}
.track-card[data-song="luftballons"] .tc-art::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 6px 8px at 20% 60%, #e63946 0 70%, transparent 72%),
    radial-gradient(ellipse 5px 7px at 38% 42%, #e63946 0 70%, transparent 72%),
    radial-gradient(ellipse 7px 9px at 58% 70%, #ef765a 0 70%, transparent 72%),
    radial-gradient(ellipse 5px 7px at 72% 34%, #e63946 0 70%, transparent 72%),
    radial-gradient(ellipse 6px 8px at 85% 58%, #e63946 0 70%, transparent 72%),
    radial-gradient(ellipse 4px 6px at 48% 24%, #ef765a 0 70%, transparent 72%);
  opacity: 0.9;
}
.track-card[data-song="luftballons"]:hover .tc-art::after { animation: ballonRise 3.5s ease-in infinite; }
@keyframes ballonRise { from { transform: translateY(0); } to { transform: translateY(-16px); } }
.track-card[data-song="luftballons"] .tc-title {
  font-family: 'Righteous', var(--f-display); letter-spacing: 0.01em; font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  color: transparent;
  background: linear-gradient(150deg, #cfe2ff, #f5ecd6 45%, #e63946);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="luftballons"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(230,57,70,0.55)); }

/* — karte I: alpen — bayrische rauten + bergsilhouette + bierzelt-glühen */
.track-card.alpen { border-color: rgba(59,125,216,0.35); background: linear-gradient(180deg, rgba(59,125,216,0.05), rgba(0,0,0,0.6)); }
.track-card.alpen::before { background: linear-gradient(120deg, transparent 30%, rgba(232,172,74,0.2) 50%, transparent 70%); }
.track-card.alpen:hover { border-color: var(--alpen); box-shadow: 0 12px 40px rgba(59,125,216,0.35); }
.track-card[data-song="hulapalu"] .tc-art {
  background:
    linear-gradient(180deg, rgba(232,172,74,0.3), transparent 40%),
    conic-gradient(from 45deg at 50% 50%, #3b7dd8 0 25%, #f0f4ff 25% 50%, #3b7dd8 50% 75%, #f0f4ff 75%),
    linear-gradient(180deg, #0b1836, #14315e);
  background-size: 100% 100%, 30px 30px, 100% 100%;
  background-blend-mode: normal, soft-light, normal;
}
.track-card[data-song="hulapalu"] .tc-art::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background:
    linear-gradient(135deg, transparent 46%, #0c1428 46% 54%, transparent 54%) 0 100%/56px 100%,
    linear-gradient(45deg, transparent 46%, #0c1428 46% 54%, transparent 54%) 0 100%/56px 100%;
  background-color: #0c1428;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.track-card[data-song="hulapalu"] .tc-title {
  font-family: 'Alfa Slab One', var(--f-display); letter-spacing: 0; font-size: clamp(1.8rem, 4.2vw, 3rem);
  color: transparent;
  background: linear-gradient(150deg, #3b7dd8, #ffffff 55%, #e8ac4a);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="hulapalu"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(59,125,216,0.55)); }

/* — karte J: arena — bühnen-spotlight + stomp-shockwave + champion-gold */
.track-card.arena { border-color: rgba(232,194,104,0.35); background: linear-gradient(180deg, rgba(206,42,46,0.06), rgba(0,0,0,0.6)); }
.track-card.arena::before { background: linear-gradient(120deg, transparent 30%, rgba(232,194,104,0.22) 50%, transparent 70%); }
.track-card.arena:hover { border-color: var(--arena); box-shadow: 0 12px 40px rgba(232,194,104,0.35); }
.track-card[data-song="wewillrockyou"] .tc-art {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.28), transparent 46%),
    radial-gradient(ellipse at 50% 128%, rgba(206,42,46,0.4), transparent 60%),
    linear-gradient(180deg, #0c0a0e 0%, #161018 60%, #241016 100%);
}
.track-card[data-song="wewillrockyou"] .tc-art::after {
  content: ''; position: absolute; left: 50%; bottom: -30%; width: 160%; height: 90%;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, transparent 60%, rgba(232,194,104,0.35) 62%, transparent 64%),
    radial-gradient(closest-side, transparent 72%, rgba(206,42,46,0.3) 74%, transparent 76%);
  opacity: 0.8;
}
.track-card[data-song="wewillrockyou"] .tc-title {
  font-family: 'Archivo Black', var(--f-display); letter-spacing: 0; font-size: clamp(1.7rem, 3.8vw, 2.8rem); line-height: 1.05;
  color: transparent;
  background: linear-gradient(160deg, #fff6dd, #e8c268 55%, #b5451f);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="wewillrockyou"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(232,194,104,0.55)); }

/* — karte K: sommer — seeufer-sonnenuntergang + sonnenscheibe */
.track-card[data-song="allsummer"] .tc-art {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(255,158,74,0.55), transparent 58%),
    radial-gradient(ellipse at 50% 34%, rgba(255,206,138,0.28), transparent 52%),
    linear-gradient(180deg, #2a1a48 0%, #6e356a 42%, #e26f4c 76%, #ffab5a 100%);
}
.track-card[data-song="allsummer"] .tc-art::after {
  content: ''; position: absolute; left: 50%; bottom: 6%; width: 46%; height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,244,214,0.9) 0%, rgba(255,180,108,0.6) 34%, transparent 62%);
  opacity: 0.85;
}
.track-card[data-song="allsummer"] .tc-title {
  font-family: 'Ultra', var(--f-display); letter-spacing: 0; font-size: clamp(1.6rem, 3.5vw, 2.5rem); line-height: 1.06;
  color: transparent;
  background: linear-gradient(160deg, #fff3dc, #ffce8a 48%, #ff8a52);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="allsummer"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(255,158,74,0.6)); }

/* — karte L: freunde — warme konstellation aus lichtern */
.track-card[data-song="littlehelp"] .tc-art {
  background:
    radial-gradient(circle at 30% 30%, rgba(246,169,76,0.5), transparent 26%),
    radial-gradient(circle at 68% 42%, rgba(255,122,168,0.42), transparent 24%),
    radial-gradient(circle at 46% 68%, rgba(176,106,214,0.4), transparent 30%),
    radial-gradient(ellipse at 50% 120%, rgba(246,169,76,0.35), transparent 62%),
    linear-gradient(180deg, #170c22 0%, #2a1436 55%, #3c1c34 100%);
}
.track-card[data-song="littlehelp"] .tc-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,240,220,0.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 68% 42%, rgba(255,240,220,0.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 46% 68%, rgba(255,240,220,0.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 74%, rgba(255,240,220,0.8) 0 1.2px, transparent 2px),
    radial-gradient(circle at 18% 62%, rgba(255,240,220,0.8) 0 1.2px, transparent 2px);
  opacity: 0.9;
}
.track-card[data-song="littlehelp"] .tc-title {
  font-family: 'Fraunces', var(--f-display); font-weight: 900; letter-spacing: 0; font-size: clamp(1.55rem, 3.3vw, 2.4rem); line-height: 1.06;
  color: transparent;
  background: linear-gradient(160deg, #fff2e0, #f6a94c 46%, #ff7aa8 80%, #b06ad6);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="littlehelp"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(246,169,76,0.6)); }

/* — karte M: ruin — asche & ember über zerborstener silhouette */
.track-card[data-song="pompeii"] .tc-art {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(232,120,60,0.5), transparent 58%),
    radial-gradient(ellipse at 50% 20%, rgba(74,138,150,0.22), transparent 60%),
    linear-gradient(180deg, #0c1418 0%, #16242a 58%, #241a16 100%);
}
.track-card[data-song="pompeii"] .tc-art::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(8,10,12,0.85));
  clip-path: polygon(0 60%, 12% 40%, 20% 62%, 33% 30%, 44% 58%, 56% 36%, 68% 60%, 80% 34%, 90% 58%, 100% 44%, 100% 100%, 0 100%);
}
.track-card[data-song="pompeii"] .tc-title {
  font-family: 'Cormorant Garamond', var(--f-display); font-weight: 700; letter-spacing: 0.01em; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02;
  color: transparent; background: linear-gradient(160deg, #eef0f0, #cdd2d6 30%, #e8783c 82%);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="pompeii"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(232,120,60,0.6)); }

/* — karte N: metall — smaragd-beams über stahl-dunkel */
.track-card[data-song="whiskey"] .tc-art {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(46,224,130,0.4), transparent 46%),
    radial-gradient(ellipse at 50% 128%, rgba(245,170,60,0.32), transparent 60%),
    linear-gradient(180deg, #05100c 0%, #0a1a14 60%, #04120a 100%);
}
.track-card[data-song="whiskey"] .tc-art::after {
  content: ''; position: absolute; left: 50%; top: -10%; width: 130%; height: 120%; transform: translateX(-50%);
  background:
    linear-gradient(75deg, transparent 46%, rgba(46,224,130,0.18) 49%, transparent 52%),
    linear-gradient(105deg, transparent 46%, rgba(46,224,130,0.14) 49%, transparent 52%);
  opacity: 0.9;
}
.track-card[data-song="whiskey"] .tc-title {
  font-family: 'Metal Mania', var(--f-display); letter-spacing: 0; font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.05;
  color: transparent; background: linear-gradient(160deg, #eafff4, #2ee082 55%, #f5aa3c);
  -webkit-background-clip: text; background-clip: text;
}
.track-card[data-song="whiskey"]:hover .tc-title { text-shadow: none; filter: drop-shadow(0 0 14px rgba(46,224,130,0.6)); }

/* — karte O: comic — ben-day-raster + pop-farben */
.track-card[data-song="lassereden"] .tc-art {
  background:
    radial-gradient(circle at 22% 26%, rgba(255,45,130,0.5), transparent 32%),
    radial-gradient(circle at 78% 68%, rgba(0,180,230,0.42), transparent 34%),
    radial-gradient(rgba(255,214,10,0.5) 1.4px, transparent 1.6px) 0 0 / 12px 12px,
    linear-gradient(180deg, #141018 0%, #1c1420 100%);
}
.track-card[data-song="lassereden"] .tc-title {
  font-family: 'Bangers', var(--f-display); letter-spacing: 0.02em; font-size: clamp(1.7rem, 3.8vw, 2.8rem); line-height: 1.02;
  color: transparent; background: linear-gradient(160deg, #fff2a8, #ffd60a 45%, #ff2d82);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(2px 2px 0 rgba(10,10,14,0.9));
}
.track-card[data-song="lassereden"]:hover .tc-title { filter: drop-shadow(2px 2px 0 rgba(10,10,14,0.9)) drop-shadow(0 0 12px rgba(255,214,10,0.6)); }

/* — karte Q: baywatch — sonnenstrand, türkis-ozean, rote boje, sonnen-glitzer */
.track-card[data-song="baywatch"] .tc-art {
  background:
    radial-gradient(circle at 74% 20%, rgba(255,210,63,0.6), transparent 30%),
    radial-gradient(circle at 26% 78%, rgba(255,74,74,0.4), transparent 30%),
    radial-gradient(circle at 50% 120%, rgba(244,226,176,0.5), transparent 46%),
    linear-gradient(180deg, #1f8fd6 0%, #18b9d4 44%, #0c7794 70%, #e9d6aa 100%);
}
.track-card[data-song="baywatch"] .tc-title {
  font-family: 'Titan One', var(--f-display); letter-spacing: 0.005em; font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.03;
  color: transparent; background: linear-gradient(160deg, #fff6e6, #ffd23f 42%, #ff4a4a);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(2px 2px 0 rgba(6,48,58,0.85));
}
.track-card[data-song="baywatch"]:hover .tc-title { filter: drop-shadow(2px 2px 0 rgba(6,48,58,0.85)) drop-shadow(0 0 12px rgba(255,210,63,0.65)); }

/* — karte Q: pulp fiction — 50s-neon-diner, schachbrett + neon-röhren */
.track-card[data-song="pulpfiction"] .tc-art {
  background:
    radial-gradient(circle at 16% 20%, rgba(255,46,76,0.45), transparent 34%),
    radial-gradient(circle at 86% 22%, rgba(46,197,197,0.4), transparent 34%),
    repeating-linear-gradient(135deg, rgba(245,230,200,0.05) 0 14px, rgba(20,10,16,0.05) 14px 28px),
    linear-gradient(180deg, #1c0d16 0%, #120810 62%, #0a0409 100%);
}
.track-card[data-song="pulpfiction"] .tc-title {
  font-family: 'Monoton', var(--f-display); letter-spacing: 0.01em; font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.12;
  color: var(--diner-cream, #f5e6c8);
  text-shadow: 0 0 6px rgba(255,46,76,0.9), 0 0 20px rgba(255,46,76,0.55), 0 0 40px rgba(46,197,197,0.3);
}
.track-card[data-song="pulpfiction"]:hover .tc-title { text-shadow: 0 0 8px rgba(255,46,76,1), 0 0 26px rgba(255,46,76,0.7), 0 0 50px rgba(46,197,197,0.45); }

/* — karte R: dein ist mein ganzes herz — samt-rot mit herz-glühen */
.track-card[data-song="herzkunze"] .tc-art {
  background:
    radial-gradient(circle at 50% 42%, rgba(230,59,90,0.5), transparent 46%),
    radial-gradient(circle at 22% 84%, rgba(255,200,150,0.28), transparent 40%),
    radial-gradient(circle at 82% 20%, rgba(255,138,160,0.32), transparent 40%),
    linear-gradient(180deg, #2a0f1e 0%, #3d1220 58%, #160710 100%);
}
.track-card[data-song="herzkunze"] .tc-title {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif; font-style: italic; font-weight: 700;
  letter-spacing: 0.005em; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.06;
  color: transparent; background: linear-gradient(160deg, #ffeee6, #ffc896 42%, #e63b5a);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 10px rgba(230,59,90,0.5));
}
.track-card[data-song="herzkunze"]:hover .tc-title { filter: drop-shadow(0 2px 10px rgba(230,59,90,0.5)) drop-shadow(0 0 14px rgba(255,138,160,0.6)); }

/* — karte S: jodelautomat — messing/holz-uhrwerk, zahnrad-ringe */
.track-card[data-song="automat"] .tc-art {
  background:
    radial-gradient(circle at 50% 46%, rgba(217,164,65,0.42), transparent 40%),
    repeating-radial-gradient(circle at 50% 46%, rgba(245,232,200,0.06) 0 6px, transparent 6px 13px),
    radial-gradient(circle at 84% 80%, rgba(201,123,74,0.32), transparent 42%),
    linear-gradient(180deg, #3c2616 0%, #2a1a0e 60%, #160d06 100%);
}
.track-card[data-song="automat"] .tc-title {
  font-family: 'Rye', 'Alfa Slab One', serif; letter-spacing: -0.01em; font-size: clamp(1.3rem, 2.7vw, 2.0rem); line-height: 1.05;
  color: transparent; background: linear-gradient(160deg, #f5e8c8, #d9a441 44%, #b3742a);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(1px 2px 0 rgba(22,13,6,0.8));
}
.track-card[data-song="automat"]:hover .tc-title { filter: drop-shadow(1px 2px 0 rgba(22,13,6,0.8)) drop-shadow(0 0 12px rgba(217,164,65,0.6)); }

/* — karte T: jupiter calling — deep space, planet-glühen + sternenstaub */
.track-card[data-song="kosmos"] .tc-art {
  background:
    radial-gradient(circle at 72% 32%, rgba(240,176,90,0.5), transparent 26%),
    radial-gradient(circle at 72% 32%, rgba(90,220,255,0.22), transparent 42%),
    radial-gradient(1.2px 1.2px at 20% 30%, rgba(234,250,255,0.9), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(150,120,255,0.9), transparent),
    radial-gradient(1.4px 1.4px at 82% 78%, rgba(234,250,255,0.8), transparent),
    radial-gradient(1px 1px at 30% 85%, rgba(90,220,255,0.9), transparent),
    linear-gradient(180deg, #181038 0%, #0d0722 60%, #05030f 100%);
}
.track-card[data-song="kosmos"] .tc-title {
  font-family: 'Orbitron', 'Archivo Black', sans-serif; font-weight: 900; letter-spacing: 0.01em; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.06;
  color: transparent; background: linear-gradient(160deg, #eafaff, #5adcff 45%, #9678ff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(90,220,255,0.5));
}
.track-card[data-song="kosmos"]:hover .tc-title { filter: drop-shadow(0 0 12px rgba(90,220,255,0.5)) drop-shadow(0 0 16px rgba(150,120,255,0.6)); }

/* — karte U: java life — terminal-schwarz, grüner code-regen + java-orange */
.track-card[data-song="javalife"] .tc-art {
  background:
    repeating-linear-gradient(90deg, rgba(74,240,122,0.05) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg, rgba(74,240,122,0.05) 0 1px, transparent 1px 15px),
    radial-gradient(circle at 78% 30%, rgba(231,122,20,0.4), transparent 32%),
    radial-gradient(circle at 20% 80%, rgba(74,240,122,0.22), transparent 40%),
    linear-gradient(180deg, #04120a 0%, #030a07 60%, #010604 100%);
}
.track-card[data-song="javalife"] .tc-title {
  font-family: 'JetBrains Mono', monospace; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.02;
  color: transparent; background: linear-gradient(160deg, #dcffe6, #4af07a 46%, #e77a14);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(74,240,122,0.5));
}
.track-card[data-song="javalife"]:hover .tc-title { filter: drop-shadow(0 0 10px rgba(74,240,122,0.5)) drop-shadow(0 0 14px rgba(231,122,20,0.6)); }

/* — karte V: node.js — dunkles server-grün, hexagon-netz-glühen */
.track-card[data-song="nodejs"] .tc-art {
  background:
    radial-gradient(circle at 30% 40%, rgba(131,205,41,0.34), transparent 30%),
    radial-gradient(circle at 72% 66%, rgba(90,225,200,0.28), transparent 28%),
    radial-gradient(circle at 52% 52%, rgba(131,205,41,0.18), transparent 44%),
    linear-gradient(180deg, #0a1a0e 0%, #060f08 60%, #030704 100%);
}
.track-card[data-song="nodejs"] .tc-title {
  font-family: 'Chakra Petch', 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.01em; font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.04;
  color: transparent; background: linear-gradient(160deg, #e0ffd2, #83cd29 46%, #5ae1c8);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(131,205,41,0.5));
}
.track-card[data-song="nodejs"]:hover .tc-title { filter: drop-shadow(0 0 10px rgba(131,205,41,0.5)) drop-shadow(0 0 14px rgba(90,225,200,0.6)); }

/* — karte W: und wenn ein lied — twilight open-air, warmes glühen von der bühne */
.track-card[data-song="lied"] .tc-art {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(245,196,81,0.42), transparent 58%),
    radial-gradient(circle at 26% 30%, rgba(255,182,150,0.24), transparent 40%),
    radial-gradient(circle at 78% 22%, rgba(240,150,70,0.2), transparent 42%),
    linear-gradient(180deg, #141a3c 0%, #37294a 42%, #5a3238 74%, #20140f 100%);
}
.track-card[data-song="lied"]:hover .tc-art { animation: liedGlow 4.5s ease-in-out infinite; }
@keyframes liedGlow { 0%,100%{ filter: brightness(1) saturate(1); } 50%{ filter: brightness(1.12) saturate(1.15); } }
.track-card[data-song="lied"] .tc-title {
  font-family: 'Spectral', 'Fraunces', serif; font-weight: 700; letter-spacing: 0.005em; font-size: clamp(1.6rem, 3.8vw, 2.8rem); line-height: 1.02;
  color: transparent; background: linear-gradient(160deg, #fff4dc, #f5c451 48%, #f09646 82%, #ffb696);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(245,196,81,0.5));
}
.track-card[data-song="lied"]:hover .tc-title { filter: drop-shadow(0 2px 10px rgba(240,150,70,0.5)) drop-shadow(0 0 14px rgba(255,182,150,0.6)); }

/* — karte X: looking for freedom — nachthimmel über der mauer, freiheits-gold bricht durch */
.track-card[data-song="freiheit"] .tc-art {
  background:
    radial-gradient(ellipse at 50% 108%, rgba(255,210,74,0.4), transparent 52%),
    radial-gradient(circle at 22% 24%, rgba(90,186,255,0.22), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,92,120,0.18), transparent 40%),
    linear-gradient(180deg, #080d20 0%, #111938 46%, #25203a 72%, #2c1d1a 100%);
}
.track-card[data-song="freiheit"]:hover .tc-art { animation: freiGlow 4s ease-in-out infinite; }
@keyframes freiGlow { 0%,100%{ filter: brightness(1) saturate(1); } 50%{ filter: brightness(1.14) saturate(1.16); } }
.track-card[data-song="freiheit"] .tc-title {
  font-family: 'Oswald', 'Anton', sans-serif; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; font-size: clamp(1.55rem, 3.6vw, 2.7rem); line-height: 1.0;
  color: transparent; background: linear-gradient(160deg, #fff2d0, #ffd24a 52%, #e0a828 84%, #5abaff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(255,210,74,0.5));
}
.track-card[data-song="freiheit"]:hover .tc-title { filter: drop-shadow(0 2px 10px rgba(255,210,74,0.5)) drop-shadow(0 0 14px rgba(90,186,255,0.6)); }

/* — karte Y: never give up — raketen-nacht, ignition-orange thrust zum mars */
.track-card[data-song="grind"] .tc-art {
  background:
    radial-gradient(ellipse at 50% 118%, rgba(255,106,43,0.42), transparent 54%),
    radial-gradient(circle at 50% 8%, rgba(255,66,58,0.28), transparent 34%),
    radial-gradient(circle at 80% 40%, rgba(79,224,255,0.14), transparent 40%),
    linear-gradient(180deg, #060609 0%, #0e0a10 58%, #1c0d09 100%);
}
.track-card[data-song="grind"]:hover .tc-art { animation: grindGlow 3s ease-in-out infinite; }
@keyframes grindGlow { 0%,100%{ filter: brightness(1) saturate(1); } 50%{ filter: brightness(1.16) saturate(1.2); } }
.track-card[data-song="grind"] .tc-title {
  font-family: 'Teko', 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 3.3rem); line-height: 0.94;
  color: transparent; background: linear-gradient(160deg, #fff0dc, #ff6a2b 54%, #ff423a);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(255,106,43,0.5));
}
.track-card[data-song="grind"]:hover .tc-title { filter: drop-shadow(0 2px 10px rgba(255,66,58,0.5)) drop-shadow(0 0 14px rgba(79,224,255,0.55)); }

/* — karte Z: freunde fürs leben — 90er röhren-tv, warmes bernstein-glühen */
.track-card[data-song="serie"] .tc-art {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(240,166,55,0.34), transparent 58%),
    radial-gradient(circle at 22% 78%, rgba(99,217,232,0.18), transparent 42%),
    radial-gradient(circle at 80% 22%, rgba(255,79,163,0.16), transparent 40%),
    repeating-linear-gradient(180deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #241a12 0%, #140f0d 60%, #080706 100%);
}
.track-card[data-song="serie"]:hover .tc-art { animation: serieFlicker 3.2s steps(6) infinite; }
@keyframes serieFlicker { 0%,100%{ filter: brightness(1); } 45%{ filter: brightness(1.12) saturate(1.1); } 55%{ filter: brightness(0.96); } }
.track-card[data-song="serie"] .tc-title {
  font-family: 'Bevan', 'Alfa Slab One', serif; font-weight: 400; letter-spacing: 0.005em; font-size: clamp(1.35rem, 3.1vw, 2.25rem); line-height: 1.08;
  color: transparent; background: linear-gradient(160deg, #fff2d8, #f0a637 52%, #c97f24);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(240,166,55,0.5)) drop-shadow(1.5px 0 0 rgba(255,79,163,0.3));
}
.track-card[data-song="serie"]:hover .tc-title { filter: drop-shadow(0 2px 10px rgba(240,166,55,0.55)) drop-shadow(0 0 14px rgba(99,217,232,0.5)); }


/* ============================================================
   WELT AA — DIE HESSE KOMME (theme-hesse)
   Rheingau-dämmerung: bembel-steinzeug + kobalt-raute + äppler-gold · anton
   ============================================================ */
:root { --hesse: #2f5fd0; --hesse-gold: #d8b642; --hesse-stein: #8e9aa6; --hesse-creme: #fff6e2; }
body.theme-hesse { --accent: #2f5fd0; --accent-rgb: 47, 95, 208; --f-display: 'Anton', 'Archivo Black', sans-serif; }
body.theme-hesse .huge, body.theme-hesse .wave-word, body.theme-hesse .burst-center, body.theme-hesse .climax .bang,
body.theme-hesse .sl-bottom, body.theme-hesse .trio-line, body.theme-hesse .endcard-cta,
body.theme-hesse .name-big, body.theme-hesse .qa-a { font-weight: 400; letter-spacing: 0.005em; }
body.theme-hesse #ticker { background: linear-gradient(90deg, var(--hesse), var(--hesse-creme) 52%, var(--hesse-gold)); color: #101820; letter-spacing: 0.1em; }
body.theme-hesse #progress { background: linear-gradient(90deg, var(--hesse-stein), var(--hesse) 55%, var(--hesse-gold)); box-shadow: 0 0 12px rgba(47,95,208,0.7); }
body.theme-hesse .dot { background: var(--hesse-gold); box-shadow: 0 0 8px var(--hesse-gold); }
body.theme-hesse #theme-tag { color: var(--hesse-gold); text-shadow: 0 0 10px rgba(216,182,66,0.6); }
body.theme-hesse #hud { color: rgba(255,246,226,0.85); }
body.theme-hesse #controls button:hover { border-color: var(--hesse-gold); color: var(--hesse-gold); box-shadow: 0 0 12px rgba(216,182,66,0.5); }
body.theme-hesse .qa-q { color: var(--hesse-stein); }
body.theme-hesse .q-mark { color: var(--hesse-gold); }
body.theme-hesse #redwash { background: var(--hesse); }
body.theme-hesse #shockwave { border-color: var(--hesse-gold); box-shadow: 0 0 60px var(--hesse-gold), inset 0 0 60px var(--hesse); }
body.theme-hesse .sl-bottom, body.theme-hesse .huge, body.theme-hesse .bu-line.bu-red, body.theme-hesse .anti-line.big,
body.theme-hesse .wave-word, body.theme-hesse .rain-word, body.theme-hesse .burst-center, body.theme-hesse .climax .bang,
body.theme-hesse .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, var(--hesse-creme), var(--hesse-gold) 48%, var(--hesse) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(47,95,208,0.5));
}
body.theme-hesse .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--hesse-gold); filter: drop-shadow(0 0 12px rgba(216,182,66,0.55)); }
body.theme-hesse .sl-bottom strong { color: var(--hesse-gold); -webkit-text-fill-color: var(--hesse-gold); }
body.theme-hesse .trio-line.hesse { color: var(--hesse-gold); text-shadow: 0 0 36px rgba(216,182,66,0.6); }
body.theme-hesse .trio-line.creme { color: var(--hesse-creme); text-shadow: 0 0 26px rgba(255,246,226,0.45); }
body.theme-hesse .scene-stamp.active .bio-h .stamp.hesse { color: var(--hesse-gold); text-shadow: 0 0 36px rgba(216,182,66,0.55); }
body.theme-hesse .scene-stamp.active .bio-h .stamp.creme { color: var(--hesse-creme); }
.trio-line.hesse { color: var(--hesse-gold); }
.trio-line.creme { color: var(--hesse-creme); }
body.theme-hesse.kick #world { animation: kickHesse 0.22s ease-out; }
@keyframes kickHesse { 0%{transform:scale(1);} 45%{transform:scale(1.01) translateY(-0.3%); filter:brightness(1.12) saturate(1.12);} 100%{transform:scale(1); filter:none;} }

/* karte Seite AA — steinzeug mit kobalt-raute */
.track-card[data-song="hesse"] .tc-art {
  background:
    radial-gradient(ellipse at 50% 78%, rgba(216,182,66,0.26), transparent 56%),
    radial-gradient(circle at 76% 26%, rgba(47,95,208,0.26), transparent 46%),
    repeating-linear-gradient(45deg, rgba(47,95,208,0.16) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, rgba(47,95,208,0.16) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #33414f 0%, #202b34 62%, #141b22 100%);
}
.track-card[data-song="hesse"]:hover .tc-art { animation: hesseGlaze 4s ease-in-out infinite; }
@keyframes hesseGlaze { 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.14) saturate(1.15); } }
.track-card[data-song="hesse"] .tc-title {
  font-family: 'Anton', 'Archivo Black', sans-serif; font-weight: 400; letter-spacing: 0.005em;
  font-size: clamp(1.35rem, 3.1vw, 2.25rem); line-height: 1.06;
  color: transparent; background: linear-gradient(160deg, #fff6e2, #d8b642 50%, #2f5fd0);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(47,95,208,0.5));
}
.track-card[data-song="hesse"]:hover .tc-title { filter: drop-shadow(0 2px 10px rgba(216,182,66,0.55)) drop-shadow(0 0 14px rgba(47,95,208,0.5)); }


/* climax/qa/endcard in welt-farben statt im rot/cyan-standard */
body.theme-hesse .climax .bang.b2, body.theme-hesse .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-hesse .climax-sub, body.theme-hesse .cx-sub { color: var(--hesse-gold); }
body.theme-hesse .qa-a { -webkit-text-fill-color: transparent; }
body.theme-hesse .term-body .out.cyan { color: var(--hesse-stein); }
body.theme-hesse .term-body .out.green { color: var(--hesse-gold); }
body.theme-hesse .chart-bar .bar.red { background: linear-gradient(90deg, var(--hesse-stein), #6b7684); }
body.theme-hesse .chart-bar .bar.cyan { background: linear-gradient(90deg, var(--hesse), #5a86e6); }
body.theme-hesse .chart-bar .bar.green { background: linear-gradient(90deg, var(--hesse-gold), #f0d488); }
body.theme-hesse .burst-w { color: var(--hesse-stein); }
body.theme-hesse .bm-row { color: var(--hesse-gold); opacity: 0.9; }


/* ============================================================
   WELT AB — VIVA COLONIA (theme-koeln)
   Karnevalsnacht: kölsch-rot + weiss + kronen-gold · lilita one
   ============================================================ */
:root { --koeln: #e2001a; --koeln-gold: #f6c850; --koeln-weiss: #ffffff; --koeln-nacht: #12162e; }
body.theme-koeln { --accent: #e2001a; --accent-rgb: 226, 0, 26; --f-display: 'Lilita One', 'Titan One', sans-serif; }
body.theme-koeln .huge, body.theme-koeln .wave-word, body.theme-koeln .burst-center, body.theme-koeln .climax .bang,
body.theme-koeln .sl-bottom, body.theme-koeln .trio-line, body.theme-koeln .endcard-cta,
body.theme-koeln .name-big, body.theme-koeln .qa-a { font-weight: 400; letter-spacing: 0.01em; }
body.theme-koeln #ticker { background: linear-gradient(90deg, var(--koeln), var(--koeln-weiss) 50%, var(--koeln-gold)); color: #24060c; letter-spacing: 0.1em; }
body.theme-koeln #progress { background: linear-gradient(90deg, var(--koeln-gold), var(--koeln) 55%, var(--koeln-weiss)); box-shadow: 0 0 12px rgba(226,0,26,0.7); }
body.theme-koeln .dot { background: var(--koeln-gold); box-shadow: 0 0 8px var(--koeln-gold); }
body.theme-koeln #theme-tag { color: var(--koeln-gold); text-shadow: 0 0 10px rgba(246,200,80,0.6); }
body.theme-koeln #hud { color: rgba(255,255,255,0.86); }
body.theme-koeln #controls button:hover { border-color: var(--koeln-gold); color: var(--koeln-gold); box-shadow: 0 0 12px rgba(246,200,80,0.5); }
body.theme-koeln .qa-q { color: var(--koeln-gold); }
body.theme-koeln .q-mark { color: var(--koeln); }
body.theme-koeln #redwash { background: var(--koeln); }
body.theme-koeln #shockwave { border-color: var(--koeln-gold); box-shadow: 0 0 60px var(--koeln-gold), inset 0 0 60px var(--koeln); }
body.theme-koeln .sl-bottom, body.theme-koeln .huge, body.theme-koeln .bu-line.bu-red, body.theme-koeln .anti-line.big,
body.theme-koeln .wave-word, body.theme-koeln .rain-word, body.theme-koeln .burst-center, body.theme-koeln .climax .bang,
body.theme-koeln .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, var(--koeln-weiss), var(--koeln-gold) 46%, var(--koeln) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(226,0,26,0.55));
}
body.theme-koeln .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--koeln-gold); filter: drop-shadow(0 0 12px rgba(246,200,80,0.55)); }
body.theme-koeln .sl-bottom strong { color: var(--koeln-gold); -webkit-text-fill-color: var(--koeln-gold); }
body.theme-koeln .climax .bang.b2, body.theme-koeln .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-koeln .climax-sub, body.theme-koeln .cx-sub { color: var(--koeln-gold); }
body.theme-koeln .qa-a { -webkit-text-fill-color: transparent; }
body.theme-koeln .term-body .out.cyan { color: var(--koeln-weiss); }
body.theme-koeln .term-body .out.green { color: var(--koeln-gold); }
body.theme-koeln .chart-bar .bar.red { background: linear-gradient(90deg, #7a2b36, #a5414f); }
body.theme-koeln .chart-bar .bar.cyan { background: linear-gradient(90deg, var(--koeln), #ff5566); }
body.theme-koeln .chart-bar .bar.green { background: linear-gradient(90deg, var(--koeln-gold), #ffe6a8); }
body.theme-koeln .burst-w { color: var(--koeln-weiss); opacity: 0.85; }
body.theme-koeln .bm-row { color: var(--koeln-gold); opacity: 0.9; }
body.theme-koeln .trio-line.koeln { color: var(--koeln); text-shadow: 0 0 36px rgba(226,0,26,0.65); }
body.theme-koeln .trio-line.weiss { color: var(--koeln-weiss); text-shadow: 0 0 26px rgba(255,255,255,0.5); }
body.theme-koeln .scene-stamp.active .bio-h .stamp.koeln { color: var(--koeln); text-shadow: 0 0 36px rgba(226,0,26,0.6); }
body.theme-koeln .scene-stamp.active .bio-h .stamp.weiss { color: var(--koeln-weiss); }
.trio-line.koeln { color: var(--koeln); }
.trio-line.weiss { color: var(--koeln-weiss); }
body.theme-koeln.kick #world { animation: kickKoeln 0.22s ease-out; }
@keyframes kickKoeln { 0%{transform:scale(1);} 45%{transform:scale(1.012) translateY(-0.4%); filter:brightness(1.16) saturate(1.2);} 100%{transform:scale(1); filter:none;} }

/* karte Seite AB — rot-weisse fahne mit kronen-gold */
.track-card[data-song="koeln"] .tc-art {
  background:
    radial-gradient(ellipse at 50% 72%, rgba(246,200,80,0.28), transparent 56%),
    radial-gradient(circle at 20% 24%, rgba(226,0,26,0.34), transparent 48%),
    repeating-linear-gradient(90deg, rgba(226,0,26,0.20) 0 14px, rgba(255,255,255,0.14) 14px 28px),
    linear-gradient(180deg, #1b1f4a 0%, #2a1430 65%, #12162e 100%);
}
.track-card[data-song="koeln"]:hover .tc-art { animation: koelnJubel 2.6s ease-in-out infinite; }
@keyframes koelnJubel { 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.18) saturate(1.2); } }
.track-card[data-song="koeln"] .tc-title {
  font-family: 'Lilita One', 'Titan One', sans-serif; font-weight: 400; letter-spacing: 0.01em;
  font-size: clamp(1.35rem, 3.1vw, 2.25rem); line-height: 1.06;
  color: transparent; background: linear-gradient(160deg, #ffffff, #f6c850 48%, #e2001a);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(226,0,26,0.55));
}
.track-card[data-song="koeln"]:hover .tc-title { filter: drop-shadow(0 2px 10px rgba(246,200,80,0.6)) drop-shadow(0 0 14px rgba(226,0,26,0.55)); }


/* ============================================================
   WELT AC — KEIN KÖNIG (theme-koenig)
   Plakatwand bei Nacht: plakat-rot + creme + asphalt · staatliches
   ============================================================ */
:root { --koenig: #d42a24; --koenig-creme: #f2e9d8; --koenig-asphalt: #14120f; --koenig-bernstein: #f0c46e; }
body.theme-koenig { --accent: #d42a24; --accent-rgb: 212, 42, 36; --f-display: 'Staatliches', 'Oswald', sans-serif; }
body.theme-koenig .huge, body.theme-koenig .wave-word, body.theme-koenig .burst-center, body.theme-koenig .climax .bang,
body.theme-koenig .sl-bottom, body.theme-koenig .trio-line, body.theme-koenig .endcard-cta,
body.theme-koenig .name-big, body.theme-koenig .qa-a { font-weight: 400; letter-spacing: 0.02em; }
body.theme-koenig #ticker { background: linear-gradient(90deg, var(--koenig), var(--koenig-creme) 55%, var(--koenig-bernstein)); color: #1a0806; letter-spacing: 0.1em; }
body.theme-koenig #progress { background: linear-gradient(90deg, var(--koenig-creme), var(--koenig) 60%, var(--koenig-bernstein)); box-shadow: 0 0 12px rgba(212,42,36,0.7); }
body.theme-koenig .dot { background: var(--koenig); box-shadow: 0 0 8px var(--koenig); }
body.theme-koenig #theme-tag { color: var(--koenig-bernstein); text-shadow: 0 0 10px rgba(240,196,110,0.55); }
body.theme-koenig #hud { color: rgba(242,233,216,0.85); }
body.theme-koenig #controls button:hover { border-color: var(--koenig); color: var(--koenig-creme); box-shadow: 0 0 12px rgba(212,42,36,0.5); }
body.theme-koenig .qa-q { color: var(--koenig-bernstein); }
body.theme-koenig .q-mark { color: var(--koenig); }
body.theme-koenig #redwash { background: var(--koenig); }
body.theme-koenig #shockwave { border-color: var(--koenig-creme); box-shadow: 0 0 60px var(--koenig-creme), inset 0 0 60px var(--koenig); }
body.theme-koenig .sl-bottom, body.theme-koenig .huge, body.theme-koenig .bu-line.bu-red, body.theme-koenig .anti-line.big,
body.theme-koenig .wave-word, body.theme-koenig .rain-word, body.theme-koenig .burst-center, body.theme-koenig .climax .bang,
body.theme-koenig .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(170deg, var(--koenig-creme), var(--koenig-bernstein) 42%, var(--koenig) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(212,42,36,0.5));
}
body.theme-koenig .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--koenig-creme); filter: drop-shadow(0 0 12px rgba(242,233,216,0.4)); }
body.theme-koenig .sl-bottom strong { color: var(--koenig-bernstein); -webkit-text-fill-color: var(--koenig-bernstein); }
body.theme-koenig .climax .bang.b2, body.theme-koenig .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-koenig .climax-sub, body.theme-koenig .cx-sub { color: var(--koenig-bernstein); }
body.theme-koenig .qa-a { -webkit-text-fill-color: transparent; }
body.theme-koenig .term-body .out.cyan { color: var(--koenig-creme); }
body.theme-koenig .term-body .out.green { color: var(--koenig-bernstein); }
body.theme-koenig .chart-bar .bar.red { background: linear-gradient(90deg, #5c3a37, #8a5450); }
body.theme-koenig .chart-bar .bar.cyan { background: linear-gradient(90deg, var(--koenig), #e8635c); }
body.theme-koenig .chart-bar .bar.green { background: linear-gradient(90deg, var(--koenig-bernstein), #fbe6bd); }
body.theme-koenig .burst-w { color: var(--koenig-creme); opacity: 0.8; }
body.theme-koenig .bm-row { color: var(--koenig-bernstein); opacity: 0.88; }
body.theme-koenig .trio-line.koenig { color: var(--koenig); text-shadow: 0 0 34px rgba(212,42,36,0.6); }
body.theme-koenig .trio-line.creme { color: var(--koenig-creme); text-shadow: 0 0 24px rgba(242,233,216,0.4); }
body.theme-koenig .scene-stamp.active .bio-h .stamp.koenig { color: var(--koenig); text-shadow: 0 0 34px rgba(212,42,36,0.55); }
body.theme-koenig .scene-stamp.active .bio-h .stamp.creme { color: var(--koenig-creme); }
.trio-line.koenig { color: var(--koenig); }
body.theme-koenig.kick #world { animation: kickKoenig 0.2s steps(2, end); }
@keyframes kickKoenig { 0%{transform:scale(1);} 50%{transform:scale(1.008) translateY(-0.3%); filter:contrast(1.1) brightness(1.1);} 100%{transform:scale(1); filter:none;} }

/* karte Seite AC — geklebte plakatschichten */
.track-card[data-song="koenig"] .tc-art {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(240,196,110,0.22), transparent 55%),
    linear-gradient(102deg, rgba(212,42,36,0.55) 0 32%, transparent 32% 36%, rgba(242,233,216,0.22) 36% 62%, transparent 62% 66%, rgba(212,42,36,0.32) 66% 100%),
    linear-gradient(180deg, #26231e 0%, #1a1815 60%, #100e0c 100%);
}
.track-card[data-song="koenig"]:hover .tc-art { animation: koenigKleben 3s steps(4) infinite; }
@keyframes koenigKleben { 0%,100%{ filter: contrast(1); } 50%{ filter: contrast(1.14) brightness(1.08); } }
.track-card[data-song="koenig"] .tc-title {
  font-family: 'Staatliches', 'Oswald', sans-serif; font-weight: 400; letter-spacing: 0.02em;
  font-size: clamp(1.35rem, 3.1vw, 2.25rem); line-height: 1.06;
  color: transparent; background: linear-gradient(160deg, #f2e9d8, #f0c46e 45%, #d42a24);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(212,42,36,0.5));
}
.track-card[data-song="koenig"]:hover .tc-title { filter: drop-shadow(0 2px 10px rgba(240,196,110,0.55)) drop-shadow(0 0 14px rgba(212,42,36,0.5)); }

/* ============================================================
   WELT AD — NICHT JEDER SAU HINTERHER (theme-sau)
   Moshpit von oben: pit-pink + hallenschwarz + bühnenlicht · rubik mono one
   Einziger welt-skin im katalog mit heissem pink als leitfarbe.
   ============================================================ */
:root { --sau: #ff5a8a; --sau-hell: #ffd7e4; --sau-schwarz: #0a080c; --sau-licht: #ffe2aa; }
body.theme-sau { --accent: #ff5a8a; --accent-rgb: 255, 90, 138; --f-display: 'Rubik Mono One', 'Archivo Black', sans-serif; }
/* Der climax besteht aus ZWEI zeilen: die erste traegt .lt, die zweite .bang.
   Eine regel nur auf .bang schrumpft darum nur die halbe ueberschrift und die
   erste zeile laeuft aus dem bild. Groesse gehoert an den container. */
body.theme-sau .climax-text { font-size: clamp(1.6rem, 8.2vw, 5.4rem); }
body.theme-sau .huge, body.theme-sau .wave-word, body.theme-sau .burst-center, body.theme-sau .climax .bang,
body.theme-sau .sl-bottom, body.theme-sau .trio-line, body.theme-sau .endcard-cta,
body.theme-sau .name-big, body.theme-sau .qa-a { font-weight: 400; letter-spacing: -0.01em; }
body.theme-sau #ticker { background: linear-gradient(90deg, var(--sau), var(--sau-hell) 50%, var(--sau-licht)); color: #16060d; letter-spacing: 0.09em; }
body.theme-sau #progress { background: linear-gradient(90deg, var(--sau-hell), var(--sau) 55%, var(--sau-licht)); box-shadow: 0 0 14px rgba(255,90,138,0.75); }
body.theme-sau .dot { background: var(--sau); box-shadow: 0 0 9px var(--sau); }
body.theme-sau #theme-tag { color: var(--sau-hell); text-shadow: 0 0 11px rgba(255,90,138,0.6); }
body.theme-sau #hud { color: rgba(255,215,228,0.85); }
body.theme-sau #controls button:hover { border-color: var(--sau); color: var(--sau-hell); box-shadow: 0 0 13px rgba(255,90,138,0.55); }
body.theme-sau .qa-q { color: var(--sau-licht); }
body.theme-sau .q-mark { color: var(--sau); }
body.theme-sau #redwash { background: var(--sau); }
body.theme-sau #shockwave { border-color: var(--sau); box-shadow: 0 0 64px var(--sau), inset 0 0 64px rgba(255,215,228,0.7); }
body.theme-sau .sl-bottom, body.theme-sau .huge, body.theme-sau .bu-line.bu-red, body.theme-sau .anti-line.big,
body.theme-sau .wave-word, body.theme-sau .rain-word, body.theme-sau .burst-center, body.theme-sau .climax .bang,
body.theme-sau .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, var(--sau-hell) 38%, var(--sau) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(255,90,138,0.55));
}
body.theme-sau .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--sau); filter: drop-shadow(0 0 13px rgba(255,90,138,0.5)); }
body.theme-sau .sl-bottom strong { color: var(--sau-licht); -webkit-text-fill-color: var(--sau-licht); }
body.theme-sau .climax .bang.b2, body.theme-sau .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-sau .climax-sub, body.theme-sau .cx-sub { color: var(--sau-licht); }
body.theme-sau .qa-a { -webkit-text-fill-color: transparent; }
body.theme-sau .term-body .out.cyan { color: var(--sau-hell); }
body.theme-sau .term-body .out.green { color: var(--sau-licht); }
body.theme-sau .chart-bar .bar.red { background: linear-gradient(90deg, #4a2733, #7d3f54); }
body.theme-sau .chart-bar .bar.cyan { background: linear-gradient(90deg, var(--sau), #ff9dbb); }
body.theme-sau .chart-bar .bar.green { background: linear-gradient(90deg, var(--sau-licht), #fff3d8); }
body.theme-sau .burst-w { color: var(--sau-hell); opacity: 0.82; }
body.theme-sau .bm-row { color: var(--sau-licht); opacity: 0.88; }
body.theme-sau .trio-line.sau { color: var(--sau); text-shadow: 0 0 36px rgba(255,90,138,0.6); }
body.theme-sau .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.42); }
body.theme-sau .scene-stamp.active .bio-h .stamp.sau { color: var(--sau); text-shadow: 0 0 36px rgba(255,90,138,0.6); }
body.theme-sau .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.sau { color: var(--sau); }
body.theme-sau .q-text .codeword {
  color: var(--sau); background: rgba(255,90,138,0.13);
  box-shadow: inset 0 0 0 1px rgba(255,90,138,0.32);
  text-shadow: 0 0 18px rgba(255,90,138,0.5);
}
/* der pit bebt: harter, versetzter stampf statt sanftem zoom */
body.theme-sau.kick #world { animation: kickSau 0.19s steps(2, end); }
@keyframes kickSau { 0%{transform:translate(0,0);} 50%{transform:translate(-0.5%, 0.7%) scale(1.012); filter:contrast(1.14) brightness(1.12);} 100%{transform:translate(0,0); filter:none;} }

/* karte Seite AD — pit von oben: kreisende masse um eine pinke mitte */
.track-card[data-song="sau"] .tc-art {
  background:
    radial-gradient(circle at 50% 58%, rgba(255,90,138,0.5) 0 9%, transparent 10% 17%, rgba(255,90,138,0.28) 17% 19%, transparent 20%),
    repeating-conic-gradient(from 0deg at 50% 58%, rgba(255,255,255,0.11) 0 3deg, transparent 3deg 9deg),
    linear-gradient(180deg, rgba(255,226,170,0.2) 0 12%, transparent 34%),
    linear-gradient(180deg, #1c0f16 0%, #120a10 55%, #0a080c 100%);
}
.track-card[data-song="sau"]:hover .tc-art { animation: sauKreisen 6s linear infinite; }
@keyframes sauKreisen { from { filter: hue-rotate(0deg) contrast(1); } 50% { filter: hue-rotate(-8deg) contrast(1.16) brightness(1.1); } to { filter: hue-rotate(0deg) contrast(1); } }
.track-card[data-song="sau"] .tc-title {
  font-family: 'Rubik Mono One', 'Archivo Black', sans-serif; font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 2.5vw, 1.7rem); line-height: 1.1;
  color: transparent; background: linear-gradient(158deg, #ffffff, #ffd7e4 40%, #ff5a8a);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(255,90,138,0.55));
}
.track-card[data-song="sau"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(255,215,228,0.55)) drop-shadow(0 0 15px rgba(255,90,138,0.55)); }

/* ============================================================
   WELT — theme-paradies · Michroma
   ============================================================ */
:root { --paradies: #a855ff; --paradies-hell: #e0ccff; --paradies-dunkel: #120a1e; }
body.theme-paradies { --accent: #a855ff; --accent-rgb: 168, 85, 255; --f-display: 'Michroma', sans-serif; }
/* Der climax besteht aus ZWEI zeilen: die erste traegt .lt, die zweite .bang.
   Eine regel nur auf .bang schrumpft darum nur die halbe ueberschrift und die
   erste zeile laeuft aus dem bild. Groesse gehoert an den container. */
body.theme-paradies .climax-text { font-size: clamp(1.5rem, 7.6vw, 5rem); }
body.theme-paradies .huge, body.theme-paradies .wave-word, body.theme-paradies .burst-center, body.theme-paradies .climax .bang,
body.theme-paradies .sl-bottom, body.theme-paradies .trio-line, body.theme-paradies .endcard-cta,
body.theme-paradies .name-big, body.theme-paradies .qa-a { font-weight: 400; }
body.theme-paradies #ticker { background: linear-gradient(90deg, var(--paradies), var(--paradies-hell) 55%, var(--paradies)); color: #120a1e; letter-spacing: 0.09em; }
body.theme-paradies #progress { background: linear-gradient(90deg, var(--paradies-hell), var(--paradies) 60%, var(--paradies-hell)); box-shadow: 0 0 13px rgba(168, 85, 255,0.7); }
body.theme-paradies .dot { background: var(--paradies); box-shadow: 0 0 9px var(--paradies); }
body.theme-paradies #theme-tag { color: var(--paradies-hell); text-shadow: 0 0 11px rgba(168, 85, 255,0.55); }
body.theme-paradies #hud { color: rgba(255,255,255,0.82); }
body.theme-paradies #controls button:hover { border-color: var(--paradies); color: var(--paradies-hell); box-shadow: 0 0 13px rgba(168, 85, 255,0.5); }
body.theme-paradies .qa-q { color: var(--paradies-hell); }
body.theme-paradies .q-mark { color: var(--paradies); }
body.theme-paradies #redwash { background: var(--paradies); }
body.theme-paradies #shockwave { border-color: var(--paradies); box-shadow: 0 0 60px var(--paradies), inset 0 0 60px rgba(168, 85, 255,0.6); }
body.theme-paradies .sl-bottom, body.theme-paradies .huge, body.theme-paradies .bu-line.bu-red, body.theme-paradies .anti-line.big,
body.theme-paradies .wave-word, body.theme-paradies .rain-word, body.theme-paradies .burst-center, body.theme-paradies .climax .bang,
body.theme-paradies .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, var(--paradies-hell) 40%, var(--paradies) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 15px rgba(168, 85, 255,0.5));
}
body.theme-paradies .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--paradies); filter: drop-shadow(0 0 12px rgba(168, 85, 255,0.45)); }
body.theme-paradies .sl-bottom strong { color: var(--paradies-hell); -webkit-text-fill-color: var(--paradies-hell); }
body.theme-paradies .climax .bang.b2, body.theme-paradies .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-paradies .climax-sub, body.theme-paradies .cx-sub { color: var(--paradies-hell); }
body.theme-paradies .qa-a { -webkit-text-fill-color: transparent; }
body.theme-paradies .q-text .codeword {
  color: var(--paradies); background: rgba(168, 85, 255,0.13);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 255,0.32);
  text-shadow: 0 0 18px rgba(168, 85, 255,0.5);
}
body.theme-paradies .term-body .out.cyan { color: var(--paradies-hell); }
body.theme-paradies .term-body .out.green { color: var(--paradies); }
body.theme-paradies .chart-bar .bar.red { background: linear-gradient(90deg, #3a3040, #6a5570); }
body.theme-paradies .chart-bar .bar.cyan { background: linear-gradient(90deg, var(--paradies), var(--paradies-hell)); }
body.theme-paradies .chart-bar .bar.green { background: linear-gradient(90deg, var(--paradies-hell), #ffffff); }
body.theme-paradies .burst-w { color: var(--paradies-hell); opacity: 0.82; }
body.theme-paradies .bm-row { color: var(--paradies-hell); opacity: 0.88; }
body.theme-paradies .trio-line.paradies { color: var(--paradies); text-shadow: 0 0 34px rgba(168, 85, 255,0.6); }
body.theme-paradies .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-paradies .scene-stamp.active .bio-h .stamp.paradies { color: var(--paradies); text-shadow: 0 0 34px rgba(168, 85, 255,0.6); }
body.theme-paradies .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.paradies { color: var(--paradies); }
body.theme-paradies.kick #world { animation: kickParadies 0.2s ease-out; }
@keyframes kickParadies { 0%{transform:scale(1);} 45%{transform:scale(1.02); filter:brightness(1.16) saturate(1.1);} 100%{transform:scale(1); filter:none;} }
/* karte */
.track-card[data-song="paradies"] .tc-art { background:
    linear-gradient(180deg, #1a0f2e 0%, #140b24 42%, #0a0614 100%),
    radial-gradient(ellipse at 50% 46%, rgba(168,85,255,0.4), transparent 58%),
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(224,204,255,0.07) 14px 16px); }
.track-card[data-song="paradies"] .tc-title {
  font-family: 'Michroma', sans-serif; font-weight: 400;
  font-size: clamp(1.05rem, 2.5vw, 1.75rem); line-height: 1.1;
  color: transparent; background: linear-gradient(158deg, #ffffff, #e0ccff 40%, #a855ff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(168, 85, 255,0.5));
}
.track-card[data-song="paradies"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(168, 85, 255,0.55)) drop-shadow(0 0 15px rgba(168, 85, 255,0.5)); }

/* ============================================================
   WELT — theme-strasse · Permanent Marker
   ============================================================ */
:root { --strasse: #00c8b2; --strasse-hell: #9ff0e6; --strasse-dunkel: #06110f; }
body.theme-strasse { --accent: #00c8b2; --accent-rgb: 0, 200, 178; --f-display: 'Permanent Marker', cursive; }
body.theme-strasse .climax-text { font-size: clamp(1.9rem, 10vw, 6.8rem); }
body.theme-strasse .huge, body.theme-strasse .wave-word, body.theme-strasse .burst-center, body.theme-strasse .climax .bang,
body.theme-strasse .sl-bottom, body.theme-strasse .trio-line, body.theme-strasse .endcard-cta,
body.theme-strasse .name-big, body.theme-strasse .qa-a { font-weight: 400; }
body.theme-strasse #ticker { background: linear-gradient(90deg, var(--strasse), var(--strasse-hell) 55%, var(--strasse)); color: #06110f; letter-spacing: 0.09em; }
body.theme-strasse #progress { background: linear-gradient(90deg, var(--strasse-hell), var(--strasse) 60%, var(--strasse-hell)); box-shadow: 0 0 13px rgba(0, 200, 178,0.7); }
body.theme-strasse .dot { background: var(--strasse); box-shadow: 0 0 9px var(--strasse); }
body.theme-strasse #theme-tag { color: var(--strasse-hell); text-shadow: 0 0 11px rgba(0, 200, 178,0.55); }
body.theme-strasse #hud { color: rgba(255,255,255,0.82); }
body.theme-strasse #controls button:hover { border-color: var(--strasse); color: var(--strasse-hell); box-shadow: 0 0 13px rgba(0, 200, 178,0.5); }
body.theme-strasse .qa-q { color: var(--strasse-hell); }
body.theme-strasse .q-mark { color: var(--strasse); }
body.theme-strasse #redwash { background: var(--strasse); }
body.theme-strasse #shockwave { border-color: var(--strasse); box-shadow: 0 0 60px var(--strasse), inset 0 0 60px rgba(0, 200, 178,0.6); }
body.theme-strasse .sl-bottom, body.theme-strasse .huge, body.theme-strasse .bu-line.bu-red, body.theme-strasse .anti-line.big,
body.theme-strasse .wave-word, body.theme-strasse .rain-word, body.theme-strasse .burst-center, body.theme-strasse .climax .bang,
body.theme-strasse .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, var(--strasse-hell) 40%, var(--strasse) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 15px rgba(0, 200, 178,0.5));
}
body.theme-strasse .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--strasse); filter: drop-shadow(0 0 12px rgba(0, 200, 178,0.45)); }
body.theme-strasse .sl-bottom strong { color: var(--strasse-hell); -webkit-text-fill-color: var(--strasse-hell); }
body.theme-strasse .climax .bang.b2, body.theme-strasse .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-strasse .climax-sub, body.theme-strasse .cx-sub { color: var(--strasse-hell); }
body.theme-strasse .qa-a { -webkit-text-fill-color: transparent; }
body.theme-strasse .q-text .codeword {
  color: var(--strasse); background: rgba(0, 200, 178,0.13);
  box-shadow: inset 0 0 0 1px rgba(0, 200, 178,0.32);
  text-shadow: 0 0 18px rgba(0, 200, 178,0.5);
}
body.theme-strasse .term-body .out.cyan { color: var(--strasse-hell); }
body.theme-strasse .term-body .out.green { color: var(--strasse); }
body.theme-strasse .chart-bar .bar.red { background: linear-gradient(90deg, #3a3040, #6a5570); }
body.theme-strasse .chart-bar .bar.cyan { background: linear-gradient(90deg, var(--strasse), var(--strasse-hell)); }
body.theme-strasse .chart-bar .bar.green { background: linear-gradient(90deg, var(--strasse-hell), #ffffff); }
body.theme-strasse .burst-w { color: var(--strasse-hell); opacity: 0.82; }
body.theme-strasse .bm-row { color: var(--strasse-hell); opacity: 0.88; }
body.theme-strasse .trio-line.strasse { color: var(--strasse); text-shadow: 0 0 34px rgba(0, 200, 178,0.6); }
body.theme-strasse .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-strasse .scene-stamp.active .bio-h .stamp.strasse { color: var(--strasse); text-shadow: 0 0 34px rgba(0, 200, 178,0.6); }
body.theme-strasse .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.strasse { color: var(--strasse); }
body.theme-strasse.kick #world { animation: kickStrasse 0.22s ease-out; }
@keyframes kickStrasse { 0%{transform:translateY(0);} 45%{transform:translateY(-0.5%); filter:brightness(1.12);} 100%{transform:translateY(0); filter:none;} }
/* karte */
.track-card[data-song="strasse"] .tc-art { background:
    radial-gradient(ellipse at 50% 72%, rgba(255,226,170,0.3) 0 22%, transparent 52%),
    radial-gradient(circle at 50% 20%, rgba(255,226,170,0.22), transparent 34%),
    linear-gradient(180deg, #0a1614 0%, #071110 60%, #040b0a 100%); }
.track-card[data-song="strasse"] .tc-title {
  font-family: 'Permanent Marker', cursive; font-weight: 400;
  font-size: clamp(1.05rem, 2.5vw, 1.75rem); line-height: 1.1;
  color: transparent; background: linear-gradient(158deg, #ffffff, #9ff0e6 40%, #00c8b2);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(0, 200, 178,0.5));
}
.track-card[data-song="strasse"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(0, 200, 178,0.55)) drop-shadow(0 0 15px rgba(0, 200, 178,0.5)); }

/* ============================================================
   WELT — theme-duett · Yeseva One
   ============================================================ */
:root { --duett: #ff8c69; --duett-hell: #ffd9c4; --duett-dunkel: #2a1108; }
body.theme-duett { --accent: #ff8c69; --accent-rgb: 255, 140, 105; --f-display: 'Yeseva One', serif; }
body.theme-duett .huge, body.theme-duett .wave-word, body.theme-duett .burst-center, body.theme-duett .climax .bang,
body.theme-duett .sl-bottom, body.theme-duett .trio-line, body.theme-duett .endcard-cta,
body.theme-duett .name-big, body.theme-duett .qa-a { font-weight: 400; }
body.theme-duett #ticker { background: linear-gradient(90deg, var(--duett), var(--duett-hell) 55%, var(--duett)); color: #2a1108; letter-spacing: 0.09em; }
body.theme-duett #progress { background: linear-gradient(90deg, var(--duett-hell), var(--duett) 60%, var(--duett-hell)); box-shadow: 0 0 13px rgba(255, 140, 105,0.7); }
body.theme-duett .dot { background: var(--duett); box-shadow: 0 0 9px var(--duett); }
body.theme-duett #theme-tag { color: var(--duett-hell); text-shadow: 0 0 11px rgba(255, 140, 105,0.55); }
body.theme-duett #hud { color: rgba(255,255,255,0.82); }
body.theme-duett #controls button:hover { border-color: var(--duett); color: var(--duett-hell); box-shadow: 0 0 13px rgba(255, 140, 105,0.5); }
body.theme-duett .qa-q { color: var(--duett-hell); }
body.theme-duett .q-mark { color: var(--duett); }
body.theme-duett #redwash { background: var(--duett); }
body.theme-duett #shockwave { border-color: var(--duett); box-shadow: 0 0 60px var(--duett), inset 0 0 60px rgba(255, 140, 105,0.6); }
body.theme-duett .sl-bottom, body.theme-duett .huge, body.theme-duett .bu-line.bu-red, body.theme-duett .anti-line.big,
body.theme-duett .wave-word, body.theme-duett .rain-word, body.theme-duett .burst-center, body.theme-duett .climax .bang,
body.theme-duett .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, var(--duett-hell) 40%, var(--duett) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 15px rgba(255, 140, 105,0.5));
}
body.theme-duett .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px var(--duett); filter: drop-shadow(0 0 12px rgba(255, 140, 105,0.45)); }
body.theme-duett .sl-bottom strong { color: var(--duett-hell); -webkit-text-fill-color: var(--duett-hell); }
body.theme-duett .climax .bang.b2, body.theme-duett .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-duett .climax-sub, body.theme-duett .cx-sub { color: var(--duett-hell); }
body.theme-duett .qa-a { -webkit-text-fill-color: transparent; }
body.theme-duett .q-text .codeword {
  color: var(--duett); background: rgba(255, 140, 105,0.13);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 105,0.32);
  text-shadow: 0 0 18px rgba(255, 140, 105,0.5);
}
body.theme-duett .term-body .out.cyan { color: var(--duett-hell); }
body.theme-duett .term-body .out.green { color: var(--duett); }
body.theme-duett .chart-bar .bar.red { background: linear-gradient(90deg, #3a3040, #6a5570); }
body.theme-duett .chart-bar .bar.cyan { background: linear-gradient(90deg, var(--duett), var(--duett-hell)); }
body.theme-duett .chart-bar .bar.green { background: linear-gradient(90deg, var(--duett-hell), #ffffff); }
body.theme-duett .burst-w { color: var(--duett-hell); opacity: 0.82; }
body.theme-duett .bm-row { color: var(--duett-hell); opacity: 0.88; }
body.theme-duett .trio-line.duett { color: var(--duett); text-shadow: 0 0 34px rgba(255, 140, 105,0.6); }
body.theme-duett .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-duett .scene-stamp.active .bio-h .stamp.duett { color: var(--duett); text-shadow: 0 0 34px rgba(255, 140, 105,0.6); }
body.theme-duett .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.duett { color: var(--duett); }
body.theme-duett.kick #world { animation: kickDuett 0.26s ease-out; }
@keyframes kickDuett { 0%{transform:scale(1);} 50%{transform:scale(1.012); filter:brightness(1.1) saturate(1.08);} 100%{transform:scale(1); filter:none;} }
/* karte */
/* .tc-art liegt als inset:0 ÜBER der ganzen karte — der karten-titel steht
   darauf. Darum MUSS die karte dunkel bleiben, sonst verschwindet die weisse
   schrift. Der sonnenaufgang sitzt deshalb als schmales glühen im unteren
   drittel (dort, wo die dächer stehen), nicht als heller himmel über alles. */
.track-card[data-song="duett"] .tc-art { background:
    radial-gradient(ellipse at 50% 78%, rgba(255,190,150,0.42), transparent 58%),
    linear-gradient(180deg, #1d0f0c 0%, #2a150f 46%, #5a2a1e 78%, #8a4536 100%); }
.track-card[data-song="duett"] .tc-title {
  font-family: 'Yeseva One', serif; font-weight: 400;
  font-size: clamp(1.05rem, 2.5vw, 1.75rem); line-height: 1.1;
  color: transparent; background: linear-gradient(158deg, #ffffff, #ffd9c4 40%, #ff8c69);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(255, 140, 105,0.5));
}
.track-card[data-song="duett"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(255, 140, 105,0.55)) drop-shadow(0 0 15px rgba(255, 140, 105,0.5)); }

/* Michroma laeuft rund 35% breiter als die ueblichen display-schriften.
   Ohne diese korrektur laufen die grossen zeilen dieser welt rechts aus
   dem bild ("PARADIES" verlor das S). Darum hier gezielt kleiner setzen —
   einmal an der wurzel statt jede zeile einzeln zu kuerzen. */
body.theme-paradies .trio-line { font-size: clamp(1.5rem, 4.8vw, 4.2rem); letter-spacing: -0.02em; }
body.theme-paradies .huge { font-size: clamp(1.6rem, 5.4vw, 4.8rem); }
body.theme-paradies .wave-word { font-size: clamp(1.8rem, 6vw, 5.2rem); }
body.theme-paradies .bu-line { font-size: clamp(2rem, 7vw, 6rem); }
body.theme-paradies .burst-center { font-size: clamp(1.2rem, 3.4vw, 3rem); }
body.theme-paradies .stamp { font-size: clamp(1.4rem, 4.4vw, 3.8rem); }
body.theme-paradies .endcard-cta { font-size: clamp(1.1rem, 3vw, 2.4rem); }
body.theme-paradies .name-big { font-size: clamp(1.8rem, 6.4vw, 5.6rem); }
body.theme-paradies .anti-line.big { font-size: clamp(1.2rem, 3.6vw, 3rem); }

/* Permanent Marker ist ebenfalls breiter als der schnitt — moderater abschlag */
body.theme-strasse .trio-line { font-size: clamp(2rem, 7.2vw, 6.4rem); }
body.theme-strasse .name-big { font-size: clamp(2.2rem, 8vw, 7rem); }

/* ============================================================
   WELT AH — DER PLAN DARF SCHEITERN (theme-plan)
   Planwand: fadenrot + papier + wandschwarz · special elite
   ============================================================ */
:root { --plan: #e01a3a; --plan-hell: #f0d8c0; --plan-dunkel: #120e10; }
body.theme-plan { --accent: #e01a3a; --accent-rgb: 224, 26, 58; --f-display: 'Special Elite', 'Courier New', monospace; }
/* Der climax besteht aus ZWEI zeilen: die erste traegt .lt, die zweite .bang.
   Eine regel nur auf .bang schrumpft darum nur die halbe ueberschrift und die
   erste zeile laeuft aus dem bild. Groesse gehoert an den container. */
body.theme-plan .climax-text { font-size: clamp(1.8rem, 9.6vw, 6.4rem); }
body.theme-plan .huge, body.theme-plan .wave-word, body.theme-plan .burst-center, body.theme-plan .climax .bang,
body.theme-plan .sl-bottom, body.theme-plan .trio-line, body.theme-plan .endcard-cta,
body.theme-plan .name-big, body.theme-plan .qa-a { font-weight: 400; letter-spacing: 0.01em; }
/* Special Elite ist eine schreibmaschinen-schrift und laeuft breiter als die
   display-schnitte — wie bei Michroma (welt AE) darum gezielt kleiner setzen,
   sonst laufen die langen deutschen grosszeilen aus dem bild. */
body.theme-plan .trio-line { font-size: clamp(1.8rem, 6.4vw, 5.6rem); }
body.theme-plan .name-big { font-size: clamp(2rem, 7vw, 6rem); }
body.theme-plan #ticker { background: linear-gradient(90deg, #e01a3a, #f0d8c0 55%, #e01a3a); color: #120e10; letter-spacing: 0.08em; }
body.theme-plan #progress { background: linear-gradient(90deg, #f0d8c0, #e01a3a 60%, #f0d8c0); box-shadow: 0 0 13px rgba(224, 26, 58,0.7); }
body.theme-plan .dot { background: #e01a3a; box-shadow: 0 0 9px #e01a3a; }
body.theme-plan #theme-tag { color: #f0d8c0; text-shadow: 0 0 11px rgba(224, 26, 58,0.5); }
body.theme-plan #hud { color: rgba(240,216,192,0.85); }
body.theme-plan #controls button:hover { border-color: #e01a3a; color: #f0d8c0; box-shadow: 0 0 13px rgba(224, 26, 58,0.5); }
body.theme-plan .qa-q { color: #f0d8c0; }
body.theme-plan .q-mark { color: #e01a3a; }
body.theme-plan #redwash { background: #e01a3a; }
body.theme-plan #shockwave { border-color: #e01a3a; box-shadow: 0 0 60px #e01a3a, inset 0 0 60px rgba(224, 26, 58,0.55); }
body.theme-plan .sl-bottom, body.theme-plan .huge, body.theme-plan .bu-line.bu-red, body.theme-plan .anti-line.big,
body.theme-plan .wave-word, body.theme-plan .rain-word, body.theme-plan .burst-center, body.theme-plan .climax .bang,
body.theme-plan .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #f0d8c0 42%, #e01a3a 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(224, 26, 58,0.5));
}
body.theme-plan .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #e01a3a; filter: drop-shadow(0 0 12px rgba(224, 26, 58,0.45)); }
body.theme-plan .sl-bottom strong { color: #f0d8c0; -webkit-text-fill-color: #f0d8c0; }
body.theme-plan .climax .bang.b2, body.theme-plan .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-plan .climax-sub, body.theme-plan .cx-sub { color: #f0d8c0; }
body.theme-plan .qa-a { -webkit-text-fill-color: transparent; }
body.theme-plan .q-text .codeword {
  color: #e01a3a; background: rgba(224, 26, 58,0.13);
  box-shadow: inset 0 0 0 1px rgba(224, 26, 58,0.32);
  text-shadow: 0 0 18px rgba(224, 26, 58,0.5);
}
body.theme-plan .term-body .out.cyan { color: #f0d8c0; }
body.theme-plan .term-body .out.green { color: #a8d8a0; }
body.theme-plan .chart-bar .bar.red { background: linear-gradient(90deg, #4a2028, #7d3542); }
body.theme-plan .chart-bar .bar.cyan { background: linear-gradient(90deg, #e01a3a, #f26a80); }
body.theme-plan .chart-bar .bar.green { background: linear-gradient(90deg, #f0d8c0, #ffffff); }
body.theme-plan .burst-w { color: #f0d8c0; opacity: 0.82; }
body.theme-plan .bm-row { color: #f0d8c0; opacity: 0.88; }
body.theme-plan .trio-line.plan { color: #e01a3a; text-shadow: 0 0 34px rgba(224, 26, 58,0.6); }
body.theme-plan .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-plan .scene-stamp.active .bio-h .stamp.plan { color: #e01a3a; text-shadow: 0 0 34px rgba(224, 26, 58,0.6); }
body.theme-plan .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.plan { color: #e01a3a; }
body.theme-plan.kick #world { animation: kickPlan 0.2s ease-out; }
@keyframes kickPlan { 0%{transform:scale(1);} 50%{transform:scale(1.008); filter:contrast(1.1);} 100%{transform:scale(1); filter:none;} }

/* karte Seite AH — planwand mit rotem faden */
.track-card[data-song="plan"] .tc-art { background:
    linear-gradient(118deg, transparent 0 43%, rgba(224,26,58,0.42) 43% 45%, transparent 45% 100%),
    linear-gradient(62deg, transparent 0 55%, rgba(224,26,58,0.3) 55% 56.6%, transparent 57% 100%),
    radial-gradient(circle at 28% 32%, rgba(240,216,192,0.24) 0 6%, transparent 7%),
    radial-gradient(circle at 72% 66%, rgba(240,216,192,0.2) 0 5%, transparent 6%),
    linear-gradient(180deg, #241b1c 0%, #181214 58%, #0d090b 100%); }
.track-card[data-song="plan"] .tc-title {
  font-family: 'Special Elite', 'Courier New', monospace; font-weight: 400;
  font-size: clamp(1rem, 2.3vw, 1.6rem); line-height: 1.12;
  color: transparent; background: linear-gradient(158deg, #ffffff, #f0d8c0 42%, #e01a3a);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(224, 26, 58,0.5));
}
.track-card[data-song="plan"]:hover .tc-title { filter: drop-shadow(0 2px 10px rgba(224, 26, 58,0.55)) drop-shadow(0 0 14px rgba(224, 26, 58,0.5)); }

/* ============================================================
   WELT AI — WEGLASSEN IST AUCH ARBEIT (theme-gestern)
   Die sich leerende Buehne: sepia + warmes buehnenlicht · instrument serif
   Bewusst ENTSAETTIGT — die einzige welt im katalog ohne knallfarbe.
   ============================================================ */
:root { --gestern: #c6a078; --gestern-hell: #ecd6ba; --gestern-dunkel: #0e0c0c; }
body.theme-gestern { --accent: #c6a078; --accent-rgb: 198, 160, 120; --f-display: 'Instrument Serif', 'Playfair Display', serif; }
body.theme-gestern .huge, body.theme-gestern .wave-word, body.theme-gestern .burst-center, body.theme-gestern .climax .bang,
body.theme-gestern .sl-bottom, body.theme-gestern .trio-line, body.theme-gestern .endcard-cta,
body.theme-gestern .name-big, body.theme-gestern .qa-a { font-weight: 400; letter-spacing: 0; }
body.theme-gestern #ticker { background: linear-gradient(90deg, #c6a078, #ecd6ba 55%, #c6a078); color: #0e0c0c; letter-spacing: 0.08em; }
body.theme-gestern #progress { background: linear-gradient(90deg, #ecd6ba, #c6a078 60%, #ecd6ba); box-shadow: 0 0 12px rgba(198, 160, 120,0.6); }
body.theme-gestern .dot { background: #c6a078; box-shadow: 0 0 8px #c6a078; }
body.theme-gestern #theme-tag { color: #ecd6ba; text-shadow: 0 0 10px rgba(198, 160, 120,0.45); }
body.theme-gestern #hud { color: rgba(236,214,186,0.82); }
body.theme-gestern #controls button:hover { border-color: #c6a078; color: #ecd6ba; box-shadow: 0 0 12px rgba(198, 160, 120,0.45); }
body.theme-gestern .qa-q { color: #ecd6ba; }
body.theme-gestern .q-mark { color: #c6a078; }
body.theme-gestern #redwash { background: #c6a078; }
body.theme-gestern #shockwave { border-color: #c6a078; box-shadow: 0 0 50px #c6a078, inset 0 0 50px rgba(198, 160, 120,0.45); }
body.theme-gestern .sl-bottom, body.theme-gestern .huge, body.theme-gestern .bu-line.bu-red, body.theme-gestern .anti-line.big,
body.theme-gestern .wave-word, body.theme-gestern .rain-word, body.theme-gestern .burst-center, body.theme-gestern .climax .bang,
body.theme-gestern .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #fffaf4, #ecd6ba 44%, #c6a078 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(198, 160, 120,0.4));
}
body.theme-gestern .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #c6a078; filter: drop-shadow(0 0 10px rgba(198, 160, 120,0.4)); }
body.theme-gestern .sl-bottom strong { color: #ecd6ba; -webkit-text-fill-color: #ecd6ba; }
body.theme-gestern .climax .bang.b2, body.theme-gestern .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-gestern .climax-sub, body.theme-gestern .cx-sub { color: #ecd6ba; }
body.theme-gestern .qa-a { -webkit-text-fill-color: transparent; }
body.theme-gestern .q-text .codeword {
  color: #c6a078; background: rgba(198, 160, 120,0.13);
  box-shadow: inset 0 0 0 1px rgba(198, 160, 120,0.3);
  text-shadow: 0 0 16px rgba(198, 160, 120,0.45);
}
body.theme-gestern .term-body .out.cyan { color: #ecd6ba; }
body.theme-gestern .term-body .out.green { color: #b8cba8; }
body.theme-gestern .chart-bar .bar.red { background: linear-gradient(90deg, #3c3230, #6b5a50); }
body.theme-gestern .chart-bar .bar.cyan { background: linear-gradient(90deg, #c6a078, #ecd6ba); }
body.theme-gestern .chart-bar .bar.green { background: linear-gradient(90deg, #ecd6ba, #fffaf4); }
body.theme-gestern .burst-w { color: #ecd6ba; opacity: 0.8; }
body.theme-gestern .bm-row { color: #ecd6ba; opacity: 0.86; }
body.theme-gestern .trio-line.gestern { color: #c6a078; text-shadow: 0 0 30px rgba(198, 160, 120,0.5); }
body.theme-gestern .trio-line.weiss { color: #fffaf4; text-shadow: 0 0 22px rgba(255,255,255,0.35); }
body.theme-gestern .scene-stamp.active .bio-h .stamp.gestern { color: #c6a078; text-shadow: 0 0 30px rgba(198, 160, 120,0.5); }
body.theme-gestern .scene-stamp.active .bio-h .stamp.weiss { color: #fffaf4; }
.trio-line.gestern { color: #c6a078; }
/* die leiseste welt im katalog — der kick ist nur ein atmen, kein stoss */
body.theme-gestern.kick #world { animation: kickGestern 0.4s ease-out; }
@keyframes kickGestern { 0%{filter:brightness(1);} 50%{filter:brightness(1.07);} 100%{filter:brightness(1);} }

/* karte Seite AI — leere buehne im scheinwerfer */
.track-card[data-song="gestern"] .tc-art { background:
    radial-gradient(ellipse at 50% 74%, rgba(236,214,186,0.26) 0 16%, transparent 46%),
    linear-gradient(180deg, transparent 0 8%, rgba(236,214,186,0.09) 8% 72%, transparent 74%),
    linear-gradient(180deg, #171313 0%, #100d0d 62%, #080606 100%); }
.track-card[data-song="gestern"] .tc-title {
  font-family: 'Instrument Serif', 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(1.25rem, 2.9vw, 2.1rem); line-height: 1.08;
  color: transparent; background: linear-gradient(158deg, #fffaf4, #ecd6ba 44%, #c6a078);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 9px rgba(198, 160, 120,0.45));
}
.track-card[data-song="gestern"]:hover .tc-title { filter: drop-shadow(0 2px 9px rgba(198, 160, 120,0.5)) drop-shadow(0 0 12px rgba(198, 160, 120,0.45)); }

/* ============================================================
   WELT AJ — KEIN US IM DATENPFAD (theme-souveraen)
   Die Karte, die nicht verlassen wird: magenta + hoheitsgebiet · saira condensed
   ============================================================ */
:root { --souveraen: #e20074; --souveraen-hell: #ff9ed2; --souveraen-dunkel: #0a0810; }
body.theme-souveraen { --accent: #e20074; --accent-rgb: 226, 0, 116; --f-display: 'Saira Condensed', 'Oswald', sans-serif; }
body.theme-souveraen .huge, body.theme-souveraen .wave-word, body.theme-souveraen .burst-center, body.theme-souveraen .climax .bang,
body.theme-souveraen .sl-bottom, body.theme-souveraen .trio-line, body.theme-souveraen .endcard-cta,
body.theme-souveraen .name-big, body.theme-souveraen .qa-a { font-weight: 700; letter-spacing: -0.005em; }
body.theme-souveraen #ticker { background: linear-gradient(90deg, #e20074, #ff9ed2 55%, #e20074); color: #14000a; letter-spacing: 0.09em; }
body.theme-souveraen #progress { background: linear-gradient(90deg, #ff9ed2, #e20074 60%, #ff9ed2); box-shadow: 0 0 13px rgba(226, 0, 116,0.7); }
body.theme-souveraen .dot { background: #e20074; box-shadow: 0 0 9px #e20074; }
body.theme-souveraen #theme-tag { color: #ff9ed2; text-shadow: 0 0 11px rgba(226, 0, 116,0.5); }
body.theme-souveraen #hud { color: rgba(255,158,210,0.85); }
body.theme-souveraen #controls button:hover { border-color: #e20074; color: #ff9ed2; box-shadow: 0 0 13px rgba(226, 0, 116,0.5); }
body.theme-souveraen .qa-q { color: #ff9ed2; }
body.theme-souveraen .q-mark { color: #e20074; }
body.theme-souveraen #redwash { background: #e20074; }
body.theme-souveraen #shockwave { border-color: #e20074; box-shadow: 0 0 60px #e20074, inset 0 0 60px rgba(226, 0, 116,0.55); }
body.theme-souveraen .sl-bottom, body.theme-souveraen .huge, body.theme-souveraen .bu-line.bu-red, body.theme-souveraen .anti-line.big,
body.theme-souveraen .wave-word, body.theme-souveraen .rain-word, body.theme-souveraen .burst-center, body.theme-souveraen .climax .bang,
body.theme-souveraen .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #ff9ed2 40%, #e20074 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(226, 0, 116,0.5));
}
body.theme-souveraen .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #e20074; filter: drop-shadow(0 0 12px rgba(226, 0, 116,0.45)); }
body.theme-souveraen .sl-bottom strong { color: #ff9ed2; -webkit-text-fill-color: #ff9ed2; }
body.theme-souveraen .climax .bang.b2, body.theme-souveraen .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-souveraen .climax-sub, body.theme-souveraen .cx-sub { color: #ff9ed2; }
body.theme-souveraen .qa-a { -webkit-text-fill-color: transparent; }
body.theme-souveraen .q-text .codeword {
  color: #e20074; background: rgba(226, 0, 116,0.14);
  box-shadow: inset 0 0 0 1px rgba(226, 0, 116,0.34);
  text-shadow: 0 0 18px rgba(226, 0, 116,0.5);
}
body.theme-souveraen .term-body .out.cyan { color: #ff9ed2; }
body.theme-souveraen .term-body .out.green { color: #7ee0a8; }
body.theme-souveraen .chart-bar .bar.red { background: linear-gradient(90deg, #3e1030, #6d2050); }
body.theme-souveraen .chart-bar .bar.cyan { background: linear-gradient(90deg, #e20074, #ff9ed2); }
body.theme-souveraen .chart-bar .bar.green { background: linear-gradient(90deg, #7ee0a8, #d6ffe8); }
body.theme-souveraen .burst-w { color: #ff9ed2; opacity: 0.84; }
body.theme-souveraen .bm-row { color: #ff9ed2; opacity: 0.88; }
body.theme-souveraen .trio-line.souveraen { color: #e20074; text-shadow: 0 0 34px rgba(226, 0, 116,0.6); }
body.theme-souveraen .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-souveraen .scene-stamp.active .bio-h .stamp.souveraen { color: #e20074; text-shadow: 0 0 34px rgba(226, 0, 116,0.6); }
body.theme-souveraen .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.souveraen { color: #e20074; }
body.theme-souveraen.kick #world { animation: kickSouveraen 0.2s ease-out; }
@keyframes kickSouveraen { 0%{transform:scale(1);} 50%{transform:scale(1.007); filter:saturate(1.14) brightness(1.08);} 100%{transform:scale(1); filter:none;} }

/* karte Seite AJ — hoheitsgebiet mit knoten */
.track-card[data-song="souveraen"] .tc-art { background:
    radial-gradient(circle at 34% 40%, rgba(255,158,210,0.5) 0 2.2%, transparent 3%),
    radial-gradient(circle at 66% 62%, rgba(255,158,210,0.42) 0 2%, transparent 2.8%),
    radial-gradient(circle at 52% 26%, rgba(255,158,210,0.36) 0 1.8%, transparent 2.6%),
    radial-gradient(ellipse at 50% 50%, rgba(226,0,116,0.3) 0 40%, rgba(226,0,116,0.09) 41% 46%, transparent 47%),
    linear-gradient(180deg, #16101c 0%, #0e0a12 60%, #08060a 100%); }
.track-card[data-song="souveraen"] .tc-title {
  font-family: 'Saira Condensed', 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 2.2rem); line-height: 1.06;
  color: transparent; background: linear-gradient(158deg, #ffffff, #ff9ed2 42%, #e20074);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(226, 0, 116,0.5));
}
.track-card[data-song="souveraen"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(226, 0, 116,0.55)) drop-shadow(0 0 15px rgba(226, 0, 116,0.5)); }

/* ============================================================
   WELT AK — VON DER IDEE BIS LIVE (theme-lore)
   Stollenfahrt: kupfer + goldader + stollenbraun · luckiest guy
   Kuerzeste welt im katalog (60 s) — die form IST die aussage.
   ============================================================ */
:root { --lore: #d28c3e; --lore-hell: #ffd696; }
body.theme-lore { --accent: #d28c3e; --accent-rgb: 210, 140, 62; --f-display: 'Luckiest Guy', 'Titan One', cursive; }
/* Der climax besteht aus ZWEI zeilen: die erste traegt .lt, die zweite .bang.
   Eine regel nur auf .bang schrumpft darum nur die halbe ueberschrift und die
   erste zeile laeuft aus dem bild. Groesse gehoert an den container. */
body.theme-lore .climax-text { font-size: clamp(1.9rem, 10vw, 6.8rem); }
body.theme-lore .huge, body.theme-lore .wave-word, body.theme-lore .burst-center, body.theme-lore .climax .bang,
body.theme-lore .sl-bottom, body.theme-lore .trio-line, body.theme-lore .endcard-cta,
body.theme-lore .name-big, body.theme-lore .qa-a { font-weight: 400; letter-spacing: 0.01em; }
/* Luckiest Guy laeuft breit — abschlag gleich beim anlegen (lehre aus AE/AH) */
body.theme-lore .trio-line { font-size: clamp(1.9rem, 6.8vw, 6rem); }
body.theme-lore .name-big { font-size: clamp(2rem, 7.2vw, 6.2rem); }
body.theme-lore #ticker { background: linear-gradient(90deg, #d28c3e, #ffd696 55%, #d28c3e); color: #1c1108; letter-spacing: 0.08em; }
body.theme-lore #progress { background: linear-gradient(90deg, #ffd696, #d28c3e 60%, #ffd696); box-shadow: 0 0 13px rgba(210, 140, 62,0.7); }
body.theme-lore .dot { background: #d28c3e; box-shadow: 0 0 9px #d28c3e; }
body.theme-lore #theme-tag { color: #ffd696; text-shadow: 0 0 11px rgba(210, 140, 62,0.5); }
body.theme-lore #hud { color: rgba(255,214,150,0.85); }
body.theme-lore #controls button:hover { border-color: #d28c3e; color: #ffd696; box-shadow: 0 0 13px rgba(210, 140, 62,0.5); }
body.theme-lore .qa-q { color: #ffd696; }
body.theme-lore .q-mark { color: #d28c3e; }
body.theme-lore #redwash { background: #d28c3e; }
body.theme-lore #shockwave { border-color: #d28c3e; box-shadow: 0 0 60px #d28c3e, inset 0 0 60px rgba(210, 140, 62,0.55); }
body.theme-lore .sl-bottom, body.theme-lore .huge, body.theme-lore .bu-line.bu-red, body.theme-lore .anti-line.big,
body.theme-lore .wave-word, body.theme-lore .rain-word, body.theme-lore .burst-center, body.theme-lore .climax .bang,
body.theme-lore .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #fff6e4, #ffd696 42%, #d28c3e 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(210, 140, 62,0.5));
}
body.theme-lore .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #d28c3e; filter: drop-shadow(0 0 12px rgba(210, 140, 62,0.45)); }
body.theme-lore .sl-bottom strong { color: #ffd696; -webkit-text-fill-color: #ffd696; }
body.theme-lore .climax .bang.b2, body.theme-lore .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-lore .climax-sub, body.theme-lore .cx-sub { color: #ffd696; }
body.theme-lore .qa-a { -webkit-text-fill-color: transparent; }
body.theme-lore .q-text .codeword {
  color: #d28c3e; background: rgba(210, 140, 62,0.14);
  box-shadow: inset 0 0 0 1px rgba(210, 140, 62,0.32);
  text-shadow: 0 0 18px rgba(210, 140, 62,0.5);
}
body.theme-lore .term-body .out.cyan { color: #ffd696; }
body.theme-lore .term-body .out.green { color: #a8d888; }
body.theme-lore .chart-bar .bar.red { background: linear-gradient(90deg, #3e2a18, #6d4a28); }
body.theme-lore .chart-bar .bar.cyan { background: linear-gradient(90deg, #d28c3e, #ffd696); }
body.theme-lore .chart-bar .bar.green { background: linear-gradient(90deg, #ffd696, #fff6e4); }
body.theme-lore .burst-w { color: #ffd696; opacity: 0.84; }
body.theme-lore .bm-row { color: #ffd696; opacity: 0.88; }
body.theme-lore .trio-line.lore { color: #d28c3e; text-shadow: 0 0 34px rgba(210, 140, 62,0.6); }
body.theme-lore .trio-line.weiss { color: #fff6e4; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-lore .scene-stamp.active .bio-h .stamp.lore { color: #d28c3e; text-shadow: 0 0 34px rgba(210, 140, 62,0.6); }
body.theme-lore .scene-stamp.active .bio-h .stamp.weiss { color: #fff6e4; }
.trio-line.lore { color: #d28c3e; }
/* der kick ist ein rumpler auf dem gleis, kein zoom */
body.theme-lore.kick #world { animation: kickLore 0.16s steps(3, end); }
@keyframes kickLore { 0%{transform:translateY(0);} 50%{transform:translateY(-0.7%) rotate(-0.14deg); filter:brightness(1.12);} 100%{transform:translateY(0); filter:none;} }

/* karte Seite AK — gleis mit goldader */
.track-card[data-song="lore"] .tc-art { background:
    radial-gradient(circle at 22% 36%, rgba(255,214,150,0.35) 0 2%, transparent 3%),
    radial-gradient(circle at 74% 28%, rgba(255,214,150,0.3) 0 1.6%, transparent 2.4%),
    linear-gradient(180deg, transparent 0 66%, rgba(210,140,62,0.5) 66% 68%, transparent 68% 76%, rgba(210,140,62,0.35) 76% 77.5%, transparent 78%),
    linear-gradient(180deg, #1c1410 0%, #15100d 60%, #0a0706 100%); }
.track-card[data-song="lore"] .tc-title {
  font-family: 'Luckiest Guy', 'Titan One', cursive; font-weight: 400;
  font-size: clamp(1.2rem, 2.7vw, 2rem); line-height: 1.08;
  color: transparent; background: linear-gradient(158deg, #fff6e4, #ffd696 42%, #d28c3e);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(210, 140, 62,0.5));
}
.track-card[data-song="lore"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(210, 140, 62,0.55)) drop-shadow(0 0 15px rgba(210, 140, 62,0.5)); }

/* ============================================================
   WELT AL — ICH BRING ES INS ROLLEN (theme-anstoss)
   Dominokette: lime + dschungelgruen · sigmar one
   ============================================================ */
:root { --anstoss: #9ae63c; --anstoss-hell: #e2ffaa; }
body.theme-anstoss { --accent: #9ae63c; --accent-rgb: 154, 230, 60; --f-display: 'Sigmar One', 'Titan One', cursive; }
/* Der climax besteht aus ZWEI zeilen: die erste traegt .lt, die zweite .bang.
   Eine regel nur auf .bang schrumpft darum nur die halbe ueberschrift und die
   erste zeile laeuft aus dem bild. Groesse gehoert an den container. */
body.theme-anstoss .climax-text { font-size: clamp(1.8rem, 9.6vw, 6.4rem); }
body.theme-anstoss .huge, body.theme-anstoss .wave-word, body.theme-anstoss .burst-center, body.theme-anstoss .climax .bang,
body.theme-anstoss .sl-bottom, body.theme-anstoss .trio-line, body.theme-anstoss .endcard-cta,
body.theme-anstoss .name-big, body.theme-anstoss .qa-a { font-weight: 400; letter-spacing: 0.005em; }
/* Sigmar One laeuft breit — abschlag gleich beim anlegen (lehre aus AE/AH/AK) */
body.theme-anstoss .trio-line { font-size: clamp(1.8rem, 6.4vw, 5.6rem); }
body.theme-anstoss .name-big { font-size: clamp(1.9rem, 6.8vw, 5.8rem); }
body.theme-anstoss .burst-center { font-size: clamp(1.1rem, 3.2vw, 2.8rem); }
body.theme-anstoss #ticker { background: linear-gradient(90deg, #9ae63c, #e2ffaa 55%, #9ae63c); color: #0d1706; letter-spacing: 0.08em; }
body.theme-anstoss #progress { background: linear-gradient(90deg, #e2ffaa, #9ae63c 60%, #e2ffaa); box-shadow: 0 0 13px rgba(154, 230, 60,0.7); }
body.theme-anstoss .dot { background: #9ae63c; box-shadow: 0 0 9px #9ae63c; }
body.theme-anstoss #theme-tag { color: #e2ffaa; text-shadow: 0 0 11px rgba(154, 230, 60,0.5); }
body.theme-anstoss #hud { color: rgba(226,255,170,0.85); }
body.theme-anstoss #controls button:hover { border-color: #9ae63c; color: #e2ffaa; box-shadow: 0 0 13px rgba(154, 230, 60,0.5); }
body.theme-anstoss .qa-q { color: #e2ffaa; }
body.theme-anstoss .q-mark { color: #9ae63c; }
body.theme-anstoss #redwash { background: #9ae63c; }
body.theme-anstoss #shockwave { border-color: #9ae63c; box-shadow: 0 0 60px #9ae63c, inset 0 0 60px rgba(154, 230, 60,0.5); }
body.theme-anstoss .sl-bottom, body.theme-anstoss .huge, body.theme-anstoss .bu-line.bu-red, body.theme-anstoss .anti-line.big,
body.theme-anstoss .wave-word, body.theme-anstoss .rain-word, body.theme-anstoss .burst-center, body.theme-anstoss .climax .bang,
body.theme-anstoss .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #e2ffaa 42%, #9ae63c 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(154, 230, 60,0.45));
}
body.theme-anstoss .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #9ae63c; filter: drop-shadow(0 0 12px rgba(154, 230, 60,0.4)); }
body.theme-anstoss .sl-bottom strong { color: #e2ffaa; -webkit-text-fill-color: #e2ffaa; }
body.theme-anstoss .climax .bang.b2, body.theme-anstoss .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-anstoss .climax-sub, body.theme-anstoss .cx-sub { color: #e2ffaa; }
body.theme-anstoss .qa-a { -webkit-text-fill-color: transparent; }
body.theme-anstoss .q-text .codeword {
  color: #9ae63c; background: rgba(154, 230, 60,0.14);
  box-shadow: inset 0 0 0 1px rgba(154, 230, 60,0.32);
  text-shadow: 0 0 18px rgba(154, 230, 60,0.45);
}
body.theme-anstoss .term-body .out.cyan { color: #e2ffaa; }
body.theme-anstoss .term-body .out.green { color: #9ae63c; }
body.theme-anstoss .chart-bar .bar.red { background: linear-gradient(90deg, #2c3a1c, #4e6630); }
body.theme-anstoss .chart-bar .bar.cyan { background: linear-gradient(90deg, #9ae63c, #e2ffaa); }
body.theme-anstoss .chart-bar .bar.green { background: linear-gradient(90deg, #e2ffaa, #ffffff); }
body.theme-anstoss .burst-w { color: #e2ffaa; opacity: 0.84; }
body.theme-anstoss .bm-row { color: #e2ffaa; opacity: 0.88; }
body.theme-anstoss .trio-line.anstoss { color: #9ae63c; text-shadow: 0 0 34px rgba(154, 230, 60,0.55); }
body.theme-anstoss .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-anstoss .scene-stamp.active .bio-h .stamp.anstoss { color: #9ae63c; text-shadow: 0 0 34px rgba(154, 230, 60,0.55); }
body.theme-anstoss .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.anstoss { color: #9ae63c; }
/* der kick ist ein anstupsen — kurzer versatz zur seite, dann laeuft es weiter */
body.theme-anstoss.kick #world { animation: kickAnstoss 0.22s ease-out; }
@keyframes kickAnstoss { 0%{transform:translateX(0);} 40%{transform:translateX(0.5%) scale(1.006); filter:brightness(1.1);} 100%{transform:translateX(0); filter:none;} }

/* karte Seite AL — kippende steine */
.track-card[data-song="anstoss"] .tc-art { background:
    linear-gradient(96deg, transparent 0 18%, rgba(154,230,60,0.4) 18% 21%, transparent 21% 30%),
    linear-gradient(80deg, transparent 0 36%, rgba(154,230,60,0.32) 36% 39%, transparent 39% 48%),
    linear-gradient(64deg, transparent 0 54%, rgba(154,230,60,0.24) 54% 57%, transparent 57% 66%),
    linear-gradient(48deg, transparent 0 72%, rgba(154,230,60,0.16) 72% 75%, transparent 75%),
    linear-gradient(180deg, #16200f 0%, #0e150a 62%, #070a06 100%); }
.track-card[data-song="anstoss"] .tc-title {
  font-family: 'Sigmar One', 'Titan One', cursive; font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.9rem); line-height: 1.1;
  color: transparent; background: linear-gradient(158deg, #ffffff, #e2ffaa 42%, #9ae63c);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(154, 230, 60,0.45));
}
.track-card[data-song="anstoss"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(154, 230, 60,0.5)) drop-shadow(0 0 15px rgba(154, 230, 60,0.45)); }

/* ============================================================
   WELT AM — WAS DU FERTIG NENNST (theme-eisberg)
   Eisberg im Querschnitt: eisblau + tiefsee · barlow condensed
   ============================================================ */
:root { --eisberg: #68c6e8; --eisberg-hell: #e0f4ff; }
body.theme-eisberg { --accent: #68c6e8; --accent-rgb: 104, 198, 232; --f-display: 'Barlow Condensed', 'Oswald', sans-serif; }
body.theme-eisberg .huge, body.theme-eisberg .wave-word, body.theme-eisberg .burst-center, body.theme-eisberg .climax .bang,
body.theme-eisberg .sl-bottom, body.theme-eisberg .trio-line, body.theme-eisberg .endcard-cta,
body.theme-eisberg .name-big, body.theme-eisberg .qa-a { font-weight: 700; letter-spacing: -0.005em; }
body.theme-eisberg #ticker { background: linear-gradient(90deg, #68c6e8, #e0f4ff 55%, #68c6e8); color: #06192b; letter-spacing: 0.09em; }
body.theme-eisberg #progress { background: linear-gradient(90deg, #e0f4ff, #68c6e8 60%, #e0f4ff); box-shadow: 0 0 13px rgba(104, 198, 232,0.65); }
body.theme-eisberg .dot { background: #68c6e8; box-shadow: 0 0 9px #68c6e8; }
body.theme-eisberg #theme-tag { color: #e0f4ff; text-shadow: 0 0 11px rgba(104, 198, 232,0.5); }
body.theme-eisberg #hud { color: rgba(224,244,255,0.85); }
body.theme-eisberg #controls button:hover { border-color: #68c6e8; color: #e0f4ff; box-shadow: 0 0 13px rgba(104, 198, 232,0.5); }
body.theme-eisberg .qa-q { color: #e0f4ff; }
body.theme-eisberg .q-mark { color: #68c6e8; }
body.theme-eisberg #redwash { background: #68c6e8; }
body.theme-eisberg #shockwave { border-color: #68c6e8; box-shadow: 0 0 60px #68c6e8, inset 0 0 60px rgba(104, 198, 232,0.5); }
body.theme-eisberg .sl-bottom, body.theme-eisberg .huge, body.theme-eisberg .bu-line.bu-red, body.theme-eisberg .anti-line.big,
body.theme-eisberg .wave-word, body.theme-eisberg .rain-word, body.theme-eisberg .burst-center, body.theme-eisberg .climax .bang,
body.theme-eisberg .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #e0f4ff 42%, #68c6e8 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(104, 198, 232,0.45));
}
body.theme-eisberg .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #68c6e8; filter: drop-shadow(0 0 12px rgba(104, 198, 232,0.4)); }
body.theme-eisberg .sl-bottom strong { color: #e0f4ff; -webkit-text-fill-color: #e0f4ff; }
body.theme-eisberg .climax .bang.b2, body.theme-eisberg .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-eisberg .climax-sub, body.theme-eisberg .cx-sub { color: #e0f4ff; }
body.theme-eisberg .qa-a { -webkit-text-fill-color: transparent; }
body.theme-eisberg .q-text .codeword {
  color: #68c6e8; background: rgba(104, 198, 232,0.14);
  box-shadow: inset 0 0 0 1px rgba(104, 198, 232,0.32);
  text-shadow: 0 0 18px rgba(104, 198, 232,0.45);
}
body.theme-eisberg .term-body .out.cyan { color: #e0f4ff; }
body.theme-eisberg .term-body .out.green { color: #8fe0b4; }
body.theme-eisberg .chart-bar .bar.red { background: linear-gradient(90deg, #1e3348, #38566f); }
body.theme-eisberg .chart-bar .bar.cyan { background: linear-gradient(90deg, #68c6e8, #e0f4ff); }
body.theme-eisberg .chart-bar .bar.green { background: linear-gradient(90deg, #8fe0b4, #dcfff0); }
body.theme-eisberg .burst-w { color: #e0f4ff; opacity: 0.84; }
body.theme-eisberg .bm-row { color: #e0f4ff; opacity: 0.88; }
body.theme-eisberg .trio-line.eisberg { color: #68c6e8; text-shadow: 0 0 34px rgba(104, 198, 232,0.55); }
body.theme-eisberg .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-eisberg .scene-stamp.active .bio-h .stamp.eisberg { color: #68c6e8; text-shadow: 0 0 34px rgba(104, 198, 232,0.55); }
body.theme-eisberg .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.eisberg { color: #68c6e8; }
/* kalte, sachliche welt: der kick ist ein kraeuseln, kein stoss */
body.theme-eisberg.kick #world { animation: kickEisberg 0.3s ease-out; }
@keyframes kickEisberg { 0%{filter:brightness(1);} 50%{filter:brightness(1.08) saturate(1.06);} 100%{filter:brightness(1);} }

/* karte Seite AM — wasserlinie mit spitze oben und masse unten */
.track-card[data-song="eisberg"] .tc-art { background:
    linear-gradient(180deg, transparent 0 32%, rgba(224,244,255,0.5) 32% 33%, transparent 33.6% 100%),
    radial-gradient(ellipse at 50% 22%, rgba(224,244,255,0.34) 0 9%, transparent 16%),
    radial-gradient(ellipse at 50% 74%, rgba(104,198,232,0.26) 0 40%, transparent 62%),
    linear-gradient(180deg, #0d1f33 0%, #123a5c 33%, #0b2440 62%, #050e1c 100%); }
.track-card[data-song="eisberg"] .tc-title {
  font-family: 'Barlow Condensed', 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(1.35rem, 3.1vw, 2.3rem); line-height: 1.05;
  color: transparent; background: linear-gradient(158deg, #ffffff, #e0f4ff 42%, #68c6e8);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(104, 198, 232,0.45));
}
.track-card[data-song="eisberg"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(104, 198, 232,0.5)) drop-shadow(0 0 15px rgba(104, 198, 232,0.45)); }

/* ============================================================
   WELT AN — ICH SPRECHE BEIDES (theme-bruecke)
   Bruecke ueber die Schlucht: rosenholz + abendviolett · abril fatface
   ============================================================ */
:root { --bruecke: #b05894; --bruecke-hell: #ffc8e2; }
body.theme-bruecke { --accent: #b05894; --accent-rgb: 176, 88, 148; --f-display: 'Abril Fatface', 'Playfair Display', serif; }
/* Der climax besteht aus ZWEI zeilen: die erste traegt .lt, die zweite .bang.
   Eine regel nur auf .bang schrumpft darum nur die halbe ueberschrift und die
   erste zeile laeuft aus dem bild. Groesse gehoert an den container. */
body.theme-bruecke .climax-text { font-size: clamp(1.9rem, 10vw, 6.8rem); }
body.theme-bruecke .huge, body.theme-bruecke .wave-word, body.theme-bruecke .burst-center, body.theme-bruecke .climax .bang,
body.theme-bruecke .sl-bottom, body.theme-bruecke .trio-line, body.theme-bruecke .endcard-cta,
body.theme-bruecke .name-big, body.theme-bruecke .qa-a { font-weight: 400; letter-spacing: 0; }
/* Abril Fatface ist ein fetter display-serif und laeuft breit — abschlag
   gleich beim anlegen (lehre aus AE/AH/AK/AL). */
body.theme-bruecke .trio-line { font-size: clamp(1.8rem, 6.4vw, 5.6rem); }
body.theme-bruecke .name-big { font-size: clamp(1.9rem, 6.8vw, 5.8rem); }
body.theme-bruecke #ticker { background: linear-gradient(90deg, #b05894, #ffc8e2 55%, #b05894); color: #240c1c; letter-spacing: 0.08em; }
body.theme-bruecke #progress { background: linear-gradient(90deg, #ffc8e2, #b05894 60%, #ffc8e2); box-shadow: 0 0 13px rgba(176, 88, 148,0.6); }
body.theme-bruecke .dot { background: #b05894; box-shadow: 0 0 9px #b05894; }
body.theme-bruecke #theme-tag { color: #ffc8e2; text-shadow: 0 0 11px rgba(176, 88, 148,0.5); }
body.theme-bruecke #hud { color: rgba(255,200,226,0.85); }
body.theme-bruecke #controls button:hover { border-color: #b05894; color: #ffc8e2; box-shadow: 0 0 13px rgba(176, 88, 148,0.5); }
body.theme-bruecke .qa-q { color: #ffc8e2; }
body.theme-bruecke .q-mark { color: #b05894; }
body.theme-bruecke #redwash { background: #b05894; }
body.theme-bruecke #shockwave { border-color: #b05894; box-shadow: 0 0 60px #b05894, inset 0 0 60px rgba(176, 88, 148,0.5); }
body.theme-bruecke .sl-bottom, body.theme-bruecke .huge, body.theme-bruecke .bu-line.bu-red, body.theme-bruecke .anti-line.big,
body.theme-bruecke .wave-word, body.theme-bruecke .rain-word, body.theme-bruecke .burst-center, body.theme-bruecke .climax .bang,
body.theme-bruecke .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #ffc8e2 42%, #b05894 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(176, 88, 148,0.45));
}
body.theme-bruecke .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #b05894; filter: drop-shadow(0 0 12px rgba(176, 88, 148,0.4)); }
body.theme-bruecke .sl-bottom strong { color: #ffc8e2; -webkit-text-fill-color: #ffc8e2; }
body.theme-bruecke .climax .bang.b2, body.theme-bruecke .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-bruecke .climax-sub, body.theme-bruecke .cx-sub { color: #ffc8e2; }
body.theme-bruecke .qa-a { -webkit-text-fill-color: transparent; }
body.theme-bruecke .q-text .codeword {
  color: #b05894; background: rgba(176, 88, 148,0.14);
  box-shadow: inset 0 0 0 1px rgba(176, 88, 148,0.32);
  text-shadow: 0 0 18px rgba(176, 88, 148,0.45);
}
body.theme-bruecke .term-body .out.cyan { color: #ffc8e2; }
body.theme-bruecke .term-body .out.green { color: #b8e0a8; }
body.theme-bruecke .chart-bar .bar.red { background: linear-gradient(90deg, #3a2030, #66384f); }
body.theme-bruecke .chart-bar .bar.cyan { background: linear-gradient(90deg, #b05894, #ffc8e2); }
body.theme-bruecke .chart-bar .bar.green { background: linear-gradient(90deg, #b8e0a8, #eaffdc); }
body.theme-bruecke .burst-w { color: #ffc8e2; opacity: 0.84; }
body.theme-bruecke .bm-row { color: #ffc8e2; opacity: 0.88; }
body.theme-bruecke .trio-line.bruecke { color: #b05894; text-shadow: 0 0 34px rgba(176, 88, 148,0.55); }
body.theme-bruecke .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-bruecke .scene-stamp.active .bio-h .stamp.bruecke { color: #b05894; text-shadow: 0 0 34px rgba(176, 88, 148,0.55); }
body.theme-bruecke .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.bruecke { color: #b05894; }
body.theme-bruecke.kick #world { animation: kickBruecke 0.28s ease-out; }
@keyframes kickBruecke { 0%{transform:scale(1);} 50%{transform:scale(1.008); filter:brightness(1.08);} 100%{transform:scale(1); filter:none;} }

/* karte Seite AN — zwei kanten und die verbindung dazwischen */
.track-card[data-song="bruecke"] .tc-art { background:
    linear-gradient(180deg, transparent 0 60%, rgba(176,88,148,0.42) 60% 61.4%, transparent 61.4%),
    linear-gradient(90deg, rgba(46,34,44,0.95) 0 18%, transparent 18% 82%, rgba(46,34,44,0.95) 82% 100%),
    radial-gradient(circle at 18% 54%, rgba(255,200,226,0.3) 0 4%, transparent 8%),
    radial-gradient(circle at 82% 54%, rgba(255,200,226,0.3) 0 4%, transparent 8%),
    linear-gradient(180deg, #1b1024 0%, #3a1c3c 44%, #2a1430 66%, #0b0710 100%); }
.track-card[data-song="bruecke"] .tc-title {
  font-family: 'Abril Fatface', 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(1.25rem, 2.9vw, 2.1rem); line-height: 1.08;
  color: transparent; background: linear-gradient(158deg, #ffffff, #ffc8e2 42%, #b05894);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(176, 88, 148,0.45));
}
.track-card[data-song="bruecke"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(176, 88, 148,0.5)) drop-shadow(0 0 15px rgba(176, 88, 148,0.45)); }

/* ============================================================
   WELT AO — UMBAU BEI LAUFENDEM BETRIEB (theme-umbau)
   Fassade im Umbau: neonindigo (neu) + bernstein (alt) · audiowide
   ============================================================ */
:root { --umbau: #7c6cff; --umbau-hell: #d6d2ff; }
body.theme-umbau { --accent: #7c6cff; --accent-rgb: 124, 108, 255; --f-display: 'Audiowide', 'Orbitron', sans-serif; }
/* Der climax besteht aus ZWEI zeilen: die erste traegt .lt, die zweite .bang.
   Eine regel nur auf .bang schrumpft darum nur die halbe ueberschrift und die
   erste zeile laeuft aus dem bild. Groesse gehoert an den container. */
body.theme-umbau .climax-text { font-size: clamp(1.4rem, 7.2vw, 4.6rem); }
body.theme-umbau .huge, body.theme-umbau .wave-word, body.theme-umbau .burst-center, body.theme-umbau .climax .bang,
body.theme-umbau .sl-bottom, body.theme-umbau .trio-line, body.theme-umbau .endcard-cta,
body.theme-umbau .name-big, body.theme-umbau .qa-a { font-weight: 400; letter-spacing: -0.01em; }
/* Audiowide laeuft sehr breit — abschlag gleich beim anlegen. */
body.theme-umbau .trio-line { font-size: clamp(1.5rem, 5vw, 4.4rem); }
body.theme-umbau .name-big { font-size: clamp(1.7rem, 5.6vw, 4.8rem); }
body.theme-umbau .burst-center { font-size: clamp(1rem, 3vw, 2.6rem); }
body.theme-umbau .endcard-cta { font-size: clamp(1rem, 2.8vw, 2.2rem); }
body.theme-umbau #ticker { background: linear-gradient(90deg, #7c6cff, #d6d2ff 55%, #7c6cff); color: #12102a; letter-spacing: 0.08em; }
body.theme-umbau #progress { background: linear-gradient(90deg, #d6d2ff, #7c6cff 60%, #d6d2ff); box-shadow: 0 0 13px rgba(124, 108, 255,0.6); }
body.theme-umbau .dot { background: #7c6cff; box-shadow: 0 0 9px #7c6cff; }
body.theme-umbau #theme-tag { color: #d6d2ff; text-shadow: 0 0 11px rgba(124, 108, 255,0.5); }
body.theme-umbau #hud { color: rgba(214,210,255,0.85); }
body.theme-umbau #controls button:hover { border-color: #7c6cff; color: #d6d2ff; box-shadow: 0 0 13px rgba(124, 108, 255,0.5); }
body.theme-umbau .qa-q { color: #d6d2ff; }
body.theme-umbau .q-mark { color: #7c6cff; }
body.theme-umbau #redwash { background: #7c6cff; }
body.theme-umbau #shockwave { border-color: #7c6cff; box-shadow: 0 0 60px #7c6cff, inset 0 0 60px rgba(124, 108, 255,0.5); }
body.theme-umbau .sl-bottom, body.theme-umbau .huge, body.theme-umbau .bu-line.bu-red, body.theme-umbau .anti-line.big,
body.theme-umbau .wave-word, body.theme-umbau .rain-word, body.theme-umbau .burst-center, body.theme-umbau .climax .bang,
body.theme-umbau .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #d6d2ff 42%, #7c6cff 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(124, 108, 255,0.45));
}
body.theme-umbau .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #7c6cff; filter: drop-shadow(0 0 12px rgba(124, 108, 255,0.4)); }
body.theme-umbau .sl-bottom strong { color: #ffba5c; -webkit-text-fill-color: #ffba5c; }
body.theme-umbau .climax .bang.b2, body.theme-umbau .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-umbau .climax-sub, body.theme-umbau .cx-sub { color: #d6d2ff; }
body.theme-umbau .qa-a { -webkit-text-fill-color: transparent; }
body.theme-umbau .q-text .codeword {
  color: #7c6cff; background: rgba(124, 108, 255,0.14);
  box-shadow: inset 0 0 0 1px rgba(124, 108, 255,0.32);
  text-shadow: 0 0 18px rgba(124, 108, 255,0.45);
}
body.theme-umbau .term-body .out.cyan { color: #d6d2ff; }
body.theme-umbau .term-body .out.green { color: #9be8a8; }
/* das ALTE bleibt bernsteinfarben — der zwei-farben-kontrast ist die aussage */
body.theme-umbau .chart-bar .bar.red { background: linear-gradient(90deg, #6a4a1c, #ffba5c); }
body.theme-umbau .chart-bar .bar.cyan { background: linear-gradient(90deg, #7c6cff, #d6d2ff); }
body.theme-umbau .chart-bar .bar.green { background: linear-gradient(90deg, #7c6cff, #ffffff); }
body.theme-umbau .burst-w { color: #ffba5c; opacity: 0.84; }
body.theme-umbau .bm-row { color: #d6d2ff; opacity: 0.88; }
body.theme-umbau .trio-line.umbau { color: #7c6cff; text-shadow: 0 0 34px rgba(124, 108, 255,0.55); }
body.theme-umbau .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-umbau .scene-stamp.active .bio-h .stamp.umbau { color: #7c6cff; text-shadow: 0 0 34px rgba(124, 108, 255,0.55); }
body.theme-umbau .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.umbau { color: #7c6cff; }
/* kein wackeln: ein zitterndes bild wuerde „ohne stillstand" widersprechen */
body.theme-umbau.kick #world { animation: kickUmbau 0.24s ease-out; }
@keyframes kickUmbau { 0%{filter:brightness(1);} 50%{filter:brightness(1.12) saturate(1.08);} 100%{filter:brightness(1);} }

/* karte Seite AO — fassade, unten schon neu, oben noch alt */
.track-card[data-song="umbau"] .tc-art { background:
    repeating-linear-gradient(90deg, transparent 0 8%, rgba(255,186,92,0.22) 8% 13%, transparent 13% 21%),
    linear-gradient(180deg, transparent 0 54%, rgba(124,108,255,0.5) 54% 55.6%, transparent 55.6%),
    linear-gradient(180deg, rgba(255,186,92,0.12) 0 54%, rgba(124,108,255,0.16) 54% 100%),
    linear-gradient(180deg, #0d0b1c 0%, #16142a 55%, #0a0914 100%); }
.track-card[data-song="umbau"] .tc-title {
  font-family: 'Audiowide', 'Orbitron', sans-serif; font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1.55rem); line-height: 1.14;
  color: transparent; background: linear-gradient(158deg, #ffffff, #d6d2ff 42%, #7c6cff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(124, 108, 255,0.45));
}
.track-card[data-song="umbau"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(124, 108, 255,0.5)) drop-shadow(0 0 15px rgba(124, 108, 255,0.45)); }

/* ============================================================
   WELT AT — WEITER OHNE MICH (theme-folge)
   Episodenband: limettengold + tiefes olivschwarz · kanit
   Der Farbkreis ist bei 46 Welten praktisch voll — alle verbleibenden
   Luecken lagen unter 40°. Genommen wurde die groesste (68°), und zwar
   ihre GELBGRUENE haelfte: die vier nachbarn im bereich 45–92° sind
   comic (50°) und freiheit (45°) im reinen gelb sowie node und anstoss
   (beide 87°) im gruen — bei 68° dazwischen stand noch nichts.
   ============================================================ */
:root { --folge: #d0e830; --folge-hell: #f5ffc8; }
body.theme-folge { --accent: #d0e830; --accent-rgb: 208, 232, 48; --f-display: 'Kanit', 'Oswald', sans-serif; }
body.theme-folge .huge, body.theme-folge .wave-word, body.theme-folge .burst-center, body.theme-folge .climax .bang,
body.theme-folge .sl-bottom, body.theme-folge .trio-line, body.theme-folge .endcard-cta,
body.theme-folge .name-big, body.theme-folge .qa-a { font-weight: 800; letter-spacing: -0.008em; }
/* Kanit laeuft mittelbreit — moderater abschlag, am CONTAINER .climax-text,
   damit beide climax-zeilen gleich schrumpfen. */
body.theme-folge .climax-text { font-size: clamp(2rem, 10vw, 7.2rem); }
body.theme-folge .trio-line { font-size: clamp(1.9rem, 7.2vw, 6.2rem); }
body.theme-folge .name-big { font-size: clamp(2rem, 7.4vw, 6.4rem); }
body.theme-folge .burst-center { font-size: clamp(1.1rem, 3.2vw, 2.8rem); }
body.theme-folge .endcard-cta { font-size: clamp(1rem, 2.6vw, 2rem); }
body.theme-folge #ticker { background: linear-gradient(90deg, #d0e830, #f5ffc8 55%, #d0e830); color: #15180a; letter-spacing: 0.08em; }
body.theme-folge #progress { background: linear-gradient(90deg, #f5ffc8, #d0e830 60%, #f5ffc8); box-shadow: 0 0 13px rgba(208, 232, 48,0.6); }
body.theme-folge .dot { background: #d0e830; box-shadow: 0 0 9px #d0e830; }
body.theme-folge #theme-tag { color: #f5ffc8; text-shadow: 0 0 11px rgba(208, 232, 48,0.5); }
body.theme-folge #hud { color: rgba(245,255,200,0.85); }
body.theme-folge #controls button:hover { border-color: #d0e830; color: #f5ffc8; box-shadow: 0 0 13px rgba(208, 232, 48,0.5); }
body.theme-folge .qa-q { color: #f5ffc8; }
body.theme-folge .q-mark { color: #d0e830; }
body.theme-folge #redwash { background: #d0e830; }
body.theme-folge #shockwave { border-color: #d0e830; box-shadow: 0 0 60px #d0e830, inset 0 0 60px rgba(208, 232, 48,0.5); }
body.theme-folge .sl-bottom, body.theme-folge .huge, body.theme-folge .bu-line.bu-red, body.theme-folge .anti-line.big,
body.theme-folge .wave-word, body.theme-folge .rain-word, body.theme-folge .burst-center, body.theme-folge .climax .bang,
body.theme-folge .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #f5ffc8 42%, #d0e830 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(208, 232, 48,0.45));
}
body.theme-folge .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #d0e830; filter: drop-shadow(0 0 12px rgba(208, 232, 48,0.4)); }
body.theme-folge .sl-bottom strong { color: #f5ffc8; -webkit-text-fill-color: #f5ffc8; }
body.theme-folge .climax .bang.b2, body.theme-folge .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-folge .climax-sub, body.theme-folge .cx-sub { color: #f5ffc8; }
body.theme-folge .qa-a { -webkit-text-fill-color: transparent; }
body.theme-folge .q-text .codeword {
  color: #d0e830; background: rgba(208, 232, 48,0.14);
  box-shadow: inset 0 0 0 1px rgba(208, 232, 48,0.32);
  text-shadow: 0 0 18px rgba(208, 232, 48,0.45);
}
body.theme-folge .term-body .out.cyan { color: #f5ffc8; }
body.theme-folge .term-body .out.green { color: #d0e830; }
body.theme-folge .chart-bar .bar.red { background: linear-gradient(90deg, #2e3216, #8a9146); }
body.theme-folge .chart-bar .bar.cyan { background: linear-gradient(90deg, #d0e830, #f5ffc8); }
body.theme-folge .chart-bar .bar.green { background: linear-gradient(90deg, #d0e830, #ffffff); }
body.theme-folge .burst-w { color: #f5ffc8; opacity: 0.84; }
body.theme-folge .bm-row { color: #f5ffc8; opacity: 0.88; }
body.theme-folge .trio-line.folge { color: #d0e830; text-shadow: 0 0 34px rgba(208, 232, 48,0.55); }
body.theme-folge .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-folge .scene-stamp.active .bio-h .stamp.folge { color: #d0e830; text-shadow: 0 0 34px rgba(208, 232, 48,0.55); }
body.theme-folge .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.folge { color: #d0e830; }
body.theme-folge.kick #world { animation: kickFolge 0.24s ease-out; }
@keyframes kickFolge { 0%{filter:brightness(1);} 50%{filter:brightness(1.12) saturate(1.08);} 100%{filter:brightness(1);} }

/* karte Seite AT — der filmstreifen: perforation oben/unten, kaesten dazwischen */
.track-card[data-song="folge"] .tc-art { background:
    repeating-linear-gradient(90deg, rgba(134,148,86,0.5) 0 5%, transparent 5% 14%),
    linear-gradient(180deg, transparent 0 20%, rgba(7,8,4,0.9) 20% 74%, transparent 74%),
    radial-gradient(circle at 20% 47%, rgba(208,232,48,0.9) 0 3.2%, transparent 4.4%),
    radial-gradient(circle at 44% 47%, rgba(208,232,48,0.9) 0 3.2%, transparent 4.4%),
    radial-gradient(circle at 68% 47%, transparent 0 2.2%, rgba(245,255,200,0.85) 2.2% 3.4%, transparent 4.4%),
    radial-gradient(circle at 90% 47%, transparent 0 2.2%, rgba(245,255,200,0.85) 2.2% 3.4%, transparent 4.4%),
    linear-gradient(180deg, #14160a 0%, #0d0f07 60%, #060703 100%); }
/* die JETZT-marke */
.track-card[data-song="folge"] .tc-art::after {
  content: ''; position: absolute; left: 56%; top: 14%; bottom: 22%; width: 2px;
  background: rgba(245,255,200,0.8); box-shadow: 0 0 10px rgba(208,232,48,0.6);
}
.track-card[data-song="folge"] .tc-title {
  font-family: 'Kanit', 'Oswald', sans-serif; font-weight: 800;
  font-size: clamp(1.15rem, 2.7vw, 1.95rem); line-height: 1.08;
  color: transparent; background: linear-gradient(158deg, #ffffff, #f5ffc8 42%, #d0e830);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(208, 232, 48,0.45));
}
.track-card[data-song="folge"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(208, 232, 48,0.5)) drop-shadow(0 0 15px rgba(208, 232, 48,0.45)); }

/* ============================================================
   WELT AS — ICH FRAGE DIE, DIE ES BENUTZEN (theme-stimmen)
   Stimmen gegen die Decke: signalgruen + tiefes hallengruen · saira stencil
   Farbe wieder ausgerechnet: 112° war mit 50° die groesste luecke im
   farbkreis. Bei welt AR hatte ich sie noch gemieden, weil dort fuenf
   welten in der nachbarschaft lagen und violett freier war — violett ist
   jetzt vergeben, also ist gruen dran. Bewusst ein klares BLATTGRUEN,
   nicht das oliv von node/anstoss (87°) und nicht das mint von code (137°).
   Schablonenschrift, weil die welt von protest und durchkommen handelt.
   ============================================================ */
:root { --stimmen: #5be147; --stimmen-hell: #d6ffce; }
body.theme-stimmen { --accent: #5be147; --accent-rgb: 91, 225, 71; --f-display: 'Saira Stencil One', 'Staatliches', sans-serif; }
body.theme-stimmen .huge, body.theme-stimmen .wave-word, body.theme-stimmen .burst-center, body.theme-stimmen .climax .bang,
body.theme-stimmen .sl-bottom, body.theme-stimmen .trio-line, body.theme-stimmen .endcard-cta,
body.theme-stimmen .name-big, body.theme-stimmen .qa-a { font-weight: 400; letter-spacing: 0.005em; }
/* Saira Stencil One laeuft breit — abschlag gleich beim anlegen, am
   CONTAINER .climax-text, damit beide climax-zeilen gleich schrumpfen. */
body.theme-stimmen .climax-text { font-size: clamp(1.5rem, 7.4vw, 4.8rem); }
body.theme-stimmen .trio-line { font-size: clamp(1.5rem, 5.4vw, 4.6rem); }
body.theme-stimmen .name-big { font-size: clamp(1.7rem, 6vw, 5rem); }
body.theme-stimmen .burst-center { font-size: clamp(0.95rem, 2.8vw, 2.4rem); }
body.theme-stimmen .endcard-cta { font-size: clamp(0.95rem, 2.5vw, 1.9rem); }
body.theme-stimmen #ticker { background: linear-gradient(90deg, #5be147, #d6ffce 55%, #5be147); color: #06180a; letter-spacing: 0.08em; }
body.theme-stimmen #progress { background: linear-gradient(90deg, #d6ffce, #5be147 60%, #d6ffce); box-shadow: 0 0 13px rgba(91, 225, 71,0.6); }
body.theme-stimmen .dot { background: #5be147; box-shadow: 0 0 9px #5be147; }
body.theme-stimmen #theme-tag { color: #d6ffce; text-shadow: 0 0 11px rgba(91, 225, 71,0.5); }
body.theme-stimmen #hud { color: rgba(214,255,206,0.85); }
body.theme-stimmen #controls button:hover { border-color: #5be147; color: #d6ffce; box-shadow: 0 0 13px rgba(91, 225, 71,0.5); }
body.theme-stimmen .qa-q { color: #d6ffce; }
body.theme-stimmen .q-mark { color: #5be147; }
body.theme-stimmen #redwash { background: #5be147; }
body.theme-stimmen #shockwave { border-color: #5be147; box-shadow: 0 0 60px #5be147, inset 0 0 60px rgba(91, 225, 71,0.5); }
body.theme-stimmen .sl-bottom, body.theme-stimmen .huge, body.theme-stimmen .bu-line.bu-red, body.theme-stimmen .anti-line.big,
body.theme-stimmen .wave-word, body.theme-stimmen .rain-word, body.theme-stimmen .burst-center, body.theme-stimmen .climax .bang,
body.theme-stimmen .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #d6ffce 42%, #5be147 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(91, 225, 71,0.45));
}
body.theme-stimmen .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #5be147; filter: drop-shadow(0 0 12px rgba(91, 225, 71,0.4)); }
body.theme-stimmen .sl-bottom strong { color: #d6ffce; -webkit-text-fill-color: #d6ffce; }
body.theme-stimmen .climax .bang.b2, body.theme-stimmen .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-stimmen .climax-sub, body.theme-stimmen .cx-sub { color: #d6ffce; }
body.theme-stimmen .qa-a { -webkit-text-fill-color: transparent; }
body.theme-stimmen .q-text .codeword {
  color: #5be147; background: rgba(91, 225, 71,0.14);
  box-shadow: inset 0 0 0 1px rgba(91, 225, 71,0.32);
  text-shadow: 0 0 18px rgba(91, 225, 71,0.45);
}
body.theme-stimmen .term-body .out.cyan { color: #d6ffce; }
body.theme-stimmen .term-body .out.green { color: #5be147; }
body.theme-stimmen .chart-bar .bar.red { background: linear-gradient(90deg, #24331f, #6a8a5e); }
body.theme-stimmen .chart-bar .bar.cyan { background: linear-gradient(90deg, #5be147, #d6ffce); }
body.theme-stimmen .chart-bar .bar.green { background: linear-gradient(90deg, #5be147, #ffffff); }
body.theme-stimmen .burst-w { color: #d6ffce; opacity: 0.84; }
body.theme-stimmen .bm-row { color: #d6ffce; opacity: 0.88; }
body.theme-stimmen .trio-line.stimmen { color: #5be147; text-shadow: 0 0 34px rgba(91, 225, 71,0.55); }
body.theme-stimmen .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-stimmen .scene-stamp.active .bio-h .stamp.stimmen { color: #5be147; text-shadow: 0 0 34px rgba(91, 225, 71,0.55); }
body.theme-stimmen .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.stimmen { color: #5be147; }
body.theme-stimmen.kick #world { animation: kickStimmen 0.24s ease-out; }
@keyframes kickStimmen { 0%{filter:brightness(1);} 50%{filter:brightness(1.12) saturate(1.08);} 100%{filter:brightness(1);} }

/* karte Seite AS — wellen von unten, eine decke mit luecken darueber */
.track-card[data-song="stimmen"] .tc-art { background:
    linear-gradient(90deg, transparent 0 6%, rgba(214,255,206,0.34) 6% 20%, transparent 20%),
    linear-gradient(90deg, transparent 0 28%, rgba(214,255,206,0.34) 28% 46%, transparent 46%),
    linear-gradient(90deg, transparent 0 58%, rgba(214,255,206,0.34) 58% 72%, transparent 72%),
    linear-gradient(90deg, transparent 0 82%, rgba(214,255,206,0.34) 82% 94%, transparent 94%),
    radial-gradient(ellipse 34% 30% at 50% 108%, transparent 0 62%, rgba(91,225,71,0.42) 62% 68%, transparent 70%),
    radial-gradient(ellipse 50% 44% at 50% 108%, transparent 0 66%, rgba(91,225,71,0.3) 66% 71%, transparent 73%),
    radial-gradient(ellipse 68% 60% at 50% 108%, transparent 0 70%, rgba(91,225,71,0.2) 70% 74%, transparent 76%),
    linear-gradient(180deg, #0a1410 0%, #080f0a 60%, #040805 100%); }
/* die decke als eigener streifen — sie liegt auf 34 % der kartenhoehe */
.track-card[data-song="stimmen"] .tc-art::after {
  content: ''; position: absolute; left: 0; right: 0; top: 34%; height: 5px;
  background: linear-gradient(90deg, rgba(74,88,72,0.9) 0 22%, transparent 22% 30%,
              rgba(74,88,72,0.9) 30% 62%, transparent 62% 70%, rgba(74,88,72,0.9) 70% 100%);
}
.track-card[data-song="stimmen"] .tc-title {
  font-family: 'Saira Stencil One', 'Staatliches', sans-serif; font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1.55rem); line-height: 1.12;
  color: transparent; background: linear-gradient(158deg, #ffffff, #d6ffce 42%, #5be147);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(91, 225, 71,0.45));
}
.track-card[data-song="stimmen"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(91, 225, 71,0.5)) drop-shadow(0 0 15px rgba(91, 225, 71,0.45)); }

/* ============================================================
   WELT AR — NICHT MEIN ERSTES PROJEKT (theme-jahre)
   Lampen-Anzeigetafel: orchidee + tiefes nachtviolett · big shoulders
   Farbe NICHT nach gefuehl gewaehlt: die farbtoene aller 44 welten
   ausgerechnet und die groesste freie luecke im farbkreis genommen
   (294°, zwischen paradies 269° und bruecke 319°). Gruen waere naeher
   am fussball gewesen — aber davon hat der katalog schon fuenf.
   ============================================================ */
:root { --jahre: #e35ff2; --jahre-hell: #ffd6fc; }
body.theme-jahre { --accent: #e35ff2; --accent-rgb: 227, 95, 242; --f-display: 'Big Shoulders Display', 'Oswald', sans-serif; }
body.theme-jahre .huge, body.theme-jahre .wave-word, body.theme-jahre .burst-center, body.theme-jahre .climax .bang,
body.theme-jahre .sl-bottom, body.theme-jahre .trio-line, body.theme-jahre .endcard-cta,
body.theme-jahre .name-big, body.theme-jahre .qa-a { font-weight: 800; letter-spacing: 0.005em; }
/* Big Shoulders laeuft SCHMAL — hier darf die schrift also groesser
   stehen als bei den breiten welten. Trotzdem am CONTAINER .climax-text,
   damit beide climax-zeilen gleich skalieren. */
body.theme-jahre .climax-text { font-size: clamp(2.4rem, 12vw, 9rem); }
body.theme-jahre .trio-line { font-size: clamp(2.2rem, 8.4vw, 7.4rem); }
body.theme-jahre .name-big { font-size: clamp(2.4rem, 8.6vw, 7.6rem); }
body.theme-jahre .burst-center { font-size: clamp(1.2rem, 3.6vw, 3.1rem); }
body.theme-jahre .endcard-cta { font-size: clamp(1.1rem, 3vw, 2.4rem); }
body.theme-jahre #ticker { background: linear-gradient(90deg, #e35ff2, #ffd6fc 55%, #e35ff2); color: #200527; letter-spacing: 0.08em; }
body.theme-jahre #progress { background: linear-gradient(90deg, #ffd6fc, #e35ff2 60%, #ffd6fc); box-shadow: 0 0 13px rgba(227, 95, 242,0.6); }
body.theme-jahre .dot { background: #e35ff2; box-shadow: 0 0 9px #e35ff2; }
body.theme-jahre #theme-tag { color: #ffd6fc; text-shadow: 0 0 11px rgba(227, 95, 242,0.5); }
body.theme-jahre #hud { color: rgba(255,214,252,0.85); }
body.theme-jahre #controls button:hover { border-color: #e35ff2; color: #ffd6fc; box-shadow: 0 0 13px rgba(227, 95, 242,0.5); }
body.theme-jahre .qa-q { color: #ffd6fc; }
body.theme-jahre .q-mark { color: #e35ff2; }
body.theme-jahre #redwash { background: #e35ff2; }
body.theme-jahre #shockwave { border-color: #e35ff2; box-shadow: 0 0 60px #e35ff2, inset 0 0 60px rgba(227, 95, 242,0.5); }
body.theme-jahre .sl-bottom, body.theme-jahre .huge, body.theme-jahre .bu-line.bu-red, body.theme-jahre .anti-line.big,
body.theme-jahre .wave-word, body.theme-jahre .rain-word, body.theme-jahre .burst-center, body.theme-jahre .climax .bang,
body.theme-jahre .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #ffd6fc 42%, #e35ff2 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(227, 95, 242,0.45));
}
body.theme-jahre .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #e35ff2; filter: drop-shadow(0 0 12px rgba(227, 95, 242,0.4)); }
body.theme-jahre .sl-bottom strong { color: #ffd6fc; -webkit-text-fill-color: #ffd6fc; }
body.theme-jahre .climax .bang.b2, body.theme-jahre .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-jahre .climax-sub, body.theme-jahre .cx-sub { color: #ffd6fc; }
body.theme-jahre .qa-a { -webkit-text-fill-color: transparent; }
body.theme-jahre .q-text .codeword {
  color: #e35ff2; background: rgba(227, 95, 242,0.14);
  box-shadow: inset 0 0 0 1px rgba(227, 95, 242,0.32);
  text-shadow: 0 0 18px rgba(227, 95, 242,0.45);
}
body.theme-jahre .term-body .out.cyan { color: #ffd6fc; }
body.theme-jahre .term-body .out.green { color: #e35ff2; }
body.theme-jahre .chart-bar .bar.red { background: linear-gradient(90deg, #3a1240, #8a4a95); }
body.theme-jahre .chart-bar .bar.cyan { background: linear-gradient(90deg, #e35ff2, #ffd6fc); }
body.theme-jahre .chart-bar .bar.green { background: linear-gradient(90deg, #e35ff2, #ffffff); }
body.theme-jahre .burst-w { color: #ffd6fc; opacity: 0.84; }
body.theme-jahre .bm-row { color: #ffd6fc; opacity: 0.88; }
body.theme-jahre .trio-line.jahre { color: #e35ff2; text-shadow: 0 0 34px rgba(227, 95, 242,0.55); }
body.theme-jahre .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-jahre .scene-stamp.active .bio-h .stamp.jahre { color: #e35ff2; text-shadow: 0 0 34px rgba(227, 95, 242,0.55); }
body.theme-jahre .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.jahre { color: #e35ff2; }
body.theme-jahre.kick #world { animation: kickJahre 0.24s ease-out; }
@keyframes kickJahre { 0%{filter:brightness(1);} 50%{filter:brightness(1.12) saturate(1.08);} 100%{filter:brightness(1);} }

/* karte Seite AR — die lampentafel: ein punktraster mit ein paar hellen lampen */
.track-card[data-song="jahre"] .tc-art { background:
    radial-gradient(circle at 22% 30%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 30% 30%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 38% 30%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 22% 44%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 38% 44%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 62% 30%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 70% 30%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 78% 44%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 62% 58%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 78% 58%, rgba(255,214,252,0.85) 0 1.5%, transparent 2.4%),
    radial-gradient(circle at 50% 40%, rgba(227,95,242,0.3) 0 22%, transparent 46%),
    linear-gradient(180deg, #1e0a24 0%, #130717 62%, #08040a 100%); }
.track-card[data-song="jahre"] .tc-title {
  font-family: 'Big Shoulders Display', 'Oswald', sans-serif; font-weight: 800;
  font-size: clamp(1.2rem, 2.9vw, 2.1rem); line-height: 1.05;
  color: transparent; background: linear-gradient(158deg, #ffffff, #ffd6fc 42%, #e35ff2);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(227, 95, 242,0.45));
}
.track-card[data-song="jahre"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(227, 95, 242,0.5)) drop-shadow(0 0 15px rgba(227, 95, 242,0.45)); }

/* ============================================================
   WELT AQ — NICHT SCHWARZ, NICHT WEISS (theme-regler)
   Reglerwand: platin + tiefschwarz · bodoni moda
   Die einzige welt im katalog OHNE eigene farbe — genau das ist die
   aussage. Statt eines farbtons traegt sie den kontrast selbst:
   weiss → platin → grau. Bodoni Moda hat den staerksten strich-
   kontrast aller geladenen schriften (fett und haarfein im selben
   buchstaben) — schwarz und weiss stecken schon im buchstaben.
   ============================================================ */
:root { --regler: #dfe4ec; --regler-hell: #ffffff; --regler-grau: #8f96a4; }
body.theme-regler { --accent: #dfe4ec; --accent-rgb: 223, 228, 236; --f-display: 'Bodoni Moda', 'Playfair Display', serif; }
body.theme-regler .huge, body.theme-regler .wave-word, body.theme-regler .burst-center, body.theme-regler .climax .bang,
body.theme-regler .sl-bottom, body.theme-regler .trio-line, body.theme-regler .endcard-cta,
body.theme-regler .name-big, body.theme-regler .qa-a { font-weight: 900; letter-spacing: -0.01em; }
/* Bodoni Moda laeuft breit — abschlag gleich beim anlegen, und zwar am
   CONTAINER .climax-text, damit beide climax-zeilen gleich schrumpfen. */
body.theme-regler .climax-text { font-size: clamp(1.7rem, 8.6vw, 5.6rem); }
body.theme-regler .trio-line { font-size: clamp(1.7rem, 6vw, 5.2rem); }
body.theme-regler .name-big { font-size: clamp(1.8rem, 6.4vw, 5.4rem); }
body.theme-regler .burst-center { font-size: clamp(1.05rem, 3vw, 2.6rem); }
body.theme-regler .endcard-cta { font-size: clamp(1rem, 2.7vw, 2.1rem); }
body.theme-regler #ticker { background: linear-gradient(90deg, #8f96a4, #ffffff 50%, #8f96a4); color: #0a0a0c; letter-spacing: 0.08em; }
body.theme-regler #progress { background: linear-gradient(90deg, #ffffff, #8f96a4 60%, #ffffff); box-shadow: 0 0 13px rgba(223, 228, 236,0.6); }
body.theme-regler .dot { background: #dfe4ec; box-shadow: 0 0 9px #dfe4ec; }
body.theme-regler #theme-tag { color: #ffffff; text-shadow: 0 0 11px rgba(223, 228, 236,0.5); }
body.theme-regler #hud { color: rgba(223,228,236,0.85); }
body.theme-regler #controls button:hover { border-color: #dfe4ec; color: #ffffff; box-shadow: 0 0 13px rgba(223, 228, 236,0.5); }
body.theme-regler .qa-q { color: #dfe4ec; }
body.theme-regler .q-mark { color: #8f96a4; }
body.theme-regler #redwash { background: #dfe4ec; }
body.theme-regler #shockwave { border-color: #dfe4ec; box-shadow: 0 0 60px #dfe4ec, inset 0 0 60px rgba(223, 228, 236,0.5); }
body.theme-regler .sl-bottom, body.theme-regler .huge, body.theme-regler .bu-line.bu-red, body.theme-regler .anti-line.big,
body.theme-regler .wave-word, body.theme-regler .rain-word, body.theme-regler .burst-center, body.theme-regler .climax .bang,
body.theme-regler .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #dfe4ec 40%, #8f96a4 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(223, 228, 236,0.4));
}
body.theme-regler .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #dfe4ec; filter: drop-shadow(0 0 12px rgba(223, 228, 236,0.4)); }
body.theme-regler .sl-bottom strong { color: #ffffff; -webkit-text-fill-color: #ffffff; }
body.theme-regler .climax .bang.b2, body.theme-regler .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-regler .climax-sub, body.theme-regler .cx-sub { color: #dfe4ec; }
body.theme-regler .qa-a { -webkit-text-fill-color: transparent; }
body.theme-regler .q-text .codeword {
  color: #ffffff; background: rgba(223, 228, 236,0.14);
  box-shadow: inset 0 0 0 1px rgba(223, 228, 236,0.32);
  text-shadow: 0 0 18px rgba(223, 228, 236,0.45);
}
body.theme-regler .term-body .out.cyan { color: #aeb5c2; }
body.theme-regler .term-body .out.green { color: #ffffff; }
/* im schwarz-weiss-diagramm ist „schlecht" nicht rot, sondern stumpf */
body.theme-regler .chart-bar .bar.red { background: linear-gradient(90deg, #26272d, #6e7480); }
body.theme-regler .chart-bar .bar.cyan { background: linear-gradient(90deg, #8f96a4, #dfe4ec); }
body.theme-regler .chart-bar .bar.green { background: linear-gradient(90deg, #dfe4ec, #ffffff); }
body.theme-regler .burst-w { color: #dfe4ec; opacity: 0.84; }
body.theme-regler .bm-row { color: #dfe4ec; opacity: 0.88; }
body.theme-regler .trio-line.regler { color: #dfe4ec; text-shadow: 0 0 34px rgba(223, 228, 236,0.55); }
body.theme-regler .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-regler .scene-stamp.active .bio-h .stamp.regler { color: #dfe4ec; text-shadow: 0 0 34px rgba(223, 228, 236,0.55); }
body.theme-regler .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.regler { color: #dfe4ec; }
body.theme-regler.kick #world { animation: kickRegler 0.24s ease-out; }
@keyframes kickRegler { 0%{filter:brightness(1);} 50%{filter:brightness(1.12) contrast(1.06);} 100%{filter:brightness(1);} }

/* karte Seite AQ — die reglerwand: bahnen mit kappen auf verschiedenen hoehen */
.track-card[data-song="regler"] .tc-art { background:
    linear-gradient(90deg, transparent 0 17.2%, rgba(223,228,236,0.22) 17.2% 18.4%, transparent 18.4%),
    linear-gradient(90deg, transparent 0 33.4%, rgba(223,228,236,0.22) 33.4% 34.6%, transparent 34.6%),
    linear-gradient(90deg, transparent 0 49.4%, rgba(223,228,236,0.22) 49.4% 50.6%, transparent 50.6%),
    linear-gradient(90deg, transparent 0 65.4%, rgba(223,228,236,0.22) 65.4% 66.6%, transparent 66.6%),
    linear-gradient(90deg, transparent 0 81.6%, rgba(223,228,236,0.22) 81.6% 82.8%, transparent 82.8%),
    radial-gradient(ellipse 7% 2% at 17.8% 24%, rgba(255,255,255,0.72) 0 100%, transparent 100%),
    radial-gradient(ellipse 7% 2% at 34% 71%, rgba(255,255,255,0.72) 0 100%, transparent 100%),
    radial-gradient(ellipse 7% 2% at 50% 46%, rgba(255,255,255,0.72) 0 100%, transparent 100%),
    radial-gradient(ellipse 7% 2% at 66% 63%, rgba(255,255,255,0.72) 0 100%, transparent 100%),
    radial-gradient(ellipse 7% 2% at 82.2% 35%, rgba(255,255,255,0.72) 0 100%, transparent 100%),
    linear-gradient(180deg, #16171c 0%, #0b0c0f 62%, #050506 100%); }
.track-card[data-song="regler"] .tc-title {
  font-family: 'Bodoni Moda', 'Playfair Display', serif; font-weight: 900;
  font-size: clamp(1.05rem, 2.4vw, 1.7rem); line-height: 1.1;
  color: transparent; background: linear-gradient(158deg, #ffffff, #dfe4ec 42%, #8f96a4);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(223, 228, 236,0.4));
}
.track-card[data-song="regler"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(223, 228, 236,0.5)) drop-shadow(0 0 15px rgba(223, 228, 236,0.45)); }

/* ============================================================
   WELT AP — ICH SAG DIR, WO ES HERKOMMT (theme-herkunft)
   Abhaengigkeitsbaum: eismint + tiefes petrol · russo one
   ============================================================ */
:root { --herkunft: #78f0dc; --herkunft-hell: #e2fffa; }
body.theme-herkunft { --accent: #78f0dc; --accent-rgb: 120, 240, 220; --f-display: 'Russo One', 'Oswald', sans-serif; }
body.theme-herkunft .huge, body.theme-herkunft .wave-word, body.theme-herkunft .burst-center, body.theme-herkunft .climax .bang,
body.theme-herkunft .sl-bottom, body.theme-herkunft .trio-line, body.theme-herkunft .endcard-cta,
body.theme-herkunft .name-big, body.theme-herkunft .qa-a { font-weight: 400; letter-spacing: -0.005em; }
/* Russo One laeuft breit — abschlag gleich beim anlegen, und zwar am
   CONTAINER .climax-text, damit beide climax-zeilen gleich schrumpfen. */
body.theme-herkunft .climax-text { font-size: clamp(1.7rem, 8.8vw, 5.8rem); }
body.theme-herkunft .trio-line { font-size: clamp(1.7rem, 6vw, 5.2rem); }
body.theme-herkunft .name-big { font-size: clamp(1.8rem, 6.4vw, 5.4rem); }
body.theme-herkunft .burst-center { font-size: clamp(1.05rem, 3.1vw, 2.7rem); }
body.theme-herkunft .endcard-cta { font-size: clamp(1rem, 2.7vw, 2.1rem); }
body.theme-herkunft #ticker { background: linear-gradient(90deg, #78f0dc, #e2fffa 55%, #78f0dc); color: #05201d; letter-spacing: 0.08em; }
body.theme-herkunft #progress { background: linear-gradient(90deg, #e2fffa, #78f0dc 60%, #e2fffa); box-shadow: 0 0 13px rgba(120, 240, 220,0.6); }
body.theme-herkunft .dot { background: #78f0dc; box-shadow: 0 0 9px #78f0dc; }
body.theme-herkunft #theme-tag { color: #e2fffa; text-shadow: 0 0 11px rgba(120, 240, 220,0.5); }
body.theme-herkunft #hud { color: rgba(226,255,250,0.85); }
body.theme-herkunft #controls button:hover { border-color: #78f0dc; color: #e2fffa; box-shadow: 0 0 13px rgba(120, 240, 220,0.5); }
body.theme-herkunft .qa-q { color: #e2fffa; }
body.theme-herkunft .q-mark { color: #78f0dc; }
body.theme-herkunft #redwash { background: #78f0dc; }
body.theme-herkunft #shockwave { border-color: #78f0dc; box-shadow: 0 0 60px #78f0dc, inset 0 0 60px rgba(120, 240, 220,0.5); }
body.theme-herkunft .sl-bottom, body.theme-herkunft .huge, body.theme-herkunft .bu-line.bu-red, body.theme-herkunft .anti-line.big,
body.theme-herkunft .wave-word, body.theme-herkunft .rain-word, body.theme-herkunft .burst-center, body.theme-herkunft .climax .bang,
body.theme-herkunft .endcard-red .endcard-cta {
  color: transparent; background: linear-gradient(168deg, #ffffff, #e2fffa 42%, #78f0dc 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(120, 240, 220,0.45));
}
body.theme-herkunft .huge.outline { color: transparent; background: none; -webkit-text-stroke: 2px #78f0dc; filter: drop-shadow(0 0 12px rgba(120, 240, 220,0.4)); }
body.theme-herkunft .sl-bottom strong { color: #e2fffa; -webkit-text-fill-color: #e2fffa; }
body.theme-herkunft .climax .bang.b2, body.theme-herkunft .climax .bang:last-child { -webkit-text-fill-color: transparent; }
body.theme-herkunft .climax-sub, body.theme-herkunft .cx-sub { color: #e2fffa; }
body.theme-herkunft .qa-a { -webkit-text-fill-color: transparent; }
body.theme-herkunft .q-text .codeword {
  color: #78f0dc; background: rgba(120, 240, 220,0.14);
  box-shadow: inset 0 0 0 1px rgba(120, 240, 220,0.32);
  text-shadow: 0 0 18px rgba(120, 240, 220,0.45);
}
body.theme-herkunft .term-body .out.cyan { color: #e2fffa; }
body.theme-herkunft .term-body .out.green { color: #78f0dc; }
body.theme-herkunft .chart-bar .bar.red { background: linear-gradient(90deg, #5c4420, #ffbe5a); }
body.theme-herkunft .chart-bar .bar.cyan { background: linear-gradient(90deg, #78f0dc, #e2fffa); }
body.theme-herkunft .chart-bar .bar.green { background: linear-gradient(90deg, #78f0dc, #ffffff); }
body.theme-herkunft .burst-w { color: #e2fffa; opacity: 0.84; }
body.theme-herkunft .bm-row { color: #e2fffa; opacity: 0.88; }
body.theme-herkunft .trio-line.herkunft { color: #78f0dc; text-shadow: 0 0 34px rgba(120, 240, 220,0.55); }
body.theme-herkunft .trio-line.weiss { color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.4); }
body.theme-herkunft .scene-stamp.active .bio-h .stamp.herkunft { color: #78f0dc; text-shadow: 0 0 34px rgba(120, 240, 220,0.55); }
body.theme-herkunft .scene-stamp.active .bio-h .stamp.weiss { color: #fff; }
.trio-line.herkunft { color: #78f0dc; }
body.theme-herkunft.kick #world { animation: kickHerkunft 0.24s ease-out; }
@keyframes kickHerkunft { 0%{filter:brightness(1);} 50%{filter:brightness(1.1) saturate(1.06);} 100%{filter:brightness(1);} }

/* karte Seite AP — verzweigung von oben nach unten */
.track-card[data-song="herkunft"] .tc-art { background:
    linear-gradient(200deg, transparent 0 46%, rgba(120,240,220,0.3) 46% 47.4%, transparent 47.4%),
    linear-gradient(160deg, transparent 0 46%, rgba(120,240,220,0.3) 46% 47.4%, transparent 47.4%),
    radial-gradient(circle at 50% 20%, rgba(226,255,250,0.4) 0 3.4%, transparent 5%),
    radial-gradient(circle at 26% 68%, rgba(120,240,220,0.3) 0 2.6%, transparent 4%),
    radial-gradient(circle at 74% 68%, rgba(120,240,220,0.3) 0 2.6%, transparent 4%),
    linear-gradient(180deg, #0d2226 0%, #08171a 60%, #050d0f 100%); }
.track-card[data-song="herkunft"] .tc-title {
  font-family: 'Russo One', 'Oswald', sans-serif; font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.7rem); line-height: 1.1;
  color: transparent; background: linear-gradient(158deg, #ffffff, #e2fffa 42%, #78f0dc);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 11px rgba(120, 240, 220,0.45));
}
.track-card[data-song="herkunft"]:hover .tc-title { filter: drop-shadow(0 2px 11px rgba(120, 240, 220,0.5)) drop-shadow(0 0 15px rgba(120, 240, 220,0.45)); }

/* karten-typo pro welt */
.track-card .tc-vibe { min-height: 1.2em; }

/* ============================================================
   PICKER-REDESIGN v30 — der unvergessliche auftritt
   animierter spotlight-backdrop · stagger-reveal · headliner-marquee
   ============================================================ */
#picker { background: radial-gradient(ellipse at center, #120610 0%, #000 82%); }
#picker::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(closest-side at 18% 28%, rgba(255,45,150,0.16), transparent 62%),
    radial-gradient(closest-side at 82% 68%, rgba(90,156,255,0.13), transparent 62%),
    radial-gradient(closest-side at 62% 16%, rgba(255,196,70,0.11), transparent 58%);
  animation: pickerLights 20s ease-in-out infinite alternate;
}
@keyframes pickerLights {
  0%   { transform: translate(0,0) scale(1); opacity: 0.85; }
  50%  { transform: translate(2.5%, -1.5%) scale(1.08); opacity: 1; }
  100% { transform: translate(-2.5%, 1.5%) scale(1.03); opacity: 0.9; }
}
.picker-inner { position: relative; z-index: 1; }
.picker-name { position: relative; }
.picker-name span { animation: nameGlow 3.2s ease-in-out infinite; }
@keyframes nameGlow { 0%,100%{ text-shadow: 0 0 30px var(--red-glow); } 50%{ text-shadow: 0 0 46px var(--red-glow), 0 0 70px rgba(255,45,150,0.4); } }

/* stagger-reveal (fill-mode backwards → hover-lift bleibt danach intakt) */
#picker.shown .track-card { animation: cardRise 0.55s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes cardRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
#picker.shown .track-card:nth-child(1){animation-delay:.04s}
#picker.shown .track-card:nth-child(2){animation-delay:.09s}
#picker.shown .track-card:nth-child(3){animation-delay:.14s}
#picker.shown .track-card:nth-child(4){animation-delay:.19s}
#picker.shown .track-card:nth-child(5){animation-delay:.24s}
#picker.shown .track-card:nth-child(6){animation-delay:.29s}
#picker.shown .track-card:nth-child(7){animation-delay:.34s}
#picker.shown .track-card:nth-child(8){animation-delay:.39s}
#picker.shown .track-card:nth-child(9){animation-delay:.44s}
#picker.shown .track-card:nth-child(10){animation-delay:.49s}
#picker.shown .track-card:nth-child(11){animation-delay:.54s}
#picker.shown .track-card:nth-child(12){animation-delay:.59s}
#picker.shown .track-card:nth-child(13){animation-delay:.64s}
#picker.shown .track-card:nth-child(14){animation-delay:.69s}
#picker.shown .track-card:nth-child(15){animation-delay:.74s}
#picker.shown .track-card:nth-child(16){animation-delay:.79s}
#picker.shown .track-card:nth-child(17){animation-delay:.84s}
#picker.shown .track-card:nth-child(18){animation-delay:.89s}
#picker.shown .track-card:nth-child(19){animation-delay:.94s}
#picker.shown .track-card:nth-child(20){animation-delay:.99s}
#picker.shown .track-card:nth-child(21){animation-delay:1.04s}
#picker.shown .track-card:nth-child(22){animation-delay:1.09s}
#picker.shown .track-card:nth-child(23){animation-delay:1.14s}
#picker.shown .track-card:nth-child(24){animation-delay:1.19s}
#picker.shown .track-card:nth-child(25){animation-delay:1.24s}
#picker.shown .track-card:nth-child(26){animation-delay:1.29s}
#picker.shown .track-card:nth-child(27){animation-delay:1.34s}
#picker.shown .track-card:nth-child(28){animation-delay:1.39s}
#picker.shown .track-card:nth-child(29){animation-delay:1.44s}
#picker.shown .track-card:nth-child(30){animation-delay:1.49s}
#picker.shown .track-card:nth-child(31){animation-delay:1.54s}
#picker.shown .track-card:nth-child(34){animation-delay:1.69s}
#picker.shown .track-card:nth-child(35){animation-delay:1.74s}
#picker.shown .track-card:nth-child(36){animation-delay:1.79s}
#picker.shown .track-card:nth-child(37){animation-delay:1.84s}
#picker.shown .track-card:nth-child(38){animation-delay:1.89s}
#picker.shown .track-card:nth-child(39){animation-delay:1.94s}
#picker.shown .track-card:nth-child(40){animation-delay:1.99s}
#picker.shown .track-card:nth-child(41){animation-delay:2.04s}
#picker.shown .track-card:nth-child(42){animation-delay:2.09s}
#picker.shown .track-card:nth-child(43){animation-delay:2.14s}
#picker.shown .track-card:nth-child(33){animation-delay:1.64s}
#picker.shown .track-card:nth-child(32){animation-delay:1.59s}

/* HEADLINER-KARTE — die show ganz oben, volle breite */
.picker-grid .track-card.headliner { flex: 1 1 100%; max-width: 100%; min-width: 100%; padding: 0;
  min-height: clamp(260px, 38vh, 380px);
  border: 2px solid rgba(255,196,70,0.5);
  background:
    radial-gradient(ellipse at 50% 128%, rgba(255,45,150,0.4), transparent 62%),
    radial-gradient(ellipse at 50% -14%, rgba(255,196,70,0.24), transparent 56%),
    linear-gradient(180deg, #2a0a24 0%, #1a0714 100%);
  box-shadow: 0 0 60px rgba(255,45,150,0.22), inset 0 0 90px rgba(255,45,150,0.08);
}
.track-card.headliner::before { background: linear-gradient(120deg, transparent 30%, rgba(255,214,120,0.28) 50%, transparent 70%); }
.track-card.headliner:hover { border-color: #ffc446; transform: translateY(-4px); box-shadow: 0 20px 80px rgba(255,45,150,0.42), inset 0 0 90px rgba(255,45,150,0.14); }
.hl-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 2.4rem 2.2rem 2.2rem; }
.track-card.headliner .tc-title {
  font-family: 'Passion One', var(--f-display); font-weight: 900; letter-spacing: 0.005em;
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.92; margin-bottom: 0.5rem;
  color: transparent; background: linear-gradient(160deg, #fff0f6, #ffc446 40%, #ff2d96 78%, #a23bd6);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 20px rgba(255,45,150,0.4));
}
.track-card.headliner:hover .tc-title { filter: drop-shadow(0 0 30px rgba(255,45,150,0.65)); }
.track-card.headliner .tc-num { color: rgba(255,196,70,0.8); }
.track-card.headliner .tc-meta { color: rgba(255,240,246,0.72); }
.track-card.headliner .tc-vibe { color: rgba(255,196,70,0.78); }
.track-card.headliner .tc-play { color: #ffc446; }
.tc-badge {
  align-self: flex-start; display: inline-block; color: #1a0512;
  background: linear-gradient(90deg, #ffc446, #ff2d96); padding: 0.32rem 0.9rem;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.26em; margin-bottom: 0.9rem;
  border-radius: 2px; box-shadow: 0 0 18px rgba(255,45,150,0.5);
}

/* marquee-glühbirnen oben + unten, gegenphasig blinkend + laufendes highlight */
.hl-bulbs { position: absolute; left: 0; right: 0; height: 15px; z-index: 3; pointer-events: none; overflow: hidden;
  background: radial-gradient(circle at 7px 50%, #ffbe3c 0 2.8px, rgba(255,120,190,0.32) 3.2px 5px, transparent 5.5px) 0 50% / 22px 100% repeat-x;
  animation: bulbBlink 1.6s ease-in-out infinite;
}
.hl-bulbs-top { top: 7px; } .hl-bulbs-bottom { bottom: 7px; animation-delay: 0.8s; }
.hl-bulbs::after { content: ''; position: absolute; top: 0; bottom: 0; width: 130px; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,240,0.85) 50%, transparent); mix-blend-mode: screen;
  animation: bulbSweep 2.6s linear infinite; }
@keyframes bulbBlink { 0%,100%{ filter: drop-shadow(0 0 4px rgba(255,196,70,0.6)); opacity: 0.95; } 50%{ filter: drop-shadow(0 0 9px rgba(255,196,70,0.95)); opacity: 0.72; } }
@keyframes bulbSweep { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 140px)); } }

@media (prefers-reduced-motion: reduce) {
  #picker::before, .hl-bulbs, .hl-bulbs::after, .picker-name span, #picker.shown .track-card { animation: none; }
}

/* vier karten → sauberes 2×2 statt 3+1 */
@media (min-width: 720px) {
  .picker-grid { grid-template-columns: 1fr 1fr; }
  .picker-grid .track-card:nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .picker-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RESPONSIVE FEINSCHLIFF
   ============================================================ */
@media (max-width: 600px) {
  #letterbox::before, #letterbox::after { height: 6vh; }
  .track-card { min-height: 200px; }
}