/* ============================================================
   Stone Park Festival — Konzert-Licht (Original-Rekonstruktion)
   Editorial-Poster + Konzert-Footage. Schwarz · Bone · Rot.
   ============================================================ */
/* Lokale Display-Fonts (free for commercial use) */
@font-face{ font-family:"Evora"; src:url("../fonts/Evora05.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Viper Fangs"; src:url("../fonts/ViperFangs.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Metal Lord"; src:url("../fonts/MetalLord.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --ink:#0a0a0c; --bone:#ece8df;
  --bone-dim:rgba(236,232,223,.60); --bone-faint:rgba(236,232,223,.34);
  /* monochrome Basis: --red = Bone/Weiß; gezielter Rot-Akzent für Buttons + Countdown-Ziffern */
  --red:#ece8df; --red-bright:#ffffff; --line:rgba(236,232,223,.16);
  --accent:#d7281f; --accent-bright:#ff3b2e;
  --maxw:1320px; --pad:clamp(16px,3vw,40px); --header-h:70px;
  --mono:"Space Mono",ui-monospace,monospace;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --metal:"Oswald","Archivo",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:#0a0a0c url("../img/spfbackground1.png") center top / cover fixed; color:var(--bone); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
b{ font-weight:inherit; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans); font-weight:800;
  font-size:.9rem; letter-spacing:.05em; text-transform:uppercase; line-height:1; padding:18px 30px;
  border:0; border-radius:0; cursor:pointer; position:relative; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease); }
.btn__arrow{ transition:transform .3s var(--ease); font-weight:700; }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px -16px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12); }
.btn--primary::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg,var(--accent-bright),#ff5a3c); transform:translateX(-101%); transition:transform .45s var(--ease); }
.btn--primary>*{ position:relative; z-index:1; }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 42px -12px var(--accent), inset 0 0 0 1px rgba(255,255,255,.18); }
.btn--primary:hover::before{ transform:translateX(0); }
.btn--primary:hover .btn__arrow{ transform:translateX(6px); }
.btn--ghost{ background:transparent; color:var(--bone); box-shadow:inset 0 0 0 1.5px rgba(236,232,223,.30); }
.btn--ghost:hover{ color:var(--ink); transform:translateY(-2px); box-shadow:inset 0 0 0 2px var(--bone); }
.btn--ghost::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--bone); transform:translateY(101%); transition:transform .35s var(--ease); }
.btn--ghost>*{ position:relative; z-index:1; }
.btn--ghost:hover::before{ transform:translateY(0); }
.btn--ticket{ background:var(--accent); color:#fff; padding:12px 22px; font-size:.78rem; letter-spacing:.06em; }
.btn--ticket:hover{ background:var(--accent-bright); }
.btn--block{ display:flex; justify-content:center; width:100%; }
.btn--xl{ padding:20px 34px; font-size:1rem; }
.btn--on-red{ background:#0a0a0c; color:var(--bone); box-shadow:0 12px 30px -14px rgba(0,0,0,.7); }
.btn--on-red::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--bone); transform:translateY(101%); transition:transform .35s var(--ease); }
.btn--on-red>*{ position:relative; z-index:1; }
.btn--on-red:hover{ color:#0a0a0c; transform:translateY(-2px); }
.btn--on-red:hover::before{ transform:translateY(0); }
.btn--on-red:hover .btn__arrow{ transform:translateX(6px); }
.note-link{ color:var(--bone-dim); font-weight:700; letter-spacing:.12em; border-bottom:1px solid rgba(236,232,223,.4);
  transition:color .25s var(--ease), border-color .25s var(--ease); }
.note-link:hover{ color:var(--red-bright); border-bottom-color:var(--red-bright); }

/* ---------- Header ---------- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; height:var(--header-h); display:flex; align-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease), height .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent; }
.site-header.is-scrolled{ height:58px; background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
.header__inner{ width:100%; margin:0 auto; padding:0 var(--pad); display:flex; align-items:center; gap:2rem; }
.brand{ display:flex; flex-direction:column; flex-shrink:0; line-height:1; gap:3px; }
.brand__name{ font-weight:900; font-size:1.32rem; letter-spacing:-.01em; text-transform:uppercase; color:var(--bone); text-shadow:0 2px 14px rgba(0,0,0,.55); }
.brand__tag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--red); padding-left:.15em; }
.nav{ display:flex; align-items:center; gap:2.1rem; margin-left:auto; font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.nav a{ position:relative; color:var(--bone-dim); padding:4px 0; transition:color .25s var(--ease); }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav a:hover{ color:var(--bone); } .nav a:hover::after{ transform:scaleX(1); }
.header__actions{ display:flex; align-items:center; gap:1rem; }
.nav-toggle{ display:none; width:42px; height:42px; background:none; border:1px solid var(--line); border-radius:2px; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; }
.nav-toggle span{ width:18px; height:2px; background:var(--bone); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ position:fixed; inset:0; z-index:45; background:rgba(8,8,10,.97); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center; gap:.5rem; padding:var(--pad); transform:translateY(-100%); transition:transform .5s var(--ease); pointer-events:none; }
.mobile-menu.is-open{ transform:translateY(0); pointer-events:auto; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:.2rem; margin-bottom:1.5rem; }
.mobile-menu nav a{ font-weight:800; font-size:2rem; text-transform:uppercase; padding:.35rem 0; color:var(--bone); border-bottom:1px solid var(--line); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; overflow:hidden; background:var(--ink); }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:grayscale(1) contrast(1.14) brightness(.86); }
.hero__veil{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(180deg, rgba(10,10,12,.30) 0%, rgba(10,10,12,.12) 32%, rgba(10,10,12,.72) 74%, rgba(10,10,12,.98) 100%),
  linear-gradient(90deg, rgba(10,10,12,.62) 0%, rgba(10,10,12,0) 50%); }
.hero__grain{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner{ position:relative; z-index:3; width:100%; padding:calc(var(--header-h) + 2rem) var(--pad) clamp(28px,5vh,56px); display:flex; align-items:flex-end; }
.hero__content{ position:relative; width:fit-content; max-width:min(680px,100%); }

/* Hero-Titel = LR-Logo-Bild über den Hero */
.hero__logo{ margin:0 auto; display:block; width:min(92vw,960px); position:relative;
  animation:heroRise .9s var(--ease) .35s both; }
.hero__logo img{ width:100%; height:auto; -webkit-user-drag:none; user-select:none;
  filter:drop-shadow(0 16px 44px rgba(0,0,0,.7)); }
@keyframes imgGlitch{
  0%, 85%, 93%, 100%{ transform:none; filter:drop-shadow(0 16px 44px rgba(0,0,0,.7)); }
  86%{ transform:translate(3px,-1px); filter:drop-shadow(5px 0 0 rgba(255,40,60,.85)) drop-shadow(-5px 0 0 rgba(0,225,255,.7)) drop-shadow(0 16px 44px rgba(0,0,0,.7)); }
  88%{ transform:translate(-4px,1px) skewX(-1.2deg); filter:drop-shadow(-6px 0 0 rgba(255,40,60,.7)) drop-shadow(6px 0 0 rgba(0,225,255,.6)) drop-shadow(0 16px 44px rgba(0,0,0,.7)); }
  90%{ transform:translate(2px,0); filter:drop-shadow(3px 0 0 rgba(255,40,60,.6)) drop-shadow(-3px 0 0 rgba(0,225,255,.5)) drop-shadow(0 16px 44px rgba(0,0,0,.7)); }
}
@media (prefers-reduced-motion:reduce){ .hero__logo img{ animation:none; } }

/* Logo im Header (größer/sichtbarer) */
.header__logo{ display:flex; align-items:center; flex-shrink:0; margin-right:auto; }
.header__logo img{ height:clamp(42px,5.4vh,58px); width:auto; }

/* Hero zentriert; Titel oben, Datum + Buttons am Boden */
.hero__inner{ justify-content:center; align-items:stretch; padding-top:calc(var(--header-h) + .3rem); padding-bottom:clamp(28px,5vh,56px); }
.hero__content{ text-align:center; display:flex; flex-direction:column; justify-content:center; max-width:none; margin-left:0; }
.hero__date{ justify-content:center; margin-top:3rem; }
.hero__cta{ justify-content:center; margin-top:.35rem; }
.hero__note{ margin-bottom:0; }
/* CTAs größer im Hero */
.hero__cta .btn{ font-size:1.02rem; padding:21px 44px; }
.hero__cta .spot{ font-size:.82rem; }
.hero__cta .spot__icon{ width:36px; height:36px; }

.hero__date{ display:flex; flex-wrap:nowrap; white-space:nowrap; align-items:baseline; gap:.28em; font-weight:900; line-height:1; font-size:clamp(2.7rem,7.4vw,6.2rem); letter-spacing:-.01em; margin-bottom:.4rem; }
.hero__date i{ color:var(--red); font-style:normal; font-weight:700; font-size:.7em; transform:translateY(-.04em); }
.hero__date em{ font-style:normal; font-size:1em; color:inherit; align-self:baseline; margin-left:.18em; text-transform:none; letter-spacing:inherit; }
.hero__date em b{ display:inline; color:inherit; font-weight:inherit; font-size:1em; }
.hero__tagline{ font-size:clamp(1rem,1.7vw,1.3rem); font-weight:500; line-height:1.3; color:var(--bone-dim); white-space:nowrap; margin-bottom:2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-bottom:1.9rem; }
.spot{ display:inline-flex; align-items:center; gap:.6em; background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); transition:color .25s var(--ease); }
.spot:hover{ color:var(--bone); }
.spot__icon{ width:30px; height:30px; border-radius:50%; border:1.5px solid currentColor; display:inline-grid; place-items:center; flex-shrink:0; position:relative; }
.spot__icon::before{ content:""; width:0; height:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; margin-left:2px; }
.spot.is-playing .spot__icon::before{ border:none; width:8px; height:9px; margin:0; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.hero__note{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--bone-faint); }
.hero__scroll{ position:absolute; right:var(--pad); bottom:clamp(28px,5vh,56px); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); writing-mode:vertical-rl; }
.hero__scroll i{ width:1px; height:46px; background:linear-gradient(var(--bone-dim),transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--red); animation:scrolldrop 1.8s var(--ease) infinite; }
@keyframes scrolldrop{ to{ top:100%; } }

