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

/* "Reset mijn gegevens" (27-9-2026): overal naast "Mijn gegevens aanpassen",
   en stiller dan die. Het is een handeling en dus een knop, maar wel een die
   je zelden nodig hebt: tekst in de tweede inktkleur, geen merkkleur. Het
   venster erachter bouwt nav.js. */
.wisknop {
  font: inherit; font-size: .8rem; font-weight: 560;
  background: transparent; border: 0; padding: .2rem 0; cursor: pointer;
  color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 2px;
}
.wisknop:hover { color: var(--ink); text-decoration-thickness: 2px; }
.wisknop[hidden] { display: none; }
html:not(.wr-verteld) [data-wis-gegevens] { display: none; }
.wisvenster {
  width: min(440px, calc(100vw - 32px));
  padding: 22px 24px 20px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink-2);
  box-shadow: 0 24px 48px -24px rgba(11, 18, 25, .45);
  font-size: .9rem; line-height: 1.5;
}
.wisvenster::backdrop { background: rgba(11, 18, 25, .45); }
.wisvenster__kop { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.3; color: var(--ink); }
.wisvenster p { margin: 0 0 10px; }
.wisvenster__alarm { font-size: .84rem; }
.wisvenster__alarm a { color: var(--brand); }
.wisvenster__knoppen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }

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

/* Drie tegels (/zonnepanelen, sinds slim verbruiken een eigen knop heeft):
   op een telefoon passen er twee naast elkaar; de derde krijgt dan de hele
   rij in plaats van een lege plek naast zich. */
@media (max-width: 479px) {
  .minigrid.drie { grid-template-columns: 1fr 1fr; }
  .minigrid.drie > div:last-child { grid-column: 1 / -1; }
}

/* Slim verbruiken op /zonnepanelen (Koen, 28-9-2026): het deel van de
   besparing dat de bezoeker zelf in de hand heeft. Daarom geen stille tegel
   in het raster maar een knop die opvalt: merkvlak, rand, het bedrag, wat
   er gerekend is, en een zichtbare actie. Hij klapt het paneel met de
   apparaten eronder open. */
.zslim {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .15rem 1rem;
  width: 100%; margin-top: .55rem; padding: .8rem .95rem;
  background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-s);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.zslim:hover { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.zslim:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.zslim__kop {
  grid-column: 1 / -1; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand); font-weight: 700;
}
.zslim__bedrag { font-size: .85rem; color: var(--ink-2); }
.zslim__bedrag b {
  margin-right: .2rem; font-family: var(--disp); font-size: 1.45rem; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.zslim__basis { grid-column: 1; font-size: .76rem; line-height: 1.4; color: var(--ink-2); }
.zslim__actie {
  grid-column: 2; grid-row: 2 / span 2; align-self: center;
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: .82rem; font-weight: 700; color: var(--brand);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.zslim__actie svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease;
}
.zslim[aria-expanded="true"] .zslim__actie svg { transform: rotate(180deg); }
@media (max-width: 479px) {
  .zslim { grid-template-columns: 1fr; }
  .zslim__actie { grid-column: 1; grid-row: auto; margin-top: .35rem; }
}
.zslim-paneel {
  margin-top: .5rem; padding: .85rem .95rem;
  background: var(--surface); border: 1px solid var(--brand-line); border-radius: var(--r-s);
}
.zslim-paneel__uitleg { margin: 0 0 .7rem; font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.zslim-paneel .fields { margin-top: .7rem; }
.zslim-paneel__noot { margin: .6rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--ink-3); }
.zslim-paneel__noot:empty { display: none; }
/* Open plakt de uitkomstkolom niet (zie de knop in wattradar.js). */
.calc.tweekolom .uitkomst.zslim-open { position: static; }

/* 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; }
/* ℹ︎-uitklap: de uitleg die vroeger als hint onder elk veld stond. Een tik of
   klik opent hem — geen hover-tooltip, want die bestaat niet op een telefoon. */
details.ib > summary {
  list-style: none; cursor: pointer; width: fit-content;
  font-size: .72rem; color: var(--ink-3); user-select: none;
}
details.ib > summary::-webkit-details-marker { display: none; }
details.ib > summary::before { content: 'ⓘ '; }
details.ib > summary:hover, details.ib[open] > summary { color: var(--brand); }
details.ib > .ib-t {
  margin: .3rem 0 .05rem; font-size: .76rem; line-height: 1.45; color: var(--ink-2);
  background: var(--surface-2); border-radius: var(--r-s); padding: .5rem .65rem;
}
/* .fields is een grid; zonder deze regel wint display:grid van [hidden]. */
.fields[hidden] { display: none; }
/* In de paren beurten-schuif + waarvan-slim-schuif klapt het rechterlabel op
   twee regels (label plus ±-pil); zonder gereserveerde labelhoogte beginnen
   de schuiven van hetzelfde paar dan op verschillende hoogtes. */
.fields.uitlijn .f > label { min-height: 3.5em; align-content: flex-start; }

.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 .wisknop { font-size: .74rem; }
.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; }
/* Op volle breedte (energiecheck, saldering) vouwen de kansen in twee
   kolommen. Kaarten in dezelfde rij zijn even hoog (grid-stretch) en de knop
   staat onderin — anders eindigt elke kaart op zijn eigen hoogte en vallen er
   gaten in het raster (Koen, 22-9). */
.kansen.breed { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.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; flex: 1; align-self: stretch; display: flex; flex-direction: column; }
.kansinhoud .btn { margin-top: auto; align-self: flex-start; }
.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; }

/* Tot AdSense de plekken vult (22-9-2026, bevinding T5 uit de technische test):
   de markup blijft staan, maar de stippeldozen met "970 × 90 · billboard"
   tekenen niet. Dat is ontwikkelaarstekst, voor de bezoeker en voor de
   AdSense-beoordelaar. Zet AdSense een <ins> of <iframe> in een plek, dan
   verschijnt die plek vanzelf, en de zijkolom erbij. Bij activatie zijn deze
   drie regels het enige dat weg hoeft. */
.ad:not(:has(ins, iframe)) { display: none; }
aside:not(:has(ins, iframe)) { display: none; }
@media (min-width: 1320px) { .shell:not(:has(aside ins, aside iframe)) { grid-template-columns: minmax(0, 1fr); } }

/* 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);
}
/* Het logo als tegel (28-9-2026): elk bestand in site/img/lev is 320 x 128,
   het woordmerk bijgesneden op zijn eigen vlak (wit, of de merkkleur als het
   logo wit is). Een woordmerk in een vierkantje van 22 px is onleesbaar;
   2,5 : 1 niet. In licht en donker hetzelfde vlak, zoals bij elk merk. */
.levchip .levlogo {
  width: 4.6rem; height: 1.84rem; flex: none; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--line); background: #fff;
}
.vdtop-lijst .levchip .levlogo { width: 5.4rem; height: 2.16rem; border-radius: 6px; }
@media (max-width: 479px) {
  .levchip .levlogo { width: 3.9rem; height: 1.56rem; }
  .vdtop-lijst .levchip .levlogo { width: 4.6rem; height: 1.84rem; }
}
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); }

/* De aanbod-knop in een ranglijstrij: één herkenbare commerciële uitgang per
   rij, los van de naam-chip en los van de uitklap. Kleur plus woord plus
   vorm; het partnerwoord staat ín de knop, de vergoedingsvoetnoot onder de
   lijst blijft daarnaast bestaan. */
