/* StroomSelectie redesign.
   Peildatum 16 augustus 2026, tokens volgens designplan 31.
   Verbeterslag 3 september 2026: sectielabels, verwijzingen, modellentabel, artikelkop. */

/* ---------- 1. Lettertypen, zelf gehost ---------- */
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed";src:url("assets/fonts/ibm-plex-sans-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. Tokens ---------- */
:root{
  --nacht:#0D1B2A;
  --koelwit:#EEF5F8;
  --wit:#FFFFFF;
  --dal:#2E6BE6;
  --piek:#D93F2B;
  --grijs:#667085;
  --piek-diep:#B7331F;
  --grijs-tekst:#4A5568;
  --lijn:#D5DBE1;
  --raster-donker:#1B2C3F;
  --grijs-op-donker:#8A97AB;
  --dal-op-donker:#6FA0FF;
  --piek-op-donker:#FF7A63;

  --display:"IBM Plex Sans Condensed",system-ui,sans-serif;
  --tekst:"IBM Plex Sans",system-ui,sans-serif;
  --mono:var(--tekst);

  --s-half:4px; --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --radius:4px;
  --wrap:1120px;
}

/* ---------- 3. Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--koelwit);color:var(--nacht);
  font-family:var(--tekst);font-size:16px;line-height:26px;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0}
h1{font-size:34px;line-height:38px;letter-spacing:-.015em}
h2{font-size:24px;line-height:30px;letter-spacing:-.01em}
h3{font-size:19px;line-height:26px}
p{margin:0}
a{color:var(--nacht)}
img,svg{max-width:100%}
ul{margin:0;padding:0;list-style:none}

.mono,.m1,.m2,.m3,.m4{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.m1{font-size:28px;line-height:32px;font-weight:500}
.m2{font-size:15px;line-height:24px}
.m3{font-size:13px;line-height:20px;color:var(--grijs-tekst)}
.m4{font-size:11px;line-height:16px}

.label{display:inline-block;font-size:12px;line-height:16px;font-weight:500;text-transform:none;letter-spacing:.03em;color:#2560CE;background:#E3EFF7;padding:4px 9px;border-radius:4px}
.lede{font-size:18px;line-height:28px;color:var(--grijs-tekst)}
.klein{font-size:14px;line-height:22px;color:var(--grijs-tekst)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s2)}
.tekstkolom{max-width:640px}

:focus-visible{outline:2px solid var(--nacht);outline-offset:2px;border-radius:var(--radius)}
.op-donker :focus-visible{outline-color:var(--wit)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s2);top:var(--s2);z-index:20;background:var(--wit);padding:var(--s1) var(--s2);border:1px solid var(--nacht)}

/* ---------- 4. Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 var(--s3);
  font-family:var(--tekst);font-size:16px;line-height:24px;font-weight:500;
  border:1px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;background:none;
}
.btn svg{display:none}
/* sinds 22 september 2026 nachtblauw: rood codeert piektarief, niet een actie */
.btn-primary{background:var(--nacht);color:var(--wit);border-color:var(--nacht)}
.btn-primary:hover{background:var(--nacht);border-color:var(--dal)}
.btn-secondary{background:var(--wit);color:var(--nacht);border-color:var(--nacht)}
.btn-secondary:hover{background:var(--nacht);color:var(--wit)}
.btn-ghost{background:none;color:var(--nacht);border-color:var(--lijn);text-decoration:underline}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-blok{width:100%}

/* de knop Volgende in de StroomCheck is nachtblauw, niet rood */
.check-next{background:var(--nacht);color:var(--wit);border-color:var(--nacht)}
.check-next:hover:not([disabled]){background:var(--nacht);border-color:var(--dal)}

.tekstlink{color:var(--nacht);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.tekstlink:hover{text-decoration-thickness:2px}

/* ---------- 5. Kop en navigatie ---------- */
header.site{background:var(--wit);border-bottom:1px solid var(--lijn)}
header.site .nav{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:var(--s2)}
.brand{display:inline-flex;align-items:center;text-decoration:none;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.02em;text-transform:uppercase}
.brand .mark{width:20px;height:20px;margin-right:var(--s1);flex:0 0 auto;display:block}
.nav-right{display:flex;align-items:center;gap:var(--s2)}
nav.links{display:none}
nav.links a{font-size:14px;text-decoration:none;color:var(--grijs-tekst);padding:var(--s1) 0}
nav.links a:hover{color:var(--nacht);text-decoration:underline}
.nav-cta{display:none}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:1px solid var(--lijn);border-radius:var(--radius);cursor:pointer}
.nav-toggle svg{width:22px;height:22px;stroke:var(--nacht)}
nav.links.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;background:var(--wit);border-bottom:1px solid var(--lijn);padding:var(--s2);gap:var(--s1);z-index:10}

