/* ==========================================================================
   Stroomy — designsysteem op basis van het Starbucks color-block systeem
   Zie /DESIGN.md voor de vertaalslag en tokenrollen.
   HTML-first: geen JavaScript nodig voor enige component in dit bestand.
   ========================================================================== */

/* ==========================================================================
   INHOUD — check-site.js bewaakt dat deze lijst klopt met de sectiebanners
   (zelfde nummers, zelfde volgorde, geen dubbelen). Nieuwe sectie: volgend
   vrij nummer nemen én hier bijschrijven. 9, 13 en 29 zijn vervallen bij
   eerdere opruimrondes; die gaten blijven staan (docs verwijzen op nummer).
   1. Zelfgehost font (Plus Jakarta Sans)
   2. Designtokens
   3. Basis en reset
   4. Toegankelijkheidshulpen
   5. Layout
   6. Knoppen
   7. Header en navigatie
   8. Kruimelpad
   9b. Foto-hero (homepage)
   10. Woningcheck-startformulier
   11. Vertrouwensicoon
   12. Kaarten
   14. Split-secties
   15. Donkergroene feature-band
   16. Werkwijze-stappen
   16b. Salderen-callout en vergelijkingstabel
   17. Ontwikkelplaceholders
   18. FAQ-component (details/summary)
   19. Kennisbank-kaarten
   20. Formulieren
   20b. Woningcheck-funnel
   20c. Premium subpagina-opzet
   20d. Energieprofiel
   21. Afsluitende CTA-band
   22. Footer
   23. Subpagina-koppen
   24. Diversen
   25. Artikelpagina
   26. Premium verfijningen sitebreed
   27. Homepage
   28. Energiehub /energie/
   30. Warmtepomp /warmtepomp/ (pp-)
   31. Financiering /financiering/ (fin-)
   32. Werkwijze /werkwijze/ (ww-)
   33. FAQ-pagina /faq/ (faqx-)
   34. Contact /contact/ (ctx-)
   35. Woningcheck-instap (wcx-)
   36. Eerste Woningbeeld (wra-)
   37. Trustbanden
   39. Pijnpunten-sectie homepage
   40. Salderingspagina /salderen-2027/ (sal-)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Zelfgehost font: Plus Jakarta Sans (OFL) — variabel, 200–800.
   Geen externe font-requests; bestanden staan in /assets/fonts/.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Designtokens
   -------------------------------------------------------------------------- */
:root {
  /* Kleuren — vier-groenen-systeem + warme neutralen */
  --clr-canvas: #f2f6f4;        /* Rustzone: lichte groene grond voor rustsecties, velden en kleine vlakken (was crème #f2f0eb, eruit 16-09) */
  --clr-ceramic: #f2f6f4;       /* Sinds 16-09 gelijk aan de rustzone (was warm #edebe9); apart token voor de scrollbalk */
  --clr-white: #ffffff;         /* Kaart- en contentvlakken */
  --clr-green: #006241;         /* Merk- en headingkleur */
  --clr-accent: #00754a;        /* Primaire CTA-kleur */
  --clr-house: #1e3932;         /* Donkere feature-banden en footer */
  --clr-uplift: #2b5148;        /* Secundair donkergroen accent */
  --clr-green-light: #d4e9e2;   /* Lichte groene vlakken */
  --clr-gold: #cba258;          /* Uitsluitend voor een bijzonder statusmoment */
  --clr-error: #c82014;

  /* Tekst */
  --txt: rgba(0, 0, 0, 0.87);
  --txt-soft: rgba(0, 0, 0, 0.66);
  --txt-inv: #ffffff;
  --txt-inv-soft: rgba(255, 255, 255, 0.78);

  /* Vorm */
  --radius-card: 12px;
  --radius-pill: 50px;
  --radius-input: 10px;

  /* Gelaagde, subtiele schaduwen (nooit één zware) */
  --shadow-card: 0 0 0.5px rgba(0, 0, 0, 0.14), 0 1px 1px rgba(0, 0, 0, 0.24);
  --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.10), 0 2px 2px rgba(0, 0, 0, 0.06),
    0 0 2px rgba(0, 0, 0, 0.07);
  --shadow-lift: 0 0 6px rgba(0, 0, 0, 0.10), 0 8px 12px rgba(0, 0, 0, 0.08);

  /* Spacing op 8/16-basis */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 40px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Layout. Drie vaste contentbreedtes naast --measure (760px, sectiekoppen
     en smalle tekstkolom). Layoutcorrectie 06-09 (eigenaarsopdracht): een
     sectie waarvan de inhoud smaller is dan het volle contentgrid krijgt een
     smallere containervariant (.container--breed / .container--standaard);
     de container centreert al, dus de buitenmarges zijn symmetrisch en er
     blijft geen leeg rechtervlak over. Tekst blijft links uitgelijnd bínnen
     de container. */
  --content-max: 1440px;
  --measure: 760px;
  --w-wide: 1280px;     /* fotografie, dashboards, brede datavisualisaties */
  --w-standard: 1080px; /* normale secties, grids, het dossier-venster */
  --w-copy: 680px;      /* langere lopende tekst */
  --ruimte-sectie: clamp(48px, 8vw, 96px);
  --gutter: 16px;

  /* Typografie */
  --font-stack: "Plus Jakarta Sans", "Segoe UI", -apple-system,
    BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Motion (Fase 2): één samenhangend systeem — transform/opacity,
     korte duur, zachte uitloop. prefers-reduced-motion schakelt alles
     uit via de globale regel in sectie 3. */
  --ease-uit: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Slotronde 05-09: alle bewegingen binnen 180–240 ms (transform/opacity);
     onder prefers-reduced-motion valt alles stil (globale regel, sectie 3). */
  --dur-kort: 150ms;
  --dur-basis: 200ms;
  --dur-lang: 240ms;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; }
}

/* --------------------------------------------------------------------------
   3. Basis en reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Scrollbalk in merkstijl (moderne browsers) */
  scrollbar-color: var(--clr-uplift) var(--clr-ceramic);
}

/* Scrollbalk-fallback voor oudere Chromium/Safari */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--clr-ceramic);
}
::-webkit-scrollbar-thumb {
  background: var(--clr-uplift);
  border-radius: var(--radius-pill);
  border: 3px solid var(--clr-ceramic);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--clr-green);
}

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--txt);
  background-color: var(--clr-white);
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
  color: var(--clr-green);
  font-weight: 700;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; color: var(--txt); }
h4 { font-size: 1.05rem; color: var(--txt); }

p {
  margin: 0 0 var(--sp-3);
}

a {
  color: var(--clr-accent);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--clr-green);
}

ul, ol {
  margin: 0 0 var(--sp-3);
  padding-left: 1.25rem;
}

strong { font-weight: 700; }

.lead {
  font-size: 1.1875rem; /* 19px */
  line-height: 1.6;
}

.text-soft { color: var(--txt-soft); }

/* Zichtbare focus voor toetsenbordgebruikers */
:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.section--house :focus-visible,
.site-footer :focus-visible {
  outline-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   4. Toegankelijkheidshulpen
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 100;
  background: var(--clr-house);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus-visible {
  top: 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}

/* Smallere sectiecontainers (layoutcorrectie 06-09): de maat van de
   container volgt de werkelijke inhoud, zodat links en rechts evenveel
   buitenmarge overblijft. Binnen de container blijft alles links staan. */
.container--breed {
  max-width: calc(var(--w-wide) + 2 * var(--gutter));
}
.container--standaard {
  max-width: calc(var(--w-standard) + 2 * var(--gutter));
}

/* Gecentreerde leeskolom (besluit eigenaar 04-09, B-35a): tekst- en FAQ-blokken
   houden de prose-maat maar staan in het midden van de sectie, zoals
   .blok-midden op de energiepagina's al doet. Kaartgrids, hero's en
   funnelblokken blijven links; de subsidie-secties kregen een zijkolom
   (.subsidie-grid hieronder). Verving .container--narrow-left, de linkse
   variant van vóór dit besluit. */
.kolom-midden {
  margin-inline: auto;
}
/* De losse actieknop onder een gecentreerde FAQ-lijst lijnt uit met de
   lijstrand; zonder maat zou margin-inline op een volle-breedte <p> niets
   doen. */
.sectie-actie.kolom-midden {
  max-width: var(--measure);
}
/* Gecentreerd lijnt de leeskolom exact met de sectiekop (beide op --measure);
   de oude maat mét goottoeslag stamt uit de linkse opzet en gaf 40px
   versprong aan weerszijden. */
.container--narrow.kolom-midden {
  max-width: var(--measure);
}

/* (.subsidie-grid en .check-zijkaart zijn opgeruimd in de warmtepomp-pilot
   (05-09): de subsidie staat daar nu als aside in de routesectie,
   .pp-route__subsidie in sectie 30; geen andere pagina gebruikte ze.) */

.section {
  padding-block: var(--ruimte-sectie);
}

/* Initiële layoutkosten drukken (27-08): secties onder de vouw pas opmaken
   wanneer ze in beeld komen. contain-intrinsic-size geeft een schatting zodat de
   scrollbalk niet springt; de browser onthoudt daarna de echte maat (auto). */
.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.section--white { background-color: var(--clr-white); }
.section--rust { background-color: var(--clr-canvas); }  /* was .section--cream; mint (--green-light) is het accent, maximaal 1-2x per pagina */
.section--ceramic { background-color: var(--clr-ceramic); }
.section--green-light { background-color: var(--clr-green-light); }
.section--house {
  background-color: var(--clr-house);
  color: var(--txt-inv);
}
.section--house h1,
.section--house h2,
.section--house h3 {
  color: var(--txt-inv);
}
.section--house p { color: var(--txt-inv-soft); }
.section--house a { color: var(--txt-inv); }

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}
/* 11-09, eigenaarsverzoek: sectie-intro's die op één regel moeten
   doorlopen (routes-sectie homepage) laten de prosemaat los en volgen
   de containerbreedte. */
.section-head--breed { max-width: none; }
.kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--sp-2);
}
.section--house .kicker { color: var(--clr-gold); }

/* --------------------------------------------------------------------------
   6. Knoppen — altijd volledige pill, actieve scale(0.97)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease;
}
.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #fff;
}
.btn--primary:hover {
  background-color: var(--clr-green);
  border-color: var(--clr-green);
  color: #fff;
}

.btn--outline {
  background-color: transparent;
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}
.btn--outline:hover {
  background-color: var(--clr-green-light);
  color: var(--clr-green);
}

/* Witte pill met groene tekst, voor donkergroene banden */
.btn--inverse {
  background-color: #fff;
  border-color: #fff;
  color: var(--clr-accent);
}
.btn--inverse:hover {
  background-color: var(--clr-canvas);
  border-color: var(--clr-canvas);
  color: var(--clr-green);
}

/* Secundaire CTA op donker, de "Outlined on Dark"-rol uit het designsysteem
   (DESIGN.md §5). ⚠️ BEWUSTE RESERVE (snoeironde 09-09): momenteel nergens
   in gebruik, maar het is een gedocumenteerde designsysteem-rol. */
.btn--ghost-inverse {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
.btn--ghost-inverse:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Winnen van `.section--house a` (0-1-1) voor pills op donkere banden */
.section--house a.btn--inverse { color: var(--clr-accent); }
.section--house a.btn--inverse:hover { color: var(--clr-green); }

/* --------------------------------------------------------------------------
   7. Header en navigatie (zonder JavaScript)
   -------------------------------------------------------------------------- */
.site-header {
  background-color: var(--clr-white);
  box-shadow: var(--shadow-nav);
  position: relative;
  z-index: 10;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}
.brand img {
  width: 151px;
  height: 44px;
}

.site-nav {
  order: 3;
  flex: 1 0 100%;
}

.nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--txt);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: 8px;
}
.nav-link:hover {
  color: var(--clr-green);
}
.nav-link[aria-current="page"] {
  color: var(--clr-green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Nav inline naast logo en CTA vanaf 1180px: na het schrappen van het
   navigatie-item "Zo werkt het" (eigenaarsbesluit 07-09) meet de volle
   rij 1012px en past hij met gaps en goten vanaf ~1150px; 1180 houdt
   marge voor font-verschillen. Daaronder geldt het nette tabletpatroon
   (logo + CTA op rij één, navigatie op een eigen regel). Eerdere
   omslagpunten: 900 → 1220 (06-09) → 1340 (07-09, gemeten met het
   langere menu) → 1180 (07-09, korter menu). */
@media (min-width: 1180px) {
  .site-nav {
    order: 0;
    flex: 0 1 auto;
  }
  .header-inner {
    gap: var(--sp-2) var(--sp-5);
  }
  .nav-list { gap: 0 var(--sp-3); }
  /* 11-09, eigenaarsverzoek: het menu staat vast en versmelt met de
     pagina zodra je vanaf de hero omlaag scrollt — de balk wordt over
     de eerste schermhoogte vloeiend licht doorschijnend met blur
     (glas), de inhoud schuift eronderdoor. Scroll-gedreven en nul JS:
     browsers zonder scroll-timelines (en reduced motion, globale regel
     sectie 3) houden de vaste witte balk; alleen ≥1180px, daaronder is
     de header tweerijig en zou vastzetten te veel scherm kosten.
     scroll-padding zorgt dat ankersprongen niet achter de balk landen. */
  html { scroll-padding-top: 84px; }
  .site-header {
    position: sticky;
    top: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: header-versmelt linear both;
      animation-timeline: scroll();
      animation-range: 0 90vh;
    }
    @keyframes header-versmelt {
      from { background-color: var(--clr-white); }
      to { background-color: rgba(255, 255, 255, 0.8); }
    }
  }
}

/* Hamburgermenu onder 1180px (B-46, eigenaarsverzoek 17-09): de tweede
   menuregel op telefoon en tablet oogde rommelig. assets/js/menu.js zet
   .js-menu op <html>; zonder die klasse blijft het patroon hierboven
   (menu op een eigen regel). Rij één: logo, Woningcheck-knop, menuknop.
   De menuknop staat in de HTML vóór de navigatie, zodat Tab na het
   openen meteen bij de eerste link komt. */
.menu-knop { display: none; }
@media (min-width: 1180px) {
  .header-cta { order: 1; }
}
@media (max-width: 1179.98px) {
  .js-menu .header-inner { gap: var(--sp-2); }
  .js-menu .menu-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--clr-green-light);
    border-radius: var(--radius-input);
    background-color: var(--clr-white);
    color: var(--clr-house);
    cursor: pointer;
  }
  .js-menu .menu-knop:hover { background-color: var(--clr-canvas); }
  .menu-knop__streep,
  .menu-knop__streep::before,
  .menu-knop__streep::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform var(--dur-basis) var(--ease-uit), background-color var(--dur-basis) var(--ease-uit);
  }
  .menu-knop__streep { position: relative; }
  .menu-knop__streep::before,
  .menu-knop__streep::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .menu-knop__streep::before { transform: translateY(-6px); }
  .menu-knop__streep::after { transform: translateY(6px); }
  .menu-open .menu-knop__streep { background-color: transparent; }
  .menu-open .menu-knop__streep::before { transform: rotate(45deg); }
  .menu-open .menu-knop__streep::after { transform: rotate(-45deg); }

  .js-menu .site-nav { display: none; }
  .js-menu.menu-open .site-nav {
    display: block;
    border-top: 1px solid var(--clr-green-light);
    padding-block: var(--sp-2) var(--sp-3);
  }
  .js-menu .nav-list {
    flex-direction: column;
    gap: 0;
  }
  .js-menu .nav-link {
    display: flex;
    width: 100%;
    min-height: 48px;
    font-size: 1.0625rem;
  }
  .js-menu .nav-sublink { font-size: 1rem; }
}
/* Smalle telefoons: de Woningcheck-knop zegt alleen "Woningcheck",
   zodat logo, knop en menuknop op één regel passen (vanaf 320px). */
.header-cta { gap: 0.3em; } /* de spatie na "Start gratis" valt in een flexitem weg */
@media (max-width: 520px) {
  .js-menu .header-cta__lang { display: none; }
}
@media (max-width: 360px) {
  .js-menu .brand img { width: 104px; height: 30px; }
  .js-menu .header-cta { padding-inline: 12px; }
}

/* --------------------------------------------------------------------------
   8. Kruimelpad
   -------------------------------------------------------------------------- */
.breadcrumbs {
  padding-top: var(--sp-4);
}
/* B-40 (17-09): een kruimelpad direct boven een donkere band (/energie/)
   krijgt witruimte, anders staat de tekst op de kleurgrens. */
.breadcrumbs + .section--house { margin-top: var(--sp-4); }
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}
.breadcrumbs li + li::before {
  content: "/";
  color: var(--txt-soft);
  padding-inline: var(--sp-1);
}
.breadcrumbs a { color: var(--clr-accent); }
.breadcrumbs [aria-current="page"] {
  color: var(--txt-soft);
  text-decoration: none;
}

/* Sectie 9 (hero-grid, de oude 60/40-kop van de productpagina's) is 02-09
   opgeruimd: de premium-opzet verving hem en de foto's staan nu als
   .zijfoto in de zijkolom (sectie 20c). */

/* --------------------------------------------------------------------------
   9b. Foto-hero (homepage) — overgenomen van versie2, hier zonder JavaScript.
   Dag/nacht: drie radio's; "auto" wisselt via een CSS-animatie, een handmatige
   keuze wint via :has(). Zonder :has()-ondersteuning blijft de auto-wissel
   werken en doet de schakelaar niets (nette degradatie).
   -------------------------------------------------------------------------- */
.hero-foto {
  position: relative;
  min-height: clamp(560px, 88vh, 860px);
  min-height: clamp(560px, 88svh, 860px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--clr-house);
  /* Placeholder tegen de kale-vlak-flits (08-09): een 32px-brede, geblurde
     miniatuur van de dagfoto als data-URI (389 bytes, geen extra request).
     Tot de echte foto binnen is zie je zo al "de foto" in plaats van het
     donkergroene vlak met de crèmesluier erover. Opnieuw maken na een
     fotowissel: ffmpeg -i hero-dag.jpg -vf "scale=32:-1,gblur=sigma=1"
     -q:v 7 lqip.jpg, dan base64. */
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAgQCAAAD//gAQTGF2YzYyLjI4LjEwMQD/2wBDAAgODhAOEBMTExMTExYVFhcXFxYWFhYXFxcZGRkdHR0ZGRkXFxkZHBwdHSAhIB4eHR4hISMjIyoqKCgxMTI8PEj/xABtAAEBAQEBAAAAAAAAAAAAAAAEBgUHAwEBAQAAAAAAAAAAAAAAAAAABQcQAAEDAwMFAQEBAAAAAAAAAAECEQADMQQFEyFBIhJxYdFiMhEAAQIFBQEAAAAAAAAAAAAAAAQhEQECEgMU8OOSNIP/wAARCAASACADASIAAhEAAxEA/9oADAMBAAIRAxEAPwDE0HFRUVuef+RZv2dCVkUHISoKIu05lS3MZLUyluvcA8fi5IoHuIcj2H+tBrbZeVNv4g+kjN06btwFPk5FamCoIZAbkzdIGzufy8h9Q1FBpKR5JJcMBB4eo1q3YtXigcX+W5jdCit4imTDQ0CPcvcxY6QfWMFhJESc9QHvz7iQGEOmJFhKxIrR/9k=");
  background-size: cover;
  background-position: center;
}

/* Desktop: schermvullend tot de vouw (header is daar één rij van 72px) */
@media (min-width: 900px) {
  .hero-foto {
    min-height: calc(100vh - 72px);
    min-height: calc(100svh - 72px);
  }
}

