/* ==========================================================================
 * NEUES REDESIGN — Scope `live80-v2`
 * --------------------------------------------------------------------------
 * 🔴 ERZEUGTE DATEI — NICHT VON HAND AENDERN.
 *    Quelle : _source/mockups/startseite-redesign-v3.html (<style>-Block)
 *    Bauweg : python3 exports/wp-builds/live80-v2/scope-css.py
 *
 * Jede Regel haengt unter `.live80-v2` und wirkt damit ausschliesslich auf
 * Seiten mit Post-Meta `_live80_v2`=1. Geladen wird die Datei ueberhaupt nur
 * dort (Enqueue-Gate in dwd-fx.php).
 *
 * Ausgenommen vom Scope, mit Absicht: @font-face, @keyframes, @property
 * (haben keine Selektoren) und `html:has(body.live80-v2)` fuer scroll-behavior.
 * ========================================================================== */
/* @font-face uebersprungen — Schriften kommen aus dwd.css */
/* @font-face uebersprungen — Schriften kommen aus dwd.css */
/* ===========================================================================
   1. TOKENS
   =========================================================================== */
.live80-v2{
  /* Grundton bewusst ins Magenta gezogen (Kundenwunsch 2026-07-29: "mehr pink").
     Kein Schwarzblau mehr, sondern ein sehr dunkles Weinrot-Violett – hell genug,
     dass die Seite pink wirkt, dunkel genug fuer weissen Text darauf.
     ⚠️ Kontrast gegen Weiss bleibt bei 16,8:1 (gemessen), also weit ueber AA. */
  /* Knalliges Magenta (Kundenwunsch 2026-07-29, zweite Runde).
     🔴 Wer diesen Wert weiter aufhellt, MUSS --c-ink-3 mit anheben: die
     gedaempfte Kleinschrift ist der Engpass, nicht der weisse Text.
     Gemessen gegen #7a0b63: weiss 10,2:1 · ink-2 7,1:1 · cyan 6,4:1 ·
     gold 7,4:1 · ink-3 nur 3,8:1 mit dem alten Wert – deshalb aufgehellt. */
  --c-bg:#7a0b63;
  --c-bg-2:#95127a;
  --c-ink:#ffffff;
  --c-ink-2:#ddd2ef;
  --c-ink-3:#c4b8dd;   /* aufgehellt: 3,8:1 -> 5,5:1 auf dem neuen Grund */

  --c-pink:#ff2d95;
  --c-pink-deep:#d7007f;
  --c-pink-soft:#ff5cae;
  --c-cyan:#26e0ff;
  --c-amber:#ffb400;
  --c-gold:#ffd93d;
  --c-green:#1ed760;

  --c-line:rgba(255,255,255,.14);
  --c-card:rgba(56,15,48,.82);

  /* 🔴 Kundenwunsch 2026-08-04: "alle Schattierungen in Lila" – was vorher
     dunkelgrau/schwarz war, ist jetzt ein dunkles Violett. Begruendung ist
     dieselbe wie bei .crt und .vignette (2026-07-29): Schwarz dunkelt nicht
     nur ab, es ENTSAETTIGT – daher wirkte die Seite trotz knalligem Grund
     "farblos". Ein sehr dunkles Lila hat praktisch dieselbe Leuchtdichte
     (2,3 % gegen 0 %), traegt also die Lesbarkeits-Saeume weiter, bleibt aber
     farbig.
     ⚠️ NICHT in mask-/clip-Deklarationen ersetzen – dort ist #000 kein
     Farbwert, sondern "voll deckend". */
  --c-shadow:24,5,54;        /* #180536 – Ersatz fuer die frueheren Schwarz-Schatten */
  --c-shadow-deep:13,2,30;   /* #0d021e – fuer Scrims/Vignetten */

  /* "Dunkles passendes Lila" fuer Header und dunkle Flaechen. Bewusst
     Violett (Farbton 274°) statt des frueheren Pflaumentons (317°): erst der
     Farbtonsprung gegen den Magenta-Grund macht die Flaeche als eigene Farbe
     lesbar – vorher war es nur "dunkleres Pink" und wirkte schmutzig. */
  --c-lila:#3a1160;
  --c-lila-2:#4b1a7c;
  --c-lila-deep:#2a0b49;

  --glow-pink:0 0 12px rgba(255,45,149,.6), 0 0 34px rgba(255,45,149,.32);
  --glow-pink-lg:0 0 20px rgba(255,45,149,.95), 0 0 60px rgba(255,45,149,.5), 0 0 110px rgba(255,45,149,.22);
  --glow-cyan:0 0 12px rgba(38,224,255,.55), 0 0 34px rgba(38,224,255,.26);
  --glow-cyan-lg:0 0 20px rgba(38,224,255,.9), 0 0 60px rgba(38,224,255,.45);
  --glow-gold:0 0 12px rgba(255,217,61,.55), 0 0 34px rgba(255,217,61,.28);
  --glow-green:0 0 14px rgba(30,215,96,.6), 0 0 44px rgba(30,215,96,.3);

  --fs-xs:clamp(12px,.7rem + .15vw,14px);
  --fs-sm:clamp(14px,.8rem + .2vw,16px);
  --fs-md:clamp(16px,.9rem + .3vw,18px);
  --fs-lg:clamp(18px,1rem + .5vw,23px);
  --fs-xl:clamp(23px,1.1rem + 1.1vw,34px);
  --fs-2xl:clamp(30px,1.2rem + 2.4vw,56px);
  --fs-3xl:clamp(40px,1.4rem + 4.4vw,92px);
  --fs-4xl:clamp(44px,1.4rem + 5.6vw,118px);

  /* 🔴 Die kleinen Stufen bleiben fest: sie sind Innenabstaende von Knoepfen,
     Chips und Eingabefeldern und der Seitenrand von .wrap – die duerfen am
     Handy NICHT mitschrumpfen, sonst kleben Inhalte am Displayrand.
     Ab --s6 sind es dagegen Sektions- und Blockabstaende. Die standen bis
     2026-08-05 fest in px und waren damit am Handy exakt so gross wie am
     1920er-Monitor – das war die Kundenmeldung "die Abstaende sind auf mobil
     noch nicht optimal". Rampe 375px -> 1200px, darueber Maximum.
     ⚠️ Die Rampen halten BEWUSST Abstand zueinander: --s9 (Sektionstrennung)
     faellt am Handy auf 48px, --s7 (Abstand INNERHALB einer Sektion) auf 28px.
     Vorher lagen beide bei 48px – dadurch war die Trennung zwischen zwei
     Sektionen genauso gross wie die zwischen Ueberschrift und Inhalt, und die
     Seite las sich als eine Kette gleich weit auseinanderliegender Zeilen
     statt als Gruppen. Wer hier schraubt, muss den Abstand der beiden
     Rampen zueinander erhalten. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  /* ⚠️ --s6 faellt bewusst nur bis 24px (= --s5). Es ist die einzige der
     grossen Stufen, die auch als INNENabstand von Flaechen dient (Player-
     Kasten, Newsletter-Kasten, Event-Kachel). Bei 22px sassen die Texte dort
     sichtbar enger am Rand als im Rest der Seite. */
  --s6:clamp(24px, 20.36px + 0.97vw, 32px);
  --s7:clamp(28px, 18.9px  + 2.42vw, 48px);
  --s8:clamp(36px, 23.3px  + 3.39vw, 64px);
  --s9:clamp(48px, 26.2px  + 5.82vw, 96px);
  --s10:clamp(72px, 42.9px + 7.76vw, 136px);

  --r-sm:10px; --r-md:18px; --r-lg:30px; --r-pill:999px;

  --wrap:1320px;
  --wrap-narrow:920px;
  --ease:cubic-bezier(.22,.9,.3,1);
}
.live80-v2 *,.live80-v2 *::before,.live80-v2 *::after{box-sizing:border-box}
html:has(body.live80-v2){scroll-behavior:smooth}
.live80-v2{
  margin:0;color:var(--c-ink);background:var(--c-bg);
  font-family:'Asap',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-md);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* 🔴 Der Pink-Verlauf liegt in einer EIGENEN fixierten Ebene, NICHT als
   background-attachment:fixed auf dem body.
   Grund (und das war ein selbst gebauter Bremsklotz, eingefuehrt 2026-07-29):
   background-attachment:fixed zwingt den Browser, den kompletten Viewport-
   Hintergrund bei JEDEM Scrollschritt neu zu zeichnen – der Hintergrund soll
   ja stehenbleiben, waehrend der Inhalt wandert. Auf einem grossen Desktop-
   Bildschirm ist das ein Vollbild-Repaint pro Scroll-Frame, mit vier
   uebereinanderliegenden Verlaeufen. Ein position:fixed-Element bekommt
   dagegen eine eigene Compositing-Ebene und wird genau EINMAL gezeichnet.
   Optisch identisch, Kosten praktisch null. NICHT zurueckbauen. */
.live80-v2::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 72% at 50% 0%,rgba(255,45,149,.55),transparent 66%),
    radial-gradient(95% 62% at 8% 34%,rgba(255,0,150,.42),transparent 70%),
    radial-gradient(95% 62% at 92% 68%,rgba(230,0,165,.42),transparent 70%),
    linear-gradient(180deg,#95127a 0%,var(--c-bg) 28%,#6b0a56 60%,#8f1173 100%);
}
.live80-v2 img{max-width:100%;height:auto;display:block}
.live80-v2 a{color:inherit}
.live80-v2 h1,.live80-v2 h2,.live80-v2 h3,.live80-v2 h4,.live80-v2 p{margin:0}
.live80-v2 button{font:inherit;color:inherit}
.live80-v2 :where(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--c-cyan);outline-offset:3px;border-radius:var(--r-sm)}
.live80-v2 .wrap{width:min(100% - 2*var(--s5),var(--wrap));margin-inline:auto}
.live80-v2 .wrap-narrow{width:min(100% - 2*var(--s5),var(--wrap-narrow));margin-inline:auto}
.live80-v2 .sec{position:relative;padding-block:var(--s9)}
/* Sprungziele duerfen nicht unter dem klebenden Header landen */
.live80-v2 section[id]{scroll-margin-top:96px}
.live80-v2 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.live80-v2 a.sr-only:focus-visible{position:fixed;left:var(--s5);top:var(--s4);z-index:9999;width:auto;height:auto;clip:auto;
  margin:0;padding:var(--s3) var(--s5);background:var(--c-pink-deep);color:#fff;border-radius:var(--r-pill);box-shadow:var(--glow-pink)}
/* ===========================================================================
   2. DISPLAY-TYPO – Chrome mit wanderndem Glanz, Neon mit Flackern
   =========================================================================== */
.live80-v2 .display{font-family:'Core Sans M','Asap',sans-serif;font-weight:800;letter-spacing:.04em;line-height:.92;text-transform:uppercase}
/* 🔴 padding-top ist KEINE Kosmetik, sondern Pflicht.
   background-clip:text malt den Verlauf ausschliesslich innerhalb der
   Hintergrundflaeche des Elements. Zusammen mit line-height:.92 aus .display
   ragen Umlautpunkte und Akzente ueber die Oberkante hinaus – dort wird nichts
   mehr gemalt, und das "Ö" in "DIE GRÖSSTE" sieht oben abgeschnitten aus.
   Der negative margin gleicht den Zuwachs aus, damit sich das Layout nicht
   verschiebt. Wer margin-top an einer .chrome-Ueberschrift ueberschreibt, muss
   die .14em mit abziehen (siehe .record-claim und .cd-h). */
.live80-v2 .chrome{
  /* ⚠️ Der dunkelste Stopp war #8a0052 – gegen den fast schwarzen Hintergrund
     von frueher ein satter Schatten, gegen den neuen pinken Grund aber ein
     kaum lesbarer Streifen mitten in der Headline. Aufgehellt, der Verlauf
     bleibt in derselben Farbfamilie. */
  background:linear-gradient(100deg,#fff 0%,#fff 26%,#ffd1ea 34%,var(--c-pink) 44%,#e0359a 60%,#ffb3d9 74%,#fff 100%);
  background-size:260% 100%;
  padding-top:.14em;margin-top:-.14em;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* ⚠️ Der dunkle Saum ist auf dem hellen Pink PFLICHT, nicht Deko: ohne ihn
     fiel die Hero-Headline von 9,6:1 auf 4,1:1 (an Pixeln gemessen). Er
     ersetzt das frueher dunkle Hintergrund-Umfeld. */
  filter:drop-shadow(0 3px 0 rgba(var(--c-shadow),.6))
         drop-shadow(0 0 14px rgba(46,6,84,.95))
         drop-shadow(0 0 34px rgba(66,12,120,.8));
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{from{background-position:180% 0}to{background-position:-80% 0}}
/* Neon-Roehrenschrift. font-size/font-weight MUESSEN hier stehen: sonst erbt
   die Klasse die Fliesstextgroesse (16-18px) und eine Sektionsheadline sieht
   winzig aus – genau das war bei "DEINE ZEITREISE" der Fall. */
.live80-v2 .outline-h{
  font-family:'Core Sans M','Asap',sans-serif;font-weight:800;text-transform:uppercase;color:transparent;
  /* Eigene Rampe statt --fs-3xl: dessen Minimum (40px) liess die Headline auf
     375px in vier Zeilen zerfallen. Beide Enden gemessen (375 + 1920). */
  font-size:clamp(26px,.5rem + 5.2vw,92px);line-height:1.05;
  -webkit-text-stroke:clamp(2px,.22vw,4px) var(--c-cyan);letter-spacing:.05em;
  text-shadow:var(--glow-cyan);
  animation:tube 6s ease-in-out infinite;
}
@keyframes tube{
  0%,100%{text-shadow:0 0 12px rgba(38,224,255,.55),0 0 34px rgba(38,224,255,.26)}
  50%{text-shadow:0 0 22px rgba(38,224,255,.95),0 0 62px rgba(38,224,255,.5)}
}
/* Echtes Roehren-Flackern: unregelmaessig, sehr kurz, nicht nervig */
.live80-v2 .flicker{animation:flicker 9s linear infinite}
@keyframes flicker{
  0%,96%,100%{opacity:1}
  96.5%{opacity:.28}
  97%{opacity:1}
  97.6%{opacity:.42}
  98%{opacity:1}
}
.live80-v2 .eyebrow{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-sm);letter-spacing:.42em;
  text-transform:uppercase;color:var(--c-cyan);text-shadow:var(--glow-cyan)}
.live80-v2 .lead{color:var(--c-ink-2);font-size:var(--fs-lg);line-height:1.65}
.live80-v2 .body-text{color:var(--c-ink-2);font-size:var(--fs-md);max-width:68ch}
/* Neon-Unterstrich, der beim Reveal aufgezogen wird */
.live80-v2 .rule{height:3px;width:min(280px,60%);border-radius:2px;margin-inline:auto;
  background:linear-gradient(90deg,transparent,var(--c-pink),var(--c-cyan),transparent);
  box-shadow:var(--glow-pink);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .9s var(--ease) .15s}
/* rv-done muss mitgenannt werden: das JS nimmt .in nach dem Auftauchen wieder
   weg, sonst faehrt der Neon-Strich hinterher auf scaleX(0) zurueck. */
.live80-v2 .reveal.in .rule,.live80-v2 .reveal.rv-done .rule,.live80-v2 .rule.in{transform:scaleX(1)}
/* ===========================================================================
   3. BUTTONS – Neon mit rotierendem Rand und Glanz-Sweep
   =========================================================================== */
.live80-v2 .btn{
  --btn-c:var(--c-pink);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:52px;padding:0 var(--s6);
  font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-sm);
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border-radius:var(--r-pill);border:2px solid var(--btn-c);background:transparent;color:#fff;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
  box-shadow:var(--glow-pink);
  animation:btn-breathe 3.2s ease-in-out infinite;
}
@keyframes btn-breathe{
  0%,100%{box-shadow:0 0 10px rgba(255,45,149,.5),0 0 28px rgba(255,45,149,.22)}
  50%{box-shadow:0 0 18px rgba(255,45,149,.85),0 0 52px rgba(255,45,149,.42)}
}
.live80-v2 .btn::after{content:"";position:absolute;inset:-8px;border-radius:var(--r-pill);z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--btn-c) 60%,transparent),transparent 78%);
  opacity:.4;filter:blur(11px);transition:opacity .25s var(--ease)}
/* Glanz-Sweep laeuft dauerhaft durch */
.live80-v2 .btn::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:sweep 3.6s ease-in-out infinite}
@keyframes sweep{0%{left:-60%}55%,100%{left:130%}}
.live80-v2 .btn>*{position:relative;z-index:1}
.live80-v2 .btn:hover,.live80-v2 .btn:focus-visible{transform:translateY(-2px);box-shadow:var(--glow-pink-lg);animation-play-state:paused}
.live80-v2 .btn:hover::after{opacity:1}
.live80-v2 .btn:active{transform:translateY(0) scale(.98)}
.live80-v2 .btn--primary{background:linear-gradient(135deg,var(--c-pink-deep),#a3006a);border-color:var(--c-pink-soft)}
.live80-v2 .btn--ghost{--btn-c:var(--c-cyan);background:rgba(26,8,56,.55);box-shadow:var(--glow-cyan);animation-name:btn-breathe-cyan}
@keyframes btn-breathe-cyan{
  0%,100%{box-shadow:0 0 10px rgba(38,224,255,.5),0 0 28px rgba(38,224,255,.2)}
  50%{box-shadow:0 0 18px rgba(38,224,255,.9),0 0 52px rgba(38,224,255,.4)}
}
.live80-v2 .btn--ghost:hover,.live80-v2 .btn--ghost:focus-visible{background:#fff;color:#08243a;border-color:#fff;box-shadow:var(--glow-cyan-lg)}
.live80-v2 .btn--green{--btn-c:var(--c-green);background:linear-gradient(135deg,#1ed760,#12a349);border-color:#5cf08f;
  box-shadow:var(--glow-green);color:#04210f;animation:none}
.live80-v2 .btn--green:hover{box-shadow:0 0 24px rgba(30,215,96,.95),0 0 66px rgba(30,215,96,.5)}
/* ⚠️ 48px, nicht 46. In WordPress traegt der `core/button`-WRAPPER die Klassen und
   den 2px-Rahmen, das anklickbare <a> darin ist also 4px niedriger als der Wert
   hier. Mit 46 mass das <a> 42px und lag unter dem 44er-Tippziel (2026-08-07 auf
   allen fuenf Seiten gemessen); mit 48 sind es genau 44. Im Mockup ist `.btn--sm`
   das Element selbst — dort kostet die Aenderung 2px Hoehe und sonst nichts. */
.live80-v2 .btn--sm{min-height:48px;padding:0 var(--s5);font-size:var(--fs-xs)}
.live80-v2 .btn svg{width:18px;height:18px;flex:none}
/* ===========================================================================
   4. HINTERGRUND – Sterne, Nebel, Grid, CRT, Scroll-Beam
   =========================================================================== */
.live80-v2 #stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.live80-v2 .bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.live80-v2 .bg-fx i{position:absolute;border-radius:50%;filter:blur(120px)}
/* Pink dominiert, Cyan bleibt nur als kuehler Gegenpol – ohne ihn kippt die
   ganze Seite in einen einzigen Farbton und die Neon-Akzente verlieren ihre
   Wirkung (Komplementaerkontrast ist das, was 80er-Neon ausmacht). */
/* 🔴 Alle drei Wolken sind PINK – keine cyanfarbene mehr.
   Die rechte Wolke war bis 2026-07-29 cyan (rgba(0,159,227,.26)). Cyan ueber
   Pink ergibt Violett, und genau das war der lila Bereich rechts: gemessen
   lag der Farbton dort bei 282–289°, links und in der Mitte bei 311–326°.
   Tiefe entsteht jetzt ueber HELLIGKEIT statt ueber Farbton – drei Pinktoene
   von hell nach dunkel. Der kuehle Gegenpol ist NICHT verloren: Cyan steckt
   weiterhin in den Kickern, Rahmen, Buttons, im Gitterboden und in den
   Sternen. Nur der Hintergrund traegt es nicht mehr. */
.live80-v2 .bg-fx .g1{width:58vw;height:58vw;left:-16vw;top:-12vw;background:rgba(255,45,149,.5);animation:drift1 26s ease-in-out infinite}
.live80-v2 .bg-fx .g2{width:52vw;height:52vw;right:-14vw;top:32vh;background:rgba(255,20,140,.34);animation:drift2 31s ease-in-out infinite}
.live80-v2 .bg-fx .g3{width:44vw;height:44vw;left:22vw;bottom:-14vw;background:rgba(190,0,120,.44);animation:drift1 38s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-6vh) scale(1.1)}}
/* 🔴 Scanlines ebenfalls ohne Schwarz. "multiply" mit Schwarz dunkelt nicht
   nur ab, es ENTSAETTIGT – aus knalligem Pink wird ein graustichiges Altrosa.
   Mit einem Magenta bleibt der Farbton erhalten, die Roehren-Textur auch.
   Deckkraft von .5 auf .3 – die Struktur soll man spueren, nicht sehen. */
.live80-v2 .crt{position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(150,10,110,.2) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.3}
/* Langsam wandernde Bildroehren-Zeile */
.live80-v2 .crt::after{content:"";position:absolute;left:0;right:0;height:26vh;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.045),transparent);
  animation:rollbar 9s linear infinite}
@keyframes rollbar{from{top:-30vh}to{top:110vh}}
/* 🔴 KEIN Schwarz in der Vignette. Mit rgba(0,0,0,.6) fielen die Ecken auf
   13 % Helligkeit gegen 30 % in der Mitte – das Pink wirkte dort schmutzig
   statt tief (Kundenrueckmeldung 2026-07-29: "das schwarz wirkt schmutzig").
   Jetzt ein gesaettigtes Magenta, schwaecher und spaeter einsetzend: die Ecken
   werden nur noch leicht gefasst, bleiben aber in der Farbfamilie. */
.live80-v2 .vignette{position:fixed;inset:0;z-index:8999;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 62%,rgba(120,4,92,.32) 100%)}
.live80-v2 .scroll-beam{position:fixed;left:0;top:0;height:3px;width:0%;z-index:9100;
  background:linear-gradient(90deg,var(--c-cyan),var(--c-pink),var(--c-gold));
  box-shadow:0 0 14px rgba(255,45,149,.9)}
