/* =============================================================
   Mazze Wiesner · der deutschrockpoet
   Leitidee: Die Bühne ist dunkel, bis jemand sie beleuchtet.
   Version 1.0
   ============================================================= */

/* ---------- 1 · Tokens ---------- */
:root{
  --nacht:      #08090b;
  --nacht-2:    #0d1013;
  --nebel:      #171c1f;
  --nebel-2:    #232a2d;

  --petrol:     #4d817f;   /* Markenfarbe, aus der Wortmarke gemessen */
  --petrol-hell:#8ac7c2;
  --petrol-tief:#2c4d4c;

  --bernstein:  #e0a04a;   /* Scheinwerfer */
  --licht:      #ffe9c7;
  --papier:     #e9e3d7;

  --text:       #c9d1d0;
  --text-dim:   #7b8886;
  --weiss:      #f4f7f6;

  --ff-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --ff-ui:      'Oswald', 'Arial Narrow', sans-serif;
  --ff-body:    'Newsreader', Georgia, 'Times New Roman', serif;

  --wrap: 1320px;
  --pad: clamp(20px, 5vw, 72px);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  --faceW: clamp(190px, min(30vw, 43vh), 440px);
  --faceH: calc(var(--faceW) * 1.414);
  --faceR: calc(var(--faceW) * 0.866);
}

/* ---------- 2 · Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:96px}
body{
  margin:0; background:var(--nacht); color:var(--text);
  font-family:var(--ff-body); font-size:clamp(16px,1.05vw,18px);
  line-height:1.62; font-weight:300;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,video,canvas,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,p,figure{margin:0}
::selection{background:var(--petrol); color:#fff}
:focus-visible{outline:2px solid var(--petrol-hell); outline-offset:3px}
.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}
.wrap{width:min(100% - var(--pad)*2, var(--wrap)); margin-inline:auto}

/* ---------- 3 · Typografie ---------- */
.display{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.4rem, 6.2vw, 5.4rem); line-height:.94;
  letter-spacing:.005em; color:var(--weiss); text-transform:uppercase;
}
.display--xl{font-size:clamp(2.8rem, 8vw, 7.2rem)}
.kicker{
  font-family:var(--ff-ui); font-weight:400; font-size:.78rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--petrol-hell);
  margin-bottom:1.4em; display:flex; align-items:center; gap:.9em;
}
.kicker::before{content:""; width:clamp(24px,4vw,56px); height:1px; background:var(--petrol); display:block}
.display + .lead,.display + .points,.display + .dates{margin-top:clamp(24px,3vw,40px)}
.lead{font-size:clamp(1.05rem,1.35vw,1.3rem); line-height:1.66; color:var(--text); max-width:56ch}
.lead em{font-style:italic; color:var(--petrol-hell)}

/* Zeilenweiser Aufbau bei [data-split] */
.line-mask{display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em}
.line-in{display:block; will-change:transform}
.display .line-mask{padding-bottom:.04em; margin-bottom:-.04em}

/* ---------- 4 · Buttons ---------- */
.btn{
  --c:var(--weiss);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--ff-ui); font-weight:400; font-size:.86rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--c);
  padding:1.05em 1.9em; border:1px solid rgba(255,255,255,.22); white-space:nowrap;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--petrol);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{color:#fff; border-color:var(--petrol)}
.btn:hover::before{transform:translateY(0)}
.btn--solid{background:var(--petrol); border-color:var(--petrol); color:#fff}
.btn--solid::before{background:var(--petrol-hell)}
.btn--solid:hover{color:var(--nacht)}
.btn--full{width:100%; justify-content:center}

/* ---------- 5 · Scheinwerfer & Korn ---------- */
.spot{
  position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(224,160,74,.14), rgba(77,129,127,.07) 42%, transparent 70%);
  opacity:0; transition:opacity .6s var(--ease);
}
body.has-pointer .spot{opacity:1}
.grain{
  position:fixed; inset:-120%; z-index:4; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  animation:grainShift 700ms steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1.5%)} 66%{transform:translate(1.5%,-1%)} 100%{transform:translate(0,0)}
}

/* ---------- 6 · Vorhang ---------- */
.curtain{
  position:fixed; inset:0; z-index:200; background:var(--nacht);
  display:grid; place-items:center; transition:opacity .8s var(--ease), visibility .8s;
}
.curtain.is-gone{opacity:0; visibility:hidden}
.curtain__inner{display:grid; gap:26px; justify-items:center; width:min(420px, 70vw)}
.curtain__mark{width:100%; opacity:0; filter:brightness(1.5); animation:markIn 1s var(--ease) .1s forwards}
@keyframes markIn{to{opacity:.9}}
.curtain__bar{width:100%; height:1px; background:rgba(255,255,255,.12); overflow:hidden}
.curtain__bar i{display:block; height:100%; width:0; background:var(--petrol-hell); transition:width .35s linear}

/* ---------- 7 · Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--pad); transition:transform .5s var(--ease), background .5s, backdrop-filter .5s;
}
.nav::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(to bottom, rgba(8,9,11,.94), rgba(8,9,11,.72) 65%, transparent);
  backdrop-filter:blur(9px); transition:opacity .5s var(--ease);
}
.nav.is-stuck::after{opacity:1}
.nav.is-hidden{transform:translateY(-110%)}
.nav__mark img{width:clamp(112px,12vw,156px); opacity:0; filter:brightness(1.6); transform:translateY(-6px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.nav.is-stuck .nav__mark img{opacity:.92; transform:none}
.nav__links{display:flex; align-items:center; gap:clamp(14px,2vw,32px)}
.nav__links a{
  font-family:var(--ff-ui); font-size:.76rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--text-dim); position:relative; padding:6px 0; transition:color .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--petrol-hell); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{color:var(--weiss)}
.nav__links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav__cta{color:var(--petrol-hell) !important; border:1px solid rgba(138,199,194,.32); padding:.7em 1.3em !important}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--petrol); color:#fff !important; border-color:var(--petrol)}
/* Kanalkürzel in der Kopfzeile. Sie sitzen in einer eigenen Leiste, nicht in
   `.nav__links`, damit sie am Handy sichtbar bleiben, während die Navigation ins
   Menü wandert. */
.nav__social{display:flex; align-items:center; gap:clamp(9px,1vw,15px)}
.nav__social a{
  display:grid; place-items:center; width:30px; height:30px;
  color:var(--text-dim); border-radius:50%;
  transition:color .35s, background .35s, transform .35s var(--ease);
}
/* `fill:currentColor` lässt die Zeichen die Schriftfarbe erben: eine Farbregel für
   Ruhe- und Schwebezustand, keine zweite Bilddatei, kein Umfärben von Hand. */
