/* ============================================================================
   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, de drie taken, het menu
     5. componenten
     6. datavisualisatie
     7. formulieren
     8. rekentool-schil
     9. resultaten en vertrouwen
    10. commercie
    11. voettekst en losse pagina's
   ========================================================================= */

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

/* De letter: Inter (SIL OFL), zelf gehost als variabele latin-subset
   (site/inter-latin.woff2, 105 kB, wght 100-900, opsz 14-32), uit het
   ontwerppakket van 22-10-2026 en PR #148; licentie in
   docs/wr4/ontwerp-v1/Inter-LICENSE.txt. Eén familie voor koppen, bedragen
   en lopende tekst (DESIGNSYSTEEM.md §2); koppen en bedragen zetten
   font-variation-settings "opsz" 32 (de displaystand). Geen externe
   fontrequest: snelheid en privacy wegen zwaarder dan een tweede letter. */
@font-face {
  font-family: "Inter";
  src: url("inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Eén thema: licht (besluit Koen, 9-11-2026). De donkere tokens zijn weg uit
   beide stylesheets; `only light` zegt browsers bovendien geen eigen donkere
   stand (Chrome "Auto Dark Theme") over deze pagina's te leggen. Het
   insluitbare blok (site/widget.js) heeft een eigen palet en valt hierbuiten. */
:root {
  color-scheme: only light;

  /* Vlakken. Warm off-white in plaats van koel grijsblauw: rustiger op een
     scherm waar de hele dag cijfers op staan. */
  --page:        #F5F7F3;
  --bg:          var(--page);   /* de naam uit het designsysteem (DESIGNSYSTEEM.md §2) */
  --surface:     #FFFFFF;
  --surface-2:   #EDF5F0;
  --surface-3:   #E5F1EA;

  /* Tekst. Diep blauwgroen in plaats van zwart — leest zachter en hoort bij
     het merk. Alle drie halen AA op page én surface. */
  --ink:         #132E29;
  --ink-2:       #4C5B5A;
  --ink-3:       #566361;   /* 5,1:1 op brand-soft; #5F6C6B haalde daar 4,47 sinds brand-soft #D6EEE2 is */
  --muted:       #5C716A;   /* 4,8:1 op page: gedempte tekst (designsysteem); niet op brand-soft (4,3) */
  --subtle:      #81958C;   /* 3,1:1: alleen decoratief, nooit lopende tekst */

  /* Lijnen. Haarlijnen die scheiden zonder te hokken. */
  --line:        #DCE7DF;
  --border:      var(--line);
  --veldrand:    #C9D9CF;   /* invoervelden: iets donkerder dan een scheidslijn */
  --grid:        #EAE8E1;
  --axis:        #BFC5C2;

  /* Merk: volwassen diepteal. Radar, geen milieugroen. */
  --brand:       #086F61;
  --brand-deep:  #05483F;   /* hover op een knop, het actieve item in de kop */
  --on-brand:    #FFFFFF;   /* 6,0:1 op de merkkleur */
  --brand-soft:  #D6EEE2;
  --brand-weak:  var(--brand-soft);
  --brand-line:  #9CC7C5;

  /* Goud: schattingen, scenario's, "nog niet te berekenen". Geen alarmkleur. */
  --gold-bg:     #FCF6E8;
  --gold-ink:    #7D5815;
  --fout:        #A33A12;   /* foutmeldingen bij een veld */
  /* De focusring: twee kleuren, zodat hij overal te zien is. De ring zelf is
     goud-inkt (6,4:1 op wit, 5,9 op page); de halo van 2 px tussen element en
     ring is wit, voor op een merkkleurige knop (6,1:1 op brand). Het goud uit
     het pakket, #E9AE3D, haalde 1,98:1 op wit. Bewaakt in tools/focusring.test.ts. */
  --focus:       #7D5815;
  --focus-halo:  #FFFFFF;

  /* 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(245, 247, 243, .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;   /* tegel, paneel */
  --r-s: 10px;   /* klein vlak */
  --r-l: 20px;   /* groot vlak */
  /* Het designsysteem (§2): kaart 20, veld 12, knop 12, chip 999. */
  --radius:  22px;
  --r-kaart: 20px;
  --r-veld:  12px;
  --r-knop:  12px;

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

  --font: "Inter", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --disp: "Inter", 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 */
}

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

/* De focusring: 3 px goud-inkt op 2 px afstand, en die 2 px gevuld met de
   halo (wit in het licht, de paginakleur in het donker). Op een wit vlak
   draagt de ring het contrast, op een merkkleurige knop de halo: zo is hij
   overal te zien, ook waar één kleur dat niet redt (ChatGPT-review op #157,
   27-10-2026). De halo zit in box-shadow, dus een eigen schaduw wijkt zolang
   het element focus heeft. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
  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, .iconbtn, .menu a, footer.foot li a {
    min-height: 44px;
  }
  .iconbtn { min-width: 44px; }
  footer.foot li a { display: inline-flex; align-items: center; }
  /* .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; }

/* De drie taken (V1, PR 1 "de schil", 27-10-2026; IA-UX-MATRIX.md §1.3):
   Energiecheck, Vergelijken en Slim besparen in één rij in een zacht vlak,
   het actieve item wit met de diepe merkkleur — het prototype
   (docs/vereenvoudiging/intake/). Vanaf 900 px; eronder zit alles achter de
   menuknop. Geen tabbalk meer, geen bel, geen situatiebalk. De markup komt
   uit tools/schil-bouw.mjs, het gedrag uit nav.js. */
.taken { display: none; }
@media (min-width: 900px) {
  .taken {
    display: flex; align-items: center; gap: .2rem;
    padding: .22rem; margin-left: .4rem;
    background: var(--surface-2); border-radius: 12px;
  }
  .taken a, .taken button {
    font: inherit; font-size: .88rem; font-weight: 640;
    color: var(--muted); background: transparent; border: 0; border-radius: 9px;
    padding: .45rem .85rem; min-height: 36px;
    display: inline-flex; align-items: center; gap: .35rem;
    text-decoration: none; cursor: pointer; white-space: nowrap;
  }
  .taken a:hover, .taken button:hover { color: var(--ink); }
  .taken [aria-current="page"], .taken [aria-expanded="true"] {
    background: var(--surface); color: var(--brand-deep);
    box-shadow: 0 1px 4px rgba(10, 50, 30, .10);
  }
  .taken button svg { opacity: .7; transition: transform .15s; }
  .taken [aria-expanded="true"] svg { transform: rotate(180deg); }
  .menuknop { display: none; }
}

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

/* Het menu: één paneel onder de plakkende kop. Op desktop drie kolommen
   onder "Slim besparen" (rekentools, prijzen en plannen, uitleg); op mobiel
   hetzelfde paneel achter de menuknop, met Energiecheck en Vergelijken
   erbij. Eén lijst, dus nooit een link die maar op één schermmaat bestaat.
   Absoluut gepositioneerd met een eigen scroll: op een klein scherm duwt hij
   de pagina niet omlaag en past hij altijd. */
.menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 45;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  max-height: calc(100vh - var(--hdr)); overflow-y: auto; overscroll-behavior: contain;
}
.menu-in { display: grid; gap: var(--s-2); padding-block: var(--s-3) var(--s-5); }
.menu a {
  display: flex; align-items: center; min-height: 44px; padding: .3rem 0;
  font-size: .95rem; font-weight: 620; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--brand); }
/* Kopjes in het menu en de voet: klein, gespatieerd, in de merkkleur — een
   scheiding en geen niveau erbij. */
.navgroep {
  font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin: var(--s-4) 0 .15rem;
}
.menu-taken a { font-size: 1.02rem; font-weight: 680; }
@media (min-width: 900px) {
  .menu-in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); padding-block: var(--s-4) var(--s-5); }
  .menu-taken { display: none; }
  .menu a { min-height: 40px; border-bottom: 0; font-size: .92rem; }
  .menu .navgroep { margin: 0 0 .35rem; }
}
.menuknop { display: grid; }

