/* ============================================================================
   PUPWIJZER — ÉÉN STYLESHEET VOOR DE HELE SITE
   Gemaakt 23 oktober 2026 uit het huisstijlboek
   ("02 opdrachten/huisstijl/README.md" + "tokens.json" + "voorbeeld-homepage.html").

   WAAROM ÉÉN BESTAND
   Elke pagina had zijn eigen <style> met zijn eigen kleurnamen; er waren drie
   verschillende naamsystemen in omloop (--creme betekende op de ene pagina de
   kaart en op de andere de knop). Daardoor zag elke pagina er net anders uit en
   kostte één kleurwijziging tien bestanden. Vanaf nu staan de tokens hier, en
   alleen hier.

   AFSPRAKEN
   - Namen komen letterlijk uit tokens.json. Nooit een losse hexcode in een pagina.
   - De lettertypes staan in de repo onder /fonts/plan/ (daar zette plan.html 2.0
     ze; dezelfde bestanden, dus dezelfde cache). Geen Google Fonts.
   - Donkere stand: dezelfde tokens, andere waarden. Drie ingangen, omdat de site
     ook met een eigen schakelaar overweg moet kunnen:
     de voorkeur van het toestel, data-theme="dark" en data-theme="light".
   - Beweging alleen met transform en opacity, en bij prefers-reduced-motion niets.
   - Wat het huisstijlboek niet kent, blijft in de pagina zelf staan. Deze
     stylesheet gaat niet over de aankondigingsbalk (aankondiging.css), de
     toestemmingsmelding (toestemming.js) of de weekkiezer van /plan.
   ========================================================================= */

/* ---------- 1. de letters ---------- */
@font-face{font-family:PwKop;src:url(/fonts/plan/bricolage-800-smal.woff2) format("woff2");
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:PwTekst;src:url(/fonts/plan/outfit-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:PwTekst;src:url(/fonts/plan/outfit-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:PwHand;src:url(/fonts/plan/caveat-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. de tokens ---------- */
:root{
  --bg:#FAFAF5; --pagina:#ECEADF; --kaart:#FFFFFF; --vlakzacht:#F3F1EA;
  --inkt:#16211B; --zacht:#5E6D63; --rand:#E8EBE2;
  --groen:#18402F; --groen-accent:#2C6A4E; --groen-licht:#E4EDE6;
  --creme:#F4EEDD; --zand:#E6D8BC; --zand-donker:#B98E45;
  --rood:#A94E38; --rood-licht:#F7E6E0;
  --blauw:#4F7598; --blauw-licht:#E3EBF2;
  --knoptekst:#FCFCF8; --op-groen-zacht:#D9E6DD;
  /* Twee kleuren die in BEIDE standen hetzelfde blijven, net als knoptekst.
     Ze staan altijd op een groen vlak, en een groen vlak blijft groen in het
     donker. --creme en --zand draaien wel mee; die zijn voor vlakken op de
     pagina. Zonder dit onderscheid werd "Doe het nu" donkergroen op donker
     (1,25:1) en het handschrift op de prijskaart onleesbaar.
     [GEMETEN 23 okt in de donkere stand] */
  --creme-vast:#F4EEDD; --zand-vast:#E6D8BC; --inkt-op-creme:#18402F;

  --schaduw-kaart:0 1px 2px rgba(22,33,27,.04),0 6px 20px rgba(22,33,27,.06);
  --schaduw-knop:0 10px 24px rgba(24,64,47,.22);
  --schaduw-groen:0 12px 24px rgba(24,64,47,.3);

  --kop:PwKop,"Bricolage Grotesque","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --tekst:PwTekst,Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hand:PwHand,Caveat,"Bradley Hand","Segoe Script",cursive;

  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:24px; --r6:32px; --r7:48px; --r8:72px;
  --hoek-klein:12px; --hoek:16px; --hoek-groot:20px; --hoek-xl:28px; --pil:999px;

  --duur-in:280ms; --duur-vul:600ms; --duur-viering:500ms; --trap:60ms;
  --curve-uit:cubic-bezier(0,0,.2,1); --curve-vul:cubic-bezier(.2,.8,.2,1);
  --curve-veer:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121A16; --pagina:#182119; --kaart:#1C2620; --vlakzacht:#243229;
    --inkt:#EEF2EE; --zacht:#9AA79F; --rand:#2A3630;
    --groen:#1F4D3A; --groen-accent:#6FAE90; --groen-licht:#1F2E27;
    --creme:#2A2A22; --zand:#3A3528; --zand-donker:#D2AD6A;
    --rood:#E08A72; --rood-licht:#3A2520;
    --blauw:#8FB3D4; --blauw-licht:#1F2B36;
    --schaduw-kaart:0 6px 20px rgba(0,0,0,.4);
    --schaduw-knop:0 10px 24px rgba(0,0,0,.5);
    --schaduw-groen:0 12px 24px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121A16; --pagina:#182119; --kaart:#1C2620; --vlakzacht:#243229;
  --inkt:#EEF2EE; --zacht:#9AA79F; --rand:#2A3630;
  --groen:#1F4D3A; --groen-accent:#6FAE90; --groen-licht:#1F2E27;
  --creme:#2A2A22; --zand:#3A3528; --zand-donker:#D2AD6A;
  --rood:#E08A72; --rood-licht:#3A2520;
  --blauw:#8FB3D4; --blauw-licht:#1F2B36;
  --schaduw-kaart:0 6px 20px rgba(0,0,0,.4);
  --schaduw-knop:0 10px 24px rgba(0,0,0,.5);
  --schaduw-groen:0 12px 24px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---------- 3. de bodem ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--inkt);
  font-family:var(--tekst);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--groen-accent)}
h1,h2,h3,h4{font-family:var(--kop);font-weight:800;font-stretch:75%;
  letter-spacing:-.01em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,7vw,64px)}
h2{font-size:clamp(27px,4.6vw,44px)}
h3{font-size:23px;line-height:1.1}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
.wrap{max-width:1080px;margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px))}
.smal{max-width:720px}
section{padding:var(--r8) 0}
@media (max-width:700px){section{padding:var(--r7) 0}}
.band{background:var(--pagina)}