.nav__social svg{width:17px; height:17px; fill:currentColor; display:block}
.nav__social a:hover{color:var(--nacht); background:var(--petrol-hell); transform:translateY(-1px)}
.nav__social a:focus-visible{outline:2px solid var(--petrol-hell); outline-offset:3px}

.nav__burger{display:none; width:42px; height:42px; position:relative}
.nav__burger span{position:absolute; left:9px; width:24px; height:1.5px; background:var(--weiss); transition:transform .4s var(--ease), opacity .3s}
.nav__burger span:nth-child(1){top:18px}
.nav__burger span:nth-child(2){top:24px}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------- 8 · Hero ---------- */
.hero{position:relative; min-height:100svh; display:grid; align-items:center; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__video{width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.06) brightness(.8)}
.hero__shader{position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:screen; opacity:1; pointer-events:none}
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(105% 78% at 50% 40%, rgba(8,9,11,.28) 12%, rgba(8,9,11,.62) 58%, var(--nacht) 100%),
    linear-gradient(to bottom, rgba(8,9,11,.78), transparent 26%, transparent 52%, rgba(8,9,11,.86) 88%, var(--nacht));
}
.hero__content::after{content:""; position:absolute; left:50%; top:52%; width:min(900px,86vw); height:52%; transform:translateX(-50%); z-index:-1; background:radial-gradient(closest-side, rgba(6,8,9,.72), transparent 78%); pointer-events:none}
.hero__content{position:relative; z-index:2; isolation:isolate; width:min(100% - var(--pad)*2, var(--wrap)); margin-inline:auto; text-align:center; padding-top:6vh}
.hero__mark{width:min(620px, 74vw); margin-inline:auto; filter:drop-shadow(0 18px 60px rgba(0,0,0,.7)) brightness(1.55)}
.hero__title{margin:0}
.hero__line{
  font-family:var(--ff-ui); font-weight:300; text-transform:uppercase;
  font-size:clamp(.78rem,1.5vw,1rem); letter-spacing:.3em; color:var(--text);
  margin:clamp(22px,3.5vh,42px) auto 0; max-width:52ch; line-height:1.9;
}
.hero__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:clamp(34px,6vh,68px)}
.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:grid; justify-items:center; gap:10px; color:var(--text-dim);
  font-family:var(--ff-ui); font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
}
.hero__scroll i{display:block; width:1px; height:54px; background:linear-gradient(var(--petrol-hell), transparent); position:relative; overflow:hidden}
.hero__scroll i::after{content:""; position:absolute; inset:0; background:var(--licht); animation:scrollRun 2.2s var(--ease-io) infinite}
@keyframes scrollRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- 9 · Der Moment ---------- */
.moment{position:relative; padding:clamp(110px,16vh,190px) 0; overflow:hidden}
.moment__bg{position:absolute; inset:-12% 0; z-index:0; opacity:.22}
.moment__bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.15)}
.moment::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(90% 70% at 22% 50%, rgba(8,9,11,.55), var(--nacht) 72%);
}
.moment__inner{position:relative; z-index:2}
.moment .lead{margin-top:clamp(24px,3vw,38px)}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(18px,2.4vw,34px); margin-top:clamp(46px,6vw,80px)}
.facts li{border-top:1px solid rgba(255,255,255,.13); padding-top:20px}
.facts__num{
  display:block; font-family:var(--ff-display); font-size:clamp(2.6rem,5vw,4rem);
  line-height:1; color:var(--bernstein); margin-bottom:.24em;
}
.facts__txt{display:block; font-size:.98rem; color:var(--text-dim); line-height:1.55; max-width:32ch}
/* Die verlinkte Kachel verhält sich wie die beiden anderen, nur dass die Zahl beim
   Überfahren in Petrol umspringt und eine feine Linie unter dem Text erscheint. */
.facts__link{display:block; transition:opacity .35s}
.facts__link .facts__txt{border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .35s, color .35s}
.facts__link:hover .facts__num{color:var(--petrol-hell); -webkit-text-stroke-color:var(--petrol-hell)}
.facts__link:hover .facts__txt{color:var(--weiss); border-bottom-color:rgba(138,199,194,.4)}

/* ---------- 10 · Deutschrock Heroes ---------- */
.heroes{padding:clamp(90px,12vh,150px) 0 clamp(110px,14vh,170px); background:linear-gradient(var(--nacht), var(--nacht-2) 40%, var(--nacht))}
.heroes__head{margin-bottom:clamp(34px,5vw,64px)}
.marquee{overflow:hidden; padding:clamp(14px,2vw,22px) 0; border-block:1px solid rgba(255,255,255,.1); margin-bottom:clamp(48px,7vw,92px)}
.marquee__track{display:flex; align-items:center; gap:clamp(24px,4vw,64px); width:max-content; will-change:transform}
.marquee__track span{
  font-family:var(--ff-display); font-size:clamp(2rem,5vw,4.2rem); line-height:1;
  text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(233,227,215,.42);
  white-space:nowrap;
}
.marquee__track i{color:var(--petrol); font-size:clamp(.8rem,1.4vw,1.2rem); font-style:normal}
.heroes__body{display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); gap:clamp(26px,3.5vw,56px); align-items:center}
.heroes__poster{position:relative}
.heroes__poster img{
  width:100%; border-radius:2px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.07);
  transform:rotate(-1.2deg);
}
.heroes__poster figcaption{
  margin-top:18px; font-family:var(--ff-ui); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-dim);
}
.points{margin:clamp(30px,4vw,48px) 0 clamp(30px,4vw,44px); display:grid; gap:clamp(20px,2.6vw,32px)}
.points li{border-left:1px solid rgba(138,199,194,.28); padding-left:clamp(16px,2vw,26px)}
.points h3{
  font-family:var(--ff-ui); font-weight:500; font-size:1rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--weiss); margin-bottom:.55em;
}
.points p{color:var(--text-dim); font-size:1rem; max-width:46ch}

/* ---------- 11 · Litfaßsäule ---------- */
/* Am Rechner kein eigener Blockhintergrund: die Säule steht auf demselben Nachtschwarz
   wie ihre Nachbarn, damit sie frei im Raum schwebt und nicht in einem Kasten sitzt.
   Am Handy ist es umgekehrt, siehe die Regel unter (max-width:860px): dort ist alles
   untereinander gestapelt, und der Verlauf mit den beiden Linien grenzt den Abschnitt
   sichtbar ab. Der Bühnenschein im ::before gilt in beiden Fällen, er gehört zur Säule. */
