/* ══════════════════════════════════════════════════════════════════════
   De Verkoopformule — vormgeving

   Dezelfde familie als het MindShifting-portaal van De Nieuwe
   Ondernemer: warm ivoor, pruimkleurige inkt, zacht oranje als accent en
   een pasteltint per stap, zodat je aan de kleur ziet waar je bent.
   Premium licht met donkere accenten.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Roboto"; src:url("../fonts/roboto.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:"Archivo Black"; src:url("../fonts/archivo-black.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:"Oswald"; src:url("../fonts/oswald.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}

/* De huisstijl van de verkooppagina: crème en papier, diep bosgroen,
   goudfolie als accent, brons en bruin voor de details. */
:root{
  color-scheme:light;
  --grond:#F4EEE3; --vlak:#FFFCF6; --vlak-2:#F1E8D8; --vlak-3:#EADBC0;
  --lijn:rgba(91,63,36,.15); --veldlijn:#D6C3A2;
  --kop:#0F1C17; --tekst:#34413A; --gedempt:#5A645D;
  --folie:linear-gradient(135deg,#C8902F 0%,#F2C964 45%,#E0AE48 62%,#B8822F 100%);
  --accent:#E9B949; --accent-op:#1C1606; --accent-tekst:#7A4F12; --accent-waas:#FBF0D6; --accent-rand:#EBCB85;
  --diep:#0A2A1F; --diep-2:#0E4A36; --diep-kop:#F4EEE3; --diep-tekst:#CBDAD1; --diep-gedempt:#9FB6A9; --diep-accent:#F2C964;
  --groen:#0E4A36; --groen-waas:#DCEBE2; --rood:#A33A2E; --rood-waas:#F8E3DE;
  --gloed-a:rgba(233,185,73,.20); --gloed-b:rgba(14,74,54,.10); --gloed-c:rgba(168,119,46,.10);
  --schaduw:0 1px 2px rgba(36,24,14,.05), 0 10px 26px -14px rgba(36,24,14,.22);
  --schaduw-hoog:0 2px 4px rgba(36,24,14,.06), 0 22px 46px -20px rgba(36,24,14,.36);
  --r:18px; --r-klein:12px;
  --display:"Archivo Black","Arial Black",sans-serif;
  --cijfer:"Oswald","Arial Narrow",sans-serif;
  --zand:#EADBC0;  --zand-inkt:#5B3F24;
  --groen-t:#D5E6DC; --groen-inkt:#0E4A36;
  --goud:#F6E3B4;  --goud-inkt:#6B4A12;
  --tint:var(--goud); --tint-inkt:var(--goud-inkt);
}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="licht"]){
    color-scheme:dark;
    --grond:#08140F; --vlak:#102019; --vlak-2:#162A21; --vlak-3:#1E372B;
    --lijn:#26402F; --veldlijn:#355343;
    --kop:#F4EEE3; --tekst:#D2DCD5; --gedempt:#A2B4A9;
    --accent-tekst:#F2C964; --accent-waas:#2B2614; --accent-rand:#5C4A1C;
    --diep:#051009; --diep-2:#0A2A1F;
    --groen:#8FD1A6; --groen-waas:#173226; --rood:#F2A097; --rood-waas:#3A2220;
    --gloed-a:rgba(233,185,73,.08); --gloed-b:rgba(14,74,54,.25); --gloed-c:rgba(168,119,46,.06);
    --schaduw:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
    --schaduw-hoog:0 2px 4px rgba(0,0,0,.3), 0 22px 46px -20px rgba(0,0,0,.7);
    --zand:#2C2418; --zand-inkt:#E6CFA6;
    --groen-t:#143326; --groen-inkt:#A9DDB8;
    --goud:#2E2612; --goud-inkt:#F2D58E;
  }
}
:root[data-thema="donker"]{
  color-scheme:dark;
  --grond:#08140F; --vlak:#102019; --vlak-2:#162A21; --vlak-3:#1E372B;
  --lijn:#26402F; --veldlijn:#355343;
  --kop:#F4EEE3; --tekst:#D2DCD5; --gedempt:#A2B4A9;
  --accent-tekst:#F2C964; --accent-waas:#2B2614; --accent-rand:#5C4A1C;
  --diep:#051009; --diep-2:#0A2A1F;
  --groen:#8FD1A6; --groen-waas:#173226; --rood:#F2A097; --rood-waas:#3A2220;
  --gloed-a:rgba(233,185,73,.08); --gloed-b:rgba(14,74,54,.25); --gloed-c:rgba(168,119,46,.06);
  --schaduw:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
  --schaduw-hoog:0 2px 4px rgba(0,0,0,.3), 0 22px 46px -20px rgba(0,0,0,.7);
  --zand:#2C2418; --zand-inkt:#E6CFA6;
  --groen-t:#143326; --groen-inkt:#A9DDB8;
  --goud:#2E2612; --goud-inkt:#F2D58E;
}
.tint-zand{--tint:var(--zand);--tint-inkt:var(--zand-inkt)}
.tint-groen{--tint:var(--groen-t);--tint-inkt:var(--groen-inkt)}
.tint-goud{--tint:var(--goud);--tint-inkt:var(--goud-inkt)}

