/* ════════════════════════════════════════════════════════════════════
   NOSA RAP — „GOLDLICHT v2"  ·  Veredelungs-Layer (nach styles.css geladen)
   Bringt Atmosphäre (driftendes Goldlicht + Filmkorn + Vignette),
   Poster-Typografie (Foil-Schimmer, Outline-Echo), redaktionelle
   Sektions-Möbel und reichere Mikro-Interaktionen.
   Rein additiv · GPU-only · reduced-motion- & reduced-data-sicher.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --foil: linear-gradient(100deg,#b8862b 0%,#f4d98c 20%,#fff6dd 38%,#e7b43c 56%,#b8862b 78%,#f4d98c 100%);
  --glow-gold: 0 0 0 1px rgba(231,180,60,.14), 0 36px 80px -40px rgba(0,0,0,.92);
}

/* ═══════════════ ATMOSPHÄRE — das eigentliche „Goldlicht" ═══════════════
   Fixe Ebene HINTER dem Inhalt. Transparente Sektionen lassen das Gold
   durchscheinen; massive Bänder (ticker, --lift, Karten) decken es ab →
   Rhythmus aus Licht und Tiefe. */
.atmos{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; contain:strict; }
.atmos__bloom{ position:absolute; border-radius:50%; filter:blur(72px); mix-blend-mode:screen; will-change:transform; }
.atmos__bloom.b1{ width:62vw; height:62vw; left:-14vw; top:-12vw;
  background:radial-gradient(circle at 50% 50%, rgba(244,217,140,.50), rgba(231,180,60,.20) 42%, transparent 70%);
  animation:bloom1 28s var(--ease) infinite alternate; }
.atmos__bloom.b2{ width:50vw; height:50vw; right:-16vw; top:30vh;
  background:radial-gradient(circle at 50% 50%, rgba(231,180,60,.40), rgba(184,134,43,.16) 46%, transparent 72%);
  animation:bloom2 34s var(--ease) infinite alternate; }
.atmos__bloom.b3{ width:56vw; height:56vw; left:20vw; bottom:-26vw;
  background:radial-gradient(circle at 50% 50%, rgba(244,217,140,.28), rgba(231,180,60,.12) 50%, transparent 74%);
  animation:bloom3 40s var(--ease) infinite alternate; }
@keyframes bloom1{ from{transform:translate3d(0,0,0) scale(1);}    to{transform:translate3d(7vw,5vh,0) scale(1.2);} }
@keyframes bloom2{ from{transform:translate3d(0,0,0) scale(1.06);} to{transform:translate3d(-6vw,-7vh,0) scale(.88);} }
@keyframes bloom3{ from{transform:translate3d(0,0,0) scale(1);}    to{transform:translate3d(5vw,-5vh,0) scale(1.16);} }

/* Vignette — Ränder vertiefen, Mitte fokussieren */
.atmos__vignette{ position:absolute; inset:0;
  background:radial-gradient(135% 105% at 50% 16%, transparent 36%, rgba(7,7,8,.5) 86%, rgba(5,5,6,.82)); }

/* Filmkorn über der ganzen Seite — kinematische Textur */
.atmos__grain{ position:absolute; inset:-50%; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px; animation:grainshift 5s steps(6) infinite; }
@keyframes grainshift{
  0%{transform:translate(0,0)} 20%{transform:translate(-7%,4%)} 40%{transform:translate(6%,-6%)}
  60%{transform:translate(-4%,7%)} 80%{transform:translate(7%,2%)} 100%{transform:translate(0,0)} }

@media (prefers-reduced-motion: reduce){ .atmos__bloom,.atmos__grain{ animation:none !important; } }
@media (prefers-reduced-data: reduce){ .atmos__grain{ display:none; } .atmos__bloom{ animation:none !important; } }

/* ═══════════════ TYPOGRAFIE — Poster-Foil & Schärfe ═══════════════ */
/* Goldtext bekommt einen langsam wandernden Foil-Schimmer */
.gold-text{
  background:var(--foil); background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:foil 7.5s linear infinite;
}
@keyframes foil{ to{ background-position:-230% 0; } }
@media (prefers-reduced-motion: reduce){
  .gold-text{ animation:none; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; }
}
/* Sektions-Headlines größer & straffer */
.h2{ font-size:clamp(3rem, 8.4vw, 6.6rem); letter-spacing:-.006em; }
.section__lead{ font-size:1.12rem; }

/* ═══════════════ HERO — Signatur ═══════════════ */
.hero__title{ position:relative; }
.hero__title .line{ position:relative; }
/* Outline-„Echo" hinter jeder Zeile → siebdruckartige Poster-Tiefe */
.hero__title .line[data-text]::before{
  content:attr(data-text); position:absolute; left:.06em; top:.05em; z-index:-1;
  -webkit-text-stroke:2px rgba(231,180,60,.22); color:transparent; pointer-events:none;
}
.hero__title .line.gold-text{ filter:drop-shadow(0 8px 34px rgba(231,180,60,.28)); }
/* warmes Streiflicht über dem Hero */
.hero__scrim{
  background:
    linear-gradient(to top, var(--ink) 3%, rgba(11,11,12,.26) 46%, rgba(11,11,12,.5) 100%),
    radial-gradient(120% 86% at 80% 6%, rgba(244,217,140,.22), transparent 50%),
    radial-gradient(120% 80% at 50% 122%, rgba(231,180,60,.18), transparent 60%);
}
.hero__tag strong{ position:relative; }

