@import url("../fonts/fonts.css");

/* =========================================================================
   De Groene Adviseur

   Vormtaal: claymorphism. Alles is een zacht, dik, afgerond object dat je
   bijna zou kunnen oppakken. Twee schaduwen doen het werk: een zachte
   slagschaduw naar buiten en een lichte binnenrand bovenaan, alsof het licht
   van linksboven komt. Randen zijn er niet; de schaduw doet de scheiding.

   Twee standen, en die zijn betekenisdragend:
     omhoog (--klei-op)   iets dat je kunt aanraken: knop, kaart, keuze
     ingedrukt (--klei-in) iets dat een waarde bevat: invoerveld, gekozen
                           optie, de goot waarin een balk staat

   De inhoud blijft leidend: elk getal draagt zijn bron en peildatum. Die
   discipline is het merk, de vorm maakt het alleen aaibaar.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Kleur, rechtstreeks afgelezen uit het logo. Het logo bevat drie kleuren:
     het groen van het huis en het blad, het geel van de zon en het blauw van
     de zonnepanelen. De site gebruikt precies die drie, en niets anders. */

  /* Groen: van het diepste logogroen (#003018) naar het middengroen (#006030). */
  --inkt:        #032418;
  --dennen:      #084c30;
  --mos:         #0b6b43;
  --mos-lijn:    #10804f;

  /* Het felle bladgroen uit het logo. Alleen voor vlakken, nooit voor kleine
     tekst: op een lichte ondergrond haalt het geen 4,5:1. */
  --blad:        #3d8f00;
  --blad-licht:  #62c018;

  --kalk:        #eaeee6;
  --kalk-diep:   #e1e6db;
  --wit:         #fbfcf9;

  /* De zon. Dit is de enige kleur die "doe iets" betekent: knoppen en accenten. */
  --zon:         #ffc300;
  --zon-licht:   #ffd54a;

  /* Het blauw van de zonnepanelen. Voor links en voor de middenband in de ladder. */
  --staal:       #004e86;
  --staal-licht: #6fb6e8;

  --roest:       #9c4a2f;

  /* Deze twee zijn bewust donkerder dan ze er "mooi" uitzien: ze dragen kleine
     tekst op een lichte ondergrond en moeten 4,5:1 halen. */
  --zon-diep:    #7a5400;
  --leisteen:    #5a6862;

  /* Alleen voor de balken van traag terugverdienende maatregelen. Die staan ook
     op een donkere ondergrond en mogen daarom lichter blijven dan de tekstkleur. */
  --balk-traag:  #7d8b85;

  --tekst:        #14231e;
  --tekst-zacht:  #4c5c55;
  --tekst-licht:  #e8ece5;
  --tekst-licht-zacht: #a8bab1;

  --lijn:        #d3dacd;
  --lijn-sterk:  #b9c4b1;

  /* Typografie */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace;

  --stap--2: 0.75rem;
  --stap--1: 0.875rem;
  --stap-0:  1.0625rem;
  --stap-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --stap-2:  clamp(1.4rem,  1.28rem + 0.6vw,  1.8rem);
  --stap-3:  clamp(1.7rem,  1.46rem + 1.2vw,  2.4rem);
  --stap-4:  clamp(2.05rem, 1.66rem + 1.95vw, 3.25rem);
  --stap-5:  clamp(2.3rem,  1.86rem + 2.2vw,  3.6rem);

  /* Ruimte. Claymorphism vraagt dikkere binnenruimte, anders wordt het klef. */
  --r1: 0.25rem;
  --r2: 0.5rem;
  --r3: 0.75rem;
  --r4: 1rem;
  --r5: 1.5rem;
  --r6: 2rem;
  --r7: 3rem;
  --r8: 4rem;
  --r9: 6rem;

  --breedte:  71rem;
  --leesbaar: 38rem;

  /* Rondingen. Dit is waar de vormtaal zichtbaar wordt. */
  --rond-klein: 14px;
  --rond:       20px;
  --rond-groot: 30px;
  --rond-pil:   999px;

  /* Klei op een lichte ondergrond. Licht van linksboven: witte binnenrand aan
     de bovenkant, zachte schaduw eronder. */
  --klei-op:
    0 14px 28px -12px rgba(20, 56, 46, 0.28),
    0 4px 8px -4px rgba(20, 56, 46, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 8px -4px rgba(20, 56, 46, 0.10);

  --klei-op-klein:
    0 8px 16px -8px rgba(20, 56, 46, 0.26),
    0 2px 4px -2px rgba(20, 56, 46, 0.10),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);

  /* Ingedrukt: het object bevat iets in plaats van dat je het aanraakt. */
  --klei-in:
    inset 3px 4px 9px rgba(20, 56, 46, 0.16),
    inset -2px -2px 6px rgba(255, 255, 255, 0.92);

  /* Dezelfde twee standen op een donkere ondergrond. */
  --klei-op-donker:
    0 16px 32px -14px rgba(0, 0, 0, 0.65),
    0 4px 10px -4px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.09),
    inset 0 -5px 10px -5px rgba(0, 0, 0, 0.4);

  --klei-in-donker:
    inset 3px 4px 10px rgba(0, 0, 0, 0.5),
    inset -2px -2px 6px rgba(255, 255, 255, 0.05);
}

/* -------------------------------------------------------------------------
   2. Basis
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--kalk);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: var(--stap-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--stap-5); }
h2 { font-size: var(--stap-3); }
h3 { font-size: var(--stap-1); }
h4 { font-size: var(--stap-0); font-family: var(--sans); font-weight: 600; line-height: 1.4; }

p, li { text-wrap: pretty; }
p { margin: 0; }

/* Links krijgen het blauw van de zonnepanelen. Geel is in dit systeem
   voorbehouden aan knoppen, zodat "geel" altijd hetzelfde betekent. */
a { color: inherit; text-decoration-color: var(--staal); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }

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