/* De cookiemelding (site/consent.js; issue #164, 30-10-2026, ontwerp in PR
   #165). Compact: een kop, één zin met de link naar /privacy en twee
   gelijkwaardige knoppen van 44 px, op de tokens van het designsysteem.
   Onderaan, boven de safe area. Zolang ze staat, draagt <html> de klasse
   wr-consent-open en haar gemeten hoogte als --wr-consent-h (consent.js);
   daaronder schuift de pagina boven de melding. */
.wr-consent {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 100;
  max-width: 420px; margin: 0 auto; padding: 10px 12px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 10px 30px rgba(11, 18, 25, .18);
  font: 500 .8rem/1.4 var(--font); color: var(--muted);
}
.wr-consent p { margin: 0; }
.wr-consent .wr-consent__kop { margin: 0 0 2px; font-weight: 750; font-size: .86rem; color: var(--ink); }
.wr-consent a { color: var(--brand); font-weight: 650; }
.wr-consent__knoppen { display: flex; gap: 8px; margin-top: 8px; }
/* Eén regel voor allebei: niets aan Accepteren dat Weigeren niet heeft. */
.wr-consent__knop {
  flex: 1 1 0; min-height: 44px; padding: 8px 10px; cursor: pointer;
  font: 750 .86rem/1 var(--font); border-radius: var(--r-knop);
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--page);
}
.wr-consent__knop:hover { opacity: .9; }
/* Een aangesprongen veld (scrollIntoView, een fout in de intake) landt
   boven de melding, op elke breedte; dat kost geen ruimte. */
html.wr-consent-open { scroll-padding-bottom: calc(var(--wr-consent-h, 0px) + 8px); }
/* De gereserveerde ruimte onderaan, alleen waar de melding de breedte vult
   en de pagina het mobiele menu heeft (onder 900 px). Op desktop staat de
   melding als smalle kaart onderin en krijgt de pagina geen witruimte. */
@media (max-width: 899px) {
  html.wr-consent-open body { padding-bottom: var(--wr-consent-h, 0px); }
  html.wr-consent-open .menu {
    max-height: calc(100vh - var(--hdr) - var(--wr-consent-h, 0px));
    max-height: calc(100dvh - var(--hdr) - var(--wr-consent-h, 0px));
  }
}

/* De plek van de profielchip (DESIGNSYSTEEM.md §3), leeg tot PR 2. */
.profielchip { display: none; }

/* 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: 40px; height: 40px; 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 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: 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; }
}


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

@media (prefers-reduced-motion: reduce) {
  .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-kaart);
}
.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: var(--r-knop);
  padding: .62rem 1.15rem; cursor: pointer; text-decoration: none;
  transition: background .15s, filter .15s, transform .05s;
}
.btn:hover { background: var(--brand-deep); }
.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.ghost:hover, .btn.btn-outline:hover { background: var(--surface-2); }
.btn.stil { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn.stil:hover { background: var(--surface-2); color: var(--ink); }
/* De omlijnde knop uit het prototype: dezelfde vorm als .ghost, in de merkkleur. */
.btn.btn-outline { background: var(--surface); color: var(--brand); border-color: var(--brand-line); }

/* Chip: één regel in een pil — "Voor jou", "Scenario", het profiel. */
.chip {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  padding: .3rem .7rem; font-size: .76rem; font-weight: 650; white-space: nowrap; color: var(--ink);
}
.chip.chip-brand { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-deep); }
.chip.chip-goud { background: var(--gold-bg); border-color: transparent; color: var(--gold-ink); }

/* Noot: de scope van een lijst of som. Goud als hij een beperking meldt
   ("12 dynamische contracten, vaste niet doorgerekend"), neutraal anders. */
.noot {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .7rem .9rem; border-radius: var(--r-veld);
  background: var(--gold-bg); color: var(--gold-ink);
  font-size: .86rem; line-height: 1.45;
}
.noot.neutraal { background: var(--surface-2); color: var(--ink-2); }

/* Fout- en lege stand (template F, DESIGNSYSTEEM.md §4): icoon, wat er niet
   is, waarom in één zin, één knop. Nooit een vervangend bedrag uit een
   andere methode. De knop is alleen gevuld als hij de primaire taak van de
   pagina is; anders omlijnd. */
.icon-badge {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 14px; background: var(--surface-2); color: var(--brand);
}
.icon-badge.goud { background: var(--gold-bg); color: var(--gold-ink); }
.foutkaart {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start;
  padding: 1.25rem 1.4rem;
}
.foutkaart h1, .foutkaart h2 { font-size: 1.3rem; margin: .15rem 0 .4rem; }
.foutkaart p { color: var(--ink-2); margin: 0; }
.fout-taken { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
@media (max-width: 700px) {
  .foutkaart { grid-template-columns: 1fr; padding: 1rem; }
  .fout-taken .btn { width: 100%; }
}

.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. */
/* De sprong van een conclusiekaart naar haar rij in de lijst: sinds a11y
   #141 (20-10-2026) een eigen tekstknop in de kaart, niet de hele kaart als
   knop (daar staat al een overstapknop in). */
.result .levspring { display: inline-block; margin-top: .45rem; font-size: .8rem; min-height: 44px; }
.result .levspring:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.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 ─────────────────────────────────────── */

/* De voet: de enige plek met álle routes, in vier kolommen (Besparen,
   Vergelijken, Prijzen en plannen, Over wattradar), met Cookiekeuze, Privacy
   en Voorwaarden. Eén kolom onder 376 px, twee tot 900 px, daarboven vier.
   Elke link minstens 44 px hoog op een aanraakscherm (de regel staat bij de
   andere raakvlakken, sectie 2). */
footer.foot {
  border-top: 1px solid var(--line); margin-top: 2.8rem;
  padding: 1.8rem 0 1.2rem; font-size: .83rem; color: var(--muted);
}
footer.foot .kolommen { display: grid; gap: 1.4rem 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 376px) { footer.foot .kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { footer.foot .kolommen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
footer.foot h2 {
  font-size: .69rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); font-weight: 750; margin: 0 0 .5rem;
}
footer.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
footer.foot li a { display: inline-block; padding-block: .3rem; color: var(--ink-2); text-decoration: none; }
footer.foot a { color: var(--ink-2); text-decoration: none; }
footer.foot a:hover { color: var(--brand); text-decoration: underline; }
footer.foot a[aria-current="page"] { color: var(--brand); font-weight: 650; }
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; sinds 27-10-2026 ook dezelfde kop
   en voet (tools/schil-bouw.mjs). */

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; }
/* De rij is een raster van twee kolommen (a11y #141): de uitklap (summary
   en onderbouwing) links, de aanbodknop rechts, buiten de summary. Onder
   640 px staat de knop onder de samenvatting, ingesprongen tot de naam. */
.levrij { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; align-items: start; }
.levrij > details { min-width: 0; }
.levrij__doen { padding: .62rem 0 0; }
@media (max-width: 639px) {
  .levrij { grid-template-columns: minmax(0, 1fr); }
  .levrij__doen { padding: 0 0 .6rem 1.8rem; }
}
.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 componenten
   die overal gevuld worden in plaats van drieëndertig ontwerpen. De
   situatiebalk hoorde hier ook bij; sinds V1 (27-10-2026) is hij weg en komt
   de profielchip (DESIGNSYSTEEM.md §3) in zijn plaats, in PR 2.

     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. */


.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); }

