/* ═══════════════════════════════════════════════════════════════════════════
   Neon Nights — Komponenten + Seiten-Layout (framework-freier Port).

   TEIL 1  Komponenten des Design-Systems (.nn-*) — entsprechen den React-
           Komponenten Button / Card / Badge / SectionHeading / InfoRow.
   TEIL 2  Seiten-Layout — je ein Block pro Sektion der Startseite.
   TEIL 3  Bewegung, Mobile-Anpassungen, Barrierefreiheit.

   Alle Farb-, Abstands- und Schattenwerte kommen aus css/tokens/.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  TEIL 1 — KOMPONENTEN                                                 ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ---- Button (nn-btn) — portiert aus Button.jsx ---- */
.nn-btn{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.14em;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.6em;line-height:1;border:1.5px solid transparent;transition:box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out);text-decoration:none;white-space:nowrap}
.nn-btn:active{transform:scale(.97)}
.nn-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.nn-btn--sm{font-size:12px;padding:9px 16px}
.nn-btn--md{font-size:15px;padding:14px 26px}
.nn-btn--lg{font-size:17px;padding:18px 34px}
.nn-btn--primary{background:var(--magenta);color:#fff;box-shadow:var(--glow-magenta)}
.nn-btn--primary:hover{box-shadow:var(--glow-magenta-strong);color:#fff}
.nn-btn--outline{background:transparent;color:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.nn-btn--outline:hover{background:rgba(69,214,239,.12);box-shadow:var(--glow-cyan-strong)}

/* Button-Optik ohne Verlinkung — für Ziele, die noch nicht feststehen. */
.nn-btn--inactive{cursor:default;opacity:.75}
.nn-btn--outline.nn-btn--inactive:hover{background:transparent;box-shadow:var(--glow-cyan)}
.nn-btn--primary.nn-btn--inactive:hover{box-shadow:var(--glow-magenta)}

/* ---- Card (nn-card) — portiert aus Card.jsx ---- */
.nn-card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);backdrop-filter:blur(6px);padding:var(--sp-5)}

/* ---- Badge (nn-badge) — portiert aus Badge.jsx ---- */
.nn-badge{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radius-sm);padding:4px 10px;display:inline-flex;align-items:center;line-height:1.1;background:transparent;color:var(--cyan);border:1.5px solid var(--cyan)}
.nn-badge--neutral{color:var(--ink-200);border-color:var(--ink-200)}
.nn-badge--cyan.nn-badge--solid{background:var(--cyan);color:var(--night);border:1px solid var(--cyan)}
.nn-badge--magenta.nn-badge--solid{background:var(--magenta);color:#fff;border:1px solid var(--magenta)}
.nn-badge--cyan.nn-badge--glow{box-shadow:var(--glow-cyan)}
.nn-badge--magenta.nn-badge--glow{box-shadow:var(--glow-magenta)}

/* ---- SectionHeading — portiert aus SectionHeading.jsx ---- */
.nn-heading__eyebrow{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--cyan);margin-bottom:var(--sp-3)}
.nn-heading__title{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h2);letter-spacing:var(--ls-display);line-height:var(--lh-heading);text-transform:uppercase;margin:0;color:var(--text-heading);text-shadow:var(--text-glow-cyan)}
.nn-heading__title--chrome{background:var(--grad-chrome);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}

/* ---- InfoRow — portiert aus InfoRow.jsx ---- */
.nn-inforow{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--border-hairline)}
.nn-inforow:last-child{border-bottom:0}
.nn-inforow__label{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);display:block}
.nn-inforow__value{font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--white);display:block}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  TEIL 2 — SEITEN-LAYOUT                                               ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ---- Grundgerüst & Links ---- */
/* Waagerechtes Scrollen unterbinden. `clip` muss auf beiden Elementen stehen:
   Steht es nur auf <body>, scrollt weiterhin das <html>-Element mit, sobald ein
   Deko-Bild optisch in den Seitenrand ragt. */
html,body{overflow-x:clip}
a{color:var(--cyan);text-decoration:none;transition:color .18s ease,text-shadow .18s ease}
a:hover{color:var(--cyan-bright);text-shadow:var(--text-glow-cyan)}
a.nn-btn:hover{text-shadow:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px}

.page{position:relative;min-height:100vh;background:var(--night);font-family:var(--font-body)}
.page__content{position:relative;z-index:1}

