/* Concept: kop tegen kop. Diesel links op asfalt, elektrisch rechts in het licht, en alles wat je vergelijkt
   staat op die naad: het scorebord bovenaan en de lijst met kosten eronder, met balken die vanuit het midden
   naar buiten groeien. Je situatie lees je als één zin; klik op een vet woord om het aan te passen.
   Eén ding tegelijk: details klappen pas open als je erom vraagt. */
:root{
 --page:#ECEEEA;--card:#fff;--soft:#F6F7F4;
 --ink:#15171A;--ink-2:#4F565D;--ink-3:#7A8188;--line:#D7DBD5;--line-2:#BCC2BB;
 --asph:#191B1E;--asph-2:#24282C;--asph-3:#383D43;--on-asph:#F1EFE9;--on-asph-2:#A7ADB2;
 --amber:#F2A33A;--amber-ink:#B8700E;
 --volt:#0A8F5B;--volt-2:#3FA877;--volt-soft:#DCF0E5;--volt-ink:#07734A;
 --display:'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
 --text:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
 --w:1200px;
 color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:17px/1.55 var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--volt-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--w);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:760px){.wrap{padding-left:max(36px,env(safe-area-inset-left,0px));padding-right:max(36px,env(safe-area-inset-right,0px))}}
h1,h2,h3{margin:0;text-wrap:balance}

/* Kop */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--page)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--page)}
.topin{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);text-decoration:none;font:700 20px/1 var(--text);letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
/* Logo: schakelaar, klik op de knop zet hem op diesel */
.bmark{--bm:var(--volt);display:block;flex:none;width:38px;height:20px;overflow:visible}
html.sod-d .bmark{--bm:#E8890C}
.bt,.bb{fill:var(--bm);transition:fill .3s}
.bp{fill:var(--bm);opacity:0;transition:fill .3s,opacity .2s}.bp .bh{fill:none;stroke:var(--bm);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.bb{transition:fill .3s,opacity .2s}html.sod-d .bb{opacity:0}html.sod-d .bp{opacity:1}
.bmark .bk{transition:transform .45s cubic-bezier(.5,1.55,.5,1)}html.sod-d .bmark .bk{transform:translateX(-28px)}
.top .bmark,.foot .bmark{cursor:pointer}
@media (prefers-reduced-motion:reduce){.bt,.bb,.bp,.bp .bh,.bmark .bk{transition:none}}
#nav{display:flex;gap:4px}
#nav a{color:var(--ink-2);text-decoration:none;font:600 16px var(--text);padding:8px 13px;border-radius:8px}
#nav a:hover{color:var(--ink);background:rgba(21,23,26,.06)}
#nav a[aria-current=page]{color:var(--page);background:var(--ink)}
.mnu{display:none;border:0;background:var(--ink);color:var(--page);border-radius:8px;padding:9px 16px;font:600 15px var(--text);cursor:pointer}
@media(max-width:900px){
 .mnu{display:inline-flex}
 #nav{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;gap:2px;background:var(--page);padding:6px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));box-shadow:0 20px 30px -22px rgba(0,0,0,.45)}
 #nav.open{display:flex}
 #nav a{padding:13px 16px;font-size:18px}
}

/* Opening van de calculator */
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;padding:34px 0 26px}
.intro h1{font:700 clamp(32px,4.2vw,48px)/1.1 var(--text);letter-spacing:-.02em;outline:0}
.intro p{margin:10px 0 0;max-width:600px;color:var(--ink-2);font-size:18px}
.mode{display:inline-flex;padding:4px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.mode a{padding:9px 18px;border-radius:7px;color:var(--ink-2);text-decoration:none;font:700 16px var(--text);white-space:nowrap}
.mode a:hover{color:var(--ink)}
.mode a[aria-current=page]{background:var(--ink);color:#fff}

/* Scorebord */
.board{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:22px;overflow:hidden;background:var(--card);box-shadow:0 40px 70px -50px rgba(0,0,0,.55)}
.bd{display:flex;flex-direction:column;gap:6px;min-width:0;padding:30px clamp(18px,3.4vw,40px) 34px}
.bd.d{background:var(--asph);color:var(--on-asph)}
.bd.e{align-items:flex-end;text-align:right}
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 15px var(--text)}
.bd.d .who{color:var(--on-asph-2)}.bd.e .who{color:var(--ink-2);flex-direction:row-reverse}
.who::before{content:"";width:10px;height:10px;border-radius:2px}.bd.d .who::before{background:var(--amber)}.bd.e .who::before{background:var(--volt);order:1}
.who em{font:600 12px var(--text);font-style:normal;padding:2px 8px;border-radius:4px}
.bd.d .who em{background:var(--asph-3);color:var(--on-asph)}.bd.e .who em{background:var(--volt-soft);color:var(--volt-ink)}
.big{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;margin-top:6px;font:700 clamp(44px,6.2vw,82px)/.95 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bd.e .big{justify-content:flex-end}
.big small{font:600 17px var(--text);letter-spacing:0;opacity:.7}
.bsub{font-size:17px;opacity:.75;font-variant-numeric:tabular-nums}
.bfoot{grid-column:1/-1;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:14px clamp(18px,3.4vw,40px);background:var(--soft);border-top:1px solid var(--line);color:var(--ink)}
.bfoot p b{color:var(--volt-ink)}.bfoot.neg p b{color:var(--amber-ink)}
.bfoot p{margin:0;margin-right:auto;font-size:18px;font-weight:500}
.bfoot p b{font-weight:700;font-variant-numeric:tabular-nums}
.tag{font:500 13px var(--text);color:var(--ink-3)}
.acts{display:flex;gap:6px}
.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:8px;padding:7px 12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:600 14px var(--text);cursor:pointer}
.btn:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn svg{width:15px;height:15px}
@media(max-width:640px){.board{border-radius:16px}.bd{padding:20px 14px 26px}.who{font-size:13px;letter-spacing:.1em}.big small{font-size:13px;flex-basis:100%}.bsub{font-size:13px}.bfoot p{font-size:15px}.btn span{display:none}}

/* Klein scorebord dat meeschuift */
.mini{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;font-variant-numeric:tabular-nums;transform:translateY(-140%);transition:transform .2s ease;box-shadow:0 12px 24px -18px rgba(0,0,0,.6)}
.mini.show{transform:none}
.mini:not(.show){visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
.mini>span{display:flex;align-items:center;gap:10px;padding:9px max(16px,env(safe-area-inset-left,0px));font:600 15px var(--text)}
.mini b{font:800 22px/1 var(--display)}
.mini .md{background:var(--asph);color:var(--on-asph);justify-content:flex-end}.mini .md b{color:var(--amber)}
.mini .me{background:var(--card);padding-right:max(16px,env(safe-area-inset-right,0px))}.mini .me b{color:var(--volt)}
.mini .mm{background:var(--page);padding:9px 14px;font:800 18px var(--display)}
@media (prefers-reduced-motion:reduce){.mini{transition:none}}
.mini .mv{display:inline-flex;align-items:baseline;gap:6px}
.mini .mv small{font:500 13px var(--text);opacity:.75}
.mini .mm{flex-direction:column;justify-content:center;gap:1px!important;text-align:center}
.mini .mm small{font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mini .mm b{font:600 18px/1 var(--display);color:var(--ink)}

.story{position:relative}
.lnk{border:0;background:none;padding:0;color:var(--ink);font:600 15px var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer}
.lnk:hover{color:var(--volt-ink)}

/* Schuif met typbare waarde */
.sl{--fill:var(--ink);--track:var(--line);--thumb:var(--card)}
.sl+.sl{margin-top:12px}
.slh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.slh label{font-size:15px;line-height:1.3}
.slv{display:inline-flex;align-items:baseline;gap:5px;flex:none;border-radius:6px;padding:2px 8px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);cursor:text}
.slv:focus-within{box-shadow:inset 0 0 0 2px var(--fill)}
.slin{width:auto;field-sizing:content;min-width:2ch;border:0;background:none;outline:0;padding:0;text-align:right;font:700 16px var(--text);color:inherit;font-variant-numeric:tabular-nums}
.un{font-size:14px;opacity:.65;white-space:nowrap}
input[type=range]{display:block;width:100%;-webkit-appearance:none;appearance:none;height:30px;margin:4px 0 0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--fill) calc(var(--f,0)*(100% - 24px) + 12px),var(--track) calc(var(--f,0)*(100% - 24px) + 12px))}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--track)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--fill)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-9px;width:24px;height:24px;border-radius:50%;background:var(--thumb);border:3px solid var(--fill);box-shadow:0 2px 5px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--thumb);border:3px solid var(--fill)}
input[type=range]:focus-visible{outline:0}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(120,130,130,.3)}

/* Velden */
.hint{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3)}
.hint b{font-weight:700;color:inherit}
.hint:empty{display:none}

/* Schakelaar en keuzes */
.sw2{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;cursor:pointer;user-select:none}
.sw2 input{-webkit-appearance:none;appearance:none;flex:none;width:42px;height:24px;margin:0;border-radius:12px;background:var(--line-2);position:relative;cursor:pointer;transition:background .15s}
.sw2 input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.sw2 input:checked{background:var(--volt)}
.sw2 input:checked::after{left:21px}
.sw2.ln{display:flex;margin:0 0 16px}
.dexc.cd .sl{--fill:var(--amber-ink)}
.dexc.ce .sl{--fill:var(--volt)}
.seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.seg>*{flex:1}
.seg button,.seg label span{display:block;border:0;background:none;border-radius:8px;padding:9px 12px;font:600 15px var(--text);color:var(--ink-2);cursor:pointer;text-align:center;white-space:nowrap}
.seg label{position:relative;display:block}
.seg label input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg button:hover,.seg label:hover span{color:var(--ink);background:var(--card)}
.seg button[aria-pressed=true],.seg label input:checked+span{background:var(--ink);color:#fff}
.seg label input:focus-visible+span{outline:3px solid var(--ink);outline-offset:1px}
.seg.sm{display:inline-flex;border-radius:999px}.seg.sm button{border-radius:999px;padding:6px 14px;font-size:14px}
.sz{display:grid;grid-template-columns:1fr auto 1fr;gap:2px 12px;align-items:center;margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--soft);font-size:14px}
.sz small{display:block;font-size:12px;color:var(--ink-3)}.sz b{font-weight:700}.sz i{font-style:normal;color:var(--ink-3)}
.sz p{grid-column:1/-1;margin:4px 0 0;color:var(--ink-3);font-size:12px}

/* Kop tegen kop: de kostenlijst */
.vs{margin-top:56px}
.vsh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap}
.vsh h2{font:700 clamp(24px,2.8vw,32px)/1.2 var(--text);letter-spacing:-.01em}
.vsh p{margin:8px 0 0;color:var(--ink-3);font-size:16px}
.vsl{margin-top:22px;border-radius:20px;overflow:hidden;background:var(--card);box-shadow:0 30px 60px -50px rgba(0,0,0,.5)}
.grid3{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,210px) minmax(0,1fr)}
.colh>span{padding:12px 22px 10px;font:600 14px var(--text)}
.colh .cd{color:var(--ink-2);text-align:right}
.colh .cm{background:var(--soft)}
.colh .ce{color:var(--ink-2)}
.row{border-top:1px solid var(--line)}
.rh{width:100%;border:0;padding:0;margin:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.rh>span{display:flex;align-items:center;gap:14px;min-width:0;padding:18px 22px}
.rd{justify-content:flex-end}
.re{justify-content:flex-start}
.rl{flex-direction:column;justify-content:center;align-items:center!important;gap:2px!important;padding:12px 10px!important;background:var(--soft);text-align:center}
.rl b{font:700 17px/1.2 var(--text)}
.rl small{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rl small .good{color:var(--volt-ink);font-weight:600}.rl small .bad{color:var(--amber-ink);font-weight:600}
.rl i{position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2);transform:rotate(-45deg)}
.rl{position:relative}
.rh:hover .rl i{border-color:var(--ink)}
.rh:hover .rl{background:#EDEFEA}
.rh:hover .rl b{text-decoration:underline;text-underline-offset:3px}
.rv{flex:none;font:700 19px var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{display:block;height:12px;max-width:70%;transition:width .35s ease}
.rd .bar{background:var(--amber);border-radius:6px 2px 2px 6px}
.re .bar{background:var(--volt);border-radius:2px 6px 6px 2px}
.row.off .rv{opacity:.45;font-weight:500}
.tot{border-top:2px solid var(--ink)}
.tot>span{display:flex;align-items:center;gap:14px;min-width:0;padding:18px 22px}
.tot .rd{justify-content:flex-end}
.tot .rv{font:700 24px var(--display)}
.tot .rl b{font:700 17px var(--text)}
@media(max-width:700px){
 .grid3{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr)}
 .colh>span{padding:12px 12px 8px;font-size:12px;letter-spacing:.1em}
 .rh>span{gap:8px;padding:15px 10px}
 .rl b{font-size:13px}.rl small{font-size:11px}.rl .dfl{display:none}
 .rv{font-size:15px}.bar{height:8px;max-width:50%}
 .tot .rv{font-size:20px}.tot>span{padding:15px 10px}
}

/* Terugverdientijd en verdieping */
.an{margin-top:56px}
.an h2{font:700 clamp(24px,2.8vw,32px)/1.2 var(--text);letter-spacing:-.01em}
.pbc{margin-top:20px;padding:20px clamp(18px,3vw,30px) 22px;border-radius:20px;background:var(--card)}
.pbt{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 32px}
.pbn{font:700 clamp(38px,4.6vw,56px)/.95 var(--display)}
.pbn small{font:600 18px var(--text);color:var(--ink-3);letter-spacing:0}
.pbs{margin-top:8px;color:var(--ink-2);font-size:17px}
.pbq{display:flex;gap:32px;flex-wrap:wrap}
.pbq div{display:flex;flex-direction:column}
.pbq span{font-size:14px;color:var(--ink-3)}
.pbq b{font:700 20px var(--text);font-variant-numeric:tabular-nums}
.pbq small{font:400 13px var(--text);color:var(--ink-3)}
.pbw{position:relative;margin-top:22px}
.pbw svg{display:block;width:100%;height:auto;overflow:visible;cursor:crosshair;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.pbw svg:focus{outline:none}.pbw svg:focus-visible{outline:2px solid var(--volt);outline-offset:6px;border-radius:4px}
.pbc text{font:500 12px var(--mono);fill:var(--ink-3)}
.pbw .lt{fill:var(--ink);font-weight:600}
.pbw .g{stroke:var(--ink);stroke-opacity:.07}
.pbw .z{stroke:var(--ink);stroke-opacity:.55;stroke-width:1.25}
.pbw .au{fill:var(--volt);opacity:.13}.pbw .ad{fill:var(--amber);opacity:.16}
.pbw .lu,.pbw .ld{fill:none;stroke-width:3;stroke-linecap:round}.pbw .lu{stroke:var(--volt)}.pbw .ld{stroke:var(--amber-ink)}
.pbw .fan{fill:var(--ink);opacity:.07}
.pbw .fe{fill:none;stroke:var(--ink);stroke-opacity:.28;stroke-width:1;stroke-dasharray:2 3}
.pbw .brk{stroke:var(--ink);stroke-opacity:.5;stroke-width:5;stroke-linecap:round}
.pbw .lm{stroke:var(--ink);stroke-opacity:.22;stroke-dasharray:3 4}
.pbw .bem{fill:#fff;stroke:var(--ink);stroke-width:3}
.pbw .bel rect{fill:var(--ink)}.pbw .bel text{fill:#fff;font:600 13px var(--text)}
.pbw .hit{fill:transparent}
.pbw .hv{pointer-events:none}
.pbw .hl{stroke:var(--ink);stroke-opacity:.45}
.pbw .hd{fill:var(--amber-ink);stroke:#fff;stroke-width:2.5}.pbw .hd.up{fill:var(--volt)}
.pbtip{position:absolute;top:0;z-index:2;min-width:188px;padding:10px 12px;border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 6px 18px rgba(21,23,26,.1);pointer-events:none;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pbtip b{display:block;margin-bottom:6px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pbtip span{display:flex;align-items:center;gap:7px;line-height:1.7}
.pbtip em{margin-left:auto;padding-left:14px;font-style:normal;font-weight:600;color:var(--ink)}
.pbtip .pv{margin-top:4px;padding-top:5px;border-top:1px solid var(--line);color:var(--ink)}
.pbtip .pv.up em{color:var(--volt-ink)}.pbtip .pv.dn em{color:var(--amber-ink)}
.pbtip small{display:block;text-align:right;font:500 12px var(--mono);color:var(--ink-3)}
.pbtip i,.pbk i{display:inline-block;width:14px;height:3px;border-radius:2px;flex:none}
.pbtip .kd{background:var(--amber-ink)}.pbtip .ku{background:var(--volt)}
.pbk{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--ink-3)}
.pbk span{display:inline-flex;align-items:center}
.pbk .kd{width:9px;border-radius:2px 0 0 2px;background:var(--amber-ink)}.pbk .ku{width:9px;margin-right:7px;border-radius:0 2px 2px 0;background:var(--volt)}
.pbk .kf{width:18px;height:10px;margin-right:7px;background:rgba(21,23,26,.08);box-shadow:inset 0 0 0 1px rgba(21,23,26,.25)}
.wfp{position:relative;display:flex;height:240px;border-bottom:2px solid var(--ink)}
.wc{position:relative;flex:1;min-width:0}
.wbar{position:absolute;left:18%;right:18%;border-radius:4px}
.wcn{position:absolute;left:82%;width:36%;border-top:1.5px dashed var(--line-2);z-index:1}
.wval{position:absolute;left:-6px;right:-6px;text-align:center;font:700 14px var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.wc.off .wval{color:var(--ink-3);font-weight:500}
.wl{display:flex}.wl span{flex:1;padding:10px 2px 0;text-align:center;font-size:14px;font-weight:600;line-height:1.25;color:var(--ink-2)}
@media(max-width:600px){.wval{font-size:10px;left:-4px;right:-4px;letter-spacing:-.03em}.wl span{font-size:11px}}
.bec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:700px){.bec{grid-template-columns:minmax(0,1fr)}}
.bc2{padding:18px 20px;border-radius:14px;background:var(--card);min-width:0}
.bc2>small{display:block;font:600 15px var(--text);color:var(--ink-2)}
.bc2>b{display:block;margin-top:2px;font:700 34px/1.05 var(--display);font-variant-numeric:tabular-nums}
.bc2>b small{font:600 15px var(--text);color:var(--ink-3)}
.bc2 p{margin:0;font-size:14px;color:var(--ink-2)}
.trk{position:relative;height:8px;margin:36px 0 42px;border-radius:4px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.trk i{position:absolute;top:0;bottom:0;border-radius:4px;background:#A6D8BD}
.trk u{position:absolute;top:-6px;width:3px;height:20px;margin-left:-1.5px;background:var(--ink);text-decoration:none}
.trk .now{position:absolute;top:-6px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--volt);border:4px solid #fff;box-shadow:0 0 0 1px var(--volt)}
.trk em{position:absolute;left:50%;top:-26px;transform:translateX(-50%);font:600 12px var(--text);font-style:normal;color:var(--ink-2);white-space:nowrap}
.trk em.lo{top:30px}
.trk .tk{position:absolute;top:12px;width:1px;height:5px;background:var(--line-2)}
.trk .tk s{position:absolute;top:7px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--ink-3);text-decoration:none}
.hmw{margin-top:14px;padding:16px 18px;border-radius:14px;background:var(--card)}
.hmw>small{display:block;font-size:14px;color:var(--ink-2)}
.hm{width:100%;max-width:700px;border-collapse:separate;border-spacing:4px;margin:8px -4px 0;font:600 14px var(--text);font-variant-numeric:tabular-nums}
.hm th,.hm td{padding:10px 4px;text-align:center;border:0}
.hm th{font-weight:500;color:var(--ink-3)}.hm th:first-child{text-align:left;font-size:12px;white-space:nowrap}
.hm td{border-radius:6px;min-width:52px}
.hm td.cur{outline:3px solid var(--ink);outline-offset:-3px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Uitklappers */
.more{margin-top:48px}
.more>details{border-top:1px solid var(--line-2)}
.more>details:last-child{border-bottom:1px solid var(--line-2)}
.more summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 16px;padding:17px 44px 15px 0}
.more summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.more summary b{font:700 19px/1.2 var(--text)}
.more summary span{color:var(--ink-3);font-size:16px}
.more summary::after,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:transform .2s}
.more details[open] summary::after,.faq details[open] summary::after{transform:rotate(45deg)}
.more summary:hover b{color:var(--volt-ink)}
.more details>:not(summary){margin-bottom:28px}
.more details>p{max-width:820px;color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--ink-2)}.facts dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:700px){.facts{grid-template-columns:minmax(0,1fr)}}

.cta{display:inline-flex;align-items:center;gap:10px;border-radius:8px;padding:11px 18px;background:var(--ink);color:#fff;font:600 15px var(--text);text-decoration:none;white-space:nowrap}
.cta:hover{background:#000;color:#fff}
.cta svg{width:18px;height:18px}

/* Tol */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:6px 15px 6px 6px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);font:600 15px var(--text);color:var(--ink);cursor:pointer}
.chip:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.oval{display:inline-grid;place-items:center;min-width:32px;height:22px;padding:0 6px;border:2px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);font:700 11px/1 var(--text)}
.chip[aria-pressed=true] .oval{border-color:#fff}
#tolBody{margin-top:22px}
.tolcap{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font-size:15px;color:var(--ink-2)}
.tolcap b{color:var(--ink);font-variant-numeric:tabular-nums}
.capbar{height:6px;margin:8px 0 6px;border-radius:3px;background:var(--line);overflow:hidden}
.capbar i{display:block;height:100%;background:var(--ink);transition:width .2s}
.tolg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 36px}
.tc{padding:16px 0 8px;border-top:1px solid var(--line)}
.tch{display:flex;align-items:center;gap:10px;font-weight:700}
.tcr{margin:4px 0 6px;font-size:13px;color:var(--ink-3)}

/* Advertentie */
aside.ad:not(.on),div.ad:not(.on){display:none!important}/* Lege vakken pas tonen als er echt een advertentie in komt */
.ad{display:grid;place-items:center;min-height:250px;border-radius:14px;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(21,23,26,.035) 12px 13px),var(--soft);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3);font:600 11px var(--text);letter-spacing:.18em;text-transform:uppercase}
.ad.band{min-height:110px;margin:64px 0 0}
.fdis a{color:inherit;text-decoration:none}.fdis a:hover{text-decoration:underline}
.ad.on{display:block;background:none;box-shadow:none}.ad.on:has(ins[data-ad-status=unfilled]){display:none}

/* Content-pagina's */
.phead{padding:36px 0 30px;max-width:820px}
.phead h1{font:700 clamp(32px,4.2vw,48px)/1.1 var(--text);letter-spacing:-.02em;outline:0}
.phead p{margin:16px 0 0;color:var(--ink-2);font-size:19px;max-width:600px}
.faqw{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}
.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail button{border:0;background:none;text-align:left;padding:9px 14px;border-radius:8px;font:600 16px var(--text);color:var(--ink-2);cursor:pointer}
.rail button:hover{background:var(--card);color:var(--ink)}
.faq section{scroll-margin-top:96px}
.faq section+section{margin-top:44px}
.faq h2{margin-bottom:4px;font:700 21px/1.2 var(--text)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:16px 44px 14px 0;font:600 17px/1.4 var(--text)}
.faq summary:hover{color:var(--volt-ink)}
.faq details p{margin:-2px 0 20px;max-width:700px;color:var(--ink-2)}
@media(max-width:900px){.faqw{grid-template-columns:minmax(0,1fr);gap:28px}.rail{display:contents}.rail nav{flex-direction:row;flex-wrap:wrap;gap:6px}.rail nav button{background:var(--card);padding:8px 14px;font-size:15px}.rail .ad{order:3}.faq{order:2}}
.tl{position:relative;max-width:900px;padding-left:170px}
.tl::before{content:"";position:absolute;left:128px;top:10px;bottom:10px;width:2px;background:var(--line-2)}
.tli{position:relative;padding:4px 0 44px}
.tli time{position:absolute;left:-170px;top:6px;width:104px;text-align:right;font:700 15px/1.3 var(--text);color:var(--ink-2)}
.tli::before{content:"";position:absolute;left:-48px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--volt);border:3px solid var(--page);z-index:1}
.tli .kick2{display:inline-block;padding:2px 8px;border-radius:4px;background:var(--card);font:600 13px var(--text);color:var(--ink-2)}
.tli h2{margin:10px 0 6px;font:700 23px/1.25 var(--text)}
.tli p{margin:0;color:var(--ink-2);max-width:640px}
.tli p+p{margin-top:10px}
.tlb{all:unset;cursor:text}
.tlb:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
@media(max-width:700px){.tli.lng .tlb{cursor:pointer;display:block;padding-right:28px;position:relative}.tli.lng .tlb::after{content:"";position:absolute;right:4px;top:.4em;width:8px;height:8px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .2s}.tli.lng.open .tlb::after{transform:rotate(225deg);top:.6em}.tli.lng:not(.open) .tlx{display:none}.tli.lng{padding-bottom:32px}}
.tli .src{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;font-weight:600}
.tli.soon::before{background:var(--line-2)}
.tli.soon p{color:var(--ink-3)}
@media(max-width:700px){.tl{padding-left:32px}.tl::before{left:6px}.tli time{position:static;display:block;width:auto;text-align:left;margin-bottom:6px}.tli::before{left:-32px;top:4px}}
.prose{max-width:760px}
.prose>p:first-child{margin-top:0;font:500 21px/1.5 var(--text);color:var(--ink)}
.prose p{color:var(--ink-2)}
.prose h2{margin:44px 0 10px;font:700 26px/1.2 var(--text)}
.prin{margin:30px 0 0}
.prin div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:4px 28px;padding:18px 0;border-top:1px solid var(--line-2)}
.prin dt{font:700 18px/1.3 var(--text)}.prin dd{margin:0;color:var(--ink-2)}
@media(max-width:700px){.prin div{grid-template-columns:minmax(0,1fr)}}
.disc{margin-top:40px;padding:18px 20px;border-radius:14px;background:var(--card);color:var(--ink-2);font-size:15px}

