/* ═══════════════════════════════════════════════════════════════════
   Montisoro — Verzuimcalculator · calculator.css
   Mobile-first · WCAG-AA fundament · brand-consistent
   Productie — gedeelde calculatorstijl (NL + EN).
═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --bg:#13100D; --bg-r:#1A1410; --bg-mid:#1C1814; --bg-deep:#0D0905;
  --bg-page:#F4F2EF; --bg-card:#ffffff;
  --orange:#E8592B; --orange-hover:#C8461D; --orange-tint:#FAE8E1; --orange-dim:rgba(232,89,43,0.10);
  --white:#FFFFFF; --off:#F0EDE8;
  /* contrast-veilige muted tinten (≥4.5:1 op hun achtergrond) */
  --muted-d:rgba(240,237,232,0.82); --muted-d-2:rgba(240,237,232,0.66);
  --div-d:rgba(240,237,232,0.12); --div-d-2:rgba(240,237,232,0.18);
  --ink:#1A1512; --ink-soft:#52493F; --ink-mute:#6E6359;
  --border-l:rgba(26,21,18,0.12); --border-l-2:rgba(26,21,18,0.20);
  --line-soft:rgba(26,21,18,0.08);
  --good:#1F7A4D; --good-bg:rgba(31,122,77,0.10); --good-bd:rgba(31,122,77,0.30);
  --warn:#B45309; --warn-bg:rgba(232,89,43,0.10); --warn-bd:rgba(232,89,43,0.32);
  --bad:#A12C2C; --bad-bg:rgba(161,44,44,0.10); --bad-bd:rgba(161,44,44,0.30);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --focus:0 0 0 3px rgba(232,89,43,0.45);
  /* ── systeem-tokens (juni 2026) ── */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --text-2xs:10px;--text-xs:11px;--text-sm:12px;--text-base:13px;--text-md:14px;--text-lg:16px;--text-xl:18px;--text-2xl:20px;
  --radius-sm:8px;--radius-md:10px;--radius-lg:12px;--radius-xl:16px;--radius-pill:100px;
  --border:1.5px;--container:1160px;
  --shadow-1:0 1px 4px rgba(0,0,0,.18);--shadow-2:0 16px 40px -24px rgba(0,0,0,.5);
  --leading-tight:1.2;--leading-snug:1.45;--leading-normal:1.6;--leading-relaxed:1.7;
}

html,body{font-family:var(--sans);background:var(--bg);color:var(--off);-webkit-font-smoothing:antialiased;line-height:var(--leading-normal);}
body{padding-top:60px;}
img{max-width:100%;display:block;}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px;}
/* tekstvelden zitten in een container met eigen focus-ring → geen dubbele oranje gloed binnenin */
.b-numfield input:focus-visible,.b-form .f-input input:focus-visible{box-shadow:none;border-radius:0;}

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--orange);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);font-weight:600;font-size:var(--text-md);transition:top .2s;}
.skip:focus{top:12px;}

/* (banner-CSS verwijderd — uniform .hero-statement via shell.css) */

/* ── WORKSPACE ── */
.b-workspace{background:var(--bg-page);padding:18px 14px 56px;}
.b-grid{max-width:var(--container);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-4);}

/* OUTPUT CARD (dark) — komt eerst op mobiel */
.b-output{position:relative;background:var(--bg);border:1px solid var(--div-d);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-2);}
.b-output-in{position:relative;z-index:1;padding:22px 20px 20px;}
.b-out-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.b-out-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--orange);}
.b-out-eyebrow::before{content:'';width:18px;height:1.5px;background:var(--orange);}
.b-chip{font-size:var(--text-xs);font-weight:500;color:var(--muted-d-2);border:1px solid var(--div-d);border-radius:100px;padding:4px 10px;}

