/* Selbst-gehostete Geist-Fonts (CSP-konform, 'self') */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/geist/geist-sans-variable.woff2') format('woff2-variations'),
      url('/assets/fonts/geist/geist-sans-variable.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/geist/geist-mono-variable.woff2') format('woff2-variations'),
      url('/assets/fonts/geist/geist-mono-variable.woff2') format('woff2')}

/* ============================================================
   REBEL MEDIA NETWORK
   Fusion: SWISS EDITORIAL (Raster · Typografie · Disziplin)
         + BROADCAST OS (Live-System · Daten · Status)
   Ein Redaktions-Raster, durch das ein Live-Signal läuft.
   Zwei Stimmen: Geist Sans = Display/Editorial · Geist Mono = Daten/System.
   ============================================================ */
:root{
  --ink:#0A0A0A; --ink-2:#0C0C0D; --surface:#111112; --surface-2:#161617;
  --paper:#FAFAFA; --paper-ink:#0A0A0A;
  --grey-1:#D4D4D4; --grey-2:#8A8A8A; --grey-3:#666; 
  --line:#1E1E20; --line-2:#2C2C30;
  --signal:#FF6A00; --signal-hi:#FFA060;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --pad:clamp(20px,4.5vw,56px);
  --maxw:1600px;
  --nav-h:60px;
  --gap:clamp(12px,1.5vw,24px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv01","kern";overflow-x:clip}
a{color:inherit;text-decoration:none}
::selection{background:var(--signal);color:var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---- Raster-System (Swiss) ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:500}
.sq{display:inline-block;width:.11em;height:.11em;background:var(--signal);vertical-align:baseline}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---- LIVE-BAR (OS-Signature) ---- */
.live{border-bottom:1px solid var(--line);background:var(--ink-2);font-size:12px}
.live .wrap{display:flex;align-items:center;gap:14px;height:34px}
.live .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.live .on{font-family:var(--mono);letter-spacing:.18em;color:var(--signal);font-weight:600;font-size:11px}
.live .tr{color:var(--grey-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:12px}
.live .tr b{color:var(--paper);font-weight:500}
.live .stat{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--grey-2);text-transform:uppercase}
.live .stat b{color:var(--paper);font-weight:600}
.live .cta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--grey-2);text-transform:uppercase;transition:color .2s}
.live .cta:hover{color:var(--signal)}
@media(max-width:720px){.live .stat{display:none}}

/* ---- NAV ---- */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:rgba(10,10,10,.78);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;height:100%;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.02em;font-size:15px}
.brand .b-sq{width:11px;height:11px;background:var(--signal)}
.nav-links{display:flex;gap:28px;margin-left:44px}
.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);
  padding:6px 0;position:relative;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--paper)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1.5px;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line-2);color:var(--paper);
  background:transparent;cursor:pointer;transition:.25s;white-space:nowrap;min-height:38px}
.btn:hover{border-color:var(--grey-2)}
.btn--signal{background:var(--signal);color:var(--ink);border-color:var(--signal)}
.btn--signal:hover{background:var(--signal-hi);border-color:var(--signal-hi)}
.btn .arw{transition:transform .25s}.btn:hover .arw{transform:translateX(3px)}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line-2);background:transparent;color:var(--paper);
  cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto}
.burger svg{width:17px;height:17px}
@media(max-width:940px){.nav-links,.nav-actions .btn--ghost{display:none}.burger{display:inline-flex}}

.drawer{position:fixed;inset:var(--nav-h) 0 0 0;z-index:55;background:var(--ink);transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:var(--pad);overflow-y:auto}
.drawer.open{transform:translateX(0)}
.drawer a{font-size:32px;font-weight:500;letter-spacing:-.02em;padding:16px 0;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:16px}
.drawer a .n{font-family:var(--mono);font-size:12px;color:var(--signal);letter-spacing:.1em}
.drawer .btn{margin-top:26px;justify-content:center;font-size:13px;padding:16px}

/* ---- HERO (Swiss: Typografie auf dem Raster) ---- */
.hero{position:relative;padding-block:clamp(48px,7vw,110px) clamp(40px,5vw,72px);overflow:hidden}
.hero-lines{position:absolute;inset:0 var(--pad);z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc((100% + var(--gap))/12) 100%;opacity:.6}
.hero .wrap{position:relative;z-index:1}
.hero-coord{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);flex-wrap:wrap;gap:8px}
.hero-coord .s{color:var(--signal)}
.hero-title{font-size:clamp(60px,14.5vw,232px);line-height:.84;font-weight:500;letter-spacing:-.05em;
  margin:clamp(28px,5vw,60px) 0 0;text-transform:uppercase}