.levaanbod {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .78rem; font-weight: 640; text-decoration: none;
  padding: .28rem .7rem; border-radius: 999px;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  transition: border-color .12s ease;
}
.levaanbod:hover { border-color: var(--brand); }
.levaanbod .uit { font-weight: 700; }
.levaanbod .levpartner {
  font-size: .66rem; font-weight: 500; color: var(--ink-3);
  border-left: 1px solid var(--brand-line); padding-left: .35rem;
}
/* De rij die de rest van de lijst toont: een knop, geen ranglijstrij. */
.levmeer { padding: .7rem 0 .1rem; }
.levmeer .btn { width: 100%; }

/* ── 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); }
/* De twee acties blijven samen rechts; op een breed scherm breken de chips
   eerder af dan dat "Reset mijn gegevens" los op een tweede regel valt. */
.situatiebalk .sb-acties { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.situatiebalk .sb-wis { font-size: .76rem; }
@media (min-width: 900px) {
  .situatiebalk .sb-wat { flex: 1 1 0; min-width: 0; }
}

.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-acties { 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; }

/* 28-9-2026 (Koen: "aanbieders onder de fold, dichtgeklapt; meer kleur,
   aantrekkelijker om te klikken"). De top 3 staat nu ín het resultaatvlak,
   de ranglijst open eronder. Kleur volgt de rangorde van de som, nooit de
   vergoeding: nummer 1 groen, de top 3 een gekleurd rangnummer, en elke
   aanbieder met een link dezelfde knop, partner of niet. */
.result .vdtop { margin: .95rem 0 .35rem; }
.result .vdtop .vdtop-uitleg { margin-bottom: .6rem; }
/* In de smalle uitkomstkolom twee regels per aanbieder: bovenaan wie en
   wat het kost, eronder de knop met zijn partnerlabel ernaast. */
.result .vdtop-lijst > li, .evterug .vdtop-lijst > li {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'rang wie bedrag' 'rang doen doen';
  align-items: center; gap: .45rem .75rem; padding: .7rem .85rem;
}
.result .vdtop-lijst .rang, .evterug .vdtop-lijst .rang { grid-area: rang; align-self: start; }
.result .vdtop-lijst .wie, .evterug .vdtop-lijst .wie { grid-area: wie; }
.result .vdtop-lijst .bedrag, .evterug .vdtop-lijst .bedrag { grid-area: bedrag; align-items: flex-end; }
.result .vdtop-lijst .doen, .evterug .vdtop-lijst .doen {
  grid-area: doen; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .3rem .7rem;
}
.result .vdtop-lijst .vdtop-label, .evterug .vdtop-lijst .vdtop-label { flex: 1 1 12rem; max-width: none; text-align: left; }

/* /eigen-verbruik: de terugleverkosten als geld-uitgang, direct onder de
   uitkomst (28-9-2026). Dezelfde bouwsteen als de top 3 hierboven, in een
   merkvlak; de kleur volgt de rangorde van de som. */
.evterug {
  margin-top: .55rem; padding: .9rem 1rem;
  background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r);
}
.evterug .vdtop { margin: 0; }
.evterug__zin { margin: .15rem 0 .65rem; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.evterug .vdtop-uitleg { margin: .6rem 0 0; font-size: .76rem; }
/* De geld-knop in de tellermodus, onder de brugzin. */
.btgeld { display: block; margin-top: .7rem; }
.vdtop-lijst .rang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
}
.vdtop-lijst > li.islaag {
  border-color: color-mix(in srgb, var(--positive) 55%, var(--line));
  box-shadow: inset 4px 0 0 var(--positive);
}
.vdtop-lijst > li.islaag .rang { background: var(--positive); color: var(--surface); }
.vdtop-lijst > li.islaag .bedrag { color: var(--positive); }
.vdtop-lijst .wie__naam { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; }
.vdtop-lijst .wie__naam .levchip b { font-size: .98rem; }
.vdtop-lijst .btn.ghost { border-color: var(--brand); color: var(--brand); }

/* De open ranglijst als kaart, met rijen over de volle breedte. */
.vdrank {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: .15rem .95rem; margin-top: var(--s-3);
}
.vdrank .levrij > details > summary { margin: 0 -.95rem; padding-inline: .95rem; }
.vdrank .levrij > details > summary:hover { background: var(--brand-soft); }
.vdrank .levrij:nth-child(-n+3) .rang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-weight: 700;
}
.vdrank .levrij.islaag > details > summary { background: var(--positive-soft); box-shadow: inset 4px 0 0 var(--positive); }
.vdrank .levrij.islaag .rang { background: var(--positive); color: var(--surface); }
.vdrank .levrij .levaanbod { font-size: .8rem; padding: .32rem .8rem; }

@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; }
}

/* De handeling in de conclusiekaart van /leveranciers. Dezelfde knop en
   hetzelfde label als op /vast-of-dynamisch — die twee pagina's zijn samen het
   eindpunt van de trechter, en dan moet een overstap er op allebei hetzelfde
   uitzien. */
.lvdoen { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin-top: var(--s-3); }
.lvdoen:empty { display: none; }
.lvdoen .vdtop-label { text-align: left; max-width: none; }

/* ============================================================================
   15. Design System 2.0 (september 2026)
   ============================================================================
   De goedgekeurde laag van de energiecheck, gepromoveerd tot sitelaag: de
   tokens gelden onder .ec (de energiecheck) en onder .wr (elk scherm dat
   in het herontwerp is meegenomen, per scherm aangezet). Componenten dragen
   twee namen, wr- en de oude ec-; de ec-namen verdwijnen zodra de
   energiecheck zelf op wr- staat. Eén definitie, dus geen tweede waarheid.
   Een scherm zonder .wr of .ec merkt hier niets van.
   ========================================================================= */

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