/* ---------- 4. tekststijlen ---------- */
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zacht);font-weight:600}
.lead{font-size:19px;line-height:1.5;color:var(--zacht);max-width:52ch}
.intro{font-size:18px;color:var(--zacht);max-width:62ch;margin:14px 0 0}
.klein{font-size:14px;line-height:1.45;color:var(--zacht)}
.hand{font-family:var(--hand);font-size:clamp(22px,2.6vw,30px);
  color:var(--groen-accent);line-height:1.1}
.hand-klein{font-family:var(--hand);font-size:19px;color:var(--groen-accent);line-height:1.1}
.tekst{max-width:65ch}

/* ---------- 5. knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--groen);color:var(--knoptekst);text-decoration:none;
  font-family:var(--tekst);font-weight:600;font-size:17px;line-height:1.2;
  padding:16px 26px;min-height:52px;border:0;border-radius:var(--pil);
  box-shadow:var(--schaduw-knop);cursor:pointer;
  transition:transform .2s var(--curve-uit)}
.knop:hover{transform:translateY(-2px)}
.knop svg{width:18px;height:18px;flex:0 0 auto}
.knop-licht{background:var(--creme-vast);color:var(--inkt-op-creme);box-shadow:none}
.knop-stil{background:transparent;color:var(--groen-accent);box-shadow:none;
  border:1.5px solid var(--rand)}
/* Een losse tekstlink is ook een tikdoel: 44 px hoog, met negatieve marge
   zodat hij de regelafstand eromheen niet uit elkaar duwt. */
.ghost{color:var(--groen-accent);text-decoration:underline;
  text-underline-offset:4px;font-weight:600;
  display:inline-block;padding:12px 0;margin:-12px 0;min-height:44px}

/* ---------- 6. iconen ---------- */
/* Een icoon staat altijd in een vakje van groen-licht met hoek-klein; het
   icoon zelf is 18 of 20 px. Nooit een emoji, nooit een gekleurd icoon. */
.ic{color:var(--groen-accent);width:40px;height:40px;border-radius:var(--hoek-klein);
  background:var(--groen-licht);display:grid;place-items:center;flex:0 0 auto}
