/* Bouwcockpit-site, ontwerp versie 2 (oktober 2026). Tokens zoals in docs/ontwerp.md en frontend/src/css/00-basis.css:
   gipswit als ondergrond, zwartgrijs (RAL 7021) als inkt, signaalgeel als enige accent, het donkere instrumentenpaneel.
   Letters: Archivo (variabel, breedte 62–125%) voor koppen en cijfers op 116% breedte, Hanken Grotesk voor tekst.
   Geen inline stijlen (de CSP staat ze niet toe): alles wat een maat of kleur heeft, staat hier of als svg-attribuut. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo.e3a28ead.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/hanken-grotesk.e9201edd.woff2) format("woff2")}

:root{
  --paper:#F0F1EE; --sheet:#FFFFFF; --sheet-2:#E6E8E4; --ink:#23282B; --ink-2:#4D555A; --ink-3:#636B70;
  --line:#DADDD8; --line-2:#C2C7C2;
  --signal:#E8B021; --signal-hover:#D9A11B; --signal-ink:#5C4400; --signal-soft:#FBEFC6; --on-signal:#23282B;
  --red:#B3261E; --red-soft:#FBE3DF; --green:#1D6B43; --green-soft:#DCEFE3; --blue:#1E5A88; --blue-soft:#DEE9F3;
  --panel:#23282B; --panel-2:#2D3337; --panel-ink:#EEF0ED; --panel-ink-2:#A3ABAF; --panel-line:#383F43;
  --z-rood:#F0786B; --z-groen:#5FC08A;
  --shadow-1:0 1px 2px rgba(35,40,43,.07);
  --shadow:0 1px 2px rgba(35,40,43,.06),0 22px 44px -22px rgba(35,40,43,.42);
  --f-display:"Archivo","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wide:116%;
  --r-xs:2px; --r:6px; --r-m:10px; --r-l:16px;
  --gut:clamp(16px,4vw,40px);
  --maat:66ch;
  --sectie:clamp(56px,8vw,112px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#16191B; --sheet:#1E2225; --sheet-2:#282D30; --ink:#ECEEEB; --ink-2:#B2B9BC; --ink-3:#8B9397;
  --line:#2F3539; --line-2:#41484D;
  --signal-hover:#F0BD3A; --signal-ink:#F3C84E; --signal-soft:#3A3012; --on-signal:#1B1F21;
  --red:#FF8B7B; --red-soft:#3C1F1B; --green:#7ED3A0; --green-soft:#14291D; --blue:#8DBFE9; --blue-soft:#15273A;
  --panel:#0F1214; --panel-2:#1A1E21; --panel-ink:#ECEEEB; --panel-ink-2:#8F979B; --panel-line:#262B2F;
  --shadow-1:0 1px 0 rgba(0,0,0,.4); --shadow:0 1px 0 rgba(0,0,0,.5),0 24px 48px -24px rgba(0,0,0,.9);
}}

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;min-height:100vh;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-2)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r);text-decoration:none;font-weight:600}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
main:focus{outline:none}
h1,h2,h3,h4{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;line-height:1.04;margin:0;letter-spacing:-.012em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(34px,5vw,60px)}
h2{font-size:clamp(27px,3.3vw,40px);font-weight:760}
h3{font-size:clamp(19px,1.7vw,21px);font-weight:720;font-stretch:106%;line-height:1.2;letter-spacing:-.005em}
h4{font-size:17px;font-weight:700;font-stretch:100%}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em;padding-left:22px}
li{margin:4px 0}
strong,b{font-weight:680}
small{font-size:14px}
.muted{color:var(--ink-3)}
.klein{font-size:14.5px;color:var(--ink-3)}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums}
.lede{font-size:clamp(18px,1.6vw,20.5px);line-height:1.5;color:var(--ink-2);max-width:var(--maat)}
.lede b,.lede strong{color:var(--ink)}
.intro{font-weight:600;font-size:15px;color:var(--ink-2);margin:0 0 14px}
.intro a{text-decoration:none}
.intro a:hover{text-decoration:underline}
.callout{background:var(--signal-soft);color:var(--ink);padding:14px 18px;border-radius:var(--r-m)}
code{font-family:var(--f-mono);font-size:.9em;background:var(--sheet-2);padding:1px 5px;border-radius:var(--r-xs)}
pre{background:var(--sheet-2);padding:12px 14px;border-radius:var(--r);overflow-x:auto;font-size:14px}
pre code{background:none;padding:0}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
blockquote{margin:0 0 1em;padding-left:16px;border-left:3px solid var(--line-2);color:var(--ink-2)}
table{border-collapse:collapse;width:100%;font-size:15.5px;margin:0 0 1.2em}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:650;font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--line-2);background:var(--sheet-2)}
th:first-child{border-top-left-radius:var(--r)}th:last-child{border-top-right-radius:var(--r)}
th.right,td.right{text-align:right;font-family:var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
th.center,td.center{text-align:center}
tfoot td{font-weight:700;border-bottom:0}
.tabel-wrap{overflow-x:auto;margin:0 0 1.2em;-webkit-overflow-scrolling:touch}
.tabel-wrap table{margin:0}
.tabel-wrap>table{min-width:460px}
.bon .tabel-wrap>table{min-width:0}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--paper);font-family:var(--f-body);font-weight:650;font-size:16.5px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .12s,border-color .12s,color .12s}
.btn:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn.primair{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.btn.primair:hover{background:var(--signal-hover);border-color:var(--signal-hover)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink);background:var(--sheet)}
.btn.klein{min-height:40px;padding:8px 15px;font-size:15px}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 14px}
.tekstlink{font-weight:650;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
.tekstlink:hover{text-decoration-color:currentColor}

/* ---------- kop ---------- */
.kop{position:relative;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.kop-in{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;padding-top:12px}
.logo{display:block;flex:none;order:1;padding-block:8px;color:var(--ink);text-decoration:none}
.logo svg{height:21px;width:auto}
.kop-acties{order:2;margin-left:auto;display:flex;align-items:center;gap:16px}
.kop-login{font-weight:600;font-size:15px;text-decoration:none}
.kop-login:hover{text-decoration:underline}
.nav{order:3;flex:1 0 100%;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:8px calc(-1 * var(--gut)) -1px;padding-inline:calc(var(--gut) - 10px);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;padding:11px 10px 10px;border-bottom:3px solid transparent;font-weight:600;font-size:15px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--signal)}
@media (min-width:1100px){
  .kop-in{flex-wrap:nowrap;gap:0 32px;padding-top:0;align-items:stretch}
  .logo{align-self:center;padding-block:20px}
  .logo svg{height:24px}
  .nav{order:2;flex:1 1 auto;margin:0;padding:0;gap:4px;-webkit-mask-image:none;mask-image:none}
  .nav a{padding:0 10px;margin-bottom:-1px}
  .kop-acties{order:3;align-self:center}
}
@media (max-width:420px){.kop-login{display:none}.logo svg{height:17px}.kop-acties .btn.klein{min-height:38px;padding:7px 12px;font-size:14.5px}}