.ec, .wr {
  /* Merk en actie. Eén kleur voor allebei: het diepe teal ís het merk. */
  --color-brand:            var(--brand);
  --color-brand-soft:       var(--brand-soft);
  --color-brand-line:       var(--brand-line);
  --color-action:           var(--brand);
  --color-action-hover:     #085956;
  --color-action-pressed:   #064A48;
  --color-action-text:      var(--on-brand);
  --color-action-tint:      color-mix(in srgb, var(--brand) 7%, var(--surface));

  /* Tekst. */
  --color-text-primary:     var(--ink);
  --color-text-secondary:   var(--ink-2);
  --color-text-tertiary:    var(--ink-3);

  /* Vlakken. */
  --color-surface-page:     var(--page);
  --color-surface-raised:   var(--surface);
  --color-surface-sunken:   var(--surface-2);
  --color-surface-tint:     #E8F1EF;   /* blauwgroen waas: hero, wizardbodem */
  --color-surface-tint-2:   #E5EDF1;   /* koelere variant voor de overgang */
  --color-surface-deep:     #0F2A2A;   /* autoriteitsvlak, spaarzaam */
  --color-text-on-deep:     #EAF3F1;

  /* Lijnen. */
  --color-border-subtle:    var(--line);
  --color-border-default:   #CBD1CD;
  --color-border-strong:    #7F8A87;   /* 3,6:1 op wit: grens van een control (WCAG 1.4.11) */

  /* Oordelen. Elk paar: tekstveilig op surface + een zacht vlak. */
  --color-positive:         var(--positive);
  --color-positive-soft:    var(--positive-soft);
  --color-warning:          var(--warning);
  --color-warning-soft:     var(--warning-soft);
  --color-danger:           var(--negative);
  --color-danger-soft:      var(--negative-soft);
  --color-verdict-no:       #2F5673;   /* "nu niet interessant": rustig, niet grijs */
  --color-verdict-no-soft:  #E7EEF4;

  --color-focus:            color-mix(in srgb, var(--brand) 45%, transparent);

  /* Typografie. Twee families: Space Grotesk voor koppen en bedragen,
     de systeemsans voor alles wat je leest. */
  --font-display: var(--disp);
  --font-text:    var(--font);

  --fs-display: clamp(2.125rem, 1.35rem + 2.6vw, 3.5rem);
  --fs-h1:      clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h2:      clamp(1.3rem, 1.12rem + .7vw, 1.65rem);
  --fs-h3:      1.125rem;
  --fs-lead:    clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-label:   .75rem;
  --fs-button:  .9375rem;
  --fs-money:   clamp(2.75rem, 1.9rem + 3.2vw, 4.25rem);
  --fs-money-s: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);

  /* Ruimte: de bestaande schaal plus 96 voor de grote sectiewissels. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  /* Radius: niet alles is een pil. */
  --radius-control: 12px;
  --radius-card:    18px;
  --radius-surface: 24px;
  --radius-pill:    999px;   /* alleen voor kleine labels */

  /* Schaduw: vooral vlak + rand; elevatie alleen waar iets echt zweeft. */
  --shadow-1: 0 1px 2px rgba(14, 28, 27, .05);
  --shadow-2: 0 1px 2px rgba(14, 28, 27, .04), 0 10px 28px -14px rgba(14, 28, 27, .16);
  --shadow-3: 0 1px 2px rgba(14, 28, 27, .04), 0 16px 40px -22px rgba(14, 28, 27, .22);

  /* De naad tussen tekstvlak en herofoto (zie .ec-hero__media). */
  --ec-naad: 220px;

  /* Beweging: kort en functioneel. */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  color: var(--color-text-primary);
  font-family: var(--font-text);
}

/* Donker: alleen de waarden die hierboven een eigen hexcode hebben. De rest
   verwijst naar wattradar.css en draait daar al mee. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ec,
  :root:not([data-theme="light"]) .wr {
    --color-action-hover:    #6ACFC8;
    --color-action-pressed:  #3FA9A2;
    --color-surface-tint:    #0F201F;
    --color-surface-tint-2:  #0E1B22;
    --color-surface-deep:    #0A1F1E;
    --color-border-default:  #2E3E3C;
    --color-border-strong:   #6A7977;
    --color-verdict-no:      #8DB6D6;
    --color-verdict-no-soft: #12202B;
    --ec-naad: 400px;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 32px -16px rgba(0, 0, 0, .8);
    --shadow-3: 0 2px 6px rgba(0, 0, 0, .5), 0 30px 60px -28px rgba(0, 0, 0, .9);
  }
}
:root[data-theme="dark"] .ec,
:root[data-theme="dark"] .wr {
  --color-action-hover:    #6ACFC8;
  --color-action-pressed:  #3FA9A2;
  --color-surface-tint:    #0F201F;
  --color-surface-tint-2:  #0E1B22;
  --color-surface-deep:    #0A1F1E;
  --color-border-default:  #2E3E3C;
  --color-border-strong:   #6A7977;
  --color-verdict-no:      #8DB6D6;
  --color-verdict-no-soft: #12202B;
  --ec-naad: 400px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 32px -16px rgba(0, 0, 0, .8);
  --shadow-3: 0 2px 6px rgba(0, 0, 0, .5), 0 30px 60px -28px rgba(0, 0, 0, .9);
}

/* ── 2. typografie ───────────────────────────────────────────────────────── */

.wr-display,
.wr-h1,
.wr-h2,
.wr-h3,
.ec-display,
.ec-h1,
.ec-h2,
.ec-h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--color-text-primary);
  text-wrap: balance;
}
.wr-display,
.ec-display { font-size: var(--fs-display); font-weight: 600; line-height: 1.05; letter-spacing: -.028em; }
.wr-h1,
.ec-h1 { font-size: var(--fs-h1);      font-weight: 600; line-height: 1.08; letter-spacing: -.025em; }
.wr-h2,
.ec-h2 { font-size: var(--fs-h2);      font-weight: 600; line-height: 1.12; letter-spacing: -.025em; }
.wr-h3,
.ec-h3 { font-size: var(--fs-h3);      font-weight: 650; line-height: 1.25; letter-spacing: -.015em; }

.wr-lead,
.ec-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text-secondary); max-width: 38em; margin: 0; text-wrap: pretty; }
.wr-body,
.ec-body { font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-primary); margin: 0; }
.wr-small,
.ec-small { font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-secondary); margin: 0; }
.wr-label,
.ec-label {
  font-size: var(--fs-label); font-weight: 650; line-height: 1.3;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-tertiary);
}

/* Bedragen: de merkletter, tabelcijfers, en de eenheid ondergeschikt. */
.wr-money,
.ec-money {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .35em;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-money); line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--color-text-primary);
}
.wr-money__unit,
.ec-money__unit {
  font-family: var(--font-text); font-size: var(--fs-body); font-weight: 500;
  letter-spacing: 0; color: var(--color-text-secondary);
}
.wr-money--s,
.ec-money--s { font-size: var(--fs-money-s); letter-spacing: -.02em; }
.wr-money--s .wr-money__unit,
.ec-money--s .ec-money__unit { font-size: var(--fs-small); }

/* ── 3. iconen ───────────────────────────────────────────────────────────
   De bestaande set van wattradar: 16×16, lijn 1,6, currentColor. Alleen waar
   een icoon iets zegt: bij keuzes, oordelen en de privacyregel — niet naast
   elke zin. */
.wr-icon,
.ec-icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.wr-icon--s,
.ec-icon--s { width: 16px; height: 16px; }
.wr-icon--l,
.ec-icon--l { width: 24px; height: 24px; }

/* ── 4. knoppen ──────────────────────────────────────────────────────────── */

.wr-btn,
.ec-btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-h); padding: 0 var(--space-5);
  font: inherit; font-size: var(--fs-button); font-weight: 650; line-height: 1.2;
  border: 1.5px solid transparent; border-radius: var(--radius-control);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.wr-btn:focus-visible,
.ec-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.wr-btn:active:not(:disabled):not([aria-disabled="true"]),
.ec-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.wr-btn--l,
.ec-btn--l { --btn-h: 56px; padding: 0 var(--space-6); font-size: 1rem; }
.wr-btn--s,
.ec-btn--s { --btn-h: 40px; padding: 0 var(--space-4); font-size: var(--fs-small); }
.wr-btn--block,
.ec-btn--block { width: 100%; }

.wr-btn--primary,
.ec-btn--primary { background: var(--color-action); color: var(--color-action-text); }
.wr-btn--primary:hover,
.ec-btn--primary:hover { background: var(--color-action-hover); }
.wr-btn--primary:active,
.ec-btn--primary:active { background: var(--color-action-pressed); }

