/* ═══════════════════════════════════════════════════════════
   GROBTON — dark techno one-pager
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:        #08080a;
  --bg-2:      #0d0d10;
  --surface:   #121215;
  --surface-2: #17171b;
  --line:      #232329;
  --line-2:    #2e2e36;
  --text:      #ececef;
  --muted:     #83838f;
  --dim:       #55555f;
  --acc:       #d4ff3f;   /* acid */
  --acc-dim:   #94b32c;
  --player-h:  76px;

  --font: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:80px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-transform:lowercase;   /* die ganze seite wird klein geschrieben */
}
body.has-player{ padding-bottom:var(--player-h); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--acc); color:#000; }

:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }

.wrap{ width:min(1180px, 100% - 3rem); margin-inline:auto; }

/* film grain / scanlines ---------------------------------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:repeating-linear-gradient(
      0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay; opacity:.6;
}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.1rem clamp(1.5rem, 4vw, 3rem);
  background:linear-gradient(to bottom, rgba(8,8,10,.97) 30%, rgba(8,8,10,.75) 70%, rgba(8,8,10,0));
}
.nav__logo{
  font-family:var(--mono); font-weight:500; font-size:.95rem;
  letter-spacing:.22em; text-transform:lowercase;
}
.blink{ color:var(--acc); animation:blink 1.2s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.nav__links{
  display:flex; flex-wrap:wrap; justify-content:flex-end;
  gap:clamp(.8rem,2.4vw,2rem); row-gap:.3rem;
}
.nav__links a{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.18em;
  text-transform:lowercase; color:var(--muted);
  padding:.35rem 0; position:relative; transition:color .25s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--acc); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }

/* Sprachumschalter */
.nav__links a.nav__lang{
  border:1px solid var(--line-2); border-radius:2px;
  padding:.2rem .5rem; color:var(--dim);
  transition:color .25s, border-color .25s;
}
.nav__links a.nav__lang::after{ display:none; }
.nav__links a.nav__lang:hover{ color:var(--acc); border-color:var(--acc); }

/* ── HERO ────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem 0 5rem; overflow:hidden;
}
.hero__glow{
  position:absolute; z-index:0;
  width:min(105vw,1100px); aspect-ratio:1;
  left:50%; top:44%; translate:-50% -50%;
  background:radial-gradient(circle at 50% 50%,
      rgba(212,255,63,.11) 0%, rgba(212,255,63,.035) 30%, transparent 64%);
  animation:pulse 7s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }

.hero .wrap{ position:relative; z-index:2; }

.hero__title{
  margin:0; font-weight:700;
  font-size:clamp(2.6rem, 9vw, 7rem);
  line-height:.82; letter-spacing:-.045em; text-transform:lowercase;
}
.hero__title-alt{
  -webkit-text-stroke:1.5px var(--dim);
  color:transparent;
}
.hero__sub{
  margin:2rem 0 2.75rem; max-width:34ch;
  color:var(--muted); font-size:clamp(1rem,1.6vw,1.15rem);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
/* die drei sprungknöpfe gleich breit, damit sie als satz lesen */
.hero__actions .btn:not(.btn--primary){ min-width:8.2rem; justify-content:center; }

