/* betin-xt — "Blok". Tokens en componenten gedeeld door alle pagina's. */
:root{
  --room:#f8f2e0; --room2:#fdf9ee; --zand:#f1e6c2;
  --blauw:#1636d8; --blauw-d:#1029b4; --navy:#0c1f8f; --geel:#fbdf6b;
  --tekst-zacht:#3d4a8f;
  --r:26px; --r2:16px; --pil:99px;
  --ruim:clamp(104px,9vw,128px);  /* open zones */
  --krap:clamp(40px,5vw,64px);     /* compacte zones */
  /* typeschaal: zes stappen, 14 is de bodem */
  --t1:14px; --t2:16px; --t3:18px; --t4:22px; --t5:26px; --t6:32px;
  --hero-gap:clamp(32px,4.5vw,64px);
  /* AVG-trap in eigen kleuren: vol = sterk, leeg = onbekend; alleen 'let op' krijgt een signaalkleur */
  --avg-sterk:var(--navy); --avg-goed:var(--blauw); --avg-beperkt:#e3b92f; --avg-onbekend:rgba(22,54,216,.22); --avg-let:#c2410c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Archivo,system-ui,sans-serif;hyphens:manual;background:var(--room);color:var(--blauw);line-height:1.45;
  -webkit-font-smoothing:antialiased;font-weight:600;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 36px}
.wrap>*,[class^=z]>*,[class*=' z']>*{min-width:0}

/* ---- zones ---- */
.zone{padding:var(--krap) 0}
.zone.open{padding:var(--ruim) 0}
.band{background:var(--blauw);color:var(--room)}
.band.navy{background:var(--navy)}
.band.geel{background:var(--geel);color:var(--blauw)}

/* ---- logo (logo-c: koppelteken = gele meetlat) ---- */
.logo{display:inline-flex;align-items:center;font-weight:900;font-size:25px;letter-spacing:-.055em;line-height:1;color:var(--blauw)}
.logo .logo-lat{width:22px;height:9px;margin:2px 3px 0;border-radius:5px;background:var(--geel);position:relative;flex:0 0 auto}
.logo .logo-lat::before{content:"";position:absolute;left:5px;right:5px;top:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--navy) 0 1.5px,transparent 1.5px 6px)}
.band .logo,.logo.licht{color:var(--room)}

/* ---- nav ---- */
.nav{display:flex;align-items:center;gap:22px;padding:22px 0}
.nav-sub{font-size:var(--t1);line-height:1.3;padding-left:16px;border-left:2px solid rgba(22,54,216,.18)}
.nav-l{margin-left:auto;display:flex;gap:4px}
.nav-l a{font-size:var(--t1);font-weight:700;padding:9px 16px;border-radius:var(--pil)}
.nav-l a:hover,.nav-l a[aria-current]{background:var(--blauw);color:var(--room)}

/* ---- typografie ---- */
.kop-xl{font-weight:900;font-size:clamp(40px,7vw,100px);line-height:.92;letter-spacing:-.055em;overflow-wrap:break-word}
.kop-mega{font-weight:900;font-size:clamp(56px,11vw,160px);line-height:.84;letter-spacing:-.065em;overflow-wrap:break-word}
.kop-l{font-weight:900;font-size:clamp(30px,4.8vw,66px);line-height:.95;letter-spacing:-.05em;overflow-wrap:break-word}
.kop-m{font-weight:900;font-size:clamp(26px,2.6vw,36px);line-height:1;letter-spacing:-.045em}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.4;max-width:42ch}
.klein{font-size:var(--t1);line-height:1.4}
.band .lead,.band .klein{opacity:.95}

/* ---- gedeelde bouwstenen ---- */
.blk{border-radius:var(--r)}
.kaart{border-radius:var(--r);padding:28px}
.k-room{background:var(--room);color:var(--blauw)}
.k-room2{background:var(--room2);color:var(--blauw)}
.k-geel{background:var(--geel);color:var(--blauw)}
.k-blauw{background:var(--blauw);color:var(--room)}
.k-navy{background:var(--navy);color:var(--room)}
.pil{display:inline-flex;align-items:center;gap:7px;border-radius:var(--pil);padding:6px 15px;font-size:var(--t1);font-weight:800;white-space:nowrap}
.pil.geel{background:var(--geel);color:var(--blauw)}
.pil.blauw{background:var(--blauw);color:var(--room)}
.pil.room{background:var(--room);color:var(--blauw)}
.pil.rand{box-shadow:inset 0 0 0 2px currentColor}
.knop{display:inline-flex;align-items:center;gap:10px;border-radius:var(--pil);padding:14px 26px;font-size:var(--t3);font-weight:900;transition:transform .15s}
.knop:hover{transform:translateX(3px)}
.knop.geel{background:var(--geel);color:var(--blauw)}
.knop.room{background:var(--room);color:var(--blauw)}
.knop.blauw{background:var(--blauw);color:var(--room)}
.pijl::after{content:"→"}
.linkpijl{font-weight:800;font-size:var(--t2)}
.linkpijl::after{content:" →"}

/* scorepil: overal dezelfde */
.score{display:inline-flex;align-items:baseline;gap:3px;font-weight:900;letter-spacing:-.05em;line-height:1}
.score small{font-size:.45em;font-weight:800;letter-spacing:0;opacity:.75}

/* Oppervlakken zetten de kleuren voor alles wat erop staat (AVG-lat, meetlat). Licht is de standaard;
   donkere oppervlakken draaien om, lichte kaarten binnen een donkere band zetten het weer terug. */
:root,.k-room,.k-room2,.k-geel{--vol:var(--blauw);--leeg:rgba(22,54,216,.2);--pil-bg:var(--room2);--pil-rand:rgba(22,54,216,.3);--pil-tekst:var(--blauw)}
.band:not(.geel),.k-blauw,.k-navy{--vol:var(--geel);--leeg:rgba(248,242,224,.32);--pil-bg:transparent;--pil-rand:rgba(248,242,224,.55);--pil-tekst:var(--room)}
.k-geel{--pil-bg:transparent}

/* AVG: één component in twee maten — pil (lat + woord) en lat (alleen de trap). Het niveau is het aantal gevulde segmenten. */
.avg{display:inline-flex;align-items:center;gap:8px;border-radius:var(--pil);padding:4px 12px 4px 8px;font-size:var(--t1);font-weight:800;white-space:nowrap;
  background:var(--pil-bg);color:var(--pil-tekst);box-shadow:inset 0 0 0 1.5px var(--pil-rand)}
.avg-lat{display:inline-grid;grid-template-columns:repeat(4,6px);gap:2px;flex:0 0 auto;vertical-align:middle}
.avg-lat i{height:12px;border-radius:2px;background:var(--leeg)}
.sterk>.avg-lat i,.avg-lat.sterk i,
.goed>.avg-lat i:nth-child(-n+3),.avg-lat.goed i:nth-child(-n+3),
.beperkt>.avg-lat i:nth-child(-n+2),.avg-lat.beperkt i:nth-child(-n+2){background:var(--vol)}
/* 'let op' is de enige signaalkleur en wint in elke context */
.avg.avg.let{background:var(--avg-let);color:#fff;box-shadow:none}
.avg.avg.let .avg-lat i{background:rgba(255,255,255,.45)}
.avg-lat.avg-lat.let i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--avg-let)}
.avg-lat.avg-lat.let i:first-child{background:var(--avg-let)}
/* verdeling (stapelbalk): trap in één kleur, 'beperkt' gearceerd zodat hij op elk oppervlak leesbaar blijft */
.verdeling{display:flex;height:16px;border-radius:99px;overflow:hidden;background:var(--leeg)}
.verdeling i{display:block;height:100%}
.verdeling .sterk{background:var(--navy)}.verdeling .goed{background:var(--blauw)}
.verdeling .beperkt{background:repeating-linear-gradient(135deg,var(--blauw) 0 3px,transparent 3px 7px)}
.verdeling .onbekend{background:transparent}.verdeling .let{background:var(--avg-let)}

/* gedeelde patronen */
.label{display:block;font-size:var(--t1);font-weight:800;color:var(--tekst-zacht)}
.band:not(.geel) .label,.k-blauw .label,.k-navy .label{color:inherit;opacity:.85}
.k-room .label,.k-room2 .label{color:var(--tekst-zacht);opacity:1}
.vink{list-style:none;display:grid;gap:6px;font-size:var(--t1)}
.vink li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start}
.vink li::before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--vol);color:var(--pil-bg);display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:1px}
.k-room .vink li::before,.k-room2 .vink li::before{color:var(--room)}
.k-geel .vink li::before{color:var(--geel)}
.vink li.let::before{content:"!";background:var(--avg-let);color:#fff}
.latrand{border-bottom:14px solid var(--geel);position:relative}
.latrand::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:7px;background:var(--lat-streep)}
:root{--lat-streep:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 22px);--p1:20px;--p2:26px;--p3:36px}

/* rij: één component voor elke entiteit (model, tool, beroep) — avatar | naam+meta | rechterslot */
.rij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1.5px solid rgba(22,54,216,.13)}
.rij:last-child{border-bottom:0}
.rij.nr{grid-template-columns:30px auto minmax(0,1fr) auto}
.rij .n{font-size:var(--t4);font-weight:900;letter-spacing:-.05em}
.av{width:36px;height:36px;border-radius:50%;background:var(--blauw);color:var(--room);display:grid;place-items:center;font-size:var(--t1);font-weight:900;flex:0 0 auto}
.av.ic{border-radius:10px;background:var(--geel)}.av.ic img{width:24px}
.k-blauw .av,.k-navy .av{background:var(--geel);color:var(--blauw)}
.nm{min-width:0}
.nm b{display:block;font-size:var(--t3);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.nm small{display:block;font-size:var(--t1);font-weight:600;color:var(--tekst-zacht);line-height:1.3;margin-top:2px}
.k-blauw .nm small,.k-navy .nm small{color:inherit;opacity:.85}
.rechts{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.rechts .meter{width:72px;height:10px}
.rechts .score{font-size:var(--t5)}
a.rij:hover .nm b{text-decoration:underline;text-underline-offset:3px}

/* kruimel: gedeeld */
.kruimel{font-size:var(--t1);margin-bottom:20px;color:var(--tekst-zacht)}
.band .kruimel{color:inherit;opacity:.85}
.kruimel a{text-decoration:underline;text-underline-offset:3px}

/* lege staat */
.leeg{padding:22px 0;font-weight:800;font-size:var(--t2)}

/* beroepstegel */
.tegel{border-radius:var(--r2);padding:22px 20px;display:flex;flex-direction:column;min-height:196px;transition:transform .15s}
.tegel:hover{transform:translateY(-3px)}
.tegel img{width:52px;height:52px;object-fit:contain;object-position:left top;margin-bottom:auto}
.tegel b{font-size:var(--t3);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-top:18px}
.tegel span{font-size:var(--t1);font-weight:700;margin-top:3px}

/* voet */
.voet{background:var(--navy);color:var(--room);padding:56px 0 64px;margin-top:0}
.voet .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px}
.voet p{font-size:var(--t1);opacity:.82;margin-top:14px;max-width:34ch}
.voet h4{font-size:var(--t2);font-weight:900;margin-bottom:12px;color:var(--geel)}
.voet a{display:block;font-size:var(--t1);opacity:.9;padding:3px 0}
.voet a.logo{display:inline-flex;padding:0;opacity:1}
.voet a:hover{opacity:1;text-decoration:underline}
.voet .klein{grid-column:1/-1;opacity:.7;margin-top:18px;font-size:var(--t1)}

/* focus */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--geel);outline-offset:3px;border-radius:8px}

@media(max-width:1060px){
  .wrap{padding:0 20px}
  .nav-sub{display:none}
  .nav-l a{padding:8px 11px;font-size:var(--t1)}
  .voet .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav{flex-wrap:wrap;gap:10px}
  .nav-l{margin-left:0;width:100%;flex-wrap:wrap;gap:6px}
  .nav-l a{padding:7px 12px}
  .kaart{padding:22px}
  .rechts .meter{display:none}
  .klein{font-size:var(--t1)}
  .voet .wrap{grid-template-columns:1fr}
}