.hero-foto__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-foto__beeld--nacht {
  opacity: 0; /* basisstand: dag; ook de eindstand bij reduced motion */
  transition: opacity 0.4s ease;
  animation: hero-wissel 12s ease-in-out infinite;
}
@keyframes hero-wissel {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
.hero-foto:has(#tijd-dag:checked) .hero-foto__beeld--nacht {
  animation: none;
  opacity: 0;
}
.hero-foto:has(#tijd-nacht:checked) .hero-foto__beeld--nacht {
  animation: none;
  opacity: 1;
}

/* Sluier voor leesbaarheid: alleen achter de tekst, naar transparant aan de
   randen zodat de foto blijft sprankelen. Uitzondering op "geen gradients":
   die regel geldt voor vlakken; dit is een functionele scrim óver een foto,
   gedraaid in House Green (zelfde afweging als in het versie2-concept). */
/* ⚠️ DE STATISCHE WAARDEN ZIJN DE DAGSTAND, EN DAT IS GEEN SMAAKKEUZE.
   Bij `prefers-reduced-motion` zet de reset hierboven elke animatie op 0,01ms zonder
   fill-mode, dus daarna gelden weer de gewone waarden. De nachtfoto staat statisch op
   opacity 0, dus die lezer ziet de dagfoto. Stonden de sluier en de tekstkleur dan nog
   op nacht, dan kreeg hij de dagfoto met een donkere sluier en witte tekst: half dag,
   half nacht. Zet de scrim en de kopkleuren hier dus niet terug op de nachtwaarden;
   die staan bij `:has(#tijd-nacht:checked)`. */
.hero-foto__scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  /* ⚠️ 28-08 iets verzwaard en lager gelegd (was 0,42/0,18 op 50% 42%, hoogte 62%).
     De ondertitel viel op 390px voor 3,1% van zijn oppervlak onder de 4,5 die kleine
     tekst nodig heeft; hij staat lager dan de kop en ving te weinig sluier. */
  background: radial-gradient(
    112% 74% at 50% 46%,
    rgba(14, 30, 25, 0.52) 0%,
    rgba(14, 30, 25, 0.26) 55%,
    rgba(14, 30, 25, 0) 80%
  );
}

/* ⚠️ 16-09: de dagsluier en de dag-tekstschaduwen zijn van crème rgb(242 240 235) naar
   WIT gedraaid, nadat crème als paginagrond verviel. De sluiersterktes (0,72/0,40/0,52/0,26)
   zijn ONGEWIJZIGD; alleen de tint verschoof. De nachtfasen blijven zwart.
   Dagsluier (28-08, overgenomen uit het concept op de andere site): in de dagstand
   licht de foto op in plaats van dat hij verduistert, en de kop klapt om naar groen.

   ⚠️ HET ZIJN TWEE LAGEN DIE OVER ELKAAR VERVAGEN, GEEN ÉÉN LAAG DIE VAN KLEUR
   VERSCHIET. Daar is op de andere site op vastgelopen en het is daar gemeten: een
   browser rekent tussen twee verlopen niet door, ook niet als je ze identiek opbouwt.
   De sluier klapte dan midden in de wissel in één keer om terwijl de foto pas op de
   helft was. Doorzichtigheid rekent hij wél door, vandaar deze tweede laag.

   `::after` en niet `::before`: als laatste kind schildert hij over de scrim heen,
   maar onder `.hero-foto__inhoud` en `.tijdwissel` (die hebben z-index 1). */
.hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
  background:
    radial-gradient(110% 62% at 50% 42%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.40) 46%, rgba(255, 255, 255, 0) 74%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.26) 32%, rgba(255, 255, 255, 0) 60%);
}
/* ⚠️ DEZE SLUIER IS ZWAARDER DAN OP DE ANDERE SITE, EN DAT IS GEMETEN (28-08).
   Met hún waarden (0,56 / 0,28 / 0,44 / 0,19) haalt het merkgroen #006241 het niet op
   ónze foto: 23% van de eerste kopregel en 35% van de tweede kwam onder de 3,0 die
   grote tekst nodig heeft, laagste waarde 1,80. De tweede regel ligt hier over de
   bakstenen gevel en de donkere voordeur, en die is donkerder dan wat daar staat.
   Met deze waarden zit de kop op 0% eronder (laagste 2,86 en 2,70; gemeten zónder de
   eigen tekstschaduw, dus in het echt ruimer). Verlaag ze niet zonder opnieuw te meten. */

.hero-foto__inhoud {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  text-align: center;
  padding: 96px var(--gutter) 128px;
}

.hero-foto__inhoud h1 {
  color: var(--clr-green);
  font-size: clamp(2.1rem, 5.5vw, 3.5rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
  text-shadow: 0 2px 34px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(255, 255, 255, 0.60);
}
.hero-foto__inhoud h1 span { display: block; }
.hero-foto__inhoud h1 span + span { color: var(--clr-house); }

.hero-foto__sub {
  color: rgba(24, 26, 22, 0.88);
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  line-height: 1.6;
  max-width: 36em;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
  text-shadow: 0 1px 20px rgba(255, 255, 255, 0.90);
  transition: color 0.4s ease;
}
/* De verplichte financieringsnuance direct onder de subregel (Fase 1B,
   tekst eigenaar 04-09): zelfde kleur- en schaduwgedrag als de subregel
   (de klasse deelt de dag/nachtanimatie), één maat kleiner en dichter op
   de regel erboven, zodat hij bij de claim hoort en niet als losse alinea
   zweeft. */
.hero-foto__sub + .hero-foto__sub {
  font-size: clamp(0.9375rem, 1.7vw, 1.0625rem);
  margin-top: calc(-1 * var(--sp-4));
}
.hero-foto__inhoud h1 { transition: color 0.4s ease; }

/* ---- Dag/nacht: sluiers en tekstkleur lopen mee met de foto ----
   Alle vier de animaties delen duur én curve met `hero-wissel`, anders lopen ze uit
   elkaar. De nachtfoto vervaagt in op 40-50% en uit op 90-100%; de sluiers kruisen
   op precies diezelfde momenten. De nachtstand blijft de statische basis, dus zonder
   :has()-ondersteuning en bij `prefers-reduced-motion` ziet de hero eruit zoals
   voorheen: dagfoto met donkere scrim en witte tekst. */
.hero-foto__scrim { animation: hero-scrim 12s ease-in-out infinite; }
@keyframes hero-scrim {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
.hero-foto::after { animation: hero-dagsluier 12s ease-in-out infinite; }
@keyframes hero-dagsluier {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

/* ⚠️ DE TEKST KRUIST KORTER DAN DE FOTO, EN MET EEN ZWAARDERE RAND. DAT IS GEMETEN
   (op de andere site, 23-08): laat je de kleur even lang lopen als de foto, dan staat
   de kop halverwege op een bleek mintgroen zonder contrast, met een schaduw die
   tegelijk van crème naar zwart grijst en dus niets meer opvangt. Om de zes seconden
   verdwijnt de kop dan, precies boven het invulveld.

   Daarom kruist de kleur in 3,5% van de cyclus (420 ms) en eindigt hij op 45% en 95%:
   dat is precies het punt waar de foto halverwege is. Op dat punt staat de tekst al
   op de kleur van de volgende stand met een extra zware rand in dezelfde richting;
   die rand doet het werk zolang de achtergrond nog beweegt. Een hero die van licht
   naar donker gaat dwingt élk tekstelement door een moment zonder contrast: je kunt
   dat moment kort maken, niet wegnemen. Verschuif deze ijkpunten dus niet los van
   `hero-wissel`. */
/* De schaduw staat op de h1 en wordt geërfd; de kleur staat per regel, want de kop
   is tweekleurig (besluit 28-08). ⚠️ De donkerste tint hoort op de tweede regel: die
   ligt over de bakstenen gevel en de voordeur, het donkerste stuk van de dagfoto.
   Een vervaagde tweede tint (zoals in het oudere concept) is hier gemeten en
   afgekeurd: 65% van die regel kwam onder de 3,0 bij 70% dekking, 100% bij 55%. */
.hero-foto__inhoud h1 { animation: hero-kop 12s ease-in-out infinite; }
@keyframes hero-kop {
  0%, 41.5% { text-shadow: 0 2px 34px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(255, 255, 255, 0.60); }
  45% { text-shadow: 0 2px 40px rgba(0, 0, 0, 0.92), 0 1px 6px rgba(0, 0, 0, 0.80); }
  50%, 91.5% { text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.30); }
  95% { text-shadow: 0 2px 34px rgba(255, 255, 255, 1), 0 1px 6px rgba(255, 255, 255, 0.95); }
  100% { text-shadow: 0 2px 34px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(255, 255, 255, 0.60); }
}
.hero-foto__inhoud h1 span { transition: color 0.4s ease; }
.hero-foto__inhoud h1 span:first-child { animation: hero-kop-regel1 12s ease-in-out infinite; }
.hero-foto__inhoud h1 span + span { animation: hero-kop-regel2 12s ease-in-out infinite; }
@keyframes hero-kop-regel1 {
  0%, 41.5% { color: var(--clr-green); }
  45%, 91.5% { color: #fff; }
  95%, 100% { color: var(--clr-green); }
}
@keyframes hero-kop-regel2 {
  0%, 41.5% { color: var(--clr-house); }
  45%, 91.5% { color: var(--clr-green-light); }
  95%, 100% { color: var(--clr-house); }
}
.hero-foto__sub { animation: hero-sub 12s ease-in-out infinite; }
@keyframes hero-sub {
  0%, 41.5% {
    color: rgba(24, 26, 22, 0.88);
    text-shadow: 0 1px 20px rgba(255, 255, 255, 0.90);
  }
  45% {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 22px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.85);
  }
  50%, 91.5% {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 22px rgba(0, 0, 0, 0.60), 0 1px 3px rgba(0, 0, 0, 0.40);
  }
  95% {
    color: rgba(24, 26, 22, 0.88);
    text-shadow: 0 1px 20px rgba(255, 255, 255, 1);
  }
  100% {
    color: rgba(24, 26, 22, 0.88);
    text-shadow: 0 1px 20px rgba(255, 255, 255, 0.90);
  }
}

/* Handmatige keuze wint van de animatie, net als bij de foto zelf. De dagstand hoeft
   alleen de animatie stop te zetten: de statische waarden zíjn de dagstand. */
.hero-foto:has(#tijd-dag:checked) .hero-foto__scrim,
.hero-foto:has(#tijd-dag:checked)::after,
.hero-foto:has(#tijd-dag:checked) .hero-foto__inhoud h1,
.hero-foto:has(#tijd-dag:checked) .hero-foto__inhoud h1 span,
.hero-foto:has(#tijd-dag:checked) .hero-foto__sub { animation: none; }

/* De nachtstand zet expliciet alles wat van de dagstand afwijkt. */
.hero-foto:has(#tijd-nacht:checked) .hero-foto__scrim { animation: none; opacity: 1; }
.hero-foto:has(#tijd-nacht:checked)::after { animation: none; opacity: 0; }
.hero-foto:has(#tijd-nacht:checked) .hero-foto__inhoud h1 {
  animation: none;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.30);
}
.hero-foto:has(#tijd-nacht:checked) .hero-foto__inhoud h1 span:first-child { animation: none; color: #fff; }
.hero-foto:has(#tijd-nacht:checked) .hero-foto__inhoud h1 span + span { animation: none; color: var(--clr-green-light); }
.hero-foto:has(#tijd-nacht:checked) .hero-foto__sub {
  animation: none;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.60), 0 1px 3px rgba(0, 0, 0, 0.40);
}

/* Eén-pill-formulier: postcode | huisnummer | knop in één balk */
.check-pill {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background-color: var(--clr-white);
  border-radius: 24px;
  padding: var(--sp-2);
  max-width: 600px;
  margin-inline: auto;
  box-shadow: var(--shadow-lift);
}

.check-pill input {
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: var(--txt);
  min-height: 48px;
  padding: 0 18px;
  min-width: 0;
  width: 100%;
  border-radius: var(--radius-pill);
}
.check-pill input:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: -3px;
}
/* `.check-pill .check-…` wint van `border: 0` op `.check-pill input` (0-1-1) */
.check-pill .check-pill__pc {
  border-bottom: 1px solid #e7e7e7; /* haarlijn tussen de velden (gestapeld) */
  border-radius: 0;
}
.check-pill .check-pill__nr { border-radius: 0; }
/* Focusring in pilvorm (eigenaar 16-09): de outline volgt de radius. De haarlijn
   van het veld is zolang onzichtbaar; de ring scheidt zelf en de randbreedte blijft. */
.check-pill .check-pill__pc:focus-visible,
.check-pill .check-pill__nr:focus-visible {
  border-radius: var(--radius-pill);
  border-color: transparent;
}
.check-pill .btn {
  width: 100%;
}

@media (min-width: 600px) {
  .check-pill {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    border-radius: var(--radius-pill);
    padding: 6px;
  }
  .check-pill .check-pill__pc {
    flex: 1 1 auto;
    border-bottom: 0;
  }
  .check-pill .check-pill__nr {
    flex: 0 0 118px;
    padding: 0 14px;
    border-left: 1px solid #e7e7e7; /* de haarlijn tussen postcode en huisnr */
  }
  .check-pill .btn {
    width: auto;
    flex: 0 0 auto;
    margin-left: var(--sp-2);
  }
}

/* Dag/nacht-schakelaar onderin de hero */
.tijdwissel {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border-radius: var(--radius-pill);
  background-color: rgba(0, 0, 0, 0.35);
}
.tijdwissel label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tijdwissel label:hover { color: #fff; }
.tijdwissel svg { width: 20px; height: 20px; }
#tijd-dag:checked + label,
#tijd-nacht:checked + label {
  background-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
#tijd-dag:focus-visible + label,
#tijd-nacht:focus-visible + label {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   10. Woningcheck-startformulier (postcode + huisnummer)
   -------------------------------------------------------------------------- */
.check-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-end;
  max-width: 560px;
}

.check-form .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.check-form .form-field--postcode { flex: 1 1 150px; }
.check-form .form-field--huisnummer { flex: 0 1 120px; }
.check-form .btn { flex: 1 0 auto; }

.check-form label {
  font-size: 0.875rem;
  font-weight: 600;
}

.check-form input {
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  color: var(--txt);
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-input);
  width: 100%;
}
.check-form input:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 1px;
  border-color: var(--clr-accent);
}

.microcopy {
  margin-top: var(--sp-3);
  font-size: 0.875rem;
  color: var(--txt-soft);
  max-width: 34em;
}

/* Variant op donkergroene achtergrond (afsluitende CTA) */
.check-form--dark label { color: var(--txt-inv); }
.check-form--dark input {
  border-color: transparent;
}
.check-form--dark input:focus-visible {
  outline-color: #fff;
}
.section--house .microcopy { color: var(--txt-inv-soft); }

/* --------------------------------------------------------------------------
   11. Vertrouwensicoon (correctieronde 06-09: de oude vertrouwensbalk-kaart
   is vervangen door de compacte .bewijsband in sectie 27b; sinds 07-09 is
   de bewijsband de enige gebruiker — de waarom-lijst werd voordeel-kaarten)
   -------------------------------------------------------------------------- */
.trust-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--clr-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trust-icon svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   12. Kaarten
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}

.card-grid {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  /* --2 wordt alleen nog door server-gerenderde pagina's (api/) gebruikt. */
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
/* Eén kaart in een sectie (Fase 1B: de twee "in voorbereiding"-artikelen
   zijn verborgen tot ze bestaan, B-6): gecentreerd en begrensd, zodat een
   losse kaart geen leeg drieluik achterlaat. */
.card-grid--solo { max-width: 440px; margin-inline: auto; }

.card h3 {
  margin-bottom: var(--sp-2);
}
.card p:last-child { margin-bottom: 0; }
/* Registerkaarten op /woningcheck/ (28-08): bronregel klein en zacht; de kaart
   "En dit weten we niet" op crème, zodat de uitzondering zichtbaar anders is. */
.card-bron {
  font-size: 0.875rem;
  color: var(--txt-soft);
  margin-top: var(--sp-2);
}
.card--zacht { background-color: var(--clr-canvas); }

.icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--clr-green-light);
  color: var(--clr-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.icon-badge svg { width: 24px; height: 24px; }

.closing-line {
  margin-top: var(--sp-6);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clr-green);
  max-width: 40em;
}
/* Op de lichtgroene band is het merkgroen te licht; daar staat House Green. */

/* De knop onderaan een sectie. Stond op zes plekken als los style-attribuut. */
.sectie-actie { margin-top: 32px; }


/* Secties 13-13d (factorchips, instantiebalk, regelingen-rij, merkenstrook)
   zijn opgeruimd in de snoeironde van 09-09: hun HTML verdween in eerdere
   iteraties; de regels stonden nergens meer op. Historie: git. */

/* --------------------------------------------------------------------------
   14. Split-secties (beeld + tekst, 50/50)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.split + .split {
  margin-top: clamp(48px, 8vw, 96px);
}

.split-media img {
  width: 100%;
  border-radius: var(--radius-card);
}

.split-copy h2 { margin-bottom: var(--sp-3); }
.split-copy .btn { margin-top: var(--sp-2); }
/* Slotronde 05-09: beide route-splits delen dezelfde tekstbreedte, zodat
   eyebrow, titel, intro en CTA in de twee helften identiek vallen. */
.split-copy p { max-width: 34em; }

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
  .split--reverse .split-media { order: 2; }
  .split--reverse .split-copy { order: 1; }
}

/* Compacte combi-kaart onder de twee split-secties */

/* --------------------------------------------------------------------------
   15. Donkergroene feature-band
   -------------------------------------------------------------------------- */
.band-inner {
  max-width: var(--measure);
}
/* Batch 1 sitebrede uitrol (05-09): in de donkere CTA-banden staat de
   leeskolom gecentreerd met symmetrische marges; tekst blijft links.
   (De fotoband van de homepage had dit al via .cta-band--foto.) */
.cta-band .band-inner {
  margin-inline: auto;
}
.band-inner .btn {
  margin-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   16. Werkwijze-stappen
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--sp-4);
  /* wordt als <ol> gebruikt: nummering zit in .step-num, niet in de marker */
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 600px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--clr-green);
  color: #fff;
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.step h3 { margin-bottom: var(--sp-2); }
.step p { margin: 0; color: var(--txt-soft); }

/* Uitgebreide werkwijze op /werkwijze/ */

/* De oude vierdelige trajectstrip is in de slotronde 05-09 opgegaan in de
   gecombineerde trajectsectie .traject-duo (sectie 27e). */

/* --------------------------------------------------------------------------
   16b. Salderen-callout en vergelijkingstabel (BACKLOG B-9)
   -------------------------------------------------------------------------- */
/* Callout: lichtgroene kaart in de diensten-sectie, zelfde toon als de
   vertrouwensbalk. Feit, geen alarmbel. */

/* Beeldtegels (28-08, uit het concept van de andere site, echte foto's van de
   eigenaar): twee foto's met een vraag erop als brug naar de diepte. De tekst staat
   onderin over een sluier die van House Green naar transparant loopt: functionele
   scrim óver een foto, dezelfde uitzondering als de hero (DESIGN.md §2). */

/* Vergelijkingstabel: witte kaart op ceramic; de Stroomy-kolom licht groen.
   Smal scherm: elke rij wordt een kaartje, kolomkoppen komen uit data-label.
   ⚠️ BEWUSTE RESERVE (snoeironde 09-09): van de homepage af, maar de
   vergelijkingstabel-wens staat open als restpunt (advies: /werkwijze/). */
.vergelijk {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.vergelijk th,
.vergelijk td {
  padding: var(--sp-4);
  text-align: left;
  vertical-align: top;
}
.vergelijk thead th {
  color: var(--clr-green);
  font-size: 1rem;
  padding-block: var(--sp-3);
  border-bottom: 1px solid #e7e7e7;
}
.vergelijk tbody th {
  color: var(--clr-green);
  font-weight: 700;
  width: 22%;
}
.vergelijk tbody td { color: var(--txt-soft); width: 39%; }
.vergelijk tbody tr:not(:last-child) th,
.vergelijk tbody tr:not(:last-child) td { border-bottom: 1px solid #e7e7e7; }
.vergelijk td:last-child,
.vergelijk thead th:last-child { background-color: rgba(212, 233, 226, 0.45); }
.vergelijk td[data-label]::before { content: none; }
@media (max-width: 699px) {
  /* .vergelijk tbody th/td expliciet: anders winnen de desktop-kolombreedtes
     (22%/39%) op specificiteit van deze reset (specificiteitsles, zie HANDOFF) */
  .vergelijk, .vergelijk tbody, .vergelijk tr,
  .vergelijk tbody th, .vergelijk tbody td {
    display: block;
    width: 100%;
  }
  .vergelijk thead { display: none; }
  .vergelijk tbody tr { padding: var(--sp-4); }
  .vergelijk tbody tr:not(:last-child) { border-bottom: 1px solid #e7e7e7; }
  .vergelijk tbody th,
  .vergelijk tbody td { padding: 0; border-bottom: none !important; }
  .vergelijk tbody th { margin-bottom: var(--sp-2); }
  .vergelijk tbody td { margin-bottom: var(--sp-3); }
  .vergelijk tbody td:last-child { margin-bottom: 0; background-color: transparent; }
  .vergelijk td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--clr-uplift);
    margin-bottom: var(--sp-1);
  }
}

/* CTA onder de tabel (akkoord eigenaar 27-08): één duidelijke actie, geen verkooppraat */
.vergelijk-cta {
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}
.vergelijk-cta p {
  margin: 0;
  font-weight: 700;
  color: var(--clr-green);
}

/* --------------------------------------------------------------------------
   17. Ontwikkelplaceholders (eerlijk: geen nepbewijs)
   .dev-placeholder/.dev-tag zijn in Fase 1B (04-09) verwijderd: hun laatste
   gebruiker waren de twee in-ontwikkeling-blokken op /contact/, en die zijn
   vervangen door het echte contactformulier.
   -------------------------------------------------------------------------- */
.dev-note {
  background-color: var(--clr-green-light);
  border-radius: var(--radius-card);
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.9375rem;
  color: var(--clr-house);
  margin-bottom: var(--sp-5);
}
.dev-note p { margin: 0; color: inherit; }
.dev-note strong { color: var(--clr-green); }

/* --------------------------------------------------------------------------
   18. FAQ — native details/summary
   -------------------------------------------------------------------------- */
.faq-list {
  display: grid;
  gap: var(--sp-3);
  max-width: var(--measure);
}

.faq-item {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  color: var(--txt);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--clr-green-light);
  color: var(--clr-green);
  font-weight: 700;
  font-size: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.faq-item[open] summary::after {
  content: "\2212"; /* − */
}
.faq-item[open] summary {
  color: var(--clr-green);
}

.faq-item .faq-body {
  padding: 0 var(--sp-4) var(--sp-4);
}
.faq-item .faq-body p { margin-bottom: var(--sp-2); }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   19. Kennisbank-kaarten
   -------------------------------------------------------------------------- */
.article-card {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.article-card-media {
  background-color: var(--clr-green-light);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.article-card-media img {
  width: 160px;
  height: auto;
}
/* Kaart met echte foto: geen illustratie-passe-partout maar beeldvullend.
   De breedte moet op het <picture>-element staan: als flex-item krimpt dat
   anders naar de intrinsieke maat en blijft de foto in het midden hangen. */

.article-card-body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

/* Gouden categoriechip op kennisbankkaarten (tweede toegestane goud-moment) */
.cat-chip {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8a6a2f;
  border: 1px solid var(--clr-gold);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
}
/* h2 én h3: op /kennisbank/ is de kaarttitel een h2 (direct onder de h1),
   op de homepage een h3 (onder de sectie-h2). Zelfde opmaak. */
.article-card-body h2,
.article-card-body h3 { margin: 0; font-size: 1.25rem; color: var(--clr-green); }
.article-card-body h2 a,
.article-card-body h3 a { color: inherit; }
.article-card-body p { margin: 0; color: var(--txt-soft); font-size: 0.9375rem; }

.article-meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: 0.8125rem;
  color: var(--txt-soft);
}

/* --------------------------------------------------------------------------
   20. Formulieren (Woningcheck en verder)
   -------------------------------------------------------------------------- */
.form-card {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) var(--sp-4);
}
@media (min-width: 768px) {
  .form-card { padding: var(--sp-6); }
}

fieldset {
  border: 0;
  margin: 0 0 var(--sp-6);
  padding: 0;
}
fieldset:last-of-type { margin-bottom: var(--sp-4); }

legend {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-green);
  padding: 0;
  margin-bottom: var(--sp-1);
}

.fieldset-hint {
  color: var(--txt-soft);
  font-size: 0.9375rem;
  margin-bottom: var(--sp-4);
}

.field {
  margin-bottom: var(--sp-4);
  max-width: 480px;
}
.field:last-child { margin-bottom: 0; }

.field > label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--sp-1);
}

.field-hint {
  display: block;
  font-size: 0.875rem;
  color: var(--txt-soft);
  margin-bottom: var(--sp-1);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  letter-spacing: inherit;
  color: var(--txt);
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-input);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23006241' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 1px;
  border-color: var(--clr-accent);
}