.hero-title .l{display:block;overflow:hidden}
.hero-title .l>span{display:block;transform:translateY(103%);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
.hero-title .l:nth-child(2)>span{animation-delay:.08s}
.hero-title .thin{font-weight:200}
.hero-title .h-sq{display:inline-block;width:.11em;height:.11em;background:var(--signal);margin-left:.02em;box-shadow:0 0 28px rgba(255,106,0,.6)}
@keyframes rise{to{transform:translateY(0)}}
.hero-foot{margin-top:clamp(32px,5vw,64px);border-top:1px solid var(--line);padding-top:24px}
.hero-strap{grid-column:1/7;color:var(--grey-1);font-size:clamp(15px,1.5vw,19px);line-height:1.55;max-width:48ch;margin:0}
.hero-strap b{color:var(--paper);font-weight:500}
.hero-sys{grid-column:9/13;display:flex;flex-direction:column;gap:10px}
.hero-sys .r{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey-2);border-bottom:1px dotted var(--line-2);padding-bottom:8px}
.hero-sys .r b{color:var(--paper);font-weight:600}
.hero-sys .r .live-v{color:var(--signal)}
@media(max-width:820px){.hero-strap{grid-column:1/13}.hero-sys{grid-column:1/13;margin-top:24px}}

/* ---- SYSTEM-TICKER ---- */
.ticker{border-bottom:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding:11px 0}
.ticker-row{display:flex;gap:0;white-space:nowrap;width:max-content;animation:scroll 34s linear infinite;font-family:var(--mono);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2)}
@media(prefers-reduced-motion:reduce){.ticker-row{animation:none}}
.ticker:hover .ticker-row{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.ticker-row span{padding:0 22px;display:inline-flex;align-items:center;gap:22px}
.ticker-row span::after{content:"";width:5px;height:5px;background:var(--signal)}
.ticker-row b{color:var(--paper);font-weight:600}

/* ---- SEKTIONS-KOPF (Swiss) ---- */
.section{padding-block:clamp(72px,10vw,150px)}
.sec-head{border-top:1px solid var(--line);padding-top:22px;margin-bottom:clamp(40px,6vw,80px)}
.sec-head .idx{grid-column:1/3;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--signal);text-transform:uppercase}
.sec-head .ttl{grid-column:3/9;font-size:clamp(30px,5vw,64px);line-height:.98;font-weight:500;letter-spacing:-.035em;margin:0;text-wrap:balance}
.sec-head .ttl .t-sq{display:inline-block;width:.12em;height:.12em;background:var(--signal);margin-left:.03em}
.sec-head .lead{grid-column:9/13;color:var(--grey-1);font-size:15px;line-height:1.6;margin:0;align-self:end}
@media(max-width:820px){.sec-head .idx,.sec-head .ttl,.sec-head .lead{grid-column:1/13}.sec-head .ttl{margin:14px 0}}

/* ---- DIVISIONEN als LIVE-KONSOLE (die Fusion) ---- */
.console{border-top:1px solid var(--line-2)}
.console-hd{display:grid;grid-template-columns:70px 1.4fr 1.3fr 130px auto 40px;gap:20px;padding:12px 6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3);
  border-bottom:1px solid var(--line)}
.drow{display:grid;grid-template-columns:70px 1.4fr 1.3fr 130px auto 40px;gap:20px;align-items:center;
  padding:clamp(20px,2.4vw,32px) 6px;border-bottom:1px solid var(--line);position:relative;transition:padding-left .35s cubic-bezier(.2,.7,.2,1)}
.drow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--signal);transform:scaleY(0);
  transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.drow:hover{padding-left:22px}