/* Sprunglink für Tastatur- und Screenreader-Nutzung */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;background:var(--night);border:1.5px solid var(--cyan);border-radius:var(--radius-md);color:var(--cyan);font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.skip-link:focus{left:16px;top:16px}

/* ---- Atmosphäre: Hero-Schein, Fluchtpunkt-Raster, Sterne, Scanlines ---- */
.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmo__glow{position:absolute;inset:0;background:var(--grad-hero)}
.atmo__grid{position:absolute;left:0;right:0;bottom:0;height:55%;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:64px 64px;transform:perspective(440px) rotateX(64deg);transform-origin:center bottom;opacity:.5;-webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%);animation:nnDrift 7s linear infinite}
.atmo__star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:nnTwinkle 3s ease-in-out infinite}
.atmo__star--1{top:12%;left:16%}
.atmo__star--2{top:20%;left:78%;animation-duration:4s;animation-delay:.6s}
.atmo__star--3{top:44%;left:60%;width:1px;height:1px;animation-duration:2.6s;animation-delay:.3s}
.atmo__star--4{top:64%;left:28%;width:1px;height:1px;animation-duration:3.4s;animation-delay:.9s}
.atmo__star--5{top:34%;left:40%;width:1px;height:1px;animation-duration:3.8s;animation-delay:1.2s}
.atmo__scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(69,214,239,.03) 0 1px,transparent 1px 4px);mix-blend-mode:screen}

/* ---- Kopfbereich ---- */
/* Der Kopfbereich läuft bewusst NICHT mit: Er ist durchsichtig, dadurch würde
   der Inhalt beim Scrollen unter der Schrift durchlaufen. */
.site-header{position:static;z-index:40;background:transparent}
.site-header__inner{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-header__logo-link{display:inline-flex;align-items:center;flex-shrink:0}
.site-header__logo{height:42px;width:auto;display:block}
.nn-nav{display:flex;align-items:center;gap:26px;font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.nn-nav a{color:var(--text-muted)}
.nn-nav a:hover{color:var(--cyan);text-shadow:var(--text-glow-cyan)}
/* Der Tickets-Knopf in der Navigation bleibt weiß — wie „Tickets sichern“ im Hero.
   Ohne diese Regel würde ihn die Navigations-Farbe oben überschreiben. */
.nn-nav a.nn-btn--primary,
.nn-nav a.nn-btn--primary:hover{color:#fff;text-shadow:none}

/* ---- Hero ---- */
.hero{max-width:1280px;margin:0 auto;padding:26px 24px 0}
.hero__frame{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-strong);box-shadow:var(--shadow-card),var(--glow-violet);min-height:660px;display:flex;flex-direction:column}
/* Strahlen fliegen auf die Betrachterin zu: zwei Kopien desselben Bildes werden
   zeitversetzt vergrößert und dabei aus- und eingeblendet. Tempo über die Dauer
   bei .hero__layer steuern (kleiner = schneller); der Versatz bei --b muss immer
   genau die Hälfte davon sein. */
.hero__stage{position:absolute;inset:0;overflow:hidden;background:var(--night)}
.hero__layer{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;
  transform:translate(-50%,-50%) scale(1);transform-origin:center center;
  will-change:transform,opacity;animation:nnHeroZoom 3s linear infinite}
.hero__layer--b{animation-delay:-1.5s}
.hero__scrim{position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 8%,rgba(10,10,18,.08),rgba(10,10,18,.72) 62%,rgba(10,10,18,.95))}
.hero__body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 24px;gap:14px}
.hero__title{margin:0;width:100%;font-size:0;line-height:0}
.hero__logo{width:min(880px,92%);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.55))}
.hero__countdown{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:4px}
.hero__countdown-label{font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:.36em;text-transform:uppercase;color:var(--text-muted)}
.hero__countdown-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;justify-content:center}
.hero__days{font-family:var(--font-display);font-weight:900;font-size:clamp(66px,13vw,132px);line-height:.82;color:var(--cyan);text-shadow:var(--text-glow-cyan)}
.hero__days-unit{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
.hero__days-word{font-family:var(--font-display);font-weight:900;font-size:34px;line-height:1;color:var(--white)}
.hero__days-note{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.hero__hm{margin-top:10px;font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-faint)}
.hero__actions{display:flex;gap:16px;margin-top:22px;flex-wrap:wrap;justify-content:center}

/* ---- Intro ---- */
.intro{position:relative;max-width:1080px;margin:0 auto;padding:96px 24px 40px}
.intro__eyebrow{text-align:center;font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin-bottom:28px}
.intro__lead{max-width:900px;margin:0 auto;text-align:center;font-family:var(--font-body);font-weight:600;font-size:clamp(26px,3.6vw,44px);line-height:1.28;color:var(--white);text-wrap:pretty}

/* ── Timeline: senkrechter Strahl mit Boxen links und rechts ──
   .tl__track  = die blasse Spur über die volle Höhe
   .tl__beam   = der leuchtende Strahl; seine Höhe setzt js/main.js beim Scrollen
   .tl__node   = der Kreis auf dem Strahl (bewusst leer) */
.tl{position:relative;max-width:920px;margin:clamp(56px,7vw,88px) auto 0}
.tl__track,.tl__beam{position:absolute;left:50%;top:0;width:3px;transform:translateX(-50%);border-radius:3px}
.tl__track{bottom:0;background:rgba(69,214,239,.16)}
.tl__beam{height:0;background:var(--grad-neon-v);box-shadow:0 0 18px rgba(122,47,242,.6);
  transition:height .18s linear}

.tl__item{position:relative;width:calc(50% - 48px);padding:28px 30px;
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);backdrop-filter:blur(6px)}
.tl__item--left{margin-left:0}
.tl__item--right{margin-left:calc(50% + 48px)}
.tl__item + .tl__item{margin-top:46px}