.b-result{font-family:var(--sans);font-weight:700;font-size:clamp(44px,13vw,72px);line-height:.95;letter-spacing:-.03em;color:#fff;display:flex;align-items:baseline;gap:5px;margin-bottom:10px;font-feature-settings:"tnum";}
.b-result .cur{color:var(--orange);font-style:normal;font-size:.5em;font-weight:400;order:1;}
.b-result .unit{font-size:.30em;font-weight:500;color:var(--muted-d-2);font-family:var(--sans);letter-spacing:0;}
.b-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--text-base);color:var(--muted-d);margin-bottom:18px;}
.b-sub b{color:#fff;font-weight:600;font-family:var(--sans);font-feature-settings:"tnum";}
.b-delta{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-xs);font-weight:600;color:var(--orange);padding:3px 9px;background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:100px;}
.b-delta.below{color:#86D6A6;background:rgba(31,122,77,.18);border-color:rgba(31,122,77,.40);}
.b-verzpct{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin:-4px 0 18px;padding-bottom:15px;border-bottom:1px solid var(--div-d);}
.b-verzpct .vp-val{font-family:var(--sans);font-weight:700;font-size:clamp(44px,13vw,72px);line-height:.95;letter-spacing:-.03em;color:#fff;font-feature-settings:"tnum";display:inline-flex;align-items:baseline;gap:3px;}
.b-verzpct .vp-val .pct{color:var(--orange);font-style:normal;font-size:.5em;font-weight:400;letter-spacing:0;}
.b-verzpct .vp-lbl{font-size:var(--text-base);color:var(--muted-d);}

/* blanco-status hint (toont zolang FTE + brutoloon niet ingevuld zijn) */
.b-empty-hint{display:none;align-items:center;gap:9px;font-size:var(--text-sm);color:var(--muted-d);background:rgba(232,89,43,.07);border:1px solid var(--warn-bd);border-radius:var(--radius-md);padding:11px 13px;margin-bottom:16px;line-height:1.5;}
.b-empty-hint svg{width:16px;height:16px;color:var(--orange);flex-shrink:0;}
.b-output.is-empty .b-empty-hint{display:flex;}
/* neutraliseer de delta-badge in de blanco-status (\u2014 hoort niet oranje te ogen) */
.b-output.is-empty .b-delta{background:transparent;border-color:var(--div-d);color:var(--muted-d-2);}

/* CFO-eerlijke breakdown */
.b-cfo{border:1px solid var(--div-d);border-radius:var(--radius-lg);padding:14px 14px 12px;margin-bottom:var(--space-4);background:rgba(240,237,232,0.02);}
.b-cfo-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:7px 0;font-size:var(--text-base);}
.b-cfo-row + .b-cfo-row{border-top:1px solid var(--div-d);}
.b-cfo-row .lbl{color:var(--muted-d);display:flex;align-items:center;gap:6px;}
.b-cfo-row .val{font-family:var(--sans);font-weight:600;color:#fff;font-feature-settings:"tnum";white-space:nowrap;}
.b-cfo-row.is-core .lbl{color:var(--off);font-weight:500;}
.b-cfo-row.is-core .val{color:var(--orange);}
.b-cfo-row.is-total{padding-top:9px;}
.b-cfo-row.is-total .lbl,.b-cfo-row.is-total .val{font-size:var(--text-md);}

.b-bar{display:flex;height:6px;border-radius:100px;overflow:hidden;background:rgba(240,237,232,.06);margin-bottom:10px;}
.b-bar.b-bar-in{margin:14px 0 0;height:5px;}
.b-bar > span{display:block;transition:width .35s ease;}
.b-seg-loon{background:var(--orange);} .b-seg-voord{background:#C8824A;} .b-seg-verz{background:rgba(240,237,232,.32);}
.b-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--text-sm);color:var(--muted-d-2);}
.b-legend span{display:inline-flex;align-items:center;gap:6px;}
.b-legend i{width:7px;height:7px;border-radius:2px;display:block;}
.b-legend .l-loon i{background:var(--orange);} .b-legend .l-voord i{background:#C8824A;} .b-legend .l-verz i{background:rgba(240,237,232,.32);}
.b-legend b{color:var(--off);font-weight:600;font-feature-settings:"tnum";}

.b-divider{height:1px;background:var(--div-d);margin:16px 0 6px;}
.b-kpis{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
.b-kpi{border:none;background:transparent;border-top:1px solid var(--div-d);border-radius:0;padding:13px 0 12px;}
.b-kpi .k-lbl{font-size:var(--text-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d-2);margin-bottom:7px;}
.b-kpi .k-val{font-family:var(--sans);font-weight:600;font-size:var(--text-2xl);color:#fff;line-height:1;font-feature-settings:"tnum";display:flex;align-items:baseline;gap:3px;}
.b-kpi .k-val .cur{color:var(--orange);font-style:italic;font-size:.65em;}
.b-kpi .k-val small{font-size:.5em;font-weight:500;color:var(--muted-d-2);font-family:var(--sans);}
.b-kpi .k-sub{font-size:var(--text-xs);color:var(--muted-d-2);margin-top:5px;line-height:var(--leading-snug);}

/* teaser: risico (live op scherm — sluit "scherm < pdf"-gat) */
.b-risk-teaser{margin-top:0;border:none;background:transparent;border-top:1px solid var(--div-d);border-radius:0;padding:14px 0 2px;display:flex;align-items:center;gap:var(--space-3);}
.b-risk-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0;background:var(--risk-col,var(--orange));box-shadow:0 0 0 4px var(--risk-soft,rgba(232,89,43,.16));transition:background .35s ease,box-shadow .35s ease;}
.b-risk-dot.pulse{animation:riskPulse .6s cubic-bezier(.16,1,.3,1);}
@keyframes riskPulse{0%{transform:scale(1)}35%{transform:scale(1.65)}100%{transform:scale(1)}}
.b-risk-teaser .rt-lbl{font-size:var(--text-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d-2);}
.b-risk-teaser .rt-val{font-family:var(--sans);font-weight:600;font-size:var(--text-lg);color:var(--risk-col,#fff);transition:color .35s ease;}
.b-risk-teaser .rt-val.flash{animation:riskFlash .6s ease;}
@keyframes riskFlash{0%{opacity:.3}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.b-risk-dot.pulse,.b-risk-teaser .rt-val.flash{animation:none;}}

/* ── WIZARD CARD (light) ── */
.b-wizard{background:var(--bg-card);border:1px solid var(--border-l);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;}

/* stepper — eigen kaart; full-width band op desktop, compacte progress-bar daaronder */
.b-stepper{background:var(--bg-card);border:1px solid var(--border-l);border-radius:var(--radius-xl);padding:16px 18px;}
.b-stepper ol{list-style:none;display:flex;gap:0;align-items:flex-start;}
.b-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;text-align:center;}
.b-step .step-btn{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px 4px;border-radius:var(--radius-sm);width:100%;}
.b-step:not(:last-child)::after{content:'';position:absolute;top:15px;left:calc(50% + 14px);width:calc(100% - 28px);height:2px;background:var(--line-soft);}
.b-step.is-done:not(:last-child)::after{background:var(--orange);}
.b-step .circle{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;background:#fff;border:var(--border) solid var(--border-l-2);color:var(--ink-mute);font-feature-settings:"tnum";transition:all .2s;}
.b-step.is-active .circle{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 0 4px rgba(232,89,43,.16);}
.b-step.is-done .circle{background:var(--orange);border-color:var(--orange);color:#fff;}
.b-step .name{font-size:var(--text-base);color:var(--ink-mute);font-weight:500;line-height:1.25;max-width:120px;}
.b-step.is-active .name{color:var(--orange);font-weight:600;}
.b-step .step-btn:focus-visible{box-shadow:var(--focus);}

/* step panels */
.b-steps{position:relative;}
.b-panel{display:none;padding:24px 18px 20px;}
.b-panel.is-active{display:block;}
@media(prefers-reduced-motion:no-preference){.b-panel.is-active{animation:fade .4s cubic-bezier(.16,1,.3,1);}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.b-panel-head{display:flex;align-items:center;gap:11px;margin-bottom:6px;}
.b-panel-head h2{font-family:var(--sans);font-weight:600;font-size:var(--text-2xl);color:var(--ink);letter-spacing:-.01em;line-height:var(--leading-tight);}
/* mobiel: staptitel iets kleiner zodat titel + tab (Verplicht/Optioneel) + "i" op één regel passen */
@media(max-width:560px){
  .b-panel-head{gap:8px;}
  .b-panel-head h2{font-size:var(--text-lg);}
  .b-panel-head h2 .b-steptag{margin-left:8px;}
}
.b-panel-lead{font-size:var(--text-base);color:var(--ink-soft);font-weight:300;line-height:var(--leading-normal);margin-bottom:16px;}
/* 3D-elevatie op beide donkere kaders bij het resultaat (gelaagde schaduw + fijne lichtrand bovenaan) */
body.calc-revealed #bMain .b-output,
body.calc-flow-d.calc-revealed #bMain #bGate{
  box-shadow:0 28px 66px -24px rgba(0,0,0,.62),0 10px 24px -10px rgba(0,0,0,.42),inset 0 1px 0 rgba(240,237,232,.07) !important;
}
/* hero credibility-anker (echte feiten, boven de vouw) */
.hs-proof{margin-top:16px;font-size:14px;color:rgba(240,237,232,.72);letter-spacing:.01em;}
.hs-proof b{color:#fff;font-weight:600;}
/* mobiel: compactere reveal-kolom (kortere scroll naar het formulier) */
@media(max-width:640px){
  #bGate .b-gate-inner{gap:16px !important;}
  .b-report-intro{margin-bottom:10px;}
  .b-report-list li{margin-bottom:8px;}
  .b-proof{margin:2px 0 16px;padding:12px 14px;}
}

/* field group */
.b-field{margin-bottom:var(--space-5);}
.b-field:last-child{margin-bottom:0;}
.b-flabel{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);margin-bottom:10px;}
.b-flabel .b-numfield{width:100%;}
.b-flabel .lab{font-size:var(--text-md);color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:7px;}
.b-info{width:17px;height:17px;border-radius:50%;border:1px solid var(--border-l-2);color:var(--ink-mute);display:inline-grid;place-items:center;font-size:var(--text-2xs);font-weight:700;cursor:help;background:transparent;font-style:italic;font-family:var(--serif);position:relative;}
.b-info:hover,.b-info:focus-visible,.b-info.is-open{border-color:var(--orange);color:var(--orange);}
.b-info[data-tip]:hover::after,.b-info[data-tip]:focus-visible::after,.b-info[data-tip].is-open::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:220px;background:var(--bg);color:var(--off);font-family:var(--sans);font-style:normal;font-weight:400;font-size:var(--text-sm);line-height:1.5;letter-spacing:0;padding:10px 12px;border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:20;text-align:left;}

/* manuele invoer — duidelijke veld-affordance */
.b-numfield{display:inline-flex;align-items:center;gap:6px;border:var(--border) solid var(--border-l-2);border-radius:var(--radius-md);background:#fff;padding:8px 12px;transition:border-color .15s,box-shadow .15s;min-width:120px;cursor:text;}
.b-numfield:hover{border-color:var(--ink-mute);}
.b-numfield:focus-within{border-color:var(--orange);box-shadow:var(--focus);}
.b-numfield .pre{color:var(--ink-mute);font-size:var(--text-md);font-weight:600;}
.b-numfield input{border:0;outline:0;font:inherit;font-weight:700;color:var(--ink);text-align:right;background:transparent;font-feature-settings:"tnum";width:100%;min-width:46px;}
.b-numfield .suf{color:var(--ink-mute);font-size:var(--text-sm);font-weight:500;white-space:nowrap;min-width:38px;}
.b-numfield .pencil{width:14px;height:14px;color:var(--ink-mute);flex-shrink:0;}
.b-numfield:focus-within .pencil{color:var(--orange);}

/* sliders — native, toegankelijk */
.b-slider{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;margin:0;}
.b-slider::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--orange) 0%,var(--orange) var(--p,50%),rgba(26,21,18,.10) var(--p,50%),rgba(26,21,18,.10) 100%);}
.b-slider::-moz-range-track{height:6px;border-radius:999px;background:rgba(26,21,18,.10);}
.b-slider::-moz-range-progress{height:6px;border-radius:999px;background:var(--orange);}
.b-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--border-l);box-shadow:var(--shadow-1),inset 0 0 0 5px var(--orange);margin-top:-9px;transition:box-shadow .15s;}
.b-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--border-l);box-shadow:var(--shadow-1),inset 0 0 0 5px var(--orange);}
.b-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus),inset 0 0 0 5px var(--orange);}
.b-slider:focus-visible::-moz-range-thumb{box-shadow:var(--focus),inset 0 0 0 5px var(--orange);}
.b-slider-meta{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--ink-mute);font-feature-settings:"tnum";margin-top:-2px;}
.b-help{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.55;margin-top:var(--space-2);font-weight:300;}