/* ── Basis ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.6; color:var(--tekst); background:var(--grond);
  background-image:
    radial-gradient(60vw 40vw at 0% 0%, var(--gloed-a), transparent 70%),
    radial-gradient(50vw 40vw at 100% 10%, var(--gloed-b), transparent 70%),
    radial-gradient(60vw 50vw at 50% 100%, var(--gloed-c), transparent 70%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--kop); line-height:1.15; letter-spacing:-.02em; margin:0 0 .4em}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.1rem); font-weight:800}
h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem); font-weight:800}
h3{font-size:1.15rem; font-weight:750}
p{margin:0 0 1em}
a{color:var(--accent-tekst); text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
.ic{width:1.15em; height:1.15em; flex:none; vertical-align:-.2em}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
[hidden]{display:none !important}

main{flex:1; width:100%; margin:0 auto; padding:28px 16px 64px}
main.breed{max-width:1120px}
main.smal{max-width:520px; padding-top:7vh}

.boventitel{font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tint-inkt, var(--accent-tekst)); margin-bottom:.6em}
.zacht{color:var(--gedempt)}
.klein{font-size:.88rem; color:var(--gedempt)}
.optioneel{font-weight:600; font-size:.78rem; color:var(--gedempt); background:var(--vlak-2); border-radius:99px; padding:1px 8px; margin-left:6px; vertical-align:2px}

/* ── Kop ────────────────────────────────────────────────────────────── */
.kop{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding:12px max(16px, calc((100vw - 1120px)/2 + 16px));
  background:color-mix(in srgb, var(--grond) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--lijn);
}
.kop__merk{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--kop); line-height:1.1}
.kop__merk b{display:block; font-weight:800; letter-spacing:-.01em}
.kop__merk em{display:block; font-style:normal; font-size:.78rem; color:var(--gedempt)}
.kop__beeld{width:34px; height:34px; border-radius:10px; flex:none; background:url("../icoon.svg") center/cover}
.kop__nav{display:flex; gap:4px; margin-left:auto}
.kop__nav a{color:var(--tekst); text-decoration:none; font-weight:650; font-size:.95rem; padding:10px 12px; border-radius:10px}
.kop__nav a:hover{background:var(--vlak-2)}
.kop__rechts{display:flex; align-items:center; gap:6px}
.kop__rechts form{margin:0}
.kop__bol{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.85rem; background:var(--diep); color:var(--diep-kop)}
.rond{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:0; background:transparent; color:var(--tekst); cursor:pointer}
.rond:hover{background:var(--vlak-2)}
@media (max-width:640px){
  .kop{gap:8px}
  .kop__merk em,.kop__bol{display:none}
  .kop__nav a{padding:10px 8px; font-size:.9rem}
}
@media (max-width:420px){ .kop__merk b{font-size:.92rem} .kop__merk span:last-child{display:none} }

.voet{text-align:center; font-size:.82rem; color:var(--gedempt); padding:24px 16px 32px}

/* ── Knoppen ────────────────────────────────────────────────────────── */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 22px; border-radius:99px; border:1.5px solid transparent;
  font:inherit; font-weight:750; font-size:.98rem; line-height:1.2; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.knop--vol{background:var(--accent); color:var(--accent-op); box-shadow:0 8px 20px -10px rgba(255,148,102,.9)}
.knop--vol:hover{transform:translateY(-1px); box-shadow:0 12px 24px -10px rgba(255,148,102,1)}
.knop--rand{background:var(--vlak); color:var(--kop); border-color:var(--veldlijn)}
.knop--rand:hover{border-color:var(--kop)}
.knop--stil{background:transparent; color:var(--tekst); border-color:transparent}
.knop--stil:hover{background:var(--vlak-2)}
.knop--stil[aria-disabled]{background:var(--vlak-2); color:var(--gedempt); cursor:default}
.knop--licht{background:var(--diep-kop); color:var(--diep)}
.knop--licht-rand{background:transparent; color:var(--diep-kop); border-color:rgba(255,255,255,.35)}
.knop--licht-rand:hover{border-color:var(--diep-kop)}
.knop--klein{min-height:44px; padding:8px 16px; font-size:.9rem}
.knop--groot{min-height:56px; padding:16px 28px; font-size:1.05rem}
.knop--vol.knop--groot{white-space:normal; text-align:left}
.knop--bezig{opacity:.75; pointer-events:none}
.knop--bezig::after{content:""; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}