.field input[aria-invalid="true"] {
  border-color: var(--clr-error);
  background-color: rgba(200, 32, 20, 0.05);
}

/* Reserve (nu ongebruikt): foutmelding onder een veld, hoort bij
   [aria-invalid] hierboven en gaat leven zodra het Woningcheck-endpoint
   is gekoppeld (zie CONTENT-TODO.md §1). */
.field-error {
  display: block;
  color: var(--clr-error);
  font-size: 0.875rem;
  margin-top: var(--sp-1);
}

.field--inline {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  max-width: 480px;
}
@media (min-width: 600px) {
  .field--inline { grid-template-columns: 2fr 1fr; }  /* 16-09: toevoegingsveld eruit, twee kolommen */
}
.field--inline > div > label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--sp-1);
}
.field--inline input { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; border: 1px solid rgba(0,0,0,0.3); border-radius: var(--radius-input); }
.field--inline input:focus-visible { outline: 3px solid var(--clr-accent); outline-offset: 1px; border-color: var(--clr-accent); }

/* Radio's en checkboxen: native, met merk-accentkleur en ruime klikdoelen */
.choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.choice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  min-height: 44px;
}
/* Voor meerregelige labels (zoals de privacyverklaring): bovenaan uitlijnen */
.choice--start { align-items: flex-start; }
.choice--start input { margin-top: 2px; }
.choice input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--clr-accent);
  flex: 0 0 auto;
}
.choice label {
  font-weight: 400;
  cursor: pointer;
}

.form-actions {
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
/* Funnelstappen met een Terug-knop (wens eigenaar 01-09 naronde): Terug
   links, de vervolgknop rechts (margin-left: auto), de herstartlink op een
   eigen regel. Terug staat in de DOM vóór de primaire knop, zodat DOM-, tab-
   en visuele volgorde gelijk zijn. Op pagina's met invoervelden hoort Terug
   via form="…" bij een eigen verborgen POST-formulier (terugFormulier in
   layout.js; hotfix 14-09 voor 3B en stap 4, stap 2 sinds 17-09): anders is
   hij de eerste submitknop van het hoofdformulier en kiest de Enter-toets
   "Terug". Het Woningbeeld heeft geen invoervelden en houdt hem in het
   formulier. */
.form-actions--verdeeld .btn--primary { margin-left: auto; }
.form-actions--verdeeld .opnieuw-link { flex-basis: 100%; }

/* Stille herstart in de funnel: een link, geen knop — weglopen uit het
   formulier ís opnieuw beginnen, want de stand reist alleen in de verborgen
   velden en de server bewaart niets. */
.opnieuw-link {
  font-size: 0.9375rem;
  color: var(--txt-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.opnieuw-link:hover {
  color: var(--clr-green);
}

/* --------------------------------------------------------------------------
   20b. Woningcheck-funnel — premium stap-opzet (01-09)
   -------------------------------------------------------------------------- */

/* Compacte funnelschil: smallere container, lage kop, tweekoloms lijf met
   de formulierkaart links en de uitlegkolom rechts (gestapeld onder 960px). */
.container--funnel { max-width: 1120px; }
.page-hero--funnel { padding-block: var(--sp-5) var(--sp-4); }
.page-hero--funnel h1 { margin-bottom: 0; }
.funnel-titel {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  text-align: center;
}
/* Funnelpagina's zonder stepper (zoals het huurslot) dragen de kicker;
   die hoort dan mee te centreren met de funnel-titel eronder. */
.page-hero--funnel .kicker {
  display: block;
  text-align: center;
}
/* Bovenruimte (B-40, besluit eigenaar 16-09): sinds de kleurronde is de kop
   wit en de stapsectie lichtgroen, dus de kaart mag niet op de kleurgrens
   beginnen. */
.section--funnel { padding-block: clamp(var(--sp-4), 3vw, var(--sp-6)) clamp(48px, 6vw, 80px); }

.funnel-layout {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}
@media (min-width: 960px) {
  .funnel-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--sp-5);
  }
  .funnel-zijkant {
    position: sticky;
    top: var(--sp-4);
  }
}
.funnel-zijkant {
  display: grid;
  gap: var(--sp-4);
}

/* Stepper: vijf genummerde bollen met korte verbindingsstreepjes. Op smalle
   schermen houdt alleen de actieve stap zijn naam. */
/* Gecentreerd en groter sinds 01-09 avond (wens eigenaar); de funnel-kop
   (stepper + H1) is daarmee als geheel gecentreerd. */
.stappen {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: 0;
  margin: 0 0 var(--sp-4);
}
.stap {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.stap:not(:first-child)::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 1px;
  background-color: rgba(0, 0, 0, 0.15);
}
.stap--klaar:not(:first-child)::before,
.stap--nu:not(:first-child)::before {
  background-color: var(--clr-accent);
}
.stap-bol {
  width: 38px;
  height: 38px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  background-color: var(--clr-white);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  color: var(--txt-soft);
}
.stap--klaar .stap-bol {
  background-color: var(--clr-green-light);
  border-color: var(--clr-green-light);
  color: var(--clr-green);
}
.stap--nu .stap-bol {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-white);
}
.stap-naam {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--txt-soft);
}
.stap--nu .stap-naam { color: var(--clr-green); }

/* Afgeronde stappen zijn klikbaar (terugnavigatie): de knop erft de bol- en
   naamstijl van zijn stap en licht op bij hover en toetsenbordfocus. */
.stap-knop {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.stap-knop:hover .stap-bol,
.stap-knop:focus-visible .stap-bol {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-white);
}
.stap-knop:hover .stap-naam { color: var(--clr-green); }
.stap-knop:focus-visible {
  outline: 3px solid var(--clr-accent);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}
@media (max-width: 700px) {
  .stap:not(.stap--nu) .stap-naam { display: none; }
  .stap:not(:first-child)::before { width: 14px; }
}

/* Samenvattingskaart: wat de registers over de woning zeggen, compact. */
.samenvatting {
  background-color: var(--clr-green-light);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
/* De kicker "Gevonden in de openbare registers" is 01-09 avond geschrapt
   (eigenaar: "voegt echt niks toe"); het adres draagt nu zelf de kop van
   de kaart, in het groen. */
.samenvatting-adres {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--clr-green);
  margin-bottom: 2px;
}
.samenvatting-meta { margin-bottom: var(--sp-2); }
.label-chip {
  display: inline-block;
  background-color: var(--clr-white);
  color: var(--clr-green);
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  box-shadow: var(--shadow-card);
}
.label-chip--zacht {
  color: var(--txt-soft);
  font-weight: 600;
}
/* De gekleurde chip-varianten (--a t/m --g, --indicatie) zijn 01-09 avond
   opgeruimd: de chip verdween uit de samenvattingskaart (dubbelop met de
   labelbalk, besluit eigenaar); de landelijke labelkleuren leven door in de
   labelbalk hieronder. Alleen de zachte tekst-chip bestaat nog. */

/* Het labelblok in stap 1 (herindeling 01-09: de aparte labelstap is
   opgegaan in stap 1). */
.label-blok { margin-block: var(--sp-4); }
.label-blok .labelbalk { margin-top: var(--sp-2); }

/* De schaal van G t/m A++++; het eigen vak licht op via de containerklasse.
   '+' mag niet in een CSS-klassenaam, vandaar ap1 t/m ap4. */
.labelbalk {
  display: flex;
  gap: 4px;
  max-width: 640px;
  padding: 4px 0;
}
.labelvak {
  flex: 1;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: 8px;
  opacity: 0.45;
}
.labelvak--plus {
  flex: 0.9;
  font-size: 0.6875rem;
  letter-spacing: -0.02em;
  padding-inline: 2px;
}
.labelvak--a { background-color: #008236; color: var(--clr-white); }
.labelvak--b { background-color: #55ab26; color: rgba(0, 0, 0, 0.87); }
.labelvak--c { background-color: #c8d200; color: rgba(0, 0, 0, 0.87); }
.labelvak--d { background-color: #ffec00; color: rgba(0, 0, 0, 0.87); }
.labelvak--e { background-color: #f9b000; color: rgba(0, 0, 0, 0.87); }
.labelvak--f { background-color: #eb6909; color: rgba(0, 0, 0, 0.87); }
.labelvak--g { background-color: #d1001a; color: var(--clr-white); }
.labelvak--ap1 { background-color: #007230; color: var(--clr-white); }
.labelvak--ap2 { background-color: #00622a; color: var(--clr-white); }
.labelvak--ap3 { background-color: #005224; color: var(--clr-white); }
.labelvak--ap4 { background-color: #00431e; color: var(--clr-white); }
.labelbalk--a .labelvak--a,
.labelbalk--b .labelvak--b,
.labelbalk--c .labelvak--c,
.labelbalk--d .labelvak--d,
.labelbalk--e .labelvak--e,
.labelbalk--f .labelvak--f,
.labelbalk--g .labelvak--g,
.labelbalk--ap1 .labelvak--ap1,
.labelbalk--ap2 .labelvak--ap2,
.labelbalk--ap3 .labelvak--ap3,
.labelbalk--ap4 .labelvak--ap4 {
  opacity: 1;
  position: relative;
  transform: scale(1.12);
  box-shadow: var(--shadow-card);
}
/* "Nu"/"haalbaar"-route op één balk (eigenaar 01-09 avond: "nu vs haalbaar
   kan verwarrend zijn"): het eigen vak draagt het woord NU eronder, het
   doelvak het woord HAALBAAR erboven (zie .labelvak--haalbaar), zodat de
   twee uitgelichte vakken nooit te verwisselen zijn en samen als route
   lezen. Op het indicatie-pad heet het eigen vak INSCHATTING (we claimen
   geen geregistreerd label). De balk reserveert onderaan ruimte voor het
   woord. */
.labelbalk {
  margin-bottom: 1.125rem;
}
.labelbalk--g .labelvak--g::after,
.labelbalk--f .labelvak--f::after,
.labelbalk--e .labelvak--e::after,
.labelbalk--d .labelvak--d::after,
.labelbalk--c .labelvak--c::after,
.labelbalk--b .labelvak--b::after,
.labelbalk--a .labelvak--a::after,
.labelbalk--ap1 .labelvak--ap1::after,
.labelbalk--ap2 .labelvak--ap2::after,
.labelbalk--ap3 .labelvak--ap3::after,
.labelbalk--ap4 .labelvak--ap4::after {
  content: "nu";
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--clr-green);
  white-space: nowrap;
}
.labelbalk--indicatie.labelbalk--a .labelvak--a::after,
.labelbalk--indicatie.labelbalk--b .labelvak--b::after,
.labelbalk--indicatie.labelbalk--c .labelvak--c::after,
.labelbalk--indicatie.labelbalk--d .labelvak--d::after,
.labelbalk--indicatie.labelbalk--e .labelvak--e::after,
.labelbalk--indicatie.labelbalk--f .labelvak--f::after,
.labelbalk--indicatie.labelbalk--g .labelvak--g::after {
  content: "inschatting";
}
/* .labelbalk-uitleg ("Hoe verder naar rechts...") is 01-09 avond geschrapt
   (eigenaar): NU + het haalbaar-blok vertellen de richting al, de balk-aria
   beschrijft de schaal voor screenreaders. */
/* Indicatie-variant voor adressen zonder geregistreerd label: dezelfde
   labelkleuren (de standaard), maar visueel te onderscheiden van een echt
   label via een gestippelde uitlichting en een eigen aria-tekst. (De
   indicatie-chip verdween 01-09 avond met de kaart-chip.) */
.labelbalk--indicatie.labelbalk--a .labelvak--a,
.labelbalk--indicatie.labelbalk--b .labelvak--b,
.labelbalk--indicatie.labelbalk--c .labelvak--c,
.labelbalk--indicatie.labelbalk--d .labelvak--d,
.labelbalk--indicatie.labelbalk--e .labelvak--e,
.labelbalk--indicatie.labelbalk--f .labelvak--f,
.labelbalk--indicatie.labelbalk--g .labelvak--g {
  outline: 2px dashed rgba(0, 0, 0, 0.45);
  outline-offset: 2px;
}
/* Haalbaar-blok (vorm eigenaar 01-09 avond, laatste ronde: het doelvak óp
   de balk was verwarrend naast het eigen vak): een Green Light-blok onder
   de balk met kop "Haalbaar" en het haalbare label links als gekleurde
   badge (hergebruik van de labelvak-kleurklassen, hier zonder balkgedrag),
   met de uitlegzin ernaast. */
.haalbaar-blok {
  background-color: var(--clr-green-light);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
  margin-top: var(--sp-3);
}
.haalbaar-kop {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-green);
  margin-bottom: var(--sp-2);
}
.haalbaar-blok-inhoud {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.haalbaar-blok .labelvak {
  flex: none;
  opacity: 1;
  min-width: 56px;
  min-height: 44px;
  padding-inline: 10px;
  font-size: 1.0625rem;
  letter-spacing: 0;
  box-shadow: var(--shadow-card);
}
.haalbaar-blok p {
  margin: 0;
  font-size: 0.9375rem;
}

/* Mini-routekaart in de zijkolom (01-09 avond, verving de "Daarna"-
   prozakaart): de resterende stappen als korte regels met de echte
   stapnummers, in kleine stepper-bolletjes. */
.vervolg-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}
.vervolg-lijst li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.9375rem;
}
.vervolg-lijst .stap-bol {
  width: 26px;
  height: 26px;
  font-size: 0.8125rem;
  flex: none;
}
/* Beloning als bewuste subregel (eigenaar 01-09 avond: de lange slotregel
   brak lelijk af). */
.vervolg-sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--txt-soft);
}
.samenvatting-notitie {
  margin-top: var(--sp-2);
  font-size: 0.9375rem;
}
/* .samenvatting-bron is 01-09 avond opgeruimd: alle bronregels zijn uit de
   funnel (besluit eigenaar), de vermelding staat centraal op /woningcheck/. */

/* Uitlegkolom */
.zijkaart {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
.zijkaart h2 {
  font-size: 1.125rem;
  margin-bottom: var(--sp-2);
}
.zijkaart--groen {
  background-color: var(--clr-green-light);
  box-shadow: none;
}
.zijkaart .kicker { margin-bottom: var(--sp-1); }
.vinklijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}
.vinklijst li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9375rem;
}
.vinklijst li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--clr-accent);
  font-weight: 700;
}

.woning-foto { margin: 0; }
.woning-foto-beeld {
  position: relative;
  aspect-ratio: 660 / 432;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.woning-foto-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* De centroide van het adres is het beeldmidden; de ring wijst de woning aan. */
.woning-foto-beeld::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--clr-white);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--clr-accent), inset 0 0 0 2px var(--clr-accent);
}
.woning-foto figcaption {
  margin-top: var(--sp-1);
  font-size: 0.8125rem;
  color: var(--txt-soft);
}

/* Inklapbare inschatting: zelfde plus/min-taal als de FAQ (DESIGN §10). */
/* Inschattingskaart in de zijkolom (wens eigenaar 01-09): eerst tonen met
   iconen, aanpassen achter het potlood. Verving het inklapblok
   .voorzet-blok in het formulier. */
.zijkaart--inschatting {
  background-color: var(--clr-green-light);
  box-shadow: none;
}
.inschatting-hint {
  font-size: 0.875rem;
  color: var(--txt-soft);
  margin-bottom: var(--sp-3);
}
.inschatting-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}
.inschatting-lijst li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.inschatting-icoon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--clr-accent);
  margin-top: 1px;
}
.inschatting-bewerk {
  margin-top: var(--sp-3);
  border-top: 1px solid rgba(0, 98, 65, 0.15);
}
.inschatting-bewerk summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-top: var(--sp-2);
  font-weight: 700;
  color: var(--clr-green);
}
.inschatting-bewerk summary::-webkit-details-marker { display: none; }
.inschatting-velden { padding-top: var(--sp-2); }
.inschatting-velden .field input { background-color: var(--clr-white); }