.saeule{
  position:relative; overflow:hidden; background:var(--nacht);
  padding:clamp(48px,6vh,88px) 0 clamp(28px,3.5vh,52px);
}
.saeule::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 34% at 50% 56%, rgba(224,160,74,.055), transparent 72%);
}
.saeule__sticky{
  position:relative; display:grid; grid-template-rows:auto auto auto;
  align-content:center; gap:clamp(6px,1.2vh,18px);
}
.saeule__head{text-align:center; position:relative; z-index:6; margin-bottom:clamp(30px,5vh,64px)}
.saeule__head .kicker{justify-content:center}
.saeule__head .kicker::after{content:""; width:clamp(24px,4vw,56px); height:1px; background:var(--petrol); display:block}

.column{
  position:relative; display:grid; place-items:center;
  perspective:1400px; perspective-origin:50% 45%;
  min-height:0; padding:clamp(40px,6vh,74px) 0 clamp(22px,3.4vh,40px); touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
}
.column:active{cursor:grabbing}
.column:focus-visible{outline:none}
.column:focus-visible .column__body{filter:drop-shadow(0 0 0 var(--petrol-hell))}
.column__body{
  position:relative; width:var(--faceW); height:var(--faceH);
  transform-style:preserve-3d; will-change:transform;
  transform:rotateX(-2deg) rotateY(0deg);
}
.column__cap{display:none}
.column__shadow{
  position:absolute; left:50%; bottom:-6%; width:calc(var(--faceW)*2.6); height:60px;
  transform:translateX(-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.85), transparent 72%);
  filter:blur(6px);
}

.face{
  position:absolute; inset:0; width:100%; height:100%;
  transform-origin:50% 50%; backface-visibility:hidden; overflow:hidden;
  background:#0c0f11; padding:0; text-align:left; color:var(--text);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.09), inset -1px 0 0 rgba(255,255,255,.09),
             inset 0 0 0 1px rgba(255,255,255,.04);
}
.face--video{cursor:pointer}
.face__paper{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='420'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9 .04' numOctaves='4'/></filter><rect width='300' height='420' filter='url(%23p)' opacity='.55'/></svg>");
}
.face::after{ /* Rundungs-Illusion an den Kanten plus Abdunklung nach Drehwinkel */
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(rgba(0,0,0,var(--dark,.35)), rgba(0,0,0,var(--dark,.35))),
    linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,.7));
  transition:background .15s linear;
}
.face__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) contrast(1.1) brightness(.82);
  transition:transform .9s var(--ease), filter .6s;
}
.face--video:hover .face__img{transform:scale(1.055); filter:saturate(1) contrast(1.12) brightness(.95)}
.face__grad{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(6,8,9,.94) 4%, rgba(6,8,9,.36) 46%, rgba(6,8,9,.6));
}
.face__meta{position:absolute; left:0; right:0; bottom:0; z-index:5; padding:clamp(14px,1.6vw,22px); display:grid; gap:.4em}
.face__kicker{font-family:var(--ff-ui); font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--petrol-hell)}
.face__title{font-family:var(--ff-display); font-size:clamp(1.1rem,1.9vw,1.7rem); line-height:1.02; text-transform:uppercase; color:var(--weiss)}
.face__time{font-family:var(--ff-ui); font-size:.64rem; letter-spacing:.24em; color:var(--text-dim)}
.face__play{
  position:absolute; z-index:5; top:50%; left:50%; width:64px; height:64px; margin:-32px 0 0 -32px;
  border-radius:50%; display:grid; place-items:center;
  background:rgba(8,9,11,.42); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px);
  transition:transform .5s var(--ease), background .4s, border-color .4s;
}
.face__play svg{width:22px; height:22px; fill:var(--weiss); margin-left:2px}
.face--video:hover .face__play{transform:scale(1.13); background:var(--petrol); border-color:var(--petrol)}

/* Papier-Facetten */
.face--paper{background:linear-gradient(165deg,#12171a,#080a0b 62%)}
.face--paper::before{
  content:""; position:absolute; inset:5% 6%; z-index:1;
  background:var(--papier); opacity:.055;
  clip-path:polygon(2% 0,98% 1%,100% 96%,72% 100%,38% 97%,0 99%);
}
.face--paper2::before{background:var(--petrol); opacity:.085}
.face--paper3::before{background:var(--bernstein); opacity:.055}
.paper__stack{position:absolute; inset:0; z-index:2; display:grid; align-content:center; justify-items:center; gap:.12em; padding:12% 8%; text-align:center}
.paper__line{
  font-family:var(--ff-display); font-size:clamp(1.5rem,3vw,2.6rem); line-height:.92;
  text-transform:uppercase; color:rgba(233,227,215,.82);
}
.paper__line--out{color:transparent; -webkit-text-stroke:1px rgba(233,227,215,.5)}
.paper__small{
  font-family:var(--ff-ui); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-dim); line-height:1.9; margin-top:1.2em;
}
.paper__small--top{margin:0 0 1.2em}
.paper__torn{position:absolute; left:0; right:0; bottom:0; height:14%;
  background:linear-gradient(to top, rgba(6,8,9,.9), transparent);
  clip-path:polygon(0 38%,7% 22%,15% 45%,26% 18%,37% 40%,49% 15%,61% 42%,73% 20%,84% 44%,93% 24%,100% 40%,100% 100%,0 100%);
}

.saeule__ctrl{display:flex; align-items:center; justify-content:center; gap:22px; position:relative; z-index:5}
.saeule__ctrl button{
  width:46px; height:46px; border:1px solid rgba(255,255,255,.18); border-radius:50%;
  display:grid; place-items:center; color:var(--text); font-size:1rem;
  transition:background .4s, border-color .4s, color .4s;
}
.saeule__ctrl button:hover{background:var(--petrol); border-color:var(--petrol); color:#fff}
.saeule__dots{display:flex; gap:9px}
.saeule__dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2); transition:background .4s, transform .4s}
.saeule__dots i.on{background:var(--petrol-hell); transform:scale(1.5)}