.drow:hover::before{transform:scaleY(1)}
.drow:hover .d-name{color:var(--signal)}
.drow .d-idx{font-family:var(--mono);font-size:13px;color:var(--grey-3)}
.drow .d-name{font-size:clamp(24px,3.2vw,42px);font-weight:500;letter-spacing:-.025em;transition:color .3s}
.drow .d-desc{color:var(--grey-2);font-size:14px;line-height:1.5}
.drow .d-data{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey-1);text-transform:uppercase;line-height:1.7}
.drow .d-pill{justify-self:start;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border:1px solid var(--line-2);color:var(--grey-1);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.drow .d-pill .pd{width:5px;height:5px;border-radius:50%;background:var(--grey-2)}
.drow .d-pill.on{background:var(--signal);color:var(--ink);border-color:var(--signal)}
.drow .d-pill.on .pd{background:var(--ink);animation:blink 1.4s infinite}
.drow .d-go{justify-self:end;font-family:var(--mono);color:var(--grey-3);transition:transform .3s,color .3s}
.drow:hover .d-go{color:var(--signal);transform:translate(3px,-3px)}
.console-hd .h4{display:none}
@media(max-width:920px){
  .console-hd{display:none}
  .drow{grid-template-columns:40px 1fr auto;gap:14px;row-gap:8px}
  .drow .d-desc{display:none}
  .drow .d-data{grid-column:2/3;font-size:10px}
  .drow .d-name{font-size:clamp(22px,6vw,30px)}
  .drow .d-go{display:none}
}

/* ---- MANIFEST (invertiert — Swiss-Poster-Moment, das eine Risiko) ---- */
.manifesto{background:var(--paper);color:var(--paper-ink)}
.manifesto .rule,.manifesto .sec-head{border-color:#E2E0DC}
.manifesto .g12{align-items:end}
.manifesto .m-big{grid-column:1/9;font-size:clamp(40px,8.5vw,132px);line-height:.9;font-weight:500;letter-spacing:-.045em;margin:0;text-transform:uppercase}
.manifesto .m-big .m-sq{display:inline-block;width:.1em;height:.1em;background:var(--signal);margin-left:.02em}
.manifesto .m-side{grid-column:10/13;display:flex;flex-direction:column;gap:24px}
.manifesto .m-side p{margin:0;font-size:15px;line-height:1.6;color:#3A3A38;max-width:36ch}
.manifesto .m-stats{margin-top:clamp(48px,6vw,80px);border-top:1px solid #E2E0DC;padding-top:32px}
.manifesto .m-stat{grid-column:span 3}
.manifesto .m-stat .num{font-size:clamp(38px,5vw,64px);font-weight:500;letter-spacing:-.03em;line-height:1}
.manifesto .m-stat .num .m-sq{display:inline-block;width:.14em;height:.14em;background:var(--signal);margin-left:.03em}
.manifesto .m-stat .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6A6A66;margin-top:8px}
@media(max-width:820px){.manifesto .m-big,.manifesto .m-side{grid-column:1/13}.manifesto .m-side{margin-top:28px}.manifesto .m-stat{grid-column:span 6}}

/* ---- LABS ---- */
.labs-grid{border-top:1px solid var(--line);border-left:1px solid var(--line)}
.lab{grid-column:span 4;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(24px,2.4vw,36px);min-height:290px;display:flex;flex-direction:column;transition:background .3s}
.lab:hover{background:var(--surface)}
.lab-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:auto}
.lab-top .tag{color:var(--signal)}
.lab-top .id{color:var(--grey-3)}
.lab h3{font-size:clamp(22px,2.3vw,28px);font-weight:500;letter-spacing:-.02em;margin:36px 0 10px}
.lab p{color:var(--grey-2);font-size:14px;line-height:1.55;margin:0 0 18px}
.lab .go{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-1);
  display:inline-flex;gap:8px;transition:gap .25s,color .25s}
.lab:hover .go{color:var(--signal);gap:12px}
@media(max-width:900px){.lab{grid-column:span 6}}
@media(max-width:560px){.lab{grid-column:span 12}}

/* ---- CTA ---- */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta-glow{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);width:70vw;height:50vh;
  background:radial-gradient(circle,rgba(255,106,0,.1),transparent 65%);pointer-events:none}
.cta .wrap{position:relative;z-index:1}
.cta .idx{grid-column:1/3;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--signal);text-transform:uppercase;padding-top:8px}
.cta .body{grid-column:3/13;display:flex;flex-direction:column;align-items:flex-start;gap:34px}
.cta h2{font-size:clamp(44px,9vw,150px);font-weight:500;letter-spacing:-.05em;line-height:.86;margin:0;text-transform:uppercase}
.cta h2 .c-sq{display:inline-block;width:.1em;height:.1em;background:var(--signal);margin-left:.02em}
.cta .btn{font-size:13px;padding:17px 28px}
@media(max-width:820px){.cta .idx,.cta .body{grid-column:1/13}}

/* ---- FOOTER ---- */
.footer{border-top:1px solid var(--line);padding-top:clamp(56px,7vw,96px);padding-bottom:36px}
.footer .claim{grid-column:1/6;font-size:clamp(28px,3.5vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1;margin:0;text-transform:uppercase}
.footer .claim .f-sq{display:inline-block;width:.1em;height:.1em;background:var(--signal);margin-left:.02em}
.footer .col{grid-column:span 2}
.footer .col:nth-of-type(2){grid-column:8/10}
.footer .col h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3);margin:0 0 16px}
.footer .col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer .col a{color:var(--grey-1);font-size:14px;transition:color .2s;width:fit-content}
.footer .col a:hover{color:var(--signal)}
.footer-bar{border-top:1px solid var(--line);margin-top:clamp(48px,6vw,80px);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-bar .brand{font-size:13px}
.footer-bar .m{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--grey-3);text-transform:uppercase}
@media(max-width:820px){.footer .claim{grid-column:1/13;margin-bottom:40px}.footer .col{grid-column:span 6}.footer .col:nth-of-type(2){grid-column:span 6}}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-title .l>span{animation:none;transform:none}}

