/* ============================================================================
   wattradar — designsysteem (redesign 2026)
   ============================================================================
   Eén stylesheet voor de app (index.html) én de losse pagina's (over,
   privacy, voorwaarden, artikelen). Apart bestand, want hij wordt op achttien
   routes hergebruikt: inline zou dezelfde 30 kB op elke navigatie opnieuw over
   de lijn gaan. De service worker haalt css netwerk-eerst op, zodat een nieuwe
   opmaak terugkerende bezoekers meteen bereikt.

   Uitgangspunten (docs/UX_REDESIGN.md):
   - Het antwoord is het belangrijkste element op elke pagina. Getallen groot,
     ruimte eromheen, de rest ondergeschikt.
   - Rustig en volwassen: weinig vlakken met rand, nauwelijks schaduw, geen
     dashboard vol losse tegels. Een card is een zelfstandige eenheid, geen
     standaardverpakking.
   - Kleur is nooit de enige drager. Elke status heeft ook tekst, vorm of icoon.
   - Alle contrastwaarden zijn narekend tegen WCAG 2.2 AA, niet geschat.

   Structuur van dit bestand:
     1. tokens (kleur, ruimte, radius, typografie)
     2. reset en basistypografie
     3. layout-primitives
     4. app-schil: header, hoofdmenu, tabbar, sheet
     5. componenten
     6. datavisualisatie
     7. formulieren
     8. rekentool-schil
     9. resultaten en vertrouwen
    10. commercie
    11. voettekst en losse pagina's
   ========================================================================= */

/* ── 1. tokens ───────────────────────────────────────────────────────────── */

/* Merkletter: Space Grotesk (SIL OFL), zelf gehost — variabel 300–700,
   latin-subset, 22 kB. Alleen voor koppen en kerngetallen; broodtekst blijft
   systeemsans. Geen externe fontrequest: snelheid en privacy wegen zwaarder
   dan een tweede letter. */
@font-face {
  font-family: "Space Grotesk";
  src: url("space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Vlakken. Warm off-white in plaats van koel grijsblauw: rustiger op een
     scherm waar de hele dag cijfers op staan. */
  --page:        #F6F5F1;
  --surface:     #FFFFFF;
  --surface-2:   #F1F0EB;
  --surface-3:   #E6E4DD;

  /* Tekst. Diep blauwgroen in plaats van zwart — leest zachter en hoort bij
     het merk. Alle drie halen AA op page én surface. */
  --ink:         #0E1C1B;
  --ink-2:       #4C5B5A;
  --ink-3:       #5F6C6B;

  /* Lijnen. Haarlijnen die scheiden zonder te hokken. */
  --line:        #E3E1D9;
  --grid:        #EAE8E1;
  --axis:        #BFC5C2;

  /* Merk: volwassen diepteal. Radar, geen milieugroen. */
  --brand:       #0B6B68;
  --on-brand:    #FFFFFF;   /* 6,3:1 op de merkkleur */
  --brand-soft:  #E3F0EF;
  --brand-line:  #9CC7C5;

  /* Signaal: het warme accent dat wattradar altijd al had. Alleen voor "nu",
     live en de radarveeg — nooit als tweede merkkleur over de hele pagina. */
  --signal:      #B4531A;
  --signal-soft: #FBEDE2;

  /* Status. Elk paar is tekstveilig (AA op surface) plus een zacht vlak. */
  --positive:      #1F7A3D;
  --positive-soft: #E4F2E8;
  --warning:       #8A5A00;
  --warning-soft:  #FBF0DC;
  --negative:      #B3352F;
  --negative-soft: #FAE8E6;
  --info:          #235E96;
  --info-soft:     #E4EDF7;

  /* Data. Eén serie, één kleur: bij één reeks bestaat er geen
     kleurverwarring. De prijs zit in de hoogte, nooit in de tint. */
  --series:      #2F6E8F;
  --series-soft: #DDE8EE;

  --glass:  rgba(246, 245, 241, .82);
  --shadow: 0 1px 2px rgba(14, 28, 27, .04), 0 14px 34px -26px rgba(14, 28, 27, .28);
  --shadow-lift: 0 2px 6px rgba(14, 28, 27, .07), 0 20px 44px -28px rgba(14, 28, 27, .35);

  /* Ruimte: één schaal, zodat marges niet per component opnieuw verzonnen
     worden. */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;

  --r:   14px;   /* card */
  --r-s: 10px;   /* veld, tegel */
  --r-l: 20px;   /* sheet, groot vlak */

  --maxw-app:   1160px;  /* rekenwerk, grafieken, tabellen */
  --maxw-prose:   68ch;  /* lopende tekst — nooit schermbreed */

  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --disp: "Space Grotesk", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", "Roboto Mono", monospace;

  --hdr: 56px;   /* hoogte van de plakkende header */
}

/* Donker: dezelfde rollen, andere waarden. Nooit een kleur die alléén hier
   bestaat — dan valt hij in licht stilzwijgend terug op erfelijkheid. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:        #0B1413;
    --surface:     #111C1B;
    --surface-2:   #172322;
    --surface-3:   #1F2D2C;
    --ink:         #EDF2F1;
    --ink-2:       #B3C2C0;
    --ink-3:       #8A9998;
    --line:        #1F2D2C;
    --grid:        #1C2928;
    --axis:        #3A4948;
    --brand:       #4FBFB8;
    --on-brand:    #0B1413;   /* 8,4:1 op de merkkleur */
    --brand-soft:  #102E2D;
    --brand-line:  #2B6B68;
    --signal:      #E08B4E;
    --signal-soft: #2C1B10;
    --positive:      #5CC47B;
    --positive-soft: #102A19;
    --warning:       #E0A93B;
    --warning-soft:  #2C2210;
    --negative:      #F0736B;
    --negative-soft: #2E1513;
    --info:          #6FAEE6;
    --info-soft:     #10233A;
    --series:      #6BA6C6;
    --series-soft: #162934;
    --glass:  rgba(11, 20, 19, .8);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -28px rgba(0, 0, 0, .9);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, .55), 0 22px 48px -28px rgba(0, 0, 0, .95);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:        #0B1413;
  --surface:     #111C1B;
  --surface-2:   #172322;
  --surface-3:   #1F2D2C;
  --ink:         #EDF2F1;
  --ink-2:       #B3C2C0;
  --ink-3:       #8A9998;
  --line:        #1F2D2C;
  --grid:        #1C2928;
  --axis:        #3A4948;
  --brand:       #4FBFB8;
  --on-brand:    #0B1413;   /* 8,4:1 op de merkkleur */
  --brand-soft:  #102E2D;
  --brand-line:  #2B6B68;
  --signal:      #E08B4E;
  --signal-soft: #2C1B10;
  --positive:      #5CC47B;
  --positive-soft: #102A19;
  --warning:       #E0A93B;
  --warning-soft:  #2C2210;
  --negative:      #F0736B;
  --negative-soft: #2E1513;
  --info:          #6FAEE6;
  --info-soft:     #10233A;
  --series:      #6BA6C6;
  --series-soft: #162934;
  --glass:  rgba(11, 20, 19, .8);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -28px rgba(0, 0, 0, .9);
  --shadow-lift: 0 2px 8px rgba(0, 0, 0, .55), 0 22px 48px -28px rgba(0, 0, 0, .95);
}

