/* ═══════════════════════════════════════════════════════════════
   HITPARADE · H.G.O.D — basiert auf Vorschlag B „Plattencover / Editorial"
   3 Funktionsfarben: Papier (neutral), Tinte (neutral), Signalorange (Akzent)
   + Chart-Show-Anklang: Kondensierte Kursiv-Versalien, Fallblatt-Ziffern, Streifen, Stern
   ═══════════════════════════════════════════════════════════════ */
:root{
  --paper:#EFEAE1; --paper-2:#E5DED2; --paper-3:#D9D1C3;
  --ink:#151310; --ink-2:#4A443C; --ink-3:#655D52;
  --line:rgba(21,19,16,.16); --line-strong:#151310;
  --acc:#FF4A1C; --acc-text:#B3300A; --on-acc:#151310;
  --disc:#121110; --disc-groove:rgba(255,255,255,.05);
  /* Tafel (Chart-Board) — bleibt dunkel, wie im TV-Studio */
  --board:#151310; --board-2:#211E1A; --board-ink:#EFEAE1; --board-ink-2:#A9A092; --board-line:rgba(239,234,225,.12);

  --f-display:"Iowan Old Style","Charter","Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --f-retro:"Avenir Next Condensed","Helvetica Neue Condensed","HelveticaNeue-CondensedBold","Roboto Condensed","Arial Narrow","Liberation Sans Narrow",Impact,sans-serif;
  --f-sans:-apple-system,system-ui,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --gutter:clamp(16px,4vw,48px);
  --max:1360px;
  --section-py:clamp(4rem,8vw,8rem);
  --gap:clamp(12px,2vw,28px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --np-h:76px;
}
:root[data-theme="dark"]{
  --paper:#0F0E0C; --paper-2:#181614; --paper-3:#24211D;
  --ink:#EEE7DB; --ink-2:#B3AA9C; --ink-3:#958C7F;
  --line:rgba(238,231,219,.14); --line-strong:#EEE7DB;
  --acc:#FF5A2A; --acc-text:#FF7A4F; --on-acc:#0F0E0C;
  --disc:#000; --disc-groove:rgba(255,255,255,.06);
  --board:#181614; --board-2:#211E1A; --board-ink:#EEE7DB; --board-ink-2:#A39A8C; --board-line:rgba(238,231,219,.12);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:400 1rem/1.55 var(--f-sans);-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.loading{padding:4rem 0;text-align:center;font:500 .75rem var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);list-style:none;grid-column:1/-1}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:.8rem 1.2rem}
.skip:focus{left:1rem;top:1rem}
body{animation:pageIn .35s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.sec{padding-top:var(--section-py)}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:48px;padding:0 1.35rem;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 .74rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s,background-color .18s,color .18s}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-main{background:var(--ink);color:var(--paper);padding-left:.55rem}
.btn-main .ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--acc);color:var(--on-acc);font-size:.7rem}
.btn-main:hover:not(:disabled){box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.btn-ghost{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.btn[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc);text-decoration:none}

/* ─── Kopfleiste ─── */
.bar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line-strong);padding-top:env(safe-area-inset-top);transition:background-color .3s}
.bar-in{display:flex;align-items:center;gap:1rem;height:56px;font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.home{display:inline-flex;align-items:center;min-height:44px;gap:.5rem}
.home:hover{color:var(--acc-text)}
.brand{display:flex;align-items:center;gap:.55rem;font:italic 800 1.05rem/1 var(--f-retro);letter-spacing:.06em}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.nav{display:flex;gap:.25rem;margin-left:auto}
.nav a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .7rem;border-radius:99px}
.nav a:hover{color:var(--acc-text)}
.nav-live{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
body.is-live .nav-live{background:var(--acc);animation:pulse 1.2s ease-in-out infinite}
.theme-tg{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .2rem;background:none;border:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit}
.theme-tg .sw{width:30px;height:16px;border:1.5px solid var(--ink);border-radius:99px;position:relative}
.theme-tg .sw::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:var(--ink);transition:transform .2s var(--ease)}
:root[data-theme="dark"] .theme-tg .sw::after{transform:translateX(14px);background:var(--acc)}
.theme-tg:hover{color:var(--acc-text)}
@media(max-width:760px){
  .bar-in{gap:.5rem}.home-t{display:none}.brand{margin-right:auto}
  .nav{position:fixed;left:0;right:0;top:calc(56px + env(safe-area-inset-top));z-index:49;margin:0;justify-content:space-around;background:var(--paper);border-bottom:1px solid var(--line);padding:0 var(--gutter);transition:background-color .3s}
  .nav a{padding:0 .5rem;font-size:.68rem}
  html{scroll-padding-top:110px}
  .mast{padding-top:44px}
}

/* ─── KOPF · Chart-Show-Bühne ───
   Tag  = Riso-Druck der Studiobühne auf Papier (Tinte auf Papier, Schleier links für den Text)
   Nacht = Studiofoto „auf Sendung" (Papierschrift auf Bühne, Schleier links/unten)
   Bild nur dekorativ als Hintergrund, Text bleibt HTML. Ohne Bild trägt Fallback-Farbe + CSS-Lichtkegel. */