/* ---- Sprachumschalter (Footer) ---- */
.footer-bar-r{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.footlang{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  border:1px solid var(--line-2)}
.footlang-a{padding:6px 11px;color:var(--grey-3);text-transform:uppercase;transition:color .2s,background .2s;
  position:relative;min-height:32px;display:inline-flex;align-items:center}
.footlang-a + .footlang-a{border-left:1px solid var(--line-2)}
.footlang-a:hover{color:var(--paper)}
.footlang-a.is-current{color:var(--ink);background:var(--signal)}



/* ---- Kompatibilitaets-Tokens fuer den Cookie-Banner (main.css-Namen) ---- */
:root{
  --bg:#0A0A0A; --fg:#FAFAFA; --orange:#FF6A00; --hairline:#1c1c1c; --muted:#8A8A8A;
  --display:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --tr-tight:-.02em;
  --brand-primary:#FF6A00; --hairline-2:#2A2A2A; --surface-1:#111; --track:.04em;
}



/* ---- Audio-Player (aus main.css, für den Radio-Player auf der Startseite) ---- */


.broadcast-nowplaying{
  padding:var(--s-3) 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}

.broadcast-nowplaying-label{
  font-size:10px; font-weight:500;
  letter-spacing:var(--track);
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}

.broadcast-nowplaying-track{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:44px;
}

.broadcast-nowplaying-title{
  font-size:16px;
  font-weight:500;
  color:var(--fg);
  letter-spacing:-0.01em;
}

.broadcast-nowplaying-artist{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.02em;
}


/* Audio player — sits inside the broadcast live card. Ghost style so it
   reads as an inline control, not a primary CTA. Orange is only the
   play-state accent; the default state uses hairline + muted text. */
.audio-player{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3);
  flex-wrap:wrap;
}


.audio-player-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 16px 8px 14px;
  background:transparent;
  color:var(--fg);
  border:1px solid var(--hairline);
  border-radius:999px;
  cursor:pointer;
  font-family:var(--mono);
  font-size:10px; font-weight:500;
  letter-spacing:var(--track);
  text-transform:uppercase;
  transition:border-color .22s ease, color .22s ease, background-color .22s ease;
}

.audio-player-btn:hover{
  border-color:var(--orange);
  color:var(--orange);
}

.audio-player-btn:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

/* The play triangle is already our brand accent even in the resting
   state — keeps the widget legible while the surrounding button stays
   subdued. */
.audio-player-btn [data-audio-icon-play]{
  color:var(--orange);
}

.audio-player[data-state="playing"] .audio-player-btn{
  border-color:var(--orange);
  color:var(--orange);
  background:color-mix(in oklab, var(--orange) 8%, transparent);
}

.audio-player[data-state="loading"] .audio-player-btn{
  border-color:var(--muted);
  color:var(--muted);
}

.audio-player[data-state="error"] .audio-player-btn{
  border-color:var(--muted);
  color:var(--muted);
  opacity:.7;
}

.audio-player[data-state="reconnecting"] .audio-player-btn{
  border-color:var(--orange);
  color:var(--orange);
}

.audio-player[data-state="loading"] .audio-player-icon[data-audio-icon-loading],
.audio-player[data-state="reconnecting"] .audio-player-icon[data-audio-icon-loading]{
  animation:audio-spin 1s linear infinite;
}

.audio-player-icon{
  display:inline-flex;
  line-height:0;
}

/* CRITICAL: the hidden attribute defaults to display:none in the UA
   stylesheet, but our .audio-player-icon rule sets inline-flex which
   overrides it. Put it back so only the active-state icon shows. */
.audio-player-icon[hidden]{
  display:none !important;
}

.audio-player-label{
  white-space:nowrap;
}


.audio-player-volume{
  flex:1 1 100px;
  min-width:80px;
  display:flex;
  align-items:center;
}

.audio-player-volume input[type="range"]{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:1px;
  background:var(--hairline);
  border-radius:999px;
  cursor:pointer;
}

/* Smaller, fg-coloured thumb — the orange button is already the
   focal point. Thumb picks up orange only on hover/focus. */
.audio-player-volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:10px; height:10px;
  background:var(--fg);
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}

.audio-player-volume input[type="range"]::-moz-range-thumb{
  width:10px; height:10px;
  background:var(--fg);
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}

.audio-player-volume input[type="range"]:hover::-webkit-slider-thumb,
.audio-player-volume input[type="range"]:focus-visible::-webkit-slider-thumb{
  background:var(--orange);
  transform:scale(1.2);
}

