/* ============================================================
   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:"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; }
/* Lokal gehostete Google-Fonts (DSGVO: kein CDN-Aufruf) — Archivo & Oswald sind Variable Fonts */
@font-face{ font-family:"Archivo"; src:url("../fonts/archivo-var.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Oswald"; src:url("../fonts/oswald-var.woff2") format("woff2"); font-weight:200 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Bebas Neue"; src:url("../fonts/bebasneue.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Space Mono"; src:url("../fonts/spacemono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Space Mono"; src:url("../fonts/spacemono-700.woff2") format("woff2"); font-weight:700; 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(82vw,420px); 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(70vw,300px); 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; }

/* ---------- Entstehung / Vorwort ---------- */
.vorwort__grid{ display:grid; grid-template-columns:1fr minmax(300px,380px); gap:clamp(2.2rem,5vw,4.5rem); align-items:center; }
.vorwort__body p{ font-size:clamp(1.02rem,1.55vw,1.2rem); line-height:1.78; color:var(--bone-dim); margin-bottom:1.15em; }
.vorwort__body p:last-child{ margin-bottom:0; }
.vorwort__lead{ color:var(--bone); }
.vorwort__q{ color:var(--bone); font-style:italic; }
.vorwort__widmung{ margin-top:1.6em; padding-top:1.4em; border-top:1px solid var(--line);
  color:var(--bone); font-size:clamp(1.04rem,1.6vw,1.24rem); }
.vorwort__widmung-note{ display:block; margin-top:.4em; color:var(--bone-dim);
  font-size:.86em; font-style:italic; }
.vorwort__media{ margin:0; position:relative; }
.vorwort__media img{ width:100%; display:block; border:1px solid var(--line);
  filter:grayscale(.3) contrast(1.04) brightness(.98);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%); }
.vorwort__media::after{ content:""; position:absolute; left:9px; top:9px; width:15px; height:15px;
  border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
@media (max-width:760px){
  .vorwort__grid{ grid-template-columns:1fr; gap:1.8rem; justify-items:center; }
  .vorwort__media{ max-width:380px; width:100%; margin-left:auto; margin-right:auto; }
}

/* ---------- Durchgehende Szene: EINE rote Glut sitzt auf der Naht Vorwort/Lineup ---------- */
.vorwort{ overflow:hidden; isolation:isolate; }
.vfx{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.vorwort .section__inner{ position:relative; z-index:2; }
/* untere Hälfte der Glut-Quelle (Mittelpunkt = Naht) */
.vfx__glow{ position:absolute; left:-10%; right:-10%; bottom:0; height:54%;
  background:radial-gradient(120% 96% at 50% 100%, rgba(215,40,31,.32), rgba(215,40,31,.10) 46%, transparent 74%);
  filter:blur(10px); }

/* obere Hälfte DERSELBEN Glut-Quelle – fließt ohne Bruch in die Lineup-Fläche weiter */
.lineup{ background:radial-gradient(120% 96% at 50% 0%, rgba(215,40,31,.32), rgba(215,40,31,.10) 46%, transparent 74%), #0b0b0d; }

/* „Gut zu wissen" (Infos) höher ziehen – weniger Deadspace oben */
.section.infos{ padding-top:clamp(.5rem,1.5vh,1.5rem); }

/* Lineup: Bandnamen nicht mitten im Namen umbrechen */
.bill__act{ white-space:nowrap; }

/* ---------- Tickets & Camping ---------- */
/* mehr Oberkanten-Abstand, damit der Titel NICHT in die überhängende Kralle (riss.png) läuft */
.section.tickets-camping{ padding-top:clamp(7rem,17vw,14rem); padding-bottom:clamp(1.5rem,3.5vh,3rem); }
.tkt-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tkt{ background:var(--ink); padding:clamp(1.5rem,2.6vw,2.2rem) 1.2rem; display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center; transition:background .3s var(--ease); text-decoration:none; color:inherit; cursor:pointer; }
.tkt:hover{ background:#0d0d10; }
.tkt__cta{ margin-top:.35rem; font-family:var(--mono); font-weight:700; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim); transition:color .3s var(--ease), transform .3s var(--ease); }
.tkt:hover .tkt__cta{ color:var(--accent-bright); transform:translateY(-1px); }
.tkt--feature .tkt__cta{ color:var(--accent-bright); }
.tkt__day, .tkt__tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); }
.tkt__price{ font-weight:900; font-size:clamp(2rem,4vw,2.9rem); line-height:1; letter-spacing:-.02em; color:var(--bone); }
.tkt__sub{ font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; color:var(--bone-faint); line-height:1.4; }
.tkt--feature{ background:#100c0d; box-shadow:inset 0 0 0 2px var(--accent); }
.tkt--feature .tkt__tag{ color:var(--accent-bright); }
.tkt--feature .tkt__price{ color:#fff; }
.tkt__eb{ align-self:center; font-family:var(--mono); font-weight:700; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-bright); border:1px solid var(--accent); padding:.34em .72em; line-height:1; }
.tc__note{ margin-top:1.2rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--bone-faint); }
.tc__note strong{ color:var(--bone); }
.tc__note--em{ font-size:.98rem; line-height:1.65; letter-spacing:.02em; color:var(--bone); }
.tc__note--em a{ color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; }

.tc__sub{ margin:clamp(2.8rem,5.5vh,4.2rem) 0 1.4rem; font-weight:900; font-size:clamp(1.3rem,2.6vw,1.9rem); text-transform:uppercase; letter-spacing:-.01em; padding-bottom:.55rem; border-bottom:2px solid var(--accent); }

.tc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tc-card{ background:var(--ink); padding:clamp(1.5rem,2.6vw,2.1rem); display:flex; flex-direction:column; gap:.45rem; transition:background .3s var(--ease); }
.tc-card:hover{ background:#0d0d10; }
.tc-card__price{ font-weight:900; font-size:clamp(1.7rem,3vw,2.3rem); line-height:1; color:#fff; }
.tc-card__k{ font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); }
.tc-card__v{ font-size:.92rem; color:var(--bone-dim); line-height:1.5; }

.tc-list{ list-style:none; display:flex; flex-direction:column; gap:.9rem; max-width:780px; }
.tc-list li{ position:relative; padding-left:1.4rem; color:var(--bone-dim); line-height:1.62; }
.tc-list li::before{ content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; background:var(--accent); }
.tc-list strong{ color:var(--bone); }

.tc-zones{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.tc-zone{ background:var(--ink); padding:clamp(1.6rem,3vw,2.4rem); transition:background .3s var(--ease); }
.tc-zone:hover{ background:#0d0d10; }
.tc-zone h4{ font-weight:900; font-size:clamp(1.1rem,2vw,1.45rem); text-transform:uppercase; letter-spacing:-.01em; margin-bottom:.7rem; }
.tc-zone p{ color:var(--bone-dim); line-height:1.62; }

.tc__outro{ margin-top:clamp(2.6rem,5.5vh,3.8rem); font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.7; color:var(--bone); max-width:780px; }
.tc__outro strong{ display:block; margin-top:.5rem; }

@media (max-width:760px){
  .tkt-grid{ grid-template-columns:1fr 1fr; }
  .tc-cards{ grid-template-columns:1fr; }
  .tc-zones{ grid-template-columns:1fr; }
}

/* Karten ab Tickets & Camping: transparenter Hintergrund, nur die Box (Rahmen) bleibt */
.tkt-grid, .tc-cards, .tc-zones{ background:none; border:0; gap:clamp(10px,1.3vw,16px); }
.tkt, .tc-card, .tc-zone{ background:transparent; border:1px solid var(--line); }
.tkt:hover, .tc-card:hover, .tc-zone:hover{ background:rgba(236,232,223,.05); border-color:rgba(236,232,223,.45); }
.tkt--feature{ background:transparent; }

/* ---------- 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__kicker{ font-family:var(--mono)!important; font-weight:700!important; text-transform:uppercase;
  font-size:.8rem; letter-spacing:.34em; color:var(--accent); margin-bottom:.1em; }
.bill__head{ font-size:clamp(2.6rem,8vw,6.4rem); letter-spacing:-.01em; }   /* der eine große Headliner */
.bill__head-sub{ display:block; font-size:.34em; letter-spacing:.04em; color:var(--bone-dim); margin-top:.35em; }
/* Bill: Lang+Kurz-Paare fließen zentriert & brechen frei um (organisch, nicht spalten-starr);
   der Trennpunkt sitzt INNERHALB des Paares -> taucht nie am Zeilenanfang/-ende auf */
.bill__rest{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:.45em .5em; max-width:none; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.25; margin-top:.7em!important; }
.bill__pair{ white-space:nowrap; }
.bill__pair .bill__act:first-child::after{ content:"·"; color:var(--accent); margin:0 .42em; font-weight:400; opacity:.9; }
/* Desktop: Trennpunkt auch ZWISCHEN den Paaren; JS markiert Zeilenenden (.is-lineend) -> dort kein Punkt */
@media(min-width:761px){
  .bill__rest > .bill__pair:not(.is-lineend)::after{ content:"·"; color:var(--accent); margin-left:.5em; font-weight:400; opacity:.9; }
}
.bill__more{ font-family:var(--mono)!important; font-weight:400!important; text-transform:uppercase;
  font-size:.82rem; letter-spacing:.18em; color:var(--bone-dim); margin-top:1.6em!important; }

/* 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); }
/* Freie Logo-Reihe (keine Boxen) — optisch auf gleiche Größe ausbalanciert */
.plogos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(1.6rem,3.6vw,3rem) clamp(2.2rem,5vw,4.6rem); max-width:1060px; margin:0 auto; }
.plogo{ display:inline-flex; align-items:center; justify-content:center; }
.plogo img{ height:clamp(64px,7.4vw,86px); width:auto; max-width:272px; object-fit:contain; display:block;
  transition:transform .25s var(--ease); }
.plogo:hover img{ transform:scale(1.05); }
/* weiße Wortmarken: voll sichtbar + dezenter Schatten */
.plogo--mono img{ filter:drop-shadow(0 2px 9px rgba(0,0,0,.5)); }
/* Marken-Karten mit eigenem Hintergrund: leicht abgerundet */
.plogo--card img{ height:clamp(58px,6.6vw,74px); border-radius:8px; box-shadow:0 8px 22px -16px rgba(0,0,0,.9); }
/* sehr breites Logo (Uncle Sams) per Breite begrenzen, damit es nicht dominiert */
.plogo--wide img{ height:auto; width:clamp(210px,24vw,290px); max-width:none; }
/* Cartoon-Illustration (Glücks-Körper) braucht mehr Höhe um lesbar zu sein — bleibt schmal */
.plogo--mascot img{ height:clamp(122px,13vw,150px); max-width:none; }
/* freier Platzhalter „Dein Logo" */
.plogo--ghost{ color:var(--bone-faint); border:1px dashed var(--line); border-radius:9px;
  padding:.55em 1.1em; font-family:var(--metal); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(.9rem,1.8vw,1.1rem); }
/* Call-to-Action „Partner werden?" — roter Glow-Button mit zeigenden Pfeilen */
.partners__join{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(.6rem,2vw,1.5rem); margin:clamp(2.6rem,5.5vh,4rem) 0 0; }
.btn--partner{ position:relative; background:var(--accent); color:#fff; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 0 30px -4px rgba(215,40,31,.55), 0 12px 30px -14px rgba(215,40,31,.7);
  animation:partnerGlow 2.6s ease-in-out infinite; }
.btn--partner>span{ position:relative; z-index:1; }
.btn--partner::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--partner:hover{ transform:translateY(-2px); animation:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 46px -2px rgba(255,59,46,.8), 0 18px 42px -12px rgba(215,40,31,.85); }
.btn--partner:hover::before{ transform:translateX(0); }
@keyframes partnerGlow{
  0%,100%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 0 22px -6px rgba(215,40,31,.45), 0 12px 30px -14px rgba(215,40,31,.6); }
  50%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 40px -2px rgba(255,59,46,.75), 0 14px 34px -12px rgba(215,40,31,.8); } }
/* Pfeile, die auf den Button zeigen */
.cta-aim{ display:inline-flex; align-items:center; gap:.18em; }
.cta-aim i{ width:.62em; height:.62em; font-size:clamp(1.4rem,3vw,2.1rem); border-top:.16em solid var(--accent);
  border-right:.16em solid var(--accent); display:block; opacity:.35; animation:aimPulse 1.5s ease-in-out infinite; }
.cta-aim--l i{ transform:rotate(45deg); }    /* zeigt nach rechts → Button */
.cta-aim--r i{ transform:rotate(-135deg); }  /* zeigt nach links → Button */
.cta-aim--l i:nth-child(1){ animation-delay:0s }   .cta-aim--l i:nth-child(2){ animation-delay:.18s } .cta-aim--l i:nth-child(3){ animation-delay:.36s }
.cta-aim--r i:nth-child(3){ animation-delay:0s }   .cta-aim--r i:nth-child(2){ animation-delay:.18s } .cta-aim--r i:nth-child(1){ animation-delay:.36s }
@keyframes aimPulse{ 0%,100%{ opacity:.22 } 50%{ opacity:.9 } }
@media (prefers-reduced-motion:reduce){ .btn--partner,.cta-aim i{ animation:none } }

/* ---------- 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 */
/* Ort mittig unter dem Datum — kleiner Mono-Tag mit Standort-Pin */
.hero__place{ display:flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(.7rem,1.4vw,.84rem); color:var(--bone-dim); margin:.1rem 0 1.15rem; }
.hero__pin{ color:var(--accent); flex:0 0 auto; transform:translateY(-.05em);
  filter:drop-shadow(0 0 6px rgba(215,40,31,.6)); }

/* ============================================================
   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; }
}
/* Kein Reinfallen, kein Pulsieren — Logo steht statisch bei 50% Farbsättigung */
.hero__logo{ animation:none !important; opacity:1 !important; transform:none !important; }
.hero__logo img{ animation:none !important; filter:saturate(.5) drop-shadow(0 16px 44px rgba(0,0,0,.7)); }

/* ============================================================
   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; }
.cd-cta-fixed{ display:none; }   /* nur im Desktop-Würfel-Modus aktiv (siehe Media-Query) */

@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%; }

  /* 3D-Hit-Test-Falle: die weggedrehte Würfelfläche überlagert in der
     Projektion weiterhin die Buttons der sichtbaren Fläche und fängt deren
     Klicks ab. Darum fängt immer nur die aktive Fläche Pointer-Events. */
  .hero{ pointer-events:auto; }
  .cd{ pointer-events:none; }
  .cube--cd .hero{ pointer-events:none; }
  .cube--cd .cd{ pointer-events:auto; }

  /* Der ORIGINAL-Countdown-Button bleibt unverändert sichtbar in der Würfelfläche.
     Da eine 3D-gedrehte Fläche technisch keine Klicks annimmt, liegt hier ein
     UNSICHTBARER, deckungsgleicher Klick-Fänger (gleiche Button-Maße) darüber, der
     die Klicks abfängt. Positionierung im Wrapper (kein Hover) = nichts springt.
     Nur aktiv, solange der Countdown im Bild ist (sonst würde der unsichtbare Fänger
     Klicks über anderen Sektionen abfangen). */
  .cd-cta-fixed{ display:block; position:fixed; top:0; left:0; width:0; height:0;
    z-index:5; visibility:hidden; pointer-events:none; }
  .cd-cta-fixed .btn{ width:100%; height:100%; padding:0; opacity:0;
    clip-path:none; pointer-events:none; }
  body.cd-active .cd-cta-fixed{ visibility:visible; }
  body.cd-active .cd-cta-fixed .btn{ pointer-events:auto; }

  /* 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; }

/* Klauen-Riss (riss.png) – zentriert in der ruhigen Zone zwischen Partner und Tickets */
#tickets .rip{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  width:min(860px,90vw); z-index:6; pointer-events:none; }
#tickets .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%); }
/* Intro-Satz als zentrierte Einzelspalte unter dem Titel */
.tickets-camping .section__lead, .infos .section__lead{ margin-left:auto; margin-right:auto; text-align:center; }
/* Symmetrische Abstände um die Kralle: Partner unten == Tickets oben (beide breiten-basiert wie riss.png) */
#partner{ padding-bottom:clamp(7rem,17vw,14rem); }

/* ============================================================
   Legal-Seiten (Impressum / Datenschutz) — Seitenstil, lesbare Prosa
   ============================================================ */
.legal{ max-width:840px; margin:0 auto;
  padding:calc(var(--header-h) + clamp(2.6rem,7vh,5rem)) var(--pad) clamp(4rem,10vh,7rem); }
.legal__kicker{ font-family:var(--mono); font-weight:700; text-transform:uppercase;
  letter-spacing:.28em; font-size:.76rem; color:var(--accent); margin-bottom:.9rem; }
.legal h1{ font-family:"Bebas Neue",var(--metal); font-weight:400; letter-spacing:.02em;
  font-size:clamp(2.6rem,7vw,4.6rem); line-height:1; color:#fff;
  margin-bottom:clamp(1.8rem,4vh,2.8rem);
  text-shadow:0 8px 30px rgba(0,0,0,.55), 0 0 26px rgba(215,40,31,.4); }
.legal h2{ font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.15rem,2.6vw,1.5rem); color:var(--bone);
  margin:clamp(2.2rem,5vh,3.2rem) 0 .85rem; padding-top:1.5rem; border-top:1px solid var(--line); }
