/*
Theme Name: Mallorca Sommer Festival
Theme URI: https://mallorca-sommer-festival.de
Description: Custom-Theme fuer das Mallorca Sommer Festival (Pitch/Revamp). Enthaelt die Seiten-Templates "Mallorca Sommer Festival" (V1) und "... V2 (Animierter Hero)".
Version: 0.32.1
Author: EBM Group
Text Domain: msf
*/

/* =========================================================================
   Mallorca Sommer Festival - Pitch-Theme (Vintage-Plakat)
   Vanilla CSS, wird spaeter ins WordPress-Theme uebernommen.
   Dials: VARIANCE 9 / MOTION 7 / DENSITY 3
   ========================================================================= */

:root{
  --gelb:    #FEC522;
  --gelb-tief: #EBA00C;   /* dunkleres Gold, damit weisse Schrift lesbar ist (Tour) */
  --magenta: #E31C79;
  --lime:    #A2C617;
  --tuerkis: #1FB6C9;
  --tinte:   #2A1038;   /* warmes Off-Schwarz (Aubergine) */
  --creme:   #FFF6E2;
  --weiss:   #FFFFFF;

  --ink: var(--tinte);
  --maxw: 1280px;
  --ease: cubic-bezier(.16,1,.3,1);
  --shadow-cut: drop-shadow(0 14px 22px rgba(42,16,56,.28));

  /* Hero-Hoehe (steuert, wie weit der Hero nach unten reicht; Balken haengt daran) */
  --hero-h: 108dvh;
  /* Diagonaler Hero-Schnitt: --diag in vw haelt den Winkel ueber alle Breiten konstant.
     Winkel = atan(0.06) ~ 3.4deg, der weisse Balken nutzt denselben Wert (--seam-rot). */
  --diag: 6vw;
  --seam-rot: -3.4deg;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip statt hidden: verhindert seitliches Scrollen genauso, erzeugt aber
   KEINEN Scroll-Container (hidden tut das) -> die scroll-gekoppelte view()-Timeline der
   Fly-Deko bleibt intakt. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:"Barlow Condensed",system-ui,sans-serif;
  color:var(--ink);
  background:var(--gelb);
  font-size:18px;
  line-height:1.45;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* Fixer Vollflaechen-Hintergrund hinter allem. Die JS-Steuerung setzt die
   background-color je sichtbarer Sektion; der transition sorgt fuer den weichen
   Crossfade. Sektionen sind transparent und geben diese Farbe frei. */
/* Vollflaechiger Farb-Hintergrund. JS setzt --bg je sichtbarer Sektion; die
   laengere Transition macht den Farbwechsel weich (smooth). */
.page-bg{
  position:fixed;inset:0;z-index:-1;
  background-color:var(--bg, var(--tuerkis));
  /* Durchgehendes Halftone-Punktraster ueber die ganze Seite (ein Raster, daher
     fortlaufend ohne Bruch an Sektionsgrenzen). Liegt fix hinter dem Inhalt. */
  background-image:radial-gradient(rgba(255,255,255,.14) 1.6px,transparent 1.7px);
  background-size:22px 22px;
  transition:background-color 1.2s ease;
}

/* dotted halftone helper */
.dots{
  background-image:radial-gradient(rgba(42,16,56,.10) 1.5px,transparent 1.6px);
  background-size:20px 20px;
}

/* ---------- Display type ---------- */
.display{
  font-family:"Bungee",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Bungee",sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:1rem;line-height:1;white-space:nowrap;
  padding:.85em 1.4em;border-radius:999px;
  border:3px solid var(--ink);
  background:var(--magenta);color:var(--weiss);
  box-shadow:0 5px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .2s;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn--ticket{background:var(--magenta);color:var(--weiss)}
.btn--big{font-size:1.5rem;padding:1em 1.8em;background:var(--magenta);color:var(--weiss)}

/* =========================================================================
   PRELOADER
   ========================================================================= */
.preloader{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:var(--gelb);
  transition:opacity .6s var(--ease),visibility .6s;
}
.preloader.is-done{opacity:0;visibility:hidden}
/* Lade-Badge: Logo in der Mitte, der magenta Strahlenring dreht sich darum. */
.preloader__badge{position:relative;display:grid;place-items:center;width:200px;height:200px}
.preloader__burst{
  position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(var(--magenta) 0deg 6deg,transparent 6deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 64%,#000 78%,transparent 80%);
          mask:radial-gradient(circle,transparent 62%,#000 64%,#000 78%,transparent 80%);
  animation:spin 1.1s linear infinite;
}
.preloader__logo{
  position:relative;width:120px;height:auto;
  filter:drop-shadow(0 6px 14px rgba(42,16,56,.22));
  animation:preloaderPulse 1.6s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes preloaderPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:78px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,40px);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
/* Sobald ~50% des Hero gescrollt sind (JS setzt .is-scrolled): KEINE Bar-Einfaerbung,
   nur der Button-Hintergrund erscheint hinter den Menuepunkten (Platz ist reserviert
   -> kein Verspringen). Damit sie auf jeder Sektionsfarbe lesbar sind. */
.nav.is-scrolled .nav__links a:not(.btn){
  background:var(--creme);border-color:var(--ink);box-shadow:0 3px 0 var(--ink);
}
.nav.is-scrolled .nav__links a.nav__ticket{background:var(--magenta);color:var(--weiss);border-color:var(--ink)}
.nav.is-scrolled .nav__links a:not(.btn):hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
/* die Hover-Unterstrich-Linie im Button-Zustand abschalten */
.nav.is-scrolled .nav__links a:not(.btn)::after{display:none}
/* WordPress-Adminleiste (nur eingeloggt): fixe Nav darunter schieben, kein Ueberlappen */
.admin-bar .nav{top:32px}
@media screen and (max-width:782px){.admin-bar .nav{top:46px}}
.nav__brand img{width:clamp(58px,6vw,72px);height:auto;filter:var(--shadow-cut)}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
/* Button-Platz IMMER reserviert (Padding + transparenter Rand), damit beim Scrollen
   nur der Button-Hintergrund erscheint und die Menuepunkte NICHT verspringen. */
.nav__links a:not(.btn){
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.06em;
  color:var(--ink);position:relative;
  padding:.42em .95em;border:2px solid transparent;border-radius:999px;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),color .2s;
}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:.95em;right:100%;bottom:.1em;height:3px;background:var(--magenta);
  transition:right .25s var(--ease);
}
.nav__links a:not(.btn):hover::after{right:.95em}
.nav__links a.nav__ticket{color:var(--magenta)}
.nav__burger{
  display:none;flex-direction:column;gap:5px;
  width:46px;height:46px;align-items:center;justify-content:center;
  background:var(--magenta);border:3px solid var(--ink);border-radius:12px;
  box-shadow:0 4px 0 var(--ink);cursor:pointer;padding:0;
}
.nav__burger span{display:block;width:22px;height:3px;background:var(--weiss);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;z-index:2;
  min-height:var(--hero-h);
  background:
    radial-gradient(rgba(42,16,56,.07) 1.6px,transparent 1.7px) 0 0/22px 22px,
    linear-gradient(180deg,#FEC522 0%,#FEC522 38%,#FF8A3D 64%,var(--magenta) 100%);
  overflow:hidden;
  isolation:isolate;
  /* diagonale Unterkante: links tief, rechts hoeher -> Hero wird schraeg abgeschnitten */
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--diag)), 0 100%);
}