/* ---------- 6. Secties ---------- */
main{display:block}
section{padding:var(--s5) 0}
.band{border-top:4px solid var(--nacht)}
.lijn{border-top:1px solid var(--lijn)}
.sectiekop{margin-bottom:var(--s4);max-width:640px}
.sectiekop p{margin-top:var(--s2);color:var(--grijs-tekst)}
.sectiekop p.eyebrow{margin:0 0 var(--s1);font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--dal)}

/* ---------- 7. Hero ---------- */
.hero{padding-top:var(--s4);padding-bottom:var(--s5)}
.hero h1{margin-bottom:var(--s2)}
.hero .lede{max-width:520px}
.hero-actie{margin-top:var(--s3)}
.hero-noot{margin-top:var(--s2);font-size:14px;line-height:22px;color:var(--grijs-tekst)}
.hero-foto{margin:var(--s4) 0 0;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);background:var(--lijn)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;border-radius:var(--radius)}

/* ---------- 8b. Praktijkdata ---------- */
.beeldsectie{padding:var(--s5) 0;background:var(--nacht);color:var(--koelwit)}
.beeldsectie .sectiekop h2{color:var(--wit)}
.beeldsectie .sectiekop p{color:var(--grijs-op-donker)}
.beeldsectie .sectiekop p.eyebrow{color:var(--dal-op-donker)}
.praktijk{margin:0;max-width:640px}
.pr-plaat{background:none;padding:0;border-radius:0}
.pr-kop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap;padding-bottom:var(--s2);border-bottom:1px solid var(--raster-donker)}
.pr-titel{font-size:14px;line-height:20px;font-weight:500;color:var(--koelwit)}
.pr-periode{flex:0 0 auto;font-size:12px;line-height:16px;color:var(--grijs-op-donker)}

/* kerngetal: het enige grote getal in de sectie */
.pr-kern{margin:var(--s3) 0 var(--s1);display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.pr-kern-getal{font-size:34px;line-height:40px;font-weight:500;color:var(--wit)}
.pr-kern-bij{font-size:14px;line-height:22px;color:var(--grijs-op-donker)}
.pr-kern-zin{margin:0 0 var(--s4);font-size:16px;line-height:26px;color:var(--koelwit);max-width:44ch}

/* totalen als twee rustige regels onder de grafiek */
.pr-totalen{margin:var(--s4) 0 0;padding:var(--s2) 0 0;border-top:1px solid var(--raster-donker)}
.pr-tot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:var(--s-half) 0}
.pr-tot dt{font-size:14px;line-height:22px;color:var(--grijs-op-donker)}
.pr-tot dd{margin:0;flex:0 0 auto;font-size:14px;line-height:22px;color:var(--koelwit)}

/* legenda */
.pr-legenda{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3);margin:0 0 var(--s2);font-size:13px;line-height:20px;color:var(--koelwit)}
.pr-lg{display:flex;align-items:baseline;gap:var(--s1)}
.pr-lg::before{content:"";flex:0 0 12px;width:12px;height:12px;transform:translateY(1px)}
.pr-lg-afname::before{background:var(--koelwit)}
.pr-lg-terug::before{background:var(--dal)}

/* gegroepeerde kolomgrafiek op grotere schermen */
.pr-kolomgrafiek{display:none;width:100%;height:auto;overflow:visible}
.pr-raster line{stroke:var(--raster-donker);stroke-width:1}
.pr-kader{fill:none;stroke:var(--grijs-op-donker);stroke-width:1}
.pr-as text{fill:var(--koelwit);font-family:var(--mono);font-size:12px;text-anchor:end}
.pr-as text[y="334"]{text-anchor:middle}
.pr-as .pr-as-eenheid{fill:var(--grijs-op-donker);font-size:11px}
.pr-kolom-afname{fill:var(--koelwit)}
.pr-kolom-terug{fill:var(--dal)}

/* maandrijen, breedte is de waarde */
.pr-grafiek{border-top:1px solid var(--raster-donker)}
.pr-maand{display:grid;grid-template-columns:2.75rem 1fr;gap:var(--s2);align-items:center;padding:var(--s1) 0;border-bottom:1px solid var(--raster-donker)}
.pr-maand:last-child{border-bottom:0}
.pr-maandnaam{font-size:14px;line-height:20px;color:var(--koelwit)}
.pr-maandnaam abbr{text-decoration:none;border:0}
.pr-staven{display:flex;flex-direction:column;gap:var(--s-half);min-width:0}
.pr-rij{display:grid;grid-template-columns:1fr 5.5rem;gap:var(--s1);align-items:center}
.pr-spoor{display:block;height:12px;min-width:0}
.pr-staaf{display:block;height:12px}
.pr-staaf-afname{background:var(--koelwit)}
.pr-staaf-terug{background:var(--dal)}
.pr-getal{font-size:13px;line-height:20px;color:var(--wit);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}