/* ---------- 12 · Band ---------- */
.band{position:relative; padding:clamp(100px,14vh,170px) 0; overflow:hidden}
.band__bg{position:absolute; inset:-10% 0; z-index:0; opacity:.24}
.band__bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(.4)}
.band::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, var(--nacht) 32%, rgba(8,9,11,.55))}
.band__inner{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(34px,5vw,74px); align-items:center}
.band__strip{display:grid; gap:clamp(12px,1.6vw,20px); grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b c"}
.band__strip figure:nth-child(1){grid-area:a}
.band__strip figure:nth-child(2){grid-area:b}
.band__strip figure:nth-child(3){grid-area:c}
.band__strip img{width:100%; aspect-ratio:16/9; object-fit:cover; filter:saturate(.85) brightness(.9); transition:filter .6s, transform .8s var(--ease)}
.band__strip figure{overflow:hidden; box-shadow:0 24px 60px -28px #000}
.band__strip figure:hover img{filter:saturate(1.05) brightness(1); transform:scale(1.04)}

/* ---------- 13 · Der Weg ---------- */
.weg{padding:clamp(100px,14vh,160px) 0 clamp(60px,8vh,100px); background:var(--nacht-2)}
.weg__head{margin-bottom:clamp(40px,6vw,80px)}
.rail{width:min(100% - var(--pad)*2, var(--wrap)); margin-inline:auto}
.rail__track{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(18px,2.4vw,40px); padding-bottom:20px; position:relative}
.rail__track::before{content:""; position:absolute; left:0; right:0; top:14px; height:1px; background:linear-gradient(90deg, rgba(138,199,194,.35), rgba(138,199,194,.35) 92%, transparent)}
.stop{padding-top:44px; position:relative}
.stop__dot{position:absolute; top:9px; left:0; width:11px; height:11px; border-radius:50%; background:var(--nacht-2); border:1px solid var(--petrol-hell)}
.stop__dot::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--petrol-hell); opacity:0; transition:opacity .5s}
.stop.is-on .stop__dot::after{opacity:1}
.stop h3{font-family:var(--ff-ui); font-weight:500; font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; color:var(--weiss); margin-bottom:.7em}
.stop p{color:var(--text-dim); font-size:1rem}
.stop--end h3{color:var(--bernstein)}
.stop a{color:var(--petrol-hell); border-bottom:1px solid currentColor; padding-bottom:2px}

/* ---------- 14 · Termine ---------- */
.termine{
  position:relative; padding:clamp(90px,12vh,150px) 0;
  background:
    radial-gradient(90% 60% at 82% 12%, rgba(224,160,74,.055), transparent 66%),
    linear-gradient(180deg, #0a0e10 0%, #0d1315 48%, #0a0e10 100%);
  border-block:1px solid rgba(255,255,255,.055);
}
.termine .display{margin-bottom:clamp(34px,5vw,60px)}
.dates{display:grid; gap:0; border-top:1px solid rgba(255,255,255,.11)}
/* Die vierte Spalte hat eine feste Breite, und das ist keine Kosmetik, sondern Pflicht:
   Jede Zeile ist ein eigenes Raster. Stand dort `auto`, richtete sich die Spaltenbreite
   nach dem Knopftext, und die Zeile mit dem kurzen „Tickets" rechnete anders als die drei
   mit „Tickets folgen". Ergebnis waren vier Zeilen, deren Besetzungsangaben nicht
   untereinander standen. Mit fester Breite rechnen alle Zeilen gleich. */
.dates__row{
  display:grid; grid-template-columns:minmax(120px,.5fr) minmax(0,1.4fr) minmax(0,1fr) clamp(150px,12vw,190px);
  gap:clamp(12px,2vw,28px); align-items:center; padding:clamp(18px,2.4vw,26px) 0;
  border-bottom:1px solid rgba(255,255,255,.11); transition:background .5s, padding-left .5s var(--ease);
}
.dates__row:hover{background:rgba(255,255,255,.02); padding-left:14px}
.dates__date{font-family:var(--ff-display); font-size:clamp(1.2rem,2vw,1.7rem); color:var(--weiss); text-transform:uppercase}
.dates__place{font-family:var(--ff-ui); letter-spacing:.1em; text-transform:uppercase; font-size:.9rem; color:var(--text)}
.dates__note{font-size:.9rem; color:var(--text-dim)}
.dates__btn{
  font-family:var(--ff-ui); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-dim); border:1px solid rgba(255,255,255,.16); padding:.75em 1em;
  text-align:center; white-space:nowrap;
}
.dates__row--empty{opacity:.42}
.dates__hint{margin-top:22px; font-family:var(--ff-ui); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim)}