/* split — toegankelijke range + twee leesbare uitkomsten + bewerkbaar % */
.b-split-readouts{display:flex;justify-content:space-between;gap:var(--space-3);margin-bottom:6px;}
.b-split-readouts .ro{flex:1;border:1px solid var(--line-soft);border-radius:var(--radius-md);padding:10px 12px;background:var(--bg-page);}
.b-split-readouts .ro .ro-lbl{font-size:var(--text-xs);color:var(--ink-mute);font-weight:500;margin-bottom:3px;}
.b-split-readouts .ro .ro-val{font-family:var(--sans);font-weight:600;font-size:var(--text-xl);color:var(--ink);font-feature-settings:"tnum";}
.b-split-readouts .ro.arb{border-color:var(--warn-bd);}
.b-split-readouts .ro.bed{border-color:var(--border-l-2);}
.b-split-pct{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:var(--space-2);font-size:var(--text-base);color:var(--ink-soft);}
.b-split-pct .a{color:var(--orange);font-weight:600;}

/* segmented toggle (verzuim mode) */
.b-seg{display:inline-flex;background:var(--bg-page);border:1px solid var(--border-l);border-radius:var(--radius-md);padding:3px;gap:3px;}
.b-seg button{border:none;background:transparent;font:inherit;font-size:var(--text-base);font-weight:600;color:var(--ink-soft);padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;}
.b-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10);}
.b-seg button:focus-visible{box-shadow:var(--focus);}

/* per-kost: arbeider / bediende / beide — weegt mee in de berekening */
.b-grp-hint{font-size:var(--text-sm);color:var(--ink-mute);margin:0 0 var(--space-4);line-height:var(--leading-snug);}
.b-fieldrow{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.b-fieldrow .b-numfield{flex:1 1 150px;width:auto;}
.b-grp{display:inline-flex;background:var(--bg-page);border:1px solid var(--border-l);border-radius:var(--radius-md);padding:3px;gap:3px;flex:0 0 auto;}
.b-grp button{border:none;background:transparent;font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;}
.b-grp button:hover{color:var(--orange);}
.b-grp button.on{background:var(--orange);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.10);}
.b-grp button.on:hover{color:#fff;}
.b-grp button:focus-visible{box-shadow:var(--focus);}

.b-quickbtn{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-base);font-weight:600;color:var(--orange);background:var(--orange-dim);border:1px solid var(--warn-bd);border-radius:var(--radius-md);padding:9px 14px;cursor:pointer;font-family:var(--sans);transition:background .15s;}
.b-quickbtn:hover{background:rgba(232,89,43,.16);}
.b-quickbtn:focus-visible{box-shadow:var(--focus);}
.b-quickbtn svg{width:15px;height:15px;}

/* disclosure (verfijn per categorie) */
.b-disclosure{margin-top:var(--space-4);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;}
.b-disclosure > summary{list-style:none;cursor:pointer;padding:13px 14px;font-size:var(--text-base);font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-page);}
.b-disclosure > summary::-webkit-details-marker{display:none;}
.b-disclosure > summary .chev{transition:transform .2s;width:16px;height:16px;color:var(--ink-mute);}
.b-disclosure[open] > summary .chev{transform:rotate(180deg);}
.b-disclosure > summary:focus-visible{box-shadow:var(--focus);}
.b-disc-body{padding:16px 14px;}