.hero__scroll{
  position:absolute; z-index:2; bottom:2.2rem; left:50%; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.28em;
  text-transform:lowercase; color:var(--dim);
}
.hero__scroll i{ width:1px; height:38px; background:linear-gradient(var(--dim), transparent); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.6rem; border:1px solid var(--line-2);
  background:transparent; color:var(--text); cursor:pointer;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em;
  text-transform:lowercase; border-radius:2px;
  transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover{ border-color:var(--acc); color:var(--acc); transform:translateY(-2px); }
.btn--primary{ background:var(--acc); border-color:var(--acc); color:#000; font-weight:500; }
.btn--primary:hover{ background:#e6ff70; border-color:#e6ff70; color:#000; }
.btn__icon{ font-size:.7em; }

/* ── TRENNBAND ───────────────────────────────────────────── */
/* Wellenform, wie eine DAW sie über eine Audiodatei legt: um die
   Mittelachse gespiegelte Balken. Gezeichnet in js/player.js. */
.rule{
  position:relative; z-index:2; height:74px; overflow:hidden;
  border-block:1px solid var(--line); background:var(--bg-2);
}
.rule canvas{
  display:block; width:100%; height:100%;
  /* an den rändern auslaufen lassen, damit es wie ein ausschnitt wirkt */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* ── SECTIONS ────────────────────────────────────────────── */
.section{ padding:clamp(5rem,11vw,9rem) 0; position:relative; z-index:2; }
.section--split{ border-top:1px solid var(--line); background:var(--bg-2); }
.section--line{ border-top:1px solid var(--line); }

.section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:2.5rem;
}
.section__title{
  margin:0 0 .4rem; font-size:clamp(1.9rem,4.5vw,3rem); font-weight:700;
  letter-spacing:-.03em; text-transform:lowercase;
}
.section__meta{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; color:var(--dim); }

/* ── TRACK LIST ──────────────────────────────────────────── */
.tracks{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }

.track{
  display:grid; align-items:center; gap:1.25rem;
  grid-template-columns:2.6rem 48px 1fr auto auto;
  padding:1.05rem .9rem; border-bottom:1px solid var(--line);
  position:relative; cursor:pointer;
  transition:background .25s, padding-left .3s var(--ease);
}
.track::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--acc); transform:scaleY(0); transform-origin:bottom;
  transition:transform .3s var(--ease);
}
.track:hover{ background:var(--surface); padding-left:1.4rem; }
.track:hover::before{ transform:scaleY(1); }

.track__index{ display:flex; align-items:center; height:14px; }
.track__num{ font-family:var(--mono); font-size:.8rem; color:var(--dim); }

/* Cover mit darüberliegendem Play-Knopf */
.track__art{
  position:relative; width:48px; height:48px; border-radius:2px;
  overflow:hidden; background:var(--surface-2); border:1px solid var(--line);
}
.track__art::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, var(--line-2) 0 2px, transparent 2px 7px);
}
.track__art img{ position:relative; width:100%; height:100%; object-fit:cover; }

.track__play{
  position:absolute; inset:0; display:grid; place-items:center;
  border:0; padding:0; background:rgba(6,6,8,.6);
  color:var(--text); cursor:pointer; opacity:0;
  transition:opacity .22s, color .22s;
}
.track__play svg{ width:15px; height:15px; fill:currentColor; }
.track__play .i-pause{ display:none; }
.track:hover .track__play,
.track__play:focus-visible{ opacity:1; }
/* Touch-Geräte kennen kein :hover — Knopf dort dauerhaft zeigen */
@media (hover:none){
  .track__play{ opacity:1; background:rgba(6,6,8,.42); }
}

.track__info{ min-width:0; }
.track__title{
  display:block; font-size:1.12rem; font-weight:500; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track__tags{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:lowercase; color:var(--dim);
}
.track__badge{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:lowercase; color:var(--muted);
  border:1px solid var(--line); border-radius:2px; padding:.2rem .55rem;
}
.track__badge:empty{ border:0; padding:0; }
.track__dur{ font-family:var(--mono); font-size:.8rem; color:var(--muted); min-width:4.4em; text-align:right; }

/* active / playing state */
.track.is-active{ background:var(--surface); }
.track.is-active::before{ transform:scaleY(1); }
.track.is-active .track__title,
.track.is-active .track__num{ color:var(--acc); }
.track.is-active .track__play{ opacity:1; color:var(--acc); background:rgba(6,6,8,.4); }
.track.is-playing .track__play .i-play{ display:none; }
.track.is-playing .track__play .i-pause{ display:block; }

.track.is-error{ opacity:.72; }
.track.is-error.is-active{ opacity:1; }
.track.is-error .track__tags::after{ content:' · platzhalter'; color:#c8a34a; }

/* animated bars on the active row */
.track__bars{ display:none; gap:2px; align-items:flex-end; height:14px; }
.track.is-playing .track__bars{ display:flex; }
.track.is-playing .track__num{ display:none; }
.track__bars span{ width:2px; background:var(--acc); animation:eq .9s ease-in-out infinite; }
.track__bars span:nth-child(2){ animation-delay:.15s; }
.track__bars span:nth-child(3){ animation-delay:.3s; }
.track__bars span:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:20% } 50%{ height:100% } }