/* ---------- Countdown / Flip-Clock ---------- */
.cd{ position:relative; isolation:isolate; background:#08080a; padding:clamp(4rem,11vh,8rem) var(--pad) clamp(3rem,7vh,5rem); border-top:2px solid var(--red); overflow:hidden; }
.cd::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    repeating-linear-gradient(102deg, rgba(236,232,223,.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-9deg, rgba(0,0,0,.45) 0 1px, transparent 1px 13px),
    radial-gradient(rgba(236,232,223,.045) 1px, transparent 1.6px),
    radial-gradient(125% 100% at 50% 120%, transparent 42%, rgba(0,0,0,.6) 100%);
  background-size:auto, auto, 7px 7px, 100% 100%; }
/* mp4 als Hintergrund im Countdown */
.cd__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-4;
  filter:grayscale(1) contrast(1.1) brightness(.5); }
.cd__veil{ position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,10,.84) 0%, rgba(8,8,10,.9) 60%, rgba(8,8,10,.95) 100%); }
.cd__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.cd__ghost{ position:absolute; right:-2%; top:48%; transform:translateY(-50%); font-weight:900; font-size:clamp(12rem,34vw,30rem); line-height:.8; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(236,232,223,.05); opacity:0; transition:opacity 1.2s var(--ease) .3s; }
.cd.in .cd__ghost{ opacity:1; }
.cd__inner{ position:relative; max-width:var(--maxw); margin:0 auto; }
.cd__title{ font-weight:900; line-height:.95; font-size:clamp(2.4rem,6vw,5rem); letter-spacing:-.02em; text-transform:uppercase; margin-bottom:clamp(2rem,5vh,3.4rem); }
.cd__title em{ font-style:normal; color:#fff; position:relative; isolation:isolate; white-space:nowrap; padding:0 .18em; }
.cd__title em::before{ display:none; }   /* Highlight-Block raus (monochrom, Line-up-Look) */
.cd__clock{ display:flex; align-items:flex-start; gap:clamp(.4rem,1.4vw,1.1rem); flex-wrap:wrap; }
.flip-unit{ display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.flip{ position:relative; perspective:700px; min-width:clamp(72px,13vw,156px); padding:.26em .1em .2em;
  background:linear-gradient(180deg,#26242b 0%,#15141a 49%,#0c0b0f 51%,#1a1920 100%); border:1px solid rgba(236,232,223,.16); border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 4px rgba(0,0,0,.6), 0 10px 22px -14px #000; display:flex; justify-content:center; align-items:center; }
.flip::after{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:#050506; box-shadow:0 1px 0 rgba(255,255,255,.06); z-index:3; }
.flip::before{ content:""; position:absolute; top:7px; left:7px; width:8px; height:8px; z-index:4; border-top:2px solid var(--red); border-left:2px solid var(--red); }
.flip__num{ font-weight:900; font-size:clamp(2.6rem,7.4vw,5.4rem); line-height:1; color:var(--bone); font-variant-numeric:tabular-nums; letter-spacing:-.03em; transform-origin:center; backface-visibility:hidden; }
.flip.is-flip .flip__num{ animation:flipTick .55s var(--ease); }
@keyframes flipTick{ 0%{ transform:rotateX(0); filter:brightness(1); } 42%{ transform:rotateX(-88deg); filter:brightness(1.6); } 58%{ transform:rotateX(88deg); } 100%{ transform:rotateX(0); filter:brightness(1); } }
.flip__lab{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-faint); }
.flip__colon{ font-weight:900; font-size:clamp(2rem,5vw,4rem); line-height:1; color:var(--red); align-self:flex-start; margin-top:.18em; animation:colonPulse 2s steps(1) infinite; }
@keyframes colonPulse{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }
.cta-band{ position:relative; overflow:hidden; margin-top:clamp(2.6rem,6vh,4.6rem); background:#16151b; border-radius:0; padding:clamp(1.7rem,4vw,2.8rem) clamp(1.6rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.cta-band__txt{ position:relative; z-index:1; }
.cta-band__kick{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,247,240,.8); margin-bottom:.6rem; }
.cta-band__title{ font-weight:900; font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1; letter-spacing:-.01em; color:#fff; text-transform:uppercase; }
.cta-band .btn{ position:relative; z-index:1; flex-shrink:0; }
.cd__note{ margin-top:1.4rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--bone-faint); }

/* Reveal */
.cd__title,.flip-unit,.cd__inner .btn,.cd__note{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.cd.in .cd__title{ opacity:1; transform:none; }
.cd.in .cd__clock .flip-unit{ opacity:1; transform:none; }
.cd.in .cd__clock .flip-unit:nth-of-type(1){ transition-delay:.12s; }
.cd.in .cd__clock .flip-unit:nth-of-type(2){ transition-delay:.20s; }
.cd.in .cd__clock .flip-unit:nth-of-type(3){ transition-delay:.28s; }
.cd.in .cd__clock .flip-unit:nth-of-type(4){ transition-delay:.36s; }
.cd.in .cd__inner .btn{ opacity:1; transform:none; transition-delay:.46s; }
.cd.in .cd__note{ opacity:1; transform:none; transition-delay:.56s; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .nav{ display:none; } .header__actions .btn--ticket{ display:none; } .nav-toggle{ display:flex; }
  .header__actions{ margin-left:auto; }   /* Hamburger nach rechts */
  .hero__inner{ padding-top:calc(var(--header-h) + 1.4rem); }
  .hero__content{ align-self:stretch; width:100%; max-width:100%; margin-left:0; }
  .cd, .section, .site-footer{ background-attachment:scroll; }   /* iOS-Fixed-Bug umgehen */
  .hero__logo{ width:100%; }
  .hero__logo img{ width:min(90vw,460px); display:block; margin-inline:auto; }
  .hero__tagline{ font-size:1rem; white-space:normal; }
  .hero__cta{ flex-direction:column; align-items:stretch; } .hero__cta .btn{ justify-content:center; } .spot{ justify-content:center; margin-top:.3rem; }
  .cd__clock{ gap:.3rem; justify-content:space-between; width:100%; } .flip{ min-width:0; flex:1; } .flip__colon{ display:none; }
  .cta-band{ flex-direction:column; align-items:flex-start; gap:1.4rem; } .cta-band .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .hero__logo{ opacity:1; transform:none; } .hero__logo img{ filter:drop-shadow(0 18px 44px rgba(0,0,0,.75)); }
  .cd__title,.flip-unit,.flip__colon,.cta-band,.cd__note,.cd__ghost{ opacity:1; transform:none; }
  .hero__video{ display:none; } .hero{ background:#0a0a0c url("../img/hero-poster.jpg") center/cover; }
  .cd__video{ display:none; }
}

/* ============================================================
   POLISH — Motion-Choreografie + Feinschliff
   ============================================================ */
/* Header gleitet beim Laden rein */
.site-header{ animation:hdrIn .8s var(--ease) both; }
@keyframes hdrIn{ from{ transform:translateY(-100%); } to{ transform:none; } }

/* Hero-Video: Bewegung + Grade sind im Remotion-Loop eingebacken — kein CSS-Ken-Burns */

/* Stärkere cinematische Rand-Vignette */
.hero__veil{ box-shadow:inset 0 0 220px 50px rgba(0,0,0,.6); }

/* Hero-Inhalt gestaffelt einblenden (choreografiert mit dem Logo-Drop) */
.hero__date{ animation:heroRise .9s var(--ease) .55s both; }
.hero__tagline{ animation:heroRise .9s var(--ease) .68s both; }
.hero__cta{ animation:heroRise .9s var(--ease) .82s both; }
.hero__note{ animation:heroRise .9s var(--ease) .96s both; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* CTA-Band: durchlaufender Licht-Sweep */
.cta-band::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%);
  transform:translateX(-120%); animation:sweep 6s ease-in-out 1.6s infinite; }
@keyframes sweep{ 0%{ transform:translateX(-120%); } 55%,100%{ transform:translateX(120%); } }

/* Radiospot pulsiert beim Abspielen */
.spot.is-playing .spot__icon{ animation:spotPulse 1.5s ease-in-out infinite; }
@keyframes spotPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(215,40,31,.5); } 50%{ box-shadow:0 0 0 7px rgba(215,40,31,0); } }

/* Scroll-Progress-Leiste oben */
.scrollbar{ position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--red),var(--red-bright)); box-shadow:0 0 12px rgba(215,40,31,.6); }

/* feinere Interaktionen */
.nav a:hover{ transform:translateY(-1px); }
.btn:active{ transform:scale(.98); }
.flip{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.flip:hover{ transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.6), 0 16px 30px -16px #000; }

@media (prefers-reduced-motion:reduce){
  .site-header,.hero__video,.hero__date,.hero__tagline,.hero__cta,.hero__note,.cta-band::after,.spot.is-playing .spot__icon{ animation:none !important; }
  .hero__date,.hero__tagline,.hero__cta,.hero__note{ opacity:1; transform:none; }
}

.scroller{ display:none; }

/* ============================================================
   CONTENT-SEKTIONEN — Line-up · Partner · Infos · Footer
   Liegen im Desktop-Modus ÜBER der fixierten Würfel-Bühne
   (z-index:2) und scrollen über den fertig gedrehten Würfel.
   ============================================================ */
.section{ position:relative; background:#0b0b0d; padding:clamp(4rem,10vh,7.5rem) var(--pad); scroll-margin-top:var(--header-h); }
.section + .section{ border-top:0; }
@media (min-width:761px){ .section{ z-index:2; } }
.section__inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; }

/* ---------- Zerkratzter Beton (Wacken-Look) ---------- */
/* Flecken/Verlauf-Schicht + Vignette */
.section::before, .site-footer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(115% 72% at 16% 0%, rgba(150,150,168,.055), transparent 56%),
    radial-gradient(125% 85% at 88% 100%, rgba(0,0,0,.6), transparent 60%),
    radial-gradient(70% 60% at 56% 46%, rgba(118,118,140,.045), transparent 66%);
}
/* Kratzer (zwei Winkel) + feines Beton-Korn */
.section::after, .site-footer::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(102deg, rgba(236,232,223,.10) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-9deg, rgba(0,0,0,.6) 0 1px, transparent 1px 13px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:auto, auto, 170px 170px;
}
.section__head{ max-width:760px; margin-bottom:clamp(2.4rem,5vh,3.6rem); }
.section__kick{ display:none; }   /* Eyebrows global entfernt (AI-Tell) */
.section__title{ font-weight:900; line-height:.9; font-size:clamp(2.2rem,5.5vw,4.4rem); letter-spacing:-.02em; text-transform:uppercase; }
.section__title em{ font-style:normal; color:#fff; position:relative; isolation:isolate; padding:0 .12em; }
.section__title em::before{ display:none; }   /* Highlight-Block raus (monochrom) */
.section__lead{ margin-top:1.4rem; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.45; color:var(--bone-dim); max-width:62ch; }

/* ---------- Line-up ---------- */
.lineup__days{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.day{ background:var(--ink); padding:clamp(1.4rem,2.6vw,2.2rem); transition:background .3s var(--ease); }
.day:hover{ background:#0d0d10; }
.day__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:1rem; margin-bottom:1.3rem; border-bottom:2px solid var(--red); }
.day__no{ font-weight:900; font-size:clamp(1.7rem,3vw,2.3rem); line-height:1; text-transform:uppercase; letter-spacing:-.02em; }
.day__date{ font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; color:var(--bone-dim); text-transform:uppercase; }
.day__acts{ list-style:none; display:flex; flex-direction:column; }
.act{ font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--bone-faint); text-transform:uppercase; padding:.65rem 0; border-bottom:1px solid var(--line); }
.act:last-child{ border-bottom:0; }
.act--head{ font-family:var(--sans); font-weight:900; font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.01em; color:var(--bone); border-bottom-color:rgba(215,40,31,.6); padding-bottom:.8rem; margin-bottom:.2rem; }
.act--more{ color:var(--red); letter-spacing:.1em; }
.lineup__note{ margin-top:1.6rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--bone-faint); }

/* ---------- Partner / Sponsoren ---------- */
.partners__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:clamp(2rem,4vh,3rem); }
.partner{ background:var(--ink); display:grid; place-items:center; min-height:124px; padding:1.4rem; text-align:center; font-family:var(--mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-faint); transition:color .25s var(--ease), background .25s var(--ease); }
.partner--lead{ color:var(--bone); font-family:var(--sans); font-weight:900; font-size:1.3rem; letter-spacing:.02em; }
.partner--slot{ color:var(--bone-faint); }
a.partner:hover{ color:var(--red-bright); background:#0d0d10; }
.partners__cta{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--line); background:#0c0c0f;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); }
.partners__cta h3{ font-weight:900; font-size:clamp(1.4rem,3vw,2rem); text-transform:uppercase; letter-spacing:-.01em; }
.partners__cta p{ color:var(--bone-dim); margin-top:.5rem; max-width:46ch; }

/* ---------- Infos ---------- */
.infos__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.info{ position:relative; background:var(--ink); padding:clamp(1.6rem,3vw,2.4rem); scroll-margin-top:var(--header-h); transition:background .3s var(--ease); }
.info:hover{ background:#0d0d10; }
.info__no{ font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.18em; color:var(--red); text-transform:uppercase; }
.info h3{ font-weight:900; font-size:clamp(1.3rem,2.4vw,1.8rem); text-transform:uppercase; margin:.5rem 0 1rem; letter-spacing:-.01em; }
.info p{ color:var(--bone-dim); margin-top:.8rem; max-width:50ch; }
.info dl{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.2rem; font-size:.92rem; }
.info dt{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-faint); padding-top:.2em; }
.info dd{ color:var(--bone); }
.info strong{ color:var(--bone); font-weight:900; }
.info__cta{ margin-top:1.4rem; }

/* ---------- Footer ---------- */
.site-footer{ position:relative; background:#070708; border-top:2px solid var(--red); padding:clamp(3rem,7vh,5rem) var(--pad) 2rem; }
@media (min-width:761px){ .site-footer{ z-index:2; } }
.footer__inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.4rem; }
.footer__brand .brand__name{ font-weight:900; font-size:1.5rem; letter-spacing:-.01em; text-transform:uppercase; color:var(--bone); display:block; }
.footer__brand .brand__tag{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--red); margin-top:4px; }
.footer__claim{ margin-top:1rem; color:var(--bone-dim); max-width:34ch; line-height:1.45; }
.footer__pres{ margin-top:1rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--bone-faint); }
.footer__col h4{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:1rem; }
.footer__col a{ display:block; color:var(--bone-dim); padding:.32rem 0; font-size:.9rem; transition:color .2s var(--ease), transform .2s var(--ease); }
.footer__col a:hover{ color:var(--bone); transform:translateX(3px); }
.footer__bottom{ position:relative; z-index:1; max-width:var(--maxw); margin:clamp(2.4rem,5vh,3.5rem) auto 0; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--bone-faint); }