/* category row */
.b-cat{margin-bottom:var(--space-4);}
.b-cat:last-child{margin-bottom:0;}
.b-cat .c-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:var(--space-2);}
.b-cat .c-name{font-size:var(--text-base);color:var(--ink);font-weight:500;}
.b-cat .c-name small{color:var(--ink-mute);font-weight:400;margin-left:6px;font-size:var(--text-sm);}
.b-cat .c-val{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:var(--text-base);font-feature-settings:"tnum";}

/* totalrow */
.b-totalrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--radius-lg);margin-top:14px;flex-wrap:wrap;}
.b-totalrow .l{font-size:var(--text-base);color:var(--ink);font-weight:600;}
.b-totalrow .l small{display:block;font-size:var(--text-xs);color:var(--ink-mute);font-weight:400;margin-top:2px;}
.b-totalrow .v{font-family:var(--sans);font-weight:600;font-size:var(--text-xl);color:var(--orange);font-feature-settings:"tnum";}

/* per-medewerker uitsplitsing arbeider vs bediende */
.b-splitcost{display:flex;gap:var(--space-3);margin-top:var(--space-2);}
.b-splitcost .sc{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:var(--bg-page);border:1px solid var(--border-l);border-radius:var(--radius-md);}
.b-splitcost .sc-l{font-size:var(--text-xs);color:var(--ink-mute);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.b-splitcost .sc-v{font-family:var(--sans);font-weight:700;font-size:var(--text-base);color:var(--ink);font-feature-settings:"tnum";}
.b-splitcost .sc-v small{font-size:var(--text-2xs);color:var(--ink-mute);font-weight:400;margin-left:4px;}
@media(max-width:480px){.b-splitcost{flex-direction:column;}}

/* nav */
.b-nav-btns{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:16px 18px;border-top:1px solid var(--line-soft);background:rgba(244,242,239,.6);}
.b-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:12px 22px;font-size:var(--text-base);font-weight:600;border-radius:100px;cursor:pointer;font-family:var(--sans);border:var(--border) solid var(--border-l-2);background:#fff;color:var(--ink);transition:all .15s;min-height:48px;}
.b-btn:hover:not(:disabled){border-color:var(--ink);}
.b-btn:disabled{opacity:.4;cursor:not-allowed;}
.b-btn:focus-visible{box-shadow:var(--focus);}
.b-btn.primary{background:var(--orange);border-color:var(--orange);color:#fff;}
.b-btn.primary:hover{background:var(--orange-hover);border-color:var(--orange-hover);}
.b-btn svg{width:16px;height:16px;}
.b-stepcount{font-size:var(--text-sm);color:var(--ink-mute);font-weight:500;font-feature-settings:"tnum";}
.b-stepcount b{color:var(--ink);}
/* mobiel: compactere nav-knoppen zodat "Bekijk resultaat" én "Stap 6 van 6" op één regel passen */
@media(max-width:560px){
  .b-nav-btns{gap:10px;padding:14px 14px;}
  .b-btn{padding:11px 15px;font-size:var(--text-sm);gap:6px;white-space:nowrap;}
  .b-btn svg{width:14px;height:14px;}
  .b-stepcount{white-space:nowrap;font-size:var(--text-xs);}
}

/* verplichte-stap foutmelding (boven de navigatieknoppen) */
.b-step-err{display:none;align-items:center;gap:8px;margin:14px 18px 0;padding:12px 14px;background:var(--bad-bg);border:1px solid var(--bad-bd);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--bad);font-weight:600;line-height:1.5;}
.b-step-err:not([hidden]){display:flex;}
/* visueel verborgen, maar leesbaar voor screenreaders */
.b-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* sessie-resume melding + "opnieuw beginnen" */
.b-resume{display:flex;align-items:center;gap:10px;margin:0 0 var(--space-5);padding:12px 14px;background:var(--good-bg,rgba(31,122,77,.08));border:1px solid var(--good-bd,rgba(31,122,77,.30));border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--ink);line-height:1.45;}
.b-resume svg{width:16px;height:16px;color:var(--good,#1F7A4D);flex-shrink:0;}
.b-resume[hidden]{display:none;}
.b-resume-x{margin-left:auto;flex-shrink:0;background:none;border:0;padding:6px 4px;font:inherit;font-weight:600;color:var(--ink-strong,#1a1a1a);text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:36px;}
.b-resume-x:hover{color:var(--orange);}
.b-nav-extra{display:flex;justify-content:flex-end;margin-top:10px;}
.b-reset{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:8px 6px;font:inherit;font-size:var(--text-sm);font-weight:500;color:var(--ink-mute,#6E6359);cursor:pointer;border-radius:var(--radius-sm);min-height:40px;transition:color .18s ease;}
.b-reset svg{width:15px;height:15px;}
.b-reset:hover{color:var(--orange);}
.b-reset:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

/* unedited nudge */
.b-nudge{display:flex;align-items:flex-start;gap:9px;font-size:var(--text-sm);color:var(--ink-soft);background:rgba(232,89,43,.05);border:1px solid var(--warn-bd);border-radius:var(--radius-md);padding:11px 12px;margin-top:14px;line-height:1.5;}
.b-nudge svg{width:15px;height:15px;color:var(--orange);flex-shrink:0;margin-top:1px;}

/* informatieve note (bv. wetgeving) */
.b-note{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-sm);line-height:1.55;color:var(--ink-soft);background:rgba(240,237,232,.5);border:1px solid var(--border-l-2);border-left:3px solid var(--orange);border-radius:var(--radius-md);padding:13px 14px;margin-top:18px;}
.b-note svg{width:16px;height:16px;color:var(--orange);flex-shrink:0;margin-top:1px;}
.b-note .nt-title{display:block;font-weight:700;color:var(--ink);margin-bottom:4px;font-size:var(--text-base);}
.b-note b{color:var(--ink);font-weight:600;}

/* ═══ GATE + PDF PREVIEW ═══ */
.b-gate{background:var(--bg);padding:48px 16px;}
.b-gate-inner{max-width:var(--container);margin:0 auto;display:flex;flex-direction:column;gap:28px;}
.b-gate-copy .eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin-bottom:var(--space-3);}
.b-gate-copy .eyebrow::before{content:'';width:24px;height:1.5px;background:var(--orange);}
.b-gate-copy h2{font-family:var(--serif);font-weight:700;font-size:clamp(22px,5vw,30px);line-height:1.18;color:#fff;margin-bottom:14px;letter-spacing:-.01em;}
.b-gate-copy h2 em{font-style:italic;color:var(--orange);}
.b-gate-copy > p{font-size:var(--text-md);font-weight:300;color:var(--muted-d);line-height:var(--leading-relaxed);margin-bottom:18px;max-width:60ch;}
.b-gate-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.b-gate-list li{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-md);color:var(--muted-d);line-height:1.5;}
.b-gate-list li svg{width:17px;height:17px;color:var(--orange);flex-shrink:0;margin-top:1px;}

/* trust — alleen verifieerbaar, geen fictie */
.b-trust{display:flex;flex-wrap:wrap;gap:10px;padding-top:18px;border-top:1px solid var(--div-d);}
.b-trust .t-item{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-sm);color:var(--muted-d-2);}
.b-trust .t-item svg{width:14px;height:14px;color:var(--orange);}

/* form */
.b-form{display:flex;flex-direction:column;gap:var(--space-3);}
.b-form .f-row{display:flex;flex-direction:column;gap:6px;}
.b-form label.fl{font-size:var(--text-sm);font-weight:600;color:var(--off);letter-spacing:.02em;}
.b-form label.fl .req{color:var(--orange);}
.b-form .f-input{display:flex;align-items:center;gap:9px;padding:0 12px;background:rgba(240,237,232,.05);border:var(--border) solid var(--div-d-2);border-radius:var(--radius-md);transition:border-color .15s,box-shadow .15s;}
.b-form .f-input:focus-within{border-color:var(--orange);box-shadow:var(--focus);}
.b-form .f-input svg{width:16px;height:16px;color:var(--muted-d-2);flex-shrink:0;}
.b-form .f-input input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:var(--text-md);color:var(--off);padding:12px 0;min-width:0;}
.b-form .f-input input::placeholder{color:var(--muted-d-2);}
.b-consent{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-sm);color:var(--muted-d);line-height:1.5;cursor:pointer;}
.b-consent input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--orange);}
.b-consent a{color:var(--orange);text-decoration:underline;}
/* #3 — skip-hint op optionele stappen (3/4/5): "niet van toepassing / ik weet dit niet" */
.b-skiphint{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-sm);color:var(--ink-mute);line-height:1.5;margin:0 0 var(--space-4);padding:0;background:none;border:none;}
.b-skiphint svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--ink-mute);}
.b-skiphint b{color:var(--ink-soft);font-weight:600;}
/* #4 — rapport-inhoud als scanbare checklist bij de gate */
.b-report-intro{font-size:var(--text-md);color:var(--muted-d);margin:0 0 var(--space-4);line-height:1.5;}
.b-report-list{list-style:none;margin:0 0 var(--space-6);padding:0;display:flex;flex-direction:column;gap:9px;}
.b-report-list li{position:relative;padding-left:26px;color:var(--off);font-size:var(--text-md);line-height:1.45;}
.b-report-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--orange);font-weight:800;}
.b-report-list li b{color:#fff;font-weight:600;}
/* proof-regel bij het formulier (echte merkclaim, geen verzonnen aantal) */
.b-proof{display:flex;align-items:center;gap:16px;font-size:var(--text-sm);color:var(--muted-d);margin:2px 0 var(--space-5);padding:14px 16px;background:rgba(240,237,232,.04);border:1px solid var(--div-d);border-radius:var(--radius-md);}
.b-proof svg{width:20px;height:20px;color:var(--orange);flex-shrink:0;}
.b-proof .b-proof-stats{display:flex;gap:28px;flex:1;flex-wrap:wrap;}
.b-proof .b-proof-stat{display:flex;flex-direction:column;line-height:1.2;}
.b-proof .b-proof-stat .v{color:var(--off);font-weight:700;font-size:var(--text-md);font-feature-settings:"tnum";}
.b-proof .b-proof-stat .l{color:var(--muted-d);font-size:var(--text-xs);margin-top:2px;}
/* stap-labels naast de titel: Verplicht (1–2) vs Optioneel (3–6) */
.b-steptag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:100px;vertical-align:middle;margin-left:10px;line-height:1.45;white-space:nowrap;}
.b-steptag.req{background:rgba(232,89,43,.12);color:var(--orange-cta);}
.b-steptag.opt{background:var(--bg-page);color:var(--ink-mute);border:1px solid var(--border-l);}
/* info-"i" naast het Optioneel-label — uitleg in een tooltip i.p.v. een volle regel (rustiger) */
.b-panel-head h2 .b-info{margin-left:6px;vertical-align:middle;}
.b-panel-head h2 .b-info[data-tip]:hover::after,
.b-panel-head h2 .b-info[data-tip]:focus-visible::after,
.b-panel-head h2 .b-info[data-tip].is-open::after{bottom:auto;top:calc(100% + 8px);}
/* (3) afsluitende "Resultaat"-staat in de stappenbalk (display-only; engine kent 6 stappen) */
.b-step-result{opacity:.45;}
.b-step-result .step-btn{cursor:default;}
body.calc-revealed #bMain .b-step-result{opacity:1;}
body.calc-revealed #bMain .b-step .circle{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:none;}
body.calc-revealed #bMain .b-step-result .circle{box-shadow:0 0 0 4px rgba(232,89,43,.16);}
body.calc-revealed #bMain .b-step:not(:last-child)::after{background:var(--orange);}
body.calc-revealed #bMain .b-step .name{color:var(--ink-mute);font-weight:500;}
/* mobiel: in de reveal de engine-progresslabel ("Verzuimprofiel", stap 6) verbergen
   en in plaats daarvan "Resultaat" onder het laatste (vinkje-)knooppunt tonen */