:focus-visible {
  outline: 3px solid var(--zon);
  outline-offset: 3px;
  border-radius: var(--rond-klein);
}

::selection { background: var(--zon); color: var(--inkt); }

/* Buiten beeld schuiven met translate in plaats van een negatieve left-waarde:
   dat laat de paginabreedte met rust. */
.overslaan {
  position: fixed;
  top: var(--r4);
  left: var(--r4);
  z-index: 100;
  background: var(--inkt);
  color: var(--tekst-licht);
  padding: var(--r3) var(--r5);
  border-radius: var(--rond-pil);
  box-shadow: var(--klei-op-donker);
  transform: translateY(calc(-100% - var(--r6)));
  transition: transform 0.16s ease;
}
.overslaan:focus { transform: translateY(0); }

.verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   3. Opmaakhulpjes
   ------------------------------------------------------------------------- */

.omhulsel {
  width: min(100% - 2.5rem, var(--breedte));
  margin-inline: auto;
}
@media (min-width: 48em) {
  .omhulsel { width: min(100% - 4rem, var(--breedte)); }
}

/* Verticale ritme-hulp. Alleen deze regelt afstanden tussen broers en zussen,
   zodat sectiepadding en elementmarges elkaar nooit overschrijven. */
.stroom > * + * { margin-top: var(--r4); }
.stroom--ruim > * + * { margin-top: var(--r5); }
.stroom--krap > * + * { margin-top: var(--r2); }