.tracks__empty{
  padding:2.4rem .9rem; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  color:var(--dim);
}

.tracks__hint{
  margin-top:1.6rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:lowercase; color:var(--dim);
}

/* ── RELEASES ────────────────────────────────────────────── */
.releases{
  display:grid; gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
}

.release{
  display:grid; grid-template-columns:88px 1fr; gap:1.4rem;
  padding-top:1.6rem; border-top:1px solid var(--line);
}

.release__cover{
  position:relative; width:88px; height:88px; border-radius:2px;
  overflow:hidden; background:var(--surface-2); border:1px solid var(--line);
}
.release__cover::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, var(--line-2) 0 2px, transparent 2px 7px);
}
.release__cover img{ position:relative; width:100%; height:100%; object-fit:cover; }

.release__body{ min-width:0; }
.release__title{
  margin:0; font-size:1.25rem; font-weight:500; letter-spacing:-.015em;
}
.release__title a:hover{ color:var(--acc); }
.release__meta{
  margin:.3rem 0 0; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.16em; color:var(--dim);
}
.release__pending{
  margin:1.1rem 0 0; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; color:var(--dim);
}

.release__tracks{ list-style:none; margin:1.2rem 0 0; padding:0; }
.release__track{
  display:grid; grid-template-columns:2rem 1fr auto; gap:.8rem;
  align-items:baseline; padding:.5rem 0; border-top:1px solid var(--line);
}
.release__no{ font-family:var(--mono); font-size:.72rem; color:var(--dim); }
.release__name{ font-size:.95rem; color:var(--muted); min-width:0; }
.release__artist{ font-weight:500; color:var(--muted); }
.release__note{
  display:block; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.1em; color:var(--dim); margin-top:.15rem;
}
.release__dur{ font-family:var(--mono); font-size:.72rem; color:var(--dim); }

/* eigene produktionen hervorheben */
.release__track.is-own .release__no{ color:var(--acc); }
.release__track.is-own .release__name{ color:var(--text); }

/* zeilen mit hinterlegter datei sind anklickbar */
.release__track.is-playable{ cursor:pointer; }
.release__track.is-playable:hover .release__name{ color:var(--acc); }
.release__track.is-playable.is-active .release__name{ color:var(--acc); }

/* nummer weicht dem play-symbol, sobald die zeile spielbar ist */
.release__no{ position:relative; display:block; }
.release__icon{
  position:absolute; left:0; top:.15em; width:11px; height:11px;
  fill:var(--acc); display:none;
}
.release__track.is-playable:hover .release__digits,
.release__track.is-active .release__digits{ visibility:hidden; }
.release__track.is-playable:hover .i-play,
.release__track.is-active .i-play{ display:block; }
.release__track.is-active.is-playing .i-play{ display:none; }
.release__track.is-active.is-playing .i-pause{ display:block; }

@media (max-width:520px){
  .release{ grid-template-columns:64px 1fr; gap:1rem; }
  .release__cover{ width:64px; height:64px; }
}

/* ── PROJEKTE ────────────────────────────────────────────── */
/* wie eine release-karte, aber mit beschreibungstext und
   grösserem cover — das projekt trägt eine eigene geschichte */
.projects{ display:grid; gap:clamp(2.5rem,5vw,4rem); }

.project{
  display:grid; grid-template-columns:120px minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.4rem);
  padding-top:1.8rem; border-top:1px solid var(--line);
}

.project__cover{
  position:relative; width:120px; height:120px; border-radius:2px;
  overflow:hidden; background:var(--surface-2); border:1px solid var(--line);
}
.project__cover::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, var(--line-2) 0 2px, transparent 2px 7px);
}
.project__cover img{ position:relative; width:100%; height:100%; object-fit:cover; }