/* ── Formulieren ────────────────────────────────────────────────────── */
.formulier{display:grid; gap:18px}
.formulier--rij{grid-template-columns:1fr auto; align-items:end}
@media (max-width:560px){ .formulier--rij{grid-template-columns:1fr} }
.twee{display:grid; gap:18px; grid-template-columns:1fr 1fr}
@media (max-width:480px){ .twee{grid-template-columns:1fr} }
.veld,.vraag{display:grid; gap:6px; margin:0; padding:0; border:0; min-width:0}
.veld__label{font-weight:750; color:var(--kop); font-size:.98rem}
.veld__hulp{font-size:.88rem; color:var(--gedempt); line-height:1.5}
input[type=text],input[type=email],input[type=password],input[type=number],textarea{
  width:100%; font:inherit; color:var(--kop); background:var(--vlak);
  border:1.5px solid var(--veldlijn); border-radius:var(--r-klein); padding:12px 14px; min-height:48px;
  transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical; line-height:1.55}
input:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-waas)}
.teller{font-size:.8rem; color:var(--gedempt); text-align:right; min-height:1em}
.oogveld{position:relative; display:block}
.oogveld input{padding-right:52px}
.oogje{position:absolute; right:2px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; background:none; color:var(--gedempt); cursor:pointer; border-radius:10px}
.oogje.aan{color:var(--accent-tekst)}
.vraag--mist input,.vraag--mist textarea{border-color:var(--rood)}
.vraag--mist .veld__label::after{content:"Nog invullen"; margin-left:8px; font-size:.75rem; font-weight:750; color:var(--rood); background:var(--rood-waas); padding:2px 8px; border-radius:99px; vertical-align:2px}

.keuzes{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.keuzes--groot{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.keuze{position:relative; cursor:pointer}
.keuze input{position:absolute; opacity:0; pointer-events:none}
.keuze span{display:block; height:100%; padding:13px 16px; border-radius:var(--r-klein); border:1.5px solid var(--veldlijn); background:var(--vlak); transition:all .15s}
.keuze b{display:block; color:var(--kop); font-weight:750}
.keuze small{display:block; color:var(--gedempt); font-size:.86rem; line-height:1.45; margin-top:4px}
.keuze:hover span{border-color:var(--kop)}
.keuze input:checked + span{border-color:var(--accent); background:var(--accent-waas); box-shadow:0 0 0 3px var(--accent-rand)}
.keuze input:focus-visible + span{outline:3px solid var(--accent); outline-offset:2px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:99px; border:1.5px solid var(--veldlijn); background:var(--vlak); font-weight:650; color:var(--kop); font-size:.94rem}
.chip input:checked + span{background:var(--diep); color:var(--diep-kop); border-color:var(--diep)}
.chip input:checked + span::before{content:"✓"; margin-right:7px}
.chip input:focus-visible + span{outline:3px solid var(--accent); outline-offset:2px}

.fout,.goed{padding:12px 16px; border-radius:var(--r-klein); font-weight:600; font-size:.95rem}
.fout{background:var(--rood-waas); color:var(--rood)}
.goed{background:var(--groen-waas); color:var(--groen)}
.goed code{display:block; margin-top:8px; word-break:break-all; font-size:.85rem; color:var(--kop)}

/* ── Welkom (in- en uitloggen) ──────────────────────────────────────── */
.welkom{background:var(--vlak); border:1px solid var(--lijn); border-radius:24px; padding:32px 28px; box-shadow:var(--schaduw-hoog)}
.welkom h1{font-size:2rem}
.welkom__merk{display:flex; align-items:center; gap:10px; margin-bottom:28px; color:var(--kop)}
.welkom__merk b{font-weight:800}
.welkom__merk em{font-style:normal; color:var(--gedempt); font-size:.85rem; margin-left:auto}
.onder{margin:22px 0 0; text-align:center; font-size:.94rem; color:var(--gedempt); line-height:2}
.knop--vol.knop--vol{width:auto}
.welkom .knop--vol{width:100%}
@media (max-width:420px){ .welkom{padding:24px 18px} .welkom__merk em{display:none} }

/* ── Roadmap ────────────────────────────────────────────────────────── */
.intro{max-width:760px; margin:12px 0 28px}
.intro__tekst{font-size:1.1rem; color:var(--tekst)}
.voortgang{display:flex; align-items:center; gap:14px; margin:22px 0 26px; max-width:460px}
.voortgang__balk{flex:1; height:10px; background:var(--vlak-3); border-radius:99px; overflow:hidden}
.voortgang__balk span{display:block; height:100%; background:linear-gradient(90deg, var(--accent), #FFB48F); border-radius:99px; min-width:10px; transition:width .6s ease}
.voortgang p{margin:0; font-size:.92rem; white-space:nowrap}

.zo{display:grid; gap:12px; grid-template-columns:repeat(3,1fr); margin:0 0 40px}
.zo div{display:flex; gap:12px; background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r); padding:16px 18px}
.zo b{flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--diep); color:var(--diep-kop); font-size:.85rem}
.zo p{margin:0; font-size:.94rem; line-height:1.5}
.zo strong{color:var(--kop); display:block}
@media (max-width:820px){ .zo{grid-template-columns:1fr} }

.route{list-style:none; margin:0; padding:0; position:relative}
.route::before{content:""; position:absolute; left:23px; top:24px; bottom:60px; width:3px; border-radius:3px;
  background:repeating-linear-gradient(to bottom, var(--veldlijn) 0 8px, transparent 8px 16px)}
.halte{position:relative; display:grid; grid-template-columns:48px 1fr; gap:18px; margin-bottom:22px}
.halte__punt{position:relative; z-index:1; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:1.1rem; background:var(--tint, var(--vlak)); color:var(--tint-inkt, var(--kop)); border:3px solid var(--grond); box-shadow:var(--schaduw)}
.halte--klaar .halte__punt{background:var(--groen); color:#fff}
.halte--dicht .halte__punt{background:var(--vlak-3); color:var(--gedempt)}
.halte--eind .halte__punt{background:var(--diep); color:var(--diep-kop)}
.halte__kaart{position:relative; background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r); padding:22px 24px; box-shadow:var(--schaduw); overflow:hidden}
.halte__kaart::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--tint, var(--accent))}
.halte--dicht .halte__kaart{opacity:.78}
.halte__boven{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; margin-bottom:6px; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--tint-inkt)}
.halte__kaart h2{font-size:1.4rem}
.halte__belofte{color:var(--tekst); max-width:68ch}
.halte__meta{display:flex; align-items:center; gap:6px; font-size:.88rem; color:var(--gedempt)}
.label{display:inline-block; font-size:.74rem; font-weight:750; text-transform:none; letter-spacing:0; padding:3px 10px; border-radius:99px; background:var(--vlak-2); color:var(--tekst)}
.label--klaar{background:var(--groen-waas); color:var(--groen)}
.label--bezig{background:var(--accent-waas); color:var(--accent-tekst)}
.label--open{background:var(--tint); color:var(--tint-inkt)}
.halte__kaart--donker{background:linear-gradient(135deg, var(--diep), var(--diep-2)); border-color:transparent; color:var(--diep-tekst)}
.halte__kaart--donker::before{background:var(--accent)}
.halte__kaart--donker h2{color:var(--diep-kop)}
.halte__kaart--donker .halte__belofte{color:var(--diep-tekst)}
.halte__kaart--donker .halte__boven{color:var(--accent)}
.halte__kaart--donker .knop--stil[aria-disabled]{background:rgba(255,255,255,.08); color:var(--diep-gedempt)}
@media (max-width:560px){
  .route::before{left:17px}
  .halte{grid-template-columns:36px 1fr; gap:12px}
  .halte__punt{width:36px; height:36px; font-size:.95rem}
  .halte__kaart{padding:18px 18px 18px 22px}
  .halte__kaart .knop{width:100%}
}

