/* Aanvullende opmaak voor leespagina's en releasepagina's — glasstijl. */

.paginakop{
  padding:126px 0 46px;
  border-bottom:1px solid rgba(28,28,30,.08);
}
.paginakop h1{font-size:clamp(34px,5.4vw,56px);font-weight:800;margin:10px 0 12px}
.paginakop .fn{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--goud);font-weight:700}
.terug{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  color:var(--ink-zacht);margin-bottom:8px
}
.terug:hover{color:var(--goud)}

/* Leespagina's: rustige, doorlopende tekst zonder kader per alinea. */
.lees{max-width:760px;margin:0 auto;padding:56px 24px 72px}
.lees p{font-size:17.5px;line-height:1.82;color:var(--ink-zacht);margin:0 0 22px}
.lees p.groot{font-size:21px;font-weight:600;color:var(--ink)}
.lees blockquote{
  margin:34px 0;padding:22px 26px;border-left:4px solid var(--goud);
  background:rgba(255,209,102,.10);border-radius:0 14px 14px 0;
  font-size:19px;font-weight:700;line-height:1.55;color:var(--goud-licht)
}
.lees h2{font-size:26px;margin:40px 0 14px}
.slot{
  text-align:center;margin:52px 0 0;padding:34px 24px;
  border-top:1px solid rgba(28,28,30,.1)
}
.slot .regel{font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-zacht);font-weight:700}
.slot .zin{font-size:clamp(24px,3.4vw,34px);font-weight:900;color:var(--goud);margin:12px 0 26px}

/* --- Releasepagina's --------------------------------------------------- */
.spelers{display:grid;gap:16px;max-width:720px}
.insluit iframe{width:100%;border:0;border-radius:14px;display:block}
.songtekst{
  max-width:680px;font-size:16.5px;line-height:1.95;color:var(--ink-zacht);
  background:var(--glas);border:1px solid var(--glas-rand);border-radius:18px;padding:26px 28px;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--schaduw)
}
audio{width:100%;margin-top:16px}
.eigenvideo{
  width:100%;display:block;border-radius:18px;aspect-ratio:16/9;object-fit:cover;
  background:rgba(255,255,255,.06);border:1px solid var(--glas-rand);box-shadow:var(--schaduw-op)
}

/* --- Kopen met M-Pesa --------------------------------------------------- */
.koopblok{max-width:660px;margin-top:22px}
.koopkaarten{display:grid;gap:11px;margin-bottom:18px}
.koopkaart{
  display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:16px;cursor:pointer;
  transition:.18s;background:var(--glas);border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--schaduw)
}
.koopkaart:hover{background:rgba(255,255,255,.10);border-color:var(--goud)}
.koopkaart input{margin:0;accent-color:var(--goud);width:18px;height:18px;flex:0 0 18px}
.koopkaart:has(input:checked){border-color:var(--goud);background:rgba(255,138,181,.12);box-shadow:0 0 0 1px var(--goud) inset}
.kk-ic{font-size:24px;line-height:1}
.kk-tekst{display:flex;flex-direction:column;flex:1;min-width:0}
.kk-tekst b{font-size:16px}
.kk-onder{font-size:12px;color:var(--goud);font-weight:700;letter-spacing:.04em}
.kk-voor{font-size:12.5px;color:var(--ink-zacht);margin-top:2px}
.kk-prijs{font-size:18px;font-weight:900;white-space:nowrap}
/* Alleen kleur en lettergrootte; de breedte en het centreren staan in
   style.css. Hier stond ook 'margin:0 0 14px', en dat overschreef de
   'margin:0 auto' daar — waardoor deze regel als enige 100px links
   buiten de kolom viel. */
.koop-uitleg{font-size:13.5px;color:var(--ink-zacht)}
/* De opmaak van het koopblok staat in style.css, in één kolom van
   --koopbreed. Hier stond een oudere versie die de velden juist NAAST
   elkaar zette (flex-wrap + min-width:200px) met align-items:flex-end.
   Omdat pagina.css ná style.css geladen wordt, won die oude versie: de
   invoervelden krompen naar 290px en werden rechts uitgelijnd, terwijl de
   kaarten en knoppen op de volle breedte stonden. Dat is de scheve indruk
   die de gebruiker zag. Alleen de marge onder het label blijft hier. */
.koopvorm label{margin-bottom:6px}
.koop-melding{margin:14px 0 0;font-weight:700;min-height:20px}
.koop-melding.bezig{color:var(--goud)}
.koop-melding.goed{color:#5fd38a}
.koop-melding.fout{color:#ff7a7a}
.koop-klein{font-size:12px;color:var(--ink-zacht);margin-top:12px}
.downloadknop{
  display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:14px 28px;
  border-radius:999px;background:#1e7d32;color:#fff;font-weight:800;font-size:15.5px
}
.downloadknop:hover{background:#176627}

/* --- Handmatig betalen -------------------------------------------------- */
.handbetaal{
  background:var(--glas);border:1px solid var(--glas-rand);border-radius:18px;padding:20px 22px;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--schaduw)
}
.hb-stap{display:flex;gap:11px;align-items:flex-start;margin:0 0 11px;font-size:14.5px}
.hb-stap b{
  flex:0 0 23px;height:23px;border-radius:50%;
  background:linear-gradient(135deg,var(--goud),var(--goud-licht));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800
}
.hb-nr{font-weight:900;font-size:18px;color:var(--goud);white-space:nowrap}
.hb-naam{color:var(--ink-zacht);font-size:13.5px}
.handbetaal .koopvorm{margin-top:14px}
@media (max-width:560px){
  .koopkaart{flex-wrap:wrap}
  .kk-prijs{width:100%;text-align:right}
  .koopvorm .knop{width:100%;justify-content:center}
  .paginakop .wrap{padding:26px 20px}
}

/* --- aanvulling bij Neon Heart: de inleidende alinea --- */
.lood{font-size:17px;line-height:1.8;color:var(--ink-zacht)}
.paginakop .fn{font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--goud);font-weight:600}

/* --- About Us: beide artiesten onder elkaar ---------------------------- */
.au-blok{padding:76px 0;border-bottom:1px solid var(--glas-lijn)}
.au-blok:last-of-type{border-bottom:0}
.au-raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.au-blok.om .au-raster{grid-template-columns:1.15fr .85fr}
.au-blok.om .au-foto{order:2}
.au-foto{border-radius:var(--rond);overflow:hidden;aspect-ratio:4/5;
  border:1px solid var(--glas-rand);box-shadow:var(--schaduw-op)}
.au-foto img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
/* De portretfoto van MsD staat hoog in beeld: iets hoger uitsnijden zodat
   het hoofd volledig binnen het kader valt. */
.au-tekst .fn{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--goud);font-weight:600;margin-bottom:10px}
.au-tekst h2{font-family:var(--kopfont);font-size:clamp(30px,4.2vw,46px);
  font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:0 0 14px}
.au-tekst .lood{margin-bottom:20px}
.au-tekst p{margin:0 0 16px}
@media(max-width:860px){
  .au-raster,.au-blok.om .au-raster{grid-template-columns:1fr;gap:28px}
  .au-blok.om .au-foto{order:0}
  .au-foto{aspect-ratio:16/11}
  .au-blok{padding:52px 0}
}