.live80-v2 main,.live80-v2 header,.live80-v2 footer{position:relative;z-index:1}
.live80-v2 .gridfloor{position:absolute;left:0;right:0;bottom:0;height:52vh;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 100%);
          mask-image:linear-gradient(to top,#000 10%,transparent 100%)}
.live80-v2 .gridfloor::before{content:"";position:absolute;left:-60%;right:-60%;bottom:-120%;height:260%;
  background:
    repeating-linear-gradient(to right,rgba(255,225,242,.7) 0 2px,transparent 2px 92px),
    repeating-linear-gradient(to bottom,rgba(92,0,58,.55) 0 2px,transparent 2px 92px);
  transform:perspective(340px) rotateX(74deg);transform-origin:50% 100%;
  animation:gridmove 4.4s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,45,149,.5))}
@keyframes gridmove{from{background-position:0 0,0 0}to{background-position:0 0,0 92px}}
/* ===========================================================================
   5. HEADER
   =========================================================================== */
/* 🔴 Der Verlauf reicht bewusst bis unter das Hero-Logo – deshalb ist diese
   Deklaration zugleich "die Flaeche hinter dem Logo". Bis 2026-08-04 stand
   hier ein sehr dunkler Pflaumenton (rgba(56,15,48)); der las sich neben dem
   knalligen Magenta nicht als eigene Farbe, sondern als schmutziges Grau –
   genau das war die Kundenmeldung "zu farblos". Jetzt dunkles Lila. */
.live80-v2 .site-header{position:sticky;top:0;z-index:600;
  background:linear-gradient(180deg,rgba(58,17,96,.95),rgba(58,17,96,.62) 70%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.live80-v2 .site-header.is-stuck{border-bottom-color:rgba(255,45,149,.45);background:rgba(66,21,110,.97);
  box-shadow:0 6px 30px rgba(140,60,255,.28)}
.live80-v2 .nav{position:relative;display:flex;align-items:center;gap:var(--s5);padding-block:var(--s3);min-height:74px}
.live80-v2 .nav-logo img{width:clamp(112px,11vw,168px);
  filter:drop-shadow(0 0 12px rgba(255,45,149,.5));transition:filter .3s var(--ease)}
.live80-v2 .nav-logo:hover img{filter:drop-shadow(0 0 22px rgba(255,45,149,.95))}
/* ---------------------------------------------------------------------------
   MENUE – Desktop
   Bis 2026-08-05 waren das fuenf 16px-Links in Normalstaerke mit einem duennen
   Unterstrich beim Ueberfahren. Kundenmeldung: "mach das Menue spannender,
   auf dem Desktop auch etwas groesser – die Schrift ist klein."
   Jetzt: Leuchtroehren-Optik. Jedes Item ist zweizeilig (Ziel + Zusatzzeile),
   in Versalien und fetter, dahinter wandert EIN gemeinsamer Lichtkegel
   (.nav-spot) zum jeweils angesteuerten Eintrag.
   🔴 Bewegt werden ausschliesslich transform und opacity – dieselbe Regel wie
   im Rest der Seite (Perf-Befund 2026-07-29). Kein animiertes blur().
   --------------------------------------------------------------------------- */
.live80-v2 .nav-links{display:flex;gap:var(--s1);margin-left:auto;list-style:none;padding:0;margin-block:0}
/* Eigene Rampe statt --fs-sm: das Menue soll spuerbar groesser sein als
   Kleinschrift, aber nicht mit den Sektionsueberschriften konkurrieren.
   Gemessen 1920px: 19px (vorher 16px). */
.live80-v2 .nav-links a{position:relative;z-index:1;display:inline-flex;align-items:center;
  min-height:52px;padding:0 var(--s4);
  font-family:'Core Sans M','Asap',sans-serif;text-transform:uppercase;text-decoration:none;
  font-size:clamp(15px,.72rem + .38vw,19px);font-weight:700;letter-spacing:.13em;
  border-radius:14px;
  transition:color .22s var(--ease),text-shadow .22s var(--ease),transform .22s var(--ease)}
/* Neonroehre unter dem Eintrag: waechst aus der Mitte, mit hellen Endkappen.
   ::after ist die Roehre, ::before ihr Schein. */
.live80-v2 .nav-links a::after{content:"";position:absolute;left:var(--s4);right:var(--s4);bottom:5px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,rgba(38,224,255,.25),var(--c-cyan) 18%,#fff 50%,var(--c-cyan) 82%,rgba(38,224,255,.25));
  box-shadow:var(--glow-cyan);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .34s var(--ease)}
.live80-v2 .nav-links a:hover,.live80-v2 .nav-links a:focus-visible{color:var(--c-cyan);text-shadow:var(--glow-cyan);transform:translateY(-1px)}
.live80-v2 .nav-links a:hover::after,.live80-v2 .nav-links a:focus-visible::after{transform:scaleX(1)}
/* Kurzes Anflackern beim Antippen – die Roehre "zuendet". */
@media (hover:hover){.live80-v2 .nav-links a:hover{animation:nav-flicker .5s steps(1,end) 1}}
@keyframes nav-flicker{
  0%,100%{opacity:1} 8%{opacity:.35} 14%{opacity:1} 24%{opacity:.5} 30%{opacity:1} 40%{opacity:.75} 46%{opacity:1}
}
/* Gleitender Lichtkegel. Steht absolut in .nav; Position und Breite setzt JS.
   opacity:0 als Grundzustand – ohne JS ist er schlicht nicht da. */
.live80-v2 .nav-spot{position:absolute;top:0;left:0;height:0;width:0;border-radius:14px;pointer-events:none;z-index:0;
  background:radial-gradient(120% 130% at 50% 120%,rgba(38,224,255,.28),rgba(38,224,255,.06) 60%,transparent 72%);
  box-shadow:inset 0 -2px 0 rgba(38,224,255,.35);
  opacity:0;transition:opacity .25s var(--ease),transform .38s var(--ease),width .38s var(--ease),height .38s var(--ease)}
.live80-v2 .nav-spot.on{opacity:1}
@media (prefers-reduced-motion:reduce){.live80-v2 .nav-spot{transition:opacity .2s linear}
.live80-v2 .nav-links a:hover{animation:none}}
.live80-v2 .nav-tools{display:flex;align-items:center;gap:var(--s2)}
.live80-v2 .chip{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);
  border-radius:var(--r-pill);border:2px solid var(--c-pink);background:rgba(255,45,149,.12);color:#fff;cursor:pointer;
  font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xs);letter-spacing:.1em;
  box-shadow:var(--glow-pink);transition:transform .18s var(--ease),box-shadow .25s var(--ease)}
.live80-v2 .chip:hover{transform:translateY(-2px);box-shadow:var(--glow-pink-lg)}
.live80-v2 .chip.pulse{animation:chip-pulse .55s var(--ease)}
@keyframes chip-pulse{0%{transform:scale(1)}40%{transform:scale(1.22) rotate(-4deg)}100%{transform:scale(1)}}
.live80-v2 .chip svg{width:17px;height:17px}
.live80-v2 .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--c-line);background:rgba(255,255,255,.05);cursor:pointer;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.live80-v2 .icon-btn:hover{border-color:var(--c-cyan);box-shadow:var(--glow-cyan);transform:translateY(-2px)}
.live80-v2 .icon-btn svg{width:19px;height:19px}
/* Burger: drei Balken, die sich zum X drehen. */
.live80-v2 .nav-burger{display:none;position:relative;z-index:1002}
.live80-v2 .burger-bars{display:block;position:relative;width:20px;height:14px}
.live80-v2 .burger-bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.live80-v2 .burger-bars i:nth-child(1){top:0}
.live80-v2 .burger-bars i:nth-child(2){top:6px}
.live80-v2 .burger-bars i:nth-child(3){top:12px}
.live80-v2 .nav-burger[aria-expanded="true"]{border-color:var(--c-pink);box-shadow:var(--glow-pink)}
.live80-v2 .nav-burger[aria-expanded="true"] .burger-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.live80-v2 .nav-burger[aria-expanded="true"] .burger-bars i:nth-child(2){opacity:0;transform:scaleX(.2)}
.live80-v2 .nav-burger[aria-expanded="true"] .burger-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.live80-v2 .nav-scrim{display:none}
/* ---------------------------------------------------------------------------
   MENUE – Handy/Tablet
   Breakpoint bleibt bei 1000px – gegengemessen, nicht angenommen: mit der
   groesseren, zweizeiligen Schrift ist die Menueleiste 614px breit, bei
   1001px Viewport bleiben zwischen Logo und Menue noch 126px Luft.
   Aus der frueheren Klappleiste ist eine Vollbild-Buehne geworden: grosse
   Ziele, gestaffelter Auftritt, Gitterboden – am Handy ist das Menue die
   halbe Seite und darf entsprechend auftreten.
   --------------------------------------------------------------------------- */
@media (max-width:1000px){.live80-v2 .nav-spot{display:none}
/* 🔴🔴 Ohne diese Zeile ist das Vollbildmenue KEIN Vollbildmenue.
     .site-header traegt backdrop-filter – und ein Element mit backdrop-filter
     (ebenso filter, transform, perspective, will-change) wird zum
     ENTHALTENDEN BLOCK fuer position:fixed-Nachfahren. Das Menue liegt im
     Header, sein inset:0 bezieht sich also auf die 125px hohe Kopfzeile
     statt auf den Bildschirm: gemessen 2026-08-05 reichte die Flaeche bis
     y=125, darunter stand die Seite offen da.
     Der alten Klappleiste ist das nie aufgefallen, weil sie mit
     inset:74px 0 auto 0 und height:auto zufaellig dasselbe Ergebnis lieferte
     – der Header ist ja ohnehin oben und ueber die volle Breite.
     Der Weichzeichner wird nur solange abgeschaltet, wie das Menue offen ist;
     dahinter liegt dann ohnehin die deckende Menueflaeche. */
.live80-v2.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;
    /* ueber die Menueflaeche heben, sonst verschwindet das Logo dahinter und
       das offene Menue haette keinen sichtbaren Absender mehr */
    z-index:1001;background:none}
/* Der Header ist zwar oben, .nav-links liegt aber IN ihm – innerhalb
     desselben Stapelkontexts gewinnt das Menue (z-index 1000) gegen das
     statisch positionierte Logo. Es braucht deshalb eine eigene Stufe. */
.live80-v2.nav-open .nav-logo{position:relative;z-index:1002}
/* Gleiches Problem beim Tonknopf: er lag hinter der Menueflaeche und war
     damit ein unsichtbares 44px-Tippziel neben dem X. */
.live80-v2.nav-open .nav-tools{position:relative;z-index:1002}
.live80-v2 .nav-links{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;justify-content:center;
    gap:var(--s1);padding:calc(74px + var(--s6)) var(--s5) var(--s7);
    background:
      linear-gradient(180deg,rgba(58,17,96,.985),rgba(42,11,73,.99));
    backdrop-filter:blur(18px);
    overflow-y:auto;overscroll-behavior:contain;
    /* Aufziehen wie ein Rolltor statt Reinschieben: clip-path kostet kein
       Layout und laesst die Eintraege darunter stehenbleiben. */
    clip-path:inset(0 0 100% 0);
    opacity:0;visibility:hidden;
    transition:clip-path .42s var(--ease),opacity .25s var(--ease),visibility 0s linear .42s}
.live80-v2 .nav-links.open{clip-path:inset(0 0 0 0);opacity:1;visibility:visible;transition-delay:0s,0s,0s}
/* Gitterboden am unteren Rand – dasselbe Motiv wie im Hero, damit das Menue
     als Teil der Seite gelesen wird und nicht als Systemdialog. */
.live80-v2 .nav-links::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;
    background:
      repeating-linear-gradient(to right,rgba(255,45,149,.22) 0 1px,transparent 1px 42px),
      repeating-linear-gradient(to bottom,rgba(255,45,149,.22) 0 1px,transparent 1px 34px);
    -webkit-mask:linear-gradient(to top,#000,transparent);mask:linear-gradient(to top,#000,transparent)}
.live80-v2 .nav-links li{position:relative;z-index:1;
    /* Gestaffelter Auftritt. --i setzt das JS; ohne JS ist opacity 1. */
    opacity:0;transform:translateY(18px)}
.live80-v2 .nav-links.open li{animation:nav-item-in .5s var(--ease) calc(60ms * var(--i,0) + 90ms) both}
@keyframes nav-item-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.live80-v2 .nav-links a{width:100%;min-height:64px;justify-content:flex-start;
    padding:var(--s3) var(--s4);border-radius:var(--r-md);
    border-bottom:1px solid rgba(255,255,255,.09);
    font-size:clamp(26px,7.6vw,38px);font-weight:800;letter-spacing:.04em;line-height:1}
/* Die Roehre laeuft hier senkrecht am linken Rand mit – waagerecht unter
     einem 38px-Wort waere sie eine zweite Trennlinie neben der Zeile darunter. */
.live80-v2 .nav-links a::after{left:calc(var(--s4) * -.5);right:auto;top:8px;bottom:8px;width:3px;height:auto;
    background:linear-gradient(180deg,rgba(38,224,255,.2),var(--c-cyan),rgba(38,224,255,.2));
    transform:scaleY(0);transform-origin:50% 50%;transition:transform .3s var(--ease)}
.live80-v2 .nav-links a:active::after,.live80-v2 .nav-links a:focus-visible::after{transform:scaleY(1)}
.live80-v2 .nav-links .nav-tickets-li>a{margin-top:var(--s5);justify-content:center;border-bottom:0;
    min-height:62px;border-radius:var(--r-pill);
    font-size:clamp(18px,4.6vw,22px);letter-spacing:.16em}
/* 🔴🔴 `[hidden]` MUSS hier ausdruecklich nachgezogen werden. Das Attribut
     wirkt nur ueber `[hidden]{display:none}` aus dem BROWSER-Stylesheet – und
     jede Autorenregel schlaegt das, auch eine mit gleicher Spezifitaet. Ohne
     die naechste Zeile stand die Abdunklung dauerhaft als 375x812-Flaeche mit
     z-index:999 ueber der Seite: unsichtbar (opacity:0), aber klickfangend.
     Getroffen hat es zuerst den Burger – das Menue liess sich gar nicht mehr
     oeffnen. ⚠️ Der Burger traegt zwar z-index:1002, das half aber nicht: er
     liegt im .site-header, und der bildet mit z-index:600 einen eigenen
     Stapelkontext – 1002 gilt nur INNERHALB des Headers. */
.live80-v2 .nav-scrim[hidden]{display:none}
.live80-v2 .nav-scrim{display:block;position:fixed;inset:0;z-index:999;background:rgba(var(--c-shadow-deep),.6);
    opacity:0;transition:opacity .3s var(--ease)}
.live80-v2 .nav-scrim.on{opacity:1}
/* 🔴 Ohne diese Zeile klebten Ton- und Burger-Button am Logo statt am rechten
     Rand (gemessen 2026-08-05 bei 375px: Burger endete bei x=256, die Leiste
     bei x=351 – 95px Luft rechts daneben). Ursache: nach RECHTS geschoben hat
     bis dahin .nav-links{margin-left:auto} – und genau die wird hier
     position:fixed, faellt also aus dem Flex-Fluss und schiebt nichts mehr.
     Der Umbruch faellt am Desktop nicht auf, weil dort beide Regeln greifen. */
.live80-v2 .nav-tools{margin-left:auto}
.live80-v2 .nav-burger{display:inline-flex}
.live80-v2 .chip .chip-label{display:none}}
@media (max-width:1000px) and (prefers-reduced-motion:reduce){.live80-v2 .nav-links{transition:opacity .2s linear,visibility 0s linear .2s}
.live80-v2 .nav-links.open li{animation:none;opacity:1;transform:none}}
/* Seite friert ein, solange das Menue offen ist – sonst scrollt der Hintergrund
   unter dem Vollbildmenue weg und man landet nach dem Schliessen woanders. */
.live80-v2.nav-open{overflow:hidden}
/* ===========================================================================
   6. HERO
   =========================================================================== */
.live80-v2 .hero{position:relative;min-height:min(94svh,880px);display:flex;align-items:center;
  padding-block:var(--s7) var(--s9);overflow:hidden}
/* 🔴 KEIN abgedunkelter Hero-Grund. Ein solcher Kasten war am 2026-07-29 kurz
   drin und wurde vom Kunden abgelehnt – der Hero bleibt im hellen Pink der
   Seite. Der Kontrast der Effekte kommt stattdessen daraus, dass sie in BEIDE
   Richtungen gehen: tiefes Magenta UND helles Weissrosa auf mittlerem Grund.
   Nicht wieder abdunkeln. */
.live80-v2 .hero-sun{position:absolute;left:50%;top:clamp(30px,9vh,140px);transform:translateX(-50%);
  width:min(66vw,560px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(180deg,var(--c-gold) 0%,var(--c-amber) 34%,var(--c-pink) 72%,#8a0052 100%);
  filter:drop-shadow(0 0 110px rgba(255,45,149,.7));opacity:.95;z-index:0;
  -webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 34px,transparent 34px 42px),linear-gradient(to bottom,#000 46%,transparent 92%);
  -webkit-mask-composite:source-in;
          mask-image:repeating-linear-gradient(to bottom,#000 0 34px,transparent 34px 42px),linear-gradient(to bottom,#000 46%,transparent 92%);
          mask-composite:intersect;
  animation:sun-breathe 7s ease-in-out infinite}
@keyframes sun-breathe{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-50%,-10px) scale(1.03)}}
/* ===========================================================================
   HERO-HINTERGRUND – spektakulaer, aber komplett in Pink (Kundenwunsch
   2026-07-29). Die orange Sonne ist und bleibt entfernt; die Wirkung kommt
   jetzt aus vier Ebenen statt aus einer Scheibe.

   🔴 Alle vier animieren ausschliesslich transform und opacity – beides
   GPU-billig. KEIN animierter filter/blur (das war die iOS-Bremse, siehe
   Block 18) und kein background-attachment:fixed (das war die Desktop-Bremse).
   Wer hier etwas ergaenzt, haelt sich an dieselbe Regel.
   =========================================================================== */
/* Hinter dem Logo liegt bewusst NICHTS mehr. Strahlenkranz und
   Schockwellen-Ringe waren bis 2026-07-29 hier und wurden vom Kunden
   abgelehnt ("Das hinter dem Logo wuerden wir gerne weglassen").
   Nicht wieder einbauen. */
/* 3. Horizontgluehen ueber dem Gitterboden – gibt der Szene Tiefe und
      verankert das Logo optisch, ohne eine Sonne zu sein. */
/* ⚠️ Die seitliche Maske ist Pflicht: ohne sie zeichnet der lineare Verlauf
   die Kanten des Kastens nach und man sieht ein helles Rechteck hinter der
   Headline (belegt im ersten Versuch). */
/* 🔴 Der Kasten MUSS ueber sein Helligkeitsmaximum hinaus weiterlaufen.
   Vorher sass das Maximum des Verlaufs (at 50% 100%) genau auf der Unterkante
   und brach dort hart ab – als sichtbarer Balken quer durch die Headline
   (an Pixeln gemessen bei y=801, "DER WELT" liegt bei y 800–899).
   Jetzt liegt das Maximum bei 62% der Kastenhoehe, darunter laeuft der
   Verlauf INNERHALB des Kastens sauber auf transparent aus. */
.live80-v2 .hero-horizon{position:absolute;left:50%;bottom:11%;z-index:0;pointer-events:none;
  width:min(120vw,1250px);height:min(52vh,480px);transform:translateX(-50%);
  background:
    radial-gradient(52% 46% at 50% 62%,rgba(255,232,246,.85),rgba(255,150,210,.4) 46%,transparent 78%);
  -webkit-mask:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);
          mask:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);
  animation:horizon-pulse 8s ease-in-out infinite}