/* lange Wörter / E-Mail-Adressen sicher umbrechen, damit nichts aus dem Viewport läuft */
.legal h1, .legal h2, .legal h3, .legal p, .legal li, .legal address, .legal a{
  overflow-wrap:anywhere; hyphens:auto; }
.legal h2:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.legal h3{ font-family:var(--sans); font-weight:700; font-size:1.02rem; color:var(--bone); margin:1.5rem 0 .45rem; }
.legal p, .legal li{ color:var(--bone-dim); line-height:1.72; font-size:1rem; }
.legal p{ margin:0 0 1rem; }
.legal ul{ margin:0 0 1.1rem; padding-left:1.25rem; }
.legal li{ margin:.32rem 0; }
.legal strong{ color:var(--bone); font-weight:700; }
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; transition:color .2s var(--ease); }
.legal a:hover{ color:var(--accent-bright); }
.legal address{ font-style:normal; color:var(--bone); line-height:1.75; }
.legal__back{ display:inline-flex; align-items:center; gap:.5em; margin-top:clamp(2.6rem,5vh,3.6rem);
  font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  font-size:.8rem; color:var(--bone); text-decoration:none; }
.legal__back::before{ content:"←"; color:var(--accent); }
.legal__back:hover{ color:var(--accent); }

/* ============================================================
   MOBILE-OVERRIDES — MUSS am Datei-Ende stehen, damit es die
   später definierten Basis-Regeln (Lineup/Partner/Headlines) gewinnt.
   ============================================================ */