/* ---- signatuur: de meetlat (uit het logo) — elke score staat op een ingekerfde lat ---- */
:root{--gap:18px}
.meter{position:relative;height:14px;border-radius:99px;background:rgba(22,54,216,.13);overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;background:var(--geel);border-radius:99px;box-shadow:inset 0 0 0 2px rgba(12,31,143,.12)}
.meter::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(12,31,143,.45) calc(10% - 2px) 10%)}
.meter.dik{height:22px}
.band .meter,.k-blauw .meter,.k-navy .meter{background:rgba(248,242,224,.2)}
.band .meter::after,.k-blauw .meter::after,.k-navy .meter::after{background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(248,242,224,.55) calc(10% - 2px) 10%)}
.k-geel .meter{background:rgba(22,54,216,.15)}.k-geel .meter i{background:var(--blauw)}
/* zonescheider: een lat over de volle breedte */
.lat-scheider{height:18px;background:var(--geel);position:relative}
.lat-scheider::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:var(--lat-streep)}
.lat-scheider.blauw{background:var(--blauw)}
.lat-scheider.blauw::after{background:repeating-linear-gradient(90deg,var(--geel) 0 2px,transparent 2px 24px)}

/* ================================================================ echte site: aanvullingen */
.skip{position:absolute;left:-999px;top:0;background:var(--geel);padding:10px 16px;z-index:50}.skip:focus{left:16px}
.kopbalk{background:var(--room);border-bottom:1.5px solid rgba(22,54,216,.1)}
.nav-knop{display:none;margin-left:auto;border:0;background:var(--blauw);color:var(--room);font:inherit;font-weight:800;font-size:var(--t1);border-radius:var(--pil);padding:9px 16px;cursor:pointer}
.nav-zoek{display:inline-grid;place-items:center;width:38px;padding:0!important}
@media(max-width:860px){.nav-knop{display:block}.nav-l{display:none;width:100%;flex-direction:column;gap:4px;margin:0}
  .nav{flex-wrap:wrap}.nav-l.open{display:flex}.nav-l a{padding:12px 14px!important;font-size:var(--t2)}.nav-zoek{width:auto}}
@media(max-width:640px){.nav-l{display:none}.nav-l.open{display:flex}}