/* ── 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; }
.previewbalk__nr { display: none; }
@media (max-width: 899px) {
  /* Onder 900 px (de tabbalk onderin) als vast pilletje rechts in de koptekst,
     buiten de stroom: de preview begint dan op dezelfde hoogte als productie
     en een knop die live vrij boven de tabbalk staat, staat dat hier ook. */
  .previewbalk {
    position: fixed; top: 11px; right: 10px; left: auto; width: auto;
    padding: 3px 10px; border-radius: 999px; gap: .35em;
    font-size: .72rem; line-height: 1.3; white-space: nowrap;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
  }
  .previewbalk b { font-size: .64rem; }
  .previewbalk__nr { display: inline; font-weight: 600; }
  /* Zonder commit: op 360 px raakte het pilletje anders de themaknop in de koptekst. */
  .previewbalk__zin, .previewbalk__sha, .previewbalk a { display: none; }
}

/* ── 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, .partnermodule .vdtop-lijst > li, .ec-top.has-partner .ec-partnertop .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, .partnermodule .vdtop-lijst .rang, .ec-top.has-partner .ec-partnertop .vdtop-lijst .rang { grid-area: rang; align-self: start; }
.result .vdtop-lijst .wie, .evterug .vdtop-lijst .wie, .partnermodule .vdtop-lijst .wie, .ec-top.has-partner .ec-partnertop .vdtop-lijst .wie { grid-area: wie; }
.result .vdtop-lijst .bedrag, .evterug .vdtop-lijst .bedrag, .partnermodule .vdtop-lijst .bedrag, .ec-top.has-partner .ec-partnertop .vdtop-lijst .bedrag { grid-area: bedrag; align-items: flex-end; }
.result .vdtop-lijst .doen, .evterug .vdtop-lijst .doen, .partnermodule .vdtop-lijst .doen, .ec-top.has-partner .ec-partnertop .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, .partnermodule .vdtop-lijst .vdtop-label, .ec-top.has-partner .ec-partnertop .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__link { margin: 0; font-size: .86rem; }
/* De gedeelde top drie (top3Html) buiten /eigen-verbruik: de zin die het blok
   aan de uitkomst knoopt, en het blok onder het salderingsbedrag. */
.vdtop-zin { margin: .15rem 0 .65rem; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.saldterug .vdtop { margin: var(--s-4) 0 0; }
.saldterug[hidden] { display: none; }
/* De zonaanbieders op /zonnepanelen als rij met aanbodknop, geen chips. */
.zonaanbod { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.zonaanbod li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem;
  padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.zonaanbod .levchip b { font-size: .95rem; }
/* Eén vroege CTA in de lopende tekst van een kennispagina. */
.prose .cta-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 1rem 0 1.4rem; }
.prose .cta-inline .mut { font-size: .84rem; }
.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; }

/* De aanbodkaart (Wattradar 4.0 fase 3, #132, 21-10-2026; reviewronde 1):
   dezelfde top drie (top3Html met spec.aanbod), per rij in de volgorde die
   een bezoeker van een vergelijker kent: wie en welk contract, de
   geschatte stroomkosten per maand groot met het jaarbedrag en het verschil
   met nu eronder, één knop, en de prijsdetails als dichte uitklap. De
   selectors zijn bewust zwaarder dan de contextregels hierboven (.result,
   .evterug, .partnermodule, .ec-top.has-partner): de kaart ziet er in elke
   context hetzelfde uit. */
.vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'rang wie prijs' 'rang waarom prijs' 'rang doen doen' 'rang details details';
  align-items: start; gap: .2rem .7rem; padding: .65rem .85rem;
}
.vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij > .rang { grid-area: rang; align-self: start; margin-top: .15rem; }
.vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij > .wie { grid-area: wie; gap: .15rem; align-self: center; }
.vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij > .waarom { grid-area: waarom; }
.vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij > .prijs {
  grid-area: prijs; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; text-align: right;
}
.vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij > .doen {
  grid-area: doen; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .25rem .7rem; margin-top: .1rem;
}
.vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij > .doen .vdtop-label { flex: 1 1 12rem; max-width: none; text-align: left; }
.vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij > .vdtop-details { grid-area: details; }
.vdtop--aanbod .waarom { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; }
.vdtop--aanbod .waarom .soort {
  font-size: .7rem; font-weight: 650; letter-spacing: .02em; color: var(--ink-2);
  padding: 0 .45rem; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; line-height: 1.5;
}
/* Het maandbedrag draagt de nadruk: op de cent, met de eenheid eronder. */
.vdtop--aanbod .maand {
  font-family: var(--disp); font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end;
}
.vdtop--aanbod .maand small { font-family: var(--font); font-size: .68rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-top: .25rem; white-space: normal; max-width: 12rem; line-height: 1.25; }
.vdtop--aanbod .prijs__jaar { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.vdtop--aanbod .bedrag { font-size: .86rem; font-weight: 600; color: var(--ink-2); flex-direction: row; align-items: baseline; gap: .3rem; }
.vdtop--aanbod .bedrag small { font-size: .72rem; }
.vdtop--aanbod .islaag .maand { color: var(--positive); }
.vdtop--aanbod .islaag .bedrag { color: var(--ink-2); }
/* Het verschil met nu: in woorden, met een klein teken ervoor. Minder is de
   positieve kleur, meer de waarschuwende; onder een nee en bij gelijk
   neutraal. */
.vdtop--aanbod .nu {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 650; line-height: 1.3; color: var(--ink-2); white-space: nowrap;
}
.vdtop--aanbod .nu::before { content: '='; font-weight: 700; }
.vdtop--aanbod .nu.is-minder { color: var(--positive); }
.vdtop--aanbod .nu.is-minder::before { content: '↓'; }
.vdtop--aanbod .nu.is-meer { color: var(--warning); }
.vdtop--aanbod .nu.is-meer::before { content: '↑'; }
.vdtop--aanbod .nu.is-neutraal { color: var(--ink-2); }
.vdtop--aanbod .vdtop-nu-niet { color: var(--ink); }
/* De prijsdetails: een dichte uitklap per rij, met een echte summary en
   zonder link of knop erin. */
.vdtop-details { margin: .1rem 0 0; font-size: .8rem; color: var(--ink-2); }
.vdtop-details > summary {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; cursor: pointer; list-style: none;
  font-weight: 640; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
}
.vdtop-details > summary::-webkit-details-marker { display: none; }
.vdtop-details > summary::before { content: '+'; font-weight: 700; width: 1em; text-align: center; }
.vdtop-details[open] > summary::before { content: '−'; }
.vdtop-details > summary:hover { text-decoration-color: currentColor; }
.vdtop-details > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.vdtop-dl { margin: .35rem 0 0; display: grid; gap: .25rem .9rem; }
.vdtop-dl > div { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: .5rem; align-items: baseline; }
.vdtop-dl dt { margin: 0; color: var(--ink-3); }
.vdtop-dl dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.vdtop-details__noot { margin: .5rem 0 0; font-size: .76rem; color: var(--ink-3); max-width: 60ch; }
/* Op een telefoon past het prijsblok niet naast logo en naam: dan staat het
   onder de naam, links uitgelijnd, het maandbedrag met zijn eenheid ernaast
   en het jaarbedrag met het verschil op de regel eronder. */
@media (max-width: 479px) {
  .vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij {
    grid-template-areas: 'rang wie wie' 'rang prijs prijs' 'rang waarom waarom' 'rang doen doen' 'rang details details';
  }
  .vdtop.vdtop--aanbod > .vdtop-lijst > li.vdtop-rij > .prijs { align-items: flex-start; text-align: left; gap: .1rem; }
  /* Het maandbedrag met zijn eenheid ernaast, die in twee korte regels mag
     vallen; daaronder het jaarbedrag en het verschil op één regel. */
  .vdtop--aanbod .maand { font-size: 1.45rem; flex-direction: row; align-items: center; gap: .45rem; }
  .vdtop--aanbod .maand small { margin-top: 0; max-width: 8.5rem; line-height: 1.15; }
  .vdtop--aanbod .prijs__jaar { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
  /* De inleidende zin boven de lijst staat op een telefoon in de weg van het
     eerste aanbod (review P1 op #142, reviewronde 1 op #146); de kop
     "Direct bekijken" en de conclusie erboven zeggen al wat dit is. */
  .vdtop--aanbod .vdtop-zin:not(:has(.vdtop-nu-niet)) { display: none; }
  .vdtop-dl > div { grid-template-columns: minmax(0, 1fr); gap: .05rem; }
}
@media (max-width: 374px) {
  .vdtop--aanbod .maand { font-size: 1.3rem; }
  .vdtop--aanbod .maand small, .vdtop--aanbod .bedrag small { font-size: .64rem; }
  .vdtop--aanbod .bedrag { font-size: .8rem; }
}

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

/* ── 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); }
/* Accent: de ene hoofdknop op een donker V3-vlak (de hoofdkaart van de
   energiecheck), in de limoentint van de startpagina (contrast 12:1). */
.wr-btn--accent { background: var(--v3-accent); color: var(--v3-diep); }
.wr-btn--accent:hover { background: var(--v3-accent-hover); }
.wr-btn--accent:focus-visible { outline-color: #fff; }
.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 een vast donker vlak, los van de paginakleur. */
  --color-on-deep-accent: #7FD6CE;
}

/* ── 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. Restanten van de startpaginalaag (DS2, september 2026)
   ============================================================================
   De startpagina zelf staat sinds 11-11-2026 volledig in de V3-laag
   (--v3-*, verderop). Wat hier nog staat, gebruiken ook andere pagina's:
   de verborgen-regel onder .wr, de cookiemelding op /, aanraakmaten, de
   rekenbasis, de conclusie op /leveranciers en de partnermodule op
   kennispagina's. De verwijderde DS2-startpaginaregels staan per selector
   in de pull request van de V3-onderkant.
   ========================================================================= */

.wr [hidden] { display: none !important; }

/* De cookiemelding op de startpagina: vanaf 960 px linksonder, want in het
   midden bedekte ze de livecard met de prijs van nu. De opmaak zelf staat
   bij de schil (.wr-consent, #164). */
@media (min-width: 960px) {
  .wr-consent.wr-consent-home { left: 24px; right: auto; bottom: 24px; margin: 0; max-width: 384px; }
}

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

/* ---- conversieronde 2 (8-10-2026): de conclusie boven de invoer op /leveranciers ----
   De uitkomstrij staat sinds deze ronde vóór de invoerkaart. Wie daarna iets
   verzet, ziet de conclusie even oplichten; staat hij buiten beeld (mobiel),
   dan haalt wattradar.js hem in beeld. scroll-margin houdt hem onder de
   plakkende kop. */
.uitkomstrij { scroll-margin-top: 5rem; }
@keyframes uitkomst-bijgewerkt {
  from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent); }
  to { box-shadow: 0 0 0 0 transparent; }
}
.uitkomstrij.bijgewerkt .result:first-child { animation: uitkomst-bijgewerkt 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .uitkomstrij.bijgewerkt .result:first-child { animation: none; } }
/* "Reken met je eigen verbruik" onder de voorbeeldknop: een tekstknop, geen tweede knop. */
.lvdoen .lvdoen__eigen { display: block; margin-top: .45rem; font-size: .8rem; }