.wr-btn--secondary,
.ec-btn--secondary {
  background: var(--color-surface-raised); color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.wr-btn--secondary:hover,
.ec-btn--secondary:hover { border-color: var(--color-border-strong); }
.wr-btn--secondary:active,
.ec-btn--secondary:active { background: var(--color-surface-sunken); }

.wr-btn--ghost,
.ec-btn--ghost { background: transparent; color: var(--color-action); }
.wr-btn--ghost:hover,
.ec-btn--ghost:hover { background: var(--color-action-tint); }
.wr-btn--ghost:active,
.ec-btn--ghost:active { background: var(--color-brand-soft); }

.wr-btn:disabled,
.wr-btn[aria-disabled="true"],
.ec-btn:disabled,
.ec-btn[aria-disabled="true"] {
  cursor: not-allowed; transform: none;
  background: var(--color-surface-sunken); color: var(--color-text-tertiary);
  border-color: var(--color-border-subtle);
}

.wr-btn .wr-icon,
.ec-btn .ec-icon { width: 18px; height: 18px; }
.wr-btn:hover .wr-icon--arrow,
.ec-btn:hover .ec-icon--arrow { transform: translateX(2px); }
.wr-icon--arrow,
.ec-icon--arrow { transition: transform var(--dur-1) var(--ease-out); }

/* Tekstactie: de verdieping. Nooit een knop, dus nooit een vlak. */
.wr-link,
.ec-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--fs-small); font-weight: 620;
  color: var(--color-action); background: none; border: 0; padding: 2px 0;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  cursor: pointer;
}
.wr-link:hover,
.ec-link:hover { text-decoration-color: currentColor; }
.wr-link:hover .wr-icon--arrow,
.ec-link:hover .ec-icon--arrow { transform: translateX(2px); }
.wr-link:focus-visible,
.ec-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.wr-link .wr-icon,
.ec-link .ec-icon { width: 16px; height: 16px; }

/* ── onderwerpkleuren ────────────────────────────────────────────────────
   Waar een chip of label over gaat, los van het oordeel: groen, amber en
   rood blijven voor gunstig, let op en ongunstig. Zon heeft daarom een eigen
   goud en niet het amber van "let op". Elk paar gemeten op WCAG AA (icoon op
   zijn vlak minstens 3:1, in de praktijk 4,7 tot 9,5). */
.ec, .wr {
  --topic-zon:           #8C6400;
  --topic-zon-soft:      #FBF1D6;
  --topic-batterij:      #5E4E98;
  --topic-batterij-soft: #ECE8F6;
  --topic-auto:          var(--info);
  --topic-auto-soft:     color-mix(in srgb, var(--info) 11%, var(--surface));
  --topic-dyn:           var(--brand);
  --topic-dyn-soft:      color-mix(in srgb, var(--brand) 11%, var(--surface));
  /* Het donkere autoriteitsvlak is in beide thema's donker. */
  --color-on-deep-accent: #7FD6CE;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ec,
  :root:not([data-theme="light"]) .wr {
    --topic-zon:           #F0C35A;
    --topic-zon-soft:      #2A220F;
    --topic-batterij:      #A99BDB;
    --topic-batterij-soft: #262040;
  }
}
:root[data-theme="dark"] .ec,
:root[data-theme="dark"] .wr {
  --topic-zon:           #F0C35A;
  --topic-zon-soft:      #2A220F;
  --topic-batterij:      #A99BDB;
  --topic-batterij-soft: #262040;
}

/* ── chips in drie maten ─────────────────────────────────────────────────── */
.wr-chip {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--color-surface-sunken); color: var(--color-text-secondary);
}
.wr-chip .wr-icon { width: 22px; height: 22px; }
.wr-chip--s { width: 28px; height: 28px; border-radius: 8px; }
.wr-chip--s .wr-icon { width: 16px; height: 16px; }
.wr-chip--l { width: 60px; height: 60px; border-radius: 16px; }
.wr-chip--l .wr-icon { width: 30px; height: 30px; stroke-width: 1.45; }
.wr-chip--zon      { background: var(--topic-zon-soft);      color: var(--topic-zon); }
.wr-chip--batterij { background: var(--topic-batterij-soft); color: var(--topic-batterij); }
.wr-chip--auto     { background: var(--topic-auto-soft);     color: var(--topic-auto); }
.wr-chip--dyn      { background: var(--topic-dyn-soft);      color: var(--topic-dyn); }

/* ============================================================================
   16. De startpagina (herontwerp september 2026)
   ============================================================================
   Alles onder .wr-home, dat alleen #v-vandaag draagt. Twee standen met
   dezelfde HTML: de nieuwe bezoeker, en .wr-terug op <html> (gezet door
   thema.js vóór de eerste render) voor wie een geldige bewaarde uitkomst
   van de energiecheck heeft. Geen :has(): de stand zit in klassen en in
   data-live op #wrHome. Foto, labels en annotatie bestaan pas vanaf 960 px;
   daaronder laadt er ook niets van (achtergronden en maskers staan binnen
   die media query).
   ========================================================================= */

.wr [hidden] { display: none !important; }
.wr-home { --wr-naad: 230px; }

.wr-alleen-terug { display: none; }
:root.wr-terug .wr-home .wr-alleen-terug { display: inline; }
:root.wr-terug .wr-home .wr-alleen-nieuw { display: none; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.wr-hero {
  position: relative; overflow: hidden;
  margin-top: var(--space-4);
  padding: 28px 20px 30px;
  background: linear-gradient(160deg, var(--color-surface-tint) 0%, var(--color-surface-tint-2) 100%);
  border-radius: var(--radius-surface);
}
.wr-hero__eyebrow { margin: 0 0 var(--space-3); color: var(--color-action); }
.wr-hero .wr-display { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); max-width: 16ch; }
.wr-hero__lead { margin-top: var(--space-3); max-width: 34em; }
.wr-hero__acties { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); }
.wr-hero__punten {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5);
  margin: var(--space-4) 0 0; padding: 0; list-style: none;
  font-size: var(--fs-small); font-weight: 560; color: var(--color-text-secondary);
}
.wr-hero__punten li { display: inline-flex; align-items: center; gap: 6px; }
.wr-hero__punten .wr-icon { color: var(--color-action); stroke-width: 2; }
@media (max-width: 559px) {
  .wr-hero__acties .wr-btn { width: 100%; }
  .wr-hero__lead { font-size: var(--fs-body); line-height: 1.5; }
}

.wr-hero__foto, .wr-annotatie { display: none; }

