/* DAU TO PRO // NERD RADIO – Cyberpunk-Ghettoblaster.
   Aufbau (Grafikpaket „nerd-radio-pack“ + Blender):
   - nerd-radio/base.webp: 3D-Gehäuse aus Blender, Front mit der Paket-Grafik, alle Leuchten aus
   - .nr-face: Frontebene (Seitenverhältnis des Pakets, Größe ≈ sichtbare Größe), per matrix3d exakt auf die schräge Front gelegt.
     Darin liegen die Lichtebenen (nur Ringe und Pixelpilze leuchten, Helligkeit folgt der Musik),
     das Display, die Tasten (Paket-Grafiken normal / hover / gedrückt) und der Lautstärkeregler.
   Positionen stehen in nerd-radio/layout.css (generiert von tools/nerd-radio/build_boombox.py).
   Schriftgrößen im Display in cqw (1 % der Frontbreite), damit alles als Ganzes skaliert.
   Platzierung: im Kopf der Trainingszone (Desktop rechts daneben ohne Platz im Seitenfluss, mobil unter der Überschrift).
   Das Gerät scrollt normal mit und ist während der Modulauswahl nicht mehr sichtbar.
   Modulraster und Modulstapel bleiben unverändert. */

/* ---------- Platzierung ----------
   Im Kopf der Trainingszone: Desktop rechts neben Überschrift und Einleitung, ragt nach oben in den freien Raum
   unter den Hero-Figuren und nimmt keinen Platz im Seitenfluss ein (die Trainingszone rutscht nicht nach unten).
   Mobil steht es direkt unter der Überschrift. Es scrollt normal mit, die Modulauswahl darunter bleibt frei. */
.catalog-section .section-shell{position:relative}
.nr-stage{position:relative;z-index:2;width:min(100%,600px);margin:-6px auto 26px}
.nr-stage__inner,.nr-rail{width:100%}
.nr-pin{position:relative;padding:0 0 3%}
@media(min-width:861px){
  .catalog-section{--nr-w:clamp(400px,43vw,566px)}   /* max.: bleibt rechts neben der Textspalte des Hero */
  .nr-stage{position:absolute;right:32px;top:calc(var(--nr-w) * -.27);width:var(--nr-w);margin:0}   /* 32px = Innenabstand von .section-shell */
  .catalog-section .section-heading{padding-right:calc(var(--nr-w) + 16px);min-height:calc(var(--nr-w) * .2)}
  .catalog-section .section-heading .section-count{position:absolute;right:32px;top:calc(var(--nr-w) * .2)}
}