@media (max-width:760px){
  /* Roter Headline-Glow auf Mobile wie Desktop (Text-Glow + stärkerer Ambient) */
  .section__title, .cd__title, .section__title--viper{
    text-shadow:0 8px 30px rgba(0,0,0,.55), 0 0 24px rgba(215,40,31,.6), 0 0 7px rgba(215,40,31,.5); }
  .section__head::before{
    background:radial-gradient(62% 64% at 50% 50%, rgba(215,40,31,.34), rgba(215,40,31,.09) 55%, transparent 75%); }

  /* Lineup mobil: Paare fließen zentriert, kleinere Schrift / engere Abstände */
  .bill{ width:100%; max-width:100%; }
  .bill__head{ font-size:clamp(2.1rem,11vw,3.1rem); }
  .bill__rest{ font-size:clamp(1rem,4.6vw,1.35rem); gap:.55em 1.1em; margin-top:1em!important; }
  .bill__pair .bill__act:first-child::after{ margin:0 .32em; }

  /* Partner-Logos kleiner — passen in den Viewport, brechen sauber um */
  .plogos{ gap:1.4rem 1.6rem; max-width:100%; }
  .plogo img{ height:clamp(30px,9vw,42px); width:auto; max-width:40vw; }
  .plogo--card img{ height:clamp(32px,9.5vw,44px); }
  .plogo--wide img{ width:min(46vw,165px); height:auto; max-width:none; }
  .plogo--mascot img{ height:clamp(72px,20vw,92px); max-width:none; }
  .plogo--ghost{ font-size:.82rem; }

  /* „Partner werden?"-Reihe: passt in den Viewport, Pfeile kompakter */
  .partners__join{ gap:.5rem; flex-wrap:nowrap; max-width:100%; }
  .cta-aim{ gap:.08em; } .cta-aim i{ font-size:.95rem; }
  .btn--partner{ font-size:.8rem; padding:16px 18px; white-space:nowrap; }
}