.tl__node{position:absolute;top:26px;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(122,47,242,.55),rgba(10,10,18,.95));
  border:2px solid var(--violet-bright);box-shadow:0 0 24px rgba(164,107,255,.7);
  transform:scale(.4);opacity:0;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s ease}
.tl__item--left .tl__node{right:-76px}
.tl__item--right .tl__node{left:-76px}
/* Der Kreis ploppt auf, sobald seine Box eingeblendet wird. */
.reveal.in .tl__node{transform:scale(1);opacity:1}

.tl__title{margin:0 0 12px;font-family:var(--font-display);font-weight:800;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase}
.tl__title--cyan{color:var(--cyan);text-shadow:var(--text-glow-cyan)}
.tl__title--magenta{color:var(--magenta);text-shadow:var(--text-glow-magenta)}
/* Fließtext wie unter „Zwei Ebenen. Drei Bars. Eine Nacht." */
.tl__text{margin:0;font-family:var(--font-body);font-size:18px;line-height:1.64;color:var(--white);font-weight:600;text-wrap:pretty}

/* Abschluss des Strahls */
.tl-quote{text-align:center;max-width:860px;margin:0 auto;padding:46px 20px 30px;
  font-family:var(--font-display);font-weight:900;font-size:clamp(34px,5vw,58px);line-height:1.12;
  text-transform:uppercase;color:var(--magenta);
  text-shadow:0 0 26px rgba(255,0,153,.65),0 0 60px rgba(255,0,153,.35)}

/* Schluss des Intros — mittig unter der pinken Schrift.
   Die Absätze tragen .intro__lead, also exakt die Formatierung des Anfangssatzes. */
.intro__outro{margin-top:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:36px}

/* Nur Skalierung des Originalbildes — es werden keine Linien hinzugefügt.
   Die Deckkraft steigt bis zur Mitte und fällt danach wieder auf null.
   Weil die zweite Ebene genau eine halbe Runde versetzt läuft, ergänzen sich
   beide zu jedem Zeitpunkt zu voller Deckung — dadurch ist kein Ansatz und
   kein Neustart der Schleife sichtbar. */
@keyframes nnHeroZoom{
  0%   {transform:translate(-50%,-50%) scale(1);opacity:0}
  50%  {opacity:1}
  100% {transform:translate(-50%,-50%) scale(2.6);opacity:0}
}

/* ---- Flyer zwischen Intro und Party ----
   Der Flyer selbst steht still (er trägt Text). Bewegt wird das Strahlenfeld
   dahinter — dieselben Keyframes und dieselbe Dauer wie im Hero. */
.flyer-band{position:relative;display:flex;justify-content:center;
  padding:clamp(56px,8vw,112px) 24px;overflow:hidden;isolation:isolate}
.flyer-band__stage{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--night)}
.flyer-band__layer{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;
  transform:translate(-50%,-50%) scale(1);transform-origin:center center;
  will-change:transform,opacity;animation:nnHeroZoom 3s linear infinite}
