/* ============================================================
   Festival-Beispielseite - Prototyp Stylesheet
   Aesthetic: Kosmische Nacht - Violett / Blau / Rötlich / Gold
   ============================================================ */

/* @cap-feature(feature:F-016) Fonts self-hosted (AC-1): Space Grotesk + Space Mono lokal aus assets/fonts/ (latin-Subset) statt Google-Fonts-CDN — keine Verbindung zu Google-Servern mehr. */
/* Lizenz: Beide Schriften stehen unter der SIL Open Font License 1.1 — Self-Hosting ausdrücklich erlaubt. */
/* @cap-decision Abweichung von F-016/AC-1 (Vorgabe: 5 Dateien): Google liefert Space Grotesk als Variable Font aus — die latin-WOFF2-URL ist für 400/500/700 byte-identisch. Daher EINE Datei (space-grotesk-variable.woff2) mit drei @font-face-Gewichten statt drei identischer Kopien; spiegelt exakt Googles eigenes CDN-CSS (drei Blöcke, gleiche URL). Space Mono hat echte Einzeldateien je Gewicht. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-variable.woff2') format('woff2')}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/space-grotesk-variable.woff2') format('woff2')}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-grotesk-variable.woff2') format('woff2')}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-mono-400.woff2') format('woff2')}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-mono-700.woff2') format('woff2')}

:root{
  --bg:#160F2E;          /* tiefes Nacht-Violett */
  --bg2:#0D0A20;         /* dunkler Verlaufsgrund */
  --surface:#221A45;     /* Karten/Flächen */
  --surface2:#2B2156;
  --text:#F3EEFA;        /* helles Lavendel-Weiß */
  --muted:#A99FC4;       /* gedämpfter Text */
  --primary:#FF5C7A;     /* Rötlich / Koralle – CTA */
  --accent:#FFC857;      /* Gold - Akzent, Highlights */
  --secondary:#7A5CFF;   /* Violett-Blau */
  --blue:#4FB8FF;        /* heller Blau-Akzent (Komet) */
  --border:#3A2F63;      /* gedämpfter violetter Rand */
  --bw:1.5px; --radius:14px;
  --shadow:0 16px 40px rgba(0,0,0,.5);
  --shadow-accent:0 14px 34px rgba(255,200,87,.22);
  --s1:4px; --s2:8px; --s3:16px; --s4:32px; --s5:56px; --s6:88px;
  --font:"Space Grotesk", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  /* Motion-Signatur (Experiment „Smooth Scroll"): eine Easing-Kurve für die ganze Seite -> einheitliche „Vibe" */
  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1); /* easeOutExpo: schneller Start, langes, edles Auslaufen */
  --dur-enter: 760ms;  /* Rein-Animation (Reveal) */
  --dur-exit:  520ms;  /* Raus-Animation (scroll-past) */
  --dur-micro: 160ms;  /* Mikro-Interaktionen/Hover */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}            /* bleibt aktiv, wenn Lenis AUS ist (reduced-motion) -> Anker bleiben sanft */
html.lenis{scroll-behavior:auto}        /* PFLICHT bei aktivem Lenis: sonst dokumentierter „riesiger Verzögerungs"-Bug */
/* Lenis-Runtime-CSS (5 Regeln, ersetzt separate lenis.css) – Experiment „Smooth Scroll" */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(122,92,255,.28), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;
  color:var(--text);font-family:var(--font);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;
}
/* @cap-feature(feature:F-014) Rötlich-violetter Glow oben links als eigenes, fixiertes Layer: bleibt an Ort und Stelle, wabert nur minimal
   (transform = GPU-composited, kein Full-Page-Repaint). Aus bei reduced-motion. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 500px at 10% 0%, rgba(255,92,122,.18), transparent 55%);
  will-change:transform;transform:scale(1.08);
  animation:bg-drift 26s ease-in-out infinite}
@keyframes bg-drift{
  0%   {transform:translate(0,0)      scale(1.08)}
  30%  {transform:translate(26px,15px) scale(1.13)}
  60%  {transform:translate(-14px,26px) scale(1.10)}
  100% {transform:translate(0,0)      scale(1.08)}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none;transform:none}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin-inline:auto}
/* Barrierefreiheit: nur für Screenreader sichtbarer Text + Skip-Link */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-60px;z-index:300;background:var(--accent);color:#160F2E;font-family:var(--mono);font-weight:700;font-size:14px;padding:10px 18px;border-radius:10px;text-decoration:none;transition:top var(--dur-micro) var(--ease-signature)}
.skip-link:focus{top:12px;outline:2px solid var(--text);outline-offset:2px}
.kicker{font-family:var(--mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.btn,.nav-cta,.gallery-tile,.cd-box,.act,.feat,.tier,.map,.tt-slot,.info-item{border-radius:var(--radius)}

/* @cap-feature(feature:F-013) Navigation & Layout: Sticky Header, aria-current, Burger */
/* ===== NAV ===== */
/* Schwebender, halbtransparenter „Pillen“-Balken – eingerückt, eigener Platz (sticky) */
header.nav{position:sticky;top:14px;z-index:60;
  width:min(1140px,94vw);margin:14px auto 0;padding:0 clamp(16px,2.4vw,30px);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(43,33,86,.55),rgba(28,20,60,.42));
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(122,92,255,.38);
  box-shadow:0 16px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07)}
header.nav .nav-inner{width:100%;max-width:none;margin-inline:0}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--s2) 0;gap:var(--s3)}
header.nav .brand{justify-self:start}
header.nav nav{justify-self:center}
.brand{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px)}
.logo{font-weight:700;font-size:24px;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.logo b{color:var(--accent)}
/* leichter Gold-Glow hinter dem Akzent-Wort im Header-Logo, analog zum Titel-Schein im Hero (nur dezenter, da kleiner). Nur Header (.brand), nicht der Footer. */
.brand .logo b{text-shadow:0 0 12px rgba(255,200,87,.7),0 0 26px rgba(255,200,87,.45)}
.nav-right{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);justify-self:end}
/* @cap-feature(feature:F-004) Mini-Pfau im Header (in dieser Beispielseite nicht verwendet): runder, weich maskierter Ausschnitt wie im Hero.
   mix-blend-mode:screen blendet den dunklen PNG-Hintergrund weg, die Radial-Maske rundet weich ab. Erscheint/verschwindet via .show-pfau (JS) durch gleichmäßiges, langsames Faden + dezenten Bloom; sitzt einen Tick rechts neben der Wortmarke. */