/* ── Een stap ───────────────────────────────────────────────────────── */
.terug{display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--gedempt); text-decoration:none; font-weight:650; font-size:.94rem}
.terug:hover{color:var(--kop)}
.stapkop{position:relative; background:var(--tint); color:var(--kop); border-radius:28px; padding:36px 32px; margin:8px 0 28px; overflow:hidden}
.stapkop::after{content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.28)}
.stapkop h1{max-width:20ch; position:relative; z-index:1}
.stapkop .boventitel{color:var(--tint-inkt)}
.bereik{position:relative; z-index:1; max-width:720px; background:color-mix(in srgb, var(--vlak) 80%, transparent); border-radius:var(--r); padding:18px 20px; margin-top:18px}
.bereik p{margin:0}
.bereik__label{font-weight:800; color:var(--kop); font-size:.9rem; margin-bottom:4px !important}
.bereik__meta{display:flex; align-items:center; gap:6px; font-size:.88rem; color:var(--gedempt); margin-top:10px !important}
.stapkop--donker{background:linear-gradient(135deg, var(--diep), var(--diep-2)); color:var(--diep-tekst)}
.stapkop--donker h1{color:var(--diep-kop)}
.stapkop--donker .boventitel{color:var(--accent)}
.stapkop--donker::after{background:rgba(255,148,102,.12)}
.stapkop--donker p{max-width:62ch; position:relative; z-index:1}
@media (max-width:560px){ .stapkop{padding:26px 20px; border-radius:22px} }

.video{position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:var(--diep); margin-bottom:28px; box-shadow:var(--schaduw-hoog)}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.lessen{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-bottom:32px}
.les{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r); padding:20px}
.les h2{font-size:1.05rem; display:flex; gap:10px; align-items:flex-start}
.les h2::before{content:""; flex:none; width:10px; height:10px; margin-top:6px; border-radius:50%; background:var(--tint-inkt)}
.les p{margin:0; font-size:.95rem}
.downloads{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:32px}
.downloads h2{width:100%; font-size:1.1rem}

.vragen{background:var(--vlak); border:1px solid var(--lijn); border-radius:24px; padding:30px; box-shadow:var(--schaduw); margin-bottom:32px}
.groep{border:0; margin:0; padding:22px 0 0; border-top:1px solid var(--lijn); display:grid; gap:22px}
.groep:first-of-type{border-top:0; padding-top:6px}
.groep legend{float:left; width:100%; font-weight:800; color:var(--tint-inkt); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; margin-bottom:4px}
.formulier__knoppen{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; padding-top:10px; border-top:1px solid var(--lijn)}
@media (max-width:560px){
  .vragen{padding:22px 16px; border-radius:20px}
  .formulier__knoppen .knop{width:100%}
}