/* ---- de partnermodule op een kennispagina (conversieronde 2, 8-10-2026) ----
   Eén blok, gevuld door partnermodule.js met de gedeelde top drie
   (top3Html uit partners.js) in een merkvlak, zoals het terugleverblok op
   /eigen-verbruik. Zonder tarieven blijft de HTML-terugval staan: één knop,
   geen bedrag. De compacte tweeregelige rij van .result geldt hier ook, want
   de tekstkolom van een artikel is smal. */
.partnermodule {
  margin: var(--s-5) 0; padding: .95rem 1.05rem;
  background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r);
}
.partnermodule .eyebrow { color: var(--brand); margin: 0 0 .3rem; }
.partnermodule .pm-kop { margin: 0 0 .4rem; font-size: 1.06rem; line-height: 1.3; }
.partnermodule .pm-zin { margin: 0 0 .75rem; font-size: .88rem; color: var(--ink-2); }
.partnermodule .cta-inline { margin: 0; }
.partnermodule .vdtop { margin: 0; }
.partnermodule .vdtop-zin { margin-top: 0; }
.partnermodule .vdtop-uitleg { margin: .65rem 0 0; font-size: .78rem; }
.partnermodule .pm-noot { margin: .5rem 0 0; font-size: .78rem; color: var(--ink-2); }
.kans .partnermodule { margin: .2rem 0 0; }
/* Tot de tarieven er zijn houdt het blok op desktop de hoogte van drie rijen
   vast, zodat de tekst eronder niet verspringt als de lijst verschijnt. Lukt
   het laden niet, dan laat partnermodule.js het attribuut los. */
@media (min-width: 640px) { .partnermodule[data-partner-laden] { min-height: 21rem; } }
/* Op een telefoon stonden de vier antwoordknoppen van /leveranciers onder
   elkaar en duwden ze de conclusie anderhalf scherm omlaag; twee naast
   elkaar past, en de conclusie komt zo'n 150 px dichterbij. */
@media (max-width: 639px) {
  #lvAssen .seg.tweevraag { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: var(--s-3) 0 var(--s-2); }
  #lvAssen .seg.tweevraag button { padding: .6rem .7rem; }
  #lvAssen .seg.tweevraag button b { font-size: .9rem; }
  #lvAssen .seg.tweevraag button span { font-size: .72rem; }
}

/* ── V3: de commerciële startpagina (ontwerp 11-11-2026, wacht op product-GO) ──
   Hero met keuze en vergelijkknop, één uitgelichte gecontroleerde korting in
   het donkere vlak, hooguit drie kortingskaarten, de brug naar de
   vergelijking, en de radar (livecard + uurgrafiek) in één donker vlak.
   Alles onder .wr-home, met de bestaande tokens; één eigen accent (limoen)
   alleen voor de knop in het donkere vlak (contrast 12:1 met de donkere
   tekst). Mobile first. */
/* De V3-tokens gelden in dezelfde scope als de DS2-tokens waarop ze rusten
   (.ec, .wr; sinds de V3-energiecheck, 12-11-2026): de startpagina en
   /energiecheck lezen dezelfde waarden. */
.ec, .wr {
  --v3-diep: var(--color-surface-deep);
  --v3-op-diep: var(--color-text-on-deep);
  --v3-op-diep-2: #B9CFCA;            /* 8,6:1 op --v3-diep */
  --v3-accent: #D9EC8F;
  --v3-accent-hover: #E6F3B1;
  /* De twee bedragen van een uitkomst (ontwerp V3 /energiecheck): de
     hoofdprijs domineert, het huidige contract is duidelijk kleiner
     (57/42 px breed, 47/33 px tot 700 px; verhouding 1,36 en 1,42). */
  --v3-prijs: 3.5625rem;
  --v3-prijs-nu: 2.625rem;
}
@media (max-width: 700px) {
  .ec, .wr { --v3-prijs: 2.9375rem; --v3-prijs-nu: 2.0625rem; }
}
/* Mobiel compact (Koen, 11-11-2026): op 390 x 844 de vergelijkknop én de
   knop van de uitgelichte korting in het eerste scherm. Daarom op smalle
   schermen geen eyebrow, een lead van één zin, de scopevraag alleen voor
   schermlezers (de twee knoppen zeggen het zelf) en de panelenvraag met
   haar twee knoppen op één regel. Knoppen blijven 44 px hoog. */
/* Het raster van de hero (A1, 12-11-2026): smal één kolom (tekst, de
   energiechecklink, de korting); vanaf 960 px twee kolommen, waarin de
   korting dezelfde rij vult als de tekst en de invoer: boven- en onderkant
   op één lijn, zonder dat de hero hoger wordt. De link staat in een eigen
   rij onder de tekst. */