.mast{
  --st-bg:#E6DED0; --st-ink:var(--ink); --st-ink-2:var(--ink-2); --st-line:rgba(21,19,16,.22); --st-rule:var(--ink);
  --st-tile:#151310; --st-tile-ink:#EFEAE1;
  --st-veil:linear-gradient(90deg,rgba(239,234,225,.97) 0,rgba(239,234,225,.9) 34%,rgba(239,234,225,.55) 60%,rgba(239,234,225,.1) 88%),
            linear-gradient(0deg,rgba(239,234,225,.85) 0,rgba(239,234,225,0) 34%);
  --st-glow:radial-gradient(ellipse 46% 80% at 78% -8%,rgba(255,74,28,.30),transparent 70%),radial-gradient(ellipse 30% 60% at 52% -10%,rgba(255,74,28,.14),transparent 70%);
  --st-dots:rgba(21,19,16,.10);
  --st-beam:rgba(255,74,28,.20); --st-blend:multiply;
  --st-img:url(../img/mast-day-720.webp);
  --st-set:image-set(url(../img/mast-day-720.avif) type("image/avif"),url(../img/mast-day-720.webp) type("image/webp"));
}
@media(min-width:761px){.mast{
  --st-img:url(../img/mast-day-1760.webp);
  --st-set:image-set(url(../img/mast-day-1760.avif) type("image/avif"),url(../img/mast-day-1760.webp) type("image/webp"));
}}
:root[data-theme="dark"] .mast{
  --st-bg:#120F0C; --st-ink:#F3ECE0; --st-ink-2:#CDC3B3; --st-line:rgba(243,236,224,.2); --st-rule:#F3ECE0;
  --st-tile:rgba(0,0,0,.62); --st-tile-ink:#F3ECE0;
  --st-veil:linear-gradient(90deg,rgba(15,13,11,.92) 0,rgba(15,13,11,.8) 34%,rgba(15,13,11,.45) 64%,rgba(15,13,11,.2) 100%),
            linear-gradient(0deg,rgba(15,13,11,.92) 0,rgba(15,13,11,0) 42%),
            linear-gradient(180deg,rgba(15,13,11,.6) 0,rgba(15,13,11,0) 22%);
  --st-glow:radial-gradient(ellipse 50% 85% at 74% -10%,rgba(255,120,60,.34),transparent 70%),radial-gradient(ellipse 34% 70% at 30% -12%,rgba(255,170,110,.14),transparent 70%);
  --st-dots:rgba(0,0,0,.28);
  --st-beam:rgba(255,190,140,.16); --st-blend:screen;
  --st-img:url(../img/mast-night-880.webp);
  --st-set:image-set(url(../img/mast-night-880.avif) type("image/avif"),url(../img/mast-night-880.webp) type("image/webp"));
}
@media(min-width:761px){:root[data-theme="dark"] .mast{
  --st-img:url(../img/mast-night-1920.webp);
  --st-set:image-set(url(../img/mast-night-1920.avif) type("image/avif"),url(../img/mast-night-1920.webp) type("image/webp"));
}}
.mast-stage{position:relative;isolation:isolate;overflow:hidden;color:var(--st-ink);background:var(--st-glow),var(--st-bg);border-bottom:1px solid var(--line-strong);transition:background-color .3s,color .3s}
.mast-bg{position:absolute;inset:0;z-index:-3;background-image:var(--st-img);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;animation:bgIn .9s var(--ease) both}
@supports (background-image:image-set(url(x.avif) type("image/avif"))){.mast-bg{background-image:var(--st-set)}}
@media(min-width:761px){.mast-bg{background-position:58% 40%}}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
/* Schleier (Kontrast) + Druckraster */
.mast-stage::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--st-veil)}
.mast-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,var(--st-dots) 0 .9px,transparent 1.3px) 0 0/5px 5px}
/* Lichtkegel: Fallback ohne Bild + ruhiger Sweep */
.mast-beams{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mast-beams i{position:absolute;top:-6%;width:min(44vw,620px);height:125%;background:linear-gradient(180deg,var(--st-beam),transparent 78%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);transform-origin:50% 0;mix-blend-mode:var(--st-blend);filter:blur(10px)}
.mast-beams i:nth-child(1){left:52%;transform:rotate(14deg)}
.mast-beams i:nth-child(2){left:66%;transform:rotate(-18deg);opacity:.8}
@media(prefers-reduced-motion:no-preference){
  .mast-beams i:nth-child(1){animation:sweepA 17s ease-in-out infinite alternate}
  .mast-beams i:nth-child(2){animation:sweepB 21s ease-in-out infinite alternate}
}
@keyframes sweepA{from{transform:rotate(18deg)}to{transform:rotate(-8deg)}}
@keyframes sweepB{from{transform:rotate(-22deg)}to{transform:rotate(6deg)}}

.mast-in{position:relative;padding-top:clamp(1.25rem,2.6vw,2.25rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.mast-line{display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;font:500 .7rem/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--st-ink-2);border-bottom:1px solid var(--st-line);padding-bottom:.8rem}
.mast-line .cur::after{content:"▌";margin-left:.25em;color:var(--acc);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media(max-width:600px){.hide-s{display:none}}
.mast-head{position:relative;padding:clamp(1.5rem,4vw,3.5rem) 0 clamp(.75rem,2vw,1.5rem)}
.mast-title{margin:0;position:relative;z-index:2}
.mast-pre{display:flex;align-items:center;gap:.5em;font:italic 400 clamp(1.4rem,1rem + 2.2vw,3rem)/1 var(--f-display);letter-spacing:-.02em;margin:0 0 .12em .05em}
.mast-pre::after{content:"";flex:0 0 clamp(2rem,6vw,5.5rem);height:2px;background:var(--acc);margin-top:.15em}
.mast-word{display:block;font:italic 800 clamp(3.6rem,14.6vw,14.2rem)/.8 var(--f-retro);letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;transform:skewX(-6deg);transform-origin:left bottom}
.mast-word .w1{color:var(--st-ink)}
/* „PARADE" in Signalorange, unten in Sonnenuntergangs-Streifen aufgelöst; .w3 lässt dieselben Streifen
   (gleiche Zeilenbox → deckungsgleich) bis zum rechten Bildrand auslaufen */
.mast-word{--rays:transparent var(--r0) var(--r1),var(--acc) var(--r1) var(--r2),transparent var(--r2) var(--r3),var(--acc) var(--r3) var(--r4),transparent var(--r4) var(--r5),var(--acc) var(--r5) var(--r6);
  --r0:60%;--r1:62.2%;--r2:65.6%;--r3:67.6%;--r4:70.2%;--r5:71.8%;--r6:74%}
.mast-word .w2{color:var(--acc)}
.mast-word .w3{display:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mast-word .w2{background:linear-gradient(180deg,var(--acc) 0 var(--r0),var(--rays),var(--acc) var(--r6));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .mast-word .w3{display:inline;padding-right:100vw;margin-left:.04em;background:linear-gradient(180deg,transparent 0 var(--r0),var(--rays),transparent var(--r6))}
}
/* Stern „TOP 100" */
.mast-burst{position:absolute;z-index:3;right:clamp(0px,3vw,48px);top:clamp(.5rem,2.4vw,2rem);width:clamp(84px,13vw,196px);aspect-ratio:1;display:grid;place-items:center;color:var(--on-acc);
  background:radial-gradient(circle,transparent 0 55%,rgba(0,0,0,.22) 55.5% 56.5%,transparent 57%),var(--acc);
  clip-path:polygon(50% 0,59% 13%,74% 5%,76% 21%,92% 21%,86% 36%,100% 45%,88% 56%,96% 71%,80% 74%,78% 90%,63% 85%,50% 100%,37% 85%,22% 90%,20% 74%,4% 71%,12% 56%,0 45%,14% 36%,8% 21%,24% 21%,26% 5%,41% 13%);
  transform:rotate(12deg)}
@media(prefers-reduced-motion:no-preference){.mast-burst{animation:burstIn .5s .25s cubic-bezier(.3,1.5,.5,1) both}}
@keyframes burstIn{from{transform:rotate(-20deg) scale(.6);opacity:0}to{transform:rotate(12deg) scale(1);opacity:1}}
.mast-burst span{display:block;text-align:center;font:italic 800 clamp(.8rem,1.3vw,1.4rem)/1 var(--f-retro);text-transform:uppercase;letter-spacing:.04em;transform:rotate(-12deg)}
.mast-burst b{display:block;font-size:2.35em;letter-spacing:-.03em;line-height:.9}
@media(max-width:600px){.mast-head{padding-top:2.6rem}.mast-burst{top:.2rem;right:-.2rem;width:70px}.mast-word{font-size:clamp(3.6rem,17.4vw,7rem)}
  .mast{--st-veil:linear-gradient(180deg,rgba(239,234,225,.66) 0,rgba(239,234,225,.84) 42%,rgba(239,234,225,.93) 100%)}
  :root[data-theme="dark"] .mast{--st-veil:linear-gradient(180deg,rgba(15,13,11,.62) 0,rgba(15,13,11,.82) 45%,rgba(15,13,11,.92) 100%)}}

.mast-foot{display:grid;grid-template-columns:1fr;gap:1.25rem;padding:1.2rem 0 0;border-top:3px solid var(--st-rule)}
.mast-foot p{margin:0;font:italic 400 clamp(1.15rem,1rem + .8vw,1.6rem)/1.3 var(--f-display);max-width:38ch;text-wrap:balance}
.mast-stats{display:flex;gap:clamp(1.1rem,2.4vw,2rem);margin:0}
.mast-stats div{display:flex;flex-direction:column-reverse;gap:.45rem}
.mast-stats dt{font:500 .7rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--st-ink-2)}
.mast-stats dd{margin:0;min-height:2.6rem;display:flex;align-items:center;font:700 1.9rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.stat-flap{font-size:1.45rem;gap:3px}
.stat-flap b{width:1.02em;height:1.5em;background:var(--st-tile);color:var(--st-tile-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.stat-flap s{display:grid;place-items:end center;width:.32em;text-decoration:none;font:700 1em/1 var(--f-retro);color:var(--st-ink-2);padding-bottom:.18em}
.mast-stats div:nth-child(2) .stat-flap b{background:var(--acc);color:var(--on-acc)}
@media(min-width:760px){.mast-foot{grid-template-columns:7fr 5fr;align-items:end}.mast-stats{justify-content:flex-end}}
@media(max-width:400px){.stat-flap{font-size:1.2rem}}

/* Laufband „Neu in den Charts" (Bauchbinde) */
.ticker{position:relative;display:flex;align-items:stretch;min-height:46px;background:var(--acc);color:var(--on-acc);font:italic 800 .95rem/1 var(--f-retro);text-transform:uppercase;letter-spacing:.06em;overflow:hidden}
.ticker-k{flex:none;display:flex;align-items:center;gap:.55rem;padding:0 1.1rem 0 max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));background:var(--ink);color:var(--paper);position:relative;z-index:2;white-space:nowrap}
:root[data-theme="dark"] .ticker-k{background:#050403;color:#F3ECE0}
.ticker-k::after{content:"";position:absolute;right:-14px;top:0;bottom:0;width:15px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}
.ticker-k i{width:8px;height:8px;border-radius:50%;background:var(--acc)}
@media(prefers-reduced-motion:no-preference){.ticker-k i{animation:pulse 1.4s ease-in-out infinite}}
.ticker-win{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 40px),transparent)}
.ticker-run{display:flex;list-style:none;margin:0;padding:0 0 0 1.75rem;white-space:nowrap;width:max-content}
.ticker-run li{display:inline-flex;align-items:center;gap:.6rem;padding-right:2.4rem}
.ticker-run li::after{content:"✦";margin-left:1.8rem;font-style:normal;font-size:.7em;opacity:.6}
.ticker-run li.ticker-wait::after{content:none}
.tk-r{font:600 .68rem var(--f-mono);font-style:normal;letter-spacing:.14em}
.tk-m{font:700 .68rem var(--f-mono);font-style:normal;padding:.28rem .4rem;border:1.5px solid currentColor;border-radius:3px}
.tk-new{background:var(--on-acc);color:var(--acc);border-color:var(--on-acc)}
.ticker-run .dup{display:none}
@media(prefers-reduced-motion:no-preference){
  .ticker.is-run .ticker-run .dup{display:inline-flex}
  .ticker.is-run .ticker-run{animation:tick var(--tk-dur,40s) linear infinite}
  .ticker.is-run:hover .ticker-run,.ticker.is-run:focus-within .ticker-run{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){.ticker-win{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
@keyframes tick{to{transform:translateX(-50%)}}
@media(max-width:600px){.ticker{font-size:.85rem;min-height:42px}.ticker-k{padding-right:.8rem;font-size:.78rem}}

/* ─── Fallblatt-Ziffern ─── */
.flap{display:inline-flex;gap:2px}
.flap b{position:relative;display:grid;place-items:center;width:1.05em;height:1.42em;border-radius:.12em;background:var(--board-2);color:var(--board-ink);font:italic 800 1em/1 var(--f-retro);font-variant-numeric:tabular-nums;overflow:hidden}
.flap b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.flap.hot b{background:var(--acc);color:var(--on-acc)}
.flap b.in{animation:flip .35s var(--ease) both}
@keyframes flip{from{transform:rotateX(90deg);opacity:.2}to{transform:none;opacity:1}}

/* ─── Bewegungen ─── */
.mv{display:inline-flex;align-items:center;justify-content:center;gap:.2em;min-width:2.4rem;font:700 .7rem/1 var(--f-mono);letter-spacing:.06em;white-space:nowrap}
.mv-up{color:var(--acc-text)}
.mv-down{color:var(--ink-3)}
.mv-same{color:var(--ink-3)}
.mv-new{background:var(--acc);color:var(--on-acc);padding:.3rem .45rem;border-radius:3px;font-family:var(--f-retro);font-style:italic;font-weight:800;font-size:.78rem;letter-spacing:.08em;min-width:0}
.mv-none{color:var(--ink-3)}
.board .mv-up{color:var(--acc)}
.board .mv-down,.board .mv-same,.board .mv-none{color:var(--board-ink-2)}

/* ─── Nr. 1 + Tafel ─── */
.show{padding-top:clamp(2.5rem,5vw,4rem)}
.show-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem)}
@media(min-width:980px){.show-grid{grid-template-columns:5fr 7fr;align-items:center}}
.no1{min-width:0}
.no1-sleeve{position:relative;isolation:isolate;max-width:520px}
.no1-cover{position:relative;z-index:2;width:84%;aspect-ratio:1;background:var(--paper-3) center/cover;box-shadow:0 30px 60px -28px rgba(0,0,0,.5)}
.no1-rank{position:absolute;z-index:3;left:-.06em;bottom:-.18em;font:italic 800 clamp(7rem,14vw,12rem)/.8 var(--f-retro);letter-spacing:-.05em;color:var(--paper);-webkit-text-stroke:2px var(--ink);text-shadow:6px 6px 0 var(--acc);pointer-events:none}
.no1-body{margin-top:1.75rem}
.kick{font:600 .72rem/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc-text)}
.no1-title{margin:.6rem 0 0;font:700 clamp(2.2rem,4.2vw,4rem)/1.02 var(--f-display);letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.no1-tags{margin:.9rem 0 0;font:italic 400 clamp(1.05rem,1rem + .3vw,1.25rem)/1.4 var(--f-display);color:var(--ink-2);max-width:42ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.no1-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1rem;font:500 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.no1-meta b{color:var(--ink)}
.no1-acts{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:1.75rem}

.board{background:var(--board);color:var(--board-ink);border-radius:6px;padding:clamp(1rem,2vw,1.5rem);box-shadow:0 30px 60px -30px rgba(0,0,0,.55);position:relative;overflow:hidden;min-width:0}
:root[data-theme="dark"] .board{border:1px solid var(--board-line)}
.board::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 4px)}
.board-head{display:flex;align-items:center;gap:1rem;padding-bottom:.9rem;border-bottom:2px solid var(--acc);position:relative}
.board-t{font:italic 800 clamp(1.4rem,2.4vw,2.1rem)/1 var(--f-retro);text-transform:uppercase;letter-spacing:.02em}
.board-t em{font-style:italic;font-weight:500;color:var(--board-ink-2)}
.board-wk{margin-left:auto;font:600 .7rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--board-ink-2);text-align:right}
.board-lamps{display:flex;gap:5px}
.board-lamps i{width:9px;height:9px;border-radius:50%;background:var(--acc);animation:lamp 1.6s steps(1) infinite}
.board-lamps i:nth-child(2){animation-delay:.53s}.board-lamps i:nth-child(3){animation-delay:1.06s}
@keyframes lamp{50%{opacity:.18}}
.board-list{list-style:none;margin:0;padding:0;position:relative}
.board-row{display:grid;grid-template-columns:auto 3rem minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:.55rem .25rem;border-bottom:1px solid var(--board-line);cursor:pointer;border-radius:3px;transition:background-color .18s}
.board-row:hover,.board-row:focus-visible{background:rgba(255,255,255,.05)}
.board-row.playing{background:rgba(255,90,42,.14)}
.board-row .flap{font-size:clamp(1.25rem,2vw,1.6rem)}
.board-row:nth-child(-n+3) .flap b{background:var(--acc);color:var(--on-acc)}
.board-tt{min-width:0}
.board-tt .t{display:block;font:italic 700 clamp(1.05rem,1.6vw,1.4rem)/1.1 var(--f-retro);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-tt .a{display:block;margin-top:.15rem;font:500 .66rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--board-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-l{font:700 .82rem var(--f-mono);font-variant-numeric:tabular-nums;color:var(--board-ink);text-align:right;white-space:nowrap}
.board-l small{display:block;font-size:.62rem;color:var(--board-ink-2);font-weight:500;letter-spacing:.08em}
.board-foot{display:flex;justify-content:space-between;align-items:center;min-height:48px;margin-top:.6rem;font:600 .72rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--board-ink-2)}
.board-foot:hover{color:var(--acc)}
@media(max-width:420px){.board-row{grid-template-columns:auto 2.6rem minmax(0,1fr);gap:.6rem}.board-l{display:none}}
/* Studio-Licht: Spot hinter der Nr.-1-Hülle, Banderole, Lauflicht-Birnen an der Tafel */
.no1-sleeve::before{content:"";position:absolute;z-index:-1;left:-14%;top:-16%;width:128%;height:132%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 30%,transparent),color-mix(in srgb,var(--acc) 8%,transparent) 62%,transparent)}
.no1-sleeve::after{content:"";position:absolute;z-index:-1;left:4%;right:12%;bottom:-6%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);pointer-events:none}
.no1-band{position:absolute;z-index:4;top:1.1rem;left:-.6rem;display:flex;align-items:center;gap:.55rem;padding:.5rem .85rem .45rem .9rem;background:var(--acc);color:var(--on-acc);font:italic 800 .95rem/1 var(--f-retro);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.no1-band::before{content:"";position:absolute;left:0;bottom:-.6rem;border-style:solid;border-width:0 .6rem .6rem 0;border-color:transparent color-mix(in srgb,var(--acc) 55%,#000) transparent transparent}
.no1-band small{font:600 .62rem var(--f-mono);font-style:normal;letter-spacing:.14em;padding-left:.55rem;border-left:1px solid rgba(0,0,0,.35)}
.board{padding-top:calc(clamp(1rem,2vw,1.5rem) + 12px)}
.board::after{content:"";position:absolute;left:14px;right:14px;top:9px;height:8px;pointer-events:none;
  background:radial-gradient(circle,#FFD2A8 0 1.6px,rgba(255,120,60,.55) 2.2px,transparent 3.6px) 0 50%/16px 8px repeat-x;opacity:.9}
@media(prefers-reduced-motion:no-preference){.board::after{animation:chase 1.4s steps(2) infinite}}
@keyframes chase{to{background-position:16px 50%}}
.board-row:nth-child(-n+3){box-shadow:inset 3px 0 0 var(--acc)}
.board-row:nth-child(1) .board-tt .t{font-size:clamp(1.2rem,1.9vw,1.65rem)}
.flap b::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));pointer-events:none}

/* ─── Section-Köpfe ─── */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;border-top:1px solid var(--line-strong);padding-top:.9rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.eyebrow{font:600 .72rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc-text)}
.sec-head h2{margin:.5rem 0 0;font:700 clamp(2.2rem,5vw,4.4rem)/1 var(--f-display);letter-spacing:-.035em}
.sec-head h2 em{font-weight:400}
.sec-acts{display:flex;flex-wrap:wrap;gap:.75rem}
.ext{font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--ink)}
.ext:hover{color:var(--acc-text);border-color:var(--acc)}