/* Keuzechips: radio's als pills; de input blijft echt en bedienbaar met
   het toetsenbord, alleen visueel verborgen. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-pill);
  background-color: var(--clr-white);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.chip label:active { transform: scale(0.97); }
.chip input:checked + label {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-white);
}
.chip input:focus-visible + label {
  outline: 3px solid var(--clr-accent);
  outline-offset: 2px;
}

.chip-veld { margin-bottom: var(--sp-3); }
.chip-veld:last-child { margin-bottom: 0; }
.chip-veld-label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--sp-1);
}

/* Tussenkop in het formulier, in de taal van een legend. */
.vragen-kop {
  font-size: 1.25rem;
  color: var(--clr-green);
  margin-bottom: var(--sp-1);
}

.fieldset-hint--signaal {
  background-color: var(--clr-green-light);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
  color: var(--txt);
}

/* Vervolgvraag zonnepanelen-aantal (01-09 avond): dicht per default, open
   zodra "ja" is aangekruist — CSS-only via :has(), geen JavaScript. In een
   browser zonder :has() blijft de vraag dicht; het veld is optioneel, de
   funnel werkt dan gewoon zonder dit antwoord. */
.zon-aantal {
  display: none;
  margin-top: var(--sp-3);
  max-width: 320px;
}
fieldset:has(input[name="zonnepanelen"][value="ja"]:checked) .zon-aantal {
  display: block;
}

/* "Anders" gekozen? Dan verschijnt een optioneel tekstveld voor een eigen
   toelichting (wens eigenaar 01-09 naronde; zelfde :has()-patroon als
   .zon-aantal: zonder :has() blijft het veld dicht en optioneel, dus de
   funnel breekt nooit — verplichte velden blijven verboden in onthuld
   gebied). */
.anders-invoer {
  display: none;
  margin-top: var(--sp-3);
  max-width: 480px;
}
fieldset:has(input[value="anders"]:checked) .anders-invoer {
  display: block;
}

/* --------------------------------------------------------------------------
   20c. Premium subpagina-opzet (02-09, wens eigenaar: "de gehele website
   premium, net als de Woningcheck"): gecentreerde paginakop en het eerste
   inhoudsblok als funnel-layout — hoofdkaart links, sticky zijkolom rechts.
   De overige secties houden het color-blockritme van DESIGN §2.
   -------------------------------------------------------------------------- */

/* Gecentreerde lead onder de funnel-titel; de leesbreedte blijft begrensd. */
.funnel-lead {
  max-width: 46em;
  margin-inline: auto;
  margin-top: var(--sp-2);
  text-align: center;
}

/* (.hoofdkaart is opgeruimd in de trustronde (07-09): de laatste gebruiker
   was /contact/, dat sindsdien de ctx-werkruimte draagt.) */

/* (.zijfoto en .linklijst zijn opgeruimd in de thuisbatterij-pilot (05-09):
   de productfoto's staan sindsdien in de pp-hero en de "Ook op deze
   pagina"-navigatiekaarten zijn vervallen; geen andere pagina gebruikte ze.) */

/* Werkwijze: de vier stappen als één kolom in de hoofdkaart (verving de
   inline grid-style op de <ol>); wint door bronvolgorde van de
   kolom-media-queries op .steps hierboven. */

/* Grafieken op /energie/ (02-09): vaste hoogte tegen layout shift; het
   canvas vult de wrapper (Chart.js, maintainAspectRatio uit). */
.grafiek-wrap {
  position: relative;
  height: 280px;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-2);
}
@media (max-width: 700px) {
  .grafiek-wrap { height: 220px; }
}

/* Verplicht NED-bronblok (Fase 1B, voorwaarden art. 8.2): officieel logo +
   klikbare link + bijwerktijdstip, in de directe context van de data.
   Bewust rustig vormgegeven: bronvermelding, geen visuele overheersing. */
.bronblok {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background-color: var(--clr-ceramic);
  border-radius: var(--radius-card);
}
.bronblok-logo { flex: 0 0 auto; display: block; }
.bronblok-logo img { display: block; width: 61px; height: auto; }
.bronblok-tekst { font-size: 0.875rem; color: var(--txt-soft); }
.bronblok-tekst p { margin: 0; }
.bronblok-tekst p + p { margin-top: var(--sp-1); }

/* Logo op een bronkaart van /data/bronnen/. */
.bron-logo { margin: var(--sp-2) 0; }
.bron-logo img { display: block; width: 61px; height: auto; }

/* Bronregel met logo op statische pagina's (NED-bronvermelding). */
.bron-logo-regel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 640px;
  margin-top: var(--sp-2);
  font-size: 0.875rem;
  color: var(--txt-soft);
}
.bron-logo-regel img { display: block; width: 44px; height: auto; }

/* --------------------------------------------------------------------------
   20d. Energieprofiel (02-09): /energie/vandaag/, gemeentepagina's en de
   /data/-pagina's. Antwoord-eerst: witte antwoordkaart in de page-hero met
   maximaal drie kerncijfers, daarna secties in het gewone color-blockritme.
   Grafieken zijn servergerenderde SVG (nul JavaScript); brede tabellen en
   grafieken scrollen in hun eigen container, nooit de pagina.
   -------------------------------------------------------------------------- */

.antwoord-kaart {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  padding: var(--sp-4);
  margin-top: var(--sp-4);
  max-width: 880px;
  /* Onder de gecentreerde kop hoort de kaart ook gecentreerd. */
  margin-inline: auto;
  text-align: left;
}
@media (min-width: 768px) {
  .antwoord-kaart { padding: var(--sp-6); }
}
.antwoord-kaart .lead { margin: 0; }
.antwoord-kaart .sectie-actie { margin-top: var(--sp-4); margin-bottom: 0; }

.kerncijfers {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
@media (min-width: 700px) {
  .kerncijfers { grid-template-columns: repeat(3, 1fr); }
}
.kerncijfer {
  background-color: var(--clr-green-light);
  border-radius: var(--radius-card);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-1);
  align-content: start;
}
.kerncijfer-kop {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-green);
}
.kerncijfer-waarde {
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: var(--clr-house);
  letter-spacing: -0.02em;
}
.kerncijfer-sub {
  font-size: 0.875rem;
  color: var(--txt-soft);
}

.dataversheid {
  margin-top: var(--sp-3);
  font-size: 0.875rem;
  color: var(--txt-soft);
}

/* Conclusie boven een grafiek: de vetgedrukte antwoordregel. */
.conclusie { max-width: 60ch; }

/* Gecentreerde inhoudskolom voor grafiek- en tabelblokken: breder dan de
   leeskolom, smaller dan de sectie, altijd in het midden. */
.blok-midden {
  max-width: 880px;
  margin-inline: auto;
}

/* SVG-grafieken als kaart; op smalle schermen scrollt de grafiek in zijn
   eigen container (leesbaar blijven wint van passend maken). */
.grafiek-scroll {
  overflow-x: auto;
  margin-top: var(--sp-3);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background-color: var(--clr-white);
}
.grafiek-scroll svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  padding: var(--sp-2);
  box-sizing: border-box;
}

/* Tijdblok-kaarten: de twee antwoorden (goedkoopst en groenst) als grote
   kaarten met de tijd als blikvanger; de overlap als Green Light-kaart. */
.tijdblok-grid {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (min-width: 768px) {
  .tijdblok-grid { grid-template-columns: 1fr 1fr; }
}
.tijdblok-kaart {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) var(--sp-4);
}
.tijdblok-kaart h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-green);
  margin-bottom: var(--sp-2);
}
.tijdblok-tijd {
  display: block;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clr-house);
  margin-bottom: var(--sp-2);
}
.tijdblok-kaart p { margin-bottom: 0; }
.tijdblok-kaart p + p { margin-top: var(--sp-2); }

/* Volle-breedte kaart onder het tijdblok-duo (overlap, nuance, betekenis). */
.tijdblok-breed { grid-column: 1 / -1; }
.tijdblok-kaart--groen { background-color: var(--clr-green-light); }

.datatabel {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-3);
  font-size: 0.9375rem;
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.datatabel caption {
  text-align: left;
  font-weight: 700;
  color: var(--clr-green);
  padding: var(--sp-3) var(--sp-3) 0;
}
.datatabel th,
.datatabel td {
  text-align: left;
  padding: 10px var(--sp-3);
}
.datatabel thead th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--txt-soft);
  border-bottom: 1px solid #e7e7e7;
}
.datatabel tbody tr:not(:last-child) td { border-bottom: 1px solid #f0efeb; }

.tabel-meer { margin-top: var(--sp-3); }
.tabel-meer > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--clr-accent);
  padding: var(--sp-2) 0;
}

.blok-uitkomst {
  background-color: var(--clr-green-light);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  margin-top: var(--sp-4);
}
.blok-uitkomst h3 {
  margin-bottom: var(--sp-2);
  color: var(--clr-green);
}

.nuance-regel {
  font-size: 0.875rem;
  color: var(--txt-soft);
  margin-bottom: 0;
}

/* Brondetails op /data/bronnen/: compacte definitielijst per bron. */
.bron-details {
  margin: var(--sp-3) 0 var(--sp-5);
  display: grid;
  gap: var(--sp-1) var(--sp-3);
}
@media (min-width: 700px) {
  .bron-details { grid-template-columns: 200px 1fr; }
}
/* B-40 (17-09): twee bronkaarten naast elkaar zijn tussen 768 en 1023 px te
   smal voor een vaste kolom van 200 px; een lange bronlink (CBS StatLine)
   dwong de kaarten daarbij breder dan het scherm. */
@media (min-width: 768px) and (max-width: 1023px) {
  .card-grid--2 .bron-details { grid-template-columns: 1fr; }
}
.bron-details dt {
  font-weight: 700;
  color: var(--clr-green);
  font-size: 0.9375rem;
}
.bron-details dd {
  margin: 0 0 var(--sp-2);
  color: var(--txt-soft);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
/* In een bronkaart sluit de definitielijst de kaart af zonder narand. */
.card .bron-details { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   21. Afsluitende CTA-band
   -------------------------------------------------------------------------- */
.cta-band .check-form {
  margin-top: var(--sp-4);
}

/* Fotoband als afsluiting (28-08, uit het concept van de andere site): de foto ligt
   absoluut onder de inhoud, met een House Green-sluier erover (radiaal achter de tekst
   plus een lichte verticale, zoals de nachtstand van de hero). Functionele scrim óver
   een foto, geen vlakgradient (DESIGN.md §2). Sluierwaarden zijn gemeten, zie HANDOFF
   §Meetfeiten; niet verlagen zonder opnieuw te meten. */
.cta-band--foto {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 560px;
}
.cta-band__foto,
.cta-band__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cta-band__foto img {
  object-fit: cover;
  object-position: center 85%;
  display: block;
}
/* `::after`, niet `::before`: een `::before` is het eerste kind en de foto (een later
   kind, ook absoluut) schildert er dan overheen; gemeten 28-08 met een sluier die
   onzichtbaar bleef. `.container` heeft z-index 1 en blijft boven de sluier. */
.cta-band--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 72% at 50% 44%, rgba(14, 30, 25, 0.58) 0%, rgba(14, 30, 25, 0.34) 45%, rgba(14, 30, 25, 0) 82%),
    linear-gradient(to bottom, rgba(14, 30, 25, 0.48) 0%, rgba(14, 30, 25, 0.26) 38%, rgba(14, 30, 25, 0.20) 70%, rgba(14, 30, 25, 0.42) 100%);
}
.cta-band--foto .container {
  position: relative;
  z-index: 1;
}
.cta-band--foto .band-inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.cta-band--foto h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 28px rgba(14, 30, 25, 0.75), 0 1px 3px rgba(14, 30, 25, 0.6);
}
.cta-band--foto p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 34em;
  margin-inline: auto;
  text-shadow: 0 1px 18px rgba(14, 30, 25, 0.8);
}
.cta-band--foto .check-form {
  margin-inline: auto;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--clr-house);
  color: var(--txt-inv-soft);
  padding-block: var(--sp-8) var(--sp-5);
}

.footer-grid {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer-brand img {
  width: 140px;
  height: 41px;
  margin-bottom: var(--sp-3);
}
.footer-brand p {
  font-size: 0.9375rem;
  max-width: 30em;
  color: var(--txt-inv-soft);
}

.footer-title {
  color: var(--txt-inv);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li { margin-bottom: 2px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--txt-inv-soft);
  text-decoration: none;
  font-size: 0.9375rem;
}
.footer-links a:hover {
  color: var(--txt-inv);
  text-decoration: underline;
}

.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  font-size: 0.875rem;
}
.footer-bottom p { margin: 0; color: var(--txt-inv-soft); }

/* --------------------------------------------------------------------------
   23. Subpagina-koppen
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--sp-5) clamp(40px, 6vw, 72px);
}
.page-hero h1 { margin-bottom: var(--sp-3); }
.page-hero .lead { max-width: var(--measure); margin-bottom: 0; }

/* B-45 (concept 17-09, besluit eigenaar "alles zoals /energie/"): de
   paginakop als donkergroene band, in de maat van de /energie/-datahero.
   Kleuren van tekst en links komen uit .section--house. */
.page-hero--band {
  padding-block: clamp(48px, 7vw, 96px);
}
.page-hero--band h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -0.02em;
}
.page-hero--band .lead { color: var(--txt-inv-soft); }
.breadcrumbs + .page-hero--band { margin-top: var(--sp-4); }
/* Witte antwoordkaart in de band (/energie/vandaag/, gemeentepagina's):
   eigen donkere tekst, links op de lijn van de kop. */
.page-hero--band .antwoord-kaart { margin-inline: 0; color: var(--txt); }
.page-hero--band .antwoord-kaart .lead { color: var(--txt); }
/* Artikelkop: categorielabel leesbaar op de band, met lucht naar de kop. */
.page-hero--band .cat-chip { color: var(--clr-gold); margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   24. Diversen
   -------------------------------------------------------------------------- */
.source-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.source-list li { margin-bottom: var(--sp-2); }
.source-list a { color: var(--clr-accent); }

/* 404 */
.error-page {
  text-align: center;
  padding-block: clamp(64px, 12vw, 128px);
}
.error-page img {
  width: 140px;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
}
.error-page .btn { margin-top: var(--sp-3); }
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   25. Artikelpagina (kennisbank)
   -------------------------------------------------------------------------- */
/* De artikelkop met illustratie (.artikel-hero) en de inhoudsopgave in pill-chips
   (.inhoudsopgave) zijn 19-09 weggehaald: het enige artikel dat ze gebruikte is
   de salderingspagina geworden (sectie 40). */

/* Tijdlijn 2026 → 2027 → 2030: jaarbadge met verbindingslijn, zelfde idee als
   de trajectstrip op de homepage */
.tijdlijn {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0;
  display: grid;
  gap: var(--sp-4);
  position: relative;
}
.tijdlijn__stap {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--sp-3);
}
.tijdlijn__stap:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 56px;
  bottom: calc(var(--sp-4) * -1);
  width: 2px;
  background-color: var(--clr-green-light);
}
.jaar-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--clr-green);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tijdlijn__stap h3 { margin-bottom: var(--sp-1); font-size: 1rem; }
.tijdlijn__stap p { margin: 0; color: var(--txt-soft); }
@media (min-width: 760px) {
  .tijdlijn {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--sp-4);
  }
  .tijdlijn::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    background-color: var(--clr-green-light);
  }
  .tijdlijn__stap {
    display: block;
    text-align: center;
  }
  .tijdlijn__stap .jaar-badge { margin-bottom: var(--sp-3); position: relative; z-index: 1; }
  .tijdlijn__stap:not(:last-child)::after { display: none; }
}

/* --------------------------------------------------------------------------
   26. Premium verfijningen sitebreed (gebouwd als Fase 2, 04-09):
   page-hero, datakaarten, rapport- en statuscomponenten, nav-verfijning.
   Eén motionsysteem: uitsluitend transform/opacity, tokens uit sectie 2,
   alles valt stil onder prefers-reduced-motion (globale regel, sectie 3).
   -------------------------------------------------------------------------- */

/* De header-CTA houdt zijn tekst op één regel, ook als de nav wrapt; op
   smalle schermen compacter zodat hij naast het logo op de eerste rij past. */
.header-cta { white-space: nowrap; }
@media (max-width: 520px) {
  .header-cta {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.875rem;
  }
  .brand img { width: 120px; height: 35px; }
}

/* --- 26a. Navigatie: Kennis & data als crawlbare dropdown (details, geen JS).
   De sublinks staan altijd in de server-HTML; CSS positioneert ze op desktop
   als paneel en toont ze op mobiel gewoon inline. --- */
.nav-dropdown { position: relative; }
.nav-dropdown > summary {
  list-style: none;
  cursor: pointer;
  gap: 6px;
  user-select: none;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-link--drop svg {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  transition: transform var(--dur-basis) var(--ease-uit);
}
.nav-dropdown[open] > summary svg { transform: rotate(180deg); }
.nav-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--sp-2) var(--sp-3);
}
.nav-sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--txt);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.nav-sublink:hover {
  background-color: var(--clr-green-light);
  color: var(--clr-green);
}
.nav-sublink[aria-current="page"] { color: var(--clr-green); }
@media (min-width: 900px) {
  .nav-sub {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 264px;
    background-color: var(--clr-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
    padding: var(--sp-2);
    z-index: 30;
  }
  .nav-dropdown[open] .nav-sub {
    animation: paneel-in var(--dur-basis) var(--ease-uit);
  }
}
@keyframes paneel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 26b. Hero-introductie: kop, subregels en formulier komen één keer
   rustig omhoog. Alleen transform/opacity; geen layout shift (de ruimte
   staat vast, alleen de laag beweegt). --- */
@keyframes intro-omhoog {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-foto__inhoud > * {
  animation: intro-omhoog var(--dur-lang) var(--ease-uit) backwards;
}
.hero-foto__inhoud > :nth-child(2) { animation-delay: 90ms; }
.hero-foto__inhoud > :nth-child(3) { animation-delay: 160ms; }
.hero-foto__inhoud > :nth-child(4) { animation-delay: 230ms; }
.hero-foto__inhoud > :nth-child(5) { animation-delay: 300ms; }
/* ⚠️ De subregel draagt óók de 12s-dag/nachtkleur (hero-sub, sectie 12b) en
   één animation-shorthand vervangt de hele lijst — de generieke intro-regel
   hierboven zette die kleurcyclus dus ongemerkt uit (zolang de dagstand
   voorgeprikt stond viel dat niet op; 08-09 is de auto-wissel terug). Daarom
   hier expliciet allebei: de intro met zijn eigen 90ms-startvertraging
   (per animatie, dus de kleurcyclus start mét de foto op 0 s), en sterker
   geschreven dan de nth-child(2)-regel zodat deze delay-lijst wint. */
.hero-foto__inhoud > .hero-foto__sub {
  animation: intro-omhoog var(--dur-lang) var(--ease-uit) 90ms backwards,
    hero-sub 12s ease-in-out infinite;
}

/* --- 26c. Tab-pillen op radio's (toetsenbord: pijltjes tussen radio's).
   Gebouwd voor het Voorbeeld Woningrapport op de homepage; dat venster is
   11-09 verwijderd (eigenaarsbesluit "teveel info") en de bijbehorende
   rapport-/dossier-/chipstijlen zijn mee gesnoeid. De dataverkenner op
   /energie/ gebruikt .rapport-tab nog (api/energie.js). --- */
.rapport-tab {
  position: relative;
  display: inline-flex;
}
.rapport-tab input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.rapport-tab span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--txt);
  transition: background-color var(--dur-kort) var(--ease-uit),
    border-color var(--dur-kort) var(--ease-uit),
    color var(--dur-kort) var(--ease-uit),
    transform var(--dur-kort) ease;
}
.rapport-tab input:checked + span {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #fff;
}
.rapport-tab input:focus-visible + span {
  outline: 3px solid var(--clr-accent);
  outline-offset: 2px;
}
.rapport-tab input:active + span { transform: scale(0.97); }

/* 26e (rekenpad-subsidieband, slotronde 05-09) is 07-09 vervangen door de
   rekenformule-sectie (32) en 09-09 opgeruimd; historie: git. */