@keyframes horizon-pulse{0%,100%{opacity:.75;transform:translateX(-50%) scaleY(1)}
                         50%{opacity:1;transform:translateX(-50%) scaleY(1.1)}}
/* 4. Laser, die vom Horizont nach oben streichen – jetzt in drei PINK-Toenen
      statt Pink/Cyan/Gold. Cyan und Gold bleiben den Bedienelementen
      vorbehalten (Kicker, Rahmen, Buttons), der Hintergrund ist reines Pink. */
.live80-v2 .hero-lasers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.6}
.live80-v2 .hero-lasers b{position:absolute;bottom:38%;left:50%;width:3px;height:70vh;transform-origin:50% 100%;
  background:linear-gradient(to top,rgba(255,45,149,.85),transparent);filter:blur(1px)}
.live80-v2 .hero-lasers b:nth-child(1){animation:laser 9s ease-in-out infinite}
.live80-v2 .hero-lasers b:nth-child(2){width:5px;background:linear-gradient(to top,rgba(255,238,248,.9),transparent);animation:laser 11s ease-in-out infinite reverse}
.live80-v2 .hero-lasers b:nth-child(3){background:linear-gradient(to top,rgba(96,0,60,.75),transparent);animation:laser 13s ease-in-out infinite}
@keyframes laser{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(38deg)}}
.live80-v2 .hero-inner{position:relative;z-index:2;text-align:center;display:grid;gap:var(--s4);justify-items:center}
/* Hero-Auftritt beim Laden: Logo faellt herein, Headline kommt aus der
   Unschaerfe nach vorn, Badge und Buttons folgen versetzt.
   ⚠️ Jede dieser Animationen laeuft mit fill "both" – die 100%-Keyframes
   MUESSEN daher den Basis-filter des Elements wiederholen, sonst haelt die
   Fuellung filter fest und der Neon-Schein (drop-shadow) ist danach weg. */
.live80-v2 .hero-logo{width:min(74vw,430px);filter:drop-shadow(0 0 40px rgba(255,45,149,.75));
  animation:hero-drop 1.15s cubic-bezier(.16,1,.3,1) .05s both,
            float 6s ease-in-out 1.3s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes hero-drop{
  0%  {opacity:0;transform:translate3d(0,-90px,0) scale(.72) rotate(-6deg);
       filter:blur(20px) drop-shadow(0 0 60px rgba(255,45,149,1))}
  60% {opacity:1}
  100%{opacity:1;transform:none;filter:blur(0) drop-shadow(0 0 40px rgba(255,45,149,.75))}
}
.live80-v2 .hero-title{font-size:var(--fs-4xl);display:grid;gap:.02em;
  animation:hero-punch 1.2s cubic-bezier(.16,1,.3,1) .32s both,
            shimmer 7s linear 1.5s infinite}
@keyframes hero-punch{
  0%  {opacity:0;transform:scale(1.5);
       filter:blur(30px) drop-shadow(0 3px 0 rgba(var(--c-shadow),.55)) drop-shadow(0 0 60px rgba(255,45,149,1))}
  55% {opacity:1}
  100%{opacity:1;transform:none;
       filter:blur(0) drop-shadow(0 3px 0 rgba(var(--c-shadow),.6)) drop-shadow(0 0 14px rgba(46,6,84,.95)) drop-shadow(0 0 34px rgba(66,12,120,.8))}
}
@keyframes hero-rise{
  0%  {opacity:0;transform:translate3d(0,40px,0) scale(.9);filter:blur(10px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
/* Touch-Zwillinge ohne Weichzeichner – gleiche Bewegung, gleiches Timing.
   Der Hero-Auftritt laeuft direkt beim Laden und traf damit genau das Fenster,
   in dem das iPhone ohnehin am meisten zu tun hat. Die 100%-Keyframes tragen
   weiterhin den Basis-drop-shadow (fill "both", siehe Kasten oben). */
@keyframes heroT-drop{
  0%  {opacity:0;transform:translate3d(0,-90px,0) scale(.72) rotate(-6deg)}
  60% {opacity:1}
  100%{opacity:1;transform:none;filter:drop-shadow(0 0 40px rgba(255,45,149,.75))}
}
@keyframes heroT-punch{
  0%  {opacity:0;transform:scale(1.5)}
  55% {opacity:1}
  100%{opacity:1;transform:none;
       filter:drop-shadow(0 3px 0 rgba(var(--c-shadow),.6)) drop-shadow(0 0 14px rgba(46,6,84,.95)) drop-shadow(0 0 34px rgba(66,12,120,.8))}
}
@keyframes heroT-rise{
  0%  {opacity:0;transform:translate3d(0,40px,0) scale(.9)}
  100%{opacity:1;transform:none}
}
.live80-v2 .hero-title span{display:block}
.live80-v2 .hero-title .l2{font-size:1.06em}
.live80-v2 .hero-claim-badge{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s5);
  border-radius:var(--r-pill);border:1px solid rgba(255,217,61,.6);background:rgba(255,217,61,.1);
  color:var(--c-gold);font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xs);
  letter-spacing:.2em;text-transform:uppercase;box-shadow:var(--glow-gold);
  animation:hero-rise .9s cubic-bezier(.16,1,.3,1) .85s both,
            badge-glow 3s ease-in-out 1.75s infinite}
@keyframes badge-glow{0%,100%{box-shadow:0 0 10px rgba(255,217,61,.4)}50%{box-shadow:0 0 22px rgba(255,217,61,.85),0 0 48px rgba(255,217,61,.35)}}
.live80-v2 .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center;margin-top:var(--s3);
  animation:hero-rise .9s cubic-bezier(.16,1,.3,1) 1s both}
/* Der frueher hier stehende "Scroll"-Hinweis ist entfernt (Kundenwunsch
   2026-07-28) – er stoerte die Hero-Komposition. Nicht wieder einbauen. */
/* ⚠️ Dieser Block MUSS hinter allen vier Hero-Regeln stehen. Weiter oben
   platziert griff er nur bei .hero-logo und .hero-title – bei gleicher
   Spezifitaet gewinnt die spaeter notierte Regel, und Badge plus Buttons
   liefen weiter mit der Weichzeichner-Fassung (gemessen, nicht vermutet). */
.live80-v2 .hero-logo{animation-name:heroT-drop,float}
.live80-v2 .hero-title{animation-name:heroT-punch,shimmer}
.live80-v2 .hero-cta{animation-name:heroT-rise}
@media (hover:none),(max-width:900px){/* 🔴 Zeitplan drastisch gestrafft. Am Desktop ist der gestaffelte Auftritt
     ueber 1,9 s eine Inszenierung – auf dem Handy liest ihn niemand als
     Absicht, sondern als "laedt noch": bis der letzte Button da ist, sieht die
     Seite leer aus, obwohl laengst gezeichnet wurde. Hier ist alles nach rund
     0,75 s vollstaendig sichtbar. Die Bewegung bleibt, sie ist nur knapper.
     (Der Dauerlaeufer float/badge-glow/shimmer startet entsprechend frueher –
     zweiter Wert in der Liste, sonst laufen sie ins Leere.) */
.live80-v2 .hero-logo{animation-duration:.62s,6s;   animation-delay:0s,.62s}
.live80-v2 .hero-title{animation-duration:.62s,7s;   animation-delay:.10s,.72s}
.live80-v2 .hero-claim-badge{animation-duration:.42s,3s;   animation-delay:.30s,.72s}
.live80-v2 .hero-cta{animation-duration:.42s;      animation-delay:.38s}}
/* ===========================================================================
   6b. LIVE MIT – reine Namensliste (wie auf der alten Seite)
   Kundenwunsch 2026-07-29: die Namen zurueck, aber "cooler und leuchtend".
   Deshalb Neon-Roehrenschrift statt schlichter Liste – und bewusst OHNE
   animierten Weichzeichner (der war die iOS-Bremse, siehe Block 18).
   =========================================================================== */
.live80-v2 .names-sec{padding-block:var(--s8) var(--s7)}
.live80-v2 .names{list-style:none;margin:var(--s6) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:var(--s4) var(--s6)}
.live80-v2 .names li{position:relative;text-align:center}
/* Bewusst KEINE Trennpunkte zwischen den Namen: auf dem pinken Hintergrund
   waren sie praktisch unsichtbar, und am Zeilenende stand einer im Nichts.
   Der Abstand trennt ausreichend. */
.live80-v2 .names .n{display:block;font-family:'Core Sans M','Asap',sans-serif;font-weight:800;
  font-size:clamp(22px,.6rem + 2.5vw,54px);line-height:1.02;letter-spacing:.03em;text-transform:uppercase;
  color:#fff;
  /* 🔴 Der enge Farbring (9px) ist der Grund, warum die Farbe ueberhaupt zu
     sehen ist. Vorher lag zwischen dem weissen Kern (8px) und dem ersten
     farbigen Ring (26px) eine breite blasse Zone – auf dem hellen Magenta-Grund
     wusch das jeden Ton zu "weiss mit Schimmer" aus. Der erste Anlauf hatte
     nur die Palette getauscht und die Radien stehen lassen; im Screenshot war
     davon fast nichts zu sehen.
     Gemessen (dieselbe Seite zweimal gerendert, einmal farbig, einmal mit
     --nglow auf Weiss, Differenz der Pixel im 14px-Ring um die Glyphen):
       alte Radien  – mittlere Farbabweichung 27,9 · staerkste 108
       neue Radien  – mittlere Farbabweichung 34,0 · staerkste 162
     Aufbau wie eine echte Neonroehre: weissgluehender Kern, Farbe DIREKT
     daneben, dann der weiche Hof.
     ⚠️ Den weissen Kern nicht wieder aufziehen – er frisst genau den Ring,
     der die Farbe traegt. */
  text-shadow:0 0 4px rgba(255,255,255,.55),
              0 0 9px rgba(var(--nglow),.95),
              0 0 26px rgba(var(--nglow),.75),
              0 0 60px rgba(var(--nglow),.4);
  transition:text-shadow .3s var(--ease),color .3s var(--ease)}
/* 🔴 NEON-FARBRAD DER NAMENSWAND (Kundenwunsch 2026-08-06: "mehr Abwechslung
   bei den Farben ... mehr unterschiedliche aber passende Farben").
   Vorher waren es drei: Pink als Grundton, jeder 3. Cyan, jeder 5. Gold – bei
   elf Namen also 6x Pink. Jetzt sieben Toene ueber ein --nglow-Tripel, das
   sich die Grund-, Flacker- und Hover-Regel TEILEN. Wer eine Farbe aendert,
   aendert damit automatisch auch den Hover-Zustand.

   ⚠️ Der Zyklus hat bewusst SIEBEN Schritte, nicht sechs: bei zwoelf Namen
   waere ein Sechser-Rad exakt zweimal durchgelaufen, die zweite Haelfte der
   Wand haette die erste Wort fuer Wort in denselben Farben wiederholt. Mit
   sieben verschiebt sich der zweite Durchlauf.

   ⚠️ Der Text selbst bleibt WEISS – gefaerbt ist nur das Leuchten. Sobald die
   Schrift die Farbe traegt, faellt sie auf dem Magenta-Grund durch: Violett
   und Blau liegen dort bei rund 2:1. Deshalb nur text-shadow. */
.live80-v2 .names li{--nglow:255,45,149}
/* 1 · Hot Pink   (--c-pink)  */
.live80-v2 .names li:nth-child(7n+2){--nglow:38,224,255}
/* 2 · Cyan       (--c-cyan)  */
.live80-v2 .names li:nth-child(7n+3){--nglow:255,217,61}
/* 3 · Gold       (--c-gold)  */
.live80-v2 .names li:nth-child(7n+4){--nglow:168,99,255}
/* 4 · Violett                */
.live80-v2 .names li:nth-child(7n+5){--nglow:255,138,26}
/* 5 · Orange                 */
.live80-v2 .names li:nth-child(7n+6){--nglow:54,255,182}
/* 6 · Mint                   */
.live80-v2 .names li:nth-child(7n+7){--nglow:92,140,255}
/* 7 · Elektrisch Blau        */
/* Zusatz wie "Ex Spandau Ballet" – klein, ruhig, damit der Name traegt */
.live80-v2 .names .ctx{display:block;margin-top:.35em;font-family:'Asap',sans-serif;font-weight:400;
  font-size:clamp(11px,.5rem + .35vw,15px);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-ink-3);text-shadow:none}
/* Klickbar: fuehrt zum passenden Video im Karussell darunter */
.live80-v2 .names button{display:block;margin:0 auto;padding:.1em .2em;border:0;background:none;cursor:pointer;
  border-radius:var(--r-sm)}
/* Hover verstaerkt die EIGENE Farbe des Namens, statt alle auf Pink zu
   ziehen – sonst haette der Zeiger genau die Abwechslung wieder eingeebnet,
   um die es hier geht. Die Schrift bleibt weiss (siehe Kontrast-Hinweis oben),
   das Signal traegt der groessere, voll deckende Lichthof. */
.live80-v2 .names button:hover .n,.live80-v2 .names button:focus-visible .n{
  text-shadow:0 0 5px rgba(255,255,255,.85),
              0 0 13px rgba(var(--nglow),1),
              0 0 36px rgba(var(--nglow),.95),
              0 0 92px rgba(var(--nglow),.6)}
.live80-v2 .names .more{font-family:'Core Sans M','Asap',sans-serif;font-size:clamp(14px,.5rem + .8vw,22px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink-3);text-shadow:none}
/* 🔴 Kundenwunsch 2026-08-06: "…und viele mehr" steht allein in der untersten
   Zeile. Vorher haengte es als letztes Flex-Element hinter dem letzten Namen
   in derselben Reihe (gemessen: gleiche Zeile wie SAMANTHA FOX / PAUL YOUNG)
   und las sich wie ein weiterer Act.
   ⚠️ flex-basis wirkt in der ACHSENRICHTUNG – in der Spalten-Anordnung ab
   ≤700px waeren das 100 % der HOEHE. Dort deshalb zurueckgesetzt (siehe
   Mobil-Block); einspaltig steht es ohnehin allein. */
.live80-v2 .names .more-li{flex-basis:100%;margin-top:var(--s2)}
/* Flackern beim Einschalten wie eine Neonroehre, die anspringt.
   Laeuft auf ALLEN Geraeten: animiert wird ausschliesslich opacity, und genau
   das ist die billige Sorte – die iOS-Bremse waren animierte Weichzeichner
   (siehe Block 18), nicht Animationen an sich. */
.live80-v2 .names li.lit .n{animation:name-on .9s steps(1,end) both}
@keyframes name-on{
  0%{opacity:0}12%{opacity:1}20%{opacity:.2}28%{opacity:1}40%{opacity:.35}
  48%{opacity:1}62%{opacity:.6}70%{opacity:1}100%{opacity:1}
}
/* Auf schmalen Geraeten jeder Name in eigener Zeile. Als umbrechende Reihe
   sah es zerfasert aus: "THOMAS ANDERS" und "SANDRA" landeten nebeneinander,
   der eine mit Zusatzzeile darunter, der andere ohne – gemessen, nicht
   geschaetzt. Untereinander entspricht ausserdem der alten Seite. */
@media (max-width:700px){/* 🔴 Zeilenabstand der Namenswand, Kundenmeldung 2026-08-05: "die Abstaende
     zwischen den Kuenstlern auf mobile sind zu gross vertikal".
     Einspaltig zaehlt nur row-gap – und --s4 (16px) stammt aus der MEHR-
     spaltigen Anordnung, wo er beide Achsen bedient. Untereinander kommen zu
     den 16px noch 2x .1em Innenabstand des Knopfes, macht rund 20px Luft
     zwischen zwei 22px hohen Namen: fast eine ganze Zeile.
     ⚠️ Nicht auf 0 ziehen – der Abstand zwischen zwei NAMEN muss groesser
     bleiben als der zwischen einem Namen und SEINER Zusatzzeile (.35em ≈ 4px),
     sonst rutscht die Zusatzzeile optisch zum falschen Kuenstler. */
.live80-v2 .names{flex-direction:column;align-items:center;gap:clamp(8px, -3.6px + 3.1vw, 16px)}
.live80-v2 .names li{width:100%}
/* siehe Hinweis an .more-li: in Spaltenrichtung meint flex-basis die Hoehe */
.live80-v2 .names .more-li{flex-basis:auto}}
/* ===========================================================================
   EQUALIZER AM HERO-FUSS
   Vom Kunden ausdruecklich behalten ("unten die senkrechten balken sind gut"),
   nachdem die uebrigen Hologramm-Elemente (schwebende 80er-Icons, Memphis-
   Konfetti, Lichtstrahl) am 2026-07-29 verworfen wurden. Nicht wieder
   zusammen mit Icons einbauen.
   🔴 Animiert wird ausschliesslich scaleY – GPU-billig, kein Filter.
   =========================================================================== */
.live80-v2 .holo-eq{position:absolute;left:0;right:0;bottom:0;height:min(22vh,190px);z-index:0;
  display:flex;align-items:flex-end;gap:clamp(10px,1.6vw,26px);padding-inline:2vw;pointer-events:none;
  -webkit-mask:linear-gradient(to top,#000 30%,transparent);mask:linear-gradient(to top,#000 30%,transparent)}
.live80-v2 .holo-eq i{flex:1;height:100%;transform-origin:50% 100%;border-radius:3px 3px 0 0;
  background:linear-gradient(to top,rgba(255,205,235,.20),rgba(255,150,210,.03));
  box-shadow:inset 0 0 0 1px rgba(255,225,244,.13);
  animation:eq-bar 2.6s ease-in-out infinite}
@keyframes eq-bar{0%,100%{transform:scaleY(.16)}50%{transform:scaleY(.62)}}
@media (prefers-reduced-motion:reduce){.live80-v2 .holo-eq i{animation:none}}
/* ===========================================================================
   7. LAUFTEXT-BAND
   =========================================================================== */
.live80-v2 .marquee{position:relative;z-index:3;overflow:hidden;border-block:1px solid rgba(255,45,149,.35);
  background:linear-gradient(90deg,rgba(215,0,127,.3),rgba(47,12,40,.92) 45%,rgba(0,159,227,.28));
  padding-block:var(--s3)}
.live80-v2 .marquee-track{display:flex;gap:var(--s6);width:max-content;animation:marq 32s linear infinite}
.live80-v2 .marquee:hover .marquee-track{animation-play-state:paused}
.live80-v2 .marquee span{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-lg);letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;color:#fff;text-shadow:0 0 14px rgba(255,45,149,.8)}
.live80-v2 .marquee span.alt{color:var(--c-cyan);text-shadow:var(--glow-cyan)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ===========================================================================
   8. COUNTDOWN
   =========================================================================== */
.live80-v2 .countdown-bar{position:relative;z-index:3;
  border-bottom:1px solid rgba(38,224,255,.25);background:rgba(96,14,78,.75);backdrop-filter:blur(10px)}
.live80-v2 .countdown-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s4) var(--s7);padding-block:var(--s5)}
.live80-v2 .countdown-meta{display:grid;gap:2px;text-align:center}
.live80-v2 .countdown-meta .kicker{font-size:var(--fs-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--c-cyan)}
.live80-v2 .countdown-meta .where{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-lg);letter-spacing:.08em;text-transform:uppercase}
.live80-v2 .countdown-meta .where b{font-weight:inherit}
.live80-v2 .countdown-meta .where i{font-style:normal}
.live80-v2 .clock{display:flex;gap:var(--s3)}
.live80-v2 .clock-unit{min-width:76px;padding:var(--s3) var(--s2);text-align:center;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm);background:rgba(88,13,72,.7);box-shadow:inset 0 0 26px rgba(255,45,149,.2)}
.live80-v2 .clock-num{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xl);line-height:1;
  font-variant-numeric:tabular-nums;text-shadow:var(--glow-pink)}
