/* Stijl van de productpagina's: dezelfde regels als in index.html (kopbalk, knoppen, Alfa-kaarten, productpagina, Nachtdienst). */
@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-grotesque.woff") format("woff");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans.woff") format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("/fonts/dm-mono-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("/fonts/dm-mono-medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
:root{
  --bg:#fbf6f1; --surface:#fffdfa; --surface-2:#f5ece3; --line:#eadccd;
  --ink:#2a1d14; --muted:#7a6656; --syrup:#e07a1f; --syrup-ink:#fff8f0; --butter:#ffd56b;
  --para:#2f9e6e; --para-s:#d7f1e4; --anna:#6a58cf; --anna-s:#e6e1fb;
  --hamid:#e0677c; --hamid-s:#fde1e5; --lab:#c78e22; --lab-s:#fbedcd; --kat:#3f8fd0; --kat-s:#dcecfa;
  --green:#2f9e6e; --orange:#e8891c; --red:#d8443b;
  /* WCAG 2.2 AA: darker versions for text and icons (4.5:1 text, 3:1 icons) */
  --syrup-text:#9e4f0b; --g-ink:#1d7a50; --o-ink:#a45306; --r-ink:#b8322a;
  --art-ink:#2a1d14;
  --shadow:0 1px 0 rgba(42,29,20,.04),0 10px 30px -12px rgba(42,29,20,.18);
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:22px;
}
*{box-sizing:border-box}
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-bottom:96px}
body{background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
@media (max-width:600px){body{font-size:17px}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--syrup-text);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 19px/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap}
.logo .mark{width:34px;height:34px;flex:none}
.logo-txt{display:flex;flex-direction:column;gap:3px}
.logo-txt small{font:500 11.5px/1.2 var(--f-body);letter-spacing:0;color:var(--muted)}
@media (min-width:641px) and (max-width:1100px){.logo-txt small{display:none}}
@media (max-width:420px){.logo-txt small{font-size:10.5px}}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{white-space:nowrap;font-weight:600;font-size:15px;text-decoration:none;padding:8px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.nav a.tel{font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.nav a.tel:hover{background:none}
.tel .ico{width:38px;height:38px;border-radius:50%;background:var(--surface-2);color:var(--ink);display:grid;place-items:center;flex:none}
.tel .ico svg{width:18px;height:18px}
.badge{display:inline-block;margin-left:6px;padding:5px 9px;border-radius:999px;background:var(--para-s);color:var(--g-ink);font:600 12px/1 var(--f-body);vertical-align:middle}
.nav a:hover{background:var(--surface-2)}
.nav a.on{background:var(--surface-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font:700 16px/1 var(--f-body);text-decoration:none;border:0;cursor:pointer;padding:14px 20px;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--ink);color:var(--bg);box-shadow:0 4px 0 var(--syrup)}
.btn-main:hover{box-shadow:0 6px 0 var(--syrup)}
.btn-soft{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.nav .btn{padding:11px 16px;margin-left:6px}
@media (max-width:1240px){.nav a.tel .num{display:none}}
@media (max-width:1100px){.nav .badge{display:none}.nav a:not(.btn):not(.tel){padding:8px 9px}}
@media (max-width:960px){.nav a[href="#rekenen"]{display:none}}
@media (max-width:820px){.nav a:not(.btn):not(.tel){display:none}}
@media (max-width:640px){.nav .btn,.nav a.tel .num{display:none}}
.textlink{font-weight:700;text-decoration:underline;text-underline-offset:4px;align-self:center;padding:12px 6px;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:420px){.logo span{font-size:16px}.nav .btn{padding:10px 13px;font-size:14px}}
.kicker{font:500 14px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--syrup-text)}
.c-night{color:#f6efe2;background:radial-gradient(ellipse 90% 55% at 85% 112%,rgba(240,154,88,.55),transparent 60%),radial-gradient(ellipse 60% 40% at 10% 105%,rgba(198,98,120,.35),transparent 65%),linear-gradient(180deg,#121732 0%,#221f45 42%,#43305a 78%,#6c4252 100%)}
.u-card.star.c-night{border-color:#2a1d14}
.c-night h3{color:#f6efe2}.c-night .u-price small{color:#cbc1dd}
.c-night .stars,.c-night .stars2{position:absolute;inset:0}
.c-night .stars{opacity:.75;background:radial-gradient(1.6px 1.6px at 8% 14%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 22% 32%,#fff 50%,transparent 52%),radial-gradient(1.8px 1.8px at 37% 9%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 48% 26%,#fff 50%,transparent 52%),radial-gradient(1.4px 1.4px at 63% 6%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 71% 38%,#fff 50%,transparent 52%),radial-gradient(1.6px 1.6px at 92% 30%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 15% 52%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 56% 48%,#fff 50%,transparent 52%)}
.c-night .stars2{background:radial-gradient(2.2px 2.2px at 30% 18%,#ffe9c2 50%,transparent 52%),radial-gradient(2px 2px at 78% 16%,#ffe9c2 50%,transparent 52%),radial-gradient(2px 2px at 86% 52%,#ffe9c2 50%,transparent 52%);animation:u-twinkle 3.6s ease-in-out infinite}
.c-night .moon{position:absolute;top:22px;right:40px;width:40px;height:40px;border-radius:50%;box-shadow:-9px 6px 0 0 #f6e3b4;filter:drop-shadow(0 0 12px rgba(246,227,180,.55))}
.c-night .skyline{position:absolute;right:0;bottom:0;width:62%;height:auto}
@keyframes u-twinkle{0%,100%{opacity:.35}50%{opacity:1}}
footer{border-top:1.5px solid var(--line);padding-block:28px 40px;color:var(--muted);font-size:14px}
footer .wrap{display:grid;gap:28px}

.legal{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;}
.legal-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin-left:auto}
.legal-links a,.tip-btn{color:var(--muted);font:500 14px/1.4 var(--f-body);text-decoration:none}
.legal-links a:hover,.tip-btn:hover{color:var(--ink)}
.tip-btn{background:none;border:0;padding:0;cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
.tipwrap{position:relative;display:inline-block}
.tip{position:absolute;bottom:calc(100% + 10px);right:0;width:250px;padding:12px 14px;border-radius:14px;background:var(--ink);color:var(--bg);font:500 13px/1.45 var(--f-body);box-shadow:0 4px 0 var(--syrup);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s;z-index:5}
.tipwrap:hover .tip,.tip-btn:focus+.tip{opacity:1;visibility:visible;transform:none}
.made{font-size:13px}
@media (max-width:640px){.legal-links{margin-left:0}.tip{right:auto;left:0}}
footer a{font-weight:600}
footer .wrap > span{display:block}
.nd-hero{position:relative;overflow:hidden;border-radius:32px;border:2px solid var(--ink);margin-top:18px;padding:clamp(28px,5vw,56px);min-height:300px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.nd-hero .moon{top:32px;right:56px}
.nd-copy{position:relative;z-index:1;max-width:36em;display:grid;gap:10px}
.nd-copy h1{color:#f6efe2;font-size:clamp(40px,7vw,72px);line-height:1}
.nd-k{color:#cbc1dd}
.nd-hook{color:#f6efe2;font-size:clamp(19px,2.4vw,24px);max-width:24em}
.nd-pill{justify-self:start;background:#ffd56b;color:#2a1d14;font:700 13px/1 var(--f-mono);padding:8px 12px;border-radius:999px;transform:rotate(-2deg)}
.nd-noor{position:relative;z-index:1;width:132px;height:132px}
.nd-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.nd-trust>div{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:18px;display:grid;gap:6px}
.nd-num{font:800 28px/1 var(--f-display)}
.nd-trust span{font-size:15px;color:var(--muted)}
.nd-more{color:#ffd56b;font-weight:700}
.nd-study{margin-top:18px}.nd-study>p{margin-top:10px;max-width:62ch}
.nd-phase{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nd-phase li{border:1.5px solid var(--line);border-radius:18px;padding:14px 16px;display:grid;gap:4px;background:var(--bg)}
.nd-phase b{font:800 17px/1.2 var(--f-display)}
.nd-phase span{font-size:14.5px;color:var(--muted)}
.nd-phase li::before{font:700 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);content:"Volgt"}
.nd-phase li.done::before{content:"Klaar";color:#1d7a50}
.nd-phase li.now::before{content:"Loopt nu";color:var(--syrup)}
.nd-phase li.now{border-color:var(--syrup)}
@media (max-width:760px){.nd-phase{grid-template-columns:1fr}}
.nd-prereg{margin-top:16px;border:1.5px dashed var(--line);border-radius:18px;padding:14px 16px;display:grid;gap:8px}
.nd-prereg ul{margin:0;padding-left:20px;display:grid;gap:6px;max-width:62ch;font-size:15.5px}
.nd-why{margin-top:18px}.nd-why p{margin-top:10px;max-width:62ch}
@media (max-width:860px){.nd-hero{grid-template-columns:1fr}.nd-noor{display:none}.nd-trust{grid-template-columns:1fr}.nd-hero .moon{top:16px;right:22px;width:28px;height:28px;box-shadow:-7px 5px 0 0 #f6e3b4}.nd-copy{padding-top:18px}}
.a-art{position:relative;aspect-ratio:1/1;background:radial-gradient(circle at 50% 46%,#fffdfa 0 26%,transparent 62%),var(--tone-s);border-bottom:2px solid var(--ink)}
.a-art [data-art]{position:absolute;inset:0}
.a-art [data-art] svg{width:100%;height:100%;display:block}
.a-art::before{content:"";position:absolute;inset:9%;border-radius:50%;border:2px dashed color-mix(in srgb,var(--tone) 45%,transparent)}
.a-lvl{position:absolute;top:14px;left:14px;z-index:1;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--bg);padding:7px 10px;border-radius:999px}
.a-spark{position:absolute;width:18px;height:18px;z-index:1;color:var(--tone)}
.a-spark.s1{top:16%;right:12%}.a-spark.s2{top:42%;left:7%;width:12px;height:12px}.a-spark.s3{bottom:30%;right:6%;width:10px;height:10px}
.a-body{padding:22px;display:grid;gap:14px;flex:1;align-content:start}
.a-body h3{font-size:28px;font-weight:800;line-height:1.1}
.a-body .a-who{font:500 12px/1.3 var(--f-mono);color:var(--muted);letter-spacing:.04em;margin-top:-8px}
.a-row b{display:block;font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.a-row p{font-size:16px;line-height:1.5}
.a-price{margin-top:auto;border-top:1.5px dashed var(--line);padding-top:14px;font:800 30px/1 var(--f-display);letter-spacing:-.01em}
.a-star{font:700 22px/1 var(--f-display);color:var(--syrup-text);text-decoration:none;margin-left:3px;vertical-align:top;display:inline-block;min-width:24px;min-height:24px;text-align:center}
.a-star:hover{text-decoration:underline}
.a-star-l{color:var(--butter);font-size:20px}
.a-c-noor{--tone:var(--para);--tone-s:var(--para-s)}
.a-c-hessel{--tone:var(--hamid);--tone-s:var(--hamid-s)}
.a-c-verz{--tone:var(--kat);--tone-s:var(--kat-s)}
.a-c-uma{--tone:var(--anna);--tone-s:var(--anna-s)}
.a-c-lex{--tone:var(--lab);--tone-s:var(--lab-s)}
.a-c-mies{--tone:var(--kat);--tone-s:var(--kat-s)}
.a-c-boer{--tone:#6a8f3a;--tone-s:#e4efd6}
.a-c-oefen{--tone:var(--anna);--tone-s:var(--anna-s)}
.a-c-kompas{--tone:#2A9D8F;--tone-s:#d6efeb}
.a-soon{position:absolute;top:14px;right:14px;z-index:1;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--butter);color:#2a1d14;padding:7px 10px;border-radius:999px}
.a-more{font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.pd{padding-block:40px 24px}
.pd-hero{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:32px;align-items:center;margin-top:18px}
.pd-art{border:2px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:8px 8px 0 var(--tone)}
.pd-hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;letter-spacing:-.03em;margin-top:10px}
.pd-hook{font:600 clamp(19px,2vw,24px)/1.35 var(--f-display);margin-top:12px;max-width:22em}
.pd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:32px}
.pd-box{background:var(--surface);border:1.5px solid var(--line);border-radius:24px;padding:22px}
.pd-box h2{font-size:22px;font-weight:800}
.pd-prob{margin:12px 0 0;padding-left:20px;display:grid;gap:8px}
.pd-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:14px}
.pd-steps li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.pd-steps p{font-size:16px;color:var(--muted)}
.pd-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tone-s);border:2px solid var(--ink);font:800 16px/1 var(--f-display)}
.pd-price{margin-block:24px 48px;border:2px solid var(--ink);border-radius:28px;padding:24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--surface);box-shadow:8px 8px 0 var(--tone)}
.pd-amount{font:800 clamp(34px,4.4vw,48px)/1 var(--f-display);margin-top:6px}
.pd-small{font-size:14px;color:var(--muted);margin-top:6px}
.pd-soonnote{margin-top:8px;font-weight:600}
.a-soon.a-now{background:var(--g-ink);color:#fff}
.pd-nownote{color:var(--g-ink)}
.pd-cta{display:flex;flex-direction:column;gap:10px}
@media (max-width:860px){.pd-hero,.pd-grid,.pd-price{grid-template-columns:1fr}.pd-art{max-width:340px}}
/* alleen op de productpagina's */
.nd-noor{display:block}.nd-noor svg{width:100%;height:100%;display:block}
.crumb{font:500 13px/1 var(--f-mono);color:var(--muted)}.crumb a{color:var(--ink)}
.pnav{display:flex;gap:4px;margin-left:auto;align-items:center}
.pnav a:not(.btn){white-space:nowrap;font-weight:600;font-size:15px;text-decoration:none;padding:8px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.pnav a:not(.btn):hover{background:var(--surface-2)}
@media (max-width:820px){.pnav a:not(.btn){display:none}}
@media (max-width:640px){.logo-txt small{display:none}.pnav .btn{padding:10px 14px;font-size:14px}}
@media (max-width:380px){.logo span{font-size:15px}.logo .mark{width:30px;height:30px}.pnav .btn{padding:9px 11px;font-size:13px}}