.sectie { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.sectie--kalk  { background: var(--kalk-diep); }
.sectie--wit   { background: var(--wit); }
.sectie--donker {
  background: var(--inkt);
  color: var(--tekst-licht);
}
.sectie--donker h1, .sectie--donker h2, .sectie--donker h3 { color: var(--wit); }
.sectie--donker a, .hero a { text-decoration-color: var(--staal-licht); }

.leesbaar { max-width: var(--leesbaar); }
.midden { margin-inline: auto; text-align: center; }
.midden .leesbaar { margin-inline: auto; }

/* -------------------------------------------------------------------------
   4. Terugkerende kleine onderdelen
   ------------------------------------------------------------------------- */

/* Bovenkopje: benoemt wat voor soort blok volgt. */
.opschrift {
  font-family: var(--mono);
  font-size: var(--stap--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leisteen);
  display: flex;
  align-items: center;
  gap: var(--r3);
}
.opschrift::after {
  content: "";
  flex: 1;
  height: 6px;
  border-radius: var(--rond-pil);
  background: var(--kalk-diep);
  box-shadow: var(--klei-in);
}
.sectie--kalk .opschrift::after { background: var(--kalk); }
.sectie--donker .opschrift { color: var(--zon); }
.sectie--donker .opschrift::after {
  background: var(--inkt);
  box-shadow: var(--klei-in-donker);
}
.hero .opschrift { color: var(--zon); }
.hero .opschrift::after {
  background: var(--inkt);
  box-shadow: var(--klei-in-donker);
}

/* Bronvermelding. Staat onder elk blok met cijfers. Dit is het merk. */
.bron {
  font-family: var(--mono);
  font-size: var(--stap--2);
  line-height: 1.55;
  color: var(--leisteen);
  background: var(--kalk-diep);
  border-radius: var(--rond-klein);
  box-shadow: var(--klei-in);
  padding: var(--r4);
  margin-top: var(--r5);
}
.bron b { font-weight: 400; color: var(--tekst-zacht); }
.sectie--donker .bron,
.hero .bron {
  color: var(--tekst-licht-zacht);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: var(--klei-in-donker);
}
.sectie--donker .bron b, .hero .bron b { color: var(--wit); }

.inleiding {
  font-size: var(--stap-1);
  line-height: 1.55;
  color: var(--tekst-zacht);
}
.sectie--donker .inleiding { color: var(--tekst-licht-zacht); }

/* Knoppen. Dik, rond en indrukbaar: bij het indrukken zakt de knop in de
   pagina en verliest hij zijn slagschaduw. */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  padding: 0.95rem 1.75rem;
  border: 0;
  border-radius: var(--rond-pil);
  font-family: var(--sans);
  font-size: var(--stap-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.knop--primair {
  background: var(--zon);
  color: #2a1f00;
  box-shadow:
    0 12px 22px -10px rgba(122, 84, 0, 0.7),
    0 3px 6px -3px rgba(122, 84, 0, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -4px 8px -4px rgba(90, 62, 0, 0.4);
}
.knop--primair:hover { background: var(--zon-licht); transform: translateY(-2px); }
.knop--primair:active {
  transform: translateY(2px);
  box-shadow:
    inset 3px 4px 9px rgba(90, 62, 0, 0.45),
    inset -2px -2px 6px rgba(255, 255, 255, 0.4);
}

.knop--rand {
  background: var(--wit);
  color: var(--tekst);
  box-shadow: var(--klei-op-klein);
}
.knop--rand:hover { transform: translateY(-2px); }
.knop--rand:active { transform: translateY(2px); box-shadow: var(--klei-in); }

.sectie--donker .knop--rand,
.hero .knop--rand {
  background: var(--dennen);
  color: var(--tekst-licht);
  box-shadow: var(--klei-op-donker);
}
.sectie--donker .knop--rand:active,
.hero .knop--rand:active { box-shadow: var(--klei-in-donker); }

.knop--breed { width: 100%; }

/* Kaart */
.kaart {
  background: var(--wit);
  border-radius: var(--rond-groot);
  box-shadow: var(--klei-op);
  padding: var(--r6);
}
.sectie--donker .kaart {
  background: var(--dennen);
  box-shadow: var(--klei-op-donker);
}

/* Waarschuwingsblok voor feiten die tegen het verkoopverhaal in gaan.
   Krijgt bewust de ingedrukte stand: dit is geen knop, dit is een mededeling. */
.let-op {
  background: rgba(156, 74, 47, 0.09);
  border-radius: var(--rond);
  box-shadow: inset 3px 4px 9px rgba(124, 56, 38, 0.14), inset -2px -2px 6px rgba(255, 255, 255, 0.6);
  padding: var(--r5);
}
.let-op__kop {
  font-family: var(--mono);
  font-size: var(--stap--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--roest);
  margin-bottom: var(--r2);
}
.sectie--donker .let-op,
.hero .let-op {
  background: rgba(224, 169, 74, 0.10);
  box-shadow: var(--klei-in-donker);
}
.sectie--donker .let-op__kop, .hero .let-op__kop { color: var(--zon-licht); }

/* Raster */
.raster {
  display: grid;
  gap: var(--r5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.raster--twee { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

/* -------------------------------------------------------------------------
   5. Sitekop
   ------------------------------------------------------------------------- */

/* Lichte kopbalk. Dat is geen smaakkeuze: in het woordmerk zijn "DE" en
   "ADVISEUR" donkergroen, en die verdwijnen op een donkere ondergrond.
   Het logo bepaalt hier dus de kleur van de balk, niet andersom. */
.site-kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wit);
  color: var(--tekst);
  box-shadow: 0 10px 24px -14px rgba(20, 56, 46, 0.5), inset 0 -1px 0 rgba(20, 56, 46, 0.08);
}

.site-kop__binnen {
  display: flex;
  align-items: center;
  gap: var(--r5);
  min-height: 4.75rem;
}

/* Het logo is een illustratie met witte contourlijnen. Die vraagt een donkere
   ondergrond om te werken, en verdraagt geen tegel of kader eromheen: het
   embleem heeft zijn eigen ronde vorm al. */
.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
/* De horizontale versie van het logo: embleem, woordmerk en payoff naast
   elkaar. De gestapelde versie past niet in een kopbalk zonder dat het
   woordmerk onleesbaar wordt. */
.merk__logo {
  height: 3.6rem;
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 36em) {
  .merk__logo { height: 2.9rem; }
}

.merk__naam {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* Het volledige logo met woordmerk en payoff. Alleen waar er ruimte is. */
.merk-volledig {
  display: inline-block;
  max-width: 15rem;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.merk-volledig img { width: 100%; height: auto; }

.site-nav { margin-left: auto; }
.site-nav__lijst {
  display: flex;
  align-items: center;
  gap: var(--r2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link {
  display: block;
  color: var(--tekst-zacht);
  text-decoration: none;
  font-size: var(--stap--1);
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border-radius: var(--rond-pil);
  white-space: nowrap;
  transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.site-nav__link:hover { color: var(--tekst); background: var(--kalk); }
.site-nav__link[aria-current="page"] {
  color: var(--dennen);
  font-weight: 600;
  background: var(--kalk-diep);
  box-shadow: var(--klei-in);
}

.site-kop__acties { display: flex; align-items: center; gap: var(--r3); }
.site-kop__acties .knop { padding: 0.7rem 1.3rem; font-size: var(--stap--1); }

.menu-knop {
  display: none;
  margin-left: auto;
  background: var(--wit);
  border: 0;
  border-radius: var(--rond-pil);
  box-shadow: var(--klei-op-klein);
  color: var(--tekst);
  padding: 0.7rem 1.2rem;
  font: inherit;
  font-size: var(--stap--1);
  font-weight: 600;
  cursor: pointer;
}
.menu-knop:active { box-shadow: var(--klei-in); }

@media (max-width: 63.99em) {
  .menu-knop { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--wit);
    padding: var(--r4) 0 var(--r5);
    margin-left: 0;
    box-shadow: 0 18px 28px -18px rgba(20, 56, 46, 0.5);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav__lijst {
    flex-direction: column;
    align-items: stretch;
    gap: var(--r2);
    width: min(100% - 2.5rem, var(--breedte));
    margin-inline: auto;
  }
  .site-nav__link {
    padding: 0.85rem 1.1rem;
    font-size: var(--stap-0);
    background: var(--wit);
    border-radius: var(--rond-klein);
    box-shadow: var(--klei-op-klein);
  }
  .site-nav__link[aria-current="page"] { background: var(--kalk-diep); box-shadow: var(--klei-in); }
  .site-kop__acties { display: none; }
}

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */

.hero {
  background: var(--inkt);
  color: var(--tekst-licht);
  padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  position: relative;
  overflow: hidden;
}

/* Twee zachte lichtvlekken. Claymorphism leeft van diffuus licht; harde lijnen
   zouden de vormtaal tegenspreken. */
.hero::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(45rem 30rem at 78% 10%, rgba(255, 195, 0, 0.16), transparent 62%),
    radial-gradient(38rem 26rem at 20% 92%, rgba(61, 143, 0, 0.24), transparent 66%),
    radial-gradient(40rem 28rem at 8% 40%, rgba(11, 107, 67, 0.45), transparent 68%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__rooster {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
@media (min-width: 62em) {
  .hero__rooster {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    align-items: start;
  }
}

.hero h1 { color: var(--wit); }
.hero__sub {
  font-size: var(--stap-1);
  color: var(--tekst-licht-zacht);
  max-width: 34rem;
}
.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3);
}

.hero__belofte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r3);
  font-size: var(--stap--1);
  color: var(--tekst-licht-zacht);
}
.hero__belofte li { display: flex; gap: var(--r3); align-items: center; }
.hero__belofte li::before {
  content: "";
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--rond-pil);
  background: var(--zon);
  box-shadow:
    0 3px 6px -2px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------------------------
   7. De terugverdienladder, het signatuurelement
   ------------------------------------------------------------------------- */

.ladder-blok {
  background: var(--dennen);
  border-radius: var(--rond-groot);
  box-shadow: var(--klei-op-donker);
  padding: var(--r6) var(--r6) var(--r5);
}
.ladder-blok--licht {
  background: var(--wit);
  box-shadow: var(--klei-op);
  color: var(--tekst);
}

.ladder-blok__kop {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--r3);
  margin-bottom: var(--r5);
}
.ladder-blok__titel {
  font-family: var(--sans);
  font-size: var(--stap-0);
  font-weight: 600;
  color: var(--wit);
  margin: 0;
}
.ladder-blok--licht .ladder-blok__titel { color: var(--tekst); }
.ladder-blok__richting {
  font-family: var(--mono);
  font-size: var(--stap--2);
  color: var(--tekst-licht-zacht);
  letter-spacing: 0.04em;
}
.ladder-blok--licht .ladder-blok__richting { color: var(--leisteen); }

.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r2);
}

.ladder__regel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  padding: 0.55rem 0;
}

@media (min-width: 30em) {
  .ladder__regel {
    grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
  }
}

.ladder__naam {
  font-size: var(--stap--1);
  color: var(--tekst-licht);
  line-height: 1.3;
}
.ladder-blok--licht .ladder__naam { color: var(--tekst); }
a.ladder__naam { text-decoration: none; }
a.ladder__naam:hover { text-decoration: underline; text-decoration-color: var(--zon); }

/* De goot: ingedrukt, want hij bevat een waarde. */
.ladder__spoor {
  position: relative;
  height: 0.85rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--rond-pil);
  box-shadow: var(--klei-in-donker);
  overflow: hidden;
}
.ladder-blok--licht .ladder__spoor {
  background: var(--kalk-diep);
  box-shadow: var(--klei-in);
}

.ladder__balk {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--breed);
  min-width: 0.85rem;
  background: var(--zon);
  border-radius: var(--rond-pil);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  transform-origin: left center;
}
/* De drie banden gebruiken de drie logokleuren, van snel naar traag:
   bladgroen, paneelblauw, en daarna gedempt grijs. */
.ladder__regel[data-band="snel"]   .ladder__balk { background: var(--blad-licht); }
.ladder__regel[data-band="midden"] .ladder__balk { background: var(--staal-licht); }
.ladder__regel[data-band="traag"]  .ladder__balk { background: var(--balk-traag); }

.ladder-blok--licht .ladder__regel[data-band="snel"]   .ladder__balk { background: var(--blad); }
.ladder-blok--licht .ladder__regel[data-band="midden"] .ladder__balk { background: var(--staal); }

.ladder__waarde {
  font-family: var(--mono);
  font-size: var(--stap--2);
  color: var(--wit);
  white-space: nowrap;
  text-align: right;
}
.ladder-blok--licht .ladder__waarde { color: var(--tekst); }

/* Voetregel met de schaal. */
.ladder__as {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--stap--2);
  color: var(--tekst-licht-zacht);
  margin-top: var(--r4);
  padding-top: var(--r3);
}
.ladder-blok--licht .ladder__as { color: var(--leisteen); }