/* ─── TOP 100 Liste ─── */
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:-.5rem 0 1.5rem;font:500 .7rem/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.legend .mv{min-width:0;margin-right:.25rem}
.legend-vw{color:var(--ink-3)}
.chart{list-style:none;margin:0;padding:0;border-top:3px solid var(--line-strong)}
.chart-headrow{display:none}
/* Mobil: Platz | Cover | Titel+Meta | Play */
.crow{display:grid;grid-template-columns:3.2rem 60px minmax(0,1fr) 44px;grid-template-areas:"rank cover title play" "rank cover meta play";align-items:center;column-gap:.85rem;row-gap:.15rem;padding:.7rem 0;border-bottom:1px solid var(--line);position:relative}
.crow .c-rank{grid-area:rank;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.crow .c-rank .flap{font-size:1.15rem}
.crow .c-rank .mv{min-width:0;font-size:.62rem}
.crow .c-rank .mv-new{font-size:.66rem;padding:.2rem .35rem}
.crow .c-vw,.crow .c-move,.crow .c-wk,.crow .c-likes,.crow .c-plays,.crow .c-dur,.crow .c-acts{display:none}
.crow .c-cover{grid-area:cover;position:relative;width:52px;height:52px;background:var(--paper-3) center/cover}
.crow .c-cover::before{content:"";position:absolute;z-index:-1;top:4%;left:16%;width:92%;height:92%;border-radius:50%;background:radial-gradient(circle,var(--acc) 0 16%,var(--disc) 17%);transition:transform .3s var(--ease)}
.crow{isolation:isolate}
.crow.playing .c-cover::before{transform:translateX(14%)}
.crow .c-title{grid-area:title;min-width:0}
.crow .c-title a,.crow .c-title span.t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font:700 1.05rem/1.2 var(--f-display);letter-spacing:-.01em;overflow:hidden;text-wrap:balance}
@media(min-width:860px){.crow .c-title a,.crow .c-title span.t{display:block;white-space:nowrap;text-overflow:ellipsis}}
.crow .c-title a:hover{color:var(--acc-text)}
.crow .c-tags{display:none}
.crow .c-meta{grid-area:meta;font:500 .66rem/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .c-meta b{color:var(--ink);font-weight:600}
.crow .c-play{grid-area:play}
.c-playbtn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;cursor:pointer;transition:transform .18s var(--ease),background-color .18s,color .18s}
.c-playbtn svg{width:16px;height:16px;fill:currentColor}
.c-playbtn .i-pause{display:none}
.c-playbtn:hover{background:var(--ink);color:var(--paper)}
.crow.playing .c-playbtn{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.crow.playing:not(.is-paused) .c-playbtn .i-play{display:none}
.crow.playing:not(.is-paused) .c-playbtn .i-pause{display:block}
.crow.playing{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 10%,transparent),transparent 70%)}
.crow.top3 .c-title a,.crow.top3 .c-title span.t{font-size:1.25rem}
.crow.top3 .c-rank .flap b{background:var(--acc);color:var(--on-acc)}
.crow .flap b{background:var(--ink);color:var(--paper)}
:root[data-theme="dark"] .crow .flap b{background:var(--paper-3);color:var(--ink)}
:root[data-theme="dark"] .crow.top3 .flap b{background:var(--acc);color:var(--on-acc)}
.chart-div{list-style:none;display:flex;align-items:center;gap:1rem;padding:1.6rem 0 .6rem;font:italic 800 1rem/1 var(--f-retro);text-transform:uppercase;letter-spacing:.1em;color:var(--acc-text)}
.chart-div::after{content:"";flex:1;height:2px;background:var(--acc)}
.crow.is-offline .c-cover::after{content:"⇩";position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--on-acc);font-size:.65rem;font-weight:700}
.crow.is-unavail{opacity:.35}
.chart-note{margin:1.25rem 0 0;font:500 .7rem/1.6 var(--f-mono);letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}

