/* ============================================================
   DIGITALISM — THE SIGNAL v4
   Typografie: Digitalism-CI, 1:1 von thedigitalism.com übernommen
     Display  = Suisse Int'l Black (900)   -> Headlines, Nav, Buttons
     Mono     = Suisse Int'l Mono (400)    -> Diagnose-Layer, Body, Labels
     Digits   = Doto (Google)              -> nur Digital-Ziffern
   ============================================================ */

@font-face{
  font-family:"Suisse Intl";
  src:url("../fonts/suisseintl-black.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Suisse Intl Mono";
  src:url("../fonts/suisseintlmono-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --black:#000; --blue:#0000FF; --green:#00FF01; --white:#FFF; --grid:#A9C6DC;
  --disp:"Suisse Intl","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Suisse Intl Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --digits:"Doto",var(--mono);
  --spotify:#1DB954;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--black);color:var(--white);font-family:var(--mono);font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--blue);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block}
/* Ohne label/input/select/summary zeigten Checkboxen und ihre Labels
   weiter den System-Pfeil — zwei Cursor gleichzeitig. Textfelder
   behalten bewusst ihren Textcursor, der gehoert dort hin. */
body.fine, body.fine a, body.fine button,
body.fine label, body.fine summary, body.fine select,
body.fine input[type=checkbox], body.fine input[type=radio]{cursor:none}

/* Display-Ebene: alles Große trägt Suisse Int'l Black */
h1,h2,h3,h4,.disp,.price,.card .ct .t,.p-date .d,.p-date .c,.p-date .v,
.product .p-tag,.ticket .t-name,.calling .cl,.calling .name,#ghostcity{
  font-family:var(--disp);font-weight:900;
}

/* Diagnose-Layer: Suisse Int'l Mono, versal, gesperrt */
.lbl{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.5}
.lbl-box{display:inline-block;border:2px solid currentColor;padding:8px 12px}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.eyebrow::before{content:"";width:36px;height:2px;background:currentColor}

.grain{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
#progress{position:fixed;top:0;left:0;height:3px;background:var(--blue);width:0;z-index:90}

/* ---------- custom cursor with pre-echo ---------- */
/* Der eigene Cursor muss ueber ALLEM liegen. Warenkorb-Drawer (130),
   Scrim (125) und die Modals (120) im Store lagen sonst darueber —
   body.fine blendet den System-Cursor aus, der eigene wurde verdeckt,
   und man hatte auf diesen Flaechen gar keinen sichtbaren Zeiger. */
#cur,#cur2{position:fixed;top:0;left:0;z-index:900;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);display:none}
body.fine #cur,body.fine #cur2{display:block}
#cur{width:10px;height:10px;background:#fff;mix-blend-mode:difference;transition:width .2s,height .2s}
#cur2{width:34px;height:34px;border:1.5px solid var(--blue);transition:width .25s,height .25s,border-color .25s}
body.hovering #cur{width:26px;height:26px}
body.hovering #cur2{width:56px;height:56px;border-color:#fff}
#curlbl{position:fixed;z-index:900;pointer-events:none;font-family:var(--mono);font-size:9px;
  letter-spacing:.2em;color:#fff;transform:translate(14px,14px);display:none;text-transform:uppercase}
body.fine.onhero #curlbl{display:block}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;background:#000;z-index:100;display:flex;flex-direction:column;gap:26px;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
#bootlog{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:2.1;min-width:320px}
#bootlog .ok{color:var(--green)} #bootlog .b{background:#fff;color:#000;padding:1px 6px;font-family:var(--disp);font-weight:900}
#bootbar{width:300px;height:22px;display:flex;align-items:center;gap:2px}
#bootbar i{flex:1;background:#fff;height:4px;transform-origin:center;display:block}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;mix-blend-mode:difference}
.navlogo img{height:22px;width:auto;opacity:0;transition:opacity .3s}
nav.solid .navlogo img{opacity:1}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{font-family:var(--disp);font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;position:relative}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:#fff;transition:width .25s}
.navlinks a:hover::after{width:100%}
.join-btn{font-family:var(--disp);font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:2px solid #fff;padding:9px 15px;background:transparent;color:#fff;transition:.2s}
.join-btn:hover{background:#fff;color:#000}
@media(max-width:900px){.navlinks a{display:none}}

/* ---------- hero (pinned) ---------- */
#hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:center;justify-content:center}
#gl{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;z-index:2;text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:30px}
.hero-inner img{width:min(74vw,760px);height:auto;filter:drop-shadow(0 6px 40px rgba(0,0,0,.9))}
/* Hero-Wortmarke in CI-Blau.
   Die Datei assets/logo.webp ist schwarze Zeichnung auf transparentem Grund. Im Hero lag sie
   ohne Umkehrung, also schwarz auf schwarz — sichtbar war nur ihr Schlagschatten. Nav und
   Footer drehen sie ueber mix-blend-mode bzw. filter:invert(1) auf Weiss; der Hero hatte das nie.
   Statt sie ebenfalls weiss zu machen, wird sie hier als Maske gefuellt: das erlaubt jede Farbe,
   ohne die Datei anzufassen und ohne Nav und Footer mitzuveraendern. */
#heromark{visibility:hidden}
.hero-inner::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(74vw,760px);aspect-ratio:900/250;background:var(--blue);
  -webkit-mask:url(/assets/logo.webp) center/contain no-repeat;
  mask:url(/assets/logo.webp) center/contain no-repeat;
  filter:drop-shadow(0 0 28px rgba(0,0,255,.8)) drop-shadow(0 6px 40px rgba(0,0,0,.9));
  pointer-events:none}
@supports not (mask: url(/assets/logo.webp)){
  /* Ohne Maskenunterstuetzung faellt die Marke auf Weiss zurueck statt zu verschwinden. */
  #heromark{visibility:visible;filter:invert(1) drop-shadow(0 6px 40px rgba(0,0,0,.9))}
  .hero-inner::before{display:none}
}
.hero-tag{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.hero-tag .b{background:#fff;color:#000;padding:3px 8px;letter-spacing:.08em;font-family:var(--disp);font-weight:900}
.hm{position:absolute;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.7}
.hm-tl{top:72px;left:28px}.hm-tr{top:72px;right:28px;text-align:right}
.hm-bl{bottom:24px;left:28px}.hm-br{bottom:24px;right:28px;text-align:right}
.hm .box{border:2px solid #fff;padding:7px 10px;display:inline-block}
@media(max-width:900px){.hm{display:none}}

/* ---------- waveform timeline ---------- */
.wavepanel{position:relative;background:#000;border-top:1px solid #111;border-bottom:1px solid #111;padding:26px 28px 20px;overflow:hidden}
.wavepanel .gridbg{position:absolute;inset:26px 28px 20px;background:
  repeating-linear-gradient(to right,var(--grid) 0 1px,transparent 1px 96px),
  repeating-linear-gradient(to bottom,var(--grid) 0 1px,transparent 1px 44px);opacity:.5}
.wavepanel canvas{position:relative;width:100%;height:220px;display:block}
#playhead{position:absolute;top:26px;bottom:20px;width:2px;background:var(--green);left:28px;z-index:3;box-shadow:0 0 14px rgba(0,255,1,.8)}
#tc{position:absolute;right:44px;bottom:34px;z-index:3;font-family:var(--digits);font-weight:900;font-size:22px;color:var(--green);text-shadow:0 0 12px rgba(0,255,1,.5)}
.wp-tl{position:absolute;top:38px;left:44px;z-index:2;color:#fff}
.wp-tr{position:absolute;top:38px;right:44px;z-index:2;text-align:right;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
@media(max-width:900px){.wp-tr,#tc{display:none}.wavepanel canvas{height:140px}}

/* ---------- ticker ---------- */
.ticker{border-bottom:1px solid #111;overflow:hidden;white-space:nowrap;background:#000;padding:14px 0}
.ticker-track{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;will-change:transform}
.ticker-track span{margin:0 34px}
.ticker-track .dot{color:var(--blue)}

section{padding:130px 28px;max-width:1240px;margin:0 auto;position:relative}
h2{font-size:clamp(44px,7vw,100px);letter-spacing:-.035em;line-height:.98;overflow:hidden}
h2 .line{display:block;transform:translateY(115%);will-change:transform}
.reveal{opacity:0;transform:translateY(30px)}
.nojs .reveal,.reveal.on{opacity:1;transform:none;transition:opacity .7s,transform .7s}

.echo{position:relative;display:inline-block}
.echo::before{content:attr(data-t);position:absolute;inset:0;color:var(--blue);opacity:0;transition:.05s;pointer-events:none}
.echo:hover::before{opacity:1;transform:translate(6px,-5px)}

/* ---------- live board + ghost city ---------- */
#ghostcity{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none;
  font-size:clamp(90px,17vw,300px);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:2px var(--blue);opacity:0;transition:opacity .25s}
.board{margin-top:56px;border-top:2px solid #fff;position:relative;z-index:1}
.row{display:grid;grid-template-columns:150px 1fr 1fr 160px;gap:18px;align-items:center;padding:26px 6px;border-bottom:2px solid #fff;
  font-family:var(--disp);font-weight:900;font-size:clamp(20px,2.6vw,32px);transition:background .2s,padding-left .25s}
.row:hover{background:rgba(0,0,255,.18);padding-left:18px}
.row .date{font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.04em}
.row .venue{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.02em;opacity:.72;line-height:1.5}
.chip{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border:2px solid var(--green);color:var(--green);text-align:center}
.chip.tba{border-color:var(--blue);color:#fff;background:var(--blue)}
.row.alert .city{color:var(--blue)}
@media(max-width:900px){.row{grid-template-columns:1fr 120px}.row .venue{grid-column:1/-1}.row .date{font-size:12px}}

/* ---------- poster ---------- */
.posterwrap{perspective:1200px;margin-top:70px}
.poster{background:var(--green);color:#000;position:relative;overflow:hidden;padding:clamp(26px,4vw,54px);transform-style:preserve-3d;box-shadow:0 40px 120px rgba(0,0,0,.6);will-change:transform}
.poster .p-blob{position:absolute;width:145%;max-width:none;left:-22%;top:-14%;opacity:.72;pointer-events:none;will-change:transform}
.poster .p-blob2{position:absolute;width:110%;left:auto;right:-28%;top:auto;bottom:-18%;opacity:.5;transform:rotate(180deg)}
.ticket{background:#fff;color:#000;border-radius:18px;padding:26px 28px 22px;max-width:520px;box-shadow:0 14px 60px rgba(0,0,0,.45)}
.ticket img{height:52px;width:auto;filter:invert(1)}
.ticket .t-name{margin-top:16px;font-size:20px}
.ticket .t-form{margin-top:12px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;display:flex;flex-direction:column;gap:8px}
.t-row{display:flex;align-items:flex-end;gap:8px}
.t-line{flex:1;border-bottom:1.5px solid #000;height:11px;position:relative}
.t-line span{position:absolute;left:4px;bottom:1px;font-size:10px;text-transform:none;letter-spacing:.02em}
.t-oo{letter-spacing:2px;font-size:11px}.t-right{margin-left:auto}
.poster .p-ticket{position:relative;margin-left:auto;transform:rotate(-3deg);will-change:transform}
.poster h3{position:relative;margin-top:clamp(30px,5vw,70px);color:#fff;font-size:clamp(58px,10vw,150px);letter-spacing:-.035em;line-height:.95}
.p-dates{position:relative;display:flex;gap:8vw;flex-wrap:wrap;margin-top:clamp(30px,5vw,64px)}
.p-date .d{color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;font-size:clamp(30px,4.4vw,56px)}
.p-date .c{color:#fff;font-size:clamp(26px,3.6vw,46px);line-height:1.1}
.p-date .v{color:#fff;font-size:clamp(16px,2vw,26px)}
.p-bar{position:relative;margin-top:clamp(30px,5vw,60px);background:#000;color:#fff;text-align:center;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:clamp(11px,1.4vw,14px);padding:14px}
.p-meta{position:absolute;z-index:4;top:26px;left:clamp(26px,4vw,54px);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.calling{margin-top:34px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative}
.calling .cl{font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.calling .name{background:#fff;color:#000;padding:3px 12px;font-size:18px}
.calling .timer{font-family:var(--digits);font-weight:900;font-size:clamp(30px,4vw,44px);color:var(--green);letter-spacing:.04em;text-shadow:0 0 18px rgba(0,255,1,.55);background:#000;padding:2px 14px}

/* ============================================================
   FREQUENCY — Spotify Signal Player
   ============================================================ */
#frequency{max-width:none;background:#000;padding:0}
.freq-wrap{max-width:1240px;margin:0 auto;padding:130px 28px}
.deck{margin-top:56px;border:2px solid #fff;background:#000;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media(max-width:980px){.deck{grid-template-columns:1fr}}

.deck-l{border-right:2px solid #fff;padding:0;display:flex;flex-direction:column;min-width:0}
@media(max-width:980px){.deck-l{border-right:0;border-bottom:2px solid #fff}}
.deck-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-bottom:2px solid #fff;flex-wrap:wrap}
.deck-head .src{display:flex;align-items:center;gap:9px}
.deck-head .src svg{width:15px;height:15px;flex:0 0 auto}
.led-dot{width:8px;height:8px;border-radius:50%;background:#333;flex:0 0 auto}
.led-dot.on{background:var(--green);box-shadow:0 0 10px rgba(0,255,1,.9);animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.deck-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--blue);
  display:flex;align-items:center;justify-content:center;border-bottom:2px solid #fff}
.deck-art .blob{position:absolute;width:150%;max-width:none;left:-46%;top:-72%;opacity:.32;
  pointer-events:none;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);mix-blend-mode:screen}
.deck-art .blob2{left:auto;right:-52%;top:auto;bottom:-78%;width:130%;transform:rotate(155deg);opacity:.26}
.deck-art.playing .blob{transform:translate(3%,-4%) scale(1.07)}
.deck-plate{position:relative;z-index:2;text-align:center;padding:0 8%;pointer-events:none}
.deck-plate .al{font-family:var(--disp);font-weight:900;color:#fff;font-size:clamp(40px,6.2vw,82px);
  letter-spacing:-.04em;line-height:.92;-webkit-text-stroke:4px #000;paint-order:stroke fill;
  transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.deck-art.playing .deck-plate .al{transform:scale(1.03)}
.deck-plate .yr{margin-top:14px;display:inline-block;background:#000;color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px}
.deck-art .scan{position:absolute;inset:0;pointer-events:none;opacity:.2;z-index:3;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.35) 0 1px,transparent 1px 4px)}
.deck-art .corner{position:absolute;z-index:4;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.deck-art .c-tl{top:12px;left:14px}.deck-art .c-tr{top:12px;right:14px;text-align:right}
.deck-art .c-br{bottom:12px;right:14px;text-align:right}
.deck-art .c-bl{bottom:12px;left:14px}

.deck-scope{position:relative;height:96px;border-bottom:2px solid #fff;background:#000;overflow:hidden;cursor:pointer}
body.fine .deck-scope{cursor:none}
.deck-scope canvas{display:block;width:100%;height:100%}
.deck-scope .sgrid{position:absolute;inset:0;pointer-events:none;opacity:.32;
  background:repeating-linear-gradient(to right,var(--grid) 0 1px,transparent 1px 64px)}
.deck-scope .head{position:absolute;top:0;bottom:0;width:2px;background:var(--green);left:0;box-shadow:0 0 12px rgba(0,255,1,.85);pointer-events:none}

.deck-transport{display:flex;align-items:center;gap:18px;padding:16px 18px;flex-wrap:wrap}
.tbtn{all:unset;width:52px;height:52px;border:2px solid #fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .18s,color .18s}
.tbtn:hover{background:#fff;color:#000}
.tbtn.primary{background:var(--blue);border-color:var(--blue)}
.tbtn.primary:hover{background:#fff;color:var(--blue)}
.tbtn svg{width:17px;height:17px;fill:currentColor;display:block}
.deck-now{min-width:0;flex:1}
.deck-now .t{font-family:var(--disp);font-weight:900;font-size:clamp(19px,2.2vw,28px);letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-now .s{margin-top:5px;opacity:.6}
.deck-time{font-family:var(--digits);font-weight:900;font-size:20px;color:var(--green);letter-spacing:.04em;flex:0 0 auto}

.deck-r{padding:0;display:flex;flex-direction:column;min-width:0}
.tl-head{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:2px solid #fff}
.tracklist{overflow-y:auto;max-height:420px;flex:1;scrollbar-width:thin;scrollbar-color:#333 #000}
.tracklist::-webkit-scrollbar{width:6px}
.tracklist::-webkit-scrollbar-thumb{background:#2a2a2a}
.trk{display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:center;padding:13px 18px;
  border-bottom:1px solid #191919;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;
  color:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.01em;transition:background .16s,padding-left .2s}
.trk:hover{background:rgba(0,0,255,.28);padding-left:26px}
.trk .n{opacity:.4;font-size:11px}
.trk .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk .d{opacity:.4;font-size:11px}
.trk.on{background:var(--blue)}
.trk.on .n,.trk.on .d{opacity:.85}
.trk.on .nm::before{content:"▶ ";color:var(--green)}
.deck-foot{border-top:2px solid #fff;padding:16px 18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sp-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:900;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--spotify);color:#000;background:var(--spotify);
  padding:11px 16px;transition:.2s}
.sp-btn:hover{background:#fff;border-color:#fff}
.sp-btn svg{width:15px;height:15px;fill:currentColor}
.sp-ghost{background:transparent;color:#fff;border-color:#fff}
.sp-ghost:hover{background:#fff;color:#000}
#spotify-host{border-top:2px solid #fff;background:#000;padding:0;min-height:82px}
#spotify-host iframe{display:block;width:100%;border:0}
.deck-note{margin-top:20px;display:flex;gap:26px;flex-wrap:wrap;opacity:.45}
.deck-fallback{padding:18px;display:flex;flex-direction:column;gap:12px}

/* ---------- output: horizontal gallery ---------- */
#outputpin{padding:0;max-width:none}
.hwrap{height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hhead{max-width:1240px;margin:0 auto;width:100%;padding:0 28px 40px}
.htrack{display:flex;gap:34px;padding:0 28px;will-change:transform;width:max-content}
.card{flex:0 0 auto;width:min(72vw,460px);aspect-ratio:1/1;position:relative;overflow:hidden;border:2px solid #fff;background:#000;display:flex;align-items:center;justify-content:center;text-align:center}
.card.blue{background:var(--blue);border-color:var(--blue)}
.card img{width:88%;height:auto}
.card .fill{position:absolute;inset:0;background:var(--blue);clip-path:inset(100% 0 0 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1)}
.card:hover .fill{clip-path:inset(0 0 0 0)}
.card .ct{position:relative;z-index:1;text-align:center;padding:0 20px}
.card .ct .t{font-size:clamp(30px,4vw,52px);letter-spacing:-.025em;line-height:1}
.card .ct .y{margin-top:14px}
.card .idx{position:absolute;top:16px;left:16px;z-index:1;font-family:var(--mono);font-size:10px;letter-spacing:.12em}
.card .play{position:absolute;bottom:16px;left:16px;right:16px;z-index:2;display:flex;justify-content:space-between;
  align-items:center;opacity:0;transform:translateY(8px);transition:.28s}
.card:hover .play{opacity:1;transform:none}
.card .play .pl{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;border:2px solid #fff;padding:8px 12px;background:#000}
.card .play .pl:hover{background:#fff;color:#000}
.hfoot{max-width:1240px;margin:0 auto;width:100%;padding:26px 28px 0;display:flex;justify-content:space-between;align-items:center}
.hbar{flex:1;height:2px;background:#222;margin:0 26px;position:relative}
.hbar i{position:absolute;inset:0;right:auto;width:0;background:#fff}
@media(max-width:900px){.hwrap{height:auto;padding:120px 0}.htrack{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.card{scroll-snap-align:center}.card .play{opacity:1;transform:none}}

/* ---------- LED billboard ---------- */
#billboard{max-width:none;background:#000;padding:130px 28px}
.bb-frame{max-width:1240px;margin:0 auto;border:10px solid #0a0a0a;outline:2px solid #1a1a1a;background:#000;position:relative;box-shadow:0 40px 120px rgba(0,0,0,.8)}
#led{display:block;width:100%;height:auto}
.bb-cap{max-width:1240px;margin:18px auto 0;display:flex;justify-content:space-between;opacity:.55;gap:20px;flex-wrap:wrap}

/* ---------- merch ---------- */
/* Zwei Produkte nebeneinander: Shirt und Vinyl. Ein Regionsschalter
   steuert beide — das Shirt wird in der Region gedruckt, die Platte
   kommt aus dem Lager, das die Region beliefert. */
.supplybar{margin-top:36px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.mcard{display:flex;flex-direction:column;gap:26px;min-width:0}
/* Quadratisch statt 4:5 — sonst stehen Preis und Kaufbutton bei zwei
   Karten nebeneinander komplett unter der Bildschirmkante. */
.mcard .product{min-height:0;height:auto;aspect-ratio:1}
.mcard .p-tag{font-size:clamp(19px,2.3vw,29px)}
.mbody{display:flex;flex-direction:column;gap:20px}
.mhead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.mhead .price{font-size:clamp(34px,4vw,54px)}
@media(max-width:900px){.merch{grid-template-columns:1fr !important;gap:48px}}
.merch{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media(max-width:860px){.merch{grid-template-columns:1fr}}
.tiltwrap{perspective:1000px}
.product{position:relative;overflow:hidden;border:2px solid #fff;min-height:440px;background:#0a0a0a;transform-style:preserve-3d;will-change:transform;height:100%}
.product img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.94}
.product .glare{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);transform:translateX(-70%);pointer-events:none}
.product .p-tag{position:absolute;left:22px;bottom:22px;background:#fff;color:#000;font-size:clamp(22px,3vw,34px);padding:4px 14px}
.product .p-sub{position:absolute;left:22px;top:22px;background:#000;color:#fff;border-color:#fff}
.routebox{display:flex;flex-direction:column;justify-content:center;gap:24px}
.price{font-size:clamp(46px,5.4vw,72px);letter-spacing:-.03em}
.region{display:inline-flex;border:2px solid #fff;width:max-content;max-width:100%;flex-wrap:wrap}
.region button{all:unset;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;color:#fff}
.region button.on{background:var(--blue)}
.routeline{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:2.1;opacity:.85}
.routeline b{color:var(--green);font-weight:400}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--disp);font-weight:900;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:2px solid #fff;padding:13px 20px;background:transparent;color:#fff;transition:background .2s,color .2s;will-change:transform}
.btn:hover{background:#fff;color:#000}
.btn.primary{background:var(--blue);border-color:var(--blue)}
.btn.primary:hover{background:#fff;color:var(--blue)}

/* ---------- join ---------- */
#join{background:var(--blue);max-width:none;clip-path:inset(0 0 0 0)}
#join .wrap{max-width:1240px;margin:0 auto}
#join p{font-family:var(--mono);font-size:14px;line-height:1.8}
.form{margin-top:46px;display:flex;flex-wrap:wrap;max-width:860px}
.form input,.form select{background:transparent;border:2px solid #fff;border-right:0;color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:16px 18px;outline:none;flex:1;min-width:200px;transition:background .2s}
.form input:focus{background:rgba(255,255,255,.12)}
.form select{flex:0 0 210px;appearance:none}
.form option{color:#000}
.form input::placeholder{color:rgba(255,255,255,.65)}
.form .btn{border:2px solid #fff;background:#fff;color:var(--blue)}
.form .btn:hover{background:#000;color:#fff;border-color:#000}
.optin{margin-top:20px;display:flex;align-items:flex-start;gap:12px;max-width:860px;cursor:pointer}
body.fine .optin{cursor:none}
.optin input{appearance:none;width:20px;height:20px;border:2px solid #fff;flex:0 0 auto;margin-top:1px;position:relative;background:transparent}
.optin input:checked{background:#fff}
.optin input:checked::after{content:"";position:absolute;inset:4px;background:var(--blue)}
#joinmsg{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;min-height:16px}

footer{padding:56px 28px;border-top:2px solid #111}
.f-grid{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.f-grid img{height:18px;width:auto;opacity:.9;filter:invert(1)}
.f-grid .lbl{opacity:.55}
.socials{display:flex;gap:22px;flex-wrap:wrap}
.socials a{font-family:var(--disp);font-weight:900;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.socials a:hover{color:var(--blue)}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important}
  h2 .line{transform:none !important}
  #boot,#cur,#cur2,#curlbl{display:none !important}
  body.fine, body.fine a, body.fine button{cursor:auto}
  .led-dot.on{animation:none}
}

/* ============================================================
   RELEASES — Cover-Grid mit Filter
   Cover kommen aus der Cover Art Archive. Wo keins existiert
   (21 von 75, meist Remix-Singles), rendert die Karte
   typografisch weiter — das ist die Sprache der Seite, kein
   Notbehelf. Der Effekt: Graustufe -> Farbe, dazu eine im
   Differenzmodus versetzte Kopie, die als Kanalversatz liest.
   ============================================================ */
.relbar{margin-top:34px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.relfilter{display:inline-flex;border:2px solid #fff;flex-wrap:wrap}
.relfilter button{all:unset;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 17px;color:#fff;cursor:pointer}
body.fine .relfilter button{cursor:none}
.relfilter button.on{background:var(--blue)}
.relgrid{margin-top:30px;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
@media(max-width:560px){.relgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}}
.rel{display:block;min-width:0}
.rel[hidden]{display:none}
.relart{position:relative;aspect-ratio:1;border:2px solid #fff;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center;isolation:isolate}
.relart .cov{position:absolute;inset:0;background-image:var(--cov);background-size:cover;
  background-position:center;filter:grayscale(1) brightness(.7) contrast(1.15);
  transition:filter .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
/* Versetzte Kopie im Differenzmodus — erzeugt den Kanalversatz. */
.relart .cov::after{content:"";position:absolute;inset:0;background-image:inherit;
  background-size:cover;background-position:center;mix-blend-mode:difference;
  opacity:0;transform:translate(0,0);transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.rel:hover .cov{filter:none;transform:scale(1.045)}
.rel:hover .cov::after{opacity:.85;transform:translate(5px,-4px)}
/* Scanline, die beim Hover einmal durchläuft. */
.relart .sweep{position:absolute;left:0;right:0;height:36%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.14) 48%,transparent);
  transform:translateY(-140%);opacity:0}
.rel:hover .sweep{animation:relsweep .85s cubic-bezier(.3,0,.3,1) forwards}
@keyframes relsweep{0%{transform:translateY(-140%);opacity:0}
  15%{opacity:1}85%{opacity:1}100%{transform:translateY(320%);opacity:0}}
/* Karte ohne Cover: Typografie statt Bild. */
.relart.notype{background:#0a0a0a}
.relart .tw{position:relative;z-index:1;padding:14px;text-align:center;
  font-family:var(--disp);font-weight:900;font-size:clamp(15px,1.5vw,22px);
  letter-spacing:-.02em;line-height:1.05;overflow-wrap:anywhere}
.relart.notype::before{content:"";position:absolute;inset:0;background:var(--blue);
  clip-path:inset(100% 0 0 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1)}
.rel:hover .relart.notype::before{clip-path:inset(0 0 0 0)}
.relmeta{margin-top:11px;display:flex;flex-direction:column;gap:4px}
.relmeta .rt{font-family:var(--disp);font-weight:900;font-size:14px;letter-spacing:-.01em;
  line-height:1.2;overflow-wrap:anywhere}
.relmeta .rs{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.45}
.rel:hover .relmeta .rs{opacity:.85;color:var(--green)}
.relcount{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.4}

/* ---- Tourdaten: Ticketlink direkt in der Zeile ---- */
.row{position:relative}
.row .tix{font-family:var(--disp);font-weight:900;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;border:2px solid var(--green);color:var(--green);
  padding:8px 12px;text-align:center;white-space:nowrap}
.row .tix:hover{background:var(--green);color:#000}
.row.past{opacity:.4}
.row.past .chip{border-color:#555;color:#888}
.boardhead{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;margin-top:52px}
.boardhead .lbl{opacity:.45}
@media(max-width:820px){
  .row{grid-template-columns:1fr 1fr;gap:10px 16px}
  .row .venue{grid-column:1/-1}
}
/* Albumkarte in der gepinnten Leiste bekommt jetzt das echte Cover.
   Titel bleibt lesbar, weil das Bild abgedunkelt darunter liegt. */
.card .cardcov{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(1) brightness(.42) contrast(1.1);transition:filter .5s,transform .6s}
.card:hover .cardcov{filter:grayscale(0) brightness(.62);transform:scale(1.06)}
.card.blue .cardcov{mix-blend-mode:luminosity;opacity:.55}
/* Zeile ist ein DIV: der Stadt-Link deckt sie per Pseudoelement ab,
   der Ticketbutton liegt darueber. So bleibt beides klickbar, ohne
   ein <a> in ein <a> zu schachteln. */
.row .stretch{position:static}
.row .stretch::after{content:"";position:absolute;inset:0;z-index:0}
.row .tix{position:relative;z-index:1}
.row.past{cursor:default}

/* --- Build-Patch: Spotify-Embed ersetzt #spotify-host --- */
.deck-r > iframe{display:block;width:100%;border:0;border-top:2px solid #fff;background:#000}

/* --- Build-Patch: Load more unter dem Release-Raster --- */
.relmore{margin-top:26px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.relmore[hidden]{display:none}
.relrest,.relall{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.relrest{opacity:.4}
.relall{background:none;border:0;padding:0;opacity:.4;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.relall:hover{opacity:1;color:var(--green)}
body.fine .relmore button{cursor:none}
@media(max-width:560px){.relmore{margin-top:20px;gap:14px}}