/* logo-avatars: echte logo's op een wit vlak, initialen als terugval */
.av.logo{background:#fff;border-radius:10px;box-shadow:inset 0 0 0 1.5px rgba(22,54,216,.14);overflow:hidden;padding:4px}
.av.logo img{width:100%;height:100%;object-fit:contain}
.av.groot{width:64px;height:64px;border-radius:16px;font-size:var(--t4)}.av.groot.logo{padding:8px}
.av.mid{width:48px;height:48px;border-radius:12px}.av.mid.logo{padding:6px}

/* kleine getalstaal */
.delta{font-weight:900;font-size:var(--t1);white-space:nowrap}
.delta.op{color:#15803d}.delta.af{color:var(--avg-let)}.delta.vlak{color:var(--tekst-zacht)}
.band:not(.geel) .delta.op,.k-navy .delta.op,.k-blauw .delta.op{color:#8ef0ad}.band:not(.geel) .delta.af,.k-navy .delta.af{color:#ffb28a}
.spark{color:var(--blauw);display:block}.spark-punt{fill:var(--geel);stroke:var(--blauw);stroke-width:2}
.band:not(.geel) .spark,.k-navy .spark,.k-blauw .spark{color:var(--geel)}
.kpi{display:flex;flex-direction:column;gap:4px;min-width:0}
.kpi b{font-size:clamp(34px,3.6vw,52px);font-weight:900;letter-spacing:-.05em;line-height:.95}
.kpi b small{font-size:max(14px,.4em);letter-spacing:0;opacity:.8}
.kpi span{font-size:var(--t1);font-weight:700}
.bronregel{font-size:var(--t1);color:var(--tekst-zacht);margin-top:14px}
.bronregel a{text-decoration:underline;text-underline-offset:3px}
.band:not(.geel) .bronregel{color:inherit;opacity:.85}
.leeg{padding:22px 0;font-weight:800;font-size:var(--t2)}

/* kop van een pagina (open of band) */
.pkop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--hero-gap);align-items:end}
.pkop .lead{margin-top:18px}
.pkop-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media(max-width:860px){.pkop{grid-template-columns:minmax(0,1fr)}.pkop-rechts{align-items:flex-start}}

/* sectiekop binnen een zone */
.skop{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-bottom:24px}
.skop .rechts{margin-left:auto}
.skop p{flex-basis:100%;max-width:62ch}

/* chips en wolk */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{border-radius:var(--pil);padding:8px 15px;font-size:var(--t1);font-weight:800;box-shadow:inset 0 0 0 2px var(--blauw)}
.chips a:hover{background:var(--blauw);color:var(--room)}
.band:not(.geel) .chips a{box-shadow:inset 0 0 0 2px rgba(248,242,224,.6)}
.band:not(.geel) .chips a:hover{background:var(--room);color:var(--blauw)}
.ingeklapt>*:nth-child(n+13){display:none}.ingeklapt.open>*{display:revert}
.meer-knop{border:0;background:var(--blauw);color:var(--room);font:inherit;font-size:var(--t1);font-weight:800;border-radius:var(--pil);padding:9px 16px;cursor:pointer;margin-top:12px}

/* faq */
.faq{display:grid;gap:10px;max-width:880px}
.faq details{background:var(--room2);border-radius:var(--r2);padding:0 22px;box-shadow:inset 0 0 0 1.5px rgba(22,54,216,.15)}
.faq summary{cursor:pointer;font-weight:900;font-size:var(--t3);padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-size:var(--t5);line-height:.8}.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq p{padding:0 0 20px;font-size:var(--t2);line-height:1.55;max-width:70ch}

/* filters, zoekvelden, knoppenrij */
.zoekveld{position:relative}
.zoekveld input{width:100%;font:inherit;font-size:var(--t3);font-weight:700;border:2px solid var(--blauw);border-radius:var(--pil);padding:15px 22px 15px 52px;background:var(--room2);color:var(--blauw)}
.zoekveld input::placeholder{color:#5a64a8}
.zoekveld svg{position:absolute;left:20px;top:50%;transform:translateY(-50%)}
.knoppen{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.knoppen .label{margin-right:4px}
.fk{font:inherit;font-size:var(--t1);font-weight:800;border:0;border-radius:var(--pil);padding:8px 15px;background:transparent;color:var(--blauw);box-shadow:inset 0 0 0 2px var(--blauw);cursor:pointer}
.fk[aria-pressed=true]{background:var(--blauw);color:var(--room)}
.band:not(.geel) .fk{color:var(--room);box-shadow:inset 0 0 0 2px rgba(248,242,224,.6)}.band:not(.geel) .fk[aria-pressed=true]{background:var(--room);color:var(--blauw)}
.tog{display:inline-flex;align-items:center;gap:9px;font-size:var(--t1);font-weight:800;cursor:pointer;user-select:none}
.tog input{appearance:none;width:40px;height:22px;border-radius:99px;background:rgba(248,242,224,.35);position:relative;cursor:pointer;flex:0 0 auto}
.tog input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--room);transition:left .15s}
.tog input:checked{background:var(--geel)}.tog input:checked::after{left:21px;background:var(--blauw)}
.telling{font-weight:800}

/* tabel-container (omlijnd) met filterbalk */
.tabel{background:var(--room2);border:2px solid var(--blauw);border-radius:var(--r);overflow:hidden}
.tabel .filter{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;background:var(--blauw);color:var(--room);padding:16px 22px}
.tabel .filter .z{margin-left:auto;position:relative}
.tabel .filter .z input{font:inherit;font-size:var(--t1);font-weight:700;border:0;border-radius:99px;padding:9px 16px 9px 36px;background:var(--room);color:var(--blauw);width:230px}
.tabel .filter .z svg{position:absolute;left:13px;top:50%;transform:translateY(-50%)}
.thead{font-size:var(--t1);font-weight:800;color:var(--tekst-zacht);border-bottom:2px solid rgba(22,54,216,.18)}
.meer{display:block;width:100%;border:0;background:var(--geel);color:var(--blauw);font:inherit;font-weight:900;font-size:var(--t2);padding:16px;cursor:pointer}
.verborgen{display:none!important}
@media(max-width:860px){.tabel .filter .z{margin-left:0;width:100%}.tabel .filter .z input{width:100%}}

/* data-tabel (varianten, vergelijk) */
.dtabel{width:100%;border-collapse:collapse;font-size:var(--t1)}
.dtabel th{text-align:left;font-weight:800;color:var(--tekst-zacht);padding:12px 14px;border-bottom:2px solid rgba(22,54,216,.2);white-space:nowrap}
.dtabel td{padding:12px 14px;border-bottom:1.5px solid rgba(22,54,216,.1);vertical-align:top}
.dtabel td.getal,.dtabel th.getal{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dtabel tr:hover td{background:#fff8dd}
.dtabel .nm-cel{font-weight:900;font-size:var(--t2)}
.tabel-scroll{overflow-x:auto}
@media(max-width:640px){.dtabel .verberg-s{display:none}}

/* banners */
.banner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:var(--p1) var(--p2);border-radius:var(--r)}
.banner .uitroep{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:var(--t4);font-weight:900;background:var(--blauw);color:var(--geel)}
.banner.let .uitroep{background:var(--avg-let);color:#fff}
.banner b{display:block;font-size:var(--t3);font-weight:900;margin-bottom:4px}
.banner p{font-size:var(--t2);line-height:1.5;max-width:75ch}

/* galerij in browserkader */
.gal{background:var(--room2);border-radius:var(--r);box-shadow:inset 0 0 0 2px var(--blauw);overflow:hidden;position:relative}
.gal-kader{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--blauw);color:var(--room)}
.gal-kader i{width:10px;height:10px;border-radius:50%;background:rgba(248,242,224,.5)}.gal-kader i:first-child{background:var(--geel)}
.gal-kader span{margin-left:10px;font-size:var(--t1);font-weight:700;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-baan{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gal-baan::-webkit-scrollbar{display:none}
.gal-baan figure{flex:0 0 100%;scroll-snap-align:start;margin:0}
.gal-baan img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;background:#fff}
.gal-baan figcaption{font-size:var(--t1);color:var(--tekst-zacht);padding:10px 16px}
.gal-pijl{position:absolute;top:50%;width:44px;height:44px;border-radius:50%;border:0;background:var(--geel);color:var(--blauw);font-size:var(--t5);font-weight:900;cursor:pointer;box-shadow:0 0 0 3px var(--room)}
.gal-pijl.l{left:12px}.gal-pijl.r{right:12px}

/* lijngrafiek */
.lijn{width:100%;height:220px;display:block}
.lijn .g{stroke:rgba(22,54,216,.12);stroke-width:1}.lijn .as{stroke:var(--blauw);stroke-width:3}
.lijn .t{stroke:var(--navy);stroke-width:2}.lijn .l{fill:none;stroke:var(--blauw);stroke-width:3;stroke-linejoin:round}
.lijn .a{fill:rgba(251,223,107,.45)}.lijn .p{fill:var(--geel);stroke:var(--blauw);stroke-width:3}
.lijn text{font:700 12px Archivo,sans-serif;fill:var(--tekst-zacht)}

/* staven (index op één lat) */
.sky-wrap{overflow-x:auto;padding-bottom:6px}
.sky{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;align-items:end;min-width:calc(var(--n) * 76px);height:300px;border-bottom:14px solid var(--blauw)}
.sky a{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.sky .staaf{background:var(--blauw);border-radius:12px 12px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:10px;color:var(--geel);font-weight:900;font-size:var(--t2)}
.sky a:hover .staaf{background:var(--navy)}
.sky a.dit .staaf{background:var(--room);color:var(--blauw);box-shadow:inset 0 0 0 3px var(--navy)}
.sky-onder{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;min-width:calc(var(--n) * 76px);margin-top:10px}
.sky-onder span{font-size:var(--t1);font-weight:800;line-height:1.2;overflow-wrap:break-word}
.sky-onder small{display:block;font-weight:900;font-size:var(--t2)}
.sky-onder .dit{text-decoration:underline;text-underline-offset:3px}

/* horizontale staafgrafiek */
.hstaaf{display:grid;gap:10px}
.hstaaf a,.hstaaf div{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 80px;gap:14px;align-items:center}
.hstaaf b{font-size:var(--t2);font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hstaaf .meter{height:18px}
.hstaaf span.w{font-weight:900;text-align:right;font-variant-numeric:tabular-nums}
.hstaaf .top .meter i{background:var(--blauw)}

/* spreiding prijs x kwaliteit */
.spreiding{width:100%;height:auto;display:block}
.spreiding .g{stroke:rgba(22,54,216,.12)}.spreiding .as{stroke:var(--blauw);stroke-width:2.5}
.spreiding circle{fill:var(--blauw);stroke:var(--room);stroke-width:2}.spreiding circle.top{fill:var(--geel);stroke:var(--blauw);stroke-width:3}
.spreiding text{font:700 12px Archivo,sans-serif;fill:var(--tekst-zacht)}.spreiding text.nm{fill:var(--blauw);font-weight:800}

/* proza (blog) */
.proza{max-width:720px}
.proza h2{font-size:var(--t5);font-weight:900;letter-spacing:-.03em;margin:36px 0 10px}
.proza p,.proza li{font-size:var(--t3);line-height:1.65;font-weight:500;color:#1b2a8c}
.proza p{margin:0 0 16px}.proza ul{padding-left:22px;margin:0 0 18px}.proza li{margin:4px 0}
.proza a{text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* print */
@media print{.kopbalk,.voet,.filter,.meer,.nav-knop,.geen-print{display:none!important}.band{background:#fff!important;color:#000!important}}

/* ================================================================ zoekvak (gedeeld) */
.zoekvak{position:relative;max-width:620px}
.zoekvak input{width:100%;font:inherit;font-size:var(--t3);font-weight:700;color:var(--blauw);background:var(--room2);border:2px solid var(--blauw);border-radius:var(--pil);padding:18px 24px 18px 56px}
.zoekvak.geel input{background:var(--geel);border-color:var(--geel)}
.zoekvak input::placeholder{color:#44509a}
.zoekvak svg{position:absolute;left:22px;top:50%;transform:translateY(-50%)}
.treffers{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--room2);border-radius:20px;box-shadow:0 0 0 2px var(--blauw),0 18px 40px rgba(12,31,143,.18);padding:8px;z-index:20}
.treffers a{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-radius:12px;font-weight:800}
.treffers a:hover,.treffers a:focus{background:var(--geel)}
.treffers small{font-weight:600;color:var(--tekst-zacht);font-size:var(--t1);text-align:right}

/* ================================================================ HOME */
.h1z{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--hero-gap);align-items:center}
.h1z .lead{margin:26px 0 32px}
.h1z .beeld{justify-self:end;width:100%;max-width:440px}
.statregel{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:var(--t1);font-weight:700;color:var(--tekst-zacht)}
.statregel b{color:var(--blauw);font-weight:900}
.z2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.15fr) minmax(0,.8fr);gap:var(--gap)}
.een{position:relative;overflow:hidden;min-height:520px;padding:32px 34px;display:flex;flex-direction:column;align-items:flex-start}
.een .naam{font-size:clamp(52px,5.4vw,84px);font-weight:900;letter-spacing:-.06em;line-height:.9;margin-top:22px}
.een .vend{font-size:var(--t4);font-weight:800;margin-top:6px}
.een .regels{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:2}
.een .blob{position:absolute;left:-4%;bottom:-2px;width:108%;z-index:1}
.een .groot{position:absolute;right:30px;bottom:28px;z-index:3;text-align:right;display:flex;flex-direction:column}
.een .groot .score{font-size:clamp(76px,7vw,112px)}
.een .groot span:last-child{font-size:var(--t1);font-weight:800;margin-top:4px}
.z2 .lijst{padding:22px 24px 12px}
.z2 .lijst .kop,.uitleg .kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.z2 .rechts .spark{width:70px}
.z2 .rechts .score{font-size:var(--t4);min-width:52px;text-align:right}
.uitleg{padding:26px 24px;display:flex;flex-direction:column}
.acts{display:grid;margin:14px 0 8px}
.actueel{display:grid;grid-template-columns:minmax(0,1fr);padding:12px 0;border-bottom:1.5px solid rgba(22,54,216,.18)}
.actueel .wanneer{font-size:var(--t1);font-weight:700;opacity:.8}
.actueel b{font-size:var(--t2);font-weight:900;line-height:1.25}
.actueel small{font-size:var(--t1);font-weight:700}
.actueel:hover b{text-decoration:underline;text-underline-offset:3px}
.uitleg .linkpijl{margin-top:auto;padding-top:14px}
.stelling{margin-top:var(--gap);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:30px;align-items:center;background:var(--navy);border-radius:var(--r2);padding:24px 30px}
.stelling b{font-size:clamp(28px,3vw,40px);font-weight:900;letter-spacing:-.05em;color:var(--geel);line-height:1}
.stelling p{font-size:var(--t2);max-width:64ch}
.stelling .cijfers{display:flex;gap:26px;font-size:var(--t1);font-weight:700;white-space:nowrap}
.stelling .cijfers strong{display:block;font-size:var(--t5);font-weight:900;letter-spacing:-.04em}
.uitgelichte{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:var(--gap)}
.uitgelicht{background:var(--room2);border-radius:var(--r);box-shadow:inset 0 0 0 2px var(--blauw);overflow:hidden;display:flex;flex-direction:column}
.uitgelicht.groot{grid-row:span 2}
.uitgelicht .shot{display:block;background:#fff;border-bottom:2px solid var(--blauw)}
.uitgelicht .shot img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.uitgelicht.groot .shot img{aspect-ratio:4/3}
.uitgelicht .tekst{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;padding:16px 18px}
.uitgelicht .tekst .avg{grid-column:1/-1;justify-self:start}
.uitgelicht .oms{padding:0 18px 20px;font-size:var(--t2);line-height:1.45}
.uitgelicht:hover .nm b{text-decoration:underline;text-underline-offset:3px}
.z4-kop{display:flex;align-items:flex-end;gap:40px;margin-bottom:34px}
.z4-kop p{max-width:40ch;padding-bottom:8px}
.tegels{display:grid;grid-template-columns:1.5fr repeat(4,1fr) .9fr;grid-template-rows:auto auto;gap:var(--gap)}
.tegels .tegel{background:var(--room);color:var(--blauw)}
.tegels .tegel.leider{grid-row:span 2;background:var(--blauw);color:var(--room);padding:30px 28px}
.tegels .tegel.leider img{width:84px;height:84px;filter:brightness(0) invert(96%)}
.tegels .tegel.leider b{font-size:clamp(32px,3.2vw,46px);letter-spacing:-.05em;line-height:.95}
.tegels .tegel.alle{grid-column:6;grid-row:1/span 2;background:var(--navy);color:var(--room);justify-content:space-between}
.tegel.alle .c{width:54px;height:54px;border-radius:50%;background:var(--geel);color:var(--blauw);display:grid;place-items:center;font-size:var(--t5);font-weight:900}
.drie{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--hero-gap);align-items:start}
.regels-lijst{list-style:none;counter-reset:r}
.regels-lijst li{counter-increment:r;display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px 18px;padding:22px 0;border-bottom:1.5px solid rgba(22,54,216,.15)}
.regels-lijst li::before{content:counter(r);grid-row:span 2;font-size:52px;font-weight:900;letter-spacing:-.07em;line-height:.85}
.regels-lijst b{font-size:var(--t4);font-weight:900;letter-spacing:-.02em}
.regels-lijst span{font-size:var(--t2);line-height:1.5;max-width:56ch}
@media(max-width:1060px){.h1z,.z2,.drie{grid-template-columns:minmax(0,1fr)}.h1z .beeld{justify-self:start;max-width:260px}
  .stelling{grid-template-columns:1fr;gap:14px}.stelling .cijfers{flex-wrap:wrap}.een{min-height:460px}
  .uitgelichte{grid-template-columns:1fr 1fr}.uitgelicht.groot{grid-column:1/-1;grid-row:auto}
  .tegels{grid-template-columns:1fr 1fr}.tegels .tegel.leider,.tegels .tegel.alle{grid-column:1/-1;grid-row:auto}.z4-kop{flex-direction:column;align-items:flex-start;gap:12px}}
@media(max-width:640px){.uitgelichte{grid-template-columns:1fr}.h1z .beeld{display:none}.een .groot .score{font-size:64px}}

/* ================================================================ BEROEPEN */
.r1{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--hero-gap);align-items:end}
.r1 .lead{margin-top:22px}
.r2{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:var(--gap)}
.r2 .groot{grid-row:span 2;padding:32px 30px;display:flex;flex-direction:column;gap:14px;border-radius:var(--r)}
.r2 .groot img{width:84px}
.r2 .groot b{font-size:clamp(34px,4vw,56px);font-weight:900;letter-spacing:-.055em;line-height:.95;margin-top:auto;overflow-wrap:break-word}
.r2 .groot .n{font-size:var(--t3);font-weight:800}
.r2 .tegel{min-height:170px;background:var(--room);color:var(--blauw)}
.groep{margin-top:44px}.groep:first-of-type{margin-top:12px}
.groep h3{display:flex;align-items:baseline;gap:12px;font-size:var(--t4);font-weight:900;letter-spacing:-.03em;padding-bottom:12px}
.groep h3 small{font-size:var(--t1);font-weight:700;color:var(--tekst-zacht)}
.lijst2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;margin-top:6px}
.lijst2 .rechts .verdeling{width:130px;height:12px}
.lijst2 .rechts .cnt{font-size:var(--t3);font-weight:900;min-width:30px;text-align:right}
.r4{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--hero-gap);align-items:center}
.veiligst{display:grid;gap:14px}
.veiligst a{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr) 56px;gap:18px;align-items:center}
.veiligst b{font-size:var(--t3);font-weight:900;line-height:1.15}
.veiligst .pct{font-size:var(--t4);font-weight:900;color:var(--geel);text-align:right}
@media(max-width:1060px){.r1,.r4{grid-template-columns:minmax(0,1fr)}.r2{grid-template-columns:1fr 1fr}.r2 .groot{grid-column:1/-1;grid-row:auto}.lijst2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.r2 .tegel{min-height:140px;padding:18px 16px}.lijst2 .rechts .verdeling{width:60px}
  .veiligst a{grid-template-columns:minmax(0,1fr) 48px}.veiligst .meter{grid-column:1/-1;grid-row:2}}

/* ================================================================ BEROEP */
.b1{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--hero-gap);align-items:end}
.oms-klem{margin-top:18px;max-width:64ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oms-klem.open{display:block}
.meerlezen{background:none;border:0;color:inherit;font:inherit;font-size:var(--t1);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:6px;padding:0}
.b1 img{width:100%;max-height:190px;object-fit:contain;object-position:right bottom}
.strook{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:var(--gap);margin-top:30px}
.strook.zonder-let{grid-template-columns:minmax(0,1fr)}
.advies{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:var(--gap)}
.keuze{padding:22px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.keuze .kn{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}
.keuze .naam{font-size:var(--t6);font-weight:900;letter-spacing:-.045em;line-height:1;overflow-wrap:break-word;min-width:0}
.keuze.klein-k .naam{font-size:var(--t5)}
.keuze.zwak{box-shadow:inset 0 0 0 3px var(--geel)}
.keuze .linkpijl{margin-top:auto;padding-top:4px}
.letkaart{padding:22px 24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-content:start}
.letkaart .uitroep{width:40px;height:40px;border-radius:50%;background:var(--blauw);color:var(--geel);display:grid;place-items:center;font-size:var(--t4);font-weight:900}
.letkaart h2{font-size:var(--t4);font-weight:900;letter-spacing:-.03em;margin-bottom:6px}
.letkaart p{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.veilig{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--hero-gap);align-items:center;padding:var(--p2) var(--p3);border-radius:var(--r);margin-bottom:var(--gap)}
.veilig .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.veilig .kpi b{font-size:clamp(32px,3vw,44px)}
.veilig .verdeling{height:22px}
.legenda{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:var(--t1);font-weight:800}
.legenda span{display:inline-flex;align-items:center;gap:8px}
.trij,.trij-kop{display:grid;grid-template-columns:34px 40px minmax(0,1fr) 110px minmax(0,150px) 110px;gap:16px;align-items:center;padding:14px 22px}
.trij-kop{padding-top:12px;padding-bottom:10px}
.trij{border-bottom:1.5px solid rgba(22,54,216,.1)}
.trij:hover{background:#fff8dd}
.trij .n{font-weight:900;font-size:var(--t3);color:var(--tekst-zacht)}
.trij .nm b{font-size:var(--t3)}
.trij .soort{font-style:normal;font-size:var(--t1);font-weight:700;color:var(--tekst-zacht);margin-left:6px}
.trij .oms{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t1);color:var(--tekst-zacht);line-height:1.4;margin-top:4px}
.trij .kw{display:flex;align-items:center;gap:4px;font-size:var(--t1);font-weight:700}
.trij .kw b{font-size:var(--t4);font-weight:900}.trij .kw small{font-size:var(--t1);color:var(--tekst-zacht);font-weight:700}
.av.mini{width:24px;height:24px;border-radius:7px;font-size:12px}.av.mini.logo{padding:2px}
.trij .p{font-size:var(--t1);font-weight:800;line-height:1.35}
.trij .a{display:flex;align-items:center;gap:8px;font-size:var(--t1);font-weight:800}
.stappen-z{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--hero-gap);align-items:start}
.stappen{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.stappen li{counter-increment:s;border-top:14px solid var(--geel);padding-top:16px;position:relative;display:flex;flex-direction:column;gap:8px}
.stappen li::before{content:counter(s);font-size:48px;font-weight:900;letter-spacing:-.07em;line-height:.85;color:var(--geel)}
.stappen li::after{content:"";position:absolute;left:0;right:0;top:-14px;height:7px;background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 22px)}
.stappen b{font-size:var(--t4);font-weight:900;letter-spacing:-.02em}
.stappen span{font-size:var(--t2);line-height:1.5;opacity:.95}
.b3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--hero-gap);align-items:start}
.b3 .lead{margin-top:18px}
.taken{list-style:none}
.taak{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:baseline;padding:18px 0 20px;border-bottom:1.5px solid rgba(22,54,216,.15)}
.taak:first-child{padding-top:0}
.taak b{font-size:48px;font-weight:900;letter-spacing:-.07em;line-height:.85}
.taak span{font-size:var(--t4);font-weight:800;line-height:1.25;letter-spacing:-.015em;min-width:0;overflow-wrap:break-word}
.faq-z{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--hero-gap);align-items:start}
@media(max-width:1060px){.b1{grid-template-columns:minmax(0,1fr) 150px}.strook,.veilig,.stappen-z,.b3,.faq-z{grid-template-columns:minmax(0,1fr)}
  .trij,.trij-kop{grid-template-columns:30px 40px minmax(0,1fr) auto}.trij .p,.trij .kw,.trij-kop{display:none}.trij .a span{display:none}}