@media (min-width: 960px) {
  /* Ritme als mock-up A (correctieronde 25-9-2026): ± 20 px onder de kop
     van de site in plaats van 43. De marge trekt precies de bovenruimte van
     <main> terug (dezelfde clamp), zodat andere routes niets merken. De
     hoogte blijft natuurlijk: tekst plus de onderruimte voor annotatie en
     overlap, geen vaste hoogte. */
  .wr-hero {
    margin-top: calc(20px - clamp(1rem, 2.5vw, 1.7rem));
    padding: 56px 40px 164px 56px; min-height: 600px;
  }
  /* 48 %: de kolom van 484 px op een hero van 1104. Beide knoppen passen er
     naast elkaar in doordat de secondary 20 px zijpadding heeft in plaats
     van 32 (gemeten na het laden van de fonts: 457 px met Segoe UI, ± 477
     px met de bredere systeemletter van de reviewbrowser, 25-9-2026). Met
     grotere tekst breekt de rij gewoon, zoals het hoort. */
  .wr-hero__tekst { position: relative; z-index: 2; max-width: 48%; }
  .wr-hero__acties .wr-btn--secondary { padding-inline: 20px; }

  /* De foto: de rechterhelft over de volle hoogte, geclipt door de hero.
     Maskerverloop plus een kleurlaag in de echte vlakkleur, in licht en
     donker gelijk; donker wisselt alleen naar de donker gegradeerde reeks
     van dezelfde foto (dev/maak-home-beelden.mjs). */
  .wr-hero__foto {
    display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 56%;
    background-color: color-mix(in srgb, var(--color-action) 8%, var(--color-surface-tint));
    background-image: url("/img/home-hero-900.jpg");
    background-image: image-set(
      "/img/home-hero-900.avif" type("image/avif") 1x,
      "/img/home-hero-1200.avif" type("image/avif") 2x,
      "/img/home-hero-900.webp" type("image/webp") 1x,
      "/img/home-hero-1200.webp" type("image/webp") 2x,
      "/img/home-hero-900.jpg" 1x,
      "/img/home-hero-1200.jpg" 2x);
    /* De uitsnede van A: dezelfde schaal (cover op de herohoogte), maar de
       woning verder naar rechts, zodat links meer rustige lucht en bomen
       staan en het huis minder van het beeld vult. Bij 1104 px hero toont
       dit de master van x ± 57 tot ± 960, net als de mock-up. */
    background-size: cover; background-position: 16% 40%; background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .18) calc(var(--wr-naad) * .27), rgba(0, 0, 0, .55) calc(var(--wr-naad) * .59), rgba(0, 0, 0, .9) calc(var(--wr-naad) * .86), #000 var(--wr-naad));
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .18) calc(var(--wr-naad) * .27), rgba(0, 0, 0, .55) calc(var(--wr-naad) * .59), rgba(0, 0, 0, .9) calc(var(--wr-naad) * .86), #000 var(--wr-naad));
    --naadkleur: color-mix(in srgb, var(--color-surface-tint) 55%, var(--color-surface-tint-2));
  }
  .wr-hero__foto::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: var(--wr-naad); pointer-events: none;
    background: linear-gradient(90deg,
      var(--naadkleur) 0,
      color-mix(in srgb, var(--naadkleur) 62%, transparent) 40%,
      color-mix(in srgb, var(--naadkleur) 30%, transparent) 68%,
      color-mix(in srgb, var(--naadkleur) 10%, transparent) 88%,
      transparent 100%);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wr-hero__foto {
      background-image: url("/img/home-hero-donker-900.jpg");
      background-image: image-set(
        "/img/home-hero-donker-900.avif" type("image/avif") 1x,
        "/img/home-hero-donker-1200.avif" type("image/avif") 2x,
        "/img/home-hero-donker-900.webp" type("image/webp") 1x,
        "/img/home-hero-donker-1200.webp" type("image/webp") 2x,
        "/img/home-hero-donker-900.jpg" 1x,
        "/img/home-hero-donker-1200.jpg" 2x);
    }
  }
  :root[data-theme="dark"] .wr-hero__foto {
    background-image: url("/img/home-hero-donker-900.jpg");
    background-image: image-set(
      "/img/home-hero-donker-900.avif" type("image/avif") 1x,
      "/img/home-hero-donker-1200.avif" type("image/avif") 2x,
      "/img/home-hero-donker-900.webp" type("image/webp") 1x,
      "/img/home-hero-donker-1200.webp" type("image/webp") 2x,
      "/img/home-hero-donker-900.jpg" 1x,
      "/img/home-hero-donker-1200.jpg" 2x);
  }

  /* Geen labels op de foto (Koen, 28-9-2026). Mock-up A had er twee; als
     link met pijl (25-9), verkleind (26-9) en als decoratieve chip (27-9)
     zijn ze alle drie afgewezen. De onderwerpen staan als links in de
     energiecheck-sectie (.wr-promo__onderwerpen). Zet ze niet terug. */

  /* De annotatie: het aangeleverde handschrift als masker, in de tekstkleur.
     Zo is het in licht en donker hetzelfde bestand en is er geen filter. */
  .wr-annotatie {
    display: block; position: absolute; z-index: 2; left: 50px; bottom: 56px;
    width: 300px; aspect-ratio: 900 / 159;
    background-color: var(--color-text-secondary);
    -webkit-mask: url("/img/annotatie-energie.png") center / contain no-repeat;
            mask: url("/img/annotatie-energie.png") center / contain no-repeat;
    transform: rotate(-2.5deg); opacity: .9;
  }
}
@media (min-width: 960px) and (max-width: 1149px) {
  .wr-hero__tekst { max-width: 52%; }
  .wr-annotatie { width: 240px; }
}

/* Terugkerende bezoeker: alleen eyebrow en kop, op een lager vlak. */
:root.wr-terug .wr-home .wr-hero__lead,
:root.wr-terug .wr-home .wr-hero__acties,
:root.wr-terug .wr-home .wr-hero__punten,
:root.wr-terug .wr-home .wr-hero__foto,
:root.wr-terug .wr-home .wr-annotatie { display: none; }
/* Eén introductiezone (review #86, 26-9-2026, Koen: "sfeerloos en los"):
   het lichte teal/mint-vlak van B loopt zacht uit in de warme pagina, achter
   het kaartpaar langs, in plaats van als korte strook met een harde
   onderrand. Bestaande tokens, geen nieuwe kleur. */
:root.wr-terug .wr-home .wr-hero {
  min-height: 0; padding: 24px 20px 28px;
  background: linear-gradient(180deg,
    var(--color-surface-tint) 0%,
    var(--color-surface-tint-2) 42%,
    color-mix(in srgb, var(--color-surface-tint-2) 45%, var(--color-surface-page)) 74%,
    var(--color-surface-page) 100%);
}
:root.wr-terug .wr-home .wr-hero .wr-display { font-size: var(--fs-h1); max-width: none; }
:root.wr-terug .wr-home .wr-hero__tekst { max-width: none; }
@media (min-width: 960px) {
  :root.wr-terug .wr-home .wr-hero { padding: 32px 40px 168px; }
}