.v3-hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tekst" "ook" "uitgelicht";
  row-gap: 12px; margin-top: 12px;
}
.v3-hero__tekst { grid-area: tekst; }
.v3-hero__ook { grid-area: ook; }
.v3-uitgelicht { grid-area: uitgelicht; margin-top: 8px; }
.v3-hero__tekst { min-width: 0; }
.v3-hero__eyebrow { margin: 0 0 var(--space-3); color: var(--color-action); }
.v3-hero__kop { font-size: clamp(2rem, 1.25rem + 3vw, 3.4rem); max-width: 14ch; line-height: 1.04; }
.v3-hero__lead { margin-top: 10px; max-width: 36em; font-size: var(--fs-body); line-height: 1.5; color: var(--color-text-secondary); }
.v3-keuze {
  margin-top: 16px; padding: 14px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-2);
  display: grid; gap: 10px;
}
.v3-keuze__vraag { margin: 0; font-size: var(--fs-small); font-weight: 650; color: var(--color-text-primary); }
.v3-segment { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-keuze__rij--scope .v3-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v3-keuze__rij--zon { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.v3-keuze__rij--zon .v3-optie { min-width: 64px; }
.v3-optie {
  min-height: 44px; padding: 0 14px; border-radius: var(--radius-control);
  border: 1.5px solid var(--color-border-default); background: var(--color-surface-raised);
  font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--color-text-primary); cursor: pointer;
}
.v3-optie:hover { border-color: var(--color-action); }
.v3-optie[aria-pressed="true"] { border-color: var(--color-action); background: var(--color-brand-soft); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--color-action); }
.v3-optie:focus-visible, .v3-opnieuw:focus-visible, .v3-zonder:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.v3-keuze__knop { width: 100%; justify-content: center; white-space: normal; text-align: center; margin-top: 2px; }
/* Terugkerende bezoeker: met welke gegevens de vergelijking klaarstaat. */
.v3-keuze__terug {
  margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--color-text-secondary);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.v3-keuze__terug b { color: var(--color-text-primary); font-weight: 650; }
.v3-keuze__terug[hidden] { display: none; }
@media (max-width: 639px) {
  .v3-hero__eyebrow { display: none; }
  .v3-keuze__rij--scope .v3-keuze__vraag {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 640px) {
  .v3-hero { margin-top: var(--space-4); }
  .v3-uitgelicht { margin-top: calc(var(--space-5) - 12px); }
  .v3-keuze { margin-top: var(--space-5); padding: 18px 20px; gap: 14px; }
  .v3-keuze__vraag { margin-bottom: 8px; }
  .v3-keuze__rij--zon .v3-keuze__vraag { margin-bottom: 0; }
  .v3-keuze__rij--scope .v3-segment { display: flex; }
  .v3-keuze__rij--zon { justify-content: flex-start; }
}
.v3-hero__ook { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: var(--fs-small); }
.v3-hero__ook a {
  color: var(--color-action); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* De uitgelichte korting: het donkere vlak. */
.v3-uitgelicht {
  position: relative; overflow: hidden;
  padding: 18px 18px 18px; border-radius: var(--radius-surface);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 38%, var(--v3-diep)) 0%, var(--v3-diep) 62%);
  color: var(--v3-op-diep); box-shadow: var(--shadow-3);
  min-height: 200px;
}
.v3-uitgelicht__eyebrow { margin: 0 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v3-op-diep-2); }
.v3-uitgelicht__merk { display: flex; align-items: center; gap: 12px; }
.v3-logo { flex: none; display: inline-flex; }
.v3-logo .levlogo { width: 6rem; height: 2.4rem; object-fit: cover; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.v3-logo .levmono { width: 2.4rem; height: 2.4rem; border-radius: 8px; display: inline-grid; place-items: center; background: #fff; color: var(--ink); font-weight: 700; }
.v3-logo--s .levlogo { width: 5rem; height: 2rem; border-radius: 6px; }
.v3-uitgelicht__wie, .v3-kaart__wie { display: grid; gap: 2px; min-width: 0; }
.v3-uitgelicht__wie b { font-size: 1.05rem; }
.v3-uitgelicht__wie span { font-size: .8125rem; color: var(--v3-op-diep-2); }
.v3-uitgelicht__bedrag { margin: 14px 0 0; font-size: clamp(2.5rem, 2rem + 2.6vw, 3.6rem); font-weight: 750; letter-spacing: -.02em; line-height: 1; color: var(--v3-accent); font-variant-numeric: tabular-nums; }
.v3-uitgelicht__bedrag span { display: inline-block; margin-left: 4px; font-size: 1rem; font-weight: 650; letter-spacing: 0; color: var(--v3-op-diep); }
.v3-uitgelicht__wanneer { margin: 8px 0 0; font-size: .875rem; line-height: 1.45; color: var(--v3-op-diep); max-width: 40ch; }
.v3-uitgelicht__actie { margin-top: 14px; }
.v3-uitgelicht .levaanbod {
  display: flex; justify-content: center; width: 100%; min-height: 48px; padding: 0 16px;
  font-size: 1rem; font-weight: 700; border: 0; border-radius: var(--radius-control);
  background: var(--v3-accent); color: var(--v3-diep);
}
.v3-uitgelicht .levaanbod:hover { background: var(--v3-accent-hover); }
.v3-uitgelicht .levaanbod:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.v3-uitgelicht .levaanbod .levpartner { color: color-mix(in srgb, var(--v3-diep) 75%, transparent); border-left-color: color-mix(in srgb, var(--v3-diep) 30%, transparent); font-size: .72rem; }
.v3-uitgelicht__leeg { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--v3-op-diep); max-width: 34ch; }
.v3-uitgelicht__leeg a { color: var(--v3-accent); }
.v3-opnieuw {
  margin-top: 14px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-control);
  border: 1.5px solid var(--v3-op-diep-2); background: transparent; color: var(--v3-op-diep); font: inherit; font-weight: 600; cursor: pointer;
}
.v3-laden { display: grid; gap: 12px; margin-top: 6px; }
.v3-laden i { display: block; height: 18px; border-radius: 6px; background: color-mix(in srgb, var(--v3-op-diep) 14%, transparent); }
.v3-laden i:nth-child(2) { height: 46px; width: 55%; }
.v3-laden i:nth-child(3) { height: 48px; }

/* Voorwaarden: een gewone uitklap, met het toetsenbord te openen. */
.v3-details { margin-top: 12px; font-size: .8125rem; line-height: 1.5; }
.v3-details summary { cursor: pointer; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; display: flex; align-items: center; }
.v3-details__in p { margin: 6px 0 0; }
.v3-uitgelicht .v3-details summary { color: var(--v3-op-diep); justify-content: center; }
.v3-uitgelicht .v3-details__in { color: var(--v3-op-diep-2); }
.v3-uitgelicht .v3-details a { color: var(--v3-accent); }
.v3-uitgelicht .v3-details summary:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.v3-kaart .v3-details summary { color: var(--color-action); }
.v3-kaart .v3-details__in { color: var(--color-text-secondary); }
.v3-kaart .v3-details a { color: var(--color-action); }

/* De kortingskaarten. */
/* Correctie 12-11-2026 (ontwerp ChatGPT): de sectie loopt over de volle
   breedte van de hero, met een scheidingslijn erboven en de link naar alle
   contracten in de kop. Eén kaartcomponent: smal staan wie en bedrag naast
   elkaar met de knop eronder; vanaf 720 px is één korting een brede rij
   (wie, bedrag, knop) en zijn twee of drie een gelijk gevuld raster
   (data-aantal op de lijst). Nul is een lege stand, geen leeg raster. */