@media(max-width:640px){.b1{grid-template-columns:minmax(0,1fr)}.b1 img{display:none}.advies,.stappen{grid-template-columns:minmax(0,1fr)}
  .veilig .kpis{grid-template-columns:1fr 1fr}.taak{grid-template-columns:48px minmax(0,1fr)}.taak b{font-size:36px}.taak span{font-size:var(--t3)}
  .trij,.trij-kop{padding:12px 16px;gap:10px}}

/* voet: merk + vier kolommen, bronnen inline */
.voet .wrap{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))}
.voet-onder{grid-column:1/-1;opacity:.75;margin-top:18px;font-size:var(--t1);line-height:1.6}
.voet .voet-onder a{display:inline;padding:0;text-decoration:underline;text-underline-offset:3px}
.voet-merk p{font-size:var(--t1);opacity:.85;margin-top:14px;max-width:34ch}
@media(max-width:1060px){.voet .wrap{grid-template-columns:1fr 1fr}.voet-merk{grid-column:1/-1}}
@media(max-width:640px){.voet .wrap{grid-template-columns:1fr 1fr}}
.voet .voet-onder{max-width:none}

/* ================================================================ gedeelde kaart */
.kaartje{padding:var(--p2);border-radius:var(--r)}
.zone.open.kort{padding:var(--krap) 0 calc(var(--krap) + 8px)}

/* ================================================================ MODELLEN-INDEX */
.lijst-index{padding:8px 22px 6px;overflow-x:auto}
.lrij,.lrij-kop{display:grid;grid-template-columns:30px 48px minmax(140px,1.4fr) 120px 100px minmax(110px,.9fr) 100px 90px 40px;gap:16px;align-items:center;min-width:960px}
.lrij-kop{font-size:var(--t1);font-weight:800;color:var(--tekst-zacht);padding:12px 0;border-bottom:2px solid rgba(22,54,216,.2)}
.lrij{padding:12px 0;border-bottom:1.5px solid rgba(22,54,216,.1)}.lrij:last-child{border-bottom:0}
.lrij .n{font-size:var(--t4);font-weight:900;letter-spacing:-.05em}
.lrij .nm b{font-size:var(--t3)}
.lrij .elo{display:flex;flex-direction:column}.lrij .elo b{font-size:var(--t5);font-weight:900;letter-spacing:-.04em;line-height:1}
.lrij .red{display:flex;align-items:center;gap:10px}.lrij .red .meter{flex:1;height:10px}.lrij .red b{font-weight:900}
.lrij .pr,.lrij .ctx{font-size:var(--t1);font-weight:800}
.lrij:hover .nm b{text-decoration:underline;text-underline-offset:3px}
.lat-kop2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--hero-gap);align-items:end;margin-bottom:36px}
.kpi-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-bottom:40px}
.kpi-rij .kpi{border-top:14px solid var(--geel);padding-top:14px;position:relative}
.kpi-rij .kpi::before{content:"";position:absolute;left:0;right:0;top:-14px;height:7px;background:var(--lat-streep)}
.kpi-rij .kpi b{font-size:clamp(28px,2.8vw,42px);overflow-wrap:break-word}
.speel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.speel .kaartje h3{margin-bottom:6px}.speel .kaartje .klein{margin-bottom:12px}
.speel-r{display:grid;gap:36px}.speel-r .kaartje{padding:0}.speel-r h3{margin-bottom:16px}
@media(max-width:1060px){.lat-kop2,.speel{grid-template-columns:minmax(0,1fr)}.kpi-rij{grid-template-columns:1fr 1fr}}

/* ================================================================ MODEL */
.m1{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);grid-template-areas:"kop paneel" "oms paneel";grid-template-rows:auto 1fr;gap:18px var(--hero-gap);align-items:end}
.m1 .kop{grid-area:kop}.m1 .oms{grid-area:oms;align-self:start;max-width:52ch}.m1 .oordeel{grid-area:paneel;align-self:end}
.m1 .vendor{font-size:var(--t4);font-weight:800}
.m1 .naam{margin-top:8px}
.oordeel{background:var(--navy);color:var(--room);border-radius:var(--r);padding:var(--p2) var(--p2) var(--p1)}
.oordeel .rij1{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.oordeel .score{font-size:clamp(64px,7vw,104px);color:var(--geel)}
.oordeel .plek{font-size:var(--t1);font-weight:800;text-align:right;line-height:1.25}
.oordeel .d30{display:flex;gap:8px;align-items:baseline;font-size:var(--t1);margin:4px 0 10px}
.oordeel dl{display:grid;grid-template-columns:auto minmax(0,1fr);font-size:var(--t1)}
.oordeel dt,.oordeel dd{padding:10px 0;border-top:1.5px solid rgba(248,242,224,.18)}
.oordeel dt{opacity:.8;padding-right:14px}.oordeel dd{font-weight:800;text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.oordeel dd .meter{width:90px;height:10px}
.oordeel dd.groot{font-size:var(--t4);font-weight:900;letter-spacing:-.03em;flex-direction:column;align-items:flex-end;gap:0}
.oordeel dd small{font-size:var(--t1);font-weight:700;letter-spacing:0;opacity:.85}
.m2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.privacy{padding:var(--p2)}
.privacy .kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.check{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1.5px solid rgba(248,242,224,.2);font-size:var(--t2);font-weight:800}
.check i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900}
.check i.ja{background:var(--geel);color:var(--navy)}.check i.nee{background:rgba(248,242,224,.2)}
.privacy p.klein{margin:14px 0;opacity:.9}
.m3b{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--hero-gap);align-items:start}
.prijsblok{background:var(--room2);border:2px solid var(--blauw);border-radius:var(--r);overflow:hidden}
.prijsrij{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.9fr);gap:4px 16px;padding:16px 22px;border-top:1.5px solid rgba(22,54,216,.14)}
.prijsrij:first-child{border-top:0}
.prijsrij .pl{font-weight:900;font-size:var(--t3)}.prijsrij .pr{font-weight:900;font-size:var(--t4);letter-spacing:-.03em;text-align:right}
.prijsrij .dt{grid-column:1/-1;font-size:var(--t1);color:var(--tekst-zacht);line-height:1.4}
.m3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--hero-gap);align-items:start}
.sterk-lijst{list-style:none;margin-top:26px;display:grid;gap:20px}
.sterk-lijst li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:baseline;font-size:var(--t5);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.sterk-lijst li span{font-size:40px;font-weight:900;letter-spacing:-.06em}
.m4{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--hero-gap);align-items:start}
.draden{display:grid;gap:12px}
.draad{display:block;padding:16px 20px;border-radius:var(--r2);background:var(--room2);box-shadow:inset 0 0 0 1.5px rgba(22,54,216,.18)}
.draad b{display:block;font-size:var(--t2);font-weight:900;line-height:1.3}.draad small{font-size:var(--t1);font-weight:700;color:var(--tekst-zacht)}
.draad:hover b{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1060px){.m1{grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "paneel" "oms";grid-template-rows:auto}.m2,.m3b,.m3,.m4{grid-template-columns:minmax(0,1fr)}}