@media(min-width:860px){
    .chart-headrow{display:grid;grid-template-columns:4.4rem 4rem 2.6rem 64px minmax(0,1fr) 3rem 5.2rem 5rem 3.6rem 9.5rem;column-gap:1rem;padding:0 0 .6rem;font:600 .64rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .chart-headrow span:nth-child(n+6){text-align:right}
  .crow{grid-template-columns:4.4rem 4rem 2.6rem 64px minmax(0,1fr) 3rem 5.2rem 5rem 3.6rem 9.5rem;grid-template-areas:"rank move vw cover title wk likes plays dur acts";column-gap:1rem;padding:.5rem 0}
  .crow .c-rank{flex-direction:row}
  .crow .c-rank .mv{display:none}
  .crow .c-rank .flap{font-size:1.5rem}
  .crow .c-move{grid-area:move;display:flex}
  .crow .c-vw{grid-area:vw;display:block;font:600 .8rem var(--f-mono);color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums}
  .crow .c-cover{width:48px;height:48px}
  .crow .c-tags{display:block;margin-top:.2rem;font:400 .76rem/1.4 var(--f-mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crow .c-meta,.crow .c-play{display:none}
  .crow .c-wk,.crow .c-likes,.crow .c-plays,.crow .c-dur{display:block;text-align:right;font:600 .82rem var(--f-mono);font-variant-numeric:tabular-nums}
  .crow .c-wk,.crow .c-dur{color:var(--ink-2);font-weight:500}
  .crow .c-likes small{display:block;font-size:.62rem;color:var(--acc-text);font-weight:600}
  .crow .c-acts{grid-area:acts;display:flex;justify-content:flex-end;align-items:center;gap:.35rem}
  .crow.top3{padding:.9rem 0}
  .crow.top3 .c-title a,.crow.top3 .c-title span.t{font-size:1.55rem;letter-spacing:-.02em}
  .crow.top3 .c-cover{width:64px;height:64px}
  .crow.top3 .c-rank .flap{font-size:2rem}
}
.c-mini{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 .4rem;border:0;background:none;cursor:pointer;font:600 .64rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.c-mini:hover{color:var(--acc-text)}
.c-mini.done{color:var(--acc-text)}

/* ─── APP · Offline-Ausgabe (orange Band, aus Vorschlag B) ─── */
#app{margin-top:var(--section-py);background:var(--acc);color:var(--on-acc)}
#app .app-in{max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,5vw,4rem) var(--gutter);display:grid;grid-template-columns:1fr;gap:1.5rem 3rem}
@media(min-width:900px){#app .app-in{grid-template-columns:5fr 7fr;align-items:end}}
#app .app-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:600 .72rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
#app h2{margin:.6rem 0 0;font:700 clamp(2.2rem,4.5vw,4rem)/1 var(--f-display);letter-spacing:-.035em}
#app h2 em{font-weight:400}
.app-net.off{text-decoration:line-through}
.app-row{display:flex;gap:.75rem;flex-wrap:wrap}
.app-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:0 1.4rem;border-radius:999px;border:1.5px solid var(--on-acc);background:transparent;color:var(--on-acc);font:600 .76rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:transform .18s var(--ease)}
.app-btn:hover:not(:disabled){transform:translateY(-1px)}
.app-btn:disabled{opacity:.45;cursor:not-allowed}
.app-main{background:var(--on-acc);color:var(--acc)}
.app-ghost{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.app-bar{height:6px;background:rgba(0,0,0,.18);margin-top:1rem;border-radius:3px;overflow:hidden}
.app-bar i{display:block;height:100%;width:0;background:var(--on-acc);transition:width .3s}
.app-info{margin:.9rem 0 0;font:500 .8rem/1.5 var(--f-mono);min-height:1.5em}
.app-ios{margin:.8rem 0 0;font:400 .95rem/1.5 var(--f-sans);border-left:3px solid var(--on-acc);padding:.2rem 0 .2rem .9rem}

/* ─── NEU GEPRESST · Plattenhüllen (aus Vorschlag B) ─── */
.suno-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem) var(--gap)}
@media(min-width:760px){.suno-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1120px){.suno-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.suno-card{position:relative;display:flex;flex-direction:column;min-width:0}
.suno-sleeve{position:relative;isolation:isolate}
.suno-cover{position:relative;z-index:2;width:86%;aspect-ratio:1/1;background-color:var(--paper-3);background-size:cover;background-position:center;box-shadow:0 1px 0 rgba(0,0,0,.08),6px 8px 0 -2px var(--paper-2);transition:transform .35s var(--ease)}
.suno-disc,.no1-disc{position:absolute;z-index:1;top:2%;left:7.4%;height:96%;aspect-ratio:1/1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,var(--paper) 0 2.2%,transparent 2.4%),
    radial-gradient(circle at 50% 50%,var(--acc) 0 17%,transparent 17.3%),
    repeating-radial-gradient(circle at 50% 50%,var(--disc) 0 1.1%,var(--disc-groove) 1.2%,var(--disc) 1.5%),
    var(--disc);
  transition:transform .35s var(--ease)}
.no1-disc{top:2%;left:6%}
.suno-disc::after,.no1-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 12%,rgba(255,255,255,.10) 16%,transparent 22% 62%,rgba(255,255,255,.07) 66%,transparent 72%)}
@media(hover:hover){.suno-card:hover .suno-disc{transform:translateX(12%)}.no1-sleeve:hover .no1-disc{transform:translateX(14%)}}
.suno-card.playing .suno-disc,.no1.playing .no1-disc{transform:translateX(14%)}
.suno-card.playing .suno-disc::after,.no1.playing .no1-disc::after{animation:spin 1.8s linear infinite}
.suno-card.is-paused .suno-disc::after,.no1.is-paused .no1-disc::after,.suno-card.is-paused .suno-play .eq b{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.suno-play{position:absolute;left:.7rem;bottom:.7rem;z-index:3;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--acc);color:var(--on-acc);cursor:pointer;border:0;transition:transform .18s var(--ease),opacity .18s;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.suno-play svg{width:22px;height:22px}
.suno-play .eq{display:none;gap:3px;align-items:flex-end;height:18px}
.suno-play .eq b{width:3px;background:currentColor;height:40%;animation:eq .9s ease-in-out infinite}
.suno-play .eq b:nth-child(2){animation-delay:-.3s}.suno-play .eq b:nth-child(3){animation-delay:-.6s}
@keyframes eq{50%{height:100%}}
.suno-card.playing .suno-play svg{display:none}
.suno-card.playing .suno-play .eq{display:flex}
@media(hover:hover){.suno-play{opacity:0;transform:translateY(4px)}.suno-card:hover .suno-play,.suno-card.playing .suno-play,.suno-play:focus-visible{opacity:1;transform:none}}
.suno-card.playing .suno-cover{outline:3px solid var(--acc);outline-offset:3px}
.suno-body{padding-top:1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.suno-cat{display:flex;align-items:center;gap:.6rem;font:600 .68rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.suno-cat::after{content:"";flex:1;height:1px;background:var(--line);order:1}
.suno-cat .dur{order:2;color:var(--ink)}
.suno-cat .pl{color:var(--acc-text)}
.suno-title{margin:0;font:700 clamp(1.05rem,.95rem + .45vw,1.35rem)/1.15 var(--f-display);letter-spacing:-.015em;text-wrap:balance;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.suno-title a:hover{color:var(--acc-text)}
.suno-tags{font:400 .78rem/1.45 var(--f-mono);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suno-meta{display:flex;gap:1rem;font:500 .68rem var(--f-mono);letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.suno-acts{display:flex;flex-wrap:wrap;gap:0 1rem;margin-top:auto;padding-top:.2rem}
.suno-dl{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0;background:none;border:0;cursor:pointer;font:600 .7rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.suno-dl:hover{color:var(--acc-text)}
.suno-dl .u{border-bottom:1px solid currentColor;padding-bottom:1px}
.suno-seite .pip{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:dlBlink var(--bspeed,1s) steps(1,end) var(--bdelay,0ms) infinite}
@keyframes dlBlink{50%{opacity:.15}}
.suno-off.done{color:var(--acc-text)}
.suno-card.is-unavail{opacity:.35;pointer-events:none}
.suno-card.is-offline .suno-cover::after{content:"offline";position:absolute;right:.5rem;top:.5rem;font:700 .6rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-acc);background:var(--acc);padding:.3rem .5rem;border-radius:99px}
.suno-card.is-feature{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:1.5rem;padding-bottom:clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--line-strong)}
.suno-card.is-feature .suno-sleeve{max-width:560px}
.suno-card.is-feature .suno-body{padding-top:0;justify-content:center;gap:.9rem}
.suno-card.is-feature .suno-title{font-size:clamp(2.2rem,5.5vw,5.4rem);line-height:1;letter-spacing:-.04em;-webkit-line-clamp:3}
.suno-card.is-feature .suno-tags{font:italic 400 clamp(1.05rem,1rem + .4vw,1.3rem)/1.45 var(--f-display);color:var(--ink-2);-webkit-line-clamp:4;max-width:46ch;text-wrap:pretty}
.suno-card.is-feature .suno-play{width:72px;height:72px;left:1rem;bottom:1rem;opacity:1;transform:none}
.suno-card.is-feature .suno-play svg{width:30px;height:30px}
@media(min-width:760px){.suno-card.is-feature{grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:center}}

/* ─── VIDEO · Titelgeschichte (aus Vorschlag B) ─── */
#hero{position:relative}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,3vw,3rem)}
@media(min-width:960px){.hero-grid{grid-template-columns:7fr 5fr;align-items:center}}
.hero-fig{margin:0;min-width:0}
.hero-frame{position:relative;aspect-ratio:4/3;background:var(--ink);overflow:hidden}
#hero.playing .hero-frame{aspect-ratio:16/9}
.hero-stage,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;transition:opacity .4s ease}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.18) brightness(1.04);transition:filter .4s ease}
.hero-tone{position:absolute;inset:0;background:var(--acc);mix-blend-mode:multiply;pointer-events:none;transition:opacity .4s}
.hero-frame:hover .hero-tone{opacity:0}
.hero-frame:hover .hero-slide img{filter:none}
.hero-num{position:absolute;left:-.04em;bottom:-.2em;z-index:2;font:italic 800 clamp(6rem,16vw,15rem)/1 var(--f-retro);letter-spacing:-.06em;color:var(--paper);pointer-events:none}
#hero.playing .hero-num,#hero.playing .hero-tone{opacity:0}
#hero iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5;background:#000}
.hero-cap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.6rem;border-bottom:1px solid var(--line);font:500 .72rem/1.4 var(--f-mono);letter-spacing:.08em;color:var(--ink-2)}
.hero-cap #hero-cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-arrows{display:flex;flex:none}
.hero-nav{min-height:44px;min-width:44px;padding:0 .6rem;background:none;border:0;cursor:pointer;font:600 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.hero-nav:hover{color:var(--acc-text)}
.hero-ui{min-width:0}
.hero-kick{font:600 .72rem/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc-text);margin-bottom:1rem}
.hero-title{margin:0;font:700 clamp(2.2rem,4.2vw,4.2rem)/1.02 var(--f-display);letter-spacing:-.035em;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
.hero-title.in{animation:tIn .35s var(--ease) both}
@keyframes tIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-sub{margin:1rem 0 0;font:italic 400 clamp(1.1rem,1rem + .5vw,1.35rem)/1.35 var(--f-display);color:var(--ink-2);text-wrap:pretty;min-height:1.35em}
.hero-cta{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;margin-top:2rem}
.hero-dots{margin-top:2.25rem;border-top:1px solid var(--line-strong)}
.hero-dot{display:grid;grid-template-columns:2.6rem 1fr;align-items:baseline;gap:.5rem;width:100%;min-height:48px;padding:.7rem 0;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;position:relative;color:var(--ink-2)}
.hero-dot .n{font:600 .72rem var(--f-mono);letter-spacing:.1em}
.hero-dot .t{font:400 1.02rem/1.25 var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-dot:hover,.hero-dot.on{color:var(--ink)}
.hero-dot.on .n{color:var(--acc-text)}
.hero-dot.on .t{font-weight:700}
.hero-dot i{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.hero-dot i::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left}
.hero-dot.on i::after{transform:scaleX(1)}
.hero-dots.run .hero-dot.on i::after{transform:scaleX(0);animation:fill 9s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.hero-dot:nth-child(n+6){display:none}
@media(max-width:959px){.hero-dots{margin-top:1.75rem}.hero-dot:nth-child(n+4){display:none}}

/* ─── TWITCH · Auf Sendung ─── */
.live{margin-top:var(--section-py);padding-bottom:var(--section-py);background:var(--paper-2);transition:background-color .3s}
.live .sec-head{border-top:0}
.live-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,3rem)}
@media(min-width:980px){.live-grid{grid-template-columns:8fr 4fr;align-items:center}.live-grid.chat-on{grid-template-columns:7fr 3fr}.live-grid.chat-on .live-side{grid-column:1/-1;grid-row:2}.live-grid.chat-on .tv-chat{grid-column:2;grid-row:1}}
.tv{min-width:0}
.tv-screen{position:relative;aspect-ratio:16/9;background:var(--board);border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--board-line),0 30px 60px -30px rgba(0,0,0,.55)}
.testcard{position:absolute;inset:0;display:grid;place-items:center}
.tc-grid{position:absolute;inset:0;background-image:linear-gradient(var(--board-line) 1px,transparent 1px),linear-gradient(90deg,var(--board-line) 1px,transparent 1px);background-size:6.25% 11.111%;background-position:center}
.tc-circle{position:relative;height:84%;aspect-ratio:1;border-radius:50%;border:2px solid var(--board-ink-2);overflow:hidden;display:grid;align-items:center;background:radial-gradient(circle,transparent 0 30%,rgba(255,255,255,.03) 30% 31%,transparent 31%)}
.tc-circle::before,.tc-circle::after{content:"";position:absolute;background:var(--board-ink-2);opacity:.6}
.tc-circle::before{left:50%;top:0;bottom:0;width:1px}
.tc-circle::after{top:50%;left:0;right:0;height:1px}
.tc-bars{display:grid;grid-template-columns:repeat(6,1fr);height:34%;position:relative;z-index:1}
.tc-bars i:nth-child(1){background:var(--board-ink)}.tc-bars i:nth-child(2){background:#CFC7B9}.tc-bars i:nth-child(3){background:var(--acc)}
.tc-bars i:nth-child(4){background:#B3300A}.tc-bars i:nth-child(5){background:#4A443C}.tc-bars i:nth-child(6){background:#0B0A08}
.tv-plate{position:absolute;z-index:2;left:50%;bottom:9%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.65rem 1.4rem .6rem;background:var(--board);color:var(--board-ink);border:2px solid var(--board-ink);white-space:nowrap}
.tv-plate-k{font:italic 800 clamp(1.1rem,2.4vw,2rem)/1 var(--f-retro);text-transform:uppercase;letter-spacing:.06em}
.tv-plate-t{font:600 .64rem var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--board-ink-2)}
.tv-embed{position:absolute;inset:0;z-index:4}
.tv-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:14px;box-shadow:inset 0 0 80px rgba(0,0,0,.45);background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 2px,transparent 2px 4px)}
.live-grid.embedded .tv-screen::after,.live-grid.embedded .tv-plate{display:none}
.tv-cap{display:flex;align-items:center;gap:1rem;padding-top:.7rem;font:500 .72rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.onair{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border:1.5px solid var(--ink-3);border-radius:4px;font:italic 800 .82rem/1 var(--f-retro);letter-spacing:.14em;color:var(--ink-3)}
.onair i{width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
[data-state="live"] .onair{border-color:var(--acc);background:var(--acc);color:var(--on-acc)}
[data-state="live"] .onair i{background:var(--on-acc);animation:pulse 1.1s ease-in-out infinite}
.live-side{min-width:0}
.live-status{display:inline-flex;align-items:center;gap:.5rem;font:600 .72rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.live-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
[data-state="live"] .live-status{color:var(--acc-text)}
[data-state="live"] .live-status::before{background:var(--acc);animation:pulse 1.1s ease-in-out infinite}
.live-title{margin:.8rem 0 0;font:700 clamp(1.8rem,3vw,2.8rem)/1.05 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.live-text{margin:1rem 0 0;font:400 1.05rem/1.55 var(--f-sans);color:var(--ink-2);max-width:40ch;text-wrap:pretty}
.live-acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.live-consent{margin:1.1rem 0 0;font:400 .76rem/1.5 var(--f-mono);color:var(--ink-3);max-width:46ch}
.tv-chat{min-height:420px;border-radius:14px;overflow:hidden;background:var(--board);align-self:stretch;display:flex}
.tv-chat iframe{flex:1;width:100%;min-height:420px;border:0;display:block}

/* ─── Kolophon ─── */
.colo{border-top:3px solid var(--line-strong);padding:1.2rem 0 calc(2rem + env(safe-area-inset-bottom));font:500 .7rem/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.colo .wrap{display:flex;justify-content:space-between;gap:.5rem 1.5rem;flex-wrap:wrap}
.colo a{border-bottom:1px solid var(--line-strong)}
body.has-player .colo{padding-bottom:calc(var(--np-h) + 2rem + env(safe-area-inset-bottom))}

/* ─── PLAYER ─── */
.np{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);color:var(--paper);padding-bottom:env(safe-area-inset-bottom);transform:translateY(105%);transition:transform .3s var(--ease);box-shadow:0 -20px 40px -24px rgba(0,0,0,.5)}
:root[data-theme="dark"] .np{background:#1C1916;color:var(--ink);border-top:1px solid var(--line)}
.np.on{transform:none}
.np-in{max-width:var(--max);margin:0 auto;padding:.7rem var(--gutter);display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"art txt ctrl" "seek seek q";align-items:center;gap:.4rem .9rem}
.np-art{grid-area:art;position:relative;width:72px;height:56px}
.np-art img{position:relative;z-index:2;width:56px;height:56px;object-fit:cover;display:block;background:#333}
.np-art .vin{position:absolute;z-index:1;top:3px;left:12px;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,#EFEAE1 0 3%,var(--acc) 4% 20%,#000 21%);background-image:radial-gradient(circle,#EFEAE1 0 3%,var(--acc) 4% 20%,transparent 21%),repeating-radial-gradient(circle,#000 0 2px,#1a1a1a 2px 3px);transition:transform .35s var(--ease)}
.np.playing .np-art .vin{transform:translateX(14px);animation:spin 1.8s linear infinite}
.np-txt{grid-area:txt;min-width:0}
.np-k{font:600 .6rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-t{font:700 1.02rem/1.25 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-ctrl{grid-area:ctrl;display:flex;align-items:center;gap:.15rem}
.np-ic{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;opacity:.85;font-size:1.15rem;transition:opacity .18s,background-color .18s,color .18s}
.np-ic:hover{opacity:1;background:rgba(127,127,127,.18)}
.np-ic svg{width:20px;height:20px;fill:currentColor}
.np-ic[aria-pressed="true"],.np-ic[aria-expanded="true"]{color:var(--acc);opacity:1}
.np-ic .rep1{display:none;position:absolute;right:7px;top:8px;font:700 .55rem var(--f-mono)}
.np-ic[data-mode="one"] .rep1{display:block}
.np-play{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:0;background:var(--acc);color:var(--on-acc);cursor:pointer;margin:0 .2rem;transition:transform .18s var(--ease)}
.np-play:hover{transform:scale(1.04)}
.np-play svg{width:22px;height:22px;fill:currentColor}
.np-play .i-pause{display:none}
.np.playing .np-play .i-pause{display:block}
.np.playing .np-play .i-play{display:none}
.np-seek{grid-area:seek;display:flex;align-items:center;gap:.7rem;min-width:0}
.np-time{font:500 .7rem var(--f-mono);opacity:.75;font-variant-numeric:tabular-nums;flex:none;min-width:2.8em;text-align:center}
.np-range{position:relative;flex:1;height:28px;display:flex;align-items:center}
.np-buf{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;width:0;background:rgba(127,127,127,.45);border-radius:2px;pointer-events:none}
.np input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;position:relative;--p:0%}
.np input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--acc) var(--p),rgba(127,127,127,.3) var(--p))}
.np input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(127,127,127,.3)}
.np input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--acc)}
.np input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--paper);border:2px solid var(--acc);transition:transform .15s}
:root[data-theme="dark"] .np input[type=range]::-webkit-slider-thumb{background:var(--ink)}
.np input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--acc)}
.np input[type=range]:hover::-webkit-slider-thumb,.np input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}
.np-seek .np-range input{position:relative;z-index:1}
.np-seek input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--acc) var(--p),transparent var(--p))}
.np-range::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:rgba(127,127,127,.25)}
.np-vol{display:none;align-items:center;gap:.2rem}
.np-vol input{width:96px}
.np-vol .w{opacity:1}
.np.muted .np-vol .w{opacity:0}
.np.muted #np-mute{color:var(--acc)}
.np-opt{display:none}
.np-x{font-size:1rem}
.np-x{display:none}
.np-in>[data-act="queue"]{grid-area:q}
@media(min-width:720px){
  .np-in{grid-template-columns:72px minmax(140px,1.1fr) auto minmax(180px,2fr) auto auto auto;grid-template-areas:"art txt ctrl seek vol q x";gap:.9rem}
  .np-x{grid-area:x;display:grid}
  .np-opt{display:grid}
  .np-vol{grid-area:vol}
  :root{--np-h:80px}
}
@media(min-width:1100px){.np-vol{display:flex}}
@media(max-width:719px){.np-in{padding-top:.55rem;padding-bottom:.3rem;column-gap:.6rem}.np-in>[data-act="queue"]{justify-self:end}:root{--np-h:112px}}
.np-queue{max-width:var(--max);margin:0 auto;padding:1rem var(--gutter) .5rem;border-bottom:1px solid rgba(127,127,127,.25);max-height:min(60vh,520px);display:flex;flex-direction:column}
.npq-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;font:600 .66rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;opacity:.9;padding-bottom:.5rem}
.npq-modes{display:flex;gap:.4rem}
.npq-tg{min-height:40px;padding:0 .9rem;border-radius:99px;border:1px solid rgba(127,127,127,.5);background:none;color:inherit;font:600 .64rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.npq-tg[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.npq-list{list-style:none;margin:0;padding:0;overflow:auto;flex:1;overscroll-behavior:contain}
.npq-list li button{display:grid;grid-template-columns:2.4rem 36px minmax(0,1fr) auto;align-items:center;gap:.75rem;width:100%;min-height:48px;padding:.3rem .4rem;border:0;background:none;color:inherit;text-align:left;cursor:pointer;border-radius:4px}
.npq-list li button:hover{background:rgba(127,127,127,.15)}
.npq-list li.cur button{background:rgba(255,90,42,.18)}
.npq-list .r{font:italic 800 1rem var(--f-retro);color:var(--acc)}
.npq-list img{width:36px;height:36px;object-fit:cover;display:block;background:#333}
.npq-list .t{font:600 .95rem/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npq-list .d{font:500 .7rem var(--f-mono);opacity:.7}
.npq-keys{margin:.6rem 0 .2rem;font:500 .66rem/1.9 var(--f-mono);opacity:.75}
.npq-keys kbd{display:inline-block;min-width:1.6em;padding:0 .35em;margin:0 .1em;border:1px solid rgba(127,127,127,.5);border-radius:3px;font:inherit;text-align:center}
@media(hover:none){.npq-keys{display:none}}

.toast{position:fixed;left:50%;bottom:calc(var(--np-h) + 1rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;max-width:calc(100% - 2rem);padding:.8rem 1.2rem;background:var(--acc);color:var(--on-acc);font:600 .76rem/1.4 var(--f-mono);letter-spacing:.06em;border-radius:6px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}

/* ─── Reduced Motion ─── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .suno-seite .pip,.mast-line .cur::after,.brand .dot,.board-lamps i,.nav-live,.onair i,.live-status::before{animation:none!important}
}