@media(max-width:919px){
  body.calc-revealed #bMain .b-progress{display:none;}
  body.calc-revealed #bMain .b-step-result .name{display:block;}
}
/* (3b) reveal-staat óók in de focus-overlay: daar leeft de stepper in .cf-stepslot (buiten #bMain),
   dus de #bMain-reveal-regels hierboven missen 'm → ✓-bolletje bleef donker (opacity .45) en het
   label bleef op "Verzuimprofiel" (stap 6) staan. Hier gespiegeld naar de overlay-balk. */
body.cf-open.calc-revealed .cf-stepslot .b-step-result{opacity:1;}
body.cf-open.calc-revealed .cf-stepslot .b-step .circle{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:none;}
body.cf-open.calc-revealed .cf-stepslot .b-step-result .circle{box-shadow:0 0 0 4px rgba(232,89,43,.16);}
body.cf-open.calc-revealed .cf-stepslot .b-step:not(:last-child)::after{background:var(--orange);}
/* label: bij reveal enkel "Resultaat" tonen — verberg de (eventueel nog actieve) stap-6-naam */
body.cf-open.calc-revealed .cf-stepslot .b-step:not(.b-step-result).is-active .name{display:none !important;}
body.cf-open.calc-revealed .cf-stepslot .b-step-result .name{display:block !important;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.2;color:var(--off,#F0EDE8);white-space:nowrap;text-align:center;}
@media(max-width:680px){
  body.cf-open.calc-revealed .cf-stepslot .b-progress{display:none !important;}
  body.cf-open.calc-revealed .cf-stepslot .b-step-result .name{display:block !important;}
}
/* (4) inklapbare preview: "minder/meer detail" — ALLEEN op klein scherm (≤1180px, zelfde breekpunt
   als de hamburger-nav). Op desktop is er ruimte genoeg → preview altijd volledig, geen knop. */
.b-min{display:none;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:16px;padding:9px;background:none;border:1px solid var(--div-d);border-radius:var(--radius-md);color:var(--muted-d);font-family:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:background .15s,color .15s;}
.b-min:hover{background:rgba(240,237,232,.06);color:#fff;}
.b-min svg{width:15px;height:15px;transition:transform .2s;}
.b-output:not(.is-compact) .b-min svg{transform:rotate(180deg);}
@media(max-width:1180px){
  .b-min{display:flex;}
  .b-output.is-compact{align-self:start;}
  .b-output.is-compact :is(.b-cfo,.b-kpis,.b-bar,.b-risk-teaser,.b-bm,.b-delta){display:none;}
}
/* inline "gebaseerd op"-samenvatting op de resultaatkaart = licht controle-moment (geen extra stap) */
.b-basis{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--text-sm);color:var(--muted-d-2);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--div-d);line-height:1.55;}
.b-basis .b-basis-sum{flex:1;min-width:0;}
.b-basis .b-basis-item{white-space:nowrap;}
.b-basis .b-basis-lbl{font-weight:600;color:var(--muted-d);}
.b-basis b{color:var(--off);font-weight:600;font-feature-settings:"tnum";}
.b-basis .b-basis-edit{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--orange);background:none;border:none;font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;padding:2px;white-space:nowrap;}
.b-basis .b-basis-edit svg{width:13px;height:13px;flex-shrink:0;}
@media(max-width:560px){
  .b-basis{flex-direction:column;align-items:stretch;gap:12px;}
  .b-basis .b-basis-edit{margin-left:0;align-self:flex-start;text-decoration:none;border:1px solid var(--div-d);border-radius:var(--radius-md);padding:9px 15px;}
}
.b-basis .b-basis-edit:hover{color:var(--orange-hover);}
/* Eyebrow-klok (past bij "± 2 minuten") — vervangt de stip in de calculator-hero */
.hero-statement .hs-eyebrow .hs-clock{width:13px;height:13px;color:var(--ms-orange,#E8592B);flex-shrink:0;}
/* Mobiele inklap van lange stappen (3 & 6) — additief, engine-veilig */
.b-collapse-toggle{display:none;}
@media(max-width:640px){
  .b-panel[data-step="3"] .b-collapse-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 16px;margin:0 0 var(--space-4);background:var(--bg-card);border:1.5px solid var(--border-l-2);border-radius:var(--radius-md);font:inherit;font-size:var(--text-md);font-weight:600;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s;}
  .b-panel[data-step="3"] .b-collapse-toggle:hover{border-color:var(--ink-mute);}
  .b-panel[data-step="3"] .b-collapse-toggle svg{width:18px;height:18px;color:var(--orange);transition:transform .2s;flex-shrink:0;}
  .b-panel[data-step="3"].is-open .b-collapse-toggle svg{transform:rotate(180deg);}
  .b-panel[data-step="3"]:not(.is-open) .b-collapse-body{display:none;}
  .b-verz-col.vc-collapsible .vc-head{cursor:pointer;}
  .b-verz-col.vc-collapsible .vc-head::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-mute);border-bottom:2px solid var(--ink-mute);transform:rotate(45deg);transition:transform .2s;flex-shrink:0;margin-left:auto;}
  .b-verz-col.vc-collapsible.is-open .vc-head::after{transform:rotate(-135deg);}
  .b-verz-col.vc-collapsible:not(.is-open) .b-cat2,
  .b-verz-col.vc-collapsible:not(.is-open) .vc-sub{display:none;}
}
.b-submit{width:100%;padding:15px;background:var(--orange);border:none;color:#fff;font-size:var(--text-base);font-weight:700;letter-spacing:.02em;border-radius:var(--radius-md);cursor:pointer;font-family:var(--sans);transition:background .2s;min-height:48px;}
.b-submit:hover{background:var(--orange-hover);}
.b-submit:focus-visible{box-shadow:var(--focus);}
.b-fineprint{display:flex;align-items:center;justify-content:center;gap:7px;font-size:var(--text-sm);color:var(--muted-d-2);margin-top:2px;}
.b-fineprint svg{width:13px;height:13px;}
.b-error{font-size:var(--text-sm);color:#F0A8A8;display:none;}
.b-error.show{display:block;}

/* preview-only banner */
.b-preview-note{font-size:var(--text-sm);color:var(--muted-d-2);background:rgba(240,237,232,.04);border:1px dashed var(--div-d-2);border-radius:var(--radius-md);padding:10px 12px;line-height:1.5;}
.b-preview-note b{color:var(--off);}

/* method note */
.b-method{background:var(--bg-page);padding:36px 16px;border-top:1px solid var(--border-l);}
.b-method-in{max-width:var(--container);margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.b-method-block{font-size:var(--text-sm);color:var(--ink-soft);line-height:var(--leading-relaxed);max-width:640px;}
.b-method-block strong{color:var(--ink);font-weight:600;display:block;margin-bottom:6px;}
.b-method-src{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:var(--space-2);}
.b-method-src::before{content:'';width:22px;height:1.5px;background:var(--orange);}

/* ── action chapter (sluit-CTA) ── */
.b-action{background:var(--bg);padding:clamp(48px,8vw,78px) 18px 52px;text-align:center;border-top:1px solid var(--div-d);}
.b-action-in{max-width:700px;margin:0 auto;}
.b-action .ey{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;}
.b-action .ey::before{content:'';width:30px;height:1.5px;background:var(--orange);}
.b-action h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,5vw,44px);line-height:1.12;letter-spacing:-.02em;color:var(--off);margin-bottom:18px;}
.b-action h2 em{font-style:italic;color:var(--orange);}
.b-action .sub{font-size:var(--text-lg);font-weight:300;line-height:1.75;color:var(--muted-d);max-width:560px;margin:0 auto 34px;}
.b-action .cta{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-6);}
.b-action .cta a{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;font-size:var(--text-base);font-weight:600;letter-spacing:.02em;border-radius:100px;text-decoration:none;transition:all .2s;min-height:48px;}
.b-action .cta .primary{background:var(--orange);color:#fff;border:var(--border) solid var(--orange);}
.b-action .cta .primary:hover{background:var(--orange-hover);border-color:var(--orange-hover);}
.b-action .cta .ghost{background:transparent;color:var(--muted-d);border:var(--border) solid var(--div-d-2);}
.b-action .cta .ghost:hover{border-color:var(--off);color:var(--off);}
.b-action .rea{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);color:var(--muted-d-2);flex-wrap:wrap;justify-content:center;}
.b-action .rea svg{width:15px;height:15px;color:var(--orange);flex-shrink:0;}
@media(max-width:480px){.b-action .cta{flex-direction:column;}.b-action .cta a{width:100%;}}

