/* ============================================================================
   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;
}

/* Springlink. Onzichtbaar tot hij focus krijgt, en dan een gewone knop
   bovenaan de pagina — niet een streepje dat je met een schermlezer wel hoort
   maar met een toetsenbord niet ziet staan. */
.skip {
  position: absolute; left: .75rem; top: -4rem; z-index: 100;
  background: var(--brand); color: var(--on-brand); text-decoration: none;
  font-size: .88rem; font-weight: 620; padding: .6rem 1rem; border-radius: var(--r-s);
  transition: top .12s ease;
}
/* :focus en niet :focus-visible — een springlink bereik je alleen met het
   toetsenbord, en de heuristiek achter :focus-visible laat hem soms verborgen
   zolang de bezoeker nog niet getypt heeft. Dan is de link er wel en zie je
   hem niet, wat erger is dan andersom. */
.skip:focus { top: .75rem; outline-offset: 3px; }

/* Elk aanraakdoel minimaal 44×44. Geen uitzonderingen op mobiel. */
@media (pointer: coarse) {
  /* Ook a.btn: een link die als knop is opgemaakt is voor een duim een knop.
     Zonder die selector bleven de CTA's van de energiecheck op 36 px steken —
     de vier belangrijkste knoppen van de pagina waar bezoekers binnenkomen
     (gemeten 24-8-2026 op 375 px met aanraakemulatie). */
  button, a.btn, [role="button"], .seg button, .tabbar button, .iconbtn {
    min-height: 44px;
  }
  /* .btn is een flexbox, dus de tekst blijft vanzelf midden staan; alleen de
     kleine variant heeft wat meer zijruimte nodig om niet als een gerekt
     hoekje te lezen. */
  .btn.klein { padding-inline: 1rem; }
}

/* ── 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);
}
/* Eén regel voor alles wat verborgen hoort te zijn. De browserregel
   [hidden]{display:none} verliest van élke regel met een class erin — .btn,
   .f, .grid — en dan staat een verborgen element gewoon in beeld. Zo stond
   de installatieknop met hidden en al op iedere pagina te wachten op een
   gebeurtenis die in een gewone browser nooit komt: zichtbaar, en dood bij
   aanraking (24-8-2026). Per selector repareren betekent hem bij het
   volgende verborgen element weer vergeten. */
[hidden] { display: none !important; }
.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; }
/* Kopjes binnen een menupaneel. Bewust dezelfde behandeling als .eyebrow
   elders: klein, gespatieerd, gedempt — een scheiding en geen niveau erbij. */
.navpanel .navgroep, .sheet .navgroep {
  font-size: .68rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: .55rem 0 .15rem; padding: 0 .55rem;
}
.navpanel .navgroep:first-child, .sheet .navgroep:first-child { margin-top: .2rem; }

/* 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: de vaste plek voor meldingen, op elk scherm.
   Stond tot 24-8-2026 alleen op mobiel — op desktop zat het prijsalarm
   uitsluitend een niveau diep onder Vandaag, en dan is "waar staan mijn
   meldingen" een zoektocht. Meldingen zijn een instelling die je terugzoekt,
   geen pagina die je toevallig tegenkomt; een vaste plek in de kop hoort
   daarbij. Hij toont ook zijn stand: staan er meldingen aan, dan is de bel
   gevuld in de merkkleur. */
.bell { display: grid; position: relative; }
.bell[data-aan="ja"] { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.bell[data-aan="ja"]::after {
  content: ''; position: absolute; top: 6px; right: 7px;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--positive); border: 1.5px solid var(--surface);
}

#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; }
  .levrij.gespot > details > summary { animation: none !important; background: var(--brand-soft); }
  * { 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;
}
/* Secundaire cijfers op een telefoon achter één knop. Op 600 px en breder
   passen ze gewoon in het raster en is er niets te verbergen. */
.meercijfers { display: none; }
@media (max-width: 599px) {
  .minigrid > .secundair { display: none; }
  .minigrid.toon > .secundair { display: block; }
  .meercijfers { display: inline-block; margin-top: .6rem; font-size: .78rem; }
}
.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); }
/* Verdieping onder een vergelijking: de kaart zit in de uitklapper, dus geen
   rand om een rand. De kop staat in de samenvatting — één titel op het scherm,
   en de koppenstructuur blijft kloppen voor schermlezers en zoekmachines. */
details.uitklap.verdiep > summary h2 {
  font: inherit; margin: 0; letter-spacing: normal;
}
details.uitklap.verdiep > .card {
  border: 0; background: transparent; border-radius: 0; margin-top: 0;
}
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); }
  /* De hint alleen als er écht iets te vegen valt. nav.js zet .schuift zodra
     de tabel breder is dan zijn omhulsel; anders stond er "veeg opzij" onder
     een tabel die gewoon paste. */
  .tablewrap.schuift::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; }
/* Op een telefoon telt passen zwaarder dan ruime kolommen: een tabel van drie
   korte kolommen (uur, markt, all-in) hoeft niet te schuiven omdat er een
   ondergrens van 420 px onder staat. Past hij niet, dan schuift hij alsnog en
   blijft de eerste kolom staan. */