/* ---------- secties ---------- */
.sectie{padding-block:var(--sectie)}
.sectie+.sectie{border-top:1px solid var(--line)}
.sectie.vlak{background:var(--sheet);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sectie.vlak+.sectie{border-top:0}
.sectie-kop{max-width:var(--maat);margin-bottom:clamp(28px,4vw,52px)}
.sectie-kop h2{margin-bottom:16px}
.sectie-kop .lede{margin-bottom:0}
.pagina-kop{padding-block:clamp(40px,6vw,84px) clamp(28px,4vw,52px)}
.pagina-kop h1{margin-bottom:18px;max-width:20ch}
.pagina-kop .lede{max-width:60ch}
.pagina-kop+.sectie{padding-top:clamp(12px,2vw,28px)}
.pagina-kop.met-beeld{display:grid;gap:28px;align-items:end}
.pagina-kop.met-beeld .illustratie{max-width:300px}
@media (min-width:860px){.pagina-kop.met-beeld{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}.pagina-kop.met-beeld .illustratie{justify-self:end;max-width:340px}}
.twee{display:grid;gap:32px}
.twee>div>h2{margin-bottom:16px}
.twee>*,.artikel-lijf>*,.blok>*,.btw-blok>*,.verhaal>*,.reken>*{min-width:0}
@media (min-width:860px){.twee{grid-template-columns:1fr 1fr;gap:64px}.twee.smal-links{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.twee>.sectie-kop{margin-bottom:0}}

/* ---------- illustraties (inline svg, kleuren uit de tokens) ---------- */
.illustratie{color:var(--ink);width:100%;height:auto}
.illustratie .maat{stroke-width:1;stroke:var(--ink-3)}
.illustratie .maattekst{fill:var(--ink-3);font:600 11px var(--f-display);stroke:none}
.illustratie .dun{stroke-width:1.25}
.illustratie .geel{stroke:var(--signal)}
.illustratie .geelvlak{fill:var(--signal)}
.illustratie .opgeel{stroke:#23282B}
.illustratie .opgeel-tekst{fill:#23282B;stroke:none;font:700 9px var(--f-display)}
.illustratie .vlak{fill:var(--sheet)}
.illustratie .beton{fill:var(--sheet-2)}
.illustratie .inkt{fill:currentColor;stroke:none}
.illustratie .paneel{fill:var(--panel);stroke:none}
.illustratie .cijfer{fill:currentColor;font:700 9px var(--f-display);stroke:none}

/* ---------- hero ---------- */
.hero{padding-block:clamp(36px,6vw,80px) clamp(48px,7vw,96px)}
.hero-in{display:grid;gap:40px;align-items:center}
.hero h1{margin-bottom:22px;max-width:15ch}
.hero h1 .regel{display:block}
.hero .lede{max-width:52ch}
.hero .knoppen{margin-top:30px}
.scene{margin:0;position:relative}
.scene-tel{display:none}
.scene figcaption{font-size:14px;color:var(--ink-3);margin-top:16px;max-width:56ch}
@media (min-width:1000px){
  .hero-in{grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:48px}
  .hero h1{font-size:clamp(40px,4.3vw,54px);font-stretch:110%}
  .scene{padding:0 0 24px 0;min-height:540px}
  .scene-tel{display:block;position:absolute;right:0;top:64px;width:min(37%,214px);border-radius:24px;overflow:hidden;border:6px solid var(--panel);box-shadow:var(--shadow);background:var(--panel)}
  .scene-tel img{width:100%}
  .scene .cluster{margin-right:33%}
  .scene figcaption{max-width:62%}
}

/* het instrumentenpaneel: drie meters met de gele naald (svg uit build.mjs) */
.cluster{background:var(--panel);color:var(--panel-ink);border-radius:var(--r-l);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));box-shadow:var(--shadow);overflow:hidden}
.inst{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 18px;gap:2px}
.inst+.inst{border-left:1px solid var(--panel-line)}
.inst svg{width:min(118px,100%);height:auto;margin-bottom:8px;overflow:visible}
.inst .v{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:clamp(21px,2.4vw,30px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--panel-ink)}
.inst .v small{font-size:.5em;font-weight:650;color:var(--panel-ink-2);margin-left:3px;font-stretch:100%;letter-spacing:0}
.inst .l{font-size:13px;font-weight:600;color:var(--panel-ink-2);line-height:1.25;margin-top:4px}
.inst .t{display:none}
.inst .w{display:flex;flex-direction:column;align-items:center;min-width:0}
@media (min-width:1000px){
  .cluster{grid-template-columns:1fr}
  .inst{flex-direction:row;text-align:left;align-items:center;gap:18px;padding:18px 22px}
  .inst+.inst{border-left:0;border-top:1px solid var(--panel-line)}
  .inst svg{width:118px;flex:none;margin:0}
  .inst .w{align-items:flex-start;gap:3px}
  .inst .l{order:-1;margin:0;font-size:13.5px}
  .inst .t{display:block;font-size:13px;line-height:1.4;color:var(--panel-ink-2)}
  .inst .t b{color:var(--panel-ink);font-weight:620}
}
.meter .trk{fill:none;stroke:var(--panel-line);stroke-width:7;stroke-linecap:round}
.meter .zone{fill:none;stroke-width:7;opacity:.85}
.meter .z-rood{stroke:var(--z-rood)}
.meter .z-groen{stroke:var(--z-groen)}
.meter .tick{stroke:var(--panel-ink-2);stroke-width:1.6;stroke-linecap:round}
.meter .naald{stroke:var(--signal);stroke-width:5;stroke-linecap:round}
.meter .naaf{fill:var(--panel-ink)}
.meter .zwaai{transform-box:view-box;transform-origin:66px 70px}
@media (prefers-reduced-motion:no-preference){
  .meter .zwaai{animation:zwaai 1.25s var(--ease) both .25s}
  .inst:nth-child(2) .meter .zwaai{animation-delay:.38s}
  .inst:nth-child(3) .meter .zwaai{animation-delay:.51s}
}
@keyframes zwaai{from{transform:rotate(-75deg)}}

/* ---------- de meetlat: van aanvraag tot betaald ---------- */
.meetlat{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:mark}
.meetlat li{margin:0;position:relative;padding:0 0 26px 34px;counter-increment:mark}
.meetlat li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:var(--signal);border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.meetlat li::after{content:"";position:absolute;left:0;top:11px;width:26px;height:2px;background:var(--ink)}
.meetlat li:first-child::before{border-top:1px solid var(--ink);border-top-left-radius:2px;border-top-right-radius:2px}
.meetlat li:last-child::before{border-bottom:1px solid var(--ink);bottom:0}
.meetlat .stap{display:block;font-family:var(--f-display);font-stretch:var(--wide);font-weight:760;font-size:19px;line-height:1.2}
.meetlat .wat{display:block;font-size:15px;color:var(--ink-2);margin-top:4px;max-width:34ch}
.meetlat li .streepjes{position:absolute;left:0;top:0;bottom:0;width:16px;background:repeating-linear-gradient(180deg,transparent 0 9px,var(--ink) 9px 10px) right/6px 100% no-repeat}
@media (min-width:980px){
  .meetlat{grid-template-columns:repeat(8,minmax(0,1fr));padding-top:0}
  .meetlat li{padding:46px 14px 0 0}
  .meetlat li::before{left:0;right:0;top:0;bottom:auto;width:auto;height:18px;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);border-radius:0}
  .meetlat li:first-child::before{border-left:1px solid var(--ink);border-top-left-radius:2px;border-bottom-left-radius:2px}
  .meetlat li:last-child::before{border-right:1px solid var(--ink);border-top-right-radius:2px;border-bottom-right-radius:2px}
  .meetlat li::after{left:0;top:0;width:2px;height:30px}
  .meetlat li .streepjes{left:0;right:0;top:0;bottom:auto;width:auto;height:18px;background:repeating-linear-gradient(90deg,transparent 0 11px,var(--ink) 11px 12px) top/100% 6px no-repeat}
  .meetlat .stap{font-size:17px}
  .meetlat .wat{font-size:14.5px}
}

/* ---------- functieblokken met schermen ---------- */
.blokken{display:grid;gap:clamp(56px,8vw,112px)}
.blok{display:grid;gap:28px;align-items:center}
.blok h2,.blok h3.groot{font-size:clamp(25px,2.7vw,34px);margin-bottom:14px}
.blok p{max-width:var(--maat)}
.blok-beeld{margin:0}
.blok-beeld>.illustratie{max-width:400px;margin-inline:auto}
.blok-beeld figcaption{font-size:13.5px;color:var(--ink-3);margin-top:10px}
@media (min-width:880px){
  .blok{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
  .blok.wissel{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .blok.wissel .blok-tekst{order:2}
  .blok.smal{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .blok.smal .blok-beeld{justify-self:center}
}
.frame{border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden;background:var(--sheet);box-shadow:var(--shadow)}
.frame img{width:100%}
.frame.tel{max-width:300px;border-radius:26px;border:6px solid var(--panel);background:var(--panel)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:18px;align-items:end}
.duo .frame.tel{max-width:none}
.punten{margin:18px 0 0;padding:0;list-style:none;max-width:var(--maat)}
.punten li{margin:0;padding:9px 0 9px 22px;border-top:1px solid var(--line);position:relative;font-size:16px}
.punten li:last-child{border-bottom:1px solid var(--line)}
.punten li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:2px;background:var(--signal)}
.ook{display:grid;gap:28px 48px;margin-top:8px}
@media (min-width:700px){.ook{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.ook{grid-template-columns:1fr 1fr 1fr}}
.ook>div{padding-top:16px;border-top:2px solid var(--ink)}
.ook h3{font-size:18px;margin-bottom:8px}
.ook p{margin:0;color:var(--ink-2);font-size:16px}
.ook .nieuw{display:inline-block;margin-left:6px;font:700 12px/1 var(--f-body);background:var(--signal-soft);color:var(--signal-ink);padding:4px 7px;border-radius:var(--r-xs);vertical-align:3px}
.inhoudlinks{display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0 0;padding:0;list-style:none}
.inhoudlinks li{margin:0}
.inhoudlinks a{display:inline-flex;align-items:center;min-height:38px;padding:6px 13px;border:1px solid var(--line-2);border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;background:var(--sheet)}
.inhoudlinks a:hover{border-color:var(--ink)}

/* ---------- 9%: een stukje echte offerte ---------- */
.btw-blok{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.btw-blok{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}}
.bon{background:var(--sheet);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:var(--shadow);padding:22px 22px 18px;font-size:15px;position:relative}
.bon::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ink);border-radius:var(--r-m) var(--r-m) 0 0}
.bon-kop{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:12px}
.bon-kop b{font-family:var(--f-display);font-stretch:108%;font-size:17px}
.bon-kop span{color:var(--ink-3);font-size:14px}
.bon table{margin:0;font-size:14.5px}
.bon th,.bon td{padding:9px 6px}
.bon th{background:none;border-bottom:1px solid var(--ink);color:var(--ink-2);font-size:13px}
.bon td.t{text-align:center;white-space:nowrap}
.bon .tarief{display:inline-block;font:700 12px/1 var(--f-display);padding:4px 6px;border-radius:var(--r-xs);background:var(--sheet-2);color:var(--ink-2)}
.bon .tarief.laag{background:var(--signal-soft);color:var(--signal-ink)}
.bon tfoot td{font-weight:500;color:var(--ink-2);border-bottom:0;padding-top:6px;padding-bottom:6px}
.bon tfoot tr:first-child td{padding-top:12px}
.bon tfoot tr.totaal td{color:var(--ink);font-weight:750;border-top:1px solid var(--ink);padding-top:10px;font-size:16px}
.bon .opm{margin:12px 0 0;font-size:13px;color:var(--ink-3)}
.bon td.right,.bon th.right{white-space:nowrap}
.btw-blok h2{margin-bottom:18px}

/* ---------- vakken ---------- */
.vakken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
@media (min-width:640px){.vakken{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vakken li{margin:0;padding:18px 12px 18px 0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-stretch:var(--wide);font-weight:740;font-size:19px}

/* ---------- verhaal ---------- */
.verhaal{display:grid;gap:32px;align-items:center}
@media (min-width:860px){.verhaal{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px}}
.verhaal .illustratie{max-width:360px}
.stelling{font-family:var(--f-display);font-stretch:var(--wide);font-weight:760;font-size:clamp(24px,2.8vw,32px);line-height:1.15;letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance;max-width:24ch}

/* ---------- stappen (echte volgorde) ---------- */
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:stap}
@media (min-width:760px){.stappen{grid-template-columns:repeat(3,1fr);gap:40px}}
.stappen li{margin:0;padding:22px 0 26px;border-top:2px solid var(--ink);counter-increment:stap}
.stappen li::before{content:"Stap " counter(stap);display:block;font-weight:650;font-size:14px;color:var(--ink-3);margin-bottom:10px}
.stappen h3{margin-bottom:8px}
.stappen p{margin:0;color:var(--ink-2)}

/* ---------- pakketten en prijzen ---------- */
.pakketten{display:grid;gap:20px}
@media (min-width:720px){.pakketten{grid-template-columns:1fr 1fr;gap:24px}}
@media (min-width:980px){.pakketten{grid-template-columns:repeat(3,1fr);gap:20px}}
@media (min-width:720px) and (max-width:979px){.pakketten .pakket.pro{grid-column:1 / -1}}
.pakket{border:1px solid var(--line-2);border-radius:var(--r-l);padding:30px 26px 26px;background:var(--sheet);display:flex;flex-direction:column;box-shadow:var(--shadow-1)}
.pakket.team{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),var(--shadow-1)}
.pakket h2,.pakket h3{font-size:26px}
.pakket .voor{color:var(--ink-3);font-size:15.5px;margin:4px 0 22px}
.prijs{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:56px;line-height:1;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;font-variant-numeric:tabular-nums}
.prijs small{font-family:var(--f-body);font-stretch:100%;font-weight:400;font-size:15px;color:var(--ink-2);letter-spacing:0}
.prijs-toelichting{font-size:14.5px;color:var(--ink-3);margin:10px 0 0}
.pakket ul{margin:22px 0 28px;padding:0;list-style:none}
.pakket li{margin:0;padding:8px 0 8px 22px;border-top:1px solid var(--line);font-size:15.5px;position:relative}
.pakket li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.pakket li:last-child{border-bottom:1px solid var(--line)}
.pakket .btn{margin-top:auto;align-self:flex-start}
/* Pro: label bij de naam; vergelijkingstabel op /prijzen/ die ook op de telefoon in één keer past */
.pakket .label{display:inline-block;vertical-align:middle;margin-left:8px;font-family:var(--f-body);font-stretch:100%;font-size:12.5px;font-weight:700;line-height:1;padding:5px 8px;border-radius:var(--r-xs);background:var(--signal-soft);color:var(--signal-ink)}
.tabel-wrap>table.pakket-tabel{min-width:0}
.pakket-tabel th[scope=row]{font-weight:500;font-size:15px;color:var(--ink);background:none;text-align:left}
.pakket-tabel td,.pakket-tabel thead th:not(:first-child){text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.pakket-tabel thead th:not(:first-child){width:15%}
@media (max-width:560px){.pakket-tabel th,.pakket-tabel td{padding:10px 6px;font-size:14px}.pakket-tabel th[scope=row]{font-size:14px}}
[data-periode="maand"] .per-jaar,[data-periode="jaar"] .per-maand{display:none}
.schakel{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:4px;margin:0 0 28px;background:var(--sheet);gap:4px}
.schakel legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.schakel label{position:relative;padding:9px 18px;font-weight:650;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:999px}
.schakel input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.schakel label.actief{background:var(--ink);color:var(--paper)}
.schakel label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.schakel .voordeel{font-size:12.5px;font-weight:700;background:var(--signal);color:var(--on-signal);padding:2px 7px;border-radius:var(--r-xs)}
.betaal{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0;font-size:15.5px}
.betaal li{margin:0;padding-left:18px;position:relative}
.betaal li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px;background:var(--signal)}

/* ---------- veelgestelde vragen ---------- */
.vragenlijst{max-width:var(--maat)}
.twee .vragenlijst{max-width:none}
.vraag{border-top:1px solid var(--line)}
.vraag:last-child{border-bottom:1px solid var(--line)}
.vraag summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-weight:680;font-size:17.5px;line-height:1.35}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";position:absolute;right:6px;top:26px;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .15s}
.vraag[open] summary::after{transform:rotate(-135deg);top:30px}
.vraag summary:hover{color:var(--ink-2)}
.vraag .antwoord{padding:0 0 22px;color:var(--ink-2)}
.vraag .antwoord p{margin:0 0 .6em}
.vraag .antwoord p:last-child{margin:0}

/* ---------- afsluiting ---------- */
.cta{background:var(--panel);color:var(--panel-ink);padding-block:var(--sectie);position:relative;overflow:hidden}
.cta .wrap{position:relative}
.cta h2{color:var(--panel-ink);max-width:20ch;margin-bottom:18px}
.cta p{color:var(--panel-ink-2);max-width:var(--maat);font-size:18px}
.cta .knoppen{margin-top:30px}
.cta .btn.ghost{color:var(--panel-ink);border-color:color-mix(in srgb,var(--panel-ink) 35%,transparent)}
.cta .btn.ghost:hover{background:var(--panel-2);border-color:var(--panel-ink-2)}
.cta a:not(.btn){color:var(--panel-ink);text-decoration-color:var(--panel-ink-2)}
.cta :focus-visible{outline-color:var(--panel-ink)}

/* ---------- voettekst ---------- */
.voet{border-top:1px solid var(--line);padding-block:56px 36px;font-size:15px;background:var(--paper)}
.voet-kolommen{display:grid;gap:36px}
@media (min-width:760px){.voet-kolommen{grid-template-columns:repeat(4,1fr);gap:36px}.voet-merk{grid-column:1 / -1}}
@media (min-width:1080px){.voet-kolommen{grid-template-columns:2fr 1fr 1fr 1fr 1fr}.voet-merk{grid-column:auto}}
.voet-merk svg{color:var(--ink);width:40px;height:40px}
.voet-naam{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:18px;margin:12px 0 8px}
.voet-merk p{max-width:36ch;color:var(--ink-2)}
.voet-merk .voet-naam{color:var(--ink)}
.voet-kop{font-weight:650;font-size:14.5px;color:var(--ink);margin:0 0 10px}
.voet-links ul{list-style:none;margin:0;padding:0}
.voet-links li{margin:0;padding:4px 0}
.voet-links a{text-decoration:none;color:var(--ink-2)}
.voet-links a:hover{text-decoration:underline;color:var(--ink)}
.voet-bedrijf{margin:44px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 22px}
.voet-bedrijf span{white-space:nowrap}

/* ---------- partners ---------- */
.fee{display:grid;gap:20px}
@media (min-width:720px){.fee{grid-template-columns:1fr 1fr;gap:24px}}
.fee-rol{border:1px solid var(--line-2);border-radius:var(--r-l);padding:26px;background:var(--sheet);box-shadow:var(--shadow-1)}
.fee-rol .pct{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:56px;line-height:1;letter-spacing:-.02em;margin:0 0 8px}
.fee-rol h3{margin-bottom:10px}
.fee-rol p{color:var(--ink-2);font-size:16px;margin:0}
.reken{display:grid;gap:24px;background:var(--sheet);border:1px solid var(--line-2);border-radius:var(--r-l);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow-1)}
@media (min-width:900px){.reken{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px}}
.reken fieldset{border:0;margin:0 0 18px;padding:0}
.reken legend{font-weight:680;font-size:16px;margin-bottom:10px;padding:0}
.aantallen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.aantallen label{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.aantallen input{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;color:var(--ink)}
.rollen{display:flex;flex-wrap:wrap;gap:10px}
.rollen label{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;font-weight:600;font-size:15px;background:var(--paper)}
.rollen label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--sheet)}
.rollen input{width:18px;height:18px;accent-color:var(--ink);margin:0}
.uitkomst{background:var(--panel);color:var(--panel-ink);border-radius:var(--r-m);padding:24px;display:flex;flex-direction:column;gap:6px;align-self:stretch;justify-content:center}
.uitkomst .bedrag{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:clamp(36px,4.6vw,52px);line-height:1;font-variant-numeric:tabular-nums;color:var(--panel-ink)}
.uitkomst .uitleg{color:var(--panel-ink-2);font-size:15px;margin:0}
.uitkomst .kwartaal{color:var(--panel-ink);font-weight:600;font-size:16px;margin:8px 0 0}
.formule{margin:14px 0 0;font-size:13.5px;color:var(--ink-3);font-family:var(--f-display);font-variant-numeric:tabular-nums;line-height:1.5}
.downloads{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:var(--maat)}
.downloads li{margin:0}
.downloads a{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;justify-content:space-between;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--sheet);text-decoration:none;font-weight:650}
.downloads a:hover{border-color:var(--ink)}
.downloads small{font-weight:400;color:var(--ink-3)}

