/*
 * Kids Kabaal — het lichtrig van Techniek-Piet.
 * Podiumzwart en paarse haze als grond; Sint-rood, spotgoud en LED-cyaan als licht; truss-aluminium
 * als structuur; gaffatape met stift voor labels. Het felste wit is alleen voor wat speelt of focus heeft.
 */

/* ── Lettertypes (OFL/Apache, zie /fonts/*-LICENSE.txt) ── */
@font-face { font-family: 'Titan One'; src: url('/fonts/titan-one-latin.woff2') format('woff2'); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Titan One'; src: url('/fonts/titan-one-latin-ext.woff2') format('woff2'); font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Next'; src: url('/fonts/atkinson-next-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson Next'; src: url('/fonts/atkinson-next-latin-ext.woff2') format('woff2'); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Next'; src: url('/fonts/atkinson-next-latin-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Permanent Marker'; src: url('/fonts/permanent-marker-latin.woff2') format('woff2'); font-display: swap; }

/* ── Tokens ── */
@property --gloed-1 { syntax: '<color>'; inherits: true; initial-value: #e3242b; }
@property --gloed-2 { syntax: '<color>'; inherits: true; initial-value: #ffd23f; }
:root {
  --zwart: #0b0816;
  --nacht: #140d29;
  --haze: #2a1450;
  --paars: #5a2aa8;
  --rood: #e3242b;
  --rood-diep: #a3121a;
  --goud: #ffd23f;
  --goud-diep: #f59a0c;
  --cyaan: #29c5f6;
  --magenta: #e5379b;
  --blauw: #3d6bff;
  --alu: #a7b0ba;
  --alu-licht: #d6dce2;
  --alu-donker: #4b525b;
  --gaffa: #1b1b1d;
  --gaffa-stift: #f4f4f2;
  /* Gaffatape: mat zwart doek, afgescheurd aan beide kanten. */
  --tape-masker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M10 0H3L5 3 1 6 4 9 0 13 3 16 1 20 4 23 0 27 3 30 1 34 4 37 2 40H10Z'/%3E%3C/svg%3E") left / 9px 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H7L5 3 9 6 6 9 10 13 7 16 9 20 6 23 10 27 7 30 9 34 6 37 8 40H0Z'/%3E%3C/svg%3E") right / 9px 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 16px) 100% no-repeat;
  --tape-doek: linear-gradient(180deg, rgb(255 255 255 / .07), transparent 35%, rgb(0 0 0 / .25)), repeating-linear-gradient(90deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 3px), #1b1b1d;
  --inkt: #17131f;
  --tekst: #f5f0ff;
  --tekst-zacht: #cbbfe6;
  --lijn: color-mix(in srgb, var(--alu) 22%, transparent);

  --display: 'Titan One', 'Atkinson Next', system-ui, sans-serif;
  --body: 'Atkinson Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --stift: 'Permanent Marker', 'Atkinson Next', cursive;

  --rand: clamp(1rem, 4vw, 2.5rem);
  /* Hoogte van de kop (truss + logo + menu): het podium vult de rest van het scherm. Dezelfde som als
     de kop zelf (padding + logo, minstens de menuknop); site.js meet hem daarna nog exact na. */
  --logo-b: clamp(9rem, 22vw, 14rem);
  --kop-h: calc(1.65rem + 30px + max(var(--logo-b) * .2992, 44px));
  --maat: 68ch;
  --radius: 14px;
  --uit: cubic-bezier(.16, 1, .3, 1);

  /* Licht (public/js/licht.js): --licht = omhullende van de bas, --puls = opgloei op de kicks. */
  --licht: 0;
  --puls: 0;
  --bas: 0;

  color-scheme: dark;
  accent-color: var(--goud);
}

/* ── Basis ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
/* Geen blauw vlak bij een tik op Android: de knoppen hebben hun eigen indruk-effect, en wie met het
   toetsenbord werkt houdt de focusrand (:focus-visible). */
* { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100svh;
  background: var(--zwart); color: var(--tekst);
  font: 400 clamp(1.0625rem, .98rem + .3vw, 1.1875rem)/1.6 var(--body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--goud); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: #fff; }
::selection { background: var(--goud); color: var(--inkt); }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: var(--paars) var(--zwart); scrollbar-width: thin; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 1.1rem + 5vw, 5.5rem); overflow-wrap: break-word; hyphens: auto; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); margin-top: 1.6em; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
.groot, .kp-kop p, .dans-doe, .flash span, .aanwijzing span, .voet-merk p, .klas-stappen p { text-wrap: balance; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.naar-inhoud { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--goud); color: var(--inkt); padding: .6rem 1rem; border-radius: 8px; font-weight: 700; }
.naar-inhoud:focus { top: 1rem; }

/* Goud zoals het logo: massief goud, met de rode en paarse "extrusie" eronder. */
.goud {
  color: var(--goud);
  text-shadow: 0 .035em 0 var(--goud-diep), 0 .07em 0 var(--rood-diep), 0 .11em 0 var(--haze), 0 .16em .3em rgb(0 0 0 / .55);
}

/* ── Truss: aluminium driehoekstruss, van opzij gezien (twee buizen en diagonalen) ── */
.truss {
  height: 30px;
  background:
    linear-gradient(180deg, var(--alu-licht) 0 2px, var(--alu) 2px 5px, var(--alu-donker) 5px 7px, transparent 7px) top / 100% 7px no-repeat,
    linear-gradient(180deg, var(--alu-licht) 0 2px, var(--alu) 2px 5px, var(--alu-donker) 5px 7px, transparent 7px) bottom / 100% 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='30'%3E%3Cpath d='M0 27 L20 3 L40 27' stroke='%238f99a3' stroke-width='3' fill='none'/%3E%3Cpath d='M20 3 V27' stroke='%236b737c' stroke-width='2'/%3E%3C/svg%3E") left center / 40px 30px repeat-x;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / .6));
}

/* ── Kop ── */
.kop { position: relative; z-index: 20; background: var(--zwart); }
.pagina-404 .kop { position: absolute; inset: 0 0 auto; }
/* De truss loopt onderlangs de kop: daar hangen de lampen van het podium aan. */
.kop .truss { position: absolute; inset: auto 0 0; z-index: 1; }
.kop-binnen {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem var(--rand) calc(30px + .75rem); max-width: 90rem; margin: 0 auto;
}
.kop-logo { display: block; width: var(--logo-b); }
.hoofdmenu ul { display: flex; flex-wrap: wrap; gap: .5rem .4rem; list-style: none; margin: 0; padding: 0; }
.hoofdmenu a {
  display: inline-block; padding: .4rem 1.1rem .3rem; text-decoration: none;
  font: 400 1.02rem/1.2 var(--stift); color: var(--gaffa-stift); background: var(--tape-doek);
  -webkit-mask: var(--tape-masker); mask: var(--tape-masker);
  transform: rotate(var(--scheef, -1deg)); transition: color .2s, transform .2s var(--uit);
}
.hoofdmenu li:nth-child(2n) a { --scheef: 1.2deg; }
.hoofdmenu li:nth-child(3n) a { --scheef: -.4deg; }
.hoofdmenu a:hover, .hoofdmenu a[aria-current="page"] { color: var(--goud); transform: rotate(0) translateY(-2px); }
.menu-knop { display: none; }

@media (max-width: 70em) {
  .menu-knop {
    display: inline-flex; align-items: center; gap: .4rem; margin-left: auto;
    font: 400 1.05rem var(--stift); color: var(--gaffa-stift); background: var(--tape-doek); border: 0; padding: .5rem 1.2rem; cursor: pointer;
    -webkit-mask: var(--tape-masker); mask: var(--tape-masker);
    min-height: 44px;
  }
  .hoofdmenu {
    position: absolute; inset: 100% var(--rand) auto; z-index: 30;
    background: var(--nacht); border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 1rem; box-shadow: 0 20px 40px rgb(0 0 0 / .5);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .25s var(--uit), visibility 0s .25s;
  }
  .hoofdmenu ul { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .hoofdmenu a { font-size: 1.25rem; padding: .45rem .9rem; }
  .kop.open .hoofdmenu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--uit); }
}

/* ── Knoppen ── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px;
  padding: .7rem 1.2rem; border-radius: 12px; border: 2px solid transparent; cursor: pointer;
  font: 700 1.0625rem/1.1 var(--body); text-decoration: none;
  color: var(--inkt); background: var(--goud);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--goud) 70%, transparent);
  transition: transform .2s var(--uit), background .2s, box-shadow .2s;
}
.knop:hover { color: var(--inkt); background: #ffe27a; transform: translateY(-2px); }
.knop:active { transform: translateY(1px); }
.knop-stil { background: transparent; color: var(--tekst); border-color: color-mix(in srgb, var(--alu) 45%, transparent); box-shadow: none; }
.knop-stil:hover { background: color-mix(in srgb, var(--alu) 14%, transparent); color: #fff; }
.knop-klein { min-height: 42px; padding: .5rem .9rem; font-size: 1rem; }
.link-knop { font: inherit; color: var(--goud); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.knoppen-rij { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
@media (max-width: 30em) { .knoppen-rij { flex-direction: column; } .knoppen-rij > * { justify-content: center; } }
.pijl { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.pijl .ico { transition: transform .2s var(--uit); }
.pijl:hover .ico { transform: translateX(4px); }
.rond {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--alu) 14%, transparent); color: var(--tekst); border: 1px solid var(--lijn); cursor: pointer;
}
.rond:hover { background: color-mix(in srgb, var(--alu) 26%, transparent); }
.rond[aria-pressed="true"] { background: var(--goud); color: var(--inkt); }

/* ── Het lichtrig ── */
.podium {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, var(--gloed-1) 34%, transparent), transparent 60%),
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--haze) 90%, transparent), transparent 70%),
    var(--zwart);
  transition: --gloed-1 1.2s, --gloed-2 1.2s;
}
.rig { position: absolute; inset: 0; z-index: -1; pointer-events: none; contain: strict; }
.rig .truss-rig { position: absolute; inset: 0 -20px auto; }
.haze {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 30% at 20% 45%, color-mix(in srgb, var(--paars) 30%, transparent), transparent 70%),
    radial-gradient(45% 35% at 80% 35%, color-mix(in srgb, var(--magenta) 16%, transparent), transparent 70%),
    radial-gradient(60% 40% at 50% 75%, color-mix(in srgb, var(--haze) 70%, transparent), transparent 75%);
  opacity: calc(.55 + var(--licht) * .45);
  animation: drijf 24s ease-in-out infinite alternate;
}
@keyframes drijf { to { transform: translate3d(2%, -1.5%, 0) scale(1.06); } }

