@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dmmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --nacht:#09090b; --russ:#121215; --linie:rgba(241,237,230,.14); --linie-stark:rgba(241,237,230,.32);
  --weiss:#f1ede6; --grau:#a6a19a; --orange:#fb602a; --glut:#ffb37a;
  --rand:clamp(16px,3.4vw,48px); --banner:26px; --kopf:64px;
  --sanft:cubic-bezier(.22,.8,.16,1); --zug:cubic-bezier(.65,0,.2,1);
  --takt:.4s; /* 150 BPM */
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--weiss);font:400 17px/1.6 "Archivo",system-ui,sans-serif;font-stretch:100%;overflow-x:hidden;min-height:100vh;min-height:100svh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p a,dd a,.fliess a,.leer-satz a{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:.2em}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:800}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:60;background:var(--orange);color:#000;padding:8px 14px}
.skip:focus{left:8px;top:8px}
.mono{font:500 12px/1.5 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.mono b{color:var(--orange);font-weight:500}
.o{color:var(--orange)}
.marker{display:inline-block;font:500 11px/1.4 "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#000;background:var(--glut);padding:3px 7px}
.marker.ecke{position:absolute;left:12px;bottom:12px;z-index:2}

/* Korn über allem, fest, ohne Klicks */
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Entwurf-Banner */
.entwurf{position:fixed;top:0;left:0;right:0;z-index:55;height:var(--banner);display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:#000;font:500 11px/1 "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;padding:0 12px;text-align:center}

/* Kopf */
.kopf{position:fixed;top:var(--banner);left:0;right:0;z-index:50;height:var(--kopf);display:flex;align-items:center;gap:24px;padding:0 var(--rand);
  background:linear-gradient(to bottom,rgba(9,9,11,.82),rgba(9,9,11,0));view-transition-name:kopf}
.kopf-logo img{width:132px;height:auto}
.kopf-nav{margin-left:auto;display:flex;gap:28px}
.kopf-nav a,.menue-nav a{font:600 13px/1 "Archivo",sans-serif;font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;position:relative;padding:8px 0}
.kopf-nav .nr,.menue-nav .nr{font:500 10px/1 "DM Mono",monospace;color:var(--grau);margin-right:7px;letter-spacing:.05em}
.kopf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--sanft)}
.kopf-nav a:hover::after,.kopf-nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.kopf-nav a[aria-current] .nr{color:var(--orange)}
.kopf-booking{background:var(--orange);color:#000;font:700 12px/1 "Archivo",sans-serif;font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;padding:14px 18px;transition:background .3s,color .3s}
.kopf-booking:hover{background:var(--weiss)}
.menue{display:none}

@media (max-width:900px){
  .kopf{gap:12px}
  .kopf-nav{display:none}
  .kopf-booking{margin-left:auto;padding:12px 14px;font-size:11px}
  .menue{display:block}
  .menue summary{list-style:none;cursor:pointer;font:500 12px/1 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--linie-stark);padding:11px 12px;position:relative;z-index:2;background:rgba(9,9,11,.6)}
  .menue summary::-webkit-details-marker{display:none}
  .menue .zu,.menue[open] .auf{display:none}
  .menue[open] .zu{display:inline}
  .menue-nav{position:fixed;inset:0;top:var(--banner);background:rgba(9,9,11,.97);padding:calc(var(--kopf) + 32px) var(--rand) 40px;display:flex;flex-direction:column;gap:6px;z-index:1}
  .menue-nav a{font-size:clamp(30px,10vw,52px);font-weight:800;padding:10px 0;border-bottom:1px solid var(--linie);opacity:0;transform:translateY(24px);animation:rein .7s var(--sanft) forwards}
  .menue-nav a:nth-child(2){animation-delay:.06s}.menue-nav a:nth-child(3){animation-delay:.12s}.menue-nav a:nth-child(4){animation-delay:.18s}.menue-nav a:nth-child(5){animation-delay:.24s}
  .menue-nav .menue-klein{font:500 13px/1 "DM Mono",monospace;letter-spacing:.1em;text-transform:none;border:0;margin-top:20px;color:var(--orange)}
}
@media (max-width:420px){ .kopf-logo img{width:108px} .kopf-booking{padding:11px 10px;letter-spacing:.1em} }
@keyframes rein{to{opacity:1;transform:none}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:stretch;gap:0;font:700 12px/1 "Archivo",sans-serif;font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:0;padding:0;background:none;transition:transform .2s var(--sanft)}
.knopf span{display:flex;align-items:center;padding:16px 20px}
.knopf i{display:flex;align-items:center;justify-content:center;width:46px;border-left:1px solid rgba(0,0,0,.25)}
.knopf svg{width:16px;height:16px;transition:transform .45s var(--sanft)}
.knopf:hover svg{transform:translateX(4px)}
.knopf:active{transform:scale(.98)}
.knopf.voll{background:var(--orange);color:#000}
.knopf.voll:hover{background:var(--weiss)}
.knopf.linie{box-shadow:inset 0 0 0 1px var(--linie-stark);color:var(--weiss)}
.knopf.linie i{border-left-color:var(--linie-stark)}
.knopf.linie:hover{box-shadow:inset 0 0 0 1px var(--orange)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Riesen-Namen: Größe nach längstem Wort, nie breiter als die Spalte */
.riesig{display:block;font-weight:800;font-stretch:125%;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;
  font-size:min(var(--max,128px),calc((100vw - 2 * var(--rand)) / (var(--z,8) * .98)));overflow-wrap:anywhere;hyphens:none}
@supports (font-size:1cqi){ .riesig{font-size:min(var(--max,128px),calc(100cqi / (var(--z,8) * .98)))} }
.gross{font-size:clamp(28px,4.4vw,56px);font-stretch:125%;text-transform:uppercase;line-height:.95}

/* ---------- Startseite: Szene ---------- */
.start{overflow:hidden}
.szene{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#050505;isolation:isolate}
.szene-rahmen{position:absolute;left:50%;top:50%;width:max(100vw,150vh);width:max(100vw,150svh);aspect-ratio:3/2;margin-left:calc(max(100vw,150vh) / -2);margin-top:calc(max(100vw,150vh) / -3)}
@supports (height:1svh){ .szene-rahmen{margin-left:calc(max(100vw,150svh) / -2);margin-top:calc(max(100vw,150svh) / -3)} }
.szene-innen{position:absolute;inset:-3%;animation:heran 2.6s var(--sanft) both}
.szene-bild{width:100%;height:100%;object-fit:cover}
@keyframes heran{from{transform:scale(1.12);opacity:.2}to{transform:none;opacity:1}}
.glut{position:absolute;left:var(--x);top:var(--y);width:16%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,170,90,.55),rgba(251,96,42,.18) 40%,rgba(251,96,42,0) 70%);mix-blend-mode:screen;animation:flackern calc(var(--takt) * 4) steps(1) infinite}
.glut.zwei{animation-delay:calc(var(--takt) * -1.5)}
@keyframes flackern{0%{opacity:.75}12%{opacity:.45}25%{opacity:.9}37%{opacity:.55}50%{opacity:.8}62%{opacity:.4}75%{opacity:1}87%{opacity:.6}}
.schleier{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,5,5,.55),rgba(5,5,5,0) 30%,rgba(5,5,5,0) 55%,rgba(5,5,5,.86) 92%),radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(0,0,0,.6))}