@media (max-width: 560px) {
  table.data { min-width: 0; font-size: .82rem; }
  table.data th, table.data td { padding: .5rem .45rem; }
}
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; }
/* Een aanname die de bezoeker zelf heeft verzet draagt een stip — zodat een
   vergeten speelstand (verstopt in een uitklap) zich niet meer kan verstoppen.
   Wat de site zelf invult, zoals het tarief van een gekozen leverancier, telt
   daar niet voor mee. De uitleg in woorden staat in de resetregel eronder, en
   voor een schermlezer in de verborgen tekst in het label. */
.f.afwijkend > label::before {
  content: ''; display: inline-block; width: .42em; height: .42em;
  border-radius: 50%; background: var(--brand); margin-right: .45em; vertical-align: .1em;
}
details.uitklap > summary .afwijkttel { color: var(--brand); font-weight: 650; }
.resetrij {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; margin: .95rem 0 0; font-size: .82rem; color: var(--ink-2);
}
.resetrij[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; }

/* Mijn huis: de gedeelde situatie zichtbaar boven elke rekentool. Eén
   compacte regel, geen dashboard — de kaart mag de calculator niet
   verdringen (zeker niet op een telefoon). De feiten komen uit dezelfde
   opslag als de sommen (MIJN/SIT/EIGEN); de knop wijst naar de
   energiecheck, waar alle vragen op één plek wonen. */
.mijnhuis {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem;
  margin: .9rem 0 0;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  font-size: .8rem; line-height: 1.45; color: var(--ink-2);
  max-width: 62ch;
}
.mijnhuis .t {
  font-size: .66rem; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 750; color: var(--ink-3); align-self: center;
}
.mijnhuis b { font-weight: 650; color: var(--ink); }
.mijnhuis .linkbtn { font-size: .78rem; }
.mijnhuis .kwaliteit { flex-basis: 100%; font-size: .72rem; color: var(--ink-3); margin: 0; }

.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); }
}
/* Op een telefoon staat het antwoord bovenaan, niet onder de vragenlijst.

   Gemeten op 375 px (25-8-2026), afstand tot het eerste resultaat:
   /thuisbatterij 1,6 schermen na 2 bedieningselementen — de maat die klopt;
   /zonnepanelen 1,9 na 15; /saldering 2,1 na 7; /eigen-verbruik 3,5 na 25.
   Op dat laatste scherm scrolde je dus drieënhalf scherm door een formulier
   voordat de site iets terugzei, terwijl elke tool met werkende standaarden
   opent en dus meteen een antwoord heeft.

   Eén regel lost dat voor alle tweekoloms-tools tegelijk op: het antwoord
   eerst, de invoer eronder. Op desktop verandert er niets — daar staan ze
   naast elkaar en zie je allebei zonder scrollen. */
@media (max-width: 999px) {
  /* Alleen de volgorde omdraaien, het raster laten staan. Met display:flex
     verloor .uitkomst zijn min-width:0-bescherming op de dwarsas en liep
     /vast-of-dynamisch op 320 px 478 px breed (gemeten 25-8-2026). */
  .calc.tweekolom .uitkomst { order: -1; }
  /* Behalve op de energiecheck: dáár zijn de vragen het product en zijn de
     kaarten eronder het antwoord erop. */
  .calc.tweekolom.vragen-eerst .uitkomst { order: 0; }
}

/* 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; }

/* Een uitkomstkaart die precies EEN leverancier noemt, is ook de weg naar zijn
   rij in de lijst eronder (7-9-2026). Aan het data-attribuut en niet aan een
   klasse: de renderers herschrijven className van deze kaarten. */
.result[data-levspring] { cursor: pointer; padding-right: 2.4rem; position: relative; }
.result[data-levspring]::after {
  content: ''; position: absolute; right: 1.15rem; top: 1.25rem;
  width: .45rem; height: .45rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
}
.result[data-levspring]:hover { border-color: var(--brand); }
.result[data-levspring]:hover::after { border-color: var(--brand); }

.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); margin-top: .7rem;
  /* Afbreken en niet horizontaal schuiven: nowrap sneed de batterijformule
     halverwege af, en een afgekapte regel zonder zichtbare schuifbalk leest
     als een fout in plaats van als iets dat verder gaat. */
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55;
}

.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; }
/* Eén woord dat zegt wat het balkje waard is. Rustig en niet als
   waarschuwing: een korter archief is een eigenschap van het cijfer, geen
   fout erin. */
.dataquality .oordeel { font-weight: 640; color: var(--ink); font-size: .79rem; }
.dataquality .oordeel.dun { color: var(--warning); }

/* 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; }
/* Op mobiel eerst de prijs, dan pas de belofteregels: het getal waar iedereen
   voor komt hoort boven de vouw en niet achter vier regels vertrouwen. Op
   desktop staan hero en belofte onder elkaar in de linkerkolom, met de
   prijskaart ernaast — daar is er geen vouw om over te vechten. */