.rekensom{background:var(--diep); color:var(--diep-tekst); border-radius:24px; padding:28px; margin-bottom:32px}
.rekensom .boventitel{color:var(--accent)}
.rekensom__cijfers{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin:6px 0 16px}
.rekensom__cijfers div{background:rgba(255,255,255,.06); border-radius:var(--r-klein); padding:16px}
.rekensom__cijfers b{display:block; font-size:2rem; color:var(--diep-kop); letter-spacing:-.02em}
.rekensom__cijfers span{font-size:.9rem}
.rekensom .klein{color:var(--diep-gedempt); margin:0}

/* ── Teksten en blokken ─────────────────────────────────────────────── */
.teksten{scroll-margin-top:90px}
.teksten__kop{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; justify-content:space-between; margin-bottom:18px}
.teksten__kop h2{margin:0}
.teksten__knoppen{display:flex; flex-wrap:wrap; gap:10px}
.leegte{background:var(--vlak); border:1.5px dashed var(--veldlijn); border-radius:var(--r); padding:26px; text-align:center; color:var(--gedempt)}

.blok{background:var(--vlak); border:1px solid var(--lijn); border-radius:24px; padding:26px; margin-bottom:22px; box-shadow:var(--schaduw); scroll-margin-top:90px}
.blok--nieuw{animation:binnen .5s ease}
@keyframes binnen{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.blok__kop{display:grid; gap:4px; margin-bottom:14px}
.blok__kop h3{font-size:1.25rem; margin:0}
.blok__waar{margin:0; font-size:.92rem; color:var(--gedempt); max-width:75ch}
.blok__hint{font-size:.9rem; font-weight:650; color:var(--accent-tekst); margin:0 0 12px}
.blok--gekozen .blok__hint{color:var(--groen)}
.blok__fout{background:var(--rood-waas); color:var(--rood); border-radius:var(--r-klein); padding:10px 14px; font-weight:600; font-size:.92rem}
.blok__wacht{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; border:1.5px dashed var(--veldlijn); border-radius:var(--r-klein); padding:16px 18px}
.blok__wacht p{margin:0; color:var(--gedempt)}
.blok__voet{display:flex; justify-content:flex-end; margin-top:10px}

.opties{display:grid; gap:16px}
@media (min-width:900px){ .opties--twee{grid-template-columns:1fr 1fr} }
.optie{position:relative; display:flex; flex-direction:column; border:1.5px solid var(--lijn); border-radius:var(--r); padding:20px; background:var(--grond); transition:border-color .2s, box-shadow .2s}
.opties--twee .optie:hover{border-color:var(--veldlijn)}
.optie--gekozen{border-color:var(--accent); background:var(--vlak); box-shadow:0 0 0 4px var(--accent-waas)}
.optie__kop{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-weight:750; color:var(--kop); font-size:.92rem}
.optie__letter{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--tint); color:var(--tint-inkt); font-weight:800}
.optie__vink{display:none; margin-left:auto; align-items:center; gap:4px; font-size:.8rem; color:var(--groen); background:var(--groen-waas); border-radius:99px; padding:3px 10px}
.optie--gekozen .optie__vink{display:inline-flex}
.optie__tekst{flex:1}
.optie__knoppen{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--lijn)}

.uit{margin-bottom:14px}
.uit:last-child{margin-bottom:0}
.uit__label{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--gedempt); margin:0 0 4px}
.uit p{margin:0 0 .7em; color:var(--kop)}
.uit p:last-child{margin-bottom:0}
.uit ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.uit li{position:relative; padding-left:22px; color:var(--kop)}
.uit li::before{content:""; position:absolute; left:4px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--accent)}
/* Een voorproefje van hoe het op een pagina staat. */
.uit--eyebrow p:not(.uit__label){font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-tekst)}
.uit--headline p:not(.uit__label){font-size:1.45rem; font-weight:800; line-height:1.2; letter-spacing:-.015em}
.uit--knop p:not(.uit__label){display:inline-block; background:var(--accent); color:var(--accent-op); font-weight:800; border-radius:99px; padding:10px 18px; font-size:.9rem}
.uit--belofte p:not(.uit__label),.uit--in_een_zin p:not(.uit__label),.uit--nieuw p:not(.uit__label){font-size:1.15rem; font-weight:700; line-height:1.4}
.uit--onderwerp p:not(.uit__label){font-weight:800}