/* Moving heads aan de truss: een beugel en een kop met lens. Ze zwaaien doorlopend en rustig heen en
   weer, elk in een eigen tempo; de kop en de bundel van dezelfde head lopen gelijk op. De kleur is een
   geregistreerde eigenschap, zodat een kleurwissel in ruim een seconde overvloeit in plaats van
   omspringt. */
@property --kleur { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
.head, .bundel { transition: --kleur 1.4s ease-in-out; }
@keyframes zwaai {
  from { rotate: calc((var(--van) - 22) * var(--zwaai-hoek, 1) * 1deg); }
  to { rotate: calc((var(--van) + 22) * var(--zwaai-hoek, 1) * 1deg); }
}
.heads { position: absolute; inset: 22px 0 auto; height: 40px; }
.head {
  position: absolute; top: 0; left: calc(var(--x) - 15px); width: 30px; height: 36px;
  --x: calc((var(--n) - .5) / 6 * 100%);
}
.head::before { /* beugel */
  content: ''; position: absolute; inset: 4px 2px 10px; border: 4px solid #2b2f36; border-top-width: 6px; border-radius: 3px 3px 10px 10px;
}
.head i { /* kop met lens */
  position: absolute; left: 6px; top: 14px; width: 18px; height: 20px; border-radius: 5px 5px 9px 9px;
  background: linear-gradient(180deg, #3a3f48, #16181d);
  rotate: calc(var(--van) * var(--zwaai-hoek, 1) * 1deg); transform-origin: 50% 20%;
  animation: zwaai calc(var(--duur) * var(--zwaai-tempo, 1)) ease-in-out var(--fase) infinite alternate;
}
.head i::after {
  content: ''; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--kleur) calc(40% + var(--licht) * 30% + var(--puls) * 30%), #333);
  box-shadow: 0 2px 10px calc(var(--licht) * 2px + var(--puls) * 7px) color-mix(in srgb, var(--kleur) 80%, transparent);
}
.head:nth-child(1), .bundel:nth-child(1) { --n: 1; --kleur: var(--magenta); --van: 18; --duur: 5.2s; --fase: -1.1s; }
.head:nth-child(2), .bundel:nth-child(2) { --n: 2; --kleur: var(--cyaan); --van: -10; --duur: 6.1s; --fase: -4.3s; }
.head:nth-child(3), .bundel:nth-child(3) { --n: 3; --kleur: var(--blauw); --van: 12; --duur: 5.6s; --fase: -2.7s; }
.head:nth-child(4), .bundel:nth-child(4) { --n: 4; --kleur: var(--blauw); --van: -14; --duur: 6.6s; --fase: -0.6s; }
.head:nth-child(5), .bundel:nth-child(5) { --n: 5; --kleur: var(--cyaan); --van: 9; --duur: 4.9s; --fase: -3.4s; }
.head:nth-child(6), .bundel:nth-child(6) { --n: 6; --kleur: var(--magenta); --van: -20; --duur: 6.3s; --fase: -5.2s; }
/* Om en om gespiegeld: de buren zwaaien naar elkaar toe en weer uit elkaar. */
.head:nth-child(even) i, .bundel:nth-child(even) { animation-direction: alternate-reverse; }

/* De bundels door de haze. Helderheid uit --licht en --puls, nooit direct de ruwe bas. */
.bundels {
  position: absolute; inset: 0; mix-blend-mode: screen;
  --spot-breedte: 30; --basis: .14; --kracht: .5;
}
.bundel {
  position: absolute; top: 52px; height: 120%;
  --x: calc((var(--n) - .5) / 6 * 100%);
  width: calc(var(--spot-breedte) * 1vmax); left: calc(var(--x) - var(--spot-breedte) * .5vmax);
  transform-origin: 50% 0; rotate: calc(var(--van) * var(--zwaai-hoek, 1) * 1deg);
  animation: zwaai calc(var(--duur) * var(--zwaai-tempo, 1)) ease-in-out var(--fase) infinite alternate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kleur) 85%, transparent) 0%, color-mix(in srgb, var(--kleur) 22%, transparent) 50%, transparent 88%);
  /* De vorm met zachte randen als masker (img/bundel.svg): één keer getekend. Een blur-filter moest
     een iPhone elk beeldje opnieuw uitrekenen, voor zes grote lagen, en dat liet Safari het tabblad
     opnieuw laden (de pagina werd even leeg en de muziek stond stil). */
  -webkit-mask: url(/img/bundel.svg) center / 100% 100% no-repeat;
  mask: url(/img/bundel.svg) center / 100% 100% no-repeat;
  /* Helderheid: een rustige basis met de muziek mee, en een knipper op elke tel (--puls). */
  opacity: calc(var(--basis) + var(--licht) * var(--kracht) * .6 + var(--puls) * .34);
  transition: --kleur 1.4s ease-in-out;
  /* Elke bundel een eigen laag: de wazige rand wordt één keer getekend, daarna verandert alleen de dekking. */
  will-change: opacity, rotate;
}