.pr-slot{margin:var(--s3) 0 0;padding-top:var(--s2);border-top:1px solid var(--raster-donker);font-size:13px;line-height:20px;color:var(--grijs-op-donker)}
.pr-slot .mono{color:var(--koelwit)}
.praktijk figcaption{margin-top:var(--s2);font-size:13px;line-height:20px;color:var(--grijs-op-donker);max-width:640px}

/* StroomCheck-uitkomst bij deze situatie */
.pr-check{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--raster-donker);max-width:640px}
.pr-check .label{color:var(--dal-op-donker);background:transparent;padding:0}
.pr-check-situatie{margin:var(--s1) 0 var(--s2);font-family:var(--mono);font-size:13px;line-height:20px;color:var(--grijs-op-donker)}
.pr-check h3{margin:0 0 var(--s1);color:var(--wit)}
.pr-check p:last-of-type{color:var(--koelwit)}
.pr-check .btn{margin-top:var(--s3)}

/* ---------- 9. StroomCheck ---------- */
#stroomcheck{background:var(--wit);border-top:4px solid var(--nacht);border-bottom:1px solid var(--lijn)}
.check-card{max-width:640px}
.check-head{display:flex;justify-content:space-between;align-items:baseline;margin:var(--s4) 0 var(--s1)}
.check-head .eyebrow{margin:0;font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs-tekst)}
.check-head .eyebrow svg{display:none}
.check-step-label{font-family:var(--mono);font-size:13px;line-height:20px;color:var(--grijs-tekst)}
.check-progress{height:4px;background:var(--lijn)}
.check-progress-bar{height:4px;background:var(--dal);transition:width .2s linear}
.check-q{display:none;border:0;margin:var(--s4) 0 0;padding:0;min-width:0}
.check-q.active{display:block}
.check-q legend{padding:0;font-family:var(--display);font-weight:700;font-size:19px;line-height:26px}
.check-options{margin-top:var(--s3);border:1px solid var(--lijn);border-radius:var(--radius)}
.check-opt{display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:var(--s1) var(--s2);border-bottom:1px solid var(--lijn);border-left:3px solid transparent;cursor:pointer}
.check-opt:last-child{border-bottom:0}
.check-opt input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--dal);margin:0}
.check-opt:hover{background:var(--koelwit)}
.check-opt:has(input:checked){background:var(--koelwit);border-left-color:var(--dal)}
/* optionele precieze teruglevering bij vraag 2, secundair aan de vier hoofdkeuzes */
.check-exact{margin-top:var(--s2);padding-left:var(--s2);border-left:2px solid var(--lijn)}
.check-exact-label{display:block;font-size:14px;line-height:22px;font-weight:500;color:var(--grijs-tekst)}
.check-exact-veld{display:flex;align-items:center;gap:var(--s1);margin-top:var(--s1);flex-wrap:wrap}
.check-exact-veld input{width:10ch;min-height:48px;padding:0 var(--s1);font-family:var(--mono);font-size:16px;line-height:24px;font-variant-numeric:tabular-nums;color:var(--nacht);background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius)}
.check-exact-veld input:hover{border-color:var(--grijs)}
.check-exact-eenheid{font-family:var(--mono);font-size:14px;line-height:22px;color:var(--grijs-tekst)}
.check-exact-hulp{margin-top:var(--s1);font-size:13px;line-height:20px;color:var(--grijs-tekst)}

.check-nav{display:flex;gap:var(--s2);margin-top:var(--s3);align-items:center}
.check-note{margin-top:var(--s3);font-size:14px;line-height:22px;color:var(--grijs-tekst);padding-bottom:var(--s5)}

.check-zijkolom{margin-top:var(--s5);border-top:1px solid var(--lijn);padding-top:var(--s3)}
.check-zijkolom p{color:var(--grijs-tekst);margin-top:var(--s1)}

.check-result{display:none}
.check-result.active{display:block;margin-top:var(--s4);padding:var(--s4) var(--s3);background:var(--nacht);color:var(--koelwit);border-radius:var(--radius)}
.check-result.active h3{color:var(--wit)}
.check-result.active .outcome-badge{border-color:var(--wit)}
.check-result.active .outcome-badge.oc-a,.check-result.active .outcome-badge.oc-c{background:var(--wit);color:var(--nacht)}
.check-result.active .outcome-badge.oc-b{background:transparent;color:var(--wit)}
.check-result.active .outcome-badge.oc-d{background:transparent;color:var(--grijs-op-donker);border-color:var(--grijs-op-donker)}
.check-result.active .result-doorslag{color:var(--koelwit);border-left-color:var(--dal-op-donker)}
.check-result.active .result-doorslag strong{color:var(--wit)}
.check-result.active .result-explain{color:var(--koelwit)}
.check-result.active .result-points li{color:var(--koelwit);border-left-color:var(--raster-donker)}
.check-result.active .btn-ghost{color:var(--koelwit);border-color:var(--grijs-op-donker)}
/* Een link in de uitkomsttekst erft de kleur van het donkere vlak. Zonder deze regel
   krijgt hij de standaard nachtblauwe linkkleur en valt hij volledig weg. */