/* --- 26f. Waarom Stroomy: 07-09, naar het referentiescreenshot van
   stroomy.nl-productie — vier witte voordeelkaarten met hovereffect
   (lift + groene rand) vervangen de vinkenlijst. Transitie beperkt tot
   transform/rand/schaduw; de globale reduced-motion-regel dekt dit. --- */
.section-head--midden {
  margin-inline: auto;
  text-align: center;
}
.voordeel-kaarten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 700px) {
  .voordeel-kaarten { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .voordeel-kaarten { grid-template-columns: repeat(4, 1fr); }
}
.voordeel-kaart {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  transition: transform var(--dur-basis) var(--ease-uit),
    border-color var(--dur-basis) var(--ease-uit),
    box-shadow var(--dur-basis) var(--ease-uit);
}
.voordeel-kaart:hover {
  transform: translateY(-4px);
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-card);
}
.voordeel-kaart__icoon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: var(--clr-green-light);
  color: var(--clr-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.voordeel-kaart__icoon svg { width: 24px; height: 24px; }
/* 07-09, tweede hover-referentie eigenaar: de titel kleurt mee. In rust
   donker (house) zodat de sprong naar accentgroen zichtbaar is. */
.voordeel-kaart h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--sp-2);
  color: var(--clr-house);
  transition: color var(--dur-basis) var(--ease-uit);
}
.voordeel-kaart:hover h3 { color: var(--clr-accent); }
.voordeel-kaart p { margin: 0; font-size: 0.9375rem; color: var(--txt-soft); }
/* --- 26g. FAQ-beweging: het antwoord schuift rustig in beeld; de
   plus/min-indicator draait mee. Geen hoogte-animatie (layout shift). --- */
details[open] > .faq-body {
  animation: intro-omhoog var(--dur-basis) var(--ease-uit);
}

/* --- 26h. Kaart-hover voor klikbare kaarten: subtiele lift, meteen weer
   rustig. Alleen op kaarten die in hun geheel ergens heen leiden. --- */
.kaart-klikbaar {
  /* 07-09: zelfde hovertaal als de voordeelkaarten (groene rand erbij);
     transparante basisrand voorkomt een layoutsprong. */
  border: 1px solid transparent;
  transition: transform var(--dur-basis) var(--ease-uit),
    box-shadow var(--dur-basis) var(--ease-uit),
    border-color var(--dur-basis) var(--ease-uit);
}
.kaart-klikbaar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--clr-accent);
}
.kaart-klikbaar h3 { transition: color var(--dur-basis) var(--ease-uit); }
.kaart-klikbaar:hover h3 { color: var(--clr-accent); }

/* --- 26i. Mobiele CTA-balk: verschijnt pas als de hero-CTA uit beeld is
   (site.js, IntersectionObserver). Zonder JavaScript blijft hij weg. --- */
.mobiele-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.10), 0 -2px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(110%);
  transition: transform var(--dur-basis) var(--ease-uit);
}
.mobiele-cta .btn { width: 100%; }
.mobiele-cta--zichtbaar { transform: translateY(0); }
@media (min-width: 900px) {
  .mobiele-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobiele-cta { transition: none; }
}

/* --- 26k. Formulier-feedback: de submitknop toont een bezig-stand zodra
   site.js hem markeert (progressive enhancement; zonder JS gebeurt er
   niets bijzonders en werkt het formulier gewoon). --- */
.btn[data-bezig] { position: relative; color: transparent; pointer-events: none; }
.btn[data-bezig]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: bezig-draai 700ms linear infinite;
}
.btn--outline[data-bezig]::after,
.btn--inverse[data-bezig]::after {
  border-color: rgba(0, 117, 74, 0.35);
  border-top-color: var(--clr-accent);
}
/* Pilotcorrectie (05-09): in de donkere slotband bleef tijdens de
   bezig-stand alleen een vaag ringetje over (label transparant). Het label
   blijft daar nu gedimd leesbaar naast de spinner; de knop blijft
   herkenbaar uitgeschakeld via de basisregel (pointer-events uit). */
.check-form--dark .btn[data-bezig] {
  color: var(--clr-accent);
  opacity: 0.78;
  padding-right: 46px;
}
.check-form--dark .btn[data-bezig]::after {
  inset: 0 16px 0 auto;
  margin-block: auto;
  margin-inline: 0;
}
@keyframes bezig-draai { to { transform: rotate(360deg); } }

/* Split-koppen als h3 (de sectiekop draagt de h2): zelfde beeld als de
   oude split-h2, juiste niveau in de kopstructuur. */
.split-copy h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--clr-green);
  margin-bottom: var(--sp-3);
}

/* --- 26o. Datakaarten (energiehub, boven de vouw): vier rustige tegels
   met kop, grote waarde en actualiteits-subregel. --- */
.datakaarten {
  list-style: none;
  margin: var(--sp-4) auto 0;
  padding: 0;
  max-width: 960px;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) {
  .datakaarten { grid-template-columns: repeat(4, 1fr); }
}
.datakaarten li {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
  display: grid;
  gap: 2px;
  text-align: center;
}
.datakaart-kop {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-uplift);
}
.datakaart-waarde {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--clr-green);
  letter-spacing: -0.02em;
}
.datakaart-sub {
  font-size: 0.75rem;
  color: var(--txt-soft);
}

/* Compact statuslabel voor de eerlijke fallback (nooit een groot leeg
   dashboard): één rustige chip. */
.statuslabel {
  display: inline-block;
  margin: var(--sp-3) auto 0;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background-color: var(--clr-ceramic);
  color: var(--txt-soft);
  font-size: 0.875rem;
  font-weight: 600;
}
.page-hero--funnel .statuslabel { display: table; }

/* Legenda-regel boven de grafieken: wat is gemeten, verwacht, berekend. */
.grafiek-legenda {
  font-size: 0.875rem;
  color: var(--txt-soft);
}

/* Categorierij op de kennisbank-hub: rustige labels (geen lege links). */
.categorie-rij {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}
.categorie-rij li {
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--txt-soft);
  background-color: var(--clr-white);
}

/* (.funnel-microcopy is opgeruimd in batch 1, .funnel-actie in batch 2,
   .tussenkop-sectie in de warmtepomp-pilot (alle 05-09): de pagina's
   gebruiken sindsdien de standaard .microcopy en .sectie-actie; de
   factorregel van de keuzesectie is .pp-keuze__factoren, sectie 30.) */

/* Vinkenlijst voor "wat je krijgt"-opsommingen buiten de zijkaarten. */
.vink-lijst {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  max-width: var(--measure);
  display: grid;
  gap: var(--sp-2);
}
.vink-lijst li {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: var(--sp-2);
  align-items: baseline;
}
.vink-lijst li::before {
  content: "";
  width: 18px;
  height: 18px;
  align-self: center;
  background-color: var(--clr-accent);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5 10-11"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5 10-11"/></svg>') center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   27. Homepage (live sinds 07-09): asymmetrische hero en de secties
   hieronder. Tekst staat nooit over de foto; de dag/nachtwissel leeft
   alleen in het beeldpaneel. Motion: uitsluitend transform/opacity,
   stil onder prefers-reduced-motion (globale regel, sectie 3).
   -------------------------------------------------------------------------- */

/* --- 27a. (07-09) De split-bleed hero uit de correctieronde 06-09 is
   vervallen: de schermvullende fotohero (sectie 12b, .hero-foto) is op
   verzoek van de eigenaar terug. De portal-kaart verdween mee. De
   voortgangsbalk en bronchips die hier stonden hoorden bij het
   dossier-venster en zijn 11-09 met dat venster mee verwijderd. --- */

/* --- 27b. Bewijsband: afgerond lichtgroen blok direct onder de hero
   (eigenaarsbesluit 07-09, naar referentiescreenshot) — drie gelijke
   kolommen op het contentgrid, mobiel een verticale lijst. --- */
.bewijsband {
  background-color: var(--clr-canvas);
  padding-block: clamp(var(--sp-4), 2.5vw, 28px); /* ondergrens 24px sinds B-40 (was 18px) */
}
.bewijsband__lijst {
  list-style: none;
  margin: 0;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3.5vw, 48px);
  background-color: var(--clr-green-light);
  border-radius: 16px;
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .bewijsband__lijst {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
}
.bewijsband__lijst li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* 08-09 eigenaar: iconen waren te klein en slecht te zien op 34px. */
.bewijsband__lijst .trust-icon { width: 48px; height: 48px; }
.bewijsband__lijst .trust-icon svg { width: 26px; height: 26px; }
/* 08-09 (eigenaarskeuze na twee proefronden met wiebel- en onderdeel-
   varianten): de bewijsband-iconen bewegen om de beurt met hun ONDERDELEN
   (cyclus 9s, start 0/3/6s; de beweging duurt ~1s, daarna rust): de loep
   zoekt over het document, het vinkje op het huisje tekent zichzelf
   opnieuw, het hart klopt dubbel. Alleen transform/dashoffset, geen
   layout shift; de globale reduced-motion-regel (sectie 3) zet alles
   stil in de rusttoestand (vinkje getekend). */
.ic-hart {
  animation: hart-klopt 9s ease-in-out 6s infinite;
  transform-origin: center;
}
/* 08-09 eigenaar: hover op de bewijsband. De cirkel licht op naar het
   accentgroen en het icoon speelt zijn eigen beweging direct en vaker
   af (zelfde keyframes, cyclus 2s i.p.v. 9s). Bewust geen lift/rand
   zoals bij klikbare kaarten: deze items zijn geen links. Reduced
   motion: de globale regel dekt ook deze animaties en transities. */
.bewijsband__lijst li .trust-icon {
  transition: background-color var(--dur-basis) var(--ease-uit),
    transform var(--dur-basis) var(--ease-uit);
}
.bewijsband__lijst li:hover .trust-icon {
  background-color: var(--clr-accent);
  transform: scale(1.08);
}
.bewijsband__lijst li:hover .ic-loep { animation: loep-zoekt 2s ease-in-out infinite; }
.bewijsband__lijst li:hover .ic-vink { animation: vink-tekent 2s linear infinite; }
.bewijsband__lijst li:hover .ic-hart { animation: hart-klopt 2s ease-in-out infinite; }
.ic-loep { animation: loep-zoekt 9s ease-in-out infinite; }
@keyframes loep-zoekt {
  0%, 14%, 100% { transform: none; }
  3% { transform: translate(-2px, -1.6px); }
  7% { transform: translate(1px, 0.8px); }
  11% { transform: translate(-0.6px, -0.4px); }
}
/* Het vinkje op het huisje veegt zichzelf weg en tekent zich opnieuw
   (pathLength=1 in de HTML; buiten de animatie en onder reduced motion
   staat de dashoffset op 0 en is het vinkje gewoon getekend). */
.ic-vink { stroke-dasharray: 1; animation: vink-tekent 9s linear 3s infinite; }
@keyframes vink-tekent {
  0%, 30% { stroke-dashoffset: 0; }
  32%, 35% { stroke-dashoffset: 1; }
  45%, 100% { stroke-dashoffset: 0; }
}
@keyframes hart-klopt {
  0%, 13%, 100% { transform: none; }
  3% { transform: scale(1.18); }
  6% { transform: scale(1); }
  8% { transform: scale(1.14); }
  11% { transform: scale(1); }
}
.bewijsband__lijst p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-house);
}

/* --- 27c. Dossier-venster: VERWIJDERD 11-09 (eigenaarsbesluit "teveel
   info"): de hele homepage-sectie met het voorbeeld-Woningrapport is weg,
   inclusief alle dossier-/rapport-/route-/schouw-/voortgang-/chipstijlen
   die alleen daar leefden. Historie: git (t/m 11-09). --- */

/* --- 27e. Gecombineerd digitaal traject (slotronde 05-09): vijf compacte
   stappen langs een verticale lijn, met de schouwfoto (beeldslot H2) als
   mediahelft. Verving de losse schouw-, probleem- en trajectsecties. --- */
/* 07-09, eigenaarsbesluit: het traject staat horizontaal (referentie = het
   horizontale proces van de oude site) op een lichtgroene sectie; het
   tweeluik lijst-naast-foto (.traject-duo) is daarmee vervallen. Onder
   960px valt de rij terug op de bestaande verticale lijst. */
.traject-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  position: relative;
}
.traject-lijst > li {
  position: relative;
  display: grid;
  /* 19-09: 96px in plaats van 64px — de stap draagt sinds de klantreis een
     illustratie in plaats van een lijn-icoon in een cirkel. De tekst staat
     in de staande indeling op het midden van dat beeld; bij een cirkel van
     64px viel dat niet op, bij een beeld van 98px hoog wel. */
  grid-template-columns: 96px 1fr;
  column-gap: var(--sp-3);
  align-items: center;
}
/* 11-09: de kaart-padding (--sp-4) schuift het beeld mee, dus de
   verbindingslijn ook; hij loopt door de tussenruimte tot het beeld
   van de volgende kaart (gap + padding = 2 × --sp-4).
   19-09: 48px = het midden van het 96px-beeld, 104px = de hoogte ervan
   (96 × 290/284) plus een paar pixels lucht. */
.traject-lijst > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(48px + var(--sp-3));
  top: calc(104px + var(--sp-4));
  bottom: calc(var(--sp-4) * -2);
  width: 2px;
  background-color: rgba(0, 0, 0, 0.08);
}
/* Stapillustratie met nummerbadge (19-09, eigenaarsbesluit: de klantreis van
   zijn eigen plaat). Verving de mintcirkel met het Tabler-lijn-icoon van
   07-09. De illustraties zijn uitsnedes uit die plaat (284×290, witte
   ondergrond gelijkgetrokken naar zuiver wit), dus de kaart hoeft er geen
   vlak achter te zetten. De badge staat linksboven op het beeld, op de plek
   waar het nummerbolletje van de plaat stond; die plek is in de uitsnede
   wit gemaakt, dus er gaat geen illustratie onder verloren. */
.traject-lijst .stap-beeld {
  width: 96px;
  display: block;
  position: relative;
  z-index: 1;
}
.traject-lijst .stap-beeld img {
  width: 100%;
  height: auto;
  display: block;
}
/* 07-09, hover-referentie eigenaar (oude-site-stepper): de stap onder de
   muis licht op. De cirkelvulling is 19-09 vervallen met de cirkel zelf —
   achter een beeldvullende illustratie zou die toch niet te zien zijn, en
   dan wisselde alleen de badge nog van kleur zonder aanleiding. Wat blijft:
   de titel kleurt naar accent en de kaart licht op (zie de kaartregels). */
.traject-lijst h3 { transition: color var(--dur-basis) var(--ease-uit); }
.traject-lijst > li:hover h3 { color: var(--clr-accent); }
.stap-beeld__nummer {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--clr-green);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.traject-lijst h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--sp-1);
}
.traject-lijst p { margin: 0; color: var(--txt-soft); font-size: 0.9375rem; }
/* 11-09, eigenaarsronde 4 ("neem het voordeelkaarten-patroon over"): de
   stappen zijn witte kaarten in exact de voordeelkaart-taal (§26f) — de
   omlijning verschijnt pas bij hover, met dezelfde lift en schaduw.
   19-09: de Tabler-lijn-iconen en hun tekenanimatie zijn vervallen met de
   klantreis; de kaart draagt nu een illustratie. Wat van de choreografie
   overblijft is de verbindingslijn links→rechts en per stap de
   nummerbadge, op transities vanaf startstanden die UITSLUITEND onder
   [data-anim] bestaan; site.js zet dat attribuut alleen mét JS en zónder
   reduced motion, en data-actief zodra de lijst in beeld scrollt. Zonder
   JS of met reduced motion staat alles gewoon getekend (huisregel: geen
   verborgen elementen uit kale CSS). */
.traject-lijst > li {
  /* Zijpadding één maat kleiner dan de voordeelkaart: anders breekt de
     langste stapkop ("Wij blijven je aanspreekpunt") op 1440. */
  padding: var(--sp-4) var(--sp-3);
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  transition: transform var(--dur-basis) var(--ease-uit),
    border-color var(--dur-basis) var(--ease-uit),
    box-shadow var(--dur-basis) var(--ease-uit);
}
.traject-lijst > li:hover {
  transform: translateY(-4px);
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-card);
}
/* 19-09: vijf stappen in plaats van vier, dus een vijfde vertraging. De
   fallback van --stap-wacht is 0s, dus een vergeten stap loopt niet stil
   maar vooruit: hij verschijnt dan vóór stap 1. */
.traject-lijst > li:nth-child(1) { --stap-wacht: 0.2s; }
.traject-lijst > li:nth-child(2) { --stap-wacht: 0.75s; }
.traject-lijst > li:nth-child(3) { --stap-wacht: 1.3s; }
.traject-lijst > li:nth-child(4) { --stap-wacht: 1.85s; }
.traject-lijst > li:nth-child(5) { --stap-wacht: 2.4s; }
.traject-lijst[data-anim] .stap-beeld__nummer {
  opacity: 0;
  transform: scale(0.3);
  /* 19-09: de background-color-transitie is eruit; de enige regel die de
     badgekleur wisselde (hover op de cirkel) is met de cirkel vervallen. */
  transition: opacity 0.35s var(--ease-uit) calc(var(--stap-wacht, 0s) + 0.7s),
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--stap-wacht, 0s) + 0.7s);
}
.traject-lijst[data-actief] .stap-beeld__nummer { opacity: 1; transform: scale(1); }
/* 19-09: de hover-beweging van de lijn-iconen (t-loep-zoekt,
   t-koptelefoon-knikt en het zichzelf tekenende euroteken/vinkje) is
   vervallen met de iconen zelf. De keyframes vink-tekent blijven bestaan,
   want die komen uit §27b en worden daar nog gebruikt. */
/* 19-09: het breekpunt gaat van 960 naar 1100px. Met vier stappen paste de
   rij nog op 960, met vijf niet meer: de kaartinhoud is daar 124,8px terwijl
   het woord "Woningcheck" op kopformaat 132,8px nodig heeft (gemeten). De
   kaart liep dan over zijn eigen padding heen. Onder 1100px staat de
   bestaande verticale lijst, met het beeld links en de tekst rechts. */
@media (min-width: 1100px) {
  .traject-lijst--rij {
    /* minmax(0, 1fr) en niet 1fr: bij 1fr is de minimummaat van een kolom
       zijn min-content, en dan maakt de langste kop kaart 1 breder dan de
       rest. Gemeten op 960px: 134,8px tegen 124,8px, waardoor het beeld van
       kaart 1 groter werd en de verbindingslijn er 5px naast lag. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-5);
    text-align: center;
  }
  .traject-lijst--rij > li {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    row-gap: var(--sp-2);
  }
  /* Eén doorlopende verbindingslijn van het eerste tot het laatste
     beeldmiddelpunt (19-09: 10% en 90% = kolommiddens bij VIJF gelijke
     kolommen; bij vier stond hier 12,5%/87,5%). De kaarten liggen
     eroverheen, dus zichtbaar blijft alleen het stuk in de tussenruimte.
     Met JS (data-anim) tekent hij zich links→rechts zodra de lijst in
     beeld komt (data-actief). */
  .traject-lijst--rij::before {
    content: "";
    position: absolute;
    /* 11-09: +--sp-4 = de kaart-padding, zodat de lijn door de
       beeldmiddelpunten blijft lopen. 19-09: 66px = de halve hoogte van
       het 130px-beeld (130 × 290/284 / 2) dat tussen 1100 en 1240px staat;
       vanaf 1240px wordt het beeld 170px en schuift de lijn mee. */
    top: calc(66px + var(--sp-4));
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.08);
    /* 11-09, eigenaarsverzoek "doorstromend proces": een zachte
       accentgloed stroomt om de ~7s rustig van links naar rechts door
       de lijn (ease-in-out, daarna even rust). Puur decoratief bovenop
       de grijze lijn; reduced motion (globale regel, sectie 3) zet hem
       stil en dan blijft gewoon de grijze lijn staan. */
    background-image: linear-gradient(90deg, transparent, var(--clr-accent), transparent);
    background-size: 22% 100%;
    background-repeat: no-repeat;
    background-position: -30% 0;
    animation: lijn-stroomt 7s ease-in-out 1.5s infinite;
  }
  @keyframes lijn-stroomt {
    0% { background-position: -30% 0; }
    65%, 100% { background-position: 130% 0; }
  }
  .traject-lijst--rij[data-anim]::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 2.8s var(--ease-uit) 0.1s;
  }
  .traject-lijst--rij[data-actief]::before { transform: scaleX(1); }
  .traject-lijst--rij > li::after { display: none; }
  /* 130px tussen 1100 en 1240px (kaartinhoud daar 146 tot 174px, gemeten).
     max-width: 100% is een vangnet voor als de rij ooit weer smaller mag
     beginnen: toen hij nog op 960px begon, was de kaartinhoud 124,8px en
     stak het beeld 5,2px buiten de kaart. */
  .traject-lijst--rij .stap-beeld { width: 130px; max-width: 100%; }
  .traject-lijst--rij .stap-beeld__nummer { top: 6px; left: 6px; }
  .traject-lijst--rij h3 { font-size: 1.25rem; }
  .traject-lijst--rij p { font-size: 1rem; max-width: 30em; }
}
/* Vanaf 1240px is er ruimte voor een groter beeld. 170px is de bovengrens
   die het bronbeeld aankan: de uitsnedes uit de klantreisplaat zijn 284px
   breed, dus groter tonen wordt zichtbaar zachter. De verbindingslijn
   schuift mee naar het nieuwe beeldmidden (170 × 290/284 / 2 = 87px).
   1240 en niet 1200: bij 1200px venster is de kaartinhoud 166,4px (gemeten,
   --gutter is 40px), en dan past 170px net niet. */
