/* RALLÜF: rustig, donker, de hoes doet het werk. Eén lettertype in twee gewichten, één accent uit de hoes. */
:root {
  --grond: #0E0E0D;
  --vlak: #1A1918;
  --vlak-2: #151615;
  --tekst: #EDEAE4;
  --tekst-lezen: #D9D5CE;
  --stil: #A39E96;
  --dim: #8F8B84;
  --lijn: rgba(237, 234, 228, 0.1);
  --rand: rgba(237, 234, 228, 0.2);
  --rand-sterk: rgba(237, 234, 228, 0.28);
  --accent: #34575A;
  --speler-grond: #192424;
  --radius: 6px;
  --nav-h: 72px;
  --mini-h: 64px;
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grond); color: var(--tekst); }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--stil); text-decoration: none; }
a:hover { color: var(--tekst); }
button { font-family: inherit; color: inherit; }
button, a { -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--tekst); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- indeling ---------- */
.schil { display: flex; min-height: 100vh; }
.zijbalk { display: none; }
.inhoud { flex: 1; min-width: 0; padding: 0 20px calc(var(--nav-h) + var(--mini-h) + 32px); }
.kop { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Logo en woord als één geheel: het logo is twee keer zo hoog als de hoofdletters (die zijn 0,7 em bij Russo One) en
   staat met zijn midden op het midden van de letters. Lijn 20: het svg-vak is 220 eenheden, de cirkel aan de buitenkant
   198, dus 2 x 0,7 x 220/198 = 1,556 em. Zo is de lijn van het logo ongeveer even dik als die van de letters. */
.merk { display: inline-flex; align-items: baseline; gap: 0.32em; color: var(--tekst); font-size: 28px; line-height: 1; }
.merk-logo { width: 1.556em; height: 1.556em; flex: none; position: relative; top: 0.428em; }
.merk .woordmerk { letter-spacing: 0.04em; }
.kop .merk { font-size: 24px; }
/* Het woordmerk: Russo One, alleen voor het woord RALLÜF (de rest is Inter Tight) */
.woordmerk { font-family: 'Russo One', 'Inter Tight', system-ui, sans-serif; font-weight: 400; letter-spacing: 0.06em; }
.kop-rechts { display: flex; align-items: center; gap: 8px; }
.pagina { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; padding-top: 4px; }

.taal { display: inline-flex; align-self: flex-start; height: 40px; border-radius: 20px; border: 1px solid var(--rand); padding: 3px; }
.taal button { width: 44px; border: 0; border-radius: 17px; background: transparent; color: var(--stil); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; }
.taal button[aria-pressed="true"] { background: var(--tekst); color: var(--grond); }

.onder-nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--vlak-2); border-top: 1px solid rgba(237,234,228,0.08); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); z-index: 20; }
.onder-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--stil); }
.onder-nav a[aria-current="page"] { color: var(--tekst); }

/* ---------- onderdelen ---------- */
.label { font-size: 12px; letter-spacing: 0.14em; color: var(--stil); text-transform: uppercase; }
.sectiekop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sectiekop h2 { font-size: 18px; font-weight: 600; }
.sectiekop a { font-size: 14px; }
.hoes { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--accent); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.hoes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hoes svg { width: 64%; height: 64%; }
.knop-rond { width: 64px; height: 64px; border-radius: 32px; background: var(--tekst); border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: var(--grond); }
.knop-rond.klein { width: 48px; height: 48px; }
.knop-rand { height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--rand-sterk); background: transparent; display: inline-flex; align-items: center; gap: 8px; color: var(--tekst); font-size: 14px; cursor: pointer; }
.knop-vol { height: 44px; padding: 0 20px; border-radius: 22px; border: 0; background: var(--tekst); color: var(--grond); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.knop-icoon { width: 44px; height: 44px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--tekst); border-radius: 22px; }
.chip { height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--rand); background: transparent; color: var(--tekst); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; }
.chip[aria-pressed="true"] { background: var(--tekst); color: var(--grond); border-color: var(--tekst); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Start */
.held { display: flex; flex-direction: column; gap: 18px; }
.held .hoes { width: 100%; max-width: none; margin: 0; }
/* Op de telefoon staan titel en de grote afspeelknop in de hoes, zoals in de speler */
@media (max-width: 959px) {
  .held { position: relative; gap: 0; }
  .held::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; border-radius: 0 0 var(--radius) var(--radius); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%); pointer-events: none; }
  .held-tekst { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 18px 20px 22px; align-items: flex-end; }
  .held-tekst .label { color: rgba(237,234,228,0.78); }
  .held-tekst a { color: rgba(237,234,228,0.85); }
  .held .knop-rond { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
  .held .knop-rond svg { width: 30px; height: 30px; }
}
.held-tekst { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.held-tekst > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.held h1 { font-size: 28px; line-height: 1.1; font-weight: 600; }
.held p.voorproef { display: none; }
.radio-kaart { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 10px; background: var(--vlak); }
.radio-kaart .rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.radio-kaart h2 { font-size: 18px; font-weight: 600; }
.radio-kaart p { font-size: 14px; color: var(--stil); margin-top: 4px; }
.raster-mappen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.raster-muziek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tegel { display: flex; flex-direction: column; gap: 10px; color: var(--tekst); }
.tegel .hoes svg { width: 58%; height: 58%; }
.tegel .hoes { align-items: flex-end; justify-content: flex-start; }
.tegel-tekst { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 13px; width: 100%; }
.tegel .hoes:has(img) .tegel-tekst { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.55)); padding-top: 36px; }
.tegel-titel { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--tekst); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tegel-sub { font-size: 13px; color: var(--tekst); }
.leeg { padding: 48px 0; color: var(--stil); font-size: 16px; line-height: 1.6; max-width: 520px; }