.schrijft{display:grid; gap:12px; padding:8px 0}
.schrijft__zin{margin:0; font-weight:700; color:var(--kop); display:flex; align-items:center; gap:10px}
.schrijft__zin::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--accent); animation:puls 1.2s ease-in-out infinite}
@keyframes puls{50%{transform:scale(1.6); opacity:.4}}
.schrijft__stip{display:none}
.schrijft__regels{display:grid; gap:10px}
.schrijft__regels i{display:block; height:14px; border-radius:7px; background:linear-gradient(90deg, var(--vlak-2) 0%, var(--vlak-3) 40%, var(--vlak-2) 80%); background-size:200% 100%; animation:glans 1.4s linear infinite}
.schrijft__regels i:nth-child(1){width:60%}
.schrijft__regels i:nth-child(2){width:92%}
.schrijft__regels i:nth-child(3){width:84%}
.schrijft__regels i:nth-child(4){width:45%}
@keyframes glans{to{background-position:-200% 0}}

.verder{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r); padding:20px 24px; margin-top:34px}
.verder p{margin:0; font-weight:750; color:var(--kop)}
@media (max-width:560px){ .blok{padding:18px 14px} .optie{padding:16px} .verder .knop{width:100%} }

/* ── Totaalpakket ───────────────────────────────────────────────────── */
.let{background:var(--accent-waas); border:1px solid var(--accent-rand); border-radius:var(--r); padding:16px 20px; margin-bottom:26px}
.let p{margin:0 0 .4em}
.let p:last-child{margin:0}
.uitleg{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r); padding:24px; margin-bottom:30px}
.uitleg ol{margin:0; padding-left:20px; display:grid; gap:8px}
.pakket{margin-bottom:34px}
.pakket > h2{padding-bottom:10px; border-bottom:3px solid var(--tint)}
.pakket__blok{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r); padding:22px; margin-bottom:14px}
.pakket__blok h3{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pakket__blok .blok__waar{margin-bottom:14px}

/* ── Beheer ─────────────────────────────────────────────────────────── */
.beheerblok{background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r); padding:24px; margin-bottom:24px}
.tabel{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.92rem}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--lijn); white-space:nowrap}
th{color:var(--gedempt); font-weight:750; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em}

/* ── Melding ────────────────────────────────────────────────────────── */
.melding{position:fixed; left:50%; bottom:22px; transform:translate(-50%, 140%); z-index:50; max-width:calc(100vw - 32px);
  background:var(--diep); color:var(--diep-kop); padding:12px 20px; border-radius:99px; font-weight:650; font-size:.94rem;
  box-shadow:var(--schaduw-hoog); transition:transform .3s ease, visibility .3s; pointer-events:none; visibility:hidden}