.v3-kortingen {
  margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--color-border-subtle);
}
.v3-kortingen__kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--space-4); }
.v3-kortingen__kop .wr-label { margin: 0; color: var(--color-action); }
.v3-kortingen__kop .wr-h2 { margin: 4px 0 0; }
.v3-kortingen__alle { min-height: 44px; }
.v3-kaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v3-kaarten[data-aantal="0"] { display: none; }
.v3-kaart {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kop bedrag" "wanneer wanneer" "actie actie" "voorw voorw";
  align-items: center; column-gap: 16px; row-gap: 12px; padding: 16px; min-width: 0;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1, none);
}
.v3-kaart__kop { grid-area: kop; display: flex; align-items: center; gap: 12px; min-width: 0; }
.v3-kaart__wie b { font-size: 1rem; color: var(--color-text-primary); }
.v3-kaart__wie span { font-size: .8125rem; color: var(--color-text-secondary); }
.v3-looptijd { font-weight: 700; color: var(--color-text-primary); }
.v3-uitgelicht .v3-looptijd { color: var(--v3-op-diep); }
.v3-kaart__bedrag { grid-area: bedrag; justify-self: end; text-align: right; margin: 0; font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; line-height: 1; color: var(--color-action); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3-kaart__bedrag span { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--color-text-secondary); }
.v3-kaart__wanneer { grid-area: wanneer; margin: -4px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--color-text-secondary); }
.v3-kaart__actie { grid-area: actie; }
.v3-kaart .levaanbod { display: flex; justify-content: center; width: 100%; min-height: 44px; padding: 0 14px; font-size: .9375rem; border-radius: var(--radius-control); }
.v3-kaart > .v3-details { grid-area: voorw; margin-top: -4px; }
.v3-kortingen[data-stand="laden"] .v3-kaarten, .v3-kortingen[data-stand="fout"] .v3-kaarten { display: none; }
.v3-kortingen__leeg {
  padding: 12px 16px; border-radius: var(--radius-card);
  background: var(--color-surface-raised); border: 1px dashed var(--color-border-default);
}
.v3-kortingen__leeg[hidden] { display: none; }
.v3-kortingen__leeg p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--color-text-secondary); }
.v3-kortingen__meer { margin: 12px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--color-text-primary); }
.v3-kortingen__meer a { color: var(--color-action); font-weight: 650; }
.v3-kortingen__uitleg { margin-top: 10px; }
.v3-kortingen__uitleg summary { color: var(--color-action); }
.v3-kortingen__uitleg .v3-details__in { max-width: 72ch; color: var(--color-text-secondary); }
.v3-brug {
  display: grid; gap: 14px; margin-top: var(--space-5); padding: 18px;
  border-radius: var(--radius-card); background: var(--color-surface-sunken); border: 1px solid var(--color-border-subtle);
}
.v3-brug__tekst { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--color-text-secondary); }
.v3-brug__tekst b { display: block; color: var(--color-text-primary); }
.v3-brug__knop { justify-content: center; }

/* Kortingen die alleen zonder zonnepanelen gelden: pas na een "nee". */
.v3-kortingen__zonder { margin: 14px 0 0; font-size: .875rem; line-height: 1.5; color: var(--color-text-primary); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.v3-zonder {
  min-height: 44px; padding: 0 14px; border-radius: var(--radius-control);
  border: 1.5px solid var(--color-action); background: transparent; color: var(--color-action);
  font: inherit; font-size: var(--fs-small); font-weight: 650; cursor: pointer;
}
.v3-zonder:hover { background: var(--color-brand-soft); }

@media (max-width: 399px) {
  /* 320 x 568: de vergelijkknop in het eerste scherm. */
  .v3-hero__kop { font-size: 1.875rem; }
  .v3-hero__lead { margin-top: 8px; font-size: .9375rem; }
  .v3-keuze { padding: 12px; gap: 8px; }
  .v3-segment { gap: 6px; }
  .v3-optie { padding: 0 10px; font-size: .8125rem; }
}
@media (min-width: 560px) {
  .v3-keuze__knop { width: auto; justify-self: start; }
  .v3-brug { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 18px 22px; }
}
@media (min-width: 720px) {
  /* Eén korting: een brede rij. */
  .v3-kaarten[data-aantal="1"] .v3-kaart {
    grid-template-columns: minmax(0, 1fr) auto minmax(12rem, auto);
    grid-template-areas: "kop bedrag actie" "voorw wanneer actie"; row-gap: 4px;
    column-gap: 28px; padding: 18px 24px;
  }
  .v3-kaart__bedrag { justify-self: start; text-align: left; }
  .v3-kaarten[data-aantal="1"] .v3-kaart__bedrag { display: flex; align-items: baseline; gap: 8px; }
  .v3-kaarten[data-aantal="1"] .v3-kaart__bedrag span { display: inline; margin: 0; }
  /* Twee of drie: een gelijk gevuld raster, de knoppen op één lijn. */
  .v3-kaarten[data-aantal="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v3-kaarten[data-aantal="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v3-kaarten[data-aantal="2"] .v3-kaart, .v3-kaarten[data-aantal="3"] .v3-kaart {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: "kop" "bedrag" "wanneer" "actie" "voorw"; align-items: start; padding: 18px;
  }
  .v3-kaarten[data-aantal="2"] .v3-kaart__bedrag span, .v3-kaarten[data-aantal="3"] .v3-kaart__bedrag span { display: inline; margin-left: 4px; }
  .v3-uitgelicht { padding: 26px 28px 22px; }
}
@media (min-width: 720px) and (max-width: 959px) {
  /* Tablet: de uitgelichte kaart over de volle breedte, in twee kolommen,
     zodat hij niet als een uitgerekte telefoonkaart oogt. */
  .v3-uitgelicht { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 32px; align-content: start; }
  .v3-uitgelicht > * { grid-column: 1; }
  .v3-uitgelicht > .v3-uitgelicht__wanneer, .v3-uitgelicht > .v3-uitgelicht__actie, .v3-uitgelicht > .v3-details { grid-column: 2; }
  .v3-uitgelicht > .v3-uitgelicht__wanneer:first-of-type { margin-top: 0; }
  .v3-uitgelicht > .v3-uitgelicht__actie { margin-top: 16px; }
  .v3-uitgelicht[data-stand="fout"], .v3-uitgelicht[data-stand="leeg"], .v3-uitgelicht[data-stand="laden"] { display: block; }
}
@media (min-width: 960px) {
  .v3-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-areas: "tekst uitgelicht" "ook .";
    column-gap: 48px; margin-top: 8px; padding-top: 24px;
  }
  /* De korting vult de rij van de tekst; haar inhoud staat in het midden. */
  .v3-uitgelicht { align-self: stretch; margin-top: 0; display: flex; flex-direction: column; justify-content: center; }
  .v3-uitgelicht { padding: 30px 32px 26px; }
}

/* ── De onderkant (V3, 11-11-2026): radar, hoe het werkt, afsluiting ──
   Vervangt de DS2-onderkant (livecard, uurprijzensectie met planner,
   energiecheckpromo, kennisrij, "Zo rekent wattradar", vangnet). Drie
   blokken, met de bestaande tokens en componenten (wr-btn, wr-link,
   wr-chip, minigrid, keys, uitklap). */

/* Voor wie terugkomt: de bewaarde uitkomst, vóór de radar. */
.v3-terug { display: none; }
:root.wr-terug .wr-home .v3-terug { display: block; margin-top: clamp(36px, 5vw, 56px); }
.wr-insight {
  display: none; min-width: 0; padding: 20px 20px 16px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-2);
}
:root.wr-terug .wr-home .wr-insight { display: flex; flex-direction: column; gap: 6px; }
/* Bij een contract- of leverancierskans is de vervolgstap een knop (renderHomeInsight). */
.wr-insight .wr-insight__knop { align-self: flex-start; margin-top: 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); }

/* 1. De radar: één donker vlak. Links de kop, de prijs van nu en de
   geld-uitgang; rechts de uurgrafiek met de twee vervolglinks; onderaan,
   dicht, de verdieping. Smal staat alles onder elkaar. */