.audio-player-volume input[type="range"]:hover::-moz-range-thumb,
.audio-player-volume input[type="range"]:focus-visible::-moz-range-thumb{
  background:var(--orange);
  transform:scale(1.2);
}


/* Status box — surfaced when the stream is unreachable.
   Lives below the player controls (full-width row in the flex layout). */
.audio-player-status{
  flex:1 1 100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  margin-top:10px;
  background:rgba(255,106,0,0.06);
  border:1px solid rgba(255,106,0,0.25);
  border-left:3px solid var(--orange);
  border-radius:2px;
  font-size:12px;
  line-height:1.45;
}

.audio-player-status[hidden]{
  display:none;
}

.audio-player-status-msg{
  margin:0;
  flex:1 1 auto;
  color:var(--fg);
  font-family:var(--mono);
}

.audio-player-status-btn{
  flex:0 0 auto;
  appearance:none;
  background:transparent;
  border:1px solid var(--orange);
  color:var(--orange);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:var(--track);
  text-transform:uppercase;
  padding:6px 12px;
  cursor:pointer;
  border-radius:2px;
  transition:background-color .15s ease, color .15s ease;
}

.audio-player-status-btn:hover,
.audio-player-status-btn:focus-visible{
  background:var(--orange);
  color:#000;
  outline:none;
}

.audio-player-status-btn[hidden]{
  display:none;
}


/* ---- Now-Playing state visuals (broadcast live block) ---
   The track block lives in one of four states, driven by
   data-nowplaying-state on the wrapper:
     loading — skeleton shimmer (default in markup)
     ok      — track + artist text, normal styling
     empty   — stream up but no current track ("Off-air")
     error   — repeated fetch failures or watchdog tripped

   loading + empty + error all suppress the artist line so the
   user doesn't see a stray "—" or empty space. The visual
   weight differs: empty is muted-neutral (planned silence),
   error has a small warning indicator. */

.broadcast-nowplaying-track[data-nowplaying-state="loading"] .broadcast-nowplaying-title,
.broadcast-nowplaying-track[data-nowplaying-state="loading"] .broadcast-nowplaying-artist {
  color: transparent !important;
  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.10) 50%,
      rgba(255,255,255,0.04)
    );
  background-size: 200% 100%;
  animation: rmnSkeletonShimmer 1.6s ease-in-out infinite;
  border-radius: 2px;
  display: inline-block;
}

.broadcast-nowplaying-track[data-nowplaying-state="loading"] .broadcast-nowplaying-title  { min-width: 12em; height: 1.1em; }

.broadcast-nowplaying-track[data-nowplaying-state="loading"] .broadcast-nowplaying-artist { min-width: 8em;  height: 0.95em; margin-top: 4px; }


/* Empty state — stream up, nothing currently playing.
   Calmly muted: the dot signals "we're aware, just quiet". */
.broadcast-nowplaying-track[data-nowplaying-state="empty"] .broadcast-nowplaying-title {
  color: var(--muted);
  font-style: italic;
  position: relative;
  padding-left: 16px;
}

.broadcast-nowplaying-track[data-nowplaying-state="empty"] .broadcast-nowplaying-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
}

.broadcast-nowplaying-track[data-nowplaying-state="empty"] .broadcast-nowplaying-artist {
  display: none;
}


/* Error state — surface the issue without alarming. Same dot
   pattern as empty but in warning amber. Keeps the layout
   stable across all states. */
.broadcast-nowplaying-track[data-nowplaying-state="error"] .broadcast-nowplaying-title {
  color: #FFB454;
  position: relative;
  padding-left: 16px;
}

.broadcast-nowplaying-track[data-nowplaying-state="error"] .broadcast-nowplaying-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #FFB454;
  animation: rmnPulseDot 2s ease-in-out infinite;
}

.broadcast-nowplaying-track[data-nowplaying-state="error"] .broadcast-nowplaying-artist {
  display: none;
}
@media (prefers-reduced-motion: reduce){

  .broadcast-nowplaying-track[data-nowplaying-state="loading"] .broadcast-nowplaying-title,
  .broadcast-nowplaying-track[data-nowplaying-state="loading"] .broadcast-nowplaying-artist {
    animation: none; opacity: 0.55;
  }
  .broadcast-nowplaying-track[data-nowplaying-state="error"] .broadcast-nowplaying-title::before {
    animation: none;
  }}