.live80-v2 .clock-num.tick{animation:tick .45s var(--ease)}
@keyframes tick{0%{transform:translateY(-40%) scale(1.1);opacity:.2}100%{transform:none;opacity:1}}
.live80-v2 .clock-lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-ink-3);margin-top:6px}
/* ===========================================================================
   9. LINE-UP – Name, Video-Screen, Song
   =========================================================================== */
.live80-v2 .sec-head{display:grid;gap:var(--s3);justify-items:center;text-align:center;margin-bottom:var(--s7)}
.live80-v2 .sec-head h2{font-size:var(--fs-3xl)}
/* Karussell statt Raster (Kundenwunsch 2026-07-29: "als Carousel in einer Reihe
   zum Durchklicken"). Nebeneffekt, der gut passt: es laedt nur noch, was man
   sieht – aus elf Vorschaubildern auf einmal werden zwei bis drei.
   Umgesetzt mit scroll-snap: das ist nativ, wischbar, tastaturbedienbar und
   braucht keine Library. Die Pfeiltasten scrollen um genau eine Karte. */
.live80-v2 .lineup-carousel{position:relative}
.live80-v2 .lineup-grid{display:grid;grid-auto-flow:column;
  grid-auto-columns:min(84vw,360px);
  gap:var(--s6);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--s5);
  padding:var(--s2) var(--s5) var(--s6);margin-inline:calc(var(--s5) * -1);
  scrollbar-width:none}
.live80-v2 .lineup-grid::-webkit-scrollbar{display:none}
.live80-v2 .lineup-grid>*{scroll-snap-align:center}
/* ⚠️ Die Karten haben einen rotierenden Neon-Rand auf inset:-1px und heben
   sich beim Hover um 8px – ohne etwas Luft schneidet das Scroll-Fenster
   beides ab. Deshalb padding oben/unten, nicht margin. */
/* Ziel eines Klicks aus der Namensliste – kurz hervorheben */
.live80-v2 .act-card--target{border-color:var(--c-pink) !important;
  box-shadow:0 0 26px rgba(255,45,149,.9),0 0 80px rgba(255,45,149,.45) !important}
/* Pfeile: nur wo es einen Mauszeiger gibt. Auf dem Handy wird gewischt. */
.live80-v2 .car-nav{display:none}
@media (hover:hover){.live80-v2 .car-nav{display:flex;gap:var(--s3);justify-content:center;margin-top:var(--s2)}
.live80-v2 .car-nav button{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    border:2px solid rgba(38,224,255,.55);background:rgba(38,224,255,.08);
    transition:background-color .25s var(--ease),box-shadow .25s var(--ease),opacity .25s}
.live80-v2 .car-nav button:hover:not(:disabled){background:var(--c-cyan);box-shadow:var(--glow-cyan)}
.live80-v2 .car-nav button:hover:not(:disabled) svg{stroke:#04212c}
.live80-v2 .car-nav button:disabled{opacity:.3;cursor:default}
.live80-v2 .car-nav svg{width:20px;height:20px;fill:none;stroke:var(--c-cyan);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}}
/* Fortschrittspunkte – zeigen, wie viel noch kommt */
.live80-v2 .car-dots{display:flex;gap:8px;justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
.live80-v2 .car-dots button{width:10px;height:10px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),width .3s var(--ease)}
.live80-v2 .car-dots button[aria-current="true"]{width:26px;border-radius:5px;background:var(--c-pink);
  border-color:var(--c-pink);box-shadow:var(--glow-pink)}
/* Tippziele der Punkte: die FLAECHE waechst auf 44px, der sichtbare Punkt bleibt 10px.
   🔴 `border:0` ist Pflicht. Ohne den Reset traegt die 22x44 grosse Flaeche den
   1px-Rahmen der Grundregel weiter, und die Reihe sieht aus wie eine Kette leerer
   Kaestchen statt wie eine Punktreihe. Am 2026-08-07 auf allen vier Eventseiten im
   Screenshot gesehen – die Geometriemessung war dabei „richtig" (Checkliste 171).
   🔴 Diese Regel stand bis 2026-08-07 NUR in `koeln-extra.css` und erbte damit nur
   nach unten: die Startseite blieb bei 10x10 (Checkliste 274). Sie steht deshalb
   jetzt hier im gemeinsamen Designsystem und gilt fuer alle fuenf Seiten; das
   Kapitel-CSS der Eventseiten wiederholt sie NICHT mehr.
   ⚠️ Bedingung ist das EINGABEGERAET, nicht die Breite – ein Tablet mit 900px wird
   genauso mit dem Finger bedient (Checkliste 138).
   ⚠️ Breite gegengerechnet, MIT dem breiteren aktiven Punkt: 13 Punkte (Koeln, der
   laengste Fall) = 12x22 + 38 = 302px, verfuegbar sind bei 375px 327px. Die HOEHE
   traegt das Tippziel, die Breite darf kleiner bleiben. */
@media (hover:none),(max-width:1000px){.live80-v2 .car-dots{gap:0}
.live80-v2 .car-dots button{width:22px;height:44px;padding:0;border:0;background:none;border-radius:0;
    display:inline-flex;align-items:center;justify-content:center}
.live80-v2 .car-dots button::before{content:"";width:10px;height:10px;border-radius:50%;
    background:rgba(255,255,255,.32);transition:width .25s var(--ease),background-color .25s var(--ease)}
.live80-v2 .car-dots button[aria-current="true"]{width:38px;background:none}
.live80-v2 .car-dots button[aria-current="true"]::before{width:26px;border-radius:5px;
    background:var(--c-pink);box-shadow:var(--glow-pink)}}
.live80-v2 .act-card{
  position:relative;display:grid;gap:var(--s3);padding:var(--s5) var(--s5) var(--s6);
  border-radius:var(--r-md);background:var(--c-card);border:1px solid var(--c-line);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
  transform-style:preserve-3d;
}
/* Rotierender Neon-Rand */
.live80-v2 .act-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:0;
  background:conic-gradient(from var(--ang,0deg),transparent 0 62%,var(--c-pink) 74%,var(--c-cyan) 86%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s var(--ease)}
.live80-v2 .act-card:hover{transform:translateY(-8px);border-color:rgba(255,45,149,.5);box-shadow:var(--glow-pink)}
.live80-v2 .act-card:hover::before{opacity:1;animation:spin-ang 3.4s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin-ang{to{--ang:360deg}}
.live80-v2 .act-card>*{position:relative;z-index:1}
.live80-v2 .act-name{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-lg);letter-spacing:.05em;
  text-transform:uppercase;line-height:1.05;color:var(--c-gold);
  text-shadow:0 0 10px rgba(255,217,61,.75),0 0 30px rgba(255,180,0,.4);padding-right:52px}
.live80-v2 .act-ctx{font-size:var(--fs-xs);color:var(--c-cyan);letter-spacing:.06em;min-height:1.2em;margin-top:-6px}
/* Der Video-Screen: CRT-Monitor mit Thumbnail */
.live80-v2 .act-screen{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;cursor:pointer;
  background:#04010b;border:2px solid rgba(38,224,255,.35);
  box-shadow:0 0 0 4px rgba(24,5,54,.92),0 14px 40px rgba(var(--c-shadow),.65),inset 0 0 40px rgba(38,224,255,.1);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
  padding:0;display:block;width:100%}
.live80-v2 .act-card:hover .act-screen{border-color:var(--c-cyan);
  box-shadow:0 0 0 4px rgba(24,5,54,.92),0 0 26px rgba(38,224,255,.55),0 0 60px rgba(38,224,255,.25)}
.live80-v2 .act-screen img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s var(--ease);
  filter:saturate(1.05) contrast(1.04) brightness(.92)}
.live80-v2 .act-card:hover .act-screen img{transform:scale(1.05);filter:saturate(1.2) contrast(1.08) brightness(1)}
/* Scanlines + Glaswölbung */
.live80-v2 .act-screen .scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(var(--c-shadow),.28) 0 2px,transparent 2px 4px);opacity:.55}
.live80-v2 .act-screen .glass{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 30% 8%,rgba(255,255,255,.16),transparent 55%),
             radial-gradient(ellipse at center,transparent 55%,rgba(var(--c-shadow),.6) 100%)}
/* Einschalt-Animation, sobald der Screen in den Blick kommt */
.live80-v2 .act-screen .power{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.live80-v2 .act-card.lit .act-screen .power{animation:power-on .7s var(--ease) forwards}
@keyframes power-on{
  0%{opacity:1;transform:scaleY(.012) scaleX(1)}
  35%{opacity:.85;transform:scaleY(.012) scaleX(1)}
  60%{opacity:.5;transform:scaleY(1) scaleX(1)}
  100%{opacity:0;transform:scaleY(1)}
}
.live80-v2 .act-screen .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;border:2px solid rgba(255,255,255,.9);background:rgba(215,0,127,.5);
  backdrop-filter:blur(3px);box-shadow:var(--glow-pink);transition:transform .25s var(--ease),background-color .25s var(--ease)}
.live80-v2 .act-screen .play svg{width:24px;height:24px;margin-left:3px;fill:#fff}
.live80-v2 .act-screen:hover .play{scale:1.12;background:var(--c-pink)}
.live80-v2 .act-screen .play::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,45,149,.65);
  animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
/* „LIVE"-Ecke wie bei einem Sendungsmitschnitt */
.live80-v2 .act-screen .osd{position:absolute;left:10px;top:9px;display:flex;align-items:center;gap:6px;
  font-family:'Core Sans M','Asap',sans-serif;font-size:11px;letter-spacing:.18em;color:#fff;
  text-shadow:0 2px 6px rgba(var(--c-shadow),.9)}
.live80-v2 .act-screen .osd i{width:8px;height:8px;border-radius:50%;background:#ff2d2d;box-shadow:0 0 10px #ff2d2d;
  animation:rec 1.4s steps(1) infinite}
@keyframes rec{0%,49%{opacity:1}50%,100%{opacity:.15}}
/* Kuenstler-Badge in der Screen-Ecke */
.live80-v2 .act-badge{position:absolute;right:8px;bottom:-16px;width:76px;height:76px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,45,149,.85);background:#0a0420;box-shadow:var(--glow-pink);z-index:3;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.live80-v2 .act-card:hover .act-badge{transform:scale(1.08);box-shadow:var(--glow-pink-lg)}
/* scale 1.62 schneidet die blaue Namensplakette der Badge-Grafik sicher weg –
   der Name steht schon als Ueberschrift ueber der Karte. */
.live80-v2 .act-badge img{width:100%;height:auto;transform:scale(1.62) translateY(13%)}
.live80-v2 .act-screen-wrap{position:relative}
.live80-v2 .act-song{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--c-ink-2);
  margin-top:var(--s4);padding-right:80px}
.live80-v2 .eq{display:inline-flex;align-items:flex-end;gap:2px;height:15px;flex:none}
.live80-v2 .eq i{display:block;width:3px;background:var(--c-pink);box-shadow:0 0 6px rgba(255,45,149,.9);animation:eqb .9s ease-in-out infinite}
.live80-v2 .eq i:nth-child(2){animation-delay:.15s}
.live80-v2 .eq i:nth-child(3){animation-delay:.3s}
.live80-v2 .eq i:nth-child(4){animation-delay:.45s}
@keyframes eqb{0%,100%{height:4px}50%{height:15px}}
/* Keine leere Riesenkachel: die „mehr"-Karte darf niedriger sein als eine Act-Karte. */
.live80-v2 .act-card--more{display:grid;place-items:center;text-align:center;min-height:0;align-self:start;
  padding-block:var(--s8);border-style:dashed;border-color:rgba(38,224,255,.45);background:rgba(38,224,255,.05)}
.live80-v2 .act-card--more p{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-lg);text-transform:uppercase;
  letter-spacing:.08em;color:var(--c-cyan);text-shadow:var(--glow-cyan);animation:tube 5s ease-in-out infinite}
/* ===========================================================================
   10. EVENTS – Illustration vollstaendig, nichts angeschnitten
   =========================================================================== */
/* 🔴 Kundenwunsch 2026-08-04: "die Sektion mit den Locations ist gut, aber zu
   duester – heller und freundlicher, Farben neu denken".
   Umkehrung der bisherigen Logik: statt dunkler Kaesten auf knalligem Grund
   jetzt HELLE Karten. Das loest zwei Dinge auf einmal – die Sektion wirkt
   freundlich, und die Flaechenstufe zum Grund wird groesser statt kleiner
   (gemessen: heller Kartengrund ~96 % Helligkeit gegen ~33 % Grund).
   ⚠️ Damit gilt die Regel "der Grund ist knallig, die Flaechen darauf sind
   dunkel" fuer DIESE Sektion bewusst nicht mehr. Der Fehler von 2026-07-29
   (Karten auf 1,0:1 aufgehellt = Flaeche verschwindet) entstand dadurch, dass
   die Karten Richtung Grundfarbe wanderten. Hier gehen sie in die
   Gegenrichtung – deshalb ist der Kontrast hoeher, nicht niedriger.
   Alle Textfarben in der Karte mussten mitziehen (weiss auf Weiss). */
.live80-v2 .events-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.live80-v2 .event-card{
  --ev-surface:#fff5fb;      /* Kartenflaeche oben */
  --ev-surface-2:#ffe7f4;    /* Kartenflaeche unten */
  --ev-ink:#2c0a4d;          /* Text dunkel – Lila, nicht Schwarz */
  --ev-ink-2:#6a3a86;
  position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg,var(--ev-surface),var(--ev-surface-2));
  box-shadow:0 18px 44px rgba(var(--c-shadow),.42);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.live80-v2 .event-card:hover{transform:translateY(-10px);border-color:#fff;
  box-shadow:0 26px 60px rgba(var(--c-shadow),.5),0 0 34px rgba(255,45,149,.45),0 0 80px rgba(255,45,149,.2)}
/* 3:2 = das Originalformat der Illustrationen (1200x800). object-fit:contain
   garantiert, dass Stadion und Schriftzug nie beschnitten werden. */
.live80-v2 .event-illu{position:relative;aspect-ratio:3/2;background:#2a0b49;overflow:hidden}
.live80-v2 .event-illu img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.live80-v2 .event-card:hover .event-illu img{transform:scale(1.04)}
/* Die Illustrationen sind dunkle Neon-Grafiken und bleiben es – sie sind das
   "Foto" der Karte. Der Verlauf blendet sie nach unten in die HELLE
   Kartenflaeche aus, damit Bild und Textteil eine Karte bleiben und das
   ueberlappende Badge auf hellem Grund sitzt. */
/* 🔴 Kundenwunsch 2026-08-05: "mehr vom Stadion und von der AIDA sichtbar".
   Der Verlauf verdeckte die unteren 34 % der Illustration – er musste so weit
   hochreichen, weil dort das Jahres-Badge auf dem Bild sass. Badge und
   Tage-Zaehler sind raus, also darf er auf einen schmalen Saum schrumpfen.
   ⚠️ Nicht ganz entfernen: ohne ihn steht eine harte Kante zwischen dunkler
   Illustration und heller Karte. */
.live80-v2 .event-illu::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--ev-surface) 0%,rgba(255,245,251,.75) 4%,transparent 13%)}
/* Lichtstreifen, der ueber die Illustration wandert */
.live80-v2 .event-illu .sheen{position:absolute;top:0;bottom:0;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-16deg);animation:sheen 6.5s ease-in-out infinite}
@keyframes sheen{0%{left:-45%}55%,100%{left:120%}}
/* Alle vier Karten sollen optisch identisch aufgebaut sein. „80ER LIVE CRUISE"
   braucht zwei Zeilen – ohne reservierte Hoehe rutschen dort Datum und Button
   nach unten und die Kachel wird hoeher als die drei Stadt-Kacheln. */
/* Inhalt mittig – Kundenwunsch 2026-07-29 ("linksbuendig sieht nicht so gut
   aus"). Galt vorher nur auf schmalen Geraeten, jetzt auf allen Breiten. */
/* margin-top war -38px, damit das Badge halb auf der Illustration lag. Ohne
   Badge zieht die Ueberlappung nur noch Bildflaeche unter den Text – deshalb 0. */
.live80-v2 .event-body{padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s2);
  align-items:center;text-align:center;
  margin-top:0;position:relative;z-index:2;flex:1}
.live80-v2 .event-body .btn{margin-top:auto;align-self:center}
.live80-v2 .ev-stadium{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-sm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ev-ink-2);text-shadow:none}
/* 🔴 Bis 2026-08-05 stand hier min-height:2.1em – Platz fuer zwei Zeilen, weil
   "80ER LIVE CRUISE" umbrach. Das reservierte die Leerzeile aber auf ALLEN
   Karten und riss dort eine sichtbare Luecke zwischen Spielstaette und Stadt
   auf (Kundenmeldung: "der Abstand ist riesig – auch bei den anderen").
   Jetzt laeuft jeder Name in EINER Zeile, die Reservierung ist weg.
   ⚠️ Dafuer muss der lange Name kleiner gesetzt werden – siehe
   .event-card--langer-name. Wer hier die Groesse anfasst, muss dort mitziehen. */
.live80-v2 .ev-city{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xl);letter-spacing:.06em;
  text-transform:uppercase;line-height:1.05;white-space:nowrap;
  /* Hoehe EINER Zeile in der Regelgroesse – nicht in der tatsaechlichen. Der
     lange Name laeuft kleiner (siehe .event-card--langer-name); ohne diese
     feste Hoehe waere seine Zeile niedriger und Datum und Button der Kachel
     saessen ein paar Pixel hoeher als bei den Nachbarn. */
  min-height:calc(var(--fs-xl) * 1.05);
  display:flex;align-items:center;justify-content:center;text-align:center;
  /* Verlauf laeuft jetzt Lila -> Pink statt Weiss -> Rosa. Kein drop-shadow
     mehr: ein Glimmen um dunkle Schrift auf hellem Grund sieht schmutzig aus. */
  background:linear-gradient(135deg,var(--ev-ink) 0%,#7a1a8f 55%,var(--c-pink-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:none}
/* 🔴 Kundenwunsch 2026-08-05: "das Datum muss größer, Monat nicht ausschreiben,
   nur Zahlen, dafür fetter – man muss es sofort erkennen".
   Ausgeschrieben ("SAMSTAG, 03. JULI 2027") lief es fast über die Kachelbreite
   und war dadurch klein gesetzt; als Ziffernblock traegt dieselbe Zeile die
   doppelte Schriftgroesse. Der Wochentag bleibt – er beantwortet die Frage
   "passt das ueberhaupt?" – aber als kleiner, gedaempfter Vorsatz, damit die
   Zahlen die Zeile fuehren. */
/* "80ER LIVE CRUISE" braucht bei 34px rund 326px, die Kachel bietet 256px.
   Eigene Rampe statt fester px-Wert, damit es auch bei schmaleren Spalten
   passt: bei 1920 landet sie auf 25px, das Motiv bleibt einzeilig. */
.live80-v2 .event-card--langer-name .ev-city{font-size:clamp(19px,.85rem + .7vw,25px)}
.live80-v2 .ev-date{font-family:'Core Sans M','Asap',sans-serif;font-weight:800;
  font-size:clamp(19px,1rem + .5vw,25px);line-height:1.15;letter-spacing:.01em;
  /* 🔴 Mindestabstand zum Button. Ohne ihn haengt das Datum am Button, sobald
     eine Karte die Hoehe vorgibt – dann bleibt fuer margin-top:auto kein
     Freiraum mehr zu verteilen (belegt 2026-08-05: 8px statt 37px auf der
     Cruise-Kachel, waehrend die anderen drei sauber aussahen). */
  margin-bottom:var(--s4);
  color:var(--ev-ink);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;justify-content:center;gap:.45em;flex-wrap:wrap}
.live80-v2 .ev-dow{font-size:.62em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ev-ink-2)}
/* Bewusst KEIN flex: als Flex-Container wuerden "noch", die Zahl und "Tage"
   drei eigene Items – sie brechen dann einzeln um statt wie ein Satz. Inline
   sitzt das <b> ohnehin auf derselben Grundlinie. */