/* Voet: de weg */
.foot{margin-top:110px;background:var(--asph);color:var(--on-asph-2);font-size:15px;padding-bottom:env(safe-area-inset-bottom,0px)}
.fin{display:flex;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding-top:48px}
.fin .brand{color:#fff}
.fin p{margin:12px 0 0;max-width:340px}
.fin nav{display:flex;flex-wrap:wrap;gap:8px 24px;align-content:flex-start}
.fin nav a{color:var(--on-asph);text-decoration:none;font-weight:600}.fin nav a:hover{color:var(--amber)}
.fdis{margin-top:36px;padding:20px 0 40px;border-top:1px solid var(--asph-3);font-size:14px}

@media print{
 body{background:#fff}
 .top,.mini,.ad,.acts,.add,.foot,.lnk,.pick,.sumb,.fcta,dialog{display:none!important}
 .board,.vsl,.pbc{box-shadow:none;break-inside:avoid}
}

/* Voertuigkeuze */
.pick{margin:0 0 22px}
.pickl{margin:0 0 10px;font:600 15px var(--text);color:var(--ink-2)}
.vts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.vt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:14px 16px 13px;border:0;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:box-shadow .12s}
.vt svg{width:58px;height:26px;margin-bottom:8px;color:var(--ink-3);transition:color .12s}
.vt b{font:700 16px/1.25 var(--text)}
.vt small{font-size:13px;line-height:1.35;color:var(--ink-3)}
.vt:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.vt[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--ink)}
.vt[aria-checked=true] svg{color:var(--volt)}
@media(max-width:760px){.vts{grid-template-columns:repeat(2,minmax(0,1fr))}.vt{padding:12px 12px 11px}.vt svg{width:48px;height:22px}}