/* De oude tokennamen blijven bestaan zolang er markup is die ze noemt. Zo kan
   de opmaak in één keer om zonder dat elke inline style meteen mee moet. */
:root, :root[data-theme="dark"] {
  --good: var(--positive);
  --good-soft: var(--positive-soft);
  --warn: var(--warning);
  --crit: var(--negative);
  --crit-soft: var(--negative-soft);
  --font-size-base: 16px;
}

/* ── 2. reset en basistypografie ─────────────────────────────────────────── */

* { box-sizing: border-box; }
html { scrollbar-color: var(--axis) transparent; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Typografische schaal. Koppen in de merkletter, tekst in systeemsans; de
   sprongen zijn groot genoeg om hiërarchie te dragen zonder te schreeuwen. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.35rem); letter-spacing: -.026em; }
h2 { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.4rem); }
h3 { font-size: 1.02rem; }
h4 { font-size: .92rem; }
p  { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--brand-soft); color: var(--ink); }

/* Getallen die onder elkaar staan moeten uitlijnen; anders danst een tabel. */
.num, .tab { font-variant-numeric: tabular-nums; }
.num { font-family: var(--mono); }
.mut { color: var(--ink-3); }
.sec { color: var(--ink-2); }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Elk aanraakdoel minimaal 44×44. Geen uitzonderingen op mobiel. */
@media (pointer: coarse) {
  button, [role="button"], .seg button, .tabbar button, .iconbtn {
    min-height: 44px;
  }
}

/* ── 3. layout-primitives ────────────────────────────────────────────────── */

/* Container: het brede raster voor rekenwerk, grafieken en tabellen. */
.wrap {
  width: 100%;
  max-width: var(--maxw-app);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 1.75rem);
}

/* Leeskolom: lopende tekst loopt nooit over de volle schermbreedte. */
.prose { max-width: var(--maxw-prose); }
.prose h2 { margin-top: var(--s-6); margin-bottom: var(--s-2); }
.prose h3 { margin-top: var(--s-5); margin-bottom: var(--s-1); }
.prose p, .prose ul, .prose ol { color: var(--ink-2); }
.prose li { margin-bottom: .3rem; }

/* Verticale ritmes. `.stack` zet één afstand tussen broers en zussen, zodat
   marges niet per element opnieuw bevochten worden. */
.stack > * + * { margin-top: var(--s-4); }
.stack-s > * + * { margin-top: var(--s-2); }
.stack-l > * + * { margin-top: var(--s-6); }

/* Sectie: het ademende blok waar de meeste pagina's uit bestaan. Bewust géén
   card — niet alles hoeft een tegel te zijn. */
.section { padding-block: clamp(1.6rem, 4vw, 2.8rem); }
.section + .section { border-top: 1px solid var(--line); }
.section > .sectionhead { margin-bottom: var(--s-4); }
.sectionhead h2 { margin-bottom: .2rem; }
.sectionhead p { color: var(--ink-3); font-size: .88rem; margin: 0; max-width: 58ch; }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.eyebrow {
  font-size: .69rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 750;
  margin: 0 0 .3rem;
}
.pagetitle { margin: .1rem 0 .6rem; }
.lead { font-size: 1.02rem; color: var(--ink-2); max-width: 62ch; }

/* ── 4. app-schil ────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  min-height: var(--hdr);
}
.top .bar {
  display: flex; align-items: center; gap: .6rem;
  min-height: var(--hdr);
}
.brandmark { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; flex: none; }
.brandmark svg { display: block; color: var(--brand); }
.brandmark .sweep { transform-origin: 13px 13px; animation: sweep 7s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.brandmark b { font-family: var(--disp); font-size: 1.14rem; font-weight: 700; letter-spacing: -.028em; }
.brandmark b i { font-style: normal; color: var(--brand); }
.top .spacer { flex: 1; }

/* Hoofdmenu op desktop: vier ingangen, geen lijst van alle rekentools. */
.mainnav { display: none; }
@media (min-width: 900px) {
  .mainnav { display: flex; align-items: center; gap: .1rem; }
  .mainnav > * { position: relative; }
  .mainnav .navbtn {
    font: inherit; font-size: .92rem; font-weight: 600;
    background: transparent; border: 0; border-radius: 9px;
    color: var(--ink-2); padding: .45rem .7rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: .3rem;
    text-decoration: none;
  }
  .mainnav .navbtn:hover { background: var(--surface-2); color: var(--ink); }
  .mainnav .navbtn[aria-expanded="true"],
  .mainnav .navbtn[aria-current="true"] { color: var(--brand); background: var(--brand-soft); }
  .mainnav .navbtn svg { opacity: .7; transition: transform .15s; }
  .mainnav .navbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
}