/* ---------- Responsive (Content-Sektionen) ---------- */
@media (max-width:760px){
  .lineup__days{ grid-template-columns:1fr; }
  .infos__grid{ grid-template-columns:1fr; }
  .partners__cta{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .partners__cta .btn{ width:100%; justify-content:center; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:1.8rem; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__bottom{ flex-direction:column; gap:.4rem; }
}
@media (max-width:440px){ .footer__inner{ grid-template-columns:1fr; } }

/* ============================================================
   METAL-HEADLINES — Viper Fangs (spitz/zackig, lokal, free) auf den
   großen Headlines. Body, Labels, Nav, Buttons & Flip-Ziffern bleiben
   lesbar (Archivo/Mono).
   ============================================================ */
.hero__date,
.cd__title,
.cta-band__title,
.section__title,
.day__no,
.act--head,
.info h3,
.partners__cta h3,
.footer__brand .brand__name{
  font-family:var(--metal); font-weight:600; letter-spacing:.01em; line-height:1.1;
}
/* gnarly Glyphen brauchen etwas Luft, nicht beschneiden */
.hero__date{ line-height:1; }
/* "Juli 2027" erbt jetzt Evora + volle Größe (eine Reihe mit 02—04) */
.cta-band__title{ line-height:1.05; }
/* der rote Schräg-Block hinter Headline-Wörtern etwas tiefer setzen (Metal-Glyphen sind höher) */
.cd__title em,.section__title em{ padding:0 .14em; }

/* ============================================================
   STEIN-HINTERGRUND ab Countdown (spfbackground.png, eigenes AI-Bild)
   ============================================================ */
.cd, .section, .site-footer{ background:transparent; }   /* durchgehende body-Leinwand, keine Pro-Sektion-Fläche */
.section::before, .section::after, .site-footer::before, .site-footer::after, .cd::before{ display:none; }   /* Pro-Sektion-Vignetten/Texturen raus */
.cd__video{ opacity:.5; }                                 /* Stein scheint durch das Countdown-Video */
.cd__veil{ background:linear-gradient(180deg, rgba(10,10,12,.5) 0%, rgba(10,10,12,.7) 60%, rgba(10,10,12,.82) 100%); }

/* ============================================================
   LINE-UP als Festival-Bill (Plakat-Typografie, tiered nach Billing)
   ============================================================ */
.bill{ max-width:1180px; margin:clamp(2rem,5vh,3.5rem) auto 0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.6em; }
.bill p{ font-family:var(--metal); font-weight:700; text-transform:uppercase; line-height:1; color:var(--bone); margin:0; }
.bill__head{ font-size:clamp(3rem,10vw,8rem); letter-spacing:-.01em; }   /* der eine große Headliner */
.bill__rest{ font-size:clamp(1.15rem,2.9vw,2.2rem); line-height:1.18; max-width:58ch; }  /* alle anderen, gleich groß */
.bill .dot{ font-style:normal; color:var(--red); padding:0 .12em; }

/* Line-up-Überschrift = nur „Lineup" im Viper-Fangs-Font */
.section__title--viper{ font-family:"Viper Fangs", var(--metal); font-weight:400; letter-spacing:.02em; }

/* ============================================================
   REDESIGN 2026-06-03 — monochrom, frei (kein Grid), Line-up-Look.
   Hero/Line-up/Hintergrund bleiben; Countdown/Partner/Infos/Footer neu.
   ============================================================ */

/* Video: nur ganz leichte Farbe (überwiegend Graustufe) */
.hero__video{ filter:grayscale(1) contrast(1.1) brightness(.88); }
.cd__video{ filter:grayscale(.92) contrast(1.1) brightness(.55); }

/* Scroll-Progress monochrom */
.scrollbar{ background:var(--bone); box-shadow:0 0 10px rgba(236,232,223,.35); }

/* ---------- COUNTDOWN neu (saubere Großziffern, keine Metallkarten) ---------- */
.cd{ border-top:0; text-align:center; }
.cd__inner{ display:flex; flex-direction:column; align-items:center; gap:clamp(1.6rem,4vh,2.8rem); }
.cd__title{ font-size:clamp(1.9rem,5.2vw,3.8rem); letter-spacing:.01em; color:var(--bone); margin:0; }
.cd__clock{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(1.4rem,6vw,5rem); flex-wrap:nowrap; }
.flip-unit{ display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.cd__clock .flip{ background:none; border:0; box-shadow:none; min-width:0; padding:0; perspective:none; clip-path:none; display:block; }
.cd__clock .flip::before, .cd__clock .flip::after{ display:none; }
.cd__clock .flip__num{ font-family:var(--metal); font-weight:700; font-size:clamp(2.6rem,9.5vw,7.5rem); line-height:.9; color:var(--accent); letter-spacing:0; text-shadow:0 4px 30px rgba(215,40,31,.35); }
.cd__clock .flip.is-flip .flip__num{ animation:cdFade .45s var(--ease); }
@keyframes cdFade{ 0%{ opacity:.25; } 100%{ opacity:1; } }
.cd__clock .flip__lab{ font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-faint); }
.cd__clock .flip__colon{ display:none; }
.cd__note{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; color:var(--bone-faint); margin:0; }
.cd__ghost{ -webkit-text-stroke:1.5px rgba(236,232,223,.045); }

/* ---------- PARTNER neu (freie Logo-Reihe, keine Boxen) ---------- */
.partners__pres{ text-align:center; font-family:var(--mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim); margin:0 0 clamp(2.2rem,4.5vh,3.2rem); }
.plogos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(1.8rem,4vw,3.4rem) clamp(2.4rem,6vw,5.5rem); max-width:1000px; margin:0 auto; }
.plogo{ font-family:var(--metal); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.15rem,2.5vw,2rem); color:var(--bone-faint); transition:color .25s var(--ease), opacity .25s var(--ease); }
.plogo--lead{ color:var(--bone); display:inline-flex; align-items:center; }
.plogo--lead img{ height:clamp(34px,4vw,50px); width:auto; display:block; border-radius:7px;
  transition:transform .25s var(--ease); }