.flyer-band__layer--b{animation-delay:-1.5s}
.flyer-band__scrim{position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 50%,rgba(10,10,18,.30),rgba(10,10,18,.82) 68%,rgba(10,10,18,.97))}
.flyer{position:relative;z-index:1;width:min(520px,80vw);height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--border-hairline);
  box-shadow:var(--shadow-card),var(--glow-violet)}

/* ---- Party ---- */
.party{position:relative;max-width:1160px;margin:0 auto;padding:70px 24px}
.party__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:52px;align-items:start}
.party__photo{position:sticky;top:96px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-hairline);aspect-ratio:4/5;box-shadow:var(--shadow-card),var(--glow-cyan)}
.party__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Wiederkehrende Textstile ---- */
.p-body{font-family:var(--font-body);font-size:18px;line-height:1.64;color:var(--white);font-weight:600;margin:18px 0 0;text-wrap:pretty}
.p-body--first{margin-top:26px}
.p-accent{font-family:var(--font-body);font-size:19px;line-height:1.5;color:var(--white);font-weight:600;margin:24px 0 0;text-wrap:pretty}
.p-closing{font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--white);font-weight:600;margin:0}
.t-cyan{color:var(--cyan);text-shadow:var(--text-glow-cyan)}
.t-magenta{color:var(--magenta);text-shadow:var(--text-glow-magenta)}
.t-cyan-plain{color:var(--cyan);font-weight:600}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
.tags--info{gap:12px;margin:0}

/* ---- Line-Up ---- */
.lineup{position:relative;max-width:1160px;margin:0 auto;padding:90px 24px}
.lineup__head{text-align:center}
.lineup__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;margin-top:44px;align-items:stretch}
.artist{display:flex;flex-direction:column;height:100%;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-hairline);background:var(--surface-card);box-shadow:var(--shadow-card),var(--glow-magenta);cursor:pointer}
/* Beim Überfahren wächst die Kachel einmalig leicht an und leuchtet stärker.
   Vergrößert wird über die eigenständige Eigenschaft `scale` — dadurch kommt sie
   dem `transform` des Einblendens nicht in die Quere. */
.artist.reveal{transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.05s cubic-bezier(.22,1,.36,1),
  scale .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.artist:hover,.artist:focus-within{scale:1.03}
.artist:hover{box-shadow:var(--shadow-card),var(--glow-magenta-strong)}
.artist--cyan:hover{box-shadow:var(--shadow-card),var(--glow-cyan-strong)}
.artist--violet:hover{box-shadow:var(--shadow-card),0 0 34px rgba(164,107,255,.75)}
.artist--cyan{box-shadow:var(--shadow-card),var(--glow-cyan)}
.artist--violet{box-shadow:var(--shadow-card),var(--glow-violet)}
.artist__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.artist__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Hochformat im Querformat-Rahmen: Ausschnitt auf das Gesicht setzen. */
.artist__img--axl{object-position:50% 22%}
/* Bandfoto etwas nach links rücken, damit der Hase ganz links im Bild bleibt. */
.artist__img--express{object-position:42% center}
.artist__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(10,10,18,.92) 100%)}
.artist__badge{position:absolute;top:12px;left:12px}
.artist__body{display:flex;flex-direction:column;gap:8px;padding:var(--sp-5);flex:1}
.artist__name{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);letter-spacing:.02em;text-transform:uppercase;margin:0;color:var(--white)}
.artist__genre{margin:0;font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.artist__bio{font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--white);font-weight:600;margin:4px 0 0}
.artist__actions{margin-top:auto;padding-top:20px;display:flex}

/* ---- Galerie (Filmstreifen) ----
   Feste Höhe, freie Breite: Hoch- und Querformate stehen nebeneinander,
   ohne dass etwas beschnitten wird. */
.galerie{position:relative;max-width:1160px;margin:0 auto;padding:90px 24px}
.galerie__head{text-align:center;margin-bottom:36px}
.galerie__note{margin:14px 0 0;font-family:var(--font-body);font-size:16px;color:var(--white);font-weight:500}

/* Jahres-Umschalter über der Galerie */
.galerie__jahre{display:flex;justify-content:center;gap:12px;margin:0 0 28px}
.jahr-btn{cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:14px;
  letter-spacing:.18em;padding:10px 22px;border-radius:var(--radius-md);
  background:transparent;color:var(--text-muted);border:1.5px solid var(--border-hairline);
  transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.jahr-btn:hover{color:var(--cyan);border-color:var(--border-strong)}
.jahr-btn.is-aktiv{color:var(--night);background:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow-cyan)}