/* Nummer en map */
.terug { margin-left: -10px; }
.blok, .sectie { display: flex; flex-direction: column; gap: 14px; }
.blok h2 { font-size: 13px; letter-spacing: 0.14em; font-weight: 600; color: var(--stil); text-transform: uppercase; }
.leestekst { font-size: 17px; line-height: 1.6; color: var(--tekst-lezen); white-space: pre-line; max-width: 640px; }
.nummer-kop { display: flex; flex-direction: column; gap: 20px; }
.nummer-kop .hoes { width: 100%; max-width: 420px; }
.nummer-kop h1 { font-size: 30px; line-height: 1.1; font-weight: 600; }
.acties { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gegevens { margin: 0; border-bottom: 1px solid var(--lijn); display: grid; grid-template-columns: 1fr; column-gap: 48px; }
.gegevens div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--lijn); font-size: 14px; }
/* Info over de hele breedte: op de computer in twee kolommen */
@media (min-width: 960px) { .gegevens { grid-template-columns: 1fr 1fr; } .gegevens div { font-size: 15px; } }
.gegevens dt { color: var(--stil); }
.gegevens dd { margin: 0; text-align: right; }
.rijlijst { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.rij-item { display: flex; align-items: center; gap: 14px; color: var(--tekst); padding: 4px 0; background: none; border: 0; text-align: left; cursor: pointer; width: 100%; font-size: inherit; }
.rij-item .hoes { width: 48px; flex-shrink: 0; border-radius: 4px; }
.rij-item .hoes svg { display: none; }
.rij-item .tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rij-item .t1 { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rij-item .t2 { font-size: 13px; color: var(--stil); }
/* Het dansende icoontje bij het nummer dat speelt (zoals bij Apple). Staat het stil, dan liggen de streepjes laag. */
.eq { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; flex: none; color: var(--tekst); }
.eq i { display: block; width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(0.28); transition: transform .3s ease; }
.eq i:nth-child(2), .eq i:nth-child(4) { transform: scaleY(0.45); }
.aan-het-spelen .eq i { animation: eq-dans 0.9s ease-in-out infinite alternate; }
.aan-het-spelen .eq i:nth-child(1) { animation-duration: 0.82s; animation-delay: -0.3s; }
.aan-het-spelen .eq i:nth-child(2) { animation-duration: 0.64s; animation-delay: -0.5s; }
.aan-het-spelen .eq i:nth-child(3) { animation-duration: 0.95s; animation-delay: -0.1s; }
.aan-het-spelen .eq i:nth-child(4) { animation-duration: 0.72s; animation-delay: -0.6s; }
.aan-het-spelen .eq i:nth-child(5) { animation-duration: 0.88s; animation-delay: -0.2s; }
@keyframes eq-dans { 0% { transform: scaleY(0.22); } 50% { transform: scaleY(0.7); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .aan-het-spelen .eq i { animation: none; transform: scaleY(0.6); } }
.rij-item .eq, .map-nummer .eq { display: none; }
.rij-item.speelt .eq, .map-nummer.speelt .eq { display: inline-flex; margin-right: 4px; }
.map-nummer.speelt .play { display: none; }
.mini .hoes-plek { position: relative; display: block; flex-shrink: 0; }
.mini .hoes-plek .eq { position: absolute; inset: 0; margin: auto; justify-content: center; height: 18px; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.paneel-rij { display: flex; align-items: center; gap: 12px; min-width: 0; }
.paneel-rij .eq { height: 18px; }
.map-omslag { margin: 0 -20px; height: 360px; background: var(--accent); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.map-omslag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-omslag svg { width: 220px; height: 220px; }
.map-titel { display: flex; flex-direction: column; gap: 10px; }
.map-titel h1 { font-size: 34px; line-height: 1.05; font-weight: 600; }
.map-tekst { font-size: 18px; line-height: 1.6; color: var(--tekst-lezen); white-space: pre-line; max-width: 640px; }
.map-nummer { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; background: var(--vlak); color: var(--tekst); border: 0; width: 100%; max-width: 640px; text-align: left; cursor: pointer; font-size: inherit; }
.map-nummer .hoes { width: 56px; flex-shrink: 0; border-radius: 4px; }
.map-nummer .hoes svg { display: none; }
.map-nummer .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.map-nummer .play { width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--rand-sterk); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- mini-speler ----------
   Op de telefoon vast tegen het menu onderin, over de hele breedte, zoals bij Apple Music en Spotify: hoes, titel,
   vorige, afspelen en volgende; de voortgang als dunne lijn bovenaan. Op de computer een balk onderin zoals Roon. */
.mini { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); height: var(--mini-h); background: var(--vlak-2); border-top: 1px solid rgba(237,234,228,0.08); display: none; align-items: center; gap: 8px; padding: 0 8px 0 12px; z-index: 19; }
.mini.aan { display: flex; }
.mini .open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; height: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--tekst); }
.mini .hoes { width: 44px; border-radius: 4px; flex-shrink: 0; }
.mini .hoes svg { display: none; }
.mini .t1 { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .t2 { font-size: 13px; color: var(--stil); }
.mini .tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini .voortgang-spoor { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: rgba(237,234,228,0.1); pointer-events: none; }
.mini .voortgang { height: 100%; width: 0; background: var(--tekst); }
.mini .knoppen { display: flex; align-items: center; gap: 0; }
.mini .knop-icoon { width: 44px; height: 48px; }
.mini .mini-hoofd svg { width: 30px; height: 30px; }
.mini .alleen-groot { display: none !important; }
.inhoud { padding-bottom: calc(var(--nav-h) + var(--mini-h) + 32px + env(safe-area-inset-bottom)); }

/* ---------- nu aan het spelen ----------
   Zoals Apple Music, maar dan van RALLÜF: een wazige achtergrond uit de hoes zelf, een grote hoes die iets kleiner wordt
   bij pauze, een dikke balk met verstreken en resterende tijd, grote knoppen, onderin tekst, slaaptimer en wachtrij.
   Naar beneden vegen sluit de speler. Op de computer staan hoes en bediening naast elkaar, met volume. */
.speler { position: fixed; inset: 0; z-index: 40; display: none; overflow: hidden; background: var(--grond); color: var(--tekst); touch-action: pan-y; }
.speler.open { display: block; }
.speler.geveegd { animation: none !important; } /* opengeveegd: geen eigen animatie, hij volgt de vinger */
.mini { touch-action: none; }
.speler-achter { position: absolute; inset: -15%; background-color: var(--sp-kleur, #34575A); background-size: cover; background-position: center; filter: blur(60px) saturate(1.35) brightness(0.62); transform: scale(1.15); transition: background-color .6s ease; }
.speler-achter::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0.55) 100%); }
.speler-binnen { position: relative; height: 100%; display: flex; flex-direction: column; width: 100%; max-width: 480px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 6px) 26px calc(18px + env(safe-area-inset-bottom)); transition: transform .25s ease; will-change: transform; }
.speler-kop { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.greep { width: 100%; height: 26px; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.greep span { width: 40px; height: 5px; border-radius: 3px; background: rgba(237,234,228,0.4); }
.speler-bron { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; min-height: 32px; }
.speler-bron .l1 { font-size: 10px; letter-spacing: 0.14em; color: rgba(237,234,228,0.6); text-transform: uppercase; }
.speler-bron .l2 { font-size: 13px; font-weight: 600; }
.speler-inhoud { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.speler-beeld { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px 0 20px; }
/* De hoes met de titel erin: een zachte verloop onderin houdt de tekst leesbaar op elke hoes */
.hoes-kader { position: relative; width: min(100%, 46vh); aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-radius .45s; }
#speler-hoes, #speler-hoes .hoes { width: 100%; height: 100%; border-radius: 0; }
.hoes-kader::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); pointer-events: none; }
.speler.gepauzeerd .hoes-kader { transform: scale(0.86); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.speler-titel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-end; gap: 12px; padding: 0 16px 18px 22px; }
.paneel-titel { display: none; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.paneel-titel .t1 { font-size: 20px; font-weight: 600; line-height: 1.2; }
.paneel-titel .t2 { font-size: 16px; color: rgba(237,234,228,0.62); }
.speler.tekst .paneel-titel, .speler.rij .paneel-titel { display: flex; }
.speler-titel .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--tekst); }
.speler-titel h2 { font-size: 26px; line-height: 1.15; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.speler-titel .art { font-size: 18px; color: rgba(237,234,228,0.78); }
.speler-titel .knop-icoon { color: var(--tekst); flex-shrink: 0; margin-bottom: -6px; }
.balk { position: relative; height: 28px; margin-top: 4px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.balk::before { content: ''; position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: rgba(237,234,228,0.22); transition: height .15s; }
.balk-vol { position: relative; height: 6px; border-radius: 3px; background: rgba(237,234,228,0.88); width: 0; transition: height .15s; }
.balk.sleept::before, .balk.sleept .balk-vol { height: 10px; border-radius: 5px; }
.balk:focus-visible { outline: none; } .balk:focus-visible::before { box-shadow: 0 0 0 2px var(--tekst); }
.tijden { display: flex; justify-content: space-between; font-size: 12px; color: rgba(237,234,228,0.6); font-variant-numeric: tabular-nums; margin-top: 2px; }
.bediening { margin: 14px 0 6px; display: flex; align-items: center; justify-content: space-evenly; }
.bediening .knop-icoon { width: 72px; height: 72px; border-radius: 50%; }
.bediening .knop-icoon:active { background: rgba(237,234,228,0.1); }
.bediening .groot { width: 88px; height: 88px; }
.volume { display: flex; align-items: center; gap: 12px; color: rgba(237,234,228,0.65); margin-top: 6px; }
.volume[hidden] { display: none; }
.volume .balk { flex: 1; margin: 0; }
.balk.klein::before, .balk.klein .balk-vol { height: 4px; }
.speler-onder { margin-top: 18px; display: flex; justify-content: space-around; }
.knop-onder { position: relative; width: 52px; height: 44px; border: 0; border-radius: 22px; background: transparent; color: rgba(237,234,228,0.6); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.knop-onder svg { width: 24px; height: 24px; }
.knop-airplay[hidden] { display: none !important; }
.knop-airplay.draadloos { color: var(--tekst); }
.knop-onder[aria-pressed="true"] { color: var(--tekst); background: rgba(237,234,228,0.2); }
.badge { position: absolute; top: 2px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tekst); color: var(--grond); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.badge.stip { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 8px; right: 12px; }
.badge[hidden] { display: none; }
.timer-melding { text-align: center; font-size: 12px; color: rgba(237,234,228,0.6); margin-top: 6px; min-height: 16px; }
/* tekst en wachtrij nemen de plek van de hoes in */
.songtekst, .wachtrij { display: none; width: 100%; height: 100%; overflow-y: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%); }
.songtekst { font-size: 26px; line-height: 1.38; font-weight: 700; white-space: pre-line; padding: 24px 0 48px; letter-spacing: -0.01em; }
/* Tekst vervaagt zacht boven- en onderaan */
.songtekst { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.songtekst.leeg-tekst { color: rgba(237,234,228,0.6); font-size: 17px; font-weight: 400; }
.speler.tekst .songtekst { display: block; }
.speler.rij .wachtrij { display: block; }
.speler.tekst .hoes-kader, .speler.rij .hoes-kader { display: none; }
.speler.tekst .speler-beeld, .speler.rij .speler-beeld { align-items: stretch; }
.wachtrij { padding: 16px 0 40px; }
.wachtrij-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wachtrij-kop h3 { flex: 1; font-size: 17px; font-weight: 600; }
.knop-pil { position: relative; width: 44px; height: 36px; border-radius: 18px; border: 0; background: rgba(237,234,228,0.1); color: rgba(237,234,228,0.7); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.knop-pil[aria-pressed="true"] { background: var(--tekst); color: var(--grond); }
.knop-pil .een { display: none; position: absolute; font-size: 9px; font-weight: 700; top: 12px; left: 0; right: 0; text-align: center; }
.knop-pil.een-aan .een { display: block; }
.wachtrij-lijst { display: flex; flex-direction: column; gap: 6px; }
.wachtrij-lijst .rij-item { background: transparent; }
@media (max-width: 959px) {
  .speler-binnen { max-width: none; padding: 0 0 calc(12px + env(safe-area-inset-bottom)); }
  .speler-kop { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding-top: calc(env(safe-area-inset-top) + 4px); padding-bottom: 18px; background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0)); pointer-events: none; }
  .speler-kop > * { pointer-events: auto; }
  .speler-beeld { padding: 0; container-type: size; align-items: flex-start; }
  .hoes-kader { width: min(100cqw, 100cqh); border-radius: 0; box-shadow: none; transform-origin: 50% 40%; }
  .speler.gepauzeerd .hoes-kader { transform: scale(0.88); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,0.4); }
  .speler-titel { padding: 0 14px 20px 24px; }
  .speler-paneel { padding: 18px 24px 0; }
  .songtekst, .wachtrij { padding-left: 24px; padding-right: 24px; padding-top: calc(env(safe-area-inset-top) + 76px); }
  /* Bij de tekst en de wachtrij staat de kop erboven in plaats van eroverheen, dan scrolt er niets onder door */
  .speler.tekst .speler-kop, .speler.rij .speler-kop { position: relative; background: none; padding-bottom: 4px; }
  .speler.tekst .songtekst, .speler.rij .wachtrij { padding-top: 36px; }
  .bediening { margin: 14px 0 8px; }
  .bediening .knop-icoon { width: 72px; height: 72px; }
  .bediening .groot { width: 92px; height: 92px; }
  .speler-onder { margin-top: 14px; }
}
/* Op de computer net als op de telefoon, maar als één compact blok midden op het scherm: titel, dan de bediening.
   Zonder eigen hoes is er geen vierkant nodig, dan staat de titel gewoon boven de schuifbalk. */
@media (min-width: 960px) {
  .speler-binnen { max-width: 560px; padding: 18px 32px 36px; }
  .speler-inhoud { justify-content: center; }
  .speler-beeld { flex: none; padding: 0 0 30px; }
  .hoes-kader { width: 100%; }
  .speler.met-beeld .hoes-kader { width: min(100%, 46vh); }
  .speler:not(.met-beeld) .hoes-kader { aspect-ratio: auto; overflow: visible; }
  .speler:not(.met-beeld) #speler-hoes { display: none; }
  .speler:not(.met-beeld) .speler-titel { position: static; padding: 0; }
  .speler:not(.met-beeld) .speler-titel .knop-icoon:last-child { margin-right: -10px; }
  .speler:not(.met-beeld).gepauzeerd .hoes-kader { transform: none; background: none; box-shadow: none; }
  .speler-paneel { width: 100%; padding: 0; }
  .speler.tekst .speler-inhoud, .speler.rij .speler-inhoud { justify-content: flex-start; }
  .speler.tekst .speler-beeld, .speler.rij .speler-beeld { flex: 1; min-height: 0; }
}
.menu-blad { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.5); display: none; align-items: flex-end; justify-content: center; }
.menu-blad.open { display: flex; }
.menu-blad .blad { width: 100%; max-width: 440px; background: var(--vlak); border-radius: 14px 14px 0 0; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.menu-blad h3 { font-size: 13px; letter-spacing: 0.14em; color: var(--stil); padding: 10px 12px; font-weight: 600; text-transform: uppercase; }
.menu-blad button { height: 48px; border: 0; background: transparent; text-align: left; padding: 0 12px; font-size: 16px; border-radius: 8px; cursor: pointer; }
.menu-blad button:hover { background: rgba(237,234,228,0.06); }

/* ---------- computer ---------- */
@media (min-width: 960px) {
  .schil { min-height: 100vh; }
  .zijbalk { display: flex; flex-direction: column; gap: 36px; width: 240px; flex-shrink: 0; padding: 28px 20px; border-right: 1px solid rgba(237,234,228,0.08); position: sticky; top: 0; height: 100vh; }
  .zijbalk nav { display: flex; flex-direction: column; gap: 4px; }
  .zijbalk nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 8px; color: var(--stil); font-size: 15px; }
  .zijbalk nav a[aria-current="page"] { background: var(--vlak); color: var(--tekst); }
  .zijbalk .onderaan { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 8px; }
  .onder-nav, .kop .merk, .kop .taal { display: none; }
  .kop { height: 40px; }
  .inhoud { padding: 0 56px 140px; }
  .pagina { gap: 56px; }
  .held { flex-direction: row; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
  .held .hoes { flex: 0 1 420px; width: 100%; margin: 0; border-radius: var(--radius); }
  .held-tekst { flex: 1 1 320px; flex-direction: column; align-items: flex-start; }
  .held h1 { font-size: 56px; line-height: 1.02; }
  .held p.voorproef { display: block; font-size: 18px; line-height: 1.55; color: var(--tekst-lezen); max-width: 520px; }
  .radio-kaart { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 28px 32px; }
  .radio-kaart h2 { font-size: 22px; }
  .raster-mappen { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
  .raster-mappen .hoes { aspect-ratio: 4 / 3; }
  .raster-muziek { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; }
  .sectiekop h2 { font-size: 22px; }
  .nummer-kop { flex-direction: row; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
  .nummer-kop .hoes { flex: 0 1 380px; }
  .nummer-kop h1 { font-size: 48px; }
  .map-omslag { margin: 0 -56px; height: 420px; }
  .mini { left: 240px; right: 0; bottom: 0; height: 88px; padding: 0 24px; display: none; grid-template-columns: minmax(180px, 1fr) minmax(320px, 1.6fr) minmax(120px, 1fr); gap: 24px; }
  .mini.aan { display: grid; }
  .mini .hoes { width: 56px; }
  .mini .alleen-groot { display: flex !important; }
  .mini .voortgang-spoor { display: none; }
  .mini .midden { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
  .mini .knoppen { gap: 14px; }
  .mini .knop-icoon { width: 40px; height: 40px; }
  .mini .mini-hoofd { background: var(--tekst); color: var(--grond); width: 40px; height: 40px; border-radius: 50%; }
  .mini .mini-hoofd svg { width: 20px; height: 20px; }
  .mini-balk { align-items: center; gap: 12px; width: 100%; max-width: 640px; }
  .mini-balk .tijd { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; }
  .mini-balk .spoor { position: relative; flex: 1; height: 16px; cursor: pointer; display: flex; align-items: center; }
  .mini-balk .spoor::before { content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: rgba(237,234,228,0.14); }
  .mini-balk .vol { position: relative; height: 3px; border-radius: 2px; background: var(--tekst); width: 0; }
  .mini-balk .vol::after { content: ''; position: absolute; right: -6px; top: -4.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--tekst); opacity: 0; transition: opacity .15s; }
  .mini-balk .spoor:hover .vol::after, .mini-balk .spoor:focus-visible .vol::after { opacity: 1; }
  .mini-rechts { justify-content: flex-end; align-items: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .speler.open { animation: omhoog 220ms ease-out; }
  @keyframes omhoog { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
}

/* ---------- over ---------- */
.kop-link { font-size: 14px; color: var(--stil); padding: 10px 8px; margin-right: 4px; }
.kop-link[aria-current="page"] { color: var(--tekst); }
.over .over-kop { align-items: flex-start; gap: 20px; padding-top: 8px; }
.over .over-logo { color: var(--tekst); opacity: 0.9; }
.over h1 { font-size: 32px; font-weight: 600; }
.over .leestekst + .leestekst { margin-top: 4px; }
.rijtje-links { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 960px) { .kop .kop-link { display: none; } }

/* ---------- genres: een rustige lijst ---------- */
.genre-lijst { display: flex; flex-direction: column; }
.genre-rij { display: flex; align-items: center; gap: 14px; padding: 18px 2px; border-bottom: 1px solid var(--lijn); color: var(--tekst); }
.genre-rij:first-child { border-top: 1px solid var(--lijn); }
.genre-rij .stip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.genre-rij .genre-naam { flex: 1; font-size: 19px; font-weight: 600; letter-spacing: -0.005em; }
.genre-rij .genre-aantal { font-size: 14px; color: var(--stil); }
.genre-rij svg { color: var(--dim); flex-shrink: 0; }
.genre-rij:hover .genre-naam { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rand-sterk); }
.genre-kop { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }
.genre-kop h1 { font-size: 38px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.genre-kop .genre-aantal { font-size: 15px; color: rgba(237,234,228,0.72); }
.genre-kop .acties { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.genre-link { color: var(--tekst); text-decoration: underline; text-decoration-color: var(--rand-sterk); text-underline-offset: 3px; }
@media (min-width: 960px) { .genre-lijst { max-width: 720px; } .genre-kop h1 { font-size: 52px; } }

/* ---------- meekleuren met de hoes ----------
   Zonder eigen afbeelding is de hoes één effen kleur. Dan loopt die kleur door in de rest: in de speler is alles die
   kleur (de hoes valt er naadloos in weg), op een pagina met een hoes loopt de kleur bovenaan door en zakt hij naar
   onderen rustig weg in de donkere grond. */
/* Een vloeiend verloop: in OKLCH gemengd (geen grauwe tussenkleuren) en met een zachte uitloop, plus bovenin een
   lichte gloed voor diepte. --lang bepaalt hoe ver de kleur doorloopt. */
body.getint .inhoud {
  --lang: 1100px;
  background:
    radial-gradient(130% 520px at 18% -60px, color-mix(in oklch, var(--tint), #fff 14%) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--tint) 0,
      color-mix(in oklch, var(--tint) 94%, var(--grond)) calc(var(--lang) * 0.18),
      color-mix(in oklch, var(--tint) 80%, var(--grond)) calc(var(--lang) * 0.32),
      color-mix(in oklch, var(--tint) 62%, var(--grond)) calc(var(--lang) * 0.46),
      color-mix(in oklch, var(--tint) 42%, var(--grond)) calc(var(--lang) * 0.6),
      color-mix(in oklch, var(--tint) 24%, var(--grond)) calc(var(--lang) * 0.74),
      color-mix(in oklch, var(--tint) 10%, var(--grond)) calc(var(--lang) * 0.88),
      var(--grond) var(--lang));
  background-repeat: no-repeat;
}
@media (min-width: 960px) { body.getint .inhoud { --lang: 900px; } }
body.getint .held .hoes, body.getint .nummer-kop .hoes:not(:has(img)) { box-shadow: none; }
.held:not(:has(.hoes img))::after { display: none; }
/* speler zonder afbeelding: één kleur van boven tot onder */
.speler:not(.met-beeld) .speler-achter { filter: none; transform: none; inset: 0; }
.speler:not(.met-beeld) .speler-achter {
  /* Een zacht kleurenveld zoals bij Apple Music: lichte, warmere gloed linksboven, diepere koele gloed rechtsonder,
     onderin donker voor de knoppen. Langzaam bewegend, en met een fijne korrel tegen strepen in het verloop. */
  background:
    radial-gradient(70% 50% at 18% 8%, var(--sp-a) 0%, transparent 72%),
    radial-gradient(65% 55% at 92% 62%, var(--sp-b) 0%, transparent 70%),
    radial-gradient(90% 60% at 30% 100%, var(--sp-c) 0%, transparent 75%),
    linear-gradient(175deg, var(--sp-kleur) 0%, color-mix(in oklch, var(--sp-kleur) 82%, #000) 58%, color-mix(in oklch, var(--sp-kleur) 55%, #000) 100%) !important;
  background-size: 140% 140%, 140% 140%, 120% 120%, 100% 100% !important;
  background-position: 0% 0%, 100% 100%, 50% 100%, 0 0 !important;
}
@media (prefers-reduced-motion: no-preference) {
  .speler.open:not(.met-beeld) .speler-achter { animation: kleurveld 22s ease-in-out infinite alternate; }
  @keyframes kleurveld { 0% { background-position: 0% 0%, 100% 100%, 50% 100%, 0 0; } 100% { background-position: 30% 18%, 70% 80%, 40% 85%, 0 0; } }
}
.speler:not(.met-beeld) .speler-achter::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.07; mix-blend-mode: overlay; }
.speler:not(.met-beeld) #speler-hoes .hoes { background: transparent !important; }
.speler:not(.met-beeld) .hoes-kader { box-shadow: none; }
.speler:not(.met-beeld) .hoes-kader::after { display: none; }
.speler:not(.met-beeld).gepauzeerd .hoes-kader { background: rgba(255,255,255,0.07); box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
/* kaarten op een gekleurde pagina: doorschijnend donker, zodat de kleur erdoor blijft komen */
body.getint .radio-kaart { background: rgba(0,0,0,0.2); }
.speler:not(.met-beeld) .speler-kop { background: none; }

/* meelezen: de regel die nu gezongen wordt licht op, tik op een regel om daarheen te gaan */
.songtekst.meelezen { white-space: normal; }
.songtekst .regel { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 0; margin: 0 0 6px; color: var(--tekst); font: inherit; opacity: 0.38; cursor: pointer; transition: opacity .35s ease, transform .35s ease; transform-origin: left center; }
.songtekst .regel.voorbij { opacity: 0.55; }
.songtekst .regel.nu { opacity: 1; transform: scale(1.02); }
.songtekst .regel.stuk { margin-top: 26px; }
/* Op de telefoon even breed als de info eronder, zodat links en rechts alles op één lijn staat (Ralph) */
.nummer-kop .hoes { width: 100%; max-width: none; align-items: flex-end; justify-content: flex-start; }
.nummer-kop .tegel-tekst { padding: 18px 18px 16px; }
.nummer-kop .tegel-titel { font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; -webkit-line-clamp: 4; }
.nummer-kop .tegel-sub { font-size: 14px; }
.map-omslag:not(:has(img)) { height: 160px; margin: 8px 0 0; border-radius: var(--radius); }
@media (max-width: 959px) {
  .held .hoes:not(:has(img)) { aspect-ratio: auto; height: 78vw; max-height: 380px; }
}
@media (min-width: 960px) {
  .nummer-kop .hoes { flex: 0 0 340px; width: 340px; max-width: 340px; }
  .nummer-kop .tegel-titel { font-size: 32px; }
  .map-omslag:not(:has(img)) { height: 200px; margin: 8px 0 0; }
}

/* genres als filter boven Muziek: één rij, op de telefoon zijwaarts te schuiven */
.filter { display: flex; gap: 8px; overflow-x: auto; margin: -12px -20px 0; padding: 2px 20px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filter::-webkit-scrollbar { display: none; }
.filter .chip { flex-shrink: 0; color: var(--tekst); white-space: nowrap; }
.filter .chip[aria-pressed="true"] { background: var(--tekst); color: var(--grond); border-color: var(--tekst); font-weight: 600; }
@media (min-width: 960px) { .filter { margin: -12px 0 0; padding: 2px 0 4px; flex-wrap: wrap; overflow: visible; } }

/* ---------- carrousel met nieuwe nummers ---------- */
.nieuw { display: flex; flex-direction: column; gap: 14px; }
.nieuw .sectiekop { align-items: center; }
.pijlen { display: none; gap: 4px; }
.carrousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carrousel::-webkit-scrollbar { display: none; }
.dia { position: relative; flex: 0 0 86%; aspect-ratio: 1 / 1.02; border-radius: var(--radius); overflow: hidden; scroll-snap-align: start; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 18px 20px 22px; }
.carrousel.een .dia { flex-basis: 100%; aspect-ratio: auto; height: 78vw; max-height: 380px; }
/* Elke tegel: zelfde verloop als de speler, maar zachter (Ralph koos C). De tegel blijft duidelijk die ene kleur. */
.verloop { background-image:
    radial-gradient(80% 60% at 15% 5%, color-mix(in oklch, var(--ta) 70%, var(--kl)) 0%, transparent 75%),
    radial-gradient(70% 60% at 95% 70%, color-mix(in oklch, var(--tb) 60%, var(--kl)) 0%, transparent 72%),
    linear-gradient(175deg, var(--kl) 0%, color-mix(in oklch, var(--kl) 88%, #000) 100%); }
.dia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dia:has(img)::after { content: ''; position: absolute; inset: 45% 0 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.6)); pointer-events: none; }
.dia-link { position: absolute; inset: 0; z-index: 1; }
.dia-tekst { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; min-width: 0; pointer-events: none; }
.dia-tekst h3 { font-size: 26px; line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; color: var(--tekst); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dia-sub { font-size: 14px; color: var(--tekst); }
.dia .knop-rond { position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; box-shadow: none;
  /* Lijn (Ralph koos C): alleen een dun wit randje, net als de lijntekeningen bij de radio */
  background: transparent; border: 1.5px solid var(--tekst); color: var(--tekst); transition: background .2s ease; }
.dia .knop-rond:hover { background: rgba(255,255,255,0.12); }
.dia .knop-rond svg { width: 20px; height: 20px; }
.stippen { display: flex; justify-content: center; gap: 8px; }
.stippen button { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(237,234,228,0.28); cursor: pointer; transition: width .25s, background .25s; }
.stippen button[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--tekst); }
@media (min-width: 960px) {
  .pijlen { display: flex; }
  .carrousel { margin: 0; padding: 0; scroll-padding: 0; gap: 20px; }
  .dia { flex: 0 0 calc((100% - 40px) / 3); aspect-ratio: 1; }
  .carrousel.een .dia { flex-basis: 420px; height: 420px; }
  .dia-tekst h3 { font-size: 24px; }
}

/* vind ik leuk */
.hart[aria-pressed="true"] { color: var(--tekst); }
.knop-icoon.rand { border: 1px solid var(--rand); width: 48px; height: 48px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .hart[aria-pressed="true"] svg { animation: hartje .3s ease-out; } @keyframes hartje { 50% { transform: scale(1.25); } } }
.filter .chip svg { flex-shrink: 0; }

/* ---------- welkom en zoeken ---------- */
.welkom { display: flex; flex-direction: column; gap: 4px; }
.welkom h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.01em; }
.welkom p { font-size: 15px; color: var(--stil); }
.zoekveld { margin-top: 14px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 25px; background: var(--vlak); color: var(--stil); border: 1px solid transparent; transition: border-color .2s; }
.zoekveld:focus-within { border-color: var(--rand-sterk); color: var(--tekst); }
.zoekveld input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--tekst); font: inherit; font-size: 16px; outline: none; }
.zoekveld input::placeholder { color: var(--dim); }
.zoekveld input::-webkit-search-cancel-button { filter: invert(0.8); }
.zoek-uit { display: flex; flex-direction: column; gap: 28px; }
.start-rest { display: flex; flex-direction: column; gap: 32px; }
.start-rest[hidden], .zoek-uit[hidden] { display: none; }
@media (min-width: 960px) { .welkom h1 { font-size: 44px; } .zoekveld { max-width: 560px; } }
/* De taalfilter hoort bij de genrefilter erboven: dicht ertegenaan */
.filter + .filter { margin-top: -20px; }
@media (min-width: 960px) { .filter + .filter { margin-top: -42px; } }

/* Rangnummer in de tegels van Populair (verder dezelfde carrousel als Nieuw) */
.dia .rang { position: absolute; top: 14px; left: 22px; z-index: 2; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--tekst); pointer-events: none; font-variant-numeric: tabular-nums; }

/* Breed scherm: vier tegels naast elkaar in de carrousels, anders worden ze te groot */
@media (min-width: 1400px) {
  .dia { flex-basis: calc((100% - 60px) / 4); }
}

/* Radio op stemming: tegels met een dunne lijntekening, naam en Radiostation eronder */
.stations-rij { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; scrollbar-width: none; }
.stations-rij::-webkit-scrollbar { display: none; }
.station { flex: 0 0 44%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; color: var(--tekst); text-align: left; cursor: pointer; }
.station-tegel { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: var(--radius); color: var(--tekst); overflow: hidden; transition: transform .2s ease; }
.station-tegel svg { width: 72%; height: 72%; }
.station:hover .station-tegel { transform: scale(1.02); }
.station:focus-visible .station-tegel { outline: 2px solid var(--tekst); outline-offset: 3px; }
.station-tekst { display: flex; flex-direction: column; gap: 2px; }
.station-tekst .t1 { font-size: 15px; font-weight: 600; }
.station-tekst .t2 { font-size: 13px; color: var(--stil); }
@media (min-width: 960px) {
  .stations-rij { margin: 0; padding: 0; gap: 20px; overflow: visible; }
  .station { flex: 0 0 calc((100% - 60px) / 4); }
  .station-tekst .t1 { font-size: 16px; }
}

/* Versie klein onderin de grote speler */
.speler-versie { margin-top: 10px; text-align: center; font-size: 11px; letter-spacing: 0.04em; color: rgba(237,234,228,0.5); font-variant-numeric: tabular-nums; }
.speler.tekst .speler-versie, .speler.rij .speler-versie { display: none; }

/* Versie links onderin, onder de taalknop (op de computer); op de telefoon staat hij onderin de speler */
.zij-versie { font-size: 11px; letter-spacing: 0.04em; color: rgba(237,234,228,0.38); font-variant-numeric: tabular-nums; margin-top: 2px; }
@media (min-width: 960px) { .speler-versie { display: none; } }