/* subtle sunburst behind everything */
.hero__sun{
  position:absolute;top:39%;left:50%;transform:translate(-50%,-50%);
  width:min(135vw,1200px);aspect-ratio:1;z-index:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(230,0,126,.12) 0deg 5.5deg,transparent 5.5deg 13deg);
  -webkit-mask:radial-gradient(circle,#000 0%,#000 26%,transparent 60%);
          mask:radial-gradient(circle,#000 0%,#000 26%,transparent 60%);
  animation:sunSpin 110s linear infinite, sunPulse 4.5s ease-in-out infinite;
}
@keyframes sunSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes sunPulse{0%,100%{opacity:.78}50%{opacity:1}}

/* rotating circular seal behind logo */
.hero__seal{
  position:absolute;top:39%;left:50%;
  width:min(72vw,580px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:1;opacity:.92;
  animation:rotate 26s linear infinite;
}
.hero__seal svg{width:100%;height:100%}
.hero__sealText{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;fill:var(--magenta);
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;
}
@keyframes rotate{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* vertical edge text (poster furniture) */
.hero__edge{
  position:absolute;top:50%;z-index:6;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:"Bungee",sans-serif;text-transform:uppercase;
  font-size:clamp(.7rem,1vw,.95rem);letter-spacing:.22em;
  color:rgba(42,16,56,.42);white-space:nowrap;
}
.hero__edge--l{left:clamp(8px,1.8vw,22px);transform:translateY(-50%) rotate(180deg)}
.hero__edge--r{right:clamp(8px,1.8vw,22px);transform:translateY(-50%)}

/* meta blocks flanking */
.hero__meta{position:absolute;top:clamp(84px,12vh,128px);z-index:7}
.hero__meta--left{left:clamp(28px,6vw,82px);text-align:left}
.hero__meta--right{right:clamp(28px,6vw,82px);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.hero__tag{
  font-family:"Bungee",sans-serif;text-transform:uppercase;color:var(--magenta);
  font-size:clamp(.95rem,1.8vw,1.4rem);line-height:1.05;
  text-shadow:2.5px 2.5px 0 var(--weiss);
}
.hero__dates{
  font-weight:700;text-transform:uppercase;font-size:clamp(.95rem,1.4vw,1.2rem);
  color:var(--ink);margin-top:.6rem;line-height:1
}
.hero__dates strong{font-family:"Bungee",sans-serif;font-size:1.7em;display:inline-block}
/* rechte Notiz spiegelt die Dates: kleine Zeile + grosse Bungee-Zeile, gleiche Optik */
.hero__note{
  font-weight:700;text-transform:uppercase;color:var(--ink);
  font-size:clamp(.95rem,1.4vw,1.2rem);letter-spacing:.02em;line-height:1;margin-top:1.2rem;
}
.hero__note strong{font-family:"Bungee",sans-serif;font-size:1.7em;display:inline-block}

/* Mallorca-Deko aus echtem Material */
.deco{position:absolute;z-index:7;pointer-events:none;filter:drop-shadow(0 10px 16px rgba(42,16,56,.28))}
.deco--flamingo{right:clamp(8px,2vw,48px);bottom:clamp(14px,3vh,64px);width:clamp(110px,12vw,195px);animation:floatY 5s ease-in-out infinite}
.deco--flowers{left:clamp(6px,2vw,44px);bottom:clamp(22px,4vh,80px);width:clamp(90px,9vw,150px);animation:floatY 6.5s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* artist cutout row, absolut positioniert fuer volle Breite */
.hero__artists{
  position:absolute;left:0;right:0;bottom:clamp(-20px,-1.5vh,4px);
  height:clamp(300px,66vh,680px);z-index:4;pointer-events:none;
}
.hg{position:absolute;bottom:0;transform:translateX(-50%);z-index:1}
.hg img{display:block;width:auto;max-width:none;filter:var(--shadow-cut);transform-origin:bottom center}
.hg--1{left:12%;z-index:1} .hg--1 img{height:clamp(205px,44vh,460px);transform:rotate(-4deg)}
.hg--2{left:26%;z-index:5} .hg--2 img{height:clamp(240px,50vh,520px);transform:rotate(-2deg)}
.hg--3{left:40%;z-index:4} .hg--3 img{height:clamp(275px,56vh,590px);transform:rotate(-1deg)}
.hg--4{left:60%;z-index:4} .hg--4 img{height:clamp(275px,56vh,590px);transform:rotate(1deg)}
.hg--5{left:74%;z-index:2} .hg--5 img{height:clamp(240px,50vh,520px);transform:rotate(2deg)}
.hg--6{left:88%;z-index:1} .hg--6 img{height:clamp(205px,44vh,460px);transform:rotate(3deg)}

/* zentrales Logo-Badge, konzentrisch im rotierenden Seal */
.hero__logo{
  position:absolute;top:39%;left:50%;transform:translate(-50%,-50%);
  z-index:2;width:min(54vw,440px);
  filter:drop-shadow(0 14px 24px rgba(42,16,56,.30));
  animation:logoPop 1s var(--ease) .25s both, logoIdle 5s ease-in-out 1.5s infinite;
}
@keyframes logoPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-10deg)}
  65%{opacity:1;transform:translate(-50%,-52%) scale(1.06) rotate(3deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
}
@keyframes logoIdle{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-53%) scale(1.015)}
}

/* Hero-Ladechoreografie: jede Person fegt einzeln gestaffelt mit Overshoot ein */
@media (prefers-reduced-motion:no-preference){
  .hg{opacity:0;animation:hgIn 1s cubic-bezier(.22,.85,.3,1.02) both}
  .hg--3{animation-delay:.34s}
  .hg--4{animation-delay:.40s}
  .hg--2{animation-delay:.50s}
  .hg--5{animation-delay:.56s}
  .hg--1{animation-delay:.66s}
  .hg--6{animation-delay:.72s}
  @keyframes hgIn{
    0%{opacity:0;transform:translateX(-50%) translateY(160px) scale(.92);filter:blur(4px)}
    55%{opacity:1}
    80%{transform:translateX(-50%) translateY(-12px) scale(1.015);filter:blur(0)}
    100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:blur(0)}
  }
}

/* Hero V2: nur bei body.hero-v2 aktiv. Mia Julia + Ikke Hueftgold bleiben fix,
   die uebrigen Slots wechseln im Loop durch: alter faehrt nach unten raus,
   neuer faehrt von unten hoch rein (JS taktet, CSS bewegt). Initiale Darstellung
   ist identisch zu V1, weil --rot die bisherigen Slot-Rotationen spiegelt. */
.hero-v2 .hg--cycle{display:grid}
.hero-v2 .hg--cycle img{grid-area:1/1;align-self:end;justify-self:center}
/* --rot = Neigung je Slot, --h = Basishoehe je Position (Mitte prominenter, aussen
   kleiner). Die endgueltige Bildhoehe ist --h * --as, wobei --as der pro-Kuenstler-
   Normalisierungsfaktor ist (per JS gesetzt), damit unterschiedlich beschnittene
   Cutouts gleich gross wirken. */
.hero-v2 .hg--1{--rot:-4deg;--h:clamp(195px,42vh,440px)}
.hero-v2 .hg--2{--rot:-2deg;--h:clamp(235px,49vh,510px)}
.hero-v2 .hg--3{--rot:-1deg;--h:clamp(300px,62vh,660px)}
.hero-v2 .hg--4{--rot:1deg;--h:clamp(300px,62vh,660px)}
.hero-v2 .hg--5{--rot:2deg;--h:clamp(235px,49vh,510px)}
.hero-v2 .hg--6{--rot:3deg;--h:clamp(195px,42vh,440px)}
.hero-v2 .hg--cycle img{transform:translateY(0) rotate(var(--rot));height:calc(var(--h) * var(--as,1))}
.hero-v2 .hg--cycle img.is-in{animation:hgSwapIn .62s cubic-bezier(.2,.75,.3,1) both}
.hero-v2 .hg--cycle img.is-out{animation:hgSwapOut .62s cubic-bezier(.5,0,.55,1) both}
@keyframes hgSwapIn{
  0%{opacity:0;transform:translateY(135%) rotate(var(--rot))}
  100%{opacity:1;transform:translateY(0) rotate(var(--rot))}
}
@keyframes hgSwapOut{
  0%{opacity:1;transform:translateY(0) rotate(var(--rot))}
  100%{opacity:0;transform:translateY(135%) rotate(var(--rot))}
}
@media (prefers-reduced-motion:reduce){
  .hero-v2 .hg--cycle img.is-in,.hero-v2 .hg--cycle img.is-out{animation:none}
}
/* Mobile: gleiche Slot-Reduktion wie V1. Noetig, weil das obige display:grid sonst
   die display:none-Regeln der Breakpoints (gleiche Spezifitaet, frueher im Quelltext)
   ueberschreiben wuerde -> auf Mobile cyclen nur die sichtbaren Slots. */
@media (max-width:1024px){ .hero-v2 .hg--1,.hero-v2 .hg--5,.hero-v2 .hg--6{display:none} }
@media (max-width:640px){
  /* Mobil zwei zentrale Figuren, moeglichst gross. Breite Cutouts ueberlappen sich in
     der Mitte etwas (gewollter Duo-Look); der minimale Ueberhang aussen wird von
     .hero{overflow:hidden} sauber gekappt. */
  .hero-v2 .hg--2{display:none}
  .hero-v2 .hg--3{left:30%;--rot:-1deg;--h:clamp(220px,40vh,320px)}
  .hero-v2 .hg--4{left:70%;--rot:1deg;--h:clamp(220px,40vh,320px)}
}

/* =========================================================================
   MARQUEE
   ========================================================================= */
/* gemeinsamer Positions-Container fuer Hero + Video + diagonalen Balken */
.hero-wrap{position:relative}
/* Weisser Balken sitzt absolut mittig auf der diagonalen Hero-Unterkante */
.marquee{
  position:absolute;left:50%;top:calc(var(--hero-h) - var(--diag) / 2);z-index:5;
  width:114%;
  transform:translate(-50%,-50%) rotate(var(--seam-rot));
  background:var(--weiss);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  overflow:hidden;padding:.7rem 0;
  box-shadow:0 9px 0 rgba(42,16,56,.18);
}
.marquee__track{
  display:inline-flex;white-space:nowrap;will-change:transform;
  animation:marquee 28s linear infinite;
}
.marquee__track span{
  font-family:"Bungee",sans-serif;text-transform:uppercase;color:var(--ink);
  font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:.02em;padding-right:.4em;
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================================
   VIDEO-BAND (Live-Seiten-Video, im Blau-Block zwischen Trenner und Lineup)
   ========================================================================= */
.vidband{
  /* transparent: Tuerkis + Punkte kommen vom durchgehenden fixen .page-bg
     (auch in der diagonalen Schnittflaeche) */
  background-color:transparent;
  position:relative;z-index:1;
  /* hochgezogen unter den Hero: der fixe Tuerkis-Hintergrund fuellt die Schraege */
  margin-top:calc(-1 * var(--diag));
  padding:calc(var(--diag) / 2 + clamp(80px,10vw,180px)) 0 clamp(28px,5vw,64px);
}
.vidband__frame{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.vidband__video{
  display:block;width:100%;height:auto;background:var(--ink);
  border:4px solid var(--ink);border-radius:16px;
  box-shadow:0 10px 0 var(--ink);
}

/* Schlagwoerter ueber dem Video: ein Sticker poppt nacheinander an einer Stelle auf.
   CSS-only: alle Woerter gestapelt, eine gemeinsame Loop-Animation, pro Wort negativ
   versetzter delay -> immer genau einer sichtbar. Slot = 1/8 = 12.5% von 12s. */
.vidband__pops{
  /* Null-Hoehen-Band exakt auf der Video-Unterkante -> Sticker zentriert darauf
     und ragt je zur Haelfte ueber und unter die Kante (halb drueber, halb drunter) */
  position:absolute;left:0;right:0;bottom:0;height:0;
  display:grid;place-items:center;
  pointer-events:none;z-index:6;
}
.vpop{
  grid-area:1/1;
  font-family:"Bungee",sans-serif;text-transform:uppercase;line-height:1;
  font-size:clamp(1.8rem,5.5vw,4.5rem);color:var(--ink);
  padding:.18em .42em;border:4px solid var(--ink);border-radius:14px;
  box-shadow:0 8px 0 var(--ink);white-space:nowrap;
  /* -50% hebt den Sticker um die halbe eigene Hoehe an -> Mitte sitzt auf der
     Video-Unterkante (halb drueber, halb drunter). translate/scale/rotate sind
     unabhaengige Properties, daher stoeren sie sich nicht. */
  translate:0 -50%;
  opacity:0;will-change:scale,opacity;
  animation:vpop 12s infinite both;
}
/* Sticker-Farben + leichte Rotation rotieren pro Wort (Plakat-Look) */
.vpop:nth-child(1){background:var(--gelb);   rotate:-4deg;animation-delay:0s}
.vpop:nth-child(2){background:var(--magenta);color:var(--creme);rotate:3deg;animation-delay:-1.5s}
.vpop:nth-child(3){background:var(--lime);   rotate:-2deg;animation-delay:-3s}
.vpop:nth-child(4){background:var(--creme);  rotate:2.5deg;animation-delay:-4.5s}
.vpop:nth-child(5){background:var(--magenta);color:var(--creme);rotate:-3deg;animation-delay:-6s}
.vpop:nth-child(6){background:var(--gelb);   rotate:3.5deg;animation-delay:-7.5s}
.vpop:nth-child(7){background:var(--lime);   rotate:-2.5deg;animation-delay:-9s}
.vpop:nth-child(8){background:var(--creme);  rotate:2deg;animation-delay:-10.5s}
@keyframes vpop{
  0%   {opacity:0;scale:.4}
  3%   {opacity:1;scale:1.12}   /* Pop mit Overshoot */
  6%   {scale:1}
  10.5%{opacity:1;scale:1}      /* halten */
  12.5%{opacity:0;scale:.75}    /* raus */
  100% {opacity:0;scale:.75}
}
@media (prefers-reduced-motion:reduce){
  .vpop{animation:none}
  .vpop:nth-child(1){opacity:1}           /* statisch nur ein Wort zeigen */
}

/* =========================================================================
   SECTION HEADINGS
   ========================================================================= */
.sec-head{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(28px,4vw,52px)}
.sec-head__kicker{
  font-family:"Bungee",sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(.8rem,1.3vw,1rem);color:var(--magenta);
}
.sec-head__title{
  font-family:"Bungee",sans-serif;text-transform:uppercase;line-height:1.0;margin-top:.3rem;
  font-size:clamp(2rem,5vw,4rem);color:var(--ink);
}

/* =========================================================================
   LINEUP
   ========================================================================= */
.lineup{
  position:relative;overflow:clip;
  /* transparent: Farbe + durchgehende Punkte kommen vom fixen .page-bg */
  background-color:transparent;
  padding:clamp(56px,9vw,120px) 0;
}
.lineup .sec-head,.lineup__grid,.lu-carousel{position:relative;z-index:2}
.lineup .sec-head{text-align:center}
/* Enthaltenes, in die Flaeche getoentes Foto (kein Vollbild): grosser, weich
   auslaufender Kreis hinter dem Inhalt; die Magenta-Flaeche scheint durch und
   toent das Bild. */
.lineup__photo{
  position:absolute;left:50%;top:clamp(10px,3vw,48px);translate:-50% 0;z-index:0;
  width:min(1180px,104vw);aspect-ratio:1;
  background:#15060f url("assets/bg/festival-night.webp") center/cover;
  opacity:.6;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 50%,transparent 72%);
          mask:radial-gradient(circle at 50% 50%,#000 50%,transparent 72%);
}
.lineup .sec-head__kicker{color:var(--weiss)}
.lineup .sec-head__title{
  /* Shadow nicht mehr magenta (Sektion ist jetzt magenta) -> Tuerkis-Offset */
  color:var(--weiss);text-shadow:7px 7px 0 var(--tuerkis);
  font-size:clamp(3.4rem,11vw,9.5rem);transform:rotate(-3deg);display:inline-block;
}

/* Grosser Flamingo, der beim Scrollen quer durch die Sektion zieht (scroll-
   gekoppelt ueber die View-Timeline) und dabei eine Wellenbewegung macht. */
.fly-deco{
  position:absolute;top:clamp(40px,9vw,120px);left:0;
  width:clamp(150px,17vw,260px);z-index:3;pointer-events:none;
  filter:drop-shadow(0 10px 16px rgba(42,16,56,.32));
  animation:flyCross linear both;
  animation-timeline:view();
  animation-range:cover 0% cover 100%;
}
/* Wellenbahn: mehrfaches Auf und Ab quer ueber die Sektion, mit sanftem Neigen */
@keyframes flyCross{
  0%  {transform:translate(-26vw,0)   rotate(-8deg)}
  25% {transform:translate(12vw,-70px) rotate(7deg)}
  50% {transform:translate(50vw,20px) rotate(-6deg)}
  75% {transform:translate(88vw,-70px) rotate(7deg)}
  to  {transform:translate(126vw,0)  rotate(-8deg)}
}
/* Variante: fliegt von rechts nach links (Blumen ueber der Tour-Heading) */
.fly-deco--rev{animation-direction:reverse}
/* Lineup als zwei ueberlappende, schraege Karussells (Auto-Lauf + Drag via JS).
   Endlos-Loop: jede Reihe ist 2x im DOM (Original + aria-hidden Duplikat); JS
   haelt scrollLeft modulo einer Set-Breite, daher nahtloser Uebergang. */
.lu-carousel{
  position:relative;z-index:2;
  rotate:-3deg;                         /* schraeg, passend zum -3deg der Heading */
  /* breiter als der Viewport, damit die Drehung keine leeren Ecken laesst;
     .lineup hat overflow:clip und kappt den Ueberhang sauber */
  width:112%;margin-left:-6%;
  margin-top:clamp(28px,5vw,60px);
}
/* Reihen sind native Scroll-Container: Touch-Scroll funktioniert out of the box;
   der automatische Lauf und das Maus-Drag laufen ueber JS (siehe script.js).
   Endlos: jede Reihe ist 2x im DOM, JS setzt scrollLeft modulo einer Set-Breite. */
.lu-row{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.lu-row::-webkit-scrollbar{display:none}
.lu-row.is-drag{cursor:grabbing}
.lu-row+.lu-row{margin-top:clamp(-56px,-4.4vw,-26px)}  /* Reihen leicht uebereinander */
.lu-track{
  display:flex;width:max-content;
  padding:clamp(22px,2.4vw,34px) 0;     /* Luft fuer Schlagschatten/Hover */
}
.lu-carousel .acard{
  flex:0 0 clamp(186px,19vw,236px);
  margin-right:clamp(14px,1.6vw,24px);
  /* Polaroid-Kippung steckt inline pro Karte (rotate-Property), damit Original
     und Loop-Duplikat denselben Winkel haben (nahtloser Loop). Das rotate stoert
     das transform im :hover nicht. */
}
.acard{
  background:var(--creme);
  border:4px solid var(--ink);border-radius:16px;
  box-shadow:0 8px 0 var(--ink);
  padding:14px 14px 10px;text-align:center;
  /* Spalte: Bild oben, Name/Logo im Restraum vertikal zentriert -> bei gleicher
     Reihenhoehe verteilt sich der Leerraum gleichmaessig (kein Klumpen unten). */
  display:flex;flex-direction:column;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s;
}
.acard:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 12px 0 var(--ink);background:var(--gelb)}
.acard__img{
  aspect-ratio:1/1;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(circle at 50% 30%,var(--gelb),var(--magenta) 130%);
  border-radius:12px;overflow:hidden;border:3px solid var(--ink);
}
.acard__img img{height:104%;width:auto;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(42,16,56,.25))}
.acard h3{font-family:"Bungee",sans-serif;text-transform:uppercase;font-size:.95rem;line-height:1.1;margin:auto 0;color:var(--ink)}
/* Wo ein Logo vorhanden ist, ersetzt es den Namen: Text-Name visuell ausblenden
   (fuer Screenreader erhalten), das Logo traegt den Namen. */
.acard:has(.acard__logo img) h3{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Typo-Platzhalter-Karten (noch kein Foto-Cutout): Monogramm im Bild-Feld */
.acard__mono{
  font-family:"Bungee",sans-serif;color:var(--weiss);
  font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1;letter-spacing:.02em;
  text-shadow:3px 3px 0 rgba(42,16,56,.35);
  align-self:center;padding-bottom:.06em;
}

/* Logo-Slot: traegt (wo vorhanden) den Namen als Wortmarke. Leere Slots (Karten
   ohne Logo) klappen zusammen, damit kein Leerraum entsteht. */
.acard__logo:empty{min-height:0;margin:0}
.acard__logo{
  margin:auto 0;min-height:clamp(46px,5.4vw,64px);
  display:flex;align-items:center;justify-content:center;
}
/* Alle Logos auf EINE einheitliche Hoehe (max-height) + Breitenkappe -> egal ob
   hoch oder breit, sie wirken gleich gross und ordentlich. */
.acard__logo img{
  max-width:88%;max-height:clamp(30px,3.6vw,42px);
  width:auto;height:auto;object-fit:contain;
}

/* =========================================================================
   TOUR / TERMINE
   ========================================================================= */
.tour{
  position:relative;overflow:clip;
  /* Farbe + durchgehende Punkte vom fixen .page-bg */
  background-color:transparent;
  padding:clamp(56px,9vw,120px) 0;
}
/* Enthaltenes, getoentes Foto hinter dem Inhalt (wie beim Lineup) */
.tour__photo{
  position:absolute;left:50%;top:clamp(6px,2.5vw,40px);translate:-50% 0;z-index:0;
  width:min(1480px,126vw);aspect-ratio:1.12;
  background:#3a2a06 url("assets/bg/tour-crowd.webp") center/cover;
  opacity:.52;
  /* unregelmaessige, organische Boppel-Form mit Diagonal-Achse: das Gewicht
     lehnt nach UNTEN-LINKS und OBEN-RECHTS (kein geschlossener Kreis), aber
     JEDER Lappen laeuft komplett INNERHALB der Box aus (Fade endet ~94%), damit
     nichts hart an der Sektionskante abgeschnitten wird. */
  -webkit-mask:
    radial-gradient(36% 34% at 48% 50%, #000 24%, transparent 70%),
    radial-gradient(32% 32% at 38% 58%, #000 22%, transparent 74%),
    radial-gradient(32% 32% at 62% 38%, #000 22%, transparent 74%),
    radial-gradient(24% 26% at 30% 66%, #000 24%, transparent 76%),
    radial-gradient(24% 26% at 70% 28%, #000 24%, transparent 76%),
    radial-gradient(18% 20% at 26% 70%, #000 26%, transparent 80%),
    radial-gradient(18% 20% at 74% 22%, #000 26%, transparent 80%);
  mask:
    radial-gradient(36% 34% at 48% 50%, #000 24%, transparent 70%),
    radial-gradient(32% 32% at 38% 58%, #000 22%, transparent 74%),
    radial-gradient(32% 32% at 62% 38%, #000 22%, transparent 74%),
    radial-gradient(24% 26% at 30% 66%, #000 24%, transparent 76%),
    radial-gradient(24% 26% at 70% 28%, #000 24%, transparent 76%),
    radial-gradient(18% 20% at 26% 70%, #000 26%, transparent 80%),
    radial-gradient(18% 20% at 74% 22%, #000 26%, transparent 80%);
}
.tour .sec-head,.tour__grid{position:relative;z-index:2}
.tour .sec-head{text-align:center}        /* Kicker + Heading mittig */
.tour .sec-head__kicker{color:var(--weiss)}
.tour .sec-head__title{
  color:var(--weiss);text-shadow:7px 7px 0 var(--magenta);  /* Shadow nicht blau */
  font-size:clamp(3.4rem,11vw,9.5rem);  /* gross wie die Lineup-Heading */
  transform:rotate(3deg);display:inline-block;  /* schraeg wie Lineup, andere Seite */
}
.tour__grid{
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
/* Termin-Karten als Ticket-Stubs: gestrichelte Perforation trennt die Abriss-
   Lasche mit dem Tickets-Button ab. (Keine farbigen Knips-Loecher, weil deren
   feste Farbe beim Scrollen/Farbwechsel nicht zur Sektion passen wuerde.) */
.dcard{
  --stub:88px;                            /* Breite der Abriss-Lasche rechts */
  --rot:0deg;                             /* Basis-Kippung (pro Karte gesetzt) */
  position:relative;rotate:var(--rot);
  /* Datum oben, Stadt groesser darunter (Spalte 1); Tickets-Lasche rechts (Spalte 2).
     Die Lasche-Spalte = --stub minus rechtes Padding -> ihre linke Kante liegt auf der
     Perforation, das zentrierte "Tickets" hat links wie rechts denselben Abstand. */
  display:grid;grid-template-columns:1fr calc(var(--stub) - 18px);align-items:center;column-gap:0;row-gap:2px;
  background-color:var(--weiss);
  /* gestrichelte Perforation als schmaler vertikaler Streifen bei right:var(--stub) */
  background-image:repeating-linear-gradient(to bottom, rgba(0,0,0,.42) 0 5px, transparent 5px 11px);
  background-repeat:no-repeat;background-size:3px 100%;background-position:right var(--stub) top;
  border:4px solid #000;border-radius:16px;
  padding:14px 18px;box-shadow:0 6px 0 #000;
}
/* Hoehere Spezifitaet als .reveal/.reveal.in, sonst ueberschreiben die das
   transition + transform der Karte (Drehung schnappte sonst sofort, Anheben kam
   gar nicht). Ein gemeinsamer, weicher Uebergang fuer Einblenden UND Hover. */
.tour__grid .dcard{
  transition:opacity .6s ease,transform .28s ease,box-shadow .28s ease,rotate .28s ease;
}
/* Unsichtbare, erweiterte Hover-Flaeche: deckt die Schatten-/Anhebe-Luecke ab,
   damit der Cursor beim Kippen nicht herausfaellt -> kein Flackern/Wackeln. */
.dcard::after{content:"";position:absolute;inset:-5px -4px -13px -4px}
/* Sticker-Wand: jede Termin-Karte leicht anders schraeg */
.tour__grid .dcard:nth-child(5n+1){--rot:-2.5deg}
.tour__grid .dcard:nth-child(5n+2){--rot:1.8deg}
.tour__grid .dcard:nth-child(5n+3){--rot:-1deg}
.tour__grid .dcard:nth-child(5n+4){--rot:2.6deg}
.tour__grid .dcard:nth-child(5n)  {--rot:-1.8deg}
/* Hover: anheben und ein bisschen weiter neigen (statt gerade ziehen).
   Hohe Spezifitaet, damit es .reveal.in{transform:none} schlaegt. */
.tour__grid .dcard:hover{transform:translateY(-4px);rotate:calc(var(--rot) - 4deg);box-shadow:0 11px 0 #000}
.dcard__date{grid-column:1;grid-row:1;justify-self:start;
  font-family:"Bungee",sans-serif;font-size:1.15rem;color:var(--magenta)}
.dcard__city{grid-column:1;grid-row:2;justify-self:start;
  font-family:"Bungee",sans-serif;text-transform:uppercase;font-size:1.4rem;color:var(--ink);line-height:1.0}
.dcard__go{
  grid-column:2;grid-row:1/3;align-self:center;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.03em;
  color:var(--ink);text-align:center;line-height:1.05;
}

/* =========================================================================
   CTA
   ========================================================================= */
.cta{
  /* Farbe + durchgehende Punkte vom fixen .page-bg */
  background-color:transparent;
  padding:clamp(60px,10vw,130px) clamp(16px,4vw,40px);text-align:center;
}
.cta__title{
  font-family:"Bungee",sans-serif;text-transform:uppercase;color:var(--ink);
  font-size:clamp(1.8rem,4.5vw,3.6rem);line-height:1.05;
  text-shadow:3px 3px 0 var(--weiss);
}
.cta__sub{font-weight:700;text-transform:uppercase;color:var(--ink);margin:1rem 0 2rem;font-size:clamp(1rem,2vw,1.3rem)}

/* =========================================================================
   JOBS / WIR SUCHEN DICH (Recruiting-Teaser, fuehrt spaeter zu /jobs)
   ========================================================================= */
/* Tuerkise Flaeche (Farbe + Punkte vom fixen .page-bg), darauf ein diagonales
   Laufband und davor die Creme-Sticker-Karte. */
.jobs{
  position:relative;overflow:clip;   /* clippt den schraegen Marquee-Ueberhang */
  background-color:transparent;
  padding:clamp(64px,10vw,140px) clamp(16px,4vw,40px);
  display:flex;justify-content:center;
}
/* Diagonales Laufband HINTER der Karte: gekippt von links-oben nach rechts-unten
   (positive Rotation; das Hero-Band ist negativ gekippt). Mechanik wie .marquee:
   Inhalt 2x im DOM, Track animiert auf -50% -> nahtloser Loop. */
.jobs__marquee{
  position:absolute;left:50%;top:50%;z-index:1;
  width:128%;
  transform:translate(-50%,-50%) rotate(4.5deg);
  background:var(--magenta);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  overflow:hidden;padding:.5rem 0;
  box-shadow:0 9px 0 rgba(42,16,56,.18);
}
.jobs__marquee-track{
  display:inline-flex;white-space:nowrap;will-change:transform;
  animation:marquee 24s linear infinite;
}
.jobs__marquee-track span{
  font-family:"Bungee",sans-serif;text-transform:uppercase;color:var(--creme);
  font-size:clamp(1.15rem,2.6vw,2rem);letter-spacing:.02em;padding-right:.4em;
}
/* Creme-Sticker-Karte in der etablierten Bildsprache, liegt VOR dem Laufband */
.jobs__card{
  position:relative;z-index:3;
  max-width:780px;width:100%;text-align:center;
  background:var(--creme);
  border:4px solid var(--ink);border-radius:22px;
  box-shadow:0 12px 0 var(--ink);
  padding:clamp(34px,5vw,66px) clamp(24px,5vw,72px);
  rotate:-1.4deg;
}
.jobs__kicker{
  font-family:"Bungee",sans-serif;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(.8rem,1.5vw,1.05rem);color:var(--tuerkis);
}
.jobs__title{
  font-family:"Bungee",sans-serif;text-transform:uppercase;line-height:1.0;
  font-size:clamp(2.4rem,7vw,5rem);color:var(--ink);margin-top:.5rem;
}
.jobs__title span{color:var(--magenta);text-shadow:4px 4px 0 var(--gelb)}
.jobs__text{
  font-weight:600;color:var(--ink);max-width:48ch;
  margin:1.3rem auto 2.1rem;
  font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.5;
}
/* Button skaliert mit der Viewport-Breite (.btn ist white-space:nowrap) */
.jobs__btn{font-size:clamp(.95rem,3.3vw,1.5rem);max-width:100%}
/* Flip-Flops als schwebende Deko, ueber dem Laufband, neben der Karte */
.jobs__deco{
  position:absolute;z-index:2;pointer-events:none;
  width:clamp(120px,15vw,230px);
  right:clamp(6px,5vw,90px);bottom:clamp(6px,4vw,54px);
  rotate:12deg;
  filter:drop-shadow(0 12px 16px rgba(42,16,56,.3));
  animation:floatY 5.5s ease-in-out infinite;
}

/* =========================================================================
   FAQ (tuerkis/blau, Accordion in der Sticker-Bildsprache)
   ========================================================================= */
.faq{
  position:relative;overflow:clip;
  background-color:transparent;   /* tuerkis + Punkte vom fixen .page-bg */
  padding:clamp(56px,9vw,120px) clamp(16px,4vw,40px);
}
.faq .sec-head,.faq__list{position:relative;z-index:2}  /* ueber dem Foto-Blob */
.faq .sec-head{text-align:center}
.faq .sec-head__kicker{color:var(--weiss)}
/* gross wie Lineup/Tour, Neigung wie die erste Sektion (Lineup, -3deg) */
.faq .sec-head__title{
  color:var(--weiss);text-shadow:7px 7px 0 var(--magenta);
  font-size:clamp(3.4rem,11vw,9.5rem);
  transform:rotate(-3deg);display:inline-block;
}
/* Getoentes Foto als Masken-Blob hinter dem Inhalt (wie .tour__photo), aber
   diagonal GESPIEGELT: Gewicht lehnt OBEN-LINKS und UNTEN-RECHTS (Variation). */
.faq__photo{
  position:absolute;left:50%;top:clamp(6px,2.5vw,40px);translate:-50% 0;z-index:0;
  /* flacher als der Tour-Blob (aspect 1.12), weil die FAQ-Sektion kuerzer ist:
     so endet der tiefste Lappen-Fade INNERHALB der Sektion und .faq{overflow:clip}
     schneidet unten-rechts nichts mehr hart ab. */
  width:min(1480px,126vw);aspect-ratio:1.4;
  background:#0c3a42 url("assets/bg/faq-crowd.webp") center/cover;
  opacity:.5;
  -webkit-mask:
    radial-gradient(36% 34% at 52% 50%, #000 24%, transparent 70%),
    radial-gradient(32% 32% at 62% 58%, #000 22%, transparent 74%),
    radial-gradient(32% 32% at 38% 38%, #000 22%, transparent 74%),
    radial-gradient(24% 26% at 70% 66%, #000 24%, transparent 76%),
    radial-gradient(24% 26% at 30% 28%, #000 24%, transparent 76%),
    radial-gradient(18% 20% at 74% 70%, #000 26%, transparent 80%),
    radial-gradient(18% 20% at 26% 22%, #000 26%, transparent 80%);
  mask:
    radial-gradient(36% 34% at 52% 50%, #000 24%, transparent 70%),
    radial-gradient(32% 32% at 62% 58%, #000 22%, transparent 74%),
    radial-gradient(32% 32% at 38% 38%, #000 22%, transparent 74%),
    radial-gradient(24% 26% at 70% 66%, #000 24%, transparent 76%),
    radial-gradient(24% 26% at 30% 28%, #000 24%, transparent 76%),
    radial-gradient(18% 20% at 74% 70%, #000 26%, transparent 80%),
    radial-gradient(18% 20% at 26% 22%, #000 26%, transparent 80%);
}
.faq__list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.faq__item{
  background:var(--creme);
  border:4px solid var(--ink);border-radius:16px;
  box-shadow:0 7px 0 var(--ink);
  overflow:hidden;
}
.faq__q{
  width:100%;display:flex;align-items:center;gap:1rem;justify-content:space-between;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.6vw,28px);
  font-family:"Bungee",sans-serif;text-transform:uppercase;color:var(--ink);
  font-size:clamp(.95rem,1.8vw,1.25rem);line-height:1.15;letter-spacing:.01em;
}
/* Plus-Icon, das sich beim Oeffnen zum Minus dreht (zwei gekreuzte Balken) */
.faq__icon{position:relative;flex:0 0 auto;width:24px;height:24px}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;left:50%;top:50%;
  width:18px;height:4px;border-radius:2px;background:var(--magenta);
  translate:-50% -50%;transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.faq__icon::after{transform:rotate(90deg)}                 /* vertikaler Balken */
.faq__item.is-open .faq__icon::after{transform:rotate(0deg);opacity:0}  /* -> Minus */
.faq__q:hover .faq__q-text{color:var(--magenta)}
/* Antwort faehrt per grid-rows 0fr->1fr weich auf (kein JS-Hoehenmessen noetig) */
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a-inner{overflow:hidden}
.faq__a-inner p{
  color:var(--ink);font-size:clamp(.98rem,1.5vw,1.1rem);line-height:1.6;
  padding:0 clamp(18px,2.6vw,28px);
}
.faq__a-inner p:first-child{padding-top:.2rem}
.faq__a-inner p:last-child{padding-bottom:clamp(18px,2.4vw,24px)}
.faq__a-inner a{color:var(--magenta);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.faq__a-inner a:hover{color:var(--ink)}

/* =========================================================================
   FOOTER
   ========================================================================= */
/* Crowd-Grafik als Seitenabschluss. Die Grafik ist OBEN transparent und blendet
   in das durchgehende tuerkise .page-bg (die Crowd steigt aus der Seite auf) ->
   .foot bleibt transparent, KEIN Block. Unten laeuft ein Verlauf ins Dunkle,
   damit die Seite abschliesst und Logo/Links lesbar werden. */
.foot{
  position:relative;isolation:isolate;overflow:hidden;
  background:transparent;
  color:var(--creme);
}
/* Komplette Grafik, volle Breite (Hoehe folgt dem Seitenverhaeltnis); transparente
   Oberkante bleibt erhalten und blendet ins Tuerkis. */
.foot__art{display:block;width:100%;height:auto;position:relative;z-index:0}
/* Verlauf nach unten ins Dunkle: dunkelt den unteren Crowd-Bereich ab und traegt
   den Inhalt; reicht bis unter die Grafik, damit auch auf Mobile (kurze Grafik)
   der Inhalt auf dunklem Grund sitzt. */
.foot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:clamp(300px,42vw,500px);
  background:linear-gradient(180deg,
    rgba(20,7,16,0) 0%,
    rgba(20,7,16,.55) 30%,
    rgba(20,7,16,.9) 62%,
    #140710 100%);
}
.foot__inner{
  position:relative;z-index:2;max-width:var(--maxw);
  margin:calc(-1 * clamp(150px,20vw,300px)) auto 0;
  padding:0 clamp(16px,4vw,40px) 34px;
}
.foot__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,48px);flex-wrap:wrap;
}
.foot__brand img{
  width:clamp(110px,13vw,160px);height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
/* Tickets-Button, prominent in der Mitte */
.foot__tickets{font-size:clamp(1rem,2.2vw,1.45rem)}
/* Social als runde Sticker-Icons (kein Text) */
.foot__social{display:flex;gap:14px}
.foot__social a{
  display:grid;place-items:center;
  width:clamp(46px,5vw,56px);height:clamp(46px,5vw,56px);
  border-radius:50%;
  background:var(--creme);color:var(--ink);
  border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .2s,color .2s;
}
.foot__social a:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink);background:var(--magenta);color:var(--weiss)}
.foot__social a:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.foot__social svg{width:54%;height:54%}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;
  border-top:2px solid rgba(255,255,255,.16);
  margin-top:clamp(36px,6vw,64px);padding-top:18px;
}
.foot__copy{font-size:.85rem;color:rgba(255,246,226,.72);text-transform:uppercase;letter-spacing:.03em;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.foot__legal{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot__legal a{font-size:.85rem;color:rgba(255,246,226,.72);text-transform:uppercase;letter-spacing:.03em;text-shadow:0 1px 4px rgba(0,0,0,.6);transition:color .18s var(--ease)}
.foot__legal a:hover{color:var(--gelb)}

/* =========================================================================
   REVEAL ANIMATIONS
   ========================================================================= */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal--left{transform:translateX(-46px)}
.reveal--right{transform:translateX(46px)}
.reveal--pop{transform:scale(.84)}
.reveal.in{opacity:1;transform:none}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* Tablet: nur noch 3 Kuenstler (Lorenz, Mia, Ikke), als Poster */
@media (max-width:1024px){
  .lineup__grid{grid-template-columns:repeat(3,1fr)}
  .tour__grid{grid-template-columns:repeat(2,1fr)}
  .hg--1,.hg--5,.hg--6{display:none}
  .hg--2{left:23%} .hg--3{left:45%} .hg--4{left:67%}
  .hero__edge{display:none}
}
/* Mobil/Tablet: Burger-Menue oben rechts statt Inline-Nav */
@media (max-width:768px){
  .nav__burger{display:flex}
  .nav__links{
    position:absolute;top:68px;right:clamp(12px,4vw,24px);
    flex-direction:column;align-items:flex-start;gap:8px;
    background:var(--ink);border:3px solid var(--ink);border-radius:16px;
    padding:14px 18px;box-shadow:0 10px 0 rgba(42,16,56,.3);
    min-width:190px;display:none;
  }
  .nav.is-open .nav__links{display:flex}
  .nav__links a:not(.btn){color:var(--creme);font-size:1.15rem}
  .nav__links a:not(.btn)::after{background:var(--gelb)}
  .nav__ticket{color:var(--gelb)}
  /* im Burger-Dropdown KEINE Pillen, auch wenn gescrollt (Dropdown bleibt Text auf Ink) */
  .nav.is-scrolled .nav__links a:not(.btn),
  .nav.is-scrolled .nav__links a.nav__ticket{
    background:none;border:0;box-shadow:none;padding:.2em 0;transform:none;color:var(--creme);
  }
  .nav.is-scrolled .nav__links a.nav__ticket{color:var(--gelb)}
}
/* Phone: nur noch 2 Kuenstler (Mia, Ikke) + Logo, als Poster */
@media (max-width:640px){
  .hg--2{display:none}
  .hg--3{left:35%} .hg--4{left:65%}
  .hg--3 img,.hg--4 img{height:clamp(230px,44vh,350px)}   /* Kuenstler kleiner (weniger wuchtig) */
  .hero__sun,.deco{display:none}
  /* Seal MUSS dasselbe top wie das Logo haben -> Ring konzentrisch ums Logo
     (sonst sitzt der Textring hoeher als das Logo). */
  .hero__seal{width:min(66vw,265px);top:44%}
  .hero__logo{width:min(50vw,200px);top:44%}              /* Logo kleiner + etwas tiefer */
  .hero__meta--left{left:14px;top:104px}                  /* Text tiefer (#8) */
  .hero__meta--right{right:14px;top:104px;gap:.45rem}
  .hero__tag{font-size:1rem}
  .hero__dates,.hero__note{font-size:.9rem}               /* passt mobil; strong bleibt 1.7em gross */
  .lineup__grid{grid-template-columns:repeat(2,1fr)}
  .tour__grid{grid-template-columns:1fr}
  /* Footer mobil: Bild oben (blendet ins Tuerkis), Inhalt unten auf dunklem Grund.
     Der dunkle Verlauf kommt vom Inhalt selbst (unten dunkel -> oben hell), Inhalt
     ist unten ausgerichtet. Desktop-::after hier aus. */
  .foot::after{display:none}
  .foot__inner{
    margin-top:calc(-1 * clamp(48px,13vw,80px));
    padding:clamp(74px,19vw,120px) clamp(16px,5vw,32px) 30px;
    background:linear-gradient(180deg, rgba(20,7,16,0) 0%, rgba(20,7,16,.92) 16%, #140710 34%);
  }
  .foot__top{flex-direction:column;gap:22px;text-align:center}
  .foot__bar{justify-content:center;text-align:center}
  .foot__legal{justify-content:center}
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important;transition:none}
  .hero__seal,.marquee__track,.preloader__burst,.hero__logo,.deco,.hero__sun{animation:none !important}
  .lu-carousel{rotate:none;width:100%;margin-left:0}  /* kein Auto-Lauf (JS), manuell scrollbar bleibt */
  .page-bg{transition:none}                /* Farbe springt direkt statt Crossfade */
  .fly-deco{display:none}
  .hero__logo{opacity:1}
  .preloader{display:none}
}