.v3-radar {
  margin-top: clamp(48px, 6vw, 84px); padding: 24px 14px 14px; border-radius: var(--radius-surface);
  background: var(--v3-diep); color: var(--v3-op-diep);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  scroll-margin-top: calc(var(--hdr) + 21px);
}
.v3-radar__tekst { padding: 0 4px; }
.v3-radar__eyebrow { margin: 0; color: var(--v3-accent); }
.v3-radar__kop { margin: 6px 0 0; color: #fff; }
.v3-radar__lead { margin: 10px 0 0; max-width: 44ch; font-size: .9375rem; line-height: 1.5; color: var(--v3-op-diep-2); }

/* De prijs van nu: een licht vlak in het donkere. */
.v3-nu {
  min-width: 0; padding: 18px 18px 14px;
  background: var(--color-surface-raised); color: var(--color-text-primary);
  border-radius: var(--radius-card);
}
.v3-nu__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v3-nu__kop .wr-label { margin: 0; }
/* "live" is het enige warme accent in dit vlak: --signal is voor nu. */
.v3-live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 650; color: var(--color-text-secondary); }
.v3-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.v3-nu__prijs { margin: 6px 0 0; font-size: clamp(2.6rem, 2rem + 1.6vw, 3.1rem); }
.v3-nu__prijs b { font-weight: inherit; }
.v3-oordeel { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.v3-oordeel__meter { flex: none; line-height: 0; }
.v3-oordeel__meter svg { display: block; }
.v3-oordeel__tekst { display: grid; gap: 1px; min-width: 0; }
.v3-oordeel__woord { font-size: 1.04rem; font-weight: 650; line-height: 1.25; color: var(--color-text-primary); }
.v3-oordeel__context { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--color-text-secondary); }
/* Laagste, hoogste en morgen als drie tegels; gas, het 90-daags gemiddelde
   en de mix zijn context, achter "Meer cijfers". */
.wr-home .minigrid.v3-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.wr-home .minigrid.v3-cijfers > div { background: var(--color-surface-sunken); border: 0; border-radius: 10px; padding: 9px 11px; }
.wr-home .minigrid.v3-cijfers dt { font-size: .64rem; letter-spacing: .06em; }
.wr-home .minigrid.v3-cijfers dd { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-top: 3px; }
.wr-home .minigrid.v3-cijfers dd.v3-cijfers__wanneer { font-family: var(--font-text); font-size: .7rem; font-weight: 500; letter-spacing: 0; color: var(--color-text-secondary); margin-top: 1px; }
.wr-home .minigrid.v3-cijfers > .secundair { display: none; }
.wr-home .minigrid.v3-cijfers.toon > .secundair { display: block; }
.wr-home .minigrid.v3-cijfers > .secundair[hidden] { display: none; }
.v3-nu__noot { margin: 8px 0 0; font-size: .72rem; color: var(--color-text-secondary); }
.v3-nu__storing { margin-top: 10px; }
.v3-cijfers:not(.toon) ~ .v3-nu__noot,
.v3-cijfers:not(.toon) ~ .v3-nu__storing { display: none; }
.v3-nu__meer { display: inline-block; margin-top: 10px; font-size: .78rem; }
@media (max-width: 479px) {
  .wr-home .minigrid.v3-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Morgen heeft een zin nodig: over de volle breedte. */
  .wr-home .minigrid.v3-cijfers > div:nth-child(3) { grid-column: 1 / -1; }
}

/* De geld-uitgang: het dagverschil in een zin, en één rustige knop. */
.v3-radar__actie { display: grid; gap: 12px; justify-items: start; padding: 4px 4px 0; }
.v3-radar__reden { margin: 0; max-width: 52ch; font-size: .9375rem; line-height: 1.5; color: var(--v3-op-diep); }
.v3-radar__knop { white-space: normal; text-align: left; }

/* De uurgrafiek: het tweede lichte vlak. */
.v3-grafiek {
  display: flex; flex-direction: column; min-width: 0; padding: 16px 14px 14px;
  background: var(--color-surface-raised); color: var(--color-text-primary);
  border-radius: var(--radius-card);
}
.v3-grafiek > #negBanner { margin: 0 0 12px; }
.v3-grafiek__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.v3-grafiek__titel { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.v3-grafiek__kop .linkbtn { flex: none; font-size: .8rem; }
.v3-grafiek__sub { margin: 4px 0 8px; font-size: .8rem; line-height: 1.4; color: var(--color-text-secondary); }
.v3-grafiek .keys { margin-top: auto; padding-top: 8px; }

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

/* De twee vervolglinks: plannen (/slim-verbruiken) en het alarm. */
.v3-radar__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0 4px; }
.v3-radar .v3-radar__links .wr-link { min-height: 44px; color: var(--v3-accent); }
.v3-radar .v3-radar__links .wr-link:focus-visible { outline-color: #fff; }

/* De verdieping: dicht, lichte uitklappers op het donkere vlak. */
.v3-radar__meer { min-width: 0; padding: 4px 0 2px; border-top: 1px solid color-mix(in srgb, var(--v3-op-diep) 16%, transparent); }
.v3-radar__meerkop { margin: 14px 4px 0; font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--v3-op-diep-2); }
.v3-radar__meer details.uitklap { margin-top: 10px; color: var(--color-text-primary); }
.v3-radar__meer .sources { margin: 14px 4px 0; color: var(--v3-op-diep-2); }

/* 2. Hoe werkt wattradar? */
.v3-werkwijze { margin-top: clamp(48px, 6vw, 84px); }
.v3-werkwijze__kop { display: grid; gap: 4px; margin-bottom: var(--space-4); }
.v3-werkwijze__kop > * { margin: 0; }
.v3-werkwijze__kop .wr-label { color: var(--color-action); }
.v3-werkwijze__rij { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Smal: het icoon naast de titel en de tekst; vanaf 720 px drie kaarten
   naast elkaar, met het icoon erboven. */
.v3-punt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start;
  column-gap: 14px; row-gap: 6px; min-width: 0; padding: 16px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
}
.v3-punt > :not(.v3-punt__chip) { grid-column: 2; }
.v3-punt__chip { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 12px; }
.v3-punt__chip .wr-icon { width: 22px; height: 22px; }
.v3-punt__titel { margin: 0; font-size: 1.0625rem; line-height: 1.3; align-self: center; }
.v3-punt__tekst { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--color-text-secondary); max-width: 46ch; }
.v3-punt__link { justify-self: start; }
.v3-werkwijze__noot { margin: 16px 0 0; max-width: 74ch; font-size: .8125rem; line-height: 1.5; color: var(--color-text-secondary); }
.v3-werkwijze__noot a { color: var(--color-action); font-weight: 600; }

/* 3. De afsluiting: één vlak, één knop. */
.v3-slot {
  display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 64px); padding: 24px 20px;
  background: var(--color-brand-soft); border-radius: var(--radius-surface);
}
.v3-slot__tekst > * { margin: 0; }
.v3-slot__tekst .wr-label { color: var(--color-action); }
.v3-slot__tekst .wr-h2 { margin-top: 6px; max-width: 22ch; }
.v3-slot__lead { margin-top: 8px; max-width: 52ch; font-size: .9375rem; line-height: 1.5; color: var(--color-text-secondary); }
.v3-slot__knop { width: 100%; justify-content: center; white-space: normal; text-align: center; }

@media (min-width: 560px) {
  .v3-slot__knop { width: auto; justify-self: start; }
}
@media (min-width: 720px) {
  .v3-radar { padding: 32px 28px 24px; gap: 20px; }
  .v3-grafiek { padding: 18px 20px 16px; }
  .v3-werkwijze__rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v3-punt { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 18px; }
  .v3-punt > :not(.v3-punt__chip) { grid-column: 1; }
  .v3-punt__chip { grid-row: auto; }
  .v3-punt__titel { margin-top: 4px; }
  .v3-slot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 32px 36px; }
}
@media (min-width: 960px) {
  /* Twee kolommen: kop, prijs en geld-uitgang links; de grafiek rechts,
     over de hoogte van de linkerkolom. Terugkerend of nieuw: dezelfde. */
  .v3-radar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "tekst grafiek" "nu grafiek" "actie links" "meer meer";
    grid-template-rows: auto auto 1fr auto;
    padding: 40px; column-gap: 32px; row-gap: 20px; align-items: start;
  }
  .v3-radar__tekst { grid-area: tekst; padding: 0; }
  .v3-nu { grid-area: nu; }
  .v3-radar__actie { grid-area: actie; padding: 0; }
  .v3-grafiek { grid-area: grafiek; align-self: stretch; }
  .v3-radar__links { grid-area: links; padding: 0; align-self: start; }
  .v3-radar__meer { grid-area: meer; }
  .v3-radar__meerkop { margin-left: 0; margin-right: 0; }
  .v3-radar__meer .sources { margin-left: 0; margin-right: 0; }
}