/* Uitklap onder een hoofdmenu-ingang: compact, geen mega-menu vol kolommen. */
.navpanel {
  position: absolute; top: calc(100% + .4rem); left: 0; z-index: 45;
  min-width: 300px; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lift);
}
.navpanel[hidden] { display: none; }
.navpanel a {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .55rem; border-radius: var(--r-s);
  color: var(--ink); text-decoration: none;
}
.navpanel a:hover { background: var(--surface-2); }
.navpanel a b { display: block; font-size: .9rem; font-weight: 640; }
.navpanel a span { display: block; font-size: .77rem; color: var(--ink-3); line-height: 1.4; }
.navpanel .ic { color: var(--brand); flex: none; margin-top: .15rem; }

/* Live-indicator: de radarveeg als merkdetail, niet als decoratie. */
.snap {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 550; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: .28rem .7rem; border-radius: 999px; white-space: nowrap;
}
.snap::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--positive); box-shadow: 0 0 0 3px var(--positive-soft);
}
@media (max-width: 1100px) { .snap { display: none; } }

.iconbtn {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.iconbtn[aria-current="true"] { color: var(--brand); border-color: var(--brand-line); }
/* De belknop is de snelkoppeling voor wie geen hoofdmenu heeft; op desktop
   staat het prijsalarm gewoon onder Vandaag. */
.bell { display: grid; }
@media (min-width: 900px) { .bell { display: none; } }

#themeBtn .moon { display: none; }
#themeBtn .sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #themeBtn .moon { display: block; }
  :root:not([data-theme="light"]) #themeBtn .sun { display: none; }
}
:root[data-theme="dark"] #themeBtn .moon { display: block; }
:root[data-theme="dark"] #themeBtn .sun { display: none; }
:root[data-theme="light"] #themeBtn .moon { display: none !important; }
:root[data-theme="light"] #themeBtn .sun { display: block !important; }

/* De schil: inhoud met een advertentiekolom vanaf zeer breed. Geen linkerrail
   meer — de vier ingangen staan in de header, en dat scheelt een kolom die op
   elk scherm meelas. */
.shell { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1320px) { .shell { grid-template-columns: minmax(0, 1fr) 320px; } }
main { min-width: 0; padding-top: clamp(1rem, 2.5vw, 1.7rem); padding-bottom: 5.5rem; }
@media (min-width: 900px) { main { padding-bottom: 3rem; } }
aside { display: none; }
@media (min-width: 1320px) {
  aside { display: block; padding: 1.7rem 1.7rem 3rem 0; }
  aside .sticky { position: sticky; top: calc(var(--hdr) + 1rem); display: flex; flex-direction: column; gap: 1rem; }
}

/* Mobiele navigatie: vier duimbereikbare ingangen, onderaan. */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 900px) { .tabbar { display: none; } }
.tabbar button {
  position: relative; font: inherit; font-size: .68rem; font-weight: 620;
  background: transparent; border: 0; color: var(--ink-3);
  padding: .5rem .2rem .55rem; display: flex; flex-direction: column;
  align-items: center; gap: .22rem; cursor: pointer;
}
.tabbar button[aria-current="true"], .tabbar button.isactive { color: var(--brand); }
.tabbar button[aria-current="true"]::before, .tabbar button.isactive::before {
  content: ""; position: absolute; top: 0; width: 28px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--brand);
}

.sheetback {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(5, 10, 10, .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sheet {
  position: fixed; left: .6rem; right: .6rem; z-index: 59;
  bottom: calc(.6rem + env(safe-area-inset-bottom, 0));
  max-width: 460px; margin: 0 auto;
  max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); box-shadow: var(--shadow-lift); padding: .55rem .55rem .8rem;
}
.sheet:not([hidden]) { animation: sheetup .22s ease-out; }
@keyframes sheetup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sheet .grab { width: 36px; height: 4px; border-radius: 4px; background: var(--surface-3); margin: .35rem auto .55rem; }
.sheet .sheettitel {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; padding: .7rem .65rem .25rem;
}
.sheet .row {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  font: inherit; text-align: left; background: transparent; border: 0;
  padding: .55rem .65rem; border-radius: 12px; color: var(--ink); cursor: pointer;
  text-decoration: none;
}
.sheet .row:hover { background: var(--surface-2); }
.sheet .row .ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
}
.sheet .row b { display: block; font-size: .93rem; font-weight: 650; }
.sheet .row span { display: block; font-size: .76rem; color: var(--ink-3); line-height: 1.4; }
.sheet .sheetlinks {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .7rem .65rem 0;
  border-top: 1px solid var(--line); margin-top: .5rem; font-size: .78rem;
}
.sheet .sheetlinks a { color: var(--ink-3); text-decoration: none; }
.sheet .sheetlinks a:hover { color: var(--ink); text-decoration: underline; }

/* Schermwissel. Alleen de actieve sectie staat aan. */
.view { display: none; }
.view.on { display: block; }

@media (prefers-reduced-motion: reduce) {
  .sheet:not([hidden]), .brandmark .sweep, .pulse { animation: none !important; }
  * { transition: none !important; }
}

/* ── 5. componenten ──────────────────────────────────────────────────────── */

/* Card: alleen waar informatie echt een zelfstandige eenheid is. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.card.lift { box-shadow: var(--shadow); }
.card + .card { margin-top: var(--s-4); }
.pad { padding: clamp(1rem, 2.2vw, 1.5rem); }
.cardhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .35rem; flex-wrap: wrap;
}
.cardhead h2 { font-size: 1.06rem; }
.cardhead h3 { font-size: .96rem; }
.cardhead p { font-size: .82rem; color: var(--ink-3); margin: .15rem 0 0; }

/* Knoppen. Eén primaire vorm, twee ondergeschikte. Geen pil van 60 pixels
   hoog: dit is gereedschap, geen landingspagina. */
.btn {
  font: inherit; font-size: .89rem; font-weight: 660;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--brand); color: var(--on-brand);
  border: 1px solid transparent; border-radius: 10px;
  padding: .62rem 1.15rem; cursor: pointer; text-decoration: none;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .65; cursor: default; filter: none; transform: none; }