.project__title{
  margin:0; font-size:clamp(1.4rem,3vw,1.9rem); font-weight:700;
  letter-spacing:-.02em;
}
.project__meta{
  margin:.35rem 0 0; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; color:var(--acc); opacity:.85;
}
.project__text{
  margin:1.1rem 0 0; max-width:56ch; color:var(--muted);
}
.project .release__tracks{ margin-top:1.8rem; }

@media (max-width:560px){
  .project{ grid-template-columns:1fr; gap:1.2rem; }
  .project__cover{ width:96px; height:96px; }
}

/* ── ABOUT ───────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(2rem,6vw,5rem); }
.prose p{ margin:0 0 1.2rem; color:var(--muted); max-width:58ch; }
.facts{ list-style:none; margin:2.4rem 0 0; padding:0; border-top:1px solid var(--line); }
.facts li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
}
.facts span{ color:var(--dim); text-transform:lowercase; font-size:.7rem; letter-spacing:.2em; }
.facts b{ font-weight:500; }

/* referenzen: clubs, radios, labels */
.refs__title{
  margin:2.6rem 0 1rem; font-family:var(--mono); font-weight:400;
  font-size:.7rem; letter-spacing:.24em; color:var(--dim);
}
.refs{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:0 2.5rem;
}
.refs li{
  position:relative; padding:.48rem 0 .48rem 1.15rem;
  font-size:.92rem; color:var(--muted);
  border-bottom:1px solid var(--line);
}
.refs li::before{
  content:''; position:absolute; left:0; top:1.05em;
  width:6px; height:1px; background:var(--acc); opacity:.65;
}

/* ── CONTACT ─────────────────────────────────────────────── */
.contact__mail{
  display:inline-block; font-size:clamp(1.4rem,4.5vw,2.6rem); font-weight:500;
  letter-spacing:-.02em; border-bottom:1px solid var(--line-2); padding-bottom:.15rem;
  transition:color .25s, border-color .25s;
}
.contact__mail:hover{ color:var(--acc); border-color:var(--acc); }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--line); padding:2.2rem 0; position:relative; z-index:2; }
.footer__inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:lowercase; color:var(--dim);
}
.footer__note{ margin-right:-.16em; }

/* ── PLAYER BAR ──────────────────────────────────────────── */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:var(--player-h);
  background:#0b0b0e;
  border-top:1px solid var(--line);
  animation:up .45s var(--ease);
}
@keyframes up{ from{ transform:translateY(100%) } }
.player[hidden]{ display:none; }

.player__viz{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.26; pointer-events:none;
}

.player__seek{
  position:absolute; top:-3px; left:0; right:0; height:9px;
  cursor:pointer; z-index:3;
}
.player__seek::before{
  content:''; position:absolute; top:3px; left:0; right:0; height:3px; background:var(--line);
}
.player__buffered,
.player__progress{
  position:absolute; top:3px; left:0; height:3px; width:0;
}
.player__buffered{ background:var(--line-2); }
.player__progress{ background:var(--acc); }
.player__knob{
  position:absolute; top:0; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--acc); translate:-50% 0; opacity:0; transition:opacity .2s;
}
.player__seek:hover .player__knob,
.player__seek:focus-visible .player__knob{ opacity:1; }
.player__seek:hover .player__progress{ box-shadow:0 0 14px rgba(212,255,63,.5); }

.player__inner{
  position:relative; z-index:2; height:100%;
  display:grid; align-items:center; gap:clamp(.8rem,2.5vw,2rem);
  grid-template-columns:auto minmax(0,1fr) auto auto;
  padding:0 clamp(1rem,4vw,3rem);
}