/* ---------- 15 · Booking ---------- */
.booking{padding:clamp(100px,14vh,170px) 0; background:linear-gradient(var(--nacht), #0a0e10)}
.booking__inner{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start}
.booking__contact{margin-top:clamp(32px,4vw,48px); display:grid; gap:16px}
.booking__contact li{display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:baseline; border-top:1px solid rgba(255,255,255,.1); padding-top:14px}
.booking__contact span:first-child{font-family:var(--ff-ui); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--text-dim)}
.booking__contact a{color:var(--weiss); transition:color .35s}
.booking__contact a:hover{color:var(--petrol-hell)}
[data-placeholder]{position:relative; color:var(--text-dim) !important; font-style:italic}

.form{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px)}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}
.field{position:relative}
.field--wide{grid-column:1/-1}
.field input,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.19);
  color:var(--weiss); font-family:var(--ff-body); font-size:1.02rem; padding:16px 2px 12px;
  transition:border-color .45s var(--ease);
}
.field textarea{resize:vertical; min-height:120px; line-height:1.6}
.field label{
  position:absolute; left:2px; top:16px; pointer-events:none;
  font-family:var(--ff-ui); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
  transition:transform .4s var(--ease), color .4s, font-size .4s;
  transform-origin:left top;
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--petrol-hell)}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-18px) scale(.76); color:var(--petrol-hell);
}
.field.is-bad input,.field.is-bad textarea{border-color:#c4614f}
.check{grid-column:1/-1; display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--text-dim)}
.check input{margin-top:5px; accent-color:var(--petrol)}
.check a{color:var(--petrol-hell); border-bottom:1px solid currentColor}
.form > .btn{grid-column:1/-1}
.form__status{grid-column:1/-1; min-height:1.4em; font-family:var(--ff-ui); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--petrol-hell)}
.form__status.is-bad{color:#d97a66}

/* ---------- 16 · Footer ---------- */
.foot{padding:clamp(48px,7vh,80px) 0; background:#05070800; border-top:1px solid rgba(255,255,255,.09)}
.foot__inner{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
.foot__mark{width:150px; opacity:.55; filter:brightness(1.6)}
.foot__links{display:flex; gap:26px}
.foot__links a{font-family:var(--ff-ui); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim); transition:color .35s}
.foot__links a:hover{color:var(--petrol-hell)}
.foot__note{font-size:.82rem; color:var(--text-dim); width:100%; padding-top:18px; border-top:1px solid rgba(255,255,255,.07)}
/* Die Machernennung steht bewusst kleiner als der Rechtshinweis darüber und ohne
   eigene Linie: sie schließt den Fußbereich ab, sie eröffnet keinen neuen. */
.foot__macher{
  width:100%; margin-top:12px;
  font-family:var(--ff-ui); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-dim); opacity:.75;
}
.foot__macher a{color:var(--petrol-hell); border-bottom:1px solid rgba(138,199,194,.3); transition:border-color .35s}
.foot__macher a:hover{border-color:var(--petrol-hell)}

/* ---------- 17 · Video-Fokus ---------- */
.focus{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  background:rgba(4,6,7,.9); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .5s var(--ease);
}
.focus.is-on{opacity:1}
.focus[hidden]{display:none}
.focus__close{
  position:absolute; top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); z-index:5;
  width:48px; height:48px; border:1px solid rgba(255,255,255,.2); border-radius:50%;
  display:grid; place-items:center; font-size:1rem; transition:background .4s, border-color .4s, transform .4s;
}
.focus__close:hover{background:var(--petrol); border-color:var(--petrol); transform:rotate(90deg)}
.focus__stage{width:min(1180px, 92vw); display:grid; gap:18px; transform:scale(.94) translateY(16px); transition:transform .6s var(--ease)}
.focus.is-on .focus__stage{transform:none}
.focus__frame{
  position:relative; background:#000; overflow:hidden;
  box-shadow:0 50px 120px -40px #000, 0 0 0 1px rgba(255,255,255,.09), 0 0 90px -20px rgba(77,129,127,.35);
}
.focus__frame video{width:100%; display:block; max-height:76svh; background:#000}
.focus__caption{font-family:var(--ff-ui); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--text-dim); text-align:center}
.focus__loader{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; transition:opacity .4s}
.focus__loader.is-off{opacity:0}
.focus__loader i{width:38px; height:38px; border:1px solid rgba(255,255,255,.18); border-top-color:var(--petrol-hell); border-radius:50%; animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* eigener Player */
.player{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:clamp(8px,1.2vw,16px);
  padding:clamp(12px,1.6vw,20px);
  background:linear-gradient(to top, rgba(4,6,7,.94), rgba(4,6,7,.45) 62%, transparent);
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s var(--ease);
}
.focus__frame:hover .player,.player.is-shown{opacity:1; transform:none}
.player button{width:38px; height:38px; display:grid; place-items:center; border-radius:50%; transition:background .35s}
.player button:hover{background:rgba(255,255,255,.1)}
.player svg{width:19px; height:19px; fill:var(--weiss); color:var(--weiss)}
.player__play .ic-pause,.player.is-playing .ic-play{display:none}
.player.is-playing .ic-pause{display:block}
.player__mute .ic-mute{display:none}
.player.is-muted .ic-vol{display:none}
.player.is-muted .ic-mute{display:block}
.player__time{font-family:var(--ff-ui); font-size:.74rem; letter-spacing:.1em; color:var(--weiss); min-width:42px; text-align:center; font-variant-numeric:tabular-nums}
.player__time--dim{color:var(--text-dim)}
.player__bar{position:relative; flex:1; height:22px; display:flex; align-items:center; cursor:pointer}
.player__bar::before{content:""; position:absolute; left:0; right:0; height:2px; background:rgba(255,255,255,.22)}
.player__buf{position:absolute; left:0; height:2px; width:0; background:rgba(255,255,255,.34)}
.player__prog{position:absolute; left:0; height:2px; width:0; background:var(--petrol-hell)}
.player__prog b{position:absolute; right:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--licht); transform:scale(0); transition:transform .3s var(--ease)}
.player__bar:hover .player__prog b,.player__bar:focus-visible .player__prog b{transform:scale(1)}
.player__vol{width:78px; accent-color:var(--petrol-hell); background:transparent}