.plogo--lead:hover img{ transform:scale(1.05); }
.plogo:hover{ color:var(--bone); }
.partners__line{ text-align:center; margin:clamp(2.6rem,5.5vh,4rem) 0 0; font-family:var(--mono);
  font-size:.82rem; letter-spacing:.06em; color:var(--bone-dim); }

/* ---------- INFOS neu (editoriale Zeilen-Liste, kein Card-Grid) ---------- */
.info-list{ max-width:960px; margin:clamp(1.4rem,4vh,2.4rem) auto 0; }
.info-row{ display:grid; grid-template-columns:minmax(170px,250px) 1fr; gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.4rem,3.4vh,2.4rem) 0; border-top:1px solid var(--line); align-items:baseline; scroll-margin-top:var(--header-h); }
.info-row:last-child{ border-bottom:1px solid var(--line); }
.info-row__k{ font-family:var(--metal); font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.3rem,2.7vw,2.05rem); color:var(--bone); }
.info-row__v{ margin:0; color:var(--bone-dim); font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.6; }
.info-row__v strong{ color:var(--bone); font-weight:700; }
@media (max-width:680px){ .info-row{ grid-template-columns:1fr; gap:.55rem; } }

/* ---------- FOOTER neu (minimal, eine Spalte) ---------- */
.site-footer{ border-top:0; text-align:center; }
.footer__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:.7rem; max-width:var(--maxw); margin:0 auto; }
.footer__brand{ font-family:var(--metal); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1.3rem,3vw,2rem); color:var(--bone); }
.footer__pres{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--bone-faint); margin:0; }
.footer__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.6rem; margin:.8rem 0 0; }
.footer__links a{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bone-dim); transition:color .2s var(--ease); }
.footer__links a:hover{ color:var(--bone); }
.footer__base{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.3rem 1.6rem; width:100%; max-width:760px;
  margin:clamp(1.6rem,3.5vh,2.4rem) auto 0; padding-top:1.3rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--bone-faint); }