.check-result.active .result-explain a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.check-result.active :focus-visible{outline-color:var(--wit)}
.outcome-badge{display:inline-block;font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding:var(--s-half) var(--s1);border:1px solid var(--nacht);border-radius:var(--radius)}
.outcome-badge.oc-a{background:var(--nacht);color:var(--wit)}
.outcome-badge.oc-b{background:var(--wit);color:var(--nacht)}
.outcome-badge.oc-c{background:var(--nacht);color:var(--wit)}
.outcome-badge.oc-d{background:var(--wit);color:var(--grijs-tekst);border-color:var(--lijn)}
.check-result h3{margin:var(--s2) 0}
.result-doorslag{font-size:14px;line-height:22px;color:var(--grijs-tekst);border-left:2px solid var(--dal);padding-left:var(--s2);margin-bottom:var(--s2)}
.result-explain{margin-bottom:var(--s3)}
.result-points li{border-left:2px solid var(--lijn);padding-left:var(--s2);margin-bottom:var(--s2);font-size:14px;line-height:22px;color:var(--grijs-tekst)}
.result-points li svg{display:none}
.result-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
/* de primaire actie in het resultaat is nachtblauw; rood blijft voorbehouden aan de hero-actie */
#stroomcheck .result-actions .btn-primary{background:var(--wit);color:var(--nacht);border-color:var(--wit)}
#stroomcheck .result-actions .btn-primary:hover{background:var(--koelwit);border-color:var(--dal-op-donker)}

/* 9b. Partnerblok in de uitkomst, als advertentie gemarkeerd.
   Staat los onder de bestaande resultaatlinks en is door de scheidingslijn
   herkenbaar als een apart blok. De tekstlink erbinnen erft de kleur van het
   donkere vlak, want de standaard linkkleur is nachtblauw en zou wegvallen. */
.result-partner{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--grijs-op-donker)}
.result-partner-melding a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* 9c. Partnerblok in een artikel, op lichte achtergrond. Zelfde opbouw als 9b,
   maar met de gewone lijnkleur, want hier staat het niet op een donker vlak.
   Geen vlakvulling en geen schaduw: het blok hoort bij de lopende tekst en
   mag niet als losse kaart gaan werken. */