.ic svg{width:20px;height:20px}
.ic-klein{width:32px;height:32px}
.ic-klein svg{width:18px;height:18px}

/* ---------- 7. kaarten en rasters ---------- */
.kaart{background:var(--kaart);border-radius:var(--hoek-groot);padding:var(--r5);
  box-shadow:var(--schaduw-kaart);min-width:0}
.kaart h3{margin-bottom:8px}
.kaart p{color:var(--zacht);font-size:15px}
.kaart .ic{margin-bottom:14px}
.kaart ul{margin:10px 0 0;padding:0;list-style:none;color:var(--zacht);font-size:14px}
.kaart li{padding:3px 0 3px 18px;position:relative}
.kaart li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;
  border-radius:50%;background:var(--groen-accent)}
.kaart.donker{background:var(--groen);color:var(--knoptekst)}
.kaart.donker h3{color:var(--knoptekst)}
.kaart.donker p,.kaart.donker ul{color:var(--op-groen-zacht)}
.kaart.donker .ic{background:rgba(255,255,255,.12);color:var(--knoptekst)}
.kaart.donker li::before{background:var(--creme-vast)}
.kaart.donker .hand{color:var(--zand-vast)}
.kaart.rij{display:flex;gap:16px;align-items:flex-start}
.kaart.rij .ic{margin-bottom:0}

.raster{display:grid;gap:14px;margin-top:var(--r6)}
.r2{grid-template-columns:1fr 1fr}
.r3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.r3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.r2{grid-template-columns:1fr}}
@media (max-width:560px){.r3{grid-template-columns:1fr}}

/* ---------- 8. chips ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--groen-licht);
  color:var(--groen);border-radius:var(--pil);padding:8px 14px;
  font-size:14px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 9. een citaat ---------- */
.citaat{background:var(--kaart);border-radius:var(--hoek-groot);padding:var(--r5);
  box-shadow:var(--schaduw-kaart);display:flex;flex-direction:column;gap:12px}
.citaat q{font-family:var(--kop);font-weight:800;font-stretch:75%;font-size:24px;
  line-height:1.1;quotes:"\201C" "\201D"}
.citaat p{margin:0;color:var(--zacht);font-size:15px}
.citaat .wie{margin-top:auto;font-size:13px;color:var(--zacht)}
.citaat .wie b{display:block;font-size:15px;color:var(--inkt)}

/* ---------- 10. stappen ---------- */
.stap .n{font-family:var(--kop);font-weight:800;font-stretch:75%;font-size:48px;
  color:var(--groen-accent);line-height:1}

/* ---------- 11. vraag en antwoord ---------- */
.vragen{max-width:720px}
.vragen details{border-bottom:1px solid var(--rand);padding:4px 0}
.vragen summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:12px;padding:14px 0;min-height:44px}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";color:var(--groen-accent);font-size:22px;line-height:1.2}
.vragen details[open] summary::after{content:"\2013"}
.vragen details p{color:var(--zacht);margin:0 0 16px;font-size:15px;max-width:65ch}

/* ---------- 12. betaalbadges ---------- */
/* Alleen de namen, geen logo's van derden: die mogen we niet zomaar plaatsen
   en ze maken de pagina zwaar. De regel eronder noemt Mollie. */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.badges span{background:var(--vlakzacht);color:var(--zacht);border-radius:var(--r2);
  padding:6px 10px;font-size:13px;font-weight:600}
.badges-op-groen span{background:rgba(255,255,255,.12);color:var(--op-groen-zacht)}
.betaalregel{font-size:13px;color:var(--zacht);margin-top:10px}

/* ---------- 13. vertrouwensregel ---------- */
.trust{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:22px;
  font-size:14px;color:var(--zacht)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:16px;height:16px;color:var(--groen-accent);flex:0 0 auto}

/* ---------- 14. de prijskaart ---------- */
.prijs{background:var(--groen);color:var(--knoptekst);border-radius:var(--hoek-xl);
  padding:44px 32px;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;
  align-items:center;box-shadow:var(--schaduw-groen)}