@media (min-width: 1240px) {
  .traject-lijst--rij .stap-beeld { width: 170px; }
  .traject-lijst--rij::before { top: calc(87px + var(--sp-4)); }
}
/* Het schouwbeeld met onderschrift (.traject-media, beeldslot H2) is op
   07-09 op eigenaarsverzoek in zijn geheel uit de trajectsectie verwijderd. */

/* --- 27f. Energiemodule op de homepage: VERWIJDERD 11-09 met de
   S8-energiesectie (eigenaarsbesluit "leidt af van de kernboodschap").
   Het embed-blok zelf (api/energie-blok.js) staat sinds 19-09 op geen enkele
   pagina meer: de laatste plek was het oude salderen-artikel. Het endpoint
   bestaat nog. Historie: git. --- */

/* FAQ tweekoloms (layoutcorrectie 06-09 op de homepage; 19-09 eigenaar: elke
   FAQ op de site "net als op de homepage", dus ook /warmtepomp/ en
   /salderen-2027/, bewaakt in _dev/tests/prototype.test.js): kop en actieknop
   links, de accordeons rechts, zodat de sectie de containerbreedte benut.
   DOM-volgorde (kop, lijst, actie) = mobiele volgorde. */
@media (min-width: 1024px) {
  .faq-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
    /* 1fr in de tweede rij: de accordeonlijst bepaalt de hoogte en de
       actieknop blijft direct onder de kop staan. */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "kop lijst"
      "actie lijst";
    column-gap: var(--sp-8);
    align-content: start;
  }
  .faq-duo .section-head { grid-area: kop; margin-bottom: 0; }
  .faq-duo .faq-list { grid-area: lijst; }
  .faq-duo .sectie-actie { grid-area: actie; margin-top: var(--sp-4); align-self: start; }
}

/* --- 27g. Energiesysteem-schema (11-09, eigenaarsronde 3 met
   referentiebeeld; 11-09 ronde 4: compact bliksem-knooppunt i.p.v. het
   grote huis, directe lijn eigen stroom → woning, warmtekleur op de
   warmtepomp-uitgang): één samenhangende inline-SVG-tekening in de
   hero-woning.svg-vlakstijl — zonnepanelen → eigen stroom →
   aftakking warmtepomp/thuisbatterij → woning. De dubbele paden in de
   SVG zijn bewust: .sf-lijn is de rustige grijze leiding, de kopie met
   .sf-stroom draagt de bewegende accent-stippellijn ("stroom loopt");
   de globale reduced-motion-regel (sectie 3) zet die stil en dan blijft
   de grijze leiding staan. De --warm-varianten kleuren de
   warmtepomp-uitgang in de zonwarme tint (#e6a53c, al in de tekening):
   uit de warmtepomp komt warmte, geen stroom. Op smalle schermen
   scrollt het schema in zijn eigen overflow-bak (min-width) zodat de
   tekstlabels leesbaar blijven; de body scrolt nooit horizontaal
   mee. --- */
.systeem-schema { overflow-x: auto; }
.systeem-schema svg {
  display: block;
  width: 100%;
  min-width: 980px; /* 11-09 ronde 4: was 880 — iets groter getekend zodat de
     toelichtingen op mobiel leesbaar blijven (eigenaarsverzoek ronde 4) */
  height: auto;
  margin-inline: auto;
}
.sf-lijn {
  fill: none;
  stroke: #d8ddd9;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.sf-lijn.sf-stroom {
  stroke: var(--clr-accent);
  stroke-dasharray: 4 12;
  animation: sf-stroomt 2.2s linear infinite;
}
.sf-lijn.sf-lijn--warm { stroke: #eeddc4; }
.sf-lijn.sf-stroom--warm { stroke: #e6a53c; }
@keyframes sf-stroomt {
  to { stroke-dashoffset: -16; }
}

/* --------------------------------------------------------------------------
   28. Energiehub /energie/ (live sinds 07-09): donkere datahero met Energiekompas,
   de drie-lagenregels onder elk datablok, de Batterijkans en het permanente
   previewlabel. Kleuren blijven binnen het vier-groenen-systeem.
   -------------------------------------------------------------------------- */
/* Slotronde 05-09, layoutcorrectie 06-09: de datahero deelt de
   gecentreerde standaardkolom van de hub; alleen de meter en de cijfers
   centreren binnen hun eigen visualisatie. */
.datahero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.datahero .kicker { color: var(--clr-gold); }
.datahero__lead {
  color: var(--txt-inv-soft);
  max-width: 46em;
}
.datahero__grid {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-5);
  max-width: var(--w-standard);
}
@media (min-width: 900px) {
  .datahero__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}
.datahero__kaarten { width: 100%; }
.datahero .datakaarten {
  margin-top: 0;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
  .datahero .datakaarten { grid-template-columns: repeat(2, 1fr); }
}
.datahero .datakaarten li {
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.datahero .datakaart-kop { color: var(--clr-green-light); }
.datahero .datakaart-waarde { color: #fff; }
.datahero .datakaart-sub { color: var(--txt-inv-soft); }
.datahero .dataversheid {
  color: var(--txt-inv-soft);
  margin-top: var(--sp-4);
}
.datahero .statuslabel {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--txt-inv-soft);
}

/* Het Energiekompas: servergerenderde SVG-meter met de stand als
   redactionele samenvatting; de losse waarden staan in de kaarten ernaast. */
.kompas { max-width: 320px; text-align: center; }
.kompas-svg { width: 100%; max-width: 280px; height: auto; }
.kompas-astekst {
  fill: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
}
.kompas-stand {
  margin: var(--sp-2) 0 var(--sp-1);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.kompas-sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--txt-inv-soft);
}
.kompas-sub a { color: var(--clr-green-light); }

/* Labels voor redactionele samenvattingen en de previewmodus. Het
   previewlabel is permanent zichtbaar op elk voorbeeldblok. */
.redactie-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--txt-inv-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}
.redactie-chip--licht {
  background-color: rgba(30, 57, 50, 0.10);
  color: var(--clr-house);
}
.preview-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background-color: var(--clr-house);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.datahero .preview-chip {
  background-color: #fff;
  color: var(--clr-house);
}

/* De vaste drie-lagenregels onder een datablok: waarom is dit relevant en
   wat kun je ermee. */
.laag-waarom {
  margin-top: var(--sp-3);
  color: var(--txt-soft);
}
.laag-actie {
  font-weight: 600;
}
.laag-actie a {
  color: var(--clr-accent);
  text-underline-offset: 3px;
}

/* Batterijkans (slotronde 05-09): tweekolomsblok op de linker gridlijn —
   links het dagsignaal met het feitelijke verschil, rechts wat het wél en
   niet zegt en welke woninggegevens nodig zijn. */
.batterij-duo {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 960px) {
  .batterij-duo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-8);
  }
}
.batterij-signaal p { max-width: 34em; }
.batterijkans-stand {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 700;
  color: var(--clr-green);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
}
.batterij-uitleg h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-uplift);
  margin: var(--sp-4) 0 var(--sp-1);
}
.batterij-uitleg h3:first-child { margin-top: 0; }
.batterij-uitleg p { font-size: 0.9375rem; margin-bottom: 0; max-width: 40em; }
.batterij-uitleg .sectie-actie { margin-top: var(--sp-4); }

/* --- 28b. Dataverkenner (correctieronde 06-09): drie datasets, één
   centraal. Zelfde radiopatroon als het dossier-venster: CSS-only, zonder
   :has()-ondersteuning staan de panelen gestapeld en verdwijnen de tabs.
   Alle inhoud blijft in de server-HTML staan (crawlbaar). --- */
.verkenner { margin-top: var(--sp-4); }
.verkenner-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.verkenner-paneel { display: none; }
.verkenner:has(#verk-1:checked) .verkenner-paneel--1,
.verkenner:has(#verk-2:checked) .verkenner-paneel--2,
.verkenner:has(#verk-3:checked) .verkenner-paneel--3 {
  display: block;
  animation: intro-omhoog var(--dur-basis) var(--ease-uit);
}
/* Vangnet: staat er (bij een ontbrekende dataset) geen keuze aangevinkt,
   dan blijven alle panelen zichtbaar in plaats van allemaal verborgen. */
.verkenner:not(:has(input:checked)) .verkenner-paneel { display: block; }
@supports not selector(:has(*)) {
  .verkenner-paneel { display: block; }
  .verkenner-paneel + .verkenner-paneel {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .verkenner-tabs { display: none; }
}
.verkenner-paneel > h3:first-child { margin-top: var(--sp-2); }

/* --- 28c. Tijdstrip: servergerenderde uur-heatmap (presentatie van
   bestaande reeksen). Kleur is nooit de enige drager: het beste blok heeft
   een rand, "nu" een stip, de overlap een vetgedrukt uurlabel, en alle
   waarden staan in de tabel en het aria-label. Brede stroken scrollen in
   hun eigen container. --- */
.tijdstrip { margin-bottom: var(--sp-4); }
.tijdstrip__scroll {
  overflow-x: auto;
  padding: 10px 2px 6px;
}
.tijdstrip__cellen {
  display: flex;
  gap: 3px;
  min-width: max-content;
}
.tijdstrip__cel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 0 30px;
  min-width: 30px;
}
.tijdstrip__blok {
  position: relative;
  display: block;
  width: 100%;
  height: 34px;
  border-radius: 6px;
  background-color: var(--clr-ceramic);
}
.tijdstrip__uur {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--txt-soft);
  min-height: 1em;
}
.tijdstrip__cellen--zonder-uur .tijdstrip__uur { display: none; }
/* Groen-schaal (CO2: donkerder = schoner) en prijs-schaal (donkerder =
   goedkoper); datakleuren groen/blauw uit het grafiekenpalet. De variabele
   celtoestand staat in data-attributen (data-vlak/nu/beste/overlap), zodat
   elke klassenaam letterlijk in de bron staat (klasse-audit). */
.tijdstrip__cel[data-vlak="g1"] .tijdstrip__blok { background-color: rgba(0, 117, 74, 0.14); }
.tijdstrip__cel[data-vlak="g2"] .tijdstrip__blok { background-color: rgba(0, 117, 74, 0.30); }
.tijdstrip__cel[data-vlak="g3"] .tijdstrip__blok { background-color: rgba(0, 117, 74, 0.48); }
.tijdstrip__cel[data-vlak="g4"] .tijdstrip__blok { background-color: rgba(0, 117, 74, 0.68); }
.tijdstrip__cel[data-vlak="g5"] .tijdstrip__blok { background-color: rgba(0, 117, 74, 0.92); }
.tijdstrip__cel[data-vlak="p1"] .tijdstrip__blok { background-color: rgba(74, 123, 196, 0.14); }
.tijdstrip__cel[data-vlak="p2"] .tijdstrip__blok { background-color: rgba(74, 123, 196, 0.30); }
.tijdstrip__cel[data-vlak="p3"] .tijdstrip__blok { background-color: rgba(74, 123, 196, 0.48); }
.tijdstrip__cel[data-vlak="p4"] .tijdstrip__blok { background-color: rgba(74, 123, 196, 0.68); }
.tijdstrip__cel[data-vlak="p5"] .tijdstrip__blok { background-color: rgba(74, 123, 196, 0.92); }
.tijdstrip__cel[data-vlak="leeg"] .tijdstrip__blok {
  background-color: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.18);
}
.tijdstrip__cel[data-nu] .tijdstrip__blok::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--clr-house);
}
.tijdstrip__cel[data-nu] .tijdstrip__uur {
  font-weight: 700;
  color: var(--txt);
}
.tijdstrip__cel[data-beste] .tijdstrip__blok {
  outline: 2px solid var(--clr-house);
  outline-offset: 1px;
}
.tijdstrip__cel[data-overlap] .tijdstrip__uur {
  font-weight: 700;
  color: var(--clr-green);
}
.tijdstrip__legenda {
  margin: var(--sp-2) 0 0;
  font-size: 0.75rem;
  color: var(--txt-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--sp-2);
}
.tijdstrip__zwatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  vertical-align: middle;
}
.tijdstrip__zwatch--donker { background-color: rgba(0, 117, 74, 0.92); }
.tijdstrip__zwatch--licht { background-color: rgba(0, 117, 74, 0.18); }
.tijdstrip__zwatch--prijs { background-color: rgba(74, 123, 196, 0.92); }
.tijdstrip__nu-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--clr-house);
  vertical-align: middle;
}
.tijdstrip__beste-rand {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  outline: 2px solid var(--clr-house);
  outline-offset: 1px;
  vertical-align: middle;
}
.tijdstrip__overlap-rand::before {
  content: "12";
  font-weight: 700;
  color: var(--clr-green);
}

/* --- 28d. Detailblok: uitklapbare tabel als toegankelijk alternatief; de
   inhoud blijft semantisch in de HTML staan. --- */
.detailblok {
  margin-top: var(--sp-4);
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-card);
}
.detailblok > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--txt);
}
.detailblok > summary::-webkit-details-marker { display: none; }
.detailblok > summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--clr-green-light);
  color: var(--clr-green);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.detailblok[open] > summary::after { content: "\2212"; }
.detailblok .datatabel { margin: 0 var(--sp-3) var(--sp-3); }

/* --- 28e. Goedkoop én groen als één vergelijking: prijsrij en groenrij op
   dezelfde uur-as plus een samenvattingslijst. --- */
.prijsgroen { margin-bottom: var(--sp-4); }
.prijsgroen__rijen {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-width: max-content;
}
.prijsgroen__rijlabel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt-soft);
}

/* --- 28f. Hub-structuur (slotronde 05-09; layoutcorrectie 06-09: de
   hub-secties staan op .container--standaard, dus deze maten vullen nu een
   gecentreerde kolom in plaats van links te blijven hangen): één kolom voor alle
   koppen en teksten, het previewlabel als consistente statusbadge
   rechtsboven in elk blok, en compacte samengestelde composities. --- */

/* Kop-rij: sectiekop links, statusbadge rechtsboven — de badge staat nooit
   meer midden in een lange kop en nooit tweemaal in hetzelfde blok. */
.kop-rij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: var(--w-standard);
  margin-bottom: var(--sp-5);
}
.kop-rij h1,
.kop-rij h2 { margin-bottom: 0; }
.kop-rij .preview-chip { margin-top: 6px; }
/* Smal scherm: de badge drukt de kop anders in een smalle kolom; daar
   stapelt de rij en staat de badge als eerste regel boven de kop. */
@media (max-width: 700px) {
  .kop-rij {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  .kop-rij .preview-chip { order: -1; margin-top: 0; }
}

/* Inhoudsblok van de hub: begrensd maar links op de gridlijn. */
.hub-blok { max-width: var(--w-standard); }

/* Compact handelingsblok: drie herkenbare toepassingen en één CTA. */
.actiebalk { max-width: var(--w-standard); }
.actiebalk h2 { margin-bottom: var(--sp-4); }
.actiebalk__lijst {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 760px) {
  .actiebalk__lijst { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.actiebalk__lijst li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--sp-3);
  align-items: start;
}
.actiebalk__lijst strong {
  display: block;
  color: var(--clr-green);
  margin-bottom: 2px;
}
.actiebalk__lijst p { margin: 0; font-size: 0.9375rem; color: var(--txt-soft); }
.actiebalk__voetnoot {
  margin: var(--sp-3) 0 0;
  font-size: 0.875rem;
  color: var(--txt-soft);
}

/* Dataverkenner als één analysepaneel: grafiek links (primaire content),
   uitleg en conclusie in de rechterkolom; mobiel één kolom. */
.verkenner-paneel__inhoud {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}
@media (min-width: 1024px) {
  .verkenner-paneel__inhoud {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--sp-6);
  }
  .verkenner-paneel__grafiek { order: 1; }
  .verkenner-paneel__uitleg { order: 2; }
}
.verkenner-paneel__grafiek .grafiek-wrap { margin-top: 0; }
.verkenner-paneel__uitleg > h3:first-child { margin-top: 0; }
.verkenner-paneel__uitleg h3 {
  font-size: 1.0625rem;
  color: var(--clr-green);
}

/* Beste komende uren: tijdstrook en conclusie in één compositie. */
.tijdvak-duo {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}
@media (min-width: 1024px) {
  .tijdvak-duo {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--sp-6);
  }
}
.tijdvak-conclusie h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-green);
  margin-bottom: var(--sp-1);
}
.tijdvak-conclusie .tijdblok-tijd { margin-bottom: var(--sp-2); }
.tijdvak-conclusie p { font-size: 0.9375rem; }
.tijdvak-conclusie .laag-waarom { margin-top: var(--sp-2); }
/* Slotronde 05-09: de vier resultaten (goedkoopst, duurst, groenst, beste
   combinatie) als scanbare datakaarten; de tijd is de blikvanger, de
   methodologische uitleg staat eronder in de lopende tekst. */
.prijsgroen__samenvatting {
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 700px) {
  .prijsgroen__samenvatting { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .prijsgroen__samenvatting { grid-template-columns: repeat(4, 1fr); }
}
.prijsgroen__samenvatting > div {
  background-color: var(--clr-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  display: grid;
  gap: var(--sp-1);
  align-content: start;
}
.prijsgroen__samenvatting dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-uplift);
}
.prijsgroen__samenvatting dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--txt-soft);
}
.resultaat-tijd {
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--clr-house);
}

/* --------------------------------------------------------------------------
   30. Warmtepomp-pilot ("golden page", 05-09) — alle regels genamespaced op
   pp- en uitsluitend in gebruik op /warmtepomp/. Familie van de homepage
   (bewijsband-component, venstervormtaal van het dossier-venster), geen
   kopie: de producthero is gecontaineerd i.p.v. full-bleed, zonder
   dag/nachtwissel; het venster is één statisch tweeluik zonder tabs.
   -------------------------------------------------------------------------- */

/* Producthero: tekst links, staande foto-uitsnede rechts; mobiel tekst
   eerst met een liggende uitsnede eronder. De foto is de bestaande
   warmtepomp-foto (1312x816); de staande crop focust op de gevel met de
   buitenunit rechts in het beeld. */
.pp-hero { padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.pp-hero__grid {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}
.pp-hero__tekst .kicker { margin-bottom: var(--sp-3); }
.pp-hero__tekst h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
  max-width: 12em;
}
.pp-hero__tekst .lead { margin-bottom: var(--sp-4); max-width: 30em; }
.pp-hero__tekst .sectie-actie { margin-top: 0; }
.pp-hero__tekst .microcopy { margin-top: var(--sp-2); max-width: 34em; }
.pp-hero__media { margin: 0; }
.pp-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 70% 45%;
  border-radius: 16px;
}
@media (min-width: 960px) {
  .pp-hero__grid {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
    gap: clamp(32px, 4vw, 64px);
  }
  .pp-hero__media img { aspect-ratio: 4 / 5; max-height: 640px; }
}