.partner-artikel{max-width:640px;margin:var(--s5) 0;padding:var(--s3) 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.partner-artikel h2{margin-bottom:var(--s2)}
.partner-artikel p{color:var(--grijs-tekst)}
.partner-artikel .partner-melding{font-size:15px;line-height:22px;margin-top:var(--s2)}
.partner-artikel .btn{margin-top:var(--s2)}

/* ---------- 10. Verwijzingen vooraf ---------- */
.verwijs-grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.verwijs{max-width:640px}
.verwijs h3{margin-bottom:var(--s1)}
.verwijs p{color:var(--grijs-tekst)}
.verwijs .verwijs-link{margin-top:var(--s2);color:var(--nacht)}

/* ---------- 10b. Begrippen, citeerbaar ---------- */
.begrippen{display:grid;grid-template-columns:1fr;gap:var(--s4);margin:0}
.begrip{max-width:640px}
.begrip dt{font-family:var(--display);font-weight:700;font-size:19px;line-height:26px;margin-bottom:var(--s1)}
.begrip dd{margin:0}
.begrip-bron{margin-top:var(--s1);font-size:13px;line-height:20px;color:var(--grijs-tekst)}
/* 10c. Uitkomstenlijst: dezelfde vorm als de begrippen, maar vijf lange teksten. Blijft
   op elke breedte één kolom, gescheiden door een lijn; de drie subvormen in een dd
   krijgen lucht zonder opsommingstekens. */
.uitkomsten-lijst .begrip dd ul{list-style:none;margin:var(--s2) 0;padding:0}
.uitkomsten-lijst .begrip dd li+li{margin-top:var(--s2)}
.uitkomsten-lijst .begrip+.begrip{border-top:1px solid var(--lijn);padding-top:var(--s4)}

/* ---------- 11. Tabellen ---------- */
.tabel-omhulsel{background:var(--wit);border:1px solid var(--lijn)}
table{width:100%;border-collapse:collapse;border-radius:0}
caption{text-align:left;font-size:14px;line-height:22px;color:var(--grijs-tekst);padding:var(--s2) 0}
th,td{padding:var(--s2);border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
thead th{font-family:var(--display);font-weight:700;font-size:19px;line-height:26px;border-bottom:1px solid var(--nacht)}
tbody th{font-weight:500;font-size:14px;line-height:22px;color:var(--grijs-tekst)}
tr:last-child th,tr:last-child td{border-bottom:0}
td{font-size:15px;line-height:24px}
td.getal{text-align:left}
td .mono,th .mono{white-space:nowrap}
.bron{margin-top:var(--s2);font-size:14px;line-height:22px;color:var(--grijs-tekst)}
.bron .mono{font-family:var(--mono);font-size:13px}

/* ---------- 11b. Modellentabel ---------- */
.product-showcase{background:var(--wit)}
.product-showcase-head{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.product-showcase-head .sectiekop{margin:0}
.product-peildatum{margin:0;font-size:13px;line-height:20px;color:var(--grijs-tekst)}
/* mobiel: rijgroepen, elke waarde met zijn kolomnaam ervoor */
.modellen{display:block}
.modellen thead{display:none}
.modellen tbody{display:block}
.modellen tbody tr{display:block;padding:var(--s3) var(--s2);border-bottom:1px solid var(--lijn)}
.modellen tbody tr:last-child{border-bottom:0}
.modellen tbody th{display:block;padding:0 0 var(--s2);border:0;font-family:var(--tekst);font-weight:500;font-size:16px;line-height:24px;color:var(--nacht)}
.model-naam{display:flex;align-items:flex-start;gap:var(--s2)}
.model-foto{flex:0 0 72px;width:72px;height:72px;object-fit:contain;display:block;padding:6px;background:var(--koelwit);border-radius:var(--radius)}
.model-tekst{display:flex;flex-direction:column;min-width:0}
.model-merk{font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--dal)}
.model-type{font-weight:500}
.model-link{display:flex;flex-direction:column;justify-content:center;min-height:48px;color:var(--nacht);text-decoration:none}
.model-link:hover .model-type{text-decoration:underline;text-underline-offset:3px}
/* Het pijltje maakt zichtbaar dat de modelnaam doorlinkt. In een tabel mag een link
   niet onderstreept zijn, dus dit is het enige rustpunt dat de link aankondigt. */
.model-pijl{width:16px;height:16px;flex:none;margin-left:6px;vertical-align:-2px;color:var(--grijs)}
.model-link:hover .model-pijl{color:var(--nacht)}
@media(min-width:768px){.model-naam:not(:has(.model-foto)){padding-left:104px}}
.model-extra{margin-top:var(--s-half);font-weight:400;font-size:13px;line-height:20px;color:var(--grijs-tekst)}
.modellen td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:var(--s-half) 0;border:0;font-size:15px;line-height:22px}
.modellen td::before{content:attr(data-kop);flex:0 0 auto;color:var(--grijs-tekst);font-size:12px;line-height:22px;text-transform:uppercase;letter-spacing:.08em}
.modellen td .waarde{display:flex;flex-direction:column;align-items:flex-end;min-width:0;text-align:right}
.modellen td .mono{font-weight:500;white-space:nowrap}
.prijs-noot{display:block;font-size:12px;line-height:16px;color:var(--grijs-tekst);font-weight:400}
.prijs-noot .was{text-decoration:line-through;text-decoration-thickness:1px;font-weight:400}
.ontbreekt{color:var(--grijs);font-size:13px;line-height:20px}
.bron-cel a{display:flex;align-items:center;min-height:48px;color:var(--nacht);text-decoration:none}
.prijs-noot time{white-space:nowrap}
.bron-cel a:hover{text-decoration:underline;text-underline-offset:3px}
.bron-cel .klein{display:block;font-size:12px;line-height:16px}
.product-disclaimer{max-width:760px;margin:var(--s3) 0 0;font-size:13px;line-height:20px;color:var(--grijs-tekst)}

/* ---------- 12. Artikelen ---------- */
.artikel-lead{max-width:640px}
.artikel-lead h3{font-size:24px;line-height:30px;margin:var(--s1) 0}
.artikel-lead p{color:var(--grijs-tekst)}
.artikel-lijst{margin-top:var(--s4);max-width:640px;border-top:1px solid var(--lijn)}
.artikel-regel{display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.artikel-regel:hover{background:var(--wit)}
.artikel-regel strong{display:block;font-family:var(--tekst);font-weight:500;font-size:17px;line-height:24px}
.artikel-regel .artikel-regel-tekst .klein{display:block;margin-top:var(--s-half)}
.artikel-regel-meta{flex:0 0 auto;text-align:right}
.artikel-regel-meta .klein{display:block}
.artikel-regel-meta .mono{display:block;font-size:13px;line-height:20px;color:var(--grijs-tekst)}

/* ---------- 13. Voet ---------- */
.disclosure{border-top:1px solid var(--lijn);padding:var(--s4) 0;color:var(--grijs-tekst);font-size:14px;line-height:22px}
.disclosure a{color:var(--nacht)}
footer.site{background:var(--nacht);color:var(--koelwit);padding:var(--s6) 0 var(--s4);margin-top:var(--s5)}
footer.site a{color:var(--wit)}
.voet-merk{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s5)}
.voet-merk .mark{width:32px;height:32px;flex:0 0 auto;display:block}
.voet-merk-tekst{display:flex;flex-direction:column}
.voet-woordmerk{font-family:var(--display);font-weight:700;font-size:20px;line-height:26px;letter-spacing:.02em;text-transform:uppercase;color:var(--wit)}
.voet-slogan{font-size:14px;line-height:22px;color:var(--koelwit)}
.voet-blok{margin-bottom:var(--s4);max-width:640px}
.voet-blok .label{color:var(--grijs-op-donker);background:transparent;padding:0}
.voet-blok p{margin-top:var(--s1);color:var(--koelwit)}
.voet-onder{border-top:1px solid var(--raster-donker);padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between;color:var(--grijs-op-donker);font-size:14px;line-height:22px}

/* ---------- 14. Desktop ---------- */
@media (min-width:768px){
  .wrap{padding:0 var(--s4)}
  .praktijk{max-width:760px}
  .pr-kolomgrafiek{display:block}
  .pr-grafiek{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .modellen{display:table;width:100%;table-layout:fixed;border-collapse:collapse}
  .modellen thead{display:table-header-group}
  .modellen tbody{display:table-row-group}
  .modellen tbody tr{display:table-row;padding:0}
  .modellen thead th{padding:var(--s2);font-family:var(--tekst);font-weight:500;font-size:14px;line-height:22px;color:var(--grijs-tekst);border-bottom:1px solid var(--nacht);vertical-align:bottom}
  .modellen thead th.getal{text-align:right}
  .modellen tbody th,.modellen td{display:table-cell;padding:var(--s2);border-bottom:1px solid var(--lijn);vertical-align:top}
  .modellen tbody tr:last-child th,.modellen tbody tr:last-child td{border-bottom:0}
  .modellen td::before{display:none}
  .modellen td .waarde{display:block;text-align:inherit}
  .modellen td.getal{text-align:right}
  .modellen th:first-child{width:34%}
  .modellen th:nth-child(2){width:12%}
  .modellen th:nth-child(3){width:13%}
  .modellen th:nth-child(4){width:12%}
  .modellen th:nth-child(5){width:14%}
  .modellen th:nth-child(6){width:15%}
  .model-foto{flex:0 0 88px;width:88px;height:88px}
  .model-variant th .model-naam{padding-left:calc(88px + var(--s2))}
}
@media (min-width:1024px){
  h1{font-size:56px;line-height:60px}
  h2{font-size:32px;line-height:38px}
  h3{font-size:21px;line-height:28px}
  .lede{font-size:20px;line-height:32px}
  .m1{font-size:36px;line-height:40px}
  .m4{font-size:12px}
  section{padding:var(--s7) 0}
  nav.links{display:flex;gap:var(--s3)}
  .nav-cta{display:inline-flex;min-height:40px;font-size:14px}
  .nav-toggle{display:none}
  header.site .nav{min-height:64px}

  .hero{padding:var(--s6) 0}
  .hero-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6);align-items:center}
  .hero-foto{margin:0}

  .check-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:start}
  .check-card{max-width:none}
  .check-zijkolom{border-left:1px solid var(--lijn);border-top:0;padding:0 0 0 var(--s4);margin-top:var(--s4)}
  .check-zijkolom p{color:var(--grijs-tekst);margin-top:var(--s1)}
  .check-zijkolom .m1{color:var(--nacht);display:block}

  .verwijs-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .verwijs + .verwijs{border-left:1px solid var(--lijn);padding-left:var(--s6)}
  .begrippen{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .begrip + .begrip{border-left:1px solid var(--lijn);padding-left:var(--s6)}
  .begrippen.uitkomsten-lijst{grid-template-columns:1fr;gap:var(--s4)}
  .uitkomsten-lijst .begrip+.begrip{border-left:0;padding-left:0}

  .artikel-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:start}
  .artikel-lijst{margin-top:0}
  .voet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .voet-blok{margin-bottom:0}
}