/* ============================================================
   BANDS-Unterseite (bands.html) — selbe Stein-Leinwand, Monochrom + Rot
   ============================================================ */
.bands-intro{ max-width:62ch; margin:0 auto; text-align:center; color:var(--bone-dim);
  font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.55; }

/* Headliner-Feature */
.band-feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,4vw,3.4rem); align-items:center;
  max-width:var(--maxw); margin:clamp(2.4rem,6vh,4.2rem) auto 0; }
.band-feature__media{ position:relative; aspect-ratio:4/3; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); }
.band-feature__media img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.82) contrast(1.05) brightness(.92);
  transition:filter .55s var(--ease), transform .6s var(--ease); }
.band-feature:hover .band-feature__media img{ filter:grayscale(0) contrast(1.04); transform:scale(1.03); }
.band-feature__media::after{ content:""; position:absolute; left:11px; top:11px; width:18px; height:18px;
  border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.band-feature__name{ font-family:"Bebas Neue",var(--metal); font-weight:400; line-height:.94; color:#fff;
  font-size:clamp(2.6rem,6vw,5rem); letter-spacing:.02em; margin:.55rem 0 .25rem;
  text-shadow:0 8px 30px rgba(0,0,0,.55); }
.band-feature__sub{ font-family:var(--mono); font-size:.76rem; letter-spacing:.08em;
  color:var(--bone-faint); text-transform:uppercase; }
.band-feature__text{ margin:1.2rem 0 1.5rem; color:var(--bone-dim); line-height:1.66; max-width:56ch; }
.band-kicker{ font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); }