/* 🔴 Kundenwunsch 2026-08-05: "auf Mobil den Text in den Eventkacheln groesser –
   das ist sehr verloren dadrin". Ursache ist kein Fehler, sondern die Rampen:
   alle vier Groessen (--fs-xl, --fs-sm und die beiden eigenen clamp()) sitzen
   bei 375px auf ihrem MINIMUM, weil sie fuer die schmale Mehrspalten-Ansicht
   ausgelegt sind. Dort ist die Karte 306px breit – am Handy ist sie 327px und
   steht allein, der Text wirkt darin verloren.
   ⚠️ Die Grenze ist 660px, NICHT die 700px der uebrigen Mobil-Bloecke: bis
   660px laeuft das Grid einspaltig (gemessen: 660 = 1 Spalte/612px Karte,
   680 = 2 Spalten/300px Karte). Bei 700px wuerde diese Vergroesserung auf
   zweispaltige 260px-Karten treffen und ueberlaufen.
   ⚠️ vw-Rampen statt fester px: unterhalb 660px waechst die Karte linear mit
   dem Viewport (277px Innenmass bei 375, 562px bei 660), die Schrift muss
   mitwachsen. Die Minima sind so gewaehlt, dass auch 320px noch passt –
   dort ist "RHEINENERGIESTADION" (ein Wort, nicht umbrechbar) der Engpass. */
@media (max-width:660px){/* Regelgroesse der Stadt – eigene Property, weil die Zeilenhoehe unten
     dieselbe Zahl braucht (Checkliste 119: min-height IMMER in der
     Regelgroesse, sonst sitzen Datum und Button der Cruise-Kachel hoeher). */
.live80-v2 .event-card{--ev-city-fs:clamp(26px,8vw,40px)}
/* ⚠️ Engpass der ganzen Kachel: "RHEINENERGIESTADION" ist EIN Wort und hat
     keine Umbruchstelle – laeuft es ueber, ragt es aus der Karte statt
     umzubrechen. Die Rampe ist an ihm ausgemessen (203px bei 14px), nicht
     geschaetzt: bei 320px Viewport bleiben 224px Innenmass, bei 375px 277px. */
.live80-v2 .ev-stadium{font-size:clamp(14px,4.5vw,18px)}
.live80-v2 .ev-city{font-size:var(--ev-city-fs);min-height:calc(clamp(26px,8vw,40px) * 1.05)}
.live80-v2 .event-card--langer-name .ev-city{font-size:clamp(20px,6.2vw,31px)}
.live80-v2 .ev-date{font-size:clamp(21px,6.4vw,30px)}
.live80-v2 .event-body .btn{font-size:clamp(13px,3.5vw,15px);min-height:52px}}
/* ===========================================================================
   11. ZEITREISE + VHS
   =========================================================================== */
.live80-v2 .zeitreise{text-align:center}
.live80-v2 .tv-wrap{position:relative;margin-top:var(--s7);border-radius:var(--r-lg);overflow:hidden;
  border:2px solid rgba(38,224,255,.3);box-shadow:0 0 90px rgba(0,159,227,.3)}
/* height:auto ist Pflicht – sonst greift das height="720"-Attribut, der Rahmen
   wird zu hoch und das Video sitzt mit schwarzen Balken darin. */
.live80-v2 .tv-wrap video{width:100%;height:auto;display:block;filter:saturate(1.15) contrast(1.06)}
.live80-v2 .tv-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(var(--c-shadow),.24) 0 2px,transparent 2px 4px);opacity:.5}
.live80-v2 .tv-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(var(--c-shadow),.75) 100%)}
.live80-v2 .tv-osd{position:absolute;left:var(--s5);top:var(--s4);display:flex;align-items:center;gap:var(--s2);
  font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-sm);letter-spacing:.2em;text-shadow:0 2px 6px rgba(var(--c-shadow),.85)}
.live80-v2 .rec-dot{width:11px;height:11px;border-radius:50%;background:#ff2d2d;box-shadow:0 0 14px #ff2d2d;animation:rec 1.4s steps(1) infinite}
.live80-v2 .tv-osd-right{position:absolute;right:var(--s5);top:var(--s4);font-family:'Core Sans M','Asap',sans-serif;
  font-size:var(--fs-sm);letter-spacing:.2em;font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(var(--c-shadow),.85)}
/* ===========================================================================
   12. WELTREKORD
   =========================================================================== */
.live80-v2 .record{text-align:center}
.live80-v2 .record-num{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-4xl);line-height:.9;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,var(--c-gold) 55%,#b47700);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,217,61,.7))}
.live80-v2 .record-num-sub{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-sm);letter-spacing:.34em;
  text-transform:uppercase;color:var(--c-gold);margin-top:var(--s2)}
.live80-v2 .record .body-text{margin-inline:auto;margin-top:var(--s6);text-align:center}
.live80-v2 .record-claim{margin-top:var(--s7);font-size:var(--fs-3xl)}
.live80-v2 .record-img{margin-top:var(--s7);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-line);
  box-shadow:0 30px 90px rgba(var(--c-shadow),.7)}
/* ===========================================================================
   13. DAS ORIGINAL
   =========================================================================== */
.live80-v2 .typewriter{text-align:center;font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-2xl);
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-cyan);text-shadow:var(--glow-cyan);min-height:1.3em}
.live80-v2 .typewriter .cursor{display:inline-block;width:.08em;height:.92em;vertical-align:-.06em;background:var(--c-cyan);
  margin-left:.08em;box-shadow:var(--glow-cyan);animation:blink 1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.live80-v2 .orig-grid{display:grid;gap:var(--s7);align-items:center;grid-template-columns:1fr;margin-top:var(--s7)}
@media (min-width:900px){.live80-v2 .orig-grid{grid-template-columns:1fr 1.15fr;gap:var(--s8)}}
.live80-v2 .orig-logo{filter:drop-shadow(0 0 50px rgba(255,45,149,.6));animation:float 7s ease-in-out infinite}
.live80-v2 .orig-h{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xl);line-height:1.22;letter-spacing:.02em;margin-bottom:var(--s4)}
/* ===========================================================================
   14. SPOTIFY-PLAYER
   =========================================================================== */
.live80-v2 .player{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(30,215,96,.35);
  background:linear-gradient(140deg,rgba(26,70,44,.92),rgba(72,14,58,.94) 55%,rgba(84,18,70,.92));
  box-shadow:0 0 80px rgba(30,215,96,.16)}
/* Animierte Waveform als Hintergrund */
.live80-v2 .player-wave{position:absolute;inset:0;display:flex;align-items:center;gap:5px;padding-inline:var(--s4);
  pointer-events:none;opacity:.16;
  -webkit-mask-image:linear-gradient(to right,#000,transparent 22%,transparent 78%,#000);
          mask-image:linear-gradient(to right,#000,transparent 22%,transparent 78%,#000)}
.live80-v2 .player-wave i{flex:1;background:linear-gradient(to top,var(--c-green),var(--c-cyan));border-radius:2px;
  animation:wave 1.4s ease-in-out infinite}
@keyframes wave{0%,100%{height:10%}50%{height:56%}}
.live80-v2 .player-inner{position:relative;z-index:2;display:grid;gap:var(--s7);padding:var(--s7) var(--s6);
  grid-template-columns:1fr}
@media (min-width:860px){.live80-v2 .player-inner{grid-template-columns:340px 1fr;align-items:center;padding:var(--s8) var(--s7)}}
/* Die herausfahrende Platte ragt in die rechte Spalte – Bedienelemente
   muessen darueber liegen, sonst verdeckt sie Zeit und Buttons. */
/* 🔴 min-width:0 ist Pflicht. Grid-Items starten mit min-width:auto, also der
   Mindestbreite ihres Inhalts. Die Titelliste kam auf 314px (lange
   Interpretennamen, die nicht schrumpfen durften), die Spalte war aber nur
   277px breit – die Karte lief rechts ueber und schnitt Text ab, und die
   mittig gesetzten Bedienelemente sassen dadurch sichtbar zu weit rechts. */
.live80-v2 .player-col{position:relative;z-index:3;min-width:0}
/* Plattenhuelle mit herausfahrender Vinyl */
.live80-v2 .sleeve{position:relative;width:min(100%,290px);margin-inline:auto}
.live80-v2 .sleeve-cover{position:relative;z-index:2;width:100%;border-radius:6px;overflow:hidden;
  box-shadow:0 26px 60px rgba(var(--c-shadow),.75),0 0 34px rgba(30,215,96,.24)}
/* Die Platte lugt schon im Ruhezustand hinter der Huelle hervor und faehrt
   beim Abspielen weiter heraus – sonst waere die Animation unsichtbar. */
.live80-v2 .vinyl{position:absolute;z-index:1;right:-18%;top:50%;width:66%;aspect-ratio:1;border-radius:50%;
  translate:0 -50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,#0d0d0d 0 2px,#161616 2px 4px),
    radial-gradient(circle at 50% 50%,#111 0 46%,#0a0a0a 46% 100%);
  box-shadow:0 20px 50px rgba(var(--c-shadow),.8);
  transition:right .7s var(--ease);
  animation:spin 3.4s linear infinite paused}
.live80-v2 .vinyl::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:32%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#050508 0 12%,var(--c-pink) 12% 62%,#8a0052 62% 100%)}
.live80-v2 .player.playing .vinyl{right:-46%;animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.live80-v2 .player-head{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.live80-v2 .player-kicker{display:inline-flex;align-items:center;gap:var(--s2);color:var(--c-green);
  font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xs);letter-spacing:.28em;text-transform:uppercase}
.live80-v2 .player-kicker svg{width:20px;height:20px;fill:var(--c-green);filter:drop-shadow(0 0 8px rgba(30,215,96,.8))}
.live80-v2 .player-title{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xl);letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.live80-v2 .track-list{display:grid;gap:2px;max-height:250px;overflow:auto;padding-right:var(--s2);margin-bottom:var(--s5)}
.live80-v2 .track{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);transition:background-color .2s var(--ease),transform .2s var(--ease)}
.live80-v2 .track:hover{background:rgba(30,215,96,.12);transform:translateX(4px)}
.live80-v2 .track .no{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xs);color:var(--c-ink-3);width:22px;
  font-variant-numeric:tabular-nums;flex:none}
.live80-v2 .track .ti{font-size:var(--fs-sm);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Interpret darf kuerzen statt die Zeile aufzublaehen (siehe .player-col) */
.live80-v2 .track .ar{font-size:var(--fs-xs);color:var(--c-ink-3);flex:0 1 auto;min-width:0;max-width:46%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live80-v2 .track.active{background:rgba(30,215,96,.18);box-shadow:inset 0 0 0 1px rgba(30,215,96,.4)}
.live80-v2 .track.active .ti{color:var(--c-green)}
.live80-v2 .player-bar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.live80-v2 .player-bar .time{font-size:var(--fs-xs);color:var(--c-ink-3);font-variant-numeric:tabular-nums;flex:none}
.live80-v2 .player-track{position:relative;height:6px;flex:1;border-radius:var(--r-pill);background:rgba(255,255,255,.14);overflow:hidden}
.live80-v2 .player-track i{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,var(--c-green),var(--c-cyan));
  box-shadow:var(--glow-green)}
.live80-v2 .player-controls{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.live80-v2 .pctl{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--c-line);background:rgba(255,255,255,.05);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.live80-v2 .pctl:hover{border-color:var(--c-green);box-shadow:var(--glow-green);transform:translateY(-2px)}
.live80-v2 .pctl svg{width:20px;height:20px;fill:#fff}
.live80-v2 .pctl--main{width:66px;height:66px;background:linear-gradient(135deg,#1ed760,#12a349);border-color:#5cf08f;
  box-shadow:var(--glow-green)}
.live80-v2 .pctl--main svg{width:26px;height:26px;fill:#04210f}
.live80-v2 .player-embed{margin-top:var(--s5);border-radius:14px;overflow:hidden;min-height:0}
.live80-v2 .player-embed iframe{width:100%;height:352px;border:0;display:block}
/* ===========================================================================
   15. NEWSLETTER / CDs / SOCIAL
   =========================================================================== */
.live80-v2 .nl{border-radius:var(--r-lg);padding:var(--s8) var(--s6);text-align:center;border:1px solid rgba(38,224,255,.3);
  background:radial-gradient(120% 130% at 50% 0%,rgba(38,224,255,.16),rgba(92,13,75,.96) 62%)}
.live80-v2 .nl h2{font-size:var(--fs-2xl)}
.live80-v2 .nl-sub{color:var(--c-ink-2);margin-top:var(--s4)}
.live80-v2 .nl-form{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s6)}
.live80-v2 .nl-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.live80-v2 .nl-form input{min-height:52px;min-width:min(100%,340px);flex:1 1 300px;max-width:420px;padding:0 var(--s5);
  border-radius:var(--r-pill);border:2px solid var(--c-line);background:rgba(50,13,42,.82);color:#fff;font-size:var(--fs-sm)}
.live80-v2 .nl-form input::placeholder{color:var(--c-ink-3)}
.live80-v2 .nl-form input:focus{border-color:var(--c-cyan);outline:none;box-shadow:var(--glow-cyan)}
.live80-v2 .nl-note{font-size:var(--fs-xs);color:var(--c-ink-3);margin-top:var(--s4)}
.live80-v2 .nl-ok{display:none;margin-top:var(--s5);color:#2fd47a;font-size:var(--fs-sm)}
.live80-v2 .nl-ok.show{display:block}
.live80-v2 .cd-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:var(--s7)}
.live80-v2 .cd-item{display:grid;gap:var(--s4);justify-items:center;text-align:center}
.live80-v2 .cd-item img{border-radius:var(--r-sm);box-shadow:0 22px 55px rgba(var(--c-shadow),.7);max-width:230px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.live80-v2 .cd-item a:hover img{transform:translateY(-10px) rotate(-2deg) scale(1.03);
  box-shadow:0 34px 80px rgba(255,45,149,.45),0 0 40px rgba(255,45,149,.35)}
.live80-v2 .social{text-align:center}
.live80-v2 .social-h{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-lg);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:var(--s5)}
.live80-v2 .social-links{display:flex;gap:var(--s4);justify-content:center}
.live80-v2 .social-links a{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--c-line);
  background:rgba(255,255,255,.05);transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.live80-v2 .social-links a:hover{transform:translateY(-5px) scale(1.08);border-color:var(--c-pink);box-shadow:var(--glow-pink-lg)}
.live80-v2 .social-links svg{width:26px;height:26px;fill:#fff}
/* ===========================================================================
   16. FOOTER
   =========================================================================== */
/* Zieht mit dem Header mit (2026-08-04): Kopf- und Fusszeile sind die beiden
   dunklen Klammern der Seite und muessen dieselbe Farbe haben – sonst wirkt
   der Fuss neben dem neuen Lila-Header wie ein Rest der alten Fassung. */
.live80-v2 .site-footer{border-top:1px solid var(--c-line);background:rgba(48,14,80,.94);padding-block:var(--s8) var(--s6);margin-top:var(--s7)}
.live80-v2 .foot-h{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xs);letter-spacing:.34em;text-transform:uppercase;
  color:var(--c-ink-3);text-align:center;margin-bottom:var(--s5)}
.live80-v2 .logo-row{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center;justify-content:center;margin-bottom:var(--s8)}
/* 🔴 Gleich grosses KAESTCHEN fuer jedes Logo, nicht gleiche Hoehe.
   Die Vorlagen sind voellig verschieden geschnitten: 300x53 (breiter
   Schriftzug) bis 1028x1028 (quadratisch). Bei reiner Hoehenangabe wird der
   Schriftzug 106px breit und das Quadrat 26px – optisch wirkt das eine riesig,
   das andere verloren. Feste Box + object-fit:contain gibt allen denselben
   Platz. Restliche Ungleichheit liesse sich nur an den Quelldateien beheben
   (beschneiden/normalisieren) – das gehoert in die Mediathek, nicht ins CSS. */
.live80-v2 .logo-row img{width:124px;height:48px;object-fit:contain;object-position:center;opacity:.72;
  transition:opacity .25s var(--ease),filter .25s var(--ease),transform .25s var(--ease)}
.live80-v2 .logo-row img:hover{opacity:1;transform:translateY(-3px);filter:drop-shadow(0 0 14px rgba(255,255,255,.5))}
.live80-v2 .logo-row--media img{width:108px;height:40px}
.live80-v2 .foot-press{display:grid;justify-items:center;gap:var(--s4);margin-bottom:var(--s8)}
.live80-v2 .foot-bottom{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:center;justify-content:center;
  padding-top:var(--s6);border-top:1px solid var(--c-line);font-size:var(--fs-sm);color:var(--c-ink-3)}
.live80-v2 .foot-bottom a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding-inline:var(--s3);
  text-decoration:none;transition:color .2s var(--ease)}
.live80-v2 .foot-bottom a:hover{color:var(--c-cyan)}
/* ===========================================================================
   16b. FOTO-SEKTIONEN – gegen „dunkler Kasten auf dunklem Grund"
   =========================================================================== */
.live80-v2 .photo-sec{position:relative;overflow:hidden;padding-block:var(--s10)}
.live80-v2 .photo-bg{position:absolute;inset:0;z-index:0}
.live80-v2 .photo-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.live80-v2 .photo-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(104,8,80,.92) 0%,rgba(104,8,80,.58) 26%,rgba(104,8,80,.64) 62%,rgba(104,8,80,.94) 100%)}
.live80-v2 .photo-grain{position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(var(--c-shadow),.18) 0 2px,transparent 2px 4px)}
.live80-v2 .photo-sec>.wrap,.live80-v2 .photo-sec>.wrap-narrow{position:relative;z-index:2}
/* Weltrekord */
.live80-v2 .record-inner{text-align:center;display:grid;gap:var(--s4);justify-items:center}
.live80-v2 .record-num{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-4xl);line-height:.9;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,var(--c-gold) 55%,#b47700);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 48px rgba(255,217,61,.85))}
.live80-v2 .record-num-sub{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-sm);letter-spacing:.34em;
  text-transform:uppercase;color:var(--c-gold);text-shadow:var(--glow-gold)}
.live80-v2 .record-inner .body-text{text-align:center;margin-top:var(--s4)}
.live80-v2 .record-claim{margin-top:calc(var(--s5) - .14em);font-size:var(--fs-3xl)}
/* .14em = chrome-Ausgleich */
/* Auszeichnung – KEIN Kasten. Die Quellgrafik ist ein Freisteller mit
   Transparenz; ein Rahmen mit Hintergrund macht daraus ein totes Rechteck. */
.live80-v2 .cert{margin:var(--s8) auto 0;max-width:880px;width:100%;
  display:grid;justify-items:center;
  transform:rotate(-1.2deg);transition:transform .5s var(--ease)}
.live80-v2 .cert:hover{transform:rotate(0deg) scale(1.025)}
/* Bezugsrahmen fuer alle Overlays: exakt so gross wie das Bild, damit die
   Ringe ueber dem Foto-Kreis sitzen (Kreismitte liegt bei 60,6% / 48,3%). */
.live80-v2 .cert-media{position:relative;width:100%;line-height:0}
.live80-v2 .cert-media img{position:relative;z-index:1;width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 55px rgba(var(--c-shadow),.8)) drop-shadow(0 0 38px rgba(38,224,255,.3))}
/* Strahlenkranz wie auf einer Auszeichnung – dreht sich sehr langsam */
.live80-v2 .cert-rays{position:absolute;inset:-16% -8%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 48%,rgba(255,217,61,.2) 0 3.5deg,transparent 3.5deg 10deg);
  -webkit-mask:radial-gradient(closest-side at 50% 48%,#000 18%,rgba(0,0,0,.45) 52%,transparent 78%);
          mask:radial-gradient(closest-side at 50% 48%,#000 18%,rgba(0,0,0,.45) 52%,transparent 78%);
  animation:cert-rays 44s linear infinite}
@keyframes cert-rays{to{transform:rotate(360deg)}}
/* Lichtschein hinter dem Foto-Kreis, damit der Freisteller nicht schwebt */
.live80-v2 .cert-halo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 62% at 60.6% 48.3%,rgba(255,217,61,.4),rgba(255,45,149,.16) 54%,transparent 76%);
  filter:blur(20px)}
/* Ein Verlauf IST bereits weich – der Weichzeichner darueber tat kaum etwas
   Sichtbares, kostete auf dem Handy aber eine Rasterflaeche in Bildgroesse.
   Ohne ihn uebernehmen weichere Verlaufsstopps dieselbe Wirkung. */
@media (hover:none),(max-width:900px){.live80-v2 .cert-halo{filter:none;
    background:radial-gradient(54% 66% at 60.6% 48.3%,rgba(255,217,61,.4),rgba(255,45,149,.16) 48%,transparent 82%)}}
/* Zwei gegenlaeufige Goldringe um den Foto-Kreis (dessen Radius = 26,2% der
   Bildbreite). ⚠️ Wird die Grafik getauscht, stimmen diese Werte nicht mehr. */
.live80-v2 .cert-ring{position:absolute;left:60.6%;top:48.3%;width:56%;aspect-ratio:1;z-index:2;
  translate:-50% -50%;border-radius:50%;pointer-events:none;
  border:2px dashed rgba(255,217,61,.6);
  animation:cert-spin 26s linear infinite}
.live80-v2 .cert-ring--2{width:60%;border:1px solid rgba(38,224,255,.35);
  animation:cert-spin 38s linear infinite reverse}
@keyframes cert-spin{to{rotate:360deg}}
/* ⚠️ Hier lag ein wandernder Glanz ueber der ganzen Media-Box. Weil die Grafik
   ein Freisteller ist, zeichnete der Streifen ein sichtbares Geisterrechteck in
   die transparenten Bereiche – also genau den Kasten, den wir loswerden wollten.
   Vollflaechige Overlays auf diesem Bild funktionieren nicht; Effekte muessen
   sich an der Kreisform orientieren (siehe .cert-ring). */
/* Beschriftung als Messingschild, das leicht ins Bild ragt */
.live80-v2 .cert .cert-cap{position:relative;z-index:4;margin-top:calc(-1 * var(--s4));
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s6);border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(46,32,4,.96),rgba(18,12,2,.96));
  border:1px solid rgba(255,217,61,.6);
  box-shadow:0 12px 34px rgba(var(--c-shadow),.75),0 0 26px rgba(255,217,61,.28);
  font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xs);letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-gold);text-align:center}