/* Bewijsband zonder iconen: subtiele kolomscheiding i.p.v. losse kaarten. */
.pp-bewijs li { align-items: flex-start; }
@media (min-width: 768px) {
  .pp-bewijs li + li {
    border-left: 1px solid rgba(0, 0, 0, 0.10);
    padding-left: var(--sp-5);
  }
}

/* Besliskader: brede uitlegkolom + compacte controlelijst als één paneel
   met interne scheidingen (geen vijf losse kaarten). */
.pp-kader__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) {
  .pp-kader__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 5vw, 72px);
    /* De uitlegkolom is korter dan de controlelijst: gecentreerd naast de
       lijst leest hij als redactioneel blok en blijft er geen leeg
       linkervlak onder hangen. */
    align-items: center;
  }
}
.pp-kader__uitleg .section-head { margin-bottom: var(--sp-4); }
.pp-kader__uitleg p {
  max-width: 32em;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.pp-accent {
  border-left: 3px solid var(--clr-gold);
  padding-left: var(--sp-3);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--clr-house);
}
.pp-subkop {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-uplift);
  margin: 0 0 var(--sp-3);
}
.pp-controle {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: var(--sp-4);
}
.pp-controle__lijst { margin: 0; }
.pp-controle__lijst > div { padding-block: var(--sp-3); }
.pp-controle__lijst > div:first-child { padding-top: 0; }
.pp-controle__lijst > div:last-child { padding-bottom: 0; }
.pp-controle__lijst > div + div { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.pp-controle__lijst dt {
  font-weight: 700;
  color: var(--clr-green);
  margin-bottom: var(--sp-1);
}
.pp-controle__lijst dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--txt-soft);
  line-height: 1.55;
}

/* Productvenster: familie van het dossier-venster; de enige schaduw op de
   pagina (werkelijk verhoogd productmoment). */
.pp-moment .section-head { margin-bottom: var(--sp-5); }
.pp-venster {
  max-width: var(--w-wide);
  margin-inline: auto;
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.pp-venster__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--clr-canvas);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.pp-venster__titel { margin: 0; font-weight: 700; color: var(--clr-green); }
/* Thuisbatterij-variant: statuslabel in de titelregel van het venster
   (het label is elders op een gecentreerde marge gezet). */
.pp-venster__titel .statuslabel { margin: 0 0 0 var(--sp-2); }
.pp-venster__chip {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--txt-soft);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: var(--radius-pill);
  padding: 2px 12px;
  background-color: var(--clr-white);
}
.pp-venster__lijf { display: grid; }
.pp-venster__paneel { padding: var(--sp-4); }
@media (min-width: 768px) {
  .pp-venster__lijf { grid-template-columns: 1fr 1fr; }
  .pp-venster__paneel + .pp-venster__paneel { border-left: 1px solid rgba(0, 0, 0, 0.08); }
}
@media (max-width: 767px) {
  .pp-venster__paneel + .pp-venster__paneel { border-top: 1px solid rgba(0, 0, 0, 0.08); }
}
.pp-datalijst { list-style: none; margin: 0; padding: 0; }
.pp-datalijst li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}
.pp-datalijst li + li { border-top: 1px solid rgba(0, 0, 0, 0.06); }
.pp-bron {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--clr-uplift);
  white-space: nowrap;
}
.pp-venster__voetnoot {
  margin: var(--sp-3) 0 0;
  font-size: 0.875rem;
  color: var(--txt-soft);
}
.pp-venster__paneel--controle p { font-size: 0.9375rem; margin-bottom: 0; }
.pp-puntlijst { margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.pp-puntlijst li { margin-bottom: var(--sp-1); }
.pp-venster__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background-color: var(--clr-canvas);
}
.pp-venster__voet p { margin: 0; font-size: 0.9375rem; }
.pp-venster__link {
  color: var(--clr-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

/* Keuzevlakken: twee gelijkwaardige hoofdvlakken, gedeelde factorregel
   eronder met een klein goudaccent als markering. */
.pp-keuze__vlakken { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) {
  .pp-keuze__vlakken { grid-template-columns: 1fr 1fr; }
}
/* Variant (thuisbatterij-datavergelijking): naast een hoog datavlak houdt
   het tekstvlak zijn natuurlijke hoogte i.p.v. mee te rekken. */
.pp-keuze__vlakken--start { align-items: start; }
.pp-keuze__vlak {
  background-color: var(--clr-canvas);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: var(--sp-5);
  /* 07-09: sitebrede kaart-hover naar het voordeelkaarten-voorbeeld. */
  transition: transform var(--dur-basis) var(--ease-uit),
    border-color var(--dur-basis) var(--ease-uit),
    box-shadow var(--dur-basis) var(--ease-uit);
}
.pp-keuze__vlak:hover {
  transform: translateY(-4px);
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-card);
}
.pp-keuze__vlak h3 { transition: color var(--dur-basis) var(--ease-uit); }
.pp-keuze__vlak:hover h3 { color: var(--clr-accent); }
.pp-keuze__vlak h3 { color: var(--clr-green); margin-bottom: var(--sp-1); }
.pp-keuze__typering {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--txt-soft);
  margin-bottom: var(--sp-3);
}
.pp-keuze__vlak p:last-child { margin-bottom: 0; }
.pp-keuze__factoren {
  margin-top: var(--sp-5);
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  padding-top: var(--sp-4);
}
.pp-factoren__kop { margin-bottom: var(--sp-2); }
.pp-factoren__kop::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--clr-gold);
  margin-bottom: var(--sp-2);
}
.pp-keuze__factoren p { max-width: var(--measure); }
.pp-keuze__factoren p:last-child { margin-bottom: 0; }

/* Route in vijf stappen met verbindingslijn; subsidie als de enige
   ondersteunende aside (wit paneel op het lichtgroene vlak). */
.pp-route__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) {
  .pp-route__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}
.pp-route__stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pp-stap;
}
.pp-route__stappen > li {
  counter-increment: pp-stap;
  position: relative;
  padding-left: 56px;
  padding-bottom: var(--sp-5);
}
.pp-route__stappen > li:last-child { padding-bottom: 0; }
.pp-route__stappen > li::before {
  content: counter(pp-stap);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--clr-green);
  color: var(--txt-inv);
  font-weight: 700;
  font-size: 0.9375rem;
}
.pp-route__stappen > li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: var(--sp-2);
  width: 2px;
  background-color: rgba(0, 98, 65, 0.18);
}
.pp-route__stappen > li:last-child::after { display: none; }
.pp-route__stappen h3 { margin-bottom: var(--sp-1); }
.pp-route__stappen li > p {
  margin-bottom: 0;
  color: var(--txt-soft);
  max-width: 30em;
}
.pp-route__stappen .vink-lijst { margin-top: var(--sp-3); margin-bottom: 0; }
.pp-route__subsidie {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: var(--sp-5);
}
.pp-route__subsidie p { font-size: 0.9375rem; }
.pp-route__bron { margin-bottom: 0; }
.pp-route__bron a { color: var(--clr-accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   31. Financiering ("derde premium vorm", 05-09) — alle nieuwe regels
   genamespaced op fin- en uitsluitend in gebruik op /financiering/. Familie
   van het pp-systeem (hero-grid, venster, subkop en accenten worden daar
   ongewijzigd hergebruikt); eigen financiële compositie: rekenpad-paneel in
   de hero met goud als verbindingslijn, en ISDE → resterend bedrag →
   Warmtefonds als één doorlopend routepaneel zonder schaduw.
   -------------------------------------------------------------------------- */

/* Rekenpad in de hero: één samenhangend paneel, bewust zonder bedragen. */
.fin-rekenpad {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: var(--sp-4) var(--sp-5);
}
.fin-rekenpad__titel { margin: 0 0 var(--sp-1); font-weight: 700; color: var(--clr-green); }
.fin-rekenpad__sub { margin: 0 0 var(--sp-4); font-size: 0.875rem; color: var(--txt-soft); }
.fin-rekenpad__stappen { list-style: none; margin: 0; padding: 0; }
.fin-rekenpad__stappen li {
  position: relative;
  padding-left: 26px;
  padding-bottom: var(--sp-3);
}
.fin-rekenpad__stappen li:last-child { padding-bottom: 0; }
.fin-rekenpad__stappen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--clr-gold);
}
.fin-rekenpad__stappen li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--clr-gold);
}
.fin-rekenpad__stappen li:last-child::after { display: none; }
.fin-stap__naam {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 2px;
  font-weight: 700;
  color: var(--clr-house);
}
.fin-stap__uitleg {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--txt-soft);
  line-height: 1.5;
}
.fin-rekenpad__voet {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.875rem;
  color: var(--txt-soft);
}

/* Routepaneel: subsidie en financiering als één geheel; de koppelregel met
   het resterende bedrag draagt de enige gouden markering. Geen schaduw —
   die is gereserveerd voor het venster-productmoment verderop. */
.fin-route {
  max-width: var(--measure);
  margin-inline: auto;
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  overflow: hidden;
}
.fin-route__deel { padding: var(--sp-5); }
.fin-route__deel h3 { color: var(--clr-green); margin-bottom: var(--sp-2); }
.fin-route__deel p:last-child { margin-bottom: 0; }
.fin-koppel {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--clr-canvas);
  border-block: 1px solid rgba(0, 0, 0, 0.08);
}
.fin-koppel::before {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--clr-gold);
}
.fin-koppel p {
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--clr-house);
}

/* --------------------------------------------------------------------------
   32. Werkwijze (proces- en vertrouwenspagina, 05-09) — alle nieuwe regels
   genamespaced op ww- en uitsluitend in gebruik op /werkwijze/. Familie van
   het pp-systeem (hero-grid, venster, subkop hergebruikt); eigen
   compositie: fasepaneel in de hero, doorlopende vijfstappenroute met
   zijvlakken, en één verantwoordelijkhedenpaneel. Goud alleen als
   verbindingslijn; gevulde groene vlakken alleen op de Woningcheck-knoppen.
   -------------------------------------------------------------------------- */

/* Rustige tekstlink naast de primaire hero-CTA. */
.ww-hero__link {
  display: inline-block;
  margin-left: var(--sp-4);
  color: var(--clr-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Fasepaneel in de hero: drie hoofdfasen aan een gouden verbindingslijn. */
.ww-fasepaneel {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: var(--sp-4) var(--sp-5);
}
.ww-fasen { list-style: none; margin: 0; padding: 0; counter-reset: ww-fase; }
.ww-fasen li {
  counter-increment: ww-fase;
  position: relative;
  padding-left: 44px;
  padding-bottom: var(--sp-4);
}
.ww-fasen li:last-child { padding-bottom: 0; }
.ww-fasen li::before {
  content: counter(ww-fase);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--clr-green);
  background-color: var(--clr-white);
  color: var(--clr-green);
  font-weight: 700;
  font-size: 0.875rem;
}
.ww-fasen li::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--clr-gold);
}
.ww-fasen li:last-child::after { display: none; }
.ww-fase__naam { margin: 0; font-weight: 700; color: var(--clr-house); }
/* .ww-fase__sub is 19-09 vervallen: het routepaneel toont sinds de klantreis
   de vijf stapnamen zonder subtitel. */
.ww-fase__bouw {
  margin: 0;
  font-size: 0.875rem;
  color: var(--txt-soft);
  line-height: 1.5;
}
.ww-fasepaneel__voet {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.875rem;
  color: var(--txt-soft);
}

/* Doorlopende procesroute: vijf genummerde stappen aan één gouden lijn;
   per stap tekst links en een ondersteunend zijvlak rechts. */
.ww-route__lijst { list-style: none; margin: 0; padding: 0; counter-reset: ww-stap; }
.ww-route__lijst > li {
  counter-increment: ww-stap;
  position: relative;
  padding-left: 56px;
  padding-bottom: clamp(32px, 4vw, 56px);
}
.ww-route__lijst > li:last-child { padding-bottom: 0; }
.ww-route__lijst > li::before {
  content: counter(ww-stap);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--clr-green);
  background-color: var(--clr-white);
  color: var(--clr-green);
  font-weight: 700;
  font-size: 0.9375rem;
}
.ww-route__lijst > li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: var(--sp-2);
  width: 2px;
  border-radius: 1px;
  background-color: var(--clr-gold);
}
.ww-route__lijst > li:last-child::after { display: none; }
.ww-stap__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 960px) {
  .ww-stap__grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
}
.ww-stap__tekst h3 { margin-bottom: var(--sp-1); }
.ww-stap__tekst p { max-width: 36em; }
.ww-stap__tekst p:last-child { margin-bottom: 0; }
/* 19-09: de stapkop draagt dezelfde illustratie als de homepage, zodat de
   bezoeker de stap herkent waar hij vandaan komt. Het zichtbare nummer zet de
   lijst zelf met een teller in ::before; voor schermlezers staat "Stap N:"
   als verborgen tekst in de kop, want gegenereerde inhoud wordt niet overal
   voorgelezen. De illustratie is decoratief (alt leeg).
   Selector met .ww-stap__tekst ervoor: anders wint de oudere regel
   .ww-stap__tekst h3 (hogere specificiteit) en blijft de marge 4px. */
.ww-stap__tekst .ww-stap__kop {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.ww-stap__kop picture { flex: none; display: block; }
.ww-stap__kop img {
  width: 72px;
  height: auto;
  display: block;
}
/* Het genummerde bolletje op de hoogte van de stapnaam: de kop is door de
   illustratie 73,5px hoog (72 × 290/284) en de naam staat op het midden,
   dus het bolletje (36px) begint op 19px en de gouden lijn op 19 + 36 + 8. */
.ww-route__lijst > li::before { top: 19px; }
.ww-route__lijst > li::after { top: 63px; }
/* Meerdere kopjes onder elkaar in het zijpaneel (wat jij doet, wat wij doen,
   wat je krijgt): lucht tussen de blokken, want .ww-zij ul heeft margin 0.
   Het zijn sinds 19-09 echte koppen (h4) in plaats van alinea's, zodat een
   schermlezer ze als kop onder de stap aankondigt; line-height erft mee,
   zodat ze er hetzelfde uitzien als de alinea-variant elders. */
.ww-zij ul + .pp-subkop { margin-top: var(--sp-3); }
.ww-zij h4.pp-subkop { line-height: inherit; }
.ww-fase__naam a { color: inherit; text-decoration-color: rgba(30, 57, 50, 0.35); }
.ww-fase__naam a:hover { text-decoration-color: currentColor; }
.ww-zij {
  background-color: var(--clr-canvas);
  border-radius: 16px;
  padding: var(--sp-4);
}
.ww-zij ul { margin: 0; padding-left: 1.2em; }
.ww-zij li {
  margin-bottom: var(--sp-1);
  font-size: 0.9375rem;
  color: var(--txt-soft);
}
.ww-zij li:last-child { margin-bottom: 0; }

/* De checklistweergave (.ww-checklijst, neutrale lege vakjes voor de online
   schouw) is 19-09 vervallen met de stap "Rond de online schouw af": de
   klantreis vat dat samen onder stap 2. Historie: git. */

/* Venster-inzet: het gedeelde productmoment van stap 1+2 binnen de route. */
.ww-venster-inzet { margin-top: var(--sp-5); }

/* Verantwoordelijkhedenpaneel: vier rijen in één systeem, geen kaarten. */
.ww-rollen {
  margin: 0;
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  overflow: hidden;
}
.ww-rol { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-1); }
.ww-rol + .ww-rol { border-top: 1px solid rgba(0, 0, 0, 0.08); }
@media (min-width: 768px) {
  .ww-rol {
    grid-template-columns: 240px 1fr;
    gap: var(--sp-5);
    align-items: baseline;
  }
}
.ww-rol dt { font-weight: 700; color: var(--clr-green); }
.ww-rol dd { margin: 0; max-width: var(--measure); }

/* --------------------------------------------------------------------------
   33. FAQ (antwoord- en vertrouwenspagina, 06-09) — alle nieuwe regels
   genamespaced op faqx- en uitsluitend in gebruik op /faq/. De oude
   faq-item-kaarten blijven bestaan voor de product-FAQ op /warmtepomp/;
   hier zijn vragen vlakke rijen met scheidingslijnen in één doorlopend
   antwoordsysteem met onderwerpnavigatie. Goud alleen als
   navigatiemarkering bij hover/focus.
   -------------------------------------------------------------------------- */