/* Grid */
.bandgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(1.1rem,2.4vw,1.7rem); max-width:var(--maxw); margin:clamp(2.6rem,6vh,4rem) auto 0; }
.band-card{ position:relative; display:flex; flex-direction:column;
  background:rgba(12,12,14,.55); border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transition:border-color .35s var(--ease), transform .35s var(--ease); }
.band-card:hover{ border-color:rgba(236,232,223,.32); transform:translateY(-4px); }
.band-card__media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#0a0a0c; }
.band-card__media img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.85) contrast(1.05) brightness(.9);
  transition:filter .5s var(--ease), transform .6s var(--ease); }
.band-card:hover .band-card__media img{ filter:grayscale(0); transform:scale(1.04); }

/* Namecard (kein Foto vorhanden) — wirkt wie ein Gig-Poster */
.band-card__media--name{ display:grid; place-items:center; padding:1.2rem;
  background:radial-gradient(120% 100% at 50% 0%, rgba(215,40,31,.12), transparent 62%), #0c0c0e; }
.band-card__nameplate{ font-family:"Bebas Neue",var(--metal); font-weight:400; color:#e7e3da;
  text-align:center; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:.94; letter-spacing:.02em;
  text-shadow:0 6px 24px rgba(0,0,0,.5); }
.band-card__nameplate em{ display:block; font-style:normal; font-family:var(--mono); font-size:.58rem;
  letter-spacing:.26em; color:var(--accent); margin-top:.8rem; text-shadow:none; }
/* Headliner-Namecard (kein Foto) — gleiche Optik, größer */
.band-feature__media--name{ display:grid; place-items:center; padding:1.6rem;
  background:radial-gradient(120% 100% at 50% 0%, rgba(215,40,31,.14), transparent 62%), #0c0c0e; }
.band-feature__media--name .band-card__nameplate{ font-size:clamp(2.4rem,5vw,3.6rem); }
.band-feature__media--name .band-card__nameplate em{ font-size:.66rem; }

.band-card__body{ padding:1.05rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.band-card__name{ font-family:"Bebas Neue",var(--metal); font-weight:400; color:#fff; line-height:.98;
  font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:.02em; }
.band-card__meta{ font-family:var(--mono); font-size:.67rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-faint); }
.band-card__meta b{ color:var(--accent); font-weight:400; }
.band-card__text{ color:var(--bone-dim); font-size:.92rem; line-height:1.55; flex:1; }
.band-card__links{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.35rem; }
.band-card__links a{ font-family:var(--mono); font-size:.67rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-dim); border-bottom:1px solid rgba(236,232,223,.22); padding-bottom:1px;
  transition:color .2s var(--ease), border-color .2s var(--ease); }
.band-card__links a:hover{ color:var(--accent); border-color:var(--accent); }

.bands-note{ max-width:var(--maxw); margin:clamp(2.6rem,6vh,4rem) auto 0; text-align:center;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--bone-faint); line-height:1.7; }