.footer__base .credit-link{ color:var(--bone-dim); text-decoration:none; border-bottom:1px solid rgba(236,232,223,.28); transition:color .2s var(--ease), border-color .2s var(--ease); }
.footer__base .credit-link:hover{ color:var(--accent); border-color:var(--accent); }
@media (max-width:560px){ .footer__base{ justify-content:center; text-align:center; } }

/* Countdown-Video vertikal gespiegelt */
.cd__video{ transform:scaleY(-1); }

/* ---------- Ticket-Button pulsiert dezent (Hero + Countdown) ---------- */
@keyframes btnPulse{
  0%,100%{ box-shadow:0 10px 24px -16px rgba(0,0,0,.8), 0 0 0 0 rgba(215,40,31,.55); }
  60%{ box-shadow:0 10px 24px -16px rgba(0,0,0,.8), 0 0 0 9px rgba(215,40,31,0); }
}
.hero__cta .btn--primary, .cd__inner .btn--primary{ animation:btnPulse 3s ease-out infinite; }
.hero__cta .btn--primary:hover, .cd__inner .btn--primary:hover{ animation:none; }

/* ---------- Scroll-Reveal (sanftes Fade-Up beim Reinscrollen) ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .hero__cta .btn--primary, .cd__inner .btn--primary{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   COUNTDOWN — eigener dark-ambient Hintergrund: monochromer
   Rauch + Lichtstrahlen (statt mp4), Overlay über der Leinwand.
   ============================================================ */