/* Uitklapbare toelichting per maatregel. */
.ladder__meer {
  grid-column: 1 / -1;
  font-size: var(--stap--1);
  line-height: 1.5;
  color: var(--tekst-licht-zacht);
  margin-top: 0.2rem;
}
.ladder-blok--licht .ladder__meer { color: var(--tekst-zacht); }

/* Bewust een eigen kleur en geen opacity: doorzichtige tekst haalt de
   contrasteis niet, en juist de bronvermelding moet leesbaar blijven. */
.ladder__bron { color: var(--tekst-licht-zacht); }
.ladder-blok--licht .ladder__bron { color: var(--leisteen); }

.ladder-blok__uitklap {
  background: transparent;
  border: 0;
  padding: var(--r4) 0 0;
  font: inherit;
  font-size: var(--stap--1);
  font-weight: 600;
  color: var(--zon-licht);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.ladder-blok--licht .ladder-blok__uitklap { color: var(--zon-diep); }

/* Op smalle schermen tonen we eerst de kop van de lijst. */
.ladder[data-ingekort="true"] .ladder__regel:nth-child(n + 7) { display: none; }

/* Animatie bij het in beeld komen. */
@media (prefers-reduced-motion: no-preference) {
  .ladder__balk { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .ladder[data-zichtbaar="true"] .ladder__balk { transform: scaleX(1); }
  .ladder__regel:nth-child(2) .ladder__balk  { transition-delay: 0.04s; }
  .ladder__regel:nth-child(3) .ladder__balk  { transition-delay: 0.08s; }
  .ladder__regel:nth-child(4) .ladder__balk  { transition-delay: 0.12s; }
  .ladder__regel:nth-child(5) .ladder__balk  { transition-delay: 0.16s; }
  .ladder__regel:nth-child(6) .ladder__balk  { transition-delay: 0.2s; }
  .ladder__regel:nth-child(7) .ladder__balk  { transition-delay: 0.24s; }
  .ladder__regel:nth-child(8) .ladder__balk  { transition-delay: 0.28s; }
  .ladder__regel:nth-child(9) .ladder__balk  { transition-delay: 0.32s; }
  .ladder__regel:nth-child(10) .ladder__balk { transition-delay: 0.36s; }
  .ladder__regel:nth-child(11) .ladder__balk { transition-delay: 0.4s; }
  .ladder__regel:nth-child(12) .ladder__balk { transition-delay: 0.44s; }
}

/* -------------------------------------------------------------------------
   8. Stappen, feiten en lopende tekst
   ------------------------------------------------------------------------- */

/* Genummerde stappen: alleen gebruikt waar de volgorde echt betekenis heeft. */
.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stap;
  display: grid;
  gap: var(--r5);
}
@media (min-width: 48em) {
  .stappen { grid-template-columns: repeat(4, 1fr); }
}
.stappen__item {
  counter-increment: stap;
  background: var(--wit);
  border-radius: var(--rond);
  box-shadow: var(--klei-op);
  padding: var(--r5);
}
.sectie--donker .stappen__item {
  background: var(--dennen);
  box-shadow: var(--klei-op-donker);
}
.stappen__item::before {
  content: counter(stap, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--rond-pil);
  background: var(--kalk-diep);
  box-shadow: var(--klei-in);
  font-family: var(--mono);
  font-size: var(--stap--2);
  color: var(--zon-diep);
  margin-bottom: var(--r4);
}
.sectie--donker .stappen__item::before {
  background: rgba(0, 0, 0, 0.28);
  box-shadow: var(--klei-in-donker);
  color: var(--zon);
}
.stappen__item h3 { margin-bottom: var(--r2); }
.stappen__item p { font-size: var(--stap--1); color: var(--tekst-zacht); }
.sectie--donker .stappen__item p { color: var(--tekst-licht-zacht); }

/* Feitenblok: één groot getal met het benodigde voorbehoud eronder. */
.feit__waarde {
  font-family: var(--mono);
  font-size: var(--stap-3);
  line-height: 1;
  color: var(--zon-diep);
  display: block;
}
.sectie--donker .feit__waarde { color: var(--zon-licht); }
.feit__omschrijving {
  font-size: var(--stap--1);
  color: var(--tekst-zacht);
  margin-top: var(--r3);
}
.sectie--donker .feit__omschrijving { color: var(--tekst-licht-zacht); }

/* Lopende tekst op inhoudspagina's. */
.tekst { max-width: var(--leesbaar); }
.tekst > * + * { margin-top: var(--r4); }
.tekst h2 { margin-top: var(--r7); }
.tekst h3 { margin-top: var(--r6); }
.tekst ul, .tekst ol { padding-left: 1.15rem; margin-block: 0; }
.tekst li + li { margin-top: var(--r2); }
.tekst strong { font-weight: 600; }
.tekst code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--kalk-diep);
  border-radius: var(--rond-klein);
  box-shadow: var(--klei-in);
  padding: 0.15em 0.5em;
}

