/* Slim Opvoeden — nieuw ontwerp "Eenheid" (voorbeeld op /nieuw) */
:root{
  --canvas:#f6f3ea; --papier:#fdfbf4; --inkt:#1f2a1b; --inkt-zacht:#4c5644;
  --salie:#a9b49a; --salie-licht:#e7ead9; --bos:#1b2418; --bos-diep:#141a12;
  --goud:#c9963f; --goud-licht:#e2b869; --klei:#b3603a; --klei-licht:#c46e44;
  /* Diepe varianten voor kleine tekst op een lichte ondergrond. Klei en goud
     zijn mooi op een kop, maar op 12 pixels halen ze het leescontrast niet:
     klei komt op 4,07 en goud zelfs op 2,56, waar 4,5 de norm is. Deze twee
     halen het wel, en op een kop blijven we gewoon de originele kleuren
     gebruiken. Zo verandert het merk niet, alleen de leesbaarheid. */
  --klei-diep:#9d5232; --goud-diep:#9a6a26;
  --lijn:rgba(31,42,27,.12); --schaduw:0 10px 30px rgba(27,36,24,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
:target{scroll-margin-top:5.5rem} /* ankers (bijv. /peuter#luisteren) niet onder de plakkende kopbalk */
body{margin:0;background:var(--canvas);color:var(--inkt);
  font-family:'Inter',system-ui,sans-serif;font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.12;
  letter-spacing:-.01em;text-wrap:balance;margin:0 0 .7em}
h1{font-size:clamp(2.1rem,6vw,3.6rem)} h2{font-size:clamp(1.7rem,4.2vw,2.7rem)}
h3{font-size:1.15rem}
p{margin:0 0 1.15em;color:var(--inkt-zacht)}
em{font-style:italic;color:var(--klei)}
img{max-width:100%;display:block}
a{color:inherit}
/* Wie met de Tab-toets navigeert, moet zien waar hij staat. Zonder dit valt de
   browser terug op zijn eigen blauwe ring, die hier niet bij past. focus-visible
   in plaats van focus, want dan blijft de ring weg bij een gewone muisklik.
   Outline verschuift niets in de opmaak, dus dit kan op alle schermformaten. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--klei-diep);outline-offset:3px;border-radius:6px}
.voet a:focus-visible,.nav-donker a:focus-visible,.prijsblok a:focus-visible{
  outline-color:var(--goud-licht)}
.binnen{max-width:74rem;margin:0 auto;padding:0 calc(1.35rem + env(safe-area-inset-right)) 0 calc(1.35rem + env(safe-area-inset-left))}
.smal{max-width:44rem}
.vel{padding:clamp(3.6rem,8vw,6.5rem) 0}
.vel-alt{background:var(--salie-licht)}
.vel-papier{background:var(--papier)}
.lood{font-size:1.22rem;color:var(--inkt)}
.eyebrow{display:block;font-size:.74rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--klei-diep);margin-bottom:.9rem}
.eyebrow-licht{color:var(--salie)}
.fijn{font-size:.88rem;color:var(--inkt-zacht);margin-top:.8rem}
.fijn-licht{color:var(--salie)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,243,234,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:74rem;margin:0 auto;padding:.8rem 1.35rem;padding-left:calc(1.35rem + env(safe-area-inset-left));padding-right:calc(1.35rem + env(safe-area-inset-right))}
.merk{font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;
  color:var(--inkt);text-decoration:none}
.merk span{color:var(--goud)}
.merk small{display:block;font-family:'Inter';font-weight:500;font-size:.62rem;
  letter-spacing:.08em;color:var(--inkt-zacht)}
.nav-links{display:flex;align-items:center;gap:1.15rem;font-size:.92rem}
.nav-links a:not(.knop){text-decoration:none;font-weight:500;color:var(--inkt-zacht);display:inline-flex;align-items:center;min-height:44px}
.nav-links a:not(.knop):hover{color:var(--inkt)}
@media(max-width:760px){.nav-links a.verberg-m{display:none}}
@media(max-width:760px){
  .nav-in{gap:.55rem;padding:.6rem 1rem;
    padding-left:calc(1rem + env(safe-area-inset-left));
    padding-right:calc(1rem + env(safe-area-inset-right))}
  .merk{font-size:1.02rem;white-space:nowrap}
  .merk small{white-space:normal}
  .nav-links{gap:.7rem}
  .nav .knop{font-size:.84rem;padding:.5rem .85rem;white-space:nowrap}
}
/* Op een smalle telefoon paste "Start vandaag · €79,99" niet in de balk en
   schoof de hele pagina dertig pixels naar rechts. De prijs mag daar weg:
   hij staat vlak eronder in de openingstekst en in de koopbalk. */
@media(max-width:480px){ .nav .knop .np{display:none} }
/* Kleine telefoons (360 px en smaller): daar paste de balk nog steeds niet en
   schoof de pagina eenentwintig pixels opzij. De ondertitel mag daar weg; de
   naam zegt genoeg en het scheelt meteen een regel hoogte. */
@media(max-width:400px){
  .nav-in{padding-left:calc(.75rem + env(safe-area-inset-left));
          padding-right:calc(.75rem + env(safe-area-inset-right))}
  .merk{font-size:.94rem}
  .merk small{display:none}
  .nav-links{gap:.5rem;font-size:.85rem}
  .nav .knop{font-size:.74rem;padding:.42rem .62rem;letter-spacing:0}
}
.nav-donker{background:rgba(20,26,18,.55);border-bottom:none}
.nav-donker .merk,.nav-donker .nav-links a:not(.knop){color:#f4f0e4;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.nav-donker .merk small{color:var(--salie)}

/* knoppen */
.knop{display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;
  padding:.9rem 1.7rem;border-radius:999px;border:none;cursor:pointer;
  transition:transform .18s ease,filter .18s ease;text-align:center}
.knop:hover{transform:translateY(-1px);filter:brightness(1.06)}
.knop-goud{background:linear-gradient(180deg,var(--goud-licht),var(--goud));
  color:#1b2418;box-shadow:0 8px 22px rgba(201,150,63,.30)}
.knop-klei{background:linear-gradient(180deg,var(--klei-licht),var(--klei));
  color:#fff;box-shadow:0 8px 22px rgba(179,96,58,.28)}
.knop-lijn{background:transparent;border:1.5px solid var(--lijn);color:var(--inkt);font-weight:500}
.knop-groot{padding:1.05rem 2.2rem;font-size:1.07rem}
.nav .knop{padding:.55rem 1.15rem;font-size:.9rem}
.knop-speel{min-height:44px;display:inline-flex;align-items:center;gap:.5rem;background:transparent;
  border:none;color:var(--inkt);font-weight:600;font-size:.98rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;padding:.5rem 0}
.knop-speel svg{flex:none}

/* filmreis (hero) */
/* De hero was 230vh hoog omdat de film aan de scroll hing. Dat is voorbij:
   nu één scherm, zodat een bezoeker uit een advertentie meteen bij de
   leeftijdskaarten komt in plaats van na twee schermen scrollen. */
.filmreis{position:relative;height:calc(100svh - var(--kophoogte,0px));background:var(--bos-diep)}
.film-plak{position:sticky;top:var(--kophoogte,0px);
  height:calc(100vh - var(--kophoogte,0px));height:calc(100dvh - var(--kophoogte,0px));overflow:hidden}
.film-plak video,.film-plak .film-fallback{position:absolute;inset:0;width:100%;
  height:100%;object-fit:cover}
.film-schaduw{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,18,.42) 0%,rgba(20,26,18,0) 35%,rgba(20,26,18,.05) 60%,rgba(20,26,18,.55) 100%)}
.film-tekst{position:absolute;left:0;right:0;bottom:0;padding:0 1.35rem calc(3.2rem + env(safe-area-inset-bottom));
  text-align:center;color:#f7f4e9;opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease}
.film-tekst.zichtbaar{opacity:1;transform:none}
.film-tekst h1{color:#fbf8ee;text-shadow:0 2px 24px rgba(20,26,18,.55);max-width:17ch;margin:0 auto .5rem}
.film-tekst p{color:#eae5d2;text-shadow:0 1px 16px rgba(20,26,18,.6);max-width:34rem;margin:0 auto 1.2rem;font-size:1.08rem}
.film-hint{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  color:#efe9d6;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.85;transition:opacity .4s}
.film-hint.weg{opacity:0}
.film-kicker{position:absolute;top:5.2rem;left:0;right:0;text-align:center;
  color:#f1ecd9;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.5);transition:opacity .5s}
.film-kicker.weg{opacity:0}
@media(max-width:899px){
  .filmreis{height:calc(100dvh - var(--kophoogte,0px))}
  .film-plak{position:relative;top:0;height:100%}
}
@media(prefers-reduced-motion:reduce){
  .filmreis{height:auto}
  .film-plak{position:relative;height:88vh}
  .film-plak video{display:none}
  .film-fallback{display:block!important}
  .film-tekst{opacity:1;transform:none}
}

/* vertrouwensbalk */
.vertrouwen{background:var(--bos);color:#f4f0e4;padding:1.1rem 0}
.vertrouwen .binnen{display:grid;grid-template-columns:repeat(4,auto);
  justify-content:space-between;gap:.7rem 1.4rem}
.vertrouwen div{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:#ded9c8}
.vertrouwen svg{flex:none;color:var(--goud)}
@media(max-width:820px){.vertrouwen .binnen{grid-template-columns:1fr 1fr}}

/* fase-kiezer */
/* --- Kies je fase ---------------------------------------------------------
   Vijf kaarten naast elkaar in de gewone kolom van 74rem worden postzegels:
   op een breed scherm hield elke kaart nog geen 215 pixels over en stond er
   een halve meter wit naast. Dit blok mag daarom breder zijn dan de rest van
   de site. Op telefoon en tablet is het een rail waar je doorheen veegt, dat
   leest prettiger dan twee halve kaarten onder elkaar. */
.fases{display:grid;gap:1rem;margin-top:2.4rem}

/* Breed scherm: vijf naast elkaar, en het blok krijgt meer lucht. */
@media(min-width:900px){
  .fases{grid-template-columns:repeat(5,1fr);gap:1.15rem}
  .fase-kaart{min-height:24rem}
  .fase-tekst{padding:1.35rem 1.25rem}
  /* Twee regels reserveren, anders staan de leeftijdslabels op vijf
     verschillende hoogtes en oogt de rij rommelig. */
  .fase-tekst .pijn{font-size:1.3rem;margin-top:.42rem;min-height:3.2em}
  .fase-tekst .pijl{font-size:.88rem;margin-top:.6rem}
}
@media(min-width:1180px){ #fases .binnen{max-width:94rem} }

/* Telefoon en tablet: een rail van links naar rechts, met kaarten die
   inklikken. De rail loopt door tot de schermrand, anders lijkt hij
   afgeknipt en zie je niet dat er meer naast staat. */
@media(max-width:899px){
  .fases{
    grid-auto-flow:column;
    grid-auto-columns:minmax(15.5rem,74%);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(-1 * (1.35rem + env(safe-area-inset-left)));
    padding:0 calc(1.35rem + env(safe-area-inset-left)) .5rem;
  }
  .fases::-webkit-scrollbar{display:none}
  .fase-kaart{scroll-snap-align:start;min-height:20rem}
  .fase-tekst .pijn{font-size:1.18rem}
}
.fase-kaart{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:290px;border-radius:20px;overflow:hidden;text-decoration:none;
  box-shadow:var(--schaduw);transition:transform .2s ease}
.fase-kaart:hover{transform:translateY(-4px)}
.fase-kaart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fase-kaart::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,18,0) 8%,rgba(20,26,18,.55) 42%,rgba(20,26,18,.92) 100%)}
.fase-tekst{position:relative;z-index:2;padding:1.1rem 1.05rem;color:#fff}
/* Leeftijd en prijs staan bovenin de kaart, niet onderaan tussen de tekst.
   Daar waren ze te klein om vlot te lezen en vielen ze weg tegen de foto.
   Bovenin, op een donker plaatje, zie je ze meteen. */
.fase-kop{position:absolute;top:.85rem;left:.85rem;right:.85rem;z-index:3}
.fase-kop .leeftijd{display:inline-block;font-size:.84rem;font-weight:700;letter-spacing:.05em;
  color:#fff;background:rgba(20,26,18,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.34rem .75rem;border-radius:999px;white-space:nowrap}
/* De prijs staat onderin naast de knop en niet naast de leeftijd. Samen op de
   bovenrand pasten ze niet: bij "SCHOOLKIND · 6-12 JAAR" liep de prijs de
   kaart uit. Deze plek klopt ook beter: bovenin oriënteer je je, onderin
   beslis je. */
.fase-voet{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-top:.55rem}
.fase-voet .kaartprijs{flex:none;font-size:.8rem;font-weight:700;color:#141a12;
  background:var(--goud-licht);padding:.24rem .6rem;border-radius:999px;white-space:nowrap}
.fase-voet .pijl{margin-top:0}
@media(min-width:900px){ .fase-kop .leeftijd{font-size:.88rem} }
.fase-tekst .pijn{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600;line-height:1.25;
  display:block;margin-top:.3rem;text-shadow:0 1px 10px rgba(20,26,18,.8)}
.fase-tekst .pijl{font-size:.82rem;color:#e6e1cd;margin-top:.45rem;display:block}

/* kaarten en blokken */
.kaarten{display:grid;gap:1.1rem;margin:2rem 0}
@media(min-width:820px){.kaarten-3{grid-template-columns:repeat(3,1fr)}}
/* Zes bronkaarten in de smalle leeskolom werden postzegels van 208 pixels
   met twintig tekens per regel. Twee kolommen leest daar veel rustiger. */
@media(min-width:620px){.smal .kaarten-rail{grid-auto-flow:row;grid-template-columns:1fr 1fr;
  overflow-x:visible;margin-inline:0;padding-inline:0;gap:1.2rem}}
.kaart{background:var(--papier);border:1px solid var(--lijn);border-radius:18px;padding:1.5rem}
.kaart .nr{font-family:'Fraunces',serif;font-weight:700;color:var(--goud);font-size:1.1rem}
.uitgelicht{background:var(--papier);border:1px solid var(--lijn);border-radius:18px;
  padding:1.4rem 1.6rem;color:var(--inkt);font-size:1.06rem}
.feit{background:var(--bos);color:#f4f0e4;border-radius:20px;padding:1.7rem 1.9rem;margin:2rem 0}
.feit h3{color:var(--goud);margin-bottom:.5rem}
.feit p{color:#ded9c8}
.feit .bron{font-size:.8rem;color:var(--salie);margin:0}

/* herkenning */
.handen{list-style:none;margin:1.8rem 0;padding:0;display:grid;gap:.75rem}
.handen li{background:var(--papier);border:1px solid var(--lijn);border-radius:16px;
  padding:1.05rem 1.25rem;font-size:1.02rem;color:var(--inkt);display:flex;gap:.8rem}
.handen li::before{content:"🙋‍♀️";flex:none}

/* curriculum */
.lessen{list-style:none;counter-reset:les;margin:2rem 0;padding:0;display:grid;gap:.9rem}
@media(min-width:820px){.lessen{grid-template-columns:1fr 1fr;gap:1rem 2rem}}
.lessen li{display:flex;gap:1.05rem;align-items:flex-start;padding:1.05rem 1.25rem;
  background:var(--papier);border:1px solid var(--lijn);border-radius:16px}
.lessen .nr{font-family:'Fraunces',serif;font-weight:700;color:#fff;background:var(--goud);
  width:1.9rem;height:1.9rem;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.92rem;flex:none;margin-top:.1rem}
.lessen h3{margin:0 0 .2rem;font-size:1.02rem}
.lessen p{margin:0;font-size:.93rem}
.lessen .tijd{font-size:.75rem;color:var(--goud-diep);font-weight:600}

/* anker */
.anker{display:grid;gap:.8rem;margin:2rem 0}
.anker div{background:var(--papier);border:1px solid var(--lijn);border-radius:16px;
  padding:1.05rem 1.25rem;display:flex;gap:1rem;align-items:baseline}
.anker b{font-family:'Fraunces',serif;font-size:1.5rem;color:var(--klei);flex:none;width:1.4rem}
.anker p{margin:0;font-size:.97rem}
.anker p strong{color:var(--inkt)}

/* stack / vinkjes */
/* kennisbank-links op de leeftijdspagina's */
.kennislijst{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:.55rem}
.kennislijst li{position:relative;padding-left:1.5rem;font-size:1.01rem}
.kennislijst li::before{content:"→";position:absolute;left:0;color:var(--goud);font-weight:700}
.stack{list-style:none;margin:1.6rem 0;padding:0;display:grid;gap:.55rem}
.stack li{position:relative;padding-left:1.9rem;font-size:1.01rem;color:var(--inkt-zacht)}
.stack li::before{content:"✓";position:absolute;left:0;color:var(--goud);font-weight:700}
.stack li strong{color:var(--inkt)}

/* prijs */
.prijsblok{background:radial-gradient(ellipse 65% 55% at 78% 0%,rgba(201,150,63,.22),transparent 60%),
  linear-gradient(180deg,var(--bos),var(--bos-diep));color:#f4f0e4;border-radius:24px;
  padding:clamp(1.8rem,4vw,3rem)}
.prijsblok h2,.prijsblok h3{color:#f6f2e3}
.prijsblok em{color:var(--goud-licht)}
.prijsblok p{color:#ded9c8}
.prijsblok .stack li{color:#ded9c8}
.prijsblok .stack li strong{color:#f6f2e3}
.prijsblok .stack li::before{color:var(--goud-licht)}
.prijs-getal{font-family:'Fraunces',serif;font-size:clamp(2.4rem,6vw,3.4rem);color:var(--goud-licht);font-weight:600}
.prijs-was{font-size:1rem;color:var(--salie);margin-left:.6rem}

/* pakketten */
.treden{display:grid;gap:1.1rem;margin:2.2rem 0;align-items:stretch}
@media(min-width:900px){.treden{grid-template-columns:repeat(3,1fr)}}
.trede{background:var(--papier);border:1.5px solid var(--lijn);border-radius:22px;
  padding:1.7rem 1.5rem;display:flex;flex-direction:column;position:relative}
.trede h3{font-size:1.25rem}
.trede .prijs{font-family:'Fraunces',serif;font-size:2.1rem;line-height:1.2;color:var(--inkt);
  margin:.4rem 0 .1rem;white-space:nowrap}
.trede .prijs small{display:block;line-height:1.45;margin-top:.2rem;font-size:.85rem;
  font-family:'Inter';color:var(--inkt-zacht);font-weight:400}
.trede .knop{margin-top:auto}
/* Een losse pakketkaart staat direct in .binnen; daar hoort de knop zich
   niet over de hele breedte uit te rekken zoals in het drie-koloms raster. */
@media(min-width:700px){.binnen > .trede .knop{align-self:flex-start}}
.trede-top{border:2px solid var(--goud);box-shadow:0 14px 36px rgba(201,150,63,.20);
  background:linear-gradient(180deg,#fffdf4,var(--papier))}
.trede-label{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);
  background:var(--goud);color:#1b2418;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;padding:.32rem .9rem;border-radius:999px;white-space:nowrap}

/* reviews */
.reviews-rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.4rem .2rem 1rem;-webkit-overflow-scrolling:touch}
.reviews-rail::-webkit-scrollbar{height:6px}
.reviews-rail::-webkit-scrollbar-thumb{background:var(--salie);border-radius:3px}
.review{flex:0 0 78%;max-width:21rem;scroll-snap-align:start;background:var(--papier);
  border:1px solid var(--lijn);border-radius:18px;padding:1.4rem;position:relative}
@media(min-width:760px){.review{flex-basis:31%}}
.review .sterren{color:var(--goud-diep);letter-spacing:.15em;font-size:.95rem}
.review p{font-size:.96rem;color:var(--inkt);margin:.6rem 0}
.review .wie{font-size:.8rem;color:var(--inkt-zacht)}
.review-voorbeeld{opacity:.55}
.review-voorbeeld::after{content:"VOORBEELD · hier komt een echte ervaring";
  position:absolute;top:.6rem;right:.8rem;font-size:.6rem;font-weight:700;
  letter-spacing:.08em;color:var(--klei)}

/* FAQ */
.vragen{display:grid;gap:.7rem;margin:2rem 0}
.vragen details{background:var(--papier);border:1px solid var(--lijn);border-radius:16px;padding:1.05rem 1.3rem}
.vragen summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;min-height:44px;display:flex;align-items:center;justify-content:space-between}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:" +";color:var(--goud);font-weight:700}
.vragen details[open] summary::after{content:" ×"}
.vragen p{margin:.7rem 0 0;font-size:.96rem}

/* sticky koopbalk */
/* Telefoon: de bovenbalken plakken niet. Op een klein scherm namen de
   navigatie en de aanbieding samen bijna een zesde van het beeld in beslag,
   de hele tijd, terwijl je aan het lezen bent. Ze staan nu gewoon bovenaan
   en je scrolt eroverheen. De koopknop raak je daarmee niet kwijt: die zit
   onderin de koopbalk hieronder. */
@media(max-width:899px){
  .nav{position:static;top:auto}
}

.koopbalk{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(27,36,24,.97);
  color:#f4f0e4;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .3s ease}
.koopbalk.zichtbaar{transform:none}
.koopbalk .kb-tekst{font-size:.86rem;line-height:1.3}
.koopbalk .kb-tekst b{display:block;font-size:.95rem}
.koopbalk .knop{padding:.65rem 1.3rem;font-size:.94rem;white-space:nowrap}
@media(min-width:900px){.koopbalk{display:none}}

/* proefles modal */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;
  background:rgba(20,26,18,.55);backdrop-filter:blur(3px)}
.modal.open{display:flex}
.modal-in{background:var(--papier);border-radius:22px 22px 0 0;max-width:44rem;width:100%;
  max-height:88vh;overflow-y:auto;padding:1.8rem 1.5rem calc(2rem + env(safe-area-inset-bottom))}
@media(min-width:760px){.modal{align-items:center}.modal-in{border-radius:22px;padding:2.4rem}}
.modal-sluit{float:right;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--inkt-zacht)}

/* quiz */
.quiz-blok{background:var(--papier);border:1px solid var(--lijn);border-radius:18px;
  padding:1.4rem 1.5rem;margin-bottom:1.1rem}
.quiz-blok h3{color:var(--klei-diep);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:'Inter';font-weight:700}
.quiz-item{display:flex;gap:.85rem;align-items:flex-start;padding:.65rem 0;cursor:pointer;font-size:1rem;color:var(--inkt)}
.quiz-item input{width:22px;height:22px;accent-color:var(--goud);flex:none;margin-top:.1rem}
.uitslag{display:none}
.balkje{height:10px;background:var(--salie-licht);border-radius:5px;overflow:hidden;margin:.3rem 0 1rem}
.balkje i{display:block;height:100%;background:linear-gradient(90deg,var(--goud-licht),var(--goud))}

/* checkout kiezer */
.co-kiezer{display:grid;gap:.8rem;margin:1.4rem 0}
@media(min-width:760px){.co-kiezer{grid-template-columns:repeat(3,1fr)}}
.co-optie{border:1.5px solid var(--lijn);border-radius:16px;padding:1.05rem 1.2rem;
  background:var(--papier);cursor:pointer;text-align:left;font:inherit}
.co-optie.actief{border-color:var(--goud);background:#fffdf4;box-shadow:0 8px 22px rgba(201,150,63,.16)}
.co-optie b{display:block;font-size:.98rem}
.co-optie span{font-size:.85rem;color:var(--inkt-zacht)}
.co-optie .p{font-family:'Fraunces',serif;font-size:1.25rem;color:var(--inkt);display:block;margin-top:.2rem}
.bump{display:flex;gap:.85rem;align-items:flex-start;background:#fdf6e7;border:1.5px dashed var(--goud);
  border-radius:16px;padding:1.05rem 1.2rem;margin:1.2rem 0;cursor:pointer}
.bump input{width:22px;height:22px;accent-color:var(--goud);flex:none;margin-top:.15rem}

/* betaallogos */
.betaal-logos{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.9rem;opacity:.85}
.betaal-logos span{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--inkt-zacht);
  border:1px solid var(--lijn);border-radius:6px;padding:.25rem .55rem;background:#fff}
.betaal-logos.op-donker span{background:rgba(255,255,255,.08);color:#ded9c8;border-color:rgba(255,255,255,.18)}

/* footer */
.voet{background:var(--bos-diep);color:var(--salie);padding:2.6rem 0;font-size:.85rem}
/* De koopbalk plakt onderaan en dekte Voorwaarden en Privacy af. */
@media(max-width:899px){body:has(.koopbalk) .voet{padding-bottom:calc(2.6rem + 7rem)}}
.voet .binnen{display:grid;gap:1rem}
@media(min-width:820px){.voet .binnen{grid-template-columns:1fr auto;align-items:end}}
.voet p{margin:0;color:var(--salie)}
.voet a{color:var(--salie);margin-right:1.1rem;display:inline-flex;align-items:center;min-height:44px}

/* Betaalmethodes: de echte logo's, in een nette rij. */
.betaallogos{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1rem 0 .4rem}
.betaallogos img{width:40px;height:30px;border-radius:5px;background:#fff;
  box-shadow:0 1px 3px rgba(20,26,18,.12)}

/* Wat zit er in het pakket: kort, naast de kassa. */
.watzitererin{background:var(--papier);border:1px solid var(--lijn);border-radius:16px;
  padding:1.2rem 1.4rem;margin:1.4rem 0}
.watzitererin ul{margin:.7rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.watzitererin li{position:relative;padding-left:1.5rem;font-size:.95rem;line-height:1.5}
.watzitererin li::before{content:"✓";position:absolute;left:0;color:var(--klei);font-weight:700}

/* Het slotblok sloot niet aan op de voettekst: te veel lucht erboven, niets eronder. */
.vel-slot{padding-top:1.6rem;padding-bottom:2.2rem}
.vel-slot .prijsblok{margin:0}
.betaallogos img{background:#fff}

/* Kop die alleen bestaat voor Google en schermlezers, niet zichtbaar op het scherm. */
.alleen-lezers { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ===========================================================================
   Minder geplakt, meer beweging
   ---------------------------------------------------------------------------
   De blokken zagen eruit als losse kaartjes die op het vel waren gelegd: een
   wit vlak met een randje, op een achtergrond die al bijna dezelfde kleur had.
   Dat leest onrustig zonder dat je kunt aanwijzen waarom.

   Nu: geen vlak en geen rand meer. De tekst staat gewoon op het vel, met een
   dun streepje erboven dat oplicht zodra je er met de muis overheen gaat.
   Rijen met veel items schuiven van links naar rechts in plaats van door te
   lopen naar een volgende regel.
   =========================================================================== */

/* ---- De blokken zelf ---- */
.kaart {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--lijn);
  border-radius: 0;
  padding: 1.3rem .1rem 1rem;
  transition: transform .24s cubic-bezier(.22,.61,.36,1), border-top-color .24s ease;
}
.kaart:hover { transform: translateY(-6px); border-top-color: var(--goud); }
.kaart h3 { margin: .55rem 0 .4rem; }
.kaart .nr { font-size: 1.05rem; letter-spacing: .02em; }

/* ---- De bronnen: zes stuks, dus schuiven in plaats van stapelen ---- */
.kaarten-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16.5rem, 20rem);
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* doorlopen tot de schermrand, anders lijkt de rij afgeknipt */
  margin-inline: calc(-1 * (1.35rem + env(safe-area-inset-left)));
  padding: 0 calc(1.35rem + env(safe-area-inset-left)) .6rem;
}
.kaarten-rail::-webkit-scrollbar { display: none; }
.kaarten-rail > .kaart { scroll-snap-align: start; }

/* ---- Ervaringen: ook geen kaartjes meer ---- */
.reviews-rail {
  gap: 2.6rem;
  padding: .6rem 0 1.2rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-inline: calc(-1 * (1.35rem + env(safe-area-inset-left)));
  padding-inline: calc(1.35rem + env(safe-area-inset-left));
}
.reviews-rail::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 min(80%, 25rem);
  max-width: 25rem;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--lijn);
  border-radius: 0;
  padding: 1.2rem .1rem .6rem;
  transition: transform .24s cubic-bezier(.22,.61,.36,1), border-top-color .24s ease;
}
.review:hover { transform: translateY(-6px); border-top-color: var(--goud); }
.review p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.55;
  margin: .7rem 0 .9rem;
}
.review .wie { font-size: .84rem; letter-spacing: .01em; }
.review-voorbeeld::after { top: 1.35rem; right: .2rem; }

/* ---- Knoppen en fasekaarten mogen ook meebewegen ---- */
.knop { transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease; }
.knop:hover { transform: translateY(-2px); }
.fase-kaart { transition: transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s ease; }
.fase-kaart:hover { transform: translateY(-7px); box-shadow: 0 18px 40px rgba(20,26,18,.28); }

/* Wie liever geen beweging heeft, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  .kaart, .review, .knop, .fase-kaart { transition: none; }
  .kaart:hover, .review:hover, .knop:hover, .fase-kaart:hover { transform: none; }
}

/* Een rij die doorloopt moet er ook uitzien alsof hij doorloopt. De rechterrand
   vervaagt, zodat je ziet dat er meer naast staat. Zonder dit lijkt de rij
   gewoon afgesneden en gaat niemand vegen. */
.kaarten-rail, .reviews-rail {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 5rem), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 5rem), transparent 100%);
}
@media (max-width: 899px) {
  .fases {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent 100%);
  }
}

/* Valt de film weg, dan mag de tekst nooit onzichtbaar blijven hangen. */
.film-plak video[style*="display: none"] ~ .film-tekst,
.filmreis .film-tekst.zichtbaar { opacity:1; transform:none }

/* --- Het verhaalblok -------------------------------------------------------
   Staat op elke leeftijdspagina onder de hero. Vult het gat tussen de
   advertentie ("niemand heeft je dit ooit geleerd") en de prijs: zonder dit
   springt een bezoeker van een gedachte rechtstreeks naar een bedrag.

   Donker, terwijl de rest van de pagina licht is. Dat markeert het verschil
   tussen het verhaal en het aanbod zonder dat je het hoeft uit te leggen.
   -------------------------------------------------------------------------- */
.verhaal { background:#141a12; color:#f1ebdb; padding:4.2rem 1.35rem 3.8rem; }
.verhaal .binnen { max-width:38rem; }
.verhaal .eyebrow { color:#e3b36a; }
.verhaal h2 {
  font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(1.85rem,6vw,2.7rem); line-height:1.14; letter-spacing:-.02em;
  margin:.6rem 0 1.3rem; color:#f7f4e9; text-wrap:balance;
}
.verhaal h2 em { font-style:italic; color:#e3b36a; }
.verhaal p { font-size:1.06rem; line-height:1.65; color:#cfd6c2; margin:0 0 1.05rem; }
.verhaal p.groot {
  font-family:'Fraunces',Georgia,serif; font-size:1.26rem; line-height:1.5;
  color:#f1ebdb; margin:1.7rem 0;
}
.verhaal .streep { width:3rem; height:2px; background:#e3b36a; margin:1.9rem 0; }
.verhaal .anders { display:grid; gap:0; margin:2rem 0 0; }
.verhaal .anders div { border-top:1px solid rgba(227,179,106,.28); padding:1.1rem 0; }
.verhaal .anders b { display:block; font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:1.1rem; color:#f1ebdb; margin-bottom:.22rem; }
.verhaal .anders span { display:block; font-size:.97rem; color:#a9b79b; line-height:1.55; }
.verhaal .doorknop { margin-top:2.4rem; }
.verhaal .doorknop .fijn { color:#a9b79b; margin-top:.65rem; font-size:.87rem; }

/* ── Glans op de proefknop ──────────────────────────────────────────────────
   Deze knop is de enige plek waar iemand de cursus zelf te zien krijgt zonder
   te betalen. Een veeg licht die er af en toe overheen loopt trekt het oog
   zonder te schreeuwen. Wie beweging heeft uitgezet, ziet gewoon een knop. */
.knop-glans{position:relative;overflow:hidden;isolation:isolate}
.knop-glans::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);pointer-events:none;animation:knopglans 3.8s ease-in-out infinite}
@keyframes knopglans{0%,70%{left:-60%}100%{left:135%}}
@media(prefers-reduced-motion:reduce){.knop-glans::after{animation:none;display:none}}

/* ── Het kijkje in de cursus ────────────────────────────────────────────────
   Dit venster is het enige stuk cursus dat iemand ziet voor hij betaalt. Het
   moet dus niet lezen als een lap tekst maar als een les: één gedachte per
   blok, met lucht ertussen. */
.modal-in.les h2{font-size:clamp(1.6rem,4.4vw,2.1rem);margin:.35rem 0 1.1rem}
.modal-in.les p{font-size:1.02rem;line-height:1.62}
.les-lood{font-size:1.14rem;line-height:1.55;color:var(--inkt)}

/* Twee verdiepingen naast elkaar: boven op slot, beneden wagenwijd open.
   Eén plaatje zegt hier meer dan de alinea die eronder staat. */
.les-huis{display:grid;gap:.6rem;margin:1.4rem 0 1.5rem}
@media(min-width:560px){.les-huis{grid-template-columns:1fr 1fr}}
.les-huis .verdieping{border-radius:16px;padding:1rem 1.1rem;border:1px solid var(--lijn)}
.les-huis .verdieping b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.05rem}
.les-huis .verdieping span{display:block;font-size:.86rem;color:var(--inkt-zacht);margin:.15rem 0 .5rem}
.les-huis .verdieping em{font-style:normal;font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .55rem;border-radius:999px}
.les-huis .boven{background:#eceadf;opacity:.72}
.les-huis .boven em{background:#d9d4c4;color:#5c604f}
.les-huis .onder{background:var(--bos);border-color:transparent;color:#f2eddd}
.les-huis .onder b{color:#fff}
.les-huis .onder span{color:#b9c2a8}
.les-huis .onder em{background:var(--klei);color:#fff}

.les-klap{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.25rem,3.4vw,1.55rem);
  line-height:1.3;color:var(--inkt);border-left:3px solid var(--goud);
  padding-left:1rem;margin:1.5rem 0}

.les-vanavond{background:var(--bos);color:#f2eddd;border-radius:18px;
  padding:1.15rem 1.3rem;margin:1.6rem 0 1.4rem}
.les-vanavond b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.1rem;
  color:var(--goud-licht);margin-bottom:.3rem}
.les-vanavond p{margin:0;color:#cdd5bd;font-size:.98rem}
.modal-in.les .knop{width:100%;margin-top:.4rem}

/* De aanbieding meteen bovenaan op de pakketpagina, want daar stond op geen
   enkel schermformaat een knop voordat je ging scrollen. */
.hero-doen{margin:1.4rem 0 .4rem}
.hero-doen .fijn{margin-top:.7rem}
@media(max-width:560px){.hero-doen .knop{display:block;width:100%;text-align:center}}