@media (min-width:1024px){
  .beeldsectie{padding:var(--s6) 0}
  .dagbeeld-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:start}
  .dagbeeld-grid .praktijk{max-width:none}
  .dagbeeld-grid .pr-check{margin-top:0;padding:0 0 0 var(--s4);border-top:0;border-left:1px solid var(--raster-donker);max-width:none}
}

/* praktijksectie op smalle schermen */
@media (max-width:560px){
  .pr-kern-getal{font-size:28px;line-height:34px}
  .check-result.active{padding:var(--s3) var(--s2)}
}


/* ---------- 15. Beweging uit ---------- */
@media (prefers-reduced-motion:reduce){
  .check-progress-bar{transition:none}
  *{scroll-behavior:auto}
}


/* ---------- 16. Artikelpagina's ---------- */
.artikel{padding:var(--s5) 0 var(--s6)}
.artikel-kolom{max-width:calc(680px + 2*var(--s2))}
.artikel h1{font-family:var(--display);font-weight:700;font-size:30px;line-height:34px;letter-spacing:-.015em;margin:var(--s2) 0 var(--s3)}
.artikel h2{font-family:var(--display);font-weight:700;font-size:22px;line-height:28px;margin:var(--s5) 0 var(--s2)}
.artikel h3{font-family:var(--tekst);font-weight:500;font-size:18px;line-height:26px;margin:var(--s4) 0 var(--s1)}
.artikel h4{font-family:var(--tekst);font-weight:500;font-size:16px;line-height:24px;margin:var(--s3) 0 var(--s1)}
.artikel p{margin:0 0 var(--s3);max-width:680px}
.artikel .lede{font-size:18px;line-height:28px;color:var(--grijs-tekst);margin-bottom:var(--s4)}
.artikel ul,.artikel ol{margin:0 0 var(--s3) 0;padding-left:var(--s3);max-width:680px}
.artikel ul{list-style:none;padding-left:0}
.artikel ul li{position:relative;padding-left:var(--s3);margin-bottom:var(--s1)}
.artikel ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--grijs)}
.artikel ol{list-style:decimal}
.artikel ol li{margin-bottom:var(--s1)}
.artikel li{line-height:26px}
/* links: onderstrepen alleen in lopende tekst, niet in koppen, tabellen, bronblokken en knoppen */
.artikel a{color:var(--nacht);text-decoration:none}
.artikel p a,.artikel li a,.artikel .disclosure-line a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.artikel h1 a,.artikel h2 a,.artikel h3 a,.artikel h4 a,.artikel table a,.artikel .btn,.artikel .sources a,.artikel .bronnen a,.artikel .verantwoording a{text-decoration:none}
.artikel h1 a:hover,.artikel h2 a:hover,.artikel h3 a:hover,.artikel h4 a:hover,.artikel table a:hover,.artikel .sources a:hover,.artikel .bronnen a:hover,.artikel .verantwoording a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.artikel strong{font-weight:500}
.artikel .eyebrow{font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs-tekst);margin:0 0 var(--s1)}
.artikel .eyebrow svg{display:none}
.artikel .artikel-kolom > .eyebrow{color:var(--dal)}
.artikel .artikel-meta{display:flex;flex-wrap:wrap;gap:var(--s-half) var(--s2);margin:0 0 var(--s4);padding:var(--s2) 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);font-size:13px;line-height:20px;color:var(--grijs-tekst);max-width:680px}
.artikel .artikel-meta .auteur{font-weight:500;color:var(--nacht)}
.artikel .artikel-meta time{font-variant-numeric:tabular-nums lining-nums;color:var(--nacht)}
.artikel .artikel-meta + .disclosure-line{border-top:0;margin-top:calc(-1 * var(--s4))}
.artikel .inhoud{margin:0 0 var(--s5);padding:var(--s2) 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);max-width:680px}
.artikel .inhoud .eyebrow{margin-bottom:var(--s1)}
.artikel .inhoud ol{list-style:none;margin:0;padding:0}
.artikel .inhoud li{margin:0;padding:var(--s-half) 0;font-size:15px;line-height:22px}
.artikel .inhoud li a{text-decoration:none;color:var(--nacht)}
.artikel .inhoud li a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.artikel .meta-date{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:13px;line-height:20px;color:var(--grijs-tekst);margin-bottom:var(--s3)}
.artikel .disclosure-line{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:var(--s2) 0;margin-bottom:var(--s4);font-size:14px;line-height:22px;color:var(--grijs-tekst)}
.artikel .summary-box,.artikel .highlight,.artikel .callout,.artikel .note,.artikel .notice{background:var(--wit);border:1px solid var(--lijn);border-left:4px solid var(--dal);border-radius:var(--radius);padding:var(--s3);margin:0 0 var(--s4);max-width:680px}
.artikel .summary-box .eyebrow,.artikel .highlight .eyebrow,.artikel .notice .eyebrow{margin-bottom:var(--s1)}
.artikel .summary-box h2{margin-top:0}
.artikel .summary-box ul,.artikel .highlight ul,.artikel .notice ul{margin-bottom:0}
.artikel .summary-box p:last-child,.artikel .highlight p:last-child,.artikel .notice p:last-child{margin-bottom:0}
.artikel table{width:100%;max-width:680px;border-collapse:collapse;margin:0 0 var(--s4);background:var(--wit);border:1px solid var(--lijn)}
.artikel th,.artikel td{padding:var(--s2);border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top;font-size:15px;line-height:24px}
.artikel thead th{font-family:var(--tekst);font-weight:500;border-bottom:1px solid var(--nacht)}
.artikel tbody th{font-family:var(--tekst);font-weight:400;color:var(--grijs-tekst)}
.artikel tr:last-child th,.artikel tr:last-child td{border-bottom:0}
.artikel .sources,.artikel .bronnen,.artikel .verantwoording{font-size:14px;line-height:22px;color:var(--grijs-tekst)}
.artikel img{border-radius:var(--radius)}
.artikel .btn{margin-bottom:var(--s3)}
.artikel .card,.artikel .cards,.artikel .product-card{background:none;border:0;box-shadow:none;padding:0}
/* artikeloverzicht als hub: één hoofdartikel, de rest als rustige regels */
.artikel .hub{margin-top:var(--s4);max-width:680px}
.artikel .hub-item{padding:var(--s3) 0;border-top:1px solid var(--lijn)}
.artikel .hub-item--lead{border-top:4px solid var(--nacht)}
.artikel .hub-item h2{margin:var(--s1) 0 var(--s1);font-size:20px;line-height:26px}
.artikel .hub-item--lead h2{font-size:26px;line-height:32px}
.artikel .hub-kern{margin:0 0 var(--s1)}
.artikel .hub-meta{margin:0;font-size:13px;line-height:20px;color:var(--grijs-tekst)}
.artikel .hub-meta time{font-variant-numeric:tabular-nums lining-nums}
.overzicht-lead{border-top:4px solid var(--nacht);padding-top:var(--s3);margin-top:var(--s4)}
.overzicht-lead h2{font-size:24px;line-height:30px;margin:var(--s1) 0}
.overzicht-lead p{color:var(--grijs-tekst)}
@media (min-width:1024px){
  .artikel h1{font-size:40px;line-height:46px}
  .artikel h2{font-size:26px;line-height:32px}
}
@media (min-width:768px){
  .artikel .inhoud ol{columns:2;column-gap:var(--s4)}
  .artikel .inhoud li{break-inside:avoid}
}

