/*
Theme Name: The Anthony Singers
Theme URI: https://theanthonysingers.nl
Author: The Anthony Singers
Description: Eigen thema voor The Anthony Singers – a healing formation. Licht en warm, met de muziekreis, liedpagina’s met verhaal en songtekst, en de persoonlijke reis. Werkt samen met de plugin Muziekreis.
Version: 2.5.2
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: the-anthony-singers
*/
:root{
  --bg:#FBF6EE; --vlak:#FFFFFF; --vlak2:#F4ECDF; --lijn:#E8DDCD; --rand:#CDBBA6;
  --inkt:#2A211B; --zacht:#5B4E45; --gedempt:#736659;
  --primair:#A9472A; --primair-hover:#8C3820; --op-primair:#FFFFFF;
  --f1:#94560C; --f1z:#F7DDB0; --f2:#A3443A; --f2z:#F5D0C8; --f3:#5B519C; --f3z:#DEDAF3; --f4:#216C6B; --f4z:#C9E7E3; --f5:#376F45; --f5z:#D4EBD3;
  --gloed1:rgba(233,162,59,.28); --gloed2:rgba(169,71,42,.10); --gloed3:rgba(91,81,156,.10);
  --schaduw:0 1px 2px rgba(42,33,27,.06), 0 8px 24px rgba(42,33,27,.07);
  --kop:'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --romp:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C1613; --vlak:#261E19; --vlak2:#2F2620; --lijn:#3D322A; --rand:#5A4B3F;
    --inkt:#F7EFE4; --zacht:#D8CABB; --gedempt:#B5A697;
    --primair:#E9906A; --primair-hover:#F2A886; --op-primair:#1C1613;
    --f1:#EDB665; --f1z:#4A3517; --f2:#EB9F92; --f2z:#4A2622; --f3:#B9AFEC; --f3z:#302A4E; --f4:#80CCC6; --f4z:#1D3B39; --f5:#9BD3A3; --f5z:#223B27;
    --gloed1:rgba(233,162,59,.16); --gloed2:rgba(233,144,106,.08); --gloed3:rgba(185,175,236,.08);
    --schaduw:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#1C1613; --vlak:#261E19; --vlak2:#2F2620; --lijn:#3D322A; --rand:#5A4B3F;
  --inkt:#F7EFE4; --zacht:#D8CABB; --gedempt:#B5A697;
  --primair:#E9906A; --primair-hover:#F2A886; --op-primair:#1C1613;
  --f1:#EDB665; --f1z:#4A3517; --f2:#EB9F92; --f2z:#4A2622; --f3:#B9AFEC; --f3z:#302A4E; --f4:#80CCC6; --f4z:#1D3B39; --f5:#9BD3A3; --f5z:#223B27;
  --gloed1:rgba(233,162,59,.16); --gloed2:rgba(233,144,106,.08); --gloed3:rgba(185,175,236,.08);
  --schaduw:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}