.btn.done { background: var(--positive); color: var(--on-brand); }
.btn.done:disabled { opacity: 1; }
.btn.klein { font-size: .81rem; padding: .42rem .85rem; }
.btn.groot { font-size: .96rem; padding: .78rem 1.5rem; }
.btn.ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--brand-line);
}
.btn.ghost:hover { background: var(--brand-soft); }
.btn.ghost.done { background: var(--positive); color: var(--on-brand); border-color: transparent; }
.btn.stil { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn.stil:hover { background: var(--surface-2); color: var(--ink); }

.linkbtn {
  font: inherit; font-size: .84rem; font-weight: 640;
  background: transparent; border: 0; color: var(--brand); cursor: pointer;
  padding: .2rem 0; text-decoration: underline; text-underline-offset: 2px;
}
.linkbtn:hover { text-decoration-thickness: 2px; }

/* Statusbadge: kleur plus woord plus vorm. Nooit alleen kleur. */
.statusbadge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 650; line-height: 1.3;
  padding: .28rem .7rem .28rem .55rem; border-radius: 999px;
  border: 1px solid currentColor;
}
.statusbadge svg { flex: none; }
.statusbadge.is-positive  { color: var(--positive); background: var(--positive-soft); }
.statusbadge.is-attention { color: var(--warning);  background: var(--warning-soft); }
.statusbadge.is-negative  { color: var(--negative); background: var(--negative-soft); }
.statusbadge.is-info      { color: var(--info);     background: var(--info-soft); }
.statusbadge.is-nodata    { color: var(--ink-3);    background: var(--surface-2); }

/* De oude naam blijft werken zolang er markup is die hem noemt. */
.statuspill { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem;
  font-size: .83rem; font-weight: 650; padding: .28rem .7rem .28rem .55rem;
  border-radius: 999px; border: 1px solid currentColor; }
.statuspill svg { flex: none; }
.st-good { color: var(--positive); background: var(--positive-soft); }
.st-mid  { color: var(--info);     background: var(--info-soft); }
.st-crit { color: var(--negative); background: var(--negative-soft); }

/* Metric / MetricGrid: kleine cijfers naast het grote antwoord. */
.minigrid, .metricgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr));
  gap: .55rem; margin: 0;
}
.minigrid > div, .metric {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: .65rem .75rem; min-width: 0;
}
.minigrid dt, .metric .label {
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.minigrid dd, .metric .value {
  margin: .2rem 0 0; font-family: var(--disp); font-size: 1.2rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink);
}
.metric .note { font-size: .72rem; color: var(--ink-3); margin-top: .15rem; }

/* Een tegel die ergens heen gaat moet er ook zo uitzien: het hele vlak is het
   klikdoel, het label krijgt een chevron, de rand licht op. */
.minigrid > div.klik { position: relative; }
.minigrid > div.klik dd a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.minigrid > div.klik dd a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-s); }
.minigrid > div.klik dt::after { content: " ›"; color: var(--brand); font-weight: 700; }
.minigrid > div.klik:hover { border-color: var(--brand-line); cursor: pointer; }
.minigrid > div.klik:hover dd a { text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.minigrid > div.klik:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Notitie / Alert: een regel context, geen banner. */
.notice {
  border-left: 3px solid var(--info); background: var(--surface-2);
  padding: .75rem .95rem; border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: .86rem; color: var(--ink-2);
}
.notice b { color: var(--ink); }
.notice.mark { border-left-color: var(--signal); }
.notice.is-positive { border-left-color: var(--positive); background: var(--positive-soft); }
.notice.is-attention { border-left-color: var(--warning); background: var(--warning-soft); }
.notice.is-negative { border-left-color: var(--negative); background: var(--negative-soft); }

/* Uitklapbare verdieping: methodologie, bronnen, geavanceerde instellingen.
   Belangrijke inhoud staat in de HTML — dicht is niet weg. */
details.uitklap {
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); margin-top: var(--s-3);
}
details.uitklap > summary {
  cursor: pointer; list-style: none; padding: .7rem .9rem;
  font-size: .87rem; font-weight: 640; color: var(--ink);
  display: flex; align-items: center; gap: .5rem;
}
details.uitklap > summary::-webkit-details-marker { display: none; }
details.uitklap > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
details.uitklap[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.uitklap[open] > summary { border-bottom: 1px solid var(--line); }
details.uitklap .inhoud { padding: .9rem; font-size: .88rem; color: var(--ink-2); }
details.uitklap .inhoud > :last-child { margin-bottom: 0; }

/* ── 6. datavisualisatie ─────────────────────────────────────────────────── */

.chartscroll { margin: 0; }
@media (max-width: 760px) {
  .chartscroll {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    margin: 0 -0.2rem; padding: 0 .2rem;
  }
  .chartscroll .chartbox { min-width: 620px; }
  .chartscroll::-webkit-scrollbar { height: 8px; }
  .chartscroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
}
.chartbox { position: relative; }
.chartbox canvas { display: block; width: 100%; touch-action: pan-y; }
.tip {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -100%);
  background: var(--ink); color: var(--page); border-radius: 9px; padding: .5rem .65rem;
  font-size: .78rem; line-height: 1.35; white-space: nowrap; z-index: 5;
  box-shadow: var(--shadow); transition: opacity .1s;
}
.tip b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .87rem; display: block; }
.keys { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; margin-top: .7rem; font-size: .76rem; color: var(--ink-2); }
.keys span { display: inline-flex; align-items: center; gap: .4rem; }
.kbar { width: 11px; height: 11px; border-radius: 3px; background: var(--series); flex: none; }
.know { width: 2px; height: 13px; background: var(--signal); flex: none; }
.kwin { width: 13px; height: 11px; border-radius: 3px; background: var(--positive-soft); border: 1px solid var(--positive); flex: none; }

/* Tabellen. Op mobiel mag een brede tabel schuiven, maar nooit de pagina. */
.tablewrap {
  overflow-x: auto; margin-top: .8rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  scrollbar-width: thin;
}
/* Wie horizontaal schuift moet blijven zien over wélke rij het gaat: de eerste
   kolom (leverancier, uur) blijft staan. Alleen waar het echt schuift. */