/* artikeltabellen op mobiel: rijgroepen via het bestaande data-th-attribuut */
@media (max-width:767px){
  .artikel table,.artikel tbody,.artikel tr,.artikel td{display:block;width:100%}
  /* verberg alleen de kopregel. Dit stond tot 11 september 2026 als
     `table tr:first-child`, en dat trof naast de kopregel ook de eerste rij van
     de tbody, want die is eveneens het eerste kind van zijn ouder. Daardoor viel
     op mobiel steeds de eerste datarij weg. */
  .artikel thead tr{display:none}
  .artikel tr{border-bottom:1px solid var(--lijn);padding:var(--s2)}
  .artikel tbody tr:last-child{border-bottom:0}
  .artikel tbody th,.artikel tr > th[scope="row"]{display:block;padding:0 0 var(--s1);border:0;font-weight:500;color:var(--nacht)}
  .artikel td{padding:0 0 var(--s1);border:0}
  .artikel td[data-th]::before{content:attr(data-th);display:block;font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs-tekst)}
  .artikel td:last-child{padding-bottom:0}
}

/* ---------- 17. Uitlegtekeningen en kernzinnen in artikelen ---------- */
.artikel .uitleg{margin:0 0 var(--s4);max-width:680px;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:var(--s3)}
.artikel .uitleg svg{display:block;width:100%;height:auto}
.artikel .uitleg figcaption{margin-top:var(--s2);font-size:13px;line-height:20px;color:var(--grijs-tekst)}
.u-kop{font-family:var(--tekst);font-weight:500;font-size:15px;fill:var(--nacht)}
.u-tekst{font-family:var(--tekst);font-size:14px;fill:var(--nacht)}
.u-sub{font-family:var(--tekst);font-size:12px;fill:var(--grijs-tekst)}
.u-groot{font-family:var(--tekst);font-weight:500;font-size:30px;fill:var(--nacht)}
.u-kop-licht{font-family:var(--tekst);font-weight:500;font-size:15px;fill:var(--wit)}
.u-sub-licht{font-family:var(--tekst);font-size:12px;fill:var(--grijs-op-donker)}
.u-vlak{fill:var(--wit);stroke:var(--nacht);stroke-width:1.5}
.u-dal{fill:var(--dal)}
.u-nacht{fill:var(--nacht)}
.u-stippel{fill:none;stroke:var(--grijs);stroke-width:1.5;stroke-dasharray:4 4}
.u-pijl{stroke:var(--grijs);stroke-width:1.5;fill:none}
.u-pijlpunt{fill:var(--grijs)}
.u-as{stroke:var(--grijs);stroke-width:1}
.artikel .kernzin{font-family:var(--display);font-weight:700;font-size:26px;line-height:32px;letter-spacing:-.01em;color:var(--nacht);margin:var(--s5) 0;max-width:640px}
@media (min-width:1024px){
  .artikel .kernzin{font-size:30px;line-height:36px}
}
/* smalle schermen: de tekening behoudt zijn leesbare maat en schuift binnen het kader */
@media (max-width:600px){
  .artikel .uitleg{overflow-x:auto;padding:var(--s2)}
  .artikel .uitleg svg{min-width:560px}
}

/* Compacte vergelijking en duidelijke vervolgstap, september 2026. */
.modellen td[data-kop="Prijs fabrikant"] > .waarde > .mono{font-size:18px;line-height:24px}
.check-result .result-actions + .result-doorslag{margin-top:32px}
@media(max-width:767px){
  .modellen td{padding:4px 0}
  .bron-cel a{font-size:13px}
}