.szene-text{position:absolute;left:0;right:0;top:calc(var(--banner) + var(--kopf) + 2vh);display:flex;flex-direction:column;align-items:center;pointer-events:none;padding:0 var(--rand)}
.wortmarke{position:relative;width:min(62vw,760px);margin:0;animation:auf 1.6s .3s var(--sanft) both}
.wortmarke img{width:100%}
.licht{position:absolute;inset:0;-webkit-mask:url(bilder/logo-maske.png) center/100% 100% no-repeat;mask:url(bilder/logo-maske.png) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 0 38%,rgba(255,179,122,.9) 46%,#fff 50%,rgba(251,96,42,.95) 54%,transparent 62% 100%);background-size:300% 100%;background-position:100% 0;animation:streif 7s 1.4s var(--zug) infinite}
@keyframes streif{0%{background-position:100% 0}45%,100%{background-position:0 0}}
@keyframes auf{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.szene-zeile{margin-top:14px;color:var(--weiss);letter-spacing:.42em;text-align:center;animation:auf 1.2s .7s var(--sanft) both}

.szene-unten{position:absolute;left:var(--rand);bottom:84px;max-width:560px;animation:auf 1.2s 1s var(--sanft) both}
.szene-satz{font-size:18px;line-height:1.45;margin-bottom:22px;text-shadow:0 1px 18px rgba(0,0,0,.8)}
.szene-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.szene-knoepfe .knopf.linie{background:rgba(9,9,11,.45)}

.punkte{position:absolute;inset:0}
.punkt{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:14px;translate:-16px -16px;animation:auf 1s var(--sanft) both}
.punkt:nth-child(1){animation-delay:1.3s}.punkt:nth-child(2){animation-delay:1.45s}.punkt:nth-child(3){animation-delay:1.6s}.punkt:nth-child(4){animation-delay:1.75s}
.punkt.seite-l{flex-direction:row-reverse;translate:calc(-100% + 16px) -16px}
.ring{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid rgba(241,237,230,.7)}
.ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--orange);transition:transform .4s var(--sanft)}
.ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--orange);animation:puls calc(var(--takt) * 4) var(--sanft) infinite}
@keyframes puls{from{transform:scale(1);opacity:.9}to{transform:scale(2.3);opacity:0}}
.etikett{display:flex;flex-direction:column;gap:4px;padding:10px 14px;background:rgba(9,9,11,.62);border-left:1px solid var(--orange);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .35s,transform .45s var(--sanft)}
.punkt.seite-l .etikett{border-left:0;border-right:1px solid var(--orange);text-align:right}
.etikett .mono{color:var(--weiss);font-size:12px}
.etikett .was{font-size:13px;color:var(--grau);max-width:260px;line-height:1.35}
.punkt:hover .etikett,.punkt:focus-visible .etikett{background:rgba(251,96,42,.92);transform:translateX(4px)}
.punkt.seite-l:hover .etikett{transform:translateX(-4px)}
.punkt:hover .etikett .mono,.punkt:hover .etikett .was,.punkt:hover .mono b{color:#000}
.punkt:hover .ring::before{transform:scale(1.5)}

.kanaele{display:none}
.szene-fuss{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:24px;padding:14px var(--rand);border-top:1px solid var(--linie);background:rgba(5,5,5,.55)}
.termin{margin:0;flex:none;max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.termin a:hover{color:var(--orange)}
.termin .mono{margin-right:10px}
.szene-fuss .rechts{margin:0;flex:none;display:flex;gap:16px}
.szene-fuss .rechts a:hover{color:var(--weiss)}
.band{flex:1;overflow:hidden;min-width:0;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.band-lauf{display:flex;width:max-content;animation:lauf 40s linear infinite}
.band-lauf span{font:800 13px/1 "Archivo",sans-serif;font-stretch:125%;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);padding-right:.6em;white-space:nowrap}
@keyframes lauf{to{transform:translateX(-50%)}}

@media (max-width:900px){
  .punkte{display:none}
  .szene-text{top:calc(var(--banner) + var(--kopf) + 3vh)}
  .wortmarke{width:min(86vw,560px)}
  .szene-zeile{letter-spacing:.24em;font-size:11px}
  .szene-innen{animation:heran 2.6s var(--sanft) both,schwenk 26s 2.6s ease-in-out infinite alternate}
  .szene-unten{left:var(--rand);right:var(--rand);bottom:calc(228px + env(safe-area-inset-bottom));max-width:none}
  .szene-knoepfe .knopf.linie{display:none}
  .schleier{background:linear-gradient(to bottom,rgba(5,5,5,.55),rgba(5,5,5,0) 30%,rgba(5,5,5,.2) 45%,rgba(5,5,5,.92) 78%)}
  .szene-satz{font-size:16px;margin-bottom:16px}
  .kanaele{display:grid;grid-template-columns:1fr 1fr;position:absolute;left:0;right:0;bottom:calc(46px + env(safe-area-inset-bottom));border-top:1px solid var(--linie);background:rgba(9,9,11,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .kanaele a{display:flex;flex-direction:column;gap:2px;padding:12px var(--rand);border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);min-width:0}
  .kanaele a:nth-child(2n){border-right:0}
  .kanaele b{font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:15px;letter-spacing:.06em}
  .kanaele .mono{color:var(--orange);font-size:10px}
  .kanaele .was{font-size:12px;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .szene-fuss{padding:12px var(--rand) calc(12px + env(safe-area-inset-bottom));gap:12px}
  .termin,.szene-fuss .rechts{display:none}
}
@media (max-width:900px) and (max-height:700px){ .szene-unten .szene-satz{display:none} .szene-unten{bottom:calc(222px + env(safe-area-inset-bottom))} }
@keyframes schwenk{from{transform:translateX(9%)}to{transform:translateX(-9%)}}

/* ---------- allgemeine Seiten ---------- */
main{display:block}
body:not(.start) main{padding-top:calc(var(--banner) + var(--kopf))}
.block-weit{padding:clamp(64px,9vw,120px) var(--rand) 0;position:relative}
.block-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;padding-bottom:20px;border-bottom:1px solid var(--linie-stark);margin-bottom:8px}
.fliess{max-width:62ch}
.fliess p{color:#d9d4cc}
.liste{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--linie)}
.liste li{padding:10px 0;border-bottom:1px solid var(--linie);font-size:15px}
.leer-satz{color:var(--grau);padding:24px 0}
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:28px 0 0;border-top:1px solid var(--linie)}
.fakten div{padding:12px 16px 12px 0;border-bottom:1px solid var(--linie)}
.fakten dt{font:500 11px/1.4 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.fakten dd{margin:4px 0 0;font-size:15px}
.blaettern{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border-top:1px solid var(--linie)}
.blaettern a{display:flex;flex-direction:column;gap:6px;padding:20px 0;font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(15px,1.6vw,20px);transition:color .3s;min-width:0;overflow-wrap:anywhere}
.blaettern a + a{text-align:right;align-items:flex-end;border-left:1px solid var(--linie);padding-left:16px}
.blaettern a:hover{color:var(--orange)}
.blaettern.breit{margin:72px var(--rand) 0}

/* Leere Bildflächen */
.leer-bild,.ort-tafel{position:relative;width:100%;height:100%;min-height:240px;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#141417 0 14px,#101013 14px 28px)}
.leer-bild span{font:800 clamp(80px,14vw,200px)/1 "Archivo",sans-serif;font-stretch:125%;color:#1f1f24}
.ort-tafel span{font:800 clamp(22px,3vw,40px)/1.05 "Archivo",sans-serif;font-stretch:125%;text-transform:uppercase;color:#2c2c33;padding:24px;text-align:center}

/* ---------- Artists: Bühne + Tempo-Karte ---------- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:0;min-height:calc(100vh - var(--banner) - var(--kopf) - 120px);min-height:calc(100svh - var(--banner) - var(--kopf) - 120px);position:relative}
.stage-text{container-type:inline-size;padding:clamp(24px,5vh,64px) var(--rand) 40px;display:flex;flex-direction:column;justify-content:center;min-width:0;position:relative;z-index:2}
.stage-text .riesig{--max:150px;margin:10px 0 0}
.stage-satz{margin:24px 0 0;max-width:52ch;color:#d9d4cc}
.stage-bild{position:relative;overflow:hidden;background:#0e0e10}
.stage-bild img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.stage-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--nacht),rgba(9,9,11,0) 30%),linear-gradient(0deg,rgba(9,9,11,.6),rgba(9,9,11,0) 30%);pointer-events:none}
.stage-bild .leer-bild{position:absolute;inset:0}
.stage-bild.wisch img,.stage-bild.wisch .leer-bild{animation:wisch .9s var(--zug) both}
@keyframes wisch{from{clip-path:inset(0 0 0 100%);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:none}}
.stage-bild .lichtkante{position:absolute;top:0;bottom:0;width:2px;background:var(--orange);box-shadow:0 0 24px 4px rgba(251,96,42,.6);z-index:2;animation:kante .9s var(--zug) both;left:0}
@keyframes kante{from{left:100%;opacity:1}90%{opacity:1}to{left:0;opacity:0}}
.stage-text.wechsel > *{animation:hoch .7s var(--sanft) both}
.stage-text.wechsel > *:nth-child(2){animation-delay:.05s}.stage-text.wechsel > *:nth-child(3){animation-delay:.1s}.stage-text.wechsel > *:nth-child(4){animation-delay:.15s}.stage-text.wechsel > *:nth-child(5){animation-delay:.2s}
@keyframes hoch{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.tempo{position:relative;padding:28px var(--rand) 0;border-top:1px solid var(--linie-stark)}
.tempo-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-bottom:12px}
.tempo-kopf h2{color:var(--weiss)}
.tempo-zeiger{margin:0}
.tempo-skala,.tempo-liste a{display:grid;grid-template-columns:44px minmax(150px,1.1fr) minmax(0,2.4fr) 92px;align-items:center;gap:16px}
.tempo-skala{height:22px}
.skala{position:relative;height:100%}
.skala span{position:absolute;left:calc(var(--p) * 100%);transform:translateX(-50%);font:500 10px/22px "DM Mono",monospace;color:var(--grau)}
.tempo-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.tempo-liste a{padding:11px 0;border-bottom:1px solid var(--linie);position:relative;transition:background .3s}
.tempo-liste .name{font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:15px;letter-spacing:.02em;min-width:0;overflow-wrap:anywhere;transition:color .3s}
.tempo-liste .bpm{text-align:right}
.tempo-liste a:hover,.tempo-liste a[aria-current]{background:rgba(241,237,230,.035)}
.tempo-liste a[aria-current] .name{color:var(--orange)}
.tempo-liste a[aria-current] .nr{color:var(--orange)}
.bahn{position:relative;height:10px;background:repeating-linear-gradient(90deg,var(--linie) 0 1px,transparent 1px calc(100% / 9))}
.bahn.offen{background:none;height:auto}
.balken{position:absolute;top:2px;bottom:2px;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);background:var(--weiss);transform-origin:left;transition:background .3s}
.tempo-liste a[aria-current] .balken,.tempo-liste a:hover .balken{background:var(--orange)}
.tempo-liste.zeigt a:not(.trifft){opacity:.38}
.tempo-liste.zeigt a.trifft .balken{background:var(--orange)}
.tempo-linie{position:absolute;top:60px;bottom:0;width:1px;background:var(--orange);pointer-events:none;opacity:0;transition:opacity .2s;left:0}
.tempo-linie.an{opacity:1}
.tempo-liste .balken{animation:wachse 1.1s var(--sanft) both;animation-delay:calc(.5s + var(--n,0) * .07s)}
@keyframes wachse{from{transform:scaleX(0)}to{transform:none}}

@media (max-width:900px){
  .stage{grid-template-columns:1fr;min-height:0}
  .stage-bild{order:-1;aspect-ratio:4/5;max-height:72svh;width:100%}
  .stage-bild::after{background:linear-gradient(0deg,var(--nacht),rgba(9,9,11,0) 40%)}
  .stage-text{padding-top:0;margin-top:-72px}
  .tempo-liste a{grid-template-columns:28px minmax(0,1fr) 70px;gap:4px 12px}
  .tempo-skala{grid-template-columns:28px minmax(0,1fr);gap:12px}
  .tempo-skala .leer:nth-child(2),.tempo-skala .leer:nth-child(4){display:none}
  .tempo-liste .name{grid-column:2/3}
  .tempo-liste .bpm{grid-column:3/4;grid-row:1}
  .tempo-liste .bahn{grid-column:2/4;grid-row:2}
  .skala span:nth-child(even){display:none}
  .tempo-linie{display:none}
}

/* Profil */
.profil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100svh - var(--banner) - var(--kopf))}
.profil-bild{position:sticky;top:calc(var(--banner) + var(--kopf));height:calc(100vh - var(--banner) - var(--kopf));height:calc(100svh - var(--banner) - var(--kopf));overflow:hidden}
.profil-bild img{width:100%;height:100%;object-fit:cover;animation:wisch 1.1s var(--zug) both}
.profil-bild .leer-bild{height:100%}
.profil-text{container-type:inline-size;padding:clamp(32px,6vh,72px) var(--rand) 40px}
.profil-text .riesig{--max:140px;margin:12px 0 0}
.profil-text > .mono a:hover{color:var(--weiss)}
.profil-tempo{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:20px 0 32px}
.profil-tempo .balken{background:var(--orange)}
.block{margin-top:40px}
.block h2{color:var(--weiss)}
@media (max-width:900px){
  .profil{grid-template-columns:1fr}
  .profil-bild{position:relative;top:0;height:auto;aspect-ratio:4/5;max-height:76svh}
}

/* ---------- Events ---------- */
.ev-hero{position:relative;height:calc(100vh - var(--banner) - var(--kopf));height:calc(100svh - var(--banner) - var(--kopf));min-height:520px;overflow:hidden;display:flex;align-items:flex-end}
.ev-hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heran 2.4s var(--sanft) both}
.ev-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,9,11,.95),rgba(9,9,11,.2) 55%,rgba(9,9,11,.35))}
.ev-hero-text{position:relative;z-index:1;container-type:inline-size;width:100%;padding:0 var(--rand) clamp(32px,6vh,64px)}
.ev-hero-text .riesig{--max:170px;margin:12px 0 14px;animation:auf 1.2s .2s var(--sanft) both}
.ev-hero-text .mono{color:#d9d4cc}
.reihen{list-style:none;margin:0;padding:0}
.reihen a{container-type:inline-size;display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,300px) 96px;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--linie);position:relative}
.reihen .name{font-weight:800;font-stretch:125%;text-transform:uppercase;line-height:.95;font-size:clamp(24px,4.2vw,64px);transition:color .35s,transform .5s var(--sanft);overflow-wrap:anywhere;min-width:0}
.reihen a:hover .name{color:var(--orange);transform:translateX(10px)}
.reihen .meta{display:flex;flex-direction:column;gap:4px;font-size:14px;color:#d9d4cc}
.reihen .daumen{width:96px;aspect-ratio:16/10;overflow:hidden;background:#141417}
.reihen .daumen img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .4s}
.reihen a:hover .daumen img{filter:none}
.ort-mini{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font:800 22px/1 "Archivo",sans-serif;font-stretch:125%;color:#2c2c33}
.flyer-folger{position:fixed;left:0;top:0;width:340px;height:auto;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .3s,transform .4s var(--sanft);display:none}
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .js .flyer-folger{display:block}
  .js .flyer-folger.an{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.termine{list-style:none;margin:0;padding:0}
.termine li{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,240px);gap:16px;padding:12px 0;border-bottom:1px solid var(--linie);font-size:15px}
.termine .d{color:var(--orange)}
.termine .o{color:var(--grau);text-align:right}
.jahr{border-bottom:1px solid var(--linie)}
.jahr summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;padding:18px 0}
.jahr summary::-webkit-details-marker{display:none}
.riesig-klein{font:800 clamp(32px,5vw,64px)/1 "Archivo",sans-serif;font-stretch:125%;transition:color .3s}
.jahr summary:hover .riesig-klein,.jahr[open] .riesig-klein{color:var(--orange)}
@media (max-width:900px){
  .reihen a{grid-template-columns:30px minmax(0,1fr) 72px;gap:6px 12px;padding:18px 0}
  .reihen .meta{grid-column:2/3;grid-row:2}
  .reihen .daumen{grid-column:3/4;grid-row:1/3;width:72px}
  .termine li{grid-template-columns:1fr;gap:2px}
  .termine .o{text-align:left}
}

/* Event-Detail */
.event{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);padding:clamp(24px,5vh,56px) var(--rand) 0;align-items:start}
.event-bild{position:sticky;top:calc(var(--banner) + var(--kopf) + 24px);overflow:hidden}
.event-bild img{width:100%;height:auto}
.event-bild .ort-tafel{aspect-ratio:4/3}
.event-text{container-type:inline-size;min-width:0}
.event-text .riesig{--max:120px;margin:12px 0 20px}
.event-text > .mono a:hover{color:var(--weiss)}
.adresse{color:var(--weiss)!important;margin-bottom:20px}
.lineup{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0 0}
.lineup h2{color:var(--orange);padding-bottom:8px;border-bottom:1px solid var(--linie-stark)}
.lineup ul{list-style:none;margin:0;padding:0}
.lineup li{padding:8px 0;border-bottom:1px solid var(--linie);font-weight:700;font-stretch:125%;text-transform:uppercase;font-size:14px;letter-spacing:.03em}
.galerie{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:4px;margin:72px var(--rand) 0}
.galerie figure{margin:0;overflow:hidden;aspect-ratio:4/5}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--sanft)}
.galerie figure:hover img{transform:scale(1.04)}
@media (max-width:900px){
  .event{grid-template-columns:1fr}
  .event-bild{position:relative;top:0}
  .lineup{grid-template-columns:1fr}
  .galerie{grid-template-columns:1fr 1fr}
  .galerie figure:first-child{grid-column:1/3;aspect-ratio:3/2}
}

