@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --inkt:#1d2b53;        /* drager: koppen en tekst */
  --inkt-zacht:#46557d;
  --accent:#ffc23d;      /* geel accent: knoppen en markeringen */
  --accent-donker:#e8a400;
  --koraal:#ff7a59;      /* klein detail */
  --groen:#1f9d6b;
  --rood:#d6453d;
  --papier:#fffaf1;
  --wit:#ffffff;
  --lijn:#e9e2d3;
  --vlak:#f5efe2;
  --radius:18px;
  --schaduw:0 14px 34px -18px rgba(29,43,83,.35);
  --breed:1120px;
  --header-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 18px/1.65 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--inkt);text-decoration-color:var(--accent-donker);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--inkt-zacht)}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;color:var(--inkt);line-height:1.2;margin:0 0 .6em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.4vw,3.2rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.25rem;font-family:"Nunito",sans-serif;font-weight:800}
p{margin:0 0 1em}
.wrap{max-width:var(--breed);margin-inline:auto;padding-inline:20px}
.smal{max-width:760px;margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:absolute;left:-999px;top:8px;background:var(--inkt);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.overslaan:focus{left:8px}

/* Header */
.kop{position:sticky;top:0;z-index:50;background:rgba(255,250,241,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);gap:16px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt);font-weight:800;font-size:1.15rem;white-space:nowrap}
.merk svg{width:36px;height:36px;flex:none}
.merk span b{color:var(--accent-donker)}
.menu{display:flex;align-items:center;gap:22px}
.menu a{text-decoration:none;font-weight:700;font-size:.98rem}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px}
.menu-knop{display:none;background:none;border:2px solid var(--inkt);border-radius:12px;padding:6px 12px;font:inherit;font-weight:800;color:var(--inkt);cursor:pointer}

/* Knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--inkt);font-weight:800;text-decoration:none;border:0;border-radius:999px;padding:12px 24px;font-size:1rem;cursor:pointer;box-shadow:0 10px 22px -10px rgba(232,164,0,.7);transition:transform .35s cubic-bezier(.22,.61,.36,1),background .35s}
.knop:hover{background:#ffcf5c;transform:translateY(-2px);color:var(--inkt)}
.knop-groot{padding:16px 30px;font-size:1.08rem}
.knop-licht{background:var(--wit);box-shadow:none;border:2px solid var(--inkt)}
.knop-licht:hover{background:var(--vlak)}
.menu .knop{padding:9px 18px}

/* Hero */
.hero{padding:56px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.label{display:inline-block;border:1px solid var(--accent-donker);color:var(--inkt);border-radius:999px;padding:6px 16px;font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;background:var(--wit)}
.hero p.sub{font-size:1.2rem;color:var(--inkt-zacht);max-width:34em}
.hero .acties{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-beeld{position:relative}
.hero-beeld .stapel{position:relative;aspect-ratio:4/5;max-width:400px;margin-inline:auto}
.blad{position:absolute;inset:0;background:var(--wit);border-radius:14px;box-shadow:var(--schaduw);padding:26px 24px;border:1px solid var(--lijn)}
.blad:nth-child(1){transform:rotate(-6deg) translate(-18px,10px);background:var(--vlak)}
.blad:nth-child(2){transform:rotate(4deg) translate(16px,4px)}
.blad:nth-child(3){transform:none}
.blad .bladkop{font-family:"Fraunces",serif;font-weight:700;font-size:1.35rem;margin-bottom:6px}
.blad .regel{height:10px;border-radius:6px;background:var(--vlak);margin:10px 0}
.blad .regel.k{width:60%}
.blad .optie{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:700;font-size:.95rem}
.blad .optie i{width:22px;height:22px;border-radius:50%;border:2px solid var(--inkt);flex:none;font-style:normal;font-size:.75rem;display:grid;place-items:center}
.blad .optie.goed i{background:var(--groen);border-color:var(--groen);color:#fff}
.sticker{position:absolute;right:-6px;bottom:28px;background:var(--koraal);color:#fff;border-radius:999px;padding:10px 16px;font-weight:800;transform:rotate(-4deg);box-shadow:var(--schaduw)}

/* Secties */
.sectie{padding:64px 0}
.sectie.vlak{background:var(--vlak)}
.sectie.donker{background:var(--inkt);color:#fff}
.sectie.donker h2,.sectie.donker h3{color:#fff}
.sectie-kop{text-align:center;max-width:720px;margin:0 auto 36px}
.sectie-kop p{color:var(--inkt-zacht)}
.raster{display:grid;gap:22px}
.raster-3{grid-template-columns:repeat(3,1fr)}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:28px 24px;text-align:center;box-shadow:0 2px 0 rgba(29,43,83,.04);transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s}
.kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw)}
.kaart .icoon{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;background:var(--vlak);display:grid;place-items:center}
.kaart .icoon svg{width:28px;height:28px}
.kaart p{color:var(--inkt-zacht);margin:0}
.stap-nr{width:44px;height:44px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-weight:800;margin:0 auto 12px}

/* Product */
.product{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--wit);border:1px solid var(--lijn);border-radius:28px;padding:40px;box-shadow:var(--schaduw)}
.prijs{font-family:"Fraunces",serif;font-size:2.6rem;font-weight:700;line-height:1}
.prijs small{font-family:"Nunito",sans-serif;font-size:1rem;color:var(--inkt-zacht);font-weight:600}
.vinkjes{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}
.vinkjes li{display:flex;gap:10px;align-items:flex-start}
.vinkjes li::before{content:"";flex:none;width:22px;height:22px;margin-top:3px;border-radius:50%;background:var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.koopformulier{margin-top:20px;display:grid;gap:14px}
.akkoord{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--inkt-zacht);text-align:left}
.akkoord input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--inkt)}
.klein{font-size:.88rem;color:var(--inkt-zacht)}
.melding-geannuleerd{background:var(--vlak);border-left:4px solid var(--koraal);padding:12px 16px;border-radius:10px}