/* Universal Title-Klassen (covered alle Card-Titel im Frontend) */
.artist-card-name,
.book-title,
.book-excerpt-title,
.book-buy-title,
.book-newsletter-title,
.author-more-title,
.author-more-meta-title,
.artist-others-title,
.broadcast-live-title,
.broadcast-nowplaying-title,
.case-study-cta-title,
.contact-success-title,
.cookie-banner-title,
.demodrop-title,
.admin-modal-title,
.publishing-card-title,
.lab-card-title,
.show-card-title,
.release-card-title,
.career-card-title,
.brand-card-title {
  font-family: var(--display) !important;
  letter-spacing: var(--tr-tight) !important;
  font-feature-settings: "ss01", "cv11";
}


/* Audio-Player + Carousel-Nav Buttons */
.audio-player-btn,
.audio-player-status-btn,
.labs-carousel-nav-btn,
.setcard-disc-nav-btn,
.stream-btn {
  background: transparent !important;
  border: 1px solid var(--hairline-2) !important;
  color: var(--fg) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}


.audio-player-btn:hover,
.audio-player-status-btn:hover,
.labs-carousel-nav-btn:hover,
.setcard-disc-nav-btn:hover,
.stream-btn:hover {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #000 !important;
}


.audio-player-btn:focus-visible,
.audio-player-status-btn:focus-visible,
.stream-btn:focus-visible {
  outline: 2px solid var(--brand-primary) !important;
  outline-offset: 2px !important;
}