html{ background:var(--bg); scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--bg); color:var(--inkt); font-family:var(--romp); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:40; background:color-mix(in srgb, var(--bg) 92%, transparent); }
a{ color:inherit; }
a:hover{ color:var(--primair); }
:focus-visible{ outline:2.5px solid var(--primair); outline-offset:3px; border-radius:8px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
@media (min-width:700px){ .wrap{ padding:0 32px; } }
h1,h2,h3,h4{ font-family:var(--kop); letter-spacing:-0.02em; color:var(--inkt); }

/* Kopbalk */
.kopbalk{ position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--lijn); }
.kopbalk .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:70px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo:hover{ color:inherit; }
.logo__tekst{ display:flex; flex-direction:column; line-height:1.05; font-family:var(--kop); font-weight:800; font-size:18px; letter-spacing:-0.01em; }
.logo__tekst small{ font-family:var(--romp); font-weight:600; font-size:12.5px; letter-spacing:.01em; color:var(--primair); margin-top:4px; }
.menu{ display:none; gap:2px; align-items:center; }
.menu a{ padding:10px 13px; border-radius:999px; text-decoration:none; color:var(--zacht); font-weight:600; font-size:15px; white-space:nowrap; }
.menu a:hover{ color:var(--inkt); background:var(--vlak2); }
.menu a[aria-current="page"]{ color:var(--inkt); background:var(--vlak2); }
.rechts{ display:flex; align-items:center; gap:6px; }
.talen{ display:flex; gap:2px; padding:3px; border-radius:999px; border:1px solid var(--lijn); background:var(--vlak); }
.talen button{ min-width:42px; min-height:38px; padding:0 8px; border:0; border-radius:999px; background:transparent; color:var(--zacht); font:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.talen button[aria-pressed="true"]{ background:var(--inkt); color:var(--bg); }
.menuknop{ width:46px; height:46px; display:grid; place-items:center; border:0; background:transparent; color:var(--inkt); border-radius:12px; cursor:pointer; }
.menupaneel{ border-top:1px solid var(--lijn); padding:6px 20px 18px; display:flex; flex-direction:column; }
.menupaneel[hidden]{ display:none; }
.menupaneel a{ padding:14px 4px; text-decoration:none; font-weight:600; font-size:19px; border-bottom:1px solid var(--lijn); }
.menupaneel a[aria-current="page"]{ color:var(--primair); }
@media (min-width:1040px){ .menu{ display:flex; } .menuknop, .menupaneel{ display:none !important; } }
@media (max-width:380px){ .logo__tekst{ font-size:16px; } .logo svg{ width:28px; height:28px; } }

/* Knoppen */
.knop{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; font:inherit; font-weight:600; font-size:16px; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:background-color .2s, border-color .2s, color .2s, transform .2s; }
.knop--vol{ background:var(--primair); color:var(--op-primair); }
.knop--vol:hover{ background:var(--primair-hover); color:var(--op-primair); }
.knop--rand{ border-color:var(--rand); color:var(--inkt); background:transparent; }
.knop--rand:hover{ border-color:var(--inkt); color:var(--inkt); }
.knop--klein{ min-height:46px; padding:0 18px; font-size:15px; }
.knop svg{ flex:0 0 auto; }
.knoppen{ display:flex; flex-wrap:wrap; gap:10px; }

/* Secties */
.sectie{ padding:72px 0; }
.sectie--vlak{ background:var(--vlak2); }
@media (min-width:800px){ .sectie{ padding:112px 0; } }
.voorzet{ margin:0 0 12px; color:var(--primair); font-weight:700; font-size:15px; letter-spacing:.01em; }
.h1{ margin:0; font-size:clamp(40px, 8.5vw, 88px); line-height:1; font-weight:800; }
.h2{ margin:0; font-size:clamp(32px, 4.8vw, 54px); line-height:1.06; font-weight:800; max-width:22ch; }
.h3{ margin:0; font-size:clamp(22px, 2.6vw, 28px); line-height:1.15; font-weight:600; }
.lead{ margin:18px 0 0; font-size:clamp(17px, 2vw, 21px); line-height:1.6; color:var(--zacht); max-width:58ch; }
.leeg{ color:var(--gedempt); font-style:italic; margin:0; }
.tekst p{ margin:0 0 18px; font-size:18px; line-height:1.75; max-width:64ch; }

/* Hero */
.hero{ position:relative; overflow:hidden; padding:28px 0 64px; background:
  radial-gradient(60% 60% at 88% 0%, var(--gloed1), transparent 70%),
  radial-gradient(50% 50% at 0% 100%, var(--gloed3), transparent 70%),
  radial-gradient(40% 40% at 60% 100%, var(--gloed2), transparent 70%); }
.hero .wrap{ position:relative; display:grid; gap:28px; align-items:center; }
.hero__kunst{ position:absolute; right:-140px; top:-90px; width:420px; height:420px; opacity:.45; pointer-events:none; }
.hero__tekst{ position:relative; }
.hero .lead{ margin-top:14px; }
.hero .knoppen{ margin-top:22px; }
@media (min-width:960px){
  .hero{ padding:88px 0 112px; }
  .hero .wrap{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:56px; }
  .hero__kunst{ right:auto; left:44%; top:50%; transform:translate(-50%,-50%); width:640px; height:640px; opacity:.35; }
}
.formatie .ring{ transform-origin:200px 200px; animation:draai 120s linear infinite; }
.formatie .ring2{ transform-origin:200px 200px; animation:draai 90s linear infinite reverse; }
@keyframes draai{ to{ transform:rotate(360deg); } }

/* Nieuwste releases (eerste scherm) */
.nieuw{ position:relative; background:var(--vlak); border:1px solid var(--lijn); border-radius:24px; padding:16px; box-shadow:var(--schaduw); }
.nieuw__kop{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:2px 6px 10px; }
.nieuw__kop h2{ margin:0; font-size:19px; font-weight:600; }
.nieuw__kop a{ font-size:14px; font-weight:600; color:var(--primair); text-decoration:none; }
.nieuw ol, ol.rijen{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.rij{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:14px; align-items:center; padding:8px; border-radius:16px; transition:background-color .2s; }
.rij:hover{ background:var(--vlak2); }
.rij .hoes{ border-radius:12px; }
.rij__titel{ display:block; font-family:var(--kop); font-weight:600; font-size:17px; line-height:1.2; text-decoration:none; }
.rij__meta{ display:block; font-size:13.5px; color:var(--gedempt); margin-top:2px; }
.speel{ width:50px; height:50px; border-radius:50%; border:0; display:grid; place-items:center; background:var(--accent, var(--primair)); color:#1F1813; cursor:pointer; text-decoration:none; transition:transform .2s; flex:0 0 auto; }
.speel:hover{ transform:scale(1.06); }
.speel[aria-pressed="true"]{ box-shadow:0 0 0 4px color-mix(in srgb, var(--accent, var(--primair)) 25%, transparent); }
.speel--groot{ width:64px; height:64px; }

/* Hoes */
.hoes{ display:grid; place-items:center; aspect-ratio:1/1; border-radius:16px; background:var(--accentz); color:var(--accent); overflow:hidden; text-decoration:none; }
.hoes svg{ width:70%; height:70%; }

/* Pijlers */
.pijlers{ display:grid; gap:18px; margin-top:44px; }
@media (min-width:820px){ .pijlers{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } }
.pijler{ padding:28px; border-radius:24px; background:var(--vlak); border:1px solid var(--lijn); }
.pijler__stip{ width:14px; height:14px; border-radius:50%; background:var(--accent); margin-bottom:18px; box-shadow:0 0 0 6px var(--accentz); }
.pijler h3{ margin:0 0 8px; font-size:23px; font-weight:600; }
.pijler p{ margin:0; color:var(--zacht); font-size:16.5px; }

/* Reis-voorproef */
.stappen{ display:grid; gap:12px; margin-top:40px; }
@media (min-width:860px){ .stappen{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.stappen a, .stappen button{ text-decoration:none; } .stappen a, .stappen button{ text-align:left; font:inherit; color:inherit; cursor:pointer; padding:20px; border-radius:20px; background:var(--accentz); border:0; display:flex; flex-direction:column; gap:4px; transition:transform .2s; }
.stappen a:hover, .stappen button:hover{ transform:translateY(-3px); }
.stappen .nr{ font-family:var(--kop); font-weight:800; font-size:15px; color:var(--accentt); }
.stappen strong{ font-family:var(--kop); font-size:22px; color:var(--inkt); line-height:1.15; }
.stappen span.sub{ color:var(--zacht); font-size:15px; }

/* Citaat / droom */
.droom{ display:grid; gap:32px; align-items:center; }
@media (min-width:900px){ .droom{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:64px; } }
.foto{ aspect-ratio:4/5; border-radius:28px; background:linear-gradient(160deg, var(--f1z), var(--f2z) 50%, var(--f3z)); display:grid; place-items:center; text-align:center; color:var(--zacht); font-size:15px; padding:24px; border:1px solid var(--lijn); }
.citaat{ margin:0; font-family:var(--kop); font-weight:600; font-size:clamp(26px, 3.6vw, 40px); line-height:1.2; letter-spacing:-0.015em; }
.citaat__wie{ margin:18px 0 26px; color:var(--zacht); }

/* Groepen-teaser */
.band{ border-radius:32px; padding:clamp(28px,5vw,64px); background:
  radial-gradient(70% 90% at 100% 0%, var(--gloed1), transparent 70%), var(--inkt); color:var(--bg); display:grid; gap:24px; }
.band h2{ color:var(--bg); }
.band .lead{ color:color-mix(in srgb, var(--bg) 82%, transparent); }
.band .knop--vol{ background:var(--bg); color:var(--inkt); }
.band .knop--vol:hover{ background:var(--f1z); color:var(--inkt); }
@media (min-width:900px){ .band{ grid-template-columns:minmax(0,3fr) auto; align-items:end; } }

/* Volgen + nieuwsbrief */
.volg{ display:grid; gap:24px; }
@media (min-width:900px){ .volg{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; } }
.socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.kaartvak{ background:var(--vlak); border:1px solid var(--lijn); border-radius:24px; padding:clamp(20px,3vw,32px); box-shadow:var(--schaduw); }
.kaartvak h3{ margin:0 0 6px; font-size:24px; font-weight:600; }
.kaartvak > p{ margin:0 0 20px; color:var(--zacht); }

/* Formulieren */
form p{ margin:0 0 16px; }
label{ display:block; font-weight:600; font-size:15px; margin-bottom:7px; }
label .opt{ font-weight:400; color:var(--gedempt); }
input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea{ width:100%; min-height:50px; padding:12px 15px; border-radius:14px; font:inherit; font-size:16px; background:var(--bg); color:var(--inkt); border:1.5px solid var(--rand); }
textarea{ resize:vertical; min-height:140px; }
input:focus, select:focus, textarea:focus{ border-color:var(--primair); outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--primair) 18%, transparent); }
.twee{ display:grid; gap:0 16px; }
@media (min-width:600px){ .twee{ grid-template-columns:1fr 1fr; } }
.vinkje{ display:flex; gap:12px; align-items:flex-start; }
.vinkje input{ width:22px; height:22px; margin-top:2px; flex:0 0 auto; accent-color:var(--primair); }
.vinkje label{ font-weight:400; margin:0; color:var(--zacht); font-size:15px; }
.vinkje a{ color:var(--primair); }
.fout{ color:var(--f2); font-weight:600; margin:0 0 14px; }
.melding{ padding:22px 24px; border-radius:20px; background:var(--f5z); }
.melding h3{ margin:0 0 6px; font-size:22px; }
.melding p{ margin:0; color:var(--inkt); }

/* Muziekreis */
.fasenav{ position:sticky; top:calc(env(safe-area-inset-top,0px) + 71px); z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--lijn); margin-bottom:44px; }
.fasenav ol{ list-style:none; margin:0 auto; max-width:1180px; padding:10px 14px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.fasenav ol::-webkit-scrollbar{ display:none; }
.fasenav li{ flex:0 0 auto; }
.fasenav button{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; font:inherit; font-weight:600; font-size:15px; color:var(--zacht); background:transparent; border:1.5px solid transparent; cursor:pointer; }
.fasenav .stip{ width:10px; height:10px; border-radius:50%; background:var(--accent); opacity:.45; }
.fasenav button[aria-current="step"]{ color:var(--inkt); border-color:var(--accent); background:var(--accentz); }
.fasenav button[aria-current="step"] .stip{ opacity:1; }
.fasenav__balk{ height:3px; background:var(--lijn); }
.fasenav__balk span{ display:block; height:100%; width:0; background:linear-gradient(to right, var(--f1), var(--f2), var(--f3), var(--f4), var(--f5)); background-size:100vw 100%; transition:width .15s linear; }

.pad{ list-style:none; margin:0; padding:0 0 0 40px; position:relative; }
.pad::before{ content:""; position:absolute; left:14px; top:12px; bottom:12px; width:3px; border-radius:3px; background:linear-gradient(to bottom, var(--f1), var(--f2) 25%, var(--f3) 50%, var(--f4) 75%, var(--f5)); opacity:.5; }
.fase{ padding-bottom:88px; scroll-margin-top:calc(env(safe-area-inset-top,0px) + 150px); }
.fase:last-child{ padding-bottom:24px; }
.fase__kop{ display:flex; align-items:center; gap:14px; margin-left:-40px; }
.fase__nr{ flex:0 0 auto; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:3px solid var(--accent); color:var(--accentt); font-weight:800; font-size:14px; position:relative; transition:background-color .3s, color .3s; }
.fase.is-actief .fase__nr{ background:var(--accent); color:#1F1813; }
.fase__naam{ margin:0; font-size:clamp(30px, 4.6vw, 46px); line-height:1.05; font-weight:800; color:var(--accentt); }
.fase__sub{ margin:2px 0 0; color:var(--zacht); font-size:17px; }
.fase__intro{ margin:16px 0 28px; max-width:60ch; color:var(--zacht); font-size:18px; }
.fase__nummers{ display:grid; gap:16px; }
@media (min-width:700px){ .pad{ padding-left:72px; } .pad::before{ left:20px; } .fase__kop{ margin-left:-72px; gap:28px; } .fase__nr{ width:43px; height:43px; font-size:16px; } }
@media (min-width:1040px){ .fase__nummers{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.kaart{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:16px; padding:16px; background:var(--vlak); border:1px solid var(--lijn); border-radius:24px; box-shadow:var(--schaduw); }
@media (min-width:700px){ .kaart{ grid-template-columns:128px minmax(0,1fr); gap:22px; padding:20px; } }
.kaart__tekst{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.kaart__titel{ margin:0; font-size:21px; line-height:1.2; font-weight:600; }
.kaart__titel a{ text-decoration:none; }
.kaart__schrijver, .kaart__samen{ margin:0; color:var(--zacht); font-size:15.5px; }
.kaart .knoppen{ grid-column:1/-1; margin-top:4px; align-items:center; }
@media (min-width:700px){ .kaart .knoppen{ grid-column:2; } }
.label-taal{ display:inline-block; align-self:flex-start; margin-top:6px; padding:3px 11px; border-radius:999px; background:var(--vlak2); font-size:13px; font-weight:600; color:var(--zacht); }

/* Van ... naar ... */
.reframe{ margin:8px 0 4px; display:grid; gap:2px; font-size:15.5px; line-height:1.45; }
.reframe .van{ color:var(--zacht); }
.reframe .naar{ color:var(--inkt); font-weight:600; }
.reframe b{ font-weight:700; color:var(--accentt); margin-right:4px; }

/* Releases */
.filter{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
.filter button{ min-height:44px; padding:0 18px; border-radius:999px; border:1.5px solid var(--rand); background:transparent; color:var(--inkt); font:inherit; font-weight:600; font-size:15px; cursor:pointer; }
.filter button[aria-pressed="true"]{ background:var(--inkt); color:var(--bg); border-color:var(--inkt); }
.releases{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:28px; }
@media (min-width:700px){ .releases{ grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:24px; } }
.release{ position:relative; display:flex; flex-direction:column; gap:4px; padding:12px 12px 18px; border-radius:24px; background:var(--vlak); border:1px solid var(--lijn); }
.release .hoes{ margin-bottom:10px; }
.release__meta{ font-size:13px; color:var(--gedempt); }
.release__titel{ font-family:var(--kop); font-size:19px; font-weight:600; line-height:1.2; text-decoration:none; }
.release__titel::after{ content:""; position:absolute; inset:0; border-radius:24px; }
.release__schrijver{ font-size:14px; color:var(--zacht); }
.release__speel{ position:absolute; z-index:2; right:22px; bottom:22px; }

/* Nummerpagina */
.nummer{ padding:36px 0 96px; }
.terug{ display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:none; color:var(--primair); font-weight:600; margin-bottom:18px; }
.nummer__raster{ display:grid; gap:28px; }
@media (min-width:880px){ .nummer__raster{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; } .nummer__links{ position:sticky; top:calc(env(safe-area-inset-top,0px) + 100px); } }
.nummer__links .hoes{ border-radius:28px; }
.nummer__fase{ display:inline-block; margin:0 0 12px; color:var(--accentt); font-weight:700; text-decoration:none; }
.nummer__titel{ margin:0; font-size:clamp(38px, 6vw, 68px); line-height:1.02; font-weight:800; }
.nummer__wie{ margin:16px 0 0; font-size:19px; font-weight:600; }
.nummer__meta{ margin:2px 0 0; color:var(--gedempt); }
.nummer__luister{ display:flex; align-items:center; gap:16px; margin:24px 0; padding:14px; border-radius:22px; background:var(--accentz); }
.nummer__luister span{ font-weight:600; }
.verhaal{ margin-top:36px; padding-top:32px; border-top:1px solid var(--lijn); }
.verhaal h2{ margin:0 0 18px; font-size:26px; font-weight:600; }
.verder{ display:grid; gap:12px; margin-top:56px; }
@media (min-width:700px){ .verder{ grid-template-columns:1fr 1fr; } .verder .volgend{ grid-column:2; } }
.verder a{ display:flex; flex-direction:column; gap:2px; padding:20px 22px; border-radius:22px; background:var(--vlak); border:1px solid var(--lijn); text-decoration:none; }
.verder a:hover{ border-color:var(--accent); color:inherit; }
.verder .volgend{ text-align:right; }
.verder small{ font-size:14px; color:var(--gedempt); }
.verder strong{ font-family:var(--kop); font-size:20px; font-weight:600; }

/* Over */
.stappenrij{ display:grid; gap:16px; margin-top:32px; counter-reset:s; }
@media (min-width:820px){ .stappenrij{ grid-template-columns:repeat(3,minmax(0,1fr)); } .stappenrij--vier{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .stappenrij--vier{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stappenrij li{ list-style:none; padding:26px; border-radius:24px; background:var(--vlak); border:1px solid var(--lijn); counter-increment:s; }
.stappenrij li::before{ content:counter(s); display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--accentz); color:var(--accentt); font-family:var(--kop); font-weight:800; margin-bottom:14px; }
.stappenrij h3{ margin:0 0 6px; font-size:21px; font-weight:600; }
.stappenrij p{ margin:0; color:var(--zacht); }
.stappenrij{ padding:0; }
.slotzin{ margin:28px 0 0; font-family:var(--kop); font-size:clamp(22px,3vw,30px); font-weight:600; line-height:1.25; max-width:30ch; }

/* Groepen */
.aanbod{ display:grid; gap:18px; margin-top:40px; }
@media (min-width:820px){ .aanbod{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.aanbod article{ padding:28px; border-radius:24px; background:var(--vlak); border:1px solid var(--lijn); border-top:6px solid var(--accent); }
.aanbod h3{ margin:0 0 8px; font-size:22px; font-weight:600; }
.aanbod p{ margin:0; color:var(--zacht); }
.festlijst{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:8px; }
@media (min-width:820px){ .festlijst{ grid-template-columns:1fr 1fr; } }
.festlijst .rij{ background:var(--vlak); border:1px solid var(--lijn); }
.aanvraag{ display:grid; gap:32px; }
@media (min-width:960px){ .aanvraag{ grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:64px; align-items:start; } }

/* Juridisch */
.juridisch{ padding:56px 0 96px; }
.juridisch .wrap{ max-width:820px; }
.juridisch .bijgewerkt{ color:var(--gedempt); margin:10px 0 0; font-size:15px; }
.juridisch h2{ margin:40px 0 10px; font-size:24px; font-weight:600; }
.juridisch p, .juridisch li{ font-size:17px; line-height:1.7; color:var(--inkt); }
.juridisch p{ margin:0 0 12px; }
.juridisch ul{ margin:0 0 12px; padding-left:22px; }
.juridisch .let{ padding:16px 18px; border-radius:16px; background:var(--f1z); color:var(--inkt); font-size:15px; }

/* Voet */
.voet{ border-top:1px solid var(--lijn); padding:56px 0 calc(110px + env(safe-area-inset-bottom,0px)); color:var(--zacht); font-size:15px; background:var(--vlak2); }
.voet .wrap{ display:grid; gap:28px; }
@media (min-width:860px){ .voet .wrap{ grid-template-columns:minmax(0,2fr) repeat(2, minmax(0,1fr)); } }
.voet h3{ margin:0 0 10px; font-size:15px; font-family:var(--romp); font-weight:700; color:var(--inkt); letter-spacing:0; }
.voet ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.voet a, .voet button.linkknop{ text-decoration:none; display:inline-block; padding:6px 0; color:var(--zacht); }
.voet a:hover, .voet button.linkknop:hover{ color:var(--primair); }
button.linkknop{ background:none; border:0; font:inherit; cursor:pointer; text-align:left; }
.voet__onder{ grid-column:1/-1; padding-top:20px; border-top:1px solid var(--lijn); color:var(--gedempt); font-size:14px; }

/* Speler onderin */
.speler{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:35; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 10px 10px 10px; border-radius:22px; background:var(--inkt); color:var(--bg); box-shadow:0 16px 40px rgba(0,0,0,.28); transform:translateY(140%); transition:transform .3s ease; }
.speler.open{ transform:none; }
.speler .speel{ background:var(--accent); color:var(--inkt); }
.speler__titel{ display:block; font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.speler__noot{ display:block; font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.speler__balk{ display:block; height:4px; border-radius:4px; background:rgba(255,255,255,.18); margin-top:6px; overflow:hidden; }
:root[data-theme="dark"] .speler__balk{ background:rgba(0,0,0,.18); }
.speler__balk span{ display:block; height:100%; width:0; background:var(--accent); }
.speler.speelt .speler__balk span{ animation:voortgang 30s linear forwards; }
@keyframes voortgang{ to{ width:100%; } }
.speler__sluit{ width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:inherit; display:grid; place-items:center; cursor:pointer; }
@media (min-width:700px){ .speler{ left:auto; right:24px; width:420px; } }

/* Cookiemelding */
.cookies{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:50; padding:22px; border-radius:24px; background:var(--vlak); border:1px solid var(--lijn); box-shadow:0 20px 50px rgba(0,0,0,.2); }
.cookies[hidden]{ display:none; }
.cookies h2{ margin:0 0 6px; font-size:20px; font-weight:600; }
.cookies p{ margin:0 0 16px; color:var(--zacht); font-size:15px; }
.cookies a{ color:var(--primair); }
.cookies .knoppen .knop{ flex:1 1 140px; }
@media (min-width:700px){ .cookies{ left:24px; right:auto; width:440px; } }

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

/* Songtekst en partituur */
.songtekst{ margin-top:36px; padding:28px; border-radius:24px; background:var(--accentz); }
.songtekst h2{ margin:0 0 16px; font-size:24px; font-weight:600; }
.songtekst__tekst{ white-space:pre-line; font-size:19px; line-height:1.85; color:var(--inkt); }
.partituurblok{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:28px; padding:20px 22px; border-radius:22px; background:var(--vlak); border:1.5px dashed var(--rand); }
.partituurblok > svg{ flex:0 0 auto; color:var(--primair); }
.partituurblok p{ margin:0; flex:1 1 220px; }
.partituurblok > div{ flex:1 1 260px; }
.zorgkaart{ position:relative; padding:28px; border-radius:24px; background:var(--accentz); }
.zorgkaart h2{ margin:0 0 8px; font-size:24px; font-weight:600; }
.zorgkaart p{ margin:0; color:var(--inkt); }

/* ===== Lettertypes: lokaal, geen verbinding met Google ===== */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-latin-600-normal.woff2) format('woff2');}

/* ===== Fasekleuren: één kleur per fase, de rest volgt vanzelf ===== */
:root{ --accent:var(--primair); --kop-top:0px; }
[style*="--accent"], :root{ --accentz:color-mix(in srgb, var(--accent) 20%, var(--bg)); --accentt:color-mix(in srgb, var(--accent) 58%, var(--inkt)); }
.admin-bar{ --kop-top:32px; }
@media (max-width:782px){ .admin-bar{ --kop-top:46px; } }
.kopbalk{ top:calc(env(safe-area-inset-top,0px) + var(--kop-top)); }
.fasenav{ top:calc(env(safe-area-inset-top,0px) + var(--kop-top) + 71px); }
@media (max-width:600px){ .admin-bar .kopbalk{ top:0; } }
.hoes--foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.hoes--foto{ background:var(--vlak2); }
.speel svg{ display:block; }
.wrap--reis{ padding-bottom:96px; }
.menu ul, .menupaneel ul{ list-style:none; margin:0; padding:0; display:contents; }
.menu li, .menupaneel li{ display:contents; }
.menu .current-menu-item > a, .menu .current_page_item > a{ color:var(--inkt); background:var(--vlak2); }
.menupaneel .current-menu-item > a{ color:var(--primair); }
.talen a{ display:grid; place-items:center; min-width:42px; min-height:38px; padding:0 8px; border-radius:999px; text-decoration:none; color:var(--zacht); font-weight:700; font-size:13px; }
.talen a[aria-current="true"]{ background:var(--inkt); color:var(--bg); }
.knop-account{ display:none; }
@media (min-width:1040px){ .knop-account{ display:inline-flex; } }

/* ===== Inhoud van gewone pagina's (blokeditor) ===== */
.paginakop{ padding:56px 0 8px; background:radial-gradient(60% 80% at 90% 0%, var(--gloed1), transparent 70%); }
.paginakop .h2{ max-width:24ch; }
.inhoud{ padding:28px 0 96px; }
.inhoud > .wrap > *{ max-width:760px; }
.inhoud > .wrap > .alignwide, .inhoud > .wrap > .releasesblok, .inhoud > .wrap > .festlijst, .inhoud > .wrap > .reis-app, .inhoud > .wrap > .reis-poort, .inhoud > .wrap > .wp-block-columns{ max-width:none; }
.inhoud p, .inhoud li{ font-size:18px; line-height:1.75; }
.inhoud h2{ margin:48px 0 12px; font-size:clamp(26px,3.2vw,36px); font-weight:800; line-height:1.1; }
.inhoud h3{ margin:32px 0 8px; font-size:23px; font-weight:600; }
.inhoud a{ color:var(--primair); }
.inhoud ol.wp-block-list, .inhoud ul.wp-block-list{ padding-left:24px; }
.inhoud img{ max-width:100%; height:auto; border-radius:20px; }
.formulier-plek{ padding:18px 20px; border:1.5px dashed var(--rand); border-radius:16px; color:var(--zacht); }
.inhoud .fluentform, .inhoud .frm-fluent-form{ background:var(--vlak); border:1px solid var(--lijn); border-radius:24px; padding:clamp(20px,3vw,32px); }
.inhoud .ff-btn-submit{ background:var(--primair) !important; color:var(--op-primair) !important; border-radius:999px !important; min-height:52px; padding:0 26px !important; font-weight:600 !important; border:0 !important; }
.inhoud .ff-el-form-control{ border-radius:14px !important; min-height:50px; border:1.5px solid var(--rand) !important; background:var(--bg) !important; color:var(--inkt) !important; }
.nb-plek{ margin-top:8px; }

/* ===== Liedpagina ===== */
.songtekst{ margin-top:36px; padding:28px; border-radius:24px; background:var(--accentz); }
.songtekst h2{ margin:0 0 16px; font-size:24px; font-weight:600; }
.songtekst__tekst{ white-space:pre-line; font-size:19px; line-height:1.85; color:var(--inkt); }
.partituurblok{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:28px; padding:20px 22px; border-radius:22px; background:var(--vlak); border:1.5px dashed var(--rand); }
.partituurblok > svg{ flex:0 0 auto; color:var(--primair); }
.partituurblok p{ margin:0; flex:1 1 220px; }
.reisblok{ margin-top:28px; padding:24px; border-radius:22px; background:var(--inkt); color:var(--bg); display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center; }
.reisblok p{ margin:0; flex:1 1 260px; }
.reisblok .knop--vol{ background:var(--bg); color:var(--inkt); }
.verhaal .wp-block-image, .verhaal img{ border-radius:20px; }

/* ===== Persoonlijke reis ===== */
.reis-app{ max-width:880px; }
.reis-laden{ color:var(--zacht); }
.reis-nav{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin:0 0 28px; padding:6px; border-radius:999px; background:var(--vlak); border:1px solid var(--lijn); position:sticky; top:calc(var(--kop-top) + 80px); z-index:15; }
.reis-nav__tabs{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.reis-nav__tabs::-webkit-scrollbar{ display:none; }
.reis-nav a{ flex:0 0 auto; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:600; font-size:15px; color:var(--zacht); white-space:nowrap; }
.reis-nav a[aria-current="page"]{ background:var(--inkt); color:var(--bg); }
.reis-nav__uit{ font-size:14px !important; }
@media (max-width:640px){ .reis-nav{ border-radius:20px; } .reis-nav__uit{ display:none; } }
.reis-melding{ padding:14px 18px; border-radius:14px; background:var(--f2z); margin:0 0 16px; }
.reis-blok{ margin:8px 0 28px; }
.reis-blok .lead{ margin-top:12px; }
.reis-kaart{ background:var(--vlak); border:1px solid var(--lijn); border-radius:24px; padding:clamp(20px,3vw,30px); margin:0 0 18px; box-shadow:var(--schaduw); }
.reis-kaart h2{ margin:0 0 10px; font-size:clamp(22px,2.8vw,28px); font-weight:600; line-height:1.2; }
.reis-kaart p{ margin:0 0 14px; }
.reis-kaart--accent{ background:var(--accentz); border-color:transparent; }
.reis-huidig{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:520px){ .reis-huidig{ grid-template-columns:1fr; } .reis-huidig .hoes{ max-width:160px; } }
.reis-fase-label{ color:var(--accentt); font-weight:600; }
.reis-groot{ font-family:var(--kop); font-size:24px; font-weight:600; }
.reis-fasebalk{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; }
.reis-fasebalk li{ display:grid; grid-template-columns:minmax(90px,140px) minmax(0,1fr) 44px; gap:12px; align-items:center; font-size:15px; }
.reis-fasebalk .balk{ height:10px; border-radius:10px; background:var(--accentz); overflow:hidden; }
.reis-fasebalk .balk span{ display:block; height:100%; background:var(--accent); border-radius:10px; }
.reis-fasebalk .tal{ text-align:right; color:var(--gedempt); }
.reis-privacy{ font-size:14px; color:var(--gedempt); }
.reis-ok{ display:flex; gap:8px; align-items:center; color:var(--f5); font-weight:600; }
.reis-let{ padding:14px 16px; border-radius:14px; background:var(--f1z); }
.gedempt{ color:var(--gedempt); font-size:15px; }
.reis-app textarea, .reis-app input[type=text]{ width:100%; padding:12px 15px; border-radius:14px; font:inherit; background:var(--bg); color:var(--inkt); border:1.5px solid var(--rand); margin-bottom:12px; }
.reis-app textarea:focus, .reis-app input:focus{ border-color:var(--primair); outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--primair) 18%, transparent); }
.reis-lijst{ list-style:none; margin:0 0 16px; padding:0; }
.reis-lijst li{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--lijn); }
.h4{ font-size:19px; font-weight:600; margin:28px 0 12px; }
/* Scan */
.scan-vraag{ border:1px solid var(--lijn); border-radius:20px; padding:18px 20px; margin:0 0 12px; background:var(--vlak); }
.scan-vraag legend{ display:flex; gap:12px; align-items:baseline; font-weight:600; font-size:17px; padding:0; float:left; width:100%; margin-bottom:12px; }
.scan-nr{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--vlak2); font-size:13px; }
.scan-schaal{ clear:both; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.scan-schaal input{ position:absolute; opacity:0; width:1px; height:1px; }
.scan-schaal label{ display:grid; place-items:center; text-align:center; min-height:48px; padding:6px; border-radius:12px; border:1.5px solid var(--rand); font-size:13.5px; line-height:1.25; cursor:pointer; }
.scan-schaal input:checked + label{ background:var(--inkt); color:var(--bg); border-color:var(--inkt); }
.scan-schaal input:focus-visible + label{ outline:2.5px solid var(--primair); outline-offset:2px; }
@media (max-width:520px){ .scan-schaal label{ font-size:12px; } }
/* Leerlijn */
.leerlijn-fase{ margin:0 0 44px; }
.leerlijn-fase .fase__kop{ margin-left:0; }
.leerlijn-liedjes{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ll-rij{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px; border-radius:18px; background:var(--vlak); border:1px solid var(--lijn); text-decoration:none; }
a.ll-rij:hover{ border-color:var(--accent); color:inherit; }
.ll-rij.is-slot{ opacity:.6; }
.ll-titel{ display:block; font-family:var(--kop); font-weight:600; font-size:18px; }
.ll-tag{ display:block; font-size:14px; color:var(--zacht); }
.ll-status{ display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--gedempt); font-weight:600; }
.ll-status.is-klaar{ color:var(--accentt); }
/* Lied in de reis */
.lied-kop{ margin:0 0 28px; }
.lied-kop .terug{ margin-bottom:6px; }
.lied-kop .gedempt{ display:block; margin-bottom:12px; }
.stapbalk{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.stapbalk button{ width:100%; background:none; border:0; padding:4px 0; cursor:pointer; text-align:left; color:var(--gedempt); font:inherit; }
.stapbalk .streep{ display:block; height:6px; border-radius:6px; background:var(--lijn); }
.stapbalk .is-gedaan .streep{ background:var(--accent); }
.stapbalk [aria-current="step"] .streep{ background:var(--inkt); }
.stapbalk .naam{ display:block; font-size:12.5px; margin-top:6px; font-weight:600; }
.stapbalk [aria-current="step"] .naam{ color:var(--inkt); }
@media (max-width:560px){ .stapbalk .naam{ display:none; } }
.stap-inhoud .lead{ margin:14px 0 22px; }
.stap-inhoud > .knop{ margin-top:22px; }
.themas{ display:flex; flex-wrap:wrap; gap:8px; }
.themas span{ padding:4px 12px; border-radius:999px; background:var(--accentz); font-size:14px; }
.reis-tekst, .reis-oefening{ white-space:pre-line; font-size:19px; line-height:1.75; margin:18px 0; }
.reis-oefening{ padding:26px; border-radius:22px; background:var(--accentz); }
.reis-songtekst{ white-space:pre-line; font-family:var(--kop); font-size:20px; line-height:1.7; padding:28px; border-radius:22px; background:var(--vlak); border:1px solid var(--lijn); }
.reis-songtekst .voorzet{ font-family:var(--romp); white-space:normal; }
.kleuren{ display:flex; flex-wrap:wrap; gap:10px; }
.kleuren button{ display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:0; cursor:pointer; font:inherit; font-size:13px; color:var(--zacht); padding:4px; border-radius:14px; }
.kleuren button span{ width:46px; height:46px; border-radius:50%; display:block; }
.kleuren button[aria-pressed="true"]{ color:var(--inkt); font-weight:700; }
.kleuren button[aria-pressed="true"] span{ box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--inkt); }
.lichaam{ display:flex; flex-direction:column; align-items:center; }
.lichaam svg{ width:190px; height:auto; }
.lichaam__vorm{ fill:var(--vlak2); }
.lichaam [data-regio]{ cursor:pointer; transition:fill .2s; }
.lichaam [data-regio]:focus-visible{ outline:none; stroke:var(--primair); stroke-width:3; }
.lichaam__gekozen{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:10px 0 4px; }
.lichaam__gekozen span{ padding:3px 10px; border-radius:999px; font-size:13px; background:color-mix(in srgb, var(--c, var(--accent)) 25%, var(--bg)); }
.reflectie-vraag{ display:block; font-family:var(--kop); font-size:19px; font-weight:600; margin-bottom:10px; }
.verankeren{ text-align:center; max-width:560px; margin:0 auto; }
.verankeren p{ text-align:left; }
.verankeren label{ font-weight:600; }
.afsluiting{ text-align:center !important; font-family:var(--kop); font-size:18px; color:var(--zacht); margin-top:32px; }
.delen-keuzes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin:0 0 20px; }
.delen-keuzes button{ min-height:56px; padding:10px 14px; border-radius:16px; border:1.5px solid var(--rand); background:var(--vlak); color:var(--inkt); font:inherit; font-weight:600; text-align:left; cursor:pointer; }
.delen-keuzes button[aria-pressed="true"]{ border-color:var(--accent); background:var(--accentz); }
.stapnav{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:44px; padding-top:18px; border-top:1px solid var(--lijn); }
.stapnav .linkknop{ min-height:44px; color:var(--zacht); font-weight:600; }
.stapnav .linkknop:disabled{ opacity:.35; cursor:default; }
.lied-speler{ position:sticky; bottom:calc(12px + env(safe-area-inset-bottom,0px)); margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 14px; border-radius:20px; background:var(--inkt); color:var(--bg); box-shadow:0 12px 30px rgba(0,0,0,.25); }
.lied-speler__titel{ font-weight:700; font-size:14px; }
.lied-speler audio{ flex:1 1 240px; height:40px; }
.dagboek, .mantras{ list-style:none; margin:0; padding:0; }
.kleurstip{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--c); margin-right:8px; vertical-align:middle; }
.mantras blockquote{ margin:0 0 10px; font-family:var(--kop); font-size:24px; font-weight:600; line-height:1.3; }
.mantras .knop svg{ margin-right:2px; }
.reis-poort{ max-width:640px; }
.reis-poort h2{ margin:0 0 8px; font-size:28px; }
/* Inlogscherm */

/* ===== Eigen formulieren ===== */
.tas-form{ background:var(--vlak); border:1px solid var(--lijn); border-radius:24px; padding:clamp(20px,3vw,32px); box-shadow:var(--schaduw); }
.kaartvak .tas-form, .account .tas-form{ background:none; border:0; padding:0; box-shadow:none; }
.tas-form__velden{ display:grid; gap:0 16px; }
@media (min-width:640px){ .tas-form__velden{ grid-template-columns:1fr 1fr; } .tas-form__velden .vol{ grid-column:1/-1; } .tas-form--nieuwsbrief .tas-form__velden{ grid-template-columns:1fr 1fr; } }
.tas-form p{ margin:0 0 16px; }
.tas-form label{ display:block; font-weight:600; font-size:15px; margin-bottom:7px; }
.tas-form .opt{ font-weight:400; color:var(--gedempt); }
.tas-form input[type=text], .tas-form input[type=email], .tas-form input[type=tel], .tas-form input[type=date], .tas-form input[type=password], .tas-form select, .tas-form textarea{ width:100%; min-height:52px; padding:12px 15px; border-radius:14px; font:inherit; font-size:16px; background:var(--bg); color:var(--inkt); border:1.5px solid var(--rand); }
.tas-form textarea{ min-height:140px; resize:vertical; }
.tas-form [aria-invalid="true"]{ border-color:var(--f2); box-shadow:0 0 0 3px color-mix(in srgb, var(--f2) 18%, transparent); }
.tas-form input:focus, .tas-form select:focus, .tas-form textarea:focus{ border-color:var(--primair); outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--primair) 18%, transparent); }
.tas-form .vinkje label{ font-weight:400; margin:0; color:var(--zacht); font-size:15px; }
.tas-form .gedempt{ display:block; margin-top:6px; font-size:13.5px; }
.tas-honing{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.knop--breed{ width:100%; }
.knop.is-uit{ opacity:.55; cursor:default; }
.inhoud > .wrap > .tas-form, .inhoud > .wrap > .melding{ max-width:760px; }

/* ===== Inlogpagina ===== */
.inhoud > .wrap > .account{ max-width:none; }
.account{ display:grid; gap:24px; align-items:stretch; margin-top:8px; }
@media (min-width:900px){ .account{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:32px; } }
.account__paneel{ position:relative; overflow:hidden; border-radius:28px; padding:clamp(28px,4vw,48px); background:radial-gradient(80% 80% at 100% 0%, var(--gloed1), transparent 70%), var(--inkt); color:var(--bg); display:flex; flex-direction:column; justify-content:flex-end; min-height:320px; }
.account__kunst{ position:absolute; right:-120px; top:-120px; width:380px; height:380px; opacity:.35; }
.account__paneel > *{ position:relative; }
.account__paneel h2{ color:var(--bg); font-size:clamp(28px,3.6vw,40px); line-height:1.08; margin:0 0 18px; font-weight:800; }
.account__paneel .voorzet{ color:var(--f1z); }
.account__paneel ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; }
.account__paneel li{ display:flex; gap:10px; align-items:flex-start; font-size:16.5px; line-height:1.5; }
.account__paneel li svg{ flex:0 0 auto; color:var(--f1); margin-top:2px; }
.account__privacy{ font-size:14px; opacity:.8; margin:0; }
.account__kaart{ background:var(--vlak); border:1px solid var(--lijn); border-radius:28px; padding:clamp(22px,3.5vw,40px); box-shadow:var(--schaduw); }
.account__tabs{ display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--vlak2); margin-bottom:26px; }
.account__tabs button{ flex:1; min-height:46px; border:0; border-radius:999px; background:none; font:inherit; font-weight:600; color:var(--zacht); cursor:pointer; }
.account__tabs button[aria-selected="true"]{ background:var(--vlak); color:var(--inkt); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.account__vak h2{ margin:0 0 4px; font-size:28px; font-weight:800; }
.account__vak > .gedempt{ margin:0 0 22px; }
.account__klein{ text-align:center; margin-top:14px !important; font-size:15px; }
.account__klein a{ color:var(--primair); }
.account__wissel{ text-align:center; margin:20px 0 0; padding-top:18px; border-top:1px solid var(--lijn); color:var(--zacht); }
.account__wissel .linkknop{ color:var(--primair); font-weight:700; }
.account--in{ max-width:620px; }

/* ===== Verkooppagina ===== */
.verkoop__hero .wrap{ align-items:center; }
.verkoop__badge{ display:inline-block; margin-top:18px; padding:6px 14px; border-radius:999px; background:var(--f5z); color:var(--inkt); font-weight:600; font-size:14px; }
.voorproef{ position:relative; background:var(--vlak); border:1px solid var(--lijn); border-radius:28px; padding:26px; box-shadow:0 30px 60px rgba(42,33,27,.14); max-width:420px; justify-self:center; width:100%; transform:rotate(1.5deg); }
.voorproef__balk{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-bottom:22px; }
.voorproef__balk span{ height:6px; border-radius:6px; background:var(--lijn); }
.voorproef__balk .is-gedaan{ background:var(--accent); }
.voorproef__balk .is-nu{ background:var(--inkt); }
.voorproef__h{ font-family:var(--kop); font-size:26px; font-weight:800; margin:0 0 16px; }
.voorproef__kleuren{ display:flex; gap:10px; margin-bottom:22px; }
.voorproef__kleuren span{ width:38px; height:38px; border-radius:50%; }
.voorproef__kleuren .is-aan{ box-shadow:0 0 0 3px var(--vlak), 0 0 0 5px var(--inkt); }
.voorproef__regel{ height:12px; border-radius:6px; background:var(--vlak2); margin-bottom:10px; }
.voorproef__regel.kort{ width:60%; margin-bottom:22px; }
.voorproef__knop{ display:inline-block; padding:12px 20px; border-radius:999px; background:var(--primair); color:var(--op-primair); font-weight:600; font-size:15px; }
.voordelen{ display:grid; gap:16px; margin-top:36px; }
@media (min-width:700px){ .voordelen{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .voordelen{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.voordelen article{ padding:26px; border-radius:24px; background:var(--vlak); border:1px solid var(--lijn); }
.voordeel__stip{ display:block; width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px var(--accentz); margin-bottom:16px; }
.voordelen h3{ margin:0 0 6px; font-size:21px; font-weight:600; }
.voordelen p{ margin:0; color:var(--zacht); }
.fasebogen{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.fasebogen li{ padding:20px; border-radius:22px; background:var(--accentz); display:flex; flex-direction:column; gap:2px; }
.fasebogen .nr{ font-family:var(--kop); font-weight:800; color:var(--accentt); }
.fasebogen strong{ font-family:var(--kop); font-size:21px; }
.fasebogen li > span:last-child{ color:var(--zacht); font-size:15px; }
.ervaringen{ display:grid; gap:16px; margin-top:28px; }
@media (min-width:800px){ .ervaringen{ grid-template-columns:1fr 1fr; } }
.ervaringen blockquote{ margin:0; padding:28px; border-radius:24px; background:var(--vlak2); font-family:var(--kop); font-size:20px; line-height:1.4; color:var(--zacht); }
.prijzen{ display:grid; gap:18px; margin-top:36px; max-width:880px; }
@media (min-width:760px){ .prijzen{ grid-template-columns:1fr 1fr; } }
.prijs{ padding:30px; border-radius:28px; background:var(--vlak); border:1px solid var(--lijn); display:flex; flex-direction:column; }
.prijs--lid{ border:2px solid var(--primair); box-shadow:var(--schaduw); }
.prijs h3{ margin:0; font-size:22px; font-weight:600; }
.prijs__bedrag{ font-family:var(--kop); font-size:36px; font-weight:800; margin:6px 0 18px; }
.prijs ul{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px; flex:1; }
.prijs li{ display:flex; gap:10px; align-items:flex-start; }
.prijs li svg{ color:var(--f5); flex:0 0 auto; margin-top:2px; }
.faq{ max-width:820px; }
.faq details{ border-bottom:1px solid var(--lijn); }
.faq summary{ cursor:pointer; padding:20px 0; font-family:var(--kop); font-size:20px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::after{ content:"+"; font-size:26px; line-height:1; color:var(--primair); }
.faq details[open] summary::after{ content:"–"; }
.faq summary::-webkit-details-marker{ display:none; }
.faq details p{ margin:0 0 20px; color:var(--zacht); font-size:17px; }

/* ===== Spotify- of YouTube-speler onderin ===== */
.speler__embed{ grid-column:1/-1; }
.speler__embed iframe{ display:block; width:100%; height:80px; border:0; border-radius:12px; }
.speler.is-embed{ grid-template-columns:minmax(0,1fr) auto; }
.speler.is-embed [data-speler-knop], .speler.is-embed .speler__balk{ display:none; }
.speler.is-video .speler__embed iframe{ height:auto; aspect-ratio:16/9; }
@media (min-width:700px){ .speler.is-video{ width:460px; } }
.reis-embed iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:18px; margin:6px 0 4px; }

/* ===== Voet ===== */
:root{ --voet-bg:#2A211B; --voet-tekst:#F4EBDF; --voet-zacht:#CBBBA9; --voet-lijn:rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --voet-bg:#110D0B; } }
:root[data-theme="dark"]{ --voet-bg:#110D0B; }
.voet{ border-top:0; background:var(--voet-bg); color:var(--voet-zacht); padding:0 0 calc(96px + env(safe-area-inset-bottom,0px)); font-size:15px; line-height:1.55; }
.voet .wrap{ display:block; }
.voet__raster{ display:grid !important; gap:32px 40px; padding-top:48px !important; padding-bottom:32px !important; }
@media (min-width:640px){ .voet__raster{ grid-template-columns:1fr 1fr; } .voet__merk{ grid-column:1/-1; } }
@media (min-width:1040px){ .voet__raster{ grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr)); } .voet__merk{ grid-column:auto; } }
.voet .logo{ color:var(--voet-tekst); }
.voet .logo__tekst{ color:var(--voet-tekst); font-size:18px; }
.voet .logo__tekst small{ color:#F2A886; }
.voet__merk p{ margin:14px 0 18px; max-width:34ch; }
.voet__socials{ display:flex; gap:8px; }
.voet__social{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--voet-tekst) !important; border:1px solid var(--voet-lijn); padding:0 !important; transition:background-color .2s, color .2s; }
.voet__social:hover{ background:var(--voet-tekst); color:#2A211B !important; }
.voet__kolom h2{ margin:0 0 10px; font-family:var(--romp); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--voet-tekst); }
.voet__lijst, .voet__juridisch{ list-style:none; margin:0; padding:0; }
.voet__lijst{ display:grid; gap:2px; }
.voet__lijst li{ display:block; }
.voet a, .voet button.linkknop{ color:var(--voet-zacht); text-decoration:none; padding:4px 0; display:inline-block; font-size:15px; }
.voet a:hover, .voet button.linkknop:hover{ color:var(--voet-tekst); text-decoration:underline; text-underline-offset:3px; }
.voet__bedrijf{ padding-top:6px; font-size:14px; color:var(--voet-zacht); opacity:.85; }
.voet__onder{ display:flex !important; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 24px; padding-top:18px !important; border-top:1px solid var(--voet-lijn); font-size:14px; }
.voet__onder p{ margin:0; }
.voet__juridisch{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.voet__juridisch a, .voet__juridisch button.linkknop{ font-size:14px; }
.voet__gloed, .voet__cta{ display:none; }

/* ===== Pad van zes stappen ===== */
.pad6 .lead{ margin-bottom:8px; }
.pad6__lijst{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:12px; counter-reset:p; position:relative; }
@media (min-width:640px){ .pad6__lijst{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .pad6__lijst{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; } .pad6__lijst::before{ content:""; position:absolute; left:6%; right:6%; top:38px; height:3px; border-radius:3px; background:linear-gradient(to right, var(--f1), var(--f2), var(--f3), var(--f4), var(--f5)); opacity:.45; } }
.pad6__stap{ position:relative; display:flex; flex-direction:column; gap:4px; padding:20px 18px 22px; border-radius:22px; background:var(--vlak); border:1px solid var(--lijn); }
.pad6__icoon{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:2px solid var(--lijn); color:var(--primair); margin-bottom:10px; position:relative; z-index:1; }
.pad6__nr{ position:absolute; top:16px; right:18px; font-family:var(--kop); font-weight:800; font-size:14px; color:var(--gedempt); }
.pad6__stap strong{ font-family:var(--kop); font-size:20px; font-weight:600; }
.pad6__stap > span:last-child{ color:var(--zacht); font-size:15px; line-height:1.5; }
.pad6__stap--reflecteren{ background:var(--f1z); border-color:transparent; }
.pad6__stap--reflecteren .pad6__icoon{ border-color:var(--f1); color:var(--f1); }
.pad6__knop{ margin:28px 0 0; }
.pad6-blok{ margin-top:40px; padding-top:32px; border-top:1px solid var(--lijn); }
.pad6-blok .pad6__lijst{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pad6-blok .pad6__lijst::before{ display:none; }
@media (min-width:1080px){ .pad6-blok .pad6__lijst{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pad6-blok .h2{ font-size:clamp(26px,3.2vw,36px); }

/* ===== 53 liedjes: zoeken, uitklappen, meer laden ===== */
.zoeklied{ max-width:560px; margin:8px 0 28px; }
.zoeklied input{ width:100%; min-height:52px; padding:12px 18px 12px 46px; border-radius:999px; border:1.5px solid var(--rand); background:var(--vlak) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23736659' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center; font:inherit; color:var(--inkt); }
.zoeklied input:focus{ border-color:var(--primair); outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--primair) 18%, transparent); }
.reis .zoeklied{ margin-top:-12px; }
.fase__meer, .releases__meer{ margin:18px 0 0; }
.kaart[hidden], .release[hidden], .fase[hidden]{ display:none; }

/* ===== Persoonlijke reis: routes ===== */
.routes{ display:grid; gap:12px; margin-top:12px; }
@media (min-width:760px){ .routes{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.route{ padding:22px; border-radius:20px; border:1.5px solid var(--lijn); background:var(--bg); display:flex; flex-direction:column; gap:8px; }
.route h3{ margin:0; font-size:20px; font-weight:600; }
.route p{ margin:0; color:var(--zacht); font-size:15px; flex:1; }
.route .knop, .route .reis-ok{ align-self:flex-start; margin-top:8px; }
.route.is-huidig{ border-color:var(--f5); background:var(--f5z); }
.reis-nav__account{ background:var(--primair); color:var(--op-primair) !important; }
.reis-gast .knoppen{ margin-top:18px; }
.reis-gastnoot{ padding:12px 16px; border-radius:14px; background:var(--f1z); font-size:15px; margin:0 0 16px; }
.reis-gastnoot a{ color:var(--inkt); font-weight:700; }
/* Alle liedjes als uitklapbare fases */
details.leerlijn-fase{ margin:0 0 12px; border-radius:22px; background:var(--vlak); border:1px solid var(--lijn); padding:0 14px; }
details.leerlijn-fase > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:16px 4px; }
details.leerlijn-fase > summary::-webkit-details-marker{ display:none; }
details.leerlijn-fase > summary::after{ content:"+"; margin-left:auto; font-size:24px; color:var(--accentt); }
details.leerlijn-fase[open] > summary::after{ content:"–"; }
details.leerlijn-fase .fase__naam{ display:block; font-size:24px; }
details.leerlijn-fase .fase__sub{ display:block; font-size:15px; margin:0; }
details.leerlijn-fase .leerlijn-liedjes{ padding-bottom:14px; }
details.leerlijn-fase .ll-rij{ background:var(--bg); }
.leerlijn-liedjes li[hidden]{ display:none; }
/* Eén lied */
.lied .terug{ margin-bottom:10px; }
.lied-kop{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; align-items:center; margin:0 0 24px; }
@media (max-width:520px){ .lied-kop{ grid-template-columns:84px minmax(0,1fr); gap:14px; } }
.lied-kop .lead{ margin-top:8px; }
.lied-blok{ margin:0 0 18px; }
.lied-intro summary{ cursor:pointer; color:var(--primair); font-weight:600; padding:6px 0; }
.lied-intro-kort{ margin:8px 0 6px; }
.lied-luister{ padding:clamp(18px,3vw,28px); border-radius:24px; background:var(--accentz); }
.lied-audio audio{ width:100%; height:48px; }
.lied-luister .reis-songtekst{ margin:18px 0; background:var(--vlak); }
.lied-blijven{ margin-top:28px; }
.lied-blijven > h2{ margin:0 0 4px; font-size:26px; font-weight:600; }
.lied-blijven.is-uitgelicht > h2{ color:var(--accentt); }
.blijf-kaart{ border-radius:20px; background:var(--vlak); border:1px solid var(--lijn); margin:0 0 10px; }
.blijf-kaart > summary{ list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:18px 52px 18px 20px; position:relative; }
.blijf-kaart > summary::-webkit-details-marker{ display:none; }
.blijf-kaart > summary::after{ content:"+"; position:absolute; right:20px; top:16px; font-size:26px; color:var(--primair); }
.blijf-kaart[open] > summary::after{ content:"–"; }
.blijf-kaart__naam{ font-family:var(--kop); font-size:20px; font-weight:600; display:flex; align-items:center; gap:6px; }
.blijf-kaart__uitleg{ color:var(--zacht); font-size:15px; }
.blijf-vink{ color:var(--f5); display:inline-flex; }
.blijf-kaart__inhoud{ padding:0 20px 20px; }
.reis-oefening-titel{ font-family:var(--kop); font-weight:600; font-size:19px; margin:0; }
.lied-verder{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; }
.lied-verder a{ display:flex; flex-direction:column; padding:16px 18px; border-radius:18px; background:var(--vlak); border:1px solid var(--lijn); text-decoration:none; }
.lied-verder .volgend{ text-align:right; }
.lied-verder small{ color:var(--gedempt); font-size:13.5px; }
.lied-verder strong{ font-family:var(--kop); font-size:17px; font-weight:600; }

/* ===== Account in de kop ===== */
.avatar{ width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; flex:0 0 auto; background:linear-gradient(135deg, var(--f1), var(--f2)); color:#2A211B; font-weight:800; font-size:14px; letter-spacing:.02em; }
.avatar--groot{ width:72px; height:72px; font-size:26px; }
.account-knop{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:999px; border:1.5px solid var(--rand); background:var(--vlak); color:var(--inkt); font:inherit; font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; white-space:nowrap; }
.account-knop:hover{ border-color:var(--inkt); color:var(--inkt); }
.account-knop--in{ padding:4px 12px 4px 4px; }
.account-menu{ position:relative; }
.account-lijst{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; list-style:none; margin:0; padding:8px; border-radius:18px; background:var(--vlak); border:1px solid var(--lijn); box-shadow:0 18px 40px rgba(42,33,27,.16); z-index:40; }
.account-lijst a{ display:block; padding:12px 14px; border-radius:12px; text-decoration:none; font-weight:600; color:var(--inkt); }
.account-lijst a:hover{ background:var(--vlak2); color:var(--inkt); }
@media (max-width:560px){ .account-knop span:not(.avatar), .account-knop svg:last-child{ display:none; } .account-knop{ padding:0 12px; } .account-knop--in{ padding:4px; } }

/* ===== Mijn gegevens ===== */
.inhoud > .wrap > .gegevens{ max-width:760px; }
.gegevens{ display:grid; gap:18px; }
.gegevens__kop{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding:clamp(20px,3vw,28px); border-radius:24px; background:radial-gradient(80% 120% at 100% 0%, var(--gloed1), transparent 70%), var(--vlak); border:1px solid var(--lijn); }
.gegevens__kop > div{ flex:1 1 220px; }
.gegevens__kop h2{ margin:0; font-size:26px; font-weight:800; }
.gegevens__kop .gedempt{ margin:2px 0 0; }
.gegevens .kaartvak h3{ margin:0 0 16px; font-size:21px; font-weight:600; }
.gegevens__ok{ background:var(--f5z); }
.gegevens__verwijder{ margin-top:12px; border-top:1px solid var(--lijn); padding-top:14px; }
.gegevens__verwijder summary{ cursor:pointer; color:var(--f2); font-weight:600; }
.knop--gevaar{ background:#A3443A; color:#fff; }
.knop--gevaar:hover{ background:#86352D; color:#fff; }
.ww{ position:relative; display:block; }
.ww input{ padding-right:84px !important; }
.ww__toon{ position:absolute; right:8px; top:50%; transform:translateY(-50%); min-height:36px; padding:0 12px; border-radius:999px; border:0; background:var(--vlak2); color:var(--zacht); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.ww__toon[aria-pressed="true"]{ background:var(--inkt); color:var(--bg); }
.voet__klein{ font-size:13px; opacity:.8; }

/* ===== Persoonlijke reis: begroeting en welkom ===== */
.inhoud--reis{ padding-top:36px; }
.reis-groet{ display:flex; align-items:center; gap:14px; margin:0 0 18px; }
.reis-groet > div{ flex:1; }
.reis-groet .avatar{ width:52px; height:52px; font-size:19px; }
.reis-groet__tijd{ margin:0; color:var(--zacht); font-size:15px; }
.reis-groet__naam{ margin:0; font-family:var(--kop); font-weight:800; font-size:clamp(24px,3.4vw,32px); line-height:1.1; }
.welkom{ position:relative; overflow:hidden; border-radius:32px; padding:clamp(28px,5vw,56px); background:radial-gradient(70% 90% at 100% 0%, var(--gloed1), transparent 70%), var(--vlak); border:1px solid var(--lijn); box-shadow:var(--schaduw); }
.welkom__kunst{ position:absolute; right:-130px; top:-130px; width:400px; height:400px; opacity:.28; pointer-events:none; }
.welkom__kunst .ring{ transform-origin:200px 200px; animation:draai 120s linear infinite; }
.welkom__tekst{ position:relative; max-width:620px; }
.welkom .h1{ font-size:clamp(34px,6vw,64px); }
.welkom__stappen{ position:relative; list-style:none; margin:32px 0 20px; padding:0; display:grid; gap:12px; }
@media (min-width:760px){ .welkom__stappen{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.welkom__stappen li{ display:flex; flex-direction:column; gap:4px; padding:20px; border-radius:20px; background:var(--bg); border:1px solid var(--lijn); }
.welkom__nr{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--inkt); color:var(--bg); font-weight:800; margin-bottom:8px; }
.welkom__stappen strong{ font-family:var(--kop); font-size:19px; font-weight:600; }
.welkom__stappen span:last-child{ color:var(--zacht); font-size:15px; }
.welkom__privacy{ position:relative; color:var(--zacht); font-size:15px; }
.welkom .knoppen{ position:relative; margin-top:8px; }