/* ---------- 18 · Bewegungsarme Darstellung ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .grain{display:none}
  .saeule{height:auto}
  .saeule__sticky{position:static; height:auto}
}

/* ---------- 19 · Mobil ---------- */
@media (max-width:1020px){
  .rail__track{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(26px,4vw,44px)}
  .rail__track::before{display:none}
  .stop{border-top:1px solid rgba(138,199,194,.28); padding-top:32px}
  .stop__dot{top:-6px}
  /* minmax(0,1fr) statt 1fr: Eine 1fr-Spalte bekommt von sich aus min-width:auto
     und wird deshalb so breit wie ihr breitester unteilbarer Inhalt. Auf 320 Pixel
     schob die Mailadresse im Bookingblock die Spalte auf 316 Pixel und die ganze
     Seite liess sich seitlich schieben. Mit minmax(0,1fr) darf die Spalte schrumpfen. */
  .heroes__body,.band__inner,.booking__inner{grid-template-columns:minmax(0,1fr)}
  .heroes__poster{max-width:520px}
  .band__inner{gap:40px}
}
@media (max-width:860px){
  /* Das Menü füllt den Schirm, und dafür darf `.nav` keine Transformation tragen:
     Ein transformierter Vorfahre wird für `position:fixed` zum Bezugssystem, das Menü
     war dadurch nur so hoch wie die Kopfzeile selbst. Die ersten drei Einträge lagen
     oberhalb des Bildrands und waren schlicht nicht erreichbar. Aufgefallen ist das
     erst am 4.9.2026, weil GSAP beim Einblenden ein `translate3d` auf `.nav` legt,
     das dort auch nach der Animation stehen bleibt. Solange das Menü offen ist, wird
     es abgeschaltet, die Kopfzeile steht dann ohnehin still. */
  .nav.is-open{transform:none !important}
  .nav__links{
    position:fixed; inset:0; z-index:-1; flex-direction:column; justify-content:center;
    gap:26px; background:rgba(8,9,11,.97); backdrop-filter:blur(12px);
    /* Oben Platz für Kopfzeile und Kanäle, sonst liegt der erste Eintrag darunter. */
    padding:96px var(--pad) 40px;
    opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
  }
  .nav.is-open .nav__links{opacity:1; visibility:visible}
  .nav__links a{font-size:1.05rem; letter-spacing:.24em}
  .nav__burger{display:block; z-index:2}
  /* Am Handy links neben dem Menüknopf, und dort bleiben sie auch bei offenem Menü:
     Das `z-index:2` hebt sie über die aufgeklappte Navigation, damit sie jederzeit
     erreichbar sind, ohne das Menü erst wieder schließen zu müssen. */
  .nav__social{z-index:2; gap:4px; margin-left:auto}
  .nav__social a{width:32px; height:32px}
  .nav__social svg{width:16px; height:16px}

  /* Säule bleibt Säule, nur kleiner. Waagerecht wischen dreht, senkrecht scrollt. */
  :root{--faceW:clamp(150px, 44vw, 240px)}
  .column{perspective:900px}
  .saeule__ctrl button{width:52px; height:52px}

  .form{grid-template-columns:1fr}
  .dates__note{grid-column:1/-1}
  .foot__inner{flex-direction:column; align-items:flex-start; gap:20px}
}
@media (max-width:560px){
  .rail__track{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .hero__actions{flex-direction:column; align-items:stretch; padding-inline:8vw}
  .hero__actions .btn{justify-content:center; font-size:.8rem}
  .btn{padding:1em 1.4em; font-size:.8rem}
}

/* =============================================================
   VERSION 2 · Deutschrock Heroes
   Ergänzungen und Überschreibungen zur Grundfassung oben.
   Reihenfolge zählt: was hier steht, gewinnt.
   ============================================================= */

/* ---------- Vorhang mit Showtitel ---------- */
.curtain__inner{width:min(560px, 82vw)}
.curtain__title{
  font-family:var(--ff-display); font-size:clamp(2.2rem,6vw,3.6rem); line-height:.92;
  text-transform:uppercase; color:var(--weiss); text-align:center; opacity:0;
  animation:markIn 1s var(--ease) .1s forwards;
}

/* ---------- Navigation: Textmarke ---------- */
.nav__show{
  font-family:var(--ff-display); font-size:clamp(.95rem,1.5vw,1.25rem); line-height:1;
  text-transform:uppercase; color:var(--weiss); letter-spacing:.01em;
  opacity:0; transform:translateY(-6px); display:block;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.nav.is-stuck .nav__show{opacity:1; transform:none}

/* ---------- Hero ---------- */
.hero__eyebrow{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-bottom:clamp(12px,2vh,24px);
}
.hero__eyebrow span{
  font-family:var(--ff-ui); font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--text-dim);
}
.hero__eyebrow img{width:min(190px,38vw); filter:brightness(1.7); opacity:.95}
.hero__show{
  font-family:var(--ff-display); font-weight:400; margin:0;
  font-size:clamp(2.7rem, 10vw, 8.4rem); line-height:.87; letter-spacing:.004em;
  text-transform:uppercase; color:var(--weiss);
  text-shadow:0 24px 80px rgba(0,0,0,.85), 0 0 70px rgba(0,0,0,.5);
}

/* ---------- Laufband mit Vorspann ---------- */
.marquee__track span{display:flex; align-items:baseline; gap:.5em}
.marquee__track em{
  font-family:var(--ff-ui); font-style:normal; font-weight:300;
  font-size:clamp(.5rem,.72vw,.6rem); letter-spacing:.28em; text-transform:uppercase;
  color:var(--petrol-hell); white-space:nowrap; align-self:flex-start; padding-top:.9em;
}

/* ---------- Die Vier ---------- */
.vier{margin-top:clamp(56px,8vw,104px)}
.vier__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px)}
.vier__card{
  position:relative; padding:clamp(20px,2.4vw,30px) clamp(16px,2vw,26px) clamp(24px,3vw,34px);
  border:1px solid rgba(255,255,255,.11); background:linear-gradient(165deg,rgba(255,255,255,.035),transparent 62%);
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.vier__card:hover{border-color:rgba(138,199,194,.38); transform:translateY(-4px)}
.vier__label{
  display:block; font-family:var(--ff-ui); font-size:.58rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:1.1em;
}
.vier__card h3{
  font-family:var(--ff-display); font-weight:400; font-size:clamp(1.3rem,2.1vw,2rem);
  line-height:.98; text-transform:uppercase; color:var(--weiss); margin-bottom:.7em;
}
.vier__songs{font-size:.92rem; color:var(--text-dim); line-height:1.55}
.todo{color:var(--bernstein); font-style:italic; opacity:.85}

/* ---------- Maffay ---------- */
.maffay{padding:clamp(90px,12vh,150px) 0; background:linear-gradient(var(--nacht), var(--nacht-2) 50%, var(--nacht))}

/* Bild und Text teilen sich die Oberkante (`start`, nicht `center`). Bei `center`
   schwamm der kürzere Text mittig neben dem hohen Hochformatbild, oben und unten
   klafften je rund 150 Pixel, und der Block wirkte dadurch bodenlos.
   Das Bild bekommt außerdem mehr Gewicht als der Text, damit die beiden Spalten
   nicht gleich schwer sind und die rechte Hälfte nicht ins Leere läuft. */
.maffay__inner{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(34px,5vw,72px); align-items:start;
}
.maffay__bild{position:relative}
.maffay__bild img{
  width:100%; box-shadow:0 40px 90px -34px #000, 0 0 0 1px rgba(255,255,255,.07),
  0 0 100px -30px rgba(77,129,127,.4);
}
.maffay__bild figcaption{
  margin-top:16px; font-family:var(--ff-ui); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-dim);
}

/* Der Text hängt an einer senkrechten Petrol-Linie, dasselbe Motiv wie `.fassung__wo`
   im Abendblock. Damit hat der Absatz eine Kante, an der er sich festhält, und liest
   sich als das, was er ist: eine Auszeichnung. Oben zieht ein kleiner Vorschub die
   Linie auf die Höhe der Bildoberkante. */
.maffay__text{
  padding-left:clamp(18px,2vw,30px);
  border-left:2px solid var(--petrol);
  padding-top:2px;
}
/* Nur die Absätze bekommen Lesebreite. Der Container selbst bleibt breit, sonst
   fiele die Plakatüberschrift in eine dritte Zeile. */
.maffay__text .lead{max-width:52ch}
.maffay__text .kicker{margin-top:0}
.lead--klein{font-size:1rem; color:var(--text-dim); margin-top:1.4em; max-width:52ch}

/* Verweis im Fließtext, etwa auf das Videokarussell. Petrol und eine feine Linie,
   damit er als Weg lesbar ist und nicht als Auszeichnung. */
.lead__link{
  color:var(--petrol-hell); border-bottom:1px solid rgba(138,199,194,.42);
  transition:border-color .35s, color .35s;
}
.lead__link:hover{color:var(--weiss); border-color:var(--weiss)}

/* ---------- Besetzung ---------- */
.besetzung{margin-top:clamp(28px,3.6vw,44px); display:grid; gap:14px; max-width:52ch}
.besetzung li{
  display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:baseline;
  border-top:1px solid rgba(255,255,255,.1); padding-top:13px;
}
.besetzung span{font-family:var(--ff-ui); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--text-dim)}
.besetzung b{font-weight:400; color:var(--weiss); font-size:1.02rem}