/* ---------- formulieren ---------- */
.formulier{max-width:560px;display:grid;gap:18px}
.veld label{font-weight:650;font-size:15px;display:block;margin-bottom:6px}
.inp{width:100%;background:var(--sheet);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 13px;font:inherit;font-size:16.5px;color:inherit;min-height:50px}
textarea.inp{min-height:160px;resize:vertical}
.inp:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.verborgen{display:none}
.contactregels{list-style:none;margin:0;padding:0}
.contactregels li{margin:0;padding:15px 0;border-top:1px solid var(--line);display:grid;gap:2px}
.contactregels li:last-child{border-bottom:1px solid var(--line)}
.contactregels b{font-weight:650;font-size:14.5px;color:var(--ink-3)}

/* ---------- kennisbank ---------- */
.kb-lijst{list-style:none;margin:0;padding:0;display:grid}
.kb-lijst li{margin:0;border-top:1px solid var(--line)}
.kb-lijst li:last-child{border-bottom:1px solid var(--line)}
.kb-lijst a{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 28px;padding:24px 0;text-decoration:none}
@media (min-width:760px){.kb-lijst a{grid-template-columns:120px minmax(0,1fr) auto;align-items:center}}
.kb-lijst .kb-beeld{display:none}
@media (min-width:760px){.kb-lijst .kb-beeld{display:block;width:120px}}
.kb-lijst h2,.kb-lijst h3{font-size:clamp(20px,2vw,25px);margin-bottom:6px}
.kb-lijst .kb-meta{margin:0 0 6px}
.kb-lijst p{margin:0;color:var(--ink-2);max-width:62ch}
.kb-lijst a:hover h2,.kb-lijst a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--signal);text-underline-offset:5px}
.kb-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--ink-3);margin-bottom:8px}
.kb-meta .cat{font-weight:650;color:var(--ink-2)}
.kb-leestijd{font-size:14px;color:var(--ink-3);white-space:nowrap}
.artikel{padding-block:clamp(32px,5vw,64px)}
.artikel-kop{display:grid;gap:24px;align-items:end;margin-bottom:clamp(28px,4vw,44px)}
@media (min-width:860px){.artikel-kop{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}}
.artikel-kop h1{font-size:clamp(32px,4.4vw,52px);margin-bottom:16px;max-width:18ch}
.artikel-kop .illustratie{max-width:280px}
.kruimel{font-size:14.5px;font-weight:600;color:var(--ink-3);margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px}
.kruimel a{color:var(--ink-2);text-decoration:none}
.kruimel a:hover{text-decoration:underline}
.kruimel span[aria-hidden]{color:var(--line-2)}
.artikel-lijf{display:grid;gap:40px}
@media (min-width:1000px){.artikel-lijf{grid-template-columns:minmax(0,1fr) 260px;gap:64px;align-items:start}}
.artikel-tekst{max-width:68ch;font-size:18px;line-height:1.6}
.artikel-tekst h2{font-size:clamp(23px,2.4vw,29px);margin:44px 0 14px;scroll-margin-top:16px}
.artikel-tekst h3{font-size:19px;margin:30px 0 8px}
.artikel-tekst a{color:var(--blue);text-decoration-color:var(--blue)}
.artikel-tekst blockquote{border:0;padding:18px 22px;margin:0 0 28px;background:var(--signal-soft);color:var(--ink);border-radius:var(--r-m);font-size:17px}
.artikel-tekst blockquote p{margin:0 0 .5em}
.artikel-tekst blockquote ul{margin:.3em 0 0;padding-left:20px}
.artikel-tekst li{margin:6px 0}
.artikel-tekst table{font-size:15.5px}
.artikel-tekst h2#bronnen,.artikel-tekst h2#bronnen ~ ul{font-size:15.5px}
.artikel-tekst h2#bronnen{font-size:21px}
.artikel-tekst h2#bronnen ~ ul{padding-left:20px;color:var(--ink-2)}
.artikel-zij{position:relative}
@media (min-width:1000px){.artikel-zij{position:sticky;top:20px}}
.artikel-zij .inhoudsopgave{margin:0 0 24px}
.zij-cta{background:var(--panel);color:var(--panel-ink);border-radius:var(--r-l);padding:22px}
.zij-cta p{color:var(--panel-ink-2);font-size:15px}
.zij-cta b{display:block;color:var(--panel-ink);font-family:var(--f-display);font-stretch:108%;font-size:18px;margin-bottom:6px}
.zij-cta .btn{margin-top:14px;width:100%}
.nagekeken{font-size:14.5px;color:var(--ink-3);margin-top:36px;padding-top:16px;border-top:1px solid var(--line)}
.gerelateerd{margin-top:clamp(40px,6vw,72px)}
.gerelateerd h2{font-size:24px;margin-bottom:12px}