/* footer */
.b-footer{background:var(--bg-deep);padding:24px 18px;display:flex;flex-direction:column;gap:var(--space-3);border-top:1px solid var(--div-d);}
.b-footer .copy{font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d-2);}
.b-footer .links{display:flex;gap:18px;flex-wrap:wrap;}
.b-footer .links a{font-size:var(--text-sm);color:var(--muted-d-2);text-decoration:none;}
.b-footer .links a:hover{color:var(--orange);}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ═══════════ TABLET / DESKTOP ═══════════ */
@media(min-width:760px){
  body{padding-top:64px;}
  .b-nav{height:64px;padding:0 32px;}
  .b-workspace{padding:24px 24px 72px;}
  .b-output-in{padding:28px 28px 24px;}
  .b-kpis{gap:var(--space-3);}
  .b-panel{padding:30px 32px 26px;}
  .b-gate{padding:72px 24px;}
  .b-gate-inner{gap:36px;}
  .b-gate-copy{max-width:560px;margin:0 auto;width:100%;}
  .b-method{padding:44px 24px;}
  .b-method-in{flex-direction:row;justify-content:space-between;}
  .b-footer{flex-direction:row;align-items:center;justify-content:space-between;padding:26px 32px;}
}
@media(min-width:920px){
  .b-grid{display:grid;grid-template-columns:1fr 1.3fr;grid-template-areas:"stepper stepper" "output wizard";align-items:start;gap:var(--space-6);}
  .b-stepper{grid-area:stepper;padding:20px 30px;}
  .b-output{grid-area:output;position:sticky;top:84px;}
  .b-wizard{grid-area:wizard;}
}