/* Artikel */
.artikel{padding:48px 0 64px}
.artikel .smal>h2{margin-top:1.6em}
.artikel ul,.artikel ol{padding-left:1.2em}
.artikel li{margin:.3em 0}
.kruimel{font-size:.9rem;color:var(--inkt-zacht);margin-bottom:18px}
.kruimel a{color:var(--inkt-zacht)}
.tabel-wrap{overflow-x:auto;margin:1.2em 0;border-radius:14px;border:1px solid var(--lijn);background:var(--wit)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:top}
th{background:var(--vlak);font-weight:800}
.cta-blok{background:var(--inkt);color:#fff;border-radius:24px;padding:32px;text-align:center;margin:2.4em 0}
.cta-blok h2{color:#fff;margin-top:0}
.cta-blok p{color:#dfe4f3}
.cta-blok .acties{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* FAQ */
.faq details{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:4px 20px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--inkt-zacht)}

/* Oefentoets */
.toets{max-width:760px;margin-inline:auto}
.toets-vraag{background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:26px;margin:0 0 18px}
.toets-vraag legend{font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt-zacht);padding:0}
.toets-vraag .vraagtekst{font-weight:700;font-size:1.12rem;margin:10px 0 14px}
.toets-tekst{background:var(--vlak);border-radius:14px;padding:18px 20px;margin:12px 0 16px;font-size:.98rem}
.toets-tekst h3{font-family:"Fraunces",serif;font-weight:700;margin-bottom:.4em}
.opties{display:grid;gap:10px}
.optie-label{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--lijn);border-radius:14px;padding:12px 14px;cursor:pointer;background:var(--wit);transition:border-color .3s,background .3s}
.optie-label:hover{border-color:var(--inkt-zacht)}
.optie-label input{margin-top:5px;width:18px;height:18px;accent-color:var(--inkt);flex:none}
.optie-label.goed{border-color:var(--groen);background:#ecf8f2}
.optie-label.fout{border-color:var(--rood);background:#fdeeed}
.uitleg{display:none;margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--vlak)}
.uitleg.zichtbaar,.no-js .uitleg{display:block}
.toets-balk{height:10px;background:var(--lijn);border-radius:99px;overflow:hidden;margin:6px 0 18px}
.toets-balk span{display:block;height:100%;background:var(--accent);width:0;transition:width .6s cubic-bezier(.22,.61,.36,1)}
.toets-nav{display:flex;justify-content:center;gap:12px;margin-top:16px}
.js .toets-vraag{display:none}
.js .toets-vraag.actief{display:block}
.uitslag{display:none;text-align:center}
.uitslag.zichtbaar{display:block}
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}
.score{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:18px}
.score b{display:block;font-family:"Fraunces",serif;font-size:2rem}
.tabel-in-vraag{margin:8px 0 14px}

/* Footer */
.voet{background:#000;color:#cfd3df;padding:48px 0 28px;font-size:.95rem}
.voet a{color:#fff;text-decoration:none}
.voet a:hover{text-decoration:underline}
.voet .kolommen{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.voet h3{color:#fff;font-size:1rem}
.voet ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.voet .merk{color:#fff}
.voet .onder{border-top:1px solid #222;margin-top:32px;padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.85rem;color:#9aa1b5}

.melding{max-width:640px;margin:80px auto;padding:0 20px;text-align:center}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.reveal.zichtbaar{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.stagger>*:nth-child(2){transition-delay:110ms}
.stagger>*:nth-child(3){transition-delay:220ms}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  .hero .wrap,.product{grid-template-columns:1fr}
  .hero{padding-top:36px}
  .hero-beeld .stapel{max-width:320px}
  .raster-3{grid-template-columns:1fr}
  .voet .kolommen{grid-template-columns:1fr}
  .product{padding:28px 22px}
}
@media (max-width:820px){
  .menu-knop{display:inline-block}
  .menu{display:none;position:absolute;left:0;right:0;top:var(--header-h);background:var(--papier);flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid var(--lijn);gap:4px}
  .menu.open{display:flex}
  .menu a{padding:10px 0}
  .menu .knop{margin-top:8px}
  .no-js .menu{display:flex;position:static;flex-direction:row;flex-wrap:wrap;padding:0;border:0}
}
@media (max-width:640px){
  body{font-size:17px}
  .scores{grid-template-columns:1fr}
  .sectie{padding:48px 0}
  .toets-vraag{padding:20px 16px}
  .hero .acties .knop{width:100%}
}
@media print{
  .kop,.voet,.knop,.menu-knop{display:none!important}
  body{background:#fff}
  .reveal{opacity:1;transform:none}
}
.no-js .toets-nav,.no-js [data-teller],.no-js .toets-balk{display:none}
.uitslag,[data-toets],h2[id],.toets-vraag{scroll-margin-top:calc(var(--header-h) + 16px)}
/* Pakketkeuze */
.pakketten{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;align-items:stretch}
.pakket{position:relative;background:var(--wit);border:1px solid var(--lijn);border-radius:24px;padding:32px 28px;display:flex;flex-direction:column;gap:12px;text-align:center;box-shadow:0 2px 0 rgba(29,43,83,.04)}
.pakket h2{margin:0}
.pakket .vinkjes{width:fit-content;margin:6px auto;text-align:left}
.pakket .knop{margin-top:auto}
.pakket-uitgelicht{border:2px solid var(--accent-donker);box-shadow:var(--schaduw)}
.lint{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--inkt);color:#fff;border-radius:999px;padding:6px 16px;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.kassakoopje{display:flex;gap:12px;align-items:flex-start;text-align:left;border:2px dashed var(--accent-donker);background:#fff8e6;border-radius:16px;padding:14px 16px;cursor:pointer;font-size:.95rem}
.kassakoopje input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--inkt)}
.kassakoopje b{display:block;color:var(--inkt)}
@media (max-width:900px){.pakketten{grid-template-columns:1fr}.pakket-uitgelicht{order:-1}}