@media (max-width: 899px) {
  .homeboven .livecard { order: 1; }
  .homeboven .trustrow { order: 2; }
}
@media (min-width: 900px) {
  .homeboven { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .homeboven .hero-home { grid-column: 1; grid-row: 1; }
  .homeboven .trustrow { grid-column: 1; grid-row: 2; margin-top: 0; }
  .homeboven .livecard { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

/* 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. */
/* Vier vragen, dus twee bij twee. Met auto-fit werden het er drie naast
   elkaar en bleef de vierde alleen achter op een halflege regel; twee kolommen
   geven elke kaart bovendien de ruimte om zijn vraag op één of twee regels te
   stellen in plaats van op vier. */
.intentgrid { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .intentgrid { grid-template-columns: repeat(2, minmax(0, 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);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* De bovenste kaart draagt de grootste besparing. Een merkteken en een iets
   steviger rand, geen tweede kleur en geen schaduw: het is een rangorde,
   geen ander soort kaart. */
.slim.top { border-left-width: 6px; background: var(--positive-soft); }
.slim.top:hover { background: var(--positive-soft); border-color: var(--positive); }
.topkans {
  font-size: .66rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--positive); background: var(--surface); border: 1px solid var(--positive);
  border-radius: 999px; padding: .1rem .5rem; white-space: nowrap;
}
.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); }
/* De ingetogen stand hoort bij een uitkomst die nog kan kantelen: de offerte
   blijft bereikbaar, maar draagt niet de merkkleur van een aanbeveling. Het
   verschil moet zichtbaar zijn zonder dat het blok er afgekeurd uitziet. */
.ctablok.ingetogen { background: var(--surface-2); border-color: var(--line); }
.ctablok.ingetogen .t { font-weight: 640; }

/* Het offerteformulier zit in een <details>: dicht bij twijfel, open bij een
   duidelijk ja. Native, dus toetsenbord en schermlezer krijgen de stand er
   gratis bij — en dicht betekent echt dicht, niet alleen onzichtbaar. */
.offerteklap { flex: 2.5 1 460px; align-self: start; min-width: 0; }
.offerteklap > summary {
  cursor: pointer; font-size: .88rem; font-weight: 640; color: var(--brand);
  list-style: none; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .3rem 0;
}
.offerteklap > summary::-webkit-details-marker { display: none; }
.offerteklap > summary::after {
  content: ''; width: .5rem; height: .5rem; margin-top: -.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .16s ease;
}
.offerteklap[open] > summary::after { transform: rotate(-135deg); margin-top: .15rem; }
.offerteklap[open] > summary { margin-bottom: .5rem; }

/* Wat weegt het zwaarst: één regel, en hij mag niet zwaarder wegen dan de
   uitkomst erboven. */
.weegt {
  margin-top: .75rem; font-size: .84rem; color: var(--ink-2);
  border-left: 2px solid var(--brand-line); padding-left: .7rem;
}
.weegt b { color: var(--ink); font-weight: 650; }
.verfijnrij { margin-top: .75rem; }
.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);
}
/* Op de losse pagina's staat de voettekst niet in <main>, en die had de
   5,5rem onderruimte die de vaste tabbar nodig heeft. Zonder deze regel
   verdwijnt de onderste voetregel op mobiel achter de navigatie. */
@media (max-width: 899px) {
  body > .wrap > footer.foot { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0)); }
}
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; }

/* Een regel code om over te nemen (/widget). De knop staat ín het blok en niet
   erboven, want wie hem zoekt kijkt naar de code en niet naar de kop. De regel
   schuift horizontaal in plaats van af te breken: een geknipte script-tag die
   iemand half kopieert is erger dan een balkje. */
.codeblok {
  position: relative; margin: .7rem 0 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface-2);
}
.codeblok pre {
  margin: 0; padding: .8rem 6.6rem .8rem .85rem;
  overflow-x: auto; scrollbar-width: thin;
  font-family: var(--mono); font-size: .8rem; line-height: 1.5;
  color: var(--ink); white-space: pre;
}
.codeblok .kopieer {
  position: absolute; top: .5rem; right: .5rem;
  background: var(--surface);
}
@media (max-width: 520px) {
  .codeblok pre { padding: .8rem .85rem; }
  .codeblok .kopieer { position: static; margin: 0 .5rem .5rem; }
}

/* Correcties en wijzigingen op /methode. Bewust een definitielijst en geen
   kaartenrij: dit is een naslagtekst die je van boven naar beneden leest, en
   een kaart per regel zou er een productoverzicht van maken. De datum staat
   in de kantlijn zodat de tekst zelf één doorlopende kolom blijft. */
.wijzigingen { margin: var(--s-3) 0 0; }
.wijzigingen dt {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .02em;
  color: var(--ink-3); text-transform: uppercase;
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line);
}
.wijzigingen dt:first-of-type { margin-top: var(--s-2); }
.wijzigingen dd { margin: .35rem 0 0; color: var(--ink-2); }
.wijzigingen dd b { color: var(--ink); }
.wijzigingen + p { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .wijzigingen dt { float: left; width: 9.5rem; margin-top: 0; padding-top: var(--s-3); border-top: 0; }
  .wijzigingen dd { margin-left: 9.5rem; padding-top: var(--s-3); border-top: 1px solid var(--line); }
  .wijzigingen dt:first-of-type + dd, .wijzigingen dt:first-of-type { border-top: 0; padding-top: 0; }
}
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; }