@media (max-width:760px){.prijs{grid-template-columns:1fr;padding:32px 22px}}
.prijs h2{color:var(--knoptekst)}
.prijs p{color:var(--op-groen-zacht)}
.prijs .hand{color:var(--zand-vast)}
.prijs .label{color:var(--op-groen-zacht)}
.prijs ul{list-style:none;padding:0;margin:14px 0 0;color:var(--op-groen-zacht);font-size:15px}
.prijs li{padding:5px 0 5px 28px;position:relative}
.prijs li svg{position:absolute;left:0;top:7px;width:18px;height:18px}
.bedrag{font-family:var(--kop);font-weight:800;font-stretch:75%;font-size:96px;line-height:1}
.garantie{margin-top:14px;display:flex;gap:16px;align-items:flex-start;
  background:var(--kaart);border-radius:var(--hoek-groot);padding:20px 24px;
  box-shadow:var(--schaduw-kaart)}
.garantie p{margin:0;color:var(--zacht);font-size:15px}
.garantie b{display:block;color:var(--inkt);font-size:17px}

/* ---------- 15. let op ---------- */
.letop{background:var(--rood-licht);color:var(--rood);border-radius:var(--hoek);
  padding:16px 20px;margin:18px 0;font-size:15px}
.letop b{display:block;margin-bottom:4px}

/* ---------- 16. de menubalk ---------- */
.top{position:sticky;top:0;z-index:5;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rand)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.top{background:var(--bg)}}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:66px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--kop);font-weight:800;
  font-stretch:75%;font-size:22px;text-decoration:none;color:var(--inkt);min-height:44px}
.logo i{width:32px;height:32px;border-radius:50%;background:var(--groen);
  display:grid;place-items:center;flex:0 0 auto}
.logo i svg{width:18px;height:18px}
.top nav{display:flex;gap:18px;font-size:15px;color:var(--zacht);margin-left:auto}
.top nav a{color:inherit;text-decoration:none;padding:10px 0}
.top nav a:hover{color:var(--groen-accent)}
.top .knop{padding:11px 18px;font-size:15px;box-shadow:none;min-height:44px}
@media (max-width:860px){.top nav{display:none}.top .knop{margin-left:auto}}

/* ---------- 17. de vaste balk onderin (telefoon) ---------- */
.mobbalk{position:fixed;left:0;right:0;bottom:0;z-index:6;display:none;
  align-items:center;justify-content:space-between;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right,0px))
          calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--kaart);border-top:1px solid var(--rand);
  box-shadow:0 -6px 18px rgba(22,33,27,.08)}
.mobbalk b{font-family:var(--kop);font-weight:800;font-stretch:75%;font-size:26px}
.mobbalk small{display:block;color:var(--zacht);font-size:12px;font-weight:400}
.mobbalk .knop{padding:12px 18px;font-size:15px;box-shadow:none}
@media (max-width:760px){.mobbalk{display:flex}body{padding-bottom:84px}}

/* ---------- 18. de voet ---------- */
footer{padding:var(--r7) 0;color:var(--zacht);font-size:14px;border-top:1px solid var(--rand)}
footer .logo{margin-bottom:12px}
footer a{color:var(--zacht);display:inline-block;padding:13px 0;margin:-13px 0}
footer .voetlinks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
footer .voetlinks a{text-decoration:none}
footer .voetlinks a:hover{text-decoration:underline}
@media (max-width:760px){footer{padding-bottom:24px}}

/* ---------- 19. een formulier ---------- */
/* De velden, namen en de Turnstile van het bestaande formulier blijven
   onaangeraakt; dit is alleen hoe ze eruitzien. */
.formulier{background:var(--kaart);border-radius:var(--hoek-groot);padding:var(--r5);
  box-shadow:var(--schaduw-kaart)}
.formulier label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
.formulier input,.formulier textarea,.formulier select{
  width:100%;font-family:var(--tekst);font-size:17px;color:var(--inkt);
  background:var(--vlakzacht);border:1.5px solid var(--rand);
  border-radius:var(--hoek-klein);padding:13px 14px;min-height:48px}
.formulier textarea{min-height:120px;resize:vertical}
.formulier input:focus,.formulier textarea:focus{outline:2px solid var(--groen-accent);
  outline-offset:1px;border-color:var(--groen-accent)}