/* ============================================================================
   18. De kennisbank: /kennis, de artikelen en het blok op de startpagina
   ============================================================================
   Gebouwd door tools/kennis-bouw.mjs uit content/kennis/*.md (13-10-2026,
   #104 opdracht 2). De hub is een kaartenrij op app-breedte; een artikel is
   een leeskolom zoals de andere uitlegpagina's. Geen nieuwe tokens.
   ========================================================================= */

.kennishub { padding-top: clamp(1rem, 2.5vw, 2rem); }
.kennishub__kop { max-width: 68ch; margin-bottom: var(--s-5, 2rem); }
.kennishub__kop h1 { margin: 0 0 .6rem; }
.kennishub__intro { color: var(--ink-2); margin: 0 0 1rem; }
.kennishub__filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.kennishub__filters a {
  font-size: .82rem; font-weight: 600; text-decoration: none;
  padding: .32rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); background: var(--surface);
}
.kennishub__filters a:hover { color: var(--ink); border-color: var(--ink-3); }
.kennishub__filters a[aria-current="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
.kennis-kaart[hidden] { display: none; }
.kennishub__sectie { margin-top: var(--s-5, 2rem); }
.kennishub__sectie h2 { margin: 0 0 .8rem; font-size: 1.18rem; }
.kennishub__noot { margin-top: var(--s-5, 2rem); }

.kennis-rij { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .kennis-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kennis-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kennis-kaart > a {
  display: grid; gap: .45rem; height: 100%; box-sizing: border-box;
  padding: clamp(1rem, 2vw, 1.3rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  color: inherit; text-decoration: none;
}
.kennis-kaart > a:hover { border-color: var(--ink-3); }
.kennis-kaart h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.kennis-kaart p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.kennis-kaart__meta { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: .76rem !important; color: var(--ink-3) !important; }
.kennis-kaart__meta time { margin-left: auto; }
.kennis-soort { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .68rem; }
.kennis-soort--actueel { color: var(--color-action, var(--series)); }
@media (min-width: 1024px) {
  .kennis-kaart--groot { grid-column: span 2; }
  .kennis-kaart--groot h3 { font-size: 1.25rem; }
}

/* Een artikel: leeskolom, met de kruimel erboven en de meta-regel onder de kop. */
.kennis-kruimel { font-size: .82rem; color: var(--ink-3); margin: 0 0 .7rem; }
.kennis-kruimel a { color: inherit; }
.kennis-meta { font-size: .82rem; color: var(--ink-3); margin: 0 0 1rem; }
.kennis-kern { font-size: 1.04rem; padding: .8rem 1rem; border-left: 3px solid var(--line); background: var(--surface-2); border-radius: 0 var(--r-s) var(--r-s) 0; }
.kennis-artikel table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 0 1rem; }
.kennis-artikel th, .kennis-artikel td { text-align: left; vertical-align: top; padding: .5rem .7rem .5rem 0; border-bottom: 1px solid var(--line); }
.kennis-artikel th { font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.kennis-artikel td:not(:first-child) { font-variant-numeric: tabular-nums; }
.kennis-links, .kennis-bronnen { padding-left: 1.2rem; }
.kennis-bronnen { font-size: .88rem; }
.kennis-bronnen a { word-break: break-word; }
/* ============================================================================
   17. /widget: een brede demozone in plaats van een leeskolom (13-10-2026)
   ============================================================================
   Aanleiding (#104): de hele pagina stond in main.prose (68ch), ook de twee
   live demo's en de codeblokken, en op 1440 of 1920 px bleef links en rechts
   een derde van het scherm leeg terwijl de demo's als miniaturen oogden.
   Lopende tekst houdt hier zijn leesbreedte (68ch binnen de kaart); de
   demo's, de instellingen en de drie tekstkaarten gebruiken de breedte van
   de app (--maxw-app), net als de rekentools. Geen nieuwe tokens: dezelfde
   kaart, dezelfde eyebrow, hetzelfde codeblok.
   ========================================================================= */

.widgetpagina { padding-top: clamp(1rem, 2.5vw, 2rem); }
.widgetpagina > * + * { margin-top: var(--s-4); }
.widgetpagina .card { padding: clamp(1.1rem, 2.4vw, 1.8rem); }
.widgetpagina h1 { margin: 0 0 .6rem; }
.widgetpagina h2 { margin: 0 0 .5rem; font-size: 1.18rem; }
.widgetpagina h3 { margin: 0 0 .35rem; font-size: 1rem; }
.widgetpagina p, .widgetpagina li { color: var(--ink-2); }
.widgetpagina p { margin: 0 0 .9rem; }
.widgetpagina ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.widgetpagina li { margin-bottom: .4rem; }
.widgetpagina b, .widgetpagina strong { color: var(--ink); font-weight: 650; }
.widgetpagina code { font-family: var(--mono); font-size: .84em; background: var(--surface-2); padding: .08em .35em; border-radius: 5px; }

/* De kop: tekst op leesbreedte, de kaart op app-breedte. */
.widget-hero { padding: 0 0 var(--s-2); }
.widget-hero__tekst { max-width: 68ch; }
.widget-hero__tekst > p:last-child { margin-bottom: 0; font-size: 1.04rem; }

.widget-sectiekop { max-width: 68ch; margin-bottom: var(--s-3); }
.widget-sectiekop p:last-child { margin-bottom: 0; }

/* Twee demo's naast elkaar vanaf 900 px: het compacte blok (380 px) in de
   smalle kolom, het dagoverzicht (560 px) in de brede. Daaronder één kolom;
   het blok krimpt zelf mee. */
.widget-demo { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .widget-demo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}
.widget-demo__titel code { font-weight: 500; }
.widget-demo__uitleg { font-size: .9rem; margin-bottom: .9rem; }
.widget-demo__blok { margin: 0 0 var(--s-3); }
.widget-demo__kaart .codeblok { margin: 0; }

/* De instellingen als tabel op volle breedte, niet afgeknepen in 68ch. */
.widget-instellingen table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.widget-instellingen th, .widget-instellingen td {
  text-align: left; vertical-align: top;
  padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--line);
}
.widget-instellingen th {
  font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 650;
}
.widget-instellingen tr:last-child td { border-bottom: 0; }
.widget-instellingen td:first-child { white-space: nowrap; }

/* De drie tekstkaarten naast elkaar op een breed scherm; elk op leesbreedte. */
.widget-uitleg { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .widget-uitleg { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.widget-tekst > :last-child { margin-bottom: 0; }
.widget-tekst .mut { font-size: .82rem; }
/* Tikdoelen (13-10-2026, QA #101 punt 5 / #104): de partnerknoppen in de
   top-3 en de ranglijsten zijn .btn.klein en op een telefoon 36 px hoog. Op
   een aanraakscherm minstens 44 px (WCAG 2.5.5), zonder de knop op desktop
   groter te maken: alleen de partnerlinks (data-partner) en alleen bij een
   grove aanwijzer. Hoogte via padding, zodat de tekstregel gecentreerd blijft. */
@media (pointer: coarse) {
  a.btn.klein[data-partner] { min-height: 44px; display: inline-flex; align-items: center; }
}