/* ---------- News ---------- */
.news-kopf{container-type:inline-size;padding:clamp(32px,6vh,64px) var(--rand) 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:12px 40px;align-items:end}
.news-kopf .riesig{--max:220px;grid-row:1/3}
.news-label{margin:0;color:#d9d4cc}
.news-kopf .mono{margin:0}
.news-lead{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);margin:0 var(--rand);padding:32px 0;border-top:1px solid var(--linie-stark);border-bottom:1px solid var(--linie);align-items:end}
.lead-bild{overflow:hidden;aspect-ratio:1}
.lead-bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--sanft)}
.news-lead:hover .lead-bild img{transform:scale(1.04)}
.lead-text{container-type:inline-size;display:flex;flex-direction:column;gap:16px;min-width:0}
.lead-text .riesig{--max:110px;transition:color .35s}
.news-lead:hover .riesig{color:var(--orange)}
.feed{list-style:none;margin:0 var(--rand);padding:0}
.feed a{display:grid;grid-template-columns:120px 88px minmax(0,1fr) minmax(0,220px);gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linie)}
.feed .nr{color:var(--orange)}
.feed .cv{width:88px;aspect-ratio:1;overflow:hidden;background:#141417}
.feed .cv img{width:100%;height:100%;object-fit:cover}
.feed .was{display:flex;flex-direction:column;gap:4px;min-width:0}
.feed .t{font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(17px,2vw,26px);line-height:1.05;transition:color .3s,transform .5s var(--sanft);overflow-wrap:anywhere}
.feed a:hover .t{color:var(--orange);transform:translateX(8px)}
.feed .tag{text-align:right}
.kein-cover{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font:500 12px/1 "DM Mono",monospace;color:var(--grau);background:repeating-linear-gradient(135deg,#141417 0 10px,#101013 10px 20px)}
.plattformen{margin:32px var(--rand) 0;display:flex;flex-wrap:wrap;gap:8px 20px}
.plattformen a{color:var(--weiss);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:.3em}
@media (max-width:900px){
  .news-kopf{grid-template-columns:1fr}
  .news-kopf .riesig{grid-row:auto}
  .news-lead{grid-template-columns:1fr}
  .feed a{grid-template-columns:64px minmax(0,1fr);gap:4px 14px}
  .feed .cv{width:64px;grid-row:1/4}
  .feed .nr,.feed .was,.feed .tag{grid-column:2}
  .feed .tag{text-align:left}
}
.news-artikel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);padding:clamp(24px,5vh,56px) var(--rand) 0;align-items:start}
.news-cover{position:sticky;top:calc(var(--banner) + var(--kopf) + 24px);aspect-ratio:1;overflow:hidden}
.news-cover img{width:100%;height:100%;object-fit:cover}
.news-text{container-type:inline-size;min-width:0}
.news-text .riesig{--max:110px;margin:12px 0 16px}
.news-text > .mono a:hover{color:var(--weiss)}
.news-text .fliess{margin-top:24px}
@media (max-width:900px){ .news-artikel{grid-template-columns:1fr} .news-cover{position:relative;top:0} }

/* ---------- Kontakt ---------- */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);padding:clamp(32px,6vh,72px) var(--rand) 0}
.kontakt-a{container-type:inline-size;min-width:0}
.kontakt-a .riesig{--max:180px;margin-bottom:28px}
.kontakt-satz{max-width:52ch;color:#d9d4cc}
.kontakt-daten{margin:32px 0 0;border-top:1px solid var(--linie)}
.kontakt-daten div{padding:14px 0;border-bottom:1px solid var(--linie)}
.kontakt-daten dd{margin:4px 0 0}
.gross-link{font-weight:800;font-stretch:125%;font-size:clamp(18px,2.3vw,30px);text-decoration:none!important;overflow-wrap:anywhere;transition:color .3s}
.gross-link:hover{color:var(--orange)}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-content:start;background:var(--russ);padding:clamp(20px,3vw,40px);border-top:2px solid var(--orange)}
.formular > .mono{grid-column:1/-1;margin:0;color:var(--weiss)}
.feld{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.feld.halb{grid-column:auto}
.feld label{font:500 11px/1 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.feld input,.feld select,.feld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--linie-stark);padding:10px 0;font-size:16px;border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .3s}
.feld select{background-image:linear-gradient(45deg,transparent 50%,var(--grau) 50%),linear-gradient(-45deg,transparent 50%,var(--grau) 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.feld select option{background:var(--russ)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-bottom-color:var(--orange)}
.formular .knopf{grid-column:1/-1;justify-self:start;margin-top:8px}
.danke{grid-column:1/-1;color:var(--orange);margin:0}
@media (max-width:900px){ .kontakt{grid-template-columns:1fr} .formular{grid-template-columns:1fr} .feld.halb{grid-column:1/-1} }

.recht{container-type:inline-size;padding:clamp(32px,6vh,72px) var(--rand) 0;max-width:900px}
.recht .riesig{--max:120px;margin-bottom:32px}

/* Fuß */
.fuss{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;align-items:start;margin-top:clamp(80px,10vw,140px);padding:40px var(--rand) calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--linie-stark)}
.fuss-logo img{width:150px}
.fuss-a .mono{margin-top:12px}
.fuss-b,.fuss-c,.fuss-d{display:flex;flex-direction:column;gap:8px;font-size:15px}
.fuss a:hover{color:var(--orange)}
@media (max-width:900px){ .fuss{grid-template-columns:1fr 1fr} .fuss-a{grid-column:1/-1} .fuss-b{grid-column:1/-1} }

/* Einblenden beim Scrollen (nur mit JS, sonst sofort sichtbar) */
.js [data-zeige]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--sanft),transform .9s var(--sanft)}
.js [data-zeige].da{opacity:1;transform:none}

/* Seitenwechsel */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.35s var(--zug) both raus}
::view-transition-new(root){animation:.55s var(--sanft) both rein2}
@keyframes raus{to{opacity:0;transform:scale(.985)}}
@keyframes rein2{from{opacity:0;transform:translateY(14px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-zeige]{opacity:1;transform:none}
  .menue-nav a{opacity:1;transform:none}
  .licht,.glut,.ring::after{display:none}
  @view-transition{navigation:none}
}