/* ================================================================ MODEL × BEROEP */
.k1{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:var(--hero-gap);align-items:end}
.k1 .vendor{display:flex;align-items:center;gap:10px;font-size:var(--t3);font-weight:800;margin-bottom:16px}
.k1 .vakic{width:40px;height:40px;background:var(--geel);border-radius:10px;padding:6px;margin-left:10px}
.k1 .oordeel .label{margin-bottom:10px}.k1 .oordeel .knop{margin-top:16px}
.taken.uc .taak span{display:flex;flex-direction:column;gap:6px}
.taken.uc strong{font-size:var(--t4);font-weight:900}.taken.uc small{font-size:var(--t2);font-weight:600;line-height:1.5;letter-spacing:0}
.vuist{margin-top:16px;padding:14px 16px;border-radius:var(--r2);background:rgba(248,242,224,.1);font-size:var(--t1);line-height:1.5}
.vuist b{display:block;color:var(--geel);font-size:var(--t2)}.vuist.let b{color:#ffb28a}
@media(max-width:1060px){.k1{grid-template-columns:minmax(0,1fr)}}

/* ================================================================ VERGELIJKEN */
.paren{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.paar{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:18px 20px;border-radius:var(--r2);background:var(--room);color:var(--blauw)}
.paar b{font-size:var(--t3);font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paar b:nth-of-type(2){text-align:right}.paar span{font-weight:900;color:var(--tekst-zacht)}
.paar:hover{background:var(--geel)}
.matrix-wrap{overflow-x:auto}
.matrix{border-collapse:separate;border-spacing:4px;min-width:760px}
.matrix th{font-weight:800;font-size:var(--t1)}
.matrix thead th{padding:4px}.matrix thead .av{margin:0 auto}
.matrix tbody th{text-align:left;white-space:nowrap;padding-right:10px}
.matrix tbody th .av{display:inline-grid;vertical-align:middle;margin-right:10px;width:30px;height:30px}
.matrix td{width:52px;height:44px}
.matrix td a{display:grid;place-items:center;width:100%;height:100%;border-radius:10px;background:var(--room2);box-shadow:inset 0 0 0 1.5px rgba(22,54,216,.2);font-size:var(--t1);font-weight:900;color:var(--tekst-zacht)}
.matrix td a:hover{background:var(--blauw);color:var(--geel)}
.matrix td.zelf{background:repeating-linear-gradient(135deg,rgba(22,54,216,.18) 0 2px,transparent 2px 7px);border-radius:10px}
.vs{color:var(--geel)}
.kanten{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--gap);align-items:center;margin-top:32px}
.tegen{font-size:var(--t6);font-weight:900;color:var(--geel)}
.kant{padding:var(--p1) var(--p2);display:grid;gap:14px}
.kant select{font:inherit;font-size:var(--t2);font-weight:800;color:var(--blauw);background:var(--room2);border:2px solid var(--blauw);border-radius:var(--pil);padding:9px 14px}
.kant .kn{display:flex;align-items:center;gap:14px}.kant .kn b{display:block;font-size:var(--t5);font-weight:900;letter-spacing:-.03em}.kant .kn small{font-size:var(--t1);font-weight:700;color:var(--tekst-zacht)}
.kant-cijfers{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.kant-cijfers .score{font-size:48px}
.wint-tel{font-size:var(--t2);font-weight:700}.wint-tel b{font-size:var(--t4);font-weight:900}
.dtabel td.wint{background:var(--geel);font-weight:900;box-shadow:inset 0 -4px 0 var(--blauw)}
.tabel.vgl .dtabel td{font-size:var(--t2)}
.verdicts{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:40px}
.verdicts h2{margin-bottom:14px}
@media(max-width:1060px){.paren{grid-template-columns:1fr 1fr}.kanten{grid-template-columns:minmax(0,1fr)}.tegen{text-align:center}.verdicts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.paren{grid-template-columns:minmax(0,1fr)}}
/* lichte kaarten binnen een donkere band: meter en spark terug naar lichte stand */
.k-room .spark,.k-room2 .spark,.k-geel .spark{color:var(--blauw)}
.band .k-room .meter,.band .k-room2 .meter{background:rgba(22,54,216,.13)}
.band .k-room .meter i,.band .k-room2 .meter i{background:var(--geel)}
.band .k-room .meter::after,.band .k-room2 .meter::after{background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(12,31,143,.45) calc(10% - 2px) 10%)}
.band .k-room .delta.op,.band .k-room2 .delta.op{color:#15803d}.band .k-room .delta.af,.band .k-room2 .delta.af{color:var(--avg-let)}
.kop-m + .chips,.kop-m + .ingeklapt{margin-top:14px}

/* ================================================================ TOOLS-INDEX */
.t-over{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.6fr);gap:var(--hero-gap);align-items:start}
.t-over .kaartje .verdeling{height:22px}
.herkomst{display:grid;gap:22px}.herkomst .kpi b{color:var(--geel)}
.band:not(.geel) .hstaaf .meter{background:rgba(248,242,224,.2)}
.band:not(.geel) .hstaaf a:hover b{text-decoration:underline}
.kies{display:inline-flex;align-items:center;gap:10px;font-size:var(--t1);font-weight:800}
.kies select{font:inherit;font-size:var(--t1);font-weight:800;color:var(--blauw);background:var(--room);border:0;border-radius:var(--pil);padding:8px 14px;max-width:220px}
.toolrij,.toolrij-kop{display:grid;grid-template-columns:48px minmax(0,1fr) 120px minmax(0,160px) 110px;gap:16px;align-items:center;padding:14px 22px}
.toolrij-kop{font-size:var(--t1);font-weight:800;color:var(--tekst-zacht);border-bottom:2px solid rgba(22,54,216,.18)}
.toolrij-kop em{font-style:normal;margin-left:8px;color:var(--blauw)}
.toolrij{border-bottom:1.5px solid rgba(22,54,216,.1)}.toolrij:hover{background:#fff8dd}
.toolrij .oms{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t1);color:var(--tekst-zacht);margin-top:3px}
.toolrij .op{display:flex;align-items:center;gap:4px;font-size:var(--t1);font-weight:700}
.toolrij .op small{font-size:var(--t1);color:var(--tekst-zacht)}
.toolrij .p{font-size:var(--t1);font-weight:800;line-height:1.35}
.toolrij .a{display:flex;align-items:center;gap:8px;font-size:var(--t1);font-weight:800}
@media(max-width:1060px){.t-over{grid-template-columns:minmax(0,1fr)}.herkomst{grid-template-columns:repeat(3,1fr)}
  .toolrij,.toolrij-kop{grid-template-columns:44px minmax(0,1fr) auto}.toolrij .op,.toolrij .p,.toolrij-kop span:nth-child(n+3),.toolrij .a span{display:none}}
@media(max-width:640px){.toolrij,.toolrij-kop{padding:12px 16px;gap:10px}}

/* ================================================================ TOOL */
.t1{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:var(--hero-gap);align-items:center}
.vend{display:flex;align-items:center;gap:12px;font-size:var(--t3);font-weight:800;margin-bottom:14px}
.t1 h1{overflow-wrap:break-word}
.t1 .acties{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:24px}
.t1 .beeld{background:var(--blauw);border-radius:var(--r);padding:24px;height:250px;display:grid;place-items:center;position:relative;overflow:hidden}
.t1 .beeld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--geel)}
.t1 .beeld img{width:100%;height:100%;object-fit:contain}
.beslis{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--gap);margin-top:32px}
.plek{padding:var(--p2) var(--p3) var(--p2) var(--p2);display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:8px 28px;align-items:start}
.plek .nr{font-size:clamp(56px,6vw,84px);font-weight:900;letter-spacing:-.06em;line-height:.85;color:var(--geel);grid-row:span 2}
.plek .nr small{display:block;font-size:var(--t2);letter-spacing:0;color:var(--room);margin-top:8px;font-weight:800;line-height:1.3}
.plek .oordeel-z{font-size:var(--t4);font-weight:900;letter-spacing:-.03em;line-height:1.15}
.plek .rest{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.vaklat{grid-column:1/-1;display:flex;gap:3px;align-items:flex-end;height:34px;margin-top:10px}
.vaklat i{flex:1;height:14px;border-radius:3px;background:var(--leeg)}
.vaklat i.sterk{background:var(--vol);height:22px}.vaklat i.goed{background:var(--vol);opacity:.7;height:18px}.vaklat i.let{background:var(--avg-let)}
.vaklat i.dit{background:var(--room);height:34px;opacity:1}
.feitlijst{padding:var(--p1) var(--p2);border-radius:var(--r);box-shadow:inset 0 0 0 2px var(--blauw);display:grid;align-content:start}
.feitlijst>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1.5px solid rgba(22,54,216,.14);align-items:baseline}
.feitlijst>div:last-child{border-bottom:0}
.feitlijst b{font-size:var(--t3);font-weight:900;line-height:1.25}
.feitlijst small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t1);font-weight:600;color:var(--tekst-zacht)}
.feitlijst a{text-decoration:underline;text-underline-offset:3px}
.t2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--hero-gap);align-items:start}
.t2.zonder-gal{grid-template-columns:minmax(0,1fr)}.t2.zonder-gal .functies{columns:2;column-gap:48px}
.functies{margin-top:22px}
.fn{break-inside:avoid;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-bottom:1.5px solid rgba(248,242,224,.2)}
.fn .i{width:44px;height:44px;border-radius:12px;background:var(--geel);display:grid;place-items:center}.fn .i img{width:26px}
.fn .i.lat{background:transparent;box-shadow:inset 0 0 0 2px rgba(248,242,224,.4)}.fn .i.lat::after{content:"";width:22px;height:10px;border-radius:4px;background:var(--geel)}
.fn b{font-size:var(--t2);font-weight:800;line-height:1.3}
.t3b{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--hero-gap);align-items:start}
.draait{display:grid;gap:12px;padding:var(--p2);margin-bottom:var(--gap);box-shadow:inset 0 0 0 2px var(--blauw)}
.draait .kn{display:flex;align-items:center;gap:14px}.draait .kn b{display:block;font-size:var(--t5);font-weight:900}.draait .kn small{font-size:var(--t1);color:var(--tekst-zacht)}
.draait .var{display:flex;justify-content:space-between;padding:6px 0;border-top:1.5px solid rgba(22,54,216,.12);font-size:var(--t1);font-weight:700}
@media(max-width:1060px){.t1,.beslis,.t2,.t3b{grid-template-columns:minmax(0,1fr)}.t1 .beeld{display:none}.t2.zonder-gal .functies{columns:1}}
@media(max-width:640px){.plek{grid-template-columns:minmax(0,1fr)}.plek .nr{grid-row:auto}.feitlijst>div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ================================================================ VEILIGHEID */
.v0{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--hero-gap);align-items:center}
.v0 .lead{margin-top:20px}
.v1{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--hero-gap);align-items:start}
.niveaus{display:grid;gap:4px}
.niv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:baseline;padding:14px 0;border-bottom:1.5px solid rgba(22,54,216,.18)}
.niv .avg{justify-self:start}.niv>span:last-child{font-size:var(--t2);line-height:1.45}
.vrij{display:grid;grid-template-columns:48px minmax(0,1fr) auto minmax(0,1.1fr);gap:16px;align-items:center;padding:12px 0;border-bottom:1.5px solid rgba(22,54,216,.1)}
.vlijst .vrij:last-child{border-bottom:0}
.vrij .nm a:hover{text-decoration:underline}
.vl{font-size:var(--t1);font-weight:700;color:var(--tekst-zacht);line-height:1.6}
.vl a{color:var(--blauw);text-decoration:underline;text-underline-offset:3px;margin-right:6px}
.c1{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--hero-gap);align-items:end}
.c1 .vendor{display:flex;align-items:center;gap:10px;font-size:var(--t3);font-weight:800;margin-bottom:16px}
.uitspraak{background:var(--room);color:var(--blauw);border-radius:var(--r);padding:var(--p2);display:grid;gap:10px}
.uitspraak b{font-size:var(--t6);font-weight:900;letter-spacing:-.04em}
.uitspraak p{font-size:var(--t2);line-height:1.5}
.uitspraak.let{box-shadow:inset 0 0 0 4px var(--avg-let)}
.groot-lat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;height:30px}
.groot-lat i{border-radius:6px;background:rgba(22,54,216,.15)}
.groot-lat.sterk i,.groot-lat.goed i:nth-child(-n+3),.groot-lat.beperkt i:nth-child(-n+2){background:var(--blauw)}
.groot-lat.let i{background:transparent;box-shadow:inset 0 0 0 2px var(--avg-let)}.groot-lat.let i:first-child{background:var(--avg-let)}
.check em{font-style:normal;margin-left:auto;font-size:var(--t1);opacity:.85}
.check{grid-template-columns:30px minmax(0,1fr) auto}
.nieuwslijst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.nieuws{background:var(--room2);border-radius:var(--r2);padding:18px 20px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 0 0 1.5px rgba(22,54,216,.15)}
.nieuws .wanneer{font-size:var(--t1);font-weight:700;color:var(--tekst-zacht)}
.nieuws b{font-size:var(--t3);font-weight:900;line-height:1.25}.nieuws p{font-size:var(--t1);line-height:1.5}
.nieuws a{text-decoration:underline}
.nieuwslijst.donker .nieuws{background:rgba(248,242,224,.08);box-shadow:none;color:var(--room)}.nieuwslijst.donker .wanneer{color:inherit;opacity:.8}
@media(max-width:1060px){.v0,.v1,.c1{grid-template-columns:minmax(0,1fr)}.v0 img{display:none}.nieuwslijst{grid-template-columns:1fr 1fr}
  .vrij{grid-template-columns:44px minmax(0,1fr) auto}.vrij .vl{grid-column:2/-1}}