/* ═══ STAP 5 — Verzuim per categorie + Vergelijking (productie-stijl) ═══ */
.b-verz-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:38px;row-gap:var(--space-5);align-items:center;margin-top:8px;}
.vg-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;}
.vg-h .vg-title{font-size:var(--text-md);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px;}
.vg-total{display:inline-flex;align-items:baseline;padding:6px 15px;border:1px solid var(--border-l-2);border-radius:100px;font-weight:700;color:var(--ink);font-size:var(--text-md);font-feature-settings:"tnum";}
.vg-help{font-size:var(--text-sm);color:var(--ink-soft);font-weight:300;min-height:18px;}
.b-cat2 .c-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.b-cat2 .c-name{font-size:var(--text-md);color:var(--ink);font-weight:500;}
.b-cat2 .c-name small{color:var(--ink-mute);font-weight:400;margin-left:6px;font-size:var(--text-sm);}
.c-pill{padding:5px 12px;border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:700;font-feature-settings:"tnum";min-width:56px;text-align:center;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd);}
.c-pill.ok{background:var(--good-bg);color:var(--good);border-color:var(--good-bd);}
.c-pill.warn{background:rgba(176,137,12,0.12);color:#8a6b08;border-color:rgba(176,137,12,0.38);}
.c-pill.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-bd);}
/* #10 — niet-kleurgebonden status-teken op de verzuim-pillen (voor kleurenblinden) */
.b-cat2 .c-pill::before{font-size:.72em;font-weight:800;opacity:.9;margin-right:3px;line-height:1;}
.b-cat2 .c-pill.ok::before{content:"\2713";}
.b-cat2 .c-pill.warn::before{content:"!";}
.b-cat2 .c-pill.bad::before{content:"!!";}
.b-bm{display:flex;justify-content:flex-end;align-items:center;}
.badge2{display:inline-flex;align-items:center;justify-content:center;min-width:128px;padding:10px 16px;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:700;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd);}
.badge2.ok{background:var(--good-bg);color:var(--good);border-color:var(--good-bd);}
.badge2.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd);}
.badge2.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-bd);}
.vg-sep{grid-column:1/-1;height:1px;background:var(--line-soft);margin:2px 0;}

/* twee kolommen — verzuim arbeiders vs bedienden */
.b-verz-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;margin-top:4px;}
.b-verz-head .vg-title{font-size:var(--text-md);font-weight:600;color:var(--ink);}
.b-verz-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-3);}
.b-verz-col{border:1px solid var(--border-l);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--bg-page);}
.b-verz-col .vc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:var(--text-md);font-weight:700;color:var(--ink);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--border-l);}
.b-verz-col .vc-head .vc-n{font-size:var(--text-sm);font-weight:400;color:var(--ink-mute);}
.b-verz-col .b-cat2{margin-bottom:var(--space-3);}
.b-verz-col .b-cat2:last-of-type{margin-bottom:0;}
.b-verz-col .vc-sub{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--border-l);font-size:var(--text-sm);color:var(--ink-soft);}
.b-verz-col .vc-sub b{color:var(--ink);font-feature-settings:"tnum";font-size:var(--text-base);}
.vg-sep2{height:1px;background:var(--line-soft);margin:var(--space-4) 0 var(--space-2);}
.vg-src{grid-column:1/-1;font-size:var(--text-xs);color:var(--ink-mute);font-style:italic;text-align:right;}
@media(max-width:680px){
  .b-verz-grid{grid-template-columns:1fr;row-gap:2px;}
  .b-verz-cols{grid-template-columns:1fr;}
  .vg-cmponly{display:none;}
  .b-bm{justify-content:flex-start;margin:0 0 10px;}
  .badge2{min-width:0;padding:6px 12px;font-size:var(--text-sm);}
  .vg-src{text-align:left;}
  .vg-sep{display:none;}
  .b-cat2 .c-top{margin-bottom:4px;}
  .b-panel{padding:22px 16px 18px;}
  .b-field{margin-bottom:var(--space-4);}
}

/* ── reden-tot-nu (eerlijke geruststelling, prominent) ── */
.b-reason{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-top:4px;background:rgba(232,89,43,0.06);border:1px solid var(--warn-bd);border-radius:var(--radius-md);font-size:var(--text-base);color:var(--off);line-height:var(--leading-snug);}
.b-reason svg{width:18px;height:18px;color:var(--orange);flex-shrink:0;}
.b-reason b{font-weight:600;}

/* ── default-waarschuwing in de gate ── */
.b-defwarn{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;margin-bottom:18px;background:rgba(232,180,92,0.10);border:1px solid rgba(232,180,92,0.34);border-radius:var(--radius-md);font-size:var(--text-base);color:var(--off);line-height:1.5;}
.b-defwarn svg{width:17px;height:17px;color:var(--warn);flex-shrink:0;margin-top:2px;}
.b-defwarn b{font-weight:600;}
.b-defwarn a{color:var(--orange);text-decoration:underline;cursor:pointer;font-weight:600;}