/* ── livecard en persoonlijke uitkomst ───────────────────────────────────── */
.wr-paar { position: relative; z-index: 4; display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.wr-livecard, .wr-insight {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  padding: 20px 20px 16px;
  min-width: 0;
}
.wr-livecard { display: block; }
@media (min-width: 960px) {
  /* Nieuwe bezoeker: de livecard overlapt de hero rechtsonder, 128 px zoals
     mock-up A. */
  .wr-paar { width: 440px; margin: -128px 40px 0 auto; }
  .wr-livecard, .wr-insight { box-shadow: var(--shadow-3); padding: 22px 24px 18px; }
  /* Terugkerend: livecard en uitkomst naast elkaar, over de lage hero. Sinds
     review #86 op het raster van de hele pagina (dezelfde buitenranden als
     kop, datablok en geldrij; de inzet van 24 px uit B is bewust weg), twee
     gelijke kolommen die even hoog uitkomen (stretch, natuurlijke hoogte),
     en één schaduw voor beide. */
  :root.wr-terug .wr-home .wr-paar {
    width: auto; margin: -136px 0 0; gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  }
  :root.wr-terug .wr-home .wr-livecard,
  :root.wr-terug .wr-home .wr-insight { box-shadow: var(--shadow-2); padding: 22px 24px 20px; }
  /* Beide kaarten eindigen met een voetregel onder een scheidingslijn: de
     persoonlijke kaart met je situatie, de livecard met "Meer cijfers". Zo
     valt de hoogte die de langste kaart bepaalt boven die lijn, als lucht,
     en niet als leeg vlak onderaan. */
  :root.wr-terug .wr-home .wr-livecard { display: flex; flex-direction: column; }
  /* Alleen met actuele prijzen: laden en mislukt verbergen dit blok. */
  :root.wr-terug .wr-home[data-live="live"] .wr-livecard > .wr-alleenlive { display: flex; flex-direction: column; flex: 1; }
  :root.wr-terug .wr-home .wr-livecard .meercijfers {
    margin-top: auto; align-self: stretch; text-align: left;
    padding-top: 14px; border-top: 1px solid var(--color-border-subtle);
  }
  :root.wr-terug .wr-home .wr-livecard .wr-cijfers { margin-bottom: 16px; }
}

.wr-livecard__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wr-livecard__kop .wr-label { margin: 0; }
/* "live" is het enige warme accent op deze pagina: --signal is voor nu. */
.wr-live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 650; color: var(--color-text-secondary); }
.wr-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.wr-livecard__prijs { margin: 6px 0 0; font-size: clamp(2.6rem, 2rem + 1.6vw, 3.1rem); }
.wr-livecard__prijs b { font-weight: inherit; }
.wr-livecard__context { margin: 8px 0 0; }
/* Meter, oordeelwoord en één contextregel naast elkaar, in de maat van A. */
.wr-oordeel { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.wr-oordeel__meter { flex: none; line-height: 0; }
.wr-oordeel__meter svg { display: block; }
.wr-oordeel__tekst { display: grid; gap: 1px; min-width: 0; }
.wr-oordeel__woord { font-size: 1.04rem; font-weight: 650; line-height: 1.25; color: var(--color-text-primary); }
.wr-oordeel .wr-livecard__context { margin: 0; font-size: .78rem; line-height: 1.4; }

.wr-home .minigrid.wr-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.wr-home .minigrid.wr-cijfers > div { background: var(--color-surface-sunken); border: 0; border-radius: 10px; padding: 9px 11px; }
.wr-home .minigrid.wr-cijfers dt { font-size: .64rem; letter-spacing: .06em; }
.wr-home .minigrid.wr-cijfers dd { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-top: 3px; }
.wr-home .minigrid.wr-cijfers dd.wr-wanneer { font-family: var(--font-text); font-size: .7rem; font-weight: 500; letter-spacing: 0; color: var(--color-text-secondary); margin-top: 1px; }
/* Gas, het 90-daags gemiddelde en de mix: context, op elke breedte achter
   "Meer cijfers", zodat de kaart niet met de hero concurreert. */
.wr-home .minigrid.wr-cijfers > .secundair { display: none; }
.wr-home .minigrid.wr-cijfers.toon > .secundair { display: block; }
.wr-home .minigrid.wr-cijfers > .secundair[hidden] { display: none; }
/* De ENTSO-E-noot en de storingsmelding van de mix horen bij de groen-
   tegels: ook achter "Meer cijfers", niet los zonder het getal erbij. */
.wr-home .wr-cijfers:not(.toon) ~ #mixNoot,
.wr-home .wr-cijfers:not(.toon) ~ #mixStoring { display: none; }
.wr-home .meercijfers { display: inline-block; margin-top: 10px; font-size: .78rem; }
@media (max-width: 479px) {
  .wr-home .minigrid.wr-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Morgen heeft een zin nodig; alleen op de tweede rij brak die in drieën. */
  .wr-home .minigrid.wr-cijfers > div:nth-child(3) { grid-column: 1 / -1; }
}

/* Zonder actuele prijzen: geen oud getal als "stroom nu" (data-live op
   #wrHome, gezet door renderVandaag). */
.wr-livecard__laden, .wr-livecard__mislukt, .wr-vandaag__mislukt { display: none; }
.wr-home[data-live="laden"] .wr-alleenlive,
.wr-home[data-live="mislukt"] .wr-alleenlive { display: none; }
.wr-home[data-live="laden"] .wr-livecard__laden { display: block; min-height: 190px; padding-top: 14px; }
.wr-home[data-live="mislukt"] .wr-livecard__mislukt { display: grid; gap: 8px; justify-items: start; margin-top: 10px; }
.wr-home[data-live="mislukt"] .wr-livecard__mislukt p { margin: 0; }
.wr-home[data-live="mislukt"] .wr-vandaag__mislukt {
  display: block; padding: 18px 20px; border-radius: var(--radius-card);
  background: var(--color-surface-sunken);
}
.wr-home[data-live="mislukt"] .wr-vandaag__mislukt p { margin: 0; }
.wr-home[data-live="laden"] .wr-live,
.wr-home[data-live="mislukt"] .wr-live { visibility: hidden; }

/* De persoonlijke kaart, in de hiërarchie van B (review #86): onderwerp,
   een groot bedrag met een kleine eenheid, de korte uitleg en de rekenbasis
   uit dezelfde bewaarde uitkomst, en onderaan, na een scheidingslijn, de
   situatie met "Mijn gegevens aanpassen". De kaart is een flexkolom: het
   profiel zakt naar de onderkant, zodat de twee kaarten van het paar even
   hoog eindigen zonder lege opvulling. */
.wr-insight { display: none; }
:root.wr-terug .wr-home .wr-insight { display: flex; flex-direction: column; gap: 6px; }
.wr-insight__eyebrow { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--color-action); }
.wr-insight__titel { margin: 6px 0 0; font-size: 1.1875rem; line-height: 1.25; }
.wr-insight #homeInsightBedrag { margin: 2px 0 0; font-size: 2.125rem; }
.wr-insight #homeInsightBedrag .wr-money__unit { font-size: .9rem; }
.wr-insight #homeInsightTekst { margin: 0; max-width: 60ch; font-size: .92rem; line-height: 1.5; color: var(--color-text-secondary); }
.wr-insight__basis { margin: 0; max-width: 66ch; font-size: .8rem; line-height: 1.45; color: var(--color-text-tertiary); }
.wr-insight #homeInsightBedrag:empty, .wr-insight #homeInsightTekst:empty, .wr-insight__basis:empty { display: none; }
.wr-insight .wr-link { align-self: flex-start; margin-top: 4px; }
.wr-insight__situatie {
  display: grid; gap: 6px; justify-items: start;
  margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--color-border-subtle);
  font-size: .8rem; line-height: 1.45; color: var(--color-text-secondary);
}
.wr-insight__situatie .wr-link { margin-top: 0; font-size: .8rem; }
.wr-insight__acties { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.wr-insight__acties .wisknop { font-size: .8rem; color: var(--color-text-secondary); }

.wr-home #negBanner { margin-top: var(--space-5); }

/* ── secties ─────────────────────────────────────────────────────────────── */
.wr-sectie { margin-top: clamp(48px, 6vw, 84px); }
.wr-sectiekop { display: grid; gap: 6px; margin-bottom: 20px; max-width: 62ch; }
.wr-sectiekop > * { margin: 0; }
.wr-sectiekop .wr-label { color: var(--color-action); }

/* Vandaag: grafiek met duiding en planblok, en de geld-uitgang. De sectie is
   het doel van "Bekijk de uurprijzen": zonder deze marge landde de kop
   achter de plakkende kop van de site (57 px). Nu staat de eyebrow er 20 px
   onder. */
.wr-home .wr-vandaag { scroll-margin-top: calc(var(--hdr) + 21px); }
/* Grafiek links, één paneel rechts (review #86, 26-9-2026): de losse witte
   kaartjes (goedkoopste, duurste, zon, planner) zijn samen één paneel
   geworden, met het goedkoopste en duurste blok als compacte regels, de
   zonnecontext als stille regel en de planner eronder. Beide panelen
   strekken zich tot dezelfde onderlijn; de inhoud bepaalt de hoogte, de
   legenda en de alarmlink zakken naar die onderlijn. */
.wr-vandaag__grid { display: grid; gap: 20px; }
@media (min-width: 1000px) { .wr-vandaag__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; } }
.wr-grafiekkaart {
  display: flex; flex-direction: column;
  margin: 0; min-width: 0; padding: 16px 20px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
}
.wr-grafiekkaart__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.wr-grafiekkaart .keys { margin-top: auto; padding-top: 8px; }
.wr-grafiekkaart__kop p { margin: 0; font-size: .8rem; color: var(--color-text-secondary); }
.wr-duiding {
  display: flex; flex-direction: column; min-width: 0;
  padding: 16px 18px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
}
.wr-duiding > .wr-link { margin-top: auto; padding-top: 12px; align-self: flex-start; }
/* Goedkoopste en duurste blok: twee tegels naast elkaar, in de vorm van de
   tegels in de livecard (verzonken vlak, klein label, waarde, tijdvak). */