@media(max-width:640px){.nieuwslijst{grid-template-columns:minmax(0,1fr)}.niv{grid-template-columns:minmax(0,1fr);gap:8px}.vrij .avg{grid-column:2/-1;justify-self:start}}

/* ================================================================ UPDATES */
.upd{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.upd h3{margin-bottom:6px}
@media(max-width:860px){.upd{grid-template-columns:minmax(0,1fr)}}

/* ================================================================ UITLEG (methode) */
.x1 .lead{margin-top:24px}
.verdeel{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--pil);overflow:hidden;margin:56px 0 34px;position:relative}
.verdeel div{font-size:clamp(34px,7vw,100px);font-weight:900;letter-spacing:-.06em;line-height:1;padding:24px 44px;min-width:0}
.verdeel .a{background:var(--blauw);color:var(--room)}.verdeel .b{background:var(--geel);color:var(--blauw);text-align:right}
.verdeel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(248,242,224,.6) 0 2px,transparent 2px 5%)}
.lat-uitleg{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.lu{display:grid;grid-template-columns:62px minmax(0,1fr);gap:18px;align-items:start}
.lu img{width:58px}.lu h2{margin-bottom:8px}
.x2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--gap);align-items:stretch;margin-bottom:56px}
.hoofdbron{padding:34px 34px 30px;display:flex;flex-direction:column;gap:14px}
.hoofdbron .aandeel{font-size:clamp(72px,9vw,128px);font-weight:900;letter-spacing:-.07em;line-height:.85}
.hoofdbron b{font-size:var(--t6);font-weight:900;letter-spacing:-.04em}.hoofdbron .meter{margin-top:auto}
.bijbronnen{display:grid;gap:var(--gap)}
.bron{border-radius:var(--r2);padding:20px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline}
.bron b{font-size:var(--t4);font-weight:900;letter-spacing:-.035em}.bron small{font-size:var(--t1);font-weight:800;opacity:.8;text-align:right}
.bron span{grid-column:1/-1;font-size:var(--t1);line-height:1.35}
.x2b{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:56px;align-items:start}
.tijdlijn{position:relative;display:grid;gap:30px;padding-left:64px}
.tijdlijn::before{content:"";position:absolute;left:18px;top:6px;bottom:6px;width:14px;border-radius:99px;background:var(--geel)}
.tijdlijn::after{content:"";position:absolute;left:18px;top:6px;bottom:6px;width:7px;background:repeating-linear-gradient(180deg,var(--navy) 0 2px,transparent 2px 22px)}
.stap{position:relative}
.stap em{position:absolute;left:-64px;top:-2px;width:50px;height:50px;border-radius:50%;background:var(--room);color:var(--blauw);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:var(--t4);z-index:1}
.stap b{display:block;font-size:var(--t4);font-weight:900;letter-spacing:-.035em;line-height:1.1;margin-bottom:6px}
.stap span{font-size:var(--t2);line-height:1.4;max-width:44ch;display:block}
.niet{background:var(--navy);color:var(--room);border-radius:var(--r);padding:28px 26px}
.niet h3{font-size:var(--t4);font-weight:900;margin-bottom:12px;color:var(--geel)}
.niet li{list-style:none;display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:var(--t2);padding:8px 0;line-height:1.35}
.niet li::before{content:"✕";width:22px;height:22px;border-radius:50%;background:var(--geel);color:var(--navy);display:grid;place-items:center;font-size:12px;font-weight:900}
.x3{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:70px;align-items:start}
.begrippen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.begrip{padding:20px 0;border-bottom:1.5px solid rgba(22,54,216,.15);display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px}
.begrip dt{font-size:var(--t4);font-weight:900;letter-spacing:-.02em}.begrip dd{font-size:var(--t2);line-height:1.5}
.x4{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.regels-lijst.over li{border-bottom-color:rgba(248,242,224,.25)}.regels-lijst.over li::before{color:var(--geel)}
@media(max-width:1060px){.lat-uitleg,.x2,.x2b,.x3,.x4,.begrippen{grid-template-columns:minmax(0,1fr)}.verdeel{grid-template-columns:1fr;border-radius:var(--r)}.verdeel div{padding:18px 22px}.verdeel .b{text-align:left}}
@media(max-width:640px){.begrip{grid-template-columns:minmax(0,1fr);gap:6px}.tijdlijn{padding-left:58px}}

/* ================================================================ BLOG */
.post{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--hero-gap);align-items:start}
.post-zij{display:grid;gap:var(--gap);position:sticky;top:20px}
.volgende{display:grid;gap:6px;box-shadow:inset 0 0 0 2px var(--blauw)}.volgende b{font-size:var(--t3);font-weight:900;line-height:1.25}
.blijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.bpost{display:grid;gap:6px;padding:22px 0;border-bottom:1.5px solid rgba(22,54,216,.15)}
.bpost .wanneer{font-size:var(--t1);font-weight:700;color:var(--tekst-zacht)}
.bpost b{font-size:var(--t4);font-weight:900;letter-spacing:-.02em;line-height:1.2}
.bpost>span:last-child{font-size:var(--t2);line-height:1.45;color:#1b2a8c;font-weight:500}
.bpost:hover b{text-decoration:underline;text-underline-offset:3px}
.bpost.eerste{grid-column:1/-1;background:var(--geel);border-radius:var(--r);padding:var(--p3);border:0;margin-bottom:12px}
.bpost.eerste b{font-size:var(--t6)}
@media(max-width:1060px){.post,.blijst{grid-template-columns:minmax(0,1fr)}.post-zij{position:static}}
.nieuws p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
/* koppen met zeer lange samengestelde woorden */
.kop-lang{font-size:clamp(26px,5.4vw,60px)}
@media(max-width:640px){.kop-lang{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}}
.k1 .vendor,.c1 .vendor,.vend{flex-wrap:wrap}
.t1 .beeld{height:210px}.t1 .acties{margin-top:18px}.beslis{margin-top:26px}
.plek{padding-top:22px;padding-bottom:22px}

/* ================================================================ R1-verwerking */
/* verschuivingen: geen stoplicht, pijl + gewicht; binnen de ruis gedempt */
.delta.op,.delta.af{color:var(--blauw)}
.band:not(.geel) .delta.op,.band:not(.geel) .delta.af,.k-navy .delta.op,.k-navy .delta.af,.k-blauw .delta.op,.k-blauw .delta.af{color:var(--geel)}
.band .k-room .delta.op,.band .k-room2 .delta.op,.band .k-room .delta.af,.band .k-room2 .delta.af,.k-geel .delta.op,.k-geel .delta.af{color:var(--blauw)}
.delta.vlak{font-weight:700;opacity:.8}
/* verlooplijn met HTML-labels */
.lijnfig{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;gap:6px 10px;margin:8px 0 0}
.lijnfig .y{grid-row:1;display:flex;flex-direction:column;justify-content:space-between;font-size:var(--t1);font-weight:700;color:var(--tekst-zacht);text-align:right}
.lijnfig .lijn{grid-row:1;grid-column:2;height:200px}
.lijnfig .x{grid-column:2;display:flex;justify-content:space-between;font-size:var(--t1);font-weight:700;color:var(--tekst-zacht);border-top:3px solid var(--blauw);padding-top:6px}
.lijnfig figcaption{grid-column:1/-1;font-size:var(--t1);color:var(--tekst-zacht)}
.lijn .ruis{fill:rgba(12,31,143,.08)}
.lijn .l{stroke-width:3}.lijn .p{stroke-width:3}
/* AVG 'let op' is een staat naast de trap, geen trede: alle vakjes omlijnd + uitroepteken */
.avg-lat.avg-lat.let i,.avg.avg.let .avg-lat i{background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor}
.avg-lat.let{color:var(--avg-let);position:relative}
.avg.avg.let .avg-lat{color:#fff}
.avg-lat.let::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:900;line-height:1}
.avg-lat.let i:first-child{background:transparent}
.groot-lat.let i,.groot-lat.let i:first-child{background:transparent;box-shadow:inset 0 0 0 2px var(--avg-let)}
.vaklat i.onbekend{background:repeating-linear-gradient(135deg,rgba(248,242,224,.35) 0 2px,transparent 2px 6px)}
.vaklat i.let{background:transparent;box-shadow:inset 0 0 0 2px #ffb28a;height:22px}
/* filterknoppen in de blauwe filterbalk */
.tabel .filter .fk{color:var(--room);box-shadow:inset 0 0 0 2px rgba(248,242,224,.6)}
.tabel .filter .fk[aria-pressed=true]{background:var(--room);color:var(--blauw)}
/* modeloordeel: plek naast het getal, niet in een smalle kolom */
.oordeel .rij1{flex-wrap:wrap}
.oordeel .plek{flex:1 1 150px;min-width:150px}
/* lange waarden in de index */
.lrij .ctx,.lrij .pr{overflow-wrap:anywhere;line-height:1.25}
/* oordeel met reden (kruis) */
.oordeel .reden{font-size:var(--t2);font-weight:700;line-height:1.45;margin:6px 0 12px}
/* kruis: taken en sterktes naast elkaar, verbonden door de lat */
.koppel h2{margin-bottom:36px}
.koppel-lijsten{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:var(--hero-gap);align-items:stretch}
.koppel-lat{background:var(--geel);border-radius:99px;position:relative}
.koppel-lat::after{content:"";position:absolute;inset:0 5px;background:repeating-linear-gradient(180deg,var(--navy) 0 2px,transparent 2px 22px)}
.taaklijst{list-style:none;margin-top:14px}
.taaklijst li{font-size:var(--t4);font-weight:800;letter-spacing:-.015em;line-height:1.25;padding:14px 0;border-bottom:1.5px solid rgba(22,54,216,.15)}
.taaklijst.sterk li{font-weight:600}
.koppel-noot{margin-top:28px;max-width:70ch}
@media(max-width:860px){.koppel-lijsten{grid-template-columns:minmax(0,1fr)}.koppel-lat{height:14px}.koppel-lat::after{inset:4px 0;background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 22px)}}
/* open FAQ-raster */
.faq-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px var(--hero-gap)}
.faq-open div{border-top:14px solid var(--geel);padding-top:14px;position:relative}
.faq-open div::before{content:"";position:absolute;left:0;right:0;top:-14px;height:7px;background:var(--lat-streep)}
.faq-open dt{font-size:var(--t4);font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.faq-open dd{font-size:var(--t2);line-height:1.55}
.m4 .faq-open{grid-template-columns:minmax(0,1fr)}
@media(max-width:860px){.faq-open{grid-template-columns:minmax(0,1fr)}}
/* matrix met Elo-verschil */
.matrix td.wint a{background:var(--geel);color:var(--blauw)}
.matrix td.gelijk a{color:var(--tekst-zacht)}
.matrix td.verliest a{background:var(--room2)}
/* duel (vlinderdiagram) */
.duel{max-width:980px;margin:0 auto}
.duel-kop{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;margin-bottom:14px}
.duel-kop b{font-size:var(--t5);font-weight:900}.duel-kop b:last-child{text-align:right}.duel-kop span{font-size:var(--t1);font-weight:800;color:var(--tekst-zacht)}
.duel-rij{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(120px,190px) minmax(0,1fr) 80px;gap:12px;align-items:center;padding:10px 0;border-bottom:1.5px solid rgba(22,54,216,.12)}
.duel-rij .dl{text-align:center;font-size:var(--t1);font-weight:800}
.db{height:18px;background:rgba(22,54,216,.1);border-radius:99px;display:flex;overflow:hidden}
.db.l{justify-content:flex-end}.db i{display:block;height:100%;background:rgba(22,54,216,.35);border-radius:99px}.db i.w{background:var(--blauw)}
.dw{font-size:var(--t3);font-weight:900;font-variant-numeric:tabular-nums}.dw.l{text-align:right}
.dw.wint{background:var(--geel);border-radius:8px;padding:0 6px}
@media(max-width:640px){.duel-rij{grid-template-columns:56px minmax(0,1fr) minmax(0,1fr) 56px;grid-template-areas:"lab lab lab lab" "a ba bb b"}.duel-rij .dl{grid-area:lab;text-align:left}
  .dw.l{grid-area:a}.db.l{grid-area:ba}.db.r{grid-area:bb}.dw.r{grid-area:b}.dw{font-size:var(--t2)}}
/* vergelijkingstabel op 390: twee kolommen onder het criterium */
@media(max-width:640px){.tabel.vgl .dtabel thead{display:none}.tabel.vgl .dtabel tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1.5px solid rgba(22,54,216,.12)}
  .tabel.vgl .dtabel td{border:0;text-align:left}.tabel.vgl .dtabel td:first-child{grid-column:1/-1;font-weight:800;padding-bottom:0}}