/* ── /leveranciers ────────────────────────────────────────────────────────
   Twee vergelijkingen met de conclusie boven de ranglijst. De ranglijst is
   één component voor beide breedtes: op desktop lijnt hij uit als tabel, op
   een telefoon stapelt hij als kaart — zonder dat er iets van vorm verandert,
   want een tabel die zich onderweg in kaarten verbouwt raakt onderweg zijn
   koppeling tussen kop en waarde kwijt. */

/* De keuze tussen de twee vragen. Groter dan een gewone .seg: dit is geen
   filter maar de vraag waar de pagina over gaat. */
.seg.tweevraag {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem;
  margin: var(--s-4) 0 var(--s-3); padding: 0; background: none; border: 0;
}
@media (min-width: 640px) { .seg.tweevraag { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seg.tweevraag button {
  display: block; text-align: left; width: 100%;
  padding: .85rem 1.05rem; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.seg.tweevraag button b { display: block; font-size: .98rem; font-weight: 670; color: var(--ink); }
.seg.tweevraag button span { display: block; font-size: .82rem; margin-top: .1rem; }
.seg.tweevraag button:hover { border-color: var(--axis); }
.seg.tweevraag button[aria-pressed="true"] {
  background: var(--brand-soft); border-color: var(--brand); color: var(--ink-2);
}
.seg.tweevraag button[aria-pressed="true"] b { color: var(--brand); }

/* Invoer naast elkaar waar het past: verbruik, huishouden, leverancier. */
.levinvoer {
  display: grid; gap: 1rem var(--s-4); margin-top: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .levinvoer { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.metEenheid { display: flex; align-items: center; gap: .55rem; }
.metEenheid input {
  flex: 0 1 8.5rem; min-width: 0; min-height: 44px;
  font: inherit; font-family: var(--mono); font-size: 1rem; font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-s); padding: .45rem .7rem;
}
.metEenheid input:focus-visible { border-color: var(--brand); }
.metEenheid span { font-size: .84rem; color: var(--ink-3); }

/* De regel die zegt waarmee er gerekend is. Rustig — het is een bijschrift,
   geen waarschuwing. */
.situatieregel {
  margin: var(--s-3) 0 0; font-size: .82rem; color: var(--ink-3);
  border-top: 1px solid var(--line); padding-top: .7rem;
}

/* Maximaal drie kaarten boven de ranglijst; zes statistieken is geen
   conclusie maar een dashboard. */
.uitkomstrij {
  display: grid; gap: .8rem; margin-top: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .uitkomstrij { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } }
.uitkomstrij .result { margin: 0; }

.watbetekent {
  margin: var(--s-3) 0 var(--s-4); font-size: .88rem; color: var(--ink-2);
  max-width: 74ch; border-left: 2px solid var(--brand-line); padding-left: .8rem;
}

/* ---- de ranglijst ---- */
/* Kop van een ranglijst: titel links, sorteerkeuze rechts. Eén keuze, geen
   filterbalk — de standaard is de rekenuitkomst en dat hoort zo te blijven. */
.ranghead {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 1rem;
}
.ranghead h2 { margin: 0; }
.sorteer { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--ink-3); }
.sorteer select {
  font: inherit; font-size: .8rem; min-height: 36px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-s); padding: .25rem .5rem;
}
@media (pointer: coarse) { .sorteer select { min-height: 44px; } }

.levrank { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.levrij + .levrij { border-top: 1px solid var(--line); }
.levrij.leeg { padding: 1rem .2rem; color: var(--ink-3); font-size: .88rem; }

/* Storingsmelding: wat er mist, waarom, en dat het niet aan de bezoeker ligt.
   Bewust gedempt en zonder rood — er is niets kapot bij hem, alleen een bron
   die even niet antwoordt. Het beeld is een meetreeks die in stippels
   overgaat; zie STORING_BEELD in wattradar.js. */
.storing {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .8rem .9rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-s);
}
.storing .storingbeeld { color: var(--ink-3); flex: none; margin-top: .15rem; line-height: 0; }
.storing .storingtekst b { display: block; font-size: .88rem; font-weight: 640; color: var(--ink-2); }
.storing .storingtekst p { margin: .25rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--ink-3); }
.levrij.leeg .storing { margin: .2rem 0; }
.levrij > details > summary {
  display: grid; align-items: center; gap: .2rem .9rem; cursor: pointer;
  padding: .8rem .2rem; list-style: none; min-height: 44px;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto 1.2rem;
  grid-template-areas: 'rang naam bedrag meer' '. verschil verschil verschil';
}
.levrij > details > summary::-webkit-details-marker { display: none; }
/* Zonder teken verraadt niets dat een rij open kan, en dan blijft de
   onderbouwing onvindbaar — precies het deel dat de bedragen navolgbaar
   maakt. Draait mee met de stand van de <details>. */
.levrij > details > summary::after {
  content: ''; grid-area: meer; justify-self: end;
  width: .5rem; height: .5rem; margin-top: -.2rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .16s ease;
}
.levrij > details[open] > summary::after { transform: rotate(-135deg); margin-top: .15rem; }
@media (min-width: 640px) {
  .levrij > details > summary {
    grid-template-columns: 1.8rem minmax(0, 1fr) 8.5rem 7rem 1.2rem;
    grid-template-areas: 'rang naam bedrag verschil meer';
  }
}
.levrij .rang {
  grid-area: rang; font-family: var(--mono); font-size: .82rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.levrij .naam {
  grid-area: naam; font-weight: 640; color: var(--ink); min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.levrij .bedrag {
  grid-area: bedrag; font-family: var(--disp); font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink);
  text-align: right; white-space: nowrap;
}
.levrij .bedrag small {
  display: block; font-family: var(--font); font-size: .7rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink-3);
}
.levrij .bedrag abbr { text-decoration: none; color: var(--ink-3); cursor: help; }
/* Bij de vaste contracten staat één leverancier meerdere keren in de lijst, met
   per rij een andere looptijd. Zonder dit label zou je drie identieke namen
   onder elkaar zien met drie verschillende bedragen erachter. */
.levproduct {
  display: inline-block; margin-left: .5rem; font-size: .75rem; font-weight: 620;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem;
  white-space: nowrap;
}
.levrij .verschil {
  grid-area: verschil; font-size: .81rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .levrij .verschil { text-align: right; } }
.levrij > details > summary:hover { background: var(--surface-2); }
.levrij.islaag .bedrag { color: var(--positive); }
.levrij.iseigen > details > summary { background: var(--surface-2); }
/* De rij waar je zojuist heen gesprongen bent, licht even op. Zonder dat zie
   je na het scrollen twaalf rijen en niet welke van jou was. De klasse gaat er
   in JS na 1,9 s weer af, zodat de markering ook zonder animatie eindig is. */
.levrij.gespot > details > summary { animation: gespot 1.8s ease-out 1; }
@keyframes gespot {
  0%, 35% { background: var(--brand-soft); }
  100%    { background: transparent; }
}

/* Labels, geen prijsvechterbadges. "Laagste kosten" zegt precies wat het is;
   "WINNAAR" zou iets beweren wat deze vergelijking niet meet. */
.levmerk {
  font-size: .66rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: .1rem .5rem; white-space: nowrap;
}
.levmerk.laag { color: var(--positive); border: 1px solid var(--positive); }
.levmerk.eigen { color: var(--ink-2); border: 1px solid var(--axis); }

/* Het uitklapdeel: de som die tot het bedrag leidt, plus bron en peildatum. */
.levdetail { padding: 0 .2rem 1rem; }
.levsom { width: 100%; border-collapse: collapse; font-size: .84rem; }
.levsom td { padding: .34rem 0; border-bottom: 1px solid var(--grid); color: var(--ink-2); }
.levsom td.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.levsom td:nth-child(2) { color: var(--ink-3); font-size: .8rem; }
.levsom tr.tot td { border-bottom: 0; border-top: 1px solid var(--line); font-weight: 660; color: var(--ink); padding-top: .45rem; }
/* Onder de 560 px past een som van drie kolommen niet: "Bij 3.600 kWh
   teruglevering" en "benadering" liepen dan door elkaar heen. De rekenregel
   schuift daar onder het label; het bedrag houdt zijn rechteruitlijning, want
   dat is de kolom waarin je bedragen vergelijkt. */
@media (max-width: 559px) {
  .levsom, .levsom tbody { display: block; }
  .levsom tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .7rem;
    padding: .45rem 0; border-bottom: 1px solid var(--grid);
  }
  .levsom tr.tot { border-bottom: 0; border-top: 1px solid var(--line); padding-top: .5rem; }
  .levsom td { display: block; border: 0; padding: 0; }
  .levsom td:empty { display: none; }
  .levsom td:nth-child(2) { grid-column: 1; text-align: left; }
  .levsom td:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.levextra { margin: .7rem 0 0; font-size: .82rem; color: var(--ink-2); max-width: 72ch; }
.levbron { margin: .7rem 0 0; font-size: .76rem; color: var(--ink-3); }
.levbron .levchip { font-size: .76rem; }
/* Een tarief dat lang niet is nagelopen zegt dat zelf. Geen rode
   waarschuwing: het is een eigenschap van het cijfer, geen fout erin. */
.levoud {
  display: inline-block; font-size: .7rem; font-weight: 640;
  color: var(--warning); border: 1px solid var(--warning);
  border-radius: 999px; padding: .02rem .45rem; white-space: nowrap;
}
.levbron a { color: var(--brand); }

/* Begrippen: vier korte definities, geen tweede methodepagina. */
.begrippen { margin: var(--s-3) 0 0; }
.begrippen dt { font-weight: 660; color: var(--ink); margin-top: var(--s-3); }
.begrippen dt:first-child { margin-top: 0; }
.begrippen dd { margin: .2rem 0 0; color: var(--ink-2); font-size: .88rem; max-width: 74ch; }

/* De belofteregels in een calckop staan kleiner dan in de hero. */
.trustrow.fijn { font-size: .78rem; margin-top: 1rem; gap: .35rem 1rem; }
.mut.fijn { font-size: .78rem; margin: .8rem 0 0; }

/* ================= /leveranciers: twee assen en de zonvergelijking =========
   Bijgekomen 24-8-2026, toen contracttype en zonnepanelen twee losse vragen
   werden in plaats van twee alternatieven. */

/* De twee vragen naast elkaar op een breed scherm, onder elkaar op een
   telefoon. Elk blok houdt zijn eigen kopje, anders weet niemand meer welke
   knoppen bij welke vraag horen. */
.tweeassen {
  display: grid; gap: var(--s-3); margin: var(--s-4) 0 var(--s-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) { .tweeassen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tweeassen .as > .eyebrow { margin: 0 0 .45rem; }
.tweeassen .seg.tweevraag { margin: 0; }

/* Een kleine schakelaar in een kaartkop: 2026 tegenover 2027. */
.seg.klein {
  display: inline-flex; gap: .25rem; padding: .2rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.seg.klein button {
  font: inherit; font-size: .8rem; font-weight: 620; cursor: pointer;
  padding: .3rem .8rem; min-height: 36px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-3);
}
.seg.klein button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--sch-1); }

/* Vier getallen over dezelfde kWh: opgewekt, zelf gebruikt, teruggeleverd,
   verschil. Zelfde ritme als .uitkomstrij, maar rustiger — dit is uitleg en
   geen conclusie. */
.kwhwaarde {
  display: grid; gap: .8rem; margin-top: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .kwhwaarde { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kwhtegel {
  border: 1px solid var(--line); border-radius: var(--r); padding: .8rem .9rem;
  background: var(--surface-2);
}
.kwhtegel .eyebrow { margin: 0 0 .3rem; }
.kwhtegel .big {
  font-family: var(--disp); font-size: 1.35rem; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.kwhtegel .cap { font-size: .76rem; color: var(--ink-3); margin-top: .2rem; }

/* Het staafbeeld per uur: prijs als staaf, opwek als lichter vlak erachter.
   Twee reeksen op één as met verschillende eenheden — daarom geen getallen
   langs de as, alleen de vorm. De boodschap is dat de twee pieken niet op
   elkaar vallen, en dat zie je zonder schaalverdeling. */
.uurgrafiek { margin-top: var(--s-4); }
.uurstaven {
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 2px; height: 130px; align-items: end;
}
.uurstaven .uur { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.uurstaven .zon {
  position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 0 0;
  background: var(--warning); opacity: .28;
}
.uurstaven .prijs {
  position: relative; width: 62%; border-radius: 2px 2px 0 0;
  background: var(--brand); opacity: .85;
}
.uurstaven b {
  position: absolute; bottom: -1.15rem; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: .62rem; font-weight: 500; color: var(--ink-3);
}
.uurlegenda {
  margin: 1.6rem 0 0; font-size: .76rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
}
.uurlegenda .sleutel { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .3rem; }
.uurlegenda .sleutel.prijs { background: var(--brand); opacity: .85; }
.uurlegenda .sleutel.zon { background: var(--warning); opacity: .45; }

/* Twee lijstjes naast elkaar: de top drie zonder en met zonnepanelen. */
.vergelijkassen {
  display: grid; gap: var(--s-3); margin-top: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .vergelijkassen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vergelijkassen .as {
  border: 1px solid var(--line); border-radius: var(--r); padding: .85rem 1rem; background: var(--surface-2);
}
.vergelijkassen .eyebrow { margin: 0 0 .5rem; }
.vergelijkassen ol { list-style: none; margin: 0; padding: 0; }
.vergelijkassen li {
  display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0;
  font-size: .88rem; color: var(--ink-2);
}
.vergelijkassen li + li { border-top: 1px solid var(--line); }
.vergelijkassen li b { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.vergelijkassen li:first-child b { color: var(--positive); }

/* De invoer van de zonvergelijking telt zes velden; drie kolommen wordt dan
   twee rijen van drie in plaats van een lange sliert. */
#lvPaneelDynZon .levinvoer select {
  min-height: 44px; font: inherit; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-s); padding: .45rem .7rem; width: 100%;
}

/* De jaarschakelaar boven de uitkomst: hij stuurt alles eronder, dus staat hij
   ook bovenaan. Twee regels per knop — het jaartal groot genoeg om te lezen,
   de uitleg eronder zodat "2027" niet zonder betekenis in het wild staat. */
.jaarkeuze { margin: var(--s-4) 0 var(--s-3); }
.jaarkeuze .eyebrow { margin: 0 0 .45rem; }
.seg.klein button { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.seg.klein button span { font-size: .72rem; font-weight: 500; color: var(--ink-3); }
.seg.klein button[aria-pressed="true"] span { color: var(--brand); }
@media (max-width: 480px) {
  .seg.klein { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 44 px blijft de ondergrens voor een raakvlak, ook als de knop maar twee
     korte regels draagt — met .4rem opvulling kwam hij op 43 uit. */
  .seg.klein button { padding: .45rem .6rem; min-height: 44px; justify-content: center; }
}

/* Twee ranglijstjes naast elkaar zeggen niets zonder eenheid, en de sprong in
   de volgorde is de eigenlijke boodschap van dat blok. */
.vergelijkassen .aseenheid {
  margin: -.3rem 0 .6rem; font-size: .74rem; color: var(--ink-3); line-height: 1.35;
}
.vergelijkassen .sprong {
  display: inline-block; margin-left: .45rem; font-style: normal;
  font-size: .7rem; font-weight: 640; border-radius: 999px; padding: .02rem .4rem;
  white-space: nowrap;
}
.vergelijkassen .sprong.op { color: var(--positive); border: 1px solid var(--positive); }
.vergelijkassen .sprong.neer { color: var(--ink-3); border: 1px solid var(--line); }
.vergelijkassen li span { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }

/* ================= /meetdata: eigen slimme-meterdata ======================
   Bijgekomen 24-8-2026 (fase 1 van de data-roadmap). */

/* Bestand kiezen. Het echte <input type="file"> staat verborgen maar blijft
   een echt formulierveld: het label is de knop, dus toetsenbord, schermlezer
   en de systeemkiezer werken gewoon. Nooit alleen slepen — dat sluit iedereen
   uit die niet met een muis werkt. */
.meetupload {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem;
  margin-top: var(--s-3);
}
.meetupload label.btn { cursor: pointer; }
.meetupload .hint { flex: 1 1 16rem; min-width: 0; }

/* De privacybelofte staat bij de knop en niet in een voetnoot: hij is de reden
   dat iemand dit bestand durft te kiezen. */
.privacyregel {
  margin: var(--s-3) 0 0; padding: .75rem .9rem;
  border: 1px solid var(--brand-line); border-radius: var(--r);
  background: var(--brand-soft); color: var(--ink-2);
  font-size: .84rem; line-height: 1.5; max-width: 74ch;
}

/* Voorbeeldregels uit het bestand: klein, want ze zijn er om een verkeerd
   gekozen kolom te betrappen, niet om te lezen. */
#meetVoorbeeld { margin-top: var(--s-3); }
#meetVoorbeeld table { font-size: .8rem; }
#meetVoorbeeld td { font-family: var(--mono); }

#lvPaneelDynZon .levinvoer select,
#meetWijzer .levinvoer select {
  min-height: 44px; font: inherit; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-s); padding: .45rem .7rem; width: 100%;
}

/* ── ranglijst onder vast-of-dynamisch (#vdRank, 2-9-2026) ─────────────────
   Dezelfde rijen als /leveranciers, maar in de smalle uitkomstkolom van de
   tweekolomsopmaak. De vijfkoloms rij van ≥ 640 px breekt daar de chips in
   tweeën; op containerbreedte valt hij terug op de mobiele opbouw met het
   verschil onder de naam. Browsers zonder container queries houden de
   gewone rij — omgevallen chips, maar niets onleesbaars. */
#vdRank { container-type: inline-size; }
@container (max-width: 640px) {
  #vdRank .levrij > details > summary {
    grid-template-columns: 1.6rem minmax(0, 1fr) auto 1.2rem;
    grid-template-areas: 'rang naam bedrag meer' '. verschil verschil verschil';
  }
  #vdRank .levrij .verschil { text-align: left; }
}
#vdRank .vdstand { margin: .1rem 0 .2rem; }
#vdRank .f.vdstand { margin-bottom: .4rem; }

/* ── 12. de vier componenten (uitvoeringsplan "van rotonde naar trechter") ──
   Elke pagina kreeg tot nu toe zoveel uitgangen als de tekst toevallig
   opleverde — op /  tweeëntwintig, op /dynamisch-energiecontract twaalf. Drie
   uitgangen per pagina, altijd dezelfde drie rollen, gebouwd als vier
   componenten die overal gevuld worden in plaats van drieëndertig ontwerpen:

     situatiebalk  wat wattradar van je weet, met één knop om het te wijzigen
     actieblok     de drie uitgangen, direct onder de uitkomst
     neeblok       een conclusie die nee zegt, zonder de uitgang te verbergen
     vangnet       melding of mail, voor wie vandaag niets koopt

   Rolkleur: geld = --signal (de enige kleur die op deze site "doen" betekent),
   verdieping = --info, vangnet = --positive. Kleur is versterking, nooit de
   drager: elke uitgang draagt zijn rol ook in de tekst erboven. */

/* De inhoud zit in .wrap, net als de header en de pagina zelf: zonder dat
   liep de balk tot de schermrand en lijnde hij met niets uit. */
.situatiebalk {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.situatiebalk[hidden] { display: none; }
.situatiebalk .sb-in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-3);
  min-height: 44px; padding-block: var(--s-2);
}
/* "Jouw huis" maakt duidelijk waar deze waarden over gaan. Zonder dat staat er
   alleen "Panelen: ja" en weet je niet wiens panelen dat zijn. */
.situatiebalk .sb-wie {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.situatiebalk .sb-wat { display: flex; flex-wrap: wrap; gap: var(--s-1) .4rem; }
.situatiebalk .sb-chip {
  display: inline-flex; align-items: baseline; gap: .38rem;
  font-size: .78rem; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .22rem .7rem;
  white-space: nowrap;
}
.situatiebalk .sb-chip b { color: var(--ink); font-weight: 650; }
.situatiebalk .sb-leeg { font-size: .82rem; color: var(--ink-3); }
.situatiebalk .sb-knop { margin-left: auto; }

.actieblok {
  display: grid; gap: var(--s-3);
  margin: var(--s-5) 0;
  padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.actieblok .ab-rol {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.actieblok .ab-geld { display: flex; flex-direction: column; gap: var(--s-2); }
.actieblok .ab-reden { font-size: .92rem; color: var(--ink-2); }
.actieblok .ab-diep a { color: var(--info); }
.actieblok .ab-vang { font-size: .88rem; color: var(--ink-2); }
.actieblok .ab-vang a { color: var(--positive); }

.neeblok { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-5) 0; }
.neeblok .nb-oordeel {
  font-family: var(--disp); font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  line-height: 1.2; color: var(--ink);
}
.neeblok .nb-waarom { font-size: .94rem; color: var(--ink-2); }
.neeblok .nb-toch {
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border-left: 3px solid var(--signal);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: .9rem; color: var(--ink-2);
}
.neeblok .nb-label {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}

.vangnet {
  margin: var(--s-6) auto 0; max-width: var(--maxw-prose);
  padding: var(--s-4); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.vangnet[hidden] { display: none; }
.vangnet .vn-kop { font-family: var(--disp); font-size: 1.02rem; color: var(--ink); }
.vangnet .vn-uitleg { font-size: .88rem; color: var(--ink-2); }

@media (max-width: 640px) {
  /* Op een smal scherm zakt de knop onder de chips in plaats van ernaast te
     blijven persen; margin-left:auto zou hem daar tegen de rand duwen. */
  .situatiebalk .sb-in { min-height: 0; }
  .situatiebalk .sb-knop { margin-left: 0; }
}
/* ── 13. previewbalk ─────────────────────────────────────────────────────────
   preview.wattradar.nl toont de openstaande pull request, en is verder niet
   van de live site te onderscheiden. Deze balk is het enige wat dat verschil
   draagt, dus hij mag niet over het hoofd te zien zijn: bovenaan, volle
   breedte, en het woord "Preview" voluit — kleur is versterking, geen drager.
   site/_worker.js zet hem erin op die host en nergens anders. */
.previewbalk {
  position: sticky; top: 0; z-index: 999;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  align-items: baseline; justify-content: center;
  padding: var(--s-2) var(--s-4);
  background: var(--signal); color: #fff;
  font-size: .84rem; line-height: 1.4;
}
.previewbalk b {
  font-family: var(--disp); text-transform: uppercase;
  letter-spacing: .08em; font-size: .74rem;
}
.previewbalk a { color: #fff; text-underline-offset: 2px; }

/* ── 14. de top 3 op /vast-of-dynamisch ──────────────────────────────────────
   Het eindpunt van de trechter. De ranglijst eronder blijft de onderbouwing;
   dit blok is de handeling. Daarom als enige op deze pagina een gevulde knop:
   alles eromheen is tekst, tabel of uitklap, dus één massieve knop is genoeg
   om te zeggen wat de volgende stap is.

   De volgorde is die van de som. Staat de goedkoopste zonder partnerlink
   bovenaan, dan krijgt die de gevulde knop en de partners eronder de ghost —
   de rangorde stuurt de nadruk, niet de vergoeding. */
.vdtop { margin: var(--s-5) 0; }
.vdtop .vdtop-uitleg { font-size: .85rem; color: var(--ink-2); margin: .15rem 0 var(--s-3); }
.vdtop .vdtop-nee { font-size: .95rem; color: var(--ink-2); margin: .15rem 0 0; }

.vdtop-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.vdtop-lijst > li {
  display: grid; align-items: center; gap: var(--s-2) var(--s-3);
  grid-template-columns: auto 1fr auto auto;
  padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.vdtop-lijst > li.iseigen { border-color: var(--brand-line); background: var(--brand-soft); }
.vdtop-lijst .rang {
  font-family: var(--disp); font-size: .9rem; font-weight: 700; color: var(--ink-3);
  width: 1.4rem; text-align: center;
}
.vdtop-lijst .wie { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.vdtop-lijst .wie b { font-size: .98rem; }
.vdtop-lijst .waarom { font-size: .8rem; color: var(--ink-3); }
.vdtop-lijst .bedrag {
  font-family: var(--disp); font-size: 1.05rem; font-weight: 700; white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
}
.vdtop-lijst .bedrag small { font-family: var(--font); font-size: .68rem; font-weight: 400; color: var(--ink-3); }
.vdtop-lijst .doen { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.vdtop-lijst .vdtop-geenlink { font-size: .78rem; color: var(--ink-3); white-space: nowrap; }

/* Het label hoort bij de knop, niet in een voetnoot onder de tabel: wie klikt
   moet op dat moment weten dat er een vergoeding tegenover staat. */
.vdtop-label { font-size: .7rem; color: var(--ink-3); max-width: 15rem; text-align: right; line-height: 1.3; }
.vdtop > .vdtop-label { display: block; margin-top: var(--s-2); text-align: left; max-width: none; }

.vdalle { margin-top: var(--s-3); }

@media (max-width: 640px) {
  .vdtop-lijst > li { grid-template-columns: auto 1fr; }
  .vdtop-lijst .bedrag { grid-column: 2; align-items: flex-start; }
  .vdtop-lijst .doen { grid-column: 1 / -1; align-items: stretch; }
  .vdtop-label { text-align: left; max-width: none; }
}