.wr-feiten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.wr-feit {
  display: grid; gap: 2px; align-content: start; min-width: 0;
  padding: 9px 11px; background: var(--color-surface-sunken); border-radius: 10px;
}
.wr-feit__kop {
  display: flex; align-items: center; gap: 5px;
  font-size: .64rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.wr-feit__kop .wr-icon { width: 13px; height: 13px; color: var(--color-text-secondary); }
.wr-feit .wr-waarde { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-primary); }
.wr-feit .wr-sub { font-size: .72rem; color: var(--color-text-secondary); }
/* De zonnecontext: een stille regel over de volle breedte, geen derde tegel. */
.wr-feit--zon {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px;
  padding: 2px 0 0; background: none; border-radius: 0;
  font-size: .8rem; line-height: 1.4; color: var(--color-text-secondary);
}
.wr-feit--zon .wr-icon { flex: none; color: var(--topic-zon); }
.wr-feit--zon b { font-weight: 650; color: var(--color-text-primary); }

/* Het planblok, sinds 25-9-2026 in de duidingskolom: één aanbeveling voor
   het gekozen apparaat, het duurste blok als rustige regel, en de keuze
   uitklapbaar. De summary staat rechts naast de kop; zijn paneel opent in
   de stroom eronder. Geen twee gekleurde vlakken meer, en sinds 26-9 geen
   eigen kaart meer: het is het onderste deel van het duidingspaneel. */
.wr-planner { position: relative; margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--color-border-subtle); }
.wr-planner__kop { display: flex; align-items: center; min-height: 36px; margin: 0; padding-right: 148px; font-size: 1rem; }
.wr-plan__kies > summary {
  position: absolute; top: 10px; right: 0;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 10px 0 12px;
  border: 1.5px solid var(--color-border-default); border-radius: 10px;
  background: var(--color-surface-raised); color: var(--color-text-primary);
  font-size: .86rem; font-weight: 650; cursor: pointer; list-style: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
.wr-plan__kies > summary::-webkit-details-marker { display: none; }
.wr-plan__kies > summary:hover { border-color: var(--color-border-strong); }
.wr-plan__kies > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.wr-plan__kies > summary .wr-icon { color: var(--color-text-secondary); transition: transform var(--dur-1) var(--ease-out); }
.wr-plan__kies[open] > summary .wr-icon { transform: rotate(180deg); }
.wr-plan__kies > p { margin: 8px 0 10px; font-size: .8rem; }
.wr-plan__apps { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-plan__apps button {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 34px; padding: 0 12px;
  font: inherit; font-size: .82rem; font-weight: 600;
  border: 1.5px solid var(--color-border-default); border-radius: var(--radius-pill);
  background: var(--color-surface-raised); color: var(--color-text-secondary); cursor: pointer;
}
.wr-plan__apps button:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.wr-plan__apps button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.wr-plan__apps button .wr-icon { display: none; stroke-width: 2.2; }
.wr-plan__apps button[aria-pressed="true"] { border-color: var(--color-action); color: var(--color-action); background: var(--color-action-tint); }
.wr-plan__apps button[aria-pressed="true"] .wr-icon { display: block; }
.wr-plan__advies { display: grid; gap: 4px; margin-top: 10px; }
.wr-plan__advies > p { margin: 0; }
.wr-plan__wanneer { display: flex; align-items: baseline; gap: 8px; font-size: .92rem; color: var(--color-text-secondary); }
.wr-plan__wanneer .wr-icon { align-self: center; color: var(--color-positive); stroke-width: 2.2; }
.wr-plan__wanneer b {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--color-text-primary);
}
.wr-plan__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
/* De alarmknop uit agendaKnop() als rustige secondary: de geld-uitgang
   eronder blijft de knop van deze sectie. */
.wr-plan .btn.klein {
  min-height: 38px; padding: 0 14px;
  background: var(--color-surface-raised); color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-default); border-radius: 10px;
  font-size: .84rem; font-weight: 650; filter: none;
}
.wr-plan .btn.klein:hover { border-color: var(--color-border-strong); }
.wr-plan .btn.klein:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.wr-plan .btn.klein.done { color: var(--color-positive); border-color: color-mix(in srgb, var(--color-positive) 45%, var(--color-border-default)); }
.wr-plan .linkbtn { font-size: .84rem; }
.wr-plan__vermijden {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border-subtle);
  font-size: .82rem; line-height: 1.45; color: var(--color-text-secondary);
}
.wr-plan__vermijden b { font-weight: 650; color: var(--color-text-primary); }
.wr-plan__geen { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--color-text-secondary); }
.wr-plan__geen b { color: var(--color-text-primary); }

.wr-home .actieblok.wr-geldrij {
  position: relative; display: grid; gap: 14px 28px;
  margin: 24px 0 0; padding: 18px 22px;
  background: var(--color-action-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--color-border-subtle));
  border-radius: var(--radius-card);
}
.wr-geldrij .ab-geld { display: grid; gap: 8px; justify-items: start; }
.wr-geldrij .ab-rol {
  font-size: var(--fs-label); font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.wr-geldrij .ab-reden { margin: 0; font-size: .95rem; color: var(--color-text-primary); max-width: 58ch; }
/* De geld-uitgang als rustige secondary: zichtbaar, niet schreeuwerig. */
.wr-geldrij .ab-geld .btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--color-surface-raised); color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-default); border-radius: var(--radius-control);
  font-weight: 650; box-shadow: none; text-decoration: none;
}
.wr-geldrij .ab-geld .btn:hover { border-color: var(--color-border-strong); background: var(--color-surface-raised); }
.wr-geldrij .ab-geld .btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.wr-geldrij .ab-diep { display: grid; gap: 4px; }
.wr-geldrij .ab-diep a {
  color: var(--color-action); font-weight: 620; font-size: var(--fs-small);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
/* Vanaf 860 px één compacte rij, zoals mock-up A: de uitleg met de
   verdieping eronder links, de knop rechts. De markup blijft die van het
   actieblok; alleen de twee groepen lossen op in het raster, en de
   rollabels ("Wat dit je oplevert", "Verder lezen") blijven voor een
   schermlezer staan maar niet in beeld. */
@media (min-width: 860px) {
  .wr-home .actieblok.wr-geldrij {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "reden knop" "diep knop";
    gap: 6px 32px; align-items: center; padding: 18px 24px;
  }
  .wr-geldrij .ab-geld, .wr-geldrij .ab-diep { display: contents; }
  .wr-geldrij .ab-reden { grid-area: reden; max-width: 76ch; }
  .wr-geldrij .ab-geld .btn { grid-area: knop; }
  .wr-geldrij .ab-diep a { grid-area: diep; justify-self: start; }
  .wr-geldrij .ab-rol {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

.wr-home .ad { margin-block: var(--space-7) 0; }

/* Energiecheck-promo (nieuwe bezoeker) en de compacte regel (terugkerend). */
/* Eén kaart met twee kolommen (Koen, 28-9-2026): links uitleg en de knop,
   rechts drie gelijke linkrijen. Het kaartvlak zit op de sectie zelf, over
   de volle contentbreedte, zodat de randen gelijk lopen met de secties
   erboven en eronder. Tot 28-9 stonden hier een losse kaart en drie
   verspringende kaartjes ernaast, die als losse stickers lazen. Tot 768 px
   staan de twee delen onder elkaar. */
.wr-promo {
  display: grid; gap: 24px; padding: 24px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-surface); box-shadow: var(--shadow-2);
}
@media (max-width: 419px) { .wr-promo { padding: 20px; } }
@media (min-width: 769px) {
  .wr-promo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; padding: 32px; }
}
.wr-promo__uitleg { display: grid; gap: 12px; justify-items: start; align-content: start; }
.wr-promo__uitleg > * { margin: 0; }
.wr-promo__uitleg .wr-label { color: var(--color-action); }
.wr-promo__tekst { color: var(--color-text-secondary); max-width: 52ch; }
.wr-promo__actueel {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--color-surface-sunken);
  font-size: .9rem; line-height: 1.5; color: var(--color-text-secondary);
}
.wr-promo__actueel b { color: var(--color-text-primary); }
/* De drie onderwerprijen: elk één link over de hele rij, met de titel teal
   en onderstreept, zodat hij zonder hover als link leest. Geen vlak, rand
   of schaduw per rij, alleen haarlijnen ertussen; de rijen delen de hoogte
   van de kolom gelijk, zonder vaste maat. De link steekt 12 px buiten de
   kolom, zodat icoon en tekst op de kolomrand staan en de hovertint en de
   focusring er ruimte omheen hebben. Geen pijl: de knop links blijft de
   hoofdactie. */
