/* ==========================================================================
   MSD OFFICIAL — Love Is All We Need
   Stijl: NEON HEART  (ontwerp 06)
   Donkere basis met een gloeiend roze-goud hart. Deze stijl is exact
   overgenomen uit het ontwerpvoorstel.
   ========================================================================== */
:root{
  --acc:#ff8ab5;
  --acc2:#ffd166;
  --lijn:rgba(255,255,255,.12);
  --dim:#a99fb5;
  --glas:rgba(255,255,255,.06);
  --glasrand:rgba(255,255,255,.15);
  --rond-v:24px;
  --kopfont:-apple-system,'SF Pro Display',Inter,sans-serif;
  /* oude namen blijven werken voor de leespagina's */
  --goud:#ff8ab5; --goud-licht:#ffd166;
  --ink:#f7f3fa; --ink-zacht:#a99fb5;
  --glas-rand:rgba(255,255,255,.15); --glas-lijn:rgba(255,255,255,.12);
  --glas-sterk:rgba(255,255,255,.09);
  --schaduw:0 6px 26px rgba(0,0,0,.42);
  --schaduw-op:0 26px 68px rgba(255,138,181,.20);
  --max:1180px; --rond:24px;
}
/* De gloed op de achtergrond — het hart van Neon Heart. */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1000px 700px at 80% 6%,rgba(255,138,181,.26),transparent 58%),
    radial-gradient(860px 620px at 10% 16%,rgba(255,209,102,.13),transparent 60%),
    radial-gradient(820px 660px at 16% 88%,rgba(255,138,181,.15),transparent 60%),
    radial-gradient(760px 560px at 88% 84%,rgba(140,110,255,.14),transparent 62%);
  pointer-events:none}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0a0710;color:#f7f3fa;
  font:16px/1.65 -apple-system,BlinkMacSystemFont,'SF Pro Text',Inter,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