/* ── vertrouwd-door logo-marquee (echte, toegestane logo's — spiegelt de live home) ── */
.b-logos{grid-column:1/-1;margin-top:42px;padding-top:30px;border-top:1px solid var(--div-d);}
.b-logos-lbl{font-size:var(--text-2xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d-2);text-align:center;margin-bottom:20px;}
.b-logos-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.b-logos-track{display:flex;align-items:center;gap:52px;width:max-content;animation:bLogoScroll 48s linear infinite;}
.b-logos-track:hover{animation-play-state:paused;}
.b-logos-track img{height:28px;width:auto;flex-shrink:0;opacity:.5;filter:brightness(0) invert(1);transition:opacity .2s;}
.b-logos-track img:hover{opacity:.92;}
@keyframes bLogoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.b-logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:34px 44px;}.b-logos-mask{-webkit-mask-image:none;mask-image:none;}}
@media(max-width:560px){.b-logos-track{gap:36px;}.b-logos-track img{height:22px;}}
/* "Vertrouwd door"-logostrip verwijderd op verzoek (3 juli 2026) */
.b-logos{display:none;}


/* ── mobiele stepper: progress-bar i.p.v. 6 labels (<760px) ── */
.b-progress{display:none;}
.b-progress-bar{height:4px;border-radius:var(--radius-pill);background:rgba(26,21,18,.10);overflow:hidden;margin-bottom:10px;}
.b-progress-bar i{display:block;height:100%;background:var(--orange);border-radius:var(--radius-pill);transition:width .3s ease;}
.b-progress-txt{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:var(--text-base);color:var(--ink-soft);font-weight:500;transition:left .25s cubic-bezier(.16,1,.3,1);}
.b-progress-txt b{color:var(--ink);font-weight:700;}
.b-progress-txt .nm{color:var(--orange);font-weight:600;}
/* Desktop (≥920px): volledige stepper met cirkels + namen (full-width band).
   Mobiel + tablet (<920px): cirkels blijven zichtbaar én klikbaar (navigatie),
   de labels worden verborgen en alleen de naam van de actieve stap toont eronder. */
.b-stepper ol{display:flex;}
.b-step .name{display:none;}
.b-progress{display:block;position:relative;margin-top:var(--space-3);height:1.5em;}
.b-progress-bar{display:none;}
@media(min-width:920px){
  .b-step .name{display:block;}
  .b-progress{display:none;}
}

/* ── wizard-veld-validatie (inline error op handmatige velden) ── */
.b-numfield.is-error{border-color:var(--bad);}
.b-numfield.is-error:focus-within{border-color:var(--bad);box-shadow:0 0 0 3px rgba(161,44,44,.32);}
.b-field-err{display:none;font-size:var(--text-sm);color:var(--bad);font-weight:600;margin-top:6px;}
.b-field-err.show{display:block;}

/* ════════════════════════════════════════════════════════════
   MOBIELE TOUCH-TARGETS & LEESBAARHEID (productie-audit juni 2026)
   Alleen <920px (touch). Desktop ongemoeid.
   ════════════════════════════════════════════════════════════ */
@media(max-width:919px){
  /* stepper-cirkels = volwaardig tik-target (≥44px) zonder de cirkel visueel op te blazen */
  .b-step .step-btn{padding:9px 4px;}
  .b-step .circle{width:30px;height:30px;font-size:var(--text-md);}
  /* verbindingslijn verticaal op de 30px-cirkels centreren (was te hoog op klein scherm) */
  .b-step:not(:last-child)::after{top:24px;left:calc(50% + 15px);width:calc(100% - 30px);}
  /* dichte output-micro-labels iets groter voor comfortabele leesbaarheid op klein scherm */
  .b-kpi .k-lbl,.b-risk-teaser .rt-lbl,.b-logos-lbl{font-size:11px;}
  .b-kpi .k-sub{font-size:12px;}
  /* eenheidssuffix (bv. "K / jr") naast het grote KPI-getal iets groter voor leesbaarheid */
  .b-kpi .k-val small{font-size:.6em;}
  /* help-icoon "i" iets groter binnen zijn cirkel */
  .b-info{font-size:11px;}
  /* handmatige invoervelden: comfortabele tikhoogte (≥46px) op alle touch-formaten */
  .b-numfield{min-height:46px;}
  .b-numfield input{padding:7px 0;}
  .b-numfield .pre,.b-numfield .suf{padding:7px 0;}
}
@media(max-width:560px){
  /* split-slider readouts onder elkaar voor lucht op smal scherm */
  .b-split-readouts{gap:var(--space-2);}
  /* arbeider/bediende-keuze zakt onder het veld en wordt volle breedte */
  .b-fieldrow .b-numfield{flex:1 1 100%;}
  .b-grp{width:100%;}
  .b-grp button{flex:1;text-align:center;}
}
@media(hover:none){
  .b-grp button{min-height:44px;}
}

/* ═══════════════════════════════════════════════════════════════════
   CTA-FILL TOKEN — gevulde calculator-knoppen naar WCAG AA (ronde 3)
   --orange-cta is in site.css gedefinieerd (calculator laadt site.css).
   Wit-op-#CC4A1E = 4,6:1; accent-oranje (#E8592B) blijft voor tekst.
═══════════════════════════════════════════════════════════════════ */
.b-btn.primary,.b-submit,.b-action .cta .primary,.skip{
  background:var(--orange-cta,#CC4A1E);
}
.b-btn.primary{border-color:var(--orange-cta,#CC4A1E);}
.b-action .cta .primary{border-color:var(--orange-cta,#CC4A1E);}
.b-btn.primary:hover,.b-submit:hover,.b-action .cta .primary:hover{
  background:var(--orange-cta-hover,#B8420F);
}
.b-btn.primary:hover,.b-action .cta .primary:hover{border-color:var(--orange-cta-hover,#B8420F);}

/* ── lead-gate: per-veld validatie verplichte velden (juni 2026) ── */
.b-form .f-input.is-error{border-color:var(--bad)!important;box-shadow:0 0 0 3px rgba(161,44,44,.26);}
.b-form .f-input.is-error svg{color:var(--bad);}
.b-consent.is-error{color:var(--bad);}
.b-consent.is-error input{outline:2px solid var(--bad);outline-offset:2px;border-radius:3px;}

/* kolom zonder personen (0 pers.) gedimd — sliders hebben dan geen effect */
.b-verz-col.is-zero{opacity:.42;}
.b-verz-col.is-zero .b-slider{pointer-events:none;}