/* Vraag en antwoord: elk een eigen zacht blok. */
.vraag {
  background: var(--wit);
  border-radius: var(--rond);
  box-shadow: var(--klei-op-klein);
  padding: var(--r4) var(--r5);
  margin-bottom: var(--r3);
}
.vraag > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--r4);
  align-items: center;
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--rond-pil);
  background: var(--kalk-diep);
  box-shadow: var(--klei-op-klein);
  font-family: var(--mono);
  color: var(--zon-diep);
}
.vraag[open] > summary::after { content: "-"; box-shadow: var(--klei-in); }
.vraag__antwoord { margin-top: var(--r4); color: var(--tekst-zacht); max-width: var(--leesbaar); }

/* Tabel met bedragen, in een zacht paneel. */
.tabel-omhulsel {
  overflow-x: auto;
  background: var(--wit);
  border-radius: var(--rond);
  box-shadow: var(--klei-op);
  padding: var(--r3) var(--r5);
}
.sectie--donker .tabel-omhulsel,
.hero .tabel-omhulsel {
  background: var(--dennen);
  box-shadow: var(--klei-op-donker);
}
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--stap--1);
  min-width: 28rem;
}
.tabel th, .tabel td {
  text-align: left;
  padding: 0.75rem var(--r3);
  border-bottom: 1px solid rgba(20, 56, 46, 0.1);
  vertical-align: top;
}
.sectie--donker .tabel th, .sectie--donker .tabel td,
.hero .tabel th, .hero .tabel td { border-bottom-color: rgba(255, 255, 255, 0.1); }
.tabel th {
  font-family: var(--mono);
  font-size: var(--stap--2);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leisteen);
}
.sectie--donker .tabel th, .hero .tabel th { color: var(--tekst-licht-zacht); }
.tabel td.getal { font-family: var(--mono); white-space: nowrap; }
.tabel tr:last-child td, .tabel tr:last-child th { border-bottom: 0; }

/* -------------------------------------------------------------------------
   9. Formulier
   ------------------------------------------------------------------------- */

/* Het formulier staat vaak binnen de donkere hero. Het zet daarom zijn eigen
   tekstkleur, anders erft het de lichte kleur en verdwijnt het op wit. */
.aanvraag {
  background: var(--wit);
  border-radius: var(--rond-groot);
  padding: var(--r6);
  box-shadow: var(--klei-op);
  color: var(--tekst);
}
@media (min-width: 40em) {
  .aanvraag { padding: var(--r7) var(--r6); }
}
.aanvraag h2, .aanvraag h3, .aanvraag legend { color: var(--tekst); }
.aanvraag a { color: var(--tekst); }

.aanvraag__kop { margin-bottom: var(--r5); }
.aanvraag__kop h2 { font-size: var(--stap-2); }
.aanvraag__kop p { color: var(--tekst-zacht); font-size: var(--stap--1); margin-top: var(--r3); }

.veld { display: block; margin-bottom: var(--r5); }
.veld__label {
  display: block;
  font-size: var(--stap--1);
  font-weight: 600;
  margin-bottom: var(--r3);
}
.veld__hulp {
  display: block;
  font-size: var(--stap--2);
  color: var(--tekst-zacht);
  font-weight: 400;
  margin-top: 0.2rem;
}

/* Invoervelden staan in de ingedrukte stand: ze bevatten iets. */
.invoer {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 0;
  border-radius: var(--rond-klein);
  background: var(--kalk);
  box-shadow: var(--klei-in);
  font: inherit;
  font-size: var(--stap-0);
  color: var(--tekst);
  transition: box-shadow 0.16s ease;
}
.invoer::placeholder { color: var(--leisteen); }
.invoer:focus {
  outline: none;
  box-shadow: var(--klei-in), 0 0 0 3px rgba(201, 138, 43, 0.45);
}
.invoer[aria-invalid="true"] {
  box-shadow: var(--klei-in), 0 0 0 3px rgba(156, 74, 47, 0.45);
}
select.invoer { appearance: none; padding-right: 2.4rem; }

.veld-rij { display: grid; gap: var(--r5); }
@media (min-width: 34em) { .veld-rij { grid-template-columns: 1fr 1fr; } }