.formulier button[type="submit"]{margin-top:18px;width:100%;
  background:var(--groen);color:var(--knoptekst);font-family:var(--tekst);
  font-weight:600;font-size:17px;border:0;border-radius:var(--pil);
  padding:16px 26px;min-height:52px;cursor:pointer}
.valstrik{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile{margin-top:16px;min-height:0}

/* ---------- 20. een gidsartikel ---------- */
/* Uit het huisstijlboek, "Een gidsartikel in deze stijl": label, een kop die
   een zin is, een eerste alinea in lead, lopende tekst op 65 tekens,
   tussenkoppen in kop-3. */
.artikel{max-width:720px;margin:0 auto}
.artikel h1{font-size:clamp(32px,5.4vw,46px);margin-bottom:14px}
.artikel .lead{font-size:19px;color:var(--zacht);max-width:none;margin:0 0 24px}
.artikel h2{font-size:24px;line-height:1.1;margin:34px 0 10px}
.artikel h3{font-size:19px;margin:24px 0 8px}
.artikel p,.artikel li{font-size:17px;line-height:1.6}
.artikel p{margin:0 0 16px}
.artikel ul,.artikel ol{margin:0 0 16px;padding-left:22px}
.artikel li{margin-bottom:6px}
.artikel .hand{display:block;margin:24px 0}
.artikel img{border-radius:var(--hoek);margin:18px 0}
.artikel .kruimels{font-size:14px;color:var(--zacht);margin-bottom:18px}
.artikel .kruimels a{color:var(--zacht);text-decoration:none}

/* de vaste Pupwijzer-kaart onderaan een artikel */
.pwkaart{background:var(--groen);color:var(--knoptekst);border-radius:var(--hoek-groot);
  padding:var(--r5);box-shadow:var(--schaduw-groen);margin:var(--r6) 0 0}
.pwkaart h3{color:var(--knoptekst);margin-bottom:8px}
.pwkaart p{color:var(--op-groen-zacht);font-size:15px;margin-bottom:18px}
.pwkaart .knop{background:var(--creme-vast);color:var(--inkt-op-creme);box-shadow:none}

/* ---------- 21. beweging ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.komt-op{animation:rise var(--duur-in) var(--curve-uit) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0ms!important;animation-delay:0ms!important;
    transition-duration:0ms!important}
}

/* ---------- 22. hulpjes ---------- */
.alleen-lezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.midden{text-align:center}
.boven-0{margin-top:0}

/* ============================================================================
   23. DE HERO MET DE APP IN EEN TELEFOONKADER
   Uit de goedgekeurde mockup. Het scherm in de telefoon is nagebouwd in HTML
   (geen schermafbeelding), zodat het in de donkere stand meegaat en op elk
   toestel scherp is.
   ========================================================================= */
.hero-band{padding:var(--r8) 0 56px}
@media (max-width:700px){.hero-band{padding:var(--r6) 0 var(--r7)}}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:32px}}
.hero h1{margin-top:14px}
.hero .lead{margin:18px 0 28px}
.hero .klein{margin:0 0 6px}

.tel{justify-self:center;width:300px;max-width:100%;background:var(--bg);
  border:9px solid #1E2A24;border-radius:40px;padding:18px 14px 16px;
  box-shadow:0 30px 60px rgba(22,33,27,.25);transform:rotate(2deg)}