h1,h2,h3{font-family:-apple-system,'SF Pro Display',Inter,sans-serif;font-weight:700;letter-spacing:-.04em;line-height:1.06}
.label{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#ff8ab5;font-weight:600}
.dim{color:#a99fb5}

/* --- balk boven --- */
.balk{position:sticky;top:0;z-index:60;background:rgba(11,13,19,.72);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.12)}
.balk .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.merk{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.14em;font-size:14px}
.merk img{height:30px;width:auto}
.nav{display:flex;gap:26px;font-size:13.5px;letter-spacing:.05em}
.nav a{color:#a99fb5;transition:color .2s}
.nav a:hover{color:#ff8ab5}
@media(max-width:820px){.nav{display:none}}

/* --- hero --- */
.hero{background:radial-gradient(110% 90% at 80% 10%,rgba(255,138,181,.34) 0%,rgba(255,138,181,0) 56%),radial-gradient(100% 85% at 12% 90%,rgba(255,209,102,.24) 0%,rgba(255,209,102,0) 58%),#0a0710;padding:78px 0 88px;position:relative;overflow:hidden}
.heroraster{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center}
.herotekst h1{font-size:clamp(40px,5.8vw,74px);margin:13px 0 16px}
.herotekst h1 .zacht{color:#ff8ab5;display:block}
.leus{font-size:15.5px;color:var(--dim);max-width:34ch;margin-bottom:24px}
.knoppen{display:flex;gap:12px;flex-wrap:wrap}
.knop{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;
  font-size:13.5px;font-weight:600;letter-spacing:.06em;border:1px solid transparent;transition:.22s;cursor:pointer}
.knop.vol{background:#ff8ab5;color:#12100c;box-shadow:0 28px 70px rgba(255,138,181,.20)}
.knop.vol:hover{background:#ffd166;transform:translateY(-2px)}
.knop.leeg{border-color:rgba(255,255,255,.12);color:#f7f3fa}
.knop.leeg:hover{border-color:#ff8ab5;color:#ff8ab5}
.herofoto{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 28px 70px rgba(255,138,181,.20);
  aspect-ratio:4/5;border:1px solid rgba(255,255,255,.12)}
.herofoto img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
@media(max-width:880px){.heroraster{grid-template-columns:1fr;gap:34px}
  .herofoto{aspect-ratio:16/11;order:-1}}

/* --- secties --- */
.sec{padding:74px 0}
.sec.zacht{background:rgba(255,255,255,.05)}
.sectitel{text-align:center;margin-bottom:40px;max-width:640px;margin-left:auto;margin-right:auto}
.sectitel h2{font-size:clamp(27px,3.4vw,40px);margin:9px 0 8px}
.sectitel p{color:var(--dim);max-width:54ch;margin:0 auto;font-size:15px}

/* --- speler / video --- */
.videodoos{border-radius:24px;overflow:hidden;box-shadow:0 28px 70px rgba(255,138,181,.20);border:1px solid rgba(255,255,255,.12);
  background:#000;position:relative;aspect-ratio:16/9;cursor:pointer}
.videodoos img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:.4s}
.videodoos:hover img{opacity:.62;transform:scale(1.03)}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play span{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#111;
  box-shadow:0 12px 40px rgba(0,0,0,.35);transition:.25s;padding-left:5px}
.videodoos:hover .play span{transform:scale(1.1)}

/* --- muziek: de catalogus --- */
.catalogus{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:20px}
.plaat{transition:.28s}
.plaat:hover{transform:translateY(-7px)}
.plaat .hoes{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1;
  box-shadow:0 28px 70px rgba(255,138,181,.20);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.plaat .hoes img{width:100%;height:100%;object-fit:cover;transition:.5s}
.plaat:hover .hoes img{transform:scale(1.05)}
.plaat.straks .hoes img{filter:grayscale(1) brightness(.72)}
.vlag{position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:999px;
  font-size:10.5px;letter-spacing:.14em;font-weight:700;background:#ff8ab5;color:#12100c}
.vlag.stil{background:rgba(255,255,255,.06);color:#a99fb5;border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.plaat h3{font-size:15.5px;margin:12px 0 3px;font-family:inherit;font-weight:650;letter-spacing:-.01em}
.plaat .meta{font-size:12px;color:var(--dim);letter-spacing:.04em}

/* --- artiesten --- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.kaart{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:24px;overflow:hidden;
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);box-shadow:0 28px 70px rgba(255,138,181,.20)}
.kaart .foto{aspect-ratio:5/4;overflow:hidden}
.kaart .foto img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:.5s}
.kaart:hover .foto img{transform:scale(1.04)}
.kaart .tekst{padding:22px 22px 24px}
.kaart h3{font-size:21px;margin-bottom:5px}
.kaart .rol{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#ff8ab5;
  font-weight:600;margin-bottom:12px}
.kaart p{font-size:14.5px;color:var(--dim)}

/* --- boodschap --- */
.citaat{text-align:center;max-width:760px;margin:0 auto}
.citaat p{font-family:-apple-system,'SF Pro Display',Inter,sans-serif;font-size:clamp(24px,3.4vw,36px);line-height:1.35;
  font-weight:700;letter-spacing:-.04em}
.citaat .bron{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#ff8ab5;margin-top:24px}

/* --- galerij --- */
.galerij{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.galerij div{aspect-ratio:1;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.galerij img{width:100%;height:100%;object-fit:cover;transition:.5s}
.galerij div:hover img{transform:scale(1.07)}
@media(max-width:700px){.galerij{grid-template-columns:repeat(2,1fr)}}

/* --- luister --- */
.diensten{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.dienst{display:flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);font-size:13.5px;font-weight:550;transition:.22s;
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}
.dienst:hover{border-color:#ff8ab5;color:#ff8ab5;transform:translateY(-2px)}

/* --- koop --- */
.koopraster{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:700px;margin:0 auto}
@media(max-width:640px){.koopraster{grid-template-columns:1fr}}
.koop{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:24px;
  text-align:center;-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}
.koop .soort{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#ff8ab5;font-weight:600}
.koop .prijs{font-size:30px;font-family:-apple-system,'SF Pro Display',Inter,sans-serif;font-weight:700;margin:10px 0 4px}
.koop .voor{font-size:13px;color:#a99fb5;margin-bottom:20px}

/* --- voet --- */
.voet{padding:64px 0 46px;border-top:1px solid rgba(255,255,255,.12);text-align:center;background:rgba(255,255,255,.05)}
.voet .leus{font-family:-apple-system,'SF Pro Display',Inter,sans-serif;font-size:22px;margin:0 auto 10px;max-width:none;color:#f7f3fa}
.voet .regel{font-size:13.5px;color:#a99fb5;max-width:52ch;margin:0 auto 26px}
.voet .klein{font-size:12px;color:#a99fb5;margin-top:22px}

/* ======================================================================
   AANVULLING — onderdelen die de echte site heeft en het voorstel niet.
   Zelfde vormtaal: donker glas, neon accent.
   ====================================================================== */

/* --- kop / menu --- */
/* Het menu plakt onder de aankondigingsbalk. Staat er geen balk, dan is
   --ak-hoogte 0 en plakt het menu gewoon bovenaan. */
:root{--ak-hoogte:0px}
header#kop{position:sticky;top:var(--ak-hoogte);z-index:60;background:rgba(10,7,16,.72);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid var(--lijn)}
header#kop .wrap{display:flex;align-items:center;justify-content:space-between;
  height:68px;gap:18px}
header#kop .logo{display:flex;align-items:center;gap:10px;font-weight:700;
  letter-spacing:.14em;font-size:14px}
header#kop .logo small{display:block;font-size:9.5px;letter-spacing:.22em;
  color:var(--dim);font-weight:600}
.logobeeld{height:34px;width:auto}
#nav{display:flex;gap:26px;font-size:13.5px;letter-spacing:.05em}
#nav a{color:var(--dim);transition:color .2s}
#nav a:hover,#nav a.actief{color:var(--acc)}
.menuknop{display:none;background:none;border:0;color:var(--ink);font-size:22px;cursor:pointer}
@media(max-width:820px){
  #nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(10,7,16,.96);border-bottom:1px solid var(--lijn);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    max-height:0;overflow:hidden;transition:max-height .3s}
  #nav.open{max-height:70vh}
  #nav a{padding:15px 26px;border-bottom:1px solid var(--lijn)}
  .menuknop{display:block}
}

/* --- video op de voorpagina --- */
.eigenvideo,.speler{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--rond-v);
  overflow:hidden;background:#000;border:1px solid var(--lijn);
  box-shadow:0 26px 70px rgba(0,0,0,.5);background-size:cover;background-position:center;
  cursor:pointer}
.vcredits{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;
  justify-content:center;margin-top:24px;padding:0}
.vcredits li{display:flex;align-items:center;gap:10px;font-size:13.5px}
.vcredits .ic{font-size:17px}
.vcredits .lb{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);font-weight:600}
.vcredits .nm{color:var(--dim)}

/* --- shows --- */
.showskort{list-style:none;padding:0;margin:0}
.showskort li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--lijn);
  font-size:14px}
.showskort li:last-child{border-bottom:0}
.showskort .d{display:flex;gap:8px;min-width:96px;color:var(--acc);font-weight:600}
.showskort .d i{font-style:normal;color:var(--dim);font-weight:400}
/* Naam van het evenement boven, plaats en omschrijving eronder. Zonder
   deze regels lopen ze aan elkaar vast op één regel. */
.showskort .p{display:flex;flex-direction:column;gap:3px;min-width:0}
.showskort .p b{font-weight:600;line-height:1.35}
.showskort .p i{font-style:normal;color:var(--dim);font-size:13px;
  line-height:1.45}
@media(max-width:560px){
  .showskort li{gap:10px}
  .showskort .d{min-width:74px}
}

/* --- nieuwsbrief --- */
.nbvorm{display:flex;gap:9px}
.nbvorm input{flex:1;padding:13px 15px;border-radius:999px;font:inherit;
  background:rgba(255,255,255,.07);color:var(--ink);
  border:1px solid var(--lijn);transition:.18s}
.nbvorm input:focus{outline:0;border-color:var(--acc);background:rgba(255,255,255,.11);
  box-shadow:0 0 0 3px rgba(255,138,181,.20)}
.nbvorm button{width:46px;border:0;border-radius:50%;cursor:pointer;
  background:var(--acc);color:#160c12;font-size:15px;transition:.2s}
.nbvorm button:hover{background:var(--acc2);transform:scale(1.06)}
.nbmeld{font-size:13px;color:var(--acc);margin-top:10px;min-height:18px}
.verborgen{display:none}

/* --- kaart zonder foto --- */
.kaart .foto.leeg{display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05)}
.kaart .foto.leeg span{font-size:44px;font-weight:700;color:var(--acc);letter-spacing:.06em}

/* --- voet --- */
footer{padding:52px 0 38px;border-top:1px solid var(--lijn);text-align:center;
  background:rgba(255,255,255,.03)}
footer .flogo{margin-bottom:14px}
.flogobeeld{height:46px;width:auto;margin:0 auto}
footer .leus{font-family:var(--kopfont);font-size:22px;margin:0 auto 10px;color:var(--ink)}
footer .fnav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  font-size:13px;margin:22px 0}
footer .fnav a{color:var(--dim);transition:.2s}
footer .fnav a:hover{color:var(--acc)}
footer .klein{font-size:12px;color:var(--dim);line-height:1.9}

/* --- video groot in beeld --- */
.videolaag{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:26px;background:rgba(6,4,10,.86);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:vlin .22s ease}
@keyframes vlin{from{opacity:0}to{opacity:1}}
.videodoos{position:relative;width:100%;max-width:1180px;border-radius:18px;
  overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.videodoos video{width:100%;height:auto;max-height:82vh;display:block;
  border-radius:18px;background:#000;border:0;object-fit:contain}
.videosluit{position:absolute;top:12px;right:12px;width:38px;height:38px;
  border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#160c12;
  font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.18s}
.videosluit:hover{background:#fff;transform:scale(1.08)}

/* --- verschijnen bij scrollen --- */
.op{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.op.zicht,.op.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .op{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* --- Aankondiging: lopende balk bovenaan ------------------------------- */
/* Staat er niets in het dashboard, dan komt deze balk niet in de pagina. */
.aankondiging{
  /* Lager dan het menu (z-index 60): de balk mag nooit over het logo
     heen schuiven. Beide plakken, maar het menu ligt erbovenop. */
  position:sticky;top:0;z-index:55;overflow:hidden;
  background:linear-gradient(100deg,var(--acc) 0%,var(--acc2) 100%);
  color:#160c12;padding:10px 0;
  box-shadow:0 4px 20px rgba(255,138,181,.28)
}
.ak-loop{display:flex;width:max-content;animation:akloop 34s linear infinite}
.ak-band{display:flex;align-items:center;color:inherit;text-decoration:none}
.ak-stuk{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:0 30px
}
.ak-stuk::after{content:"◆";margin-left:30px;opacity:.5;font-size:9px}
a.ak-band:hover{opacity:.82}
@keyframes akloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Bij stilzetten van beweging: geen loop, gewoon leesbare tekst. */
@media (prefers-reduced-motion:reduce){
  .ak-loop{animation:none;width:100%;justify-content:center}
  .ak-band:nth-child(2){display:none}
  .ak-stuk:nth-child(n+2){display:none}
}
@media (max-width:640px){ .ak-stuk{font-size:11.5px;padding:0 20px} }


/* --- Fijnafstelling: rustiger ritme ------------------------------------ */
/* De boodschap is het hart van de site; die mag meer lucht krijgen dan de
   rest, juist omdat de andere secties nu strakker zijn. */
#boodschap{padding:92px 0}
.citaat p{font-size:clamp(23px,3vw,33px)}

/* Contact sluit direct aan op Live: samen één blok, geen dubbele ruimte. */
#live{padding-bottom:44px}
#contact{padding-top:44px}

/* De hero-foto niet groter dan nodig, anders duwt hij de pagina uit balans. */
.herofoto{max-height:560px}

/* Kopregels overal even zwaar, zodat het beeld rustig blijft. */
.sectitel .label{display:inline-block}

/* --- Rechten onder de videoclip -------------------------------------- */
/* Wie de video wil gebruiken moet weten dat hij niet vrij is. Dit staat
   er rustig maar duidelijk, zodat niemand kan zeggen dat hij het niet wist. */
.videorechten{
  max-width:760px;margin:22px auto 0;padding:20px 24px;
  border:1px solid rgba(255,255,255,.10);border-left:3px solid var(--goud);
  border-radius:12px;background:rgba(255,255,255,.02);
  font-size:14.5px;line-height:1.75;color:var(--ink);
}
.videorechten p{margin:0 0 10px}
.videorechten p:last-child{margin-bottom:0}
.videorechten b{color:var(--goud-licht)}
.videorechten a{color:var(--goud);text-decoration:underline;
  text-underline-offset:3px}
.videorechten a:hover{color:var(--goud-licht)}
.vr-slot{color:var(--goud);font-weight:700;margin-right:2px}

@media (max-width:640px){
  .videorechten{padding:16px 18px;font-size:14px;margin-top:18px}
}

/* --- Filmbeelden achter de achtergrond ------------------------------- */
/* De originele achtergrond van elk blok blijft gewoon staan. De beelden
   uit de videoclip zitten daar ACHTER: normaal zie je ze niet of amper.
   Om de drie seconden komt er één beeld helder naar voren, dwars door de
   achtergrond heen — één beeld tegelijk, de rest blijft weg. */
.herowatermerk,
.secwatermerk{
  position:absolute; inset:0;
  z-index:2;            /* boven de sluier: zie .wm-vak hieronder */
  pointer-events:none; overflow:hidden;
  /* het uitspringende beeld mag tot de rand van het blok komen */
  padding:0;
}

.wm-raster{
  display:grid;
  grid-template-columns:repeat(var(--kolommen,3),1fr);
  /* Ruimte tussen de vakken, zodat een beeld dat uitspringt niet
     tegen zijn buren aan botst. */
  gap:18px;
  padding:18px;
  height:100%;
  align-items:center;
  /* overflow zichtbaar houden, anders wordt het uitspringende beeld
     langs de randen afgesneden */
  overflow:visible;
}

.wm-vak{
  position:relative;
  /* Het vak past zich aan het beeld aan, niet omgekeerd: zo wordt er
     niets bijgesneden. */
  align-self:center;
  opacity:0;                                   /* standaard onzichtbaar */
  transition:opacity .9s cubic-bezier(.32,0,.28,1);
  transform:scale(1);
  /* Geen vervaging: het beeld verdwijnt door doorzichtig te worden, niet
     door onscherp te worden. Zo blijft het altijd zichzelf. */
  border-radius:10px;
  overflow:hidden;
  will-change:opacity, transform, filter;
}
/* Het beeld dat nu aan de beurt is: helder en scherp naar voren. */
.wm-vak.aanbeurt{
  opacity:1;                 /* volledig zichtbaar, zoals de foto zelf */
  /* Op ware grootte, niet opgerekt: een beeld dat groter wordt getoond
     dan het is, wordt zichtbaar zachter. Het valt op door de schaduw en
     doordat het als enige zichtbaar is, niet door het uit te vergroten. */
  transform:scale(1);
  z-index:5;                 /* boven de sluier en boven andere vakjes */
  /* Een zachte rand van licht eromheen maakt het los van de achtergrond. */
  box-shadow:0 22px 60px rgba(0,0,0,.55),
             0 0 0 1px rgba(255,255,255,.10);
  border-radius:10px;
}
.wm-vak img{
  width:100%; height:auto; display:block;
  /* Het hele beeld tonen, niet bijsnijden om het vak te vullen. Zo zie
     je precies wat er in de clip staat. */
  /* Op een heel breed scherm zou een vak groter kunnen worden dan het
     beeld zelf (1000 px). Dan wordt het opgerekt en verliest het aan
     scherpte. Dit houdt de weergave binnen de eigen grootte. */
  max-width:1000px; margin:0 auto;
  /* Geen bewerking meer: de belichting is per beeld op maat gezet bij het
     klaarmaken van de bestanden. Elk beeld heeft dezelfde heldere
     uitstraling en de gezichten zijn goed zichtbaar. */
}

/* De sluier over het blok. De watermerklaag ligt daarboven, maar elk
   vakje is onzichtbaar (opacity:0) tot het aan de beurt is. Zo zie je
   normaal alleen de gewone achtergrond, en licht er om de drie seconden
   precies één beeld op in zijn eigen kleuren. */
.hero{position:relative; overflow:hidden}
.hero::before,
#muziek::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
}
.hero::before{
  background:radial-gradient(110% 90% at 80% 10%,
      rgba(255,138,181,.34) 0%, rgba(255,138,181,0) 56%),
    radial-gradient(100% 85% at 12% 90%,
      rgba(255,209,102,.24) 0%, rgba(255,209,102,0) 58%),
    rgba(10,7,16,.86);
}
#muziek::before{background:rgba(20,16,25,.90)}

/* De inhoud staat boven alles — ook boven een beeld dat oplicht, zodat de
   tekst en de portretfoto nooit worden weggedrukt. */
.hero > .wrap,
#muziek > .wrap{position:relative; z-index:3}

/* De eigen achtergrondkleur van de blokken vervalt: die zit nu in ::before,
   anders dekt hij de beelden helemaal af. */
.hero{background:#0a0710}
#muziek.zacht{background:transparent; position:relative}

@media(max-width:880px){
  /* Op een telefoon staat de tekst over de volle breedte: dan minder
     kolommen en iets rustiger, anders wordt lezen lastig. */
  /* Op een telefoon geen bewegende beelden: het scherm is smal, de tekst
     staat over de volle breedte, en de beelden zouden alleen in de weg
     zitten. Alleen de gewone achtergrond. */
  .herowatermerk,
  .secwatermerk{display:none}
  /* De sluier is er alleen om de beelden te dempen. Zonder beelden zou
     hij de achtergrond onnodig donker maken, dus die gaat ook weg. */
  .hero::before,
  #muziek::before{display:none}
  /* En de blokken krijgen hun eigen achtergrond weer terug. */
  #muziek.zacht{background:rgba(255,255,255,.05)}
}

/* Wie in zijn systeem minder beweging heeft gekozen, krijgt een rustig
   stilstaand beeld. Bewegende beelden kunnen misselijkheid geven. */
@media (prefers-reduced-motion:reduce){
  .wm-vak{transition:none}
  .wm-vak.aanbeurt{opacity:.85; filter:blur(0)}
}

/* --- Aankondigingsbalk: tien stijlen ---------------------------------- */
/* Elke stijl bepaalt de achtergrond, de kleur van de letters en het
   lettertype. De richting en de snelheid staan los, zodat je die per
   stijl kunt kiezen. */

/* Richting en snelheid */
.ak-loop{animation-name:akloop}
.aankondiging[data-richting="rechts"] .ak-loop{animation-direction:reverse}
.aankondiging[data-snelheid="traag"]  .ak-loop{animation-duration:60s}
.aankondiging[data-snelheid="rustig"] .ak-loop{animation-duration:44s}
.aankondiging[data-snelheid="normaal"] .ak-loop{animation-duration:34s}
.aankondiging[data-snelheid="vlot"]   .ak-loop{animation-duration:22s}
.aankondiging[data-snelheid="snel"]   .ak-loop{animation-duration:14s}

/* 1. Neon roze — donker met een gloeiende roze rand */
.aankondiging[data-stijl="neon-roze"]{
  background:linear-gradient(100deg,#2a0a1e 0%,#4a0f33 50%,#2a0a1e 100%);
  color:#ff8ad4;
  box-shadow:inset 0 0 0 1px rgba(255,110,199,.55),
             0 4px 24px rgba(255,110,199,.30);
}
.aankondiging[data-stijl="neon-roze"] .ak-stuk{
  text-shadow:0 0 8px rgba(255,110,199,.75), 0 0 22px rgba(255,110,199,.45);
  font-weight:800;
}

/* 2. Parelmoer — licht en zacht, met een kleurverloop in de letters */
.aankondiging[data-stijl="parelmoer"]{
  background:linear-gradient(100deg,#f4f0fb 0%,#ffffff 40%,#efe9f8 100%);
  color:#7b4bd6;
  box-shadow:0 2px 14px rgba(120,80,200,.16);
}
.aankondiging[data-stijl="parelmoer"] .ak-stuk{
  background:linear-gradient(90deg,#ff5fa2 0%,#a05ce0 45%,#3f8fe0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:700;
}

/* 3. Goud klassiek — zwart met gouden letters in een serif */
.aankondiging[data-stijl="goud-klassiek"]{
  background:linear-gradient(100deg,#0b0b0b 0%,#161311 55%,#0b0b0b 100%);
  color:#e8c778;
  box-shadow:inset 0 -1px 0 rgba(232,199,120,.35);
}
.aankondiging[data-stijl="goud-klassiek"] .ak-stuk{
  font-family:Didot,'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700; letter-spacing:.14em;
  text-shadow:0 1px 0 rgba(255,232,180,.35);
}

/* 4. Zonsopgang — warme gloed met wit */
.aankondiging[data-stijl="zonsopgang"]{
  background:linear-gradient(100deg,#3a2a3f 0%,#8a5a4a 45%,#d99a5c 100%);
  color:#fff;
}
.aankondiging[data-stijl="zonsopgang"] .ak-stuk{
  text-shadow:0 0 10px rgba(255,220,180,.55);
  font-weight:700;
}

/* 5. Blauw digitaal — diepblauw met lichtblauwe letters */
.aankondiging[data-stijl="blauw-digitaal"]{
  background:linear-gradient(100deg,#050a1e 0%,#0a1c47 55%,#050a1e 100%);
  color:#cfe4ff;
  box-shadow:inset 0 0 0 1px rgba(90,160,255,.30);
}
.aankondiging[data-stijl="blauw-digitaal"] .ak-stuk{
  font-family:'SF Mono',ui-monospace,'Roboto Mono',Menlo,monospace;
  font-weight:700; letter-spacing:.16em;
  text-shadow:0 0 10px rgba(120,180,255,.55);
}

/* 6. Zand — licht en rustig, bruine serif */
.aankondiging[data-stijl="zand"]{
  background:linear-gradient(100deg,#efe6d8 0%,#f7f1e6 50%,#e9dfd0 100%);
  color:#6b4527;
  box-shadow:0 2px 12px rgba(120,90,60,.14);
}
.aankondiging[data-stijl="zand"] .ak-stuk{
  font-family:Didot,'Playfair Display',Georgia,serif;
  font-weight:600; letter-spacing:.15em;
}

/* 7. Eclips — zwart met een zachte gouden gloed */
.aankondiging[data-stijl="eclips"]{
  background:radial-gradient(60% 200% at 12% 50%,
      rgba(240,200,120,.22) 0%, rgba(0,0,0,0) 70%), #060606;
  color:#f0d9a8;
}
.aankondiging[data-stijl="eclips"] .ak-stuk{
  font-weight:500; letter-spacing:.22em;
  text-shadow:0 0 14px rgba(240,200,120,.40);
}

/* 8. Neon dubbel — roze naar blauw, fel */
.aankondiging[data-stijl="neon-dubbel"]{
  background:linear-gradient(100deg,#1a0426 0%,#2b0b3d 50%,#0d1030 100%);
  color:#ff5fc8;
  box-shadow:inset 0 0 0 1px rgba(255,95,200,.45),
             0 4px 22px rgba(120,80,255,.28);
}
.aankondiging[data-stijl="neon-dubbel"] .ak-stuk{
  background:linear-gradient(90deg,#ff3fb0 0%,#b45cff 50%,#3fd0ff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:900; letter-spacing:.13em;
}

/* 9. Geluidsgolf — licht met turkoois */
.aankondiging[data-stijl="geluidsgolf"]{
  background:linear-gradient(100deg,#eefaf8 0%,#ffffff 45%,#f0f4fb 100%);
  color:#0f9a9a;
  box-shadow:0 2px 12px rgba(20,150,150,.14);
}
.aankondiging[data-stijl="geluidsgolf"] .ak-stuk{
  background:linear-gradient(90deg,#12b5b0 0%,#3aa0d8 55%,#7b6ce0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:800;
}

/* 10. Zwart goud — strak zwart met dun goud */
.aankondiging[data-stijl="zwart-goud"]{
  background:linear-gradient(100deg,#08080a 0%,#12100e 50%,#08080a 100%);
  color:#d8b877;
  box-shadow:inset 0 0 0 1px rgba(216,184,119,.28);
}
.aankondiging[data-stijl="zwart-goud"] .ak-stuk{
  font-family:Didot,'Playfair Display',Georgia,serif;
  font-weight:500; letter-spacing:.26em;
}

/* --- het koopformulier zelf -------------------------------------------
   Deze opmaak ontbrak: het invoerveld voor het telefoonnummer was een
   kale browserinvoer (klein, wit, moeilijk raak te tikken op een
   telefoon). Een betaalveld moet groot en rustig zijn: wie hier twijfelt,
   haakt af. --------------------------------------------------------- */
.koopkaarten{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:0 auto 22px;max-width:var(--kaartbreed)}
@media(max-width:640px){.koopkaarten{grid-template-columns:1fr}}

.koopkaart{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);
  border-radius:20px;padding:18px 18px;transition:border-color .2s,background .2s}
.koopkaart:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.koopkaart input{position:absolute;opacity:0;pointer-events:none}
/* De gekozen kaart moet er meteen uitspringen, anders weet niemand
   waarvoor hij betaalt. */
.koopkaart:has(input:checked){border-color:#ff8ab5;background:rgba(255,138,181,.12)}
.koopkaart .kk-ic{font-size:26px;flex:none}
.koopkaart .kk-tekst{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.koopkaart .kk-tekst b{font-size:17px}
.koopkaart .kk-onder{font-size:12px;color:#a99fb5}
.koopkaart .kk-voor{font-size:12px;color:#8d8496;display:none}
.koopkaart .kk-prijs{font-size:16px;font-weight:700;color:#ff8ab5;flex:none;white-space:nowrap}

.koop-uitleg{max-width:var(--kaartbreed);margin:0 auto 26px;color:#a99fb5;
  font-size:14.5px;line-height:1.7;text-align:center}

/* Eén breedte voor het hele koopblok: de formaatkaarten, de uitleg, de
   velden en de knoppen. Stond eerder op 640px voor de kaarten en 420px voor
   het formulier — daardoor sprong de linkerrand halverwege naar binnen en
   leek de bladzijde scheef. */
.koopblok{--koopbreed:460px;--kaartbreed:620px}

/* Het invoerveld: ruim, groot lettertype, en op een telefoon minstens
   16px — anders zoomt Safari bij het aantikken automatisch in. */
.koopvorm{display:flex;flex-direction:column;gap:18px;
  max-width:var(--koopbreed);margin:0 auto;text-align:left}
/* Scheidingsregel tussen M-Pesa en de kaartknop: "───  or  ───" */
.koop-of{display:flex;align-items:center;gap:14px;margin:0;
  color:#7c7488;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.koop-of::before,.koop-of::after{content:"";flex:1;height:1px;
  background:rgba(124,116,136,.32)}
.koopvorm > div{display:flex;flex-direction:column;gap:7px;text-align:left}
.koopvorm label{display:block;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:#9b93a8;font-weight:600;text-align:left}
/* Het uitlegzinnetje achter een label ("optional — …"): zachter en niet in
   hoofdletters, zodat het de veldnaam niet overschreeuwt. */
.koopvorm label .lab-bij{text-transform:none;letter-spacing:0;font-size:12.5px;
  font-weight:400;color:#7c7488}
.koopvorm input{width:100%;box-sizing:border-box;
  padding:18px 20px;font-size:19px;letter-spacing:.04em;
  font-family:inherit;color:#fff;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.2);border-radius:16px;
  transition:border-color .2s,background .2s}
.koopvorm input::placeholder{color:#7c7488;letter-spacing:.06em}
.koopvorm input:focus{outline:none;border-color:#ff8ab5;
  background:rgba(255,255,255,.1)}
/* De knoppen: merkteken links, tekst gecentreerd, alles op één lijn.
   .knop is een inline-flex die links uitlijnt; in een knop over de volle
   breedte plakt de tekst daardoor tegen de linkerrand. */
.koopvorm .knop{width:100%;padding:16px 22px;font-size:17px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:12px;
  position:relative}
.koopvorm .knop:disabled{opacity:.55;cursor:default}
/* Het merkteken staat links vast, zodat de tekst van beide knoppen op
   dezelfde plek uitkomt en ze onder elkaar netjes staan. Omdat het uit de
   normale volgorde is gehaald, houdt de knop er geen ruimte voor vrij: op
   een smal scherm schoof de gecentreerde tekst eronder ("...ay with
   M-Pesa"). De padding links en rechts geeft die ruimte terug, zodat de
   tekst altijd naast het merkteken blijft in plaats van eroverheen. */
.knop-merk{position:absolute;left:20px;flex:0 0 auto;display:block}
.knop-tekst{display:block}
.koopvorm .knop:has(.knop-merk),
.st-knop:has(.knop-merk){padding-left:76px;padding-right:76px}
/* Vangnet voor browsers zonder :has(): daar krijgt elke koopknop de ruimte.
   Een knop zónder merkteken oogt dan iets smaller van binnen, wat niet
   opvalt — een overlappende tekst wél. */
@supports not selector(:has(*)){
  .koopvorm .knop{padding-left:76px;padding-right:76px}
}
/* Op een smal scherm is er geen ruimte om het merkteken naast een
   gecentreerde tekst te houden: de M-PESA-badge is breed en "Pay with
   M-Pesa" is lang. Daar zetten we het merkteken terug in de rij en laten we
   het geheel samen centreren. Dat kan niet overlappen, hoe smal het scherm
   ook wordt. */
@media(max-width:520px){
  .knop-merk{position:static;left:auto}
  .koopvorm .knop,
  .koopvorm .knop:has(.knop-merk){padding-left:18px;padding-right:18px;
    gap:10px}
}

/* De twee koopknoppen krijgen hier hun eigen kleuren. Zonder dit erft de
   kaartknop .knop.leeg (bijna-witte letters, bedoeld voor een doorzichtige
   knop op een donkere achtergrond) terwijl de browser hem een witte vulling
   geeft — wit op wit, dus onleesbaar. */
#mp-knop{background:#f4f0f7;color:#12100c;border-color:transparent}
#mp-knop:hover:not(:disabled){background:#ffd166}
#mp-kaart{background:transparent;color:#f7f3fa;
  border-color:rgba(255,255,255,.30)}
#mp-kaart:hover:not(:disabled){border-color:#ff8ab5;color:#ff8ab5;
  background:rgba(255,138,181,.06)}

/* Welke kaarten worden geaccepteerd. */
/* Let op de !important-achtige volgorde: .koopvorm > div zet ALLE directe
   divs in een kolom (bedoeld voor label + invoerveld). Deze regel staat er
   ná en zet de kaartlogo's weer op één rij. */
.koopvorm > .kaartmerken{display:flex;flex-direction:row;align-items:center;
  justify-content:center;gap:9px;margin-top:4px;flex-wrap:wrap;
  text-align:center}
.km-tekst{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8d8496;margin-right:2px}
.kaartlogo{display:block;height:26px;width:auto;border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.35)}

.koop-terug{max-width:var(--kaartbreed);margin:26px auto 0;font-size:13px;
  color:#8d8496;text-align:center;line-height:1.7;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.koop-terug a{color:#ff8ab5;text-decoration:underline;
  text-underline-offset:3px}
.koop-terug a:hover{color:#ffd166}

/* "Get it back": de koper haalt een aankoop terug in plaats van te kopen.
   Alles wat met kopen te maken heeft gaat weg — hij kiest geen formaat meer
   (de server weet wat hij kocht) en betaalt niets. Op de plek van de
   M-Pesa-knop verschijnt zijn download zodra zijn nummer compleet is. */
.koopblok.terughalen .koopkaarten,
.koopblok.terughalen .koop-uitleg,
.koopblok.terughalen #mp-knop,
.koopblok.terughalen .koop-of,
.koopblok.terughalen #mp-kaart,
.koopblok.terughalen .kaartmerken,
.koopblok.terughalen .koop-terug:not(.koop-annuleer){display:none}
/* Het e-mailveld hoort bij kopen (het is er om je muziek later terug te
   vinden); wie nu terughaalt heeft er niets aan. De div eromheen heeft geen
   naam, dus site.js hangt er .veld-mail aan. Dat is met opzet geen :has():
   een oudere telefoonbrowser zonder :has() zou het veld anders laten staan,
   en juist die kopers gebruiken M-Pesa. De :has()-regel staat er als
   vangnet voor als het JavaScript niet draait. */
.koopblok.terughalen .veld-mail{display:none}
.koopblok.terughalen .koopvorm > div:has(#mp-mail){display:none}
/* De melding staat nu op de plek van de knop en draagt het gesprek, dus
   hij mag hier wat groter en dichter op het invoerveld. */
.koopblok.terughalen .koop-melding{margin-top:10px;font-size:15.5px}
/* De onderkop belooft betalen ("Pay with M-Pesa or card…"), maar wie
   terughaalt betaalt niets meer. De tekst zelf staat in inhoud.json en is
   instelbaar, dus we vervangen hem hier in plaats van hem te overschrijven. */
#kopen.terughalen .onderkop{visibility:hidden;position:relative}
#kopen.terughalen .onderkop::after{content:"Get back music you already paid for.";
  visibility:visible;position:absolute;left:0;right:0;top:0}
.koop-annuleer{margin-top:22px}

.koop-melding{max-width:420px;margin:16px auto 0;font-size:15px;line-height:1.6;min-height:1px}
.koop-melding.bezig{color:#ffd166}
.koop-melding.goed{color:#7ee0a8}
.koop-melding.fout{color:#ff8a8a}

.koop-klein{max-width:460px;margin:18px auto 0;font-size:12.5px;color:#8d8496;line-height:1.6}

/* De downloadknop na een geslaagde betaling: dit is het moment waar de
   koper op wacht, dus hij mag niet te missen zijn. */
.downloadknop{display:block;max-width:420px;margin:18px auto 0;
  padding:18px 24px;border-radius:999px;text-align:center;
  font-size:17px;font-weight:700;text-decoration:none;
  color:#1a0f18;background:linear-gradient(135deg,#ffd166,#ff8ab5);
  box-shadow:0 8px 30px rgba(255,138,181,.35)}
.downloadknop:hover{filter:brightness(1.06)}


/* Het uitlegzinnetje achter een label ("optional — to get your music back
   later"). Kleiner en zachter dan het label zelf, zodat het niet met de
   veldnaam concurreert maar wel gelezen wordt: zonder e-mailadres kan een
   koper later geen account terugkrijgen. */
.lab-bij{
  font-weight:400;
  font-size:.85em;
  opacity:.72;
  display:inline;
}

/* ==================================================================
   Kopen en steunen naast elkaar
   ==================================================================
   Links koopt iemand de MP3 of WAV, rechts steunt hij het project met een
   bedrag naar keuze. Twee losse betalingen: rechts krijgt de gever geen
   bestand, alleen een bedankje. Ze staan naast elkaar zodat het één blok
   lijkt, maar met een scheidingslijn ertussen zodat niemand ze verwart. */
.koopblok.met-steun{
  --koopbreed:100%;
  --kaartbreed:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  max-width:1000px;
  margin:0 auto;
  text-align:left;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  overflow:hidden;
}
.koopblok.met-steun > .koopkolom{padding:34px 38px}
.koopblok.met-steun > .steunblok{padding:34px 38px;
  border-left:1px solid rgba(255,255,255,.10)}

/* In deze smallere kolom passen twee formaatkaarten met een omschrijving
   niet meer naast elkaar: "320 kbps · for everyday listening" brak over vier
   regels. Onder elkaar heeft elke kaart de volle breedte en leest hij in één
   oogopslag — precies zoals op een telefoon. */
.koopblok.met-steun .koopkaarten{grid-template-columns:1fr;gap:10px}
.koopblok.met-steun .koopkaart{padding:15px 16px}
.koopblok.met-steun .koopkaart .kk-onder{font-size:12.5px}

/* De uitleg links: kleiner en linksuitgelijnd, zodat hij niet met de
   toelichting rechts concurreert. */
.koopblok.met-steun .koop-uitleg{font-size:13.5px;text-align:left;
  margin-bottom:22px}

/* De kop boven elke kolom. */
.kolomtitel{margin:0 0 6px;font-size:19px;letter-spacing:.08em;
  text-transform:uppercase;color:#ff8ab5;font-weight:800;text-align:center}
.kolomonder{margin:0 0 22px;font-size:14.5px;color:#a99fb5;text-align:center}
.st-titel{margin:0 0 16px;font-size:19px;letter-spacing:.08em;
  text-transform:uppercase;color:#ff8ab5;font-weight:800;text-align:center}
.st-hart{letter-spacing:0}

/* De toelichting bij het steunen. */
.st-tekst p{margin:0 0 14px;font-size:15px;line-height:1.75;color:#c9c1d4}
.st-tekst p:last-child{margin-bottom:22px}

/* De vier vaste bedragen: twee naast elkaar. */
.st-bedragen{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-bottom:12px}
.st-bedrag{padding:15px 10px;font-size:15.5px;font-weight:700;
  font-family:inherit;color:#ff8ab5;cursor:pointer;
  background:transparent;border:1.5px solid rgba(255,138,181,.45);
  border-radius:14px;transition:background .2s,border-color .2s,color .2s}
.st-bedrag:hover{background:rgba(255,138,181,.12);border-color:#ff8ab5}
/* Het gekozen bedrag moet er meteen uitspringen — anders weet de gever
   niet welk bedrag hij zo meteen betaalt. */
.st-bedrag.gekozen{background:#ff8ab5;color:#12100c;border-color:#ff8ab5}

/* Zelf een bedrag invullen. */
#st-anders{width:100%;box-sizing:border-box;padding:16px 18px;font-size:16px;
  font-family:inherit;color:#fff;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.18);border-radius:14px;
  margin-bottom:16px;transition:border-color .2s}
#st-anders::placeholder{color:#7c7488}
#st-anders:focus{outline:none;border-color:#ff8ab5;
  background:rgba(255,255,255,.09)}

/* Het telefoonnummer verschijnt pas als er een bedrag gekozen is: eerder
   heeft het geen zin en maakt het de kolom alleen maar voller. */
.st-vraag{display:none;margin-bottom:16px}
.st-vraag.aan{display:block}
.st-vraag label{display:block;margin-bottom:7px;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:#9b93a8;font-weight:600}
.st-vraag input{width:100%;box-sizing:border-box;padding:16px 18px;
  font-size:17px;font-family:inherit;color:#fff;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.18);border-radius:14px;
  transition:border-color .2s}
.st-vraag input::placeholder{color:#7c7488}
.st-vraag input:focus{outline:none;border-color:#ff8ab5;
  background:rgba(255,255,255,.09)}

.st-knop{width:100%;justify-content:center;padding:17px 22px;font-size:16px;
  font-weight:700;letter-spacing:.02em;
  background:#ff8ab5;color:#12100c;border-color:transparent}
.st-knop:hover:not(:disabled){background:#ffd166}
.st-knop:disabled{opacity:.55;cursor:default}
.st-kaart{width:100%;justify-content:center;margin-top:10px;
  padding:15px 22px;font-size:15px;
  background:transparent;color:#c9c1d4;border-color:rgba(255,255,255,.24)}
.st-kaart:hover:not(:disabled){border-color:#ff8ab5;color:#ff8ab5}
.st-kaart:disabled{opacity:.55;cursor:default}

.st-melding{margin:16px 0 0;font-size:15px;line-height:1.65;min-height:20px}
.st-melding.bezig{color:#ffd166}
.st-melding.goed{color:#5fd38a;font-weight:600}
.st-melding.fout{color:#ff7a7a}

/* Op een telefoon onder elkaar, met een streep ertussen in plaats van
   ernaast — anders wordt elke kolom te smal om nog te lezen. */
@media(max-width:860px){
  .koopblok.met-steun{grid-template-columns:1fr;max-width:520px}
  .koopblok.met-steun > .koopkolom{padding:28px 22px}
  .koopblok.met-steun > .steunblok{padding:28px 22px;
    border-left:0;border-top:1px solid rgba(255,255,255,.10)}
}

/* ==================================================================
   Credits met portretten
   ==================================================================
   De mensen achter de muziek, elk met een rond portret op een rij. Wie nog
   geen foto heeft, houdt zijn icoon in dezelfde ronde vorm — zo blijft een
   halfingevulde lijst rustig in plaats van kapot. */
/* Een raster in plaats van een vrije rij: dan staan de portretten altijd in
   nette kolommen. Met flex-wrap viel de laatste persoon alleen op een tweede
   regel (vijf boven, één eronder), wat scheef oogt. `auto-fit` legt ze zelf
   zo neer dat elke regel vol is: zes naast elkaar op een breed scherm, drie
   en drie op een tablet, twee en twee op een telefoon. */
.creditrij{list-style:none;margin:34px auto 0;padding:0;max-width:1000px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:30px 18px;justify-items:center}
.creditrij li{display:flex;flex-direction:column;align-items:center;
  text-align:center;width:100%;max-width:158px}
/* De naam krijgt een vaste hoogte van twee regels, zodat de rollen eronder
   op één lijn blijven staan. Zonder dit zakt de rol van iemand met een lange
   naam ("Andrew Orient (Drannoh)") een regel lager dan de rest en oogt de
   rij rommelig. */
.cr-naam{min-height:2.8em;display:flex;align-items:center}

.cr-foto{width:104px;height:104px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.14);margin-bottom:13px}
.cr-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Nog geen foto: het icoon in dezelfde cirkel, wat zachter zodat het niet
   met de echte portretten concurreert. */
.cr-leeg{font-size:34px;color:#8d8496;background:rgba(255,255,255,.04)}

.cr-naam{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:5px}
.cr-rol{font-size:12.5px;color:#a99fb5;line-height:1.5}

/* Op een tablet legde auto-fit ze als 4+2 neer; drie en drie oogt rustiger
   bij zes personen. */
@media(max-width:1000px){
  .creditrij{grid-template-columns:repeat(3,1fr);max-width:560px}
}
@media(max-width:520px){
  .creditrij{grid-template-columns:repeat(2,1fr);gap:24px 14px;max-width:340px}
  .creditrij li{max-width:150px}
  .cr-foto{width:86px;height:86px}
  .cr-leeg{font-size:28px}
  .cr-naam{min-height:2.6em}
}

/* De credits onder de koopkaarten op de hoofdpagina. Dezelfde portretten als
   op de releasepagina, maar met wat lucht erboven en een dunne streep, zodat
   het als een eigen onderdeel leest en niet als onderschrift bij de prijzen. */
.creditsonder{margin-top:64px;padding-top:52px;
  border-top:1px solid rgba(255,255,255,.10)}
.creditsonder .sectitel{margin-bottom:0}
.creditsonder .creditrij{margin-top:30px}