.slider{position:relative;display:flex;align-items:center;gap:12px}
.slider__track{display:flex;gap:16px;list-style:none;margin:0;padding:4px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;flex:1}
.slider__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto;scroll-snap-align:center}
.slide__fig{position:relative;margin:0;height:clamp(240px,42vw,420px);border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--border-hairline);box-shadow:var(--shadow-card),var(--glow-cyan)}
.slide__fig img{height:100%;width:auto;display:block}
.slide__jahr{position:absolute;left:12px;bottom:12px;font-family:var(--font-display);font-weight:800;
  font-size:12px;letter-spacing:.18em;padding:4px 10px;border-radius:var(--radius-sm);
  background:rgba(10,10,18,.78);color:var(--cyan);border:1px solid var(--border-hairline)}

.slider__btn{flex:0 0 auto;width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:26px;line-height:1;
  background:rgba(18,18,30,.8);color:var(--cyan);border:1.5px solid var(--border-strong);
  box-shadow:var(--glow-cyan);transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.slider__btn:hover{background:rgba(69,214,239,.14);box-shadow:var(--glow-cyan-strong)}
.slider__btn[disabled]{opacity:.3;cursor:default;box-shadow:none}

/* ---- Info-Fenster der Künstler ---- */
.modal{width:min(920px,92vw);max-height:88vh;padding:0;border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);background:var(--surface-raised);color:var(--white);
  box-shadow:var(--shadow-card),var(--glow-violet);overflow:hidden}
.modal::backdrop{background:rgba(4,4,10,.82);backdrop-filter:blur(4px)}
.modal__inner{display:flex;flex-direction:column;max-height:88vh}
.modal__close{position:absolute;top:14px;right:16px;z-index:2;width:42px;height:42px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;
  background:rgba(10,10,18,.75);color:var(--cyan);border:1.5px solid var(--border-strong)}
.modal__close:hover{background:rgba(69,214,239,.16);box-shadow:var(--glow-cyan)}
.modal__kopf{display:flex;gap:22px;align-items:center;padding:26px 70px 22px 28px;
  border-bottom:1px solid var(--border-hairline);flex:0 0 auto}
.modal__bild{width:96px;height:96px;border-radius:var(--radius-md);object-fit:cover;flex:0 0 auto;
  border:1px solid var(--border-hairline)}
.modal__titel{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(24px,3.4vw,34px);
  letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.modal__genre{margin:6px 0 0;font-family:var(--font-body);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
/* Der Textbereich scrollt für sich — wichtig bei langen Texten wie Ron Valbys. */
.modal__body{overflow-y:auto;padding:24px 28px 30px;flex:1 1 auto;
  font-family:var(--font-body);font-size:17px;line-height:1.62;color:var(--white);font-weight:500;
  scrollbar-width:thin;scrollbar-color:var(--cyan) rgba(69,214,239,.10)}
/* Scrollbalken im Stil der Seite (Chrome, Edge, Safari) */
.modal__body::-webkit-scrollbar{width:10px}
.modal__body::-webkit-scrollbar-track{background:rgba(69,214,239,.08);border-radius:10px;margin:6px 0}
.modal__body::-webkit-scrollbar-thumb{border-radius:10px;border:2px solid transparent;background-clip:padding-box;
  background-color:var(--cyan);box-shadow:inset 0 0 0 10px var(--cyan)}
.modal__body::-webkit-scrollbar-thumb:hover{box-shadow:inset 0 0 0 10px var(--cyan-bright)}
.modal__body p{margin:0 0 16px}
.modal__body p:last-child{margin-bottom:0}
.modal__signatur{font-weight:700;color:var(--cyan)}
.modal__fakten{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--border-hairline);
  display:flex;flex-wrap:wrap;gap:26px}
.modal__fakten dt{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint)}
.modal__fakten dd{margin:4px 0 0;font-size:16px;color:var(--white);font-weight:600}

/* ---- Location & Infos ---- */
.info{max-width:1160px;margin:0 auto;padding:90px 24px}
.info__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px;align-items:start}
.info__text{font-family:var(--font-body);font-size:18px;line-height:1.62;color:var(--white);font-weight:600;margin:24px 0 26px;max-width:460px;text-wrap:pretty}