/* Keuzeknoppen: omhoog als je ze kunt kiezen, ingedrukt als je ze gekozen hebt. */
.keuzes { display: grid; gap: var(--r3); border: 0; padding: 0; margin: 0 0 var(--r5); }
.keuzes--twee { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.keuzes > legend {
  font-size: var(--stap--1);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--r3);
}
.keuze {
  display: flex;
  align-items: center;
  gap: var(--r3);
  padding: 0.85rem 1.1rem;
  border: 0;
  border-radius: var(--rond-klein);
  background: var(--wit);
  box-shadow: var(--klei-op-klein);
  cursor: pointer;
  font-size: var(--stap--1);
  line-height: 1.35;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.keuze:hover { transform: translateY(-2px); }
.keuze input { margin: 0; accent-color: var(--zon-diep); flex-shrink: 0; }
.keuze:has(input:checked) {
  background: rgba(201, 138, 43, 0.14);
  box-shadow: inset 3px 4px 9px rgba(120, 78, 15, 0.2), inset -2px -2px 6px rgba(255, 255, 255, 0.8);
  transform: none;
}
.keuze:has(input:focus-visible) { outline: 3px solid var(--zon); outline-offset: 3px; }

/* Toestemming: bewust zwaarder aangezet, want zonder dit vinkje bellen we niet. */
.toestemming {
  display: flex;
  gap: var(--r4);
  align-items: flex-start;
  background: var(--kalk);
  border-radius: var(--rond);
  box-shadow: var(--klei-in);
  padding: var(--r5);
  font-size: var(--stap--1);
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: var(--r5);
  transition: background-color 0.16s ease;
}
.toestemming input {
  margin: 0.2rem 0 0;
  accent-color: var(--zon-diep);
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
}
.toestemming:has(input:checked) { background: rgba(201, 138, 43, 0.13); }

.honingpot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.melding {
  border-radius: var(--rond-klein);
  padding: var(--r4) var(--r5);
  font-size: var(--stap--1);
  margin-bottom: var(--r5);
}
.melding--fout {
  background: rgba(156, 74, 47, 0.11);
  color: #6f3122;
  box-shadow: inset 3px 4px 9px rgba(124, 56, 38, 0.16), inset -2px -2px 6px rgba(255, 255, 255, 0.6);
}
.melding--goed {
  background: rgba(31, 76, 61, 0.11);
  color: var(--dennen);
  box-shadow: inset 3px 4px 9px rgba(20, 56, 46, 0.16), inset -2px -2px 6px rgba(255, 255, 255, 0.6);
}

.aanvraag__kleine-lettertjes {
  font-size: var(--stap--2);
  color: var(--tekst-zacht);
  line-height: 1.5;
  margin-top: var(--r5);
}

/* Stap 2 en de bevestiging */
.stap { display: none; }
.stap[data-actief="true"] { display: block; }

/* Bij een stapwissel zetten wij de focus op de nieuwe stap, zodat een
   schermlezer meeleest. Dat is geen navigeerbaar element, dus een zichtbare
   focusrand om het hele blok zou alleen maar verwarren. */
.stap:focus, .stap:focus-visible { outline: none; }

.voortgang {
  display: flex;
  align-items: center;
  gap: var(--r4);
  font-family: var(--mono);
  font-size: var(--stap--2);
  color: var(--leisteen);
  margin-bottom: var(--r5);
}
.voortgang__balk {
  flex: 1;
  height: 0.7rem;
  background: var(--kalk);
  border-radius: var(--rond-pil);
  box-shadow: var(--klei-in);
  overflow: hidden;
}
.voortgang__vulling {
  display: block;
  height: 100%;
  width: var(--voortgang, 0%);
  background: var(--zon);
  border-radius: var(--rond-pil);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: width 0.3s ease;
}

.bevestiging__vink {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--rond-pil);
  background: var(--dennen);
  color: var(--wit);
  display: grid;
  place-items: center;
  margin-bottom: var(--r5);
  box-shadow:
    0 12px 22px -10px rgba(20, 56, 46, 0.7),
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -4px 8px -4px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------------------
   10. Cookiebalk
   ------------------------------------------------------------------------- */

/* Zweeft als los object boven de pagina in plaats van vastgeplakt aan de rand. */
.cookiebalk {
  position: fixed;
  inset: auto var(--r4) var(--r4) var(--r4);
  z-index: 80;
  background: var(--inkt);
  color: var(--tekst-licht);
  border-radius: var(--rond);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.08);
  padding: var(--r5);
}
.cookiebalk[hidden] { display: none; }
.cookiebalk__binnen {
  display: grid;
  gap: var(--r4);
  align-items: center;
  width: 100%;
}
@media (min-width: 52em) {
  .cookiebalk { inset: auto var(--r5) var(--r5) var(--r5); }
  .cookiebalk__binnen { grid-template-columns: minmax(0, 1fr) auto; gap: var(--r6); }
}
.cookiebalk p { font-size: var(--stap--1); color: var(--tekst-licht-zacht); }
.cookiebalk__knoppen { display: flex; flex-wrap: wrap; gap: var(--r3); }
.cookiebalk__knoppen .knop { padding: 0.75rem 1.4rem; font-size: var(--stap--1); }

/* -------------------------------------------------------------------------
   11. Voettekst
   ------------------------------------------------------------------------- */

.voettekst {
  background: var(--inkt);
  color: var(--tekst-licht-zacht);
  padding-block: var(--r8) var(--r5);
  font-size: var(--stap--1);
}
.voettekst__rooster {
  display: grid;
  gap: var(--r6);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.voettekst h3 {
  font-family: var(--mono);
  font-size: var(--stap--2);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zon);
  margin-bottom: var(--r4);
}
.voettekst ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); }
.voettekst a { text-decoration: none; }
.voettekst a:hover { color: var(--wit); text-decoration: underline; text-decoration-color: var(--zon); }
.voettekst__onder {
  margin-top: var(--r7);
  padding-top: var(--r5);
  border-top: 1px solid var(--mos-lijn);
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3) var(--r5);
  justify-content: space-between;
  font-size: var(--stap--2);
  font-family: var(--mono);
}