@media (max-width: 760px) {
  .tablewrap table.data th:first-child,
  .tablewrap table.data td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }
  .tablewrap table.data thead th:first-child { background: var(--surface-2); z-index: 3; }
  .tablewrap table.data tbody tr:hover td:first-child,
  .tablewrap table.data tr.isnow td:first-child { background: var(--surface-2); }
  .tablewrap::after {
    content: "veeg opzij voor de rest van de tabel";
    display: block; position: sticky; left: 0;
    padding: .35rem .65rem; font-size: .72rem; color: var(--ink-3);
    border-top: 1px solid var(--line); background: var(--surface-2);
  }
}
table.data { border-collapse: collapse; width: 100%; font-size: .85rem; min-width: 420px; }
table.data th, table.data td { padding: .5rem .65rem; border-bottom: 1px solid var(--line); text-align: left; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data thead th {
  background: var(--surface-2); font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
  position: sticky; top: 0; z-index: 1;
}
table.data tbody tr:hover td { background: var(--surface-2); }
table.data td.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.data tr.isnow td { background: var(--signal-soft); font-weight: 650; }

/* ── 7. formulieren ──────────────────────────────────────────────────────── */

.fields { display: grid; gap: 1rem 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.f { display: flex; flex-direction: column; gap: .32rem; min-width: 0; }
.f[hidden] { display: none; }
.f label {
  font-size: .82rem; font-weight: 620; color: var(--ink-2);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .2rem .6rem; align-items: baseline;
}
.f label output {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .76rem; font-weight: 650; color: var(--brand);
  background: var(--brand-soft); padding: .08rem .55rem; border-radius: 999px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.f label output:empty { display: none; }
.f .hint { font-size: .74rem; color: var(--ink-3); line-height: 1.45; }

.f input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px;
  background: transparent; cursor: pointer; margin: 0; accent-color: var(--brand);
}
.f input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--surface-3); }
.f input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; margin-top: -8px;
  background: var(--brand); border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.f input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-3); }
.f input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* Een wit veld op een witte kaart met een haarlijntje eromheen ziet niemand. */
.f input[type=number], .f input[type=text], .f input[type=email], .f input[type=tel], .f select {
  font: inherit; font-family: var(--mono); font-variant-numeric: tabular-nums;
  background: var(--surface-2); border: 1.5px solid var(--axis); border-radius: var(--r-s);
  padding: .55rem .65rem; color: var(--ink); width: 100%; min-height: 44px;
}
.f select { font-family: var(--font); }
.f input::placeholder { color: var(--ink-3); }
.f input:focus-visible, .f select:focus-visible {
  border-color: var(--brand); background: var(--surface);
  outline: 3px solid color-mix(in srgb, var(--brand) 32%, transparent); outline-offset: 0;
}
.f input[aria-invalid="true"] { border-color: var(--negative); }
.f .fout { font-size: .76rem; color: var(--negative); font-weight: 600; }
.f .fout:empty { display: none; }

/* Segmented control: twee tot vijf keuzes, geen dropdown. */
.seg {
  display: flex; gap: 3px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 11px; padding: 3px;
}
.seg button {
  flex: 1; font: inherit; font-size: .81rem; font-weight: 620; padding: .45rem .5rem;
  background: transparent; border: 0; border-radius: 8px; color: var(--ink-2);
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.seg.veel { flex-wrap: wrap; }
.seg.veel button { flex: 1 1 auto; }

.switch {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line);
}
.switch:last-child { border-bottom: 0; }
.switch .t { font-size: .91rem; font-weight: 620; }
.switch .d { font-size: .77rem; color: var(--ink-3); }
.toggle {
  position: relative; width: 46px; height: 26px; flex: none;
  background: var(--surface-3); border-radius: 999px; border: 0; cursor: pointer;
  transition: background .15s;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .15s;
}
.toggle[aria-pressed="true"] { background: var(--positive); }
.toggle[aria-pressed="true"]::after { transform: translateX(20px); }
.switchknoppen { display: flex; align-items: center; gap: .55rem; flex: none; }
.proefbtn {
  font: inherit; font-size: .73rem; font-weight: 600; color: var(--ink-3);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .25rem .6rem; cursor: pointer;
}
.proefbtn:hover { color: var(--ink); border-color: var(--ink-3); }
.proefbtn[disabled] { opacity: .5; cursor: default; }

/* ── 8. rekentool-schil ──────────────────────────────────────────────────── */

/* Elke rekentool heeft dezelfde opbouw: vraag, korte uitleg, essentiële
   invoer, antwoord, betekenis, vervolgstap — en pas daarna verfijning,
   methode, bronnen en verdieping. Deze schil legt die volgorde vast, zodat
   geen enkele tool per ongeluk met een tabel begint. */
.calckop { max-width: 62ch; margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }
.calckop h1 { margin-bottom: .5rem; }
.calckop .lead { font-size: 1rem; }