@media (max-width:700px){.live80-v2 .cert{transform:none}
.live80-v2 .cert:hover{transform:none}
.live80-v2 .cert-rays{inset:-10% -4%}
/* Kein negativer Abstand: bei dieser Breite schoebe sich das Schild ueber den
     unteren Rand des RID-Logos ("FÜR DEUTSCHLAND"). */
.live80-v2 .cert .cert-cap{margin-top:var(--s3);padding:var(--s3) var(--s4);letter-spacing:.16em}}
/* ===========================================================================
   16c. ZEITREISE + DAS ORIGINAL (ein Block statt zwei Textkaesten)
   =========================================================================== */
.live80-v2 .story{background:linear-gradient(180deg,rgba(106,15,86,0),rgba(140,21,114,.75) 45%,rgba(106,15,86,0))}
.live80-v2 .story-grid{display:grid;gap:var(--s7);align-items:center;grid-template-columns:1fr;margin-top:var(--s7)}
@media (min-width:960px){.live80-v2 .story-grid{grid-template-columns:1.15fr 1fr;gap:var(--s8)}}
.live80-v2 .story-text{display:grid;gap:var(--s3);justify-items:start}
.live80-v2 .story-logo{width:min(58%,230px);filter:drop-shadow(0 0 34px rgba(255,45,149,.6));animation:float 7s ease-in-out infinite}
.live80-v2 .story-text .typewriter{text-align:left;font-size:var(--fs-xl);margin-block:var(--s2)}
/* ===========================================================================
   16d. MUSIK (Player + CDs in einer Sektion)
   =========================================================================== */
.live80-v2 .music-sec{position:relative;overflow:hidden}
.live80-v2 .music-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.3}
.live80-v2 .music-scrim{position:absolute;inset:0;z-index:1;
  background:radial-gradient(110% 90% at 50% 40%,rgba(112,10,86,.7),rgba(96,7,74,.94) 78%)}
.live80-v2 .music-sec>.wrap{position:relative;z-index:2}
.live80-v2 .cd-h{font-size:var(--fs-xl);text-align:center;margin-top:calc(var(--s9) - .14em)}
/* 🔴 Kundenwunsch 2026-08-05: Umbruch "Die offizielle" / "80er live CD".
   Ohne Steuerung brach die Zeile am Handy nach "live" und liess ein einzelnes
   "CD" auf Zeile 2 stehen (gemessen bei 375px). Der Umbruch wird NICHT per
   <br> erzwungen, sondern indem der Produktname zusammengehalten wird – so
   bleibt die Zeile am Desktop einzeilig und bricht bei jeder Breite an der
   einzig sinnvollen Stelle, ohne zweite Regel fuer Zwischengroessen.
   ⚠️ Der Span sitzt in einem .chrome-Element (background-clip:text). Das
   traegt der Elternknoten, der Verlauf wird ueber ALLE Glyphen darin geclippt –
   der Span braucht deshalb keine eigene Farbe. Nachgemessen, er ist sichtbar. */
.live80-v2 .cd-h .nowrap{white-space:nowrap}
.live80-v2 .music-sec .cd-grid{margin-top:var(--s6)}
/* ===========================================================================
   16f. BLEIB DRAN – heller Abschluss statt zweier dunkler Restbloecke
   =========================================================================== */
.live80-v2 .outro{position:relative;overflow:hidden;
  background:linear-gradient(120deg,#d7007f 0%,#a3006a 34%,#5c1f8e 68%,#26123f 100%)}
.live80-v2 .outro::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px)}
.live80-v2 .outro::after{content:"";position:absolute;left:50%;bottom:-40%;width:120vw;height:80vh;translate:-50% 0;
  pointer-events:none;
  background:repeating-linear-gradient(to right,rgba(255,255,255,.16) 0 2px,transparent 2px 84px),
             repeating-linear-gradient(to bottom,rgba(255,255,255,.14) 0 2px,transparent 2px 84px);
  transform:perspective(320px) rotateX(72deg);transform-origin:50% 100%;opacity:.5}
.live80-v2 .outro-grid{position:relative;z-index:2;display:grid;gap:var(--s8);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.live80-v2 .outro-grid{grid-template-columns:1.35fr 1fr;gap:var(--s9)}}
.live80-v2 .outro-h{font-size:var(--fs-2xl);color:#fff;
  text-shadow:0 4px 0 rgba(var(--c-shadow),.28),0 0 40px rgba(255,255,255,.35)}