@media (max-width:760px){
  .band-feature{ grid-template-columns:1fr; }
  .band-feature__media{ aspect-ratio:16/10; }
  .bandgrid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.9rem; }
  .band-card__body{ padding:.85rem .9rem 1.05rem; gap:.4rem; }
  .band-card__text{ font-size:.84rem; }
}

/* Header-Brand = Startseiten-Link (überall transparenter Header) */
.brand{ transition:opacity .25s var(--ease); }
.brand:hover{ opacity:.82; }
@media (max-width:760px){
  .brand__name{ font-size:1.12rem; }
  .brand__tag{ font-size:.55rem; letter-spacing:.26em; }
}

/* Touch-Geräte: kein Hover -> Band-Fotos direkt in voller Farbe */
@media (hover:none){
  .band-card__media img,
  .band-feature__media img{ filter:grayscale(0) contrast(1.03); }
}

/* Lightbox — Bandfoto anklicken = vergrößern */
.band-card__media img,
.band-feature__media img{ cursor:zoom-in; }
.lightbox{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem); background:rgba(6,6,8,.93); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); cursor:zoom-out; }
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox__img{ max-width:min(1080px,100%); max-height:86vh; width:auto; height:auto; object-fit:contain;
  filter:none; box-shadow:0 30px 80px -20px rgba(0,0,0,.85);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  transform:scale(.96); transition:transform .3s var(--ease); }
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__cap{ position:absolute; left:0; right:0; bottom:max(1.1rem,4vh); text-align:center;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); }
.lightbox__close{ position:absolute; top:clamp(.8rem,3vh,1.6rem); right:clamp(.8rem,3vw,1.6rem);
  width:46px; height:46px; display:grid; place-items:center; background:rgba(10,10,12,.5);
  border:1px solid var(--line); color:var(--bone); font-size:1.5rem; line-height:1; cursor:pointer; border-radius:2px;
  transition:border-color .2s var(--ease), color .2s var(--ease); }