/* ═══════════════ BUTTONS — Gold-Sweep ═══════════════ */
.btn{ position:relative; overflow:hidden; }
.btn--gold::after{
  content:''; position:absolute; inset:0; transform:translateX(-130%); pointer-events:none;
  background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
  transition:transform .65s var(--ease);
}
.btn--gold:hover::after{ transform:translateX(130%); }
.btn--gold:hover{ transform:translateY(-2px); }
.btn--ghost{ z-index:0; }
.btn--ghost::before{
  content:''; position:absolute; inset:0; z-index:-1; transform:scaleX(0); transform-origin:left;
  background:var(--grad-gold); transition:transform .38s var(--ease);
}
.btn--ghost:hover{ color:#1a1304; border-color:transparent; }
.btn--ghost:hover::before{ transform:scaleX(1); }

/* ═══════════════ KARTEN / KACHELN — Tiefe & Gold-Kante ═══════════════ */
.artist{ position:relative; transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.artist:hover{ transform:translateY(-5px); border-color:rgba(231,180,60,.4); box-shadow:var(--glow-gold); }
.artist__photo{ transition:filter .6s var(--ease), transform .6s var(--ease); }
.artist:hover .artist__photo{ filter:saturate(1.07) contrast(1.04); }
/* Gold-Eckwinkel auf Roster-Karten */
.artist::before,.artist::after{ content:''; position:absolute; width:18px; height:18px; opacity:.45; transition:opacity .3s var(--ease); z-index:3; pointer-events:none; }
.artist::before{ top:12px; left:12px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); }
.artist::after{ right:12px; bottom:12px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); }
.artist:hover::before,.artist:hover::after{ opacity:1; }

.card{ transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover{ box-shadow:0 34px 76px -38px rgba(0,0,0,.92); }
.date{ transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.date:hover{ box-shadow:0 0 0 1px rgba(231,180,60,.16), 0 20px 44px -30px rgba(0,0,0,.85); }

/* Stat-Zahlen bekommen den Foil-Look beim Hovern der Box */
.stat{ transition:background .3s var(--ease); }
.stat:hover{ background:var(--ink-3); }

/* ═══════════════ REDAKTIONELLE SEKTIONEN — Ghost-Wort + Kapitel-Index ═══════════════
   Riesiges Outline-„Geisterwort" hinter jeder Headline bricht den monotonen
   Rhythmus und gibt Magazin-Tiefe. Pro Sektion via --ghost / --num gesetzt —
   komplett in CSS, ohne HTML-Änderung. */
.section{ overflow:hidden; }
.section > .container{ position:relative; z-index:1; }
.section__head{ position:relative; }
.section__head::before{
  content:var(--num,""); display:block; position:relative; z-index:1;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.36em; color:var(--gold-deep); margin-bottom:.55rem;
}
.section__head .eyebrow{ position:relative; z-index:1; }
/* Ghost-Wort sitzt jetzt HINTER der Headline (an .h2 gekoppelt) — nie über
   Eyebrow/Nummer. Kleiner, dezenter, sauber gestapelt → behebt das Text-Overlap. */
.section__head .h2{ position:relative; z-index:1; }
.section__head .h2::before{
  content:var(--ghost,"");
  /* Moderne Browser: leerer Alternativtext → Screenreader lesen das
     dekorative Geisterwort nicht mit (alte Browser nutzen die Zeile darüber). */
  content:var(--ghost,"") / "";
  position:absolute; left:-.03em; top:50%;
  transform:translateY(-52%); z-index:-1;
  font-family:'Bebas Neue',sans-serif; line-height:.72; white-space:nowrap;
  font-size:clamp(4.5rem,12vw,9rem); letter-spacing:.01em;
  color:transparent; -webkit-text-stroke:1.5px rgba(244,239,230,.05);
  pointer-events:none; user-select:none;
}
#ueber   .section__head{ --ghost:"Wir";     --num:"Nº 01"; }
#musik   .section__head{ --ghost:"Klang";   --num:"Nº 02"; }
#news    .section__head{ --ghost:"Presse";  --num:"Nº 03"; }
#termine .section__head{ --ghost:"Bühne";   --num:"Nº 04"; }
#kontakt .section__head{ --ghost:"Booking"; --num:"Nº 05"; }
/* Gleiche Geisterwörter nochmals als Literal MIT leerem Alternativtext:
   Chromium wertet  var() / ""  nicht aus, Literale schon → Screenreader
   überspringen die Deko. Ältere Browser verwerfen diese Zeilen und nutzen
   die var()-Regel oben — Optik bleibt überall identisch. */
#ueber   .section__head .h2::before{ content:"Wir" / ""; }
#musik   .section__head .h2::before{ content:"Klang" / ""; }
#news    .section__head .h2::before{ content:"Presse" / ""; }
#termine .section__head .h2::before{ content:"Bühne" / ""; }
#kontakt .section__head .h2::before{ content:"Booking" / ""; }