/* ---- Player: Swiss-OS-Feinschliff ---- */
.rmn-radio{border:1px solid var(--hairline);background:var(--surface-1,#111);padding:var(--s-6)}
.rmn-radio-grid{display:grid;grid-template-columns:1fr;gap:var(--s-5);align-items:center}
@media(min-width:760px){.rmn-radio-grid{grid-template-columns:1fr auto;gap:var(--s-7)}}
.rmn-radio-np{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.rmn-radio-np-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal,#ff6a00)}
.rmn-radio-np-title{font-size:clamp(20px,3vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--paper,#fafafa)}
.rmn-radio-np-artist{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted,#8a8a8a)}
.rmn-radio-ctl{display:flex;flex-direction:column;gap:var(--s-4);min-width:260px}
.audio-player{border-radius:0 !important;padding:0 !important}
.audio-player-btn{border-radius:0 !important;font-family:var(--mono) !important;letter-spacing:.12em !important;text-transform:uppercase !important;border-color:var(--hairline) !important}
.audio-player-btn:hover{background:var(--signal,#ff6a00) !important;border-color:var(--signal,#ff6a00) !important;color:#0a0a0a !important}
.audio-player-status{border-radius:0 !important}
.audio-player-status-btn{border-radius:0 !important;font-family:var(--mono) !important}

/* ---- Cookie-Banner (aus main.css uebernommen, damit er auf der Startseite funktioniert) ---- */



/* =========================================
   COOKIE CONSENT BANNER
   Two states:
     1) collapsed  — horizontal row: text left, actions right
     2) expanded   (.has-prefs) — text on top, preferences
        block spans full width, actions anchored bottom-right
   ========================================= */
.cookie-banner{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:100;
  background:color-mix(in oklab, var(--bg) 94%, black);
  backdrop-filter:saturate(1.4) blur(20px);
  -webkit-backdrop-filter:saturate(1.4) blur(20px);
  border-top:1px solid var(--hairline);
  box-shadow:0 -8px 32px -12px rgba(0,0,0,.6);
  transform:translateY(100%);
  opacity:0;
  transition:transform .32s cubic-bezier(0.22, 1, 0.36, 1),
             opacity .24s ease;
  pointer-events:none;
  /* Cap the banner height so it can never cover the entire mobile
     viewport. 70vh on mobile gives user a clear visible area above
     the banner to see the page. 92vh on larger screens is fine
     because the banner sits at the bottom with space. */
  max-height:70vh;
  overflow-y:auto;
  overscroll-behavior:contain;
}
@media (min-width: 720px){

  .cookie-banner{ max-height:92vh; }}


.cookie-banner.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){

  .cookie-banner{
    transition:opacity .15s ease;
    transform:none;
  }}



.cookie-banner .wrap{
  padding-block:var(--s-5);
}
@media (min-width: 720px){

  .cookie-banner:not(.has-prefs) .wrap{
    padding-block:var(--s-4);
  }}



/* ---- Collapsed layout ---- */
.cookie-banner-inner{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
}
@media (min-width: 900px){

  .cookie-banner:not(.has-prefs) .cookie-banner-inner{
    flex-direction:row;
    align-items:center;
    gap:var(--s-6);
  }
  .cookie-banner:not(.has-prefs) .cookie-banner-head{
    flex:1 1 auto;
    min-width:0;
  }
  .cookie-banner:not(.has-prefs) .cookie-banner-actions{
    flex:0 0 auto;
  }}



.cookie-banner-head{
  max-width:720px;
}

.cookie-banner-title{
  margin:0 0 6px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-0.005em;
  color:var(--fg);
}

.cookie-banner-text{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.cookie-banner-link{
  color:var(--orange);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  white-space:nowrap;
}

.cookie-banner-link:hover{ color:var(--fg); }


/* ---- Action buttons ---- */
.cookie-banner-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3);
  justify-content:space-between;
}

.cookie-banner-actions-primary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  margin-left:auto;
}

.cookie-banner-actions .btn{
  padding:10px 20px;
  font-size:12px;
  min-height:40px;
  white-space:nowrap;
}

/* Customize is a ghost button on the left — same size as others, not
   a deemphasised text link. */
.cookie-banner-customize{
  margin-right:auto;
}


/* ---- Expanded layout (customize opened) ---- */
.cookie-banner.has-prefs .cookie-banner-inner{
  gap:var(--s-5);
}

.cookie-banner.has-prefs .cookie-banner-head{
  max-width:none;
}


.cookie-banner-prefs{
  display:flex;
  flex-direction:column;
  border:1px solid var(--hairline);
  background:color-mix(in oklab, var(--bg) 85%, black);
}

.cookie-pref{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--s-4);
  align-items:center;
  padding:var(--s-4);
  border-bottom:1px solid var(--hairline);
}

.cookie-pref:last-child{ border-bottom:none; }

.cookie-pref-info{ min-width:0; }

.cookie-pref-name{
  display:block;
  font-size:14px;
  font-weight:500;
  color:var(--fg);
  margin-bottom:3px;
  cursor:pointer;
  letter-spacing:-0.005em;
}

.cookie-pref-desc{
  margin:0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}


/* ---- Toggle switch ---- */
.cookie-pref-toggle{
  flex-shrink:0;
  position:relative;
  width:44px; height:24px;
}

.cookie-pref-toggle input{
  position:absolute;
  opacity:0;
  width:100%; height:100%;
  margin:0;
  cursor:pointer;
  z-index:1;
}

.cookie-pref-toggle input:disabled{ cursor:not-allowed; }

.cookie-pref-switch{
  position:absolute;
  inset:0;
  background:var(--hairline);
  border-radius:999px;
  transition:background-color .22s ease;
}

.cookie-pref-switch::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:20px; height:20px;
  border-radius:999px;
  background:var(--fg);
  transition:transform .22s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-pref-toggle input:checked + .cookie-pref-switch{
  background:var(--orange);
}

.cookie-pref-toggle input:checked + .cookie-pref-switch::after{
  transform:translateX(20px);
  background:#0A0A0A;
}

.cookie-pref-toggle--locked .cookie-pref-switch{
  background:color-mix(in oklab, var(--orange) 50%, var(--hairline));
}

.cookie-pref-toggle--locked .cookie-pref-switch::after{
  transform:translateX(20px);
  background:#0A0A0A;
  opacity:.85;
}

.cookie-pref-toggle input:focus-visible + .cookie-pref-switch{
  outline:2px solid var(--orange);
  outline-offset:3px;
}


/* =========================================
   COOKIE BANNER — service detail (3-41)
   Concrete list of which third-party services
   actually load + when. Tucked inside <details>
   so the customize panel stays scannable.
   ========================================= */
.cookie-detail{
  margin-top:var(--s-3);
  padding-top:var(--s-3);
  border-top:1px solid var(--hairline);
}

.cookie-detail-summary{
  cursor:pointer;
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--muted);
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.cookie-detail-summary::-webkit-details-marker{ display:none; }

.cookie-detail-summary::before{
  content:'+';
  display:inline-block;
  width:14px;
  text-align:center;
  color:var(--orange);
  font-weight:500;
}

.cookie-detail[open] .cookie-detail-summary::before{
  content:'−';
}

.cookie-detail-summary:hover{ color:var(--fg); }

.cookie-detail-list{
  list-style:none;
  margin:var(--s-3) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}

.cookie-detail-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 16px;
  padding:var(--s-2) 0;
  border-top:1px solid var(--hairline);
  font-size:12px;
  line-height:1.45;
}

.cookie-detail-item:first-child{ border-top:none; padding-top:0; }

.cookie-detail-name{
  grid-column:1;
  grid-row:1;
  color:var(--orange);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

.cookie-detail-purpose{
  grid-column:2;
  grid-row:1;
  color:var(--fg);
}

.cookie-detail-region{
  grid-column:1;
  grid-row:2;
  color:var(--muted);
  font-size:11px;
  letter-spacing:0.04em;
}

.cookie-detail-gated{
  grid-column:2;
  grid-row:2;
  color:var(--muted);
  font-size:11px;
}


/* Universal Title-Klassen (covered alle Card-Titel im Frontend) */
.artist-card-name,
.book-title,
.book-excerpt-title,
.book-buy-title,
.book-newsletter-title,
.author-more-title,
.author-more-meta-title,
.artist-others-title,
.broadcast-live-title,
.broadcast-nowplaying-title,
.case-study-cta-title,
.contact-success-title,
.cookie-banner-title,
.demodrop-title,
.admin-modal-title,
.publishing-card-title,
.lab-card-title,
.show-card-title,
.release-card-title,
.career-card-title,
.brand-card-title {
  font-family: var(--display) !important;
  letter-spacing: var(--tr-tight) !important;
  font-feature-settings: "ss01", "cv11";
}


/* COOKIE-BANNER Buttons (Anpassen, Ablehnen, Alle akzeptieren, Auswahl speichern) */
.cookie-banner-buttons button,
.cookie-banner button[type="button"],
.cookie-banner [data-cookie-action] {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  height: 38px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

/* ---- Live-Leiste: Zustände (loading / live / empty) ---- */
.live .live-offline{display:none}
.live[data-state="empty"] .tr,
.live[data-state="empty"] .live-listeners{display:none}
.live[data-state="empty"] .live-offline{display:inline;color:var(--grey-3,#8A8A8A)}
.live[data-state="empty"] .dot{background:var(--grey-3,#8A8A8A);animation:none}
.live[data-state="loading"] .live-offline{display:none}
.live[data-state="loading"] .tr{opacity:.6}
.live[data-state="live"] .live-offline{display:none}

/* Labs-Karten sind jetzt Links */
a.lab{text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.lab .go{margin-top:auto}

/* Footer: Copyright fährt beim Hover hinter dem Wortmark hervor (wie Unterseiten) */
.footer-bar .foot-reveal{display:inline-flex;align-items:center;gap:0;isolation:isolate}
.footer-bar .foot-reveal-extra{display:inline-flex;align-items:center;overflow:hidden;max-width:0;opacity:0;white-space:nowrap;font-family:var(--mono);font-size:13px;color:var(--grey-3);transition:max-width .35s cubic-bezier(.65,0,.35,1),opacity .25s ease,padding .35s cubic-bezier(.65,0,.35,1),margin .35s cubic-bezier(.65,0,.35,1);padding-inline:0}
.footer-bar .foot-reveal:hover .foot-reveal-extra,.footer-bar .foot-reveal:focus-within .foot-reveal-extra{max-width:240px;opacity:1;padding-left:10px;margin-left:10px;border-left:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){.footer-bar .foot-reveal-extra{transition:opacity .2s ease}}

/* Labs-Karten-Thumbnail (Startseite) — blutet zum Kartenrand */
.lab-thumb{margin:calc(-1 * clamp(24px,2.4vw,36px)) calc(-1 * clamp(24px,2.4vw,36px)) 22px;aspect-ratio:16/9;overflow:hidden;background:#0c0c0c;border-bottom:1px solid var(--line)}
.lab-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
a.lab:hover .lab-thumb img{transform:scale(1.03)}

/* Footer: Sprachswitcher — nur aktuelle Sprache, Rest fährt beim Hover hervor (wie Unterseiten) */
.footer-bar .foot-reveal--lang{display:inline-flex;align-items:center;gap:0}
.footer-bar .foot-reveal--lang .foot-reveal-extra{order:1;font-family:var(--mono);font-size:13px}
.footer-bar .foot-reveal--lang .footlang-current{order:2;font-family:var(--mono);font-size:13px;color:var(--paper);letter-spacing:.04em}
.footer-bar .foot-reveal--lang .footlang-others{display:inline-flex;gap:12px}
.footer-bar .foot-reveal--lang .footlang-a{color:var(--grey-2);text-decoration:none;transition:color .2s}
.footer-bar .foot-reveal--lang .footlang-a:hover{color:var(--paper)}
.footer-bar .foot-reveal--lang:hover .foot-reveal-extra,
.footer-bar .foot-reveal--lang:focus-within .foot-reveal-extra{max-width:160px;opacity:1;padding-right:10px;margin-right:10px;border-right:1px solid var(--line)}

/* Footer-Claim: oranger Punkt (wie Unterseiten, einheitlich) */
.footer .claim .sec-title-dot{color:var(--signal);font-style:normal}

/* Logo-Mockups (transparentes Wortmarken-PNG, z.B. Arcanum): vollständig
   zeigen statt im 16:9-Rahmen zu cropen. object-fit:contain auf dunklem Grund. */
.lab-thumb--contain{background:#0a0a0a}
.lab-thumb--contain img{object-fit:contain;padding:9% 8%;background:#0a0a0a}
a.lab:hover .lab-thumb--contain img{transform:none}