.kranz{
  position:absolute; top:clamp(10px,1.6vh,22px); left:50%; transform:translateX(-50%);
  width:calc(var(--faceW) * 1.68); max-width:calc(100% - 2 * var(--pad));
  z-index:8; text-align:center; opacity:0;
  font-family:var(--ff-ui); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--petrol-hell); line-height:1.5;
  transition:opacity .6s var(--ease);
  pointer-events:none;
}

/* ---------- Der Abend ---------- */
.abend{padding:clamp(90px,12vh,150px) 0; background:var(--nacht)}
.fassungen{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); margin-top:clamp(34px,5vw,60px)}
/* Drei Formationen nebeneinander: solo, klein, groß. Die mittlere ist die schmalste
   Spalte, weil sie am wenigsten Text trägt. */
.fassungen--drei{grid-template-columns:repeat(3,1fr)}

/* Der Ablauf des Abends. Kein Kasten, sondern ein eingerückter Absatz an einer
   senkrechten Linie: Er erklärt die drei Formationen darüber, er steht nicht daneben. */
.ablauf{
  margin-top:clamp(40px,5vw,68px); padding-left:clamp(18px,2vw,30px);
  border-left:2px solid var(--petrol); max-width:76ch;
}
.ablauf__titel{
  font-family:var(--ff-ui); font-weight:400; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--petrol-hell); margin-bottom:1.2em;
}
.ablauf p{color:var(--text-dim); font-size:1rem; line-height:1.75}
.ablauf p + p{margin-top:1.1em}

/* Hinweis unter den vier Songkarten. Klein, damit er die Titel nicht überstimmt. */
.vier__hinweis{
  margin-top:clamp(20px,2.6vw,32px); font-family:var(--ff-ui); font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); opacity:.8;
}
.fassung{position:relative; padding:clamp(26px,3vw,40px); border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.018)}
.fassung__nr{
  position:absolute; top:clamp(18px,2vw,26px); right:clamp(18px,2vw,26px);
  font-family:var(--ff-display); font-size:clamp(1.8rem,3.4vw,3rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(138,199,194,.34);
}
.fassung h3{
  font-family:var(--ff-display); font-weight:400; font-size:clamp(1.6rem,2.8vw,2.4rem);
  line-height:1; text-transform:uppercase; color:var(--weiss); margin-bottom:.7em;
}
.fassung p{color:var(--text-dim); font-size:1rem; max-width:44ch}
.fassung__sub{
  color:var(--weiss) !important; font-family:var(--ff-ui); font-weight:300;
  font-size:.78rem !important; letter-spacing:.18em; text-transform:uppercase;
  margin:-.3em 0 1.1em;
}
.fassung__wo{
  margin-top:1.1em; padding-left:.9em; border-left:2px solid var(--petrol);
  font-family:var(--ff-ui); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--petrol-hell) !important;
}
.fassung__meta{margin-top:1.1em; font-family:var(--ff-ui); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase}

/* ---------- Termine ---------- */
.dates__date span{display:block; font-size:.5em; color:var(--text-dim); letter-spacing:.08em}
.dates__place i{font-style:normal; font-family:var(--ff-body); text-transform:none; letter-spacing:0; color:var(--text-dim); font-size:.95rem}
.dates__row{align-items:center}
a.dates__btn{transition:background .4s, color .4s, border-color .4s}
a.dates__btn:hover{background:var(--petrol); border-color:var(--petrol); color:#fff}
.dates__btn--off{opacity:.5}
.dates__hint a{color:var(--petrol-hell); border-bottom:1px solid currentColor}

/* ---------- Säule: Fotoflächen ---------- */
.face--foto{cursor:zoom-in}
.face--foto .face__img{filter:saturate(.86) contrast(1.06) brightness(.86)}
.face--foto:hover .face__img{transform:scale(1.05); filter:saturate(1) contrast(1.08) brightness(1)}
.face__title--klein{font-family:var(--ff-ui); font-weight:400; font-size:.82rem; letter-spacing:.06em; line-height:1.35; text-transform:none}
.face__lupe{
  position:absolute; z-index:5; top:50%; left:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%; display:grid; place-items:center; color:var(--weiss);
  background:rgba(8,9,11,.4); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(4px);
  transition:transform .5s var(--ease), background .4s, border-color .4s;
}
.face__lupe svg{width:20px; height:20px}
.face--foto:hover .face__lupe{transform:scale(1.13); background:var(--petrol); border-color:var(--petrol)}

/* ---------- Fokus: auch für Bilder ---------- */
#focusImg{display:none; width:100%; max-height:78svh; object-fit:contain; background:#05070a}
.focus.is-foto #focusVideo,.focus.is-foto .player{display:none}
.focus.is-foto #focusImg{display:block}
.focus.is-foto .focus__frame{background:transparent; box-shadow:0 50px 120px -40px #000, 0 0 90px -20px rgba(77,129,127,.3)}
.focus__nav{
  position:absolute; top:50%; z-index:5; width:52px; height:52px; margin-top:-26px;
  border:1px solid rgba(255,255,255,.2); border-radius:50%; display:none; place-items:center;
  font-size:1.1rem; transition:background .4s, border-color .4s;
}
.focus__nav:hover{background:var(--petrol); border-color:var(--petrol)}
.focus__nav--prev{left:clamp(10px,2.5vw,34px)}
.focus__nav--next{right:clamp(10px,2.5vw,34px)}
.focus.is-foto .focus__nav{display:grid}

/* ---------- Fuß ---------- */
.foot__inner{align-items:flex-start}
.foot__mark{display:grid; gap:10px}
.foot__mark img{width:150px; opacity:.55; filter:brightness(1.6)}
.foot__mark a{font-family:var(--ff-ui); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--petrol-hell)}
.foot__social{display:flex; gap:22px; flex-wrap:wrap}
.foot__social a{font-family:var(--ff-ui); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim); transition:color .35s}
.foot__social a:hover{color:var(--petrol-hell)}
.foot__note{max-width:78ch; line-height:1.7}

