/* ── LETTERTYPE (Sora, self-hosted — zie /assets/fonts/sora/sora.css) ── */
@import url('../fonts/sora/sora.css');

/* ── CSS VARIABELEN ── */
:root {
  --kleur-primair:       #1B6E3C;   /* bosgroen: buttons, CTA, links */
  --kleur-primair-hover: #155E33;   /* bosgroen donker: hover/active */
  --kleur-secundair:     #1B6E3C;   /* bosgroen: links, accenttekst */
  --kleur-accent:        #F9A825;   /* amber uit logo: warme accenten */
  --kleur-donkerblauw:   #24221E;   /* warm donker: koppen, primaire tekst */
  --kleur-lichtblauw:    #FBF7F1;   /* warme crème: pagina-achtergrond */
  --kleur-groen:         #1B6E3C;   /* positief resultaat, besparing */
  --kleur-waarschuwing:  #FFF3CD;   /* let op-blokken */
  --kleur-waarschuwing-tekst: #5C4A00; /* tekst in let op-blokken */
  --kleur-wit:           #FFFFFF;   /* kaarten, formulieren */
  --kleur-lichtgrijs:    #9A9085;   /* randen, scheidingslijnen, invoervelden */
  --kleur-vlak-zacht:    color-mix(in srgb, var(--kleur-lichtgrijs) 18%, var(--kleur-wit)); /* licht grijs vlak: uitgegrijsde/inactieve kaarten en velden */
  --kleur-steun:         #BC4905;   /* steunkleur: helderst-haalbare oranje binnen WCAG AA (4,5:1 op lichtgroen 8%) */
  --kleur-fout:          #C62828;   /* foutmeldingen */

  --font-basis: 'Sora', sans-serif;

  --rand:          #9A9085;
  --radius:        8px;
  --radius-lg:     14px;
  --schaduw:       0 2px 12px rgba(0,0,0,.08);
  --schaduw-hover: 0 6px 24px rgba(0,0,0,.13);
  /* Tokens uit het design system (tokens/base.css); tot 07-09-2026 alleen binnen .zb,
     sinds de icoontegel-knop (check.php) ook daarbuiten nodig. */
  --schaduw-zacht: 0 2px 8px rgba(36, 34, 30, .06);
  --overgang-snel: .15s;

  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* ── BASIS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* HTML hidden-attribuut moet winnen van element-display-regels (bijv. .btn-volgende{display:inline-flex}). */
[hidden] { display: none !important; }

/* Ankersprongen houden rekening met alles wat sticky bovenaan blijft staan,
   anders komt de kop van het doel eronder te liggen. Geldt zowel voor gewone
   #-links als voor scrollIntoView(). Op de onderwerppagina's staat onder de
   navigatiebalk (64px) ook het kruimelpad (circa 43px); vandaar 120px. */
html { scroll-behavior: smooth; scroll-padding-top: 120px; }

/* Skip link: onzichtbaar tot een toetsenbordgebruiker Tab indrukt, dan springt
   hij in beeld en linkt naar <main id="inhoud"> (toegankelijkheid / WCAG). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 1000;
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

body {
  font-family: var(--font-basis);
  color: var(--kleur-donkerblauw);
  background: var(--kleur-lichtblauw);
  line-height: 1.6;
  font-size: 16px;
}

/* Responsive afbeeldingen: nooit breder dan hun container (voorkomt horizontaal
   scrollen op mobiel). Componenten met eigen img-regels overschrijven dit waar nodig. */
img { max-width: 100%; height: auto; }

/* ── NAV ── */
/* Bewust `body > nav`: dit is de hoofdnavigatiebalk uit header.php, het enige
   nav-element dat direct in de body staat. Als kale `nav`-selector raakte deze
   regel elk <nav> op de site — kruimelpaden, inhoudsopgaven — die dan als
   64px hoge, sticky flexbalk werden opgemaakt en over de tekst heen vielen. */
body > nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--kleur-wit);
  border-bottom: 1px solid var(--rand);
  padding: 0 5%;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo {
  text-decoration: none;
  display: flex; align-items: center; flex-shrink: 0;
}
.logo img {
  height: 38px; width: auto;
  min-width: 150px; object-fit: contain;
}

.nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
.nav-links > li { position: relative; }

.nav-links a,
.nav-knop {
  text-decoration: none;
  color: var(--kleur-donkerblauw);
  font-size: .88rem; font-weight: 500;
  padding: 8px 11px; border-radius: var(--radius);
  transition: color .2s, background .2s;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-basis);
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; line-height: 1;
}
.nav-links a:hover,
.nav-knop:hover { color: var(--kleur-primair); background: var(--kleur-lichtblauw); }

.nav-cta {
  background: var(--kleur-primair) !important;
  color: var(--kleur-wit) !important;
  padding: 9px 18px !important;
  border-radius: 24px !important;
  font-weight: 600 !important;
  margin-left: 6px;
}
.nav-cta:hover { background: var(--kleur-primair-hover) !important; color: var(--kleur-wit) !important; }

/* Zoek-icoon in de nav: op desktop alleen het vergrootglas (aria-label draagt
   de naam), in het mobiele menu met het woord "Zoeken" erbij. */
.nav-zoek i { font-size: 18px; }
.nav-zoek__tekst { display: none; }
@media (max-width: 1024px) {
  .nav-links .nav-zoek { justify-content: flex-start; gap: 8px; }
  .nav-zoek__tekst { display: inline; }
}

.nav-knop--mijn {
  background: var(--kleur-secundair) !important;
  color: var(--kleur-wit) !important;
  border-radius: 24px !important;
  font-weight: 600 !important;
  padding: 9px 14px !important;
  margin-left: 6px;
}
.nav-knop--mijn:hover { background: var(--kleur-primair-hover) !important; color: var(--kleur-wit) !important; }

.nav-pijl { font-size: .85rem; transition: transform .2s; display: inline-flex; }

/* ── DROPDOWN ── */
.submenu {
  display: none;
  position: absolute; top: calc(100% + 10px); left: 0;
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(36,34,30,.16);
  min-width: 300px;
  list-style: none;
  z-index: 200;
  padding: 8px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
/* kleine pijl/tab bovenop het paneel */
.submenu::after {
  content: '';
  position: absolute;
  top: -7px; left: 24px;
  width: 13px; height: 13px;
  background: var(--kleur-wit);
  border-left: 1px solid var(--rand);
  border-top: 1px solid var(--rand);
  transform: rotate(45deg);
}
/* onzichtbare brug zodat hover niet wegvalt tussen knop en paneel */
.submenu::before {
  content: '';
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
.heeft-submenu:hover > .submenu,
.heeft-submenu:focus-within > .submenu {
  display: block;
  animation: submenu-in .18s ease forwards;
}
.heeft-submenu:hover > .nav-knop .nav-pijl,
.heeft-submenu:focus-within > .nav-knop .nav-pijl { transform: rotate(180deg); }

@keyframes submenu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.submenu a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.submenu__icoon {
  flex-shrink: 0;
  font-size: 26px;
  color: var(--kleur-secundair);
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--kleur-lichtblauw);
  border-radius: 10px;
  transition: background .2s, color .2s;
}
.submenu__tekst { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.submenu__titel {
  font-weight: 600; font-size: .95rem;
  color: var(--kleur-donkerblauw);
}
.submenu__omschrijving {
  font-size: .78rem; font-weight: 400;
  color: var(--kleur-donkerblauw);
}
.submenu a:hover,
.submenu a:focus-visible {
  background: var(--kleur-lichtblauw);
  border-left-color: var(--kleur-primair);
}
.submenu a:hover .submenu__icoon,
.submenu a:focus-visible .submenu__icoon {
  background: var(--kleur-primair);
  color: var(--kleur-wit);
}
.submenu a:hover .submenu__titel,
.submenu a:focus-visible .submenu__titel { color: var(--kleur-primair); }

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span {
  display: block; height: 2px; width: 24px;
  background: var(--kleur-donkerblauw); border-radius: 2px;
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  background: var(--kleur-lichtblauw);
  padding: 64px 5% 72px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
}

.hero-badge {
  display: inline-block;
  background: var(--kleur-waarschuwing);
  border: 1px solid rgba(249, 168, 37, .45);
  color: var(--kleur-secundair);
  padding: 4px 14px; border-radius: 20px;
  font-size: .8rem; font-weight: 600;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  font-weight: 700; line-height: 1.2;
  color: var(--kleur-donkerblauw);
  margin-bottom: 18px;
}
.hero h1 span { color: var(--kleur-primair); }

.hero-intro {
  font-size: 1.05rem;
  color: var(--kleur-donkerblauw);
  margin-bottom: 36px;
  max-width: 520px;
  line-height: 1.6;
}

/* Voordelen-kaart */
.voordelen-kaart {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--schaduw);
  max-width: 500px;
}
.voordelen-kaart-titel {
  font-size: .85rem; font-weight: 700;
  color: var(--kleur-donkerblauw); margin-bottom: 16px;
}
.voordeel-rij {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--kleur-lichtgrijs);
  font-size: .9rem;
}
.voordeel-rij:last-child { border-bottom: none; }
.voordeel-rij .label { color: var(--kleur-donkerblauw); }
.voordeel-rij .waarde { font-weight: 700; color: var(--kleur-donkerblauw); }
.voordeel-rij.totaal {
  margin-top: 4px; padding-top: 14px;
  border-top: 2px solid var(--rand);
  font-weight: 700;
}

.disclaimer {
  margin-top: 14px;
  font-size: .78rem; color: var(--kleur-donkerblauw);
  line-height: 1.5;
}
.disclaimer a { color: var(--kleur-steun); }

/* Check-paneel */
.check-paneel {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--schaduw);
  position: sticky; top: 80px;
}
.check-paneel h2 {
  font-size: 1.2rem; font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin-bottom: 6px;
}
.check-paneel .subtitel {
  font-size: .85rem; color: var(--kleur-donkerblauw);
  margin-bottom: 24px; line-height: 1.5;
}
.form-rij { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.form-veld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-veld.vol { grid-column: 1 / -1; }
.form-veld label { font-size: .8rem; font-weight: 600; color: var(--kleur-donkerblauw); }
.form-veld input, .form-veld select {
  padding: 10px 12px;
  min-height: 48px;
  border: 1.5px solid var(--rand);
  border-radius: var(--radius);
  font-size: 1rem; color: var(--kleur-donkerblauw);
  font-family: var(--font-basis);
  background: var(--kleur-vlak-zacht);
  transition: border-color .2s;
  outline: none;
}
.form-veld input:focus, .form-veld select:focus {
  border-color: var(--kleur-primair);
  background: var(--kleur-wit);
}
.form-veld input::placeholder { color: rgba(36,34,30,.45); }

.btn-check {
  width: 100%; padding: 14px;
  min-height: 48px;
  background: var(--kleur-primair); color: var(--kleur-wit);
  border: none; border-radius: 28px;
  font-size: 1rem; font-weight: 700;
  font-family: var(--font-basis);
  cursor: pointer; margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s, transform .15s;
}
.btn-check:hover { background: var(--kleur-primair-hover); transform: translateY(-1px); }
.btn-check i { flex-shrink: 0; font-size: 1.1rem; }

.garantie {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--kleur-lichtblauw);
  border-radius: var(--radius);
  font-size: .8rem; color: var(--kleur-donkerblauw); line-height: 1.5;
}
.garantie strong { color: var(--kleur-donkerblauw); display: block; margin-bottom: 4px; }

/* ── STAPPEN ── */
.stappen {
  background: var(--kleur-wit);
  padding: 72px 5%;
}
.sectie-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kleur-steun);
  margin-bottom: 8px;
}
.sectie-titel {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700; line-height: 1.2;
  margin-bottom: 10px; color: var(--kleur-donkerblauw);
}
.sectie-sub {
  font-size: .95rem; color: var(--kleur-donkerblauw);
  max-width: 540px; margin-bottom: 48px;
  line-height: 1.6;
}
.stappen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.stap-kaart {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--schaduw);
  transition: transform .2s, box-shadow .2s;
}
.stap-kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hover); }
.stap-nummer {
  width: 36px; height: 36px;
  background: rgba(27, 110, 60, .10);
  color: var(--kleur-primair);
  border-radius: 50%;
  font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.stap-icoon { font-size: 3rem; margin-bottom: 10px; color: var(--kleur-primair); }
.stap-titel { font-weight: 700; font-size: 1rem; margin-bottom: 6px; color: var(--kleur-donkerblauw); }
.stap-tekst { font-size: .85rem; color: var(--kleur-donkerblauw); line-height: 1.55; }

/* ── VERGELIJKER UITLEG ── */
.vergelijker-sectie {
  background: var(--kleur-lichtblauw);
  padding: 72px 5%;
}
/* Let op: .vergelijker-grid, .vergelijker-tabel, .hero en .check-paneel komen in
   geen enkele PHP meer voor — dode CSS uit een oudere opzet. Bewust ongemoeid
   gelaten bij de mobile-first-omkering van 01-09-2026; opruimen is een aparte
   beslissing. */
.vergelijker-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.vergelijker-tabel {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--schaduw);
}
.vergelijker-tabel h3 {
  font-size: 1rem; font-weight: 700; color: var(--kleur-donkerblauw);
  margin-bottom: 18px;
}
.tabel-header {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; padding-bottom: 10px;
  border-bottom: 2px solid var(--rand);
  font-size: .78rem; font-weight: 700;
  color: var(--kleur-donkerblauw); text-align: right;
}
.tabel-header span:first-child { text-align: left; }
.tabel-rij {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--kleur-lichtgrijs);
  font-size: .85rem;
}
.tabel-rij span { text-align: right; }
.tabel-rij span:first-child { text-align: left; color: var(--kleur-donkerblauw); }
.tabel-rij span:last-child { color: var(--kleur-primair); font-weight: 700; }
.tabel-rij.totaal-rij {
  border-top: 2px solid var(--rand); border-bottom: none;
  font-weight: 700; color: var(--kleur-donkerblauw); margin-top: 4px; padding-top: 12px;
}
.tabel-rij.bespaar-rij { font-weight: 700; }
.tabel-rij.bespaar-rij span { color: var(--kleur-groen); }
.let-op {
  margin-top: 16px;
  background: var(--kleur-waarschuwing);
  border: 1px solid rgba(249, 168, 37, .45);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: .8rem; color: var(--kleur-donkerblauw); line-height: 1.5;
}

/* ── WAAROM ── */
.waarom { background: var(--kleur-wit); padding: 72px 5%; }
.waarom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 28px;
}
.voordeel-kaart {
  display: flex; gap: 16px;
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--schaduw);
}
.voordeel-icoon {
  flex: 0 0 44px; height: 44px;
  background: rgba(27, 110, 60, .10);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--kleur-primair);
}
.voordeel-kaart h3 { font-weight: 700; font-size: .95rem; margin-bottom: 5px; color: var(--kleur-donkerblauw); }
.voordeel-kaart p { font-size: 1rem; color: var(--kleur-donkerblauw); line-height: 1.55; }

/* ── CIJFERS ── */
.cijfers { background: var(--kleur-donkerblauw); color: var(--kleur-wit); padding: 72px 5%; }
.cijfers .sectie-label { color: var(--kleur-accent); }
.cijfers .sectie-titel { color: var(--kleur-wit); }
.cijfers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px; text-align: center; margin-top: 48px;
}
.cijfer-getal {
  font-size: 2.6rem; font-weight: 700;
  color: var(--kleur-accent); line-height: 1; margin-bottom: 8px;
}
.cijfer-label { font-size: .85rem; color: rgba(255,255,255,.75); }

/* ── CTA BANNER ── */
.cta-banner {
  background: linear-gradient(135deg, var(--kleur-primair) 0%, var(--kleur-primair-hover) 100%);
  color: var(--kleur-wit);
  text-align: center;
  padding: 72px 5%;
}
.cta-banner .sectie-label { color: var(--kleur-accent); }
.cta-banner .sectie-titel { color: var(--kleur-wit); }
.cta-banner p { color: rgba(255,255,255,.85); max-width: 520px; margin: 0 auto 36px; font-size: 1rem; }
.cta-groep { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  padding: 13px 28px; border-radius: 28px;
  font-size: .95rem; font-weight: 700;
  font-family: var(--font-basis);
  text-decoration: none; cursor: pointer;
  transition: all .2s;
  min-height: 48px;
  display: inline-flex; align-items: center;
}
.btn-wit { background: var(--kleur-wit); color: var(--kleur-primair); }
.btn-wit:hover { background: var(--kleur-vlak-zacht); transform: translateY(-1px); }
.btn-omlijnd {
  background: transparent; color: var(--kleur-wit);
  border: 2px solid rgba(255,255,255,.7);
}
.btn-omlijnd:hover { background: rgba(255,255,255,.12); }

/* ── FOOTER ── */
footer {
  /* Diep bosgroen: 70% bosgroen + 30% warm donker, afgeleid uit de huisstijl. */
  background: color-mix(in srgb, var(--kleur-primair) 70%, var(--kleur-donkerblauw));
  color: rgba(255,255,255,.8);
  padding: 48px 5% 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px; margin-bottom: 40px;
}
.footer-merk p { font-size: .85rem; line-height: 1.6; margin-top: 14px; }
.footer-merk__groen { display: flex; align-items: flex-start; gap: 8px; }
.footer-merk__groen i { color: var(--kleur-wit); font-size: 18px; flex-shrink: 0; margin-top: 2px; }
footer h4 { color: var(--kleur-wit); font-size: .85rem; margin-bottom: 14px; font-weight: 700; }
footer ul { list-style: none; }
footer ul li { margin-bottom: 8px; }
footer ul a { color: rgba(255,255,255,.8); text-decoration: none; font-size: .85rem; transition: color .2s; }
footer ul a:hover { color: var(--kleur-accent); }
.footer-onder {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; flex-wrap: wrap; gap: 12px;
}
.footer-onder a { color: rgba(255,255,255,.8); text-decoration: none; margin-left: 16px; transition: color .2s; }
.footer-onder a:hover { color: var(--kleur-accent); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--kleur-wit);
    border-bottom: 1px solid var(--rand);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 6px 0;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links > li { border-top: 1px solid var(--rand); }
  .nav-links a,
  .nav-knop {
    display: flex; width: 100%;
    padding: 14px 5%; font-size: 1rem;
    border-radius: 0; justify-content: space-between;
  }
  .nav-links .nav-cta {
    margin: 10px 5%; border-radius: 8px !important;
    justify-content: center; width: auto;
  }
  .submenu {
    display: none; position: static;
    box-shadow: none; border: none; border-top: 1px solid var(--rand);
    border-radius: 0; padding: 6px 0;
    background: var(--kleur-lichtblauw);
    min-width: 0;
    opacity: 1; transform: none; animation: none;
  }
  .submenu::after, .submenu::before { display: none; }
  .submenu a {
    padding: 12px 5% 12px 7%; font-size: .95rem;
    border-left: none; border-radius: 0;
    /* .nav-links a zet space-between (voor de chevrons in het hoofdmenu);
       submenu-items horen gewoon links uitgelijnd — anders schuift een item
       met korte tekst ("Check mijn woning") naar rechts. */
    justify-content: flex-start;
  }
  .submenu__icoon { width: 38px; height: 38px; font-size: 22px; }
  .submenu__omschrijving { font-size: .8rem; }
  /* Op touch: alleen tikken (.open) bepaalt open/dicht — hover/focus mag
     niet vastblijven plakken, anders kun je niet meer inklappen. */
  .heeft-submenu:hover > .submenu,
  .heeft-submenu:focus-within > .submenu { display: none; }
  .heeft-submenu:hover > .nav-knop .nav-pijl,
  .heeft-submenu:focus-within > .nav-knop .nav-pijl { transform: none; }
  .heeft-submenu.open > .submenu { display: block; }
  .heeft-submenu.open > .nav-knop .nav-pijl { transform: rotate(180deg); }
}
/* Mobile-first: de smalle stand staat hierboven als basis, de brede stand komt
   er vanaf een breakpoint bij. Tot 01-09-2026 was dit omgekeerd geschreven (brede
   basis, teruggeschroefd met max-width); het resultaat was gelijk, maar de
   afspraak uit CLAUDE.md stond dan niet in de code. */
@media (min-width: 480px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .form-rij { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
/* Vanaf 1024px (BugHerd #77): de drie linkkolommen op een vaste breedte rechts, op gelijke
   afstand van elkaar; de merktekst links krijgt alle overige ruimte. */
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 200px 200px 200px; }
  /* Merktekst in twee kolommen (BugHerd #103): de missiezin links, de regel over de
     groene stroom rechts; het logo erboven over de volle breedte. */
  .footer-merk { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
  .footer-merk .logo { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════
   GEDEELDE PAGINACOMPONENTEN
   ══════════════════════════════════════════════════════ */

/* Hulpklassen achtergrond */
.bg-lichtblauw  { background-color: var(--kleur-lichtblauw); }
.bg-wit         { background-color: var(--kleur-wit); }
/* Lichte bosgroen-tint voor secties (8% bosgroen op wit). */
.bg-groen-zacht { background-color: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit)); }

/* Primaire knop (hero, informatievond) */
.btn-primair {
  display: inline-block;
  background-color: var(--kleur-primair);
  color: var(--kleur-wit);
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
  min-height: 48px;
  transition: background-color 0.2s ease;
}
.btn-primair:hover,
.btn-primair:focus { background-color: var(--kleur-primair-hover); color: var(--kleur-wit); }

/* Download knop */
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--kleur-primair);
  color: var(--kleur-wit);
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
  min-height: 48px;
  transition: background-color 0.2s;
}
.btn-download:hover { background-color: var(--kleur-primair-hover); color: var(--kleur-wit); }

/* Formulierknop (pilot + contact) */
.btn-formulier {
  display: inline-block;
  background-color: var(--kleur-primair);
  color: var(--kleur-wit);
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 600;
  padding: 16px 32px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  min-height: 48px;
  width: 100%;
  transition: background-color 0.2s ease;
}
.btn-formulier:hover,
.btn-formulier:focus { background-color: var(--kleur-primair-hover); }

/* Foutmelding formulierveld */
.form-foutmelding {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kleur-fout);
  min-height: 1.1em;
}

/* Ongeldig formulierveld (generiek: geldt ook voor .form-field in de
   accountformulieren en losse velden). !important is hier bewust: de
   foutstatus moet winnen van de specifiekere randkleuren per formulier
   (bv. .formulier-kaart .form-veld input[type="text"] en .account-form
   input[type="text"]), die later in dit bestand staan en anders de rode
   rand overschrijven. */
input.is-ongeldig,
textarea.is-ongeldig,
select.is-ongeldig {
  border-color: var(--kleur-fout) !important;
  background-color: rgba(198, 40, 40, .06) !important;
}
/* Niet-afgevinkte captcha bij verzenden: rode rand om de hele widget
   (het element zelf, zodat de interne opbouw van ALTCHA er niet toe doet). */
altcha-widget.is-ongeldig {
  display: block;
  border: 1.5px solid var(--kleur-fout);
  border-radius: 8px;
  background-color: rgba(198, 40, 40, .06);
  padding: 4px 8px;
}

/* Automatisch gevonden adres (BAG) onder postcode/huisnummer (bag-adres.js) */
.bag-adres-status {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--kleur-donkerblauw);
}
.bag-adres-status--laden {
  color: var(--kleur-lichtgrijs);
}
.bag-adres-status--gevonden {
  font-weight: 600;
  color: var(--kleur-groen);
}
.bag-adres-status--gevonden::before {
  content: "\2713\00a0"; /* vinkje + spatie */
}
.bag-adres-status--leeg {
  color: var(--kleur-steun);
}
/* Adres gevonden maar buiten het Ramplaankwartier (formulieren met
   data-doelgebied-vereist): verzenden is dan geblokkeerd, dus foutkleur. */
.bag-adres-status--buiten {
  color: var(--kleur-fout);
}
/* Draaiend icoon in de knop "Zoek mijn woning" zolang de BAG-lookup loopt
   (check.php, doeBagLookup). */
.bag-zoek-spinner {
  display: inline-block;
  animation: bag-zoek-draai 0.9s linear infinite;
}
@keyframes bag-zoek-draai {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bag-zoek-spinner {
    animation: none;
  }
}
/* Melding onder de zoekknop als de lookup na 5 seconden nog geen antwoord
   heeft (check.php): neutrale kleur, geen foutmelding. */
.bag-zoek-traag {
  margin-top: 8px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--kleur-donkerblauw);
}
/* Let op-blok boven het aanmeldformulier: het account-adres van een ingelogde
   bezoeker ligt buiten het Ramplaankwartier (aanmeldformulier.php). */
.formulier-adresmelding {
  background: var(--kleur-waarschuwing);
  border: 1px solid rgba(249, 168, 37, .45);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  color: var(--kleur-donkerblauw);
  line-height: 1.5;
}

/* Submit-blok */
.form-submit-blok { margin-top: 28px; }

/* Disclaimer onder formulier */
.form-disclaimer {
  font-size: 0.85rem;
  color: var(--kleur-donkerblauw);
  margin-top: 12px;
  text-align: left;
}
/* Korte disclaimer op de formulierpagina: vanaf tablet naast de knop,
   verticaal gecentreerd, in plaats van er los onder. */
@media (min-width: 768px) {
  .formulier-pagina .form-submit-blok {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .formulier-pagina .form-disclaimer { margin-top: 0; }
}
/* Agenda-link (iCal) onder de startavond-keuze */
.form-agenda-link { margin: 8px 0 0; font-size: 0.95rem; }

/* Bevestigingsbalk: in de documentstroom bovenaan <main>, onder de sticky
   navigatie. Bewust geen overlay en geen tijdklok: de balk duwt de inhoud
   omlaag (hangt nergens overheen), scrolt gewoon mee weg en blijft leesbaar
   tot de bezoeker zelf verder gaat. */
.bevestiging-balk {
  background-color: var(--kleur-groen);
  color: var(--kleur-wit);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 600;
  animation: schuif-in 0.35s ease;
}
.bevestiging-balk[hidden] { display: none; }
.bevestiging-balk__icoon { font-size: 24px; flex-shrink: 0; }
.bevestiging-balk__sluiten {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--kleur-wit);
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  padding: 4px;
  flex-shrink: 0;
  min-height: 48px;
  min-width: 48px;
  justify-content: center;
}
.bevestiging-balk__sluiten:hover { opacity: 0.8; }
@keyframes schuif-in {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   PILOTPAGINA
   ══════════════════════════════════════════════════════ */

.pilot-hero {
  /* Hero in warme crème-tint (16% amber op wit). De secties eronder zijn licht bosgroen,
     zodat de hero zich onderscheidt. Tekst donker. */
  background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
  padding: 60px 20px;
  text-align: center;
}
.pilot-hero__inner { max-width: 760px; margin: 0 auto; }
.pilot-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  line-height: 1.25;
  margin: 0 0 20px;
}
.pilot-hero p {
  font-size: 1.1rem;
  color: var(--kleur-donkerblauw);
  line-height: 1.65;
  margin: 0 auto 36px;
  max-width: 65ch;
}
.pilot-hero .pilot-hero__terugkerend {
  font-size: 0.9rem;
  margin: 20px auto 0;
}

/* Wijk-band: full-width luchtfoto, statisch (geen animatie) voor maximale scherpte,
   en bewust niet te hoog. */
.wijk-band { position: relative; }
.wijk-band img {
  display: block;
  width: 100%;
  height: clamp(180px, 24vw, 300px);
  object-fit: cover;
}
.wijk-band__tekst {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 5%;
  background: linear-gradient(to top, rgba(36,34,30,.65), rgba(36,34,30,0));
  color: var(--kleur-wit);
  font-weight: 600;
  font-size: 1.05rem;
}
.wijk-band__tekst p { max-width: 60ch; margin: 0; }

.pilot-sectie { padding: 40px 20px; }
/* Straatfoto achter "De eerste ronde start nu" op de homepage (BugHerd #79, #101). De
   foto staat in een eigen laag (::before), onscherp en minder verzadigd, met daarover
   een lichte witte laag (::after): herkenbaar als straatbeeld, maar zonder details die
   van de kaarten afleiden. De effen laag van 85% oogde melkachtig. De foto is 800px
   breed; door de onscherpte valt het oprekken niet op. Pad relatief aan assets/css/. */
.pilot-sectie--straat { position: relative; overflow: hidden; }
.pilot-sectie--straat::before {
  content: '';
  position: absolute;
  inset: -16px; /* de blur laat de randen vervagen; iets groter dan de sectie */
  z-index: 0;
  background-image: url('../../images/Ramplaankwartier-straat-1.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(6px) saturate(.7);
}
.pilot-sectie--straat::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--kleur-wit) 55%, transparent);
}
.pilot-sectie--straat > .pilot-sectie__inner { position: relative; z-index: 1; }
/* "Of begin opnieuw" naast de knop in de klaar-kaart van het check-blok (BugHerd #80,
   #102), zelfde icoon en gewicht als op het dashboard (.antwoorden-recap__opnieuw-kop).
   Knop en link staan samen in .keuze__acties; op een smal scherm wikkelt de link onder
   de knop. */
.keuze__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.keuze__opnieuw { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; font-weight: 700; } /* .95rem/700: design system KeuzeBlok, 05-09-2026 */
/* Uitgang naar de campagnepagina onder het CTA-blok (BugHerd #160): dezelfde
   tekstbreedte en centrering als het blok erboven, met ruimte ertussen. */
.keuze-naast { max-width: 760px; margin: 16px auto 0; text-align: center; color: var(--kleur-donkerblauw); line-height: 1.6; }
/* Alleen de tekst onderstreept, niet het icoon (BugHerd #104). Met .keuze__acties ervoor,
   anders wint .link-secundair (zelfde specificiteit, later in dit bestand). */
.keuze__acties .keuze__opnieuw { text-decoration: none; }
.keuze__acties .keuze__opnieuw span { text-decoration: underline; text-underline-offset: 3px; }
/* Design system KeuzeBlok, standen adres (ingelogd) en sessie (halverwege), 05-09-2026.
   De uitweg "Of begin opnieuw" staat sinds die overname ook in de band (BugHerd #158 van
   04-09 verborg hem daar; het design system toont hem in elke maat behalve sessie).
   De link: bold terugpijltje, alleen de tekst onderstreept. */
.keuze__opnieuw i { font-size: 16px; line-height: 1; }
/* kaal: er staat geen tekst naast de knop, dus draagt de knop zelf de tweede regel (het
   adres, of de vraag waar je gebleven was). In de andere maten staat die regel in de tekst. */
.keuze__btn-sub { display: none; }
.keuze--kaal .keuze__btn-sub { display: block; font-size: .78rem; font-weight: 400; opacity: .85; }
.keuze--kaal a.keuze__btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 22px; line-height: 1.2; }
/* Halverwege (stand bezig, design system `sessie`; patch keuze-sessie-knop, 07-09-2026): één
   knop "Verder" zonder uitweg ernaast. In de maat volledig liet hij een brede strook wit
   naast zich staan, omdat hij zo breed was als zijn label; hij loopt nu door tot de
   rechterrand van de kaart, op elke breedte. Alleen in volledig: in regel en band staat de
   knop náást de tekst, in kaal draagt hij zelf zijn tweede regel. */
.keuze--volledig[data-cta-stand="bezig"] .keuze__rij--check > .keuze__btn { width: 100%; justify-self: stretch; }
/* band en regel: in de gevulde standen staat de uitkomst (tekst + adres) op de plek van de
   kop, smal gehouden (20ch) zodat de band niet tot de volle breedte rekt; in de band
   verschijnt dan ook het icoon (vinkje: klaar, zandloper: halverwege). De band stond op 14ch
   (design system), waardoor "Je woning staat al doorgerekend klaar" over drie regels brak;
   sinds BugHerd #259 (07-09-2026) 20ch, samen met KeuzeBlok.jsx in het design system. */
.keuze--band:not([data-cta-stand="nieuw"]) .keuze__kop, .keuze--regel:not([data-cta-stand="nieuw"]) .keuze__kop { display: none; }
.keuze--band:not([data-cta-stand="nieuw"]) .keuze__tekst { display: block; max-width: 20ch; }
.keuze--regel:not([data-cta-stand="nieuw"]) .keuze__tekst { display: block; max-width: 20ch; }
.keuze--band:not([data-cta-stand="nieuw"]) .keuze__icoon { display: block; }
.pilot-sectie__inner { max-width: 1100px; margin: 0 auto; }
.pilot-sectie__label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kleur-steun);
  margin-bottom: 12px;
}
.pilot-sectie h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 20px;
  line-height: 1.3;
}
.pilot-sectie p {
  color: var(--kleur-donkerblauw);
  line-height: 1.7;
  max-width: 65ch;
}
/* De globale reset zet alle marges op nul, dus twee alinea's onder elkaar in een
   sectie plakten aan elkaar (BugHerd #38). 24px = het verticale ritme tussen
   tekstblokken uit de huisstijl. Alleen tussen opeenvolgende alinea's, zodat de
   afstand tot een kop of een volgend blok ongemoeid blijft. */
.pilot-sectie p + p { margin-top: 24px; }

/* Beeld binnen een sectie */
/* Marge boven en onder: de alinea na een figuur valt buiten de p + p-regel en
   zou anders zonder tussenruimte tegen het beeld plakken. Breder dan de
   tekstkolom wordt het beeld niet: de ouder begrenst het op 65ch, zodat beeld
   en tekst dezelfde linker- en rechterrand delen. */
.sectie-figuur {
  margin: 24px 0;
  max-width: 720px;
}
/* Binnen een uitklapper is de tekstkolom smaller (0,95rem op 65ch); het beeld
   volgt die breedte, zodat het dezelfde randen deelt als de tekst erboven. */
.faq-item__antwoord .sectie-figuur { max-width: 65ch; }
/* Voor beeld dat van zichzelf smaller is dan de tekstkolom, of dat staand is en
   anders veel te hoog wordt: de gewenste breedte staat als --figuur-breedte op
   de figuur zelf. Opschalen maakt een foto onscherp en tekst in een infographic
   onleesbaar, dus dat doen we niet. */
.sectie-figuur--eigen-breedte,
.faq-item__antwoord .sectie-figuur--eigen-breedte { max-width: var(--figuur-breedte); }
.sectie-figuur img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(36,34,30,0.08);
}
.sectie-figuur figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--kleur-donkerblauw);
  opacity: 0.8;
  max-width: 65ch;
}
/* Omloopfiguur in een uitklapper (faq-item--omloop op het details-element):
   vanaf tablet zweeft de foto rechts in de tekstkolom en loopt de tekst er
   omheen. Daarvoor wordt het antwoord op de tekstbreedte (65ch) begrensd,
   anders staat de float los in de brede kaart en omloopt de tekst niets.
   De breedte per foto staat als --figuur-breedte op de figuur, gekozen zodat
   de foto's ongeveer even groot ogen zonder de verhouding te veranderen
   (opschalen boven de eigen pixelbreedte doen we niet, zie hierboven).
   Op mobiel blijft het gewone blokgedrag van --eigen-breedte gelden. */
.faq-item--omloop .faq-item__antwoord { display: flow-root; }
@media (min-width: 768px) {
  .faq-item--omloop .faq-item__antwoord { max-width: calc(65ch + 40px); }
  .faq-item--omloop .sectie-figuur--omloop {
    float: right;
    width: var(--figuur-breedte, 250px);
    margin: 4px 0 16px 20px;
  }
}

/* Technieken */
.technieken-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;   /* was 20px; BugHerd #124: meer lucht tussen Bodemlus en PVT (sectie-afstand uit de schaal) */
  margin: 32px 0;
}
.techniek-kaart {
  background-color: var(--kleur-wit);
  border-radius: 8px;
  padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(36,34,30,0.08);
}
.techniek-kaart__icoon {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
  color: var(--kleur-primair);
  text-align: center;
}
.techniek-kaart h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 12px;
}
.techniek-kaart p {
  font-size: 1rem;
  color: var(--kleur-donkerblauw);
  line-height: 1.65;
  margin: 0;
}
/* Factsheet-link altijd onderaan de kaart, zodat de links van de Bodemlus- en
   PVT-kaart op elke schermbreedte op gelijke hoogte staan (scoped op de grid,
   want .techniek-kaart bestaat ook in de techniekvergelijker). */
.technieken-grid .techniek-kaart {
  display: flex;
  flex-direction: column;
}
/* Alleen wanneer de kaart meer dan een alinea heeft: dan is de laatste de
   link-alinea en hoort die onderaan. Bij een kaart met een enkele alinea zou
   dezelfde regel de lopende tekst naar de onderkant duwen, los van de kop. */
.technieken-grid .techniek-kaart p:last-child:not(:only-of-type) { margin-top: auto; padding-top: 16px; }

/* Beeld bovenaan de techniekkaarten: loopt door tot de kaartrand (vandaar de
   negatieve marges, gelijk aan de padding van de kaart) en heeft een vaste
   verhouding, zodat de twee kaarten even hoog beginnen. Kadervullend (cover,
   BugHerd #106/#107; contain liet witte randen): geen van de foto's is 4:3, dus
   er valt altijd een strook af, met per foto een gekozen uitsnede. */
.technieken-grid .techniek-kaart__foto {
  display: block;
  width: calc(100% + 48px);
  margin: -28px -24px 20px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 8px 8px 0 0;
  background-color: var(--kleur-wit);
  /* De sitebrede img { max-width: 100% } hield de foto op de tekstbreedte, zodat hij
     48px vóór de rechterrand stopte (BugHerd #118/#119). */
  max-width: none;
}
/* Staande PVT-foto: de panelen liggen linksonder, dus daar de uitsnede. */
.technieken-grid .techniek-kaart__foto--pvt { object-position: 30% 75%; }
/* "Waarom buren samen boren": foto naast de tekst vanaf 768px, erboven op een
   telefoon (BugHerd #85). */
.buren-sectie { display: grid; gap: 24px; }
.buren-sectie__foto { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 12px; }
@media (min-width: 768px) {
  .buren-sectie { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 40px; }
  .buren-sectie__foto { order: 2; }
}

/* Voordelen (pilot) — scoped om te voorkomen dat ze de homepage-kaarten overschrijven */
.voordelen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 32px 0;
}
/* Gaskaart (BugHerd #129): de derde kaart in het kostenraster staat gecentreerd onder
   de twee andere en is recessief grijs, want gas is de referentie en geen keuze. In een
   raster van twee kolommen pakt hij beide kolommen en houdt hij de breedte van één kaart.
   Vanaf 768px, want daaronder staat het raster toch al in één kolom. */
.voordeel-kaart--gas { background: var(--kleur-vlak-zacht); }
.voordeel-kaart--gas .voordeel-kaart__icoon { background: var(--kleur-lichtgrijs); }
@media (min-width: 768px) {
  /* Breedte van één kolom, gecentreerd op de rij (BugHerd #159). width en niet
     max-width: een grid-item met margin:auto krimpt anders naar zijn inhoud (gemeten
     201px in plaats van 542px). De 8px is de helft van de gap van 16px. */
  .voordelen-grid .voordeel-kaart--gas { grid-column: 1 / -1; width: calc(50% - 8px); margin: 0 auto; }
}
.voordelen-grid .voordeel-kaart {
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 12px rgba(36,34,30,0.08);
}
.voordeel-kaart__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.voordeel-kaart__icoon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
}
.voordelen-grid .voordeel-kaart h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0;
}
.voordelen-grid .voordeel-kaart p {
  font-size: 1rem;
  color: var(--kleur-donkerblauw);
  line-height: 1.6;
  margin: 0;
}

/* Kostenkaarten (eerste-ronde): bedrag groot, label klein eronder */
.voordelen-grid .voordeel-kaart p.kosten-getal {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--kleur-primair);
  line-height: 1.2;
  margin: 8px 0 0;
}
.voordelen-grid .voordeel-kaart p.kosten-getal span {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--kleur-donkerblauw);
  margin-top: 2px;
}
.kosten-vergelijk { margin-top: 20px; font-size: 0.95rem; }
.kosten-vergelijk + .keuze--band { margin-top: 24px; } /* ruimte tot de alinea erboven (BugHerd #108) */

/* Team (homepage "Wie helpt je op weg"): ronde portretfoto + naam + korte bio. */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 32px 0 0;
}
.team-kaart {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}
.team-kaart__foto {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  display: block;
}
.team-kaart__naam {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 2px;
}
.team-kaart__straat {
  font-size: 0.82rem;
  color: var(--kleur-steun);
  font-weight: 600;
  margin: 0 0 10px;
}
.team-kaart__bio {
  font-size: 0.9rem;
  color: var(--kleur-donkerblauw);
  line-height: 1.55;
  margin: 0;
}
.team-kaart--placeholder .team-kaart__bio {
  font-style: italic;
  opacity: 0.75;
}

/* Team-profielen (over-ons "Het team"): volledige bio's, foto naast tekst vanaf tablet. */
.team-profielen {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 28px;
}
.team-profiel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--kleur-lichtgrijs);
}
.team-profiel:last-child { border-bottom: 0; padding-bottom: 0; }
.team-profiel__foto {
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.team-profiel__naam {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 2px;
}
.team-profiel__straat {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kleur-steun);
  margin: 0 0 12px;
}
.team-profiel__tekst p {
  margin: 0 0 12px;
  max-width: 68ch;
  color: var(--kleur-donkerblauw);
  line-height: 1.6;
}
.team-profiel__tekst p:last-child { margin-bottom: 0; }
.team-profiel--placeholder .team-profiel__tekst p {
  font-style: italic;
  opacity: 0.75;
}
@media (min-width: 768px) {
  .team-profiel { flex-direction: row; align-items: flex-start; gap: 28px; }
}

/* "Lees meer" bij een teamlid: de korte samenvatting (zelfde tekst als de
   homepage-teamkaart) staat altijd open; het volledige verhaal erachter is
   standaard ingeklapt. Simpel, CSS-only chevron-draai — geen JS nodig. */
.team-profiel__meer { margin-top: 4px; }
.team-profiel__meer > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--kleur-secundair);
}
.team-profiel__meer > summary::-webkit-details-marker { display: none; }
.team-profiel__meer > summary:hover { color: var(--kleur-primair-hover); }
.team-profiel__meer > summary::after { content: "\25BE"; font-size: .75em; }
.team-profiel__meer[open] > summary::after { content: "\25B4"; }
.team-profiel__meer__body { margin-top: 10px; }

/* Startavond */

/* Pilotformulier */
.pilot-formulier { max-width: 600px; }
.pilot-formulier .form-rij { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
.pilot-formulier .form-veld { gap: 6px; }
.pilot-formulier .form-veld label { font-size: 0.9rem; }
.pilot-formulier .form-veld input[type="text"],
.pilot-formulier .form-veld input[type="email"],
.pilot-formulier .form-veld input[type="tel"] {
  font-family: var(--font-basis);
  font-size: 1rem;
  color: var(--kleur-donkerblauw);
  background-color: var(--kleur-wit);
  border: 1.5px solid var(--rand);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.pilot-formulier .form-veld input:focus { outline: none; border-color: var(--kleur-donkerblauw); }

.form-interesse-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
  margin-bottom: 10px;
  display: block;
}
/* Opties altijd onder elkaar (ook desktop). Mobiel blijven de rijen 48px hoog
   (aanraakvlak); de kleinere gap kan omdat elke rij zelf al ruim lucht geeft. */
.radio-groep { display: flex; flex-direction: column; gap: 8px; }
.radio-optie {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--kleur-donkerblauw);
  min-height: 48px;
}
/* min-height 0: het rondje erft anders de 48px van .form-veld input en houdt de rij op
   48px, ook waar de patch radio-regelafstand hem op 30px zet. */
.radio-optie input[type="radio"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--kleur-primair); flex-shrink: 0; }
.radio-groep.is-ongeldig {
  border: 1.5px solid var(--kleur-fout);
  border-radius: 8px;
  padding: 10px 12px;
  background-color: rgba(198, 40, 40, .06);
}
/* Strakker met een muis, ruim met een vinger (design system, patch radio-regelafstand,
   04-09-2026). De ruime maat (gap 8px, 48px tikdoel) blijft de basis; alleen op een fijn
   aanwijsapparaat wordt de lijst één keuze in plaats van zes losse regels. `pointer: fine`
   en niet `min-width`: een aanraakscherm van 1280px heeft dezelfde vingers als een
   telefoon, en browsers zonder de query houden de veilige, ruime maat. Verving de
   1024px-regel die hetzelfde deed op schermbreedte. */
@media (pointer: fine) {
  .radio-groep { gap: 2px; }
  .radio-optie { min-height: 30px; }
}

@media (min-width: 768px) {
  .pilot-hero { padding: 80px 32px; }
  .pilot-hero h1 { font-size: 2.6rem; }
  .pilot-sectie { padding: 60px 32px; }
  .technieken-grid { grid-template-columns: 1fr 1fr; }
  .voordelen-grid  { grid-template-columns: 1fr 1fr; }
  .team-grid       { grid-template-columns: repeat(3, 1fr); }
  /* Homepage-intro ("Het gaat nu echt beginnen"): pas vanaf dit breakpoint gaan de
     kaarten in .voordelen-grid naast elkaar staan, waardoor de 65ch-leesbreedte van
     .pilot-sectie p duidelijk smaller oogt dan de kaartrij. Alleen hier (scoped via
     .pilot-sectie__intro, niet de algemene .pilot-sectie p-regel) laten we de tekst
     even breed lopen als de kaarten eronder. Op mobiel blijft de basisregel (65ch)
     gewoon gelden — daar is hij toch al smaller dan het scherm.  */
  .pilot-sectie__intro p { max-width: none; }
  .pilot-formulier .form-rij { grid-template-columns: 1fr 1fr; }
  .pilot-formulier .form-rij--interesse { grid-template-columns: 1fr; }
  .btn-formulier { width: auto; }
}
@media (min-width: 1024px) {
  .pilot-hero h1   { font-size: 3rem; }
  .pilot-sectie h2 { font-size: 2rem; }
}

/* ══════════════════════════════════════════════════════
   CONTACTPAGINA
   ══════════════════════════════════════════════════════ */

.contact-hero {
  background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
  padding: 60px 20px;
  text-align: center;
}
.contact-hero__inner { max-width: 760px; margin: 0 auto; }
.contact-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  line-height: 1.25;
  margin: 0 0 16px;
}
.contact-hero p {
  font-size: 1.1rem;
  color: var(--kleur-donkerblauw);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 60ch;
}

.contact-sectie { padding: 40px 20px; }
.contact-sectie__inner { max-width: 1100px; margin: 0 auto; }
.contact-sectie__label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kleur-secundair);
  margin-bottom: 12px;
}
.contact-sectie h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 12px;
  line-height: 1.3;
}
.contact-sectie p { color: var(--kleur-donkerblauw); line-height: 1.7; max-width: 65ch; margin: 0 0 8px; }

/* Contactformulier */
.contact-formulier { max-width: 600px; margin-top: 32px; }
.contact-formulier .form-rij { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
.contact-formulier .form-veld { gap: 6px; }
.contact-formulier .form-veld label { font-size: 0.9rem; }
.contact-formulier .form-veld input[type="text"],
.contact-formulier .form-veld input[type="email"],
.contact-formulier .form-veld textarea {
  font-family: var(--font-basis);
  font-size: 1rem;
  color: var(--kleur-donkerblauw);
  background-color: var(--kleur-wit);
  border: 1.5px solid var(--rand);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.contact-formulier .form-veld input[type="text"],
.contact-formulier .form-veld input[type="email"] { min-height: 48px; }
.contact-formulier .form-veld textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.contact-formulier .form-veld input:focus,
.contact-formulier .form-veld textarea:focus { outline: none; border-color: var(--kleur-donkerblauw); }

@media (min-width: 768px) {
  .contact-hero { padding: 80px 32px; }
  .contact-hero h1 { font-size: 2.6rem; }
  .contact-sectie { padding: 60px 32px; }
  .contact-formulier .form-rij--twee { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .contact-hero h1   { font-size: 3rem; }
  .contact-sectie h2 { font-size: 2rem; }
}

/* ══════════════════════════════════════════════════════
   ACTUEEL — OVERZICHT
   ══════════════════════════════════════════════════════ */

.actueel-hero {
  background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
  padding: 56px 20px 48px;
  text-align: center;
}
.actueel-hero__inner { max-width: 640px; margin: 0 auto; }
.actueel-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  line-height: 1.2;
  margin: 0 0 12px;
}
.actueel-hero p { font-size: 1.05rem; color: var(--kleur-donkerblauw); line-height: 1.65; margin: 0; }

.actueel-sectie { padding: 48px 20px 72px; background-color: var(--kleur-lichtblauw); min-height: 60vh; }
.actueel-sectie__inner { max-width: 900px; margin: 0 auto; }
.actueel-sectie__teller { font-size: 0.82rem; font-weight: 600; color: var(--kleur-donkerblauw); margin-bottom: 24px; }

.actueel-lijst { display: flex; flex-direction: column; gap: 20px; margin: 32px 0; }

.actueel-kaart {
  background-color: var(--kleur-wit);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(36,34,30,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.actueel-kaart:hover { box-shadow: 0 6px 24px rgba(36,34,30,0.13); transform: translateY(-2px); }
.actueel-kaart__body { padding: 24px 24px 20px; flex: 1; display: flex; flex-direction: column; }
.actueel-kaart__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.actueel-kaart__categorie {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.categorie--plan         { background-color: var(--kleur-waarschuwing); color: var(--kleur-waarschuwing-tekst); }
.categorie--participatie { background-color: rgba(27, 110, 60, .12); color: var(--kleur-groen); }
.categorie--verslag      { background-color: var(--kleur-lichtblauw); color: var(--kleur-donkerblauw); }
.actueel-kaart__datum { font-size: 0.82rem; color: var(--kleur-donkerblauw); }
.actueel-kaart h2 { font-size: 1.15rem; font-weight: 700; color: var(--kleur-donkerblauw); margin: 0 0 10px; line-height: 1.35; }
.actueel-kaart p  { font-size: 1rem; color: var(--kleur-donkerblauw); line-height: 1.7; margin: 0 0 20px; flex: 1; }
.actueel-kaart__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--kleur-lichtblauw);
  background-color: var(--kleur-lichtblauw);
}
.actueel-kaart__links { display: flex; flex-wrap: wrap; gap: 8px; }
.actueel-kaart__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--rand);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
  white-space: nowrap;
}
.actueel-kaart__link--primair {
  background-color: var(--kleur-primair);
  color: var(--kleur-wit);
  border-color: var(--kleur-primair);
}
.actueel-kaart__link--primair:hover { background-color: var(--kleur-primair-hover); border-color: var(--kleur-primair-hover); color: var(--kleur-wit); }
.actueel-kaart__link:not(.actueel-kaart__link--primair):hover {
  border-color: var(--kleur-primair);
  color: var(--kleur-primair);
  background-color: rgba(27, 110, 60, .06);
}
.actueel-kaart__link i { font-size: 16px; }

@media (min-width: 768px) {
  .actueel-hero h1 { font-size: 2.6rem; }
  .actueel-sectie  { padding: 56px 32px 88px; }
  .actueel-kaart   { flex-direction: row; align-items: stretch; }
  .actueel-kaart__body { padding: 28px 28px 24px; }
  .actueel-kaart__footer {
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    border-top: none;
    border-left: 1px solid var(--kleur-lichtblauw);
    padding: 24px 20px;
    background-color: transparent;
    min-width: 190px;
    gap: 8px;
  }
  .actueel-kaart__links { flex-direction: column; align-items: stretch; }
  .actueel-kaart__link  { justify-content: center; }
}
@media (min-width: 1024px) {
  .actueel-hero h1 { font-size: 3rem; }
}

/* ══════════════════════════════════════════════════════
   PLAN WONINGWARMTE.NL (plan-eerste-ronde)
   ══════════════════════════════════════════════════════ */

.plan-hero { background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit)); padding: 56px 20px 48px; text-align: center; }
.plan-hero__inner { max-width: 760px; margin: 0 auto; }
.plan-hero h1 { font-size: 2rem; font-weight: 700; color: var(--kleur-donkerblauw); line-height: 1.2; margin: 0 0 10px; }
.plan-hero__subtitel { font-size: 1.15rem; color: var(--kleur-primair); font-weight: 600; margin: 0 0 20px; }
.plan-hero__meta {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--kleur-donkerblauw);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 20px 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.plan-toc { background-color: var(--kleur-lichtblauw); border-radius: 12px; padding: 28px 24px; }
.plan-toc__titel {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kleur-secundair);
  margin: 0 0 16px;
}
.plan-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 4px; }
.plan-toc li a {
  display: block;
  font-size: 1rem;
  color: var(--kleur-donkerblauw);
  text-decoration: none;
  padding: 4px 0;
  line-height: 1.45;
  transition: color 0.15s;
}
.plan-toc li a:hover { color: var(--kleur-primair); }
.plan-toc .toc-hoofdstuk { font-weight: 700; }
.plan-toc .toc-sub { padding-left: 16px; font-weight: 400; color: var(--kleur-donkerblauw); }

.plan-inhoud { min-width: 0; }

.plan-hoofdstuk { margin-top: 56px; padding-top: 32px; border-top: 2px solid var(--kleur-lichtblauw); }
.plan-hoofdstuk:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.plan-hoofdstuk h2 { font-size: 1.5rem; font-weight: 700; color: var(--kleur-donkerblauw); margin: 0 0 20px; line-height: 1.25; }
.plan-hoofdstuk h3 { font-size: 1.1rem; font-weight: 700; color: var(--kleur-donkerblauw); margin: 32px 0 12px; }
.plan-hoofdstuk h4 { font-size: 0.95rem; font-weight: 700; color: var(--kleur-donkerblauw); margin: 20px 0 8px; }
.plan-hoofdstuk p  { font-size: 1rem; color: var(--kleur-donkerblauw); line-height: 1.8; margin: 0 0 16px; max-width: 72ch; }
.plan-hoofdstuk ul,
.plan-hoofdstuk ol { margin: 0 0 16px 20px; padding: 0; }
.plan-hoofdstuk li { font-size: 1rem; color: var(--kleur-donkerblauw); line-height: 1.75; margin-bottom: 6px; }
.plan-hoofdstuk strong { font-weight: 700; }
.plan-hoofdstuk em    { font-style: italic; }

.plan-tabel-wrapper { overflow-x: auto; margin: 16px 0 20px; border-radius: 8px; border: 1px solid var(--rand); }
.plan-tabel { width: 100%; border-collapse: collapse; font-size: 0.88rem; color: var(--kleur-donkerblauw); }
.plan-tabel thead { background-color: var(--kleur-donkerblauw); color: var(--kleur-wit); }
.plan-tabel thead th { padding: 11px 14px; text-align: left; font-weight: 600; white-space: nowrap; }
.plan-tabel tbody tr:nth-child(odd)  { background-color: var(--kleur-lichtblauw); }
.plan-tabel tbody tr:nth-child(even) { background-color: var(--kleur-wit); }
.plan-tabel tbody td { padding: 10px 14px; vertical-align: top; line-height: 1.5; }
.plan-tabel .cel-getal { font-weight: 700; }

.plan-tijdlijn { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.plan-tijdlijn__stap { display: flex; gap: 14px; align-items: flex-start; }
.plan-tijdlijn__punt {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background-color: var(--kleur-primair);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
  color: var(--kleur-wit);
  margin-top: 2px;
}
.plan-tijdlijn__punt--huidig { background-color: var(--kleur-accent); color: var(--kleur-donkerblauw); }
.plan-tijdlijn__tekst strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--kleur-donkerblauw); }
.plan-tijdlijn__tekst span   { font-size: 0.85rem; color: var(--kleur-donkerblauw); }

.plan-callout {
  background-color: var(--kleur-lichtblauw);
  border-left: 4px solid var(--kleur-primair);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 20px 0;
}
.plan-callout p { margin: 0; font-size: 1rem; }

.plan-download { background-color: var(--kleur-lichtblauw); padding: 48px 20px; text-align: center; }
.plan-download p { font-size: 1rem; color: var(--kleur-donkerblauw); margin: 0 0 24px; }

@media (min-width: 768px) {
  .plan-hero h1      { font-size: 2.6rem; }
  .plan-wrapper      { padding: 48px 32px 80px; }
  .plan-toc ol       { grid-template-columns: 1fr 1fr; gap: 2px 24px; }
  .plan-hoofdstuk h2 { font-size: 1.75rem; }
}
@media (min-width: 1024px) {
  .plan-wrapper { grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
  .plan-toc { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
  .plan-toc ol { grid-template-columns: 1fr; }
  .plan-hero h1 { font-size: 3rem; }
}

/* ══════════════════════════════════════════════════════
   MEEDENKGROEP
   ══════════════════════════════════════════════════════ */

.mdg-hero { background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit)); padding: 56px 20px 48px; text-align: center; }
.mdg-hero__inner { max-width: 760px; margin: 0 auto; }
.mdg-hero__label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kleur-steun);
  margin-bottom: 14px;
}
.mdg-hero h1 { font-size: 2rem; font-weight: 700; color: var(--kleur-donkerblauw); line-height: 1.2; margin: 0 0 14px; }
.mdg-hero__subtitel { font-size: 1.05rem; color: var(--kleur-donkerblauw); line-height: 1.65; margin: 0 auto; max-width: 58ch; }

.mdg-sectie { padding: 48px 20px; }
.mdg-foto { margin: 24px 0 0; }
.mdg-foto img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.mdg-foto figcaption {
  font-size: 0.85rem;
  color: var(--kleur-donkerblauw);
  margin-top: 8px;
}
.mdg-sectie__inner { max-width: 900px; margin: 0 auto; }
.mdg-sectie__label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kleur-secundair);
  margin-bottom: 10px;
}
.mdg-sectie h2 { font-size: 1.5rem; font-weight: 700; color: var(--kleur-donkerblauw); margin: 0 0 16px; line-height: 1.3; }
.mdg-sectie p  { font-size: 1rem; color: var(--kleur-donkerblauw); line-height: 1.8; max-width: 68ch; margin: 0 0 14px; }
.mdg-sectie ul { margin: 0 0 14px 20px; padding: 0; }
.mdg-sectie li { font-size: 1rem; color: var(--kleur-donkerblauw); line-height: 1.75; margin-bottom: 6px; }

.mdg-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mdg-stat {
  background-color: var(--kleur-wit);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 180px;
  box-shadow: 0 1px 6px rgba(36,34,30,0.07);
}
.mdg-stat__icoon { font-size: 28px; color: var(--kleur-primair); flex-shrink: 0; }
.mdg-stat__getal { font-size: 1.4rem; font-weight: 700; color: var(--kleur-donkerblauw); line-height: 1; }
.mdg-stat__label { font-size: 0.8rem; color: var(--kleur-donkerblauw); margin-top: 2px; }

.mdg-avonden-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
.mdg-avond-kaart { background-color: var(--kleur-wit); border: 1px solid var(--rand); border-radius: 12px; box-shadow: 0 2px 12px rgba(36,34,30,0.08); overflow: hidden; }
.mdg-avond-kaart__header { background-color: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit)); border-bottom: 1px solid var(--rand); padding: 18px 24px; display: flex; align-items: center; gap: 14px; }
.mdg-avond-kaart__nummer {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background-color: var(--kleur-primair);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700;
  color: var(--kleur-wit);
}
.mdg-avond-kaart__header-tekst { flex: 1; }
.mdg-avond-kaart__titel  { font-size: 1rem; font-weight: 700; color: var(--kleur-donkerblauw); margin: 0 0 2px; }
.mdg-avond-kaart__datum  { font-size: 0.82rem; color: var(--kleur-donkerblauw); opacity: .65; }
.mdg-avond-kaart__body   { padding: 20px 24px; }
.mdg-avond-kaart__links  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mdg-avond-kaart__link {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--kleur-donkerblauw);
  font-size: 0.92rem; font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--rand);
  transition: border-color 0.15s, background-color 0.15s;
}
.mdg-avond-kaart__link:hover { border-color: var(--kleur-primair); background-color: rgba(27, 110, 60, .06); color: var(--kleur-primair); }
.mdg-avond-kaart__link i { font-size: 20px; flex-shrink: 0; color: var(--kleur-secundair); }
.mdg-avond-kaart__link:hover i { color: var(--kleur-primair); }

@media (min-width: 768px) {
  .mdg-hero h1      { font-size: 2.6rem; }
  .mdg-sectie       { padding: 60px 32px; }
  .mdg-avonden-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .mdg-hero h1   { font-size: 3rem; }
  .mdg-sectie h2 { font-size: 1.75rem; }
}

/* ══════════════════════════════════════════════════════
   ARTIKEL
   ══════════════════════════════════════════════════════ */

.artikel-hero { background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit)); padding: 48px 20px 40px; text-align: center; }
.artikel-hero__inner { max-width: 760px; margin: 0 auto; }
.artikel-hero__terug {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--kleur-donkerblauw);
  text-decoration: none;
  margin-top: 20px;
  transition: color 0.15s;
}
.artikel-hero__terug:hover { color: var(--kleur-primair); }
.artikel-hero h1 { font-size: 1.6rem; font-weight: 700; color: var(--kleur-donkerblauw); line-height: 1.25; margin: 0; }

.artikel-inhoud {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 80px;
  color: var(--kleur-donkerblauw);
  line-height: 1.8;
  font-size: 0.97rem;
}
.artikel-inhoud h2 { font-size: 1.25rem; font-weight: 700; color: var(--kleur-donkerblauw); margin: 40px 0 12px; }
.artikel-inhoud h3 { font-size: 1.05rem; font-weight: 700; color: var(--kleur-donkerblauw); margin: 28px 0 10px; }
.artikel-inhoud p  { margin: 0 0 16px; }
.artikel-inhoud ul,
.artikel-inhoud ol { margin: 0 0 16px 20px; }
.artikel-inhoud li { margin-bottom: 6px; }

.artikel-placeholder {
  background-color: var(--kleur-lichtblauw);
  border-radius: 8px;
  padding: 32px 28px;
  text-align: center;
  color: var(--kleur-donkerblauw);
  font-size: 0.92rem;
}
.artikel-placeholder i { font-size: 40px; color: var(--kleur-lichtgrijs); display: block; margin-bottom: 12px; }

@media (min-width: 768px) {
  .artikel-hero    { padding: 60px 32px 52px; }
  .artikel-hero h1 { font-size: 2rem; }
  .artikel-inhoud  { padding: 60px 32px 100px; }
}
@media (min-width: 1024px) {
  .artikel-hero h1 { font-size: 2.4rem; }
}

/* ══════════════════════════════════════════════════════
   PRIVACYBELEID
   ══════════════════════════════════════════════════════ */

.privacy-hero { background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit)); padding: 48px 20px; text-align: center; }
.privacy-hero h1 { font-size: 2rem; font-weight: 700; color: var(--kleur-donkerblauw); margin: 0 0 10px; }
.privacy-hero .bijgewerkt { font-size: 0.9rem; color: var(--kleur-donkerblauw); }

.privacy-inhoud { max-width: 780px; margin: 0 auto; padding: 48px 20px 72px; }
.privacy-inhoud h2 {
  font-size: 1.25rem; font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 40px 0 12px;
  padding-top: 8px;
  border-top: 2px solid var(--kleur-lichtblauw);
}
.privacy-inhoud h2:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.privacy-inhoud p   { color: var(--kleur-donkerblauw); line-height: 1.75; margin: 0 0 14px; }
.privacy-inhoud ul  { margin: 0 0 14px 20px; color: var(--kleur-donkerblauw); line-height: 1.75; }
.privacy-inhoud li  { margin-bottom: 6px; }
.privacy-inhoud a   { color: var(--kleur-steun); text-decoration: underline; }

.privacy-tabel-wrapper { overflow-x: auto; margin: 16px 0 20px; border-radius: 8px; border: 1px solid var(--rand); }
.privacy-tabel { width: 100%; border-collapse: collapse; font-size: 0.88rem; color: var(--kleur-donkerblauw); }
.privacy-tabel thead { background-color: var(--kleur-donkerblauw); color: var(--kleur-wit); }
.privacy-tabel thead th { padding: 12px 14px; text-align: left; font-weight: 600; white-space: nowrap; }
.privacy-tabel tbody tr:nth-child(odd)  { background-color: var(--kleur-lichtblauw); }
.privacy-tabel tbody tr:nth-child(even) { background-color: var(--kleur-wit); }
.privacy-tabel tbody td { padding: 10px 14px; vertical-align: top; line-height: 1.55; }

.intro-blok { background-color: var(--kleur-lichtblauw); border-radius: 8px; padding: 24px 28px; margin-bottom: 40px; }
.intro-blok p { margin: 0 0 10px; }
.intro-blok p:last-child { margin: 0; }

@media (min-width: 768px) {
  .privacy-hero h1 { font-size: 2.4rem; }
  .privacy-inhoud  { padding: 60px 32px 80px; }
}

/* ══════════════════════════════════════════════════════
   OVER ONS
   ══════════════════════════════════════════════════════ */

.hero-over {
  background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
  padding: 64px 5% 72px;
  position: relative; overflow: hidden;
}
.hero-over::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(249,168,37,.12) 0%, transparent 65%);
  pointer-events: none;
}
.hero-over-inhoud { position: relative; z-index: 1; max-width: 680px; }
.hero-over .sectie-label { color: var(--kleur-steun); }
.hero-over h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.15;
  color: var(--kleur-donkerblauw); margin-bottom: 20px;
}
.hero-over p { font-size: 1.05rem; line-height: 1.7; color: var(--kleur-donkerblauw); max-width: 60ch; }

.intro-sectie { background: var(--kleur-wit); padding: 72px 5%; }
.intro-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 780px; }
.intro-sectie p { font-size: 1rem; line-height: 1.8; color: var(--kleur-donkerblauw); max-width: 65ch; }
.intro-sectie p + p { margin-top: 16px; }

.kernwaarden-sectie { background: var(--kleur-lichtblauw); padding: 72px 5%; }
.kernwaarden-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
.kernwaarde-kaart {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--schaduw);
  transition: transform .2s, box-shadow .2s;
}
.kernwaarde-kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hover); }
.kernwaarde-icoon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(27, 110, 60, .10);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.kernwaarde-icoon svg { width: 26px; height: 26px; stroke: var(--kleur-primair); }
.kernwaarde-kaart h3 { font-size: 1.1rem; font-weight: 700; color: var(--kleur-donkerblauw); margin-bottom: 10px; }
.kernwaarde-kaart p  { font-size: 1rem; line-height: 1.65; color: var(--kleur-donkerblauw); max-width: 52ch; }

.cta-strip {
  background: linear-gradient(135deg, var(--kleur-primair) 0%, var(--kleur-primair-hover) 100%);
  padding: 56px 5%; text-align: center;
}
.cta-strip h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 700; color: var(--kleur-wit); margin-bottom: 10px; }
.cta-strip p  { color: rgba(255,255,255,.85); font-size: 1rem; margin-bottom: 28px; max-width: 50ch; margin-inline: auto; }

@media (min-width: 768px) {
  .kernwaarden-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════
   AANMELDFORMULIER PILOT
   ══════════════════════════════════════════════════════ */

.formulier-pagina {
  background-color: var(--kleur-lichtblauw);
  min-height: calc(100vh - 120px);
  padding: 40px 20px 60px;
}
.formulier-pagina__inner {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.terug-link {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--kleur-steun);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 24px;
}
.terug-link:hover,
.terug-link:focus { color: var(--kleur-donkerblauw); text-decoration: underline; }

.formulier-kop__label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kleur-secundair);
  margin-bottom: 10px;
}
.formulier-kop h1 { font-size: 1.7rem; font-weight: 700; color: var(--kleur-donkerblauw); line-height: 1.25; margin: 0 0 16px; }
.formulier-kop p  { color: var(--kleur-donkerblauw); line-height: 1.7; max-width: 60ch; margin: 0; }
/* Intro als opsomming (BugHerd #125): zelfde maat als de alinea, bolletjes binnen de tekstkolom. */
.formulier-kop ul { color: var(--kleur-donkerblauw); line-height: 1.7; max-width: 60ch; margin: 0; padding-left: 1.25em; }
.formulier-kop ul li + li { margin-top: 4px; }

/* "Hoe gaat het verder?"-kaart (aanmeldformulier): huisstijlkaart — witte
   achtergrond, warmgrijze rand, bosgroene icoonvierkanten met wit Phosphor-icoon. */
.vervolg-kaart {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: 8px;
  padding: 24px 20px;
}
.vervolg-kaart__kop {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 16px;
}
.vervolg-kaart__stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vervolg-stap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--kleur-donkerblauw);
}
.vervolg-stap__icoon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.formulier-kaart {
  background-color: var(--kleur-wit);
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(36,34,30,0.09);
  padding: 28px 20px;
}
.formulier-kaart .form-rij { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
.formulier-kaart .form-veld label { font-size: 0.9rem; }
.formulier-kaart .form-veld input[type="text"],
.formulier-kaart .form-veld input[type="email"],
.formulier-kaart .form-veld textarea {
  font-family: var(--font-basis);
  font-size: 1rem;
  color: var(--kleur-donkerblauw);
  background-color: var(--kleur-wit);
  border: 1.5px solid var(--rand);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.formulier-kaart .form-veld textarea { min-height: 100px; resize: vertical; }
.formulier-kaart .form-veld input:focus,
.formulier-kaart .form-veld textarea:focus { outline: none; border-color: var(--kleur-donkerblauw); }
/* Bevestigingskaart na verzenden van het aanmeldformulier (BugHerd #207, 06-09-2026):
   op de plek van het formulier, in dezelfde kaart. */
.aanmeld-bevestiging { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.aanmeld-bevestiging__icoon { font-size: 40px; line-height: 1; color: var(--kleur-groen); }
.aanmeld-bevestiging__kop { margin: 0; font-size: 1.35rem; color: var(--kleur-donkerblauw); }
.aanmeld-bevestiging__tekst { margin: 0; max-width: 65ch; line-height: 1.6; color: var(--kleur-donkerblauw); }
.aanmeld-bevestiging__knop { margin-top: 8px; }

.vereist { color: var(--kleur-primair); margin-left: 2px; }
/* Het label boven een keuzegroep is een vraag aan de bezoeker, geen veldnaam; die mag
   zwaarder wegen dan de veldlabels (design system, patch radiogroep-vraaglabel, 04-09-2026). */
.radio-label { font-size: 1.1rem; font-weight: 600; color: var(--kleur-donkerblauw); margin-bottom: 4px; display: block; }
.form-divider { border: none; border-top: 1.5px solid var(--kleur-lichtgrijs); margin: 24px 0; }
.verplicht-toelichting { font-size: 0.8rem; color: var(--kleur-donkerblauw); margin-bottom: 20px; }

@media (min-width: 768px) {
  .formulier-pagina { padding: 52px 32px 80px; }
  .formulier-kop h1 { font-size: 2.1rem; }
  .formulier-kaart .form-rij { grid-template-columns: 1fr 1fr; }
  .formulier-kaart .form-rij--breed { grid-template-columns: 1fr; }
}
/* Eén gecentreerde kolom: formulier bovenaan, "Hoe gaat het verder?" eronder.
   (Voorheen tweekoloms met een zijbalk rechts; nu gestapeld en gecentreerd.) */

/* ══════════════════════════════════════════════════════
   CAMPAGNE-COMPONENTEN (homepage, pilot, factsheets, FAQ)
   ══════════════════════════════════════════════════════ */

/* Hero CTA-groep */
.hero-cta-groep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero-link-secundair {
  color: var(--kleur-steun);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
  font-size: 1rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.hero-link-secundair:hover,
.hero-link-secundair:focus { color: var(--kleur-donkerblauw); }

/* Sectie-CTA (knop + link onder een sectie) */
.sectie-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-top: 32px;
}

/* Secundaire inline link (oranje) */
.link-secundair {
  color: var(--kleur-steun);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}
.link-secundair:hover,
.link-secundair:focus { color: var(--kleur-donkerblauw); }
.link-secundair i { font-size: 1.05em; }
/* Met een pijl-icoon (BugHerd #218): in een inline-flex loopt de onderstreping ook onder het
   icoon door, en een kind kan die niet uitzetten. Daarom staat de tekst in een span die de
   onderstreping draagt, en heeft de link zelf er geen. Zelfde constructie als .keuze__opnieuw. */
.link-secundair--pijl { text-decoration: none; }
.link-secundair--pijl > span { text-decoration: underline; text-underline-offset: 3px; }

/* Technieken-grid: drie kolommen variant */
@media (min-width: 1024px) {
  .technieken-grid--drie { grid-template-columns: 1fr 1fr 1fr; }
}

/* Tijdlijn */
.tijdlijn {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tijdlijn__item {
  background-color: var(--kleur-wit);
  border-left: 4px solid var(--kleur-steun);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(36,34,30,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tijdlijn__datum {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kleur-steun);
}
.tijdlijn__omschrijving {
  color: var(--kleur-donkerblauw);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Stappen-lijst (genummerd) */
.stappen-lijst {
  list-style: none;
  counter-reset: stap;
  padding: 0;
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stappen-lijst li {
  counter-increment: stap;
  position: relative;
  background-color: var(--kleur-wit);
  border-radius: 8px;
  padding: 20px 20px 20px 64px;
  box-shadow: 0 2px 8px rgba(36,34,30,0.06);
  color: var(--kleur-donkerblauw);
  line-height: 1.6;
  font-size: 1rem;
}
.stappen-lijst li::before {
  content: counter(stap);
  position: absolute;
  top: 18px;
  left: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--kleur-primair);
  color: var(--kleur-wit);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.stappen-lijst strong { display: block; margin-bottom: 4px; }

/* Belofte-lijst (vinkjes) */
.belofte-lijst {
  list-style: none;
  padding: 0;
  /* Boven 16px in plaats van 32px (BugHerd #138, #139): de lijst hoort bij de zin
     erboven, dus die twee mogen dichter op elkaar. Onder blijft 32px, want daar
     begint een nieuw blok. */
  margin: 16px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 65ch;
}
.belofte-lijst li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--kleur-donkerblauw);
  line-height: 1.6;
  font-size: 1rem;
}
.belofte-lijst__icoon {
  color: var(--kleur-groen);
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1.4;
}

.disclaimer-tekst {
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--kleur-donkerblauw);
  font-style: italic;
  max-width: 65ch;
}

/* FAQ accordion (details/summary) */
.faq-lijst {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}
.faq-item {
  background-color: var(--kleur-wit);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(36,34,30,0.06);
  overflow: hidden;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 20px;
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:focus-visible { outline: 2px solid var(--kleur-secundair); outline-offset: -2px; }
/* Bij uitklappen kort een groene omlijning die langzaam uitfadet. */
@keyframes faq-open-ring {
  from { box-shadow: 0 0 0 2px var(--kleur-primair), 0 2px 8px rgba(36,34,30,0.06); }
  to   { box-shadow: 0 0 0 2px transparent,        0 2px 8px rgba(36,34,30,0.06); }
}
.faq-item[open] { animation: faq-open-ring 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .faq-item[open] { animation: none; } }

/* Knoppen "alles uit-/inklappen" boven de FAQ */
.faq-bedien { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin-top: 20px; }
.faq-bedien__knop {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--kleur-wit); border: 1px solid var(--kleur-lichtgrijs); border-radius: 8px;
  color: var(--kleur-primair); font: inherit; font-size: .95rem; font-weight: 600;
  padding: 10px 18px; min-height: 44px; cursor: pointer; transition: background-color .15s;
}
.faq-bedien__knop:hover { background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit)); }
.faq-item > summary h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
  margin: 0;
  line-height: 1.4;
}
.faq-item__pijl {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--kleur-secundair);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-item__pijl { transform: translateY(-50%) rotate(180deg); }
.faq-item__antwoord {
  padding: 0 20px 20px;
}
.faq-item__antwoord p {
  margin: 0;
  color: var(--kleur-donkerblauw);
  line-height: 1.65;
  font-size: 1rem;
  max-width: 65ch;
}
.faq-item__antwoord p + p { margin-top: 12px; }

/* Factsheet tabel (responsive: stapelt op mobiel) */
.factsheet-tabel-wrapper { margin: 24px 0 16px; }
.factsheet-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: var(--kleur-donkerblauw);
}
.factsheet-tabel thead { display: none; }
.factsheet-tabel tbody tr {
  display: block;
  background-color: var(--kleur-wit);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(36,34,30,0.06);
}
.factsheet-tabel tbody th,
.factsheet-tabel tbody td {
  display: block;
  text-align: left;
  padding: 4px 0;
  font-weight: 400;
  line-height: 1.5;
}
.factsheet-tabel tbody th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kleur-secundair);
}
.factsheet-tabel tbody td { font-weight: 600; }
.factsheet-tabel-toelichting {
  font-size: 0.85rem;
  color: var(--kleur-donkerblauw);
  line-height: 1.6;
  max-width: 70ch;
}

@media (min-width: 768px) {
  .hero-cta-groep { flex-direction: row; justify-content: center; }
  .sectie-cta { flex-direction: column; align-items: center; }

  /* Factsheet tabel: terug naar normale tabel-layout */
  .factsheet-tabel-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--rand);
  }
  .factsheet-tabel thead { display: table-header-group; }
  .factsheet-tabel thead {
    background-color: var(--kleur-donkerblauw);
    color: var(--kleur-wit);
  }
  .factsheet-tabel thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
  }
  .factsheet-tabel tbody tr {
    display: table-row;
    background-color: var(--kleur-wit);
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
  }
  .factsheet-tabel tbody tr:nth-child(odd) { background-color: var(--kleur-lichtblauw); }
  .factsheet-tabel tbody th,
  .factsheet-tabel tbody td {
    display: table-cell;
    padding: 12px 16px;
    line-height: 1.55;
    vertical-align: top;
  }
  .factsheet-tabel tbody th {
    color: var(--kleur-donkerblauw);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    width: 38%;
  }
  .factsheet-tabel tbody td { font-weight: 400; }
}

/* ── ACCOUNT- EN FORMULIERPAGINA'S (inloggen, account aanvragen, wachtwoord) ── */
.account-page {
  padding: 64px 24px;
}

.account-card {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--kleur-wit);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--schaduw);
}

.account-card-narrow {
  max-width: 560px;
}

.account-intro {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.account-intro .eyebrow {
  margin: 0 0 8px;
  color: var(--kleur-secundair);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.account-intro h1 {
  margin: 0 0 16px;
  color: var(--kleur-donkerblauw);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

.account-intro p {
  margin: 0;
  color: var(--kleur-donkerblauw);
  font-size: 1.05rem;
  line-height: 1.6;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-form label,
.form-field label {
  color: var(--kleur-donkerblauw);
  font-weight: 600;
  font-size: 0.95rem;
}

.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="tel"],
.account-form input[type="password"] {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px 16px;
  font: inherit;
  color: var(--kleur-donkerblauw);
  background: var(--kleur-wit);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.account-form input:focus {
  outline: none;
  border-color: var(--kleur-secundair);
  box-shadow: 0 0 0 4px rgba(27, 110, 60, 0.18);
}

/* Wachtwoord-oogje: wachtwoord-oog.js wikkelt elk input[type="password"] in
   deze span en zet er de toon/verberg-knop in. Generiek: geldt voor de
   accountpagina's én de inlogmodal. De knop beslaat de volle veldhoogte
   (minimaal 48px, touch-doel); het veld krijgt rechts ruimte zodat de
   tekst niet onder de knop doorloopt. De type="text"-variant is de
   getoonde stand na het klikken op het oogje. */
.wachtwoord-oog {
  position: relative;
  display: block;
}

.wachtwoord-oog input[type="password"],
.wachtwoord-oog input[type="text"] {
  padding-right: 56px;
}

.wachtwoord-oog__knop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius);
  color: var(--kleur-donkerblauw);
  font-size: 22px;
  cursor: pointer;
}

.wachtwoord-oog__knop:hover {
  color: var(--kleur-primair);
}

.wachtwoord-oog__knop:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: -4px;
}

.account-form textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px 16px;
  font: inherit;
  line-height: 1.6;
  color: var(--kleur-donkerblauw);
  background: var(--kleur-wit);
  box-sizing: border-box;
}

.account-form textarea:focus {
  outline: none;
  border-color: var(--kleur-secundair);
  box-shadow: 0 0 0 4px rgba(27, 110, 60, 0.18);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--kleur-donkerblauw);
  font-weight: 500;
  cursor: pointer;
}
/* Voorbehoud onder de keuze in plaats van erachter (BugHerd #127): de keuzeregel
   blijft kort, de voorwaarde blijft leesbaar. align-items: flex-start, anders staat
   het vinkje bij twee regels tekst in het midden. */
.checkbox-field:has(.checkbox-field__hint) { align-items: flex-start; }
.checkbox-field__hint { display: block; margin-top: 2px; font-size: .9rem; font-weight: 400; color: color-mix(in srgb, var(--kleur-donkerblauw) 72%, var(--kleur-wit)); }

/* Knop Inloggen links en "Ingelogd blijven" rechts op dezelfde regel; gebruikt
   op /login (account-form) en in de inlogmodal. Wordt de regel te smal, dan
   zakt het vinkje onder de knop. */
.inlog-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.checkbox-field input {
  width: 20px;
  height: 20px;
  accent-color: var(--kleur-primair);
}

/* In een .form-veld (bv. het aanmeldformulier) zou de generieke
   .form-veld input-regel de checkbox het uiterlijk van een tekstveld geven
   (48px hoog, rand, grijs vlak); die opmaak hier expliciet terugdraaien. */
.form-veld .checkbox-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  flex-shrink: 0;
}

.button-primary {
  align-self: flex-start;
  border: 0;
  border-radius: var(--radius);
  padding: 15px 28px;
  min-height: 48px;
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.button-primary:hover {
  background: var(--kleur-secundair);
  transform: translateY(-1px);
}

.form-message {
  margin: 0 0 28px;
  padding: 16px 18px;
  border-radius: var(--radius);
  font-weight: 600;
}

.form-message-success {
  color: var(--kleur-groen);
  background: rgba(27, 110, 60, 0.12);
  border: 1px solid var(--kleur-groen);
}

.form-message-error {
  color: var(--kleur-fout);
  background: rgba(198, 40, 40, 0.10);
  border: 1px solid var(--kleur-fout);
}

.account-alt-link {
  margin-top: 20px;
  text-align: center;
  color: var(--kleur-donkerblauw);
}

.account-alt-link a {
  color: var(--kleur-secundair);
  font-weight: 700;
  text-decoration: none;
}

.account-alt-link a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .account-page {
    padding: 96px 24px;
  }
  .button-primary {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  .account-card {
    padding: 28px 22px;
  }
  .button-primary {
    width: 100%;
    align-self: stretch;
  }
}


/* =========================================================================
   Techniekvergelijker — woning-in-kaart (vragenlijst + resultaat)
   Mobile-first. Gebruikt uitsluitend de bestaande CSS-variabelen.
   ========================================================================= */

.vergelijker {
  background: var(--kleur-lichtblauw);
  min-height: calc(100vh - 64px);
  padding: 28px 16px 64px;
}
.vergelijker__inner {
  max-width: 760px;
  margin: 0 auto;
}
.vergelijker-kop { margin-bottom: 24px; }
.vergelijker-kop h1 {
  color: var(--kleur-donkerblauw);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.vergelijker-kop p {
  color: var(--kleur-donkerblauw);
  max-width: 65ch;
  line-height: 1.5;
  margin: 0;
}

/* --- Vragenlijst-wizard: hero + content (in lijn met de overige pagina's) --- */
/* Hero van de woning-check (BugHerd #111): dezelfde drone-luchtfoto als de
   homepage-hero, zodat wie daar op "Start check" klikt visueel in dezelfde route
   blijft. Op elke breedte, niet alleen op een telefoon: een hero die per
   schermformaat van karakter wisselt is lastiger te onderhouden en de aanleiding
   (het lege vlak onder de kop) speelt ook op een laptop. De gerichte verduistering
   houdt de witte tekst boven de WCAG AA-grens en laat de foto zichtbaar. */
.wizard-hero {
  /* Terugval voor browsers zonder image-set(): die verwerpen de declaratie
     hieronder in zijn geheel, dus de gewone url() staat er als eerste. */
  background:
    radial-gradient(ellipse 85% 70% at 50% 46%,
      rgba(36,34,30,.72) 0%, rgba(36,34,30,.60) 40%,
      rgba(36,34,30,.32) 75%, rgba(36,34,30,.14) 100%),
    url('/images/Ramplaankwartier-drone-1.jpg') center / cover no-repeat;
  background:
    radial-gradient(ellipse 85% 70% at 50% 46%,
      rgba(36,34,30,.72) 0%,
      rgba(36,34,30,.60) 40%,
      rgba(36,34,30,.32) 75%,
      rgba(36,34,30,.14) 100%),
    image-set(
      url('/images/Ramplaankwartier-drone-1-800w.jpg') 1x,
      url('/images/Ramplaankwartier-drone-1.jpg') 2x) center / cover no-repeat;
  padding: 48px 20px;
  text-align: center;
}
.wizard-hero__inner { max-width: 760px; margin: 0 auto; }
.wizard-hero h1 {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--kleur-wit);
  text-shadow: 0 1px 14px rgba(36,34,30,.75), 0 0 4px rgba(36,34,30,.45);
  line-height: 1.25;
  margin: 0 0 14px;
}
.wizard-hero p {
  font-size: 1.05rem;
  color: var(--kleur-wit);
  text-shadow: 0 1px 10px rgba(36,34,30,.8), 0 0 3px rgba(36,34,30,.5);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 60ch;
}
.wizard-sectie {
  background: var(--kleur-lichtblauw);
  padding: 24px 16px 64px;
}
.wizard { max-width: 640px; margin: 0 auto; }

/* --- Sticky wrapper: voortgangsbalk + eventuele doelgebied-melding --- */
.wizard-sticky-top {
  position: sticky;
  top: 64px; /* net onder de sticky navigatiebalk (height: 64px) */
  background: var(--kleur-lichtblauw);
  padding-bottom: 12px;
  z-index: 5;
}

/* --- Buiten-doelgebied-melding --- */
.buiten-doelgebied-melding {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--kleur-steun) 10%, var(--kleur-wit));
  border: 1px solid var(--kleur-steun);
  border-radius: 8px;
  color: var(--kleur-donkerblauw);
  font-size: 0.9rem;
  line-height: 1.5;
}
.buiten-doelgebied-melding i {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--kleur-steun);
  margin-top: 1px;
}
.buiten-doelgebied-melding p { margin: 0; }
/* Sluitknop: 48px raakvlak, met negatieve marges zodat de melding er niet hoger
   van wordt. Het sluiten wordt per adres onthouden (assets/js/buiten-doelgebied-melding.js).
   Het zichtbare hover-/focusvlak is een vierkant van 32px rond het kruisje zelf (BugHerd
   #246): de volle 48px steekt door de padding heen en raakte de rand van de melding. */
.buiten-doelgebied-melding__sluiten {
  flex-shrink: 0;
  margin: -12px -12px -12px auto;
  width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--kleur-donkerblauw);
  cursor: pointer;
}
.buiten-doelgebied-melding__sluiten i {
  font-size: 22px; color: inherit; margin: 0;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.buiten-doelgebied-melding__sluiten:hover i,
.buiten-doelgebied-melding__sluiten:focus-visible i {
  background: color-mix(in srgb, var(--kleur-steun) 18%, var(--kleur-wit));
}
.buiten-doelgebied-melding--dashboard {
  position: sticky;
  top: 64px; /* net onder de navigatiebalk */
  z-index: 5;
  margin-bottom: 24px;
}

/* --- Voortgangsbalk --- */
.wizard-voortgang {
  background: var(--kleur-lichtblauw);
  padding: 12px 0;
  margin-bottom: 8px;
}
.wizard-voortgang__balk {
  height: 8px;
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: 999px;
  overflow: hidden;
}
.wizard-voortgang__balk span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--kleur-primair);
  border-radius: 999px;
  transition: width .25s ease;
}
.wizard-voortgang__tekst {
  font-size: .85rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
  margin: 8px 0 0;
}

/* --- Eén vraag per scherm --- */
.vraag-stap {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw);
  padding: 24px 18px;
}
.vraag-stap__kop { text-align: center; margin-bottom: 20px; }
.vraag-stap__icoon {
  font-size: 2.6rem;
  color: var(--kleur-primair);
  display: block;
  margin-bottom: 8px;
}
.vraag-stap__kop h2 {
  color: var(--kleur-donkerblauw);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}
.vraag-stap__hint {
  color: var(--kleur-donkerblauw);
  font-size: .9rem;
  margin: 10px auto 0;
  max-width: 50ch;
  line-height: 1.5;
}
.vraag-stap__tijdelijk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kleur-waarschuwing);
  color: var(--kleur-donkerblauw);
  font-size: .8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  margin: 12px 0 0;
}
/* Uit de open data afgeleide hint (bv. geschatte ligging) — subtiel, informatief. */
.vraag-stap__bag-hint {
  color: var(--kleur-donkerblauw);
  opacity: .75;
  font-size: .85rem;
  font-style: italic;
  margin: 10px auto 0;
  max-width: 50ch;
  line-height: 1.5;
}

/* Inklapbare toelichting onder een vraag (details/summary). */
.vraag-toelichting {
  margin: 14px auto 0;
  max-width: 50ch;
  text-align: left;
}
.vraag-toelichting__knop {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--kleur-steun);
  font-size: .9rem;
  font-weight: 600;
  padding: 2px 0;
}
.vraag-toelichting__knop::-webkit-details-marker { display: none; }
.vraag-toelichting__inhoud {
  margin-top: 10px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
  border-radius: 8px;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--kleur-donkerblauw);
  text-align: left;
}
.vraag-toelichting__inhoud p { margin: 0 0 8px; }
.vraag-toelichting__inhoud p:last-child { margin-bottom: 0; }
.vraag-toelichting__inhoud ul { margin: 8px 0 8px 18px; padding: 0; }
.vraag-toelichting__inhoud li { margin-bottom: 6px; }

/* --- Gecombineerde stap: meerdere deelvragen op één scherm (bv. de glasvragen).
       Elk deel krijgt een accentlabel in de steunkleur zodat het verschil tussen de
       deelvragen in één oogopslag duidelijk is. --- */
.vraag-groep + .vraag-groep { margin-top: 32px; }
.vraag-groep__label {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto 10px;
  color: var(--kleur-steun);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Lijntje achter het label, zodat het als sectiescheiding leest. */
.vraag-groep__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--kleur-steun) 35%, var(--kleur-wit));
}

/* --- Antwoord-knoppen (één vraag, klik = kiezen + automatisch door) --- */
.antwoord-lijst {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}
.antwoord-knop {
  position: relative;
  display: flex;
  align-items: center;
  text-align: left;
  min-height: 56px;
  padding: 14px 48px 14px 18px;
  background: var(--kleur-wit);
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.antwoord-knop:hover { border-color: var(--kleur-secundair); box-shadow: var(--schaduw); }
.antwoord-knop__radio {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.antwoord-knop__tekst { display: flex; flex-direction: column; gap: 2px; }
.antwoord-knop__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
  line-height: 1.3;
}
.antwoord-knop__uitleg {
  font-size: .85rem;
  color: var(--kleur-donkerblauw);
  opacity: .7;
  line-height: 1.4;
}
.antwoord-knop__vink {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;                 /* BugHerd #54: was 1.4rem, viel te weinig op */
  color: var(--kleur-primair);
  opacity: 0;
  transition: opacity .15s;
}
/* Aanvinklijst (BugHerd #54; maten uit het design system, patch antwoord-meerkeuze van
   04-09-2026): hier staat een leeg vierkant vakje al vóór het aanvinken, zodat te zien is
   dat er meerdere antwoorden kunnen. Bewust alleen bij meerkeuze: bij een enkelkeuzevraag
   zou een vierkant vakje ten onrechte meerdere antwoorden suggereren. Het vakje is altijd
   zichtbaar (opacity 1); het vinkje zelf blijft verborgen via color: transparent tot de
   optie is aangevinkt. De patch noemt de klassen .antwoord-lijst--meervoud /
   .antwoord-knop--meervoud; hier heet de lijst al --meerkeuze (PHP, JS en CSS), dus die
   naam blijft. De bijbehorende gedragseis (niet automatisch doorbladeren, knop "Volgende"
   eronder) zit al in vragen.php. */
.antwoord-lijst--meerkeuze .antwoord-knop__vink {
  opacity: 1;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 17px;                   /* glyph iets kleiner dan het vakje */
  border: 2px solid var(--rand);
  border-radius: 5px;
  background: var(--kleur-wit);
  color: transparent;
  transition: color .15s, background-color .15s, border-color .15s;
}
.antwoord-lijst--meerkeuze .antwoord-knop:has(.antwoord-knop__radio:checked) .antwoord-knop__vink {
  color: var(--kleur-wit);
  background: var(--kleur-primair);
  border-color: var(--kleur-primair);
}
.antwoord-knop:has(.antwoord-knop__radio:checked) {
  border-color: var(--kleur-primair);
  background-color: var(--kleur-lichtblauw);
  box-shadow: var(--schaduw);
}
.antwoord-knop:has(.antwoord-knop__radio:checked) .antwoord-knop__vink { opacity: 1; }
.antwoord-knop:has(.antwoord-knop__radio:focus-visible) {
  outline: 3px solid var(--kleur-secundair);
  outline-offset: 2px;
}

/* --- Meerkeuze (vinkjes, sheet 3.11: afgiftesysteem): zelfde knoppen als de
   keuzevragen; de poortknop "Iets anders" klapt de niveau-2-opties uit. --- */
.antwoord-lijst__niveau2 { display: flex; flex-direction: column; gap: 10px; }
.antwoord-lijst__niveau2[hidden] { display: none; }
/* Meerkeuze als tegels (het afgiftesysteem, 06-09-2026): de lijst is dan een raster, dus
   de poortknop "Iets anders" en de niveau-2-lijst spannen de volle breedte, en de
   niveau-2-lijst is zelf hetzelfde raster (twee kolommen; de 768px-regels verderop zetten
   drie, of twee bij --twee-kolommen). Het vinkje in het vakje houdt zijn 17px: de
   tegelregel zet 1.5rem voor het losse vinkje van een enkelkeuzetegel. */
.antwoord-lijst--tegels > .antwoord-anders,
.antwoord-lijst--tegels > .antwoord-lijst__niveau2 { grid-column: 1 / -1; }
.antwoord-lijst--tegels .antwoord-lijst__niveau2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.antwoord-lijst--tegels .antwoord-lijst__niveau2[hidden] { display: none; }
.antwoord-lijst--meerkeuze .antwoord-knop--tegel .antwoord-knop__vink { font-size: 17px; }
/* "Iets anders": de uitweg onder een antwoordlijst (design system, patch antwoord-anders,
   04-09-2026; verving .antwoord-poort). Hoort bij de lijst maar telt er niet in mee:
   gestippelde rand en oranje tekst in plaats van de witte kaart met volle rand van een echt
   antwoord. Hij kiest niets maar klapt open. Altijd de laatste rij, hoogstens één per lijst.
   De opties die hij openklapt (.antwoord-lijst__niveau2) blijven gewone antwoordkaarten in
   de lijst; .antwoord-anders__inhoud is er voor een veld of vervolgvraag ín het kader. */
.antwoord-anders {
  border: 2px dashed color-mix(in srgb, var(--kleur-steun) 45%, var(--kleur-wit));
  border-radius: var(--radius);
  background: var(--kleur-wit);
}
.antwoord-anders__knop {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 14px 16px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--kleur-steun);
  text-wrap: pretty;
}
.antwoord-anders__knop:hover,
.antwoord-anders__knop:focus-visible { color: var(--kleur-donkerblauw); }
.antwoord-anders__knop > i { font-size: 20px; flex-shrink: 0; }
.antwoord-anders__knop > span { flex: 1 1 auto; min-width: 0; }
.antwoord-anders__pijl { font-size: 18px; transition: transform .15s; }
.antwoord-anders__knop[aria-expanded="true"] .antwoord-anders__pijl { transform: rotate(180deg); }
/* 48px links: wat eronder komt lijnt uit met het label, niet met het plusje. */
.antwoord-anders__inhoud { padding: 0 16px 16px 48px; }

/* --- Icoon-tegels (keuzevragen met eigen iconen): grote, gelijke vierkanten --- */
.antwoord-lijst--tegels {
  display: grid;
  /* minmax(0, 1fr): anders rekt een onbreekbaar woord ("(ventilatiebox)")
     de kolom op tot voorbij de schermrand op mobiel. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 560px;
}
/* De tegel als indrukbare knop (design system, patch icoontegel-knop, 07-09-2026): hij
   stond wit op een witte vraagkaart met alleen een rand en kreeg pas bij keuze een
   schaduw, zonder indruk- of focusstand, terwijl op mobiel hover niet bestaat en dat de
   enige terugkoppeling zou zijn. Nu: zachte schaduw in rust (los vlak boven de kaart),
   indrukeffect 2px omlaag met de schaduw eraf, hover naar de primaire rand met de volle
   schaduw, radius 12. De focusring van 3px komt van de algemene
   .antwoord-knop:has(.antwoord-knop__radio:focus-visible)-regel hierboven. */
.antwoord-knop--tegel {
  min-width: 0;
  overflow-wrap: break-word;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 8px;
  min-height: 0;
  padding: 16px 12px 14px;
  border-radius: 12px;
  box-shadow: var(--schaduw-zacht);
  transition: border-color var(--overgang-snel), box-shadow var(--overgang-snel), transform .1s;
}
.antwoord-knop--tegel:hover {
  border-color: var(--kleur-primair);
  box-shadow: var(--schaduw);
}
.antwoord-knop--tegel:active {
  transform: translateY(2px);
  box-shadow: none;
}
/* Gekozen: geen kleurverschil, want zodra de bewoner een tegel indrukt komt de volgende
   vraag; een gekozen stand is er alleen voor wie terugloopt. Die markeren de groene rand
   (3px, een pixel dikker, met een pixel minder padding zodat de inhoud niet verschuift) en
   het vinkje; het vlak blijft wit. Overschrijft het crèmevlak van de algemene regel. */
.antwoord-knop--tegel:has(.antwoord-knop__radio:checked) {
  background: var(--kleur-wit);
  border-width: 3px;
  padding: 15px 11px 13px;
  border-color: var(--kleur-primair);
  box-shadow: var(--schaduw);
}
/* Keuzeflits (BugHerd #236, besluit Stijn 07-09-2026): bij het tikken houdt de gekozen
   knop 300 ms een groene rand met een lichtgroene tint vast en wacht het automatische
   doorbladeren daarop (gaAutomatischDoor in check.php), zodat de keuze zichtbaar "pakt"
   voordat de volgende vraag komt. Bewuste afwijking van de design-system-patch
   icoontegel-knop (gekozen stand zonder kleurverschil): dit is een momentopname bij het
   tikken, geen blijvende stand. Onder prefers-reduced-motion flitst er niets en blijft
   het oude tempo (180 ms) gelden; dat regelt de JS met dezelfde media query. */
.antwoord-knop.is-flits { animation: keuze-flits .3s ease-out; }
@keyframes keuze-flits {
  from, to {
    border-color: var(--kleur-primair);
    background-color: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
    box-shadow: var(--schaduw);
  }
}
.antwoord-knop--tegel .antwoord-knop__tekst { align-items: center; gap: 0; }
/* Vangnet (BugHerd #67): een lang woord zonder zacht afbreekstreepje (zie
   vragenlijst_afbreekbaar()) mag nooit buiten de tegel steken. */
.antwoord-knop--tegel .antwoord-knop__label, .antwoord-knop--tegel .antwoord-knop__uitleg { overflow-wrap: anywhere; }
/* Icoonvak: 96×77 op elke breedte (was 72×58, vanaf 768px 84×66). Een derde groter, niet
   twee keer zo groot: dat bleek te dominant. Het label blijft op 1rem, icoon en tekst
   helpen samen door de vraag. */
.antwoord-knop__icoon {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-width: 96px;
  height: auto;
}
.antwoord-knop--tegel .antwoord-knop__vink {
  right: 10px;
  top: 10px;
  transform: none;
  font-size: 1.85rem;                /* design system (patch antwoordknop-tegelvink): een tegel is het grotere element, het vinkje in de hoek moet van een afstand te zien zijn; 1,5rem bleek nog te klein */
}

/* Eigen vraag-iconen: flat lijntekening, donkerblauw met één accentkleur. Gedeeld door
   alle icoonsets op het 48×44-raster. Zie includes/vraag_iconen.php en het design system
   (components/iconen/VraagIcoon.jsx, patch vraag-iconen, overgenomen 07-09-2026).
   De lijnstijl staat op de svg zelf en erft naar alle vormen; zo kan een subgroep
   (<g class="wt-dun">, <g stroke-linecap="butt">) ervan afwijken en erven haar kinderen
   dát weer. Een regel op path/circle zelf zou die groepswaarden overschrijven. */
.vraag-icoon {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--kleur-donkerblauw);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Gevuld accent (vlam, bliksem, kompasnaald-helft, dekvloer). Was --kleur-secundair; dat
   is bosgroen geworden, waardoor de gasvlam als een blad las. */
.vraag-icoon .wt-accent {
  fill: var(--kleur-steun);
  stroke: var(--kleur-steun);
}
/* Accent als open lijn (luchtstroom-pijlen, coating, wandunit, spouwankers). */
.vraag-icoon .wt-lijn-accent {
  fill: none;
  stroke: var(--kleur-steun);
}
/* Isolatieband: de randlijnen van een isolatielaag. Dunner dan de figuurlijnen, anders
   loopt een laag van 4 eenheden dicht. */
.vraag-icoon .wt-band {
  fill: none;
  stroke: var(--kleur-steun);
  stroke-width: 1.2;
}
/* Losse isolatiekorrels (vloer, dak, gevel, deur) en waterdruppels: meer materiaal is
   meer puntjes, dichter op elkaar. */
.vraag-icoon .wt-stip {
  fill: var(--kleur-steun);
  stroke: none;
}
/* Witte vulling, zodat vormen elkaar kunnen afdekken: de poppetjes van de bewoners-set
   overlappen elkaar en dat werkt alleen met een dekkend vlak. */
.vraag-icoon .wt-vlak { fill: var(--kleur-wit); }
/* Rood "ontbreekt"-teken bij de 'geen isolatie'-antwoorden. Loopt mee op de volle
   lijndikte: het kruis is het antwoord, geen bijzaak. */
.vraag-icoon .wt-lijn-fout {
  fill: none;
  stroke: var(--kleur-fout);
}
/* Detail dat op tegelgrootte dicht zou lopen: raampjes, stoel, zon, de N op het kompas.
   Subordinaat door lijndikte, niet door dekking. */
.vraag-icoon .wt-dun { stroke-width: 1.4; }
/* Haarlijn voor de glasplaten: glas is dun, en op de gewone lijndikte las een plaat als
   een balk. */
.vraag-icoon .wt-haar { stroke-width: 1; }
/* Poppetjes van de bewoners-set. */
.vraag-icoon .wt-mid { stroke-width: 2; }
/* Het vraagteken van de tegel "Weet ik niet": een echte letter in Sora, geen lijnwerk. */
.vraag-icoon .wt-tekst {
  font: 700 21px/1 var(--font-basis);
  fill: var(--kleur-donkerblauw);
  stroke: none;
}
/* Ondergeschikte context (muuraanzetten, grondlijn, arcering onder de vloer, de twee
   algemene tegels). Was .32: dat is circa 1,5:1 op crème en dus niet te zien. */
.vraag-icoon .wt-faded { opacity: .55; }

/* Huisiconen op het 256-raster met currentColor (zie includes/vraag_iconen.php). De
   viewBox staat voor alle huissets in de verhouding 48:44 en de lijndikte schaalt mee,
   zodat de lijn even zwaar oogt als in de sets hierboven; beide staan in de SVG zelf, net
   als de detaildikte van de subgroepen en de flauwe buren (stroke-opacity). Alleen de
   accentkleur (ventilatie, kierdichting, zonnepanelen, verwarmde zone) en de flauwe stand
   komen hiervandaan. */
.merk-vraag-icoon { display: block; width: 100%; height: 100%; color: var(--kleur-donkerblauw); }
.merk-vraag-icoon .wt-lijn-accent {
  fill: none;
  stroke: var(--kleur-steun);
}
.merk-vraag-icoon .wt-accent {
  fill: var(--kleur-steun);
  stroke: var(--kleur-steun);
}
.merk-vraag-icoon .wt-faded { opacity: .55; }

@media (min-width: 768px) {
  .antwoord-lijst--tegels,
  .antwoord-lijst--tegels .antwoord-lijst__niveau2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Twee of vier opties houden twee kolommen: bij twee zou de derde kolom leeg
     blijven (tegels links van het midden onder een gecentreerde vraagkop), bij
     vier zou de laatste tegel als wees op een eigen regel belanden. */
  .antwoord-lijst--twee-kolommen,
  .antwoord-lijst--twee-kolommen .antwoord-lijst__niveau2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Gebouwschema (locatievraag meergezinswoningen) --- */
.gebouwschema {
  max-width: 400px;
  margin: 0 auto;
}
/* Wrapper: grid met 2 kolommen — building (1fr) en labels (120px).
   Hoogbouw-variant heeft de kop als extra rij boven het gebouw.
   Zo heeft de kop exact dezelfde breedte als het gebouw: geen margin-math nodig. */
.gebouwschema__gebouw-wrap {
  display: grid;
  grid-template-columns: 1fr 120px;
}
/* Hoogbouw: kop in rij 1 (auto), gebouw en labels in rij 2 */
.gebouwschema__gebouw-wrap--hoogbouw .gebouwschema__gebouw {
  grid-column: 1;
  grid-row: 2;
}
.gebouwschema__gebouw-wrap--hoogbouw .gebouwschema__labels-kolom {
  grid-column: 2;
  grid-row: 2;
}
.gebouwschema__kop {
  grid-column: 1; /* zelfde kolom als het gebouw → identieke breedte, geen berekening */
  min-width: 0;  /* voorkom dat koptekst de 1fr-kolom oprekt (CSS Grid min-content) */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;                      /* zelfde gap als .gebouwschema__verdieping */
  border: 2px solid transparent; /* zelfde breedte als gebouwrand → kolommen boven cellen */
  padding-left: 3px;             /* zelfde als verdieping-padding */
  padding-right: 3px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
}
.gebouwschema__gebouw {
  border: 2px solid var(--kleur-donkerblauw);
  border-radius: 6px;
  overflow: hidden; /* dak-/grondbalk stoppen netjes bij de gebouwrand */
}
.gebouwschema__dak-balk {
  background: var(--kleur-donkerblauw);
  height: 8px;
  border-radius: 4px 4px 0 0;
}
.gebouwschema__grond-balk {
  background: var(--kleur-donkerblauw);
  height: 5px;
  border-radius: 0 0 4px 4px;
}
.gebouwschema__verdieping {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* labels staan nu buiten het gebouw */
  gap: 3px;
  padding: 3px;
  background: color-mix(in srgb, var(--kleur-donkerblauw) 6%, var(--kleur-wit));
  border-bottom: 1px solid color-mix(in srgb, var(--kleur-donkerblauw) 12%, var(--kleur-wit));
}
.gebouwschema__verdieping:last-child { border-bottom: none; }
.gebouwschema__cel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  background: var(--kleur-wit);
  border: 2px solid var(--kleur-lichtgrijs);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.gebouwschema__cel--hoek-l { border-left-width: 4px; }
.gebouwschema__cel--hoek-r { border-right-width: 4px; }
.gebouwschema__cel:hover { border-color: var(--kleur-primair); }
/* Tussenwoning: cel bevat de radio, :has werkt direct */
.gebouwschema__cel--tussen:has(input:checked) {
  background: var(--kleur-primair);
  border-color: var(--kleur-primair);
}
/* Hoekwoning: radio zit alleen in de linker cel; parent detecteert en kleurt beide */
.gebouwschema__verdieping:has(.gebouwschema__cel--hoek-l input:checked) .gebouwschema__cel--hoek {
  background: var(--kleur-primair);
  border-color: var(--kleur-primair);
}
.gebouwschema__cel input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Ramengroepje */
.gebouwschema__ramen {
  display: flex;
  gap: 5px;
}
.gebouwschema__raam {
  width: 14px;
  height: 14px;
  border: 2px solid var(--kleur-lichtgrijs);
  border-radius: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.gebouwschema__cel:hover .gebouwschema__raam {
  border-color: var(--kleur-primair);
}
.gebouwschema__cel--tussen:has(input:checked) .gebouwschema__raam,
.gebouwschema__verdieping:has(.gebouwschema__cel--hoek-l input:checked) .gebouwschema__cel--hoek .gebouwschema__raam {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.25);
}
/* Vinkje */
.gebouwschema__vink {
  font-size: 1rem;
  color: var(--kleur-wit);
  opacity: 0;
  transition: opacity 0.15s;
}
.gebouwschema__cel--tussen:has(input:checked) .gebouwschema__vink,
.gebouwschema__verdieping:has(.gebouwschema__cel--hoek-l input:checked) .gebouwschema__cel--hoek .gebouwschema__vink { opacity: 1; }
/* Focus zichtbaar voor toetsenbord */
.gebouwschema__cel:has(input:focus-visible) {
  outline: 3px solid var(--kleur-primair);
  outline-offset: 2px;
}
/* Labels-kolom: staat naast het gebouw, erbuiten. Hoogte volgt die van het gebouw. */
.gebouwschema__labels-kolom {
  display: flex;
  flex-direction: column;
  width: 120px;
  min-width: 120px;
  /* Compenseer voor gebouwrand (2px) + dakbalk (8px) bovenaan en
     gebouwrand (2px) + grondbalk (5px) onderaan zodat labels uitlijnen met verdiepingen */
  padding-top: 10px;
  padding-bottom: 7px;
}
.gebouwschema__rij-label {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--kleur-lichtgrijs);
}
/* Laagbouw-sectie */
.gebouwschema__laagbouw-vraag {
  margin: 16px 0 6px;
  font-size: 0.85rem;
  color: var(--kleur-donkerblauw);
  text-align: center;
}

/* --- Getalveld --- */
.getal-veld { max-width: 320px; margin: 0 auto; }
.getal-veld__rij { display: flex; align-items: center; gap: 10px; }
.getal-veld input {
  flex: 1;
  min-height: 52px;
  font-size: 1.1rem;
  font-family: var(--font-basis);
  text-align: center;
  color: var(--kleur-donkerblauw);
  background: var(--kleur-wit);
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.getal-veld input:focus {
  border-color: var(--kleur-secundair);
  outline: none;
}
.getal-veld input.is-ongeldig { border-color: var(--kleur-fout); background: rgba(198, 40, 40, .06); }
.getal-veld__unit { font-weight: 600; color: var(--kleur-donkerblauw); }
/* "Ik weet het niet" onder een optionele getalvraag (BugHerd #240): tekstknop in de
   steunkleur, zoals de secundaire links; 48px raakvlak. */
.getal-veld__weetniet {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin-top: 8px;
  padding: 8px 4px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--kleur-steun); text-decoration: underline;
}
.getal-veld__weetniet:hover, .getal-veld__weetniet:focus-visible { color: var(--kleur-donkerblauw); }
.stap-fout {
  display: block;
  color: var(--kleur-fout);
  font-size: .85rem;
  font-weight: 600;
  margin-top: 8px;
  text-align: center;
}

/* --- Adresstap (BAG-koppeling) --- */
.adres-veld { max-width: 460px; margin: 0 auto; }
.adres-veld__rij { display: flex; flex-direction: column; gap: 14px; }
.adres-veld__veld { display: flex; flex-direction: column; gap: 6px; }
.adres-veld__veld label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
}
.adres-veld__veld input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  font-size: 1.1rem;
  font-family: var(--font-basis);
  color: var(--kleur-donkerblauw);
  background: var(--kleur-wit);
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.adres-veld__veld input:focus { border-color: var(--kleur-secundair); outline: none; }

/* Bevestigingskaart "Wat we van jouw woning weten" (ontwerp:
   mockups/archief/bag-bevestiging-mockup.html): adreskop, kaart + tegels naast elkaar,
   bouwjaar/woonoppervlak inline aanpasbaar, en de extra BAG/3DBAG-feiten. */
.adres-bevestiging {
  scroll-margin-top: 96px;   /* BugHerd #46: blijft onder de plakkende navigatie bij scrollIntoView */
  margin-top: 20px;
  padding: 18px;
  background: var(--kleur-lichtblauw);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  text-align: left;
}
.adres-bevestiging__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--kleur-steun);
}
.adres-bevestiging__eyebrow i { color: var(--kleur-groen); font-size: 1.3rem; }
.adres-bevestiging__adres {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  white-space: pre-line;
}
.adres-bevestiging__sub {
  margin: 2px 0 0;
  font-size: .82rem;
  color: var(--kleur-donkerblauw);
  opacity: .65;
}
.adres-bevestiging__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
/* Zonder kaart (geen pand-contour) nemen de tegels de volle breedte. */
.adres-bevestiging__grid:has(.adres-kaart[hidden]) { grid-template-columns: 1fr; }
.adres-tegels { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.adres-tegels__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adres-tegel {
  background: var(--kleur-wit);
  border: 1px solid color-mix(in srgb, var(--rand) 45%, var(--kleur-wit));
  border-radius: var(--radius);
  padding: 10px 12px;
  position: relative;
  min-width: 0;
}
.adres-tegel__label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--kleur-donkerblauw);
  opacity: .6;
  /* Ruimte voor het potloodje (24px breed, 4px van de rand); lange labels
     ("Woonoppervlak") breken op het zachte koppelteken i.p.v. eronderdoor te lopen. */
  padding-right: 36px;
  overflow-wrap: anywhere;
  hyphens: manual;
}
.adres-tegel__waarde {
  margin-top: 2px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
}
.adres-tegel--label .adres-tegel__waarde { font-size: 1rem; }
.adres-tegel__waarde--geen {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--kleur-steun);
}
.adres-tegel__bron {
  font-size: .72rem;
  color: var(--kleur-donkerblauw);
  opacity: .55;
  margin-top: 2px;
}
/* Potloodje: bouwjaar/woonoppervlak aanpasbaar — vindbaar, niet prominent. */
.adres-tegel__wijzig {
  position: absolute;
  top: 4px;
  right: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kleur-lichtgrijs);
  font-size: 1rem;
  padding: 4px;
  border-radius: 6px;
  line-height: 1;
}
.adres-tegel__wijzig:hover,
.adres-tegel__wijzig:focus-visible { color: var(--kleur-primair); background: var(--kleur-lichtblauw); }
.adres-tegel__edit { display: none; margin-top: 4px; gap: 8px; flex-direction: column; align-items: stretch; }
.adres-tegel.is-edit .adres-tegel__edit { display: flex; }
.adres-tegel.is-edit .adres-tegel__waarde,
.adres-tegel.is-edit .adres-tegel__bron { display: none; }
.adres-tegel__edit input {
  width: 100%;
  min-width: 0;
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 700;
  padding: 6px 8px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--kleur-wit);
  color: var(--kleur-donkerblauw);
}
.adres-tegel__edit input.is-ongeldig { border-color: var(--kleur-fout); }
.adres-tegel__edit button {
  font-family: var(--font-basis);
  font-size: .8rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  padding: 8px 12px;
  cursor: pointer;
}
.adres-tegel__edit button:hover { background: var(--kleur-primair-hover); }
/* "Wat we nog meer zien": kleine BAG/3DBAG-feiten. */
.adres-meerweten { margin-top: 14px; }
.adres-meerweten__kop {
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--kleur-primair);
}
.adres-meerweten__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.adres-feit {
  background: var(--kleur-wit);
  border: 1px solid color-mix(in srgb, var(--rand) 45%, var(--kleur-wit));
  border-radius: var(--radius);
  padding: 8px 10px;
}
.adres-feit__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--kleur-donkerblauw);
  opacity: .55;
}
.adres-feit__label i { color: var(--kleur-primair); font-size: .85rem; opacity: 1; }
.adres-feit__waarde { font-weight: 700; font-size: .92rem; margin-top: 2px; color: var(--kleur-donkerblauw); }
.adres-meerweten__noot {
  margin: 8px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--kleur-donkerblauw);
  opacity: .6;
  max-width: 65ch;
}
/* Energielabel-badge — officiële EP-online kleurschaal. Dit is een externe
   standaard (groen A .. rood G) en valt bewust buiten het huisstijl-palet.
   Tekstkleur per achtergrond gekozen op leesbaarheid (WCAG-contrast). */
.energielabel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kleur-wit);
}
.energielabel-badge--a5 { background: #00441b; color: var(--kleur-wit); }
.energielabel-badge--a4 { background: #006d2c; color: var(--kleur-wit); }
.energielabel-badge--a3 { background: #238b45; color: var(--kleur-wit); }
.energielabel-badge--a2 { background: #41ab5d; color: var(--kleur-wit); }
.energielabel-badge--a1 { background: #74c476; color: var(--kleur-donkerblauw); }
.energielabel-badge--a  { background: #a1d99b; color: var(--kleur-donkerblauw); }
.energielabel-badge--b  { background: #c7e9c0; color: var(--kleur-donkerblauw); }
.energielabel-badge--c  { background: #fee08b; color: var(--kleur-donkerblauw); }
.energielabel-badge--d  { background: #fdae61; color: var(--kleur-donkerblauw); }
.energielabel-badge--e  { background: #f46d43; color: var(--kleur-wit); }
.energielabel-badge--f  { background: #d73027; color: var(--kleur-wit); }
.energielabel-badge--g  { background: #7f0000; color: var(--kleur-wit); }

.adres-kaart {
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rand) 45%, var(--kleur-wit));
  /* Eigen stacking-context (z-index < header z-index 100), zodat Leaflets interne
     hoge z-indexen (panes/controls tot ~1000) niet boven de sticky header schuiven. */
  position: relative;
  z-index: 0;
}
.adres-bevestiging__correctie {
  margin: 12px 0 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--kleur-donkerblauw);
  opacity: .75;
}

.adres-handmatig { text-align: center; margin: 14px 0 0; }
.adres-handmatig__link {
  background: transparent;
  border: none;
  color: var(--kleur-steun);
  font-family: var(--font-basis);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px;
}
.adres-handmatig__link:hover { color: var(--kleur-donkerblauw); }

/* Adresstap-nav: één actieknop op volle breedte (geen 'vorige', dit is altijd stap 1). */
.vraag-stap--adres .vraag-stap__nav { display: block; margin-top: 20px; }
.vraag-stap--adres .vraag-stap__nav .btn-terug { display: none; }
.vraag-stap--adres .btn-volgende {
  width: 100%;
  margin-left: 0;
  justify-content: center;
  /* Geen white-space:nowrap: op smalle/lage-resolutie schermen moet de tekst binnen
     de volle-breedte knop kunnen afbreken i.p.v. buiten de kaart te lopen. */
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .adres-veld__rij { flex-direction: row; }
  /* flex-grow-verhouding i.p.v. vaste basis: 60%+40% + gap zou de box overschrijden.
     min-width:0 laat de velden krimpen binnen de rij. */
  .adres-veld__veld { min-width: 0; }
  .adres-veld__veld:first-child { flex: 3; }
  .adres-veld__veld:last-child  { flex: 2; }
  /* Kaart links, tegels rechts; de kaart rekt mee met de tegelkolom. */
  .adres-bevestiging__grid { grid-template-columns: 5fr 6fr; align-items: stretch; }
  .adres-kaart { height: 100%; min-height: 250px; }
  .adres-meerweten__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Navigatieknoppen --- */
.vraag-stap__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.btn-terug {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 18px;
  background: transparent;
  border: none;
  color: var(--kleur-donkerblauw);
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-terug:hover { color: var(--kleur-secundair); }
.btn-volgende {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}
.btn-volgende:hover { background: var(--kleur-primair-hover); }
.vraag-stap__nav .btn-afronden { margin-left: auto; width: auto; }

/* Paneelvlakken aanklikken op de luchtfoto (stap na 'zonnepanelen' = Ja) */
.paneelvlakken { max-width: 480px; margin: 0 auto; }
.paneelvlakken__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--kleur-vlak-zacht);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none; /* alle gebaren (tik, sleep, pinch) zelf afhandelen */
}
.paneelvlakken__zoomlaag {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.paneelvlakken__zoomlaag img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
}
.paneelvlakken__zoomlaag svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.paneelvlakken__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.paneelvlakken__zoom button {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: var(--radius);
  color: var(--kleur-donkerblauw);
  font-size: 18px;
  cursor: pointer;
}
.paneelvlakken__zoom button:hover { border-color: var(--kleur-primair); color: var(--kleur-primair); }
.paneelvlakken__loep {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--kleur-wit);
  box-shadow: 0 2px 12px rgba(36, 34, 30, .35);
  background: #000;
  pointer-events: none;
  z-index: 3;
}
.paneelvlakken__loep img { position: absolute; max-width: none; }
.paneelvlakken__loep::before,
.paneelvlakken__loep::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, .9);
  z-index: 1;
}
.paneelvlakken__loep::before { left: 50%; top: 38px; width: 1.5px; height: 34px; transform: translateX(-50%); }
.paneelvlakken__loep::after  { top: 50%; left: 38px; height: 1.5px; width: 34px; transform: translateY(-50%); }
.paneelvlakken__aantal { margin-top: 16px; }
.paneelvlakken__aantal label {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
  margin-bottom: 6px;
}
.paneelvlakken__aantal-rij { display: flex; align-items: center; gap: 12px; }
.paneelvlakken__aantal input {
  width: 110px;
  min-height: 48px;
  padding: 10px 14px;
  font-family: var(--font-basis);
  font-size: 1rem;
  color: var(--kleur-donkerblauw);
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: var(--radius);
}
.paneelvlakken__aantal input:disabled { background: var(--kleur-vlak-zacht); opacity: .6; }
.paneelvlakken__aantal-hint {
  font-size: .85rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--kleur-donkerblauw) 70%, var(--kleur-wit));
}
/* Mobiel: frame door de kaart-padding heen laten lopen (.vraag-stap heeft
   18px zijpadding onder 480px) voor merkbaar meer klikruimte. Bewust geen
   vw-eenheden: die gedragen zich onvoorspelbaar in dit geneste layout. */
@media (max-width: 480px) {
  .paneelvlakken { max-width: none; }
  .paneelvlakken__frame {
    width: calc(100% + 36px);
    margin-left: -18px;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}
.paneelvlakken__frame svg polygon {
  fill: color-mix(in srgb, var(--kleur-accent) 45%, transparent);
  stroke: var(--kleur-wit);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.paneelvlakken__frame svg polyline {
  fill: none;
  stroke: var(--kleur-wit);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 4;
}
.paneelvlakken__frame svg circle {
  fill: var(--kleur-primair);
  stroke: var(--kleur-wit);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.paneelvlakken__status {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
  background: rgba(255, 255, 255, .92);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .85rem;
  color: var(--kleur-donkerblauw);
}
.paneelvlakken__knoppen { display: flex; gap: 8px; margin-top: 8px; }
.paneelvlakken__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: var(--radius);
  color: var(--kleur-donkerblauw);
  font-family: var(--font-basis);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.paneelvlakken__knop:hover:not(:disabled) { border-color: var(--kleur-primair); color: var(--kleur-primair); }
.paneelvlakken__knop:disabled { opacity: .45; cursor: default; }
.paneelvlakken__bron {
  margin: 12px 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--kleur-donkerblauw) 70%, var(--kleur-wit));
}
/* Wijzig-één-vraag modus (vanaf de resultatenpagina): geen vorige/volgende, en een
   compactere "Bewaar en bekijk resultaat"-knop. Touch-target blijft 48px (WCAG). */
.wizard-form[data-bewerk="1"] .vraag-stap__nav .btn-afronden {
  padding: 12px 22px;
  font-size: .95rem;
}

/* --- 2a) Isolatie-indicatie --- */
.indicatie-blok {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-left: 6px solid var(--kleur-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw);
  padding: 22px 20px;
  margin-bottom: 28px;
}
.indicatie-blok--zeer-laag, .indicatie-blok--laag { border-left-color: var(--kleur-groen); }
.indicatie-blok--midden { border-left-color: var(--kleur-accent); }
.indicatie-blok--hoog, .indicatie-blok--zeer-hoog { border-left-color: var(--kleur-primair); }
.indicatie-blok__item { display: flex; flex-direction: column; gap: 2px; }
.indicatie-blok__label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--kleur-secundair);
}
.indicatie-blok__waarde {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
}
.indicatie-blok__sub { font-size: .85rem; color: var(--kleur-donkerblauw); opacity: .8; }

/* --- Dashboard: isolatieniveau-/warmtevraag-meters (balk + norm-markering) --- */
.indicatie-meters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.indicatie-meter {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw);
  padding: 18px 20px;
}
.indicatie-meter__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--kleur-secundair);
}
.indicatie-meter__waarde {
  margin-top: 6px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
}
.indicatie-meter__waarde span { font-size: .95rem; font-weight: 400; color: var(--kleur-donkerblauw); opacity: .7; }
.indicatie-meter__toelichting {
  margin: 6px 0 0;
  font-size: .8rem;
  color: var(--kleur-donkerblauw);
  opacity: .7;
}
.indicatie-meter__toelichting span { font-weight: 600; }
.indicatie-meter__balk {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(154, 144, 133, .30);
  margin-top: 18px;
}
.indicatie-meter__balk i { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; }
.indicatie-meter__norm {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 3px;
  background: var(--kleur-donkerblauw);
  border-radius: 2px;
}
.indicatie-meter__norm::after {
  content: "norm";
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .62rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .indicatie-meters { grid-template-columns: 1fr 1fr; }
}

/* --- Dashboard: uitleg-band + tabbladen (isolatie / warmtetechnieken) --- */
/* Eén visueel geheel: een gekleurde band met uitleg, daaronder de tabbalk waarvan het
   actieve tab "omhoog popt" naar het witte paneel. De situatie-accentkleur (amber als de
   norm niet gehaald is, groen als wel) wordt via custom properties op .dashboard-flow gezet. */
.dashboard-flow {
  --accent: var(--kleur-steun);
  --accent-zacht: var(--kleur-waarschuwing);
  --accent-tekst: var(--kleur-waarschuwing-tekst);
  box-shadow: var(--schaduw);
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
}
.dashboard-flow--technieken {
  --accent: var(--kleur-groen);
  --accent-zacht: rgba(27, 110, 60, .10);
  --accent-tekst: var(--kleur-groen);
}
.dashboard-band {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--accent-zacht);
  color: var(--accent-tekst);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px;
}
.dashboard-band__icoon { font-size: 26px; flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.dashboard-band__titel { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.dashboard-band__tekst { margin: 0; font-size: .92rem; line-height: 1.5; max-width: 65ch; }
.dashboard-band__wijst {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 12px; font-size: 1.1rem; font-weight: 700; color: var(--accent);
}
/* Randvoorwaarden voor een warmtepomp (sheet 3.11, isoleren F11: netaansluiting,
   afgiftesysteem, elektrisch koken) — losse regels onder de bandtekst. */
.dashboard-band__randvoorwaarden {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; max-width: 65ch;
}
.dashboard-band__randvoorwaarden li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 1rem; line-height: 1.5;
}
.dashboard-band__randvoorwaarden i { flex: 0 0 auto; font-size: 1.25rem; color: var(--accent); margin-top: 2px; }
.dashboard-band__randvoorwaarden strong { display: block; font-weight: 600; }
/* Geanimeerde wegwijspijl: één chevron die rustig op-en-neer (omlaag) beweegt.
   Volgt de band-accentkleur (--accent) en schaalt mee met de tekst (em). */
.pijl-omlaag {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5em; width: 1em; height: 1em; vertical-align: middle;
}
.pijl-omlaag span {
  width: 0.7em; height: 0.7em;
  border-right: 0.16em solid var(--accent);
  border-bottom: 0.16em solid var(--accent);
  transform: rotate(45deg);
  animation: pijl-omlaag-anim 1.5s ease-in-out infinite;
}
@keyframes pijl-omlaag-anim {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(0.16em, 0.16em); }
}
@media (prefers-reduced-motion: reduce) {
  .pijl-omlaag span { animation: none; }
}

/* Tabbalk: zit op de band; tabs hebben afgeronde bovenhoeken en het actieve tab krijgt de
   witte paneelkleur zodat het visueel doorloopt in het paneel eronder. */
.dashboard-tabs { display: flex; gap: 6px; padding: 34px 12px 0; background: var(--accent-zacht); }
/* Wegwijspijl: op een eigen regel, gecentreerd bóven het aanbevolen tabblad. */
.dashboard-tab__pijl { display: none; }
.dashboard-tab.aanbevolen .dashboard-tab__pijl {
  display: inline-flex;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 15px);   /* midden tussen band-tekst en de tab */
  transform: translateX(-50%);
  font-size: 1.6em;
  pointer-events: none;
}
.dashboard-tab {
  position: relative; top: 1px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-basis); font-size: .95rem; font-weight: 600;
  border: 0; cursor: pointer;
  padding: 13px 16px; min-height: 48px;
  background: rgba(36, 34, 30,.06); color: var(--kleur-donkerblauw);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Tablabels: kort op mobiel (past niet naast elkaar), volledig vanaf tablet. */
.dashboard-tab__kort { display: inline; }
.dashboard-tab__lang { display: none; }
@media (min-width: 768px) {
  .dashboard-tab__kort { display: none; }
  .dashboard-tab__lang { display: inline; }
}
.dashboard-tab:hover:not(.is-actief) { background: rgba(36, 34, 30,.12); }
.dashboard-tab.is-actief { background: var(--kleur-wit); color: var(--kleur-donkerblauw); }
.dashboard-tab__telt {
  font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 8px;
  background: rgba(36, 34, 30,.12); color: var(--kleur-donkerblauw);
}
.dashboard-tab.is-actief .dashboard-tab__telt { background: var(--accent); color: var(--kleur-wit); }
.dashboard-tab.aanbevolen::after {
  content: "Aanbevolen";
  position: absolute; top: -9px; right: 6px;
  font-size: .58rem; font-weight: 700; letter-spacing: .02em;
  background: var(--accent); color: var(--kleur-wit);
  padding: 2px 7px; border-radius: 999px;
}
.dashboard-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dashboard-panel {
  background: var(--kleur-wit);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 22px 20px;
}
.dashboard-panel[hidden] { display: none; }
.dashboard-panel__intro { margin: 0 0 18px; font-size: .95rem; line-height: 1.5; color: var(--kleur-donkerblauw); max-width: 65ch; }

/* Isolatiemaatregel-kaarten */
.maatregel-lijst { display: grid; grid-template-columns: 1fr; gap: 12px; }
.maatregel-kaart {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Geen gekleurde statusrand meer (design-system patch maatregel-kaart-rand-weg, 03-09-2026):
   naast elkaar werden de kaarten een stoplicht terwijl de badge hetzelfde al in woorden
   zegt. De status blijft in de achtergrondtint en de badge; de rand is de neutrale 1px uit
   .maatregel-kaart. De modifiers aanbevolen/overweeg hebben daarmee geen eigen opmaak meer. */
.maatregel-kaart--sterk { background: color-mix(in srgb, var(--kleur-fout) 6%, var(--kleur-wit)); }
.maatregel-kaart--niet { background: var(--kleur-vlak-zacht); }
/* Isoleren v10: status "Maximaal geïsoleerd" — recessief grijs (niets meer te doen). */
.maatregel-kaart--max { background: var(--kleur-vlak-zacht); }
.maatregel-kaart__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.maatregel-kaart__titel { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--kleur-donkerblauw); }
.maatregel-kaart__huidig {
  margin: 2px 0 0; font-size: .85rem; color: var(--kleur-donkerblauw); opacity: .7;
  min-height: 3.2em; /* reserveer 2 regels zodat het blauwe adviesblok altijd op gelijke hoogte begint */
}
.maatregel-badge {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
/* De drie urgentiebadges als één ladder in steunoranje (design system, patch
   badge-sterk-oranje, 04-09-2026): rood is de foutkleur en betekent stop, terwijl "sterk"
   juist de maatregel is om mee te beginnen. Wat oploopt is het beeldcontrast met de
   kaart: gevuld (schreeuwt) → tint 18% (spreekt) → tint 7% (fluistert). De tekst van
   `aanbevolen` is donkerder gemengd: puur steunoranje op de 18%-tint haalde 3,96:1 en
   zakte bij 11,5px bold door WCAG AA. */
.maatregel-badge--sterk { background: var(--kleur-steun); color: var(--kleur-wit); }
.maatregel-badge--aanbevolen { background: color-mix(in srgb, var(--kleur-steun) 18%, var(--kleur-wit)); color: color-mix(in srgb, var(--kleur-steun) 78%, var(--kleur-donkerblauw)); }
.maatregel-badge--overweeg { background: color-mix(in srgb, var(--kleur-steun) 7%, var(--kleur-wit)); color: color-mix(in srgb, var(--kleur-donkerblauw) 72%, var(--kleur-wit)); }
.maatregel-badge--niet { background: color-mix(in srgb, var(--kleur-groen) 12%, var(--kleur-wit)); color: var(--kleur-groen); }
.maatregel-badge--max { background: color-mix(in srgb, var(--kleur-lichtgrijs) 22%, var(--kleur-wit)); color: var(--kleur-donkerblauw); }
.maatregel-kaart__advies {
  margin: 0; font-size: .92rem; color: var(--kleur-donkerblauw);
  background: var(--kleur-lichtblauw); border-radius: var(--radius); padding: 10px 12px;
}
.maatregel-kaart__advies--rust { background: transparent; padding: 0; opacity: .8; }
/* Besparing | Terugverdientijd op rij 1, Kosten | Offerte op rij 2 */
.maatregel-kaart__raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
  align-items: end;   /* kosten en knop onderling op gelijke hoogte */
  margin-top: auto;   /* hele blok naar onderkant zodat het tussen kaarten uitlijnt */
}
.maatregel-cijfer { display: flex; flex-direction: column; }
.maatregel-kaart__raster .k { font-size: .75rem; color: var(--kleur-donkerblauw); opacity: .7; }
.maatregel-kaart__raster .v { font-size: .95rem; font-weight: 700; color: var(--kleur-donkerblauw); }
.maatregel-kaart__raster .v--groen { color: var(--kleur-groen); }
.maatregel-kaart__offerte {
  justify-self: end; align-self: end; /* rechtsonder in het raster */
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 16px; border-radius: var(--radius);
  background: var(--kleur-primair); color: var(--kleur-wit);
  font-size: .9rem; font-weight: 600; text-decoration: none;
}
.maatregel-kaart__offerte:hover, .maatregel-kaart__offerte:focus { background: var(--kleur-primair-hover); }
.maatregel-kaart--niet .maatregel-kaart__offerte { background: var(--kleur-wit); color: var(--kleur-primair); border: 2px solid var(--kleur-primair); }

@media (min-width: 768px) {
  .maatregel-lijst { grid-template-columns: 1fr 1fr; }
}

/* --- 2b) Techniekvergelijker --- */
.vergelijker-resultaat h2 {
  color: var(--kleur-donkerblauw);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.vergelijker-resultaat__intro {
  color: var(--kleur-donkerblauw);
  margin: 0 0 14px;
  line-height: 1.5;
}
.vergelijker-let-op {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--kleur-waarschuwing);
  color: var(--kleur-donkerblauw);
  font-size: .88rem;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--radius);
  margin: 0 0 20px;
}

.techniek-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.techniek-kaart {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw);
  overflow: hidden;
}
/* Via Woningwarmte: elke techniek die Woningwarmte aanbiedt (dus niet gas, niet
   uitgegrijsd) krijgt een lichtgroene tint, zodat in één oogopslag duidelijk is
   welke technieken via Woningwarmte lopen — inclusief de aanrader hieronder. */
.techniek-kaart:not(.techniek-kaart--gas):not(.techniek-kaart--uitgegrijsd) {
  background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
}
/* Aanrader ("Past het best bij jouw prioriteiten"): zelfde groene tegeltint als de
   andere Woningwarmte-technieken (hierboven); alleen een iets dikkere rand plus de
   amber badge blijven het onderscheidende accent. */
.techniek-kaart--top {
  border-color: var(--kleur-primair);
  border-width: 2px;
  overflow: visible;
  position: relative;
  margin-top: 14px;
}
.techniek-kaart__topbadge {
  position: absolute;
  top: -12px;
  left: 16px;
  z-index: 1;
  background: var(--kleur-accent);
  color: var(--kleur-donkerblauw);
  font-size: .78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 12px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.techniek-kaart__topbadge[hidden] { display: none; }
/* Maandlasten als bandbreedte: iets kleiner dan het oude losse bedrag (langere tekst). */
.maandlast-bedrag--band { font-size: 1.15rem; white-space: nowrap; }
/* Gas is de referentie (badges "Huidige situatie" + "Niet via Woningwarmte") maar
   wordt NIET gedempt/grijs: de tab technieken grijst gas niet uit en gas sorteert
   gewoon mee tussen de andere technieken op zijn eigen score (data-score), i.p.v.
   vast onderaan of in het gedempte "Niet via Woningwarmte"-blok te staan. Een lichte
   rode tint maakt wel in één oogopslag duidelijk dat dit geen Woningwarmte-aanbod is. */
.techniek-kaart--gas {
  border-color: color-mix(in srgb, var(--kleur-fout) 30%, var(--rand));
  background: color-mix(in srgb, var(--kleur-fout) 5%, var(--kleur-wit));
}
.techniek-badge--gas { background: color-mix(in srgb, var(--kleur-fout) 12%, var(--kleur-wit)); color: var(--kleur-fout); }
/* Uitgegrijsd: techniek wordt wel doorgerekend en getoond, maar Woningwarmte biedt
   hem niet aan. Gedempte weergave (grijze achtergrond, lagere verzadiging), maar tekst
   blijft leesbaar — de status wordt óók via de badge "Niet via Woningwarmte" gemeld,
   zodat we niet alleen op kleur leunen (WCAG). */
.techniek-kaart--uitgegrijsd { background: var(--kleur-vlak-zacht); }
/* Gedempte weergave van uitgegrijsde technieken — maar NIET de "Niet via Woningwarmte"-
   badge (die moet juist opvallen), dus grijzen we de kop-onderdelen los i.p.v. de hele kop. */
.techniek-kaart--uitgegrijsd .techniek-kaart__titel h3,
.techniek-kaart--uitgegrijsd .techniek-kaart__co2,
.techniek-kaart--uitgegrijsd .techniek-kaart__maandlast,
.techniek-kaart--uitgegrijsd .techniek-balans,
.techniek-kaart--uitgegrijsd .techniek-kaart__meer { filter: grayscale(1); opacity: .72; }
.techniek-kaart--uitgegrijsd .maandlast-bedrag { color: var(--kleur-donkerblauw); }

/* Kaartkop (altijd zichtbaar; niet meer klikbaar — uitklappen gebeurt via de
   "Meer informatie"-knop onderaan de kaart). */
.techniek-kaart__hoofd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 12px 16px;
}
/* min-width voorkomt dat deze kolom (titel + score-chip) op smalle schermen
   tot bijna niets wordt teruggeknepen als .techniek-kaart__maandlast zijn
   eigen breedte opeist — dan wrapt de prijs mee naar een eigen regel (zie
   .techniek-kaart__maandlast hieronder) in plaats van dat de score-tekst
   buiten haar kader valt en over de prijs/het gas-label heen overlapt. */
.techniek-kaart__titel { flex: 1 1 150px; min-width: 150px; }
.techniek-kaart__titel h3 {
  color: var(--kleur-donkerblauw);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  display: inline;
}
.techniek-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
.techniek-badge--ref { background: var(--kleur-donkerblauw); color: var(--kleur-wit); }
/* Externe techniek: Woningwarmte biedt deze niet aan (zie .techniek-kaart--uitgegrijsd). */
/* Amber (geel-oranje accent) zodat de "Niet via Woningwarmte"-melding duidelijk opvalt tegen
   de lichtgrijze, gedempte kaart, maar binnen de huisstijl blijft. Donkerblauwe tekst houdt
   het contrast ruim boven 4,5:1. Wordt bewust niet meegegrijsd. */
.techniek-badge--extern { background: var(--kleur-accent); color: var(--kleur-donkerblauw); border: none; }
.techniek-kaart__maandlast {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
  margin-left: auto; /* blijft rechts uitgelijnd, ook als deze naar een eigen regel wrapt */
}
.maandlast-bedrag { font-size: 1.35rem; font-weight: 700; color: var(--kleur-donkerblauw); line-height: 1.1; }
.maandlast-eenheid { font-size: .75rem; color: var(--kleur-donkerblauw); opacity: .75; }
.maandlast-verschil {
  margin-top: 5px;
  font-size: .78rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}
/* Goedkoper dan gas = groen; duurder dan gas = oranje. */
.maandlast-verschil.is-positief { background: var(--kleur-groen); color: var(--kleur-wit); }
.maandlast-verschil.is-negatief { background: var(--kleur-secundair); color: var(--kleur-wit); }

/* Chevron die meedraait bij openen */
.techniek-kaart__chevron {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--kleur-donkerblauw);
  opacity: .6;
  transition: transform .2s ease;
}
.techniek-kaart__meer[open] .techniek-kaart__chevron { transform: rotate(180deg); }

/* "Meer informatie"-knop: uitklapper onderaan de kaart (details/summary). Gecentreerd,
   met een meedraaiende chevron; opent het paneel eronder (opbouw, investering, later meer). */
.techniek-kaart__meer { border-top: 1px solid var(--kleur-lichtgrijs); }
.techniek-kaart__meer-knop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--kleur-secundair);
}
.techniek-kaart__meer-knop::-webkit-details-marker { display: none; }
.techniek-kaart__meer-knop:focus-visible { outline: 2px solid var(--kleur-secundair); outline-offset: -2px; }
.techniek-kaart__meer-knop .techniek-kaart__chevron { color: inherit; opacity: 1; font-size: 1.05rem; }
.techniek-kaart__meer[open] .techniek-kaart__meer-tekst { color: var(--kleur-donkerblauw); }

/* Uitklap-inhoud */
.techniek-kaart__uitklap { padding: 0 16px 16px; }
.maandlasten-opbouw {
  background: var(--kleur-lichtblauw);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.maandlasten-opbouw__kop {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--kleur-donkerblauw);
  opacity: .8;
}
.maandlasten-opbouw__lijst { margin: 0; }
.maandlasten-opbouw__lijst > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: .92rem;
  color: var(--kleur-donkerblauw);
}
.maandlasten-opbouw__lijst dt { margin: 0; }
.maandlasten-opbouw__lijst dd { margin: 0; font-weight: 600; white-space: nowrap; }
.maandlasten-opbouw__totaal {
  border-top: 1px solid var(--rand);
  margin-top: 4px;
  padding-top: 8px !important;
  font-weight: 700;
}
.maandlasten-opbouw__totaal dd { font-weight: 700; }

.techniek-kaart__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.techniek-kaart__details div { display: flex; flex-direction: column; gap: 2px; }
.techniek-kaart__details dt { font-size: .8rem; color: var(--kleur-donkerblauw); opacity: .75; }
.techniek-kaart__details dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
}

/* Voor- en nadelen per techniek: groene vink (voordeel) en rood-oranje kruis (nadeel),
   uit de huisstijl-iconenset (Phosphor). Altijd zichtbaar op de kaartvoorkant (onder de
   kop, boven de vergelijk-voet). Mobiel onder elkaar, vanaf tablet twee kolommen. */
.techniek-balans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
  padding: 12px 16px;
  border-top: 1px solid var(--kleur-lichtgrijs);
}
.techniek-balans__lijst { list-style: none; margin: 0; padding: 0; }
.techniek-balans__lijst li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--kleur-donkerblauw);
}
.techniek-balans__lijst i {
  flex-shrink: 0;
  font-size: 18px;
  margin-top: 1px;
}
.techniek-balans__lijst--voor i { color: var(--kleur-groen); }
.techniek-balans__lijst--nadeel i { color: var(--kleur-fout); }
@media (min-width: 768px) {
  .techniek-balans { grid-template-columns: 1fr 1fr; gap: 24px; }
}
/* CO2 direct in de kaart (onder de titel): subtiele tekst met blad-icoon, geen kleurvlak. */
.techniek-kaart__co2 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
  opacity: .8;
}
.techniek-kaart__co2 .ph { color: var(--kleur-groen); flex-shrink: 0; }
/* Subsidie: neutrale toelichting zonder kleurvlak. */
.investering-subsidie {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  font-weight: 400;
  color: var(--kleur-donkerblauw);
  opacity: .7;
}

/* --- Kaartvoet: knoprij (Offerte / Niet via Woningwarmte), "Meer informatie" + Vergelijk --- */
/* Knoprij met de hoofdactie per kaart. */
.techniek-kaart__knoprij {
  border-top: 1px solid var(--kleur-lichtgrijs);
  padding: 12px 16px;
  display: flex;
  align-items: center;
}
/* Offerte-knop rechts uitlijnen; het "Niet via Woningwarmte"-label blijft links staan. */
.techniek-kaart__offerte-btn { margin-left: auto; }
/* Offerte: primaire knop, alleen voor technieken die Woningwarmte aanbiedt (PVT/bodemlus). */
.techniek-kaart__offerte-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--radius);
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}
.techniek-kaart__offerte-btn:hover,
.techniek-kaart__offerte-btn:focus { background: var(--kleur-primair-hover); }
.techniek-kaart__offerte-btn .ph { font-size: 1.05rem; }
/* Niet via Woningwarmte: neutraal info-label (geen actie), zelfde knopvorm maar gedempt. */
.techniek-kaart__nietww {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--kleur-vlak-zacht);
  color: var(--kleur-donkerblauw);
  border: 1px solid var(--rand);
  font-size: .9rem;
  font-weight: 600;
}
.techniek-kaart__nietww .ph { font-size: 1.05rem; opacity: .7; }

/* "Meer informatie" (links) met de subtiele "Vergelijk"-checkbox op gelijke hoogte rechts.
   Vergelijk is absoluut gepositioneerd op de samenvattingsregel, zodat hij op zijn plek
   blijft als het paneel uitklapt. */
.techniek-kaart__meerrij { position: relative; border-top: 1px solid var(--kleur-lichtgrijs); }
.techniek-kaart__meerrij .techniek-kaart__meer { border-top: 0; }
.techniek-kaart__meerrij .techniek-kaart__meer-knop { padding-right: 140px; }
.techniek-kaart__vergelijk {
  position: absolute;
  top: 0;
  right: 16px;
  height: 44px;
  min-height: 0;
  gap: 6px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--kleur-donkerblauw);
  opacity: .75;
}
.techniek-kaart__vergelijk .vergelijk-check__input { width: 16px; height: 16px; }

/* Detail-blokken in "Meer informatie": Investering en Opbouw maandlasten. */
.kaart-detail { margin-bottom: 14px; }
.kaart-detail:last-child { margin-bottom: 0; }
.kaart-detail__kop {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--kleur-donkerblauw);
  opacity: .8;
}
.kaart-detail__lijst { margin: 0; }
.kaart-detail__lijst > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: .92rem;
  color: var(--kleur-donkerblauw);
}
.kaart-detail__lijst dt { margin: 0; }
.kaart-detail__lijst dd { margin: 0; font-weight: 600; white-space: nowrap; }
.kaart-detail__totaal {
  border-top: 1px solid var(--rand);
  margin-top: 4px;
  padding-top: 8px !important;
  font-weight: 700;
}
.kaart-detail__totaal dd { font-weight: 700; }

.vergelijk-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;            /* ruim klikbaar (touch) */
  cursor: pointer;
  color: var(--kleur-donkerblauw);
  font-size: .9rem;
  font-weight: 600;
}
.vergelijk-check__input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--kleur-primair);
  cursor: pointer;
}
.vergelijk-check--uit { opacity: .4; cursor: not-allowed; }
.vergelijk-check--uit .vergelijk-check__input { cursor: not-allowed; }

/* Zwevende vergelijkbalk, gecentreerd onderin het scherm. */
.vergelijk-balk {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 32px);
  padding: 10px 12px 10px 20px;
  background: var(--kleur-donkerblauw);
  color: var(--kleur-wit);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.vergelijk-balk[hidden] { display: none; }
.vergelijk-balk__tekst { margin: 0; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.vergelijk-balk__acties { display: flex; align-items: center; gap: 6px; }
.vergelijk-balk__wis {
  background: transparent;
  border: none;
  color: var(--kleur-wit);
  font-family: var(--font-basis);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 8px;
}
.vergelijk-balk__knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  border: none;
  border-radius: 999px;
  font-family: var(--font-basis);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.vergelijk-balk__knop:hover,
.vergelijk-balk__knop:focus { background: var(--kleur-primair-hover); }

/* Matrix-modal */
.vergelijk-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vergelijk-modal[hidden] { display: none; }
.vergelijk-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(36, 34, 30,.55);   /* donkerblauw, transparant */
}
.vergelijk-modal__paneel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow: auto;
  background: var(--kleur-wit);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.vergelijk-modal__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 12px;
}
.vergelijk-modal__kop h2 {
  margin: 0;
  color: var(--kleur-donkerblauw);
  font-size: 1.2rem;
  font-weight: 700;
}
.vergelijk-modal__sluiten {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--kleur-donkerblauw);
  font-size: 1.4rem;
  cursor: pointer;
}
.vergelijk-modal__sluiten:hover { background: var(--kleur-lichtblauw); }
.vergelijk-modal__body { padding: 0 20px 20px; }

.vergelijk-matrix { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vergelijk-matrix th,
.vergelijk-matrix td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--kleur-lichtgrijs);
}
.vergelijk-matrix thead th {
  color: var(--kleur-donkerblauw);
  font-size: .85rem;
  font-weight: 700;
  border-bottom: 2px solid var(--kleur-donkerblauw);
}
.vergelijk-matrix tbody th {
  color: var(--kleur-donkerblauw);
  font-weight: 600;
  opacity: .85;
  white-space: nowrap;
}
.vergelijk-matrix tbody td { color: var(--kleur-donkerblauw); font-weight: 600; }
.vergelijk-matrix td.is-best { color: var(--kleur-groen); font-weight: 700; }

/* --- Prioriteitenpaneel (vervangt "Sorteer op"): compact en inklapbaar --- */
/* Prioriteitenpaneel: standaard opengeklapt als blok "Waar let jij op?" (licht
   bosgroen vlak); ingeklapt een compacte witte chips-balk met een bosgroene
   accentrand links. Bewust NIET sticky: de balk scrollt gewoon mee. */
.prioriteiten {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--kleur-primair);
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw);
  margin: 0 0 20px;
  overflow: hidden;
}
.prioriteiten.is-open {
  background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
  border: 1px solid color-mix(in srgb, var(--kleur-primair) 45%, var(--rand));
}
.prioriteiten__toggle {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-family: var(--font-basis);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-height: 48px;
  color: var(--kleur-donkerblauw);
}
.prioriteiten__toggle:hover { background: color-mix(in srgb, var(--kleur-primair) 5%, var(--kleur-wit)); }
.prioriteiten.is-open .prioriteiten__toggle:hover { background: color-mix(in srgb, var(--kleur-primair) 12%, var(--kleur-wit)); }
.prioriteiten__toggle:focus-visible { outline: 2px solid var(--kleur-secundair); outline-offset: -2px; }
.prioriteiten__toggle > .ph-fill { color: var(--kleur-primair); font-size: 21px; flex: none; }
.prioriteiten__toggle-titel { font-weight: 700; font-size: .95rem; flex: none; }
/* Ingeklapte samenvatting: rij chips met bosgroene nummer-bollen. Bij het open
   paneel is de samenvatting verborgen (de volledige lijst staat er dan al). */
.prioriteiten__samenvatting {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.prioriteiten.is-open .prioriteiten__samenvatting { display: none; }
.prio-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kleur-wit);
  border: 1px solid color-mix(in srgb, var(--kleur-primair) 35%, var(--kleur-wit));
  border-radius: 999px;
  padding: 2px 10px 2px 3px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
  white-space: nowrap;
}
.prio-chip b {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  font-size: .68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Prioriteit 1 licht uit: gevulde tint + volle bosgroene rand. */
.prio-chip:first-child {
  background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
  border-color: var(--kleur-primair);
}
.prioriteiten__toggle-actie {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--kleur-primair);
  font-weight: 600;
  font-size: .88rem;
}
.prioriteiten__toggle-actie .ph-bold { transition: transform .25s; }
.prioriteiten.is-open .prioriteiten__toggle-actie .ph-bold { transform: rotate(180deg); }
.prioriteiten__inhoud {
  padding: 0 16px 14px;
  border-top: 1px solid color-mix(in srgb, var(--kleur-primair) 18%, var(--kleur-wit));
}
/* Open blok: intro ("Waar let jij op?") naast de lijst vanaf tablet, gestapeld op mobiel. */
.prioriteiten__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 768px) {
  .prioriteiten__grid { grid-template-columns: minmax(200px, 260px) 1fr; gap: 24px; }
}
.prioriteiten__kop {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 6px;
}
.prioriteiten__uitleg {
  font-size: .82rem;
  margin: 0;
  color: var(--kleur-donkerblauw);
  opacity: .8;
  max-width: 65ch;
  line-height: 1.55;
}
.prio-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.prio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--kleur-wit);
  border: 1px solid color-mix(in srgb, var(--kleur-lichtgrijs) 55%, var(--kleur-wit));
  border-radius: var(--radius);
  padding: 6px 8px;
  cursor: grab;
  touch-action: none;
  transition: box-shadow .15s, opacity .15s;
}
.prio-item.is-sleep { opacity: .45; }
.prio-item.is-doel { box-shadow: 0 0 0 2px var(--kleur-primair); }
.prio-item:active { cursor: grabbing; }
.prio-item__greep { color: var(--kleur-lichtgrijs); font-size: 17px; flex: none; display: flex; }
.prio-item__rang {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .75rem;
}
.prio-item__tekst { flex: 1 1 auto; min-width: 0; }
.prio-item__label { display: block; font-weight: 600; font-size: .88rem; color: var(--kleur-donkerblauw); }
.prio-item__toelichting {
  display: block;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--kleur-donkerblauw);
  opacity: .7;
}
.prio-item__pijlen { display: flex; gap: 3px; flex: none; }
.prio-item__pijl {
  border: 1px solid var(--kleur-vlak-zacht);
  background: var(--kleur-wit);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kleur-primair);
  font-size: .82rem;
}
.prio-item__pijl:hover:not(:disabled),
.prio-item__pijl:focus-visible { background: var(--kleur-primair); color: var(--kleur-wit); }
.prio-item__pijl:disabled { opacity: .3; cursor: default; }
.prioriteiten__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--kleur-primair) 18%, var(--kleur-wit));
  flex-wrap: wrap;
}
.prioriteiten__reset {
  background: none;
  border: none;
  font: inherit;
  font-family: var(--font-basis);
  font-size: .82rem;
  cursor: pointer;
  color: var(--kleur-steun);
  padding: 6px 0;
  text-decoration: underline;
}
.prioriteiten__reset:hover { color: var(--kleur-donkerblauw); }
.prioriteiten__melding {
  font-size: .82rem;
  color: var(--kleur-primair);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}

/* --- Twee delen: via Woningwarmte / niet via Woningwarmte --- */
.sectie-ww { margin-top: 4px; }
.sectie-ww__kop,
.sectie-nietww__kop {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.15rem;
  margin: 0 0 4px;
  color: var(--kleur-donkerblauw);
}
.sectie-ww__kop .ph-fill { color: var(--kleur-primair); font-size: 1.4rem; }
.sectie-ww__uitleg,
.sectie-nietww__uitleg {
  margin: 0 0 16px;
  font-size: .88rem;
  max-width: 65ch;
  color: var(--kleur-donkerblauw);
  opacity: .8;
}
.sectie-nietww {
  margin-top: 32px;
  padding: 16px;
  background: color-mix(in srgb, var(--kleur-lichtgrijs) 12%, var(--kleur-wit));
  border: 1px dashed var(--rand);
  border-radius: var(--radius-lg);
}
.sectie-nietww__kop { font-size: 1.02rem; }
.sectie-nietww__kop .ph { color: var(--kleur-lichtgrijs); font-size: 1.3rem; }

/* --- Score (afwegingskader) per kaart --- */
.score-chip { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.score-chip__ring {
  --p: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  position: relative;
  background: conic-gradient(var(--kleur-primair) calc(var(--p) * 1%), color-mix(in srgb, var(--kleur-primair) 15%, var(--kleur-wit)) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.score-chip__ring::before { content: ""; position: absolute; inset: 5px; background: var(--kleur-wit); border-radius: 50%; }
.techniek-kaart--uitgegrijsd .score-chip__ring::before { background: var(--kleur-vlak-zacht); }
.techniek-kaart:not(.techniek-kaart--gas):not(.techniek-kaart--uitgegrijsd) .score-chip__ring::before { background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit)); }
.score-chip__getal { position: relative; font-weight: 700; font-size: .88rem; color: var(--kleur-donkerblauw); }
.score-chip__tekst {
  font-size: .75rem;
  line-height: 1.35;
  color: var(--kleur-donkerblauw);
  opacity: .75;
}
.score-chip__tekst strong { display: block; color: var(--kleur-donkerblauw); font-size: .8rem; }

/* --- Gas-scenariolabel (band_reken) vervangt het exacte euroverschil met gas --- */
.gas-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  margin-top: 6px;
  border-radius: 999px;
  padding: 3px 10px;
}
.gas-label--goedkoper { background: color-mix(in srgb, var(--kleur-groen) 12%, var(--kleur-wit)); color: var(--kleur-groen); }
.gas-label--vergelijkbaar { background: var(--kleur-waarschuwing); color: var(--kleur-waarschuwing-tekst); }
.gas-label--duurder { background: color-mix(in srgb, var(--kleur-steun) 12%, var(--kleur-wit)); color: var(--kleur-steun); }

/* --- Kerncijfers-rij: investering + CO2 als bandbreedte op de kaartvoorkant --- */
.techniek-kerncijfers {
  display: flex;
  gap: 16px 28px;
  flex-wrap: wrap;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--kleur-vlak-zacht);
}
.kerncijfer .k {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: var(--kleur-donkerblauw);
  opacity: .75;
}
.kerncijfer .k .ph-bold { color: var(--kleur-primair); font-size: .95rem; }
.kerncijfer .v { font-weight: 700; font-size: .92rem; color: var(--kleur-donkerblauw); }
.kerncijfer .v--groen { color: var(--kleur-groen); }
.kerncijfer__sub {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--kleur-groen);
}

/* --- si_te_hoog: bodembron eerst verder isoleren (kaart zonder getallen) --- */
.techniek-kaart--isoleereerst { border-left: 4px solid var(--kleur-steun); }
.isoleereerst-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 12px;
  margin-top: 6px;
  background: color-mix(in srgb, var(--kleur-steun) 12%, var(--kleur-wit));
  color: var(--kleur-steun);
}
.isoleereerst-tekst { margin: 0; padding: 0 16px 12px; font-size: .9rem; max-width: 65ch; color: var(--kleur-donkerblauw); }
.isoleereerst-link { color: var(--kleur-steun); font-weight: 600; }
.isoleereerst-link:hover { color: var(--kleur-donkerblauw); }
.isoleereerst-voordelen { padding: 0 16px 14px; }

/* --- Toelichting onder detail-blokken + inklapknop onderaan de uitklap --- */
.kaart-detail__noot {
  font-size: .78rem;
  margin: 8px 0 0;
  color: var(--kleur-donkerblauw);
  opacity: .65;
}
.kaart-meer__sluit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px auto 0;
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-family: var(--font-basis);
  font-size: .85rem;
  font-weight: 600;
  color: var(--kleur-primair);
  padding: 9px 20px;
  cursor: pointer;
  min-height: 44px;
}
.techniek-kaart__uitklap { display: flex; flex-direction: column; }
.techniek-kaart__uitklap .kaart-meer__sluit { align-self: center; }
.kaart-meer__sluit:hover,
.kaart-meer__sluit:focus-visible { background: var(--kleur-primair); color: var(--kleur-wit); }

/* --- Antwoorden-recap / overzicht --- */
.antwoorden-recap {
  margin-top: 32px;
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw);
  padding: 22px 20px;
}
.antwoorden-recap h2 {
  color: var(--kleur-donkerblauw);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 8px;
}
/* Uitklapbaar (via <details>/<summary>): standaard ingeklapt zodat de recap weinig
   ruimte inneemt; de kop "Wijzig je antwoorden" is de klikbare toggle. */
.antwoorden-recap__paneel { width: 100%; }
.antwoorden-recap__hoofd {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  cursor: pointer;
  list-style: none;
  min-height: 48px;
}
/* "Of begin opnieuw" staat naast de titel + pijltje, rechts uitgelijnd, zichtbaar vóór
   uitklappen. Het is een aparte link (navigeert weg); de rest van de kop blijft de toggle. */
.antwoorden-recap__opnieuw-kop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--kleur-secundair);
  text-decoration: none;
}
.antwoorden-recap__opnieuw-kop:hover,
.antwoorden-recap__opnieuw-kop:focus { text-decoration: underline; }
.antwoorden-recap__hoofd::-webkit-details-marker { display: none; }
.antwoorden-recap__hoofd:focus-visible {
  outline: 2px solid var(--kleur-secundair);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.antwoorden-recap__hoofd .antwoorden-recap__titel { margin: 0; }
.antwoorden-recap__chevron {
  flex-shrink: 0;
  margin-right: auto;            /* duwt "Of begin opnieuw" naar rechts; pijltje blijft bij de titel */
  font-size: 1.3rem;
  color: var(--kleur-donkerblauw);
  opacity: .6;
  transition: transform .2s ease;
}
.antwoorden-recap__paneel[open] .antwoorden-recap__chevron { transform: rotate(180deg); }
.antwoorden-recap__uitklap { padding-top: 16px; }
.antwoorden-recap__intro {
  color: var(--kleur-donkerblauw);
  opacity: .85;
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 16px;
}
.antwoorden-recap__form { margin: 0; }
.antwoorden-recap__lijst { margin: 0 0 20px; display: grid; gap: 12px; }
.antwoorden-recap__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  border-bottom: 1px solid var(--kleur-lichtgrijs);
  padding-bottom: 10px;
}
.antwoorden-recap__rij dt { flex: 1 1 100%; color: var(--kleur-donkerblauw); opacity: .8; font-size: .85rem; }
.antwoorden-recap__rij dd {
  margin: 0;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
  font-size: .95rem;
}
.antwoorden-recap__wijzig {
  background: none;
  border: 1px solid var(--rand);
  color: var(--kleur-secundair);
  font-family: var(--font-basis);
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  flex-shrink: 0;
}
.antwoorden-recap__wijzig:hover,
.antwoorden-recap__wijzig:focus {
  border-color: var(--kleur-secundair);
  background: var(--kleur-lichtblauw);
}
.antwoorden-recap__voet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.antwoorden-recap__opnieuw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--kleur-donkerblauw);
  opacity: .8;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
}
.antwoorden-recap__opnieuw:hover,
.antwoorden-recap__opnieuw:focus { opacity: 1; color: var(--kleur-secundair); }
.antwoorden-recap__alles { width: 100%; }
@media (min-width: 768px) {
  .antwoorden-recap__voet {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .antwoorden-recap__opnieuw { justify-content: flex-start; }
  .antwoorden-recap__alles { width: auto; }
}

/* --- Foutmelding --- */
.resultaat-fout {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schaduw);
  padding: 32px 24px;
  text-align: center;
}
.resultaat-fout h1 { color: var(--kleur-donkerblauw); font-size: 1.4rem; margin: 0 0 10px; }
.resultaat-fout p { color: var(--kleur-donkerblauw); max-width: 50ch; margin: 0 auto 20px; line-height: 1.5; }

/* --- Tablet --- */
@media (min-width: 768px) {
  .vergelijker { padding: 40px 24px 80px; }
  .wizard-hero { padding: 64px 32px; }
  .wizard-hero h1 { font-size: 2.4rem; }
  .wizard-sectie { padding: 32px 24px 80px; }
  .vraag-stap { padding: 36px 32px; }
  .indicatie-blok { grid-template-columns: repeat(3, 1fr); }
  .techniek-kaart__details { grid-template-columns: repeat(2, 1fr); }
}

/* --- Desktop --- */
@media (min-width: 1024px) {
  .wizard-hero h1 { font-size: 2.8rem; }
}


/* ═══ Pagina: .pg-voorwaarden (verplaatst uit public/templates/footer/algemene-voorwaarden.php) ═══ */
.pg-voorwaarden .voorwaarden-hero {
    background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
    padding: 2rem 1rem;
    text-align: center;
  }

  .pg-voorwaarden .voorwaarden-hero h1 {
    color: var(--kleur-donkerblauw);
    font-size: 1.6rem;
    line-height: 1.3;
    margin: 0 0 0.5rem;
  }

  .pg-voorwaarden .voorwaarden-hero .bijgewerkt {
    color: var(--kleur-donkerblauw);
    font-size: 0.9rem;
    margin: 0;
  }

  .pg-voorwaarden .voorwaarden-inhoud {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    color: var(--kleur-donkerblauw);
  }

  .pg-voorwaarden .voorwaarden-inhoud h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kleur-donkerblauw);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--kleur-lichtblauw);
  }

  .pg-voorwaarden .voorwaarden-inhoud p {
    line-height: 1.7;
    margin-bottom: 1rem;
    max-width: 65ch;
  }

  .pg-voorwaarden .voorwaarden-inhoud ul {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
    line-height: 1.7;
  }

  .pg-voorwaarden .voorwaarden-inhoud ul li {
    margin-bottom: 0.25rem;
  }

  .pg-voorwaarden .voorwaarden-inhoud a {
    color: var(--kleur-steun);
    text-decoration: underline;
  }

  .pg-voorwaarden .voorwaarden-inhoud a:hover {
    color: var(--kleur-primair);
  }

  @media (min-width: 768px) {
    .pg-voorwaarden .voorwaarden-hero {
      padding: 3rem 2rem;
    }

    .pg-voorwaarden .voorwaarden-hero h1 {
      font-size: 2rem;
    }

    .pg-voorwaarden .voorwaarden-inhoud {
      padding: 2.5rem 2rem 5rem;
    }

    .pg-voorwaarden .voorwaarden-inhoud h2 {
      font-size: 1.25rem;
    }
  }

  @media (min-width: 1024px) {
    .pg-voorwaarden .voorwaarden-hero {
      padding: 4rem 2rem;
    }

    .pg-voorwaarden .voorwaarden-hero h1 {
      font-size: 2.2rem;
    }
  }


/* ═══ Pagina: .pg-energieadvies (verplaatst uit public/pages/stappen/energie-advies.php) ═══ */
.pg-energieadvies .ea-hero {
    background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
    padding: 2.5rem 0;
  }

  /* Zelfde binnenpadding als .ea-inhoud, zodat hero en inhoud op elke breedte op
     dezelfde linkerlijn beginnen (BugHerd #110). */
  .pg-energieadvies .ea-hero__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .pg-energieadvies .ea-hero h1 {
    color: var(--kleur-donkerblauw);
    font-size: 1.6rem;
    line-height: 1.3;
    margin: 0 0 1rem;
  }

  .pg-energieadvies .ea-hero p {
    color: var(--kleur-donkerblauw);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 65ch;
  }

  .pg-energieadvies .btn-primair {
    display: inline-block;
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    min-height: 48px;
    line-height: 1.3;
  }

  .pg-energieadvies .btn-primair:hover {
    background-color: var(--kleur-secundair);
  }

  .pg-energieadvies .ea-inhoud {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
  }

  .pg-energieadvies .ea-sectie {
    padding: 2rem 0;
    border-bottom: 1px solid var(--kleur-lichtgrijs);
  }

  .pg-energieadvies .ea-sectie:last-child {
    border-bottom: none;
  }

  .pg-energieadvies .ea-sectie--formulier {
    padding-top: 2.5rem;
  }

  .pg-energieadvies .ea-inhoud h2 {
    color: var(--kleur-donkerblauw);
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }

  .pg-energieadvies .ea-inhoud h3 {
    color: var(--kleur-donkerblauw);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
  }

  .pg-energieadvies .ea-inhoud p {
    color: var(--kleur-donkerblauw);
    line-height: 1.7;
    margin-bottom: 1rem;
    max-width: 65ch;
  }

  .pg-energieadvies .ea-inhoud ul {
    margin: 0 0 1rem 1.25rem;
    color: var(--kleur-donkerblauw);
    line-height: 1.7;
  }

  .pg-energieadvies .ea-inhoud ul li {
    margin-bottom: 0.4rem;
  }

  /* Zelfde kleur en hover als .link-secundair, zodat een tekstlink op deze
     pagina niet afwijkt van de rest van de site. */
  .pg-energieadvies .ea-inhoud a {
    color: var(--kleur-steun);
    text-decoration: underline;
  }

  .pg-energieadvies .ea-inhoud a:hover {
    color: var(--kleur-donkerblauw);
  }

  .pg-energieadvies .ea-citaat {
    border-left: 4px solid var(--kleur-accent);
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background-color: var(--kleur-lichtblauw);
    border-radius: 0 8px 8px 0;
  }

  .pg-energieadvies .ea-citaat p {
    font-style: italic;
    color: var(--kleur-donkerblauw);
    margin: 0;
  }

  .pg-energieadvies .ea-formulier {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
    max-width: 560px;
  }

  .pg-energieadvies .ea-formulier .form-veld {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .pg-energieadvies .ea-formulier label {
    font-weight: 600;
    color: var(--kleur-donkerblauw);
    font-size: 0.95rem;
  }

  .pg-energieadvies .ea-formulier input,
.pg-energieadvies .ea-formulier textarea {
    font-family: var(--font-basis);
    font-size: 1rem;
    color: var(--kleur-donkerblauw);
    background-color: var(--kleur-wit);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    min-height: 48px;
    width: 100%;
    box-sizing: border-box;
  }

  .pg-energieadvies .ea-formulier textarea {
    min-height: 120px;
    resize: vertical;
  }

  .pg-energieadvies .ea-formulier input:focus,
.pg-energieadvies .ea-formulier textarea:focus {
    outline: 2px solid var(--kleur-secundair);
    outline-offset: 2px;
    border-color: var(--kleur-secundair);
  }

  .pg-energieadvies .ea-formulier .form-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0;
  }

  .pg-energieadvies .ea-formulier input.is-ongeldig,
.pg-energieadvies .ea-formulier textarea.is-ongeldig {
    border-color: var(--kleur-primair);
  }

  .pg-energieadvies .vereist { color: var(--kleur-primair); }

  .pg-energieadvies .form-foutmelding {
    color: var(--kleur-primair);
    font-size: 0.875rem;
    min-height: 1.2em;
  }

  .pg-energieadvies .form-submit-blok {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .pg-energieadvies .btn-formulier {
    font-family: var(--font-basis);
    font-size: 1rem;
    font-weight: 600;
    color: var(--kleur-wit);
    background-color: var(--kleur-primair);
    border: none;
    border-radius: 8px;
    padding: 0.85rem 1.5rem;
    min-height: 48px;
    cursor: pointer;
    align-self: flex-start;
  }

  .pg-energieadvies .btn-formulier:hover {
    background-color: var(--kleur-secundair);
  }

  .pg-energieadvies .form-disclaimer {
    font-size: 0.875rem;
    color: var(--kleur-donkerblauw);
    margin: 0;
    max-width: 65ch;
  }

  @media (max-width: 480px) {
    .pg-energieadvies .ea-formulier .form-rij { grid-template-columns: 1fr; }
  }

  @media (min-width: 768px) {
    .pg-energieadvies .ea-hero { padding: 3.5rem 0; } /* zijpadding zit op de inner (BugHerd #110) */
    .pg-energieadvies .ea-hero h1 { font-size: 2rem; }
    .pg-energieadvies .ea-inhoud { padding: 0 2rem 4rem; }
    .pg-energieadvies .ea-hero__inner { padding: 0 2rem; } /* zelfde lijn als de inhoud (BugHerd #110) */
    .pg-energieadvies .ea-inhoud h2 { font-size: 1.5rem; }
  }

  @media (min-width: 1024px) {
    .pg-energieadvies .ea-hero { padding: 4.5rem 2rem; }
    .pg-energieadvies .ea-hero h1 { font-size: 2.2rem; }
  }


/* ═══ Pagina: .pg-stappen (verplaatst uit public/pages/stappen/index.php) ═══ */
.pg-stappen .stappen-hero {
    background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
    padding: 2.5rem 1rem;
  }

  .pg-stappen .stappen-hero__inner {
    max-width: 800px;
    margin: 0 auto;
  }

  .pg-stappen .stappen-hero h1 {
    color: var(--kleur-donkerblauw);
    font-size: 1.6rem;
    line-height: 1.3;
    margin: 0 0 0.75rem;
  }

  .pg-stappen .stappen-hero p {
    color: var(--kleur-donkerblauw);
    line-height: 1.7;
    margin: 0;
    max-width: 65ch;
  }

  .pg-stappen .stappen-overzicht {
    padding: 2.5rem 1rem;
  }

  .pg-stappen .stappen-overzicht__inner {
    max-width: 800px;
    margin: 0 auto;
  }

  .pg-stappen .stappen-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Neutraliseer de generieke .stappen-lijst-kaartstijl (van "Zo werkt het" op
     de eerste-ronde-pagina): deze pagina heeft eigen nummer-bollen
     (.stap__nummer), dus zonder deze reset krijgt elke stap twee nummers
     (de ::before-teller én de bol) plus een dubbele kaartopmaak. */
  .pg-stappen .stappen-lijst li {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 2rem;
  }
  .pg-stappen .stappen-lijst li::before { content: none; }

  .pg-stappen .stap {
    display: flex;
    gap: 1.25rem;
    position: relative;
    padding-bottom: 2rem;
  }

  .pg-stappen /* Verbindingslijn tussen stappen */
  .stap:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 1.375rem;
    top: 2.75rem;
    bottom: 0;
    width: 2px;
    background-color: var(--kleur-lichtblauw);
  }

  .pg-stappen .stap__nummer {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }

  .pg-stappen .stap__inhoud {
    padding-top: 0.35rem;
    flex: 1;
  }

  .pg-stappen .stap__inhoud h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kleur-donkerblauw);
    margin: 0 0 0.5rem;
  }

  .pg-stappen .stap__inhoud p {
    color: var(--kleur-donkerblauw);
    line-height: 1.7;
    margin: 0 0 0.75rem;
    max-width: 65ch;
  }

  .pg-stappen .stap__binnenkort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--kleur-donkerblauw);
    font-size: 0.9rem;
    margin: 0 !important;
  }

  .pg-stappen .stappen-cta {
    background-color: var(--kleur-lichtblauw);
    padding: 2.5rem 1rem;
    text-align: center;
  }

  .pg-stappen .stappen-cta__inner {
    max-width: 600px;
    margin: 0 auto;
  }

  .pg-stappen .stappen-cta h2 {
    color: var(--kleur-donkerblauw);
    font-size: 1.3rem;
    margin: 0 0 0.75rem;
  }

  .pg-stappen .stappen-cta p {
    color: var(--kleur-donkerblauw);
    line-height: 1.7;
    margin: 0 0 1.5rem;
  }

  .pg-stappen .btn-primair {
    display: inline-block;
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    min-height: 48px;
    line-height: 1.3;
  }

  .pg-stappen .btn-primair:hover {
    background-color: var(--kleur-secundair);
  }

  @media (min-width: 768px) {
    .pg-stappen .stappen-hero {
      padding: 3.5rem 2rem;
    }

    .pg-stappen .stappen-hero h1 {
      font-size: 2rem;
    }

    .pg-stappen .stappen-overzicht {
      padding: 3rem 2rem;
    }

    .pg-stappen .stap__inhoud h2 {
      font-size: 1.2rem;
    }

    .pg-stappen .stappen-cta {
      padding: 3.5rem 2rem;
    }

    .pg-stappen .stappen-cta h2 {
      font-size: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    .pg-stappen .stappen-hero {
      padding: 4.5rem 2rem;
    }

    .pg-stappen .stappen-hero h1 {
      font-size: 2.2rem;
    }
  }


/* ═══ Pagina: .pg-artikel (verplaatst uit public/pages/actueel/artikel.php) ═══ */
.pg-artikel .artikel-hero {
    background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
    padding: 2rem 1rem;
  }

  .pg-artikel .artikel-hero__inner {
    max-width: 800px;
    margin: 0 auto;
  }

  .pg-artikel .artikel-hero__terug {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--kleur-donkerblauw);
    text-decoration: none;
    font-size: 0.95rem;
    margin-top: 1rem;
  }

  .pg-artikel .artikel-hero__terug:hover {
    color: var(--kleur-primair);
  }

  .pg-artikel .artikel-hero h1 {
    color: var(--kleur-donkerblauw);
    font-size: 1.6rem;
    line-height: 1.3;
    margin: 0;
  }

  .pg-artikel .artikel-inhoud {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
  }

  .pg-artikel .artikel-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--kleur-secundair);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }

  .pg-artikel .artikel-tekst {
    color: var(--kleur-donkerblauw);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 65ch;
  }

  .pg-artikel .btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    min-height: 48px;
  }

  .pg-artikel .btn-download:hover {
    background-color: var(--kleur-secundair);
  }

  .pg-artikel .artikel-niet-gevonden {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--kleur-donkerblauw);
  }

  .pg-artikel .artikel-niet-gevonden > i {
    font-size: 3rem;
    color: var(--kleur-secundair);
    display: block;
    margin-bottom: 1rem;
  }

  .pg-artikel .artikel-niet-gevonden p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
  }

  .pg-artikel .artikel-terug-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--kleur-secundair);
    text-decoration: none;
    font-weight: 600;
  }

  .pg-artikel .artikel-terug-link:hover {
    color: var(--kleur-primair);
  }

  /* Pijl in lijn met de tekst, niet groter dan de letters ernaast. */
  .pg-artikel .artikel-terug-link i {
    font-size: 1em;
  }

  /* Rijke artikelinhoud (vraag & antwoord-artikelen) */
  .pg-artikel .artikel-body h2 {
    color: var(--kleur-donkerblauw);
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 2.5rem 0 1rem;
  }

  .pg-artikel .artikel-body h2:first-child {
    margin-top: 0;
  }

  .pg-artikel .artikel-body .faq-item__antwoord ul {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--kleur-donkerblauw);
    line-height: 1.65;
    font-size: 1rem;
    max-width: 65ch;
  }

  .pg-artikel .artikel-body .faq-item__antwoord li + li {
    margin-top: 8px;
  }

  .pg-artikel .artikel-body h4 {
    color: var(--kleur-donkerblauw);
    font-size: 1rem;
    line-height: 1.4;
    margin: 1.5rem 0 0.5rem;
  }

  /* Tabellen in artikelinhoud: donkere kop (bewust donker), scrollt op smalle schermen. */
  .pg-artikel .artikel-tabel-wrapper {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
  }

  .pg-artikel .artikel-body table {
    border-collapse: collapse;
    width: 100%;
    max-width: 65ch;
    font-size: 1rem;
    color: var(--kleur-donkerblauw);
  }

  .pg-artikel .artikel-body th,
  .pg-artikel .artikel-body td {
    border: 1px solid var(--kleur-lichtgrijs);
    padding: 8px 12px;
    text-align: left;
  }

  .pg-artikel .artikel-body thead th {
    background-color: var(--kleur-donkerblauw);
    color: var(--kleur-wit);
  }

  .pg-artikel .artikel-body tbody tr:nth-child(even) {
    background-color: var(--kleur-vlak-zacht);
  }

  /* Verwante artikelen ("Verder lezen") */
  .pg-artikel .artikel-verwant {
    margin-top: 2rem;
  }

  .pg-artikel .artikel-verwant h2 {
    color: var(--kleur-donkerblauw);
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
  }

  .pg-artikel .artikel-verwant ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pg-artikel .artikel-verwant li + li {
    margin-top: 8px;
  }

  .pg-artikel .artikel-verwant a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--kleur-secundair);
    font-weight: 600;
    text-decoration: underline;
    min-height: 48px;
  }

  .pg-artikel .artikel-verwant a:hover {
    color: var(--kleur-primair-hover);
  }

  .pg-artikel .artikel-downloads {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 2rem;
  }

  .pg-artikel .artikel-onder {
    margin-top: 2.5rem;
  }

  @media (min-width: 768px) {
    .pg-artikel .artikel-hero {
      padding: 3rem 2rem;
    }

    .pg-artikel .artikel-hero h1 {
      font-size: 2rem;
    }

    .pg-artikel .artikel-inhoud {
      padding: 2.5rem 2rem 4rem;
    }
  }

  @media (min-width: 1024px) {
    .pg-artikel .artikel-hero {
      padding: 4rem 2rem;
    }

    .pg-artikel .artikel-hero h1 {
      font-size: 2.2rem;
    }
  }


/* ═══ Pagina: .pg-elektra (verplaatst uit public/pages/stappen/elektra.php) ═══ */
.pg-elektra /* ── HERO ── */
  .hero-elektra {
    background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
    padding: 64px 5% 72px;
    position: relative;
    overflow: hidden;
  }
  .pg-elektra .hero-elektra::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(249,168,37,.11) 0%, transparent 65%);
    pointer-events: none;
  }
  .pg-elektra .hero-inhoud {
    position: relative;
    z-index: 1;
    max-width: 700px;
  }
  .pg-elektra .stap-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kleur-steun);
    margin-bottom: 16px;
  }
  .pg-elektra .stap-label svg {
    width: 16px;
    height: 16px;
    stroke: var(--kleur-steun);
    flex-shrink: 0;
  }
  .pg-elektra .hero-elektra h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--kleur-donkerblauw);
    margin-bottom: 20px;
  }
  .pg-elektra .hero-elektra .hero-intro {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--kleur-donkerblauw);
    max-width: 60ch;
  }

  .pg-elektra /* ── STAPPENINDICATOR ── */
  .stappen-balk {
    background: var(--kleur-wit);
    border-bottom: 1px solid var(--rand);
    padding: 16px 5%;
    overflow-x: auto;
  }
  .pg-elektra .stappen-lijst {
    display: flex;
    gap: 8px;
    list-style: none;
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }
  /* Chips in de horizontale stappenbalk, geen leestekst: bewust onder 16px,
     anders passen ze op een smal scherm niet meer naast elkaar. */
  .pg-elektra .stappen-lijst li a,
.pg-elektra .stappen-lijst li span {
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    color: var(--kleur-donkerblauw);
    background: var(--kleur-lichtblauw);
    transition: background .2s, color .2s;
  }
  .pg-elektra .stappen-lijst li a:hover {
    background: rgba(27, 110, 60, .10);
  }
  .pg-elektra .stappen-lijst li.actief span {
    background: var(--kleur-primair);
    color: var(--kleur-wit);
  }

  .pg-elektra /* ── CONTENT SECTIE ── */
  .content-sectie {
    background: var(--kleur-wit);
    padding: 64px 5%;
  }
  .pg-elektra .content-wrapper {
    max-width: 780px;
  }

  .pg-elektra /* WordPress-content typografie */
  .wp-content h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: var(--kleur-donkerblauw);
    margin: 40px 0 14px;
    line-height: 1.25;
  }
  .pg-elektra .wp-content h2:first-child { margin-top: 0; }
  .pg-elektra .wp-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kleur-donkerblauw);
    margin: 28px 0 10px;
  }
  .pg-elektra .wp-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--kleur-donkerblauw);
    max-width: 65ch;
    margin-bottom: 16px;
  }
  .pg-elektra .wp-content ul,
.pg-elektra .wp-content ol {
    padding-left: 20px;
    margin-bottom: 16px;
  }
  .pg-elektra .wp-content li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--kleur-donkerblauw);
    margin-bottom: 8px;
    max-width: 65ch;
  }
  .pg-elektra .wp-content a {
    color: var(--kleur-secundair);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .pg-elektra .wp-content a:hover { color: var(--kleur-primair); }
  .pg-elektra .wp-content strong { font-weight: 700; }
  .pg-elektra .wp-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0 16px;
  }

  .pg-elektra /* Fallback melding */
  .content-melding {
    background: var(--kleur-lichtblauw);
    border-left: 4px solid var(--kleur-secundair);
    border-radius: 0 8px 8px 0;
    padding: 20px 24px;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--kleur-donkerblauw);
    max-width: 65ch;
  }

  .pg-elektra /* ── INFO-KAARTEN ── */
  .info-sectie {
    background: var(--kleur-lichtblauw);
    padding: 64px 5%;
  }
  .pg-elektra .sectie-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kleur-primair);
    margin-bottom: 8px;
  }
  .pg-elektra .sectie-titel {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--kleur-donkerblauw);
    margin-bottom: 36px;
    line-height: 1.2;
  }
  .pg-elektra .kaarten-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 32px 0;
  }
  .pg-elektra .info-kaart {
    background: var(--kleur-wit);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 28px 24px;
    box-shadow: 0 2px 8px rgba(36,34,30,.06);
  }
  .pg-elektra .info-kaart-icoon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(27, 110, 60, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
  }
  .pg-elektra .info-kaart-icoon svg {
    width: 24px;
    height: 24px;
    stroke: var(--kleur-primair);
  }
  .pg-elektra .info-kaart h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--kleur-donkerblauw);
    margin-bottom: 8px;
  }
  .pg-elektra .info-kaart p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--kleur-donkerblauw);
    max-width: 52ch;
  }

  .pg-elektra /* ── CTA STRIP ── */
  .cta-strip {
    background: linear-gradient(135deg, var(--kleur-primair) 0%, var(--kleur-primair-hover) 100%);
    padding: 56px 5%;
    text-align: center;
  }
  .pg-elektra .cta-strip h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 700;
    color: var(--kleur-wit);
    margin-bottom: 10px;
  }
  .pg-elektra .cta-strip p {
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    margin-bottom: 28px;
    max-width: 50ch;
    margin-inline: auto;
  }
  .pg-elektra .btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 28px;
    border-radius: 28px;
    font-size: .95rem;
    font-weight: 700;
    font-family: var(--font-basis);
    text-decoration: none;
    min-height: 48px;
    transition: all .2s;
  }
  .pg-elektra .btn-wit {
    background: var(--kleur-wit);
    color: var(--kleur-primair);
  }
  .pg-elektra .btn-wit:hover {
    background: var(--kleur-lichtgrijs);
    transform: translateY(-1px);
  }

  .pg-elektra /* ── FOOTER ── */
  footer {
    background: var(--kleur-donkerblauw);
    color: rgba(255,255,255,.65);
    padding: 48px 5% 32px;
  }
  .pg-elektra .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 36px;
  }
  .pg-elektra .footer-merk p { font-size: .85rem; line-height: 1.6; margin-top: 14px; }
  .pg-elektra footer h4 { color: var(--kleur-wit); font-size: .85rem; margin-bottom: 12px; font-weight: 700; }
  .pg-elektra footer ul { list-style: none; }
  .pg-elektra footer ul li { margin-bottom: 8px; }
  .pg-elektra footer ul a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: .85rem;
    transition: color .2s;
  }
  .pg-elektra footer ul a:hover { color: var(--kleur-accent); }
  .pg-elektra .footer-onder {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    flex-wrap: wrap;
    gap: 10px;
  }
  .pg-elektra .footer-onder a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    margin-left: 16px;
    transition: color .2s;
  }
  .pg-elektra .footer-onder a:hover { color: var(--kleur-accent); }

  .pg-elektra /* ── RESPONSIVE ── */
  @media (min-width: 768px) {
    .kaarten-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .pg-elektra .footer-grid { grid-template-columns: 1fr; }
    .pg-elektra .stappen-lijst li a,
.pg-elektra .stappen-lijst li span { font-size: .75rem; padding: 5px 11px; }
  }

/* ============================================================= *
 *  Keuze-blok: twee routes (vrijblijvend interesse / woning-check)
 *  Compacte één/tweeregelige variant. Zie templates/keuze-routes.php.
 * ============================================================= */
.keuze { max-width: 760px; margin: 0 auto; }
.keuze__kop {
  text-align: center;
  font-size: 1.15rem; /* design system 03-09-2026: was 1.6rem */
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  line-height: 1.3;
  margin: 0 0 8px;
}
.keuze__intro {
  text-align: center;
  font-size: 0.95rem;
  color: var(--kleur-donkerblauw);
  margin: 0 0 24px;
}
.keuze__opties { display: flex; flex-direction: column; gap: 16px; }
.keuze__rij {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Design system KeuzeBlok, maat volledig (BugHerd #215, 06-09-2026): de kaart is zo breed
     als zijn inhoud en niet zo breed als de kolom; onder een gecentreerde kop staat hij dan
     gecentreerd. Linkerrand 4px zoals in het design system (was 5px). */
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-left: 4px solid var(--kleur-primair);
  border-radius: 8px;
  padding: 18px 20px;
}
/* Alleen de maat volledig krimpt (BugHerd #215); band, kaal en boven houden hun eigen maat. */
.keuze--volledig .keuze__rij { width: fit-content; max-width: 100%; margin: 0 auto; }
.keuze__rij--check { border-left-color: var(--kleur-steun); }
.keuze__icoon { font-size: 28px; line-height: 1; color: var(--kleur-primair); }
.keuze__rij--check .keuze__icoon { color: var(--kleur-steun); }
/* De wervende regel (<strong>) en de toelichting erachter staan elk op een eigen regel,
   ongeacht de breedte; inline braken ze op willekeurige plekken. De toelichting is
   ondersteunend: kleiner en gedempt (75% van de tekstkleur via color-mix, geen opacity:
   een kind kan niet minder doorzichtig zijn dan zijn ouder, dus de <strong> krijgt zijn
   volle kleur terug). Design system, 03-09-2026. */
/* Met .keuze ervoor: anders wint .pilot-sectie p (klasse + element) op de kleur. */
.keuze .keuze__tekst {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--kleur-donkerblauw) 75%, transparent);
  max-width: none;
}
/* De toelichting staat in een eigen span (design system punt 3). De demping komt al
   van .keuze__tekst hierboven; een tweede opacity hier zou die verdubbelen. */
.keuze__tekst-sub { font-size: 0.9rem; }
.keuze .keuze__tekst > strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kleur-donkerblauw);
}
.keuze__btn { padding: 12px 22px; white-space: nowrap; text-align: center; }
/* Het formulier wrapt op elke breedte; het adrespaar erin nooit: postcode en huisnummer
   vormen samen één adres (design system, 03-09-2026). Met de veldbreedtes hierboven
   (110 + 80 + 10px gap = 200px) past het paar op 320px; alleen de knop wijkt uit naar de
   regel eronder. Zonder de wrapper is "deze twee wel, de knop niet" in flex niet uit te
   drukken. */
.keuze__check-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.keuze__adres { display: flex; gap: 10px; flex-wrap: nowrap; flex-shrink: 0; }
.keuze__check-form input {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  font-family: var(--font-basis);
  color: var(--kleur-donkerblauw);
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: 8px;
  padding: 0 14px;
}
.keuze__check-form input:focus { border-color: var(--kleur-primair); outline: none; }
/* Veldbreedtes op maat van de inhoud (design system KeuzeBlok, patch
   keuze-veldbreedte-postcode van 04-09-2026). Gemeten in Sora 16px: placeholder "Postcode"
   77,55px, invoer "1234 AB" 63,3px, placeholder "Huisnr." 56,42px (4,75ch), langste
   huisnummer "152A" 38,67px; 1ch is ~11,9px (Sora heeft brede cijfers). Breedte = inhoud +
   32px (de horizontale padding van 2 × 14px). De placeholder is in beide velden de maat.
   Huisnummer: 5ch geeft 59,5px, 3px lucht. Postcode staat op 8,25ch en niet op de 6,6ch die
   "Postcode" strikt nodig heeft: de twee velden houden hun verhouding van 1,65 : 1, zodat
   het paar in balans blijft nu het huisnummerveld breder is; de ruimte over is opzet. In ch
   en niet in px zodat de velden de fontgrootte volgen; aan Sora gebonden, meet opnieuw bij
   een ander font. */
.keuze__check-form input[name="postcode"] { width: calc(8.25ch + 32px); }
.keuze__check-form input[name="huisnummer"] { width: calc(5ch + 32px); }
/* De postcode-/huisnummervelden zijn type="search" (zie keuze-routes.php en vragen.php:
   houdt de adresfunctie van LastPass buiten de deur). Browsers geven zoekvelden een eigen
   vorm en een wisknopje; dat gaat hier uit zodat ze eruitzien als gewone tekstvelden. */
.keuze__check-form input[type="search"],
.adres-veld__veld input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
.keuze__check-form input[type="search"]::-webkit-search-cancel-button,
.keuze__check-form input[type="search"]::-webkit-search-decoration,
.adres-veld__veld input[type="search"]::-webkit-search-cancel-button,
.adres-veld__veld input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}
.keuze__meer { text-align: center; margin: 22px auto 0; line-height: 1.6; }
.keuze__meer-kop { margin: 0; }
.keuze__meer-lijst { list-style: none; margin: 0; padding: 0; }

/* tablet/desktop: icoon + tekst + actie op één regel */
@media (min-width: 768px) {
  .keuze__kop { font-size: 1.6rem; } /* was 2rem */
  .keuze__rij { flex-direction: row; align-items: center; gap: 18px; }
  /* Vaste kolom van 28px (design system punt 4): zonder die breedte schoof de tekst mee
     met de glyph-breedte van het Phosphor-icoon. Alleen hier, in de rij-opmaak: op een
     telefoon staat het icoon gecentreerd boven de tekst en zou een vaste breedte hem
     naar links trekken. */
  .keuze__icoon { flex: 0 0 28px; width: 28px; }
  .keuze__tekst { flex: 1 1 auto; }
  .keuze__btn { flex: 0 0 auto; }
  .keuze__check-form { flex: 0 0 auto; }
  /* Het formulier op een eigen regel onder de tekst (design system, 03-09-2026): op één
     flexrij hield de tekst in de hero van 760px maar ~250px over en brak over drie
     regels. De rij wordt een grid: icoon en tekst op rij één, formulier op rij twee in
     de tekstkolom, zodat het uitlijnt met de tekst en niet met het icoon. De icoonkolom
     is 28px (.keuze__icoon) met 14px gap. Alleen .keuze__rij--check, niet .keuze__rij.
     De flex-waarden worden geneutraliseerd zodat een terugval naar flex niet de oude
     verdeling teruggeeft. De losse knop in de standen klaar/terug/bezig (geen
     formulier) blijft in de tekstkolom, anders belandt hij onder het icoon. */
  .keuze__rij--check {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: start;
    column-gap: 14px;
    row-gap: 14px;
  }
  .keuze__rij--check .keuze__icoon { flex: none; }
  .keuze__rij--check .keuze__tekst { flex: none; grid-column: 2; }
  .keuze__rij--check .keuze__check-form { flex: none; grid-column: 2; }
  .keuze__rij--check > .keuze__btn { grid-column: 2; justify-self: start; flex: none; }
  .keuze__rij--check > .keuze__acties { grid-column: 2; justify-self: start; }
  .keuze__check-form input[name="postcode"] { width: calc(8.25ch + 32px); }
  .keuze__check-form input[name="huisnummer"] { width: calc(5ch + 32px); }
}

/* ============================================================= *
 *  Merk-iconen (eigen inline-SVG's, zie includes/merk_iconen.php)
 *  Maat volgt de fontgrootte van de icoonhouder (1em); kleur via
 *  currentColor, dus zet color op de houder (CSS-variabele).
 * ============================================================= */
.merk-icoon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }

/* ============================================================= *
 *  Eerste-ronde-pagina: fors grotere icoontjes (scoped via .pg-eerste-ronde,
 *  omdat deze klassen ook op andere pagina's gebruikt worden).
 *  De merk-/Phosphor-iconen volgen font-size, dus alleen die hoeven groter.
 * ============================================================= */
.pg-eerste-ronde .techniek-kaart__icoon { font-size: 88px; }
.pg-eerste-ronde .voordeel-kaart__icoon { width: 64px; height: 64px; font-size: 36px; border-radius: 14px; }
.pg-eerste-ronde .belofte-lijst__icoon { font-size: 1.7rem; }

/* Sectie-icoon vóór de kop: oranje steunkleur, ongeveer even hoog als de tekst. */
.pg-eerste-ronde h2 .sec-icoon {
  color: var(--kleur-steun);
  font-size: 1em;
  line-height: 1;
  margin-right: 0.4em;
  vertical-align: -0.12em;
}

/* ============================================================= *
 *  Afspraak maken (pages/over-ons/afspraak-maken.php)
 *  Niet-gelinkte testpagina: hero + boekingskaart + uitlegstappen.
 * ============================================================= */
.afspraak-hero {
  background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
  padding: 60px 20px;
  text-align: center;
}
.afspraak-hero__inner { max-width: 760px; margin: 0 auto; }
.afspraak-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  line-height: 1.25;
  margin: 0 0 16px;
}
.afspraak-hero p {
  font-size: 1.1rem;
  color: var(--kleur-donkerblauw);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 60ch;
}
.afspraak-sectie { padding: 40px 20px; }
.afspraak-sectie__inner { max-width: 760px; margin: 0 auto; }
.afspraak-kaart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: 8px;
  padding: 24px;
}
.afspraak-kaart__foto {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.afspraak-kaart__tekst h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 8px;
}
.afspraak-kaart__tekst p {
  color: var(--kleur-donkerblauw);
  line-height: 1.6;
  max-width: 65ch;
  margin: 0;
}
.afspraak-kaart__actie { display: flex; flex-direction: column; gap: 8px; }
.afspraak-kaart__actie .btn-primair { text-align: center; }
.afspraak-kaart__noot {
  font-size: 0.85rem;
  color: var(--kleur-donkerblauw);
  line-height: 1.5;
  margin: 0;
}
.afspraak-uitleg { margin-top: 32px; }
.afspraak-uitleg h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 16px;
}
.afspraak-uitleg ol {
  padding-left: 20px;
  color: var(--kleur-donkerblauw);
  line-height: 1.6;
}
.afspraak-uitleg li { margin-bottom: 8px; max-width: 65ch; }

@media (min-width: 768px) {
  .afspraak-hero { padding: 80px 32px; }
  .afspraak-hero h1 { font-size: 2.6rem; }
  .afspraak-sectie { padding: 60px 32px; }
  .afspraak-kaart {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 32px;
  }
  .afspraak-kaart__tekst { flex: 1 1 auto; }
  .afspraak-kaart__actie { flex: 0 0 240px; }
}

/* ============================================================= *
 *  Cookiebanner (zie assets/js/cookie-banner.js)
 *  Vaste balk onderaan; Weigeren even prominent bereikbaar als
 *  Accepteren (AP-vereiste). Mobiel gestapeld, vanaf tablet één rij.
 * ============================================================= */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px;
  background: var(--kleur-wit);
  border-top: 1px solid var(--kleur-lichtgrijs);
  box-shadow: 0 -2px 12px rgba(36, 34, 30, .12);
}
.cookie-banner__tekst {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--kleur-donkerblauw);
  max-width: 65ch;
}
.cookie-banner__tekst a {
  color: var(--kleur-primair);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner__tekst a:hover { color: var(--kleur-primair-hover); }
.cookie-banner__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cookie-banner__knop {
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--font-basis);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cookie-banner__knop:focus-visible {
  outline: 3px solid var(--kleur-primair);
  outline-offset: 2px;
}
.cookie-banner__knop--accepteren {
  background: var(--kleur-primair);
  color: var(--kleur-wit);
  border: 1px solid var(--kleur-primair);
}
.cookie-banner__knop--accepteren:hover { background: var(--kleur-primair-hover); }
.cookie-banner__knop--weigeren {
  background: var(--kleur-wit);
  color: var(--kleur-donkerblauw);
  border: 1px solid var(--kleur-lichtgrijs);
}
.cookie-banner__knop--weigeren:hover { background: var(--kleur-vlak-zacht); }

@media (min-width: 768px) {
  .cookie-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 32px;
  }
  .cookie-banner__knoppen { flex-wrap: nowrap; }
}

/* ══════════════════════════════════════════════════════
   ONDERWERPPAGINA'S "STAPPEN NAAR AARDGASVRIJ"
   (public/pages/stappen/ — hub + de tien onderwerppagina's)
   ══════════════════════════════════════════════════════ */

/* Hero-icoon boven de titel van een onderwerppagina */
.onderwerp-hero__icoon {
  display: block;
  font-size: 48px;
  line-height: 1;
  color: var(--kleur-primair);
  margin-bottom: 12px;
}

/* Doorlopende tekst binnen een sectie: lijsten en tussenkoppen die de
   .pilot-sectie-basis niet dekt. Zelfde regelafstand en tekstbreedte. */
.onderwerp-tekst { max-width: 65ch; }
.onderwerp-tekst h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  line-height: 1.35;
  margin: 24px 0 8px;
}
.onderwerp-tekst p + p { margin-top: 16px; }
.onderwerp-tekst ul,
.onderwerp-tekst ol {
  margin: 16px 0 0;
  padding-left: 22px;
  color: var(--kleur-donkerblauw);
  line-height: 1.7;
}
.onderwerp-tekst li + li { margin-top: 8px; }

/* Lijsten binnen een uitklapper krijgen dezelfde opmaak */
.pg-onderwerp .faq-item__antwoord ul,
.pg-onderwerp .faq-item__antwoord ol {
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--kleur-donkerblauw);
  line-height: 1.7;
}
.pg-onderwerp .faq-item__antwoord li + li { margin-top: 8px; }
.pg-onderwerp .faq-item__antwoord h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 16px 0 6px;
}

/* Accentblok binnen een onderwerppagina: vuistregel, let-op of tip.
   Warmgrijze rand + bosgroene accentrand links, dus geen nieuwe kleuren. */
.onderwerp-kader {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 65ch;
  margin: 24px 0 0;
  padding: 16px;
  background-color: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--kleur-primair);
  border-radius: 8px;
}
.onderwerp-kader i {
  flex: none;
  font-size: 24px;
  color: var(--kleur-primair);
  margin-top: 2px;
}
.onderwerp-kader p { margin: 0; }
.onderwerp-kader p + p { margin-top: 8px; }
.onderwerp-kader--let-op { border-left-color: var(--kleur-steun); }
.onderwerp-kader--let-op i { color: var(--kleur-steun); }

/* Hub: de onderwerpen gegroepeerd per fase */
/* 32px boven elke groep, ook de eerste: die plakte anders tegen de intro-alinea. */
.onderwerp-groep { margin-top: 32px; }
.onderwerp-groep__kop {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 16px;
}
.onderwerp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.onderwerp-grid > li { display: flex; }
.onderwerp-kaart {
  display: flex;
  flex: 1;
  gap: 16px;
  align-items: flex-start;
  min-height: 48px;
  padding: 20px;
  background-color: var(--kleur-wit);
  border: 1px solid color-mix(in srgb, var(--rand) 85%, var(--kleur-donkerblauw));
  border-radius: 8px;
  text-decoration: none;
  color: var(--kleur-donkerblauw);
  transition: box-shadow .15s ease, transform .15s ease;
}
.onderwerp-kaart:hover,
.onderwerp-kaart:focus-visible {
  box-shadow: 0 2px 12px rgba(36,34,30,0.12);
  transform: translateY(-1px);
}
.onderwerp-kaart__icoon {
  flex: none;
  font-size: 32px;
  line-height: 1;
  color: var(--kleur-primair);
}
.onderwerp-kaart__titel {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.onderwerp-kaart__kort {
  display: block;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Kruimelpad: beantwoordt "waar ben ik" en "hoe kom ik terug" vóór de titel. */
/* Blijft bij het scrollen staan, direct onder de hoofdnavigatiebalk (64px), zodat
   je op een lang artikel altijd ziet waar je bent en terug kunt. Eigen dekkende
   achtergrond en z-index onder die van de hoofdbalk, anders schuift de tekst er
   zichtbaar doorheen. */
.kruimelpad {
  position: sticky;
  top: 64px;
  z-index: 90;
  padding: 10px 20px;
  background: var(--kleur-wit);
  border-bottom: 1px solid var(--rand);
}
.kruimelpad__lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--kleur-donkerblauw);
}
.kruimelpad__lijst li { display: flex; align-items: center; gap: 8px; }
.kruimelpad__lijst li + li::before {
  content: "\203A";                 /* rechte enkele aanhaling als scheiding */
  color: var(--kleur-donkerblauw);
  opacity: 0.55;
}
.kruimelpad__lijst a { color: var(--kleur-steun); text-decoration: underline; text-underline-offset: 3px; }
.kruimelpad__lijst a:hover,
.kruimelpad__lijst a:focus-visible { color: var(--kleur-donkerblauw); }
.kruimelpad__lijst [aria-current="page"] { font-weight: 600; }

/* "Op deze pagina": sprongmenu binnen een lang artikel. */
.op-deze-pagina-houder { max-width: 1100px; margin: 0 auto; padding: 24px 20px 0; }
.op-deze-pagina-houder .op-deze-pagina { margin-top: 0; }
.op-deze-pagina {
  max-width: 65ch;
  margin: 24px 0 0;
  padding: 16px 20px;
  background-color: var(--kleur-wit);
  border: 1px solid color-mix(in srgb, var(--rand) 85%, var(--kleur-donkerblauw));
  border-radius: 8px;
}
.op-deze-pagina__kop {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kleur-steun);
  margin: 0 0 10px;
}
.op-deze-pagina ul { margin: 0; padding-left: 20px; }
.op-deze-pagina li + li { margin-top: 6px; }
.op-deze-pagina a {
  color: var(--kleur-donkerblauw);
  text-decoration: underline;
  text-underline-offset: 3px;
  line-height: 1.5;
}
.op-deze-pagina a:hover,
.op-deze-pagina a:focus-visible { color: var(--kleur-primair); }

/* "Verder lezen" onderaan: twee of drie verwante artikelen, niet de hele reeks. */
.onderwerp-verder { padding-bottom: 48px; }
.onderwerp-verder > .pilot-sectie__inner > h2 { font-size: 1.35rem; }
.onderwerp-verder > .pilot-sectie__inner > p { margin-top: 16px; }
.onderwerp-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.onderwerp-tegels > li { display: flex; }
/* Iets donkerder dan --rand: de kale randkleur haalt 2,94:1 op de creme
   achtergrond en blijft daarmee onder de 3:1 die WCAG voor de begrenzing van
   een bedienbaar element vraagt. Afgeleid uit bestaande tokens. */
.onderwerp-tegel {
  display: flex;
  flex: 1;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 12px 14px;
  background-color: var(--kleur-wit);
  border: 1px solid color-mix(in srgb, var(--rand) 85%, var(--kleur-donkerblauw));
  border-radius: 8px;
  text-decoration: none;
  color: var(--kleur-donkerblauw);
  line-height: 1.35;
  transition: box-shadow .15s ease, transform .15s ease;
}
a.onderwerp-tegel:hover,
a.onderwerp-tegel:focus-visible {
  box-shadow: 0 2px 12px rgba(36,34,30,0.12);
  transform: translateY(-1px);
}
.onderwerp-tegel__icoon {
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--kleur-primair);
}
.onderwerp-tegel__titel { font-weight: 600; font-size: 0.95rem; }
/* De pagina waar de bezoeker is: recessief vlak, geen link, en het woordlabel
   "Je bent hier" als tweede signaal naast de kleur. */
.onderwerp-tegel--huidig {
  flex-wrap: wrap;
  background-color: var(--kleur-vlak-zacht);
  border-color: var(--kleur-primair);
  cursor: default;
}
.onderwerp-tegel__hier {
  flex-basis: 100%;
  padding-left: 34px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Bosgroen, niet steun-oranje: oranje haalt op dit lichtgrijze vlak maar
     4,31:1 en blijft daarmee onder de WCAG-eis van 4,5:1 voor kleine tekst. */
  color: var(--kleur-primair);
}
/* Zelfde flex-wrap-truc als --huidig hierboven, nu voor een tweede tekstregel
   i.p.v. een statuslabel: gebruikt op de wervingsteam-hub, waar de titel
   alleen niet altijd genoeg zegt over wat een tool doet. */
.onderwerp-tegel--met-beschrijving { flex-wrap: wrap; align-items: flex-start; }
.onderwerp-tegel__beschrijving {
  flex-basis: 100%;
  padding-left: 34px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--kleur-donkerblauw);
  opacity: 0.75;
}

@media (min-width: 768px) {
  .onderwerp-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══ Pagina: /zoeken (sitebrede zoekfunctie) ═══
   Index: /assets/zoekindex.json — deploy-artefact, gegenereerd door
   scripts/genereer-zoekindex.php (zie CLAUDE.md, sectie Zoekfunctie). */
.zoeken-hero {
  background: color-mix(in srgb, var(--kleur-accent) 8%, var(--kleur-wit));
  padding: 48px 20px;
  text-align: center;
}
.zoeken-hero__inner { max-width: 760px; margin: 0 auto; }
.zoeken-hero h1 {
  font-size: 2rem; font-weight: 700;
  color: var(--kleur-donkerblauw); line-height: 1.25; margin: 0 0 16px;
}
.zoeken-hero p {
  font-size: 1.1rem; color: var(--kleur-donkerblauw);
  line-height: 1.65; margin: 0 auto; max-width: 60ch;
}

.zoeken-sectie { padding: 32px 20px 48px; }
.zoeken-sectie__inner { max-width: 760px; margin: 0 auto; }

.zoeken-formulier label {
  display: block; font-weight: 700;
  color: var(--kleur-donkerblauw); margin-bottom: 8px;
}
.zoeken-invoer { position: relative; }
.zoeken-invoer__icoon {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; color: var(--kleur-lichtgrijs);
  pointer-events: none;
}
.zoeken-invoer input {
  width: 100%; min-height: 48px;
  padding: 12px 16px 12px 48px;
  font-size: 1rem; font-family: var(--font-basis);
  color: var(--kleur-donkerblauw);
  background: var(--kleur-wit);
  border: 1px solid var(--rand); border-radius: 8px;
}
.zoeken-invoer input:focus {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 1px; border-color: var(--kleur-primair);
}

.zoeken-status { margin: 16px 0 0; font-size: .9rem; color: var(--kleur-donkerblauw); }
.zoeken-leeg   { margin: 8px 0 0; line-height: 1.65; color: var(--kleur-donkerblauw); }

.zoek-resultaat {
  background: var(--kleur-wit);
  border: 1px solid var(--rand); border-radius: 8px;
  padding: 16px; margin-top: 16px;
}
.zoek-resultaat__pagina {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--kleur-steun); margin: 0 0 4px;
}
.zoek-resultaat__kop { font-size: 1.05rem; line-height: 1.4; margin: 0 0 8px; }
.zoek-resultaat__kop a { color: var(--kleur-primair); text-decoration: none; }
.zoek-resultaat__kop a:hover,
.zoek-resultaat__kop a:focus { color: var(--kleur-primair-hover); text-decoration: underline; }
.zoek-resultaat__tekst {
  font-size: .9rem; line-height: 1.6;
  color: var(--kleur-donkerblauw); margin: 0;
}
.zoek-resultaat mark,
.zoeken-sectie mark {
  background: color-mix(in srgb, var(--kleur-accent) 35%, var(--kleur-wit));
  color: inherit; border-radius: 2px; padding: 0 1px;
}

/* ============================================================
   Offerte-interesse: knoppen + inlogmodal (Pico-koppeling)
   Zie assets/js/offerte-interesse.js en templates/login-modal.php.
   ============================================================ */

/* De "Ik heb interesse"-knop is een <button> met de bestaande kaartknop-klassen
   (.maatregel-kaart__offerte / .techniek-kaart__offerte-btn); reset alleen de
   browserdefaults, de maat en kleur komen uit die klassen. */
.interesse-knop {
  font-family: var(--font-basis);
  border: 0;
  cursor: pointer;
}
.interesse-knop:disabled { cursor: default; }

/* Doorgegeven: recessieve bevestiging in plaats van een actieknop. */
.interesse-knop--doorgegeven,
.interesse-knop--doorgegeven:disabled,
.interesse-knop--doorgegeven:hover,
.interesse-knop--doorgegeven:focus {
  background: var(--kleur-vlak-zacht);
  color: var(--kleur-groen);
  border: 2px solid var(--kleur-groen);
}

/* Foutmelding direct naast/onder de knop. */
.interesse-knop__fout {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
  color: var(--kleur-fout);
}

/* AVG-regel boven de kaarten: wat er gebeurt als je interesse doorgeeft. */
.dashboard-panel__privacy {
  margin: 0 0 24px;
  max-width: 65ch;
  font-size: 1rem;
}

/* --- Inlogmodal (pagina blijft open; inloggen/aanmelden in nieuw tabblad) --- */
.login-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.login-modal[hidden] { display: none; }
.login-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(36, 34, 30, .55);
}
.login-modal__paneel {
  position: relative;
  background: var(--kleur-wit);
  border-radius: var(--radius);
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
.login-modal__kop {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 24px 24px 0;
}
.login-modal__kop h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--kleur-donkerblauw);
}
.login-modal__sluiten {
  flex-shrink: 0;
  width: 48px; height: 48px; margin: -8px -8px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius);
  background: none; color: var(--kleur-donkerblauw);
  font-size: 1.25rem; cursor: pointer;
}
.login-modal__sluiten:hover,
.login-modal__sluiten:focus { background: var(--kleur-lichtblauw); }
.login-modal__body { padding: 16px 24px 24px; }
.login-modal__body p { margin: 0 0 16px; line-height: 1.5; }
.login-modal__privacy { font-size: 1rem; }
.login-modal__knoppen {
  display: flex; flex-direction: column; gap: 8px;
  margin: 24px 0 16px;
}
.login-modal__knoppen .btn-primair { text-align: center; }
.login-modal__knop-secundair {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 20px;
  border: 2px solid var(--kleur-primair); border-radius: var(--radius);
  color: var(--kleur-primair);
  font-weight: 600; text-decoration: none;
}
.login-modal__knop-secundair:hover,
.login-modal__knop-secundair:focus {
  background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
}
.login-modal__melding {
  color: var(--kleur-fout);
  font-weight: 600;
}
.login-modal__verder {
  border-top: 1px solid var(--kleur-lichtgrijs);
  padding-top: 16px;
}
.login-modal__verder-vraag { font-weight: 600; }
.login-modal__verder-knop {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 10px 20px;
  border: 0; border-radius: var(--radius);
  background: var(--kleur-primair); color: var(--kleur-wit);
  font-family: var(--font-basis); font-size: 1rem; font-weight: 600;
  cursor: pointer;
}
.login-modal__verder-knop:hover,
.login-modal__verder-knop:focus { background: var(--kleur-primair-hover); }

@media (min-width: 480px) {
  .login-modal__knoppen { flex-direction: row; }
}

/* Inline inlogformulier in de inlogmodal (api/login + ALTCHA). */
.login-modal__toon-login {
  border: 0;
  cursor: pointer;
  font-family: var(--font-basis);
}
.login-modal__formulier { margin: 24px 0 16px; }
.login-modal__veld { margin-bottom: 16px; }
.login-modal__veld label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--kleur-donkerblauw);
}
.login-modal__veld input {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: var(--radius);
  font-family: var(--font-basis);
  font-size: 1rem;
  color: var(--kleur-donkerblauw);
  background: var(--kleur-wit);
}
.login-modal__veld input:focus {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 1px;
  border-color: var(--kleur-primair);
}
.login-modal__onthouden {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.login-modal__onthouden input {
  width: 20px;
  height: 20px;
  accent-color: var(--kleur-primair);
}
.login-modal__wachtwoord-link { margin-top: 16px; }
.login-modal__wachtwoord-link a { color: var(--kleur-steun); }
.login-modal__wachtwoord-link a:hover,
.login-modal__wachtwoord-link a:focus { color: var(--kleur-donkerblauw); }
.login-modal__verder-knop--secundair {
  background: var(--kleur-wit);
  color: var(--kleur-primair);
  border: 2px solid var(--kleur-primair);
}
.login-modal__verder-knop--secundair:hover,
.login-modal__verder-knop--secundair:focus {
  background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
  color: var(--kleur-primair);
}

/* Bevestigingsdialoog offerte-aanvraag: klein paneel; de secundaire knop is
   ook als <button> bruikbaar (Annuleren), dus browserdefaults resetten. */
.login-modal__paneel--klein { max-width: 420px; }
.login-modal__knop-secundair {
  cursor: pointer;
  font-family: var(--font-basis);
  font-size: 1rem;
  background: var(--kleur-wit);
}

/* Mijn account (/dashboard/): secties met rustige scheiding. */
.account-sectie {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--kleur-vlak-zacht);
}
.account-sectie h2 { font-size: 1.15rem; margin: 0 0 16px; }
.account-voorkeur-toelichting {
  max-width: 65ch;
  margin: 8px 0 16px;
  font-size: 1rem;
}

/* =====================================================================
   ZONEBALK-DASHBOARD (public/dashboard/woning-in-kaart/dashboard.php)
   Overgenomen uit mockups/vragenlijst-en-dashboard/maatregelen-pakket-zonebalk-v2.html, met de
   huisstijlvariabelen i.p.v. losse hex. Alles onder de prefix zb- zodat het
   niet botst met .btn, .techniek-kaart e.d. Mobile-first: basis = telefoon,
   daarna @media (min-width: ...). Spacing 8/16/24/32/48, radius 8px.
   ===================================================================== */
.zb {
  --zb-rand:          var(--kleur-lichtgrijs);
  --zb-rand-licht:    color-mix(in srgb, var(--kleur-lichtgrijs) 45%, var(--kleur-wit));
  --zb-tekst-gedempt: color-mix(in srgb, var(--kleur-donkerblauw) 68%, var(--kleur-wit));
  --zb-groen-zacht:   color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
  --zb-steun-zacht:   color-mix(in srgb, var(--kleur-steun) 8%, var(--kleur-wit));
  /* Tokens uit het design system (tokens/base.css) voor de overgenomen componenten
     StapKop, WarmteoplossingKaart en MaandlastenVergelijking (04-09-2026). */
  --letter-eyebrow:   .1em;
  --easing:           ease;
  --radius-rond:      999px;
  --kleur-logo-oranje: #F47B20; /* helder logo-oranje: alleen als accentvlak/-rand, nooit tekst */
  /* De energiepost in het balkje van de techniekkaart: steunoranje richting amber. */
  --zb-energie:       color-mix(in srgb, var(--kleur-steun) 72%, var(--kleur-accent));
  --zb-rood:          var(--kleur-fout);
  --zb-oranje:        var(--kleur-steun);
  --zb-groen:         var(--kleur-groen);
  /* Badge bij "Bijna klaar": steun-oranje leest als rood, dus halverwege
     steun en bosgroen (contrast met wit 6,7:1). */
  --zb-oranje-badge:  color-mix(in srgb, var(--kleur-steun) 50%, var(--kleur-primair));
  color: var(--kleur-donkerblauw);
  font-size: 16px;
  line-height: 1.5;
}
.zb__inner { max-width: 920px; margin: 0 auto; }
.zb__eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kleur-steun); margin: 0 0 8px;
}
.zb__kop h1 { font-size: 26px; line-height: 1.25; margin: 0 0 8px; color: var(--kleur-donkerblauw); }
/* Adresregel onder de kop (BugHerd #15): straat en woonplaats uit de BAG-cache,
   zodat de bewoner ziet dat het over zijn woning gaat. Gedempt, want het is een
   bevestiging en geen kop. */
.zb__adres { display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
  font-size: 1rem; color: var(--zb-tekst-gedempt); }
.zb__adres i { font-size: 16px; color: var(--kleur-primair); flex: none; }
.zb__intro { margin: 0 0 24px; max-width: 65ch; }
.zb[aria-busy="true"] .zb-zone-schaal,
.zb[aria-busy="true"] #zbMaatregelen,
.zb[aria-busy="true"] .zb-techniek-lijst,
.zb[aria-busy="true"] .zb-bon { opacity: .6; transition: opacity .2s ease; }
.zb-fout {
  display: none; background: color-mix(in srgb, var(--kleur-fout) 8%, var(--kleur-wit));
  border: 1px solid var(--kleur-fout); color: var(--kleur-fout); border-radius: 8px;
  padding: 16px; margin: 0 0 24px; font-size: 15px;
}
.zb-fout.zichtbaar { display: flex; gap: 8px; align-items: flex-start; }

/* ---------- De rails ----------
   Herbouw van docs/design/design_handoff_v2_leeskolom (v2 "rails in de leeskolom",
   met de mobiele aanvulling uit MOBIEL.md; besluit reviewronde Stijn, 03-09-2026).
   De vier stappen staan tegelijk in één scroller, links een kantlijn met de lijn en
   de bollen. De stap waar de bewoner is staat als kopbalk vastgezet bovenaan, de
   stappen die hij gehad heeft stapelen daar klein boven met hun statusupdate, de
   komende stappen staan vastgezet onderaan het scherm. De actieve stap volgt uit de
   scrollstand; er is géén scroll-snap (besluit 04-09-2026: de snap trok na elk
   stopmoment aan de pagina en herrekende bij elke wissel van de navigatiebalk, wat
   schokkerig scrolde). scroll-padding-top blijft staan voor ankersprongen.

   Maten (mobiel → vanaf 768px): kantlijn 40 → 64px, lijn op 15 → 21px, kleine balk
   32 → 36px, kopbalk 58 → 68px, bol huidige stap 36 → 44px, overige bollen 24 → 26px.

   De JS (assets/js/zonebalk-dashboard.js) zet op <html>: --zb-stap (1..4), --zb-nav
   (de zichtbare hoogte van de site-navigatie; op een telefoon schuift die weg bij naar
   beneden scrollen), --zb-melding (de plakkende melding buiten het doelgebied) en
   --zb-deel (het groene deel van de lijn). De stapels rekent de CSS daaruit uit, zodat
   er niets per scroll-frame gemeten hoeft te worden. */
@property --zb-nav {
  syntax: '<length>';
  inherits: true;
  initial-value: 64px;
}
html.zb-rails-aan {
  --zb-stap: 1;
  --zb-nav: 64px;           /* zichtbare hoogte van de site-navigatie (JS; 0px als hij weg is) */
  --zb-nav-max: 64px;       /* diezelfde hoogte als hij in beeld staat (JS) */
  --zb-melding: 0px;        /* de plakkende melding "buiten het doelgebied", als die er is (JS) */
  --zb-top: calc(var(--zb-nav) + var(--zb-melding));            /* alles wat boven de rails plakt */
  --zb-top-max: calc(var(--zb-nav-max) + var(--zb-melding));
  --zb-balk: 32px;          /* hoogte van een kleine railsbalk */
  --zb-kop: 58px;           /* hoogte van de kopbalk van de huidige stap */
  --zb-dek: 44px;           /* dekkende strook onder de laatste vastgezette balk */
  --zb-kantlijn: 40px;
  --zb-lijn-x: 15px;
  /* Wat de bovenstapel en de onderstapel innemen; beide lopen mee met de stap. */
  --zb-stapel-boven: calc((var(--zb-stap) - 1) * var(--zb-balk) + var(--zb-kop));
  --zb-stapel-onder: calc((4 - var(--zb-stap)) * var(--zb-balk) + var(--zb-dek));
  scroll-padding-top: calc(var(--zb-top) + var(--zb-stapel-boven) + 8px);
  transition: --zb-nav .22s ease;   /* alles wat van --zb-nav afhangt schuift mee met de navigatie */
}
@media (min-width: 768px) {
  html.zb-rails-aan { --zb-balk: 36px; --zb-kop: 68px; --zb-dek: 24px; --zb-kantlijn: 64px; --zb-lijn-x: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  html.zb-rails-aan { transition: none; }
}
/* Het wegschuiven van de hoofdnavigatie bij scrollen (besluit 03-09-2026) staat sinds
   05-09-2026 UIT (besluit Jaime: het maakte het scrollen onrustig). De regels blijven staan
   voor de schakelaar NAV_SCHUIFT_WEG in zonebalk-dashboard.js; zolang die op false staat
   krijgt <html> de klasse ww-nav-weg nooit en houdt --zb-nav zijn echte hoogte. */
html.zb-rails-aan body > nav { transition: transform .22s ease; }
html.zb-rails-aan.ww-nav-weg body > nav { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  html.zb-rails-aan body > nav { transition: none; }
}
/* De melding "buiten het doelgebied" plakt onder de navigatie en schuift mee als die weg
   is; hij ligt bóven de rails, want hij is wegklikbaar. */
html.zb-rails-aan .buiten-doelgebied-melding--dashboard { top: var(--zb-nav); z-index: 35; }

/* De route is een grid met één rij: de rails beslaat beide kolommen en plakt (start-
   uitgelijnd, zo hoog als het scherm), de leeskolom staat in kolom 2 in dezelfde rij en
   bepaalt de hoogte. Zo krijgen de railsbalken de volle leesbreedte terwijl de lijn en de
   bollen in de kantlijn blijven. */
.zb-route { display: grid; grid-template-columns: var(--zb-kantlijn, 40px) minmax(0, 1fr); }
.zb-route__kolom { grid-column: 2; grid-row: 1; min-width: 0; }
/* De SI-balk als eigen kolom bestaat alleen vanaf 1024px (zie het blok verderop); onder
   die breedte staat hij in stap 1, 2 en 3 zelf en is deze kolom er niet. */
.zb-si-kolom { display: none; }
.zb .zb-rails {  /* .zb ervoor zodat de plakstand wint van .zb-rr-el */
  grid-column: 1 / -1; grid-row: 1; align-self: start;
  position: sticky; top: var(--zb-top); z-index: 30;   /* plakt onder wat er al plakt (navigatie, melding) */
  height: calc(100vh - var(--zb-top)); height: calc(100dvh - var(--zb-top));
  padding-bottom: var(--zb-dek);
  display: flex; flex-direction: column;
  pointer-events: none;   /* de inhoud eronder blijft bedienbaar; de regels zetten het weer aan */
}
.zb-rails__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* De verticale lijn: het afgelegde deel groen, de rest lichtgrijs. */
.zb-rails__lijn {
  position: absolute; left: var(--zb-lijn-x); top: 0; bottom: 0; width: 2px; z-index: 0;
  background: linear-gradient(180deg, var(--kleur-primair) 0 var(--zb-deel, 12.5%), var(--zb-rand-licht) var(--zb-deel, 12.5%) 100%);
  transition: background .4s ease;
}
/* Dekkende strook onder de laatste vastgezette balk, anders scrolt de inhoud er
   zichtbaar doorheen. */
.zb-rails__dek { position: absolute; left: 0; right: 0; bottom: 0; height: var(--zb-dek); background: var(--kleur-lichtblauw); z-index: 0; }
/* Eén regel per stap: de balk (een knop) en, alleen bij de huidige stap, de twee
   sprongknoppen ernaast. Gehad en komend: kleine balk met naam · status; huidig: kopbalk. */
.zb-rails__item { flex: none; }
.zb-rails__item--huidig { flex: 1 1 auto; }   /* groeit: gehad stapelt boven, komend onder */
.zb-rails__regel { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%; background: var(--kleur-lichtblauw); pointer-events: auto; }
.zb-rails__rij {
  flex: 1 1 auto; min-width: 0; min-height: var(--zb-balk);
  display: flex; align-items: center; gap: 8px;
  text-align: left; border: 0; border-radius: 0; cursor: pointer; background: transparent;
  font-family: var(--font-basis); color: inherit; padding: 3px 0;
}
.zb-rails__rij:focus-visible { outline: 2px solid var(--kleur-primair); outline-offset: -2px; border-radius: 8px; }
.zb-rails__bolcel { flex: none; width: 32px; display: grid; place-items: center; }
.zb-rails__bol {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 11px; font-weight: 700; background: var(--kleur-lichtblauw);
  border: 2px solid var(--zb-rand-licht); color: var(--zb-tekst-gedempt);
  transition: width .25s ease, height .25s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.zb-rails__tekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; min-width: 0; flex: 1 1 auto; }
.zb-rails__kop { display: none; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--kleur-donkerblauw); }
.zb-rails__naam { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--zb-tekst-gedempt); }
.zb-rails__punt { font-size: 11px; color: color-mix(in srgb, var(--kleur-lichtgrijs) 85%, var(--kleur-wit)); }
.zb-rails__status { font-size: 11px; line-height: 1.3; color: var(--zb-tekst-gedempt); }
.zb-rails__status--lang { display: none; }   /* op een telefoon de korte variant */
/* Gehad: groene bol met wit cijfer, de status in bosgroen. */
.zb-rails__regel--gehad .zb-rails__bol { background: var(--kleur-primair); border-color: var(--kleur-primair); color: var(--kleur-wit); }
.zb-rails__regel--gehad .zb-rails__naam { color: var(--kleur-donkerblauw); }
.zb-rails__regel--gehad .zb-rails__status { color: var(--kleur-primair); font-weight: 600; }
/* Huidig: kopbalk met de grote, omringde bol en de volledige stapnaam, zonder status. */
.zb-rails__regel--huidig { min-height: var(--zb-kop); border-bottom: 1px solid var(--zb-rand-licht); }
.zb-rails__regel--huidig .zb-rails__rij { padding: 8px 0 10px; cursor: default; }
.zb-rails__regel--huidig .zb-rails__bol {
  width: 36px; height: 36px; font-size: 15px; background: var(--kleur-wit);
  border: 3px solid var(--kleur-primair); color: var(--kleur-primair);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--kleur-primair) 10%, var(--kleur-lichtblauw));
}
.zb-rails__regel--huidig .zb-rails__tekst { display: block; }
.zb-rails__regel--huidig .zb-rails__kop { display: block; }
.zb-rails__regel--huidig .zb-rails__naam,
.zb-rails__regel--huidig .zb-rails__punt,
.zb-rails__regel--huidig .zb-rails__status { display: none; }
/* Komend: de eerste komende regel scheidt zich met een bovenrand van de inhoud. */
.zb-rails__regel--eerstvolgend { border-top: 1px solid var(--zb-rand-licht); }
/* Vorige/volgende: groene bollen rechts in de kopbalk, niet geanimeerd. 44px is het
   iOS-hittarget uit het design; de kopbalk zelf blijft ≥ 58px hoog. */
.zb-rails__sprong {
  flex: none; display: grid; width: 44px; height: 44px; border-radius: 50%; padding: 0;
  place-items: center; border: 0; background: var(--kleur-primair); color: var(--kleur-wit);
  font-size: 18px; cursor: pointer;
}
.zb-rails__sprong:hover, .zb-rails__sprong:focus-visible { background: var(--kleur-primair-hover); }
.zb-rails__sprong[hidden] { display: none; }
@media (min-width: 768px) {
  .zb-rails__regel { gap: 12px; }
  .zb-rails__rij { gap: 12px; padding: 5px 0; }
  .zb-rails__bolcel { width: 44px; }
  .zb-rails__bol { width: 26px; height: 26px; font-size: 12px; }
  .zb-rails__regel--huidig .zb-rails__rij { padding: 8px 0 12px; }
  .zb-rails__regel--huidig .zb-rails__bol { width: 44px; height: 44px; font-size: 17px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--kleur-primair) 10%, var(--kleur-lichtblauw)); }
  .zb-rails__tekst { gap: 6px; }
  .zb-rails__kop { font-size: 22px; }
  .zb-rails__naam { font-size: 13px; }
  .zb-rails__punt { font-size: 12px; }
  .zb-rails__status { font-size: 12px; }
  .zb-rails__status--kort { display: none; }
  .zb-rails__status--lang { display: inline; }
  .zb-rails__sprong { font-size: 20px; }
}

/* ---------- De stappen in de leeskolom ---------- */
/* Echte ruimte voor de vastgezette stapels (geen padding op inhoudsgestuurde secties):
   boven de inhoud een spacer zo hoog als de bovenstapel (zolang de rails nog niet plakt
   staat hij bovenaan de route, precies daar), onder elke stap de grootst mogelijke
   onderstapel, zodat de wenkende bol nooit onder de vastgezette komende stappen
   verdwijnt. De spacer groeit met de stap mee, precies zoveel als de bovenstapel
   groeit, dus de stapposities blijven op hun plek. */
.zb-rails__boven { height: var(--zb-stapel-boven, 58px); }
.zb-mijlpaal {
  position: relative; margin: 0;
  /* Geen minimumhoogte meer (BugHerd #183, 06-09-2026): die vulde een korte stap op tot bijna
     de schermhoogte en liet een lege strook boven de volgende stapkop achter. */
  padding: 8px 0 calc(3 * var(--zb-balk, 32px) + var(--zb-dek, 44px));
}
.zb-route__staart { height: 80px; }
/* De stapkop staat op elke breedte als kaart in de inhoud (design system StapKop; besluit
   Jaime 05-09-2026, daarvoor was hij onder 1024px alleen voor hulptechnologie omdat de
   rails de stap al toont). Onder 1024px dubbelt hij dus met de kopbalk van de rails. */
/* ===== Stapkop (design system StapKop, 04-09-2026) =====
   Het stapnummer als eyebrow, de vraag van de stap als titel, rechts de twee pijlbollen,
   en in stap 3 de wachtschakelaar als `extra`. Basis = de smalle stand (breed={false}):
   de extra valt onder de titel met een lijn erboven; vanaf 768px staat hij op de
   titelregel tussen titel en pijlen. De kop staat op elke breedte in beeld (besluit
   05-09-2026), ook onder 1024px naast de kopbalk van de rails. */
.zb-stapkop {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  background: var(--kleur-wit); border: 1px solid var(--zb-rand-licht); border-radius: 8px; box-shadow: var(--schaduw-zacht);
  padding: 14px 16px 14px 20px; margin: 0 0 24px;
}
.zb-stapkop__tekst { grid-column: 1; grid-row: 1; min-width: 0; }
.zb-stapkop__nr { display: block; font-size: .8rem; font-weight: 700; letter-spacing: var(--letter-eyebrow); text-transform: uppercase; color: var(--kleur-steun); }
.zb-stapkop__titel { display: block; margin-top: 2px; font-size: 1.3rem; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; color: var(--kleur-donkerblauw); }
/* Gedempt: de stap staat stil (de bewoner wacht met kiezen), de pijlen wijzen verder. */
.zb-stapkop--gedempt .zb-stapkop__titel { color: var(--zb-tekst-gedempt); }
.zb-stapkop__extra { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--zb-rand-licht); margin-top: 12px; padding-top: 4px; }
/* De pijlbollen staan op elke stapkop, altijd (besluit Jaime 05-09-2026). Tot dan alleen op
   de huidige stap (.zb-mijlpaal--huidig); nu de kop niet meer plakt (BugHerd #170) wisselt
   de huidige stap tijdens het scrollen terwijl de kop nog in beeld is, en verdwenen de
   pijlen onder je ogen. */
.zb-stapkop__nav { grid-column: 2; grid-row: 1; display: flex; gap: 8px; flex: none; align-self: center; }
.zb-mijlpaal__sprong {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--kleur-primair); color: var(--kleur-wit);
  display: grid; place-items: center; font-size: 20px;
  transition: background var(--overgang-snel) var(--easing);
}
.zb-mijlpaal__sprong:hover, .zb-mijlpaal__sprong:focus-visible { background: var(--kleur-primair-hover); }
@keyframes ww-pijl-wip-op   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ww-pijl-wip-neer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.zb-stapkop--gedempt .zb-mijlpaal__sprong .ph-arrow-up { animation: ww-pijl-wip-op 1.5s ease-in-out infinite; }
.zb-stapkop--gedempt .zb-mijlpaal__sprong .ph-arrow-down { animation: ww-pijl-wip-neer 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .zb-stapkop--gedempt .zb-mijlpaal__sprong i { animation: none; }
}
@media (min-width: 768px) {
  .zb-stapkop { column-gap: 20px; }
  .zb-stapkop--extra { grid-template-columns: auto minmax(0, 1fr) auto; }
  .zb-stapkop__titel { font-size: 1.6rem; }
  /* Breed: de extra op de titelregel, tussen titel en pijlen. */
  .zb-stapkop__extra { grid-column: 2; grid-row: 1; border-top: 0; margin-top: 0; padding-top: 0; justify-self: center; align-self: center; min-width: 0; }
  .zb-stapkop--extra .zb-stapkop__nav { grid-column: 3; }
  .zb-stapkop__nav { gap: 10px; }
  .zb-mijlpaal__sprong { width: 44px; height: 44px; }
}
.zb-mijlpaal__rest { position: relative; }
.zb-mijlpaal__intro { margin: 0 0 16px; font-size: 15px; color: var(--zb-tekst-gedempt); max-width: 62ch; }
/* De wenkende bol "Volgende stap · <naam>" onderaan stap 1 t/m 3 (.zb-stapnav) is op
   07-09-2026 vervallen (BugHerd #243): vanaf 1024px was hij al verborgen (#169), en op een
   telefoon dubbelde hij met de pijlbollen in de stapkop en de rails. */
@media (prefers-reduced-motion: reduce) {
  .zb-rails__bol, .zb-rails__lijn { transition: none; }
  .zb-zone-merk.zb-slaat, .zb-zone-merk.zb-slaat::after, .zb-zone-merklegenda li.zb-slaat, .zb-zone-merklegenda li.zb-slaat i { animation: none; }
  .zb-zone-merk--straks { transition: none; }
  .zb-wacht__baan, .zb-wacht__baan::after { transition: none; }
}

/* ---------- Rails v1: eigen kolom links (vanaf 1024px) ----------------------------
   Op een telefoon reist de bewoner door een leeskolom met de rails erin (v2): de stap
   waar hij is staat als kopbalk vastgezet, de rest stapelt klein boven en onder. Dat
   werkt daar goed, maar op een breed scherm niet: de stapels eten schermhoogte en het
   scrollen wordt onrustig. Vanaf 1024px staat de rails daarom in een eigen kolom van
   260px links van de leeskolom (handoff design_handoff_v1_linkerkolom, besluit
   03-09-2026): alle vier de regels blijven samen in beeld met bol, naam en statusupdate,
   en de zichtbare stapkop wordt een witte kaart bovenaan de stap met de twee
   navigatiebollen. Breekpunt 1024px en niet de 760px uit de handoff: onder 1024 blijft
   er na een kolom van 260px te weinig leesbreedte over voor de maatregelkaartjes (drie
   naast elkaar) en de techniekvergelijking. */
@media (min-width: 1024px) {
  html.zb-rails-aan {
    /* Er stapelt niets meer. Alles wat van de stapels afhangt (de spacer boven de inhoud,
       de plakhoogte van de SI-balk, scroll-padding-top, de minimumhoogte en de
       onderruimte van een stap) valt hiermee in een keer plat. */
    --zb-stapel-boven: 0px;
    --zb-stapel-onder: 0px;
    --zb-dek: 0px;
    --zb-lijn-x: 19px;                     /* midden van een bol van 40px */
    /* De stappenbalk plakt bovenaan en dekt dus de bovenkant van een stap af; hij telt
       mee in scroll-padding-top (ankersprongen). De hoogte komt uit zetMaten()
       (--zb-stappenbalk). */
    scroll-padding-top: calc(var(--zb-top) + var(--zb-stappenbalk, 104px) + 24px);
  }
  /* De pagina wordt breder dan de 920px van de leeskolom-rails: er staat nu een tweede
     kolom naast, en de detailkolom moet even veel ruimte houden voor de kaartjes en de
     techniekvergelijking. */
  .zb__inner { max-width: 1148px; }
  /* Drie plekken in één grid: de stappenbalk over de volle breedte in rij 1, daaronder
     links de SI-balk (een derde) en rechts de details van de stap (twee derde). Beide
     plakken; de detailkolom bepaalt de hoogte. */
  .zb-route {
    grid-template-columns: 1fr 2fr;
    column-gap: 32px;
  }
  /* De maatregelkaartjes staan vanaf 621px in twee kolommen, maar hier is hun container
     niet meer de leeskolom van 744px maar de detailkolom, en die is bij 1024px maar 629px
     breed. Twee kaartjes van 310px laten naast de prijs 85px voor de naam over en dan
     breekt "Aansluiting" midden in het woord. Daarom telt hier de beschikbare breedte:
     een kaartje krijgt minstens 340px, dus tot circa 1150px een kolom, daarboven twee.
     auto-fill (niet auto-fit) zodat een enkel kaartje niet de hele rij vult zodra er twee
     passen. De orde-kaartjes zijn compacter, maar de twee voorwaardekaarten dragen het
     label VOORWAARDE naast de naam; in drie kolommen van hooguit 225px brak "Elektrisch
     koken" daardoor af. Met minstens 230px per kaart staan ze in deze kolom (maximaal
     692px binnen de zonekaart) altijd in twee kolommen. Met .zb ervoor, anders wint het
     621px-blok verderop op volgorde. */
  .zb .zb-kolommen { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .zb .zb-kolommen--orde { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .zb-route__kolom { grid-column: 2; grid-row: 2; }
  /* De regels hoeven hier niet dekkend te zijn (er schuift niets onderdoor) en zouden de
     verbindingslijn anders afdekken; de balk als geheel dekt wél af. */
  .zb-rails__regel { background: none; }
  .zb .zb-rails {
    grid-column: 1 / -1; grid-row: 1;
    top: var(--zb-top);
    height: auto; padding: 12px 0 10px;
    pointer-events: auto;
    background: var(--kleur-lichtblauw);
    border-bottom: 1px solid var(--zb-rand-licht);
  }
  .zb-rails__dek { display: none; }
  /* De vier stappen naast elkaar; de verbindingslijn loopt horizontaal van bolmidden tot
     bolmidden, dus van 12,5% tot 87,5% van de breedte. */
  .zb-rails__lijst {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px;
    flex: none;
  }
  .zb-rails__item, .zb-rails__item--huidig { flex: none; }   /* niets groeit */
  .zb-rails__lijn {
    /* 32px = de 12px ruimte boven de bollen plus de helft van een bol van 40px, zodat
       de lijn door het midden van de bollen loopt (BugHerd #163; stond op 20px en lag
       daardoor 11px te hoog). Min 1px: de helft van de lijndikte, zodat het midden van de
       lijn en het midden van de bol samenvallen. */
    top: 31px; bottom: auto; left: 12.5%; right: 12.5%; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--kleur-primair) 0 var(--zb-deel, 12.5%), var(--zb-rand-licht) var(--zb-deel, 12.5%) 100%);
  }

  /* De SI-balk als linkerkolom: plakt onder de stappenbalk, zodat hij in beeld blijft
     terwijl de bewoner door de details scrolt. Hij loopt door in stap 4 (besluit
     03-09-2026): de bewoner ziet bij de bon nog waar zijn woning uitkomt. */
  .zb .zb-si-kolom {
    display: block;
    grid-column: 1; grid-row: 2; align-self: start;
    position: sticky; top: calc(var(--zb-top) + var(--zb-stappenbalk, 104px) + 16px);
    /* 8px, niet 24px: zo staat de bovenkant van de adresregel gelijk met de bovenkant
       van de zonekaart in de rechterkolom (besluit Stijn 05-09-2026), en komt de
       plakstand op dezelfde 24px onder de stappenbalk uit als bovenVoor() hanteert. */
    padding-top: 8px;
  }
  /* relative, niet static: de strip heeft ook de klasse .zb-rr-el en is het ankerpunt van
     de rekenregels-badge. Wel de plakstand eraf, want de kolom eromheen plakt al.
     top: 0 hoort daarbij: de sticky-top uit het 768px-blok (--zb-top + stapel) blijft
     anders staan en schuift een relative element gewoon 64px (de navigatiehoogte)
     omlaag — dáárdoor stond de kolominhoud lager dan de zonekaart ernaast. */
  .zb .zb-si-kolom .zb-balkstrip { position: relative; top: 0; margin: 0; padding: 0; box-shadow: none; background: none; }
  /* De drie balken ín de stappen zijn hier overbodig: de kolom links toont hem één keer. */
  .zb-mijlpaal .zb-balkstrip { display: none; }
  /* In een kolom van circa 370px past de brede opbouw niet: de markerlabels boven de
     balk vallen weg zodra het te krap wordt. Deze kolom gebruikt daarom dezelfde
     compacte opbouw als een telefoon: markerlabels als legenda onder de balk (de
     zonewoorden staan sinds BugHerd #272 overal als zonelegenda eronder). */
  /* .zb ervoor: de maten van .zb-balkstrip staan verderop in het bestand (het 768px-blok)
     en zouden anders winnen op volgorde bij gelijke specificiteit. */
  /* 17px (BugHerd #165): de grootste maat die op een brede kolom (372px bij 1280px) op
     één regel past; 18px brak. Bij 1024px is de kolom 310px en valt de vraag hoe dan ook
     over twee regels, ook op 15px, dus daar is één regel niet haalbaar zonder de vraag
     in te korten. */
  .zb .zb-si-kolom .zb-balkvraag { margin-bottom: 8px; font-size: 17px; }
  .zb .zb-si-kolom .zb-zone { margin: 0; }
  .zb .zb-si-kolom .zb-zone-schaal { height: 24px; }
  .zb .zb-si-kolom .zb-zone-merk { top: -8px; height: 40px; width: 22px; }
  .zb .zb-si-kolom .zb-zone-merk::after { display: none; }
  .zb .zb-si-kolom .zb-zone-merklegenda { display: flex; }
  /* Elke stap is een knop in de balk: bol boven, naam en statusupdate eronder, gecentreerd
     onder de bol. Dat is wat de balk tot menu maakt in plaats van een voortgangsstreep. */
  .zb-rails__regel, .zb-rails__regel--huidig {
    min-height: 0; border: 0; justify-content: center; gap: 0;
  }
  .zb-rails__rij, .zb-rails__regel--huidig .zb-rails__rij {
    flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 0; width: 100%;
  }
  .zb-rails__regel--huidig .zb-rails__rij { cursor: pointer; }
  .zb-rails__bolcel { width: auto; }
  .zb-rails__bol, .zb-rails__regel--huidig .zb-rails__bol {
    width: 40px; height: 40px; font-size: 15px; background: var(--kleur-wit);
  }
  .zb-rails__regel--huidig .zb-rails__bol {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kleur-primair) 12%, var(--kleur-lichtblauw));
  }
  /* Naam boven, statusupdate eronder - bij elke stap, niet alleen bij de huidige. */
  .zb-rails__tekst, .zb-rails__regel--huidig .zb-rails__tekst { display: block; min-width: 0; width: 100%; }
  .zb-rails__kop, .zb-rails__regel--huidig .zb-rails__kop {
    display: block; font-size: 14px; font-weight: 600; color: var(--zb-tekst-gedempt);
  }
  .zb-rails__regel--gehad .zb-rails__kop,
  .zb-rails__regel--huidig .zb-rails__kop { color: var(--kleur-donkerblauw); }
  .zb-rails__naam, .zb-rails__punt, .zb-rails__status--lang { display: none; }
  /* De statusupdate is de dynamische kant van dit menu. Eén regel, en de KORTE variant:
     bij vier stappen naast elkaar is er circa 250px per stap, waar de lange tekst zou
     afkappen, en een tweede regel zou de balk laten springen bij elk vinkje. De volledige
     tekst staat in de title van de knop. */
  .zb-rails__status--kort, .zb-rails__regel--huidig .zb-rails__status--kort {
    display: block; margin-top: 2px; font-size: 12px; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .zb-rails__regel--huidig .zb-rails__status--kort { color: var(--kleur-primair); font-weight: 600; }
  .zb-rails__sprong { display: none; }     /* de navigatiebollen staan in de stapkaart */

  /* De stapkop is hier geen tekst voor hulptechnologie meer, maar de kaart boven de stap
     (design system StapKop). Hij plakte van 04-09 tot 05-09-2026 onder de stappenbalk
     (BugHerd #123, zodat de pijlbollen steeds bereikbaar bleven); dat is op BugHerd #170
     teruggedraaid ("eerder hinderlijk dan handig"): de kaart scrolt gewoon mee als eerste
     element van de stap, de stappenbalk bovenaan blijft het menu. */
  html.zb-rails-aan .zb-mijlpaal__kop {
    position: relative; z-index: 20; width: auto; height: auto; overflow: visible;
    clip: auto; clip-path: none; white-space: normal;
    display: grid; margin: 0 0 24px; padding: 14px 16px 14px 20px;
    transition: border-color .3s ease;
  }
  html.zb-rails-aan .zb-mijlpaal--huidig .zb-mijlpaal__kop { border-color: var(--kleur-primair); }
  /* BugHerd #169 (05-09-2026): vanaf 1024px geen wenkende bol "Volgende stap" onderaan de
     stappen; de stappenbalk bovenaan en de pijlbollen in de stapkop zijn daar het menu.
     In plaats daarvan 48px extra lucht tussen twee stappen (96 in plaats van 48), zodat
     de overgang zichtbaar blijft. Onder 1024px blijft de bol staan. */
  .zb .zb-stapnav { display: none; }
  .zb-mijlpaal { padding-bottom: 96px; }
  .zb-rails__boven { height: 0; }
}
/* De railskolom is 200px zolang het scherm smal is en 260px (de maat uit de handoff)
   zodra de leeskolom daarnaast net zo breed blijft als zonder railskolom (856px). Onder
   1200px zou 260px de maatregelkaartjes en de techniekregels te ver knijpen. */
@media (min-width: 1200px) {
  html.zb-rails-aan { --zb-railskolom: 260px; }
}
/* "Wat zie ik hier?": de zonetekst in een uitklap onder de balk. */
.zb-uitleg { margin: 0 0 8px; }
.zb-uitleg > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 15px; font-weight: 600; color: var(--kleur-steun); }
.zb-uitleg > summary::-webkit-details-marker { display: none; }
.zb-uitleg > summary:hover, .zb-uitleg > summary:focus-visible { color: var(--kleur-donkerblauw); text-decoration: underline; }
.zb-uitleg__pijl { transition: transform .2s ease; }
.zb-uitleg[open] .zb-uitleg__pijl { transform: rotate(180deg); }
.zb-uitleg__inhoud { background: var(--kleur-wit); border: 1px solid var(--zb-rand); border-radius: 8px; padding: 16px; margin-top: 8px; }
.zb-uitleg__inhoud p:last-child { margin-bottom: 0; }
/* Eén tekststijl in het paneel (BugHerd #141): de zonetekst, de vervolgzin en de twee
   regels over de balk stonden in drie maten en twee grijstinten. Het paneel is zelf al
   een uitklap, dus dempen binnen dempen voegt niets toe. */
.zb-uitleg__inhoud .zb-zonekaart__tekst,
.zb-uitleg__inhoud .zb-zonekaart__tekst--gedempt,
.zb-uitleg__inhoud .zb-zone-bandtekst { font-size: 15px; color: var(--kleur-donkerblauw); }
/* De uitleg over de balk staat los van de zoneboodschap erboven (BugHerd #175). */
.zb-uitleg__inhoud .zb-zone-banduitleg { margin-top: 16px; }
.zb-uitleg__inhoud .zb-zone-banduitleg + .zb-zone-bandtekst { margin-top: 8px; }
/* "Dit heb je al op orde" als volwaardige subkop. */
/* "Dit heb je al op orde" (stap 1): kop, toelichting en de lijst in één sectie. Op een
   telefoon plakt de kop onder de stappenbalk zolang je door de lijst scrolt (de sectie is
   zijn plakgebied, dus hij laat los bij de antwoorden-recap eronder). Vanaf 768px staat de
   lijst in drie kolommen en is plakken niet nodig; daar plakt bovendien de SI-strip al. */
/* De orde-sectie opent de zonekaart sinds BugHerd #145 (05-09-2026); het oordeel met de
   uitklap "Wat zie ik hier?" volgt erna, met 24px lucht ervoor. */
.zb-orde { margin-top: 0; }
.zb-orde + .zb-zonekaart__kop { margin-top: 24px; }
.zb .zb-orde__kop {  /* .zb ervoor: zelfde reden als bij de stappenbalk */
  position: sticky; top: calc(var(--zb-top, 0px) + var(--zb-stapel-boven, 58px)); z-index: 10;
  background: var(--kleur-lichtblauw); margin: 0; padding: 8px 0;
  font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--kleur-donkerblauw); display: flex; align-items: center; gap: 8px;
}
.zb-orde__kop::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--kleur-primair); flex: none; }
.zb-orde__tekst { margin: 0 0 8px; font-size: 1rem; color: var(--zb-tekst-gedempt); max-width: 60ch; }
@media (min-width: 768px) {
  .zb .zb-orde__kop { position: static; padding: 0 0 4px; }
}

/* ---------- Stap 1: zonekaart ---------- */
.zb-zonekaart { background: var(--kleur-wit); border: 2px solid var(--zb-rand); border-radius: 8px; padding: 16px; }
.zb-zonekaart--rood   { border-color: var(--zb-rood);   background: color-mix(in srgb, var(--zb-rood) 5%, var(--kleur-wit)); }
.zb-zonekaart--oranje { border-color: var(--zb-oranje); background: color-mix(in srgb, var(--zb-oranje) 5%, var(--kleur-wit)); }
.zb-zonekaart--groen  { border-color: var(--zb-groen);  background: color-mix(in srgb, var(--zb-groen) 5%, var(--kleur-wit)); }
.zb-zonekaart__kop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.zb-zonekaart__label {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; color: var(--kleur-wit);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px;
  background: var(--zb-tekst-gedempt);
}
.zb-zonekaart--rood   .zb-zonekaart__label { background: var(--zb-rood); }
.zb-zonekaart--oranje .zb-zonekaart__label { background: var(--zb-oranje-badge); }
.zb-zonekaart--groen  .zb-zonekaart__label { background: var(--zb-groen); }
.zb-zonekaart__kop h2 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--kleur-donkerblauw); }
.zb-zonekaart__tekst { margin: 0 0 8px; font-size: 15px; max-width: 65ch; }
.zb-zonekaart__tekst--gedempt { color: var(--zb-tekst-gedempt); }

/* De zonebalk: elke zone een vaste breedte (34/33/33), binnen een zone lineair.
   Vier kleurstops zodat rood en steun-oranje uit elkaar te houden zijn. */
.zb-zone { margin: 80px 0 0; }   /* onder de balk volgt de zonelegenda (BugHerd #272) */
.zb-zone-schaal {
  position: relative; height: 32px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--kleur-donkerblauw) 25%, transparent);
  background: linear-gradient(90deg,
    var(--kleur-fout) 0%, var(--kleur-fout) 18%,
    var(--kleur-steun) 30%,
    var(--kleur-accent) 42%, var(--kleur-accent) 54%,
    var(--kleur-primair) 72%, var(--kleur-primair) 100%);
}
.zb-zone-schaal--zonder-rood {
  background: linear-gradient(90deg,
    var(--kleur-steun) 0%, var(--kleur-steun) 20%,
    var(--kleur-accent) 40%, var(--kleur-accent) 50%,
    var(--kleur-primair) 74%, var(--kleur-primair) 100%);
}
/* Zonelegenda (BugHerd #272, besluit Stijn 07-09-2026): de drie zonewoorden als legenda
   onder de balk, altijd alle drie leesbaar, hoe smal of breed een zone op de as ook is.
   Dit verving de woorden op segmentpositie in (vanaf 621px) en onder (compacte stand)
   de balk, die wegvielen zodra hun segment te smal werd. De JS (tekenBalk) vult de
   items en markeert de zone van de woning; het bolletje draagt de zonekleur. De 16px
   marge houdt de legenda onder de onzekerheidsband, die 10px onder de balk hangt. */
.zb-zone-legenda { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--zb-tekst-gedempt); }
.zb-zone-legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.zb-zone-legenda__item.actief { color: var(--kleur-donkerblauw); font-weight: 700; }
.zb-zone-legenda__bol { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.zb-zone-legenda__item--rood .zb-zone-legenda__bol { background: var(--kleur-fout); }
.zb-zone-legenda__item--oranje .zb-zone-legenda__bol { background: var(--kleur-accent); }
.zb-zone-legenda__item--groen .zb-zone-legenda__bol { background: var(--kleur-primair); }
.zb-zone-merk {
  position: absolute; top: -12px; height: 56px; width: 24px; transform: translateX(-50%);
  border-radius: 8px; display: flex; align-items: center; justify-content: center; z-index: 3;
}
.zb-zone-merk i { font-size: 15px; }
.zb-zone-merk::after { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; white-space: nowrap; }
/* Hartslag op de markers (BugHerd #161, 04-09-2026; begrensd 05-09-2026, besluit Jaime): het
   brede woord "niet klaar" trok de aandacht weg van het huisje, dat juist de plek van de
   woning aanwijst. Twee korte slagen en daarna een lange rust, dus rustiger dan knipperen.
   Het huisje slaat bij het laden vijf keer, het groene vinkje zes keer zodra het verschijnt;
   daarna staan ze stil, anders beweegt er blijvend iets naast de tekst. De JS zet .zb-slaat
   plus een negatieve animation-delay zodat een hertekening de reeks niet herstart
   (slagVan() in zonebalk-dashboard.js); het aantal slagen staat hier. Op hetzelfde ritme
   licht het label van de marker op (zb-hartslag-label: een tintvlak via background en
   box-shadow, geen transform, dus geen botsing met de translateX van het markerlabel):
   vanaf 768px het label boven de marker (::after, erft delay en aantal van de marker), op
   een telefoon en in de SI-kolom het item in de legenda onder de balk, waar het icoontje
   bovendien meeslaat. Zo ziet de bewoner ook in de tekst wát er klopt.
   translateX(-50%) staat in elke stap, anders springt de marker uit het midden. */
/* De marker licht op elke slag ook op als tintring (BugHerd #251, 07-09-2026): de schaalslag
   alleen was naast het oplichtende label te subtiel, zodat het leek alsof het huisje niet
   meedeed. Zelfde --zb-slag-tint als het label, dus zelfde ritme en zelfde kleur. */
@keyframes zb-hartslag {
  0%, 40%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 0 transparent; }
  8%            { transform: translateX(-50%) scale(1.18); box-shadow: 0 0 0 6px var(--zb-slag-tint); }
  16%           { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 0 transparent; }
  24%           { transform: translateX(-50%) scale(1.12); box-shadow: 0 0 0 6px var(--zb-slag-tint); }
}
@keyframes zb-hartslag-icoon {
  0%, 40%, 100% { transform: scale(1); }
  8%            { transform: scale(1.3); }
  16%           { transform: scale(1); }
  24%           { transform: scale(1.18); }
}
@keyframes zb-hartslag-label {
  0%, 16%, 40%, 100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
  8%, 24%            { background-color: var(--zb-slag-tint); box-shadow: 0 0 0 4px var(--zb-slag-tint); }
}
.zb-zone-merk--nu { background: var(--kleur-donkerblauw); border: 3px solid var(--kleur-donkerblauw); --zb-slag-tint: color-mix(in srgb, var(--kleur-donkerblauw) 14%, transparent); }
.zb-zone-merk--straks { --zb-slag-tint: color-mix(in srgb, var(--kleur-primair) 18%, transparent); }
.zb-zone-merk--nu.zb-slaat { animation: zb-hartslag 3.2s ease-in-out 5; }
.zb-zone-merk--straks.zb-slaat { animation: zb-hartslag 3.2s ease-in-out 6; }
.zb-zone-merk.zb-slaat::after { border-radius: 4px; animation: zb-hartslag-label 3.2s ease-in-out; animation-iteration-count: inherit; animation-delay: inherit; }
.zb-zone-merk--nu i { color: var(--kleur-wit); }
.zb-zone-merk--nu::after { content: "je woning nu"; color: var(--kleur-donkerblauw); top: -32px; }
.zb-zone-merk--straks { background: var(--kleur-wit); border: 3px solid var(--kleur-primair); box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: left .35s ease; }
.zb-zone-merk--straks i { color: var(--kleur-primair); }
.zb-zone-merk--straks::after { content: "met de gekozen maatregelen"; color: var(--kleur-primair); top: -58px; }
/* Randen van de balk: de markerlabels mogen niet buiten het scherm vallen. */
.zb-zone-merk.aan-links::after { left: 0; transform: none; }
.zb-zone-merk.aan-rechts::after { left: auto; right: 0; transform: none; }
.zb-zone-band {
  position: absolute; top: 100%; margin-top: 4px; height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--kleur-donkerblauw) 30%, transparent);
}
.zb-zone-bandtekst { font-size: 14px; color: var(--zb-tekst-gedempt); margin: 0 0 8px; }

/* SI-balk bovenaan elke stap (1, 2 en 3), overal dezelfde opbouw, maten en kleuren;
   in stap 4 staat geen balk. Mobile-first (mockup dashboard-mobiel-stappenbalk, akkoord
   02-09-2026): op een telefoon is de strip compact. De markerlabels ("je woning nu",
   "met de gekozen maatregelen") staan dan als legenda ónder de balk (.zb-zone-merklegenda)
   in plaats van 72px erboven, onder de korte zonewoorden per segment. De strip plakt op mobiel
   alleen in stap 2, waar hij meebeweegt bij elk vinkje; in stap 1 en 3 is hij gewone
   inhoud. Vanaf 768px: de volle strip met de labels boven de balk, die in alle drie de
   stappen onder de stappenbalk plakt. Op 375x740 kostte de oude opbouw 170px van het
   scherm, samen met header en stappenbalk meer dan 40%. */
.zb-balkstrip { margin: 8px 0 16px; padding: 0; }
/* De vraag boven de balk (BugHerd #18): de balk is het antwoord, dus de vraag staat
   er compact boven en concurreert niet met de kop van de zonekaart eronder. De 20px
   eronder is de ruimte waarin het markerlabel ("je woning nu") boven de balk hangt;
   die stond eerder als padding op de strip, dus bóven de vraag, en dan overlapten ze. */
.zb-balkvraag { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--kleur-donkerblauw); }
/* Adres boven de vraag in de SI-kolom (BugHerd #70; alleen in de kolom vanaf 1024px). */
/* 17px (BugHerd #164): het adres mag opvallen, en 14px lag onder de 16px-ondergrens
   uit de huisstijl. Past op 1280px op één regel. */
.zb-si-kolom__adres { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 17px; color: var(--zb-tekst-gedempt); }
.zb-si-kolom__adres i { font-size: 16px; color: var(--kleur-primair); flex: none; }
/* Luchtfoto onder het adres (besluit 05-09-2026): statisch PDOK-WMS-beeld met de
   pandcontour er als SVG overheen; alleen zichtbaar in deze kolom vanaf 1024px.
   Contourstijl = renderKaart() in check.php (amber alleen decoratief). */
.zb-si-kolom__kaart {
  position: relative;
  /* Half zo groot (BugHerd #201/#204, besluit Jaime 06-09-2026): op een laag venster (648px)
     duwde de foto de balk onder de rand van de plakkende kolom. */
  width: 50%;
  margin: 0 auto 16px; /* gecentreerd onder het adres en boven de balk (BugHerd #228) */
  border: 1px solid color-mix(in srgb, var(--rand) 45%, var(--kleur-wit));
  border-radius: var(--radius);
  overflow: hidden;
}
.zb-si-kolom__kaart img { display: block; width: 100%; height: auto; }
.zb-si-kolom__kaart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zb-si-kolom__kaart polygon {
  fill: color-mix(in srgb, var(--kleur-accent) 20%, transparent);
  stroke: var(--kleur-accent);
  stroke-width: 3;
}
/* Bronvermelding zoals de Leaflet-attributieregel op het check-kaartje: geen
   leestekst, dus bewust onder de 16px-ondergrens uit de huisstijl. */
.zb-si-kolom__kaart figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 2px 6px;
  font-size: .7rem;
  color: var(--kleur-donkerblauw);
  background: color-mix(in srgb, var(--kleur-wit) 75%, transparent);
  border-top-left-radius: var(--radius);
}
.zb-balkstrip .zb-zone { margin: 0; }
.zb-balkstrip .zb-zone-schaal { height: 24px; }
.zb-balkstrip .zb-zone-merk { top: -8px; height: 40px; width: 22px; }
.zb-balkstrip .zb-zone-merk::after { display: none; }
.zb-zone-merklegenda { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; font-weight: 700; }
.zb-zone-merklegenda li { display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; }
.zb-zone-merklegenda li[hidden] { display: none; }
.zb-zone-merklegenda i { font-size: 14px; }
.zb-zone-merklegenda__nu { color: var(--kleur-donkerblauw); --zb-slag-tint: color-mix(in srgb, var(--kleur-donkerblauw) 14%, transparent); }
.zb-zone-merklegenda__straks { color: var(--kleur-primair); --zb-slag-tint: color-mix(in srgb, var(--kleur-primair) 18%, transparent); }
/* Slaat mee met de marker (zie de hartslag-toelichting bij .zb-zone-merk); de JS zet de klasse
   en de delay op het li, het icoontje erft ze. */
.zb-zone-merklegenda__nu.zb-slaat { animation: zb-hartslag-label 3.2s ease-in-out 5; }
.zb-zone-merklegenda__straks.zb-slaat { animation: zb-hartslag-label 3.2s ease-in-out 6; }
.zb-zone-merklegenda li.zb-slaat i { animation: zb-hartslag-icoon 3.2s ease-in-out; animation-iteration-count: inherit; animation-delay: inherit; }
.zb .zb-mijlpaal[data-stap="2"] .zb-balkstrip {  /* .zb ervoor: anders wint .zb-rr-el { position: relative } verderop */
  position: sticky; top: calc(var(--zb-top, 0px) + var(--zb-stapel-boven, 58px)); z-index: 15;
  background: var(--kleur-lichtblauw); margin: 0 0 16px; padding: 10px 0 6px;
  box-shadow: 0 8px 8px -8px rgba(0,0,0,.18);
}
@media (min-width: 768px) {
  /* BugHerd #171 (05-09-2026): ook vanaf 768px plakt alleen de strip van stap 2, waar hij
     bij elk vinkje meebeweegt; in stap 1 en 3 is hij gewone inhoud (tot dan plakten daar
     alle drie). De plakregel zelf staat hierboven, zonder media query. */
  .zb .zb-balkstrip { margin: 0 0 16px; padding: 10px 0 8px; }
  .zb .zb-mijlpaal[data-stap="2"] .zb-balkstrip { padding: 10px 0 8px; }   /* de compacte stap-2-maat (6px onder) geldt alleen op mobiel */
  /* De markerlabels hangen boven de balk; die ruimte zat als padding bovenaan de strip,
     dus bóven de vraag, en dan liepen ze door elkaar heen. De ruimte staat nu tussen de
     vraag en de balk. */
  .zb-balkvraag { margin-bottom: 62px; }
  .zb-balkstrip .zb-zone-schaal { height: 32px; }
  .zb-balkstrip .zb-zone-merk { top: -12px; height: 56px; width: 24px; }
  .zb-balkstrip .zb-zone-merk::after { display: block; }
  .zb-zone-merklegenda { display: none; }
}
/* Eén balk tegelijk in beeld (besluit 03-09-2026). De balk staat drie keer in het
   document (stap 1, 2 en 3) en die van de vorige stap laat pas los als zijn sectie
   voorbij is — ruim nadat de volgende al van onderen in beeld is geschoven. Daardoor
   stonden er een schermhoogte lang twee balken tegelijk, wat onrustig leest. Alleen
   de balk van de stap waar de bewoner is blijft zichtbaar; de andere twee houden hun
   ruimte (visibility, geen display) zodat de layout niet verspringt bij een
   stapwissel. De overgang loopt via de opacity: de oude vervaagt eerst, de
   nieuwe komt daarna op, zodat ze elkaar niet overlappen. Zonder JS (geen zb-rails-aan)
   blijven alle drie de balken gewoon staan. */
html.zb-rails-aan .zb-mijlpaal .zb-balkstrip { transition: opacity .12s ease .12s; }
html.zb-rails-aan .zb-mijlpaal:not(.zb-mijlpaal--huidig) .zb-balkstrip {
  visibility: hidden; opacity: 0;
  transition: opacity .12s ease, visibility 0s .12s;
}
@media (prefers-reduced-motion: reduce) {
  html.zb-rails-aan .zb-mijlpaal .zb-balkstrip,
  html.zb-rails-aan .zb-mijlpaal:not(.zb-mijlpaal--huidig) .zb-balkstrip { transition: none; }
}

/* ---------- Blokkoppen, groepen, kolommen ---------- */
.zb-blok-kop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 32px 0 8px; }
.zb-blok-kop h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-steun); }
.zb-klapknoppen { margin-left: auto; display: flex; gap: 8px; }
.zb-klapknop {
  border: 1px solid var(--zb-rand); background: var(--kleur-wit); border-radius: 8px;
  font-family: var(--font-basis); font-size: 13px; padding: 4px 12px; cursor: pointer; min-height: 32px;
  color: var(--kleur-steun); font-weight: 600;
}
.zb-klapknop:hover, .zb-klapknop:focus-visible { border-color: var(--kleur-steun); }
/* align-items: start (BugHerd #230): een grid rekt de kaartjes in één rij anders tot dezelfde
   hoogte, zodat het buurkaartje leeg meegroeit als er één uitklapt. */
.zb-kolommen { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start; }
.zb-kolommen--orde { gap: 4px 8px; }
.zb-groepskop { display: flex; align-items: center; gap: 8px; margin: 24px 0 8px; font-size: 16px; font-weight: 700; }
/* Op een laptop of desktop even groot als "Dit heb je al op orde" (BugHerd #116). */
@media (min-width: 1024px) { .zb .zb-groepskop { font-size: 20px; } }
.zb-groepskop__icoon {
  flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--kleur-primair);
  display: grid; place-items: center; color: var(--kleur-wit); font-size: 18px;
}

/* ---------- Maatregelkaartjes ---------- */
.zb-kaartje { border: 1px solid var(--zb-rand); border-radius: 8px; background: var(--kleur-wit); overflow: hidden; }
/* Kop van een kaartje, mobile-first: op een telefoon gestapeld (vinkje + naam + pijl op de
   eerste regel, bedrag en terugverdientijd eronder), want naast een prijskolom hield de
   naam maar 60px over en brak hij met afbreekstreepjes over zeven regels. Vanaf 768px
   naam en prijs naast elkaar. */
.zb-kaartje__kop { display: grid; grid-template-columns: 24px 1fr 48px; column-gap: 12px; align-items: center; padding: 12px 8px 12px 16px; cursor: pointer; margin: 0; }
.zb-kaartje__kop > input { width: 24px; height: 24px; accent-color: var(--kleur-primair); flex: none; cursor: pointer; margin: 0; grid-column: 1; grid-row: 1; }
.zb-kaartje__naam { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: break-word; hyphens: manual; font-size: 16px; font-weight: 700; line-height: 1.3; }
.zb-kaartje__prijs { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 12px; align-items: baseline; margin-top: 2px; font-size: 15px; font-weight: 700; text-align: left; }
.zb-kaartje__prijs small { display: block; font-size: 13px; font-weight: 400; color: var(--zb-tekst-gedempt); }
.zb-kaartje__prijs .zb-spaarlabel { display: block; font-size: 13px; font-weight: 600; color: var(--kleur-steun); }
@media (min-width: 768px) {
  .zb-kaartje__kop { display: flex; gap: 8px; padding: 16px; }
  .zb-kaartje__naam { flex: 1 1 auto; hyphens: auto; }
  .zb-kaartje__prijs { display: block; flex: 0 1 auto; min-width: min-content; max-width: 48%; margin-top: 0; white-space: nowrap; text-align: right; }
  .zb-kaartje__prijs small { white-space: normal; overflow-wrap: anywhere; }
  .zb-kaartje__prijs .zb-spaarlabel { white-space: normal; }
}
.zb-kaartje__pijl {
  background: none; border: 0; color: var(--kleur-steun); font-size: 20px; cursor: pointer;
  padding: 8px; line-height: 1; flex: none; transition: transform .2s ease;
  min-width: 48px; min-height: 48px; grid-column: 3; grid-row: 1; justify-self: end;
}
.zb-kaartje.open .zb-kaartje__pijl { transform: rotate(180deg); }
/* Gewone tekstkleur (BugHerd #147, 04-09-2026; zelfde keuze als #141 voor de uitklap
   "Wat zie ik hier?"): de uitklap is al een bewuste handeling, dus dempen erbovenop
   maakt de tekst alleen slechter leesbaar. */
.zb-kaartje__detail { display: none; padding: 0 16px 16px 48px; font-size: 15px; color: var(--kleur-donkerblauw); }
.zb-kaartje__detail p { margin: 8px 0 0; }
/* Opsomming van de bronnen in de uitklap van de bron-kaart (BugHerd #45): per bron of
   hij past en waarom. Eigen inspringing, want de detail heeft al een linkermarge. */
.zb-bronlijst { margin: 6px 0 0; padding-left: 0; list-style: none; }
.zb-bronlijst li { margin-top: 4px; display: flex; gap: 8px; align-items: flex-start; }
.zb-bronlijst__icoon { flex: none; font-size: 18px; line-height: 1.35; }
.zb-bronlijst__icoon--past { color: var(--kleur-groen); }
.zb-bronlijst__icoon--niet { color: var(--kleur-fout); }
.zb-kaartje.open .zb-kaartje__detail { display: block; }
/* Rand neutraal (design-system patch maatregel-kaart-rand-weg, 03-09-2026): de status zit in
   het vlak en het vinkje of kruisje, niet meer in een gekleurde rand. Alleen .zb-kaartje.aan
   houdt zijn groene rand: dat is een keuze van de bewoner, geen status. */
.zb-kaartje--vast { background: var(--zb-groen-zacht); }
/* Eerste kolom auto in plaats van 24px: het label "voorwaarde" van een vervulde randvoorwaarde
   is breder dan het vinkje en liep anders over de naam (BugHerd #68); het vinkje van 20px past
   er net zo goed in, dus beide kaarten houden dezelfde kop. */
.zb-kaartje--vast > .zb-kaartje__kop { padding: 4px 4px 4px 12px; grid-template-columns: auto 1fr 48px; }
.zb-kaartje--vast .zb-kaartje__naam { color: var(--kleur-groen); font-size: 15px; }
.zb-kaartje--vast .zb-kaartje__detail { padding: 0 12px 12px 40px; font-size: 14px; }
.zb-kaartje--vast .zb-kaartje__pijl { min-width: 40px; min-height: 40px; font-size: 18px; }
/* Een vaststelling, geen keuze: los groen vinkje zonder vierkant, zodat het niet
   op een aanklikbaar hokje lijkt. */
.zb-kaartje__vink { flex: none; color: var(--kleur-groen); font-size: 20px; line-height: 1; display: grid; place-items: center; width: 20px; }
/* Blokkade (v5b, bron): een vaste kaart in stap 2 die nog niet op orde is; oranje
   accent, kruisje in plaats van vinkje. Niet aan te vinken: isoleren is de weg. */
.zb-kaartje--blokkade { background: color-mix(in srgb, var(--kleur-steun) 8%, var(--kleur-wit)); }
.zb-kaartje--blokkade .zb-kaartje__naam, .zb-kaartje__vink--open { color: var(--kleur-steun); }
/* Vervulde randvoorwaarde (design system MaatregelKaartje label="voorwaarde", stap-1-demo;
   besluit Jaime 05-09-2026): exact dezelfde vaststellingskaart als een isolatiemaatregel die op
   orde is, met het grijze kapitaallabel op de plek van het vinkje en de naam donkerblauw in
   plaats van groen. */
.zb-kaartje.aan { border: 2px solid var(--kleur-primair); background: var(--zb-groen-zacht); }
.zb-kaartje.aan > .zb-kaartje__kop { padding: 11px 7px 11px 15px; }
@media (min-width: 768px) { .zb-kaartje.aan > .zb-kaartje__kop { padding: 15px; } }
.zb-kaartje.aan > .zb-kaartje__detail { padding: 0 15px 15px 47px; }
.zb-kaartje__noot { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--kleur-steun); }
/* Statusbadge (03-09-2026): de S1-status uit maatregelen!M als pil achter de naam, alleen
   in de groep "Nodig voor een voldoende geïsoleerde woning" (statusBadge() in
   zonebalk-dashboard.js). Verkeerslichtschaal van de maatregelstatussen; 13px zoals de
   andere labels op het kaartje. Het kaartdesign komt later uit het design system. */
.zb-kaartje__status { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
/* Zelfde ladder als .maatregel-badge--* (design system, patch badge-sterk-oranje). */
.zb-kaartje__status--sterk { background: var(--kleur-steun); color: var(--kleur-wit); }
.zb-kaartje__status--aanbevolen { background: color-mix(in srgb, var(--kleur-steun) 18%, var(--kleur-wit)); color: color-mix(in srgb, var(--kleur-steun) 78%, var(--kleur-donkerblauw)); }
.zb-kaartje__status--orde { background: color-mix(in srgb, var(--kleur-groen) 12%, var(--kleur-wit)); color: var(--kleur-groen); }
.zb-kaartje__status--grijs { background: color-mix(in srgb, var(--kleur-lichtgrijs) 22%, var(--kleur-wit)); color: var(--kleur-donkerblauw); }

/* Offerte al aangevraagd (besluit Stijn 07-09-2026): wat eerder is doorgegeven
   (offerte_interesses) is bij terugkomst herkenbaar. De kaart draagt een gevulde
   bosgroene pil met het vliegertje van de offerteknop, en het vinkje van zo'n kaart
   is donker in plaats van bosgroen, zodat een oud vinkje anders oogt dan een nieuw.
   Eigen toevoeging: dit onderdeel bestaat (nog) niet in het design system. */
.zb-aangevraagd-pil { display: inline-flex; align-items: center; gap: 4px; vertical-align: 2px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; background: var(--kleur-groen); color: var(--kleur-wit); }
.zb-aangevraagd-pil i { font-size: 13px; }
.zb-techniek__mid > .zb-aangevraagd-pil { margin: 3px 0 0; vertical-align: baseline; }
.zb .zb-aangevraagd .zb-kaartje__kop > input,
.zb .zb-aangevraagd .zb-keuzekaart__kop > input,
.zb .zb-aangevraagd .zb-techniek__kop > input { accent-color: var(--kleur-donkerblauw); }

/* ---------- Keuzekaart (design system MaatregelKeuzeKaart, 03-09-2026) ----------
   De kaart voor de groep schil in stap 2: statustint in het vlak (geen gekleurde rand),
   naam met "nu: …" erachter, badge rechts van de titel vanaf 768px en eronder op een
   telefoon (in een raster van gelijke kolommen maakt een lange badge naast de titel de
   kaarten ongelijk hoog), de cijfers als gelabelde waarden onder de titel, en het advies
   achter een knop over de volle breedte. Mobile-first: kolommen 24px + 1fr, de badge in
   rij 2, de cijfers in rij 3; vanaf 768px een derde kolom voor de badge. */
.zb-keuzekaart--sterk { background: color-mix(in srgb, var(--kleur-fout) 6%, var(--kleur-wit)); }
.zb-keuzekaart--zacht { background: var(--kleur-vlak-zacht); }
.zb-keuzekaart__kop { display: grid; grid-template-columns: 24px 1fr auto; column-gap: 12px; align-items: start; padding: 14px 8px 14px 16px; margin: 0; cursor: pointer; }
.zb-keuzekaart__kop > input { grid-column: 1; grid-row: 1; width: 24px; height: 24px; accent-color: var(--kleur-primair); cursor: pointer; margin: 1px 0 0; }
.zb-keuzekaart__titel { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.zb-keuzekaart__naam { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--kleur-donkerblauw); overflow-wrap: break-word; hyphens: manual; }
.zb-keuzekaart__huidig { font-size: .85rem; line-height: 1.4; color: var(--zb-tekst-gedempt); }
.zb-keuzekaart__titel .zb-kaartje__noot { flex: 1 0 100%; margin-top: 2px; }
.zb-keuzekaart__badge { grid-column: 2; grid-row: 2; justify-self: start; margin: 6px 0 0; vertical-align: baseline; }
/* De uitklappijl rechts op de titelregel (design system 05-09-2026; was een balk "Waarom
   dit" onderaan): zoals op het compacte kaartje, in de laatste kolom. */
.zb-keuzekaart__pijl { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; min-width: 48px; min-height: 48px; margin: -8px 0 0; padding: 8px; display: grid; place-items: center; border: 0; background: none; }
.zb-keuzekaart__pijl i { font-size: 20px; }
/* Cijfers: label klein en gedempt boven de vette waarde; besparing in groen. Ze staan in
   de titelkolom én onder de pijlkolom door (2 / -1), zodat op 390px Kosten en
   Terugverdientijd naast elkaar blijven staan. */
.zb-keuzekaart__cijfers { grid-column: 2 / -1; grid-row: 3; margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px; }
.zb-keuzekaart__cijfer { display: flex; flex-direction: column; }
.zb-keuzekaart__cijfer > span { font-size: .75rem; line-height: 1.4; color: var(--zb-tekst-gedempt); }
.zb-keuzekaart__cijfer > b { font-size: .95rem; font-weight: 700; line-height: 1.4; color: var(--kleur-donkerblauw); }
.zb-keuzekaart__cijfer--groen > b { color: var(--kleur-groen); }
.zb-keuzekaart .zb-kaartje__detail { padding: 12px 16px 16px 52px; line-height: 1.5; }
.zb-keuzekaart.aan > .zb-keuzekaart__kop { padding: 13px 7px 13px 15px; }
@media (min-width: 768px) {
  .zb-keuzekaart__kop { grid-template-columns: 24px 1fr auto auto; }
  .zb-keuzekaart__badge { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  .zb-keuzekaart__pijl { grid-column: 4; }
  .zb-keuzekaart__cijfers { grid-row: 2; }
}
/* Stap 2 in één kolom op elke breedte (besluit 03-09-2026: keuzekaart "in een kolom" op
   laptop en desktop; op een telefoon stapelt alles toch). Met .zb ervoor, anders wint het
   1024px-blok met auto-fill hierboven op specificiteit. */
.zb .zb-kolommen--lijst { grid-template-columns: 1fr; }


/* ---------- Terugkoppeling en meldingen ---------- */
.zb-terugkoppeling {
  display: flex; gap: 8px; align-items: flex-start; border-radius: 8px; padding: 16px;
  font-size: 16px; margin: 0 0 24px; font-weight: 600; border: 1px solid var(--zb-groen);
  background: var(--zb-groen-zacht); color: var(--zb-groen);
}
.zb-terugkoppeling--rood { border-color: var(--zb-rood); background: color-mix(in srgb, var(--zb-rood) 8%, var(--kleur-wit)); color: var(--zb-rood); }
.zb-terugkoppeling--oranje { border-color: var(--zb-oranje); background: var(--zb-steun-zacht); color: var(--zb-oranje); }
.zb-terugkoppeling i { font-size: 20px; flex: none; margin-top: 2px; }
/* Melding bij veel "Weet ik niet"-antwoorden in stap 1 (BugHerd #242): let op-blok in de
   waarschuwingstint uit de huisstijl, boven de zonekaart. */
.zb-weetniet {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 24px; padding: 16px;
  border-radius: 8px; background: var(--kleur-waarschuwing); color: var(--kleur-waarschuwing-tekst);
  border: 1px solid color-mix(in srgb, var(--kleur-waarschuwing-tekst) 25%, var(--kleur-waarschuwing));
}
.zb-weetniet i { font-size: 24px; flex: none; margin-top: 2px; }
.zb-weetniet p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; max-width: 65ch; }
.zb-weetniet p:last-child { margin-bottom: 0; }
.zb-weetniet__kop { font-weight: 700; }
.zb-geen-maatregelen {
  background: var(--zb-groen-zacht); border-radius: 8px; padding: 16px; font-size: 16px;
  color: var(--kleur-groen); font-weight: 600; display: flex; gap: 8px; align-items: center;
}
.zb-geen-maatregelen i { font-size: 20px; flex: none; }

/* ---------- Stap 3: warmteoplossingen ---------- */
.zb-techniek-blok { margin-bottom: 24px; }
.zb-techniek-blok__kop { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; color: var(--kleur-primair); }
.zb-techniek-blok__kop--nu { color: var(--kleur-waarschuwing-tekst); }
.zb-techniek-blok__kop--grijs { color: var(--zb-tekst-gedempt); }
.zb-techniek-blok__uitleg { font-size: 14px; color: var(--zb-tekst-gedempt); margin: 0 0 8px; max-width: 62ch; }
.zb-techniek-lijst { display: flex; flex-direction: column; gap: 8px; }
/* ===== Techniekkaart, stap 3 (design system WarmteoplossingKaart, compact, 04-09-2026) =====
   Eén keuze uit de warmteoplossingen: naam, toelichting of prioriteitregel, het maandblok
   (totaal, balkje energie/installatie, legenda), de scorering en de uitklappijl. Basis =
   de smalle stand (`smal`): het maandblok staat onder de naam over de volle breedte;
   vanaf 768px staat het als kolom van 320px naast de naam. In de uitklap: de gasband, de
   bon nu/straks (MaandlastenVergelijking op rijen) naast het investeringsoverzicht, en
   de voor- en nadelen. Het balkje rekent met het midden van de band: een verhouding,
   geen bedrag; de lengte volgt de maandschaal van de hele lijst. */
.zb-techniek { border: 1px solid var(--zb-rand); border-radius: 8px; background: var(--kleur-wit); overflow: hidden; }
.zb-techniek.gekozen { border: 2px solid var(--kleur-primair); background: var(--zb-groen-zacht); }
.zb-techniek--nu { border: 2px solid var(--kleur-accent); background: color-mix(in srgb, var(--kleur-accent) 10%, var(--kleur-wit)); }
.zb-techniek--grijs { background: var(--kleur-vlak-zacht); border-color: var(--zb-rand-licht); }
.zb-techniek.vergrendeld { opacity: .55; }
/* Schakelaar "Ik wacht nog even" (BugHerd #52, #53): kaarten gedempt, radio's
   uitgeschakeld (JS); de uitklap blijft te openen. */
.zb-techniek--uit { opacity: .55; }
.zb-techniek--uit > .zb-techniek__kop { cursor: default; }
.zb-techniek__kop {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: 14px 8px 14px 16px; margin: 0; cursor: pointer;
}
.zb-techniek.gekozen > .zb-techniek__kop, .zb-techniek--nu > .zb-techniek__kop { padding: 13px 8px 13px 15px; }
.zb-techniek__kop > input { grid-column: 1; grid-row: 1; width: 24px; height: 24px; accent-color: var(--kleur-primair); margin: 0; cursor: inherit; }
.zb-techniek__leeg { grid-column: 1; grid-row: 1; width: 24px; }
.zb-techniek__mid { grid-column: 2; grid-row: 1; min-width: 0; }
.zb-techniek__naam { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.zb-techniek--grijs .zb-techniek__naam { color: var(--zb-tekst-gedempt); }
/* Vette regel onder de naam: waarom deze balk hier staat (het ijkpunt, wat je zelf regelt). */
.zb-techniek__toelichting { display: block; margin-top: 3px; font-size: .85rem; font-weight: 700; line-height: 1.35; color: var(--zb-tekst-gedempt); }
.zb-techniek--nu .zb-techniek__toelichting, .zb-techniek--grijs .zb-techniek__toelichting { color: var(--kleur-waarschuwing-tekst); }
/* De prioriteitregel is geen badge: hij gaat over de weging van de bewoner. */
.zb-techniek__maand { grid-column: 2 / -1; grid-row: 2; margin-top: 10px; min-width: 0; display: block; }
.zb-techniek__maandkop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; line-height: 1.2; }
.zb-techniek__maandlabel { font-size: .8rem; color: var(--kleur-donkerblauw); opacity: .7; }
.zb-techniek__maandbedrag { font-size: 1.15rem; font-weight: 700; white-space: nowrap; color: var(--kleur-donkerblauw); }
.zb-techniek--grijs .zb-techniek__maandbedrag { color: var(--zb-tekst-gedempt); }
.zb-techniek__balk { display: block; height: 6px; margin: 6px 0 5px; }
.zb-techniek__balk > span { display: flex; height: 100%; width: var(--vol, 100%); border-radius: var(--radius-rond); overflow: hidden; }
.zb-techniek__balk i { display: block; height: 100%; }
.zb-techniek__balk i:first-child { width: var(--deel, 50%); background: var(--zb-energie); }
.zb-techniek__balk i:last-child { flex: 1; background: var(--kleur-donkerblauw); }
.zb-techniek__legenda { display: grid; row-gap: 2px; font-size: .75rem; line-height: 1.3; color: var(--zb-tekst-gedempt); }
.zb-techniek__legenda > span { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; column-gap: 7px; }
.zb-techniek__legenda i { width: 8px; height: 8px; border-radius: 50%; background: var(--zb-energie); }
.zb-techniek__legenda > span:last-child i { background: var(--kleur-donkerblauw); }
.zb-techniek__legenda b { white-space: nowrap; }
/* Geen score op de balk (design system 05-09-2026): de weging staat in het paneel "Hoe komen
   de scores tot stand?" en de score zelf in de uitklap. */
.zb-techniek__pijl {
  grid-column: 3; grid-row: 1; min-width: 44px; min-height: 44px; display: grid; place-items: center;
  background: none; border: 0; color: var(--kleur-steun); font-size: 20px; cursor: pointer; padding: 0;
}
.zb-techniek__pijl i { transition: transform .2s ease; }
.zb-techniek.open .zb-techniek__pijl i { transform: rotate(180deg); }
.zb-techniek__uitklap { display: none; padding: 16px; border-top: 1px solid var(--zb-rand-licht); }
.zb-techniek.open .zb-techniek__uitklap { display: flex; flex-direction: column; gap: 16px; }
/* De bon en het investeringsoverzicht naast elkaar zodra het past, anders gestapeld. */
.zb-techniek__detail { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.zb-techniek__lijsten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; }
.zb-techniek__lijsten h4 { margin: 0 0 4px; font-size: 15px; }
.zb-techniek__lijsten ul { margin: 0; padding-left: 24px; font-size: 15px; }
.zb-techniek__lijsten li { margin: 4px 0; color: var(--zb-tekst-gedempt); }
.zb-techniek__isoleereerst { font-size: 15px; color: var(--zb-tekst-gedempt); margin: 0; }
@media (min-width: 768px) {
  .zb-techniek__kop { grid-template-columns: 24px minmax(0, 1fr) 320px auto; }
  .zb-techniek__maand { grid-column: 3; grid-row: 1; margin-top: 0; }
  .zb-techniek__pijl { grid-column: 4; }
}

/* ===== Toelichting (i-knopje met ballon; design system Toelichting) =====
   Hover en focus openen de ballon, een klik houdt hem vast (touch). Het vierkantje is
   16px, de knop eromheen 34×26 met overhang buiten de flow. */
.zb-tip { position: relative; display: inline-flex; vertical-align: middle; }
.zb-tip__knop { flex: none; display: grid; place-items: center; width: 34px; height: 26px; margin: -5px -9px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.zb-tip__i {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid var(--kleur-lichtgrijs); background: var(--kleur-wit); color: var(--kleur-lichtgrijs);
  font-size: 11px; font-weight: 700; line-height: 1; font-style: normal;
}
.zb-tip.open .zb-tip__i, .zb-tip:hover .zb-tip__i, .zb-tip:focus-within .zb-tip__i { background: var(--kleur-lichtgrijs); color: var(--kleur-wit); }
.zb-tip__ballon {
  display: none; position: absolute; bottom: calc(100% + 10px); left: -6px; z-index: 5;
  width: max-content; max-width: min(220px, 62vw); padding: 8px 10px; border-radius: 8px;
  background: var(--kleur-donkerblauw); color: var(--kleur-wit);
  font-size: .78rem; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: var(--schaduw-zacht);
}
.zb-tip.open .zb-tip__ballon, .zb-tip:hover .zb-tip__ballon, .zb-tip:focus-within .zb-tip__ballon { display: block; }

/* ===== De bon nu/straks (design system MaandlastenVergelijking, stijl rijen) =====
   Eén raster: postnamen één keer in een eigen kolom, de twee bedragen ernaast, elke post
   op één rasterrij. De lijnen zijn losse elementen over de volle breedte (een rand per
   cel valt bij een kolomgap uiteen). Basis = smal: smallere bedragkolommen en een
   naamkolom die mag afbreken; vanaf 768px vaste bedragkolommen van 88px. */
.zb-mv {
  display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; column-gap: 6px; align-items: baseline;
  border: 1px solid var(--zb-rand-licht); border-radius: 8px; background: var(--kleur-wit); box-shadow: var(--schaduw-zacht);
  padding: 10px 12px; flex: 1 1 auto; min-width: 0; max-width: 460px;
}
.zb-mv__lijn { grid-column: 1 / -1; align-self: stretch; border-bottom: 1px solid var(--zb-rand-licht); }
.zb-mv__lijn--zwaar { border-bottom: 2px solid var(--kleur-donkerblauw); }
.zb-mv__cel { min-width: 0; padding: 4px 0; }
/* De kolom "Nu" staat iets verder naar links, zodat de twee rekeningen twee kolommen zijn. */
.zb-mv__cel--nu { padding-right: 6px; }
.zb-mv__kop { text-align: right; line-height: 1.25; }
.zb-mv__kop b { display: block; font-size: .95rem; font-weight: 700; }
/* Het label mag afbreken: een techniek heet hier "Bodembron (individueel)", en dat past
   in uppercase niet in een bedragkolom van 88px. */
.zb-mv__kop small {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; color: var(--kleur-steun);
  /* contain: inline-size: anders zet de volledige naam ("BODEMBRON COLLECTIEF") de breedte
     van de bedragkolom, en valt de bon op een telefoon buiten de kaart. Nu breekt hij
     per woord binnen de kolom die de bedragen bepalen. */
  contain: inline-size; min-width: 0;
}
.zb-mv__kop--gekozen b, .zb-mv__kop--gekozen small { color: var(--kleur-primair); }
.zb-mv__sectie { padding-top: 6px; font-size: .9rem; font-weight: 700; letter-spacing: var(--letter-eyebrow); text-transform: uppercase; }
.zb-mv__sectie--later { padding-top: 16px; }
/* Het i-tje staat vóór de naam, op de plek van het posticoon, in de kleur van de post. */
.zb-mv__naam { display: flex; align-items: baseline; gap: 10px; }
.zb-mv__naam > i { flex: none; width: 16px; font-size: 16px; line-height: 1; text-align: center; }
.zb-mv__naam--energie > i { color: var(--kleur-steun); }
.zb-mv__naam--installatie > i { color: color-mix(in srgb, var(--kleur-donkerblauw) 62%, var(--kleur-wit)); }
/* De namen dragen zachte afbreekstreepjes (JS); alleen dáár breken ze op een telefoon. */
.zb-mv__naam b { min-width: 0; font-size: .84rem; font-weight: 700; line-height: 1.3; hyphens: manual; }
.zb-mv__bedrag { text-align: right; white-space: nowrap; font-size: .84rem; font-weight: 700; color: var(--kleur-donkerblauw); }
.zb-mv__bedrag--vervallen { color: var(--zb-tekst-gedempt); }
.zb-mv__bedrag--vervallen span { text-decoration: line-through; text-decoration-color: var(--kleur-donkerblauw); text-decoration-thickness: 2px; }
/* Gemarkeerd bedrag: de tint van het investeringsoverzicht, met het accent aan de kant
   waar dat blok staat (onder de bon op een telefoon, rechts ervan vanaf 768px). */
.zb-mv__bedrag--markeer {
  position: relative; background: color-mix(in srgb, var(--kleur-logo-oranje) 12%, var(--kleur-wit));
  box-shadow: inset 0 -3px 0 0 var(--kleur-logo-oranje); padding-left: 6px; padding-right: 12px; margin-right: -12px;
  /* align-self stretch (design system 07-09-2026): op de basislijn spant de cel alleen zijn
     tekst en valt de tint per regel uiteen in losse blokjes; nu vult hij de rijhoogte, dus
     vormen opeenvolgende gemarkeerde cellen één vak. */
  align-self: stretch; display: flex; align-items: center; justify-content: flex-end;
}
/* Groene markering: de energieregels (gas, stroom) wijzen naar het CO2-blok. */
.zb-mv__bedrag--groen { background: color-mix(in srgb, var(--kleur-primair) 12%, var(--kleur-wit)); box-shadow: inset 0 -3px 0 0 var(--kleur-primair); }
.zb-mv__totaal { padding-top: 10px; font-size: .95rem; font-weight: 700; white-space: nowrap; }
/* Het label "Per maand" mag op een telefoon over twee regels; de bedragen niet. */
.zb-mv__totaal:not(.zb-mv__bedrag) { white-space: normal; }
.zb-mv__totaal--gekozen { color: var(--kleur-primair); }
/* contain: inline-size: de slotzin spant alle kolommen en zou anders met zijn eigen
   breedte de intrinsieke bedragkolommen oprekken (op een telefoon viel de bon daardoor
   buiten de kaart en brak de naamkolom per letter af). */
.zb-mv__slot { grid-column: 1 / -1; min-width: 0; contain: inline-size; padding-top: 10px; font-size: .9rem; line-height: 1.5; color: var(--zb-tekst-gedempt); }
@media (min-width: 768px) {
  /* De naamkolom op minmax(0, 1fr), niet max-content: de slotzin spant alle kolommen en
     zou anders de naamkolom tot zijn eigen breedte oprekken, waarna de bedragkolommen
     buiten de kaart vallen. */
  .zb-mv { grid-template-columns: minmax(0, 1fr) minmax(88px, max-content) minmax(88px, max-content); column-gap: 8px; padding: 12px 14px; }
  .zb-mv__cel--nu { padding-right: 14px; }
  .zb-mv__kop b { font-size: 1.05rem; }
  .zb-mv__naam b { font-size: .92rem; white-space: nowrap; }
  .zb-mv__bedrag { font-size: .92rem; }
  /* De scheidingslijn komt terug als inset, want de lijn eronder valt weg achter de tint. */
  .zb-mv__bedrag--markeer { box-shadow: inset -3px 0 0 0 var(--kleur-logo-oranje), inset 0 -1px 0 0 var(--zb-rand-licht); padding-right: 14px; margin-right: -14px; }
  .zb-mv__bedrag--groen { box-shadow: inset -3px 0 0 0 var(--kleur-primair), inset 0 -1px 0 0 var(--zb-rand-licht); }
  /* Het streepje naar buiten op de eerste gemarkeerde regel: van de bon naar het blok ernaast.
     De groene streep wijst naar het CO2-blok, dat hoger staat dan de investering; daarom zit
     hij hoger dan de naad tussen de cellen. */
  .zb-mv__bedrag--markeer.zb-mv__bedrag--eerste::after { content: ''; position: absolute; right: -17px; bottom: -1.5px; width: 17px; height: 3px; background: var(--kleur-logo-oranje); }
  .zb-mv__bedrag--groen.zb-mv__bedrag--eerste::after { bottom: 14px; background: var(--kleur-primair); }
  .zb-mv__totaal { font-size: 1.15rem; }
}

/* ===== CO2-paneel en investeringsoverzicht naast de bon (design-system-demo
   warmteoplossing, CO2-blok overgenomen 07-09-2026, BugHerd #205) =====
   Twee panelen in één kolom: CO2 (groen) boven de investering (oranje). Het accent zit aan
   de kant van de gemarkeerde bonregels: boven op een telefoon (de kolom staat dan onder de
   bon), links vanaf 768px. De posten lopen van rand tot rand van het paneel. */
.zb-panelen { display: flex; flex-direction: column; gap: 12px; flex: 1 1 268px; max-width: 300px; align-self: flex-end; min-width: 0; }
.zb-invest {
  display: flex; flex-direction: column;
  border: 1px solid var(--zb-rand-licht); border-top: 3px solid var(--kleur-logo-oranje); border-radius: 8px;
  background: color-mix(in srgb, var(--kleur-logo-oranje) 12%, var(--kleur-wit)); box-shadow: var(--schaduw-zacht); padding: 10px 12px;
}
.zb-invest--co2 { border-top-color: var(--kleur-primair); background: color-mix(in srgb, var(--kleur-primair) 12%, var(--kleur-wit)); }
.zb-invest__kop { display: flex; align-items: center; gap: 8px; margin: 0 -12px; padding: 0 12px 6px; border-bottom: 2px solid var(--kleur-donkerblauw); font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.zb-invest__post { display: flex; justify-content: space-between; gap: 10px; margin: 0 -12px; padding: 5px 12px; border-bottom: 1px solid var(--zb-rand-licht); font-size: .8rem; font-weight: 700; line-height: 1.3; }
.zb-invest__post--aftrek { color: var(--kleur-groen); }
.zb-invest__post b { white-space: nowrap; text-align: right; font-weight: 700; }
.zb-invest__totaal { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding-top: 9px; font-size: .95rem; font-weight: 700; }
.zb-invest__totaal b { white-space: nowrap; }
.zb-invest__totaal--groen { color: var(--kleur-groen); }
@media (min-width: 768px) {
  .zb-invest { border-top-width: 1px; border-left: 3px solid var(--kleur-logo-oranje); }
  .zb-invest--co2 { border-top-color: var(--zb-rand-licht); border-left-color: var(--kleur-primair); }
}

/* ===== Wachtschakelaar in de stapkop van stap 3 (design system WachtSchakelaar) =====
   Twee standen, twee woorden: links wachten, rechts kiezen; het actieve woord is vet.
   Aan (checked) = "Ik maak nu een keuze". Het vinkje staat vooraan in de DOM (onzichtbaar,
   wel bedienbaar) zodat de woorden en de baan met ~ op zijn stand kunnen reageren. */
.zb-wacht { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; cursor: pointer; position: relative; }
.zb-wacht input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.zb-wacht__woord { font-size: .75rem; line-height: 1.25; color: var(--zb-tekst-gedempt); }
.zb-wacht__woord--uit { text-align: right; }
.zb-wacht__baan {
  position: relative; display: block; width: 46px; height: 26px; flex: none; border-radius: var(--radius-rond);
  background: color-mix(in srgb, var(--kleur-donkerblauw) 78%, var(--kleur-wit)); transition: background var(--overgang-snel) var(--easing);
}
.zb-wacht__baan::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--kleur-wit); transition: left var(--overgang-snel) var(--easing); }
.zb-wacht input:checked ~ .zb-wacht__baan { background: var(--kleur-primair); }
.zb-wacht input:checked ~ .zb-wacht__baan::after { left: 23px; }
.zb-wacht input:checked ~ .zb-wacht__woord--aan, .zb-wacht input:not(:checked) ~ .zb-wacht__woord--uit { font-weight: 700; color: var(--kleur-donkerblauw); }
.zb-wacht input:focus-visible ~ .zb-wacht__baan { outline: 3px solid var(--kleur-primair); outline-offset: 2px; }
.zb-techniek-effect { background: var(--zb-groen-zacht); border-radius: 8px; padding: 16px; font-size: 16px; margin: 16px 0 0; display: flex; gap: 8px; align-items: flex-start; }
.zb-techniek-effect i { color: var(--kleur-primair); font-size: 20px; flex: none; margin-top: 2px; }
.zb-techniek-rood { border-radius: 8px; padding: 16px; font-size: 16px; display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px;
  background: color-mix(in srgb, var(--zb-rood) 8%, var(--kleur-wit)); border: 1px solid var(--zb-rood); color: var(--zb-rood); }
.zb-techniek-rood i { font-size: 24px; flex: none; margin-top: 2px; }
.zb-techniek-rood b { display: block; margin-bottom: 4px; }
.zb-techniek-rood span { color: var(--kleur-donkerblauw); font-weight: 400; }

/* ---------- Stap 4: plan, advies, bewaren ---------- */
.zb-keuze-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.zb-bon { background: var(--kleur-wit); border: 2px solid var(--kleur-primair); border-radius: 8px; padding: 16px; }
.zb-bon h3 { margin: 0 0 4px; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.zb-bon h3 i { color: var(--kleur-primair); }
.zb-bon-sub { font-size: 14px; color: var(--zb-tekst-gedempt); margin: 0 0 16px; }
.zb-bon-groep { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-steun); margin: 16px 0 8px; }
.zb-bon-rij { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding: 4px 0; }
.zb-bon-rij.leeg { color: var(--zb-tekst-gedempt); font-style: italic; }
.zb-bon-rij b { white-space: nowrap; }
/* Bonregel die al is doorgegeven (offerte_interesses, besluit Stijn 07-09-2026). */
.zb-bon-rij__al { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--kleur-groen); white-space: nowrap; }
.zb-bon-rij__al i { font-size: 13px; }
.zb-bon-tussen { border-top: 1px dashed var(--zb-rand); margin-top: 8px; padding-top: 8px; font-weight: 600; }
.zb-bon-totaal { border-top: 2px solid var(--kleur-donkerblauw); margin-top: 16px; padding-top: 8px; display: flex; justify-content: space-between; gap: 16px; font-size: 17px; font-weight: 700; }
.zb-bon-maand { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; margin-top: 8px; }
.zb-bon-noot { font-size: 13px; color: var(--zb-tekst-gedempt); margin: 8px 0 0; }
.zb-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--kleur-primair);
  color: var(--kleur-wit); font-weight: 600; font-size: 16px; font-family: var(--font-basis);
  border: 0; border-radius: 8px; padding: 12px 24px; cursor: pointer; text-decoration: none; min-height: 48px;
}
.zb-btn:hover, .zb-btn:focus-visible { background: var(--kleur-primair-hover); color: var(--kleur-wit); }
.zb-btn.uit, .zb-btn:disabled { background: var(--kleur-vlak-zacht); color: var(--zb-tekst-gedempt); cursor: not-allowed; }
.zb-btn--secundair { background: transparent; color: var(--kleur-steun); padding: 12px 8px; }
.zb-btn--secundair:hover, .zb-btn--secundair:focus-visible { background: transparent; color: var(--kleur-donkerblauw); }
.zb-btn--omlijnd { background: var(--kleur-wit); color: var(--kleur-primair); border: 2px solid var(--kleur-primair); padding: 10px 18px; }
.zb-btn--omlijnd:hover, .zb-btn--omlijnd:focus-visible { background: var(--zb-groen-zacht); color: var(--kleur-primair-hover); }
.zb-knoprij { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.zb-bon-bevestig { margin-top: 16px; border: 1px solid var(--zb-rand); border-radius: 8px; padding: 16px; font-size: 15px; background: var(--kleur-lichtblauw); }
.zb-bon-bevestig[hidden] { display: none; }
.zb-bon-bevestig ul { margin: 8px 0 16px; padding-left: 24px; }
.zb-bon-bevestig__privacy { font-size: 14px; color: var(--zb-tekst-gedempt); margin: 0 0 16px; }
.zb-bon-status { margin-top: 16px; border-radius: 8px; padding: 16px; font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; background: var(--zb-groen-zacht); color: var(--kleur-groen); }
.zb-bon-status[hidden] { display: none; }
.zb-bon-status--fout { background: color-mix(in srgb, var(--kleur-fout) 8%, var(--kleur-wit)); color: var(--kleur-fout); }
.zb-bon-status i { font-size: 20px; flex: none; margin-top: 2px; }

/* Aanmeldkader (BugHerd #278/#279, besluit Stijn 07-09-2026): de gekozen
   warmteoplossing met de aanmeld-CTA voor de eerste ronde; verving het
   adviesgesprek-kader "Liever eerst even overleggen" (en het formulier +
   zbAdviesOplicht). Zelfde opbouw als de bon, subtiel anders: lichtgroene
   achtergrond bij dezelfde bosgroene rand. Zonder gekozen warmteoplossing is
   het kader [hidden] en spant de bon de volle breedte (.zb-keuze-grid--breed). */
.zb-aanmeld { background: var(--zb-groen-zacht); border: 2px solid var(--kleur-primair); border-radius: 8px; padding: 16px; }
.zb-aanmeld[hidden] { display: none; }
.zb-aanmeld h3 { margin: 0 0 4px; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.zb-aanmeld h3 i { color: var(--kleur-primair); }
.zb-aanmeld__naam { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--kleur-donkerblauw); }
.zb-aanmeld .zb-btn { margin-top: 16px; }
.zb-aanmeld__noot { margin: 8px 0 0; font-size: 13px; color: var(--zb-tekst-gedempt); }

.zb-bewaarblok { display: flex; gap: 16px; align-items: flex-start; background: var(--kleur-wit); border: 1px solid var(--zb-rand); border-radius: 8px; padding: 16px; margin-top: 16px; }
.zb-bewaarblok__icoon { width: 48px; height: 48px; border-radius: 8px; background: var(--kleur-primair); color: var(--kleur-wit); display: grid; place-items: center; font-size: 24px; flex: none; }
.zb-bewaarblok > div { min-width: 0; }
.zb-bewaarblok h3 { margin: 0 0 8px; font-size: 16px; }
.zb-bewaarblok p { margin: 0 0 16px; font-size: 1rem; color: var(--zb-tekst-gedempt); max-width: 60ch; }
.zb-bewaarblok--klaar { border-color: var(--kleur-primair); background: var(--zb-groen-zacht); }
.zb-bewaarblok--klaar .zb-bewaarblok__icoon { background: var(--kleur-groen); }
.zb-bewaarblok--klaar p { margin: 0; color: var(--kleur-donkerblauw); }

/* De antwoorden-recap staat onderaan stap 1 ("Klopt hier iets niet?"). */
/* De recap staat binnen de zonekaart, die zelf al een lichte tint heeft. Wit sprong
   daar te veel uit voor een uitklap die alleen voor correcties dient (BugHerd #56):
   nu het zachte grijze vlak, dus recessief maar wel vindbaar. Geen CTA. */
.zb-recap .antwoorden-recap {
  margin-top: 24px; box-shadow: none; padding: 8px 16px;
  background: var(--kleur-vlak-zacht); border-color: var(--zb-rand-licht);
}
.zb-recap .antwoorden-recap__titel { font-size: 16px; }
/* "Hoe komen de scores tot stand?": uitklap met uitleg en het prioriteitenpaneel. */


/* ---------- Rekenregels (röntgenstand voor het reviewteam) ----------
   Knop naast de paginakop, { }-labels op elk verantwoord element en een
   paneel rechts. Zie assets/js/zonebalk-rekenregels.js en de mockup
   dashboard-rekenregels-mockup.html. Niet gerenderd voor bewoners. */
.zb__kopregel { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.zb-rr-knopblok { text-align: right; }
.zb-rr-knop {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px;
  border: 1px solid var(--zb-rand); border-radius: 8px; background: var(--kleur-wit); color: var(--kleur-steun);
  font-family: var(--font-basis); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.zb-rr-knop code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; }
.zb-rr-knop:hover, .zb-rr-knop:focus-visible { border-color: var(--kleur-steun); }
.zb-rr-knop[aria-pressed="true"] { background: var(--kleur-steun); border-color: var(--kleur-steun); color: var(--kleur-wit); }
.zb-rr-knop__uit { display: none; }
.zb-rr-knop[aria-pressed="true"] .zb-rr-knop__aan { display: none; }
.zb-rr-knop[aria-pressed="true"] .zb-rr-knop__uit { display: inline; }
.zb-rr-alleen { font-size: 13px; color: var(--zb-tekst-gedempt); margin: 4px 0 0; }

.zb-rr-el { position: relative; }
body.zb-rr-aan .zb-rr-el { outline: 1px dashed color-mix(in srgb, var(--kleur-steun) 55%, transparent); outline-offset: 3px; border-radius: 6px; }
.zb-rr-badge {
  position: absolute; top: -10px; right: -6px; z-index: 5; display: none;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; line-height: 1;
  background: var(--kleur-steun); color: var(--kleur-wit); border: 0; border-radius: 6px; padding: 5px 6px;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); min-width: 28px; min-height: 22px;
}
body.zb-rr-aan .zb-rr-badge { display: inline-block; }
.zb-rr-badge:hover, .zb-rr-badge:focus-visible { background: var(--kleur-donkerblauw); }
.zb-rr-badge.actief { background: var(--kleur-donkerblauw); outline: 2px solid var(--kleur-accent); }
.zb-rr-badge--balk { top: -64px; }
.zb-rr-badge--rails { top: 4px; right: 0; left: auto; pointer-events: auto; }   /* in de plakkende rails-kolom */
.zb-rr-el--inline { display: inline-block; }
.zb-bon-sub.zb-rr-el { padding-right: 32px; }

.zb-rr-paneel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 1000;
  background: var(--kleur-wit); border-left: 1px solid var(--zb-rand); box-shadow: -8px 0 24px rgba(0,0,0,.12);
  transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column;
  color: var(--kleur-donkerblauw); font-size: 14px;
}
.zb-rr-paneel.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .zb-rr-paneel { transition: none; } }
.zb-rr-paneel__kop { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--zb-rand); background: var(--kleur-donkerblauw); color: var(--kleur-wit); }
.zb-rr-paneel__kop code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; color: var(--kleur-accent); }
.zb-rr-paneel__kop h2 { margin: 0; font-size: 16px; flex: 1 1 auto; color: var(--kleur-wit); }
.zb-rr-sluit { background: none; border: 0; color: var(--kleur-wit); font-size: 22px; cursor: pointer; min-width: 48px; min-height: 48px; }
.zb-rr-tabs { display: flex; border-bottom: 1px solid var(--zb-rand); background: var(--kleur-lichtblauw); }
.zb-rr-tab { flex: 1 1 auto; background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 8px; font-family: var(--font-basis); font-size: 14px; font-weight: 600; color: var(--zb-tekst-gedempt); cursor: pointer; min-height: 48px; }
.zb-rr-tab[aria-selected="true"] { color: var(--kleur-steun); border-bottom-color: var(--kleur-steun); }
.zb-rr-body { overflow-y: auto; padding: 16px; flex: 1 1 auto; }
.zb-rr-body[hidden] { display: none; }
.zb-rr-sectie { margin: 0 0 24px; }
.zb-rr-sectie > h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--kleur-steun); display: flex; align-items: center; gap: 8px; }
.zb-rr-sectie > h3 .nr { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--kleur-steun); color: var(--kleur-wit); font-size: 12px; }
.zb-rr-waarde { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.zb-rr-waarde small { display: block; font-size: 13px; font-weight: 400; color: var(--zb-tekst-gedempt); margin-top: 4px; }
.zb-rr-regel { background: var(--kleur-vlak-zacht); border-radius: 8px; padding: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.zb-rr-regel .k { color: var(--kleur-steun); }
.zb-rr-regel .u { color: var(--kleur-primair); font-weight: 700; }
.zb-rr-uitleg { margin: 8px 0 0; color: var(--zb-tekst-gedempt); font-size: 13px; }
.zb-rr-scroll { overflow-x: auto; }
.zb-rr-velden { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.zb-rr-velden th { text-align: left; font-weight: 700; color: var(--zb-tekst-gedempt); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; border-bottom: 1px solid var(--zb-rand); }
.zb-rr-velden td { padding: 6px; border-bottom: 1px solid var(--kleur-vlak-zacht); vertical-align: top; }
.zb-rr-velden td:first-child { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; overflow-wrap: anywhere; }
.zb-rr-velden .num { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.zb-rr-velden .anders { background: var(--zb-steun-zacht); font-weight: 700; }
.zb-rr-velden .bron { color: var(--zb-tekst-gedempt); font-size: 11.5px; }
.zb-rr-json { background: var(--kleur-donkerblauw); color: #F1ECE4; border-radius: 8px; padding: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; overflow-x: auto; margin: 0; max-height: 60vh; }
.zb-rr-json .s { color: var(--kleur-accent); } .zb-rr-json .n { color: #8FD19E; } .zb-rr-json .b { color: #F0A58F; }
.zb-rr-acties { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.zb-rr-mini { border: 1px solid var(--zb-rand); background: var(--kleur-wit); border-radius: 8px; font-family: var(--font-basis); font-size: 13px; font-weight: 600; color: var(--kleur-steun); padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.zb-rr-mini:hover, .zb-rr-mini:focus-visible { border-color: var(--kleur-steun); }
.zb-rr-zoeklabel { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.zb-rr-zoek { width: 100%; min-height: 44px; border: 1px solid var(--zb-rand); border-radius: 8px; padding: 8px 12px; font-family: var(--font-basis); font-size: 16px; margin: 0 0 8px; }
.zb-rr-boom { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.zb-rr-boom[hidden] { display: none; }
.zb-rr-boom details { margin-left: 12px; }
.zb-rr-boom summary { cursor: pointer; }
.zb-rr-boom .zb-rr-blad { margin-left: 12px; }
.zb-rr-boom .s { color: var(--kleur-steun); } .zb-rr-boom .n { color: var(--kleur-primair); font-weight: 700; } .zb-rr-boom .t { color: var(--zb-tekst-gedempt); } .zb-rr-boom .b { color: var(--kleur-fout); }
.zb-rr-lijst { list-style: none; margin: 0; padding: 0; }
.zb-rr-lijst li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--kleur-vlak-zacht); }
.zb-rr-lijst a { color: var(--kleur-steun); font-weight: 600; text-decoration: none; }
.zb-rr-lijst a:hover, .zb-rr-lijst a:focus-visible { text-decoration: underline; }
.zb-rr-lijst .stapnr { color: var(--zb-tekst-gedempt); font-size: 12px; white-space: nowrap; }
.zb-rr-noot { font-size: 12px; color: var(--zb-tekst-gedempt); margin: 8px 0 0; }

/* ---------- Tablet en groter ---------- */
/* De vier breakpoints hieronder (621, 701, 781 en de max-width 700 verderop)
   wijken bewust af van de afgesproken 480/768/1024: ze zijn afgestemd op de
   inhoud van de zonebalk, niet op apparaatklassen. Bij 621px passen kaartraster
   en zonekaart ruimer (tot 07-09-2026 was dit ook het punt waarop de zonewoorden
   in de balk pasten; die staan sinds BugHerd #272 als legenda eronder), bij 701px
   passen kop en getallen van een techniek op één regel, bij 781px past het
   keuzeraster in twee kolommen. Niet gladstrijken naar 768. */
@media (min-width: 621px) {
  .zb-zonekaart { padding: 24px; }
  .zb-zone-merk::after { font-size: 15px; }
  .zb-kolommen { grid-template-columns: 1fr 1fr; }
  .zb-kolommen--orde { grid-template-columns: repeat(3, 1fr); }
  .zb-techniek__lijsten { grid-template-columns: 1fr 1fr; }
  .zb-bon, .zb-aanmeld { padding: 24px; }
  .zb-bewaarblok { padding: 16px 24px; }
}
@media (min-width: 701px) {
  .zb-techniek__kop { flex-wrap: nowrap; }
  .zb-techniek__getallen { order: 0; flex-basis: auto; text-align: right; padding-left: 0; }
}
@media (min-width: 781px) {
  .zb-keuze-grid { grid-template-columns: 1.2fr 1fr; }
  /* Zonder aanmeldkader (geen warmteoplossing gekozen) spant de bon de hele rij. */
  .zb-keuze-grid--breed { grid-template-columns: 1fr; }
  .zb__kop h1 { font-size: 28px; }
}

/* ============================================================= *
 *  ÉÉN KLIKPAD — de woning-check als primaire route
 *  Besluit 01-09-2026, zie CLAUDE.md en de mockups onder
 *  mockups/klikpaden-en-navigatie/.
 * ============================================================= */

/* ── Hero met de woning-check (homepage) ──
   De drone-luchtfoto stond tot dit besluit als losse .wijk-band direct onder de
   hero; die sectie is vervallen en de foto is nu de hero-achtergrond zelf. Dat
   scheelt bijna een scherm scrollen vóór de eerste inhoud. De gradient houdt de
   witte tekst boven de WCAG AA-grens, ook op de lichte delen van de foto. */
.pilot-hero--check {
  position: relative;
  /* Terugval voor browsers zonder image-set(): die verwerpen de declaratie
     hieronder in zijn geheel, dus de gewone url() staat er als eerste. */
  background:
    radial-gradient(ellipse 85% 70% at 50% 44%,
      rgba(36,34,30,.70) 0%, rgba(36,34,30,.58) 40%,
      rgba(36,34,30,.30) 75%, rgba(36,34,30,.12) 100%),
    url('/images/Ramplaankwartier-drone-1.jpg') center / cover no-repeat;
  background:
    radial-gradient(ellipse 85% 70% at 50% 44%,
      rgba(36,34,30,.70) 0%,
      rgba(36,34,30,.58) 40%,
      rgba(36,34,30,.30) 75%,
      rgba(36,34,30,.12) 100%),
    image-set(
      url('/images/Ramplaankwartier-drone-1-800w.jpg') 1x,
      url('/images/Ramplaankwartier-drone-1.jpg') 2x) center / cover no-repeat;
  padding: 56px 20px 48px;
}
.pilot-hero--check h1,
.pilot-hero--check .pilot-hero__inner > p { color: var(--kleur-wit); }
/* Alleen de eigen alinea's van de hero (directe kinderen van __inner) worden wit.
   Het CTA-blok eronder bevat óók <p>'s (kop, tekst naast het icoon, en de teksten
   van de standen klaar/terug/bezig) en staat op zijn eigen crème vlak; een kale
   ".pilot-hero--check p" won daar van .keuze__kop en zette die tekst wit op wit. */
/* De verduistering is gericht: donker achter de tekst, licht naar de randen, zodat
   de luchtfoto zichtbaar blijft in plaats van dat er een grijze deken overheen ligt.
   Dat betekent wel dat de dekking aan de uiteinden van een lange kop afneemt, dus de
   tekstschaduw doet hier meer werk dan bij een paginabrede overlay. */
.pilot-hero--check h1 { text-shadow: 0 1px 14px rgba(36,34,30,.75), 0 0 4px rgba(36,34,30,.45); }
.pilot-hero--check .pilot-hero__inner > p { text-shadow: 0 1px 10px rgba(36,34,30,.8), 0 0 3px rgba(36,34,30,.5); }
.pilot-hero--check h1 { margin-bottom: 16px; }
.pilot-hero--check .pilot-hero__inner > p { margin-bottom: 28px; }
.pilot-hero--check .pilot-sectie__label { color: var(--kleur-accent); }

@media (min-width: 768px) {
  .pilot-hero--check { padding: 88px 32px 76px; }
}

/* ── Hero met de luchtfoto van de wijk (Over ons; BugHerd #40) ──
   Zelfde opbouw als de homepage-hero: gerichte verduistering zodat de foto zichtbaar
   blijft en de witte tekst toch ruim boven de WCAG AA-grens uitkomt. De 800px-variant
   is een deploy-artefact (scripts/genereer-beeldvarianten.php, WW_BRONNEN). */
.pilot-hero--wijk {
  position: relative;
  /* Terugval voor browsers zonder image-set(): die verwerpen de declaratie hieronder
     in zijn geheel, dus de gewone url() staat er als eerste. */
  background:
    radial-gradient(ellipse 85% 70% at 50% 46%,
      rgba(36,34,30,.72) 0%, rgba(36,34,30,.60) 40%,
      rgba(36,34,30,.32) 75%, rgba(36,34,30,.14) 100%),
    url('/images/wijk-drone-overons.jpg') center / cover no-repeat;
  background:
    radial-gradient(ellipse 85% 70% at 50% 46%,
      rgba(36,34,30,.72) 0%,
      rgba(36,34,30,.60) 40%,
      rgba(36,34,30,.32) 75%,
      rgba(36,34,30,.14) 100%),
    image-set(
      url('/images/wijk-drone-overons-800w.jpg') 1x,
      url('/images/wijk-drone-overons.jpg') 2x) center / cover no-repeat;
}
.pilot-hero--wijk h1,
.pilot-hero--wijk p { color: var(--kleur-wit); }
.pilot-hero--wijk h1 { text-shadow: 0 1px 14px rgba(36,34,30,.75), 0 0 4px rgba(36,34,30,.45); }
.pilot-hero--wijk p  { text-shadow: 0 1px 10px rgba(36,34,30,.8),  0 0 3px rgba(36,34,30,.5); }

/* ── Sectie met een beeld naast de tekst (BugHerd #39) ──
   Mobiel onder elkaar, vanaf tablet twee kolommen. De alinea houdt zijn 65ch-maximum;
   het beeld schaalt mee binnen zijn kolom. */
.sectie-met-beeld { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.sectie-met-beeld__beeld { width: 100%; height: auto; display: block; border-radius: 8px; }
@media (min-width: 768px) {
  /* Bovenaan uitlijnen: het beeld is hoger dan de alinea, en centreren duwt de tekst
     dan naar het midden met een gat boven de eerste regel. */
  .sectie-met-beeld { grid-template-columns: 1.15fr 1fr; gap: 32px; }
}

/* ── Compacte hero (verdiepingspagina's) ──
   De eerste-rondepagina is geen tweede voordeur meer; de hero mag daar dus
   kleiner en zonder knop. */
.pilot-hero--compact { padding: 40px 20px 36px; }
.pilot-hero--compact h1 { font-size: 1.7rem; margin-bottom: 14px; }
.pilot-hero--compact p { font-size: 1.05rem; margin-bottom: 0; }
@media (min-width: 768px) {
  .pilot-hero--compact { padding: 52px 32px 44px; }
  .pilot-hero--compact h1 { font-size: 2.1rem; }
}

/* ── Het CTA-blok met één route ──
   Accentrand en icoon van steun-oranje naar bosgroen: het blok bood twee routes
   en de check was de tweede; nu is hij de enige, en dus de primaire actie. */
.keuze__rij--check { border-left-color: var(--kleur-primair); }
.keuze__rij--check .keuze__icoon { color: var(--kleur-primair); }

/* ── Aanmelden startavond (eerste ronde) ──
   Tijdelijke uitzondering op "één primaire knop per pagina": tot na de
   startavond blijft aanmelden hier mogelijk, maar zichtbaar secundair. Het blok
   zit als losse include in templates/startavond.php zodat het in één handeling
   weg kan. */
/* Aanmeldblok bovenaan de eerste-rondepagina (BugHerd #144): design system CtaEersteRonde
   (BugHerd #222, 07-09-2026). Witte kaart, bosgroene linkerrand van 4px in dezelfde kleur
   als de knop (één actiekleur per blok; een oranje streep trok de blik naar de rand in
   plaats van naar de knop), zo breed als de inhoud, tekst en knop naast elkaar met omloop
   op een smal scherm. Tot 07-09 had het blok de oranje rand van het startavondblok. */
.eerste-ronde-cta {
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--kleur-primair);
  border-radius: var(--radius);
  padding: 14px 18px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.eerste-ronde-cta__tekst { color: var(--kleur-donkerblauw); line-height: 1.5; margin: 0; min-width: 0; }
.eerste-ronde-cta__tekst strong { display: block; font-size: 1rem; }
.eerste-ronde-cta__sub { display: block; font-size: .95rem; opacity: .75; margin-top: 2px; }
.eerste-ronde-cta .btn-primair { flex: none; white-space: nowrap; }
.startavond {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-left: 5px solid var(--kleur-steun);
  border-radius: 0 8px 8px 0;
  padding: 24px 22px;
  max-width: 760px;
  margin: 0 auto;
}
.startavond h2 {
  font-size: 1.6rem; /* BugHerd #100: was 1.3rem */
  margin: 0 0 12px;
  color: var(--kleur-donkerblauw);
}
.startavond p { margin: 0 0 18px; max-width: 60ch; }
/* De aanmeldknop (BugHerd #130 twee knoppen, #143 nog één, #154 groen in plaats van
   omlijnd): op een telefoon volle breedte, daarboven een vaste maat waarin de tekst op
   één regel past. */
.startavond__knoppen { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-bottom: 18px; }
.startavond__knoppen .btn-primair { width: 100%; text-align: center; justify-content: center; }
@media (min-width: 480px) {
  .startavond__knoppen { align-items: flex-start; }
  .startavond__knoppen .btn-primair { width: 360px; }
}

/* Omlijnde knop op lichte grond. .btn-omlijnd bestond al maar is voor donkere
   achtergronden (witte rand en tekst) en is hier dus niet bruikbaar. */
.btn-secundair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--kleur-wit);
  color: var(--kleur-primair);
  border: 2px solid var(--kleur-primair);
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  min-height: 48px;
  transition: background-color .2s ease;
}
.btn-secundair:hover, .btn-secundair:focus {
  background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
  color: var(--kleur-primair);
}

/* ── Het CTA-blok in een hero ──
   Exact de opmaak van het blok onderaan de pagina: kop gecentreerd bóven de
   kaart, daaronder de witte rij met groene linkerrand, icoon, tekst en velden.
   Eén toevoeging: onderaan staat dit blok op een egale crème sectie, hier zou
   het op de luchtfoto liggen. Daarom krijgt het hier diezelfde crème ondergrond
   mee als eigen vlak — zo blijft de kop gewoon donker en leesbaar, zonder dat
   de vorm afwijkt van die onderaan. */
/* Geen crème vlak meer om het blok (BugHerd #72): de witte kaart met de velden staat
   direct op de foto, met erboven een witte kop met dezelfde tekstschaduw als de h1. */
.keuze--hero { background: none; border-radius: 0; padding: 0; box-shadow: none; }
.keuze--hero .keuze__rij { box-shadow: 0 12px 40px -12px rgba(0,0,0,.45); }
.pilot-hero--check .keuze p.keuze__kop {
  color: var(--kleur-wit);
  text-shadow: 0 1px 14px rgba(36,34,30,.75), 0 0 4px rgba(36,34,30,.45);
}
/* De hero zet zijn alinea's gecentreerd, op 1.1rem en met 36px eronder
   (.pilot-hero p); dat wint van de klassen van het CTA-blok en verkleinde de
   kop, centreerde de tekst naast het icoon en gaf beide een grote ondermarge.
   Hier worden de waarden van het blok onderaan de pagina hersteld. Alle standen
   (nieuw, bezig, klaar, terug) delen deze markup, dus dit dekt ze allemaal. */
.pilot-hero .keuze p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  max-width: none;
  text-align: left;
}
/* Dezelfde specificiteit als de regel hierboven, dus de demping van .keuze__tekst
   houdt ook in de hero stand. */
.pilot-hero .keuze p.keuze__tekst {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--kleur-donkerblauw) 75%, transparent);
}
.pilot-hero .keuze p.keuze__kop {
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 8px;
}
/* Op de foto-hero van de homepage iets groter en verder van de kaart (BugHerd #78);
   staat ná de regel hierboven omdat de specificiteit gelijk is. */
.pilot-hero--check .keuze p.keuze__kop { font-size: 1.35rem; margin-bottom: 24px; }
@media (min-width: 768px) {
  .pilot-hero .keuze p.keuze__kop { font-size: 1.6rem; }
  .pilot-hero--check .keuze p.keuze__kop { font-size: 2rem; } /* BugHerd #78 */
}

/* ── Vijf maten voor het woningcheck-blok (.keuze--*) ──
   Bron: design system, patches/keuze-varianten.css (03-09-2026). Hoort bij de
   template-wijziging in keuze-routes.php: $keuze_variant is de maat ('volledig',
   'regel', 'boven', 'band', 'kaal'), $keuze_hero de losse vlag voor het crème
   vlak hierboven, die met elke maat combineert. De basis .keuze ís de maat
   'volledig' en krijgt geen eigen regels; de wrapper schrijft keuze--volledig
   wel uit zodat je in de inspector altijd ziet welke maat er staat. Twee
   variabelen uit de patch bestaan hier niet en zijn vertaald: --vlak-groen-zacht
   naar de 8%-bosgroentint van .bg-groen-zacht, --leesbreedte naar 65ch. */
/* ── regel ──────────────────────────────────────────────────────
   Eén regel: icoon, korte kop, velden en knop naast elkaar. Voor plekken waar
   het blok een tussenstop is en geen bestemming — halverwege een leestekst,
   onder een tabel.

   De kop staat in de PHP buiten de rij en het icoon erbinnen, dus de twee
   tussenlagen worden opgeheven met display:contents. Alle vijf de elementen
   worden dan flex-kinderen van .keuze en `order` zet ze in de juiste volgorde:
   icoon, kop, velden. De wervende tekst valt weg — bij één regel is de kop de
   hele boodschap.

   Alleen vanaf 768px: onder die breedte stapelt .keuze__rij al en is een regel
   van vijf elementen naast elkaar niet houdbaar. */
.keuze--regel { max-width: none; margin: 0; }
.keuze--regel .keuze__tekst { display: none; }
.keuze--regel .keuze__meer { display: none; }
/* Op elke breedte één omlopende regel (design system KeuzeBlok `regel`; BugHerd #223,
   07-09-2026: tot dan alleen vanaf 768px, waardoor op een telefoon de kop boven de kaart
   viel en het icoon er alleen in stond). */
.keuze--regel {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  background: var(--kleur-wit);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--kleur-primair);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.keuze--regel .keuze__opties,
.keuze--regel .keuze__rij { display: contents; }
.keuze--regel .keuze__icoon { order: 1; font-size: 26px; }
.keuze--regel .keuze__kop {
  order: 2;
  text-align: left;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
}
.keuze--regel .keuze__check-form { order: 3; }

/* ── boven ──────────────────────────────────────────────────────
   Tekst op volle breedte, velden eronder. Voor uitleg die langer is dan één
   regel: de tekst houdt de leesbreedte, de velden beginnen op de linkermarge
   in plaats van uitgelijnd op de tekstkolom.

   Verschil met `volledig`: geen kop erboven, en het icoon staat inline vóór de
   vetgedrukte regel in plaats van in een eigen kolom. De rij wordt daarvoor een
   grid van twee kolommen, met het formulier over de volle breedte op rij twee. */
.keuze--boven { max-width: none; margin: 0; }
.keuze--boven .keuze__kop { display: none; }
.keuze--boven .keuze__meer { display: none; }
.keuze--boven .keuze__rij {
  border-left-width: 1px;
  border-left-color: var(--rand);
}
@media (min-width: 768px) {
  .keuze--boven .keuze__rij {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 4px 10px;
  }
  .keuze--boven .keuze__icoon { font-size: 26px; align-self: start; }
  .keuze--boven .keuze__tekst { grid-column: 2; max-width: 65ch; }
  .keuze--boven .keuze__check-form { grid-column: 1 / -1; margin-top: 10px; }
}

/* ── band ───────────────────────────────────────────────────────
   Geen kaart maar een zachte sectietint. Voor een tussenstop in een leestekst
   waar een witte kaart met accentrand te veel gewicht heeft: het blok hoort bij
   de tekst eromheen, het onderbreekt hem niet.

   De kaart-chrome wordt van .keuze__rij afgehaald en de tint komt op .keuze
   zelf te liggen, zodat de tint één vlak is en niet twee geneste. */
.keuze--band {
  max-width: none;
  margin: 0;
  width: fit-content;
  background: color-mix(in srgb, var(--kleur-primair) 8%, var(--kleur-wit));
  border-radius: var(--radius);
  padding: 16px 18px;
}
.keuze--band .keuze__tekst { display: none; }
.keuze--band .keuze__icoon { display: none; }
.keuze--band .keuze__meer { display: none; }
.keuze--band .keuze__rij {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .keuze--band {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .keuze--band .keuze__opties,
  .keuze--band .keuze__rij { display: contents; }
  .keuze--band .keuze__kop {
    text-align: left;
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0;
  }
}

/* ── kaal ───────────────────────────────────────────────────────
   Alleen de velden met labels erboven. Voor binnen een formulier of het
   dashboard, waar een kaart in een kaart dubbelop is en de omliggende pagina
   de context al geeft.

   Alleen de velden, met de placeholders als aanduiding — geen labels erboven.
   Deze maat is dus met alleen CSS te doen. */
.keuze--kaal { max-width: none; margin: 0; }
.keuze--kaal .keuze__kop { display: none; }
.keuze--kaal .keuze__icoon { display: none; }
.keuze--kaal .keuze__tekst { display: none; }
.keuze--kaal .keuze__meer { display: none; }
.keuze--kaal .keuze__rij {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .keuze--kaal .keuze__check-form { align-items: flex-end; }
}
/* De losse regel naast de knop ("Gratis en verplicht tot niets."): onderbouwing,
   dus gedempt, en op dezelfde onderlijn als de knop. */
.keuze--kaal .keuze__naast {
  font-size: 0.9rem;
  color: var(--kleur-donkerblauw);
  opacity: 0.75;
}

/* ===== Adres-keuzelijst (BAG): meerdere adressen op één huisnummer =====
   Verschijnt onder het huisnummerveld (woning-check én algemene formulieren)
   zodat de bezoeker direct het juiste adres kiest, incl. het kale nummer.
   Gevuld door toonAdresKeuze() (vragen.php) en toonKeuze() (bag-adres.js). */
.bag-adres-keuze {
  margin-top: 8px;
  padding: 16px;
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: 8px;
}
.bag-adres-keuze__kop {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--kleur-donkerblauw);
}
.bag-adres-keuze__optie {
  display: block;
  width: 100%;
  min-height: 48px; /* tikdoel */
  margin-top: 8px;
  padding: 8px 16px;
  text-align: left;
  font-size: 1rem;
  font-family: var(--font-basis);
  color: var(--kleur-donkerblauw);
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lichtgrijs);
  border-radius: 8px;
  cursor: pointer;
}
.bag-adres-keuze__optie:hover { border-color: var(--kleur-primair); color: var(--kleur-primair); }
.bag-adres-keuze__optie:focus-visible { outline: 2px solid var(--kleur-primair); outline-offset: 2px; }

/* ==========================================================================
   Meekijkbalk (wervingsteam): vaste balk onderaan zolang een beheerder via
   /dashboard/adres/ het dossier van een bewoner bekijkt (meekijk-balk.js).
   Waarschuwingsgeel met donkere tekst: onmiskenbaar, maar geen foutmelding.
   ========================================================================== */
.meekijk-balk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: var(--kleur-waarschuwing);
  color: var(--kleur-waarschuwing-tekst);
  border-top: 3px solid var(--kleur-steun);
  font-size: 1rem;
  line-height: 1.5;
}
.meekijk-balk__icoon { font-size: 24px; flex-shrink: 0; }
.meekijk-balk__stop {
  margin-left: auto;
  flex-shrink: 0;
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--kleur-waarschuwing-tekst);
  border-radius: 8px;
  background: var(--kleur-wit);
  color: var(--kleur-donkerblauw);
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.meekijk-balk__stop:hover { border-color: var(--kleur-donkerblauw); }
/* De vaste balk mag de onderkant van de pagina (footer, laatste knoppen)
   niet blijvend afdekken. */
body.heeft-meekijk-balk { padding-bottom: 96px; }