/* Zwevende balk onderaan op mobiel: telefoon en aanvraag altijd bij de hand. */
.mobiele-balk {
  position: fixed;
  inset: auto var(--r3) var(--r3) var(--r3);
  z-index: 60;
  display: none;
  gap: var(--r3);
  padding: var(--r3);
  background: var(--wit);
  border-radius: var(--rond);
  box-shadow: 0 16px 30px -14px rgba(20, 56, 46, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.9);
}
.mobiele-balk .knop { flex: 1; padding: 0.8rem 0.9rem; font-size: var(--stap--1); }
@media (max-width: 47.99em) {
  .mobiele-balk { display: flex; }
  body { padding-bottom: 5.5rem; }
}

/* -------------------------------------------------------------------------
   12. Bewegingsvoorkeur
   ------------------------------------------------------------------------- */

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

@media print {
  .site-kop, .cookiebalk, .mobiele-balk, .aanvraag { display: none; }
  body { background: #fff; color: #000; }
  * { box-shadow: none !important; }
}

/* =========================================================================
   13. Herontwerp: licht en zakelijk

   Deze laag overschrijft de donkergroene vlakken hierboven. De site is nu
   overwegend wit en lichtgrijs, de klei-schaduwen zijn zachter en de hoeken
   strakker. Donker blijft alleen de voettekst en de cookiebalk.

   De laag staat bewust onderaan: dezelfde specificiteit wint dan van de
   eerdere regels, zodat de opbouw hierboven intact en leesbaar blijft.
   ========================================================================= */

:root {
  --kalk:      #f3f5f1;
  --kalk-diep: #e9ede5;
  --wit:       #ffffff;

  /* Strakker en stiller: kleinere rondingen, zachtere schaduwen. */
  --rond-klein: 10px;
  --rond:       14px;
  --rond-groot: 18px;

  --klei-op:
    0 8px 20px -12px rgba(20, 56, 46, 0.18),
    0 2px 5px -3px rgba(20, 56, 46, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --klei-op-klein:
    0 4px 12px -6px rgba(20, 56, 46, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);

  --klei-in:
    inset 2px 3px 6px rgba(20, 56, 46, 0.09),
    inset -1px -1px 4px rgba(255, 255, 255, 0.9);
}

body { background: var(--wit); }

/* ---- De hero is licht: de aanvraag is het eerste dat u ziet ---- */

.hero {
  background: linear-gradient(180deg, var(--kalk) 0%, var(--wit) 100%);
  color: var(--tekst);
  padding-block: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem) clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}
.hero::after {
  background:
    radial-gradient(42rem 26rem at 82% 0%, rgba(255, 195, 0, 0.10), transparent 60%),
    radial-gradient(36rem 24rem at 0% 100%, rgba(61, 143, 0, 0.07), transparent 62%);
}
.hero h1 { color: var(--inkt); }
.hero__sub { color: var(--tekst-zacht); }
.hero__belofte { color: var(--tekst); }
.hero__belofte strong { font-weight: 600; }
.hero .opschrift { color: var(--leisteen); }
.hero .opschrift::after { background: var(--kalk-diep); box-shadow: var(--klei-in); }
.hero a, .sectie--donker a { text-decoration-color: var(--staal); }
.hero .knop--rand {
  background: var(--wit);
  color: var(--tekst);
  box-shadow: var(--klei-op-klein);
}
.hero .knop--rand:active { box-shadow: var(--klei-in); }
.hero .bron {
  color: var(--leisteen);
  background: var(--kalk);
  box-shadow: var(--klei-in);
}
.hero .bron b { color: var(--tekst-zacht); }
.hero .let-op {
  background: rgba(156, 74, 47, 0.07);
  box-shadow: inset 2px 3px 6px rgba(124, 56, 38, 0.10), inset -1px -1px 4px rgba(255, 255, 255, 0.7);
}
.hero .let-op__kop { color: var(--roest); }
.hero .tabel-omhulsel { background: var(--wit); box-shadow: var(--klei-op); }
.hero .tabel th { color: var(--leisteen); }
.hero .tabel th, .hero .tabel td { border-bottom-color: rgba(20, 56, 46, 0.1); }

/* Kleine vertrouwensregel onder de opsomming in de hero. */
.hero__noot {
  font-size: var(--stap--1);
  color: var(--tekst-zacht);
}

/* ---- Voorheen donkere secties zijn nu lichtgrijs ---- */

.sectie--donker { background: var(--kalk-diep); color: var(--tekst); }
.sectie--donker h1, .sectie--donker h2, .sectie--donker h3 { color: var(--inkt); }
.sectie--donker .inleiding { color: var(--tekst-zacht); }
.sectie--donker .opschrift { color: var(--leisteen); }
.sectie--donker .opschrift::after { background: var(--wit); box-shadow: var(--klei-in); }
.sectie--donker .kaart { background: var(--wit); box-shadow: var(--klei-op); }
.sectie--donker .stappen__item { background: var(--wit); box-shadow: var(--klei-op); }
.sectie--donker .stappen__item::before {
  background: var(--kalk-diep);
  box-shadow: var(--klei-in);
  color: var(--zon-diep);
}
.sectie--donker .stappen__item p { color: var(--tekst-zacht); }
.sectie--donker .feit__waarde { color: var(--zon-diep); }
.sectie--donker .feit__omschrijving { color: var(--tekst-zacht); }
.sectie--donker .bron {
  color: var(--leisteen);
  background: var(--wit);
  box-shadow: var(--klei-in);
}
.sectie--donker .bron b { color: var(--tekst-zacht); }
.sectie--donker .let-op {
  background: rgba(156, 74, 47, 0.07);
  box-shadow: inset 2px 3px 6px rgba(124, 56, 38, 0.10), inset -1px -1px 4px rgba(255, 255, 255, 0.7);
}
.sectie--donker .let-op__kop { color: var(--roest); }
.sectie--donker .tabel-omhulsel { background: var(--wit); box-shadow: var(--klei-op); }
.sectie--donker .tabel th { color: var(--leisteen); }
.sectie--donker .tabel th, .sectie--donker .tabel td { border-bottom-color: rgba(20, 56, 46, 0.1); }
.sectie--donker .knop--rand {
  background: var(--wit);
  color: var(--tekst);
  box-shadow: var(--klei-op-klein);
}
.sectie--donker .knop--rand:active { box-shadow: var(--klei-in); }

/* ---- De terugverdienladder is overal licht ---- */

.ladder-blok { background: var(--wit); box-shadow: var(--klei-op); color: var(--tekst); }
.ladder-blok__titel { color: var(--tekst); }
.ladder-blok__richting { color: var(--leisteen); }
.ladder__naam { color: var(--tekst); }
.ladder__spoor { background: var(--kalk-diep); box-shadow: var(--klei-in); }
.ladder__waarde { color: var(--tekst); }
.ladder__meer { color: var(--tekst-zacht); }
.ladder__bron { color: var(--leisteen); }
.ladder__as { color: var(--leisteen); }
.ladder-blok__uitklap { color: var(--zon-diep); }
.ladder__regel[data-band="snel"]   .ladder__balk { background: var(--blad); }
.ladder__regel[data-band="midden"] .ladder__balk { background: var(--staal); }

/* =========================================================================
   14. Stijlrichting duurzaamadvies.nl

   Op verzoek: dezelfde uitstraling als duurzaamadvies.nl. Dat betekent één
   vette ronde sans (Poppins) voor alles, frisgroene knoppen met een pijl,
   kickers met een groene streep ervoor, en een fotohero waarin de witte
   aanvraagkaart het eerste is dat u ziet.
   ========================================================================= */

:root {
  --sans:  "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:  "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* De actiekleur. Donker genoeg voor witte tekst (contrast boven 4,5:1),
     fris genoeg om als hun groen te lezen. */
  --actie:        #15803a;
  --actie-donker: #126d31;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }
h1 { font-weight: 800; line-height: 1.08; }

::selection { background: var(--actie); color: #fff; }
:focus-visible { outline-color: var(--actie); }

/* Kicker: groene streep ervoor, gewone zinsopmaak, zoals hun sectielabels. */
.opschrift {
  font-family: var(--sans);
  font-size: var(--stap--1);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tekst);
  border-left: 4px solid var(--actie);
  padding-left: 0.65rem;
}
.opschrift::after { display: none; }
.hero .opschrift, .sectie--donker .opschrift { color: var(--tekst); }

/* Knoppen: groen met witte tekst en een pijl, zoals Start scan. */
.knop--primair {
  background: var(--actie);
  color: #fff;
  box-shadow:
    0 10px 20px -10px rgba(18, 109, 49, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.knop--primair:hover { background: var(--actie-donker); transform: translateY(-2px); }
.knop--primair:active {
  transform: translateY(1px);
  box-shadow: inset 2px 3px 6px rgba(0, 0, 0, 0.25);
}
.knop--primair::after { content: "\00a0\2192"; font-weight: 700; }

.knop--rand { border: 1px solid var(--lijn); }
.knop--rand::after { content: "\00a0\2192"; color: var(--actie); font-weight: 700; }

/* De gele accenten verschuiven mee naar groen. */
.voortgang__vulling { background: var(--actie); }
.stappen__item::before { color: var(--actie); }
.sectie--donker .stappen__item::before { color: var(--actie); }
.feit__waarde, .sectie--donker .feit__waarde { color: var(--actie); }
.ladder-blok__uitklap, .ladder-blok--licht .ladder-blok__uitklap { color: var(--actie); }
.invoer:focus { box-shadow: var(--klei-in), 0 0 0 3px rgba(21, 128, 58, 0.30); }
.keuze input, .toestemming input { accent-color: var(--actie); }
.keuze:has(input:checked) {
  background: rgba(21, 128, 58, 0.08);
  box-shadow: inset 2px 3px 6px rgba(18, 109, 49, 0.14), inset -1px -1px 4px rgba(255, 255, 255, 0.8);
}
.toestemming:has(input:checked) { background: rgba(21, 128, 58, 0.08); }
.hero__belofte li::before { background: var(--actie); box-shadow: none; }
a, .hero a, .sectie--donker a { text-decoration-color: var(--actie); }
.site-nav__link[aria-current="page"] { color: var(--actie); }

/* ---- Fotohero: de aanvraagkaart zweeft op een grote foto ---- */

.hero--foto {
  background-image: url("../img/hero-dak.jpg");
  background-size: cover;
  background-position: center 35%;
  padding-block: clamp(1.5rem, 1rem + 2.2vw, 3rem);
}
.hero--foto::after {
  /* Lichte waas links zodat de kaart nooit wegvalt tegen de foto. */
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%);
}
.hero--foto .hero__rooster { display: block; }

.hero--foto .aanvraag {
  max-width: 33rem;
  box-shadow: 0 24px 48px -20px rgba(10, 40, 25, 0.45);
}

.aanvraag__titel {
  font-size: clamp(1.55rem, 1.35rem + 1vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.aanvraag__kop .aanvraag__sub {
  color: var(--tekst-zacht);
  font-size: var(--stap--1);
  margin-top: var(--r3);
}

/* ---- USP-balk onder de hero: de vier beloften op één regel ---- */

.usp { background: var(--wit); border-bottom: 1px solid var(--kalk-diep); }
.usp__lijst {
  list-style: none;
  margin: 0;
  padding: var(--r4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2) var(--r6);
}
.usp__lijst li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--stap--1);
  color: var(--tekst-zacht);
}
.usp__lijst li strong { color: var(--tekst); font-weight: 600; }
.usp__lijst li::before {
  content: "\2713";
  color: var(--actie);
  font-weight: 700;
}