.cd__ambient{ position:absolute; inset:0; z-index:-3; overflow:hidden; pointer-events:none; }
.cd__smoke{ position:absolute; border-radius:50%; filter:blur(72px); mix-blend-mode:screen; will-change:transform,opacity; }
.cd__smoke{ width:62vw; height:62vw; left:5%; top:12%;
  background:radial-gradient(circle, rgba(192,198,208,.30), transparent 68%); animation:cdSmoke1 30s ease-in-out infinite alternate; }
.cd__smoke--2{ width:48vw; height:48vw; left:52%; top:32%;
  background:radial-gradient(circle, rgba(150,156,170,.24), transparent 70%); animation:cdSmoke2 38s ease-in-out infinite alternate; }
.cd__smoke--3{ width:40vw; height:40vw; left:28%; top:46%;
  background:radial-gradient(circle, rgba(118,124,140,.18), transparent 72%); animation:cdSmoke3 44s ease-in-out infinite alternate; }
@keyframes cdSmoke1{ 0%{ transform:translate(-6%,2%) scale(1); opacity:.55; } 100%{ transform:translate(14%,-8%) scale(1.25); opacity:.9; } }
@keyframes cdSmoke2{ 0%{ transform:translate(8%,4%) scale(1.1); opacity:.5; } 100%{ transform:translate(-12%,-6%) scale(.95); opacity:.85; } }
@keyframes cdSmoke3{ 0%{ transform:translate(0,6%) scale(.95); opacity:.4; } 100%{ transform:translate(-8%,-4%) scale(1.15); opacity:.72; } }
.cd__beam{ position:absolute; top:-25%; height:150%; width:9vw; filter:blur(11px); mix-blend-mode:screen; will-change:transform,opacity;
  background:linear-gradient(to bottom, transparent, rgba(232,238,246,.13) 46%, rgba(232,238,246,.17) 54%, transparent); }
.cd__beam{ left:23%; animation:cdBeam1 16s ease-in-out infinite alternate; }
.cd__beam--2{ left:53%; width:5vw; animation:cdBeam2 21s ease-in-out infinite alternate; }
.cd__beam--3{ left:74%; width:6.5vw; animation:cdBeam3 26s ease-in-out infinite alternate; }
@keyframes cdBeam1{ 0%{ transform:rotate(15deg) translateX(-30%); opacity:.5; } 100%{ transform:rotate(15deg) translateX(25%); opacity:.95; } }
@keyframes cdBeam2{ 0%{ transform:rotate(-11deg) translateX(20%); opacity:.4; } 100%{ transform:rotate(-11deg) translateX(-20%); opacity:.85; } }
@keyframes cdBeam3{ 0%{ transform:rotate(8deg) translateX(-15%); opacity:.35; } 100%{ transform:rotate(8deg) translateX(25%); opacity:.72; } }
@media (prefers-reduced-motion:reduce){ .cd__smoke, .cd__beam{ animation:none !important; } }