/* ---------- Gerät ---------- */
.nr-device{
  --cyan:#22dcf5;--cyan-soft:#22dcf566;--gold:#ffb22a;--gold-soft:#ffa21e77;
  position:relative;container-type:inline-size;width:100%;
  color:#e9f9ff;font-family:ui-monospace,"Cascadia Mono",SFMono-Regular,Consolas,monospace;
}
.nr-chassis{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.nr-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Schräge Front: Frontebene per matrix3d auf die Gehäusefront gelegt (Größe aus layout.css) ---------- */
.nr-face{position:absolute;left:0;top:0;z-index:3;transform-origin:0 0;pointer-events:none;container-type:size;visibility:hidden}
.nr-face.is-placed{visibility:visible}
.nr-face>*{pointer-events:auto}

/* ---------- Echtes Licht: Ringe (Gold) und Pilze (Cyan); Deckkraft = Lichtstärke ---------- */
.nr-face>.nr-glow{position:absolute;inset:0;pointer-events:none;opacity:.06}
.nr-glow img,.nr-cone img{position:absolute;display:block;user-select:none}   /* Lage je Lautsprecher aus layout.css */
.nr-cone [data-radio-light]{opacity:.06}
/* Kantenlicht addiert sich zum Gehäuse (Licht, keine Farbe) */
.nr-glow--gold-edge,.nr-cone [data-radio-light=cyan-edge]{mix-blend-mode:screen}
@supports (mix-blend-mode:plus-lighter){.nr-glow--gold-edge,.nr-cone [data-radio-light=cyan-edge]{mix-blend-mode:plus-lighter}}
/* Ein- und Ausschalten weich, beim Abspielen folgt die Helligkeit direkt der Musik */
.nr-device:not([data-state=playing]) :is(.nr-glow,.nr-cone [data-radio-light]){transition:opacity .8s ease-out}

/* ---------- Membranen: pumpen mit dem Bass (Skalierung um die Pilzmitte), im Rand beschnitten ---------- */
.nr-face>.nr-cone{position:absolute;pointer-events:none;clip-path:ellipse(50% 50%)}
.nr-cone__grille{left:0;top:0;width:100%;height:100%}   /* steht still, Löcher durchsichtig */
.nr-cone__body{position:absolute;inset:0;transform-origin:var(--mx) var(--my);--nr-push:0}
.nr-device:not([data-state=playing]) .nr-cone__body{transition:transform .5s ease-out}
.nr-cone__img{left:0;top:0;width:100%;height:100%}
/* Licht und Schatten der Membran: nach vorn gedrückt heller in der Mitte, dunkler zum Rand hin */
.nr-cone__shade{position:absolute;inset:0;border-radius:50%;opacity:var(--nr-push);
  background:radial-gradient(circle at var(--mx) var(--my),#ffffff2e 0,#ffffff0a 30%,transparent 50%,#00000070 100%)}
/* ---------- RGB-Licht wie bei Party-Boomboxen ----------
   --nr-hue wandert fließend (bei Bassschlägen schneller), --nr-led / --nr-mesh = Helligkeit aus nerd-radio.js.
   Farbverlauf über drei benachbarte Farbtöne, damit es satt wirkt statt bunt durcheinander.
   Farbbereich Türkis – Blau – Lila – Pink (kein Gelb/Grün neben dem Gold der Ringe). */
.nr-device{--nr-hue:190;--nr-led:0;--nr-mesh:0;
  --nr-c1:hsl(var(--nr-hue) 95% 55%);--nr-c2:hsl(calc(var(--nr-hue) + 30) 95% 58%);--nr-c3:hsl(calc(var(--nr-hue) - 30) 95% 50%)}
/* RGB-Licht auf der Membran (Mitte am hellsten); durch das stehende Gitter darüber nur in den Löchern sichtbar */
.nr-cone__mesh{position:absolute;inset:0;opacity:var(--nr-mesh);mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx) var(--my),var(--nr-c2) 0,var(--nr-c1) 50%,var(--nr-c3) 100%);
}
/* LED-Ring um den Tieftöner: einzelne LEDs plus weicher Schein, der über Rand und Gehäuse strahlt */
.nr-face>.nr-led{position:absolute;pointer-events:none;opacity:var(--nr-led);mix-blend-mode:screen}
.nr-led::before,.nr-led::after{content:"";position:absolute;border-radius:50%;
  background:conic-gradient(from calc(var(--nr-hue) * 1deg),var(--nr-c1),var(--nr-c2),var(--nr-c3),var(--nr-c2),var(--nr-c1))}
.nr-led::after{inset:0;
  -webkit-mask:radial-gradient(closest-side,transparent 88.5%,#000 90%,#000 97%,transparent 98.5%),repeating-conic-gradient(#000 0 7deg,transparent 7deg 11.25deg);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(closest-side,transparent 88.5%,#000 90%,#000 97%,transparent 98.5%),repeating-conic-gradient(#000 0 7deg,transparent 7deg 11.25deg);
  mask-composite:intersect}
.nr-led::before{inset:-9%;filter:blur(1.1cqw);opacity:.85;
  -webkit-mask:radial-gradient(closest-side,transparent 70%,#000 82%,#000 90%,transparent 100%);
  mask:radial-gradient(closest-side,transparent 70%,#000 82%,#000 90%,transparent 100%)}
@supports (mix-blend-mode:plus-lighter){.nr-face>.nr-led,.nr-cone__mesh{mix-blend-mode:plus-lighter}}
.nr-device:not([data-state=playing]) :is(.nr-led,.nr-cone__mesh){transition:opacity .8s ease-out}

/* ---------- Display ---------- */
.nr-display{position:absolute;padding:0}
.nr-display__glass{position:relative;height:100%;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.85fr);column-gap:2.4%;
  padding:2.4% 4% 2.2%;border-radius:.8cqw;
  background:radial-gradient(120% 90% at 25% 0%,#0d3b48e6 0,#04161df2 55%,#020b0f 100%);
  box-shadow:inset 0 0 1.8cqw #22dcf544,inset 0 .3cqw .6cqw #000c}
.nr-display__glass::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(162deg,#ffffff17 0 16%,transparent 32%),repeating-linear-gradient(0deg,#ffffff07 0 .035cqw,transparent .035cqw .1cqw)}
.nr-display__viz{grid-column:2;grid-row:1/span 2;position:relative;min-height:0;margin:.5cqw 0 .6cqw}
.nr-display__viz canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nr-display__track{grid-column:1;grid-row:1/span 2;display:flex;align-items:center;gap:3%;min-width:0;margin:0;font-weight:700;font-size:2.45cqw;line-height:1.2;color:#c4f9ff;text-shadow:0 0 .6cqw #22dcf588}
.nr-display__titlebox{flex:1;min-width:0;overflow:hidden}
.nr-marquee{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nr-device[data-state=playing] .is-long .nr-marquee{overflow:visible;text-overflow:clip;width:max-content;animation:nr-marquee var(--nr-dur,8s) ease-in-out infinite alternate}
@keyframes nr-marquee{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(var(--nr-shift,0))}}
.nr-display__icon{flex:none;width:2.2cqw;height:2.2cqw;background:var(--cyan);clip-path:polygon(0 0,100% 50%,0 100%);filter:drop-shadow(0 0 .4cqw var(--cyan))}
.nr-device[data-state=paused] .nr-display__icon{clip-path:none;background:linear-gradient(90deg,var(--gold) 0 36%,transparent 36% 64%,var(--gold) 64%);filter:drop-shadow(0 0 .4cqw var(--gold));animation:nr-blink 1.1s steps(2,jump-none) infinite}
.nr-device[data-state=stopped] .nr-display__icon{clip-path:inset(8%)}
@keyframes nr-blink{50%{opacity:.25}}
.nr-display__meta{grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:2.4%;min-width:0;border-top:.05cqw solid #22dcf530;padding-top:.5cqw;font-weight:700;font-size:2.15cqw;line-height:1;color:#9cf3ff}
.nr-display__time{flex:none;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.nr-display__bar{position:relative;flex:1;height:.7cqw;min-width:0;border-radius:1cqw;background:#0b3540;box-shadow:inset 0 0 .3cqw #000}
.nr-display__bar i{position:absolute;inset:0 auto 0 0;width:var(--nr-pos,0%);border-radius:inherit;background:linear-gradient(90deg,#0fb8d4,var(--cyan));box-shadow:0 0 .8cqw var(--cyan)}
.nr-display__bar i::after{content:"";position:absolute;right:-1cqw;top:50%;width:2cqw;height:2cqw;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle,#ffe7a3 0 30%,#ffb22a 45%,#7a4a08 75%);box-shadow:0 0 .9cqw var(--gold)}
/* Unsichtbarer nativer Regler: Klick, Ziehen, Touch und Tastatur, ohne die LCD-Grafik zu verändern. */
.nr-display__bar input{position:absolute;z-index:1;left:0;top:50%;width:100%;height:3.3cqw;min-height:12px;transform:translateY(-50%);margin:0;opacity:0;cursor:pointer;touch-action:pan-y}
.nr-display__bar input:disabled{cursor:default}
.nr-display__bar:has(input:focus-visible){outline:.18cqw solid var(--gold);outline-offset:.48cqw}
.nr-display__ind{flex:none;width:3cqw;height:3cqw;fill:currentColor;color:#d7f6fb;opacity:.85;transition:color .2s,filter .2s}
.nr-display__ind--loop{color:#6b7a80}
.nr-display__ind.is-lit{color:var(--gold);opacity:1;filter:drop-shadow(0 0 .6cqw var(--gold))}

/* Playlist erscheint im Display selbst */
.nr-playlist{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#22dcf5 transparent;padding:1% 4%;
  background:#03141a}
.nr-playlist[hidden]{display:none}
.nr-playlist__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
/* Playlist-Editor: Nummer = abspielen, Titel anklicken = an/aus (Haken); abgewählte Titel sind durchgestrichen und werden übersprungen. */
.nr-playlist__row{display:flex;align-items:center;gap:.5cqw;border-radius:.6cqw}
.nr-playlist__play,.nr-playlist__item{border:.05cqw solid transparent;border-radius:.6cqw;background:transparent;cursor:pointer;
  font:700 1.6cqw/1.05 ui-monospace,"Cascadia Mono",Consolas,monospace;white-space:nowrap}
.nr-playlist__play{flex:none;min-width:4cqw;padding:0 .6cqw;color:var(--gold);font-weight:800;text-align:center}
.nr-playlist__item{display:flex;align-items:center;gap:3%;flex:1;min-width:0;padding:0 1cqw;color:#bff7ff;text-align:left}
.nr-playlist__item span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nr-playlist__item small{flex:none;margin-left:auto;font-size:.8em;color:#5fb6c4}
.nr-playlist__check{flex:none;position:relative;width:1.5cqw;height:1.5cqw;border:.2cqw solid #22dcf5;border-radius:.4cqw;box-sizing:border-box}
.nr-playlist__row[data-on=true] .nr-playlist__check{background:#22dcf5}
.nr-playlist__row[data-on=true] .nr-playlist__check:after{content:"";position:absolute;left:28%;top:6%;width:30%;height:58%;border:solid #03141a;border-width:0 .28cqw .28cqw 0;transform:rotate(40deg)}
.nr-playlist__row[data-on=false] .nr-playlist__item{color:#5fb6c4}
.nr-playlist__row[data-on=false] .nr-playlist__item span{text-decoration:line-through;opacity:.7}
.nr-playlist__row[data-on=false] .nr-playlist__check{border-color:#3d7e8a}
.nr-playlist__play:hover,.nr-playlist__item:hover{border-color:#22dcf588;background:#0b2f3a}
.nr-playlist__play:focus-visible,.nr-playlist__item:focus-visible{outline:.2cqw solid #22dcf5;outline-offset:.1cqw}
.nr-playlist__row:has(.nr-playlist__play[aria-current=true]){background:#0e3b47;box-shadow:0 0 .8cqw #22dcf555}
.nr-playlist__row:has(.nr-playlist__play[aria-current=true]) .nr-playlist__item{color:#fff}
.nr-playlist__row:has(.nr-playlist__play[aria-current=true]) .nr-playlist__play{color:#ffd16a}
@media(prefers-reduced-motion:no-preference){.nr-playlist__row.is-denied{animation:nr-denied .32s ease}}
@keyframes nr-denied{20%,60%{transform:translateX(-.8cqw)}40%,80%{transform:translateX(.8cqw)}}

/* Mausrad wechselt den Titel nur direkt auf der Titelzeile; dort wird der Mauszeiger zum Mausrad-Symbol (nur mit mindestens zwei aktiven Titeln). */
.nr-device.has-wheel .nr-display__track{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%2304181d' stroke='%2304181d' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M14 1l5 5h-10z'/%3E%3Cpath d='M14 27l5-5h-10z'/%3E%3Crect x='9' y='8' width='10' height='12' rx='5'/%3E%3C/g%3E%3Cpath d='M14 2.5l3.6 3.6h-7.2z' fill='%2322dcf5'/%3E%3Cpath d='M14 25.5l3.6-3.6h-7.2z' fill='%2322dcf5'/%3E%3Crect x='9' y='8' width='10' height='12' rx='5' fill='%230b2f3a' stroke='%2322dcf5' stroke-width='1.6'/%3E%3Crect x='13' y='11' width='2' height='4' rx='1' fill='%23ffd16a'/%3E%3C/svg%3E") 14 14,ns-resize}

/* ---------- Tasten: Paket-Grafiken je Zustand (normal / hover / gedrückt); Bilder und Positionen in layout.css ---------- */
.nr-transport{display:contents}
.nr-key{position:absolute;margin:0;padding:0;border:0;cursor:pointer;background:transparent center/100% 100% no-repeat;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 .22cqw .3cqw #000c)}   /* Tasten werfen Schatten auf die Front */
.nr-key:focus-visible{outline:.21cqw solid #fff;outline-offset:-.48cqw;border-radius:.82cqw}

/* ---------- Lautstärke: Schiene, Füllung und Knopf aus dem Paket, darüber ein unsichtbarer Schieberegler ---------- */
.nr-volume{position:absolute;--nr-vol:35%}
.nr-volume img{position:absolute;pointer-events:none;user-select:none}
.nr-volume__track,.nr-volume__fill{left:0;top:0;width:100%;height:100%}
.nr-volume__fill{clip-path:inset(0 calc(100% - 3.4% - var(--nr-vol) * .94) 0 0)}
.nr-volume__knob{top:50%;left:calc(3.4% + var(--nr-vol) * .94);height:112%;aspect-ratio:1;transform:translate(-50%,-50%)}
.nr-volume input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.nr-volume:has(input:focus-visible){outline:.21cqw solid #fff;outline-offset:.21cqw;border-radius:.69cqw}

/* Fehlerhinweis (z. B. Audio vom Browser blockiert) */
.nr-device.has-error .nr-display__track{color:#ffb4a0;text-shadow:0 0 .6cqw #ff5a3a}

/* ---------- Reduzierte Bewegung ---------- */
@media(prefers-reduced-motion:reduce){
  .nr-display__ind{transition:none}
  .nr-device[data-state=paused] .nr-display__icon,.nr-device[data-state=playing] .is-long .nr-marquee{animation:none}
  .nr-device[data-state=playing] .is-long .nr-marquee{overflow:hidden;text-overflow:ellipsis;width:auto}
}