.lightbox__close:hover{ border-color:var(--accent); color:var(--accent); }
@media (prefers-reduced-motion:reduce){ .lightbox, .lightbox__img{ transition:none; } }

/* ---------- Galerie Gelände: Swipe-Carousel + Lightbox ---------- */
.gal__lead{ max-width:780px; color:var(--bone-dim); line-height:1.62; margin:-.4rem 0 1.6rem; }
.galx-wrap{ position:relative; }
.galx{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:6px; }
.galx::-webkit-scrollbar{ display:none; }
.gal{ scroll-snap-align:center; flex:0 0 86%; max-width:820px; margin:0; padding:0; border:1px solid var(--line); background:#0a0a0c; cursor:pointer; overflow:hidden; line-height:0; aspect-ratio:3/2; transition:border-color .25s var(--ease); }
@media(min-width:761px){ .gal{ flex-basis:62%; } }
.gal img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.2) brightness(.94); transition:filter .35s var(--ease), transform .6s var(--ease); }
.gal:hover{ border-color:rgba(236,232,223,.5); }
.gal:hover img{ filter:none; transform:scale(1.03); }
.gal:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.galx__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:48px; height:48px; display:grid; place-items:center; font-size:2rem; line-height:1; color:var(--bone); background:rgba(10,10,12,.72); border:1px solid var(--line); cursor:pointer; transition:background .2s, border-color .2s; }
.galx__arrow:hover{ background:rgba(22,22,26,.94); border-color:rgba(236,232,223,.5); }
.galx__arrow--prev{ left:6px; } .galx__arrow--next{ right:6px; }
@media(hover:none){ .galx__arrow{ display:none; } }
.lb{ position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; background:rgba(6,6,8,.94); }
.lb.is-open{ display:flex; }
.lb__img{ max-width:92vw; max-height:86vh; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.6); }
.lb__close,.lb__nav{ position:absolute; background:none; border:0; color:var(--bone); cursor:pointer; line-height:1; }
.lb__close{ top:16px; right:22px; font-size:2.6rem; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:3.4rem; padding:.2em .4em; color:var(--bone-dim); transition:color .2s; }
.lb__nav:hover{ color:var(--bone); }
.lb__prev{ left:1vw; } .lb__next{ right:1vw; }
.lb__count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; color:var(--bone-dim); }
@media(max-width:760px){ .lb__nav{ font-size:2.6rem; } .lb__close{ font-size:2.2rem; right:14px; } }

/* ---------- Infos: Karten-Layout (Leaflet) ---------- */
.info-map{ display:grid; grid-template-columns:1fr 1.45fr; gap:clamp(10px,1.3vw,16px); align-items:stretch; }
.info-map__cards{ display:flex; flex-direction:column; gap:clamp(10px,1.3vw,16px); }
.info-map__cards .tc-card{ flex:1; justify-content:center; }
.info-map__map{ display:flex; flex-direction:column; border:1px solid var(--line); overflow:hidden; min-height:320px; }
.leaflet-map{ flex:1 1 auto; min-height:300px; background:#0d0d10; }
.info-map__cap{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; justify-content:space-between; padding:.85rem 1rem; border-top:1px solid var(--line); font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--bone-faint); line-height:1.5; }
.info-map__cap a{ color:var(--accent-bright); white-space:nowrap; }
.leaflet-container{ font-family:inherit; background:#0d0d10; }
.leaflet-control-attribution{ background:rgba(10,10,12,.72)!important; color:var(--bone-faint)!important; }
.leaflet-control-attribution a{ color:var(--bone-dim)!important; }
@media(max-width:760px){ .info-map{ grid-template-columns:1fr; } .leaflet-map{ min-height:260px; } }