/* Wrapper trägt den Abstand + einen ganz, ganz dezenten neutralen (weißen) Glow hinter dem Pfau (eigene Ebene, da der maskierte/geblendete Pfau selbst keinen Schatten tragen kann). */
.nav-pfau-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:clamp(10px,1.4vw,20px)}
.nav-pfau-wrap::before{content:"";position:absolute;left:50%;top:48%;width:78%;height:78%;transform:translate(-50%,-50%);z-index:-1;
  border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 72%);filter:blur(8px);
  opacity:0;transition:opacity 1100ms ease-in-out;pointer-events:none}
.brand.show-pfau .nav-pfau-wrap::before{opacity:1}
.nav-pfau{height:72px;width:72px;object-fit:contain;display:block;
  opacity:0;transform:scale(.8);transform-origin:center;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(circle at 50% 46%, #000 26%, rgba(0,0,0,.5) 46%, transparent 66%);
          mask:radial-gradient(circle at 50% 46%, #000 26%, rgba(0,0,0,.5) 46%, transparent 66%);
  /* gleichmäßiges, langsames Ein-/Ausfaden (ease-in-out verteilt den Fade gleichmäßig über die Dauer – kein front-loaded „Bling") */
  transition:opacity 1100ms ease-in-out,transform 1100ms ease-in-out}
.brand.show-pfau .nav-pfau{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.nav-pfau,.nav-pfau-wrap::before{transition:opacity 220ms linear}}
nav ul{display:flex;gap:var(--s4);list-style:none;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
nav a{padding-bottom:3px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap}
nav a:hover{color:var(--accent)}
nav a[aria-current="page"]{color:var(--accent);border-color:var(--accent)}
.nav-cta{font-family:var(--mono);font-weight:700;text-transform:uppercase;font-size:14px;background:var(--primary);color:#160F2E;padding:10px 18px;border:none;box-shadow:var(--shadow);transition:transform .1s,box-shadow .1s,filter .1s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,92,122,.5);filter:brightness(1.05)}
.burger{display:none;background:none;border:var(--bw) solid var(--border);color:var(--text);font-size:22px;width:46px;height:46px;border-radius:10px;cursor:pointer}

/* Foto-Banner (Anreise/Verpflegung) */
.photo-banner{position:relative;border:var(--bw) solid var(--border);border-radius:var(--radius);
  min-height:clamp(260px,38vw,420px);display:flex;align-items:flex-end;padding:var(--s4);
  color:#fff;overflow:hidden;box-shadow:var(--shadow)}
.photo-banner .cap{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:15px;position:relative;z-index:2}
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.photo-strip .photo-banner{min-height:clamp(180px,24vw,280px);padding:var(--s3)}
@media(max-width:760px){.photo-strip{grid-template-columns:repeat(2,1fr)}}

/* ===== BUTTONS ===== */
.btn{font-family:var(--mono);font-weight:700;text-transform:uppercase;font-size:15px;padding:16px 28px;border:none;cursor:pointer;transition:transform var(--dur-micro) var(--ease-signature),box-shadow var(--dur-micro) var(--ease-signature),filter var(--dur-micro) var(--ease-signature);display:inline-block}
.btn-slab{background:var(--primary);color:#160F2E;box-shadow:var(--shadow)}
.btn-slab:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(255,92,122,.45)}
.btn-gold{background:var(--accent);color:#160F2E;box-shadow:var(--shadow)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:var(--shadow-accent)}
.btn-outline{background:transparent;color:var(--text);border:var(--bw) solid var(--border)}
.btn-outline:hover{background:var(--secondary);border-color:var(--secondary);color:#fff;transform:translateY(-3px)}

/* @cap-feature(feature:F-001) Hero & Komet: .hero/.zf/.comet/.comet-x/.comet-y + reduced-motion-Fallback */
/* ===== HERO (Startseite) ===== */
.hero{padding:var(--s6) 0 var(--s5);position:relative;display:flex;align-items:center;gap:clamp(24px,4vw,64px);flex-wrap:wrap}
.hero .kicker{margin-bottom:var(--s3)}
.hero-title{font-size:clamp(54px,12vw,120px);line-height:.95;text-transform:uppercase;letter-spacing:-.03em;font-weight:700}
.hero-title .sei{color:var(--text)}
.zf-wrap{position:relative;display:inline-block}
.zf{color:transparent;-webkit-text-stroke:2px var(--text);display:inline-block;will-change:transform}
.zf.struck{
  -webkit-text-stroke:0;color:var(--accent);
  text-shadow:0 6px 0 rgba(0,0,0,.3), 0 0 26px rgba(255,200,87,.9), 0 0 60px rgba(255,200,87,.65), 0 0 120px rgba(255,170,60,.5);
  animation:zf-bounce .65s cubic-bezier(.34,1.56,.64,1);
}
@keyframes zf-bounce{0%{transform:scale(1)}30%{transform:scale(1.2)}55%{transform:scale(.92)}75%{transform:scale(1.06)}100%{transform:scale(1)}}

/* Komet */
/* Bogenflug: Wrapper bewegt X (ease-out), Komet bewegt Y (ease-in) -> gekrümmte Bahn */
.comet-path{position:absolute;left:44%;top:42%;z-index:3;pointer-events:none;
  animation:comet-x 2.6s linear .4s forwards}
.comet{position:relative;display:block;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fff 0%, var(--accent) 55%, var(--primary) 100%);
  box-shadow:0 0 22px 8px rgba(255,200,87,.85), 0 0 50px 14px rgba(122,92,255,.5);
  opacity:0;animation:comet-y 2.6s cubic-bezier(.5,.05,.6,.7) .4s forwards}
/* Schweif zeigt nach oben rechts (entgegen der Flugrichtung, zur Startecke) */
.comet::after{content:"";position:absolute;left:50%;top:calc(50% - 2.5px);width:300px;height:5px;
  transform-origin:left center;transform:rotate(-45deg);
  background:linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,200,87,.72) 22%, rgba(122,92,255,.28) 62%, transparent 100%);
  filter:blur(1px);border-radius:6px}
.comet.hit{animation:comet-hit .4s ease-out forwards}
/* fliegt von weit oben rechts (außerhalb des Bildschirms) auf das Wort */
@keyframes comet-x{0%{transform:translateX(62vw)}100%{transform:translateX(0)}}
@keyframes comet-y{0%{transform:translateY(-58vh) scale(.4);opacity:0}6%{opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes comet-hit{0%{transform:scale(1.6);opacity:1}100%{transform:scale(0);opacity:0}}

.hero-sub{max-width:54ch;margin-top:var(--s4);font-size:18px;color:var(--muted)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4);font-family:var(--mono);text-transform:uppercase;font-size:15px}
.hero-meta span{border:var(--bw) solid var(--border);padding:8px 14px;border-radius:10px;background:rgba(34,26,69,.6)}
.hero-meta span b{color:var(--accent)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

@media(prefers-reduced-motion:reduce){
  .comet{display:none}
  .zf{-webkit-text-stroke:0;color:var(--accent);text-shadow:0 6px 0 rgba(0,0,0,.28),0 0 34px rgba(255,200,87,.55)}
  .zf.struck{animation:none}
}

/* @cap-feature(feature:F-004) Pfau-Logo: weich maskiert, halbtransparent, sanftes Einblenden (logo-in) */
/* Pfau-Logo – eigene Spalte links neben dem Text, weich eingeblendet */
.hero-logo-wrap{position:relative;flex:0 0 auto;align-self:flex-start;margin:-56px 0 0 -34px;z-index:1}
.hero-logo{display:block;width:clamp(240px,35vw,500px);height:auto;
  opacity:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(circle at 50% 46%, #000 24%, rgba(0,0,0,.5) 45%, transparent 66%);
          mask:radial-gradient(circle at 50% 46%, #000 24%, rgba(0,0,0,.5) 45%, transparent 66%);
  animation:logo-in 2s ease .4s forwards}
@keyframes logo-in{to{opacity:.72}}
.logo-star{z-index:2}

/* @cap-feature(feature:F-014) Aurora-/Flow-Drift – weich eingeblendete Überlagerung rechts (Nordlicht):
   7 vertikal fließende, mittig gebündelte Stromlinien mit durchlaufendem Farbverlauf + driftende Glühschleier.
   Radial-Maske (rechts verankert) blendet zum Inhalt hin sanft aus -> KEINE harte Kante. z-index:-1, fix beim Scrollen. */
.hero-aurora{position:fixed;top:0;right:0;height:100vh;width:max(200px, calc((100vw - 1180px)/2));z-index:-1;pointer-events:none;
  -webkit-mask:radial-gradient(85% 72% at 50% 50%, #000 26%, rgba(0,0,0,.4) 58%, transparent 82%);
          mask:radial-gradient(85% 72% at 50% 50%, #000 26%, rgba(0,0,0,.4) 58%, transparent 82%)}
.aurora-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.95;
  filter:drop-shadow(0 0 7px rgba(122,92,255,.5)) drop-shadow(0 0 18px rgba(79,184,255,.25))}
.aurora-lines path{stroke-opacity:.64}
@property --ac{syntax:"<color>";inherits:false;initial-value:#7A5CFF}
@property --bx{syntax:"<percentage>";inherits:false;initial-value:50%}
@property --by{syntax:"<percentage>";inherits:false;initial-value:50%}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(34px);mix-blend-mode:screen;opacity:.18;
  background:radial-gradient(circle at var(--bx,50%) var(--by,50%),var(--ac,#7A5CFF),transparent 72%)}
.aurora-blob--1{width:68%;height:26%;left:16%;top:3%;animation:aurora-1 15s linear infinite,pulse-1 30s ease-in-out infinite,hot-1 22s ease-in-out infinite,blob-color 78s linear infinite}
.aurora-blob--2{width:62%;height:24%;left:19%;top:38%;--ac:#4FB8FF;animation:aurora-2 19s linear -6s infinite,pulse-2 40s ease-in-out -13s infinite,hot-2 29s ease-in-out -5s infinite,blob-color 78s linear -26s infinite}
.aurora-blob--3{width:66%;height:26%;left:17%;top:65%;--ac:#FF5C7A;animation:aurora-3 23s linear -11s infinite,pulse-3 50s ease-in-out -7s infinite,hot-3 25s ease-in-out -12s infinite,blob-color 78s linear -52s infinite}
/* Dezente Glas-Schicht über den Wellen: ~3% Tönung, leichter Weichzeichner, etwas gedämpfte Helligkeit/Farbe */
.aurora-glass{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(22,15,46,0.06);
  -webkit-backdrop-filter:blur(2.5px) brightness(0.92) saturate(0.88);
          backdrop-filter:blur(2.5px) brightness(0.92) saturate(0.88)}
@keyframes aurora-1{0%{transform:translate(0,0) scale(1.05)}25%{transform:translate(-34px,18px) scale(1.14)}50%{transform:translate(-2px,34px) scale(1.04)}75%{transform:translate(32px,14px) scale(1.14)}100%{transform:translate(0,0) scale(1.05)}}
@keyframes aurora-2{0%{transform:translate(0,0) scale(1)}25%{transform:translate(34px,-14px) scale(1.12)}50%{transform:translate(2px,-30px) scale(1)}75%{transform:translate(-32px,-12px) scale(1.12)}100%{transform:translate(0,0) scale(1)}}
@keyframes aurora-3{0%{transform:translate(0,0) scale(1.04)}25%{transform:translate(-30px,16px) scale(1.14)}50%{transform:translate(-2px,-16px) scale(1.04)}75%{transform:translate(30px,-10px) scale(1.12)}100%{transform:translate(0,0) scale(1.04)}}
/* Lichtflecken: sehr langsam & subtil, jede Animation eigenständig.
   - pulse-N: Helligkeit ganz langsam (30/40/50s, je eigenes Tempo -> nie synchron), Max ~0.24 (~30% von früher), nie ganz aus (Tief ~0.08-0.12)
   - hot-N: heller Kern wandert INNERHALB des Blobs (interne Intensität verschiebt sich), via --bx/--by
   - blob-color: Farbrotation Lila/Blau/Koralle, geteilt + 1/3 (26s) versetzt -> nie drei gleiche gleichzeitig (Farbe via --ac @property) */
@keyframes pulse-1{0%{opacity:.1}40%{opacity:.24}72%{opacity:.13}100%{opacity:.1}}
@keyframes pulse-2{0%{opacity:.12}48%{opacity:.22}100%{opacity:.12}}
@keyframes pulse-3{0%{opacity:.09}34%{opacity:.19}64%{opacity:.24}100%{opacity:.09}}
@keyframes hot-1{0%{--bx:34%;--by:64%}30%{--bx:58%;--by:50%}60%{--bx:44%;--by:36%}100%{--bx:34%;--by:64%}}
@keyframes hot-2{0%{--bx:60%;--by:40%}33%{--bx:40%;--by:58%}66%{--bx:56%;--by:64%}100%{--bx:60%;--by:40%}}
@keyframes hot-3{0%{--bx:42%;--by:60%}40%{--bx:62%;--by:46%}70%{--bx:38%;--by:40%}100%{--bx:42%;--by:60%}}
@keyframes blob-color{0%{--ac:#7A5CFF}28%{--ac:#7A5CFF}38%{--ac:#4FB8FF}61%{--ac:#4FB8FF}71%{--ac:#FF5C7A}94%{--ac:#FF5C7A}100%{--ac:#7A5CFF}}
@media(max-width:860px){.hero-aurora{display:none}}
@media(prefers-reduced-motion:reduce){.aurora-lines,.aurora-blob{animation:none}}

/* @cap-feature(feature:F-003) Sternenfeld: .star/.star.gold/.star.blue + @keyframes twinkle */
/* Glitzersterne im Hero-Hintergrund */
.hero-stars{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hero-content{flex:1 1 440px;min-width:0;position:relative;z-index:2}
.star{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7);
  opacity:0;animation:twinkle var(--dur,4s) ease-in-out infinite;animation-delay:var(--d,0s)}
.star.gold{background:var(--accent);box-shadow:0 0 9px 2px rgba(255,200,87,.85)}
.star.blue{background:var(--blue);box-shadow:0 0 9px 2px rgba(79,184,255,.8)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.35)}}
@media(prefers-reduced-motion:reduce){.star{animation:none;opacity:.6}}

/* @cap-feature(feature:F-003) Sternschnuppen: feine, kurze Schnuppe alle ~4-5 s über dem Twinkle-Feld (Spawner in app.js).
   Kopf = kleiner Punkt; ::before = dünner, zur Flugrichtung gedrehter Schweif. Variablen kommen pro Schnuppe aus JS. */
.shooting-star{position:absolute;width:var(--sz,2px);height:var(--sz,2px);border-radius:50%;
  background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.9);opacity:0;will-change:transform,opacity;
  animation:shoot var(--sdur,900ms) ease-out forwards}
.shooting-star::before{content:"";position:absolute;top:50%;right:50%;width:var(--len,60px);height:1px;
  transform-origin:right center;transform:translateY(-50%) rotate(var(--ang,30deg));
  background:linear-gradient(to left,rgba(255,255,255,.9),rgba(255,255,255,0))}
.shooting-star.gold{background:var(--accent);box-shadow:0 0 7px 2px rgba(255,200,87,.9)}
.shooting-star.gold::before{background:linear-gradient(to left,rgba(255,200,87,.9),rgba(255,200,87,0))}
@keyframes shoot{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--tx,90px),var(--ty,90px))}}
@media(prefers-reduced-motion:reduce){.shooting-star{display:none}}

/* ===== SECTIONS ===== */
section{padding:var(--s6) 0}
.page-head{padding:var(--s6) 0 var(--s4);position:relative;z-index:0}
/* @cap-feature(feature:F-003) Funkelsterne + Sternschnuppen im Titelbereich der Unterseiten (Sterne via app.js, hinter dem Titel). */
.title-stars{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.page-head h1{font-size:clamp(40px,8vw,84px);text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
.page-head h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--text);display:inline-block}
.page-head h1 em.struck{-webkit-text-stroke:0;color:var(--accent);
  text-shadow:0 0 14px rgba(255,200,87,.5), 0 0 34px rgba(255,200,87,.3);
  animation:zf-bounce .6s cubic-bezier(.34,1.56,.64,1)}
@media(prefers-reduced-motion:reduce){
  .page-head h1 em{-webkit-text-stroke:0;color:var(--accent);text-shadow:none}
  .page-head h1 em.struck{animation:none}
}
.page-head p{color:var(--muted);margin-top:var(--s3);max-width:60ch}
.sec-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
.sec-head h2{font-size:clamp(32px,6vw,60px);text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.sec-head .num{font-family:var(--mono);color:var(--primary);font-size:18px}

/* @cap-feature(feature:F-002) Countdown-Boxen (Glow-Panel + glow-wander weiter unten) */
/* ===== COUNTDOWN ===== */
.countdown{display:flex;gap:var(--s3);flex-wrap:wrap}
.cd-box{background:var(--surface);border:var(--bw) solid var(--border);box-shadow:var(--shadow);padding:var(--s3) var(--s4);text-align:center;min-width:104px}
.cd-box .n{font-size:48px;font-weight:700;line-height:1;color:var(--accent)}
.cd-box .l{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:6px}

/* @cap-feature(feature:F-006) Stimmungsgalerie: Mosaik-Grid + Themenkacheln */
/* ===== GALLERY (Stimmungsbilder) ===== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:var(--s3)}
.gallery-tile{position:relative;overflow:hidden;border:var(--bw) solid var(--border);display:flex;align-items:flex-end;padding:var(--s3);color:#fff;transition:transform .15s}
.gallery-tile:hover{transform:translateY(-4px)}
.gallery-tile .ico{position:absolute;top:14px;right:16px;font-size:34px;opacity:.9}
.gallery-tile .cap{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:14px;font-weight:700;position:relative;z-index:2}
.gallery-tile .ph-note{position:absolute;left:var(--s3);bottom:34px;font-size:11px;color:rgba(255,255,255,.6);font-family:var(--mono)}
.gallery-tile.big{grid-column:span 2;grid-row:span 2}
.gallery-tile.wide{grid-column:span 2}
.gallery-tile.tall{grid-row:span 2}
.g1{background:linear-gradient(135deg,#7A5CFF,#FF5C7A)}
.g2{background:linear-gradient(135deg,#FF5C7A,#FFC857)}
.g3{background:linear-gradient(135deg,#4FB8FF,#7A5CFF)}
.g4{background:linear-gradient(135deg,#241A45,#7A5CFF)}
.g5{background:linear-gradient(135deg,#FFC857,#FF5C7A)}
.g6{background:linear-gradient(135deg,#7A5CFF,#4FB8FF)}

/* @cap-feature(feature:F-005) Story-Sektion: Intro + abwechselnd angeordnete Bild-Text-Reihen */
/* ===== ATMOSPHÄRE / STORY ===== */
.story-intro{font-size:clamp(22px,3.4vw,34px);line-height:1.35;max-width:24ch;color:var(--text);font-weight:500;margin-bottom:var(--s6)}
.story{display:grid;gap:clamp(44px,7vw,96px)}
.story-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,56px);align-items:center}
.story-row:nth-child(even) .story-img{order:2}
.story-img{position:relative;border:var(--bw) solid var(--border);border-radius:var(--radius);
  min-height:300px;display:flex;align-items:flex-end;padding:var(--s4);overflow:hidden;color:#fff}
.story-img .ph-note{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.65)}
.story-img .cap{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:15px}
.story-text .kicker{color:var(--secondary)}
.story-text h3{font-size:clamp(26px,4vw,42px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;margin-top:6px}
.story-text p{color:var(--muted);margin-top:var(--s3);font-size:17px;max-width:46ch}
@media(max-width:760px){
  .story-row{grid-template-columns:1fr}
  .story-row:nth-child(even) .story-img{order:0}
}

/* @cap-feature(feature:F-009) Line-Up-Timetable: .day-block/.timetable/.tt-slot */
/* ===== LINE-UP TIMETABLE ===== */
.day-tabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.day-tabs a{font-family:var(--mono);text-transform:uppercase;font-size:14px;letter-spacing:.06em;padding:10px 18px;border:var(--bw) solid var(--border);border-radius:999px;color:var(--muted)}
.day-tabs a:hover{color:var(--text);border-color:var(--secondary)}
.day-block{margin-bottom:var(--s5);padding:0}
.day-block h2{font-size:clamp(30px,6vw,52px);text-transform:uppercase;line-height:1;border-left:5px solid var(--accent);padding-left:var(--s3)}
.day-block .date{font-family:var(--mono);color:var(--muted);font-size:14px;margin:6px 0 var(--s4) var(--s3)}
/* @cap-feature(feature:F-009) Prinzip-Hinweis: editorialer Hinweis über dem Line-Up (kein starres Zeitraster) */
.zf-principle{max-width:760px;margin:0 0 var(--s5);padding:clamp(22px,3vw,34px) clamp(24px,3.4vw,40px);background:linear-gradient(155deg,var(--surface),var(--bg2));border:var(--bw) solid var(--border);border-left:5px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow);transition:translate var(--dur-micro) var(--ease-signature),box-shadow var(--dur-micro) var(--ease-signature),border-color var(--dur-micro) var(--ease-signature)}
.zf-principle:hover{translate:0 -6px;border-color:var(--accent);box-shadow:var(--shadow),0 0 0 1.5px rgba(255,200,87,.35),0 16px 48px rgba(255,200,87,.18),0 0 64px rgba(122,92,255,.16)}
/* @cap-feature(feature:F-009) Künstler-Popup (Modal): Bild + Bio + Links */
.artist-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px);background:rgba(8,5,20,.80);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .28s var(--ease-signature),visibility .28s}
.artist-modal.open{opacity:1;visibility:visible}
.artist-modal__panel{position:relative;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(18px,3vw,34px);width:min(900px,100%);max-height:88vh;overflow:auto;background:linear-gradient(160deg,var(--surface),var(--bg2));border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(20px,3vw,36px);translate:0 14px;transition:translate .3s var(--ease-signature)}
.artist-modal.open .artist-modal__panel{translate:0 0}
.artist-modal__media img{width:100%;height:auto;display:block;border-radius:calc(var(--radius) - 4px);border:var(--bw) solid var(--border)}
.artist-modal__genre{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--accent)}
.artist-modal__name{font-size:clamp(26px,4vw,38px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;margin:4px 0 var(--s3)}
.artist-modal__bio{color:var(--muted);font-size:15.5px;line-height:1.62}
.artist-modal__bio p{margin-bottom:var(--s2)}
.artist-modal__bio strong{color:var(--text)}
.artist-modal__links{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.artist-modal__links .btn{font-size:14px;padding:10px 18px}
.artist-modal__close{position:absolute;top:clamp(14px,3vw,24px);right:clamp(14px,3vw,28px);z-index:2;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:var(--bw) solid var(--border);background:rgba(13,10,32,.72);color:var(--text);font-size:24px;line-height:1;cursor:pointer;transition:border-color var(--dur-micro),color var(--dur-micro),transform var(--dur-micro)}
.artist-modal__close:hover{border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}
@media(max-width:640px){.artist-modal__panel{grid-template-columns:1fr;gap:var(--s3)}.artist-modal__media img{max-height:46vh;width:auto;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.artist-modal,.artist-modal__panel{transition:none}.artist-modal__panel{translate:0 0}.artist-modal__close:hover{transform:none}}
/* Medienpartner-Sektion (in dieser Beispielseite nicht verwendet) */
.partner-sec{margin-bottom:var(--s6)}
.partner-card{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(22px,4vw,52px);align-items:center;background:linear-gradient(155deg,var(--surface),var(--bg2));border:var(--bw) solid var(--border);border-radius:var(--radius);padding:clamp(22px,3.4vw,40px);box-shadow:var(--shadow)}
.partner-logo{display:block;background:#fff;border-radius:14px;padding:clamp(16px,2vw,24px);box-shadow:0 10px 28px rgba(0,0,0,.4);transition:translate var(--dur-micro) var(--ease-signature),box-shadow var(--dur-micro) var(--ease-signature)}
.partner-logo img{width:100%;height:auto;display:block}
.partner-logo:hover{translate:0 -4px;box-shadow:0 16px 38px rgba(255,92,122,.32),0 0 0 1.5px rgba(255,92,122,.45)}
.partner-text p{color:var(--muted);font-size:16px;line-height:1.62;margin-bottom:var(--s2);max-width:56ch}
.partner-text p strong{color:var(--text)}
.partner-text .btn{margin-top:var(--s2)}
@media(max-width:680px){.partner-card{grid-template-columns:1fr;gap:var(--s3)}}
@media(prefers-reduced-motion:reduce){.partner-logo:hover{translate:none}}
.zf-principle__tag{display:inline-block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--accent);margin-bottom:var(--s3)}
.zf-principle__lead{font-size:clamp(20px,2.6vw,27px);line-height:1.35;color:var(--text);font-weight:500;max-width:40ch}
.zf-principle__lead strong{color:var(--accent);font-weight:700}
.zf-principle__sub{color:var(--muted);margin-top:var(--s3);font-size:16px;line-height:1.6;max-width:56ch}
.timetable{display:grid;gap:var(--s2)}
.tt-slot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3);background:var(--surface);border:var(--bw) solid var(--border);padding:var(--s3) var(--s4);cursor:pointer;transition:translate var(--dur-micro) var(--ease-signature),border-color var(--dur-micro) var(--ease-signature),box-shadow var(--dur-micro) var(--ease-signature)}
.tt-slot:hover{translate:0 -4px;border-color:var(--accent);box-shadow:0 0 0 1.5px rgba(255,200,87,.4),0 10px 24px rgba(255,200,87,.2),0 0 44px rgba(255,200,87,.14)}
.tt-slot .time{font-family:var(--mono);font-weight:700;color:var(--accent);font-size:18px}
.tt-slot .who h3{font-size:22px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.tt-slot .who p{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:2px}
.tt-slot .who .head{font-size:11px;color:var(--primary);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.tt-slot .arr{color:var(--secondary);font-size:20px}

/* @cap-feature(feature:F-007) Teaser- & Feat-Karten — geteilt von F-010 Programm und F-011 Verpflegung */
/* ===== PROGRAMM / FEAT CARDS ===== */
.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3)}
.feat{border:var(--bw) solid var(--border);padding:var(--s4);background:var(--surface);transition:transform .12s,border-color .12s}
.feat:hover{transform:translateY(-4px);border-color:var(--secondary);background:var(--surface2)}
.feat .ico{font-size:42px;line-height:1}
.feat h3{text-transform:uppercase;font-size:22px;margin-top:var(--s3)}
.feat p{color:var(--muted);margin-top:var(--s2);font-size:15px}
.feat .by{font-family:var(--mono);font-size:12px;color:var(--accent);margin-top:var(--s2);text-transform:uppercase;letter-spacing:.06em}

/* @cap-feature(feature:F-008) Tickets: .tickets-sec/.tier/.tier.hot */
/* ===== TICKETS ===== */
.tickets-sec{padding:var(--s6) 0}
.ticket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3)}
.tier{position:relative;background:var(--surface);border:var(--bw) solid var(--border);padding:var(--s4);box-shadow:var(--shadow)}
.tier.hot{background:linear-gradient(160deg,var(--accent),#ffb13d);color:#160F2E;border-color:transparent}
.tier .name{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:14px;margin-bottom:var(--s2)}
.tier .price{font-size:54px;font-weight:700;line-height:1}
.tier ul{list-style:none;font-family:var(--mono);font-size:13px;margin:var(--s3) 0;display:grid;gap:6px}
.tier ul li::before{content:"▸ ";color:var(--primary)}
.tier.hot ul li::before{color:#160F2E}

/* @cap-feature(feature:F-012) Anreise/Infos: .info-grid/.map/.info-item (OpenStreetMap-Link, kein Tracking) */
/* ===== INFO / MAP ===== */
.info-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s4)}
.map{border:var(--bw) solid var(--border);box-shadow:var(--shadow);background:var(--surface);min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--s4);position:relative;overflow:hidden}
.map .mapnote{font-family:var(--mono);font-size:12px;color:var(--muted);position:absolute;bottom:12px}
.info-list{display:grid;gap:var(--s3)}
.info-item{border-left:4px solid var(--secondary);padding:var(--s3);background:var(--surface)}
.info-item h4{font-family:var(--mono);text-transform:uppercase;font-size:14px;letter-spacing:.08em;color:var(--accent)}
.info-item p{color:var(--muted);margin-top:6px}

/* @cap-feature(feature:F-013) Footer (Social, Rechtliches, Credit) */
/* ===== FOOTER ===== */
footer{border-top:var(--bw) solid var(--border);padding:var(--s5) 0 var(--s4);font-family:var(--mono);font-size:14px;margin-top:var(--s5);
  /* der ganz untere Seitenbereich einen Tick dunkler – dezenter Abdunkler zur Unterkante hin (erdet die Seite) */
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 100%)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4)}
footer a:hover{color:var(--accent)}
.foot-col h2{color:var(--accent);text-transform:uppercase;margin:0 0 var(--s2);font-size:13px;letter-spacing:.08em;font-weight:700}
.foot-col a{display:inline-block;padding:6px 0}
main{display:block}
.foot-legal a{border-bottom:2px solid var(--primary);display:inline-block;margin-top:4px}
.credit{margin-top:var(--s4);color:var(--muted);font-size:12px}
.credit b{color:var(--accent)}
.credit-logo{display:inline-block;vertical-align:middle;margin-left:8px;border-radius:8px;overflow:hidden;line-height:0;transition:translate var(--dur-micro) var(--ease-signature),box-shadow var(--dur-micro) var(--ease-signature)}
.credit-logo img{height:30px;width:auto;display:block}
.credit-logo:hover{translate:0 -2px;box-shadow:0 0 0 1.5px rgba(255,200,87,.45),0 8px 22px rgba(255,200,87,.30),0 0 38px rgba(255,200,87,.20)}

/* @cap-feature(feature:F-014) Scroll-Reveal: .reveal/.reveal.in + reduced-motion-Fallback (Logik in app.js) */
/* ===== SCROLL-REVEAL (von rechts einziehen) ===== */
/* Fallback (Browser OHNE scroll-driven animations): einmaliges Reinblenden via IntersectionObserver.
   .in MUSS nach den Richtungs-Varianten stehen, sonst überschreibt z. B. .from-bottom das .in (gleiche Spezifität). */
.reveal{opacity:0;transform:translateX(140px);transition:opacity var(--dur-enter) var(--ease-signature),transform var(--dur-enter) var(--ease-signature)}
.reveal.from-left{transform:translateX(-140px)}
.reveal.from-bottom{transform:translateY(90px)}
.reveal.in{opacity:1;transform:none}

/* Bevorzugt: native, SCROLL-GETRIEBENE, symmetrische Bewegung (Chrome 115+, Lenis treibt nativen Scroll):
   runterscrollen -> unten kommt Neues rein UND oben geht Altes raus; hochscrollen -> exakt umgekehrt.
   Kontinuierlich an die Scrollposition gekoppelt -> beide Richtungen gleich, gleichzeitig rein+raus. */
@supports (animation-timeline: view()){
  .reveal{opacity:1;transform:none;transition:translate var(--dur-micro) var(--ease-signature),box-shadow var(--dur-micro) var(--ease-signature),border-color var(--dur-micro) var(--ease-signature);animation:zf-flow linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes zf-flow{
    0%{opacity:0;transform:translateY(70px)}      /* tritt von UNTEN ein */
    14%{opacity:1;transform:translateY(0)}         /* eingerastet */
    80%{opacity:1;transform:translateY(0)}         /* ruht lange (Luft in der Mitte zum Betrachten) */
    95%{opacity:0;transform:translateY(-60px)}     /* nach OBEN raus – später startend & dezenter */
    100%{opacity:0;transform:translateY(-60px)}    /* gehalten bis ganz oben weg */
  }
}

/* Hero: einmalige, gestaffelte Lade-Einblendung – ZEITBASIERT (nicht scroll-gekoppelt),
   damit der Hero am Seitenanfang nicht durch die Scroll-Animation verrutscht. */
.hero-rise{animation:hero-rise .85s var(--ease-signature) both}
.hero-rise.r2{animation-delay:.12s}
.hero-rise.r3{animation-delay:.24s}
.hero-rise.r4{animation-delay:.36s}
@keyframes hero-rise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-rise{animation:none;opacity:1}}

/* @cap-feature(feature:F-002) Glasmorphism-Glow-Panel: Backdrop-Blur + @keyframes glow-wander */
/* ===== GLASMORPHISM-GLOW-PANEL (Countdown) ===== */
.glow-panel{position:relative;padding:var(--s5) var(--s4);border-radius:26px;
  background:rgba(40,30,80,.4);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.glow-panel{overflow:hidden}
.glow-panel::before{content:"";position:absolute;inset:-35%;z-index:-1;
  background:radial-gradient(38% 48% at 50% 50%, rgba(255,170,60,.65), rgba(122,92,255,.40) 48%, transparent 74%);
  filter:blur(52px);opacity:.95;will-change:transform;
  animation:glow-wander 30s ease-in-out infinite}
@keyframes glow-wander{
  0%   {transform:translate(-14%,-7%) scale(1)}
  25%  {transform:translate(12%,9%)  scale(1.08)}
  50%  {transform:translate(16%,-9%) scale(1)}
  75%  {transform:translate(-9%,11%) scale(1.06)}
  100% {transform:translate(-14%,-7%) scale(1)}
}
@media(prefers-reduced-motion:reduce){.glow-panel::before{animation:none}}
.glow-panel .sec-head{margin-bottom:var(--s4)}
.glow-panel .cd-box{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none;backdrop-filter:blur(4px)}

@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;animation:none}}

/* === Hover-Hervorhebung (Experiment „Smooth Scroll") – Lift über `translate` (KEIN Konflikt mit der scroll-getriebenen `transform`-Animation) ===
   Pro Typ unterschiedlich abgestimmt: */
/* Bilder (.zoomable): KEIN goldener Rahmen – nur ein weicher, gleichmäßig nach außen strahlender Schein;
   hebt weiter nach vorne (-12px) und etwas langsamer/smoother. Cursor bleibt zoom-in. */
.zoomable{cursor:zoom-in;transition:translate 360ms var(--ease-signature),box-shadow 360ms var(--ease-signature)}
.zoomable:hover{translate:0 -12px;box-shadow:0 0 46px rgba(255,200,87,.40),0 0 92px rgba(255,200,87,.22)}
/* Feature-Karten + aktive Ticket-Karten: schneller Lift + goldener Rahmen (gewünscht). „Vorverkauf beendet" (.tier--past) ausgenommen -> bleibt inaktiv. */
.feat,.tier:not(.tier--past){cursor:pointer;transition:translate var(--dur-micro) var(--ease-signature),box-shadow var(--dur-micro) var(--ease-signature),border-color var(--dur-micro) var(--ease-signature),background var(--dur-micro) var(--ease-signature)}
.feat:hover,.tier:not(.tier--past):hover{translate:0 -6px;box-shadow:0 0 0 1.5px rgba(255,200,87,.5),0 12px 28px rgba(255,200,87,.22),0 0 52px rgba(255,200,87,.16)}
/* Hot-Ticket „Aktuell gültig": der vorhandene Schein wird beim Hover deutlich stärker (Karte ist schon gold -> kein Rahmen) */
.tier.hot:hover{box-shadow:0 26px 78px rgba(255,200,87,.62),0 0 64px rgba(255,200,87,.46)}
@media(prefers-reduced-motion:reduce){.zoomable:hover,.feat:hover,.tier:hover,.tt-slot:hover,.zf-principle:hover,.credit-logo:hover{translate:none}}

/* Magnetic-Button (Haupt-CTA folgt leicht dem Cursor – JS in app.js) + goldener Schein */
.btn-magnetic{will-change:translate}
.btn-magnetic:hover{box-shadow:0 10px 26px rgba(255,200,87,.42)}

/* @cap-feature(feature:F-002) „Time stops in"-Panel: Hover hebt es leicht nach vorne, Rahmen + Zahlen leuchten auf, Innen-Glow wird kräftiger.
   Lift über `translate` (KEIN Konflikt mit der scroll-getriebenen `transform`-Animation der .reveal). */
.glow-panel{transition:translate 340ms var(--ease-signature),box-shadow 340ms var(--ease-signature),border-color 340ms var(--ease-signature),background 340ms var(--ease-signature)}
.glow-panel::before{transition:opacity 340ms var(--ease-signature),filter 340ms var(--ease-signature)}
.glow-panel .cd-box{transition:box-shadow 300ms var(--ease-signature),border-color 300ms var(--ease-signature),background 300ms var(--ease-signature)}
.glow-panel .cd-box .n{transition:text-shadow 300ms var(--ease-signature),color 300ms var(--ease-signature)}
.glow-panel:hover{translate:0 -6px;background:rgba(48,36,96,.5);border-color:rgba(255,200,87,.55);
  box-shadow:0 18px 48px rgba(0,0,0,.34),0 0 60px rgba(255,200,87,.30),inset 0 1px 0 rgba(255,255,255,.16)}
.glow-panel:hover::before{opacity:1;filter:blur(46px)}
.glow-panel:hover .cd-box{background:rgba(255,255,255,.12);border-color:rgba(255,200,87,.42);box-shadow:0 0 22px rgba(255,200,87,.18)}
.glow-panel:hover .cd-box .n{text-shadow:0 0 18px rgba(255,200,87,.75),0 0 34px rgba(255,200,87,.42)}
@media(prefers-reduced-motion:reduce){.glow-panel:hover{translate:none}}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .gallery-tile.big{grid-column:span 2;grid-row:span 1}
  .info-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nav-inner{display:flex;justify-content:space-between}
  nav ul{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;background:var(--bg);border-bottom:var(--bw) solid var(--border);padding:var(--s3) 6vw;transform:translateY(-130%);transition:transform .25s;z-index:40}
  nav ul.open{transform:translateY(0)}
  nav ul li{padding:14px 0;border-bottom:1px solid var(--border)}
  .burger{display:block}
  .nav-wave{display:none}
  .tt-slot{grid-template-columns:1fr auto;gap:var(--s2)}
  .tt-slot .arr{display:none}
}

/* @cap-feature(feature:F-001) Mini-Komet-Einschlag auf Triggerwort der Unterseiten (schwächeres Leuchten als im Hero) */
.strike-wrap{position:relative;display:inline-block}
.mini-comet-path{position:absolute;right:4%;top:2%;z-index:4;pointer-events:none;opacity:0}
.strike-wrap.is-striking .mini-comet-path{animation:minicomet 1s cubic-bezier(.45,0,.7,.4) forwards}
.mini-comet{display:block;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fff,var(--accent) 55%,var(--primary));
  box-shadow:0 0 14px 5px rgba(255,200,87,.85),0 0 30px 9px rgba(122,92,255,.45)}
.mini-comet::after{content:"";position:absolute;left:50%;top:50%;width:150px;height:4px;
  transform-origin:left center;transform:translateY(-50%) rotate(-45deg);
  background:linear-gradient(to right,rgba(255,255,255,.95),rgba(255,200,87,.7) 24%,rgba(122,92,255,.25) 60%,transparent);
  filter:blur(1px);border-radius:6px}
@keyframes minicomet{0%{transform:translate(150px,-140px) scale(.4);opacity:0}12%{opacity:1}100%{transform:translate(0,0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.strike-wrap.is-striking .mini-comet-path{animation:none;opacity:0}}

/* Schwebende Musiknoten (Programm-Seite, vom Wort „Musik") */
.note{position:absolute;left:50%;bottom:8%;font-size:22px;line-height:1;pointer-events:none;z-index:3;
  color:var(--accent);text-shadow:0 0 10px rgba(255,200,87,.55);opacity:0;will-change:transform,opacity}
@keyframes notefloat{
  0%{opacity:0;transform:translate(-50%,0) rotate(0) scale(.5)}
  18%{opacity:.95}
  100%{opacity:0;transform:translate(calc(-50% + var(--nx,0px)),-150px) rotate(var(--nr,18deg)) scale(1)}}

/* Tickets: aktuelles Ticket hervorheben, abgelaufenes zurücknehmen */
.tier.hot{background:linear-gradient(160deg,var(--accent),#ffb13d);color:#160F2E;border-color:transparent;
  box-shadow:0 22px 60px rgba(255,200,87,.4)}
.tier.hot::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:radial-gradient(60% 80% at 50% 0%,rgba(255,200,87,.55),transparent 70%);filter:blur(26px)}
.tier--past{opacity:.55;filter:saturate(.55)}
.tier--past .price s{text-decoration-thickness:3px;text-decoration-color:var(--primary)}
.tier-flag{position:absolute;top:-12px;left:var(--s4);font-family:var(--mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;padding:5px 11px;border-radius:999px;
  background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.tier-flag--now{background:var(--primary);color:#fff;border-color:transparent}
.tier.hot .tier-flag--now{background:#160F2E;color:var(--accent)}
/* Vergünstigtes Anwohner-Tagesticket (nur für die Region) */
.tier--local{border-color:var(--secondary);box-shadow:0 16px 40px rgba(122,92,255,.22)}
.tier--local .price{color:var(--secondary);font-size:44px}
.tier--local ul li::before{color:var(--secondary)}
.tier-flag--local{background:var(--secondary);color:#fff;border-color:transparent}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;cursor:not-allowed}

/* @cap-feature(feature:F-006) Lightbox: anklickbare Fotos öffnen vergrößerte Pop-up-Ansicht */
.zoomable{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:6vw;background:rgba(8,6,20,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lightbox.open{display:flex}
.lightbox figure{margin:0;display:flex;flex-direction:column;gap:var(--s3);align-items:center;max-width:min(880px,92vw)}
.lightbox img{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:14px;
  border:var(--bw) solid var(--secondary);box-shadow:0 30px 90px rgba(0,0,0,.65)}
.lightbox figcaption{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--text);text-align:center}
.lightbox-close{position:absolute;top:18px;right:22px;width:48px;height:48px;border-radius:50%;
  border:var(--bw) solid var(--border);background:rgba(34,26,69,.85);color:var(--text);font-size:24px;line-height:1;cursor:pointer}
.lightbox-close:hover{border-color:var(--accent);color:var(--accent)}

/* Flyer-Poster (Line-Up) */
.flyer-sec{text-align:center}
.flyer-poster{display:inline-block;width:clamp(240px,42vw,360px)}
.flyer-poster img{width:100%;height:auto;border-radius:14px;border:var(--bw) solid var(--secondary);box-shadow:var(--shadow);transition:transform .15s}
.flyer-poster:hover img{transform:translateY(-5px)}
@media(max-width:680px){.flyer-poster{width:100%;max-width:300px}}

/* @cap-feature(feature:F-016) Rechtsseiten (AC-2): ruhiges, einspaltiges Textlayout für Rechtstexte */
.legal-content{max-width:70ch;margin-bottom:var(--s6)}
.legal-content h2{font-size:clamp(19px,2.4vw,24px);text-transform:uppercase;letter-spacing:.02em;margin:var(--s5) 0 var(--s2)}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-size:16px;font-family:var(--mono);letter-spacing:.04em;color:var(--accent);margin:var(--s4) 0 var(--s1)}
.legal-content p,.legal-content ul{color:var(--muted);margin-bottom:var(--s3)}
.legal-content ul{padding-left:1.3em}
.legal-content li{margin-bottom:var(--s1)}
.legal-content a{color:var(--accent);border-bottom:1px solid rgba(255,200,87,.4);transition:border-color .15s}
.legal-content a:hover{border-bottom-color:var(--accent)}
.legal-content address{font-style:normal;color:var(--muted);margin-bottom:var(--s3)}
/* Auffällige „NACHTRAGEN“-Platzhalter: gewollt grell, damit der Launch-Check sie sicher findet */
.legal-content .nachtragen{font-family:var(--mono);font-weight:700;color:var(--primary)}

/* Demo-Beispielseite: tote Navigations-/Teaser-Links ohne Ziel sollen kein Klick-Affordance zeigen.
   .nav-dead = tote Nav-Links (Cursor + kein Hover-Akzent); .is-dead = tote Teaser-Karten (nur Cursor, Hover-Optik bleibt). */
.nav-dead{cursor:default}
.nav-dead:hover{color:inherit;border-color:transparent}
.is-dead{cursor:default}