/* index op één lat: as en mobiele vorm */
.sky-as{font-size:var(--t1);font-weight:700;color:var(--tekst-zacht);margin-top:10px}
.sky-mobiel{display:none}
@media(max-width:640px){.sky-wrap{display:none}.sky-mobiel{display:grid;gap:8px}
  .sky-mobiel a{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 36px;gap:10px;align-items:center;font-size:var(--t2)}
  .sky-mobiel .n{font-weight:900}.sky-mobiel b{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sky-mobiel .w{font-weight:900;text-align:right}
  .sky-mobiel a.dit{background:var(--room);border-radius:10px;padding:4px 8px}}
/* ranglijst op 390: kaartrij met het kerngetal vooraan */
@media(max-width:640px){.lijst-index{padding:6px 14px;overflow:visible}.lrij-kop{display:none}
  .lrij{min-width:0;grid-template-columns:24px 40px minmax(0,1fr) auto;grid-template-areas:"n av nm elo" "n av red red";gap:4px 10px}
  .lrij .n{grid-area:n}.lrij .av{grid-area:av}.lrij .nm{grid-area:nm}.lrij .elo{grid-area:elo;text-align:right}.lrij .red{grid-area:red}
  .lrij .spark,.lrij .pr,.lrij .ctx,.lrij>.avg-lat{display:none}}
/* check: de trap van het vak */
.trap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);align-items:end}
.trede{background:var(--room2);border-radius:var(--r);padding:16px;box-shadow:inset 0 0 0 1.5px rgba(22,54,216,.15);display:flex;flex-direction:column;gap:12px;min-height:120px}
.trede.hier{background:var(--geel);box-shadow:inset 0 0 0 3px var(--blauw)}
.trede-kop{display:flex;align-items:center;justify-content:space-between;gap:8px}.trede-kop b{font-size:var(--t5);font-weight:900}
.stippen{display:flex;flex-wrap:wrap;gap:6px}
.stippen a{border-radius:8px;transition:transform .12s}.stippen a:hover{transform:scale(1.15)}
.stippen a.dit{outline:3px solid var(--blauw);outline-offset:2px;border-radius:8px;transform:scale(1.25)}
.nobr{white-space:nowrap}
.nieuwslijst.smal{grid-template-columns:minmax(0,1fr)}
@media(max-width:860px){.trap{grid-template-columns:repeat(2,minmax(0,1fr))}.trede.hier{grid-column:1/-1}}
/* updates: tijdlijn */
.tijdlijn2{background:rgba(248,242,224,.06);border-radius:var(--r);overflow:hidden}
.tl-item{display:grid;grid-template-columns:48px 150px minmax(0,1fr);gap:4px 18px;align-items:start;padding:16px 22px;border-bottom:1.5px solid rgba(248,242,224,.14)}
.tl-item .av{grid-row:span 2}.tl-item .wanneer{font-size:var(--t1);font-weight:700;opacity:.8;grid-row:span 2;padding-top:3px}
.tl-item b{font-size:var(--t3);font-weight:900}.tl-item p{font-size:var(--t1);line-height:1.5;opacity:.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tl-item a{text-decoration:underline}
@media(max-width:640px){.tl-item{grid-template-columns:40px minmax(0,1fr)}.tl-item .wanneer{grid-row:auto}}
/* blog-proza */
.proza h3{font-size:var(--t4);font-weight:900;margin:28px 0 8px}.proza h4{font-size:var(--t3);font-weight:900;margin:20px 0 6px}
.proza ol{padding-left:24px;margin:0 0 18px}.proza blockquote{border-left:6px solid var(--geel);padding:6px 0 6px 18px;margin:0 0 16px;font-size:var(--t3)}
.proza hr.lat-scheider{border:0;height:14px;margin:36px 0;border-radius:99px}
.proza-tabel{margin:8px 0 22px;border:2px solid var(--blauw);border-radius:var(--r2);background:var(--room2)}
.proza-tabel .dtabel td,.proza-tabel .dtabel th{font-size:var(--t1)}
.post-zij .rij{padding:9px 0}
.av.mini{font-size:14px;letter-spacing:-.06em}
.trede-kop{flex-wrap:wrap}.trede{min-width:0}
.proza h2,.proza h3,.proza p,.proza li{overflow-wrap:break-word}
.proza{min-width:0}
.bpost{min-width:0}.bpost b,.bpost>span:last-child{overflow-wrap:break-word}.blijst{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:1060px){.blijst{grid-template-columns:minmax(0,1fr)}}
.kop-klein{font-size:clamp(28px,3.4vw,46px)}.feitlijst>div{padding:7px 0}
/* R2: kleuren per oppervlak, niet per band */
.delta.op,.delta.af,.band:not(.geel) .delta.op,.band:not(.geel) .delta.af,.band .k-room .delta.op,.band .k-room2 .delta.op,.band .k-room .delta.af,.band .k-room2 .delta.af{color:var(--vol)}
.delta.vlak{color:inherit;opacity:.75}
.spark,.band:not(.geel) .spark,.k-room .spark,.k-room2 .spark{color:var(--vol)}
.k-room .spark,.k-room2 .spark,.k-geel .spark{color:var(--blauw)}
.band.geel .meter i{background:var(--blauw)}.band.geel .meter{background:rgba(22,54,216,.15)}
/* 'let op' binnen het palet: geel met navy uitroepteken, omlijnde vakjes */
:root{--avg-let:var(--navy)}
.avg.avg.let{background:var(--geel);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.avg.avg.let .avg-lat{color:var(--navy)}
.avg-lat.let{color:var(--navy)}.band:not(.geel) .avg-lat.let,.k-navy .avg-lat.let{color:var(--geel)}
.uitspraak.let{box-shadow:inset 0 0 0 4px var(--geel)}
.groot-lat.let i,.groot-lat.let i:first-child{box-shadow:inset 0 0 0 2px var(--navy)}
.banner.let .uitroep,.waarschuw .uitroep{background:var(--geel);color:var(--navy)}
.vuist.let b{color:var(--geel)}
.vaklat i.let{box-shadow:inset 0 0 0 2px var(--geel)}
/* toolplek: aantal sterker, geen schijnrang */
.plek .nr small{font-size:var(--t1)}
/* beroep: stappen-kop boven de stappen, zodat lange vaknamen niet breken */
.stappen-z{grid-template-columns:minmax(0,1fr)}.stappen-z h2{margin-bottom:8px}
/* ================================================================ toestemming */
.toestemming{position:fixed;left:20px;bottom:20px;z-index:100;width:min(460px,calc(100vw - 40px));background:var(--room);color:var(--blauw);border-radius:var(--r);
  box-shadow:0 0 0 2px var(--blauw),0 24px 60px rgba(12,31,143,.28);overflow:hidden;transition:opacity .2s,transform .2s}
.toestemming.weg{opacity:0;transform:translateY(12px)}
.ts-lat{height:14px;background:var(--geel);position:relative}.ts-lat::after{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:var(--lat-streep)}
.ts-in{padding:20px 22px 22px}
.toestemming h2{font-size:var(--t4);font-weight:900;letter-spacing:-.03em;line-height:1.15;margin-bottom:8px}
.toestemming p{font-size:var(--t1);line-height:1.5}.toestemming p a{text-decoration:underline;text-underline-offset:3px;font-weight:800}
.ts-keuzes{margin-top:14px;display:grid;gap:2px}
.ts-rij{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-top:1.5px solid rgba(22,54,216,.14);cursor:pointer}
.ts-rij input{width:20px;height:20px;accent-color:var(--blauw);margin-top:2px}
.ts-rij b{display:block;font-size:var(--t2);font-weight:900}.ts-rij small{display:block;font-size:var(--t1);color:var(--tekst-zacht);line-height:1.4}
.ts-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ts-knoppen .knop{padding:11px 20px;font-size:var(--t2)}
@media(max-width:640px){.toestemming{left:0;right:0;bottom:0;width:100%;border-radius:var(--r) var(--r) 0 0}.ts-knoppen .knop,.ts-knoppen .fk{flex:1 1 auto;text-align:center}}
@media print{.toestemming{display:none}}

/* ================================================================ fase 1: taak, beroep × taak, alternatieven, journaal, status */
.th1{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--hero-gap);align-items:end}
.th1-r{display:grid;gap:var(--gap)}
.kort-lijst{padding:14px 22px}.kort-lijst .rij{padding:9px 0}
.k1v{display:flex;align-items:center;gap:10px;font-size:var(--t3);font-weight:800;margin-bottom:14px}
.vaktegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--gap)}
.vaktegel{background:var(--room2);border-radius:var(--r2);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 0 0 1.5px rgba(22,54,216,.18);color:var(--blauw)}
.band .vaktegel,.band.geel .vaktegel{background:var(--room)}
.vaktegel img{width:40px;height:40px;object-fit:contain;margin-bottom:6px}
.vaktegel b{font-size:var(--t4);font-weight:900;letter-spacing:-.025em;line-height:1.15}
.vaktegel span{font-size:var(--t1);font-weight:700;color:var(--tekst-zacht)}
.vaktegel .rij-avg{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px}.vaktegel em{font-style:normal}
.vaktegel:hover{box-shadow:inset 0 0 0 2.5px var(--blauw)}
.taken-idx .vaktegel{min-height:170px}
.prijsband{padding-top:8px}
.pb-lat{position:relative;height:56px;border-bottom:14px solid var(--blauw);margin:0 14px}
.pb-lat::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:7px;background:repeating-linear-gradient(90deg,var(--geel) 0 2px,transparent 2px 22px)}
.pb-lat a{position:absolute;bottom:6px;transform:translateX(-50%)}
.pb-lat a:nth-child(even){bottom:30px}
.pb-as{display:flex;justify-content:space-between;font-weight:900;font-size:var(--t2);margin-top:10px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tags i{font-style:normal;font-size:var(--t1);font-weight:800;background:var(--geel);color:var(--navy);border-radius:99px;padding:2px 10px}
.alt-strook{display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,2fr);gap:var(--gap);align-items:stretch}
.huidig{padding:var(--p2);display:flex;flex-direction:column;gap:12px}
.huidig .kn,.altkaart .kn{display:flex;align-items:center;gap:12px}.huidig b,.altkaart b{font-size:var(--t5);font-weight:900;letter-spacing:-.03em}
.huidig .p,.altkaart .p{font-size:var(--t1);font-weight:800}
.pijlblok{align-self:center;font-size:56px;font-weight:900;color:var(--geel)}
.altkaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.altkaart{padding:var(--p1);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.altkaart:hover b{text-decoration:underline;text-underline-offset:3px}
.jgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--hero-gap);align-items:start}
.jitem{padding:18px 0;border-bottom:1.5px solid rgba(22,54,216,.15)}
.jitem h3{font-size:var(--t4);font-weight:900;letter-spacing:-.025em;line-height:1.2;margin:6px 0 8px}
.jitem p{font-size:var(--t2);line-height:1.55}
.jitem.groot{background:var(--blauw);color:var(--room);border-radius:var(--r);padding:var(--p3);border:0}
.jitem.groot h3{font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.04em}
.jitem.groot .tagpil{background:var(--room);color:var(--blauw)}
.jitem.groot .bron{color:var(--geel)}
.jlogos{display:flex;gap:6px}
.jbetekent{margin-top:12px;background:var(--geel);color:var(--navy);border-radius:12px;padding:10px 14px;font-size:var(--t1)!important}
.jvoet{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.tagpil{font-size:var(--t1);font-weight:800;border-radius:99px;padding:3px 11px;background:var(--room2);box-shadow:inset 0 0 0 1.5px rgba(22,54,216,.25)}
.bron{margin-left:auto;font-size:var(--t1);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.statusblok{margin-bottom:28px}
.statusblok h3{margin-bottom:10px}
.strij{display:grid;grid-template-columns:120px auto minmax(0,1fr);gap:4px 16px;align-items:center;padding:10px 0;border-top:1.5px solid rgba(22,54,216,.12)}
.strij b{font-weight:900}.strij small{grid-column:2/-1;font-size:var(--t1);color:var(--tekst-zacht)}
.snu{font-size:var(--t1);font-weight:800;border-radius:99px;padding:2px 10px;background:var(--room);box-shadow:inset 0 0 0 1.5px rgba(22,54,216,.3)}
.snu.minor,.snu.major,.snu.critical{background:var(--geel);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.sstrook{display:flex;gap:2px;height:18px;align-items:stretch}
.sstrook i{flex:1;max-width:9px;border-radius:2px;background:var(--blauw)}
.sstrook i.s1{background:var(--geel)}.sstrook i.s2,.sstrook i.s3{background:var(--navy);box-shadow:inset 0 0 0 2px var(--geel)}
@media(max-width:1060px){.th1,.jgrid,.alt-strook{grid-template-columns:minmax(0,1fr)}.pijlblok{display:none}.altkaarten{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.strij{grid-template-columns:minmax(0,1fr) auto}.strij .sstrook{grid-column:1/-1}}
/* ================================================================ nieuwsbrief */
.nb{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--hero-gap);align-items:center}
.nb-form{padding:var(--p2);display:grid;gap:8px}
.nb-form select,.nb-form input[type=email]{font:inherit;font-size:var(--t2);font-weight:700;color:var(--blauw);background:var(--room2);border:2px solid var(--blauw);border-radius:14px;padding:12px 14px;width:100%}
.nb-form .knop{justify-content:center;margin-top:6px;border:0;cursor:pointer;font-family:inherit}
.nb-form .knop:disabled{opacity:.6}
.nb-honing{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nb-status{font-weight:800;font-size:var(--t2);min-height:1.4em}.nb-status.goed{color:var(--blauw)}.nb-status.fout{color:var(--navy);background:var(--geel);border-radius:8px;padding:4px 8px}
.nb-klein{font-size:var(--t1);color:var(--tekst-zacht)}
.nb-voorbeeld{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--hero-gap);align-items:start}
.nb-frame iframe{width:100%;height:900px;border:0;border-radius:var(--r);box-shadow:0 0 0 2px var(--blauw);background:var(--room)}
@media(max-width:1060px){.nb,.nb-voorbeeld{grid-template-columns:minmax(0,1fr)}.nb-frame iframe{height:760px}}

/* ---- fase 2/3: prijs, rekenhulp, AI Act-kalender ---- */
.prijskaart{padding:var(--p1) var(--p2);display:grid;gap:10px;align-self:end}
.pk-regel{font-size:var(--t4);font-weight:900;letter-spacing:-.02em;line-height:1.2;border-bottom:1.5px solid rgba(22,54,216,.15);padding-bottom:10px}
.prijskaart .klein{font-size:var(--t1);color:var(--tekst-zacht);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plannen{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap);margin-top:32px}
.plan{padding:22px 24px;display:grid;gap:6px;align-content:start}
.plan b{font-size:var(--t3);font-weight:900}.plan .pr{font-size:var(--t6);font-weight:900;letter-spacing:-.03em;line-height:1.1}.plan small{font-size:var(--t1);color:var(--tekst-zacht)}
.reken{padding:var(--p1) var(--p2);display:grid;gap:14px;align-content:start}
.reken input[type=range]{width:100%;accent-color:var(--blauw)}
.rk-uit b{font-size:48px;font-weight:900;letter-spacing:-.04em;line-height:1}
.reken .klein{font-size:var(--t1)}
.kanten .vs,h1 .vs{color:var(--geel)}
.kalender{list-style:none;display:grid;gap:0;border-top:2px solid var(--blauw)}
.kalender li{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:4px 24px;padding:18px 0;border-bottom:1.5px solid rgba(22,54,216,.18);align-items:baseline}
.kalender time{font-weight:900;font-size:var(--t3)}.kalender b{font-size:var(--t3);font-weight:900}
.kalender span{grid-column:2;font-size:var(--t2);line-height:1.5;color:var(--tekst-zacht)}
.kalender li>a{grid-column:3;grid-row:1;font-size:var(--t1);text-decoration:underline}
.kalender li.voorbij{opacity:.55}
@media(max-width:640px){.kalender li{grid-template-columns:minmax(0,1fr)}.kalender span,.kalender li>a{grid-column:1;grid-row:auto}}
.tl-item>span:first-child:empty,.tl-item>.tl-icoon{grid-row:span 2}
.pk-positie{font-size:var(--t2);font-weight:800;background:var(--geel);border-radius:var(--r2);padding:10px 14px}
.kant-prijs{font-size:var(--t2);font-weight:800}
.meer[hidden]{display:none}
/* vergelijkingstabel tool vs tool: lange waarden mogen breken; op 390 staat de toolnaam boven elke waarde */
.vgl-tools .dtabel td.getal{white-space:normal;text-align:left}
.vgl-tools .dtabel th.getal{text-align:left}
@media(max-width:640px){.vgl-tools .dtabel{min-width:0!important;width:100%}.vgl-tools .dtabel td[data-label]::before{content:attr(data-label);display:block;font-size:var(--t1);font-weight:800;color:var(--tekst-zacht);margin-bottom:2px}}
@media(max-width:640px){.tl-item b,.tl-item p{grid-column:2/-1}}

/* R2: prijsband — mediaan op zijn waarde, eigen tool gemarkeerd; toollijst toont prijs en AVG op mobiel */
.pb-as{position:relative}.pb-as .pb-med{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.pb-lat a.zelf{z-index:3;outline:3px solid var(--geel);outline-offset:2px;border-radius:8px}
@media(max-width:640px){.trij .p{display:block;grid-column:3/-1;margin-top:-4px}.trij .a span{display:inline}}
.tl-icoon{width:40px;height:40px;border-radius:10px;background:rgba(248,242,224,.14);display:grid;place-items:center;font-weight:900;grid-row:span 2}
.kant>.avg{justify-self:start}

/* R3: knoppen als <button> overal in Blok-stijl; prijsband-labels botsen niet op mobiel; rijen laten namen afbreken */
button.knop{border:0;cursor:pointer;font-family:inherit}
@media(max-width:640px){.pb-as{flex-wrap:wrap}.pb-as .pb-med{position:static;transform:none;order:3;width:100%;text-align:center;margin-top:4px}}
.rij .nm{min-width:0}
.vgl-tools .dtabel td:first-child,.vgl-tools .dtabel th:first-child{white-space:nowrap;width:1%}

/* ================================================================ mobiel (ronde 24-09): meten op 360/390/414 */
@media(max-width:640px){
  /* rijen: rechterkant mag nooit de naam wegdrukken; smal = cijfers onder de naam */
  .rij .nm b{overflow-wrap:break-word;hyphens:auto}
  .rij .rechts{gap:8px;flex-wrap:wrap}
  .rij .rechts .spark{width:52px}
  /* tikdoelen: minstens 44px hoog voor losse links en knoppen */
  .voet a{padding:11px 0;font-size:var(--t2)}
  .voet .wrap>div{gap:0}
  .nav{min-height:64px}
  .nav-knop{min-height:44px;padding:11px 18px;font-size:var(--t2)}
  .kopbalk .logo{min-height:44px}
  .linkpijl{display:inline-flex;align-items:center;min-height:44px}
  .fk{min-height:44px}
  label.tog{min-height:44px}
  .kies select,.filter select{min-height:44px}
  .chips a{min-height:44px;display:inline-flex;align-items:center}
  /* veiligheidsrooster: beroepslinks als tikbare chips i.p.v. 15px-tekstlinks */
  .vl{display:flex;flex-wrap:wrap;gap:6px;line-height:1.2}
  .vl a{margin:0;padding:10px 12px;border-radius:var(--pil);background:rgba(22,54,216,.08);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
  /* vergelijk: namen niet afkappen */
  .paar{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;gap:8px;padding:14px 14px}
  .paar b{white-space:normal;overflow:visible;text-overflow:clip;font-size:var(--t2);line-height:1.2;overflow-wrap:break-word}
  .paar .av{width:32px;height:32px}
  /* kruimelpad: ruimere regels, lange titels afgekort */
  .kruimel{line-height:1.9}
  .kruimel span:last-child{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  /* prijsband: stippen groot genoeg om te tikken */
  .pb-lat a .av{width:30px;height:30px}
  /* tabellen die stapelen */
  .stapel thead{display:none}
  .stapel tr{display:block;padding:12px 0;border-bottom:1.5px solid rgba(22,54,216,.14)}
  .stapel td{display:block;border:0;padding:3px 14px}
  .stapel td[data-label]::before{content:attr(data-label);display:block;font-size:var(--t1);font-weight:800;color:var(--tekst-zacht)}
  .tabel-scroll:has(.stapel){overflow:visible}
  .stapel{min-width:0!important;width:100%}
}
@media(max-width:640px){
  /* overloop op 360: tegelraster en bloglijst */
  .tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tegel b{overflow-wrap:break-word;hyphens:auto}
  .blijst{grid-template-columns:minmax(0,1fr);column-gap:0}
  .bpost b{overflow-wrap:break-word;hyphens:auto}
  /* balkrijen (ranking, tools, toezicht) als volwaardige tikregels */
  .sky-mobiel a,.hstaaf a{min-height:44px}
  .tl-item a,.kalender li>a{display:inline-flex;align-items:center;min-height:44px}
  .meerlezen{min-height:44px;padding:0}
  .tabel .filter .z input,.zoek input,input[type=search],input[type=email]{min-height:44px;font-size:16px}
  .tagpil{padding:9px 14px;display:inline-flex;align-items:center;min-height:40px}
  .voet a.logo{min-height:44px}
  .stippen{gap:10px}
  .stippen a .av{width:34px;height:34px}
}
.bpost{grid-template-columns:minmax(0,1fr)}.bpost>*{min-width:0;overflow-wrap:break-word}
@media(max-width:640px){
  .vrij .nm b a{display:inline-flex;align-items:center;min-height:44px}
  .reken input[type=range]{height:44px}
  .meer-knop{min-height:44px}
  .jitem .av,.jitem a:has(.av){min-width:36px;min-height:36px}
  .lrij-kop a,.skop a{min-height:44px;display:inline-flex;align-items:center}
  .dtabel td.nm-cel a{display:inline-flex;align-items:center;min-height:40px}
}
@media(max-width:420px){
  .rij .rechts .spark{display:none}
}
/* cookiebanner: categorieën pas na 'Kiezen' (hidden werd door display overschreven); op mobiel een compacte onderbalk */
.ts-keuzes[hidden],.toestemming [hidden]{display:none!important}
@media(max-width:640px){
  .toestemming .ts-in{padding:16px 16px calc(14px + env(safe-area-inset-bottom))}
  .toestemming h2{font-size:var(--t3);margin-bottom:4px}
  .toestemming p{font-size:13.5px;line-height:1.45}
  .ts-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .ts-knoppen [data-ts=alles]{grid-column:1/-1;justify-content:center}
  .ts-knoppen .fk,.ts-knoppen .knop{min-height:44px}
}