.telkop{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.telkop b{font-size:14px}
.telkop small{display:block;color:var(--zacht);font-size:11px}
.telav{width:30px;height:30px;border-radius:50%;background:var(--zand);flex:0 0 auto}
/* de taakkaart: groen, 1,5 graad gedraaid, schaduw-groen. Eén per scherm. */
.taakkaart{background:var(--groen);color:var(--knoptekst);border-radius:var(--hoek-groot);
  padding:16px;transform:rotate(-1.5deg);box-shadow:var(--schaduw-groen)}
.taakkaart .label{color:var(--op-groen-zacht);font-size:10px}
.taakkaart h3{color:var(--knoptekst);font-size:21px;margin:6px 0 8px}
.taakkaart p{font-size:13px;margin:0 0 12px;color:var(--op-groen-zacht)}
.taakknop{background:var(--creme-vast);color:var(--inkt-op-creme);border-radius:var(--pil);
  padding:10px;text-align:center;font-weight:600;font-size:13px}
.telblok{background:var(--kaart);border-radius:var(--hoek);padding:12px;margin-top:12px;
  box-shadow:var(--schaduw-kaart)}
.telblok .label{font-size:9px}
.telblok b{font-size:13px;display:block;margin-top:3px}
.telblok small{color:var(--zacht);font-size:11px}
.telblok .hand-klein{font-size:16px}
.balkje{height:6px;border-radius:3px;background:var(--rand);margin-top:8px;overflow:hidden}
.balkje i{display:block;height:100%;width:62%;background:var(--groen-accent);
  transform-origin:left;animation:fillx var(--duur-vul) var(--curve-vul) .3s both}

/* ============================================================================
   24. WAT VAN DE OUDE PAGINA MEEKOMT
   De reviews, het supportformulier, de menubalk en drie kleine blokken staan
   er met hun eigen klassenamen; hun TEKST en hun HTML blijven zoals ze waren
   (de reviews zijn woordelijk dezelfde, het formulier heeft dezelfde velden).
   Hier staat alleen hoe ze er in de nieuwe huisstijl uitzien.
   ========================================================================= */

/* de afwisselende band heette eerst .alt */
section.alt{background:var(--pagina)}

/* de oude knopklassen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--groen);color:var(--knoptekst);text-decoration:none;
  font-family:var(--tekst);font-weight:600;font-size:17px;line-height:1.2;
  padding:16px 26px;min-height:52px;border:0;border-radius:var(--pil);
  box-shadow:var(--schaduw-knop);cursor:pointer;transition:transform .2s var(--curve-uit)}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--groen);color:var(--knoptekst)}
.btn-s{background:transparent;color:var(--groen-accent);box-shadow:none;
  border:1.5px solid var(--rand)}
.sub{color:var(--zacht);font-size:17px;max-width:65ch;margin:10px 0 0}

/* de menubalk */
nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rand)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){nav{background:var(--bg)}}
nav .wrap{display:flex;align-items:center;gap:22px;min-height:66px}
nav .logo{gap:10px}
nav .logo img{width:34px;height:34px}
.merknaam{font-family:var(--kop);font-weight:800;font-stretch:75%;font-size:22px;color:var(--inkt)}
.navlinks{display:flex;gap:18px;font-size:15px;margin-left:auto}
.navlinks a{color:var(--zacht);text-decoration:none;padding:12px 0}
.navlinks a:hover{color:var(--groen-accent)}
.navbuy{display:inline-flex;align-items:center;background:var(--groen);
  color:var(--knoptekst);text-decoration:none;font-weight:600;font-size:15px;
  padding:11px 18px;min-height:44px;border-radius:var(--pil)}
.menuknop{display:none;margin-left:auto;background:var(--vlakzacht);color:var(--inkt);
  border:1.5px solid var(--rand);border-radius:var(--pil);padding:10px 16px;
  min-height:44px;font-family:var(--tekst);font-weight:600;font-size:15px;cursor:pointer}
.menupaneel{border-top:1px solid var(--rand);background:var(--kaart);padding:8px 20px 16px;
  display:flex;flex-direction:column}
/* Het paneel staat dicht met het attribuut hidden. Een display-regel wint van
   hidden, dus zonder deze regel staat het menu open zodra de pagina laadt.
   [GEMETEN 23 okt in de browser] */
.menupaneel[hidden]{display:none}
.menupaneel a{color:var(--inkt);text-decoration:none;padding:14px 0;min-height:48px;
  border-bottom:1px solid var(--rand)}
.menupaneel a:last-child{border-bottom:0}
/* De drijvende menupil hangt rechtsboven, net als op de gidspagina's. Hij
   stond hier eerst in het midden met left:50%; op een gidspagina kreeg hij
   daardoor én left én right en werd hij 172 px breed, dwars over de balk.
   [GEMETEN 23 okt] */