/* ---------- Mobil ---------- */
@media (max-width:1020px){
  .vier__grid{grid-template-columns:1fr 1fr}
  .maffay__inner{grid-template-columns:1fr}
  .fassungen,.fassungen--drei{grid-template-columns:1fr}
  .maffay__bild{max-width:480px}
  /* Untereinander gestapelt trägt der Text keine Spalte mehr, die Linie hätte nichts
     mehr abzugrenzen und stünde nur im Weg. */
  .maffay__text{padding-left:0; border-left:none}
}
@media (max-width:860px){
  /* Am Handy bekommt die Säule ihren Blockhintergrund zurück: Radialverlauf in Petrol
     über dunklem Längsverlauf, oben und unten eine haarfeine Linie. */
  .saeule{
    background:
      radial-gradient(120% 78% at 50% 0%, rgba(77,129,127,.10), transparent 62%),
      linear-gradient(180deg, #0c1113 0%, #0e1416 42%, #0a0e10 100%);
    border-block:1px solid rgba(255,255,255,.055);
  }
  .nav__show{font-size:.95rem}
  /* Erste Spalte fest, nicht `auto`. Sonst richtet sie sich nach der Breite des
     Datums, und „13.11." ist schmaler als „18.10.": Der Ort dieser Zeile rückte
     dadurch nach links aus der Flucht. Dasselbe Problem wie bei der Knopfspalte
     in der breiten Ansicht. */
  .dates__row{grid-template-columns:clamp(92px,24vw,124px) 1fr; row-gap:10px}
  .dates__note{grid-column:1/-1}
  /* Besetzung und Knopf stehen unter dem Datum über die ganze Zeilenbreite. Ohne die
     Angabe landete der Knopf in der schmalen Datumsspalte, und „Tickets folgen" lief
     mit `nowrap` über seinen eigenen Rahmen hinaus. Er nimmt hier nur so viel Platz,
     wie sein Text braucht, die feste Breite gilt allein im vierspaltigen Raster. */
  .dates__btn{grid-column:1/-1; justify-self:start; width:auto}
  .besetzung li{grid-template-columns:1fr; gap:4px}
}
@media (max-width:700px){
  }
@media (max-width:560px){
  .vier__grid{grid-template-columns:1fr}
  }

/* ---------- Das Relief: freigestelltes Motiv mit Shader ---------- */
.relief{
  position:relative; line-height:0;
  /* steht frei im Raum und ragt nach links über das Raster hinaus */
  width:calc(100% + var(--pad) * 1.15);
  margin-left:calc(var(--pad) * -1.15);
}
.relief__bild{width:100%; height:auto; display:block; transition:opacity .5s var(--ease)}
.relief.hat-shader .relief__bild{opacity:0}
.relief__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:none; pointer-events:none;
}
.relief.hat-shader .relief__canvas{display:block}
.heroes__body{align-items:center}
@media (max-width:1020px){
  .relief{width:100%; max-width:560px; margin-left:0; margin-inline:auto}
}


/* ============================================================================
   RECHTSSEITEN · Impressum und Datenschutz
   ----------------------------------------------------------------------------
   Dieselbe Sprache wie die Startseite, nur ruhiger: keine Animation, kein
   Hintergrundbild, kein Laufband. Ein Impressum wird nicht bewundert, es wird
   gelesen, und meistens von jemandem, der etwas Bestimmtes sucht. Deshalb
   Lesebreite, klare Zwischenüberschriften und viel Luft zwischen den Blöcken.
   ============================================================================ */
/* Auf den Rechtsseiten steht die Wortmarke von Anfang an in der Kopfzeile. Auf der
   Startseite blendet sie erst beim Scrollen ein, weil dort der Hero die Marke trägt.
   Hier gibt es keinen Hero, und ohne sichtbare Marke fände niemand zurück. */
.recht-body .nav__show{opacity:1; transform:none}
.recht-body{background:var(--nacht)}
.recht{padding:clamp(110px,15vh,180px) 0 clamp(70px,9vh,110px)}
.recht .display{font-size:clamp(2.6rem,7vw,5rem); line-height:.92; margin-bottom:clamp(40px,5vw,70px)}

.recht__block{
  max-width:74ch; padding-top:clamp(28px,3.4vw,44px); margin-top:clamp(28px,3.4vw,44px);
  border-top:1px solid rgba(255,255,255,.1);
}
.recht__block:first-of-type{border-top:none; margin-top:0; padding-top:0}
.recht__block h2{
  font-family:var(--ff-ui); font-weight:400; font-size:.76rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--petrol-hell); margin-bottom:1.4em;
}
.recht__block p{color:var(--text-dim); font-size:1rem; line-height:1.8; max-width:70ch}
.recht__block p + p{margin-top:1.2em}
.recht__block a{color:var(--petrol-hell); border-bottom:1px solid rgba(138,199,194,.32)}
.recht__block a:hover{color:var(--weiss); border-bottom-color:var(--weiss)}

/* Der erste Absatz des Datenschutzes trägt die Aussage, auf die es ankommt. */
.recht__lead{color:var(--text) !important; font-size:1.12rem !important; line-height:1.75 !important}

.recht__anschrift{
  color:var(--weiss) !important; line-height:1.9 !important;
  padding-left:clamp(14px,1.6vw,22px); border-left:2px solid var(--petrol);
}

/* Zweispaltige Liste für Kontaktangaben, wie im Bandblock der Startseite. */
.recht__daten{margin-top:clamp(22px,2.6vw,34px); display:grid; gap:12px; max-width:52ch}
.recht__daten li{
  display:grid; grid-template-columns:130px 1fr; gap:16px; align-items:baseline;
  border-top:1px solid rgba(255,255,255,.09); padding-top:11px;
}
.recht__daten span{
  font-family:var(--ff-ui); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-dim);
}
.recht__daten b{font-weight:400; color:var(--weiss)}

@media (max-width:560px){
  .recht__daten li{grid-template-columns:1fr; gap:3px}
}

/* ---------- 20 · Sehr schmale Geraete ---------- */
/* Unter 360 Pixel sind einzelne Woerter der Displayschrift breiter als der Satzspiegel,
   etwa "Deutschrockshow". Das erzeugte seitliches Scrollen. Die Schrift wird deshalb
   nur auf diesen Geraeten etwas kleiner gesetzt, lange Woerter duerfen zudem umbrechen. */
@media (max-width:360px){
  .display{font-size:clamp(1.9rem, 9.6vw, 2.4rem)}
  .display--xl{font-size:clamp(2.1rem, 10.4vw, 2.8rem)}
  .display, .display--xl, .recht .display{overflow-wrap:break-word}
  /* Die Kontaktzeilen stehen sonst in zwei Spalten. Bei 110 Pixeln Beschriftung
     bleiben fuer die Mailadresse zu wenige uebrig, sie wurde mitten im Wort getrennt.
     Hier steht die Beschriftung deshalb ueber dem Wert. */
  .booking__contact li{grid-template-columns:1fr; gap:5px}
  .booking__contact a, .booking__contact span{overflow-wrap:break-word}
}