/* Rustige tekstlink in de hero. */
.faqx-hero__link {
  display: inline-block;
  color: var(--clr-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Informatiepaneel "Goed om vooraf te weten". */
.faqx-paneel {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: var(--sp-4) var(--sp-5);
}
.faqx-paneel__kop {
  margin: 0 0 var(--sp-1);
  font-weight: 700;
  color: var(--clr-green);
}
.faqx-paneel__lijst { list-style: none; margin: 0; padding: 0; }
.faqx-paneel__lijst li {
  padding-block: var(--sp-3);
  font-size: 0.9375rem;
  color: var(--txt-soft);
  line-height: 1.55;
}
.faqx-paneel__lijst li:last-child { padding-bottom: 0; }
.faqx-paneel__lijst li + li { border-top: 1px solid rgba(0, 0, 0, 0.08); }

/* Antwoordsysteem: onderwerpnavigatie links, doorlopende antwoordkolom
   rechts; op mobiel staat de navigatie boven de antwoorden. */
.faqx-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 960px) {
  .faqx-grid {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
  .faqx-nav { position: sticky; top: var(--sp-4); }
}
.faqx-nav ul { list-style: none; margin: 0; padding: 0; }
.faqx-nav a {
  display: block;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  border-left: 2px solid rgba(0, 0, 0, 0.10);
  color: var(--txt-soft);
  font-weight: 600;
  text-decoration: none;
}
.faqx-nav a:hover,
.faqx-nav a:focus-visible {
  color: var(--clr-green);
  border-left-color: var(--clr-gold);
}
.faqx-groep + .faqx-groep {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.faqx-groep h2 { font-size: 1.5rem; margin-bottom: var(--sp-2); }

/* Vragen als vlakke rijen: geen kaart of schaduw per vraag; één
   consistente plus/min-aanduiding en zichtbare focus. */
.faqx-vraag { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.faqx-vraag summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-1);
  font-weight: 600;
  color: var(--txt);
}
.faqx-vraag summary::-webkit-details-marker { display: none; }
.faqx-vraag summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px;
  text-align: center;
  color: var(--clr-green);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
}
.faqx-vraag[open] summary::after { content: "\2212"; }
.faqx-vraag summary:hover,
.faqx-vraag[open] summary { color: var(--clr-green); }
.faqx-vraag summary:focus-visible {
  outline: 2px solid var(--clr-green);
  outline-offset: 2px;
  border-radius: 4px;
}
.faqx-antwoord {
  padding: 0 var(--sp-5) var(--sp-4) var(--sp-1);
  max-width: 46em;
}
.faqx-antwoord p { margin-bottom: var(--sp-2); }
.faqx-antwoord p:last-child { margin-bottom: 0; }
.faqx-antwoord a { text-decoration: underline; text-underline-offset: 3px; }

/* Compacte contactstrook: één rij, rustige secundaire actie. */
.faqx-contactband { padding-block: clamp(28px, 4vw, 48px); }
.faqx-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
}
.faqx-contact h2 { font-size: 1.375rem; margin: 0 0 var(--sp-1); }
.faqx-contact p { margin: 0; max-width: 46em; }
.faqx-contact__link {
  color: var(--clr-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   34. Contact (trustpagina, 06-09) — alle nieuwe regels genamespaced op
   ctx- en uitsluitend in gebruik op /contact/. Eén contactwerkruimte:
   formulier links (±60%), routekolom rechts (±40%) op een licht
   canvasvlak; rijen met scheidingslijnen, geen kaarten. De gevulde groene
   knop in het paneel is alleen de formulier-submit.
   -------------------------------------------------------------------------- */
.ctx-werkruimte {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ctx-grid { display: grid; }
@media (min-width: 960px) {
  .ctx-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.ctx-formulier { padding: clamp(20px, 3vw, 40px); }
.ctx-formulier h2 { font-size: 1.5rem; margin-bottom: var(--sp-4); }
/* Het paneel levert het vlak; de velden mogen de kolombreedte benutten. */
.ctx-formulier .field { max-width: none; }
.ctx-info {
  padding: clamp(20px, 3vw, 40px);
  background-color: var(--clr-canvas);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
@media (min-width: 960px) {
  .ctx-info { border-top: 0; border-left: 1px solid rgba(0, 0, 0, 0.08); }
}
.ctx-info h2 { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.ctx-route { padding-block: var(--sp-4); }
.ctx-route:last-of-type { padding-bottom: 0; }
.ctx-route + .ctx-route { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.ctx-route h3 {
  font-size: 1.0625rem;
  color: var(--clr-green);
  margin-bottom: var(--sp-1);
}
.ctx-route p {
  font-size: 0.9375rem;
  color: var(--txt-soft);
  line-height: 1.55;
  margin-bottom: var(--sp-2);
}
.ctx-route p:last-child { margin-bottom: 0; }
.ctx-route a { overflow-wrap: anywhere; }
.ctx-link {
  color: var(--clr-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   35. Woningcheck-instap (premium startvlak, 07-09) — alle nieuwe regels
   genamespaced op wcx- en uitsluitend in gebruik op /woningcheck/. Eén
   startvlak (adres links, route rechts op canvas), één dossierpaneel
   (registers links, open controlepunten op het lichtgroene accentvlak) en
   één vertrouwenspaneel. Goud alleen als verbindingslijn en notitie-accent;
   gevuld groen alleen op "Zoek mijn woning".
   -------------------------------------------------------------------------- */
/* Op desktop stond er 168px (72 hero-onder + 96 sectie-boven) tussen de
   laatste introregel en het startvlak; doel 80–96px. Alleen ≥1200px, zodat
   mobiel en tablet de standaardruimte houden. */
@media (min-width: 1200px) {
  .wcx-hero { padding-block-end: 40px; }
  .wcx-startsectie { padding-block-start: 48px; }
}

.wcx-start {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.wcx-start__grid { display: grid; }
@media (min-width: 960px) {
  .wcx-start__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
}
.wcx-adres { padding: clamp(20px, 3vw, 40px); }
.wcx-adres .vragen-kop { margin-top: 0; }
.wcx-route {
  padding: clamp(20px, 3vw, 40px);
  background-color: var(--clr-canvas);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
@media (min-width: 960px) {
  .wcx-route { border-top: 0; border-left: 1px solid rgba(0, 0, 0, 0.08); }
}
.wcx-route h2 { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.wcx-route > p {
  font-size: 0.9375rem;
  color: var(--txt-soft);
  line-height: 1.55;
  margin-bottom: var(--sp-4);
}
.wcx-stappen { list-style: none; margin: 0; padding: 0; counter-reset: wcx-stap; }
.wcx-stappen li {
  counter-increment: wcx-stap;
  position: relative;
  padding-left: 40px;
  padding-bottom: var(--sp-3);
}
.wcx-stappen li:last-child { padding-bottom: 0; }
.wcx-stappen li::before {
  content: counter(wcx-stap);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--clr-green);
  background-color: var(--clr-white);
  color: var(--clr-green);
  font-weight: 700;
  font-size: 0.8125rem;
}
.wcx-stappen li::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 30px;
  bottom: 2px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--clr-gold);
}
.wcx-stappen li:last-child::after { display: none; }
.wcx-stap__naam { margin: 0; font-weight: 700; color: var(--clr-house); }
.wcx-stap__sub { margin: 0; font-size: 0.875rem; color: var(--txt-soft); }
.wcx-route__zeker {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Dossierpaneel: registerrijen links, het niet-geregistreerde deel als
   contrasterend accentvlak rechts — samen de route registergegevens →
   open controlepunten → gerichte vragen. */
.wcx-dossier {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
}
@media (min-width: 960px) {
  .wcx-dossier { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.wcx-registers { padding: clamp(20px, 3vw, 40px); }
.wcx-rij { padding-block: var(--sp-3); }
.wcx-rij:last-of-type { padding-bottom: 0; }
.wcx-rij + .wcx-rij { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.wcx-rij h3 { font-size: 1.0625rem; color: var(--clr-green); margin-bottom: 2px; }
.wcx-rij p { font-size: 0.9375rem; margin-bottom: var(--sp-1); max-width: 46em; }
.wcx-rij .card-bron { margin-bottom: 0; }
.wcx-onbekend {
  padding: clamp(20px, 3vw, 40px);
  background-color: var(--clr-green-light);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
@media (min-width: 960px) {
  .wcx-onbekend {
    border-top: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    /* De registerkolom is veel hoger; gecentreerd leest het accentvlak als
       bewust contrastmoment in plaats van een leeg vlak. */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.wcx-onbekend h3 { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.wcx-onbekend p { max-width: 36em; }

/* Salderingsnotitie: compacte redactionele notitie met goudaccent. */
.wcx-notitie {
  margin-top: var(--sp-5);
  border-left: 3px solid var(--clr-gold);
  padding-left: var(--sp-4);
  max-width: var(--measure);
}
.wcx-notitie h3 { font-size: 1.125rem; margin-bottom: var(--sp-1); }
.wcx-notitie p { margin-bottom: 0; }

/* Vertrouwensblok: twee vraagrijen in één paneel. */
.wcx-vertrouwen {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: 0 clamp(20px, 3vw, 40px);
}
.wcx-vraagrij { padding-block: clamp(20px, 3vw, 32px); }
.wcx-vraagrij + .wcx-vraagrij { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.wcx-vraagrij h3 { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.wcx-vraagrij p { max-width: var(--measure); margin-bottom: var(--sp-2); }
.wcx-vraagrij p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   36. Eerste Woningbeeld (rapportlaag 3A, 07-09) — alle nieuwe regels
   genamespaced op wra- en uitsluitend in gebruik op funnelstap 3. Eén
   kolom over de volle funnelbreedte; schaduw alleen op het beslispaneel;
   goud alleen als accent op de regelingen-notitie en de doorslag-markering.
   -------------------------------------------------------------------------- */
.wra-kop {
  max-width: 720px;
  margin-top: var(--sp-4);
}
.wra-kop .kicker { margin-bottom: var(--sp-2); }
.wra-titel {
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
}
.wra-intro {
  max-width: var(--measure);
  margin-bottom: var(--sp-3);
}
.wra-adres {
  font-size: 0.9375rem;
  color: var(--txt-soft);
  margin-bottom: var(--sp-2);
}
.wra-adres strong { color: var(--clr-green); }
.wra-anker {
  font-size: 0.9375rem;
  color: var(--clr-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.wra-inhoud {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
.wra-paneel {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 40px);
}
.wra-paneel--beslis { box-shadow: var(--shadow-card); }
.wra-paneel .fieldset-hint { max-width: var(--measure); }

/* Maatregelrijen: doorlopend paneel, gescheiden door een lijn. */
.wra-maatregel {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(16px, 2.4vw, 28px);
}
.wra-maatregel__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.wra-maatregel__kop h3 { font-size: 1.375rem; margin: 0; }
.wra-maatregel__verklaring {
  max-width: 62em;
  margin-bottom: var(--sp-3);
}
.wra-maatregel__detail {
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 900px) {
  .wra-maatregel__detail { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}
.wra-maatregel__detail h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-soft);
  margin-bottom: var(--sp-2);
}
.wra-lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 0.9375rem;
}
.wra-lijst li {
  padding-left: 18px;
  position: relative;
}
.wra-lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--clr-green-light);
  border: 1px solid var(--clr-accent);
}

/* De vier statussen: rustige pills, geen alarmkleuren. */
.wra-status {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
}
.wra-status--onderzoeken {
  background-color: var(--clr-accent);
  color: var(--clr-white);
}
.wra-status--mogelijk {
  background-color: var(--clr-green-light);
  color: var(--clr-house);
}
.wra-status--nietnu {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--txt-soft);
}
.wra-status--onbekend {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.25);
  color: var(--txt-soft);
}

/* Gegevenspaneel: naam, waarde, herkomst-tag per regel. */
.wra-gegeven {
  display: grid;
  grid-template-columns: minmax(0, 10em) minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: baseline;
  padding-block: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.9375rem;
}
.wra-gegeven__naam { color: var(--txt-soft); }
.wra-gegeven__waarde { min-width: 0; }
.wra-herkomst {
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  justify-self: end;
}
.wra-herkomst--register {
  background-color: var(--clr-green-light);
  color: var(--clr-house);
}
.wra-herkomst--eigen {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--txt-soft);
}
.wra-herkomst--regio {
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.25);
  color: var(--txt-soft);
}
.wra-herkomst--aanname {
  background-color: var(--clr-white);
  border: 1px dashed rgba(0, 0, 0, 0.35);
  color: var(--txt-soft);
}
.wra-herkomst--controle {
  background-color: var(--clr-white);
  border: 1px solid var(--clr-gold);
  color: var(--txt-main);
}
.wra-doorslag {
  font-size: 0.75rem;
  font-weight: 600;
  color: #8a6d1d; /* donkerder goud voor leesbaar tekstcontrast op crème/wit */
  white-space: nowrap;
}
.wra-doorslag::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--clr-gold);
  margin-right: 5px;
  vertical-align: 1px;
}

/* Regelingen: redactionele notitie met goudaccent, geen kaartenwand. */
.wra-notitie {
  border-left: 3px solid var(--clr-gold);
  padding: clamp(16px, 2.4vw, 24px) clamp(20px, 3vw, 32px);
  background-color: var(--clr-white);
  border-radius: 0 16px 16px 0;
}
.wra-notitie p {
  max-width: 62em;
  margin-bottom: 0;
}

.wra-vervolg { max-width: 62em; }
.wra-lijst--vervolg { margin-bottom: var(--sp-3); }
.wra-vervolg p { max-width: var(--measure); }

/* Mobiel: de gegevensrij stapelt, de herkomst-tag schuift onder de waarde. */
@media (max-width: 700px) {
  .wra-gegeven {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .wra-gegeven__naam { grid-column: 1 / -1; }
}

/* 3A-refinement (12-09): kernuitkomsten direct in de rapportkop, en
   secundair detail achter native <details>. De status, de verklaring en
   de korte slotlijst blijven zonder interactie zichtbaar; de disclosure
   werkt zonder JS en met toetsenbord. */
.wra-kern {
  display: grid;
  gap: 6px;
  margin-bottom: var(--sp-3);
}
.wra-kern__rij {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  margin-bottom: 0;
}
.wra-detail summary {
  cursor: pointer;
  width: fit-content;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-green);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.wra-detail[open] summary { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   37. Trustbanden (07-09, eigenaarsverzoek): doorlopende logostrook die
   naar links beweegt. Identieke lijsten in één spoor; het spoor schuift
   -50% en springt naadloos terug (elke lijst draagt rechts een padding
   gelijk aan de gap). ⚠️ 08-09 (melding eigenaar: band gleed half leeg
   voorbij): met maar 2 lijsten is het halve spoor één lijstbreedte
   (~1180px bronnen / ~1400px merken) en op schermen breder dan dat komt
   er elk rondje een leeg gat langs. Daarom 6 lijsten in de bronnenband
   en 4 in de merkenband: het halve spoor is dan ~3540/~2800px en dekt
   elk realistisch scherm. De duur schaalt mee (108s basis, merken 72s)
   zodat de snelheid in px/s gelijk bleef aan de oude 36s-stand. Muis
   erop pauzeert; onder reduced motion zet de globale regel (sectie 3)
   de animatie stil en staat de band statisch met de eerste items in
   beeld.
   -------------------------------------------------------------------------- */
.trustband {
  overflow: hidden;
  padding-block: var(--sp-5);
  background-color: var(--clr-white);
}
.trustband--merken { background-color: var(--clr-canvas); }
.trustband__label {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-soft);
  margin: 0 var(--gutter) var(--sp-4);
}
.trustband__spoor {
  display: flex;
  width: max-content;
  animation: trustband-loop 108s linear infinite;
}
.trustband--merken .trustband__spoor { animation-duration: 72s; }
.trustband:hover .trustband__spoor { animation-play-state: paused; }
.trustband__lijst {
  display: flex;
  align-items: center;
  gap: clamp(44px, 7vw, 96px);
  padding: 0 clamp(44px, 7vw, 96px) 0 0;
  margin: 0;
  list-style: none;
}
.trustband__lijst img { display: block; height: 38px; width: auto; }
.trustband--merken .trustband__lijst img { height: 30px; }
.trustband__naam {
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--clr-house);
  white-space: nowrap;
}
/* Voor diapositieve (lichte) logo's die op de witte band wegvallen,
   zoals het Warmtefonds-logo: donkergroen kaartje eronder. */
.trustband__kaart--donker {
  display: inline-flex;
  align-items: center;
  background-color: var(--clr-house);
  border-radius: 10px;
  padding: 8px 16px;
}
/* Voor rasterlogo's met een dekkende witte achtergrond (Remeha,
   Sigenergy): wit kaartje, zodat de witte rechthoek een bewuste vorm
   wordt in plaats van een vlek op de crèmeband. Iets hoger dan de
   30px-logoregel: Sigenergy is gestapeld en moet leesbaar blijven. */
.trustband__kaart--wit {
  display: inline-flex;
  align-items: center;
  background-color: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 4px 12px;
}
.trustband--merken .trustband__lijst .trustband__kaart--wit img { height: 52px; }
@keyframes trustband-loop {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   39. Pijnpunten-sectie homepage (08-09, ontwerp eigenaar): drie fototegels
   met een icoon-badge die over de foto valt, daaronder een omslagband in
   lichtgroen met de Woningcheck-CTA. Goud alleen als onderstreping van het
   "Maar…" in de kop (statusmoment-uitzondering, zoals de subsidieband). */
/* 09-09 eigenaar (tweede ronde): een kalligrafische veeg in de vorm van
   een swoosh — dik links, licht doorhangend, naar rechts spits oplopend
   (referentie eigenaar: de Etos-onderzwier; eigen tekening, gevuld pad).
   Browsers met scroll-timelines onthullen hem van links naar rechts bij
   het inscrollen; alle andere (en reduced-motion) zien de statische veeg. */
.pijnpunt-maar {
  position: relative;
  display: inline-block;
}
.pijnpunt-streep {
  position: absolute;
  left: -8%;
  bottom: -16px;
  width: 118%;
  height: auto;
  overflow: visible;
}
.pijnpunt-streep path {
  fill: var(--clr-gold);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pijnpunt-streep {
      animation: pijnpunt-tekenen linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 90%;
    }
    @keyframes pijnpunt-tekenen {
      from { clip-path: inset(0 100% 0 0); }
      to { clip-path: inset(0 0 0 0); }
    }
  }
}
.pijnpunt-tegels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pijnpunt-tegel {
  min-width: 0;
  padding: 8px 8px 22px;
  background-color: var(--clr-white);
  /* Op de witte grond (16-09) komt de tegel los door rand plus fluisterschaduw. */
  border: 1px solid #e2ebe6;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.pijnpunt-visual { position: relative; margin: 0; }
/* Het knipkader voor de foto-zoom zit op <picture> en NIET op de figure:
   de icoon-badge hangt 19px onder de fotorand en zou door overflow op de
   figure half worden afgeknipt. */
.pijnpunt-visual picture {
  display: block;
  overflow: hidden;
  border-radius: 9px;
}
.pijnpunt-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  border-radius: 9px;
  object-fit: cover;
  background-color: var(--clr-green-light);
  transition: transform var(--dur-basis) var(--ease-uit);
}
.pijnpunt-foto--salderen { object-position: 55% 40%; }
.pijnpunt-foto--gas { object-position: 44% 50%; }
.pijnpunt-foto--offerte { object-position: 50% 15%; }
.pijnpunt-icoon {
  position: absolute;
  left: 12px;
  bottom: -19px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 4px solid var(--clr-white);
  border-radius: 13px;
  background-color: var(--clr-green-light);
  color: var(--clr-green);
  transition: background-color var(--dur-basis) var(--ease-uit),
    color var(--dur-basis) var(--ease-uit),
    transform var(--dur-basis) var(--ease-uit);
}
.pijnpunt-icoon svg { width: 21px; height: 21px; }
/* Hover op de tegel (08-09, eigenaarsverzoek): zelfde taal als de
   bewijsband — de badge licht op naar accentgroen en groeit iets, de foto
   zoomt licht binnen zijn kader, de kop kleurt mee zoals bij de
   voordeelkaarten. Bewust geen lift/rand: deze tegels zijn geen links
   (de ene CTA is de omslagband). Reduced motion: globale regel, sectie 3. */
.pijnpunt-tegel:hover .pijnpunt-foto { transform: scale(1.04); }
.pijnpunt-tegel:hover .pijnpunt-icoon {
  background-color: var(--clr-accent);
  color: var(--clr-white);
  transform: scale(1.08);
}
.pijnpunt-tegel:hover .pijnpunt-tekst h3 { color: var(--clr-accent); }
.pijnpunt-tekst { padding: 31px 12px 0; }
.pijnpunt-tekst h3 {
  margin: 0 0 10px;
  min-height: 2.5em;
  color: var(--clr-green);
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
  transition: color var(--dur-basis) var(--ease-uit);
}
.pijnpunt-tekst p {
  margin: 0;
  color: var(--txt-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.pijnpunt-omslag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding: 23px 26px;
  border-radius: 13px;
  background-color: var(--clr-green-light);
}
.pijnpunt-omslag__kop {
  margin: 0;
  color: var(--clr-green);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.pijnpunt-omslag__sub { margin: 5px 0 0; font-size: 0.875rem; }
@media (max-width: 700px) {
  .pijnpunt-tegels { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pijnpunt-foto { aspect-ratio: 16 / 10; }
  .pijnpunt-tekst h3 { min-height: 0; }
  .pijnpunt-omslag { flex-direction: column; align-items: stretch; padding: 24px; }
  .pijnpunt-omslag .btn { align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   40. Salderingspagina /salderen-2027/ (19-09, document van de eigenaar als
   landingspagina). Hergebruikt de artikelband, .tijdlijn, .faq-list,
   .vink-lijst en de cta-band; hier staat alleen wat deze pagina extra heeft.
   -------------------------------------------------------------------------- */
/* Heroregels in de band: de vraag vóór de knop sterker, "Lees verder" rustig.
   .section--house kleurt alinea's zacht (0,1,1); deze regels moeten daarboven. */
.section--house .sal-hero__vraag {
  margin-top: var(--sp-5);
  font-weight: 700;
  color: var(--txt-inv);
}
.sal-hero .lead { margin-bottom: var(--sp-3); }
.sal-hero__vraag + .sectie-actie { margin-top: var(--sp-3); }
.sal-hero__verder { margin-top: var(--sp-4); }
.sal-lees-verder { font-weight: 600; text-decoration: none; }
.sal-lees-verder:hover { text-decoration: underline; }

/* Tweede kop in dezelfde sectie: de basis (h2 zonder bovenmarge) plakt hem
   anders tegen de alinea erboven. */
.sal-volgkop { margin-top: var(--sp-7); }

/* "Kort gezegd": rustvlak in de lopende tekst. */
.sal-kort {
  margin-block: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-card);
  background-color: var(--clr-canvas);
}
.sal-kort__kop { margin: 0 0 var(--sp-2); font-weight: 700; color: var(--clr-house); }
.sal-kort__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

/* De twee illustraties uit het document: breder dan de leeskolom, anders wordt
   de tekst in de plaat te klein. Tot 900px toont de <picture> de versie in twee
   rijen (_dev/maak-salderen-beelden.js); die blijft in een smalle kolom. */
.sal-beeld { margin-block: var(--sp-6) 0; }
.sal-beeld--tussen { margin-block: var(--sp-5); }
.sal-beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
@media (max-width: 900px) {
  .sal-beeld img { max-width: 560px; margin-inline: auto; }
}

/* "Eerst je woning. Dan de oplossing." staat in het document als kop, maar is
   een slotregel boven een knop; als kop zou hij twee keer lege koppen opleveren. */
.sal-slogan {
  margin-top: var(--sp-4);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--clr-house);
}
.section--house .sal-slogan { color: var(--txt-inv); }
.sal-slogan + .sectie-actie { margin-top: var(--sp-3); }
.sal-vinken { margin-top: var(--sp-4); }
.sal-bijgewerkt { margin-top: var(--sp-5); }