.wr-promo__onderwerpen { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; }
.wr-promo__onderwerpen li { display: flex; }
.wr-promo__onderwerpen li + li { border-top: 1px solid var(--color-border-subtle); }
.wr-promo__onderwerpen a {
  flex: 1; display: flex; align-items: center; gap: 12px;
  margin-inline: -12px; padding: 16px 12px; border-radius: 12px;
  color: var(--color-text-primary); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out);
}
.wr-promo__onderwerpen a:hover { background: var(--color-action-tint); }
.wr-promo__onderwerpen a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 0; }
.wr-promo__onderwerpen .wr-chip { width: 36px; height: 36px; border-radius: 10px; }
.wr-promo__onderwerpen .wr-chip .wr-icon { width: 20px; height: 20px; }
.wr-promo__titel {
  display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--color-action);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.wr-promo__onderwerpen a:hover .wr-promo__titel { text-decoration-color: currentColor; }
.wr-promo__sub { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.5; color: var(--color-text-secondary); }
:root.wr-terug .wr-home .wr-promo { display: none; }

.wr-ecregel { display: none; }
:root.wr-terug .wr-home .wr-ecregel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 18px 22px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
}
.wr-ecregel p { margin: 0; }
.wr-ecregel .wr-small { display: block; margin-top: 2px; }

/* Het enige donkere vlak van de pagina. In donker krijgt het een rand, anders
   valt het weg tegen de pagina. */
.wr-deep {
  padding: clamp(28px, 4vw, 52px);
  background: var(--color-surface-deep); color: var(--color-text-on-deep);
  border-radius: var(--radius-surface);
}
.wr-deep h2 { margin: 0 0 26px; color: inherit; }
.wr-deep__rij { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .wr-deep__rij { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.wr-deep__rij li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.wr-deep .wr-chip--l { background: color-mix(in srgb, var(--color-text-on-deep) 9%, transparent); color: var(--color-on-deep-accent); }
.wr-deep b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 1.06rem; letter-spacing: -.01em; color: var(--color-text-on-deep); }
.wr-deep__rij li > span:last-child > span { display: block; font-size: .88rem; line-height: 1.55; color: color-mix(in srgb, var(--color-text-on-deep) 80%, transparent); }
/* De commerciële toelichting: de scheidingslijn over de volle binnenbreedte
   van het vlak, de tekst zelf op een rustige leesbreedte. */
.wr-deep__noot {
  margin: 26px 0 0; padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--color-text-on-deep) 16%, transparent);
}
.wr-deep__noot p {
  margin: 0; max-width: 74ch;
  font-size: .84rem; line-height: 1.55; color: color-mix(in srgb, var(--color-text-on-deep) 74%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wr-deep { border: 1px solid var(--color-border-default); }
}
:root[data-theme="dark"] .wr-deep { border: 1px solid var(--color-border-default); }
:root.wr-terug .wr-home .wr-deep { display: none; }

.wr-trust {
  display: grid; gap: 16px;
  margin: clamp(40px, 5vw, 64px) 0 0; padding: 22px 0;
  list-style: none; border-block: 1px solid var(--color-border-subtle);
}
@media (min-width: 760px) { .wr-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.wr-trust li { display: grid; gap: 2px; }
.wr-trust b { font-weight: 650; }
.wr-trust span { font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-secondary); }

.wr-home .wr-verdieping { margin-top: clamp(40px, 5vw, 64px); }

/* Uitgang 3: het vangnet, als eigen blok van deze pagina. */
.wr-vangnet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; margin-top: 48px; padding: 24px 28px;
  background: var(--color-surface-sunken); border-radius: var(--radius-card);
}
.wr-vangnet h2 { margin: 0 0 4px; }
.wr-vangnet p { margin: 0; max-width: 52ch; }

/* Het cookiepaneel (site/consent.js) op de startpagina: vanaf 960 px compact
   linksonder, want in het midden bedekte het de livecard met de prijs van
   nu. consent.js zet zijn opmaak inline; alleen de plek en de maat wijken
   hier af, vandaar !important. Beide knoppen blijven even groot en naast
   elkaar. */
@media (min-width: 960px) {
  #wrConsent.wr-consent-home {
    left: 24px !important; right: auto !important; bottom: 24px !important;
    margin: 0 !important; max-width: 384px !important;
    padding: .8rem .95rem !important; font-size: .8rem !important;
  }
}

/* Aanraken en beweging. */
@media (pointer: coarse) {
  .wr-link { min-height: 44px; }
  .wr-btn--s { --btn-h: 44px; }
}
@media (max-width: 899px) {
  /* Een aangesprongen knop of link komt boven de vaste tabbalk uit. */
  .wr-home :is(a, button, summary) { scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .wr *, .wr *::before, .wr *::after { animation: none !important; transition: none !important; }
}

/* ---- één profiel (25-9-2026) ----
   De rekenbasis bij een uitkomst (/vast-of-dynamisch) en bij een kanskaart:
   klein, onder het bedrag, in de tweede tekstkleur. Geen nieuw component,
   alleen een regel die zegt waarmee er gerekend is. De profielregel op
   /leveranciers leent de opmaak van .watbetekent. */
.vdbasis { margin: .55rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.kans .basis { margin: 0 0 .45rem; font-size: .8rem; line-height: 1.45; color: var(--ink-3); max-width: 56ch; }
.lvprofiel { margin-bottom: var(--s-3); }
.f .hint .seg.klein { margin: .25rem .25rem .25rem 0; vertical-align: middle; }
.autonoot__regel { display: block; }