/* Jouw cijfers: samenvatting en één duidelijke knop */
.sumh{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap;margin-top:44px}
.sumh h2{font:700 22px/1.2 var(--text)}
.sumh p{margin:4px 0 0;max-width:640px;color:var(--ink-3);font-size:15px}
.sumb{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
button.cta{border:0;cursor:pointer}
.cta svg{width:18px;height:18px}
.sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:14px;border-radius:14px;overflow:hidden;background:var(--line);box-shadow:0 0 0 1px var(--line)}
.st{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:14px 40px 14px 16px;border:0;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.st span{font-size:13px;color:var(--ink-3)}
.st b{font:700 17px/1.3 var(--text);font-variant-numeric:tabular-nums}
.st svg{position:absolute;top:14px;right:14px;width:16px;height:16px;color:var(--line-2);transition:color .12s}
.st:hover{background:var(--soft)}.st:hover svg{color:var(--ink)}
@media(max-width:900px){.sum{grid-template-columns:repeat(2,minmax(0,1fr))}.st:last-child{grid-column:1/-1}}

/* Invulvenster: één onderwerp per stap */
dialog.wz{width:min(980px,calc(100vw - 32px));max-width:none;max-height:none;padding:0;border:0;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden}
dialog.wz::backdrop{background:rgba(21,23,26,.5)}
.wzi{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:min(780px,calc(100vh - 32px))}
.wzh{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px 14px 24px;border-bottom:1px solid var(--line)}
.wzk{margin:0;font-size:13px;color:var(--ink-3)}
.wzh h2{font:700 20px/1.2 var(--text)}
.wzx{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:8px;background:none;color:var(--ink-2);cursor:pointer}
.wzx:hover{background:var(--soft);color:var(--ink)}
.wzx svg{width:20px;height:20px}
.wzn{display:flex;flex-direction:column;gap:2px;padding:14px 12px;overflow:auto;background:var(--soft);border-right:1px solid var(--line)}
.wzn button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--ink-2);font:600 15px var(--text);text-align:left;cursor:pointer}
.wzn button:hover{color:var(--ink);background:rgba(21,23,26,.04)}
.wzn .num{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);font:700 12px var(--text);color:var(--ink-3)}
.wzn button.done .num{background:var(--volt);color:#fff;box-shadow:none}
.wzn button[aria-current=step]{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.wzn button[aria-current=step] .num{background:var(--ink);color:#fff;box-shadow:none}
.wzb{padding:18px 26px 20px;overflow:auto}
dialog.wz .sl+.sl{margin-top:8px}
dialog.wz .hint{margin-top:5px}
#dwG{display:flex;flex-direction:column;gap:14px;margin-top:14px}
#dwG .plate{margin-bottom:0}
#dwG>.sl{margin-top:10px}
#lcW{display:flex;flex-direction:column;gap:14px;margin-top:14px}
#lcW .sl+.sl{margin-top:0}
#lcW .slh{min-height:26px}
#lcW input[type=range]{margin:2px 0}
/* Lage schermen: alles iets dichter op elkaar, zodat een stap zonder scrollen past */
@media(max-height:700px){.wzb{padding-top:16px!important;padding-bottom:12px!important}.sl+.sl{margin-top:8px!important}.wsec+.wsec{margin-top:14px!important}.hint{margin-top:6px}.qk{margin-top:2px}.dex>.dxt{margin-bottom:12px!important}.nwg{margin-bottom:10px}.nwu .plate{margin-bottom:10px}.hint{margin-top:4px}}
@media(max-height:700px) and (min-width:761px){.wzi{height:calc(100vh - 16px)}.wzf{padding-top:10px;padding-bottom:10px}}
@media(max-height:660px) and (max-width:760px){.wzb{padding-top:12px!important;padding-bottom:4px!important}.wzl{display:none}.wzh{padding-bottom:6px}.slh{min-height:28px!important}.nwu .plate{height:36px}.dex>.dxt button,.nwg button{padding-top:5px;padding-bottom:5px}.wzf .wbtn,.wzf .cta{min-height:42px}}
.xg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;align-items:end}
.xguit{opacity:.45}.xg>.sl+.sl{margin-top:0}.xg>:is(.ws-row,.hint){grid-column:1/-1}
@media(max-width:760px){.xg{display:block}.xg>.sl+.sl{margin-top:16px}}
.wst h3{font:700 24px/1.2 var(--text);outline:0}
.wsi{margin:6px 0 22px;color:var(--ink-2)}
.wsec+.wsec{margin-top:28px}
.wsl{margin:0 0 10px;font:600 15px var(--text)}
.wzf{grid-column:1/-1;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:14px 20px 14px 24px;border-top:1px solid var(--line);background:var(--card)}
.wzl{margin:0 auto 0 0;font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.wzl b{color:var(--ink)}.wzl .good{color:var(--volt-ink)}.wzl .bad{color:var(--amber-ink)}
.wbtn{border:0;border-radius:8px;padding:11px 18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:600 15px var(--text);cursor:pointer}
.wbtn:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.wzpg{display:none;grid-column:1/-1;height:4px;background:var(--line)}
.wzpg i{display:block;height:100%;background:var(--ink);transition:width .2s}
.dex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
.dexc{min-width:0}
.dex>.dxt{display:none}
@media(max-width:760px){
 .dex>.dxt{display:flex;width:100%;margin:0 0 20px}
 .dxt button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}
 .dxt i{width:9px;height:9px;border-radius:2px}.dxt i.d{background:var(--amber)}.dxt i.e{background:var(--volt)}
 .dxt button[aria-selected=true]{background:var(--ink);color:#fff}
 .dex .dexh{display:none}
 .dex[data-tab="0"]>.ce,.dex[data-tab="1"]>.cd{display:none}
}
.dexh{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);font:700 15px var(--text)}
.dexh i{width:10px;height:10px;border-radius:2px}
.dexh .d{background:var(--amber)}.dexh .e{background:var(--volt)}
.qk{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.qk button{border:0;border-radius:999px;padding:6px 12px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font:600 13px var(--text);font-variant-numeric:tabular-nums;cursor:pointer}
.qk button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.qk button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.selw{position:relative;display:block}
.selw select{width:100%;-webkit-appearance:none;appearance:none;border:0;border-radius:8px;padding:11px 40px 11px 12px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:600 17px var(--text);cursor:pointer}
.selw select:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}
.selw::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);pointer-events:none}
.res{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--volt-soft);color:var(--volt-ink);font-weight:600}
.res span{display:block;font-weight:400;font-size:14px;color:var(--ink-2)}
@media(max-width:760px){
 dialog.wz{width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
 .wzi{grid-template-columns:minmax(0,1fr);height:100dvh;grid-template-rows:auto auto minmax(0,1fr) auto}
 .wzn{display:none}.wzpg{display:block;grid-row:2}
 .wzh{padding:calc(12px + env(safe-area-inset-top,0px)) 12px 12px 18px}
 .wzb{padding:20px 18px 28px}
 .wzf{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
 .wzl{flex-basis:100%;font-size:14px}
 .wzf .cta{margin-left:auto}
 .dex{grid-template-columns:minmax(0,1fr)}
}

/* Kerncijfers onder de uitkomst */
.ins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:16px;border-radius:14px;overflow:hidden;background:var(--line);box-shadow:0 0 0 1px var(--line)}
.in{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px 15px;border:0;background:var(--card);color:var(--ink);font:inherit;text-align:left}
button.in{cursor:pointer}button.in:hover{background:var(--soft)}
.in span{font-size:13px;color:var(--ink-3)}
.in b{font:700 26px/1.15 var(--display);font-variant-numeric:tabular-nums}
.in small{font-size:13px;color:var(--ink-3)}
.in small.warn{color:var(--amber-ink);font-weight:600}
.rbar{position:relative;display:block;height:6px;margin:6px 0 4px;border-radius:3px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.rbar i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--volt)}
.rbar.over i{background:var(--amber)}
@media(max-width:900px){.ins{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cmain{min-width:0}
/* Voorpagina: uitgangspunten direct onder het scorebord, twee kerncijfers */
.story{margin:0 0 20px}
.story .sumh{margin-top:0}
.ins{grid-template-columns:repeat(3,minmax(0,1fr))}
@keyframes flash{0%,40%{background:var(--volt-soft)}100%{background:transparent}}
/* Gevoeligheid voor energieprijzen */
.snw{margin-top:18px}
.snw .hm{width:100%}

/* Kleinere details */
.intro{align-items:center;padding:30px 0 22px}
.slv .un:first-child{margin-right:-2px}
.ws-row{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.ws-row:has(>.sw2.ln){margin-bottom:16px}.ws-row>.sw2.ln{margin-bottom:0}

/* Vraagteken en uitlegvenster */
.slb{display:inline-flex;align-items:center;gap:7px;min-width:0}
.qi{flex:none;display:inline-grid;place-items:center;width:19px;height:19px;padding:0;border:0;border-radius:50%;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3);font:700 11px/1 var(--text);cursor:pointer;vertical-align:1px}
.qs{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0;border:0;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3);font:700 12px/1 var(--text);cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.qs:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.qs[aria-pressed=true]{padding:0 8px;background:var(--ink);color:#fff;box-shadow:none;font:600 11px/1 var(--mono)}
/* Bandbreedte op de schuif: twee extra bolletjes rond je waarde */
.srg{position:relative}
.sl:not(.rng) .rx,.sl:not(.rng) .rxl{display:none!important}
.slb{flex-wrap:wrap}
.rxp{display:inline-flex;align-items:center;height:22px;padding:2px;gap:1px;border-radius:11px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-2)}
.rxp:not(.open){display:none}
.qs{position:relative}
.qs::after{content:attr(data-tt);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);padding:6px 9px;border-radius:6px;background:var(--ink);color:#fff;font:500 12px/1.3 var(--text);letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:5}
.qs:hover::after,.qs:focus-visible::after{opacity:1;transition-delay:.15s}
@media(hover:none){.qs::after{display:none}}
.slb:has(.rxp.open) .qs{display:none}
.rxp button{height:18px;padding:0 7px;border:0;border-radius:9px;background:none;font:500 11px/18px var(--mono);color:var(--ink-2);cursor:pointer;font-variant-numeric:tabular-nums}
.rxp button:hover{color:var(--ink);background:var(--card)}
.rxp button[aria-pressed=true]{background:var(--ink);color:#fff}
.rxp .rxo{color:var(--ink-3);border-left:1px solid var(--line-2);border-radius:0 9px 9px 0;margin-left:2px}
.rng .srg{padding-bottom:18px}
.rng .rx{display:block;position:absolute;left:0;right:0;top:0;pointer-events:none;background:none}
.rng .rx::-webkit-slider-runnable-track{background:none}
.rng .rx::-moz-range-track{background:none}.rng .rx::-moz-range-progress{background:none}
.rng .rx::-webkit-slider-thumb{pointer-events:auto;border:0;box-shadow:none;background:radial-gradient(circle,var(--thumb) 4.5px,var(--fill) 5px 8px,transparent 8.5px)}
.rng .rx::-moz-range-thumb{pointer-events:auto;width:24px;height:24px;border:0;box-shadow:none;background:radial-gradient(circle,var(--thumb) 4.5px,var(--fill) 5px 8px,transparent 8.5px)}
.rng .rx:focus-visible::-webkit-slider-thumb{box-shadow:none;background:radial-gradient(circle,var(--thumb) 4.5px,var(--fill) 5px 8px,rgba(120,130,130,.3) 8.5px 12px,transparent 12.5px)}
.rng>.srg>input:not(.rx)::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--track) calc(var(--a)*(100% - 24px) + 12px),color-mix(in srgb,var(--fill) 40%,var(--track)) calc(var(--a)*(100% - 24px) + 12px) calc(var(--b)*(100% - 24px) + 12px),var(--track) calc(var(--b)*(100% - 24px) + 12px))}
.rng>.srg>input:not(.rx)::-moz-range-track{background:linear-gradient(90deg,var(--track) calc(var(--a)*(100% - 24px) + 12px),color-mix(in srgb,var(--fill) 40%,var(--track)) calc(var(--a)*(100% - 24px) + 12px) calc(var(--b)*(100% - 24px) + 12px),var(--track) calc(var(--b)*(100% - 24px) + 12px))}
.rng>.srg>input:not(.rx)::-moz-range-progress{background:none}
.rng .rxl{display:block;position:absolute;top:32px;font:500 11px var(--mono);letter-spacing:.02em;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.brr{display:block;margin-top:2px;font:500 13px var(--mono);opacity:.7;font-variant-numeric:tabular-nums}
.inr{display:block;font:500 12px var(--mono)!important;color:var(--ink-2)!important;font-variant-numeric:tabular-nums}
.rr{display:block;font:500 11px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.pbr{margin-top:6px;font-size:15px;color:var(--ink-2)}.pbr b{font-weight:600;color:var(--ink)}
.pbqr{display:block;font:500 12px var(--mono)!important;color:var(--ink-3)}
.wwk{position:absolute;left:50%;width:2px;margin-left:-1px;background:var(--ink);opacity:.55}
.wwk::before,.wwk::after{content:"";position:absolute;left:-5px;width:12px;height:2px;background:inherit}.wwk::before{top:0}.wwk::after{bottom:0}
.brg{display:block;margin-top:2px;font-size:15px;color:var(--ink-2)}.bfoot .brg b{font-weight:600!important;color:var(--ink)}
.qi:hover,.qi[aria-expanded=true]{background:var(--ink);color:#fff;box-shadow:none}
.qt{position:fixed;z-index:60;width:min(340px,calc(100vw - 24px));padding:16px 44px 6px 18px;border-radius:12px;background:var(--ink);color:#E4E2DC;box-shadow:0 24px 50px -18px rgba(0,0,0,.55);font-size:14px;line-height:1.5;outline:0}
.qt p{margin:0 0 10px}
.qt .qtt{margin-bottom:6px;font-weight:700;font-size:15px;color:#fff}
.qtl{display:flex;flex-direction:column;gap:6px;margin:2px 0 12px}
.qtl a{color:#9BE3BC;font-weight:600;text-decoration-color:rgba(155,227,188,.4)}
.qtl a:hover{color:#fff}
.qtx{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:none;color:#B9B4AA;cursor:pointer}
.qtx:hover{background:rgba(255,255,255,.08);color:#fff}
.qtx svg{width:16px;height:16px}
@media(max-width:640px){.qt{left:0!important;right:0;top:auto!important;bottom:0;width:auto;border-radius:18px 18px 0 0;padding:22px 52px calc(10px + env(safe-area-inset-bottom,0px)) 20px;font-size:15px}}
.wsl{display:flex;align-items:center;gap:7px}
.wzb .wst>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Eén duidelijke uitnodiging: in het scorebord, en zwevend zolang je nog niets hebt ingevuld */
.bcta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding:18px clamp(18px,3.4vw,40px);background:var(--volt);color:#fff}
.bct b{display:block;font:700 18px/1.25 var(--text)}
.bct span{display:block;margin-top:2px;font-size:14px;color:#D2F0E0}
.cta.big{padding:15px 26px;border-radius:10px;background:#fff;color:var(--ink);font:700 17px var(--text);box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.cta.big:hover{background:#F2F7F4;color:var(--ink)}
.cta.big svg{width:20px;height:20px}
.fcta{position:fixed;z-index:24;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:14px 24px;background:var(--volt);color:#fff;font:700 16px var(--text);box-shadow:0 16px 34px -12px rgba(0,0,0,.5);cursor:pointer}
.fcta:hover{background:var(--volt-ink)}
.fcta svg{width:18px;height:18px}
.fdl{display:inline-block}/* Contact, privacy, cookies en KVK blijven bij elkaar en breken als groep */
/* Ruimte onder de pagina zodat de zwevende knop de laatste regels (zoals Totaal) niet bedekt */
body:has(#fcta:not([hidden])) .page:not([hidden]){padding-bottom:96px}
/* Laadring: bij hover pulseert een zachte groene lichtrand rond de knop, zoals rond een laadpoort tijdens het laden */
.cta.big,.fcta{position:relative;isolation:isolate}
.cta.big::before,.fcta::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:calc(var(--rr,10px) + 3px);border:2px solid #B4F7D4;box-shadow:0 0 14px 2px rgba(180,247,212,.7);opacity:0;transition:opacity .4s;pointer-events:none}
.fcta{--rr:999px}
.fcta::before{border-color:var(--volt-2);box-shadow:0 0 14px 2px rgba(63,168,119,.55)}
.cta.big:is(:hover,:focus-visible)::before,.fcta:is(:hover,:focus-visible)::before{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.cta.big:is(:hover,:focus-visible)::before,.fcta:is(:hover,:focus-visible)::before{animation:none;opacity:.6}}
.board.flash{animation:bflash 1.6s ease}
@keyframes bflash{0%{box-shadow:0 0 0 0 rgba(10,143,91,.55),0 40px 70px -50px rgba(0,0,0,.55)}100%{box-shadow:0 0 0 22px rgba(10,143,91,0),0 40px 70px -50px rgba(0,0,0,.55)}}
.wzs{margin:2px 0 0;font-size:14px;color:var(--ink-3)}
@media(max-width:640px){.bcta{padding:16px 14px}.cta.big{width:100%;justify-content:center}.fcta{left:12px;right:12px;transform:none;justify-content:center;border-radius:12px}}
@media (prefers-reduced-motion:reduce){.board.flash{animation:none}}

/* Modellen: per voertuig wat er elektrisch te koop is, als lijst die je filtert, openklapt en vergelijkt */
.mtools{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;margin:0 0 16px}
.mcat{display:inline-flex}
.mcat button small{margin-left:6px;font-size:13px;font-weight:500;opacity:.6}
.mopt{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap}
.mopt .selw select{padding:8px 38px 8px 12px;font-size:15px;background:var(--card)}
.msrt{display:flex;align-items:center;gap:10px;font:600 15px var(--text);color:var(--ink-2)}
.mfind{display:flex;align-items:end;gap:12px 24px;flex-wrap:wrap;margin:0 0 16px}
.msearch{display:flex;flex-direction:column;gap:5px;flex:1 1 280px;max-width:480px;font:600 14px var(--text);color:var(--ink-2)}
.msearch input{width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--line-2);border-radius:9px;background:var(--card);color:var(--ink);font:400 16px var(--text)}
.mcount{margin:0 0 10px;font-size:14px;color:var(--ink-3)}
/* Modelkeuze in de stap Aanschaf: één rustige regel die een korte, doorzoekbare lijst opent */
.mpint{margin:0 0 10px;color:var(--ink);font-size:15px;font-weight:700;line-height:1.45}
.mpk{position:relative;margin:0 0 22px}
.mpb{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:0;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mpb:hover,.mpb[aria-expanded=true]{box-shadow:inset 0 0 0 1px var(--ink)}
.mpb>i{flex:none;width:10px;height:10px;border-radius:2px;background:var(--volt)}
.mpb>span{flex:1;min-width:0;display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.mpb small{font-size:14px;color:var(--ink-2)}
.mpb b{font:600 15px var(--text);color:var(--ink-3)}
.mpb.on b{color:var(--ink)}
.mchev{flex:none;width:18px;height:18px;color:var(--ink-3);transition:transform .2s}
.mpb[aria-expanded=true] .mchev{transform:rotate(180deg)}
.mpp{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);padding:8px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 18px 40px -16px rgba(0,0,0,.35)}
.mpp input{width:100%;padding:9px 12px;border:0;border-radius:8px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:400 16px var(--text);outline:0}
.mpp input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.mpl{max-height:264px;overflow:auto;margin-top:6px;overscroll-behavior:contain}
.mpo{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mpo:hover,.mpo:focus-visible{background:var(--soft);outline:0}
.mpo[aria-selected=true]{background:var(--volt-soft)}
.mpo span{display:flex;flex-direction:column;min-width:0}
.mpo small{font-size:12px;color:var(--ink-3)}
.mpo b{font:600 15px/1.3 var(--text)}
.mpo em{flex:none;font-style:normal;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mpk .hint{margin-top:8px;line-height:1.6}
.mpk .hint b{color:var(--ink-2);font-weight:600}
.mpnone{margin:0;padding:12px 10px;font-size:14px;color:var(--ink-3)}
.mfil{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin:0 0 22px;padding:12px 14px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.mfil>span{font:600 14px var(--text);color:var(--ink-3)}
.mfil .seg.sm{background:var(--soft)}
.mfil .selw select{padding:7px 36px 7px 12px;font-size:14px;background:var(--soft)}
.mfil .sw2{margin-left:auto}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.mc{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:14px;align-items:start;padding:20px 20px 18px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:box-shadow .15s}
.mc:hover{box-shadow:0 0 0 1px var(--line-2),0 10px 26px -18px rgba(0,0,0,.35)}
.mc.sel{box-shadow:0 0 0 2px var(--volt)}
.mch{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:var(--ink-3)}
.mbrand{min-width:0;color:var(--ink-2);font:600 17px/1.3 var(--text);overflow-wrap:anywhere}
.mch .mst{flex:none;font-size:13px}
.mch>span:first-child{font:600 16px/1.2 var(--text);color:var(--ink-2)}
.mst{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--volt-ink)}
.mst i{width:7px;height:7px;border-radius:50%;background:var(--volt)}
.mst.soon{color:#8A5308}.mst.soon i{background:var(--amber)}
.mcn{margin:-10px 0 0;font:700 21px/1.2 var(--text);color:var(--ink)}
.mvar .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding:0;background:none;box-shadow:none}
.mvar .seg>*{flex:none}
.mvar .seg button{padding:5px 11px;font-size:13px;box-shadow:inset 0 0 0 1px var(--line-2)}
.mvar .seg button[aria-checked=true]{background:var(--ink);color:#fff;box-shadow:none}
.mvar .seg small{font-size:11px;opacity:.7}
.mcr{display:flex;flex-direction:column;gap:8px}
.mcr p{display:flex;align-items:baseline;gap:7px;margin:0;color:var(--ink-3);font-size:14px}
.mcr b{font:600 40px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.mcr small{font-size:15px;color:var(--ink-2)}
.mbar{position:relative;display:block;height:6px;border-radius:3px;background:var(--line)}
.mbar i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--volt)}
.mbar i.mx{opacity:.35}
.mcs{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.mcs li{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mcs b{color:var(--ink);font-weight:600}
.mcs svg{width:18px;height:18px;color:var(--ink-3)}
.mcs .na{color:var(--ink-3)}
.mcs .mpr{flex-basis:100%}
.mca{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;align-self:end;padding-top:14px;border-top:1px solid var(--line)}
.mca .cta{padding:9px 14px;font-size:14px}
.mca .cta svg{width:16px;height:16px}
.mcv{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-2);cursor:pointer}
.mcv input{width:17px;height:17px;margin:0;accent-color:var(--ink);cursor:pointer}
.mcv input:disabled{cursor:not-allowed;opacity:.35}
.mcn a{color:inherit;text-decoration:none}
.mcn a:hover{text-decoration:underline}
/* Zero-emissiezone per gemeente */
.zwr{max-width:860px;padding-top:30px}
.zkg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;max-width:760px;margin:28px 0 0;border-radius:8px;overflow:hidden;background:var(--line);box-shadow:0 0 0 1px var(--line)}
.zkg div{padding:14px 18px;background:var(--card)}
.zkg dt{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.zkg dd{margin:4px 0 0;font:600 17px/1.4 var(--text);color:var(--ink)}
.ga .zno{max-width:700px;margin:16px 0 0;padding:12px 16px;border-left:3px solid var(--volt);background:var(--card);color:var(--ink-2)}
@media(max-width:560px){.zkg{grid-template-columns:minmax(0,1fr)}}
.vcrumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;font-size:14px;color:var(--ink-3)}
.vcrumb a{color:var(--ink-2)}
.vspec{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.vspec th,.vspec td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.vspec th{font-size:13px;color:var(--ink-3);font-weight:600}
.vspec td{font-variant-numeric:tabular-nums}
.vwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vwrap .vspec{min-width:560px}
.vlinks{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:18px}
a.mci{text-decoration:none}
.mci{margin-left:auto;border:0;background:none;padding:4px 0;font:600 14px var(--text);color:var(--ink-3);cursor:pointer}
.mci:hover{color:var(--ink)}
.mkv{margin:0}
.mkv div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.mkv dt{font-size:14px;color:var(--ink-3)}
.mkv dd{margin:0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.mkv small{font-size:13px;font-weight:400;color:var(--ink-3)}
.minfo>p{margin:0 0 16px;max-width:640px;color:var(--ink-2);line-height:1.6}
.minfo .cta{margin-top:20px}
.mnone{padding:40px 22px;text-align:center;color:var(--ink-3)}
.mdisc{margin:18px 0 0;font-size:14px;color:var(--ink-3)}
.mcmp{position:fixed;z-index:24;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:8px 8px 8px 20px;border-radius:12px;background:var(--ink);color:#fff;font:600 15px var(--text);box-shadow:0 16px 34px -12px rgba(0,0,0,.5);white-space:nowrap}
.mcmp .lnk{color:#fff}
.mcmp .lnk:hover{color:var(--volt-soft)}
.mcmp .cta{background:#fff;color:var(--ink)}
.mcmp .cta:hover{background:var(--volt-soft);color:var(--ink)}
.mcmp .cta:disabled{opacity:.45;cursor:default}
dialog.mdlg{width:min(940px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}
dialog.mdlg::backdrop{background:rgba(21,23,26,.5)}
.mdh{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 20px 8px 26px}
.mdh h2{font:700 22px/1.2 var(--text)}
.mdb{padding:0 26px 26px;overflow-x:auto}
.mct{width:100%;min-width:560px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mct th,.mct td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.mct thead th{padding-top:4px;vertical-align:bottom}
.mct thead th small{display:block;font-size:13px;font-weight:500;color:var(--ink-3)}
.mct thead th b{font:700 18px/1.25 var(--text)}
.mct tbody th{width:150px;font-weight:600;font-size:14px;color:var(--ink-3)}
.mct td.best{color:var(--volt-ink);font-weight:700}
.mct .mbar{display:block;margin-top:8px;max-width:200px}
.mct tr:last-child td,.mct tr:last-child th{border-bottom:0}
.toast{position:fixed;z-index:26;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100vw - 24px);padding:12px 12px 12px 20px;border-radius:12px;background:var(--ink);color:#fff;font-size:15px;box-shadow:0 16px 34px -12px rgba(0,0,0,.5)}
.toast b{font-weight:700}
.toast .cta{flex:none;padding:8px 14px;background:#fff;color:var(--ink)}
.toast .wzx{flex:none;width:32px;height:32px;color:#fff}
.toast .wzx svg{width:18px;height:18px}
@media(max-width:760px){
 .mfil .sw2{margin-left:0}
 #mRgL{display:none}
 .mcat,.mfil #mRg{flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
 .mcat>*,.mfil #mRg>*{flex:none}
 .mfil{gap:10px}
 .mtools .msearch{flex-basis:100%}
 .mgrid{grid-template-columns:minmax(0,1fr)}
 .mcmp,.toast{left:12px;right:12px;transform:none;width:auto}
 .mcmp{justify-content:space-between;gap:12px}
 .toast{flex-wrap:wrap}
}

/* Overhaul: één calculator, rustige knoppen en optionele kosten */
.vsl{box-shadow:0 0 0 1px var(--line)}
.colh{border-bottom:1px solid var(--line)}
.colh>span{padding:14px 22px 12px;font-size:13px}
.colh .cd::before,.colh .ce::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:2px;vertical-align:0}
.colh .cd::before{background:var(--amber)}.colh .ce::before{background:var(--volt)}
.row:first-child{border-top:0}
.rv{font-variant-numeric:tabular-nums}
.rd .bar{border-radius:6px 2px 2px 6px}
.bar{height:10px}
.tot{border-top:1px solid var(--ink)}
.sumh{align-items:center;margin-top:48px}
.sumb{gap:12px 20px}
.sumb .btn{padding:8px 14px;font-size:15px}
.sum{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.st:last-child{grid-column:auto}
.bfoot .acts{margin-left:auto}
.add{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-top:20px;padding:20px 24px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.addt h2{font:700 19px/1.25 var(--text)}
.addt p{margin:3px 0 0;color:var(--ink-3);font-size:15px}
.addl{display:flex;flex-wrap:wrap;gap:8px}
.addc{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 11px;border:0;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:600 15px var(--text);cursor:pointer;white-space:nowrap}
.addc:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.addc i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--soft);font:700 14px/1 var(--text);font-style:normal;color:var(--ink-2)}
.addc small{font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
.addc[aria-pressed=true]{background:var(--volt-soft);box-shadow:inset 0 0 0 1px #B8DCC8;color:var(--volt-ink)}
.addc[aria-pressed=true] i{background:var(--volt);color:#fff}
.addc[aria-pressed=true] small{color:var(--volt-ink)}
.an{margin-top:56px}
.wzn .wzo{margin:14px 10px 4px;padding-top:12px;border-top:1px solid var(--line);font:600 12px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wzn button.opt .num{font-size:14px}
.wzn button.opt.on .num{background:var(--volt-soft);color:var(--volt-ink);box-shadow:none}
.wst>.sw2.ln{padding:12px 14px;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.wsti{margin:-12px 0 20px;color:var(--ink-2);font-size:15px;max-width:620px}
.st:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:640px){.sumb .btn span{display:inline}.add{padding:18px 16px}.addl{width:100%}.sumb{width:100%;justify-content:space-between}}

/* Huisstijl: zakelijk en ingetogen. Een donkere kopbalk, haarlijnen in plaats van zwevende kaarten,
   kleine hoeken, geen gloed of pulserende effecten, en IBM Plex Sans voor de tekst. */
:root{--page:#F3F3F0;--line:#DCDCD7;--line-2:#C3C3BD;--soft:#F7F7F5;--text:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
body{font-size:16px}
/* Kopbalk */
.top,body::before{background:var(--asph)}
.top{border-bottom:3px solid var(--volt)}
.brand{color:#fff;font-weight:600;letter-spacing:0}
.brand:hover{color:#fff}
#nav a{color:var(--on-asph-2);border-radius:0;padding:8px 12px;font-weight:500}
#nav a:hover{color:#fff;background:none}
#nav a[aria-current=page]{color:#fff;background:none;box-shadow:inset 0 -2px 0 var(--volt)}
.mnu{background:#fff;color:var(--ink);border-radius:4px}
@media(max-width:900px){#nav{background:var(--asph)}#nav a[aria-current=page]{box-shadow:inset 3px 0 0 var(--volt)}}
/* Mini-scorebord sluit naadloos aan op de donkere kop: 1px eronder schuiven en een donkere rand erboven, zodat er bij afronding geen lichte streep tussen valt. */
.mini{top:calc(env(safe-area-inset-top,0px) + 66px);background:var(--asph)}
.mini::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:6px;background:var(--asph)}
/* Koppen */
.intro h1,.phead h1{font-weight:600;letter-spacing:-.015em}
.vsh h2,.an h2{font-weight:600;letter-spacing:-.01em}
/* Kleine hoeken, lijnen in plaats van schaduwen */
.board,.vsl,.ins,.sum,.add,.pbc,.vt,.mc,.mfil,.ad,.bec>*,.hmw,dialog.wz,dialog.mdlg,.mpp,.toast,.mcmp,.qt,.prin div{border-radius:6px!important}
.board{box-shadow:0 0 0 1px var(--line)!important}
.board.flash{animation:none!important}
.pbc{box-shadow:0 0 0 1px var(--line)}
.vt,.btn,.cta,.wbtn,.slv,.mpb,.seg,.seg button,.seg label span,.seg.sm,.seg.sm button,.chip,.qk button,.addc,.mtag,.mode,.mode a,.fcta,.selw select,.mpp input,.msearch input,.mpo,.wzn button,.lnk,.tag{border-radius:4px!important}
.seg.sm{padding:3px}
.cta.big,.fcta{box-shadow:none}
.cta.big::before,.fcta::before{display:none!important}
.who em,.mtag{border-radius:2px}
.who em{display:none}
/* Uitnodiging en knoppen: plat en duidelijk */
.bcta{background:var(--volt)}
.cta.big{border-radius:4px;font-weight:600}
.cta{font-weight:600}
.fcta{border-radius:4px}
/* Rustiger kerncijfers en lijsten */
.in b,.st b{letter-spacing:0}
.addc i{border-radius:2px}
.addc[aria-pressed=true] i{border-radius:2px}
.wzn .num{border-radius:3px}
.ad{background:var(--soft)}
.more summary b{font-weight:600}
.foot{border-top:3px solid var(--volt)}
.hint+.sl{margin-top:18px}



/* Serieus instrument: cijfers in Plex Condensed, labels als een meterpaneel in Plex Mono */
.big,.pbn,.in b,.tot .rv,.bc2>b,.mini b,.mini .mm,.mf b{font-weight:600!important}
.big{letter-spacing:-.02em}
.who,.in .slb,.colh>span,.wzk,.kick2,.tli time,.pbq span{font-family:var(--mono)!important;font-weight:500!important;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase}
.in .slb{color:var(--ink-3)}
.bfoot p{font-size:20px}
.mcount{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
/* Vlootanalyse */
.fln{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 28px;margin-top:56px;padding:22px 26px;border-radius:8px;background:#E8F2EC;color:var(--ink);text-decoration:none}
.fln:hover{color:var(--ink)}
.flv{display:grid;grid-template-columns:repeat(3,38px);gap:6px 8px}
.flv svg{display:block;width:38px;height:17px}.flv .g{color:var(--volt)}.flv .a{color:var(--amber)}
.fln div>span{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--volt-ink)}
.fln b{display:block;margin-top:4px;font:600 20px/1.3 var(--text);letter-spacing:-.01em}
.fln em{display:block;margin-top:2px;font-style:normal;color:var(--ink-2);font-size:15px}
.fln i{display:inline-flex;align-items:center;gap:10px;font:600 15px var(--text);font-style:normal;color:#fff;padding:11px 16px;border-radius:4px;background:var(--volt);white-space:nowrap}
.fln:hover i{background:var(--volt-ink)}
.fln i svg{width:18px;height:18px}
@media(max-width:760px){.fln{grid-template-columns:minmax(0,1fr)}.fln i{justify-self:start}}
/* Vlootanalyse: een rit op de kaart, de stappen en wat we narekenen links, het contactformulier rechts dat meescrolt. Op telefoon staat het formulier onder de kaart. */
.vz{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"h f" "s f" "v f" "p f" "r f" "k f";column-gap:48px;align-items:start;padding-top:18px;padding-bottom:40px}
.vzh{grid-area:h;padding:26px 28px 14px;border-radius:8px;background:#E8F2EC}
.vzh h1{margin:0;font:600 48px/1.05 var(--text);letter-spacing:-.015em;outline:0}
.vzh p{margin:10px 0 0;max-width:640px;font-size:19px;line-height:1.5;color:var(--ink-2)}
.vzm{display:block;width:100%;height:auto;max-height:150px;margin-top:10px}
.vzm .road{fill:none;stroke:#C9D6CE;stroke-width:16;stroke-linecap:round}.vzm .mid{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:10 10}
.vzm .dep path,.vzm .dep rect{fill:var(--card);stroke:var(--ink-3);stroke-width:1.6}
.vzm .ch{fill:var(--volt)}.vzm .blt{fill:#fff}
.vzm .zone{fill:rgba(10,143,91,.07);stroke:var(--volt);stroke-width:1.8;stroke-dasharray:6 6}
.vzm .city rect{fill:var(--card);stroke:var(--ink-3);stroke-width:1.3}
.vzm .trk{color:var(--volt)}.vzm .trk svg circle{fill:#E8F2EC}
.vzm .b6n circle{fill:var(--volt)}.vzm .b6n text{fill:#fff;font:600 14px var(--text);text-anchor:middle}
.vzf{grid-area:f;position:sticky;top:84px}
.vzf .ffm{position:relative;display:grid;gap:8px;padding:18px 20px 14px;border-radius:8px;box-shadow:0 0 0 1px var(--line),0 16px 34px -24px rgba(16,40,28,.35);scroll-margin-top:84px}
.vzf .ffm::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:8px 8px 0 0;background:var(--volt)}
.vzfh{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:4px}
.vzf .vzfh h2{margin:0;font:600 20px/1.2 var(--text);letter-spacing:-.01em}
.vzfh span{display:inline-flex;align-items:center;gap:7px;padding:3px 9px;border-radius:20px;background:var(--volt-soft);color:var(--volt-ink);font:600 12px var(--text)}
.vzfh i{width:7px;height:7px;border-radius:50%;background:var(--volt)}
.vzfh .vzfp{flex-basis:100%;margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}.vzfh .vzfp b{color:var(--ink);font-weight:600}
.vzf .ff{gap:3px}.vzf .ff>span,.vzf .ffs legend{font-size:11px}
.vzf .ff input{min-height:38px;padding:7px 10px}
.vzf .ffs{margin:0}.vzf .ffs legend{margin-bottom:3px}
.vzf .seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:2px;gap:2px}
.vzf .seg label span{display:grid;place-items:center;min-height:34px;padding:0 2px;font-size:13px}
.vzf .seg label input:checked+span{background:var(--volt-soft);color:var(--volt-ink);box-shadow:inset 0 0 0 1.5px var(--volt)}
.vzf .vcl{margin:0;padding:6px 6px 6px 12px;font:600 14px var(--text);letter-spacing:0;text-transform:none}
.vzf .ferr{margin:0}
.vzf .cta{justify-content:center;width:100%;min-height:42px;margin-top:6px;background:var(--volt);color:#fff}
.vzf .cta:hover{background:var(--volt-ink)}
.vzf .fnote{margin:2px 0 0;text-align:left}
.vz section>h2{margin:0 0 14px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.vzs{grid-area:s;margin-top:30px}
.vzs ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;counter-reset:vs}
.vzs li{counter-increment:vs;padding-top:10px;border-top:2px solid var(--line-2)}
.vzs li:first-child{border-top-color:var(--volt)}
.vzs b{display:block;font-weight:600;font-size:16px;line-height:1.3}
.vzs b::before{content:counter(vs,decimal-leading-zero);display:block;margin-bottom:4px;font:500 12px var(--mono);color:var(--ink-3)}
.vzs li:first-child b::before{color:var(--volt-ink)}
.vzs span{display:block;margin-top:4px;color:var(--ink-2);font-size:14px;line-height:1.45}
.vzv{grid-area:v;margin-top:56px}
.vzv ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px;margin:0;padding:0;list-style:none}
.vzv li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px}
.vzv .ic,.vzp .ic{width:26px;height:26px;color:var(--volt)}
.vzv h3{margin:0;font:600 18px/1.3 var(--text);letter-spacing:-.01em}
.vzv p{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.55}
.vzseo{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.vzseo h3{margin:28px 0 0}
.vzp{grid-area:p;margin-top:64px}
.vzpg{display:grid;grid-template-columns:200px minmax(0,1fr);gap:44px;align-items:center}
.vzpd{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(16,40,28,.12))}
.vxd .pg{fill:var(--card);stroke:var(--line);stroke-width:1.5}.vxd .gb{fill:var(--volt)}
.vxd .tl{fill:var(--ink-2)}.vxd .ln,.vxd .hr{fill:var(--line);stroke:var(--line);stroke-width:1}
.vxd .tg{color:var(--volt)}.vxd .ta{color:var(--amber)}
.vxd .bb{fill:#EEF1EE}.vxd .bg{fill:#9FD2B6}.vxd .bd{fill:var(--amber)}.vxd .be{fill:var(--volt)}
.vxd .st{fill:var(--volt)}.vxd .ck{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.vzp h3{margin:0;font:600 24px/1.25 var(--text);letter-spacing:-.01em}
.vzp p{margin:6px 0 0;color:var(--ink-2);font-size:16px;line-height:1.5}
.vzp ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:vp;border-top:1px solid var(--line)}
.vzp ol li{counter-increment:vp;display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:16px}
.vzp ol li::before{content:counter(vp,decimal-leading-zero);font:500 13px/1.6 var(--mono);color:var(--volt-ink)}
.vzr{grid-area:r;margin-top:64px}
.vzr ol{margin:0;padding:0;list-style:none;counter-reset:vr;border-top:1px solid var(--line)}
.vzr li{counter-increment:vr;display:grid;grid-template-columns:22px 180px minmax(0,1fr);gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.vzr li::before{content:counter(vr);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--volt);color:#fff;font:600 12px var(--text);align-self:start}
.vzr b{font-weight:600;font-size:16px}
.vzr span{color:var(--ink-2);font-size:15px;line-height:1.5}
.vzk{grid-area:k;margin-top:64px;padding:26px 28px 28px;border-radius:8px;background:#E8F2EC}
.vz .vzk>h2{color:var(--volt-ink)}
.vzkl{margin:0;max-width:560px;font:600 24px/1.3 var(--text);letter-spacing:-.01em}
.vzk ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:22px 0 0;padding:0;list-style:none}
.vzk li{padding:0 18px;border-left:1px solid #C9D6CE}.vzk li:first-child{padding-left:0;border-left:0}
.vzk b{display:block;font:600 32px/1 var(--display)}.vzk span{display:block;margin-top:6px;color:var(--ink-2);font-size:14px;line-height:1.45}
.vzm .b6n .hl{fill:rgba(10,143,91,.16);opacity:0;transition:opacity .15s}.vzm .b6n.on .hl{opacity:1}
.vzs1{cursor:pointer}.vzs1:hover b{color:var(--volt-ink)}
.vzv p a{color:var(--volt-ink)}
.vxd .bw{fill:#fff}.vxd .ol{fill:none;stroke:var(--ink-3);stroke-width:1.5}.vxd .tlx{stroke:var(--line-2);stroke-width:2}
.vzpd g[data-p]{transition:opacity .2s}.vzpd.hl g[data-p]:not(.on){opacity:.18}
.vzp ol li{display:block;padding:0}.vzp ol li::before{content:none}
.vzp ol a{display:flex;align-items:baseline;gap:14px;padding:10px 0;color:inherit;text-decoration:none}
.vzp ol a::before{content:counter(vp,decimal-leading-zero);font:500 13px/1.6 var(--mono);color:var(--volt-ink)}
.vzp ol em{margin-left:auto;font:500 13px var(--text);font-style:normal;color:var(--ink-3);white-space:nowrap}
.vzp ol em::after,.vzr li>a::after{content:" →"}
.vzp ol li.on a,.vzp ol li.on em{color:var(--volt-ink)}
.vzr li{grid-template-columns:22px 170px minmax(0,1fr) auto;margin:0 -10px;padding:12px 10px;border-radius:4px;transition:background .15s}
.vzr li.on{background:#EEF5F0}
.vzr li>a{font-weight:500;font-size:14px;color:var(--volt-ink);white-space:nowrap}
.vzk li a{display:block;color:inherit;text-decoration:none}
.vzk li a:hover b{color:var(--volt-ink)}
.vzc{grid-area:c;display:none;flex-direction:column;align-items:flex-start;gap:10px;margin-top:40px}
.vzc>span{color:var(--ink-3);font-size:14px}
.vzc .cta{background:var(--volt);color:#fff}
@media(max-width:1100px){.vz{grid-template-columns:minmax(0,1fr) 320px;column-gap:32px}.vzs ol,.vzk ul,.vzv ul{grid-template-columns:1fr 1fr;row-gap:24px}.vzk li:nth-child(3){padding-left:0;border-left:0}.vzr li{grid-template-columns:22px 130px minmax(0,1fr) auto}}
@media(max-width:900px){.vz{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "f" "s" "v" "p" "r" "k" "c"}.vzf{position:static;max-width:560px;margin-top:20px}.vzc{display:flex}}
.ff>span,.ffs legend,.vcl{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.fnote{margin:10px 0 0;text-align:center;color:var(--ink-3);font-size:13px}
.fnote a{color:inherit}
.vcl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px 0 18px;padding:9px 8px 9px 12px;border-radius:4px;background:var(--volt-soft);color:var(--volt-ink)}
.vcl button{border:0;background:none;color:inherit;font:600 18px/1 var(--text);padding:2px 6px;cursor:pointer}
.ff>span small{margin-left:4px;font:400 12px var(--text);color:var(--ink-3);text-transform:none;letter-spacing:0}
.ffm{padding:28px;border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.ffm h2{margin:0 0 20px;font:600 24px/1.2 var(--text);letter-spacing:-.01em}
.ffr{margin-bottom:14px}
.ffr.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ff{display:flex;flex-direction:column;gap:6px}
.ff>span,.ffl,.ffs legend{color:var(--ink-3)}
.ff input,.ff textarea{width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:4px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:400 16px var(--text)}
.ff textarea{resize:vertical;line-height:1.45}
.ff input:focus-visible,.ff textarea:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}
.ff input[aria-invalid=true]{box-shadow:inset 0 0 0 2px #C2410C}
.ffs{margin:0 0 16px;padding:0;border:0;min-width:0}
.ffs legend,.ffl{display:block;margin-bottom:6px;padding:0}
.ffs .seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ffs .seg label span{padding:9px 4px;font-size:14px}
.fhp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ferr{margin:0 0 14px;color:#C2410C;font-weight:600;font-size:15px}
.fsub{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.fsub a{color:var(--ink-3);font-size:14px}
.fsub .cta{border:0;cursor:pointer}
.fsub .cta[disabled]{opacity:.6;cursor:progress}
.fsub small{color:var(--ink-3);font-size:14px}
.fok p{margin:0;color:var(--ink-2)}
@media(max-width:560px){.ffr.two{grid-template-columns:minmax(0,1fr)}.ffm{padding:22px 18px}.fln{padding:18px}}
@media print{.fln{display:none!important}}
/* Cookiemelding: een duidelijke keuze bij het eerste bezoek, met gelijkwaardige knoppen. */
.ck{position:fixed;inset:0;margin:auto;width:min(540px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);height:fit-content;overflow:auto;padding:26px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--ink);box-shadow:0 24px 64px -16px rgba(0,0,0,.4);font:400 15px/1.5 var(--text)}
.ck::backdrop{background:rgba(21,23,26,.45)}
.ck p{margin:0}.ck p+p{margin-top:12px}
.ck a{color:inherit;text-underline-offset:3px}
.ckk{margin:0 0 12px;color:var(--ink);font:600 23px/1.25 var(--text);outline:none}
.ckn{color:var(--ink-2);font-size:14px}
.cko{display:grid;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.cko .sw2 input:disabled{opacity:.45;cursor:default}
.ckb{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.ckb button{min-width:0;border:1px solid var(--line-2);border-radius:6px;padding:12px 10px;background:var(--card);color:var(--ink);font:600 15px/1.3 var(--text);cursor:pointer}
.ckb button:hover{border-color:var(--ink);background:var(--soft)}
.ckb [data-ck=set]{grid-column:1/-1;border-color:transparent;padding:8px 10px;font-weight:500}
.ckb [data-ck=set]:hover{border-color:var(--line-2)}
.fck{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}.fck:hover{text-decoration:underline}
@media(max-width:640px){.ck{inset:auto 0 0;margin:0;width:100%;max-height:calc(100dvh - 16px);border-radius:14px 14px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px))}.ckk{font-size:22px}}
@media print{.ck{display:none!important}}
@media(max-width:700px){.colh>span{white-space:nowrap;padding-left:10px;padding-right:10px}.rl i{display:none}}
/* Uitgangspunten: acht blokjes, diesel boven elektrisch */
.sum{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,auto);grid-auto-flow:column}
.sum .st:last-child{grid-column:auto!important}
.st span i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:2px;vertical-align:1px}
.st span i.d{background:var(--amber)}.st span i.e{background:var(--volt)}
@media(max-width:900px){.sum{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row}}
/* Simpel en Uitgebreid */
.intro .mode{margin-left:auto}
.xgo{margin-top:28px;color:var(--ink);text-decoration:none}
.xgo:hover{color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.xgo .cta{flex:none}
.xsum{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:16px 20px;border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.xsum p{display:flex;flex-wrap:wrap;gap:6px 28px;margin:0;font-size:17px;color:var(--ink-2)}
.xsum b{color:var(--ink);font-variant-numeric:tabular-nums}
.xsum i{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:2px;vertical-align:1px}
.xsum i.d{background:var(--amber)}.xsum i.e{background:var(--volt)}
.xsum .good b{color:var(--volt-ink)}.xsum .bad b{color:var(--amber-ink)}
[data-page=uitgebreid] .vs{margin-top:40px}/* Uitgebreid: gevoeligheid met drie omslagpunten */
.snp{margin:8px 0 0;color:var(--ink-3);font-size:16px}
.snw .bec{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.snw .bec{grid-template-columns:minmax(0,1fr)}}
a.cta.big,a.fcta{text-decoration:none}
/* Simpel: twee kleine blokjes */
#ins{margin-top:12px}
#ins .in{padding:10px 14px 11px}
#ins .in b{font-size:20px}
#ins .in b small{font:500 13px var(--text);color:var(--ink-3)}
/* Laadeffect op Reken uitgebreid: een zachte lichtrand die rustig pulseert bij hover, subtieler dan eerst */
.cta.big::before,.fcta::before{display:block!important;inset:-3px;border-width:1.5px;box-shadow:0 0 8px 0 rgba(180,247,212,.5);border-radius:7px}
.fcta::before{box-shadow:0 0 8px 0 rgba(63,168,119,.4)}
.cta.big:is(:hover,:focus-visible)::before,.fcta:is(:hover,:focus-visible)::before{animation:pulse2 2.2s ease-in-out infinite}
@keyframes pulse2{0%,100%{opacity:.15}50%{opacity:.65}}
@media (prefers-reduced-motion:reduce){.cta.big:is(:hover,:focus-visible)::before,.fcta:is(:hover,:focus-visible)::before{animation:none;opacity:.4}}
/* Veelgestelde vragen: per categorie alleen de kop; de vragen klappen open als je erop staat met de muis (of tikt) */
.faq section{border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:0 20px;transition:box-shadow .15s}
.faq section+section{margin-top:12px}
.faq section>h2{position:relative;display:flex;align-items:baseline;gap:12px;margin:0;padding:18px 32px 18px 0;cursor:pointer;outline-offset:4px}
.faq section>h2 small{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.faq section>h2::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .2s}
.faq section>details{display:none}
.faq section:is(:hover,:focus-within,.open,:has(details[open]))>details{display:block}
.faq section:is(:hover,:focus-within,.open,:has(details[open])){box-shadow:0 0 0 1px var(--ink)}
.faq section:is(:hover,:focus-within,.open,:has(details[open]))>h2::after{transform:rotate(225deg);margin-top:-2px}
.faq section>details:first-of-type{border-top:1px solid var(--line)}
.faq section>details:last-of-type{border-bottom:0}
/* Uitgebreid: terugverdientijd en gevoeligheid in de huisstijl. Witte vlakken met haarlijnen,
   labels in Plex Mono, cijfers in Plex Condensed, oranje voor diesel en groen voor elektrisch. */
[data-page=uitgebreid] .pbc{padding:0;overflow:hidden}
[data-page=uitgebreid] .pbt{align-items:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
[data-page=uitgebreid] .pbq{display:contents}
[data-page=uitgebreid] .pbt>div:first-child,[data-page=uitgebreid] .pbq>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px 15px;background:var(--card)}
[data-page=uitgebreid] .pbt>div:first-child::before{content:"Terugverdientijd";font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
[data-page=uitgebreid] .pbn{font:600 26px/1.15 var(--display)!important;letter-spacing:0}
[data-page=uitgebreid] .pbn small{font:500 14px var(--text);color:var(--ink-3)}
[data-page=uitgebreid] .pbs,[data-page=uitgebreid] .pbr{margin:0;font-size:13px;color:var(--ink-3)}
[data-page=uitgebreid] .pbq b{font:600 26px/1.15 var(--display);letter-spacing:0}
[data-page=uitgebreid] .pbq b small{font:500 13px var(--text)}
[data-page=uitgebreid] .pbw{margin:22px 20px 0}
#xAn .pbc:has(+.pbsw:not([hidden])){border-radius:6px 6px 0 0!important}
.pbsw{--fill:var(--ink);--track:var(--line);--thumb:var(--card);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px;padding:14px 20px 16px;border-radius:0 0 6px 6px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.pbsl{position:relative;min-width:0}
.pbpk{display:inline-flex;align-items:center;gap:4px;margin:-4px -6px;padding:4px 6px;border:0;border-radius:4px;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.pbpk svg{width:12px;height:12px;flex:none;opacity:.7}
.pbpk:hover,.pbpk[aria-expanded=true]{color:var(--ink);background:var(--soft)}
.pbpk:focus-visible{outline:2px solid var(--volt);outline-offset:1px}
.pbmn{position:absolute;left:-6px;top:24px;z-index:5;display:flex;flex-direction:column;min-width:220px;padding:4px;border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(21,23,26,.12)}
.pbmn button{display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:4px;background:none;font:500 14px var(--text);color:var(--ink);text-align:left;cursor:pointer}
.pbmn button::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.pbmn button[aria-checked=true]::before{background:var(--ink)}
.pbmn button:hover,.pbmn button:focus-visible{background:var(--soft);outline:0}
.pbmn .pba{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 4px 4px;color:var(--ink-3);font-size:13px}
.pbsl span{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pbsl b{font:600 15px var(--text);letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
[data-page=uitgebreid] .pbc text{font:500 11px var(--mono)}
[data-page=uitgebreid] .pbc .bel text{font:600 13px var(--text)}
[data-page=uitgebreid] .pbk{margin:8px 20px 16px;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase}
[data-page=uitgebreid] .snw .bec{gap:1px;background:var(--line);box-shadow:0 0 0 1px var(--line);border-radius:6px;overflow:hidden}
[data-page=uitgebreid] .snw .bc2{border-radius:0!important;padding:14px 16px 16px}
[data-page=uitgebreid] .bc2>small{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
[data-page=uitgebreid] .bc2>b{font:600 26px/1.15 var(--display);letter-spacing:0}
[data-page=uitgebreid] .bc2>b small{font:500 14px var(--text)}
[data-page=uitgebreid] .bc2 p{font-size:13px;color:var(--ink-3)}
[data-page=uitgebreid] .trk{height:6px;margin:32px 0 34px;border-radius:3px}
[data-page=uitgebreid] .trk i{border-radius:3px}
[data-page=uitgebreid] .trk u{top:-4px;width:2px;height:14px;margin-left:-1px}
[data-page=uitgebreid] .trk .now{top:-4px;width:14px;height:14px;margin-left:-7px;border-width:3px}
[data-page=uitgebreid] .trk em{top:-22px;font:500 11px var(--mono);letter-spacing:.04em;color:var(--ink-3)}
[data-page=uitgebreid] .trk em.lo{top:22px}
[data-page=uitgebreid] .trk .tk s{font:500 10px var(--mono)}
[data-page=uitgebreid] .hmw{margin-top:12px;padding:14px 16px;box-shadow:0 0 0 1px var(--line)}
[data-page=uitgebreid] .hmw>small{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
[data-page=uitgebreid] .hm{width:100%;max-width:none;font:500 13px var(--mono);border-spacing:3px}
[data-page=uitgebreid] .hm th{font:500 12px var(--mono);color:var(--ink-3)}
[data-page=uitgebreid] .hm td{border-radius:2px;padding:8px 4px}
[data-page=uitgebreid] .hm td.cur{outline-width:2px;outline-offset:-2px;font-weight:600}
@media(max-width:700px){[data-page=uitgebreid] .pbt{grid-template-columns:minmax(0,1fr)}}
/* Break-even dieselprijs in het oranje van diesel; de kaart zelf blijft wit */
[data-page=uitgebreid] .bc2.dz>small::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:2px;background:var(--amber);vertical-align:0}
[data-page=uitgebreid] .bc2.dz .trk i{background:var(--amber);opacity:.5}
[data-page=uitgebreid] .bc2.dz .trk .now{background:var(--amber);box-shadow:0 0 0 1px var(--amber-ink)}
/* Kenteken, je huidige diesel en gebruikt elektrisch */
.plate{box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 4px 0 12px;border-radius:8px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);max-width:100%}
.plate:focus-within{box-shadow:inset 0 0 0 1.5px var(--volt)}
.plate input{width:92px;min-width:0;border:0;outline:0;background:none;padding:0;color:var(--ink);font:600 14px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.plate input::placeholder{color:var(--ink-3);font:500 14px/1 var(--text);letter-spacing:0;text-transform:none}
.plo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink-2)}
.plo:empty{display:none}
.plate button{flex:none;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:6px;background:var(--volt);color:#fff;cursor:pointer}
.plate button:hover{background:var(--volt-ink)}
.plate button svg{width:14px;height:14px}
.plate .pok,.plate.ok .pgo{display:none}.plate.ok .pok{display:block}
.plate.ok button{background:var(--volt-soft);color:var(--volt-ink)}
.plate.busy button{animation:plb .8s ease-in-out infinite alternate}
@keyframes plb{to{opacity:.25}}
.plate.bad{box-shadow:inset 0 0 0 1.5px var(--amber)}
.nwg{display:inline-flex;margin:0 0 18px}
.nwu .plate{display:flex;width:100%;height:40px;margin:0 0 18px}.nwu .plate input{flex:1;width:auto}
#pEh,#rwEh{margin-top:6px;font-size:13px}
#pEh .warn{color:var(--amber-ink);font-weight:600}
#pEh b{color:var(--ink-2);font-weight:600}
#hefh{margin-top:16px}
@media print{.nwg{display:none!important}}

.mbtns{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.minfo .mbtns .cta{margin:0}
.mbtns .btn{padding:10px 14px;font-size:15px}
.mct tbody th small{display:block;font-weight:400;font-size:12px}
.qf{max-width:560px}
.qfm{margin:0 0 18px;font-size:17px}.qfm small{color:var(--ink-3);font-size:14px}
.qf .ffs .seg{grid-template-columns:repeat(3,minmax(0,1fr));max-width:300px}
@media(max-width:640px){.qf,#mDlgB>.fok{padding:0 16px}}
/* Restwaarde */

/* Widget */
.emb{display:none}
html.embed .top,html.embed .foot,html.embed .ad,html.embed .ck,html.embed .fln,html.embed .fcta,html.embed .mini,html.embed body::before{display:none!important}
html.embed .emb{display:block;margin-top:28px;text-align:right;font-size:14px}
html.embed .emb a{color:var(--ink-3)}
html.embed .intro{padding-top:20px}
.embc{display:flex;align-items:flex-start;gap:12px;margin:12px 0 28px}
.embc code{flex:1;min-width:0;padding:12px 14px;border-radius:8px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:13px/1.5 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}

/* Vergelijken en PDF */
.scn{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-top:12px;padding:10px 8px 10px 12px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line);font-size:15px}
.scl{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:6px;background:var(--ink);color:#fff;font:600 14px var(--mono)}
.scv{flex:1;min-width:0;color:var(--ink-2)}
.scv b{color:var(--ink);font-variant-numeric:tabular-nums}.scv em{font-style:normal;color:var(--ink)}
.scv b.good,.scd b.good{color:var(--volt-ink)}.scv b.bad,.scd b.bad{color:var(--amber-ink)}
.scd{color:var(--ink-2);white-space:nowrap}
.scn .lnk{font-size:14px}
.scn .wzx{width:30px;height:30px}.scn .wzx svg{width:15px;height:15px}
@media print{.mode,.bcta,.qi,.st svg{display:none!important}.scn .lnk,.scn .wzx{display:none!important}}

/* PDF-rapport: alleen bij afdrukken, in plaats van de pagina */
.rpt{display:none}
@media print{
 @page{size:A4;margin:13mm 14mm 14mm}
 html.rp body{background:#fff}
 html.rp body::before,html.rp body>*:not(.rpt){display:none!important}
 html.rp .rpt{display:block}
}
.rpt{color:var(--ink);font:13px/1.5 var(--text);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rpt b{font-weight:600}
.rpt .num{font-family:var(--display);font-variant-numeric:tabular-nums}
.rph{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1.5px solid var(--ink)}
.rph .brand{display:flex;align-items:center;gap:8px;font:700 15px var(--text);color:var(--ink);text-decoration:none}
.rph .bmark{width:34px;height:18px}
.rph>span:last-child{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rpk{display:block;margin:26px 0 4px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rpt h1{font:600 28px/1.15 var(--text);letter-spacing:-.01em}
.rpm{margin:6px 0 0;color:var(--ink-2)}
.rpv{display:grid;grid-template-columns:1.25fr 1fr 1fr;margin-top:22px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;break-inside:avoid}
.rpv>div{padding:16px 18px}
.rpv>div+div{border-left:1px solid var(--line)}
.rpv .w{background:var(--volt-soft);border-left:0}
.rpv .w.neg{background:#FBEBD3}
.rpv small{display:block;font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.rpv .w small{color:var(--volt-ink)}.rpv .w.neg small{color:var(--amber-ink)}
.rpv strong{display:block;margin-top:6px;font:600 30px/1.05 var(--display);font-variant-numeric:tabular-nums}
.rpv .w strong{font-size:38px;color:var(--volt-ink)}.rpv .w.neg strong{color:var(--amber-ink)}
.rpv span{display:block;margin-top:4px;color:var(--ink-2)}
.rpv i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;vertical-align:1px}
.rpt .d{background:var(--amber)}.rpt .e{background:var(--volt)}
.rpt h2{margin:28px 0 10px;font:600 15px var(--text)}
.rpc{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;break-inside:avoid}
.rpc th{padding:0 0 6px;font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);text-align:right;border-bottom:1px solid var(--ink)}
.rpc th:first-child{text-align:left}
.rpc td{padding:7px 0;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
.rpc td:first-child{text-align:left;color:var(--ink-2)}
.rpc col:nth-child(1){width:24%}.rpc col:nth-child(2){width:22%}
.rpc .rpb{padding:0 8px 0 0}
.rpc .rpb i{display:block;height:5px;border-radius:3px;margin:2px 0}
.rpc .good{color:var(--volt-ink)}.rpc .bad{color:var(--amber-ink)}
.rpc tfoot td{border-bottom:0;padding-top:9px;font-weight:600;color:var(--ink)}
.rpc tbody tr:last-child td{border-bottom:1.5px solid var(--ink)}
.rpc tfoot tr+tr td{padding-top:2px;font-weight:400;color:var(--ink-2)}
.rpg{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);break-inside:avoid}
.rpg div{padding:12px 14px 12px 0}
.rpg div+div{padding-left:14px;border-left:1px solid var(--line)}
.rpg small{display:block;font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.rpg b{display:block;margin-top:4px;font:600 19px/1.2 var(--display);font-variant-numeric:tabular-nums}
.rpg span{font-size:12px;color:var(--ink-3)}
.rpch{break-inside:avoid}
.rpch svg{display:block;width:100%;height:auto;font:500 10px var(--mono);fill:var(--ink-3)}
.rp2{break-before:page}

.rpi .wide td:first-child{width:24%}
.rpn{margin-top:26px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.rpn p{margin:0 0 4px}
.rpn a{color:var(--ink);text-decoration:none;font-weight:600}
@media(max-width:640px){#calc .scn{order:1}.scv{flex:1 1 100%;order:2}.scd{margin-right:auto}}

/* Overstapgids: overzicht met onderwerpen, daarna de vragen */
.gtl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.gtl a{display:flex;flex-direction:column;gap:10px;height:100%;min-height:118px;padding:16px 18px 18px;border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:box-shadow .15s}
.gtl a:hover{box-shadow:0 0 0 1px var(--ink);color:var(--ink)}
.gtl small{font:500 12px var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.gtl b{margin-top:auto;font:600 19px/1.25 var(--text)}
.gtl a.gsp{background:var(--asph);box-shadow:none;color:var(--on-asph)}
.gtl a.gsp small,.gtl a.gsp span{color:var(--on-asph-2)}
.gtl a.gsp b{font-size:24px}
.gtl a.gsp span{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.gtl a.gsp:hover{box-shadow:0 0 0 2px var(--volt)}
.gfh{margin:64px 0 24px;font:700 26px/1.2 var(--text)}
/* Een onderwerp */
.gw{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:start;padding:30px 0 0}
.gbk{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3);text-decoration:none;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.gbk::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.gbk:hover{color:var(--ink)}
.ga h1{margin:14px 0 0;font:700 clamp(32px,4.2vw,46px)/1.1 var(--text);letter-spacing:-.02em;outline:0}
.ga .glead{margin:16px 0 0;max-width:680px;font:500 19px/1.5 var(--text);color:var(--ink-2)}
.ga h2{margin:48px 0 10px;font:700 23px/1.25 var(--text)}
.ga>p,.ga .gli,.ga .gnum{max-width:700px;color:var(--ink-2)}
.ga a:not(.gcl):not(.gbk){font-weight:600}
.gli,.gnum{margin:0;padding:0 0 0 22px}
.gli li,.gnum li{margin:0 0 8px;padding-left:4px}
.gnum b{color:var(--ink)}
.gop{max-width:760px;border-top:1px solid var(--line)}
.gop details{border-bottom:1px solid var(--line)}
.gop summary{list-style:none;position:relative;padding:15px 40px 15px 0;font:600 17px/1.4 var(--text);cursor:pointer}
.gop summary::-webkit-details-marker{display:none}
.gop summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:transform .2s}
.gop details[open] summary::after{transform:rotate(45deg)}
.gop summary:hover{color:var(--volt-ink)}
.gop p{margin:-4px 0 18px;max-width:680px;color:var(--ink-2)}
.glk{display:flex;flex-direction:column;max-width:760px;margin:36px 0 0;border-top:1px solid var(--line)}
.glk a{display:flex;justify-content:space-between;gap:16px;padding:14px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.glk a::after{content:"↗";color:var(--ink-3)}
.glk a:hover{color:var(--volt-ink)}
.gcl{display:inline-flex;align-items:center;gap:10px;margin:28px 0 0;color:var(--ink);font:600 16px var(--text);text-decoration:none}
.gcl::after{content:"";width:8px;height:8px;border-top:2px solid var(--volt);border-right:2px solid var(--volt);transform:rotate(45deg)}
.gcl:hover{color:var(--volt-ink)}
/* Gidsen: "Meerdere voertuigen of locaties?" als gewone zin, de pijl hangt direct aan de link. */
p.gcl{display:block}p.gcl::after{content:none}
p.gcl a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
p.gcl a::after{content:"";width:7px;height:7px;margin-top:1px;border-top:2px solid var(--volt);border-right:2px solid var(--volt);transform:rotate(45deg)}
.gnx{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:64px 0 0}
.gnx a{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:6px;box-shadow:0 0 0 1px var(--line);background:var(--card);color:var(--ink);text-decoration:none;font:600 16px/1.3 var(--text)}
.gnx a:hover{box-shadow:0 0 0 1px var(--ink)}
.gnx a.nx{grid-column:2;text-align:right}
.gnx small{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.grl{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px;padding-top:34px}
.grl nav{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.grl nav a{margin-left:-1px;padding:7px 0 7px 14px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;font:500 15px/1.35 var(--text)}
.grl nav a:hover{color:var(--ink)}
.grl nav a[aria-current]{border-left-color:var(--ink);color:var(--ink);font-weight:600}
@media(max-width:900px){.gw{grid-template-columns:minmax(0,1fr);gap:0}.grl{position:static;padding-top:40px}.grl nav{display:none}}
/* Rekenhulpen */
.gtool{--fill:var(--ink);--track:var(--line);--thumb:var(--card);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;max-width:860px;margin:28px 0 0;padding:22px 24px 24px;border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
/* Lege rekenhulp houdt zijn plek vast tot het script hem vult, zodat de tekst eronder niet verspringt */
.gtool:empty{visibility:hidden}
#gtMap:empty{min-height:592px}#gtKw:empty{min-height:371px}#gtLd:empty{min-height:411px}#gtEn:empty{min-height:448px}#gtAr:empty{min-height:481px}#gtZm:empty{min-height:563px}#gtZe:empty{min-height:370px}#gtSb:empty{min-height:753px}#gtHf:empty{min-height:261px}#gtFn:empty{min-height:402px}#gtAc:empty{min-height:560px}#gtRb:empty{min-height:335px}
@media(max-width:760px){#gtMap:empty{min-height:829px}#gtKw:empty{min-height:605px}#gtLd:empty{min-height:638px}#gtEn:empty{min-height:720px}#gtAr:empty{min-height:767px}#gtZm:empty{min-height:957px}#gtZe:empty{min-height:554px}#gtSb:empty{min-height:1135px}#gtHf:empty{min-height:420px}#gtFn:empty{min-height:610px}#gtAc:empty{min-height:736px}#gtRb:empty{min-height:422px}}
.gc{display:flex;flex-direction:column;gap:6px;min-width:0}
.gl{display:flex;justify-content:space-between;gap:12px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.gl output{font:600 15px var(--text);letter-spacing:0;text-transform:none;color:var(--ink)}
.gc .seg.sm{align-self:flex-start;flex-wrap:nowrap}
.gwd{grid-column:1/-1}
.gpl .plate{display:flex;width:100%;height:38px}.gpl .plate input{flex:1;width:auto}
.gout{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--line)}
.gres{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.gres b{font:600 40px/1.1 var(--display);letter-spacing:-.01em}
.gres span{color:var(--ink-2);font-size:16px}
.gwh{margin:12px 0 0;max-width:700px;color:var(--ink-2)}
.gsc{position:relative;height:10px;margin:18px 0 30px;border-radius:5px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.gsc i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--volt);transition:width .2s}
.gsc i.hi{background:var(--amber)}
.gsc u{position:absolute;top:-4px;width:2px;height:18px;margin-left:-1px;background:var(--ink-2);text-decoration:none}
.gsc u s{position:absolute;top:22px;left:50%;transform:translateX(-50%);font:500 11px var(--mono);color:var(--ink-3);text-decoration:none;white-space:nowrap}
.gsc u.d{background:var(--ink)}
.gsc u.d s{color:var(--ink)}
.gbl{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.gres+.gbl{margin-top:18px}
.gbr{display:grid;grid-template-columns:110px minmax(0,1fr) 98px 190px;align-items:center;gap:14px;font-size:15px}
.gbr>span{font-weight:600}
.gbr i{height:8px;border-radius:4px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.gbr i b{display:block;height:100%;border-radius:4px;background:var(--ink-3);transition:width .2s}
.gkl{margin:10px 0 0;font-size:13px;color:var(--ink-3)}
.gbr i b.ok{background:var(--volt)}.gbr i b.dsl{background:var(--amber)}
.gind{display:inline-block;margin:0 0 10px;padding:3px 9px;border-radius:4px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-2);font:600 12px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.gwi{padding:10px 12px;border-left:3px solid var(--line-2);background:var(--soft);border-radius:0 6px 6px 0}.gbr i b.hi{background:var(--line-2)}.gbr i b.dz{background:var(--asph)}
.gbr em{font:600 17px var(--display);font-style:normal;text-align:right}
.gbr small{font-size:13px;color:var(--ink-3)}
.gsz{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;font-size:14px;color:var(--ink-3)}
.gsz b{color:var(--ink-2);font-weight:600}
.gsz .on,.gsz .on b{color:var(--ink)}
.gze{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:16px 0 0;max-width:620px}
.gze span{padding:7px 0;border-radius:3px;text-align:center;font:500 12px var(--mono)}
.gze .ok{background:var(--volt-soft);color:var(--volt-ink)}
.gze .no{background:var(--soft);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.gsl{display:flex;flex-direction:column}
.gsb{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:12px 0;border-bottom:1px solid var(--line)}
.gsb:first-child{padding-top:0}.gsb:last-child{border-bottom:0;padding-bottom:0}
.gsb b{font-weight:600}
.gsb p{margin:2px 0 0;max-width:560px;font-size:15px;color:var(--ink-2)}
.gsb em{flex:none;font:600 20px var(--display);font-style:normal;text-align:right}
.gsb.best em{color:var(--volt-ink)}
.gsb.best b::after{content:"meeste voordeel";margin-left:10px;padding:2px 7px;border-radius:3px;background:var(--volt-soft);color:var(--volt-ink);font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}
.gtb{max-width:860px;margin:20px 0 0;overflow-x:auto}
.gtt{width:100%;border-collapse:collapse;font-size:15px}
.gtt th,.gtt td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.gtt thead th{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.gtt tbody th{font-weight:600}
.gtt td{color:var(--ink-2)}
.gtt.gwr th,.gtt.gwr td{white-space:normal}
.gch{display:block;width:100%;height:auto;margin:16px 0 0}
.gch line{stroke:var(--line);stroke-width:1}
.gch line.gw7{stroke:var(--amber-ink);stroke-dasharray:4 4}
.gch text{font:500 11px var(--mono);fill:var(--ink-3)}
.gch .gw7t{fill:var(--amber-ink)}
.gch polyline{fill:none;stroke:var(--volt);stroke-width:3;stroke-linejoin:round}
.gch circle{fill:var(--card);stroke:var(--ink);stroke-width:3}
.zmt{margin:0 0 14px}
.zmt .gc{flex-direction:row;align-items:center;gap:14px}
.zmm path.zb{fill:var(--soft);stroke:var(--line-2);stroke-width:1.2;stroke-linejoin:round}
.zc{cursor:pointer;outline:0}
.zc .zh{fill:transparent}
.zc .zd{fill:var(--card);stroke:var(--volt);stroke-width:2.5;transition:r .15s}
.zc.on .zd{fill:var(--volt)}
.zc text{stroke-width:6px!important;font:600 22px var(--text);fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity .12s}
.zc:hover text,.zc:focus-visible text,.zc.sel text{opacity:1}
.zc:hover .zd,.zc:focus-visible .zd{r:12}
.zc.sel .zd{r:13;stroke:var(--ink);stroke-width:4}
.zcl{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.zch{border:0;border-radius:999px;padding:5px 11px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3);font:500 14px var(--text);cursor:pointer}
.zch.on{background:var(--volt-soft);box-shadow:none;color:var(--volt-ink)}
.zch.nw{box-shadow:inset 0 0 0 2px var(--volt)}
.zch:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.nls.zl1{background:var(--volt-soft);color:var(--volt-ink)!important}.nls.zl0{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.zmx{margin-top:18px;font-size:14px}
.nlk .z1::before{background:var(--volt);border-radius:50%}.nlk .z0::before{background:var(--card);box-shadow:inset 0 0 0 2px var(--volt);border-radius:50%}
/* Stappenplan */
.gst{max-width:760px;margin:30px 0 0;padding:0;list-style:none;counter-reset:gs;border-top:1px solid var(--line)}
.gst li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line);counter-increment:gs}
.gst b{display:block;font:600 18px/1.35 var(--text)}
.gst b::before{content:counter(gs) ". ";color:var(--ink-3)}
.gst p{margin:4px 0 6px;color:var(--ink-2)}
.gst a{font-weight:600}
.gst li.done b,.gst li.done p{color:var(--ink-3)}
.gst li.done b{text-decoration:line-through;text-decoration-thickness:1.5px}
.gck{position:relative;width:28px;height:28px;margin-top:-2px;border:0;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--line-2);cursor:pointer}
.gck:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.gck[aria-pressed=true]{background:var(--volt);box-shadow:none}
.gck[aria-pressed=true]::after{content:"";position:absolute;left:10px;top:6px;width:6px;height:11px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg)}
/* Netcongestie: kaart van Nederland */
#gtMap,#gtZm{display:block}
.gpc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
.gpc input{width:220px;min-height:40px;padding:8px 12px;border:0;border-radius:4px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font:400 16px var(--text);color:var(--ink)}
.gpc input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}
.gpc .btn{min-height:40px;padding:8px 16px}
.gpm{font-size:14px;color:var(--amber-ink)}
.nlm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.nlm svg{display:block;width:100%;max-width:400px;height:auto}
.nlm path{stroke:var(--card);stroke-width:1.6;stroke-linejoin:round;cursor:pointer;transition:fill .15s;outline:0}
.nlm path.l2{fill:#D9822B}
.nlm path.l1{fill:#F2C27E}
.nlm path.l0{fill:#F8E2BF}
.nlm path:hover,.nlm path:focus-visible{fill:#E9A64B}
.nlm path.on{fill:var(--asph)}
#gDot{fill:var(--volt);stroke:var(--card);stroke-width:3;pointer-events:none}
.nlp h3{font:700 23px/1.2 var(--text)}
.nlp p{margin:8px 0 0;color:var(--ink-2)}
.nls{display:inline-block;margin:10px 0 0!important;padding:2px 8px;border-radius:3px;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)!important}
.nls.l2{background:#D9822B;color:#fff!important}.nls.l1{background:#F2C27E}.nls.l0{background:#F8E2BF}
.nlp .nlb{font-size:14px;color:var(--ink-3)}
.nlp .nlb a{font-weight:500}
.nlp .nlw{margin-top:4px;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.nlp dl{margin:16px 0 0}
.nlp dt{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.nlp dd{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 0;font-weight:600}
.nll{display:flex;flex-direction:column;gap:6px;margin:18px 0 0;font-weight:600}
.nlk{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.nlk span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:2px;vertical-align:-1px}
.nlk .k2::before{background:#D9822B}.nlk .k1::before{background:#F2C27E}.nlk .k0::before{background:#F8E2BF}
.nlk span:not([class])::before,.nlk a::before{display:none}
.nlk a{color:var(--ink-3);text-decoration:none}
@media(max-width:760px){.gtool{grid-template-columns:minmax(0,1fr);gap:16px}.nlm{grid-template-columns:minmax(0,1fr);gap:20px}.nlm svg{max-width:340px;margin:0 auto}.gbr{grid-template-columns:96px minmax(0,1fr) 84px;gap:10px}.gbr small{grid-column:2/-1;margin-top:-6px}}
/* Telefoon: eigen, rustige indeling. Grotere tikvlakken, meer lucht tussen de schuiven, alles op één lijn. */
@media(hover:none){
 .faq section:not(.open):not(:has(details[open]))>details{display:none}
 .faq section:not(.open):not(:has(details[open])){box-shadow:0 0 0 1px var(--line)}
 .faq section:not(.open):not(:has(details[open]))>h2::after{transform:rotate(45deg);margin-top:-6px}
}
@media(max-width:640px){
 /* Algemeen */
 .intro{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:26px 0 20px}
 .intro .mode{display:grid;grid-template-columns:1fr 1fr;margin:0}
 .mode a{padding:10px 12px;text-align:center}
 .phead{padding:28px 0 22px}
 .phead p{font-size:17px}
 .ad.band{margin-top:40px;min-height:100px}
 .rail .ad{min-height:100px;margin-top:40px}
 .foot{margin-top:56px}
 .fin{padding-top:32px;gap:20px}
 .fin p{display:none}
 .fin nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;width:100%}
 .fin nav a{padding:10px 0}
 .fdis{margin-top:16px;padding:18px 0 28px;font-size:13px;line-height:1.6}
 .fdis a,.fdis .fck{display:inline-block;padding:6px 0}
 .prose>p:first-child{font-size:18px}
 .prose h2{margin-top:36px;font-size:22px}

 /* Calculator */
 .sumh{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px;margin-top:36px}
 .sumh h2{min-width:0}
 .sumb{width:auto;flex:none;gap:14px}
 .sumb .btn{min-height:40px}
 .bcta{padding:16px 14px}
 .bct b{font-size:16px}
 .cta.big{gap:10px;padding:14px 12px;font-size:16px;white-space:nowrap}
 .cta.big svg{flex:none}
 #ins{grid-template-columns:minmax(0,1fr)}
 #ins .in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:14px 16px}
 #ins .in>.slb{grid-column:1;line-height:1.5}
 #ins .in>b{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
 #ins .in>:not(.slb):not(b){grid-column:1/-1}
 .fcta{padding:14px 12px;font-size:16px;white-space:nowrap}

 /* Uitgebreid */
 .xsum{padding:14px 16px;gap:14px}
 .xsum p{display:grid;gap:6px;font-size:16px}
 .xsum .acts{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
 .xsum .btn{width:100%;justify-content:center;min-height:44px}
 .xsum .btn span{display:inline}
 .vsh{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
 .vsh .seg.sm{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
 .vsh .seg.sm button{padding:9px 6px}
 .snp,[data-page=uitgebreid] .bc2 p{display:none}
 [data-page=uitgebreid] .hmw{padding:14px 12px;overflow-x:auto}
 [data-page=uitgebreid] .pbw{margin:18px 14px 0}
 .pbsw{grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 14px 10px}
 .pbmn{min-width:0;width:min(260px,calc(100vw - 40px))}
 .pbmn button{min-height:44px}
 .pbtip{top:auto;bottom:calc(100% + 8px);min-width:0;width:min(250px,100%);padding:8px 10px;font-size:12px}
 .pbtip b{margin-bottom:3px;font-size:11px}
 [data-page=uitgebreid] .hmw>small{display:block;line-height:1.5}
 [data-page=uitgebreid] .hm{margin:8px 0 0;border-spacing:2px;font-size:12px}
 [data-page=uitgebreid] .hm th{font-size:11px}
 [data-page=uitgebreid] .hm th:first-child{width:56px;white-space:normal;line-height:1.3}
 [data-page=uitgebreid] .hm td{min-width:0;padding:9px 2px}
 .add{display:grid;gap:14px}
 .addl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .addc{justify-content:flex-start;min-height:44px;padding:8px 12px 8px 10px;white-space:normal;text-align:left;line-height:1.25}
 .an{margin-top:44px}
 .fln{margin-top:44px}
 .fln i{width:100%;justify-content:center;padding:12px 16px}
 .more summary{padding-top:16px;padding-bottom:16px}

 /* Modellen */
 .mtools{gap:12px;margin-bottom:12px}
 .mcat{display:flex;width:100%;flex-wrap:nowrap;overflow:visible}
 .mcat>*{flex:1 1 auto}
 .mcat.seg button{padding:9px 6px}
 .mcat button small{display:none}
 .mfil{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
 .mfil #mRg{grid-column:1/-1;display:flex;flex-wrap:nowrap;overflow:visible;border-radius:4px}
 .mfil #mRg>*{flex:1 1 auto}
 .mfil #mRg button{padding:8px 4px}
 .mfil .selw select{min-height:44px;padding-right:30px;font-size:14px;text-overflow:ellipsis}
 .mfil .selw::after{right:12px}
 .mfil .sw2{grid-column:1/-1;min-height:36px}
 .mc{padding:18px 16px 14px}
 .mvar .seg button{padding:8px 12px}
 .mca{gap:8px 14px}
 .mca .cta{padding:11px 14px}
 .mcv{padding:10px 0}
 .mcv input{width:20px;height:20px}
 .mci{padding:12px 0 12px 8px}
 dialog.mdlg{width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0!important}
 .mdh{padding:calc(12px + env(safe-area-inset-top,0px)) 10px 6px 16px}
 .mdb{padding:0 0 calc(20px + env(safe-area-inset-bottom,0px))}
 .mct{min-width:0;width:max-content}
 .mct th,.mct td{min-width:132px;padding:12px 12px 12px 0}
 .mct tbody th,.mct thead th:first-child{position:sticky;left:0;z-index:1;width:96px;min-width:96px;padding-left:16px;background:var(--card);font-size:13px}
 .mct td:last-child,.mct thead th:last-child{padding-right:16px}

 /* Veelgestelde vragen: de categorieën staan er al als uitklapblokken */
 .rail nav{display:none}
 .faqw{gap:0}
 .faq section{padding:0 16px}
 .faq section>h2{font-size:19px;padding:16px 28px 16px 0;min-height:56px;align-items:center}
 .faq section>h2 small{display:none}
 .faq details summary{padding-top:14px;padding-bottom:14px}

 /* Overstapgids */
 .gtl{grid-template-columns:minmax(0,1fr);gap:8px}
 .gtl a{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-height:0;padding:15px 16px}
 .gtl b{margin:0;flex:1;font-size:17px}
 .gtl a.gsp b{font-size:20px}
 .gtl a.gsp span{flex-basis:100%}
 .gfh{margin:48px 0 16px;font-size:23px}
 .gw{padding-top:22px}
 .ga h1{font-size:30px}
 .ga .glead{font-size:17px}
 .ga h2{margin-top:40px;font-size:21px}
 .gtool{margin-top:22px;padding:18px 16px 20px}
 .gc .seg.sm{display:flex;flex-wrap:wrap;width:100%}
 .gc .seg.sm button{padding:6px 8px;font-size:13px}
 .gsc u:not(:last-child) s{display:none}
 .zmt .gl{display:none}
 .zmt .seg.sm{flex-wrap:nowrap!important}
 .zmt .seg.sm button{padding:6px 4px}
 .gres b{font-size:32px}
 .gres span{font-size:15px}
 .gsb{flex-direction:column;gap:2px}
 .gsb em{text-align:left;font-size:19px}
 .gpc input{flex:1;width:auto;min-width:0}
 .gpm{flex-basis:100%}
 .gtt th,.gtt td{padding-right:12px;font-size:14px}
 .gnx{grid-template-columns:minmax(0,1fr);margin-top:48px}
 .gnx a.pv{display:none}
 .gnx a.nx{grid-column:auto;text-align:left}
 .gst li{grid-template-columns:32px minmax(0,1fr);gap:12px}
 .gop summary{padding:16px 36px 16px 0}

 /* Vlootanalyse */
 .vz{padding-top:8px}
 .vzh{margin:0 -16px;padding:20px 16px 10px;border-radius:0}.vzh h1{font-size:36px}.vzh p{font-size:17px}
 .vzm{max-height:none;margin-top:14px}
 .vzf .ffm{padding:18px 16px 14px}.vzf .ff input{min-height:44px}
 .vzfh{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px}
 .vzs{margin-top:36px}.vzs ol{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 16px}
 .vzv,.vzp,.vzr,.vzk{margin-top:48px}.vzv ul{grid-template-columns:minmax(0,1fr);gap:22px}
 .vzpg{grid-template-columns:minmax(0,1fr);gap:24px}.vzpd{max-width:180px}
 .vzr li{grid-template-columns:22px minmax(0,1fr);gap:4px 12px}.vzr span,.vzr li>a{grid-column:2}
 .vzp ol em{display:none}
 .vzk{margin-left:-16px;margin-right:-16px;padding:26px 16px;border-radius:0}.vzkl{font-size:21px}
 .vzk ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 0}.vzk li:nth-child(odd){padding-left:0;border-left:0}.vzk b{font-size:28px}
 .vzc .cta{width:100%;justify-content:center;min-height:48px}
 .fsub{flex-direction:column;align-items:stretch;gap:14px}
 .fsub .cta{justify-content:center;min-height:48px}
 .fsub a{align-self:center;padding:4px 8px}

 /* Invulvenster */
 .wzb{padding:20px 18px 32px}
 .wsec+.wsec{margin-top:24px}
 .dex{gap:0}
 .dexh{margin-bottom:18px}
 .sl+.sl{margin-top:20px}
 .hint+.sl{margin-top:22px}
 .slh{align-items:center;min-height:36px}
 .slv{padding:5px 10px}
 input[type=range]{height:44px;margin-top:2px}
 .slh .slb{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0}
 .slh .slb>label{min-width:0}
 #ins .in>.slb{display:block;min-width:0;line-height:24px}
 #ins .slb>.qi{margin-left:6px;vertical-align:top}
 .slh label{font-size:15px}
 .qi,.qs{position:relative;width:24px;height:24px;min-width:24px;font-size:12px}
 .qs[aria-pressed=true]{width:auto;height:26px;padding:0 10px;font-size:12px}
 .qi::before,.qs::before{content:"";position:absolute;inset:-10px -6px}
 .qk{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin-top:4px}
 .qk button{min-height:36px;padding:6px 2px;font-size:13px}
 /* Bandbreedte: de keuzes op een eigen regel, met knoppen die je met je duim raakt */
 .slh:has(.rxp.open){flex-wrap:wrap;justify-content:flex-start;gap:8px}
 .slb:has(.rxp.open){display:contents}
 .slh:has(.rxp.open) .slv{margin-left:auto}
 .rxp.open{order:9;display:inline-flex;flex:0 0 auto;height:30px;margin:2px 0 0;padding:2px;gap:2px;border-radius:4px}
 .rxp button{position:relative;height:26px;padding:0 11px;border-radius:3px;font-size:12px;line-height:26px}
 .rxp button::before{content:"";position:absolute;inset:-7px 0}
 .rxp .rxo{margin-left:2px;border-radius:3px}
 /* Bandbreedte op de telefoon: geen extra bolletjes om te slepen, alleen de gekleurde band en de percentages */
 .rng .rx{display:none!important}
 .rng .srg{padding-bottom:0}
 .rng .rxl{position:static!important;display:inline-block!important;margin:0 0 8px;font-size:12px}
 .rng .rxl[data-x=hi]::before{content:"–";margin:0 6px}
 .wzf{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))}
 .wzl{grid-column:1/-1;font-size:15px;margin:0}
 .wzlk{display:none}
 .wzf .wbtn,.wzf .cta{min-height:48px;justify-content:center;margin:0}
 .wzf .wbtn[hidden]+.cta{grid-column:1/-1}
 .wst>.sw2.ln{min-height:48px}
 .mpb{min-height:48px}
 .mini{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 .mini>span{gap:6px;padding:9px 12px;font-size:14px;white-space:nowrap}
 .mini b{font-size:20px}
 .mini .mm{padding:6px 8px}
 .mini .mm small{font-size:9px}
 .mini .mm b{font-size:16px}
 .mini .mv{flex-direction:column;align-items:flex-start;gap:1px}
 .mini .md .mv{align-items:flex-end}
 .mini .mv small{font-size:11px}
 .mini>span{padding-top:6px;padding-bottom:6px}
}
@media(max-width:374px){
 .cta.big,.fcta{font-size:15px}
 .mcat.seg button,.mfil #mRg button{font-size:13px;padding-left:4px;padding-right:4px}
 .qk button{font-size:12px}
}
/* Telefoon, calculator: eerst de uitkomst, dan de uitgangspunten als rustige lijst */
@media(max-width:640px){
 .intro{gap:14px;padding:22px 0 16px}
 .intro h1{font-size:30px}
 .mode a{padding:8px 12px;font-size:15px}
 .pick{margin-bottom:16px}
 .vts{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .vt{align-items:center;gap:4px;padding:10px 2px 9px;text-align:center}
 .vt svg{width:44px;height:20px;margin:0}
 .vt b{font-size:13px;font-weight:600}
 .vt small{display:none}
 .bd{padding:18px 14px 20px}
 .big{font-size:44px}
 .bfoot{padding:14px}
 .bfoot p{font-size:16px;line-height:1.45}
 .bct b{font-size:15px}
 .bcta{gap:12px}
 #calc .story .sum{order:4}
 .sum{grid-template-columns:minmax(0,1fr)!important;margin-top:12px}
 .st{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 40px 10px 14px}
 .st span{flex:none;font-size:14px}
 .st b{min-width:0;font-size:15px;font-weight:600;text-align:right}
 .st svg{top:50%;margin-top:-8px;right:14px}
 #ins .in>b{font-size:19px}
 #ins .in .slb{font-size:11px!important;letter-spacing:.03em}
 .fcta{display:none!important}
 /* Invulvenster: de kop is de stap */
 .wzh{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px}
 .wzh h2{font-size:19px}
 .wzk{font-size:12px}
 .wzb{padding-top:18px}
}
/* Calculator: uitkomst direct onder de voertuigkeuze, de uitgangspunten eronder zonder eigen kop */
#calc .story{margin:12px 0 0}
#calc .story .sum{margin-top:0}
#sumRs{display:block;margin:10px 0 0 auto;font-size:14px;font-weight:500;color:var(--ink-3)}
#sumRs[hidden]{display:none}
/* Voertuig kiezen: het icoon rijdt kort naar voren en kleurt groen, onderaan laadt een groene balk vol */
.vt{position:relative;overflow:hidden}
.vt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--volt);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.vt[aria-checked=true]::after{transform:scaleX(1)}
.vt[aria-checked=true] svg{animation:vtgo .6s cubic-bezier(.3,.7,.2,1)}
@keyframes vtgo{0%{transform:translateX(-8px);color:var(--ink-3)}55%{transform:translateX(3px)}100%{transform:none;color:var(--volt)}}
@media (prefers-reduced-motion:reduce){.vt::after{transition:none}.vt[aria-checked=true] svg{animation:none}}
/* ===== Startscherm: zolang de calculator nog niet is gebruikt (html.fresh) =====
   Twee even hoge vlakken (links je situatie, rechts een voorbeeld met kilometerschuif) en één knop over de hele breedte. */
.home{display:none}
html.fresh .home{display:block}
html.fresh #calc>.wrap:not(.home),html.fresh #cg,html.fresh .emb,html.fresh #fcta,html.fresh .mode{display:none!important}
.hA{display:flex;flex-direction:column;gap:20px;padding-top:36px;padding-bottom:72px}
.hA h1{margin:0;outline:0;font:700 clamp(34px,4vw,52px)/1.05 var(--text);letter-spacing:-.03em;text-wrap:balance}
.hgo{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;width:100%;justify-content:center;gap:12px;padding:20px 30px!important;border-radius:14px!important;background:var(--volt)!important;color:#fff!important;font-size:20px!important;box-shadow:0 10px 24px -14px rgba(10,143,91,.8)!important}
.hgo:hover{background:var(--volt-ink)!important}
.cta.big.hgm{display:none}
.hgo svg{width:22px;height:22px}
.hAg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.hAl,.hx{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:20px}
.hAl{justify-content:space-between;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
/* Keuze */
.hch{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.hch button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 14px;padding:17px 52px 17px 18px;border:0;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:box-shadow .12s}
.hch button:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.hch button[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--ink)}
.hch svg{grid-row:span 2;width:24px;height:24px;color:var(--ink-3)}
.hch button[aria-checked=true] svg{color:var(--volt)}
.hch b{font:600 19px/1.25 var(--text)}
.hch span{grid-column:2;font-size:16px;color:var(--ink-2)}
.hch button::after{content:"";position:absolute;top:50%;right:18px;width:22px;height:22px;margin-top:-11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.hch button[aria-checked=true]::after{background:var(--volt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none}
/* Kenteken in de huisstijl */
.hplt .plate{display:flex;width:100%;height:56px;margin:0;padding:0 8px 0 0;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 2px var(--ink);overflow:hidden}
.hplt .plate::before{content:"NL";flex:none;display:flex;align-items:flex-end;justify-content:center;width:34px;height:100%;padding-bottom:9px;background:var(--ink);color:#fff;font:600 12px var(--text)}
.hplt .plate input{flex:1;width:0;min-width:0;padding:0 14px;color:var(--ink);font:600 26px/1 var(--display);letter-spacing:.1em;text-align:left}
.hplt .plate input::placeholder{color:var(--ink-3);font:500 17px/1 var(--text);letter-spacing:0}
.hplt .plate:focus-within{box-shadow:inset 0 0 0 3px var(--ink)}
.hplt .plate button{width:40px;height:40px;border-radius:8px;background:var(--ink)}
.hplt .plate button svg{width:18px;height:18px}
.hplt .plate.ok button{background:var(--ink);color:#fff}
.hplt .plate.ok .pok{display:none}.hplt .plate.ok .pgo{display:block}
.hplt .plate .plo{display:none}
.hplr{margin:-6px 0 0;font-size:15px;color:var(--ink-2)}
.hplr:empty{display:none}
.hplr b{color:var(--ink)}
.hA .vts{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hA .vt{padding:10px 6px 9px;align-items:center;text-align:center}
.hA .vt small{display:none}
.hA .vt b{font-size:15px}
.hA .vt svg{width:44px;height:20px}
.hA .vt::after{height:2px;background:var(--ink)}
/* Rechts: voorbeeld met kilometerschuif, de inhoud verdeeld over de hoogte */
.hx{justify-content:flex-start;background:var(--asph);color:var(--on-asph)}
.hks,.hxv{margin-top:auto}
.hxh{margin:0;font:600 clamp(24px,2.2vw,30px)/1.12 var(--display);letter-spacing:-.01em;text-wrap:balance}
.hxh b{color:var(--volt-2);font-weight:600}
.hxh b.d{color:var(--amber)}
.hxl{margin:0;font-size:15px;color:var(--on-asph-2)}
.hxl:empty{display:none}
.hxv{margin-bottom:0;font-size:18px;line-height:1.4}
.hxv b{color:var(--volt-2)}
.hxv b.d{color:var(--amber)}
.hks{display:flex;flex-direction:column;gap:4px}
.hks label{font-size:15px;color:var(--on-asph-2)}
.hks label b{color:var(--on-asph);font:600 19px var(--display)}
.hkr{--fill:var(--volt-2);--track:var(--asph-3);--thumb:var(--asph);height:28px!important;margin:0!important}
.hks+.hkw{margin-top:-6px}
.hkw{display:flex;flex-direction:column;gap:10px}
.hkh{margin:0;font-size:14px;color:var(--on-asph-2)}
.hkb{display:grid;grid-template-columns:80px minmax(0,1fr) 92px;align-items:center;gap:10px 12px;font-size:15px;font-variant-numeric:tabular-nums}
.hkb i{display:block;height:12px}
.hkb u{display:block;height:100%;border-radius:3px;background:var(--amber);transition:width .15s}
.hkb .e u{background:var(--volt-2)}
.hkb b{text-align:right;font-weight:600}
@media(max-width:960px){.hAg{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
 .hA{gap:14px;padding-top:20px;padding-bottom:28px}
 .hA h1{font-size:30px}
 /* Zo bedacht: de knop stond als sticky bedoeld, maar .cta.big zette hem terug op relative, dus hij scrolde mee en schokte.
    Daarna stond hij fixed, maar dan schoof hij over de zwarte footer. Nu staat een tweede knop als laatste kind van #calc,
    sticky onderaan: hij blijft onderaan het scherm hangen en stopt vanzelf boven de footer, zonder scroll-code.
    De knop zit met #uv in .hgw, dat pas onder het zwarte voorbeeldblok begint. Sticky kan niet boven de bovenrand van .hgw komen,
    dus de knop verschijnt pas net onder het zwarte blok en schuift er nooit overheen. */
 html.fresh .hA{padding-bottom:10px}
 html.fresh #home{min-height:0}
 .hA>.hgo{display:none}
 html.fresh .cta.big.hgm{display:flex;position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:25;width:calc(100% - 32px);margin:0 16px 16px;padding:17px 20px!important;font-size:18px!important}
 html.fresh .uvend{display:none}
 html.fresh .uv{padding-bottom:24px}
 html.fresh body #calc.page:not([hidden]){padding-bottom:0}
 .cta.big.hgm::before{animation:none!important;opacity:0!important}
 /* Zo bedacht: Safari op iOS 26 kleurt de adresbalk naar een vaste of sticky knop vlak bij de onderrand, dus hier werd hij groen.
    Een strookje van 1px in de paginakleur, vast tegen de onderrand, wordt door Safari als eerste gezien; dan blijft de balk neutraal.
    Bovenaan doet body::before hetzelfde. In de calculator (dialoog in de bovenste laag) zit hetzelfde strookje in de kaartkleur. */
 html.fresh body:has(#calc:not([hidden]))::after{content:"";position:fixed;left:0;right:0;bottom:0;height:1px;z-index:24;background:var(--page);pointer-events:none}
 dialog.wz::after{content:"";position:fixed;left:0;right:0;bottom:0;height:1px;background:var(--card);pointer-events:none}
 /* Geen schaduw onder de knoppen die onderaan blijven hangen: op de telefoon gaf dat een donkere waas */
 .cta.big.hgm,.rhgo,.fcta{box-shadow:none!important}
 .hAg{gap:14px}
 .hAl{gap:10px;padding:0;background:none;box-shadow:none}
 .hx{gap:14px;padding:18px}
 .hch{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .hch button{grid-template-columns:minmax(0,1fr);padding:11px 32px 11px 12px}
 .hAl,.hx{min-height:0}
 .hch svg,.hch span{display:none}
 .hch b{font-size:14px;line-height:1.25;text-wrap:balance}
 .hch button::after{right:12px;width:18px;height:18px;margin-top:-9px}
 .hch button[aria-checked=true]::after{background-size:12px}
 .hplt .plate{height:52px}
 .hA .vts{gap:6px}
 .hA .vt b{font-size:14px}
 .hA .vt svg{width:40px;height:20px}
 .hxh{font-size:22px}
 .hks label{font-size:14px}.hks label b{font-size:17px}
 .hkb{grid-template-columns:70px minmax(0,1fr) 78px;gap:8px 10px;font-size:14px}
 .hxv{font-size:16px}
 .fin{padding-top:24px;gap:14px}
 .fin nav{display:flex;flex-wrap:wrap;gap:2px 18px}
 .fin nav a{padding:6px 0;font-size:14px}
 .fdis{margin-top:10px;padding:12px 0 20px;font-size:12px}
}
/* ===== Onder het startscherm: korte uitleg die meebeweegt met het gekozen voertuig ===== */
.uv{display:none}
html.fresh .uv{display:block;padding-bottom:64px}
.uvS{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px 48px;padding:44px 0;border-top:1px solid var(--line)}
.uvS>header h2{margin:0;font:700 26px/1.15 var(--text);letter-spacing:-.015em;text-wrap:balance}
.uvS>header p{margin:10px 0 0;font:600 19px/1.3 var(--display);color:var(--ink)}
.uvS>header p b{color:var(--volt-ink);font-weight:600}
.uvS>header p b.d{color:var(--amber-ink)}
/* Alle kosten */
.uvb{display:grid;grid-template-columns:84px minmax(0,1fr) 96px;align-items:center;gap:12px;font-size:15px;font-variant-numeric:tabular-nums}
.uvb+.uvb{margin-top:10px}
.uvb>b{text-align:right;font-weight:600}
.uvt{display:flex;gap:2px;height:28px}
.uvt i{display:block;height:100%;background:var(--line);transition:width .2s,background .15s;cursor:pointer}
.uvt i:first-child{border-radius:4px 0 0 4px}.uvt i:last-child{border-radius:0 4px 4px 0}
.uvt i:hover{background:var(--line-2)}
.uvb.dz .uvt i.on{background:var(--amber)}
.uvb.el .uvt i.on{background:var(--volt-2)}
.uvc{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.uvc button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 12px;border:0;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:600 15px var(--text);cursor:pointer;text-align:left}
.uvc button:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.uvc button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}
.uvc small{font:500 13px var(--mono);color:var(--volt-ink);font-variant-numeric:tabular-nums}
.uvc small.d{color:var(--amber-ink)}
.uvx{min-height:3em;margin:14px 0 0;max-width:640px;color:var(--ink-2);font-size:16px;line-height:1.5}
/* Omslagpunt */
.uvo svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.uvo .ax{stroke:var(--line-2);stroke-width:1}
.uvo .zr{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4}
.uvo .ln{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.uvo .up{fill:var(--volt-2);opacity:.22}.uvo .dn{fill:var(--amber);opacity:.28}
.uvo .be{stroke:var(--ink);stroke-width:1.5}
.uvo text{font:500 12px var(--mono);fill:var(--ink-3)}
.uvo .cur{fill:var(--card);stroke:var(--ink);stroke-width:2.5}
.uvo .gd{stroke:var(--ink-3);stroke-width:1}
.uvr{margin:0 0 12px;font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.uvr b{color:var(--ink)}
/* Wat er verandert */
.uvy{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:0 18px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.uvy li{position:relative;padding-top:26px}
.uvy li::before{content:"";position:absolute;left:0;right:-18px;top:6px;height:2px;background:var(--line)}
.uvy li::after{content:"";position:absolute;left:0;top:1px;width:12px;height:12px;border-radius:50%;background:var(--page);box-shadow:inset 0 0 0 2px var(--ink-3)}
.uvy li.past::before{background:var(--volt)}
.uvy li.past::after{background:var(--volt);box-shadow:none}
.uvy li.now::before{background:linear-gradient(90deg,var(--volt) 0 30%,var(--line) 30%)}
.uvy time{display:block;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.uvy b{display:block;margin:4px 0 4px;font:600 17px/1.25 var(--text)}
.uvy span{display:block;font-size:15px;line-height:1.45;color:var(--ink-2)}
.uvy a{color:inherit}
/* Onafhankelijk */
.uvl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;margin:0}
.uvl>div{display:contents}
.uvl dt,.uvl dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.uvl dt{padding-right:24px;color:var(--ink-2)}
.uvl dd{font-weight:600;font-variant-numeric:tabular-nums}
.uvl dd+dd{padding-left:16px;font:500 13px var(--mono);color:var(--ink-3);text-align:right;align-self:stretch;display:flex;align-items:center;justify-content:flex-end}
.uvl a{color:var(--ink-3)}.uvl a:hover{color:var(--ink)}
.uvn{margin:14px 0 0;font-size:15px;color:var(--ink-3)}
.uvn a{color:var(--ink-2)}
/* Vragen */
.uvS .faq h3{margin:0}
.uvS .faq summary{padding-top:14px}
.uvS .faq details:first-child summary{padding-top:0}
.uvS .faq details p a{color:var(--ink)}
.uvend{display:flex;justify-content:flex-start;padding-top:8px}
.uvend .cta{padding:15px 22px;border-radius:10px;background:var(--volt);font-size:17px}
.uvend .cta:hover{background:var(--volt-ink)}
.uvend .cta svg{width:18px;height:18px}
/* Tabbladen */
.uvtab{display:flex;gap:4px;padding:40px 0 0;border-top:1px solid var(--line)}
.uvtab button{padding:9px 14px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:600 16px var(--text);cursor:pointer}
.uvtab button:hover{color:var(--ink)}
.uvtab button[aria-selected=true]{background:var(--ink);color:#fff}
.uvS.uvP{display:none;border-top:0;padding-top:28px}
.uvS.uvP.act{display:grid}
.uvP>header h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.uvP>header p{margin-top:0;font-size:24px}
.uvI>div p{margin:0;max-width:640px;font-size:18px;line-height:1.55;color:var(--ink-2)}
.uvI>div p+p{margin-top:12px}
@media(max-width:960px){.uvS{grid-template-columns:minmax(0,1fr);gap:18px}}
@media(max-width:640px){
 html.fresh .uv{padding-bottom:40px}
 .uvS{padding:32px 0}
 .uvS>header h2{font-size:22px}
 .uvS>header p{font-size:17px}
 .uvb{grid-template-columns:70px minmax(0,1fr) 80px;gap:8px;font-size:14px}
 .uvt{height:22px}
 .uvc{gap:6px}.uvc button{padding:7px 10px;font-size:14px}
 .uvy{grid-auto-columns:72%;margin-right:-16px;padding-right:16px}
 .uvl{grid-template-columns:minmax(0,1fr) auto}
 .uvl dd+dd{display:none}
 .uvtab{overflow-x:auto;margin-right:-16px;scrollbar-width:none}
 .uvtab button{flex:none;font-size:15px;padding:8px 12px}
 .uvP>header p{font-size:20px}
 .uvI>div p{font-size:16px}
 .uvend .cta{width:100%;justify-content:center}
}
/* ===== Resultaat na het invulvenster (Simpel) en de kop van Uitgebreid =====
   Twee kolommen met alleen lijnen. Het oude scorebord blijft voor de rekenlogica, maar staat niet meer in beeld. */
#calc>.wrap:has(>.intro),#board,#story,#ins,#fcta,[data-page=uitgebreid] .wrap:has(>.intro){display:none!important}
/* Terug naar het startscherm op pagina's zonder eigen kop met terugknop */
.bkw{padding-top:14px;padding-bottom:0}
body:has(#calc:not([hidden])) .bkw,body:has([data-page=uitgebreid]:not([hidden])) .bkw{display:none}
.bk{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;font:600 14px var(--text)}
.bk:hover{color:var(--ink)}
.bk svg{width:15px;height:15px}
.bkw+main .page>.wrap:first-child>.intro,.bkw+main .page>.wrap:first-child>.phead{padding-top:16px}
.rN{display:flex;flex-direction:column;padding:12px 0 10px}
#resX .rN{padding-bottom:0}
.rveh{display:flex;align-items:center;gap:12px;min-width:0}
.rveh svg{flex:none;width:52px;height:24px;color:var(--volt)}
.rveh h1{margin:0;outline:0;font:700 clamp(28px,3.4vw,40px)/1.1 var(--text);letter-spacing:-.02em}
.rkt{display:inline-flex;align-items:stretch;height:28px;padding-right:9px;border-radius:5px;box-shadow:inset 0 0 0 2px var(--ink);overflow:hidden;color:var(--ink);font:600 15px/28px var(--text);letter-spacing:.04em}
.rkt i{display:flex;align-items:flex-end;margin-right:8px;padding:0 5px 3px;background:var(--ink);color:#fff;font:600 9px/1 var(--text);font-style:normal}
.nS{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.nS>.nA{min-width:0;padding:26px 36px 26px 0}
.nS>.nB{min-width:0;padding:26px 0 26px 36px;border-left:1px solid var(--line)}
.nX{display:block;padding:24px 0 26px}
.nk{margin:0 0 14px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
/* Kop: het uitkomstvak is breder, zodat "Elektrisch € 60.610 goedkoper" op één regel past */
.nTop{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.nTop>.nA{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:8px}
.nBk{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 6px}
.nSub{margin:0;color:var(--ink-2);font-size:15px}
.nTop>.nB{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;padding-top:8px}
.nV{margin:0;font:600 clamp(28px,3.3vw,46px)/1.1 var(--text);letter-spacing:-.02em;white-space:nowrap}
.nV.ev{white-space:normal;text-wrap:balance}
.nV b{color:var(--volt-ink);font-variant-numeric:tabular-nums}.nB.neg .nV b{color:var(--amber-ink)}
.nVs{margin:0;font-size:17px;color:var(--ink-2)}
.nTop .acts{margin-top:10px}
.rcb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 14px;font-size:16px;font-variant-numeric:tabular-nums}
.rcb i{display:block;height:12px}
.rcb u{display:block;height:100%;border-radius:3px;background:var(--amber)}.rcb i.e u{background:var(--volt-2)}
.rcb b{text-align:right;font-weight:600}
.nPk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border-top:1px solid var(--line)}
.nPk div{display:flex;flex-direction:column;gap:2px;padding:14px 0 0}
.nPk div+div{padding-left:18px;border-left:1px solid var(--line)}
.nPk span{font-size:13px;color:var(--ink-3)}
.nPk b{font:600 24px/1.2 var(--display);font-variant-numeric:tabular-nums}
.nSl{display:flex;flex-direction:column;gap:20px}
.rsl{display:flex;flex-direction:column;gap:2px;min-width:0}
.rsl label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px;color:var(--ink-2)}
.rsl label b{color:var(--ink);font:600 19px var(--display);font-variant-numeric:tabular-nums}
.rsl input{--fill:var(--ink);--track:var(--line);--thumb:#fff;margin:0}
.nTl{display:grid;grid-template-columns:minmax(0,1fr)}
.nTl .st{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 26px 11px 0;border-bottom:1px solid var(--line);background:none}
.nTl .st:first-child{padding-top:0}.nTl .st:first-child svg{margin-top:-14px}
.nTl .st:last-child{border-bottom:0}
.nTl .st:hover{background:none}.nTl .st:hover b{text-decoration:underline;text-underline-offset:3px}
.nTl .st span{display:flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}
.nTl .st span i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--amber)}.nTl .st span i.e{background:var(--volt)}
.nTl .st b{font-size:15px;text-align:right}
.nTl .st svg{top:50%;right:0;margin-top:-8px}
.nF{display:flex;flex-direction:column}
.rf{display:flex;flex-direction:column;gap:2px;min-width:0;padding:11px 0;border-bottom:1px solid var(--line)}
.rf:first-child{padding-top:0}.rf:last-child{border-bottom:0}
.rf>span{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
.rf b{font:600 24px/1.2 var(--display);font-variant-numeric:tabular-nums}
.rf b small{font:500 14px var(--text);color:var(--ink-3)}
.rhgo{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:6;align-self:center;display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:15px 28px;border-radius:12px;background:var(--ink);color:#fff;text-decoration:none;font:700 17px var(--text);box-shadow:0 16px 34px -16px rgba(0,0,0,.55)}
.rhgo:hover{background:#000;color:#fff}
.rhgo svg{width:19px;height:19px}
/* Waar zit het verschil */
.nXh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.nXh .nk{margin:0}
.xdh,.xdr{display:grid;grid-template-columns:150px minmax(0,1fr) 120px 120px 120px;align-items:center;gap:14px;font-variant-numeric:tabular-nums}
.xdh{padding:12px 0 8px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.xdh>span:nth-child(n+3){text-align:right}
.xsc{position:relative;height:14px;text-transform:none;letter-spacing:0}
.xsc em{position:absolute;top:0;transform:translateX(-50%);font-style:normal;white-space:nowrap}
.xsc em:first-child{transform:none}.xsc em:last-child{transform:translateX(-100%)}
.xdr{padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.xdr:hover{background:var(--soft)}
.xdl{color:var(--ink-2)}
.xdb{position:relative;display:flex;flex-direction:column;gap:3px;padding:3px 0}
.xdb s{position:absolute;top:-9px;bottom:-9px;width:1px;background:var(--line);opacity:.7}
.xdb i{position:relative;display:block;height:9px;min-width:2px;border-radius:2px;background:var(--amber);cursor:default;transition:filter .12s}
.xdb i.e{background:var(--volt-2)}
.xdb i:hover{filter:brightness(.85)}
.xdv{text-align:right}
.xdf{text-align:right;font-weight:600}.xdf.g{color:var(--volt-ink)}.xdf.a{color:var(--amber-ink)}
.xdt{font-weight:700}.xdt .xdl{color:var(--ink)}.xdt:hover{background:none}
.xtip{position:fixed;z-index:60;padding:7px 11px;border-radius:7px;background:var(--ink);color:#fff;font:600 14px var(--text);white-space:nowrap;pointer-events:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
/* Uitgebreid: per maand, per rit, restwaarde en actieradius */
.xF{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.nS2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.xt{display:flex;flex-direction:column}
.xtr{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(84px,auto));align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:15px;font-variant-numeric:tabular-nums}
.xtr>:nth-child(n+2){text-align:right}
.xtr>span:first-child{color:var(--ink-2)}
.xtr>b{font-weight:500}.xtr>b.xdf{font-weight:600}
.xth{padding:0 0 8px;border-top:0;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.xth>span:first-child{color:var(--ink-3)}
.xtt>span:first-child{color:var(--ink)}.xtt>b{font-weight:700}
.xtr.on{background:var(--soft);box-shadow:-10px 0 0 var(--soft),10px 0 0 var(--soft)}
.xtr.on>span:first-child{color:var(--ink);font-weight:600}
.xtr em{margin-left:6px;font:500 11px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.xt+.nF{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.xrit{margin-bottom:18px}
.xrg i.w u{background:var(--volt-soft);box-shadow:inset 0 0 0 1px var(--volt-2)}
.xrv{margin:18px 0 14px;font:600 19px/1.3 var(--text);color:var(--volt-ink)}.xrv.a{color:var(--amber-ink)}
/* Uitgebreid in dezelfde stijl: secties met lijnen, kopjes als labels */
[data-page=uitgebreid] .cmain>section{margin:0;padding:24px 0 28px;border-bottom:1px solid var(--line)}
[data-page=uitgebreid] .cmain>section>h2,[data-page=uitgebreid] .vsh h2,[data-page=uitgebreid] .addt h2{margin:0 0 14px;font:500 12px var(--mono)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
[data-page=uitgebreid] .vsh{margin:0 0 4px;align-items:center}
[data-page=uitgebreid] .vsh h2{margin:0}
[data-page=uitgebreid] .snp{display:none}
[data-page=uitgebreid] :is(.vsl,.pbc,.snw .bec,.hmw,.add){background:none!important;box-shadow:none!important;border-radius:0!important}
[data-page=uitgebreid] .add{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}
[data-page=uitgebreid] .add .addt h2{margin:0}
.xback{display:flex;width:max-content;margin:28px auto 8px}
@media(max-width:640px){.xback{width:auto}}
[data-page=uitgebreid] :is(.pbt>div:first-child,.pbq>div,.snw .bc2){background:var(--page)!important}
[data-page=uitgebreid] .pbsw{padding-left:0;padding-right:0;background:none;box-shadow:none;border-top:1px solid var(--line);border-radius:0}
[data-page=uitgebreid] :is(.rl,.colh .cm){background:none}
[data-page=uitgebreid] .rh:hover .rl{background:var(--soft)}
@media(max-width:900px){
 .nS,.nTop,.nS2{grid-template-columns:minmax(0,1fr)}
 .nS>.nA{padding:22px 0}
 .nS>.nB{padding:22px 0;border-left:0;border-top:1px solid var(--line)}
 .nTop>.nB{padding-top:20px}
 .nV{white-space:normal}
}
@media(max-width:640px){
 .bkw{padding-top:10px}
 .bk{font-size:13px}
 .rN{padding-top:4px}
 .rveh svg{width:42px;height:20px}
 .rveh h1{font-size:28px}
 .nV{font-size:30px}.nVs{font-size:15px}
 .nPk b{font-size:19px}.nPk div+div{padding-left:10px}
 .rhgo{align-self:stretch;justify-content:center;padding:15px 18px;font-size:16px}
 .xdh,.xdr{grid-template-columns:minmax(0,1fr) 70px 70px 74px;gap:8px;font-size:13px}
 .xdh{font-size:9px}
 .xdh>span:nth-child(2){display:none}
 .xdr .xdb{grid-column:1/-1;grid-row:2;margin-top:2px}
 .xdb s{display:none}
 .xtip{font-size:13px;white-space:normal;max-width:calc(100vw - 16px)}
 .xtr{grid-template-columns:minmax(0,1fr) repeat(3,minmax(64px,auto));gap:8px;font-size:13px}
 .xth{font-size:9px;align-items:end}
 .xth>span{white-space:normal;line-height:1.35}
 .xtr.xrw{grid-template-columns:auto repeat(3,minmax(0,1fr))}
 .xrv{font-size:17px}
 [data-page=uitgebreid] #unit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
 [data-page=uitgebreid] #unit button{padding:7px 2px;font-size:13px;white-space:nowrap}
 [data-page=uitgebreid] .colh span{font-size:10px!important;letter-spacing:.02em}
}
/* Uitgebreid, gevoeligheid: alle labels, schaalgetallen en de tabel in Plex Sans 500, net als de stroomprijzen links in de tabel. Alleen de grote bedragen in Plex Condensed */
[data-page=uitgebreid] .bc2>small{font:500 14px var(--text);letter-spacing:0;text-transform:none;color:var(--ink-2)}
[data-page=uitgebreid] .bc2>b{font:600 24px/1.2 var(--display)}
[data-page=uitgebreid] .bc2>b small{font:500 14px var(--text);color:var(--ink-3)}
[data-page=uitgebreid] .trk em{font:500 12px var(--text);letter-spacing:0}
[data-page=uitgebreid] .trk .tk s{font:500 11px var(--text);font-variant-numeric:tabular-nums}
[data-page=uitgebreid] .hmw>small{font:500 14px var(--text);letter-spacing:0;text-transform:none;color:var(--ink-2)}
[data-page=uitgebreid] .hm{font:500 14px var(--text);font-variant-numeric:tabular-nums}
[data-page=uitgebreid] .hm th{font:500 14px var(--text);color:var(--ink-2)}
[data-page=uitgebreid] .hm tr:first-child th{font:500 14px var(--text);letter-spacing:0;color:var(--ink-2)}
/* Sectietitels op Simpel en Uitgebreid: vet en in gewone schrijfwijze, als echte titel */
:is(.nk,[data-page=uitgebreid] .cmain>section>h2,[data-page=uitgebreid] .vsh h2,[data-page=uitgebreid] .addt h2){margin:0 0 16px!important;font:700 22px/1.2 var(--text)!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ink)!important}
.nXh .nk{margin:0!important}
.lang{display:flex;align-items:center;gap:3px;flex:none;margin-left:14px;font:600 12px/1 var(--text)}
.lang a{display:inline-flex;align-items:center;text-decoration:none;border:0;border-radius:3px;background:none;padding:8px 5px;color:var(--ink-3);font:inherit;cursor:pointer;min-height:36px}
.lang a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.lang a:hover{color:var(--ink)}.lang span{color:var(--line-2)}
.top .lang a{color:#B8C0BA}.top .lang a[aria-current=page],.top .lang a:hover{color:#fff}.top .lang span{color:#7D867F}
.price-note{display:block;max-width:60ch;line-height:1.5;margin:6px 0}
html[lang=en] [data-page=uitgebreid] .pbt>div:first-child::before{content:"Payback period"}
@media(max-width:760px){.lang{margin-left:4px;gap:0}.lang a{padding:8px 4px}.topin>.mnu{margin-left:auto}.topin>.brand{min-width:0}}
@media print{.lang{display:none}}
/* Uitgebreid: maandlasten in de opmaak van Alle kosten op de startpagina */
.mlS{border-top:0;border-bottom:1px solid var(--line)}
.mlS .uvt i{min-width:0}
/* PDF-rapport, ontwerp A: uitgangspunten, terugverdientijd, maandkosten, gevoeligheid en restwaarde */
.rpt h2{margin:16px 0 6px}
.rpt .rpk{margin-top:18px}
.rpt .rpv{margin-top:14px}.rpt .rpv>div{padding:12px 16px}.rpt .rpv strong{font-size:26px}.rpt .rpv .w strong{font-size:32px}
.rpt .rpc .rpb i{height:4px;margin:1px 0}
.rpt .rpch svg{max-height:52mm}
.rpu{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px;break-inside:avoid}
.rpu dl{margin:0}
.rpu div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--line);font-size:11px}
.rpu dt{color:var(--ink-2)}.rpu dd{margin:0;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.rpx{margin:6px 0 0;font-size:10.5px;color:var(--ink-3)}
.rpt .rpc td{padding:5px 0}
.rpbl{display:grid;grid-template-columns:auto 1fr 1fr;gap:18px;align-items:baseline;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.rpbl small{display:block;font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.rpbl b.num{font-size:22px;color:var(--volt-ink)}
.rpbl p{margin:0;font-size:11.5px;color:var(--ink-2)}.rpbl p b{color:var(--ink)}
.rpm2{display:grid;grid-template-columns:1fr 1fr;gap:12px;break-inside:avoid}
.rpmc{display:flex;flex-direction:column;gap:7px;padding:14px 16px;border-radius:10px}
.rpmc.d{background:#FDF6EC}.rpmc.e{background:#EEF7F2}
.rpmc small{font-size:11.5px;color:var(--ink-2)}
.rpmc>b{font-size:28px;line-height:1}.rpmc>b span{font:500 11px var(--text);color:var(--ink-3)}
.rpmc i{display:flex;gap:2px;height:11px}
.rpmc u{display:block;height:100%}.rpmc u:first-child{border-radius:3px 0 0 3px}.rpmc u:last-child{border-radius:0 3px 3px 0}
.rpmc.d u:first-child,.rpmc.d p span:first-child s{background:#F2A33A}.rpmc.d u:last-child,.rpmc.d p span:last-child s{background:#F8CE92}
.rpmc.e u:first-child,.rpmc.e p span:first-child s{background:#07734A}.rpmc.e u:last-child,.rpmc.e p span:last-child s{background:#3DAA77}
.rpmc p{display:flex;justify-content:space-between;gap:10px;margin:0;font-size:11.5px}
.rpmc p s{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;vertical-align:-1px}
.rpms{margin:10px 0 0;font-size:12.5px;color:var(--ink-2)}
.rpms .good{color:var(--volt-ink)}.rpms .bad{color:var(--amber-ink)}
.rpt .rpg{grid-template-columns:repeat(3,1fr)}
.rp2c{display:grid;grid-template-columns:1fr 1fr;gap:26px;break-inside:avoid}
.rph2{width:100%;border-collapse:separate;border-spacing:2px;font:500 11px var(--text);font-variant-numeric:tabular-nums;text-align:center}
.rph2 th{font-weight:500;color:var(--ink-2)}.rph2 tr th:first-child{text-align:left}
.rph2 td{padding:5px 0;border-radius:2px}
.rph2 td.cur{outline:1.5px solid var(--ink);outline-offset:-1.5px;font-weight:700}
.rpr th,.rpr td{font-size:11px}.rpr tr.now td{font-weight:700;color:var(--ink)}
.rpn{margin-top:18px;font-size:10.5px;color:var(--ink-3)}.rpn a{color:var(--ink-2)}
/* E-mailvenster voor de PDF */
.pdfd{width:min(460px,calc(100vw - 32px));padding:0;border:0;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.55)}
dialog.pdfd::backdrop{background:rgba(21,23,26,.5)}
.pdfd form{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px}
.pdfd h2{margin:0;padding-right:40px;font:700 22px/1.2 var(--text)}
.pdfd p{margin:0;color:var(--ink-2);font-size:15px}
.pdfd label{display:flex;flex-direction:column;gap:6px;font:600 14px var(--text)}
.pdfd input[type=email]{height:48px;padding:0 14px;border:0;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--line-2);font:500 16px var(--text);color:var(--ink);background:var(--card)}
.pdfd input[type=email]:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}
.pdfd .pdfc{flex-direction:row;align-items:flex-start;gap:10px;font:400 14px var(--text);color:var(--ink-2)}
.pdfd .pdfc input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--volt)}
.pdfd .pdfe{color:#B3261E;font-size:14px}
.pdfd .cta{justify-content:center}
.pdfd small{font-size:13px;color:var(--ink-3)}.pdfd small a{color:var(--ink-2)}
.pdfd .wzx{position:absolute;top:16px;right:16px}
@media print{.pdfd{display:none!important}}
/* Kentekenknop in de stappen net als op de startpagina: zwart met pijl, ook na een gevonden kenteken */
.nwu .plate button,.nwu .plate button:hover,.nwu .plate.ok button{width:32px;height:32px;border-radius:8px;background:var(--ink);color:#fff}
.nwu .plate button svg{width:16px;height:16px}
.nwu .plate.ok .pok{display:none}.nwu .plate.ok .pgo{display:block}
/* Kostenbalk op mobiel: diesel en elektrisch gespiegeld gelijk, naam boven, bedrag met per km eronder op één regel, gecentreerd */
@media(max-width:640px){
 .mini .md,.mini .me{flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 8px;font:600 12px/1 var(--text);letter-spacing:.02em}
 .mini .md .mv,.mini .me .mv{order:1;flex-direction:row;align-items:baseline;gap:4px}
 .mini .mv small{font-size:11px}
}
/* Snel tikken op Vorige/Volgende (en andere knoppen) zoomt niet meer in; knijpen om te zoomen blijft werken */
html{touch-action:manipulation}
/* Knoppen met een pijl: bij hover of toetsenbordfocus schuift de pijl een stukje op en veert terug (vooruit naar rechts, terug naar links) */
:is(a,button) svg:has(>path[d="M4 12h15M13 6l6 6-6 6"]),:is(a,button) svg:has(>path[d="M20 12H5M11 6l-6 6 6 6"]){transition:transform .25s cubic-bezier(.3,.7,.2,1.4)}
@media(hover:hover){:is(a,button):not(.plate button):hover svg:has(>path[d="M4 12h15M13 6l6 6-6 6"]){transform:translateX(5px)}:is(a,button):hover svg:has(>path[d="M20 12H5M11 6l-6 6 6 6"]){transform:translateX(-5px)}}
:is(a,button):not(.plate button):focus-visible svg:has(>path[d="M4 12h15M13 6l6 6-6 6"]){transform:translateX(5px)}:is(a,button):focus-visible svg:has(>path[d="M20 12H5M11 6l-6 6 6 6"]){transform:translateX(-5px)}
@media(prefers-reduced-motion:reduce){:is(a,button) svg{transition:none!important}}
/* Terug naar start: zelfde plek en klein, maar in de stijl van de knop Uitgebreide resultaten (zwart, wit, ronde hoeken, schaduw, pijl die opschuift) */
.nBk .bk[data-home]{padding:8px 14px;border-radius:9px;background:var(--ink);color:#fff;font:700 14px var(--text);box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.nBk .bk[data-home]:hover{background:#000;color:#fff}
.nBk .bk[data-home] svg{width:15px;height:15px}
@media(max-width:640px){.nBk .bk[data-home]{padding:7px 12px;font-size:13px}}
/* Resultaat, linker blok: het gekozen voertuig op dezelfde plek, iets lager; Terug naar start iets naar links */
.rvw>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
@media(min-width:641px){
 .nTop>.nA .rvw{margin-top:16px}
 .nTop>.nA .nBk{margin-left:-14px}
}
/* Resultaat: Aanpassen en PDF iets groter */
.nTop .acts{gap:8px}
.nTop .acts .btn{padding:10px 16px;font-size:15px;gap:8px;border-radius:9px}
.nTop .acts .btn svg{width:17px;height:17px}
@media(min-width:641px){.nTop .acts{gap:10px}.nTop .acts .btn{padding:12px 20px;font-size:16px;gap:9px;border-radius:10px}.nTop .acts .btn svg{width:19px;height:19px}}
/* Wat kost het per maand: bedragen bij de onderdelen in dezelfde letter als Doorberekenen aan je opdrachtgever */
.mlS .uvc small{font:600 15px var(--text);font-variant-numeric:tabular-nums}
@media(max-width:640px){.mlS .uvc small{font-size:13px}}
/* Omslagpunten: de cijfers in dezelfde letter als Doorberekenen aan je opdrachtgever; labels blijven zoals ze zijn */
:is([data-r=facts],[data-r=xfacts]) .rf b{font:600 20px/1.3 var(--text);font-variant-numeric:tabular-nums}
@media(max-width:640px){:is([data-r=facts],[data-r=xfacts]) .rf b{font-size:17px}}
/* Gevoeligheid (Uitgebreid): de break-even-bedragen en de getallen onder de grafieken in dezelfde letter als Doorberekenen aan je opdrachtgever */
[data-page=uitgebreid] .bc2>b{font:600 20px/1.3 var(--text);font-variant-numeric:tabular-nums}
[data-page=uitgebreid] .trk .tk s{font:500 11px var(--text);font-variant-numeric:tabular-nums}
#sum .st b,.nTl .st b{font-weight:400}
/* Lease: kopen of leasen per kant, wat er in de leaseprijs zit, en het contract bij een eigen offerte */
/* Drie keuzes per kant (kopen, leasen, huidige of gebruikt) op één regel */
.nwg{display:flex;flex-wrap:nowrap;width:100%}.nwg button{flex:1 1 auto;padding:6px 8px;white-space:nowrap}
/* Operational lease is een lang woord: laat de knoppen afbreken in plaats van over de rand te lopen */
.nwg.seg button{white-space:normal;line-height:1.25}
.qk.lin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.lin>span{margin-right:4px;font-size:13px;font-weight:600;color:var(--ink-3)}
.lin label{position:relative;border-radius:4px;padding:6px 12px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font:600 13px var(--text);cursor:pointer;user-select:none}
.lin label:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.lin label:has(input:checked){background:var(--ink);color:#fff;box-shadow:none}
.lin label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.lin input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.lqw{margin-top:18px}
.lnote .lnv{font-size:14px;font-weight:600;color:var(--volt-ink)}
.xdv.xil{color:var(--ink-3)}
.xka{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3)}
@media(max-width:640px){.xtr.xkm{grid-template-columns:62px repeat(3,minmax(0,1fr))}.xkm em{display:block;margin:2px 0 0}}
/* Samenhang: elke pagina dezelfde kopletter, dezelfde kaarthoeken en dezelfde groene tekstlinks */
.ga h1{font-weight:600;letter-spacing:-.015em}
:is(.prose,.ga,.tli,.uvS>header,.faq) h2,.gfh{font-weight:600;letter-spacing:-.01em}
@media(min-width:641px){.ga h1{font-size:clamp(32px,4.2vw,48px)}:is(.prose,.ga) h2,.gfh,.uvS>header h2{font-size:24px}.tli h2{font-size:22px}}
.disc{box-shadow:0 0 0 1px var(--line)}
.uv p a,.uv .faq a{color:var(--volt-ink);text-decoration-color:currentColor}
/* Over ons: oprichters, wat we samen brengen */
.oostory{max-width:720px}
.oostory p{margin:0 0 20px;font-size:18px;line-height:1.65;color:var(--ink-2)}
.oostory .oolead{margin-bottom:28px;color:var(--ink)}
.oostory .ooq{margin:32px 0;padding:4px 0 4px 22px;border-left:3px solid var(--volt);color:var(--ink)}
.ooqd{margin:32px 0;padding:22px 24px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.ooqd h3{margin:0 0 14px;font-size:18px;color:var(--ink)}
.ooqd ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ooqd li{display:flex;gap:14px;align-items:center;font-size:17px;line-height:1.5;color:var(--ink)}
.ooqd svg{flex:none;width:34px;height:34px;padding:7px;border-radius:10px;background:var(--volt-soft);stroke:var(--volt-ink)}
.ooth{margin:56px 0 18px;font:600 26px/1.2 var(--text);letter-spacing:-.01em}
.oots{max-width:900px}/* Jan en Max open naast elkaar, zonder kaart, met een lijn ertussen; zo staat er maar één vak (de vragen) op de pagina */
.oots{gap:0}
.oots .oof{padding:4px 28px 4px 0;background:none;box-shadow:none;border-radius:0}
.oots .oof+.oof{padding:4px 0 4px 28px;border-left:1px solid var(--line)}
@media (max-width:860px){.oots .oof,.oots .oof+.oof{padding:0 0 18px;border-left:0}.oots .oof+.oof{padding-top:18px;border-top:1px solid var(--line)}}.oots .ooh{margin-bottom:14px}.oots .oom{width:46px;height:46px;font-size:16px}
.ooh h3{margin:0;font:600 20px/1.2 var(--text);letter-spacing:-.01em}
.oof .oox{margin:4px 0 14px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.oolead{max-width:760px;margin:0 0 40px;font:500 21px/1.5 var(--text);color:var(--ink)}
.oot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.oof{display:flex;flex-direction:column;padding:28px;border-radius:6px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.oof p{margin:0 0 12px;color:var(--ink-2)}
.ooh{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.oom{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--volt-soft);color:var(--volt-ink);font:600 19px var(--display);letter-spacing:.02em}
.ooh h2{margin:0;font:600 24px/1.2 var(--text);letter-spacing:-.01em}
.oof .oor{margin:4px 0 0;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ood{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:8px 0 20px;padding-top:18px;border-top:1px solid var(--line)}
.ood dt{margin-bottom:6px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ood dd{margin:0 0 4px;font-size:15px;line-height:1.4;color:var(--ink)}
.ool{margin-top:auto;align-self:flex-start;font-weight:600;font-size:15px}
.oos{margin-top:64px}
.oos h2{margin:0 0 22px;font:600 26px/1.2 var(--text);letter-spacing:-.01em}
.oos ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;counter-reset:oo}
.oos li{padding:0 24px;border-left:1px solid var(--line);counter-increment:oo}
.oos li:first-child{padding-left:0;border-left:0}
.oos li::before{content:"0" counter(oo);display:block;margin-bottom:10px;font:500 12px var(--mono);letter-spacing:.08em;color:var(--volt-ink)}
.oos b{display:block;font:600 18px/1.3 var(--text)}
.oos p{margin:8px 0 0;color:var(--ink-2);font-size:16px}
.ooc{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:48px 0 8px;padding:24px 28px;border-radius:8px;background:#E8F2EC}
.ooc a:not(.cta){font-weight:600}
.oop{margin-top:24px}
@media (max-width:860px){.oot{grid-template-columns:1fr}.oos ol{grid-template-columns:1fr;gap:22px}.oos li{padding:0;border-left:0}}
@media (max-width:640px){.oolead{font-size:18px;margin-bottom:28px}.oof{padding:22px 20px}.oom{width:48px;height:48px;font-size:17px}.ooh h2{font-size:21px}.ood{grid-template-columns:1fr;gap:12px}.oos{margin-top:44px}.oos h2{font-size:22px}.ooc{padding:20px;margin-top:36px}}
/* Interactie: alles wat je kunt aanklikken reageert zacht. Kleuren lopen in .15s over, knoppen en kaarten komen bij hover 1–2 px omhoog
   en zakken bij indrukken even in. Alleen kleur, schaduw en een kleine verschuiving: de opmaak zelf blijft staan.
   Beweging alleen met een muis (hover:hover) en niet bij prefers-reduced-motion; indrukken werkt ook op telefoon. */
:where(a,button,summary,label,select,input,textarea,.slv,.plate){transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,text-decoration-color .15s ease,translate .15s ease}
.vt{transition:box-shadow .15s ease,translate .15s ease}
.gtl a,.mc{transition:box-shadow .15s ease,translate .15s ease}
.st svg{transition:color .15s ease,translate .15s ease}
input[type=range]::-webkit-slider-thumb{transition:box-shadow .15s ease}
input[type=range]::-moz-range-thumb{transition:box-shadow .15s ease}

/* Schuiven: de knop krijgt bij hover een zachte ring, bij vastpakken een grotere */
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px color-mix(in srgb,var(--fill,var(--ink)) 14%,transparent),0 2px 5px rgba(0,0,0,.2)}
input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 9px color-mix(in srgb,var(--fill,var(--ink)) 20%,transparent),0 2px 6px rgba(0,0,0,.25)}
input[type=range]:hover::-moz-range-thumb{box-shadow:0 0 0 6px color-mix(in srgb,var(--fill,var(--ink)) 14%,transparent)}
input[type=range]:active::-moz-range-thumb{box-shadow:0 0 0 9px color-mix(in srgb,var(--fill,var(--ink)) 20%,transparent)}

/* Invulvelden: de rand wordt donkerder zodra je erboven komt, zodat je ziet dat je kunt typen */
.slv:hover:not(:focus-within){box-shadow:inset 0 0 0 1px var(--ink-3)}
:is(.ff input,.ff textarea,.gpc input,.mpp input,.selw select):hover:not(:focus){box-shadow:inset 0 0 0 1px var(--ink-3)}
.pdfd input[type=email]:hover:not(:focus){box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.msearch input:hover:not(:focus){border-color:var(--ink-3)}
.plate:not(.hplt .plate):hover:not(:focus-within){box-shadow:inset 0 0 0 1px var(--ink-3)}
.selw:hover::after{border-color:var(--ink)}

/* Schakelaars en vinkjes */
.sw2:hover input:not(:checked){background:var(--ink-3)}
.sw2:hover input:checked{background:var(--volt-ink)}
.mcv:hover{color:var(--ink)}
.mcv:has(input:disabled){cursor:not-allowed}.mcv:has(input:disabled):hover{color:var(--ink-2)}

/* Tabs en wisselknoppen die nog geen achtergrond kregen bij hover */
.uvtab button:not([aria-selected=true]):hover,.mode a:not([aria-current=page]):hover,#mCat a:not([aria-current=page]):hover{background:rgba(21,23,26,.06)}
.hch button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.uvc button:not([aria-pressed=true]):hover{box-shadow:inset 0 0 0 1px var(--ink)}
.gnx a:hover small{color:var(--ink-2)}

/* Indrukken: knoppen zakken 1 px in, ook op telefoon */
@media (prefers-reduced-motion:no-preference){
 :is(button,[role=button],.cta,.rhgo,.btn,.bk[data-home],.mode a,#nav a,#mCat a,.gnx a,.gtl a,.fln,.lang a):not(:disabled):active{translate:0 1px;transition-duration:.05s}
 :is(.rh,.lnk,.mci,.pbpk):not(:disabled):active{translate:none}
}

/* Hover met een muis: knoppen en kaarten komen een tikje omhoog */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
 :is(.cta,.rhgo,.btn,.wbtn,.bk[data-home],.ckb button,.addc,.chip,.zch,.qk button,.qs,.qi,.uvc button,.mpb):not(:disabled):not(:active):hover{translate:0 -1px}
 :is(.cta:not(.big):not(.hgo),.rhgo):not(:active):hover{box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
 :is(.vt,.hch button,.gtl a,.gnx a,.fln):not(:active):hover{translate:0 -2px}
 :is(.vt,.hch button):not(:active):hover{box-shadow:inset 0 0 0 1px var(--ink),0 10px 22px -16px rgba(0,0,0,.4)}
 .vt[aria-checked=true]:hover,.hch button[aria-checked=true]:hover{box-shadow:inset 0 0 0 2px var(--ink),0 10px 22px -16px rgba(0,0,0,.4)}
 .gnx a:not(:active):hover{box-shadow:0 0 0 1px var(--ink),0 10px 22px -16px rgba(0,0,0,.4)}
 .fln:not(:active):hover{box-shadow:0 12px 24px -16px rgba(0,0,0,.6)}
 .gtl a:not(.gsp):hover{box-shadow:0 0 0 1px var(--ink),0 10px 22px -16px rgba(0,0,0,.4)}
 .gtl a.gsp:hover{box-shadow:0 0 0 2px var(--volt),0 10px 22px -16px rgba(0,0,0,.5)}
 .st:hover svg{translate:2px -2px}
 /* Logo: het schakelaartje kriebelt even richting de andere stand */
 .brand:hover .bmark .bk{transform:translateX(-4px)}
 html.sod-d .brand:hover .bmark .bk{transform:translateX(-24px)}
}


#mCat a{display:inline-flex;align-items:center;padding:7px 13px;text-decoration:none;color:var(--ink-2);font:600 14px var(--text);border-radius:4px;white-space:nowrap}#mCat a[aria-current=page]{background:var(--ink);color:white}.seo-intro{max-width:72ch;color:var(--ink-2);font-size:17px;line-height:1.5;margin:14px 0 0}.seo-advice{max-width:76ch;color:var(--ink-2);line-height:1.6;margin:24px 0}#home{min-height:360px}@media(max-width:760px){#mCat a{padding:7px 9px;font-size:13px}#home{min-height:570px}}
/* Calculator nalopen (2026-11-02): uitlijning en lucht */
.wst>h3+.wsec[hidden]+.wsec{margin-top:0!important}
#dwG:not([hidden])~#byD>.sl:first-child{margin-top:8px}
.nTl .st span i{display:none}
.mlS .uvb{grid-template-columns:120px minmax(0,1fr) 96px}
@media(max-width:640px){.mlS .uvb{grid-template-columns:100px minmax(0,1fr) 76px}}
@media(min-width:901px){
 [data-page=uitgebreid] :is(.pbt>div:first-child,.snw .bc2:first-child){padding-left:0}
 [data-page=uitgebreid] .hmw{padding-left:0;padding-right:0}
 [data-page=uitgebreid] .hm th:first-child{width:1%}
}
/* Telefoon en tablet, ronde 3 (2026-10-26): de hele site op 320–900 px. Regels breken netjes (geen los woord op de laatste regel),
   knoppenrijen passen altijd in de breedte, tabellen houden hun kolommen recht en de kop blijft op één regel. Desktop verandert niet. */
@media(max-width:900px){
 :is(h1,h2,h3,h4,summary,.glk a,.gcl,.gbr small,.nV,.hxh,.mcn,.tlb,.rl b,.xrv,.gtl a b,.fln b,.st span,.rf span,.xtr>span:first-child,.wzh h2,label,.gl){text-wrap:balance}
 :is(p,li,dd,.faq p,.prose p,.ga p,.tlx p){text-wrap:pretty}
}
@media(max-width:640px){
 /* Kop: logo, Menu en taal op één regel, ook op 320 px */
 .topin{gap:10px}
 .topin>.brand{flex:none;font-size:18px;white-space:nowrap;gap:8px}
 .mnu{padding:8px 13px;font-size:14px}
 .lang{margin-left:0}
 .lang a{padding:8px 6px;min-width:30px;justify-content:center}
 .lang a[aria-current=page],.lang span{display:none}

 /* Startscherm: de twee keuzes als rustige rijen, zodat de tekst niet over drie regels breekt */
 .hch{grid-template-columns:minmax(0,1fr);gap:6px}
 .hch button{padding:12px 44px 12px 14px;min-height:46px}
 .hch b{font-size:15px}
 .hch button::after{right:14px}
 .hA .vt b{font-size:13.5px;letter-spacing:-.01em}
 .uvtab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible;margin-right:0}
 .uvtab button{padding:9px 10px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px}
 .uvtab button[aria-selected=true]{box-shadow:none}

 /* Simpel: de drie bedragen per km staan op dezelfde hoogte, ook als een label over twee regels gaat */
 .nPk>div{display:flex;flex-direction:column;justify-content:space-between;gap:4px}
 .nPk span{font-size:13px;line-height:1.3}

 /* Tabellen: kopjes in gewone letters in plaats van smalle hoofdletters, zodat niets wordt afgekapt */
 .xdh,.xth,[data-page=uitgebreid] .colh span{font:500 11px/1.3 var(--text)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-3)}
 .xdh>span,.xth>span{white-space:normal;text-wrap:balance}
 .xtr.xrw{grid-template-columns:58px repeat(3,minmax(0,1fr))}
 .nkp{display:none}
 .nVs{text-wrap:balance}
 .xtr.on{box-shadow:-8px 0 0 var(--soft),8px 0 0 var(--soft)}
 .xtr em{display:block;margin:1px 0 0;font-size:9px}
 [data-page=uitgebreid] .colh>span{white-space:normal;text-wrap:balance;padding:0 4px}

 /* Uitgebreid: blokken lijnen links uit met de rest, schaalgetallen botsen niet */
 [data-page=uitgebreid] :is(.pbt>div:first-child,.pbq>div,.snw .bc2){padding-left:0!important;padding-right:0!important}
 [data-page=uitgebreid] .trk:has(.tk:nth-of-type(7)) .tk:nth-of-type(even) s{visibility:hidden}
 [data-page=uitgebreid] .hm tr:first-child th:first-child{width:52px;font-size:11px;line-height:1.35}
 .hm tr:first-child th:first-child span:not(.hmd){display:block;white-space:nowrap}
 .hmd{display:none}
 [data-page=uitgebreid] .trk{margin-left:12px;margin-right:12px}
 .xrg~.nF .rf b small{display:block;margin-top:4px}
 .xback{margin:20px 0 0}
 [data-page=uitgebreid] .more{margin-top:20px}

 /* Extra kosten: tegels in twee gelijke kolommen, tekst op één regel */
 [data-page=uitgebreid] .add .addc{padding-left:8px;padding-right:8px;gap:7px;font-size:14px;white-space:nowrap}

 /* Voettekst: links breken de regelafstand niet meer */
 .fdis a,.fdis .fck{display:inline;padding:6px 0}
 .fdis{text-wrap:pretty}

 /* Modellen */
 #mCat.seg{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr)) auto;overflow:visible;width:100%}
 #mCat a{justify-content:center;padding:7px 6px;font-size:13px}
 .mfil #mRg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
 .mfil #mRg button{padding:8px 0;font-size:12.5px;letter-spacing:-.01em}
 .mca .mci{margin-left:auto}
 .mc{grid-template-columns:minmax(0,1fr)}
 .mcr p{flex-wrap:wrap;row-gap:0}
 .mfil #mRg{grid-template-columns:auto repeat(4,minmax(0,1fr))}
 .mfil #mRg button[data-mrg="0"]{padding:8px 9px}

 /* Overstapgids: tools krijgen meer breedte, keuzeknoppen vullen de rij in gelijke vakken */
 .gtool{padding:16px 14px 18px}
 .gc .seg.sm{align-self:stretch;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex-wrap:nowrap}
 .gc .seg.sm button{padding:7px 2px;font-size:13px}
 .gc .seg.sm:has(>:nth-child(5)){grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr))}
 .gc .seg.sm:has(>:nth-child(5))>*{grid-column:span 2}
 .gc .seg.sm:has(>:nth-child(5)):not(:has(>:nth-child(6)))>:nth-child(n+4){grid-column:span 3}
 .gc .seg.sm:has(>:nth-child(5)) button{font-size:12.5px;letter-spacing:-.01em}
 .zmt .gc .seg.sm{align-self:auto}

 /* Restwaarde en andere keuzerijen bovenaan een pagina */

 /* Nieuws en Over ons: koppen en intro iets kleiner, zodat zinnen niet om de twee woorden breken */
 .tli h2{font-size:20px;line-height:1.3}
 .prose>p:first-child{font-size:17px;line-height:1.5}
}
@media(min-width:360px) and (max-width:640px){
 #gtLd .gc .seg.sm{grid-auto-flow:column;grid-template-columns:none}
 #gtLd .gc .seg.sm>*{grid-column:auto}
}
@media(max-width:359px){
 .mfil{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:359px){
 .topin{gap:8px}
 .topin>.brand{font-size:16.5px;gap:7px}
 .mnu{padding:8px 11px}
 .hA .vt b{font-size:12.5px;white-space:normal;text-wrap:balance;line-height:1.15;overflow-wrap:anywhere}
 .xtr{grid-template-columns:minmax(0,1fr) repeat(3,minmax(56px,auto));gap:6px}
 .xtr.xrw{grid-template-columns:50px repeat(3,minmax(0,1fr))}
 .hA .vt{padding-left:4px;padding-right:4px}
 .addl{grid-template-columns:minmax(0,1fr)}
 .mcr b{font-size:34px}
 .nwg.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%}
 .nwg.seg button{padding:6px 2px;font-size:13px}
 .hA .plate input::placeholder{font-size:18px}
 .gtool{padding-left:12px;padding-right:12px}
}
/* Telefoon, ronde 4 (2026-10-26): compacter. Minder witruimte tussen blokken, kleinere koppen, modelkaarten en uitkomstrijen dichter op elkaar. */
@media(max-width:640px){
 /* Uitkomst: kop */
 .nBk{margin-bottom:2px}
 .nBk .bk[data-home]{padding:4px 0;background:none;color:var(--ink-2);box-shadow:none;font-size:13px}
 .nBk .bk[data-home]:hover{color:var(--ink)}
 .rveh{gap:10px}
 .rveh h1{font-size:24px}
 .nS>.nA,.nS>.nB{padding-top:16px;padding-bottom:16px}
 .nTop>.nA{padding-top:10px;padding-bottom:12px}
 .nTop>.nB{padding-top:14px}
 .nTop{position:relative}
 .nTop .acts{position:absolute;top:44px;right:0;margin:0;gap:8px}
 .nTop .acts .btn{padding:8px 11px}
 .nTop:has(.acts) .rvw{padding-right:104px}
 .nV{font-size:27px;line-height:1.15}
 p.nk{font-size:19px!important;margin-bottom:10px!important}
 .nX{padding-top:16px!important;padding-bottom:16px!important}
 .nXh{margin-bottom:2px}
 .nPk{margin-top:14px}
 .nPk>div{padding-top:10px!important}
 /* Schuiven en lijsten dichter op elkaar */
 .nSl{gap:8px}
 .rsl input[type=range]{height:36px}
 .xdr{padding-top:6px;padding-bottom:6px}
 .xdr .xdb{margin-top:0}
 .nTl .st{min-height:42px;padding-top:8px;padding-bottom:8px}
 .nF .rf{padding-top:8px;padding-bottom:8px}
 /* Uitgebreid */
 [data-page=uitgebreid] .cmain>section{padding-top:16px;padding-bottom:18px}
 [data-page=uitgebreid] .cmain>section>h2,[data-page=uitgebreid] .vsh h2{font-size:19px!important}
 [data-page=uitgebreid] .vsh{gap:10px}
 [data-page=uitgebreid] .vsl{margin-top:12px}
 [data-page=uitgebreid] .row .rh>span{padding-top:10px;padding-bottom:10px}
 .uvS.mlS{padding-top:18px;padding-bottom:18px}
 [data-page=uitgebreid] .pbc{margin-top:8px}
 [data-page=uitgebreid] .pbt{grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-page=uitgebreid] .pbt>div:first-child{grid-column:1/-1}
 [data-page=uitgebreid] :is(.pbt>div:first-child,.pbq>div){padding-top:10px;padding-bottom:10px}
 [data-page=uitgebreid] .pbq>div:last-child{padding-left:14px!important}
 [data-page=uitgebreid] .pbq span{font-size:11px!important}
 [data-page=uitgebreid] .pbq b{font-size:22px}
 [data-page=uitgebreid] .pbw{margin-top:10px}
 [data-page=uitgebreid] .snw{margin-top:6px}
 [data-page=uitgebreid] .snw .bc2{padding-top:10px;padding-bottom:4px}
 [data-page=uitgebreid] .trk{margin-top:28px;margin-bottom:30px}
 [data-page=uitgebreid] .fln{margin-top:24px}
 [data-page=uitgebreid] .cmain>.ad{margin-top:24px}
 /* Modellen: kaarten compact. Bereik en specificaties op twee regels, knoppen op één rij */
 .phead{padding-top:10px;padding-bottom:14px}
 .mgrid{gap:10px}
 .mc{display:flex;flex-direction:column;gap:8px;padding:14px 14px 12px}
 .mc>*{align-self:stretch}
 .mca{margin-top:2px}
 .mcn{margin-top:-6px;font-size:19px}
 .mcr{gap:6px}
 .mcr b{font-size:30px}
 .mcs{gap:4px 14px}
 .mcs li{font-size:14px}
 .mcs svg{width:16px;height:16px}
 .mcs .mpr{flex-basis:auto}
 .mca{flex-wrap:nowrap;gap:12px;padding-top:10px}
 .mca .cta{padding:9px 12px;white-space:nowrap}
 .mcv,.mci{white-space:nowrap}
 .mca .mci{padding-top:8px;padding-bottom:8px}
 /* Overige pagina's: kop van de pagina iets dichter op de inhoud */
 .bkw{padding-top:8px}
 .nwr{white-space:nowrap}
 body:has(.page[data-page=gids]:not([hidden])) #bkw{display:none}
 [data-page=uitgebreid] .pbt>div:first-child::before{display:none}
 [data-page=uitgebreid] .hm td{padding-top:7px;padding-bottom:7px}
}
@media(max-width:359px){
 .mca{flex-wrap:wrap}
 .mca .cta{flex:1 1 100%;justify-content:center}
}
/* Kentekenknop in de zero-emissiezonecheck zwart, zoals de kentekenknop op de homepage */
#gtZe .plate button{background:var(--ink)}#gtZe .plate button:hover{background:#000}
/* Neem contact op: dezelfde groene gloed bij aanwijzen als de grote knop op de calculator */
#fSend{position:relative;isolation:isolate;box-shadow:0 10px 24px -14px rgba(10,143,91,.8)!important}
#fSend::before{content:"";position:absolute;inset:-3px;z-index:-1;border:1.5px solid #B4F7D4;border-radius:7px;box-shadow:0 0 8px 0 rgba(180,247,212,.5);opacity:0;pointer-events:none}
#fSend:is(:hover,:focus-visible)::before{animation:pulse2 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#fSend:is(:hover,:focus-visible)::before{animation:none;opacity:.4}}