.player__controls{ display:flex; align-items:center; gap:.35rem; }
.ctrl{
  width:38px; height:38px; display:grid; place-items:center; padding:0;
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  border-radius:50%; transition:color .2s, background .2s, transform .2s;
}
.ctrl svg{ width:19px; height:19px; fill:currentColor; }
.ctrl:hover{ color:var(--text); background:var(--surface-2); }
.ctrl--play{
  width:44px; height:44px; background:var(--acc); color:#000;
}
.ctrl--play svg{ width:17px; height:17px; }
.ctrl--play:hover{ background:#e6ff70; color:#000; transform:scale(1.06); }
.ctrl--sm{ width:32px; height:32px; }
.ctrl--sm svg{ width:17px; height:17px; }

.i-pause,
.player.is-playing .i-play{ display:none; }
.player.is-playing .i-pause{ display:block; }
.i-mute{ display:none; }
.player.is-muted .i-vol{ display:none; }
.player.is-muted .i-mute{ display:block; }

.player__now{ display:flex; align-items:center; gap:.85rem; min-width:0; }
.player__art{
  position:relative; flex:none; width:42px; height:42px; border-radius:2px;
  overflow:hidden; background:var(--surface-2); border:1px solid var(--line);
}
.player__art::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, var(--line-2) 0 2px, transparent 2px 7px);
}
.player__art img{ position:relative; width:100%; height:100%; object-fit:cover; display:block; }

.player__meta{ min-width:0; display:flex; flex-direction:column; }
.player__title{
  font-size:.95rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__sub{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:lowercase; color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__time{
  font-family:var(--mono); font-size:.74rem; color:var(--muted);
  display:flex; gap:.4rem; font-variant-numeric:tabular-nums;
}
.player__time .sep{ color:var(--dim); }

.player__vol{ display:flex; align-items:center; gap:.5rem; }
.vol{
  -webkit-appearance:none; appearance:none; width:84px; height:3px;
  background:var(--line-2); border-radius:2px; cursor:pointer;
}
.vol::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--text); transition:background .2s;
}
.vol:hover::-webkit-slider-thumb{ background:var(--acc); }
.vol::-moz-range-thumb{
  width:11px; height:11px; border:0; border-radius:50%; background:var(--text);
}
.vol:hover::-moz-range-thumb{ background:var(--acc); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  .player__vol{ display:none; }
}
@media (max-width:680px){
  .wrap{ width:min(1180px, 100% - 2.2rem); }
  .nav__links a{ font-size:.68rem; }
  .track{ grid-template-columns:2rem 44px 1fr auto; gap:.9rem; padding:.95rem .5rem; }
  .track__art{ width:44px; height:44px; }
  .track__badge{ display:none; }
  .track__title{ font-size:1rem; }
  .track__tags{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player__inner{ grid-template-columns:auto minmax(0,1fr) auto; }
  .player__time .sep,.player__time #t-dur{ display:none; }
}
/* Auf schmalen Schirmen passen Logo und sechs Links nicht in eine
   Zeile. Das Logo rückt darüber, die Links bleiben in einer Reihe
   und lassen sich seitlich wischen — so bleibt die Leiste flach. */
@media (max-width:620px){
  html{ scroll-padding-top:96px; }
  .nav{
    flex-direction:column; align-items:flex-start;
    gap:.45rem; padding:.8rem 0 .9rem 1.1rem;
    background:linear-gradient(to bottom, rgba(8,8,10,.98) 60%, rgba(8,8,10,0));
  }
  .nav__logo{ font-size:.8rem; letter-spacing:.14em; }
  .nav__links{
    width:100%; justify-content:flex-start;
    flex-wrap:nowrap; gap:1rem;
    overflow-x:auto; overscroll-behavior-x:contain;
    padding-right:1.1rem; scrollbar-width:none;
    /* rechts ausblenden als hinweis, dass es weitergeht */
    -webkit-mask-image:linear-gradient(to right, #000 88%, transparent);
            mask-image:linear-gradient(to right, #000 88%, transparent);
  }
  .nav__links::-webkit-scrollbar{ display:none; }
  .nav__links a{ font-size:.64rem; letter-spacing:.1em; white-space:nowrap; }
}
@media (max-width:420px){
  .track__dur{ display:none; }
  .track{ grid-template-columns:2rem 44px 1fr; }
  .player__art{ display:none; }
}

/* ── MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero__glow,.blink,.track__bars span{ animation:none; }
  *,*::before,*::after{ transition-duration:.01ms; }
}