/* ---------- impeccable Feinschliff ---------- */
.section__title, .cd__title, .bill__head, .bill__rest, .info-row__k{ text-wrap:balance; }
.btn:active{ transform:translateY(0) scale(.985); }
.bill__rest.reveal{ transition-delay:.14s; }                 /* Headliner zuerst, Rest leicht versetzt */
.info-row{ transition:border-color .3s var(--ease); }
.info-row:hover{ border-top-color:rgba(236,232,223,.34); }
.info-row:hover .info-row__k{ color:#fff; transition:color .3s var(--ease); }
.plogo{ cursor:default; }
.cd__inner{ position:relative; z-index:1; }                   /* Inhalt klar über dem Ambient */

/* ---------- Sanfte Übergänge Hero → Countdown → Line-up ---------- */
/* Rauch/Strahlen blenden an Ober- und Unterkante aus → kein harter Schnitt zu Hero/Line-up */
.cd__ambient{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 17%, #000 83%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 17%, #000 83%, transparent 100%);
}
/* Countdown-Oberkante übernimmt das Dunkel des Hero-Endes und löst sich nach unten auf */
.cd{ position:relative; }
.cd::after{ content:""; position:absolute; left:0; right:0; top:0; height:clamp(150px,24vh,320px); z-index:-2; pointer-events:none;
  background:linear-gradient(to bottom, #0a0a0c 0%, rgba(10,10,12,0) 100%); }
/* Hero-Ende noch eine Spur sanfter ausklingen */
.hero__veil{ background:
  linear-gradient(180deg, rgba(10,10,12,.30) 0%, rgba(10,10,12,.12) 30%, rgba(10,10,12,.62) 68%, rgba(10,10,12,.95) 92%, #0a0a0c 100%),
  linear-gradient(90deg, rgba(10,10,12,.62) 0%, rgba(10,10,12,0) 50%); }

/* ============================================================
   ALLE ÜBERSCHRIFTEN — Evora (Brush), größer, verspielt Rot/Weiß,
   zentriert mit Ambient-Glow (Countdown-Stimmung über alle Sektionen).
   ============================================================ */
.section__title, .section__title--viper, .cd__title{
  font-family:"Bebas Neue", var(--metal) !important; font-weight:400; line-height:1.02; letter-spacing:.03em;
  color:#fff; text-shadow:0 8px 30px rgba(0,0,0,.55);
  text-wrap:balance;
}
.section__title{ font-size:clamp(4.2rem,12vw,9rem); position:relative; z-index:1; }
.cd__title{ font-size:clamp(3.4rem,9.5vw,7.4rem); position:relative; z-index:1; }
.footer__brand{ font-size:clamp(2.2rem,5.5vw,3.6rem); text-shadow:0 6px 24px rgba(0,0,0,.5); }

/* Überschriften zentriert + weicher roter Ambient-Glow dahinter */
.section__head{ text-align:center; max-width:none; position:relative; }
.section__head::before{ content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(76vw,820px); height:clamp(200px,32vh,400px); z-index:0; pointer-events:none;
  background:radial-gradient(58% 60% at 50% 50%, rgba(215,40,31,.16), rgba(215,40,31,.04) 55%, transparent 75%);
  filter:blur(30px); }
.cd__inner{ position:relative; }

/* Hero-Datum „02 — 04 Juli 2027" in Bebas Neue, ohne Glow */
.hero__date{ font-family:"Bebas Neue", var(--metal); color:#fff; letter-spacing:.02em; }
.hero__date i{ color:var(--accent); }   /* Bindestrich rot */

/* ============================================================
   Sektionen ab Countdown klarer getrennt + Countdown-Politur
   ============================================================ */
.section{ padding-top:clamp(5rem,12vh,9rem); padding-bottom:clamp(5rem,12vh,9rem); }
.cd{ padding-top:clamp(5rem,12vh,9rem); padding-bottom:clamp(5rem,12vh,9rem); }
/* kurzer roter Trenner UNTER jeder Überschrift = klare Sektions-Marke */
.section__title::after, .cd__title::after{ content:""; display:block; width:54px; height:3px; border-radius:2px;
  margin:clamp(1.1rem,2.6vh,1.9rem) auto 0; background:var(--accent); }
/* Countdown: feine Trenner zwischen den Ziffern-Gruppen */
.cd__clock{ gap:clamp(1.3rem,5vw,3.8rem); }
.cd__clock .flip-unit{ position:relative; }
.cd__clock .flip-unit:not(:last-child)::after{ content:""; position:absolute; top:12%; height:42%; width:1px;
  right:calc(-1 * clamp(.65rem,2.5vw,1.9rem)); background:rgba(236,232,223,.16); }

/* Footer-Brand „Stone Park Festival" wie der Hero-Titel (eine Zeile, Logo-Farben) */
.footer__brand{ font-family:"Metal Lord", var(--metal) !important; font-weight:400; text-transform:uppercase;
  letter-spacing:.01em; white-space:nowrap; line-height:.9; font-size:clamp(1.4rem,4.4vw,2.8rem);
  color:#d0cdc4; text-shadow:0 4px 18px rgba(0,0,0,.5); }
.footer__brand span{ display:inline; }
.footer__brand span:nth-child(1){ color:#d0cdc4; }   /* Stone grau */
.footer__brand span:nth-child(2){ color:#6e4a1f; }   /* Park dunkelbraun */
.footer__brand .hl{ color:var(--accent); }            /* Festival rot */

/* Hero-Lock-Text unter den Buttons — Metal Lord */
.hero__ctawrap{ width:100%; }
.hero__teaser{ margin-top:.6rem; font-family:var(--mono); font-weight:400;
  font-size:clamp(.72rem,1vw,.8rem); letter-spacing:.08em; color:var(--bone-faint); }
.hero__teaser strong{ color:var(--accent); font-weight:700; }
/* Desktop: Buttons+Teaser als schmaler zentrierter Block → Teaser startet
   linksbündig am „Tickets sichern"-Button und sitzt eng darunter */
@media (min-width:761px){
  .hero__ctawrap{ width:fit-content; max-width:100%; margin-inline:auto; }
  .hero__ctawrap .hero__date{ justify-content:flex-start; }
  .hero__ctawrap .hero__cta{ justify-content:flex-start; margin-bottom:0; }
  .hero__teaser{ text-align:left; width:100%; margin-top:.5rem; }
}

/* Hero-Buttons größer + Ticket-Button dauerhaft (auch bei Hover) pulsierend */
.hero__cta .btn{ font-size:1.08rem; padding:23px 50px; }
.hero__cta .spot{ font-size:.86rem; }
.hero__cta .spot__icon{ width:38px; height:38px; }
@keyframes btnPulse{
  0%{ box-shadow:0 10px 26px -16px rgba(0,0,0,.8), 0 0 0 0 rgba(215,40,31,.62); }
  70%,100%{ box-shadow:0 10px 26px -16px rgba(0,0,0,.8), 0 0 0 16px rgba(215,40,31,0); }
}
.hero__cta .btn--primary, .cd__inner .btn--primary{ animation:btnPulse 2.2s ease-out infinite !important; }

/* Monochrome Lights aus dem Countdown reichen in den Hero (von unten bis Button-Höhe) */
.hero__ambient{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55) 56%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55) 56%, #000 100%); }
.hero__ambient .cd__smoke--2{ top:50%; left:50%; }
.hero__ambient .cd__smoke--3{ top:62%; left:24%; }
@media (prefers-reduced-motion:reduce){ .hero__ambient .cd__smoke, .hero__ambient .cd__beam{ animation:none !important; } }

/* ---------- Text-Fly-in (Hero gestaffelt beim Laden) ---------- */
@keyframes flyIn{ 0%{ opacity:0; transform:translateY(48px) scale(.95); } 100%{ opacity:1; transform:none; } }
.hero__logo{ animation:flyIn 1s var(--ease) .15s both; }
.hero__date{ animation:flyIn .9s var(--ease) .45s both; }
.hero__cta{ animation:flyIn .9s var(--ease) .68s both; }
.hero__teaser{ animation:flyIn .9s var(--ease) .9s both; }
/* Scroll-Reveals etwas „fliegender" */
.reveal{ transform:translateY(44px); }
@media (prefers-reduced-motion:reduce){
  .hero__logo,.hero__date,.hero__cta,.hero__teaser{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* Logo fällt von oben aufs Datum und bouncet sanft aus */
@keyframes logoDrop{
  0%{ opacity:0; transform:translateY(-115vh); animation-timing-function:cubic-bezier(.5,0,.9,.35); }
  6%{ opacity:1; }
  50%{ transform:translateY(0); animation-timing-function:cubic-bezier(.32,1.45,.5,1); }
  64%{ transform:translateY(-26px); animation-timing-function:cubic-bezier(.4,0,.6,1); }
  77%{ transform:translateY(0); }
  86%{ transform:translateY(-11px); }
  94%{ transform:translateY(0); }
  100%{ transform:translateY(0); opacity:1; }
}
.hero__logo{ animation:logoDrop 1.6s var(--ease) .1s both !important; }
@media (prefers-reduced-motion:reduce){ .hero__logo{ animation:none !important; opacity:1 !important; transform:none !important; } }

/* ============================================================
   3D-CUBE Hero ↔ Countdown  (nur Desktop, nur bei Motion-OK)
   Mobile / reduced-motion: stage/cube sind inerte Block-Divs,
   .scroller bleibt aus → ganz normales Scrollen + Text-Fly-in.
   ============================================================ */
.scroller{ display:none; }

@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  /* Bühne: fixiert, ein Viewport, Perspektive */
  .stage{ position:fixed; inset:0; overflow:hidden; z-index:1;
    perspective:1400px; perspective-origin:50% 46%; }
  .cube{ position:absolute; inset:0; transform-style:preserve-3d;
    transform:translateZ(-50vh) rotateX(0deg); will-change:transform; }

  /* Beide Würfel-Flächen = exakt ein Viewport */
  .hero, .cd{ position:absolute; inset:0; min-height:0; height:100vh;
    overflow:hidden; backface-visibility:hidden; }
  .hero{ transform:rotateX(0deg) translateZ(50vh); }
  .cd{ transform:rotateX(-90deg) translateZ(50vh);
    display:flex; align-items:center; justify-content:center;
    padding-top:clamp(2rem,5vh,3.5rem); padding-bottom:clamp(2rem,5vh,3.5rem);
    background:#0a0a0c url("../img/spfbackground1.png") center top / cover; }
  .cd__inner{ width:100%; }

  /* Scroll-Spacer treibt die Drehung an */
  .scroller{ display:block; height:240vh; }

  /* Folge-Sektionen müssen die fixierte Bühne überdecken → deckend, drüber */
  .section, .site-footer{ position:relative; z-index:2;
    background:#0a0a0c url("../img/spfbackground1.png") center top / cover fixed; }
  /* erste Sektion nach dem Würfel: weicher Anschluss von oben */
  #lineup{ box-shadow:0 -40px 60px -20px #0a0a0c; }
}


/* Ruhige Leerzone zwischen Partner und Infos — Platz für einen späteren Riss,
   damit er ohne Text-Überlappung „atmen" kann */
#partner{ padding-bottom:clamp(10rem,27vh,20rem); }
#infos{ padding-top:clamp(10rem,27vh,20rem); }

/* Veranstalter-Credit FR-EVENTS (nach den Partnern), Logo = gleiche Größe wie RADIO-21-Logo */
.partners__org{ display:flex; flex-direction:column; align-items:center; gap:.85rem; margin:0 0 clamp(2.6rem,5.5vh,3.8rem); }
.partners__org-lbl{ font-family:var(--mono); font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); }
.partners__orglogo{ height:clamp(58px,7vw,92px); width:auto; display:block; mix-blend-mode:screen; }

/* Klauen-Riss (riss.png) – zentriert in der ruhigen Zone zwischen Partner und Infos */
#infos{ position:relative; }
#infos .rip{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  width:min(860px,90vw); z-index:6; pointer-events:none; }
#infos .rip__img{ display:block; width:100%; height:auto;
  -webkit-mask-image:radial-gradient(ellipse 78% 60% at 50% 50%, #000 44%, transparent 80%);
  mask-image:radial-gradient(ellipse 78% 60% at 50% 50%, #000 44%, transparent 80%); }