.melding--aan{transform:translate(-50%, 0); visibility:visible}
.melding--fout{background:var(--rood); color:#fff}

/* ── Afdrukken en pdf ───────────────────────────────────────────────── */
.afdrukbalk{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; background:var(--accent-waas); border-radius:var(--r); padding:14px 18px; margin-bottom:24px}
.afdrukbalk p{margin:0}
.afdrukkop{border-bottom:3px solid var(--kop); padding-bottom:16px; margin-bottom:26px}
.afdrukkop h1{font-size:2.2rem}
body.afdruk main{max-width:820px}

@media print{
  :root{--grond:#fff; --vlak:#fff; --kop:#1d1824; --tekst:#2b2533}
  body{background:#fff !important; font-size:11pt}
  .kop,.voet,.afdrukbalk,.melding,.terug,.optie__knoppen,.blok__voet,.teksten__knoppen{display:none !important}
  main{padding:0 !important; max-width:none !important}
  .pakket__blok,.optie{box-shadow:none !important; border:1px solid #ddd; break-inside:avoid}
  .pakket{break-before:auto}
  .pakket > h2{break-after:avoid}
  .uit--knop p:not(.uit__label){border:1.5px solid #1d1824; background:none !important}
  a{color:inherit}
  @page{margin:16mm 14mm}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ══════════════════════════════════════════════════════════════════════
   Huisstijl van de verkooppagina (v2)
   ══════════════════════════════════════════════════════════════════════ */
h1,h2{font-family:var(--display); font-weight:400; letter-spacing:-.01em; line-height:1.08}
h1{font-size:clamp(2rem,1.3rem + 2.8vw,3.2rem)}
h2{font-size:clamp(1.35rem,1.05rem + 1.1vw,1.8rem)}
h3{font-family:"Roboto",sans-serif; font-weight:800}
.boventitel{font-weight:900}
.knop{font-weight:800; letter-spacing:.01em}
.knop--vol{background:var(--folie); color:var(--accent-op); box-shadow:0 10px 22px -12px rgba(168,119,46,.9), inset 0 1px 0 rgba(255,255,255,.45)}
.knop--vol:hover{box-shadow:0 14px 26px -12px rgba(168,119,46,1), inset 0 1px 0 rgba(255,255,255,.45)}
.knop--licht{background:var(--folie); color:var(--accent-op)}
.kop__bol{background:var(--diep-2)}
.voortgang__balk span{background:var(--folie)}
.voortgang p,.rekensom__cijfers b,.halte__punt{font-family:var(--cijfer); font-weight:600}
.rekensom__cijfers b{font-size:2.4rem; color:var(--diep-accent)}
.rekensom,.halte__kaart--donker,.stapkop--donker{background:radial-gradient(120% 140% at 100% 0%, var(--diep-2) 0%, var(--diep) 60%)}
.rekensom .boventitel,.halte__kaart--donker .halte__boven,.stapkop--donker .boventitel{color:var(--diep-accent)}
.halte__kaart--donker::before{background:var(--folie)}
.halte--klaar .halte__punt{background:var(--folie); color:var(--accent-op)}
.halte--eind .halte__punt{background:var(--diep-2)}
.label--klaar{background:var(--folie); color:var(--accent-op)}
.label--bezig{background:var(--groen-waas); color:var(--groen)}
.uit li::before{background:var(--folie)}
.uit--knop p:not(.uit__label){background:var(--folie)}
.optie--gekozen{border-color:#C8902F; box-shadow:0 0 0 4px var(--accent-waas)}
.optie__vink{background:var(--folie); color:var(--accent-op)}
.chip input:checked + span{background:var(--diep-2); border-color:var(--diep-2)}
.keuze input:checked + span{border-color:#C8902F}
input:focus,textarea:focus{border-color:#C8902F}
:focus-visible{outline-color:#C8902F}
.schrijft__zin::before{background:#C8902F}
.melding{background:var(--diep-2)}

/* Het welkomstblok op het dashboard: groen, met gloed en het bundelbeeld. */
.held{position:relative; max-width:none; overflow:hidden; isolation:isolate; color:var(--diep-tekst);
  background:radial-gradient(130% 120% at 0% 0%, var(--diep-2) 0%, var(--diep) 62%);
  border-radius:28px; padding:clamp(28px,4vw,48px); margin:8px 0 28px; box-shadow:var(--schaduw-hoog);
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:center; gap:24px}
.held h1{color:var(--diep-kop)}
.held .boventitel{color:var(--diep-accent)}
.held .intro__tekst{color:var(--diep-tekst)}
.held .voortgang p{color:var(--diep-kop)}
.held .voortgang__balk{background:rgba(255,255,255,.12)}
.held__tekst{position:relative; z-index:1}
.held__beeld{position:relative; z-index:1; width:100%; height:auto; filter:drop-shadow(0 26px 30px rgba(0,0,0,.45)); grid-column:2; grid-row:1}
.held__gloed{position:absolute; z-index:0; right:-10%; top:-30%; width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(242,201,100,.38), rgba(242,201,100,0) 65%); filter:blur(10px); animation:ademen 9s ease-in-out infinite alternate}
@keyframes ademen{to{transform:translate(-6%,8%) scale(1.12); opacity:.75}}
@media (max-width:820px){
  .held{grid-template-columns:1fr; padding:26px 20px}
  .held__beeld{grid-column:1; grid-row:auto; max-width:300px; justify-self:center; margin-top:-6px}
}

/* Productbeelden op de roadmap en bovenaan een stap. */
.halte__kaart--beeld{display:grid; grid-template-columns:minmax(0,1fr) 200px; column-gap:22px}
.halte__kaart--beeld > *{grid-column:1}
.halte__kaart--beeld > .knop{justify-self:start}
.halte__beeld{grid-column:2 !important; grid-row:1 / span 5; align-self:center; width:100%; height:auto; filter:drop-shadow(0 14px 16px rgba(10,42,31,.22))}
@media (max-width:720px){
  .halte__kaart--beeld{grid-template-columns:1fr}
  .halte__beeld{grid-column:1 !important; grid-row:auto; order:-1; max-width:220px; margin:0 0 6px}
}
.stapkop{display:grid; grid-template-columns:minmax(0,1fr) 260px; column-gap:24px; align-items:center}
.stapkop > *{grid-column:1}
.stapkop__beeld{grid-column:2 !important; grid-row:1 / span 3; width:100%; height:auto; position:relative; z-index:1; filter:drop-shadow(0 18px 20px rgba(10,42,31,.28))}
@media (max-width:760px){
  .stapkop{grid-template-columns:1fr}
  .stapkop__beeld{grid-column:1 !important; grid-row:auto; max-width:240px; order:2; margin-top:10px}
}

/* ── Het inlogscherm ───────────────────────────────────────────────── */
body.uit{background:var(--diep); background-image:none}
body.uit .voet{color:#9FB6A9; background:#061811}
.poort{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 50% 0%, #0E4A36 0%, #0A2A1F 55%, #061811 100%)}
.poort main.smal{position:relative; z-index:2; padding:40px 16px; width:100%}
.poort .welkom{background:linear-gradient(90deg,#C8902F,#F2C964 45%,#B8822F) top/100% 5px no-repeat, rgba(255,252,246,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(233,185,73,.45);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.4) inset; color:#34413A}
.poort .welkom h1{color:#0F1C17}
:root[data-thema="donker"] .poort .welkom{background:linear-gradient(90deg,#C8902F,#F2C964 45%,#B8822F) top/100% 5px no-repeat, rgba(16,32,25,.92); color:var(--tekst)}
:root[data-thema="donker"] .poort .welkom h1{color:var(--kop)}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="licht"]) .poort .welkom{background:linear-gradient(90deg,#C8902F,#F2C964 45%,#B8822F) top/100% 5px no-repeat, rgba(16,32,25,.92); color:var(--tekst)}
  :root:not([data-thema="licht"]) .poort .welkom h1{color:var(--kop)}
}

.sfeer{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.gloed{position:absolute; border-radius:50%; filter:blur(60px); will-change:transform}
.gloed--a{width:46vmax; height:46vmax; left:-12vmax; top:-14vmax; background:rgba(242,201,100,.22); animation:gloed-a 26s ease-in-out infinite alternate}
.gloed--b{width:40vmax; height:40vmax; right:-14vmax; bottom:-16vmax; background:rgba(200,144,47,.22); animation:gloed-b 32s ease-in-out infinite alternate}
.gloed--c{width:30vmax; height:30vmax; left:40%; top:55%; background:rgba(143,209,166,.10); animation:gloed-a 38s ease-in-out infinite alternate-reverse}
@keyframes gloed-a{to{transform:translate(8vmax,6vmax) scale(1.15)}}
@keyframes gloed-b{to{transform:translate(-7vmax,-5vmax) scale(1.1)}}

/* Elk element staat op zijn plek en drijft omhoog: verschijnen, zweven,
   vervagen. De laag bepaalt grootte, scherpte, helderheid en tempo. */
.zwever{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); opacity:0;
  animation:zweef var(--duur) ease-in-out var(--start) infinite; will-change:transform, opacity}
.zwever > *{display:inline-flex; align-items:center}
.laag-1{--maat:1; --vol:.95; z-index:3}
.laag-2{--maat:.8; --vol:.7; filter:blur(1.6px); z-index:2}
.laag-3{--maat:.6; --vol:.42; filter:blur(4px); z-index:1}
@keyframes zweef{
  0%  {opacity:0; transform:translate(-50%,-50%) translateY(40px) scale(calc(var(--maat) * .92))}
  14% {opacity:var(--vol)}
  80% {opacity:var(--vol)}
  100%{opacity:0; transform:translate(-50%,-50%) translateY(-90px) scale(var(--maat))}
}
/* Mandjes groeien terwijl ze stijgen, met een "+1" die oplicht. */
.zwever--mand{animation-name:zweef-mand}
@keyframes zweef-mand{
  0%  {opacity:0; transform:translate(-50%,-50%) translateY(40px) scale(calc(var(--maat) * .5))}
  14% {opacity:var(--vol)}
  60% {transform:translate(-50%,-50%) translateY(-30px) scale(calc(var(--maat) * 1.04))}
  80% {opacity:var(--vol)}
  100%{opacity:0; transform:translate(-50%,-50%) translateY(-90px) scale(calc(var(--maat) * 1.1))}
}
.mandje{position:relative; width:76px; height:76px; justify-content:center; border-radius:50%; color:#F2C964;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,.05) 60%); border:1px solid rgba(242,201,100,.45);
  box-shadow:0 0 34px rgba(242,201,100,.25), inset 0 1px 0 rgba(255,255,255,.25)}
.mandje svg{width:38px; height:38px}
.mandje i{position:absolute; top:-6px; right:-8px; font:600 13px/1 var(--cijfer); font-style:normal; color:#1C1606; background:var(--folie); border-radius:99px; padding:5px 8px;
  animation:plop var(--duur) ease-in-out var(--start) infinite}
@keyframes plop{0%,40%{transform:scale(0)} 48%{transform:scale(1.2)} 54%,100%{transform:scale(1)}}
.bedrag{gap:4px; font:600 30px/1 var(--cijfer); color:#F4EEE3; padding:12px 18px; border-radius:99px;
  background:rgba(255,255,255,.07); border:1px solid rgba(242,201,100,.35); box-shadow:0 0 30px rgba(242,201,100,.18)}
.bedrag b{width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font:700 17px/1 "Roboto",sans-serif; color:#1C1606; background:var(--folie)}
.order{gap:12px; padding:12px 16px 12px 12px; border-radius:16px; min-width:210px; color:#0F1C17;
  background:rgba(255,252,246,.92); box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.order__ic{width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--diep-2); color:#F2C964; flex:none}
.order__ic svg{width:22px; height:22px}
.order b{display:block; font:800 14px/1.2 "Roboto",sans-serif}
.order small{display:block; font:500 13px/1.3 "Roboto",sans-serif; color:#5A645D}
@media (max-width:640px){
  .alleen-breed{display:none}
  .laag-1{--maat:.8} .laag-2{--maat:.66} .laag-3{--maat:.5}
}
@media (prefers-reduced-motion: reduce){
  .zwever{animation:none !important; opacity:var(--vol); transform:translate(-50%,-50%) scale(var(--maat))}
  .mandje i{animation:none !important}
}
h1,h2{overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto}
@media (max-width:480px){ h1{font-size:1.8rem} .stapkop h1{font-size:1.65rem} }