.menupil{position:fixed;right:16px;top:14px;z-index:7;
  display:none;background:var(--groen);color:var(--knoptekst);border:0;
  border-radius:var(--pil);padding:10px 20px;min-height:44px;
  font-family:var(--tekst);font-weight:600;font-size:15px;cursor:pointer;
  box-shadow:var(--schaduw-knop)}
@media (max-width:860px){
  .navlinks{display:none}
  .menuknop{display:inline-flex;align-items:center}
  .navbuy{display:none}
}

/* de drie reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:var(--r6)}
@media (max-width:860px){.revs{grid-template-columns:1fr}}
.rev{background:var(--kaart);border-radius:var(--hoek-groot);padding:var(--r5);
  box-shadow:var(--schaduw-kaart);display:flex;flex-direction:column;gap:12px}
.rev .quote{font-family:var(--kop);font-weight:800;font-stretch:75%;font-size:24px;
  line-height:1.1;margin:0}
.rev .context{margin:0;color:var(--zacht);font-size:15px}
.rev details{margin:0}
.rev summary{cursor:pointer;color:var(--groen-accent);font-weight:600;font-size:15px;
  list-style:none;padding:10px 0;min-height:44px;display:flex;align-items:center}
.rev summary::-webkit-details-marker{display:none}
.rev details p{color:var(--zacht);font-size:15px;margin:0 0 12px}
.rev .who{margin-top:auto;display:flex;align-items:center;gap:12px}
.rev .av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rev .naam{font-weight:600;font-size:15px}
.rev .rol{font-size:13px;color:var(--zacht)}

/* het supportblok */
.steun{display:grid;gap:14px}
.fbknoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
/* Facebook-blauw #1877F2 geeft met witte tekst 4,23:1 en dat is onder AA.
   Een tint donkerder haalt 4,6:1 en blijft herkenbaar. [GEMETEN 23 okt] */
.fb-blauw{background:#1668D6;color:#fff;box-shadow:none}
.fb-licht{background:var(--vlakzacht);color:var(--inkt);box-shadow:none;
  border:1.5px solid var(--rand)}
.fbteken{flex:0 0 auto}
.steunform{background:var(--kaart);border-radius:var(--hoek-groot);padding:var(--r5);
  box-shadow:var(--schaduw-kaart);max-width:560px}
.steunform label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
.steunform input,.steunform textarea{width:100%;font-family:var(--tekst);font-size:17px;
  color:var(--inkt);background:var(--vlakzacht);border:1.5px solid var(--rand);
  border-radius:var(--hoek-klein);padding:13px 14px;min-height:48px}
.steunform textarea{min-height:120px;resize:vertical}
.steunform input:focus,.steunform textarea:focus{outline:2px solid var(--groen-accent);
  outline-offset:1px;border-color:var(--groen-accent)}
.steunform button[type="submit"]{margin-top:18px;width:100%;background:var(--groen);
  color:var(--knoptekst);font-family:var(--tekst);font-weight:600;font-size:17px;
  border:0;border-radius:var(--pil);padding:16px 26px;min-height:52px;cursor:pointer}
.steunform .klein{margin-top:10px}
.steunform .gelukt{background:var(--groen-licht);color:var(--groen);
  border-radius:var(--hoek);padding:18px 20px;font-weight:600}

/* twee lijstjes en het slotblok */
.spullen{margin:var(--r5) 0;padding:0;list-style:none;display:grid;
  grid-template-columns:1fr 1fr;gap:6px 18px;color:var(--zacht);font-size:16px}
@media (max-width:560px){.spullen{grid-template-columns:1fr}}
.spullen li{padding:3px 0 3px 18px;position:relative}
.spullen li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;
  border-radius:50%;background:var(--groen-accent)}
.gidslinks{margin:var(--r5) 0;padding:0;list-style:none;display:grid;gap:4px}
.gidslinks a{color:var(--inkt);text-decoration:none;display:inline-block;
  padding:10px 0;min-height:44px;border-bottom:1px solid var(--rand);width:100%}
.gidslinks a:hover{color:var(--groen-accent)}
.rustig{max-width:720px}

/* de voet */
footer .naam{font-family:var(--kop);font-weight:800;font-stretch:75%;font-size:22px;
  color:var(--inkt)}
.fbvoet{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-top:10px;color:var(--zacht)}