/* ---------- vergelijk ---------- */
.tabel-wrap>table.vergelijk{min-width:760px}
.vergelijk th{width:26%}
.vergelijk th:first-child{width:22%}
.vergelijk td{font-size:15px;color:var(--ink-2)}
.vergelijk td b{display:block;color:var(--ink);font-weight:650;margin-bottom:2px}
.vergelijk td:first-child{font-weight:650;color:var(--ink)}
.vergelijk td.cockpit{background:color-mix(in srgb,var(--signal-soft) 45%,transparent)}
.vergelijk th.cockpit{background:var(--signal);color:var(--on-signal)}

/* ---------- veiligheid en nieuw ---------- */
.feiten{display:grid;gap:0;margin:0}
.feit{display:grid;gap:6px 40px;padding:26px 0;border-top:1px solid var(--line)}
.feit:last-child{border-bottom:1px solid var(--line)}
@media (min-width:860px){.feit{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.feit dt{font-family:var(--f-display);font-stretch:var(--wide);font-weight:760;font-size:20px;line-height:1.2}
.feit dd{margin:0;color:var(--ink-2);max-width:var(--maat)}
.feit dd p{margin:0 0 .7em}
.feit dd ul{margin:.4em 0 0}
.release{display:grid;gap:24px}
@media (min-width:900px){.release{grid-template-columns:200px minmax(0,1fr);gap:48px}}
.release-datum{font-family:var(--f-display);font-stretch:var(--wide);font-weight:780;font-size:22px;line-height:1.1}
.release-datum small{display:block;font-family:var(--f-body);font-stretch:100%;font-weight:600;font-size:14px;color:var(--ink-3);margin-top:6px}
.release-lijst{list-style:none;margin:0;padding:0}
.release-lijst li{margin:0;padding:20px 0;border-top:1px solid var(--line);display:grid;gap:4px}
.release-lijst li:last-child{border-bottom:1px solid var(--line)}
.release-lijst h3{font-size:19px}
.release-lijst p{margin:0;color:var(--ink-2);max-width:var(--maat)}

/* ---------- juridisch ---------- */
.juridisch{max-width:calc(var(--maat) + 2 * var(--gut));padding-block:clamp(32px,5vw,64px)}
.juridisch-kop{margin-bottom:28px}
.juridisch h1{font-size:clamp(30px,4vw,46px);margin-bottom:12px}
.juridisch-tekst h2{font-size:clamp(22px,2.4vw,27px);margin:42px 0 12px}
.juridisch-tekst h3{font-size:19px;margin:28px 0 8px}
.juridisch-tekst h4{font-size:17px;margin:20px 0 6px}
.juridisch-tekst a{color:var(--blue);text-decoration-color:var(--blue)}
.juridisch-tekst table{font-size:15px}
.inhoudsopgave{border:1px solid var(--line);border-radius:var(--r-m);padding:16px 20px;margin-bottom:32px;background:var(--sheet);font-size:15px}
.inhoudsopgave p{font-weight:650;font-size:14.5px;color:var(--ink-3);margin:0 0 8px}
.inhoudsopgave ul{margin:0;padding:0;list-style:none}
.inhoudsopgave li{padding:3px 0;margin:0}
.inhoudsopgave a{text-decoration:none;color:var(--ink-2)}
.inhoudsopgave a:hover{text-decoration:underline;color:var(--ink)}

/* ---------- leeg (404, bedankt) ---------- */
.leeg{padding-block:clamp(48px,9vw,112px);display:grid;gap:32px;align-items:center}
@media (min-width:860px){.leeg{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px}}
.leeg h1{margin-bottom:16px}
.leeg .illustratie{max-width:320px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}}
@media print{.kop,.voet,.cta,.zij-cta,.skip{display:none}body{background:#fff;color:#000}}
/* zeven items in de navigatie: tussen 1100 en 1220 px iets compacter, zodat ze er allemaal op passen */
@media (min-width:1100px) and (max-width:1219px){.nav{gap:2px}.nav a{padding:0 6px;font-size:14px}}

/* /ontwerp/: een stuk van de zaaglijst (tabel en zaagplan als svg) */
.zl-voorbeeld{display:grid;gap:20px;margin-top:22px}
.zl-voorbeeld>*{min-width:0}
@media (min-width:980px){.zl-voorbeeld{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.zl-tabel{width:100%;border-collapse:collapse;font-size:15px}
.zl-tabel caption{text-align:left;font-weight:700;margin-bottom:8px}
.zl-tabel td,.zl-tabel th{padding:7px 10px;border-bottom:1px solid var(--line)}
.zl-tabel .r{text-align:right;font-variant-numeric:tabular-nums}
.zl-plan p{margin:0 0 10px}
.zl-svg{display:block;width:100%;height:auto}
.zl-svg-smal{display:none}
@media (max-width:640px){.zl-svg-breed{display:none}.zl-svg-smal{display:block}}
.zl-svg .zl-d{fill:var(--signal-soft);stroke:var(--line-2)}
.zl-svg .zl-r{fill:var(--sheet-2)}
.zl-svg .zl-o{fill:none;stroke:var(--ink-3)}
.zl-svg text{font-family:inherit;font-size:22px;fill:var(--ink)}
.zl-svg .zl-a{font-weight:700}
.zl-svg .zl-l{fill:var(--ink-2)}