.live80-v2 .outro-sub{color:rgba(255,255,255,.92);margin-top:var(--s4);font-size:var(--fs-lg)}
.live80-v2 .outro .nl-form{justify-content:flex-start;margin-top:var(--s6)}
.live80-v2 .outro .nl-form input{border-color:rgba(255,255,255,.55);background:rgba(106,15,86,.35);color:#fff}
.live80-v2 .outro .nl-form input::placeholder{color:rgba(255,255,255,.7)}
.live80-v2 .outro .nl-form input:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.live80-v2 .outro .nl-note{color:rgba(255,255,255,.75);text-align:left}
.live80-v2 .outro .nl-ok{color:#c6ffdd}
.live80-v2 .outro-social{display:grid;gap:var(--s5);justify-items:center;text-align:center;
  padding:var(--s7) var(--s5);border-radius:var(--r-lg);
  background:rgba(106,15,86,.32);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.live80-v2 .outro-social .social-h{color:#fff;margin:0}
.live80-v2 .outro-social .social-links a{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12)}
.live80-v2 .outro-social .social-links a:hover{background:#fff;border-color:#fff}
.live80-v2 .outro-social .social-links a:hover svg{fill:#d7007f}
/* Dunkler Button fuer den hellen Abschlussblock */
.live80-v2 .btn--dark{--btn-c:#3d0b45;background:#3d0b45;border-color:#3d0b45;color:#fff;
  box-shadow:0 8px 24px rgba(var(--c-shadow),.4);animation:none}
.live80-v2 .btn--dark:hover,.live80-v2 .btn--dark:focus-visible{background:#fff;color:#3d0b45;border-color:#fff;
  box-shadow:0 10px 32px rgba(var(--c-shadow),.5)}
.live80-v2 .btn--dark::before{display:none}
/* ===========================================================================
   16f2. NAVIGATION – Tickets als hervorgehobener Menuepunkt
   =========================================================================== */
.live80-v2 .nav-links .nav-tickets-li>a{overflow:hidden;
  background:linear-gradient(135deg,var(--c-pink-deep),#a3006a);
  border:2px solid var(--c-pink-soft);box-shadow:var(--glow-pink);color:#fff}
.live80-v2 .nav-links .nav-tickets-li>a:hover{color:#fff;background:linear-gradient(135deg,var(--c-pink),#c40074);
  box-shadow:var(--glow-pink-lg)}
/* Der Cyan-Unterstrich der uebrigen Eintraege wuerde auf der pinken Pille
   fremd wirken – hier laeuft stattdessen ein Lichtstreifen durch. */
.live80-v2 .nav-links .nav-tickets-li>a::after{left:-60%;right:auto;top:0;bottom:0;width:45%;height:auto;border-radius:0;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  box-shadow:none;transform:none;transition:none;opacity:0}
.live80-v2 .nav-links .nav-tickets-li>a:hover::after{opacity:1;animation:nav-sheen .85s var(--ease) 1}
@keyframes nav-sheen{from{transform:translateX(0)}to{transform:translateX(420%)}}
@media (prefers-reduced-motion:reduce){.live80-v2 .nav-links .nav-tickets-li>a:hover::after{animation:none;opacity:0}}
/* ===========================================================================
   16f3. FAQ – Akkordeon
   =========================================================================== */
/* 🔴 Kundenwunsch 2026-08-05: FAQ im selben hellen Weiss/Lila wie die
   Event-Kacheln. Gleiche Logik, gleiche Werte – die Tokens sind bewusst
   dieselben wie in .event-card, damit beide Bloecke nicht auseinanderlaufen.
   ⚠️ Wie bei den Kacheln mussten ALLE Textfarben mit: Weiss auf Weiss,
   Gold-Hervorhebungen (~1,5:1) und Cyan-Links (~1,6:1) fielen auf dem hellen
   Grund durch. Werte unten sind gemessen, nicht geschaetzt. */
.live80-v2 .faq-sec{background:linear-gradient(180deg,rgba(106,15,86,0),rgba(132,20,108,.7) 40%,rgba(106,15,86,0))}
.live80-v2 .faq-list{
  --fq-surface:#fff5fb;
  --fq-surface-2:#ffe7f4;
  --fq-ink:#2c0a4d;
  --fq-ink-2:#5c2f78;
  display:grid;gap:var(--s3);margin-top:var(--s6)}
.live80-v2 .faq-item{border-radius:var(--r-md);border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg,var(--fq-surface),var(--fq-surface-2));
  box-shadow:0 10px 26px rgba(var(--c-shadow),.3);
  overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.live80-v2 .faq-item[open]{border-color:#fff;box-shadow:0 14px 34px rgba(var(--c-shadow),.36),0 0 26px rgba(255,45,149,.4)}
.live80-v2 .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s4);
  min-height:64px;padding:var(--s4) var(--s5);color:var(--fq-ink);
  font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-md);letter-spacing:.02em}
.live80-v2 .faq-item summary::-webkit-details-marker{display:none}
.live80-v2 .faq-item summary:hover{background:rgba(255,45,149,.09)}
.live80-v2 .faq-item .ic{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(90,25,140,.45);color:var(--c-lila-2);transition:transform .3s var(--ease)}
.live80-v2 .faq-item[open] .ic{transform:rotate(45deg);border-color:var(--c-pink-deep);color:var(--c-pink-deep)}
.live80-v2 .faq-item .ic svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none}
.live80-v2 .faq-body{padding:0 var(--s5) var(--s5);color:var(--fq-ink-2);font-size:var(--fs-sm);line-height:1.65}
.live80-v2 .faq-body .lines{display:grid;gap:6px;margin-top:var(--s3)}
/* war Gold – auf Weiss unlesbar. Jetzt das gleiche Lila wie die Stadtnamen. */
.live80-v2 .faq-body .lines b{color:var(--fq-ink)}
.live80-v2 .faq-body a{color:#00666f}
.live80-v2 .faq-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.live80-v2 .faq-actions a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);
  border:1px solid rgba(90,25,140,.4);background:rgba(90,25,140,.07);color:var(--c-lila-2);font-size:12px;
  text-decoration:none;transition:background-color .2s var(--ease),color .2s var(--ease)}
.live80-v2 .faq-actions a:hover{background:var(--c-lila-2);color:#fff}
/* ===========================================================================
   16g. MITWANDERNDER TICKETS-BUTTON + CHATBOT
   Beides sitzt fest am Viewport. Tickets rechts (Hauptziel), Chat links,
   damit sie sich nie ins Gehege kommen. Auf dem Handy wird aus dem
   Tickets-Button eine Leiste ueber die volle Breite.
   =========================================================================== */
.live80-v2 .dock{position:fixed;z-index:8500;pointer-events:none;
  transition:opacity .22s var(--ease)}
.live80-v2 .dock>*{pointer-events:auto}
/* Bei offenem Menue verschwinden Tickets-Leiste und Bot. Sie liegen auf
   z-index 8500 und damit ueber der Menueflaeche – am Handy stand die
   Tickets-Leiste sonst quer ueber dem Menue und der Bot mitten in der Liste
   (im Browser gesehen, 375px). Sie per z-index zu ueberholen waere falsch:
   solange das Menue offen ist, sind sie schlicht nicht dran. */
.live80-v2.nav-open .dock{opacity:0;pointer-events:none}
.live80-v2.nav-open .dock>*{pointer-events:none}
/* Tickets */
.live80-v2 .ticket-dock{right:var(--s5);bottom:var(--s5)}
.live80-v2 .ticket-btn{
  display:inline-flex;align-items:center;gap:var(--s3);min-height:60px;padding:0 var(--s6);
  border-radius:var(--r-pill);text-decoration:none;cursor:pointer;
  font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--c-pink-deep),#a3006a);
  border:2px solid var(--c-pink-soft);box-shadow:var(--glow-pink-lg);
  transform:translateY(24px);opacity:0;visibility:hidden;
  transition:transform .35s var(--ease),opacity .35s var(--ease),visibility .35s,box-shadow .25s var(--ease)}
.live80-v2 .ticket-btn.show{transform:none;opacity:1;visibility:visible}
.live80-v2 .ticket-btn:hover{box-shadow:0 0 26px rgba(255,45,149,1),0 0 80px rgba(255,45,149,.6)}
.live80-v2 .ticket-btn svg{width:22px;height:22px;fill:currentColor;flex:none}
/* Bewusst OHNE Restzeit-Anzeige: der Button fuehrt auf die Terminuebersicht mit
   mehreren Events – ein Countdown auf nur eines davon waere irrefuehrend.
   (Stand vorher: "noch 11 Tage", bezog sich still auf Frankfurt.) */
/* Pulsierender Ring, damit der Button auch im Augenwinkel auffaellt */
.live80-v2 .ticket-btn::after{content:"";position:absolute;inset:-4px;border-radius:var(--r-pill);
  border:2px solid rgba(255,45,149,.7);animation:ping 2.8s ease-out infinite;pointer-events:none}
.live80-v2 .ticket-dock{position:fixed}
.live80-v2 .ticket-btn{position:relative}
/* Chat-Startknopf – Roboterkopf statt Sprechblasen-Icon.
   Ein neutrales Icon war zu unscheinbar: man sah dem Knopf nicht an, dass
   dahinter ein Frage-Assistent steckt. Gesicht + Fragezeichen sagen es sofort. */
/* 🔴 Bot sitzt RECHTS ueber dem Tickets-Button (links ging er unter).
   Die Hoehen haengen zusammen: Tickets-Button 60px + var(--s5) Abstand zum
   Rand + var(--s4) Luft dazwischen ergibt den bottom-Wert. Wird der Button
   hoeher, MUSS dieser Wert mitwachsen, sonst ueberlappen beide. */
.live80-v2 .chat-dock{right:var(--s5);bottom:calc(var(--s5) + 60px + var(--s4))}
/* row-reverse: die Sprechblase haengt links am Bot, sonst schoebe sie ihn
   aus dem Bild. */
.live80-v2 .chat-launch{display:flex;flex-direction:row-reverse;align-items:center;gap:var(--s3)}
.live80-v2 .chat-fab{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;cursor:pointer;
  border:2px solid var(--c-cyan);background:radial-gradient(120% 110% at 50% 18%,#17455f,#0a1c2b 55%,#040d16);
  box-shadow:var(--glow-cyan),inset 0 2px 12px rgba(38,224,255,.25);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.live80-v2 .chat-fab::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid rgba(38,224,255,.65);animation:ping 3.2s ease-out infinite;pointer-events:none}
.live80-v2 .chat-fab:hover{transform:translateY(-4px) scale(1.06);box-shadow:var(--glow-cyan-lg)}
.live80-v2 .chat-fab:focus-visible{outline:3px solid var(--c-gold);outline-offset:4px}
/* Der Kopf selbst */
.live80-v2 .bot-svg{width:52px;height:auto;overflow:visible;filter:drop-shadow(0 0 8px rgba(38,224,255,.55))}
.live80-v2 .bot-svg .bot-head{fill:#5c0d4c;stroke:var(--c-cyan);stroke-width:1.7}
.live80-v2 .bot-svg .bot-ear,.live80-v2 .bot-svg .bot-bulb{fill:var(--c-pink);stroke:none}
.live80-v2 .bot-svg .bot-bulb{filter:drop-shadow(0 0 6px var(--c-pink));animation:bot-bulb 1.8s ease-in-out infinite}
@keyframes bot-bulb{0%,100%{opacity:.55}50%{opacity:1}}
.live80-v2 .bot-svg .bot-ant{stroke:var(--c-pink);stroke-width:1.8;stroke-linecap:round}
.live80-v2 .bot-svg .bot-visor{fill:#4d0840;stroke:rgba(38,224,255,.55);stroke-width:1.2}
.live80-v2 .bot-svg .bot-eye{fill:var(--c-cyan);filter:drop-shadow(0 0 5px var(--c-cyan))}
/* Blinzeln – transform-box:fill-box, sonst rotiert/skaliert das Auge um den
   SVG-Ursprung und wandert aus dem Gesicht heraus. */
.live80-v2 .bot-svg .bot-eyes{transform-box:fill-box;transform-origin:center;animation:bot-blink 5.5s steps(1,end) infinite}
@keyframes bot-blink{0%,92%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}96%{transform:scaleY(1)}98%{transform:scaleY(.1)}}
.live80-v2 .bot-svg .bot-smile{fill:none;stroke:var(--c-gold);stroke-width:1.9;stroke-linecap:round}
.live80-v2 .chat-fab:hover .bot-svg{filter:drop-shadow(0 0 14px rgba(38,224,255,.9))}
/* Fragezeichen-Badge – macht die Funktion ohne Text klar */
.live80-v2 .bot-q{position:absolute;right:-3px;top:-3px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-family:'Core Sans M','Asap',sans-serif;font-weight:800;font-size:16px;
  color:#fff;background:linear-gradient(140deg,var(--c-pink),#a3006a);
  border:2px solid #fff;box-shadow:var(--glow-pink);animation:bot-q 2.6s ease-in-out infinite}
@keyframes bot-q{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(6deg)}}
/* Sprechblase, die nach ein paar Sekunden von allein auftaucht */
.live80-v2 .chat-tip{position:relative;pointer-events:none;white-space:nowrap;
  padding:var(--s3) var(--s4);border-radius:14px;border:1px solid rgba(38,224,255,.5);
  background:linear-gradient(160deg,rgba(10,32,46,.97),rgba(4,12,22,.97));
  color:var(--c-ink-2);font-size:var(--fs-sm);box-shadow:0 14px 40px rgba(var(--c-shadow),.7),0 0 24px rgba(38,224,255,.25);
  opacity:0;transform:translateX(14px) scale(.9);transform-origin:right center;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.live80-v2 .chat-tip b{color:var(--c-cyan);font-weight:700}
/* Pfeil zeigt nach rechts zum Bot */
.live80-v2 .chat-tip::before{content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;translate:0 -50%;rotate:45deg;
  background:rgba(10,32,46,.97);border-right:1px solid rgba(38,224,255,.5);border-top:1px solid rgba(38,224,255,.5)}
.live80-v2 .chat-tip.show{opacity:1;transform:none}
/* Chat-Fenster im Retro-Geraete-Look */
/* Fenster oeffnet ueber dem Bot, der wiederum ueber dem Tickets-Button sitzt:
   24 (Rand) + 60 (Tickets) + 16 (Luft) + 78 (Bot) + 12 (Luft) */
.live80-v2 .chat{position:fixed;right:var(--s5);bottom:calc(var(--s5) + 60px + var(--s4) + 78px + var(--s3));z-index:8600;
  width:min(calc(100vw - 2*var(--s5)),400px);max-height:min(72vh,620px);
  display:none;grid-template-rows:auto 1fr auto;overflow:hidden;
  border-radius:20px;border:2px solid rgba(38,224,255,.55);
  background:linear-gradient(170deg,rgba(10,26,38,.99),rgba(26,7,52,.99));
  box-shadow:0 30px 90px rgba(var(--c-shadow),.85),0 0 50px rgba(38,224,255,.3)}
.live80-v2 .chat.open{display:grid;animation:chat-in .35s var(--ease)}
@keyframes chat-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.live80-v2 .chat-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s4) var(--s3);
  border-bottom:1px solid rgba(38,224,255,.3);background:rgba(38,224,255,.07)}
.live80-v2 .chat-head .av{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,#12384f,#071620);border:1px solid rgba(38,224,255,.5)}
.live80-v2 .chat-head .av .bot-svg{width:32px}
.live80-v2 .chat-head .t{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase}
.live80-v2 .chat-head .s{font-size:11px;color:var(--c-cyan);letter-spacing:.14em;text-transform:uppercase}
.live80-v2 .chat-head button{margin-left:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;border:1px solid var(--c-line);background:transparent}
.live80-v2 .chat-head button:hover{border-color:var(--c-pink);box-shadow:var(--glow-pink)}
.live80-v2 .chat-head button svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.live80-v2 .chat-log{overflow:auto;padding:var(--s4);display:grid;gap:var(--s3);align-content:start;
  background:
    repeating-linear-gradient(to bottom,rgba(38,224,255,.045) 0 1px,transparent 1px 3px),
    radial-gradient(120% 80% at 50% 0%,rgba(38,224,255,.08),transparent 60%)}
.live80-v2 .msg{max-width:88%;padding:var(--s3) var(--s4);border-radius:14px;font-size:var(--fs-sm);line-height:1.5}
.live80-v2 .msg.bot{justify-self:start;background:rgba(38,224,255,.12);border:1px solid rgba(38,224,255,.32);
  border-bottom-left-radius:4px}
.live80-v2 .msg.me{justify-self:end;background:linear-gradient(135deg,rgba(215,0,127,.85),rgba(120,0,72,.85));
  border:1px solid rgba(255,92,174,.6);border-bottom-right-radius:4px}
.live80-v2 .msg a{color:var(--c-cyan);font-weight:600}
.live80-v2 .msg .lines{display:grid;gap:4px;margin-top:6px}
.live80-v2 .msg .lines b{color:var(--c-gold);font-weight:700}
.live80-v2 .msg-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.live80-v2 .msg-actions a,.live80-v2 .msg-actions button{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);
  border-radius:var(--r-pill);border:1px solid rgba(38,224,255,.55);background:rgba(38,224,255,.1);
  color:#fff;font-size:12px;letter-spacing:.06em;text-decoration:none;cursor:pointer}
.live80-v2 .msg-actions a:hover,.live80-v2 .msg-actions button:hover{background:var(--c-cyan);color:#04212c}
.live80-v2 .msg-actions button:disabled{opacity:.45;pointer-events:none}
.live80-v2 .typing{display:inline-flex;gap:4px;align-items:center}
.live80-v2 .typing i{width:7px;height:7px;border-radius:50%;background:var(--c-cyan);animation:typing 1.1s ease-in-out infinite}
.live80-v2 .typing i:nth-child(2){animation-delay:.15s}
.live80-v2 .typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.live80-v2 .chat-chips{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s3) var(--s4) 0;scrollbar-width:none}
.live80-v2 .chat-chips::-webkit-scrollbar{display:none}
.live80-v2 .chat-chips button{white-space:nowrap;min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--c-ink-2);font-size:12px}
.live80-v2 .chat-chips button:hover{border-color:var(--c-cyan);color:#fff;box-shadow:var(--glow-cyan)}
.live80-v2 .chat-form{display:flex;gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}
.live80-v2 .chat-form input{flex:1;min-height:46px;padding:0 var(--s4);border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.24);background:rgba(50,13,42,.82);color:#fff;font-size:var(--fs-sm)}
.live80-v2 .chat-form input::placeholder{color:var(--c-ink-3)}
.live80-v2 .chat-form input:focus{outline:none;border-color:var(--c-cyan);box-shadow:var(--glow-cyan)}
.live80-v2 .chat-form button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none;
  border:2px solid var(--c-pink);background:rgba(215,0,127,.35)}
.live80-v2 .chat-form button:hover{background:var(--c-pink);box-shadow:var(--glow-pink)}
.live80-v2 .chat-form button svg{width:18px;height:18px;fill:#fff}
@media (max-width:700px){/* Tickets wird zur Leiste, Chat rutscht darueber */
.live80-v2 .ticket-dock{left:0;right:0;bottom:0;padding:var(--s3);background:linear-gradient(to top,rgba(38,10,32,.96),transparent)}
.live80-v2 .ticket-btn{width:100%;justify-content:center}
.live80-v2 .ticket-btn::after{display:none}
/* Tickets ist hier eine Leiste ueber die volle Breite (60px + 2x --s3
     Innenabstand = 84px). Der Bot sitzt rechts darueber. */
.live80-v2 .chat-dock{right:var(--s3);bottom:calc(84px + var(--s3))}
.live80-v2 .chat-fab{width:64px;height:64px}
.live80-v2 .bot-svg{width:42px}
.live80-v2 .bot-q{width:24px;height:24px;font-size:14px}
.live80-v2 .chat-tip{display:none}
.live80-v2 .chat{left:var(--s3);right:var(--s3);width:auto;bottom:calc(84px + var(--s3) + 64px + var(--s3));max-height:60vh}}
/* ===========================================================================
   17. OVERLAYS
   =========================================================================== */
.live80-v2 .modal{position:fixed;inset:0;z-index:9500;display:none;place-items:center;padding:var(--s5)}
.live80-v2 .modal.open{display:grid}
.live80-v2 .modal-scrim{position:absolute;inset:0;background:rgba(20,4,44,.9);backdrop-filter:blur(9px)}
.live80-v2 .modal-box{position:relative;z-index:2;width:min(100%,980px);max-height:88vh;overflow:auto;border-radius:var(--r-lg);
  border:1px solid rgba(255,45,149,.45);background:linear-gradient(160deg,rgba(146,22,120,.98),rgba(88,13,72,.99));
  box-shadow:0 40px 130px rgba(var(--c-shadow),.85),0 0 60px rgba(255,45,149,.2);padding:var(--s6)}
.live80-v2 .modal-close{position:absolute;right:var(--s4);top:var(--s4);z-index:3;width:46px;height:46px;border-radius:50%;
  cursor:pointer;display:grid;place-items:center;border:2px solid var(--c-line);background:rgba(47,12,40,.85)}
.live80-v2 .modal-close:hover{border-color:var(--c-pink);box-shadow:var(--glow-pink)}
.live80-v2 .modal-close svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none}
.live80-v2 .modal-title{font-family:'Core Sans M','Asap',sans-serif;font-size:var(--fs-xl);text-transform:uppercase;
  letter-spacing:.05em;padding-right:56px}
.live80-v2 .modal-sub{color:var(--c-cyan);font-size:var(--fs-sm);margin-top:var(--s1)}
.live80-v2 .video-frame{position:relative;aspect-ratio:16/9;margin-top:var(--s5);border-radius:var(--r-md);overflow:hidden;
  background:#12042a;border:1px solid var(--c-line)}
.live80-v2 .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live80-v2 .video-fallback{margin-top:var(--s4);font-size:var(--fs-xs);color:var(--c-ink-3);text-align:center}
.live80-v2 .video-fallback a{color:var(--c-cyan)}
/* Ersatzansicht, wenn YouTube das Einbetten verweigert (Fehler 101/150):
   Thumbnail + klarer Weg zu YouTube statt eines grauen Kastens. */
.live80-v2 .video-blocked{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--s5);gap:var(--s4)}
.live80-v2 .video-blocked img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.4)}
.live80-v2 .video-blocked .in{position:relative;display:grid;gap:var(--s4);justify-items:center}
.live80-v2 .video-blocked p{font-size:var(--fs-sm);color:var(--c-ink-2);max-width:46ch}
.live80-v2 #arcade-canvas{width:100%;max-width:720px;aspect-ratio:16/9;display:block;margin-inline:auto;border-radius:var(--r-md);
  border:1px solid rgba(38,224,255,.45);background:#66094f;box-shadow:0 0 70px rgba(38,224,255,.3)}
.live80-v2 .arcade-hud{display:flex;justify-content:center;gap:var(--s6);margin-top:var(--s4);
  font-family:'Core Sans M','Asap',sans-serif;letter-spacing:.16em;text-transform:uppercase;font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
.live80-v2 .arcade-hud b{color:var(--c-gold);text-shadow:var(--glow-gold)}
.live80-v2 .arcade-hint{text-align:center;color:var(--c-ink-3);font-size:var(--fs-xs);margin-top:var(--s3)}
.live80-v2 .toast{position:fixed;left:50%;bottom:var(--s6);translate:-50% 0;z-index:9600;padding:var(--s3) var(--s5);
  border-radius:var(--r-pill);border:1px solid rgba(255,217,61,.55);background:rgba(32,8,62,.97);
  box-shadow:var(--glow-gold);font-size:var(--fs-sm);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.live80-v2 .toast.show{opacity:1;transform:translate(-50%,-6px)}
/* Konfetti-Funken beim Favorisieren */
.live80-v2 .spark{position:fixed;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:9400}
/* ===========================================================================
   17b. MOBIL-FEINSCHLIFF (≤700px)
   Gesammelt aus dem Handy-Durchgang vom 28.07. Bewusst EIN Block am Ende des
   Stylesheets: so gewinnen die Regeln gegen die Komponenten-Defaults, und wer
   spaeter am Handy-Layout schraubt, muss nicht durch zehn Sektionen springen.
   =========================================================================== */
@media (max-width:700px){/* 🔴 HIER STAND EINE UEBERSTEUERUNG DER SEKTIONSABSTAENDE – ersatzlos weg
     (2026-08-05). Sie hat damals das richtige Problem geloest (96px oben UND
     unten ergaben am Handy fast 200px leere Flaeche), aber am falschen Ende:
     sie setzte .sec auf --s7 und liess damit den Sektionsabstand mit dem
     Abstand INNERHALB der Sektion zusammenfallen. Beide Werte sind jetzt
     fluide (siehe Tokens) und laufen am Handy bewusst auseinander:
     .sec bekommt ueber --s9 48px, die Innenabstaende ueber --s7 nur 28px.
     Nicht wieder eine feste Uebersteuerung einbauen – sie wuerde die Rampe
     ueberfahren und die Hierarchie erneut einebnen. */
/* Countdown: Umbruch zwischen Stadt und Spielstaette, nicht im Namen */
.live80-v2 .countdown-meta .where{display:grid;gap:3px;line-height:1.15}
.live80-v2 .countdown-meta .where .sep{display:none}
.live80-v2 .countdown-meta .where i{font-size:.7em;letter-spacing:.12em;color:var(--c-ink-2)}
/* "Das Original" steht hier UNTER dem Video, nicht daneben – linksbuendig
     wirkt dort abgerissen. */
.live80-v2 .story-text{justify-items:center;text-align:center}
.live80-v2 .story-text .typewriter{text-align:center}
.live80-v2 .story-logo{width:min(70%,200px)}
/* Spotify-Bereich: Bedienelemente mittig, Blockenden ausgewogener.
     Das CD-Cover ist hochformatig (1790x2138) und lief mit width:100% ueber
     die volle Spaltenbreite – es fuellte damit fast einen ganzen Bildschirm
     und schob Titelliste und Bedienelemente weit nach unten. */
.live80-v2 .player-inner{padding:var(--s6) var(--s5);gap:var(--s6)}
.live80-v2 .player-inner>.sleeve{justify-self:center;width:min(58%,200px)}
.live80-v2 .track-list{max-height:196px}
.live80-v2 .player-head{justify-items:center;text-align:center}
.live80-v2 .player-kicker{justify-content:center}
.live80-v2 .player-controls{justify-content:center;gap:var(--s3)}
.live80-v2 .player-title{font-size:var(--fs-lg)}
.live80-v2 .cd-h{margin-top:calc(var(--s7) - .14em)}
.live80-v2 .cd-grid{margin-top:var(--s5)}
/* Partnerlogos kleiner und einheitlicher – Begruendung siehe .logo-row */
.live80-v2 .logo-row{gap:var(--s4) var(--s5);margin-bottom:var(--s7)}
.live80-v2 .logo-row img{width:94px;height:36px}
.live80-v2 .logo-row--media img{width:84px;height:32px}}
/* ===========================================================================
   18. REVEAL – das Auftauchen der Seitenelemente
   Reinfliegen, aus der Unschaerfe scharf werden, hereinklappen.

   🔴 Bewusst ANIMATION statt transition, und das JS nimmt .in nach dem Lauf
   wieder weg (-> .rv-done). Zwei Gruende, beide real:
   a) Eine transition auf transform in .reveal (steht spaet im Stylesheet)
      gewinnt gegen .act-card/.event-card und macht deren Hover/3D-Tilt zaeh.
   b) Eine mit "both" gefuellte Animation haelt transform/filter fest und
      wuerde Hover-Transforms und die Dauerlaeufer (.flicker, .chrome-Shimmer)
      dauerhaft blockieren. Nach dem Entfernen von .in greifen wieder die
      Basisregeln des Elements.
   Verzoegerung pro Element steuert das JS ueber --rd.
   =========================================================================== */
.live80-v2 .reveal{opacity:0}
.live80-v2 .reveal.in{animation:rv-up 1s cubic-bezier(.16,1,.3,1) var(--rd,0ms) both;
  will-change:transform,opacity,filter}
.live80-v2 .reveal.rv-done{opacity:1}
.live80-v2 .reveal.rv-left.in{animation-name:rv-left}
.live80-v2 .reveal.rv-right.in{animation-name:rv-right}
.live80-v2 .reveal.rv-zoom.in{animation-name:rv-zoom;animation-duration:1.15s}
.live80-v2 .reveal.rv-flip.in{animation-name:rv-flip;animation-duration:1.1s}
.live80-v2 .reveal.rv-focus.in{animation-name:rv-focus;animation-duration:1.25s}
@keyframes rv-up{
  0%  {opacity:0;filter:blur(14px);transform:translate3d(0,74px,0) scale(.93)}
  55% {opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}
@keyframes rv-left{
  0%  {opacity:0;filter:blur(18px);transform:translate3d(-120px,28px,0) rotate(-5deg) scale(.88)}
  55% {opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}
@keyframes rv-right{
  0%  {opacity:0;filter:blur(18px);transform:translate3d(120px,28px,0) rotate(5deg) scale(.88)}
  55% {opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}
/* Aus der Tiefe nach vorn – der "Fliegt dich an"-Effekt */
@keyframes rv-zoom{
  0%  {opacity:0;filter:blur(30px);transform:scale(.42)}
  60% {opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}
/* Klappt von hinten unten herein wie ein aufgestelltes Schild */
@keyframes rv-flip{
  0%  {opacity:0;filter:blur(12px);transform:perspective(1200px) rotateX(-72deg) translateY(50px)}
  60% {opacity:1}
  100%{opacity:1;filter:blur(0);transform:perspective(1200px) rotateX(0) translateY(0)}
}
/* Headlines: erst voellig unscharf und ueberstrahlt, dann knackscharf */
@keyframes rv-focus{
  0%  {opacity:0;filter:blur(26px) brightness(2.4);transform:scale(1.16)}
  50% {opacity:1}
  82% {filter:blur(0) brightness(1.85)}
  100%{opacity:1;filter:blur(0) brightness(1);transform:none}
}
/* ---------------------------------------------------------------------------
   🔴 TOUCH-GERAETE: dieselbe Choreografie, aber OHNE animierten Weichzeichner.

   Gemessen am iPhone (393x695 @3x, 2026-07-28): mit animiertem blur() lag
   DOMContentLoaded bei 15.324 ms, ohne bei 1.142 ms. WebKit rastert jeden
   animierten Weichzeichner bei dreifacher Pixeldichte Bild fuer Bild neu –
   47 Elemente taten das gleichzeitig. opacity und transform sind dagegen
   GPU-billig, deshalb bleiben Flugbahn, Richtung und Timing unveraendert.

   ⚠️ Die Zwillinge muessen eigene Namen haben. Ein blosses
   "filter:none !important" reicht NICHT: die Keyframes selbst setzen filter,
   und Keyframe-Werte schlagen normale Deklarationen.
   --------------------------------------------------------------------------- */
/* 🔴 Gilt jetzt fuer ALLE Geraete, nicht mehr nur fuer Touch.
   Zuerst waren die blur-freien Zwillinge nur aufs Handy gemuenzt. Dann meldete
   der Kunde, dass auch der Desktop zaeh wurde – 47 gleichzeitig animierte
   Weichzeichner sind eben auch dort teuer, nur faellt es auf schnellen
   Rechnern spaeter auf. Der Effekt "unscharf wird scharf" war ohnehin meine
   Zutat; gewuenscht war "reinfliegen", und genau das bleibt erhalten. */
.live80-v2 .reveal.in{animation-name:rvt-up}
.live80-v2 .reveal.rv-left.in{animation-name:rvt-left}
.live80-v2 .reveal.rv-right.in{animation-name:rvt-right}
.live80-v2 .reveal.rv-zoom.in{animation-name:rvt-zoom}
.live80-v2 .reveal.rv-flip.in{animation-name:rvt-flip}
.live80-v2 .reveal.rv-focus.in{animation-name:rvt-focus}
.live80-v2 .reveal.in{will-change:transform,opacity}
@keyframes rvt-up{
  0%  {opacity:0;transform:translate3d(0,74px,0) scale(.93)}
  55% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes rvt-left{
  0%  {opacity:0;transform:translate3d(-120px,28px,0) rotate(-5deg) scale(.88)}
  55% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes rvt-right{
  0%  {opacity:0;transform:translate3d(120px,28px,0) rotate(5deg) scale(.88)}
  55% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes rvt-zoom{
  0%  {opacity:0;transform:scale(.42)}
  60% {opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes rvt-flip{
  0%  {opacity:0;transform:perspective(1200px) rotateX(-72deg) translateY(50px)}
  60% {opacity:1}
  100%{opacity:1;transform:perspective(1200px) rotateX(0) translateY(0)}
}
@keyframes rvt-focus{
  0%  {opacity:0;transform:scale(1.16)}
  50% {opacity:1}
  100%{opacity:1;transform:none}
}
/* Auf schmalen Geraeten flacher fliegen – seitliches Reinfliegen wuerde sonst
   waehrend der Animation horizontal ueberstehen.
   ⚠️ MUSS nach den Touch-Regeln oben stehen, sonst gewinnt dort rvt-left/right
   und das seitliche Fliegen bliebe auf dem Handy erhalten. */
@media (max-width:700px){.live80-v2 .reveal.rv-left.in,.live80-v2 .reveal.rv-right.in{animation-name:rvt-up}
.live80-v2 .reveal.rv-zoom.in{animation-duration:.95s}}
@media (prefers-reduced-motion:reduce){.live80-v2 *,.live80-v2 *::before,.live80-v2 *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
.live80-v2 .reveal{opacity:1;transform:none;filter:none;animation:none !important}
.live80-v2 .hero-inner>*{opacity:1 !important;animation:none !important}
.live80-v2 .crt,.live80-v2 .hero-lasers,.live80-v2 .player-wave{display:none}
.live80-v2 .rule{transform:scaleX(1)}}
/* ===========================================================================
   99. DIAGNOSE (nur mit ?fx=0 bzw. ?speed=1 aktiv – im Normalbetrieb wirkungslos)
   Dient dazu, auf dem ECHTEN Geraet zu messen, statt am Rechner zu raten.
   =========================================================================== */
.live80-v2 .nofx *,.live80-v2 .nofx *::before,.live80-v2 .nofx *::after{
  animation:none !important;transition:none !important;
  filter:none !important;backdrop-filter:none !important;mix-blend-mode:normal !important;
  text-shadow:none !important;box-shadow:none !important}
.live80-v2 .nofx .reveal{opacity:1 !important}
.live80-v2 .nofx #stars,.live80-v2 .nofx .crt,.live80-v2 .nofx .hero-lasers,.live80-v2 .nofx .hero-sun,.live80-v2 .nofx .hero-horizon,.live80-v2 .nofx .holo-eq,.live80-v2 .nofx .gridfloor,.live80-v2 .nofx .player-wave,.live80-v2 .nofx .vinyl{display:none !important}
.live80-v2 #speedbox{position:fixed;left:0;right:0;top:0;z-index:99999;
  background:#000;color:#0f0;font:600 15px/1.5 ui-monospace,Menlo,monospace;
  padding:14px 16px;border-bottom:2px solid #0f0;white-space:pre;overflow:auto;max-height:70vh}
.live80-v2 #speedbox b{color:#ff0}
.live80-v2 #speedbox .bad{color:#f55}
/* --- Einzelschalter zum Eingrenzen (?x=blur, blend, mask, shadow, stars, anim) --- */
.live80-v2 .x-blur *,.live80-v2 .x-blur *::before,.live80-v2 .x-blur *::after{filter:none !important;backdrop-filter:none !important}
.live80-v2 .x-blend *,.live80-v2 .x-blend *::before,.live80-v2 .x-blend *::after{mix-blend-mode:normal !important}
.live80-v2 .x-mask .act-card::before,.live80-v2 .x-mask .cert-rays,.live80-v2 .x-mask .crt,.live80-v2 .x-mask .gridfloor{display:none !important}
.live80-v2 .x-shadow *,.live80-v2 .x-shadow *::before,.live80-v2 .x-shadow *::after{box-shadow:none !important;text-shadow:none !important}
.live80-v2 .x-stars #stars{display:none !important}
/* Feinere Schalter, um den Rest einzugrenzen (2026-07-29). Grob reichte nicht:
   nach dem Blur-Fix blieben ~850 ms ueber dem Boden von 184 ms. */
.live80-v2 .x-backdrop *,.live80-v2 .x-backdrop *::before,.live80-v2 .x-backdrop *::after{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.live80-v2 .x-chrome .chrome{animation:none !important;background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:#fff !important}
.live80-v2 .x-rays .cert-rays{display:none !important}
.live80-v2 .x-crt .crt{display:none !important}
.live80-v2 .x-grid .gridfloor,.live80-v2 .x-grid .bg-fx{display:none !important}
.live80-v2 .x-lights .hero-lasers,.live80-v2 .x-lights .hero-sun,.live80-v2 .x-lights .hero-horizon,.live80-v2 .x-lights .holo-eq{display:none !important}
.live80-v2 .x-anim *,.live80-v2 .x-anim *::before,.live80-v2 .x-anim *::after{animation:none !important;transition:none !important}

/* ---- WordPress-Bruecke (nicht aus dem Mockup, siehe scope-css.py) ---- */
/* ⚠️ Gilt fuer JEDE unserer Gruppen, nicht nur die zwei aeusseren Container:
   WordPress' Block-Gap greift in jedem `is-layout-flow`, also auch in einer
   `.sec-head` tief im Baum. Gemessen: der Zierstrich `.rule` bekam dort 32px
   Abstand und machte den FAQ-Kopf 65px zu hoch. */
.live80-v2 :where(.entry-content, .wp-block-group, .wp-block-details, .wp-block-list) > *{margin-block-start:0}
/* Das Menue ist jetzt eine `core/list`. WordPress' Listenblock bringt eigene
   Abstaende an den Punkten mit — gemessen 68 statt 52px Zeilenhoehe. */
.live80-v2 ul.wp-block-list.nav-links > li{margin:0}
/* Die Group, die unser <main> traegt, darf keine Theme-Breite erzwingen. */
.live80-v2 main.wp-block-group{max-width:none;padding-left:0;padding-right:0}

/* ---- PAKET 2: FAQ als native core/details-Bloecke -------------------------
 * Die FAQ war frueher JS-generiert und ist jetzt im Editor pflegbar. Dabei
 * aendert sich zwangslaeufig das Markup — diese Regeln gleichen das aus.
 *
 * 🔴 Das Plus-Icon sass als `<span class="ic"><svg></span>` IN der summary.
 * Bei core/details ist die Zusammenfassung ein reines Textfeld; ein Span mit
 * SVG darin waere entweder verschwunden oder haette den Editor vermuellt.
 * Deshalb kommt der Kreis jetzt aus `::before` und das Plus aus einer Maske —
 * optisch dieselben 30px, dieselbe 45deg-Drehung beim Oeffnen.
 */
/* 🔴 ERSTER ANLAUF WAR FALSCH — nicht zurueckbauen.
   Zuerst stand hier `mask:` mit einer Plus-Form. Eine Maske schneidet aber das
   GANZE Element zu, also auch `border` und `border-radius`: uebrig blieb ein
   nacktes Pluszeichen ohne den Ring, den das Original zeigt. Im Screenshot
   sofort sichtbar, in den Hoehenmessungen nicht — beides braucht es.
   Jetzt: Ring aus `border`, Zeichen als Hintergrundbild. Weil die Strichfarbe
   im Datei-URI steckt, gibt es zwei Fassungen statt `currentColor`. */
.live80-v2 .faq-list{
  --faq-plus:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b1a7c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --faq-plus-offen:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7007f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.live80-v2 .faq-item summary::before{
  content:"";width:30px;height:30px;border-radius:50%;flex:none;box-sizing:border-box;
  border:1px solid rgba(90,25,140,.45);
  background:var(--faq-plus) center/14px 14px no-repeat;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.live80-v2 .faq-item[open] summary::before{
  transform:rotate(45deg);border-color:var(--c-pink-deep);
  background-image:var(--faq-plus-offen)}

/* Absaetze statt roher Textknoten: WordPress bringt eigene Abstaende mit. */
.live80-v2 .faq-body > p{margin:0}
.live80-v2 .faq-body > p + *{margin-top:var(--s3)}
.live80-v2 .faq-body .lines p,
.live80-v2 .faq-body .faq-actions p{margin:0}
.live80-v2 .faq-body .faq-actions p{display:flex;flex-wrap:wrap;gap:var(--s2)}
/* ⚠️ NUR die Aussenabstaende zuruecksetzen — NICHT pauschal `border:0;background:none`.
   Genau das stand hier zuerst: `details.wp-block-details` ist spezifischer als
   `.faq-item` und hat dessen 1px-Rahmen mitgenommen. Gemessen 66px -> 64px
   Kartenhoehe, ueber acht Eintraege 16px Versatz. */
.live80-v2 details.wp-block-details{margin:0}
.live80-v2 details.wp-block-details > summary{margin:0}
/* ---- PAKET 2: Termin-Kacheln als native Bloecke --------------------------- */

/* core/image bringt eine <figure> zwischen Container und Bild. */
.live80-v2 .event-illu figure.wp-block-image{margin:0;height:100%;display:block}

/* 🔴 Der Glanzstreifen war ein leeres `<span class="sheen">`. Leere Elemente sind
   in Bloecken nicht darstellbar (der Editor setzt dort einen 280px hohen
   „Block hinzufuegen"-Platzhalter hinein — derselbe Fall wie bei den Icon-
   Containern der 2027-Seiten). Deshalb jetzt als Pseudoelement.
   ⚠️ `::after` ist am `.event-illu` schon fuer den Ausblend-Verlauf vergeben —
   der Glanz kommt auf `::before`. */
.live80-v2 .event-illu::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg)}
.live80-v2 .event-card:hover .event-illu::before{
  transition:left .9s var(--ease);left:130%}

/* 🔴 core/button legt die Klassen auf den WRAPPER, nicht auf das <a>. Ein
   handgeschriebenes <a class="btn"> wuerde die Blockvalidierung brechen
   („Dieser Block enthaelt unerwarteten Inhalt"). Loesung: der Wrapper IST der
   Knopf (er traegt `.btn` und damit Verlauf, Rahmen, Hoehe), der Link legt sich
   flaechendeckend darueber — so bleibt die ganze Flaeche klickbar. */
/* ⚠️ ERSTER ANLAUF WAR FALSCH: der Link stand auf `position:absolute;inset:0`.
   Damit ist der Text aus dem Fluss — der Wrapper hatte keinen Inhalt mehr und
   fiel auf die Breite seines Innenpolsters zusammen. Gemessen 52x46 statt
   204x46. Der Link bleibt also im Fluss und traegt das Polster selbst; dann
   ist zugleich die ganze Flaeche klickbar und nicht nur der Text. */
.live80-v2 .ev-cta{margin-top:auto;display:flex;justify-content:center}
.live80-v2 .event-body .wp-block-button.btn{padding:0}
.live80-v2 .event-body .wp-block-button.btn > .wp-block-button__link{
  all:unset;display:flex;align-items:center;justify-content:center;
  align-self:stretch;cursor:pointer;color:inherit;font:inherit;
  letter-spacing:inherit;text-align:center;padding:0 var(--s5)}

/* ==========================================================================
 * PAKET 3 — der Rest der Seite als native Bloecke
 *
 * Ab hier gleichen die Regeln aus, was WordPress' Bloecke zwangslaeufig anders
 * bauen als das Mockup. Drei wiederkehrende Faelle:
 *   (a) `core/image` legt eine <figure> zwischen Container und <img>.
 *   (b) `core/button` legt seine Klassen auf den WRAPPER, nicht auf das <a>.
 *   (c) Inline-`style=""` aus dem Mockup wird zur Klasse (Bloecke duerfen keine
 *       Inline-Styles ohne Attribut-Pendant tragen — sonst ungueltiger Block).
 * ========================================================================== */

/* (a) Bilder: die <figure> soll nie eigene Abstaende einbringen.
   ⚠️ `line-height:0` ist NICHT kosmetisch: ein <img> ist ein Inline-Element und
   laesst unter sich Platz fuer die Grundlinie. Im Mockup lag es direkt im
   Container, in WordPress in einer <figure> — gemessen 9px Mehrhoehe pro Bild
   (Kopfzeilen-Logo 133 -> 142, CD-Cover 275 -> 284). */
.live80-v2 figure.wp-block-image{margin:0;line-height:0}
.live80-v2 figure.wp-block-image > a{display:block}

/* Logos: `.hero-logo`/`.story-logo`/`.nav-logo` sitzen jetzt auf der <figure>.
   Die Breiten- und Filterregeln greifen dort weiter; das <img> muss die Figur
   nur noch ausfuellen. */
.live80-v2 .hero-logo img,
.live80-v2 .story-logo img{width:100%;height:auto;display:block}

/* Der Bildschirm der Act-Karte war ein <button>, jetzt ist er ein <div> mit
   einem verlinkten `core/image` darin (dort steckt die Video-ID). Damit das
   Vorschaubild die 16:9-Flaeche fuellt, muessen Figur und Link mitwachsen. */
.live80-v2 .act-screen .act-shot,
.live80-v2 .act-screen .act-shot > a{display:block;height:100%}
.live80-v2 .act-screen .act-shot > a{position:relative;z-index:0}

/* Die Titelzeile der Karte ist ein <h3> — WordPress' `wp-block-heading` bringt
   eigene Abstaende mit, die die Karte auseinanderziehen wuerden. */
.live80-v2 .act-card .act-name{margin:0}

/* (b) Knoepfe. Der Wrapper IST der Knopf (er traegt `.btn`), der Link fuellt
   ihn aus. ⚠️ Das Innenpolster gehoert an den LINK, nicht an den Wrapper —
   sonst waere nur der Text klickbar. `.btn--sm` hat ein eigenes Mass.

   🔴 HIER STAND `height:100%` — DAS WAR DER FEHLER „die Texte kleben oben".
   Die Hoehe des Wrappers kommt aus `min-height` und ist damit UNBESTIMMT; ein
   prozentualer Wert kann sich darauf nicht beziehen. Der Link blieb deshalb auf
   Textzeilenhoehe (26 statt 48 px) — und weil `align-self:stretch` nur greift,
   wenn die Quermassangabe `auto` ist, wurde aus dem Strecken ein `flex-start`:
   der Text sass OBEN im Knopf statt in der Mitte.
   Gemessen (Abstand Text-Oberkante / -Unterkante zur Knopfkante):
     vorher  4 / 27 px      nachher  15 / 16 px
   ⚠️ Es fiel lange nicht auf, weil es nur die Knoepfe INNERHALB eines
   `core/buttons`-Flexcontainers traf. Die Knoepfe in `display:contents`-
   Containern sind Grid-Kinder mit bestimmter Hoehe — dort loeste `100%` sich
   auf, und die sahen richtig aus. Betroffen waren Startseite, Koeln UND
   Hamburg gleichermassen. `height:auto` laesst `align-self:stretch` seine
   Arbeit machen; im Editor wirkt es genauso (dort ist der Link ein <div>). */
.live80-v2 .wp-block-button.btn{padding:0}
.live80-v2 .wp-block-button.btn > .wp-block-button__link{
  all:unset;position:relative;z-index:1;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  align-self:stretch;width:100%;height:auto;cursor:pointer;
  color:inherit;font:inherit;letter-spacing:inherit;text-align:center;
  padding:0 var(--s6)}
.live80-v2 .wp-block-button.btn--sm > .wp-block-button__link{padding:0 var(--s5)}

/* `core/buttons` ist ein zusaetzlicher Flex-Container, den es im Mockup nicht
   gab. Wo er nur EINEN Knopf umschliesst, verschwindet er per `display:contents`
   aus dem Layout — sonst verschoebe er Abstaende in Grid- und Flex-Eltern. */
.live80-v2 .wp-block-buttons.cd-cta,
.live80-v2 .wp-block-buttons.player-cta,
.live80-v2 .wp-block-buttons.outro-cta,
.live80-v2 .wp-block-buttons.presse-cta{display:contents}

/* Das Play-Dreieck des zweiten Hero-Knopfes war ein Inline-SVG. Im Knopftext
   waere es nicht editierbar (und beim Bearbeiten weg), also kommt es aus dem
   Pseudoelement des Links. */
.live80-v2 .btn--play > .wp-block-button__link::before{
  content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--play-icon) center/contain no-repeat;
  mask:var(--play-icon) center/contain no-repeat}
.live80-v2{--play-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")}

/* Die Hero-Headline: drei Zeilen, die mittlere 6 % groesser. Als `<span class="l2">`
   waere das beim ersten Bearbeiten verloren (RichText wirft fremde Spans weg),
   deshalb sind die Zeilen `<strong>` — ein registriertes Inline-Format. */
.live80-v2 .hero-title strong{display:block;font-weight:inherit}
.live80-v2 .hero-title strong:nth-of-type(2){font-size:1.06em}

/* Zentrierungen, die im Mockup als `style="text-align:center"` am Element
   standen. Als Inline-Style waeren die Bloecke ungueltig. */
.live80-v2 .names-sec .eyebrow,
.live80-v2 .story .outline-h{text-align:center}

/* Die Urkunde: <figure>/<figcaption> gibt es als Block nicht (siehe UMSCHRIFT).
   `.cert-cap` traegt die figcaption-Regeln; hier nur, was die Umgebung braucht. */
.live80-v2 .cert{display:grid;justify-items:center}
.live80-v2 .cert-media figure.wp-block-image{line-height:0}
.live80-v2 .cert .cert-cap::before{
  content:"";width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask:var(--stern-icon) center/contain no-repeat;
  mask:var(--stern-icon) center/contain no-repeat}
.live80-v2{--stern-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 9.2 8.6 2 9.2l5.5 4.8L5.8 21 12 17.3 18.2 21l-1.7-7 5.5-4.8-7.2-.6z'/%3E%3C/svg%3E")}

/* Das Spotify-Zeichen vor „Offizielle Playlist" — selber Grund wie beim Stern. */
.live80-v2 .player-kicker::before{
  content:"";width:20px;height:20px;flex:none;background:var(--c-green);
  filter:drop-shadow(0 0 8px rgba(30,215,96,.8));
  -webkit-mask:var(--spotify-icon) center/contain no-repeat;
  mask:var(--spotify-icon) center/contain no-repeat}
.live80-v2{--spotify-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.6 14.4a.75.75 0 0 1-1 .25c-2.8-1.7-6.3-2.1-10.4-1.15a.75.75 0 1 1-.34-1.46c4.5-1.03 8.4-.58 11.5 1.32.35.22.46.68.24 1.04Zm1.25-2.9a.94.94 0 0 1-1.3.31c-3.2-1.97-8.1-2.54-11.9-1.4a.94.94 0 1 1-.54-1.8c4.34-1.3 9.74-.66 13.42 1.6.44.27.58.85.32 1.29Zm.1-3.02c-3.84-2.28-10.18-2.5-13.85-1.38a1.12 1.12 0 1 1-.65-2.15C7.68 5.66 14.68 5.92 19.1 8.54a1.12 1.12 0 1 1-1.15 1.93Z'/%3E%3C/svg%3E")}

/* Der Plattenhuellen-Deckel und die CD-Cover sitzen jetzt auf der <figure>. */
.live80-v2 .sleeve-cover img,
.live80-v2 .cd-item figure.wp-block-image img{width:100%;height:auto;display:block}
.live80-v2 .cd-item figure.wp-block-image{max-width:230px;width:100%}

/* Fusszeile: die Logos sind Flex-Kinder von `.logo-row`. `display:contents`
   loest die eingeschobene <figure> auf, damit die Groessenregeln der Reihe
   unveraendert am <img> greifen. */
.live80-v2 .logo-row figure.wp-block-image{display:contents}
.live80-v2 .foot-press .mk-logo img{height:56px;width:auto;opacity:.85}
/* Die Rechtstexte liegen jetzt in EINEM Absatz (im Editor eine Zeile statt
   fuenf Einzelteile); die Fusszeile bleibt trotzdem eine Flex-Reihe. */
.live80-v2 .foot-bottom .foot-links{display:contents}

/* Inline-Groessen aus dem Mockup, jetzt als Klasse. */
/* ⚠️ Spezifitaet: `.sec-head h2` (0,2,1) schlaegt eine reine Klasse. Im Mockup
   stand hier ein `style=""` und damit ausser Konkurrenz — gemessen 92px statt
   56px Schriftgroesse, die Ueberschrift lief dadurch auf 182 statt 59px Hoehe.
   Derselbe Fall wie bei `.faq-h` weiter unten. */
.live80-v2 .lead--62{max-width:62ch}
.live80-v2 .music-sec .sec-head h2.cd-titel{font-size:var(--fs-2xl)}
.live80-v2 .player-note{color:var(--c-ink-3);font-size:var(--fs-sm)}
.live80-v2 .foot-h--event{margin:var(--s5) 0 var(--s3)}

/* Groessen, die im Mockup als style="" am Element standen. */
/* ⚠️ Diese beiden standen im Mockup als `style=""` direkt am Element und schlugen
   damit jede Regel. Als Klasse brauchen sie genug Spezifitaet, sonst gewinnt
   `.sec-head .display` — gemessen 98px statt 59px Ueberschriftenhoehe. */
.live80-v2 .faq-sec .sec-head .display.faq-h{font-size:var(--fs-2xl)}
.live80-v2 .faq-sec .sec-head .lead.faq-lead{font-size:var(--fs-md)}

/* Mailjet-Newsletter (Shortcode [dwd_newsletter_form]) — der iframe bringt
   eigenes Design mit, hier nur Platzierung. Hoehe setzt Mailjets
   Resize-Script (gemessen 192px). Bewusst OHNE min-height: ein Auffangwert
   ueberschreibt die vom Script gesetzte Hoehe und erzeugt Leerraum. */
.live80-v2 .outro iframe{display:block;width:100%;max-width:520px;margin:var(--s6) auto 0;border:0}