/* ---- Tickets ---- */
.tickets{position:relative;max-width:1000px;margin:0 auto;padding:90px 24px 40px}
.tickets__head{text-align:center}
.tickets__note{max-width:620px;margin:20px auto 0;text-align:center;font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--white);font-weight:600}
.price-grid{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.price-card{width:260px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.price-card--vvk{box-shadow:var(--shadow-card),var(--glow-magenta)}
.price-card--ak{box-shadow:var(--shadow-card),var(--glow-cyan)}
.price-card__label{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.price-card--vvk .price-card__label{color:var(--magenta)}
.price-card--ak .price-card__label{color:var(--cyan)}
.price-card__value{font-family:var(--font-display);font-weight:900;font-size:56px;line-height:1;color:var(--white)}
.price-card--vvk .price-card__value{text-shadow:var(--text-glow-magenta)}
.price-card--ak .price-card__value{text-shadow:var(--text-glow-cyan)}
.price-card__sub{font-family:var(--font-body);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.tickets__cta{display:flex;justify-content:center;margin-top:40px}

/* ---- „Das Kleingedruckte" ---- */
.rules{max-width:760px;margin:56px auto 0;display:flex;flex-direction:column;align-items:center;gap:20px}
.rules__intro{margin:0;text-align:center;font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--white);font-weight:600;text-wrap:pretty}
.rules__toggle{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;padding:12px 22px;border-radius:var(--radius-md);border:1.5px solid var(--border-strong);background:rgba(18,18,30,.6);font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.rules__toggle-arrow{font-size:16px;line-height:1}
.rules__panel{width:100%;padding:34px;border-radius:var(--radius-lg);border:1px solid var(--border-hairline);background:var(--surface-card);box-shadow:var(--shadow-card)}
.rules__title{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--magenta);margin-bottom:20px}
.rules__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.rules__list li{display:grid;grid-template-columns:auto 1fr;gap:14px;font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--white);font-weight:500}
.rules__list li::before{content:"▸";color:var(--cyan)}
.rules__list li.is-important{color:var(--white)}
.rules__list li.is-important::before{color:var(--magenta)}
.rules__list li.is-consent{color:var(--white);font-weight:600}
.rules__list li.is-consent::before{color:var(--magenta)}

/* ---- Rechtsseiten (Impressum, Datenschutzerklärung) ----
   Reine Textseiten: eine Spalte, ruhige Typografie, gut lesbare Zeilenlänge. */
.recht{max-width:820px;margin:0 auto;padding:clamp(48px,7vw,90px) 24px clamp(60px,8vw,100px)}
/* „Datenschutzerklärung“ ist ein sehr langes Wort — die Größe ist so gewählt,
   dass es auch auf schmalen Displays in eine Zeile passt. */
.recht__titel{font-size:clamp(22px,3.9vw,40px);margin-bottom:clamp(28px,4vw,44px);
  hyphens:auto;overflow-wrap:anywhere}
.recht h2{font-family:var(--font-display);font-weight:800;font-size:clamp(19px,2.4vw,24px);
  letter-spacing:.04em;text-transform:uppercase;color:var(--cyan);
  text-shadow:var(--text-glow-cyan);margin:clamp(34px,4vw,52px) 0 14px}
.recht h3{font-family:var(--font-body);font-weight:700;font-size:18px;color:var(--white);
  margin:26px 0 8px}
.recht p{font-family:var(--font-body);font-weight:500;font-size:17px;line-height:1.68;
  color:var(--white);margin:0 0 14px;text-wrap:pretty}
.recht a{overflow-wrap:anywhere}
.recht__adresse{font-weight:600}
.recht__quelle{margin-top:34px;font-size:15px;color:var(--text-muted)}
.recht__zurueck{margin-top:clamp(40px,6vw,64px);padding-top:24px;
  border-top:1px solid var(--border-hairline);font-weight:600}
/* Noch auszufüllende Angaben sichtbar markieren. */
.recht__offen{color:var(--magenta);font-weight:700}

@media (max-width:720px){
  .recht{padding:40px 18px 56px}
  .recht p{font-size:16px}
}

/* ---- Fußbereich ---- */
.site-footer{position:relative;margin-top:70px;border-top:1px solid var(--border-hairline);overflow:hidden}
.site-footer__inner{position:relative;max-width:1160px;margin:0 auto;padding:56px 24px 20px;display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;align-items:flex-start}
.site-footer__brand{max-width:340px}
.site-footer__logo{height:52px;width:auto;display:block}
.site-footer__blurb{font-family:var(--font-body);color:var(--white);font-weight:500;font-size:14px;line-height:1.6;margin-top:18px}
.site-footer__col{display:flex;flex-direction:column;gap:10px}
.site-footer__mail{display:inline-flex;align-items:center;gap:9px}
.site-footer__mail-icon{flex:0 0 auto}
.tickets__note--hinweis{margin-top:12px;font-size:16px;color:var(--cyan);font-weight:600}
.site-footer__col-title{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.site-footer__legal{position:relative;border-top:1px solid var(--border-hairline);padding:18px 24px;text-align:center;font-family:var(--font-body);font-size:13px;color:var(--text-faint);letter-spacing:.06em}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  TEIL 3 — BEWEGUNG, MOBIL, BARRIEREFREIHEIT                           ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ---- Einblenden beim Scrollen (wird von js/main.js mit .in geschaltet) ----
   Der Weg von unten nach oben ist bewusst lang und die Kurve weich, damit die
   Bewegung deutlich wahrnehmbar ist. */
.reveal{opacity:0;transform:translateY(64px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.05s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}


@keyframes nnTwinkle{0%,100%{opacity:.2}50%{opacity:.9}}
@keyframes nnDrift{from{background-position:0 0}to{background-position:0 60px}}

/* ---- Tablet ---- */
@media (max-width:900px){
  .party__photo{position:static}
  .tl__item{padding:24px 24px}
}

/* ---- Timeline einspaltig: Strahl nach links, Boxen daneben ---- */
@media (max-width:820px){
  .tl__track,.tl__beam{left:26px;transform:none}
  .tl__item{width:calc(100% - 52px);margin-left:52px}
  .tl__item--left .tl__node,
  .tl__item--right .tl__node{left:-52px;right:auto;width:48px;height:48px}
  .tl__item + .tl__item{margin-top:32px}
}

/* ---- Mobil ---- */
@media (max-width:720px){
  .site-header__inner{padding:10px 16px;gap:12px;flex-wrap:wrap;justify-content:center}
  .nn-nav{gap:16px;font-size:12px;letter-spacing:.1em;flex-wrap:wrap;justify-content:center}
  .site-header__logo{height:36px}

  .hero{padding:16px 12px 0}
  .hero__frame{min-height:78vh}
  .hero__body{padding:40px 18px}
  .hero__countdown-row{gap:12px}
  .hero__days-word{font-size:28px}
    .hero__actions{gap:12px;width:100%}
  .hero__actions .nn-btn{flex:1 1 auto}

  .intro{padding:64px 18px 32px}

  .intro__outro{gap:28px}

  .party{padding:48px 18px}
  .party__grid{gap:32px}
  .lineup{padding:56px 18px}
  .galerie{padding:56px 0}
  .modal{width:94vw;max-height:92vh}
  .modal__inner{max-height:92vh}
  .modal__kopf{padding:22px 62px 18px 20px;gap:16px}
  .modal__bild{width:70px;height:70px}
  .modal__body{padding:20px 20px 24px;font-size:16px}
  .jahr-btn{padding:9px 18px;font-size:13px}
  .galerie__head{padding:0 18px}
  .slider{gap:8px}
  .slider__track{padding:4px 18px}
  .slider__btn{width:40px;height:40px;font-size:22px}
  .lineup__grid{margin-top:32px}
  .info{padding:56px 18px}
  .info__grid{gap:32px}
  .tickets{padding:56px 18px 32px}

  .price-card{width:100%;max-width:320px}
  .rules{margin-top:40px}
  .rules__panel{padding:22px}
  .rules__toggle{letter-spacing:.16em}

  .site-footer__inner{padding:40px 18px 20px;gap:28px}
  }

/* ---- Reduzierte Bewegung: Animationen und Übergänge aus ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .tl__node{opacity:1!important;transform:scale(1)!important}
  .tl__beam{height:100%!important}
  .slider__track{scroll-behavior:auto!important}
  .artist:hover,.artist:focus-within{scale:1!important}
  /* Strahlen stehen still: die zweite Ebene entfällt, die erste bleibt sichtbar. */
  .hero__layer,.flyer-band__layer{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
  .hero__layer--b,.flyer-band__layer--b{display:none}
}