.calc { display: grid; gap: clamp(1.2rem, 3vw, 2rem); align-items: start; }
@media (min-width: 1000px) {
  /* Twee kolommen zodra er ruimte is: links draaien aan de knoppen, rechts
     ziet het antwoord meebewegen. Op smal staat het antwoord gewoon onder de
     invoer — een plakkend paneel op een telefoon eet het scherm op. */
  .calc.tweekolom { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .calc.tweekolom .uitkomst { position: sticky; top: calc(var(--hdr) + 1rem); }
}
/* min-width: 0 is hier geen detail. Een rasteritem krijgt standaard
   min-width: auto, en dan telt de min-content van álles erin mee — één
   formuleregel met white-space: nowrap duwt de hele kolom dan breder dan het
   scherm. Op 320 px liep /thuisbatterij daardoor 683 px breed (23-8-2026). */
.calc .invoer, .calc .uitkomst { min-width: 0; }
.calc .invoer > * + * { margin-top: var(--s-4); }
.calc .uitkomst > * + * { margin-top: var(--s-3); }

/* De verdieping onder elke tool: methode, bronnen, uitleg. Altijd in deze
   volgorde, altijd inklapbaar, altijd server-gerenderd. */
.verdieping { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.verdieping > .sectionhead { margin-bottom: var(--s-3); }

/* ── 9. resultaten en vertrouwen ─────────────────────────────────────────── */

/* ResultHero: het antwoord, en niets anders, bovenaan. */
.resulthero {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--ink-3);
  border-radius: 0 var(--r) var(--r) 0; padding: clamp(1.1rem, 3vw, 1.6rem);
}
.resulthero.is-positive  { border-left-color: var(--positive); background: var(--positive-soft); }
.resulthero.is-attention { border-left-color: var(--warning);  background: var(--warning-soft); }
.resulthero.is-negative  { border-left-color: var(--negative); background: var(--negative-soft); }
.resulthero.is-info      { border-left-color: var(--info);     background: var(--info-soft); }
.resulthero .eyebrow { color: var(--ink-3); }
.resulthero .value {
  font-family: var(--disp); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 3.6rem); line-height: 1.02;
  letter-spacing: -.04em; color: var(--ink); display: block;
}
.resulthero .unit { font-size: .95rem; font-weight: 620; color: var(--ink-2); display: block; margin-top: .2rem; }
.resulthero .summary { font-size: .95rem; color: var(--ink-2); margin-top: .7rem; max-width: 56ch; }
.resulthero .acties { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* De oude resultaatkaart, opnieuw opgebouwd op dezelfde tokens. */
.result { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.result.flag { border-color: color-mix(in srgb, var(--negative) 40%, var(--line)); background: var(--negative-soft); }
.result.okflag { border-color: color-mix(in srgb, var(--positive) 45%, var(--line)); background: var(--positive-soft); }
.result .big {
  font-family: var(--disp); font-size: clamp(2.1rem, 1.3rem + 3vw, 3rem); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.04; letter-spacing: -.035em;
}
.result .cap { font-size: .85rem; color: var(--ink-2); margin-top: .35rem; }

.breakdown { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .3rem; }
.breakdown th, .breakdown td { text-align: left; padding: .5rem .3rem; border-bottom: 1px solid var(--line); }
.breakdown td:last-child, .breakdown th:last-child { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.breakdown tr:last-child td { border-bottom: 0; font-weight: 650; }
.breakdown .tot td { border-top: 2px solid var(--axis); }

.formula {
  font-family: var(--mono); font-size: .78rem; background: var(--surface-3); color: var(--ink-2);
  padding: .65rem .8rem; border-radius: var(--r-s); overflow-x: auto; white-space: nowrap; margin-top: .7rem;
}

.compare { display: grid; gap: .55rem; margin-top: .9rem; }
.cmp { display: grid; grid-template-columns: 92px minmax(0, 1fr) 86px; gap: .6rem; align-items: center; font-size: .85rem; }
.cmp .track { height: 26px; background: var(--surface-3); border-radius: 7px; overflow: hidden; }
.cmp .track i { display: block; height: 100%; background: var(--series); border-radius: 7px; }
.cmp .track i.warnfill { background: var(--negative); }
.cmp .v { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 620; }

/* Datakwaliteit: de beperking is een productkenmerk, geen kleine lettertjes. */
.dataquality {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .65rem .85rem; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface-2); font-size: .81rem; color: var(--ink-2);
}
.dataquality .meting { display: inline-flex; align-items: center; gap: .45rem; font-weight: 640; color: var(--ink); }
.dataquality .balk { display: inline-flex; gap: 2px; }
.dataquality .balk i { width: 6px; height: 14px; border-radius: 2px; background: var(--surface-3); }
.dataquality .balk i.vol { background: var(--brand); }
.dataquality .toelichting { color: var(--ink-3); flex: 1 1 22ch; min-width: 0; }

/* Bronnen: zichtbaar, niet weggestopt in de voettekst. */
.sources { font-size: .81rem; color: var(--ink-2); }
.sources .lijst { display: flex; flex-wrap: wrap; gap: .3rem .55rem; margin-top: .3rem; }
.sources .lijst span {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: .16rem .6rem; font-size: .76rem; color: var(--ink-2);
}
.peildatum {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; color: var(--ink-3);
}
.peildatum::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: none;
}

/* Volgende stap: één tot drie echt relevante vervolgen, geen linkenmuur. */
.nextstep { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.nextstep a {
  display: block; padding: .8rem .9rem; border: 1px solid var(--line);
  border-radius: var(--r-s); background: var(--surface); color: var(--ink);
  text-decoration: none; transition: border-color .15s, background .15s;
}
.nextstep a:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.nextstep a b { display: block; font-size: .91rem; font-weight: 650; }
.nextstep a b::after { content: " →"; color: var(--brand); }
.nextstep a span { display: block; font-size: .79rem; color: var(--ink-3); margin-top: .15rem; line-height: 1.45; }

/* ── startpagina ─────────────────────────────────────────────────────────── */

/* Hero en live prijskaart naast elkaar zodra er ruimte is: de belofte links,
   het antwoord rechts. Geen hero van 800 pixels — de data moet snel in beeld. */
.homeboven { display: grid; gap: clamp(1.2rem, 3vw, 2rem); align-items: start; padding-block: clamp(.5rem, 2vw, 1.4rem) 0; }
@media (min-width: 900px) { .homeboven { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

/* De radar als merkdetail: twee zeer lichte concentrische lijnen achter de
   hero. Decoratie die niets verbergt en niets kost. */
.hero-home {
  position: relative;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(.5rem, 2vw, 1rem);
}
.hero-home::before {
  content: ""; position: absolute; inset: -20% auto auto -12%;
  width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow: 0 0 0 62px color-mix(in srgb, var(--brand) 5%, transparent) inset;
  z-index: -1;
}
@media (max-width: 899px) { .hero-home::before { display: none; } }
.hero-home h1 { max-width: 15ch; }
.hero-home .lead { margin-top: .8rem; }
.heroacties { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
@media (max-width: 520px) { .heroacties .btn { flex: 1 1 100%; } }

.trustrow {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem 1.2rem;
  font-size: .82rem; color: var(--ink-2);
}
.trustrow li { display: flex; align-items: center; gap: .4rem; }
.trustrow li::before {
  content: ""; width: 14px; height: 8px; flex: none;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg) translateY(-2px);
}

.livecard .bignum { margin-top: .1rem; }
.livecard .livelinks {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line);
  font-size: .84rem; font-weight: 620;
}
.livecard .livelinks a { text-decoration: none; }
.livecard .livelinks a:hover { text-decoration: underline; }

/* Kerngetal links, kleine cijfers rechts — gebruikt op de gasprijs- en
   bespaarpagina, waar het antwoord één getal is en de rest context. */
.hero { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; } }

.bignum { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bignum b {
  font-family: var(--disp); font-size: clamp(2.8rem, 2rem + 4.4vw, 4.4rem); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: .95; letter-spacing: -.045em; color: var(--ink);
}
.bignum span { font-size: 1rem; color: var(--ink-2); font-weight: 620; }

/* De vier vragen. Formuleer vanuit de vraag, niet vanuit de productnaam. */
.intentgrid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.intent {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.intent:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.intent .ic {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: .35rem;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
}
.intent b { font-family: var(--disp); font-size: 1.02rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.intent .d { font-size: .84rem; color: var(--ink-2); line-height: 1.5; }
.intent .cta { margin-top: auto; padding-top: .7rem; font-size: .86rem; font-weight: 660; color: var(--brand); }
.intent .cta::after { content: " →"; }

/* Energiecheck: de kansen op volgorde, met het rangnummer als anker. Bewust
   genummerd en niet gescoord — een rangorde met een bedrag erbij is
   navolgbaar, een cijfer van 0 tot 100 niet. */
.kansen { display: grid; gap: .8rem; }
.kans {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1rem 1.1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--positive);
  border-radius: 0 var(--r) var(--r) 0;
}
.kans.risico { border-left-color: var(--negative); }
.kans.geen { border-left-color: var(--axis); }
.kans .rang {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--disp); font-weight: 700; font-size: .95rem;
  background: var(--surface-2); color: var(--ink-2);
}
.kans.kans .rang { background: var(--positive-soft); color: var(--positive); }
.kans.risico .rang { background: var(--negative-soft); color: var(--negative); }
.kansinhoud { min-width: 0; }
.kanskop { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.kanskop b { font-family: var(--disp); font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }
.kans .bedrag { font-size: .95rem; color: var(--ink-2); margin: .35rem 0 .2rem; }
.kans .bedrag b { font-family: var(--disp); font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.kans .waarom { font-size: .87rem; color: var(--ink-2); margin: 0 0 .8rem; max-width: 56ch; }

/* Slim verbruiken: één rij per apparaat, gesorteerd op wat het oplevert.
   Het tijdstip is het grootste element — dat is het antwoord. */
.slimlijst { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.slim {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line);
  border-left: 4px solid var(--positive); border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.slim:hover { background: var(--surface-2); }
.slim.geen { border-left-color: var(--axis); }
.slim b { font-size: .84rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.slim .wanneer {
  font-family: var(--disp); font-size: 1.65rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1;
}
.slim.geen .wanneer { font-size: 1.1rem; color: var(--ink-3); }
.slim .reden { font-size: .81rem; color: var(--ink-2); line-height: 1.45; }
.slim .waarde { font-size: .85rem; font-weight: 660; color: var(--positive); margin-top: .3rem; }
.slim .cta { margin-top: auto; padding-top: .6rem; font-size: .82rem; font-weight: 640; color: var(--brand); }
.slim .cta::after { content: " →"; }

/* Drie huisregels. Bewust geen cards: dit is een belofte, geen dashboard. */
.beginselen { display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.beginselen > div { border-top: 2px solid var(--brand); padding-top: .8rem; }
.beginselen b { display: block; font-family: var(--disp); font-size: 1rem; font-weight: 700; margin-bottom: .3rem; }
.beginselen p { font-size: .87rem; color: var(--ink-2); margin: 0; }

/* Advieskaarten (beste momenten). */
.advice { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .advice { grid-template-columns: 1fr 1fr; } }
.advice > .seg {
  justify-self: stretch !important; grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: .4rem;
  background: transparent; border: 0; padding: 0; margin-bottom: .15rem;
}
.advice > .seg button {
  flex: 0 0 auto; font: inherit; font-size: .81rem; font-weight: 600;
  padding: .4rem .85rem; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.advice > .seg button:hover { border-color: var(--axis); color: var(--ink); }
.advice > .seg button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: none; }
.adv {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-s);
  padding: .9rem 1rem .95rem; background: var(--surface-2); overflow: hidden;
}
.adv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--axis); }
.adv.hi { border-color: color-mix(in srgb, var(--positive) 45%, var(--line)); background: var(--positive-soft); }
.adv.hi::before { background: var(--positive); }
.adv.lo { border-color: color-mix(in srgb, var(--negative) 40%, var(--line)); background: var(--negative-soft); }
.adv.lo::before { background: var(--negative); }
.adv .lbl { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; margin-bottom: .35rem; }
.adv.hi .lbl { color: var(--positive); }
.adv.lo .lbl { color: var(--negative); }
.adv .when { font-family: var(--disp); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.adv .sub { font-size: .81rem; color: var(--ink-2); margin-top: .2rem; }

/* ── 10. commercie ────────────────────────────────────────────────────────── */

/* Advertentieplekken blijven stil tot AdSense actief is. */
.ad {
  border: 1px dashed color-mix(in srgb, var(--axis) 60%, transparent);
  border-radius: var(--r-s); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  color: var(--ink-3); text-align: center;
}
.ad .t { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .75; }
.ad .s { font-family: var(--mono); font-size: .68rem; opacity: .6; }
.ad-lead { height: 92px; margin: 1rem 0; }
.ad-rect { height: 254px; }
.ad-half { height: 400px; }

/* CTA-blok. De vorm zegt niets over de aanbeveling — die staat in de tekst
   erboven en volgt de berekening, nooit andersom. */
.ctablok {
  margin-top: 1.3rem; padding: 1rem 1.15rem; border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; align-items: center;
}
.ctablok.aanbevolen { background: var(--brand-soft); border-color: var(--brand-line); }
.ctablok .ctatekst { flex: 1 1 250px; min-width: 0; }
.ctablok .t { font-weight: 670; font-size: .95rem; }
.ctablok .d { font-size: .82rem; color: var(--ink-2); margin-top: .2rem; max-width: 52ch; }
.ctablok .status { flex-basis: 100%; font-size: .82rem; font-weight: 640; }
.ctablok .status:empty { display: none; }
.ctamail {
  flex-basis: 100%; border-top: 1px dashed var(--line);
  padding-top: .8rem;
}
.ctamail form { display: flex; flex-wrap: wrap; gap: .6rem; }
.ctamail input[type=email] {
  flex: 1 1 200px; min-width: 0; min-height: 44px; font: inherit; font-family: var(--mono);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem .95rem; color: var(--ink);
}
.ctamail input[type=email]:focus-visible { border-color: var(--brand); }
.ctamail .status { display: block; margin-top: .5rem; }
@media (max-width: 560px) { .ctablok .btn { width: 100%; } }

/* Affiliate-transparantie: altijd zichtbaar bij de knop, nooit alleen in de
   voorwaarden. */
.affnoot { flex-basis: 100%; font-size: .75rem; color: var(--ink-3); line-height: 1.5; }

.ctablok form.offerte {
  flex: 2.5 1 460px; align-self: start; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: .6rem .9rem; align-items: end;
}
.ctablok form.offerte .akkoord {
  grid-column: 1 / -1; display: flex; gap: .55rem; align-items: flex-start;
  font-size: .81rem; color: var(--ink-2); cursor: pointer; max-width: 62ch;
}
.ctablok form.offerte .akkoord input { flex: none; margin-top: .15rem; accent-color: var(--brand); width: 18px; height: 18px; }
.ctablok form.offerte .btn { grid-column: 1 / -1; justify-self: start; }
.ctablok .partners { flex-basis: 100%; }
.ctablok .partners:empty { display: none; }

.offsplit { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; align-items: flex-start; margin-top: .6rem; }
.offsplit .offcheck { flex: 1.1 1 34ch; min-width: 0; }
.offsplit .ctablok { flex: 1 1 400px; margin-top: 0; }

/* Leverancierchip. */
.levchip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 620; }
.levchip .levmono {
  width: 1.35rem; height: 1.35rem; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 700; color: var(--ink-2);
}
.levchip .levlogo { width: 1.35rem; height: 1.35rem; border-radius: 7px; object-fit: contain; flex: none; }
a.levchip {
  color: var(--ink); text-decoration: none;
  padding: .26rem .68rem .26rem .3rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .12s ease, background-color .12s ease;
}
a.levchip .uit { color: var(--brand); font-weight: 700; }
a.levchip:hover { border-color: var(--brand-line); background: var(--brand-soft); }

/* ── 11. voettekst en losse pagina's ─────────────────────────────────────── */

footer.foot {
  border-top: 1px solid var(--line); margin-top: 2.8rem;
  padding: 1.8rem 0 1rem; font-size: .81rem; color: var(--ink-3);
}
footer.foot .kolommen {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
footer.foot h2 {
  font-size: .69rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 750; margin-bottom: .5rem;
}
/* De links staan onder elkaar; met 17 px teksthoogte en een krappe tussenruimte
   raken twee aanraakdoelen elkaar bijna. WCAG 2.2 vraagt om een cirkel van
   24 px die niet overlapt — vandaar de ruimere gap plus wat lucht per link. */
footer.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
footer.foot li a { display: inline-block; padding-block: .18rem; }
footer.foot a { color: var(--ink-3); text-decoration: none; }
footer.foot a:hover { color: var(--ink); text-decoration: underline; }
footer.foot .slot {
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: baseline;
}
footer.foot .belofte { font-family: var(--disp); font-weight: 650; color: var(--ink-2); }
footer.foot code { font-family: var(--mono); font-size: .74rem; }

/* ---- losse pagina's (over, privacy, voorwaarden, artikelen) ----
   Ze delen sinds het herontwerp dít bestand, zodat er maar één plek is waar
   kleur, letter en ruimte vandaan komen. Hun header is een lichtere variant
   van de app-header: merk plus een paar links, geen uitklapmenu. */
header.top nav.paginanav { display: flex; flex-wrap: wrap; gap: .2rem; font-size: .85rem; font-weight: 620; }
header.top nav.paginanav a {
  text-decoration: none; color: var(--ink-2);
  padding: .35rem .7rem; border-radius: 9px;
  transition: background .15s, color .15s;
}
header.top nav.paginanav a:hover { background: var(--surface-2); color: var(--ink); }
header.top nav.paginanav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
@media (max-width: 460px) {
  header.top .bar { flex-wrap: wrap; padding-bottom: .4rem; }
  header.top .bar .spacer { display: none; }
  header.top nav.paginanav { width: 100%; margin-left: -.7rem; }
}

main.prose {
  max-width: 760px; margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.6rem) clamp(.9rem, 3vw, 1.6rem) 3rem;
}
main.prose h1 { margin: 0 0 .5rem; }
main.prose h2 { margin: 1.9rem 0 .55rem; font-size: 1.18rem; }
main.prose h2:first-of-type { margin-top: 1.3rem; }
main.prose h3 { margin: 1.3rem 0 .35rem; }
main.prose p, main.prose li { color: var(--ink-2); }
main.prose ul, main.prose ol { margin: 0 0 .9rem; padding-left: 1.2rem; }
main.prose li { margin-bottom: .4rem; }
main.prose b, main.prose strong { color: var(--ink); font-weight: 650; }
main.prose .card { padding: clamp(1.2rem, 2.8vw, 2rem); }
main.prose .card + .card { margin-top: 1rem; }
main.prose .stand {
  font-size: .8rem; color: var(--ink-3); margin-top: 1.6rem;
  border-top: 1px solid var(--line); padding-top: .9rem;
}
main.prose code { font-family: var(--mono); font-size: .84em; background: var(--surface-2); padding: .08em .35em; border-radius: 5px; }
main.prose table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 1rem; }
main.prose th, main.prose td { text-align: left; padding: .5rem .3rem; border-bottom: 1px solid var(--line); }

footer.pagfoot {
  max-width: 760px; margin: 0 auto;
  padding: 0 clamp(.9rem, 3vw, 1.6rem) 2.5rem;
  font-size: .8rem; color: var(--ink-3);
}
footer.pagfoot nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .5rem; }
footer.pagfoot a { color: var(--ink-3); text-decoration: none; }
footer.pagfoot a:hover { color: var(--ink); text-decoration: underline; }