/* Speakerstacks met LED-ring die op de bas meegloeit. */
.speaker {
  position: absolute; bottom: 4%; width: clamp(5rem, 13vw, 11rem); aspect-ratio: 5 / 9;
  display: grid; grid-template-rows: 1fr 1fr .6fr; place-items: center; padding: 8% 0;
  background: linear-gradient(180deg, #1d1b24, #0f0d14); border-radius: 8px;
  box-shadow: inset 0 0 0 3px #26232e, inset 0 0 0 5px #0a090d, 0 20px 40px rgb(0 0 0 / .6);
}
.speaker-l { left: clamp(-2rem, -1vw, 0rem); }
.speaker-r { right: clamp(-2rem, -1vw, 0rem); }
.speaker i { display: block; border-radius: 50%; }
.woofer {
  width: 74%; aspect-ratio: 1; will-change: scale;
  background: radial-gradient(circle, #3b3846 0 14%, #0b0a0e 15% 22%, #25222c 23% 60%, #0b0a0e 61% 66%, #18161d 67%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kleur-led, var(--cyaan)) calc(25% + var(--licht) * 75%), transparent),
    0 0 calc(4px + var(--licht) * 22px) color-mix(in srgb, var(--kleur-led, var(--cyaan)) calc(var(--licht) * 90%), transparent);
  scale: calc(1 + var(--bas) * .035);
}
.tweeter { width: 30%; aspect-ratio: 1; background: radial-gradient(circle, #555 0 20%, #111 22% 60%, #222 62%); }
.speaker-r { --kleur-led: var(--magenta); }

.vloer {
  position: absolute; inset: auto 0 0; height: 12%;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / .65)),
    radial-gradient(50% 120% at 50% 100%, color-mix(in srgb, var(--gloed-2) calc(10% + var(--licht) * 25%), transparent), transparent 70%);
}

/* ── De bediening: een DJ-deck (jog wheel, display, CUE en PLAY) ── */
.deck {
  --jog: clamp(6rem, 22vw, 9.5rem);
  display: flex; align-items: center; gap: clamp(.8rem, 2.5vw, 1.5rem);
  padding: clamp(.7rem, 2vw, 1rem);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .06), transparent 30%),
    linear-gradient(180deg, #24202c, #121017);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .05), 0 22px 44px -12px rgb(0 0 0 / .85);
  touch-action: manipulation;
}
/* Jog wheel: aluminium rand, zwart plateau, de hoes als label. Draait mee tijdens het spelen. */
.jog {
  position: relative; flex: none; width: var(--jog); aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none;
  background: conic-gradient(from 0deg, #d9dee3, #7d858e, #e6eaee, #6c747c, #d9dee3, #7d858e, #e6eaee, #6c747c, #d9dee3);
  box-shadow: 0 8px 18px rgb(0 0 0 / .7), inset 0 0 0 2px rgb(0 0 0 / .4);
}
.jog::after { /* LED-ring rond het plateau */
  content: ''; position: absolute; inset: 5%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyaan) calc(30% + var(--licht) * 70%), transparent), 0 0 calc(4px + var(--licht) * 18px) color-mix(in srgb, var(--cyaan) calc(var(--licht) * 80%), transparent);
}
.jog-plaat {
  position: absolute; inset: 7%; border-radius: 50%; overflow: hidden;
  background: repeating-radial-gradient(circle, #111 0 1px, #1b1b1f 1px 3px);
  rotate: var(--draai, 0deg);
}
.jog-plaat::before { /* lichte segmenten, zodat je het draaien ziet */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgb(255 255 255 / .12) 0 8deg, transparent 8deg 90deg, rgb(255 255 255 / .12) 90deg 98deg, transparent 98deg 180deg, rgb(255 255 255 / .12) 180deg 188deg, transparent 188deg 270deg, rgb(255 255 255 / .12) 270deg 278deg, transparent 278deg);
}
.jog-plaat img { position: absolute; inset: 27%; width: 46%; height: 46%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #0b0b0d; pointer-events: none; }
.speelt .jog-plaat { animation: draai 1.8s linear infinite; }
.jog.scratch { cursor: grabbing; }
.jog.scratch .jog-plaat { animation-play-state: paused; }

.deck-paneel { flex: 1; min-width: 0; display: grid; gap: .7rem; }
/* Het display: donkerblauw LCD met lichtgevende tekst. */
.lcd {
  display: grid; gap: .3rem; padding: .55rem .75rem .6rem; border-radius: 10px;
  background: linear-gradient(180deg, #0d1a2b, #081120); box-shadow: inset 0 2px 6px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
}
.lcd-regel { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; min-width: 0; }
.lcd-titel { flex: 1 1 auto; min-width: 0; font: 400 clamp(.95rem, .85rem + .5vw, 1.2rem)/1.15 var(--display); color: #e8f6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcd-tijd { flex: none; font-variant-numeric: tabular-nums; color: var(--cyaan); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.deck-knoppen { display: flex; align-items: center; gap: 1.25rem; }

/* PLAY en CUE: ronde rubberen knoppen met een LED-ring, zoals op een CDJ. */
.speel, .deck-cue {
  position: relative; flex: none; display: grid; place-items: center; width: clamp(3.7rem, 11vw, 4.7rem); aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  border: 0; background: radial-gradient(circle at 50% 40%, #3a3640, #1c1a20); color: var(--tekst);
  box-shadow: 0 0 0 3px #0b0a0d, 0 0 0 5px var(--ring, #3c3843), 0 6px 14px rgb(0 0 0 / .6);
  transition: transform .15s var(--uit), box-shadow .25s;
}
.speel { --ring: #2f9e5a; color: #7dffb0; }
.deck-cue { --ring: var(--goud-diep); color: var(--goud); font: 400 .95rem var(--display); letter-spacing: .04em; }
.speel .ico { width: 44%; height: 44%; fill: currentColor; stroke-width: 1.5; }
.speel-play { translate: 6% 0; }
.speel-pauze, .speelt .speel-play { display: none; }
.speelt .speel-pauze { display: block; }
.speel:hover, .deck-cue:hover { transform: scale(1.05); }
.speel:active, .deck-cue:active { transform: scale(.95); }
.speelt .speel { --ring: #5dffa0; color: #fff; box-shadow: 0 0 0 3px #0b0a0d, 0 0 0 5px var(--ring), 0 0 calc(14px + var(--puls) * 26px) calc(2px + var(--licht) * 8px) color-mix(in srgb, #5dffa0 60%, transparent); }
.laadt .speel::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: #fff; animation: draai .8s linear infinite;
}
.deck-rond {
  display: grid; place-items: center; width: 3rem; aspect-ratio: 1; border-radius: 10px; cursor: pointer;
  background: #2a2631; color: var(--tekst); border: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.deck-rond[aria-pressed="true"] { background: var(--goud); color: var(--inkt); }
.deck-rond[hidden] { display: none; }
@keyframes draai { to { rotate: 1turn; } }

/* Hoe vaak gedraaid: een regel in het display, in de kleur van de tijd. */
.lcd-teller { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--cyaan) 75%, #fff); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lcd-teller[hidden] { display: none; }
/* Waar het liedje speelt (AirPlay, Chromecast): opvallend in goud, zodat je ziet dat het niet hier klinkt. */
.lcd-stream { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; font-weight: 700; color: var(--goud); }
.lcd-stream[hidden] { display: none; }
.lcd-stream .ico { width: 1rem; height: 1rem; animation: zend 1.6s ease-in-out infinite; }
@keyframes zend { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .lcd-stream .ico { animation: none; } }
.lcd-teller .ico { width: .95rem; height: .95rem; }
/* Het hartje: rood en gevuld als je er een gaf, met het aantal als een badge. */
.deck-hart { position: relative; }
.deck-hart .ico { transition: transform .2s var(--uit); }
.deck-hart[aria-pressed="true"] { background: #3b1426; color: #ff4f86; box-shadow: inset 0 0 0 1px #ff4f8666, 0 0 14px -2px #ff4f8680; }
.deck-hart[aria-pressed="true"] .ico { fill: currentColor; }
.hart-aantal {
  position: absolute; top: -.45rem; right: -.45rem; min-width: 1.35rem; padding: .1rem .3rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; text-align: center;
  color: #fff; background: #d81b5f; box-shadow: 0 0 0 2px #1b1820;
}
.hart-aantal:empty { display: none; }
.deck-hart.klopt .ico { animation: hartklop .55s var(--uit); }
.deck-hart.klopt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 #ff4f86; animation: hartgolf .6s ease-out;
}
@keyframes hartklop { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 55% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes hartgolf { from { box-shadow: 0 0 0 0 #ff4f86cc; } to { box-shadow: 0 0 0 14px #ff4f8600; } }
@media (prefers-reduced-motion: reduce) { .deck-hart.klopt .ico, .deck-hart.klopt::after { animation: none; } }
/* Op een smalle telefoon past naast CUE, PLAY en het hartje geen knop meer; volledig scherm heeft
   daar ook weinig zin (en een iPhone kent het niet). Kantel je de telefoon, dan is hij er weer. */
@media (max-width: 30em) { .deck [data-actie="volledig"] { display: none; } }

/* De positie in het display: een gloeiend spoor tot waar je bent. */
.fader {
  --voortgang: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: none; cursor: pointer;
}
.fader::-webkit-slider-runnable-track {
  height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--cyaan) var(--voortgang), #1a2a40 var(--voortgang));
}
.fader::-moz-range-track { height: 8px; border-radius: 4px; background: #1a2a40; }
.fader::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--cyaan); }
.fader::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: 22px; margin-top: -7px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px var(--cyaan); }
.fader::-moz-range-thumb { width: 6px; height: 22px; border: 0; border-radius: 2px; background: #fff; box-shadow: 0 0 8px var(--cyaan); }

/* Het spectrum in het display (public/js/spectrum.js tekent het). */
.spectrum { display: block; width: 100%; height: clamp(1.8rem, 5vw, 2.6rem); }

/* ── Home: de knoppenbank (grote tikvlakken, ook voor het digibord) ── */
.bank { padding: clamp(1.5rem, 4vw, 3rem) var(--rand) clamp(1rem, 3vw, 2rem); background: linear-gradient(180deg, #0f0b1c, var(--zwart)); }
.bank ul { list-style: none; margin: 0 auto; padding: 0; max-width: 90rem; display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 56em) { .bank ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flash {
  position: relative; display: grid; align-content: end; gap: .2rem; min-height: clamp(8.5rem, 22vw, 13rem); height: 100%;
  padding: clamp(1rem, 2.5vw, 1.6rem); border-radius: 16px; text-decoration: none; color: var(--tekst);
  background: linear-gradient(180deg, #221c33, #140f20);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 14px 30px -16px rgb(0 0 0 / .9);
  transition: transform .2s var(--uit), box-shadow .25s;
}
.flash::before { /* de LED-strook van de flashknop */
  content: ''; position: absolute; left: 1.1rem; right: 1.1rem; top: .7rem; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--k) 45%, #2a2238); transition: background .2s, box-shadow .2s;
}
.flash-goud { --k: var(--goud); } .flash-cyaan { --k: var(--cyaan); } .flash-magenta { --k: var(--magenta); } .flash-rood { --k: var(--rood); }
.flash-ico { width: clamp(2.2rem, 5vw, 3.2rem); height: auto; aspect-ratio: 1; color: var(--k); margin-bottom: auto; margin-top: .9rem; }
.flash strong { font: 400 clamp(1.4rem, 1rem + 1.8vw, 2.3rem)/1.05 var(--display); color: #fff; }
.flash span { color: var(--tekst-zacht); font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); line-height: 1.3; }
.flash:hover, .flash:focus-visible { transform: translateY(-4px); color: #fff; }
.flash:hover::before, .flash:focus-visible::before { background: var(--k); box-shadow: 0 0 14px var(--k); }
.flash:active { transform: translateY(1px); }

.strook { padding: 1.25rem var(--rand) clamp(2.5rem, 6vw, 4rem); text-align: center; color: var(--tekst-zacht); }
.strook p { margin: 0 auto; max-width: 60ch; text-wrap: balance; }
.strook .pijl { margin-left: .4rem; }

/* ── Home: het podium ── */
.podium-home {
  /* Vaste hoogte: Sint krimpt mee, zodat het mengpaneel altijd in het eerste scherm staat. */
  height: 100svh; min-height: 34rem; max-height: 75rem;
  display: grid; justify-items: center; align-content: start;
  grid-template-areas: 'doek' 'tekst' 'sint' 'deck';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 5rem var(--rand) max(1rem, env(safe-area-inset-bottom));
  text-align: center;
}

.podium-doek { grid-area: doek; width: min(30rem, 86vw); filter: drop-shadow(0 10px 24px rgb(0 0 0 / .6)); }
.podium-doek::before, .podium-doek::after { /* staalkabels waaraan het doek hangt */
  content: ''; position: absolute; top: 2.6rem; width: 2px; height: 1.6rem; background: linear-gradient(var(--alu), var(--alu-donker));
}
.podium-doek { position: relative; }
.podium-doek::before { left: 22%; top: -1.4rem; }
.podium-doek::after { right: 22%; top: -1.4rem; }
.podium-tekst { grid-area: tekst; margin-top: .4rem; }
.podium-tekst h1 { margin: 0; font-size: clamp(2.3rem, 1.2rem + 5.5vw, 5.2rem); }
.podium-regel { margin: .5rem 0 0; color: var(--tekst-zacht); font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); text-wrap: balance; }
.podium-regel a { color: inherit; }
.podium-sint { grid-area: sint; width: 100%; min-height: 0; display: flex; justify-content: center; align-items: flex-end; margin-top: .5rem; }
.podium-sint .sint { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.podium-sint img {
  width: auto; height: 100%; max-height: 62svh; max-width: min(100%, 44rem); object-fit: contain; object-position: bottom;
  /* Een vaste gloed: een schaduw die elk beeldje meebeweegt op een groot beeld is te zwaar voor een telefoon. */
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gloed-2) 25%, transparent));
}
.podium-home .podium-deck { grid-area: deck; }
.podium-deck { width: min(40rem, 100%); margin-top: -1.2rem; position: relative; z-index: 2; text-align: left; }

/* Telefoon staand: Sint groot in het midden, speakers half buiten beeld. */
@media (orientation: portrait) {
  .speaker { width: clamp(4.5rem, 22vw, 9rem); bottom: 20%; }
  .speaker-l { left: -9%; } .speaker-r { right: -9%; }
}
/* Liggend (telefoon dwars, tablet dwars, laptop, tv): twee kolommen, Sint groot rechts op de vloer. */
@media (orientation: landscape) {
  .podium-home {
    grid-template-areas: 'doek sint' 'tekst sint' 'deck sint';
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto 1fr;
    align-content: center; column-gap: clamp(1rem, 3vw, 3rem);
    padding-inline: clamp(1.25rem, 6vw, 7rem);
    text-align: left; justify-items: start;
  }
  .podium-doek { width: min(26rem, 32vw); align-self: end; }
  .podium-doek::before, .podium-doek::after { display: none; }
  .podium-tekst h1 { font-size: clamp(2rem, 4.4vw, 5.2rem); }
  .podium-sint { align-self: end; height: 100%; margin: 0; }
  .podium-sint img { max-height: none; max-width: 100%; }
  .podium-deck { margin-top: clamp(1rem, 3vh, 2rem); align-self: start; width: min(34rem, 100%); }
  .speaker { width: clamp(4rem, 7.5vw, 8rem); bottom: 6%; opacity: .9; }
  .speaker-l { left: -2.5rem; } .speaker-r { right: -2.5rem; }
}
/* Liggend en laag (telefoon dwars): alles compacter, geen speakers. */
@media (orientation: landscape) and (max-height: 40em) {
  .podium-home { min-height: 20rem; padding-top: 3.4rem; }
  .podium-doek { width: min(18rem, 32vw); }
  .podium-tekst h1 { font-size: clamp(1.6rem, 3.8vw, 3rem); }
  .podium-regel { font-size: 1rem; }
  .podium-deck .deck { --jog: 5.2rem; padding: .55rem .8rem; }
  .podium-deck .speel, .podium-deck .deck-cue { width: 3.2rem; }
  .speaker { display: none; }
}
@media (min-width: 120em) {
  :root { font-size: 125%; }
}

/* ── Welkom (home) ── */
/* Het logo staat in de kop; hier de titel groot naast Sint. Geen tweede truss. */
.podium-welkom .truss-rig { display: none; }
.podium-welkom .heads { top: -6px; }
.podium-welkom .bundel { top: 24px; }
.podium-welkom {
  grid-template-areas: 'tekst' 'sint'; grid-template-rows: auto auto;
  height: auto; min-height: calc(100svh - var(--kop-h)); max-height: none; padding-top: 2.6rem;
}
/* Staand: Sint onder de knoppen, groot maar niet hoger dan het halve scherm. */
.podium-welkom .podium-sint img { max-height: 48svh; }
.welkom-knoppen { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: .75rem; margin: 1.4rem 0 0; }
/* Staand: de drie knoppen onder elkaar, even breed. */
@media (orientation: portrait) {
  .welkom-knoppen { flex-direction: column; width: min(100%, 22rem); margin-inline: auto; }
  .welkom-knoppen > * { justify-content: center; }
}
.knop-groot { min-height: 58px; padding: .85rem 1.5rem; font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem) var(--display); }
@media (orientation: landscape) {
  .podium-welkom { grid-template-areas: 'tekst sint'; grid-template-rows: minmax(0, 1fr); height: calc(100svh - var(--kop-h)); padding-inline: clamp(1.25rem, 4vw, 4.5rem); }
  /* De titel, de zin en de knoppen als één blok in het midden van de linkerhelft, tegenover Sint. */
  .podium-welkom .podium-tekst { align-self: center; justify-self: center; margin: 0; text-align: center; }
  .podium-welkom .podium-tekst h1 { font-size: clamp(2.2rem, 5.4vw, 6.4rem); line-height: 1.02; }
  /* Liggend: de drie knoppen altijd op één rij; ze schalen mee met de kolom. */
  .podium-welkom .podium-tekst { container-type: inline-size; width: 100%; }
  .podium-welkom .welkom-knoppen { flex-wrap: nowrap; gap: clamp(.4rem, 1.4cqi, .75rem); }
  .podium-welkom .welkom-knoppen > * { min-height: clamp(48px, 9cqi, 58px); padding-inline: clamp(.7rem, 2.4cqi, 1.4rem); font-size: clamp(.9rem, 2.8cqi, 1.4rem); white-space: nowrap; }
  .podium-welkom .stream-tekst { font-size: clamp(.9rem, 2.6cqi, 1.05rem); }
  .podium-welkom .podium-sint img { max-height: 100%; }
  /* In het midden; past de rij niet (telefoon dwars), dan loopt hij rechts uit en niet links het beeld uit. */
  .podium-welkom .welkom-knoppen { justify-content: center; justify-content: safe center; }
}

/* De streamingknop: donker, met het logo in de kleur van de dienst. Zonder link: zichtbaar, niet klikbaar. */
/* Zelfde hoogte en vorm als de knoppen ernaast. */
.stream-knop {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; padding: .4rem 1.1rem .4rem .85rem; border-radius: 12px;
  background: #121212; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
}
a.stream-knop:hover { background: #1f1f1f; color: #fff; }
.stream-knop[aria-disabled="true"] { cursor: default; }
.welkom-knoppen .stream-knop { min-height: 58px; }
.stream-logo { width: 1.75rem; height: 1.75rem; color: #1ed760; }
.stream-tekst { display: grid; line-height: 1.1; text-align: left; font-weight: 700; font-size: 1.05rem; }
.stream-tekst small { font-weight: 400; font-size: .78rem; color: #b3b3b3; }

/* ── Binnenkort (het echte domein vóór de lancering) ── */
.podium-binnenkort { grid-template-areas: 'doek' 'tekst' 'sint'; grid-template-rows: auto auto minmax(0, 1fr); padding-top: 3.5rem; }
.podium-binnenkort .podium-regel { max-width: 34rem; margin-inline: auto; }
.binnenkort-tape { margin: 1rem 0 0; }
.binnenkort-tape .tape { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); padding: .3rem 1rem .2rem; rotate: -3deg; }
@media (orientation: landscape) {
  .podium-binnenkort { grid-template-areas: 'doek sint' 'tekst sint'; grid-template-rows: auto 1fr; }
  .podium-binnenkort .podium-regel { margin-inline: 0; }
}

/* ── Inhoudsblokken ── */
.blok { position: relative; padding: clamp(3rem, 8vw, 6.5rem) var(--rand); }
.blok + .blok { padding-top: clamp(1rem, 3vw, 2.5rem); }
.smal { max-width: var(--maat); margin: 0 auto; }
.blok h2:first-child, .smal > h2:first-child { margin-top: 0; }
.groot { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); line-height: 1.45; color: #fff; }
.intro { background: linear-gradient(180deg, var(--zwart), var(--nacht)); }
.verhaal-blok, .vragen-blok { background: var(--nacht); }
.truss-scheiding { position: absolute; inset: 0 0 auto; }

.doe-lijst { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* Flashknoppen van een lichttafel: een LED-strook bovenop die aangaat bij hover. */
.doe {
  display: flex; gap: .8rem; align-items: flex-start; height: 100%; padding: 1.1rem 1rem 1rem;
  color: var(--tekst); text-decoration: none; border-radius: 12px; position: relative;
  background: linear-gradient(180deg, #1e1830, #151022);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 10px 24px -14px rgb(0 0 0 / .9);
  transition: transform .2s var(--uit), background .2s;
}
.doe::before { content: ''; position: absolute; left: 1rem; right: 1rem; top: .45rem; height: 3px; border-radius: 2px; background: #3a3150; transition: background .2s, box-shadow .2s; }
.doe:hover { transform: translateY(-3px); color: #fff; }
.doe:hover::before, .doe:focus-visible::before { background: var(--goud); box-shadow: 0 0 10px var(--goud); }
.doe .ico { color: var(--goud); width: 1.6rem; height: 1.6rem; margin-top: .2rem; }
.doe span { display: grid; gap: .1rem; color: var(--tekst-zacht); font-size: .98rem; line-height: 1.35; }
.doe strong { color: #fff; font: 400 1.2rem/1.2 var(--display); }

.refrein-blok { padding-top: clamp(4rem, 9vw, 7rem); background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--rood) 18%, transparent), transparent 70%), var(--zwart); }
.refrein { margin: 0 0 1.5rem; padding: 0; }
.refrein p { margin: 0 0 .15em; font: 400 clamp(1.5rem, 1rem + 2.6vw, 2.9rem)/1.18 var(--display); color: #fff; }
.refrein p:nth-child(1) { color: var(--goud); }
.refrein p:nth-child(2) { color: var(--cyaan); }

.klas-blok { background: linear-gradient(180deg, var(--zwart), var(--nacht)); }

/* Vragen */
.vragen { border-top: 1px solid var(--lijn); }
.vragen details { border-bottom: 1px solid var(--lijn); }
.vragen summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.1rem 0; font-weight: 700; font-size: 1.1rem; color: #fff;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: '+'; font: 400 1.6rem/1 var(--display); color: var(--goud); transition: rotate .25s var(--uit); }
.vragen details[open] summary::after { rotate: 45deg; }
.vragen details p { color: var(--tekst-zacht); margin: 0 0 1.25rem; max-width: 62ch; }

/* Streaming */
.streaming { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }

/* Gaffatape met stift: labels die de crew op alles plakt. */
.tape {
  display: inline-block; padding: .3rem 1.05rem .2rem; font: 400 1rem/1.2 var(--stift); color: var(--gaffa-stift); background: var(--tape-doek);
  -webkit-mask: var(--tape-masker); mask: var(--tape-masker); rotate: -1.2deg; letter-spacing: .01em;
}

/* Feiten */
.feiten { display: grid; gap: 0; margin: 1.5rem 0; border-top: 1px solid var(--lijn); }
.feiten > div { display: grid; grid-template-columns: minmax(7rem, 30%) 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--lijn); }
.feiten dt { color: var(--tekst-zacht); }
.feiten dd { margin: 0; color: #fff; }

.lijst { padding-left: 1.2rem; }
.lijst li { margin-bottom: .5rem; }
.lijst li::marker { color: var(--goud); }

/* ── Nummerpagina ── */
.podium-nummer { padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(3rem, 6vw, 5rem); }
.podium-nummer .rig .truss-rig { display: none; }
.podium-nummer .heads { top: 0; }
.nummer-rij { max-width: 76rem; margin: 0 auto; display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52em) { .nummer-rij { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
/* Ruimte rechts van de hoes voor de plaat (een derde schuift eruit), zodat hij nooit over de tekst valt. */
.hoes-vak { position: relative; width: min(70%, 28rem); justify-self: start; margin-right: auto; }
.hoes-vak .hoes img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .9), 0 0 60px -10px color-mix(in srgb, var(--gloed-1) 50%, transparent); }
.hoes-vak .hoes { position: relative; z-index: 2; }
.plaat {
  position: absolute; inset: 3%; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, var(--goud) 0 3%, #111 3.5% 16%, transparent 16.5%),
    repeating-radial-gradient(circle, #121212 0 2px, #1d1d1d 2px 4px);
  transition: translate .8s var(--uit);
}
.speelt .plaat { translate: 37% 0; animation: draai 1.8s linear infinite; }
/* Op de liedjespagina (zonder speler) steekt de plaat half uit de hoes, als in de platenzaak. */
.podium-nummer .plaat { translate: 30% 0; }
.nummer-info h1 { margin-bottom: .3rem; }
.nummer-info .podium-regel { margin-bottom: 1.5rem; }
.snel { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.opbouw { padding-left: 0; list-style: none; counter-reset: stuk; display: grid; gap: .1rem; }
.opbouw li { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--lijn); }
.opbouw strong { font-family: var(--display); font-weight: 400; color: var(--goud); }
.opbouw span { color: var(--tekst-zacht); }
.opbouw q { grid-column: 1 / -1; color: #fff; quotes: '“' '”'; font-style: italic; }

/* ── Songtekst ── */
.tekst-pagina { padding-top: clamp(2rem, 5vw, 3.5rem); }
.songtekst { margin-top: 2.5rem; display: grid; gap: 2.2rem; }
.couplet h2 { margin: 0 0 .7rem; font-size: 1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.couplet h2 small { font: 400 .95rem var(--body); color: var(--tekst-zacht); }
.songtekst { container-type: inline-size; }
.couplet p { margin: 0; font-size: clamp(1.05rem, 4.3cqi, 1.5rem); line-height: 1.5; color: #fff; text-wrap: balance; }
.couplet.gesproken p { font-style: italic; color: var(--tekst-zacht); }
.voetnoot { margin-top: 3rem; color: var(--tekst-zacht); font-size: .95rem; }

/* ── Meezingen ── */
.meezing-rol {
  overflow-y: auto; scroll-behavior: smooth; padding: 6vh 0 60vh; text-align: center; scrollbar-width: none;
  mask-image: linear-gradient(transparent, #000 10%, #000 70%, transparent);
}
.meezing-rol::-webkit-scrollbar { display: none; }
.meezing-rol .couplet { margin: 0 auto 2.5rem; max-width: min(100%, 72rem); }
.meezing-rol .couplet h2 { justify-content: center; }
.meezing-rol { container-type: inline-size; }
/* De langste regel ("Flits flits flits, daar gaan de lampen aan!", 43 tekens) past net op één rij:
   de letters schalen met de breedte van de kolom. Moet hij toch breken (smalle telefoon), dan
   in twee gelijke stukken. */
.meezing-rol .regel {
  font: 400 clamp(1.2rem, 3.9cqi, 3.6rem)/1.25 var(--display); text-wrap: balance;
  color: color-mix(in srgb, var(--tekst) 45%, transparent); transition: color .3s, transform .3s var(--uit), text-shadow .3s;
}
.meezing-rol { position: relative; }
.meezing-rol .regel.nu { color: var(--goud); text-shadow: 0 0 24px color-mix(in srgb, var(--goud) 35%, transparent); }
.meezing-rol .regel.geweest { color: color-mix(in srgb, var(--tekst) 30%, transparent); }
.meezing-rol.zonder-tijden .regel { color: #fff; }
.tv-modus .meezing-rol .regel { font-size: clamp(1.4rem, 3.9cqi, 5.5rem); }

/* ── Het speelpodium: de meelopende tekst of het dansje, met het DJ-deck (home, meezingen, dansje, tv) ── */
.speelpodium {
  height: calc(100svh - var(--kop-h)); min-height: 30rem; max-height: 80rem;
  display: grid; gap: .6rem clamp(1rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'kop' 'midden' 'deck';
  padding: .9rem var(--rand) max(1rem, env(safe-area-inset-bottom));
}
.speelpodium.tv { height: 100svh; max-height: none; }
/* Onder de kop hangt het rig al aan de truss van de kop: geen tweede truss, de heads net eronder en
   de titel daaronder, zodat de lampen niet over de letters vallen. */
.speelpodium:not(.tv) .truss-rig { display: none; }
.speelpodium:not(.tv) .heads { top: -6px; }
.speelpodium:not(.tv) .bundel { top: 24px; }
.speelpodium { padding-top: 2.6rem; }
.speelpodium.tv { padding-top: 4rem; }
.speelpodium:fullscreen { height: 100vh; max-height: none; }
/* Volledig scherm en tv-modus: geen kop van de site, dus het logo links naast de titel, en de truss
   terug zodat de lampen er weer aan hangen. */
.sp-kop-links { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.6rem); min-width: 0; }
.sp-logo { display: none; flex: none; width: clamp(9rem, 14vw, 16rem); filter: drop-shadow(0 6px 14px rgb(0 0 0 / .5)); }
.sp-logo img { display: block; width: 100%; height: auto; }
.speelpodium:fullscreen .sp-logo, .speelpodium.tv .sp-logo { display: block; }
.speelpodium:fullscreen { padding-top: 4rem; }
.speelpodium:fullscreen .truss-rig { display: block; }
.speelpodium:fullscreen .heads { top: 22px; }
.speelpodium:fullscreen .bundel { top: 52px; }
.sp-kop { grid-area: kop; display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; position: relative; z-index: 3; }
/* De titel in dezelfde stijl als de regel die gezongen wordt. */
.sp-kop h1 {
  margin: 0; font: 400 clamp(1.35rem, 1rem + 2vw, 3rem)/1.15 var(--display);
  color: var(--goud); text-shadow: 0 0 24px color-mix(in srgb, var(--goud) 35%, transparent);
}
/* Tekst | Dansje: een schakelaar zoals de knoppen op een mengpaneel. */
.modus { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: #17121f; box-shadow: inset 0 1px 3px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06); }
.modus button {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .45rem 1.05rem; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--tekst-zacht); font: 400 clamp(1rem, .9rem + .4vw, 1.25rem) var(--display); transition: background .2s, color .2s;
}
.modus button:hover { color: #fff; }
/* Naast de schakelaar: de Spotify-knop, even hoog. Op een smalle telefoon staat hij op de home. */
.sp-kop-rechts { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sp-kop .stream-knop { min-height: 54px; }
@media (max-width: 30em) { .sp-kop .stream-knop { display: none; } }
/* Een pdf die in de pagina geladen wordt om te printen (site.js): niet in beeld. */
iframe.print-pdf { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
.modus button[aria-pressed="true"] { background: var(--goud); color: var(--inkt); box-shadow: 0 0 16px color-mix(in srgb, var(--goud) 45%, transparent); }

.speelpodium .meezing-rol { grid-area: midden; min-height: 0; }
.speelpodium .podium-deck { grid-area: deck; width: min(44rem, 100%); justify-self: center; margin: 0; position: relative; z-index: 3; }
.sp-beeld { grid-area: beeld; position: relative; min-height: 0; display: none; }
.sp-dans { grid-area: opdracht; display: none; text-align: center; align-self: center; position: relative; z-index: 2; }

/* Wat bij welke modus hoort. */
.speelpodium[data-modus="tekst"] .dans-sint { display: none; }
.speelpodium[data-modus="dans"] .meezing-rol, .speelpodium[data-modus="dans"] .sp-dj { display: none; }
.speelpodium[data-modus="dans"] .sp-beeld { display: block; }
.speelpodium[data-modus="dans"] .sp-dans { display: block; }
/* Staand dansje: opdracht boven, Sint groot in het midden. */
.speelpodium[data-modus="dans"] { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: 'kop' 'opdracht' 'beeld' 'deck'; }

/* Sint achter de decks (tekst) en Sint als voordanser (dansje) vullen hun vak, onderaan op de vloer. */
.sp-dj, .dans-sint { position: absolute; inset: 0; }
.sp-dj .sint { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.sp-dj img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gloed-2) 25%, transparent)); }
.dans-beeld { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.94); transition: opacity .22s, transform .4s var(--uit); }
.dans-beeld.nu { opacity: 1; transform: none; }
/* De pose staat op een paars podium; met een zachte rand smelt dat in het lichtrig. */
.dans-beeld img { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }

.dans-kort { margin: 0; font: 400 clamp(2.4rem, 1.2rem + 6vw, 7.5rem)/1 var(--display); color: var(--goud); text-shadow: 0 0 30px color-mix(in srgb, var(--goud) 40%, transparent); }
.dans-kort.in { animation: pop .45s var(--uit); }
@keyframes pop { from { opacity: 0; transform: scale(.75); } }
.dans-doe { margin: .5rem auto 0; max-width: 32ch; color: var(--tekst); font-size: clamp(1.05rem, .9rem + .8vw, 1.7rem); line-height: 1.35; }
.dans-straks { display: inline-flex; align-items: center; gap: .5rem; margin: 1rem 0 0; padding: .35rem .9rem; border-radius: 999px; background: rgb(255 255 255 / .08); color: var(--tekst-zacht); }
.dans-straks[hidden] { display: none; }
.dans-straks strong { font: 400 1.15rem var(--display); color: #fff; }
.speelpodium .aanwijzing { top: .75rem; }

/* Liggend (tablet dwars, laptop, digibord, tv): Sint links, tekst of opdracht rechts. */
@media (orientation: landscape) {
  .speelpodium, .speelpodium[data-modus="dans"] {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .speelpodium { grid-template-areas: 'kop kop' 'beeld midden' 'beeld deck'; }
  .speelpodium[data-modus="dans"] { grid-template-areas: 'kop kop' 'beeld opdracht' 'beeld deck'; }
  .speelpodium .sp-beeld { display: block; }
  /* Het deck in het midden van de kolom, op dezelfde middenlijn als de tekst erboven. */
  .speelpodium .podium-deck { justify-self: center; width: 100%; max-width: 44rem; }
}

/* Liggend met speakers in beeld: aan beide kanten zoveel ruimte als de speakers innemen, plus wat
   lucht tot het deck. (Op een liggende telefoon zijn de speakers weg; daar de gewone rand.) */
@media (orientation: landscape) and (min-height: 40em) {
  .speelpodium { padding-inline: max(var(--rand), calc(clamp(4rem, 7.5vw, 8rem) - 1rem)); }
}

/* De lijst met bewegingen onder het dansje. */
.dans-lijst { background: var(--nacht); }
.dans-lijst .smal { max-width: 72rem; }
.dans-lijst .dans-stappen { list-style: none; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.dans-lijst .dans-stappen li { display: block; }
.dans-lijst .dans-stappen li::before { content: none; }
.dans-stap {
  width: 100%; height: 100%; display: grid; grid-template-columns: 5.5rem 1fr; gap: .9rem; align-items: center; text-align: left; cursor: pointer;
  padding: .6rem; border: 0; border-radius: 14px; color: var(--tekst); background: linear-gradient(180deg, #221c33, #160f22); font: inherit;
  transition: transform .2s var(--uit);
}
.dans-stap:hover { transform: translateY(-3px); }
.dans-stap img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.dans-stap > span { display: grid; gap: .15rem; }
.dans-stap strong { font: 400 1.35rem/1.1 var(--display); color: var(--goud); }
.dans-stap q { color: #fff; font-style: italic; quotes: '“' '”'; }
.dans-stap span span { color: var(--tekst-zacht); font-size: .95rem; line-height: 1.35; }

/* ── Kleurplaten: vellen papier met gaffatape op de achterwand van het podium ── */
.kleurplaten {
  padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--paars) 35%, transparent), transparent 70%),
    linear-gradient(180deg, #120c22, var(--zwart));
}
.kp-kop { max-width: 46rem; margin: 0 auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
.kp-kop h1 { margin-bottom: .4rem; }
.kp-kop .knoppen-rij { justify-content: center; }
.kp-wand {
  list-style: none; margin: 0 auto; padding: 0; max-width: 84rem;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.kp-vel { --scheef: -1.2deg; }
.kp-vel:nth-child(3n + 2) { --scheef: 1deg; }
.kp-vel:nth-child(3n) { --scheef: -.5deg; }
.kp-vel { display: flex; }
/* Knoppen altijd op dezelfde hoogte: de tekst groeit, de knoppen staan onderaan. */
.kp-vel figure { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: .9rem; width: 100%; }
.kp-beeld {
  position: relative; display: block; background: #fff; padding: 4%;
  rotate: var(--scheef); box-shadow: 0 18px 40px -16px rgb(0 0 0 / .85), 0 2px 0 rgb(0 0 0 / .2);
  transition: rotate .3s var(--uit), transform .3s var(--uit);
}
/* Gaffatape: één stuk bovenaan elk vel, elk net iets anders schuin, zoals snel opgeplakt. */
.kp-beeld::before {
  content: ''; position: absolute; top: -16px; left: 31%; width: 38%; height: 34px; background: var(--tape-doek);
  -webkit-mask: var(--tape-masker); mask: var(--tape-masker); box-shadow: 0 2px 4px rgb(0 0 0 / .35); rotate: var(--tape-hoek, 4deg);
}
.kp-vel:nth-child(6n + 1) { --tape-hoek: -4deg; }
.kp-vel:nth-child(6n + 2) { --tape-hoek: 3deg; }
.kp-vel:nth-child(6n + 3) { --tape-hoek: -1.5deg; }
.kp-vel:nth-child(6n + 4) { --tape-hoek: 6deg; }
.kp-vel:nth-child(6n + 5) { --tape-hoek: -6deg; }
.kp-vel:nth-child(6n) { --tape-hoek: 2deg; }
.kp-beeld img { width: 100%; height: auto; aspect-ratio: 960 / 1358; object-fit: contain; }
.kp-beeld:hover, .kp-beeld:focus-visible { rotate: 0deg; transform: translateY(-6px); }
.kp-vel figcaption { display: flex; flex-direction: column; gap: .25rem; padding: 0 .25rem; }
.kp-vel h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); color: #fff; }
.kp-vel q { color: var(--tekst-zacht); font-style: italic; quotes: '“' '”'; }
.kp-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.kp-voet { max-width: 46rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: center; color: var(--tekst-zacht); }

/* ── Songtekst: het tekstblad bij de DJ-booth ── */
.tekstblad {
  max-width: 82rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(3rem, 6vw, 5rem);
  display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60em) { .tekstblad { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); align-items: start; } }
.tb-zij { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 60em) { .tb-zij { position: sticky; top: 1.5rem; } }
.tb-zij h1 { margin: 0; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); }
.tb-zij h1 span { display: block; font-size: .5em; color: #fff; text-shadow: none; margin-top: .3rem; }
.tb-van { margin: 0; color: var(--tekst-zacht); }
.tb-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.tb-knoppen .knop { min-height: 44px; padding: .5rem .8rem; font-size: 1rem; }
/* De drie knoppen op één rij, ook op een gewone telefoon. */
@media (min-width: 23em) { .tb-knoppen { flex-wrap: nowrap; } }
/* De setlist: een vel papier dat met gaffa op de DJ-booth geplakt zit, met stift geschreven.
   Tik op een stuk om ernaartoe te springen. Alleen naast de tekst; op een telefoon staat de tekst
   er gewoon onder. */
.tb-setlist {
  position: relative; display: none; margin-top: 1.4rem; padding: 1.4rem 1.3rem 1.1rem; rotate: -1.2deg;
  color: #1d1a24; background: linear-gradient(180deg, #fffdf6, #f3efe2);
  box-shadow: 0 18px 34px -16px rgb(0 0 0 / .9), 0 1px 0 rgb(0 0 0 / .2);
}
@media (min-width: 60em) { .tb-setlist { display: block; } }
.tb-setlist::before {
  content: ''; position: absolute; top: -15px; left: 30%; width: 40%; height: 32px; rotate: 3deg;
  background: var(--tape-doek); -webkit-mask: var(--tape-masker); mask: var(--tape-masker); box-shadow: 0 2px 4px rgb(0 0 0 / .35);
}
.tb-setlist-kop { margin: 0 0 .6rem; font: 400 1.5rem/1 var(--stift); letter-spacing: .04em; text-transform: uppercase; color: #1d1a24; }
/* Twee kolommen van boven naar beneden (acht regels per kolom; een langer liedje krijgt een derde). */
.tb-setlist ol { display: grid; grid-template-rows: repeat(8, auto); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 1rem; margin: 0; padding: 0; list-style: none; counter-reset: set; }
.tb-setlist li { counter-increment: set; margin: 0; }
.tb-setlist a {
  display: flex; gap: .4rem; align-items: baseline; padding: .2rem .25rem; border-radius: 4px;
  font: 400 1rem/1.25 var(--stift); color: #1d1a24; text-decoration: none;
}
.tb-setlist a::before { content: counter(set) '.'; min-width: 1.3em; font-size: .8em; color: #8a8496; }
.tb-setlist .sl-refrein a { color: #c2185b; }
.tb-setlist a:hover, .tb-setlist a:focus-visible { background: #ffe58a; }
/* Het blad: twee kolommen op brede schermen, het refrein in goud. */
.tb-blad { margin: 0; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--radius); background: linear-gradient(180deg, #17112a, #110c1e); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
@media (min-width: 72em) { .tb-blad { display: block; columns: 2; column-gap: 3rem; } .tb-blad .couplet { break-inside: avoid; margin-bottom: 2rem; } }
.tb-blad .couplet { scroll-margin-top: 1.5rem; }
.tb-blad .refrein-couplet p { color: var(--goud); }
.tb-blad .voetnoot { column-span: all; margin-top: 1rem; }
.tb-print, .tb-print-voet { display: none; }

/* ── Voor de klas: een lesplan ── */
.lesplan { max-width: 72rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(3rem, 6vw, 5rem); }
.lp-kop { display: grid; gap: 1.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 44em) { .lp-kop { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.lp-kop h1 { margin-bottom: .4rem; }
.lp-sint { justify-self: center; width: min(100%, 24rem); }
.lp-sint img { width: 100%; height: auto; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
/* De stappen op volgorde, met de tijd als een label op de lijn. */
.lp-stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; display: grid; gap: 0; position: relative; }
.lp-stappen::before { content: ''; position: absolute; left: 2.6rem; top: 1rem; bottom: 1rem; width: 3px; background: linear-gradient(var(--goud), var(--magenta), var(--cyaan)); border-radius: 2px; opacity: .6; }
.lp-stappen > li { counter-increment: stap; display: grid; grid-template-columns: 5.2rem 1fr; gap: 1.1rem; padding: 1.1rem 0; position: relative; }
.lp-tijd {
  justify-self: center; align-self: start; position: relative; z-index: 1; display: grid; place-items: center; width: 4.6rem; aspect-ratio: 1; border-radius: 50%;
  font: 400 1rem/1.05 var(--display); text-align: center; color: var(--inkt); background: var(--goud); box-shadow: 0 0 0 5px var(--zwart);
}
.lp-stappen h2 { margin: .2rem 0 .4rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); display: flex; gap: .5rem; align-items: center; }
.lp-stappen h2 .ico { color: var(--goud); }
.lp-stappen p { margin: 0; color: var(--tekst-zacht); max-width: 56ch; text-wrap: balance; }
.lp-stappen .lijst { margin: .3rem 0 0; color: var(--tekst-zacht); }

/* ── Over: een backstage-pas aan een koord ── */
.over { max-width: 74rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(3rem, 6vw, 5rem); display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 44em) { .over { grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); } }
.pas-vak { position: relative; padding-top: 4.5rem; justify-self: center; width: min(100%, 19rem); }
.pas-vak::before { /* het koord */
  content: ''; position: absolute; left: 50%; top: 0; width: 60%; height: 5.4rem; translate: -50% 0;
  border: 7px solid var(--rood); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .9;
}
.pas {
  position: relative; display: grid; gap: .8rem; justify-items: center; padding: 1.6rem 1.2rem 1.3rem; border-radius: 16px;
  background: linear-gradient(160deg, #fff 0%, #f1ecff 100%); color: var(--inkt); rotate: -3deg;
  box-shadow: 0 30px 50px -20px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(0 0 0 / .08);
}
.pas-gat { position: absolute; top: .7rem; left: 50%; translate: -50% 0; width: 3.2rem; height: .7rem; border-radius: 999px; background: var(--zwart); }
.pas-band { margin-top: .6rem; width: calc(100% + 2.4rem); padding: .35rem 0; text-align: center; font: 400 1.15rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--rood); }
.pas-logo { width: 85%; }
.pas-foto { width: 7rem; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.pas dl { margin: 0; width: 100%; display: grid; gap: .35rem; }
.pas dl div { display: flex; justify-content: space-between; gap: .75rem; border-top: 1px dashed rgb(0 0 0 / .18); padding-top: .35rem; font-size: .95rem; }
.pas dt { font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; color: #6a5a8a; }
.pas dd { margin: 0; font-weight: 700; }
.over-tekst h1 { margin-bottom: .5rem; }
.over-contact { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.over-contact .ico { color: var(--goud); }

/* ── Pers: de perskit ── */
.perskit { max-width: 76rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(3rem, 6vw, 5rem); }
.pk-kop { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; padding-bottom: clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--lijn); }
.pk-kop > div { flex: 1 1 26rem; }
.pk-kop h1 { margin-bottom: .3rem; }
.pk-kop .groot { margin: 0; }
.pk-tegels { list-style: none; padding: 0; margin: clamp(1.5rem, 4vw, 2.5rem) 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
/* Drie tegels naast elkaar vanaf tabletbreedte, zodat er geen los op een tweede rij valt. */
@media (min-width: 40em) { .pk-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pk-tegel {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: .8rem 1rem; align-items: center; padding: 1rem; height: 100%;
  border-radius: var(--radius); color: var(--tekst); text-decoration: none; background: linear-gradient(180deg, #1e1830, #140f20);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); transition: transform .2s var(--uit);
}
.pk-tegel:hover { transform: translateY(-3px); color: #fff; }
.pk-tegel > .ico { color: var(--goud); width: 1.6rem; height: 1.6rem; }
.pk-beeld, .pk-beeld img { grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 10px; }
.pk-beeld img { object-fit: cover; }
.pk-transparant { padding: 1rem; background: repeating-conic-gradient(#1c1530 0 25%, #241b3b 0 50%) 0 0 / 20px 20px; }
.pk-naam { display: grid; }
.pk-naam strong { font: 400 1.3rem var(--display); }
.pk-naam small { color: var(--tekst-zacht); }
.pk-bios { display: grid; gap: clamp(1.25rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56em) { .pk-bios { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.pk-bios h2, .pk-onder h2 { margin-top: 0; font-size: 1.5rem; }
.pk-onder { display: grid; gap: clamp(1.25rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); margin-top: clamp(1.5rem, 4vw, 2.5rem); padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--lijn); }
@media (min-width: 56em) { .pk-onder { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } }

/* ── Privacy: drie toezeggingen, daaronder de details ── */
.privacy { padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(3rem, 6vw, 5rem); }
.beloftes { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.beloftes li { display: grid; justify-items: center; gap: .5rem; padding: 1.2rem .9rem; text-align: center; border-radius: var(--radius); background: linear-gradient(180deg, #1e1830, #140f20); }
.beloftes .ico { width: 2.2rem; height: 2.2rem; color: var(--goud); }
.beloftes strong { font: 400 1.2rem/1.2 var(--display); color: #fff; text-wrap: balance; }

/* ── Klas en pers ── */
.klas-stappen { display: grid; gap: 1.5rem; margin: 2rem 0; }
.klas-stappen h2 { font-size: 1.4rem; margin: 0 0 .4rem; display: flex; gap: .5rem; align-items: center; }
.klas-stappen h2 .ico { color: var(--goud); }
.klas-stappen p { margin: 0; color: var(--tekst-zacht); }
.dans-stappen { list-style: none; padding: 0; counter-reset: dans; display: grid; gap: 1rem; margin: 2rem 0; }
.dans-stappen li { counter-increment: dans; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; align-items: start; }
.dans-stappen li::before {
  content: counter(dans); grid-row: span 2; display: grid; place-items: center; width: 3rem; aspect-ratio: 1; border-radius: 50%;
  font: 400 1.3rem var(--display); color: var(--inkt); background: var(--goud);
}
.dans-stappen q { font: 400 1.3rem/1.2 var(--display); color: #fff; quotes: '“' '”'; }
.dans-stappen p { margin: .2rem 0 0; color: var(--tekst-zacht); }
.pers-beelden { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.pers-beelden li { display: grid; gap: .5rem; align-content: start; }
.pers-beeld, .pers-beeld img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--nacht); border-radius: 8px; }
.pers-transparant { padding: .75rem; background: repeating-conic-gradient(#1c1530 0 25%, #241b3b 0 50%) 0 0 / 20px 20px; }

/* ── 404 ── */
.podium-404 { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 6rem var(--rand) 3rem; }

/* ── Voet ── */
.voet { background: #07050e; border-top: 1px solid var(--lijn); padding: 3rem var(--rand) max(2rem, env(safe-area-inset-bottom)); color: var(--tekst-zacht); font-size: .98rem; }
.voet-binnen { max-width: 76rem; margin: 0 auto; display: grid; gap: 2rem; }
@media (min-width: 52em) { .voet-binnen { grid-template-columns: 1.2fr 1fr; } }
.voet-logo { width: 11rem; margin-bottom: 1rem; }
.voet ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.voet li { margin-bottom: .55rem; }
.voet a { color: var(--tekst); }
.voet-klein { grid-column: 1 / -1; margin: 0; font-size: .9rem; border-top: 1px solid var(--lijn); padding-top: 1.25rem; }

/* ── Toestemming (alleen met GA_ID) ── */
.toestemming {
  position: fixed; z-index: 50; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); translate: -50% 0;
  width: min(36rem, calc(100% - 2rem)); padding: 1.1rem 1.2rem;
  background: #1a1428; border: 1px solid var(--lijn); border-radius: var(--radius); box-shadow: 0 24px 60px rgb(0 0 0 / .7);
  font-size: .98rem;
}
.toestemming p { margin: 0 0 .8rem; color: var(--tekst-zacht); }
.toestemming strong { color: #fff; }
.toestemming-knoppen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* ── Effecten op de muziek (public/js/effecten.js) ── */
/* Flits: een korte gloed over het hele podium, in wit of in de kleur uit de tekst. Nooit vaker dan
   drie keer per seconde (WCAG 2.3.1), en weg bij prefers-reduced-motion. */
.flitser {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(80% 70% at 50% 30%, var(--flits-kleur, #fff), transparent 75%);
}
/* Flits (op "flits flits flits"): meteen fel en in 0,4 s weg, zoals bij Dutch AV. Gloei (bij een
   kleurwissel): rustig. */
.podium.flits .flitser { animation: flits .4s ease-out; }
@keyframes flits { 0% { opacity: .75; } 100% { opacity: 0; } }
.podium.gloei .flitser { animation: gloei .9s ease-in-out; }
@keyframes gloei { 0% { opacity: 0; } 35% { opacity: .28; } 100% { opacity: 0; } }
.podium.gekleurd { --gloed-1: var(--flits-kleur); --gloed-2: var(--flits-kleur); }
/* Een gezongen kleur: alle lampen tegelijk en meteen in die kleur (de kleuren komen een halve seconde
   na elkaar); daarna vloeien ze rustig terug naar magenta, cyaan en blauw. */
.podium.gekleurd .head:nth-child(n), .podium.gekleurd .bundel:nth-child(n) { --kleur: var(--flits-kleur); transition-duration: .1s; }

/* Boem: de speakers dreunen, Sint veert mee. */
.podium.boem .speaker { animation: speaker-boem .26s ease-out; }
.podium.boem .podium-sint img, .podium.boem .hoes-vak { animation: veer .26s ease-out; }
@keyframes speaker-boem { 30% { scale: 1.07; filter: brightness(1.4); } }
@keyframes veer { 30% { translate: 0 5px; } }

/* Vol: alle bundels fel en breed (lampen aan, "zet 'm maar hard", de drop). */
.podium.vol .bundels { --basis: .45; --kracht: .5; }
.podium.vol .haze { opacity: 1; }

/* Struikel (Piet valt over de kabel): de heads wiebelen alle kanten op en de bundels zwaaien mee; het
   licht flikkert en valt even uit. Sint schrikt. */
.podium.struikel .head i { animation: wiebel .3s ease-in-out 4 alternate; }
.podium.struikel .bundel { animation: wiebel .3s ease-in-out 4 alternate, uitval 1.2s linear; }
.podium.struikel .head i::after { animation: uitval 1.2s linear; }
/* Na het struikelen: de lampen blijven uit (effecten.js, "donker") en komen bij "Lieve kinderen"
   langzaam terug ("terug"). */
.podium.donker .bundel, .podium.donker .head i::after { opacity: 0; }
.podium.terug .bundel, .podium.terug .head i::after { transition: opacity 4s ease-in; }
/* Zonder begin en eind: vanaf de gewone helderheid en daar weer naartoe. */
@keyframes uitval { 8% { opacity: .1; } 14% { opacity: .9; } 20%, 80% { opacity: 0; } }
.podium.struikel .podium-sint img, .podium.struikel .hoes-vak { animation: schrik 1s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 50% 100%; }
@keyframes wiebel { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }
@keyframes schrik { 15% { rotate: -5deg; } 40% { rotate: 3deg; } 70% { rotate: -1deg; } }


/* Aanwijzing voor het dansje (en meldingen van het streamen): groot, ook op het digibord leesbaar. */
.aanwijzing {
  position: absolute; z-index: 5; left: 50%; top: clamp(5.5rem, 16vh, 9rem); translate: -50% 0;
  display: flex; align-items: center; gap: .7rem; max-width: calc(100% - 2rem);
  padding: .7rem 1.3rem .65rem; border-radius: 999px;
  font: 400 clamp(1.25rem, .9rem + 2vw, 2.6rem)/1.1 var(--display); color: var(--inkt); background: var(--goud);
  box-shadow: 0 14px 40px -8px rgb(0 0 0 / .7), 0 0 0 4px rgb(255 255 255 / .15);
  pointer-events: none; white-space: nowrap;
}
.aanwijzing[hidden] { display: none; }
.aanwijzing .ico { width: 1.2em; height: 1.2em; }
.aanwijzing.in { animation: aanwijzing 2.6s var(--uit) both; }
@keyframes aanwijzing { 0% { opacity: 0; transform: translateY(-14px) scale(.9); } 10%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
/* Op een telefoon geen dansaanwijzingen over het beeld: te druk op een klein scherm. Meldingen over het
   streamen (AirPlay, Chromecast) blijven wel. */
@media (max-width: 40em), (orientation: landscape) and (max-height: 32em) {
  .aanwijzing[data-soort="hint"] { display: none; }
}
/* Bij Sint: onderin zijn beeld, over de draaitafels. */
.sp-beeld > .aanwijzing { top: auto; bottom: 8%; font-size: clamp(1.15rem, .8rem + 1.7vw, 2.3rem); }

/* Confetti en vuurwerk over de hele pagina. */
.feest { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }
.feest[hidden] { display: none; }

/* Streamknoppen in het deck. */
.deck-extra { display: flex; gap: .5rem; margin-left: auto; }
.deck-extra .deck-rond { margin-left: 0; }
.deck-rond.verbindt { animation: verbindt 1s ease-in-out infinite; }
@keyframes verbindt { 50% { background: color-mix(in srgb, var(--goud) 40%, #2a2631); } }

@media (prefers-reduced-motion: reduce) {
  .flitser, .feest { display: none; }
}

/* ── Liggend en laag (telefoon dwars, max. 32em hoog): compacte kop, alles naast elkaar ── */
@media (orientation: landscape) and (max-height: 32em) {
  :root { --kop-h: calc(.85rem + 18px + max(7.5rem * .2992, 38px)); }
  .kop .truss { height: 18px; background-size: 100% 5px, 100% 5px, 24px 18px; }
  .kop-binnen { padding-top: .5rem; padding-bottom: calc(18px + .35rem); }
  .kop-logo { width: 7.5rem; }
  .menu-knop { min-height: 38px; padding-block: .3rem; }

  /* Home: kleiner doek, de tekst en knoppen passen naast Sint. */
  .podium-welkom { height: auto; min-height: calc(100svh - var(--kop-h)); padding-top: 1.6rem; padding-bottom: 1rem; }
  .podium-welkom .podium-tekst h1 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
  .podium-welkom .podium-regel { font-size: .95rem; }
  .podium-welkom .welkom-knoppen { margin-top: .8rem; }
  .podium-welkom .podium-sint img { max-height: calc(100svh - var(--kop-h) - 1rem); }

  /* Het liedje: hoes en tekst naast elkaar. */
  .nummer-rij { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .hoes-vak { width: min(70%, 15rem); }
  .podium-nummer { padding-top: 1.5rem; }

  /* Speelpodium: geen titel (de knoppen Tekst | Dansje blijven), tekst of Sint links, deck rechts. */
  .speelpodium { padding-top: 1.4rem; gap: .4rem 1rem; height: calc(100svh - var(--kop-h)); min-height: 17rem; }
  .speelpodium .sp-kop { justify-content: flex-end; }
  .speelpodium .sp-kop h1 { display: none; }
  .speelpodium, .speelpodium[data-modus="dans"] { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .speelpodium { grid-template-areas: 'kop kop' 'midden deck' 'midden deck'; }
  .speelpodium[data-modus="tekst"] .sp-beeld { display: none; }
  .speelpodium .podium-deck { align-self: end; }
  .speelpodium[data-modus="dans"] { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: 'kop kop' 'beeld opdracht' 'beeld deck'; }
  .speelpodium .dans-kort { font-size: clamp(1.6rem, 5vw, 2.6rem); }
  .speelpodium .dans-doe { display: none; }
  .speelpodium .dans-straks { margin-top: .4rem; }
  .speelpodium .meezing-rol .regel { font-size: clamp(1.05rem, 3.6cqi, 1.6rem); }
  .speelpodium .podium-deck .deck { --jog: 4.2rem; gap: .6rem; }
  .speelpodium .speel, .speelpodium .deck-cue { width: 2.9rem; }
  .speelpodium .spectrum { height: 1.4rem; }
}

/* ── Telefoon staand: zoveel mogelijk ruimte voor de tekst of het dansje ── */
@media (orientation: portrait) and (max-width: 40em) {
  .speelpodium { padding-top: 1.5rem; gap: .45rem; }
  /* De titel blijft voor zoekmachines en schermlezers, maar neemt hier geen ruimte in: de schakelaar
     Tekst | Dansje en de titel in het display zeggen genoeg. */
  .speelpodium .sp-kop h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .speelpodium .sp-kop { justify-content: center; }
  .speelpodium .modus button { min-height: 42px; padding-block: .35rem; }
  /* Een compacter deck: kleinere plaat en knoppen, een lager spectrum. */
  .speelpodium .podium-deck .deck { --jog: 4.9rem; gap: .7rem; padding: .55rem .7rem; }
  .speelpodium .podium-deck .deck-paneel { gap: .45rem; }
  .speelpodium .podium-deck .lcd { padding: .4rem .6rem .45rem; gap: .2rem; }
  .speelpodium .podium-deck .spectrum { height: 1.2rem; }
  /* Het display: de titel over de hele breedte, de tijd een regel lager naast de teller. */
  .speelpodium .podium-deck .lcd { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'titel titel' 'fader fader' 'teller tijd' 'stream stream' 'spectrum spectrum'; align-items: center; }
  .speelpodium .podium-deck .lcd-stream { grid-area: stream; }
  .speelpodium .podium-deck .lcd-regel { display: contents; }
  .speelpodium .podium-deck .lcd-titel { grid-area: titel; font-size: 1rem; }
  .speelpodium .podium-deck .lcd-tijd { grid-area: tijd; font-size: .8rem; }
  .speelpodium .podium-deck .fader { grid-area: fader; }
  .speelpodium .podium-deck .lcd-teller { grid-area: teller; }
  .speelpodium .podium-deck .spectrum { grid-area: spectrum; }
  .speelpodium .podium-deck .speel, .speelpodium .podium-deck .deck-cue { width: 3.3rem; }
  .speelpodium .podium-deck .deck-knoppen { gap: 1rem; }
  .speelpodium .podium-deck .deck-rond { width: 2.75rem; }
  /* Het dansje: de opdracht iets kleiner, Sint (of Piet) groter. */
  .speelpodium .dans-kort { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .speelpodium .dans-doe { margin-top: .3rem; font-size: 1rem; line-height: 1.3; }
  .speelpodium .dans-straks { margin-top: .5rem; }
}

/* ── De mini-speler (public/js/mini.js): onderaan over de hele breedte, zolang het liedje loopt ── */
.mini-speler {
  position: fixed; inset: auto 0 0; z-index: 40;
  background: color-mix(in srgb, #120c22 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -10px 30px -10px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .08);
  padding-bottom: env(safe-area-inset-bottom);
  animation: mini-in .35s var(--uit);
}
.mini-speler[hidden] { display: none; }
@keyframes mini-in { from { transform: translateY(100%); } }
/* Voortgang: een dunne lichtstreep langs de bovenrand. */
.mini-balk { height: 3px; background: rgb(255 255 255 / .08); }
.mini-balk span { display: block; height: 100%; width: var(--voortgang, 0%); background: linear-gradient(90deg, var(--goud), var(--cyaan)); box-shadow: 0 0 10px var(--goud); }
.mini-binnen { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.2rem); max-width: 90rem; margin: 0 auto; padding: .55rem var(--rand); }
.mini-speel {
  flex: none; display: grid; place-items: center; width: 3rem; aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--goud); color: var(--inkt); box-shadow: 0 0 0 3px #0b0a0d, 0 0 16px color-mix(in srgb, var(--goud) 45%, transparent);
}
.mini-speel .ico { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.mini-speel .speel-play { translate: 6% 0; }
.mini-speel .speel-pauze, .mini-speler.speelt .speel-play { display: none; }
.mini-speler.speelt .speel-pauze { display: block; }
.mini-info { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .7rem; color: var(--tekst); text-decoration: none; }
.mini-info img { flex: none; width: 3rem; height: 3rem; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.mini-speler.speelt .mini-info img { animation: draai 6s linear infinite; border-radius: 50%; }
.mini-info > span { display: grid; min-width: 0; }
.mini-info strong { font: 400 1.05rem/1.2 var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-info small { color: var(--tekst-zacht); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-info:hover strong { color: var(--goud); }
.mini-tijd { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; color: var(--cyaan); }
.mini-stop { flex: none; display: grid; place-items: center; width: 2.6rem; aspect-ratio: 1; border: 0; border-radius: 10px; cursor: pointer; background: transparent; color: var(--tekst-zacht); }
.mini-stop:hover { background: rgb(255 255 255 / .08); color: #fff; }
/* Ruimte onderaan zodat de mini-speler niets van de pagina bedekt. */
body.met-mini { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
.mini-tijd-klein { display: none; font-variant-numeric: tabular-nums; }
.mini-normaal[hidden], .mini-stream[hidden] { display: none; }
.mini-stream { display: inline-flex; align-items: center; gap: .35rem; color: var(--goud); font-weight: 700; }
.mini-stream .ico { width: .95rem; height: .95rem; }
/* Telefoon: de tijd onder de titel in plaats van rechts, de titel iets kleiner zodat hij past, en de
   voortgang wat dikker. */
@media (max-width: 30em) {
  .mini-tijd, .mini-info .mini-wat { display: none; }
  .mini-info .mini-tijd-klein { display: inline; }
  .mini-binnen { gap: .55rem; padding-block: .5rem; }
  .mini-info { gap: .55rem; }
  .mini-info img { width: 2.6rem; height: 2.6rem; }
  .mini-info strong { font-size: .95rem; }
  .mini-balk { height: 4px; }
}
@media (prefers-reduced-motion: reduce) { .mini-speler { animation: none; } .mini-speler.speelt .mini-info img { animation: none; } }
@media print { .mini-speler { display: none !important; } }

/* ── Rust ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .bundel { rotate: calc(var(--van) * 1deg); }
}

/* ── Printen (songtekst) ── */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  /* Songtekst: één A4 met het logo bovenaan, de tekst in twee kolommen, onze website onderaan. */
  @page { size: A4; margin: 14mm 17mm; }
  /* Licht kleurschema bij printen, anders kleurt de browser de marge van het blad donker. */
  :root { color-scheme: light; }
  html { background: #fff; }
  /* Eén pagina hoog, zodat de voetregel onderaan staat (bij meer tekst gewoon na de tekst). */
  .tekstblad { display: flex; flex-direction: column; gap: 0; min-height: 260mm; max-width: none; padding: 0; }
  .tekstblad .tb-zij { display: none; }
  .tekstblad .tb-print { display: flex; align-items: center; gap: 7mm; padding-bottom: 3mm; margin-bottom: 5mm; border-bottom: 1.5pt solid #000; }
  .tb-print-logo { width: 46mm; flex: none; }
  .tb-print-logo img { width: 100%; height: auto; }
  .tb-print p { margin: 0; }
  .tb-print-soort { font: 400 11pt/1 var(--stift); letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; }
  .tb-print-titel { font: 400 28pt/1.05 var(--display); color: #000; margin: 1.5mm 0 !important; }
  .tb-print-van { font-size: 10pt; color: #555; }
  .tekstblad .tb-blad { display: block; margin: 0; container-type: normal; padding: 0; background: none; box-shadow: none; border-radius: 0; columns: 2; column-gap: 10mm; font-size: 9.6pt; line-height: 1.22; }
  .tekstblad .couplet { margin: 0 0 3mm; break-inside: avoid; }
  .tekstblad .couplet h2 { display: flex; align-items: baseline; gap: 2mm; margin: 0 0 1mm; font-size: 8.5pt; }
  .tekstblad .couplet h2 .tape { font: 400 8.5pt/1 var(--stift); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #111; padding: 1mm 2.2mm .7mm; rotate: -1deg; -webkit-mask: none; mask: none; }
  .tekstblad .couplet h2 small { font-size: 8pt; color: #777; font-weight: 400; }
  .tekstblad .couplet p { margin: 0; color: #000; font-size: inherit; line-height: inherit; text-wrap: wrap; }
  .tekstblad .refrein-couplet p { color: #a3005a; font-weight: 700; }
  .tekstblad .gesproken p { font-style: italic; color: #444; }
  .tekstblad .voetnoot { display: none; }
  .tekstblad .tb-print-voet { display: flex; justify-content: space-between; align-items: baseline; margin: auto 0 0; padding-top: 2.5mm; border-top: .75pt solid #bbb; font-size: 8.5pt; color: #666; }
  .tb-print-voet strong { font: 400 14pt var(--display); color: #000; }
  .kop, .voet, .knoppen-rij, .kruimels, .toestemming, .rig, .naar-inhoud { display: none !important; }
  .goud { color: #000; text-shadow: none; }
  .couplet p, .groot { color: #000; }
  .tape { background: none; padding: 0; clip-path: none; }
  .couplet { break-inside: avoid; }
  a { color: #000; }
}