@import url('fonts.css');
@import url('kleuren.css');

/* ===========================================================================
   WattsTheDeal · zakelijke energie
   ---------------------------------------------------------------------------
   Wereld: warm papier als grond, diepgroen als anker, terracotta als enige
   accent. Eén lettertype voor alle tekst, Onest, met de hiërarchie in grootte,
   gewicht en letterafstand. Gemeten waarden in Spline Sans Mono. Haarlijnen in
   plaats van kaders, kleine radii, veel lucht.

   Waarom papier en geen wit: een pagina die van wit vlak naar wit vlak
   scrolt leest als een stapel blokken en voelt goedkoop. Op papier heeft de
   witte formulierkaart iets om tegen af te steken, en heeft de hele pagina
   één materiaal.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 400 17px/1.62 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Zo staat de voet altijd onderaan, ook op een korte pagina. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .voet { flex: 0 0 auto; }

img, svg { display: block; max-width: 100%; }
::selection { background: var(--vuur); color: var(--op-vuur); }
:focus-visible { outline: 2px solid var(--vuur); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; text-underline-offset: .18em; }
input, textarea, select { caret-color: var(--vuur); }

/* --- Typografie -----------------------------------------------------------
   Eén lettertype voor alles, en de hiërarchie komt uit grootte, gewicht en
   letterafstand. Dat is wat Apple en Revolut doen, en het is wat de klant
   vroeg: strak en zakelijk in plaats van chic. Hoe groter de kop, hoe zwaarder
   en hoe strakker: een kop van 4 rem met de spatiëring van een broodtekst
   valt uit elkaar, en een kop van 1 rem met de spatiëring van een display
   knijpt dicht. */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 700; letter-spacing: -.042em; line-height: 1; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.85rem); font-weight: 700; letter-spacing: -.038em; line-height: 1.06; }
h3 {
  font-size: clamp(1.06rem, 1.4vw, 1.2rem); font-weight: 600;
  letter-spacing: -.022em; line-height: 1.3;
}
h4 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }

/* Een kop binnen een blok dat al een h2 heeft. Kleiner dan een h2, maar met
   dezelfde strakke zetting. */
.tussenkop { font-size: clamp(1.4rem, 2.4vw, 1.95rem); font-weight: 700; letter-spacing: -.034em; line-height: 1.1; max-width: 20ch; }

p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em { font-style: normal; }

.groot   { font-size: clamp(1.06rem, 1.55vw, 1.2rem); line-height: 1.55; }
.klein   { font-size: .92rem; line-height: 1.55; }
.zacht   { color: var(--tekst-zacht); }
.nowrap { white-space: nowrap; }
.mono {
  font-family: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* --- Raamwerk ------------------------------------------------------------ */
.omhulsel { max-width: 1180px; margin: 0 auto; padding: 0 26px; }
@media (max-width: 560px) { .omhulsel { padding: 0 18px; } }

.vlak       { padding: clamp(58px, 7vw, 104px) 0; }
.vlak.kort  { padding: clamp(42px, 5vw, 72px) 0; }
.lijn-boven { border-top: 1px solid var(--lijn); }

/* Het donkere anker. Twee keer op de pagina, verder nergens. */
.vlak-donker {
  position: relative;
  background: var(--bos); color: var(--op-bos);
  /* Bewust clip-path en geen overflow: hidden. Overflow maakt van dit vlak een
     eigen scrollgebied, en dan werkt de meelopende kop in .duokolom niet meer.
     clip-path snijdt de gloed hieronder net zo goed af zonder dat te doen. */
  clip-path: inset(0);
}
.vlak-donker::before {
  /* Blijft binnen de breedte van het vlak. Met clip-path in plaats van
     overflow: hidden wordt overhang wél getekend maar telt hij nog steeds mee
     voor de breedte van de pagina, en dan wordt een telefoonscherm stiekem
     78 pixels breder dan het is. */
  content: ''; position: absolute; inset: -40% 0 auto 0; height: 640px;
  background: radial-gradient(60% 56% at 20% 26%, rgba(184,69,29,.16), transparent 72%);
  pointer-events: none;
}
.vlak-donker .omhulsel { position: relative; }
.vlak-donker h2, .vlak-donker h3 { color: var(--op-bos); }
.vlak-donker p { color: var(--op-bos-zacht); }
.vlak-donker .zacht { color: var(--op-bos-zacht); }
.vlak-donker .stappen, .vlak-donker .stappen .nr { border-color: var(--lijn-donker-2); }
.vlak-donker .vragen, .vlak-donker .vraag { border-color: var(--lijn-donker); }

.vlak-papier { background: var(--papier); color: var(--inkt); }
.vlak-diep   { background: var(--papier-diep); color: var(--inkt); }
.vlak-papier p, .vlak-diep p { color: var(--tekst-zacht); }
.vlak-papier h2, .vlak-papier h3,
.vlak-diep h2,   .vlak-diep h3 { color: var(--inkt); }

.blokkop { max-width: 46ch; }
.blokkop p { margin-top: 14px; }
.vlak h2 { max-width: 20ch; }

/* Op een breed scherm staat de kop links en de uitleg rechts, in plaats van
   allebei in een smalle kolom met een halve pagina leegte ernaast. */
@media (min-width: 1000px) {
  .blokkop {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 15fr) minmax(0, 13fr);
    column-gap: clamp(40px, 5vw, 88px); row-gap: 0; align-items: end;
  }
  .blokkop h2 { max-width: 14ch; }
  .blokkop p { margin-top: 0; max-width: 46ch; padding-bottom: .4em; }
}

/* Kop links, inhoud rechts. Een blok met veel tekst laat anders de halve
   pagina leeg, en dat was precies wat "veel wit" opleverde. De kop blijft bij
   het scrollen even staan, zodat je weet waar je zit. */
.duokolom { display: grid; gap: clamp(28px, 3.4vw, 40px); }
@media (min-width: 1000px) {
  .duokolom {
    grid-template-columns: minmax(0, 11fr) minmax(0, 15fr);
    column-gap: clamp(48px, 6vw, 100px);
    align-items: start;
  }
  .duokolom-kop { position: sticky; top: 104px; }
  .duokolom-kop h2 { max-width: 12ch; }
  .duokolom-kop p { max-width: 34ch; margin-top: 18px; }
  .duokolom-body .stappen p { max-width: 58ch; }
}

/* --- Kop met menu --------------------------------------------------------- */
/* Vol papier en geen doorschijnend vlak. Boven het groene vlak mengde die
   88 procent papier zich met het groen eronder tot #D6D9CF: koeler en grijzer
   dan het papier waar hij bij hoort. De kopbalk staat altijd in beeld, dus dat
   was een vierde grondkleur die nergens bij hoort. */
.kopbalk {
  position: sticky; top: 0; z-index: 30;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}
.kopbalk .omhulsel { display: flex; align-items: center; gap: 18px; height: 70px; }
.kopbalk img { width: 92px; height: auto; color: var(--inkt); }
.koprechts { margin-left: auto; display: flex; align-items: center; gap: 18px; }
/* Op een smal scherm past het nummer én de knop niet naast elkaar zonder dat
   de knop over twee regels breekt. Dan wint het nummer: het formulier staat
   toch al direct onder de kopbalk, en zodra je eraan voorbij scrolt komt de
   vaste knop onderaan in beeld. De knop bovenin voegt daar niets aan toe. */
@media (max-width: 620px) {
  .kopbalk .knop.klein { display: none; }
  .koptel { font-size: .95rem; }
}
/* Het nummer staat ook op een telefoon in de kopbalk. Dat is het enige
   apparaat waarmee je kunt bellen, en er zit een deel van deze doelgroep dat
   liever meteen iemand spreekt dan een formulier invult. */
.koptel { display: inline-flex; color: var(--inkt); text-decoration: none; font-size: .93rem; font-weight: 600; white-space: nowrap; }
.koptel:hover { color: var(--vuur); }


/* --- Knoppen -------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 1rem/1 'Onest', sans-serif; letter-spacing: -.012em;
  padding: 15px 24px; border: 0; border-radius: var(--rand-s);
  background: var(--vuur); color: var(--op-vuur);
  cursor: pointer; text-decoration: none;
  transition: transform .14s var(--soepel), background .14s var(--soepel), box-shadow .14s var(--soepel);
}
.knop:hover { background: var(--vuur-hover); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(184,69,29,.7); }
.knop:active { transform: translateY(0); background: var(--vuur-actief); }
.knop[disabled] { background: var(--knop-uit); color: var(--op-knop-uit); cursor: progress; transform: none; box-shadow: none; }
.knop.vol { width: 100%; padding: 17px 24px; font-size: 1.05rem; }
.knop.klein { padding: 11px 17px; font-size: .9rem; }
.knop.stil-licht { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.knop.stil-licht:hover { background: var(--papier-diep); }

/* --- Eerste scherm --------------------------------------------------------- */
.hero { position: relative; padding: clamp(40px, 5.4vw, 82px) 0 clamp(34px, 4.4vw, 60px); }
/* Op mobiel staat de kaart direct onder de kop, zodat stap 1 vrijwel meteen
   in beeld staat. Op een breed scherm staat de kaart rechts naast de tekst. */
.hero-raster { display: grid; gap: clamp(28px, 3.6vw, 44px); align-items: start; }
/* De linkerkolom is één blok en geen twee rasterrijen. Als rij 1 zo hoog wordt
   als de formulierkaart, valt er anders een gat van ruim honderd pixels tussen
   de tekst en de knop eronder, en dan zweeft precies de knop die de bezoeker
   moet vinden los van de tekst die hem overtuigt. */
.hero-links { display: contents; }
@media (max-width: 999px) {
  .hero-boven   { order: 1; }
  .hero .kaart  { order: 2; }
  .hero .wiebelt{ order: 3; }
  .hero-onder   { order: 4; }
}
@media (min-width: 1000px) {
  .hero-raster { grid-template-columns: minmax(0,1fr) 452px; column-gap: clamp(38px, 4.4vw, 64px); }
  .hero-links {
    display: flex; flex-direction: column; gap: clamp(26px, 3vw, 38px);
    grid-column: 1; grid-row: 1 / span 2; align-self: start;
  }
  .hero .kaart { grid-column: 2; grid-row: 1; align-self: start; }
  .hero .wiebelt { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; }
}

/* De accentwoorden in de kop dragen alleen kleur, geen schuine stand: van
   Onest bestaat geen cursieve snede, en een nagemaakte schuinstand verraadt
   zich meteen op deze grootte. */
.hero h1 em { color: var(--vuur); font-style: normal; }
.hero-boven > p { margin-top: 22px; max-width: 46ch; color: var(--tekst-zacht); }

/* Het blokje onder de formulierkaart: een echte foto van het kantoor met de
   zin die de vraag beantwoordt die op dat moment in iemands hoofd zit. Staat
   onder het formulier en niet ernaast, want ernaast wint de foto het van de
   knop. */
.wiebelt {
  display: flex; align-items: center; gap: 16px;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--lijn);
}
.wiebelt img {
  width: 168px; height: 122px; flex: 0 0 auto;
  /* De adviseur staat links in de foto, dus het uitsnijden moet daarheen
     schuiven. Met de standaard midden-uitsnede valt zijn gezicht half weg. */
  object-fit: cover; object-position: 34% 32%;
  border-radius: var(--rand);
}
@media (max-width: 460px) { .wiebelt img { width: 122px; height: 90px; } }
.wiebelt p { font-size: .87rem; line-height: 1.5; color: var(--tekst-zacht); margin: 0; }
.wiebelt strong { color: var(--inkt); font-weight: 600; }

/* Een echte knop in het eerste scherm. Op een telefoon staat die pal boven
   het formulier en is hij de volgende handeling; op een breed scherm wijst hij
   naar de kaart ernaast. De klik zet de aandacht op het eerste veld, dus hij
   doet ook echt iets in plaats van alleen te bestaan. */
.heroknop {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 0 0 22px; max-width: none;
}
.heroknop span { font-size: .87rem; color: var(--tekst-zacht); max-width: 30ch; }

.kenmerken {
  list-style: none; margin: 0; padding: 0;
  font-size: .93rem; color: var(--tekst-zacht);
  display: grid; gap: 8px;
}
.kenmerken li { display: flex; align-items: baseline; gap: 10px; }
.kenmerken li::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--tekst-zacht); }
@media (min-width: 760px) {
  .kenmerken { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 22px; }
}

/* --- Bewijs: Trustpilot en Google ------------------------------------------ */
.bewijsrij { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 20px; }
/* Op een telefoon stapelden de twee keurmerken op verschillende breedtes en
   las het paar rafelig. Twee gelijke kolommen lossen dat op. */
@media (max-width: 560px) {
  .bewijsrij { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bewijs { padding: 9px 10px; gap: 9px; }
  .bewijs .score { white-space: normal; }
}
.bewijs {
  display: flex; align-items: center; gap: 12px;
  background: var(--wit); color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: var(--rand-s);
  padding: 9px 14px; text-decoration: none;
  transition: transform .16s var(--soepel), border-color .16s var(--soepel);
}
a.bewijs:hover { transform: translateY(-2px); border-color: var(--lijn-sterk); }
.bewijs img { height: 22px; width: auto; }
.bewijs .score { font-size: .84rem; line-height: 1.25; color: var(--tekst-zacht); white-space: nowrap; }
.bewijs .score b { display: block; font-size: 1.02rem; font-weight: 600; color: var(--inkt); letter-spacing: -.02em; }
/* Op het donkere vlak blijft de badge wit, want de merklogo's van Trustpilot
   en Google hebben zwarte letters en verdwijnen anders. */
.vlak-donker .bewijs { border-color: transparent; }

/* --- De formulierkaart ------------------------------------------------------
   Het enige echt witte vlak op de pagina. Daardoor is hij het onderwerp,
   zonder dat er een kleur of een rand omheen hoeft. */
.kaart {
  background: var(--wit); color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: var(--rand);
  box-shadow: var(--schaduw-op);
  overflow: hidden;
}
.kaart-kop { padding: 18px 26px 0; }
/* De kaart draagt zijn eigen naam. "Stap 1 van 5" alleen zegt niets als je
   niet weet waarvan het stap 1 is, en dan ziet een bezoeker niet dat dit het
   ding is dat hij moet invullen. */
.kaart-titel {
  margin: 0 0 10px; font-size: 1.06rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--inkt);
}
.voortgang { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; color: var(--tekst-zacht); font-weight: 600; }
.voortgang .mono { letter-spacing: -.02em; }
.balk { height: 4px; border-radius: 2px; background: var(--lijn); margin-top: 9px; overflow: hidden; }
.balk i {
  display: block; height: 100%; width: 100%; border-radius: 2px;
  background: var(--vuur);
  transform-origin: left center; transform: scaleX(.2);
  transition: transform .4s var(--soepel);
}
.kaart-body { padding: 22px 26px 26px; }
@media (max-width: 460px) { .kaart-kop { padding: 16px 18px 0; } .kaart-body { padding: 18px 18px 22px; } }

.stap[hidden] { display: none !important; }
.stap h2 {
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
  font-weight: 600; letter-spacing: -.026em;
  font-size: clamp(1.24rem, 2.1vw, 1.46rem);
  line-height: 1.18; max-width: 20ch;
}
.stap > p { margin-top: 10px; font-size: .93rem; color: var(--tekst-zacht); }

/* Keuzeknoppen bij de eerste stappen. Eén klik, geen typwerk. */
.keuzes { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 420px) { .keuzes.duo { grid-template-columns: 1fr 1fr; } }
.keuze {
  position: relative; display: block; text-align: left;
  padding: 16px 38px 16px 17px; border-radius: var(--rand-s);
  background: var(--wit); border: 1.5px solid var(--veld-rand);
  cursor: pointer; font: inherit; color: var(--inkt);
  transition: border-color .13s var(--soepel), background .13s var(--soepel), transform .13s var(--soepel);
}
/* Een pijltje rechts, zodat het als een knop leest en niet als een regel in
   een lijstje. Zonder dat teken zag de bezoeker niet dat hier geklikt wordt. */
.keuze::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px;
  transform: translateY(-50%); opacity: .5;
  transition: opacity .13s var(--soepel), transform .13s var(--soepel);
  background: no-repeat center/16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D3A2E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}
.keuze:hover { border-color: var(--vuur); background: var(--vuur-zacht); transform: translateY(-1px); }
.keuze:hover::after { opacity: 1; transform: translateY(-50%) translateX(2px); }
.keuze:active { transform: translateY(0); }
.keuze b { display: block; font-weight: 600; font-size: 1rem; letter-spacing: -.015em; }
.keuze span { display: block; font-size: .85rem; color: var(--tekst-zacht); line-height: 1.4; margin-top: 3px; }

/* --- Velden ---------------------------------------------------------------- */
.veld { margin: 0 0 15px; }
.velden-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 440px) { .velden-rij { grid-template-columns: 1fr; } }

label { display: block; font-size: .8rem; font-weight: 600; color: var(--inkt); margin: 0 0 7px; letter-spacing: .01em; }
label .los { font-weight: 400; color: var(--tekst-zacht); letter-spacing: 0; }

input[type=text], input[type=tel], input[type=email], select {
  width: 100%;
  font: 400 1rem/1.4 'Onest', system-ui, sans-serif;
  padding: 13px 14px; color: var(--inkt); background: var(--wit);
  border: 1px solid var(--veld-rand); border-radius: var(--rand-s);
  transition: border-color .13s var(--soepel), box-shadow .13s var(--soepel);
}
input::placeholder { color: var(--veld-leeg); }
input:hover, select:hover { border-color: var(--veld-rand-hover); }
input:focus, select:focus { outline: none; border-color: var(--vuur); box-shadow: 0 0 0 3px rgba(184,69,29,.18); }
/* Een fout is geen uitnodiging om te klikken, dus die krijgt de eigen
   foutkleur en niet het accent. */
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--fout-veldlijn); background: var(--fout-veld); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235C6259' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center; background-repeat: no-repeat;
  padding-right: 38px;
}

.hulp { font-size: .8rem; color: var(--tekst-zacht); margin: 7px 0 0; line-height: 1.45; max-width: none; }
.veldfout { display: none; font-size: .82rem; font-weight: 500; color: var(--fout-tekst); margin: 6px 0 0; line-height: 1.4; }
.veldfout:not(:empty) { display: block; }
.honingpot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Toestemming ----------------------------------------------------------- */
.toestemming {
  display: grid; grid-template-columns: 24px 1fr; gap: 13px; align-items: start;
  background: var(--papier); border: 1px solid var(--lijn);
  border-radius: var(--rand-s); padding: 15px 16px; margin: 18px 0 0;
  position: relative;
}
.vakje {
  position: relative; width: 24px; height: 24px; margin-top: 1px;
  border: 1.5px solid var(--lijn-sterk); border-radius: 3px; background: var(--wit);
  display: grid; place-items: center;
  transition: border-color .14s var(--soepel), background .14s var(--soepel);
}
.toestemming input[type=checkbox] { position: absolute; inset: 0; margin: 0; opacity: 0; width: 24px; height: 24px; cursor: pointer; }
.vinkje { width: 15px; height: 15px; color: var(--papier); opacity: 0; transform: scale(.4); }
.toestemming:has(input:checked) .vakje { background: var(--bos); border-color: var(--bos); }
.toestemming:has(input:checked) .vinkje { opacity: 1; transform: none; transition: opacity .14s var(--soepel), transform .32s var(--soepel); }
.toestemming:has(input:focus-visible) .vakje { outline: 2px solid var(--vuur); outline-offset: 3px; }
.toestemming-tekst { font-size: .84rem; line-height: 1.5; color: var(--tekst-zacht); font-weight: 400; margin: 0; cursor: pointer; letter-spacing: 0; }
.toestemming-tekst strong { color: var(--inkt); }
.toestemming-tekst a { color: var(--inkt); }

.stempel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--soepel); grid-column: 1 / -1; }
.toestemming:has(input:checked) .stempel { grid-template-rows: 1fr; }
.stempel > span {
  overflow: hidden; display: block;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: .68rem; color: var(--bos); letter-spacing: -.02em;
  padding-top: 10px; opacity: 0;
  transition: opacity .26s var(--soepel) .06s;
}
.toestemming:has(input:checked) .stempel > span { opacity: 1; }

.geenjs {
  background: var(--let-vlak); border: 1px solid var(--let-rand); color: var(--let-tekst);
  font-size: .89rem; line-height: 1.5; padding: 13px 15px;
  border-radius: var(--rand-s); margin: 0 0 16px; max-width: none;
}
.geenjs a { color: var(--let-tekst); font-weight: 600; }

.formfout { display: none; background: var(--fout-vlak); border: 1px solid var(--fout-rand); color: var(--fout-tekst); font-size: .87rem; font-weight: 500; padding: 11px 13px; border-radius: var(--rand-s); margin: 0 0 14px; line-height: 1.45; }
.formfout:not(:empty) { display: block; }

.kaartvoet { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.terugknop { background: none; border: 0; padding: 6px 0; cursor: pointer; font: 500 .88rem 'Onest', sans-serif; color: var(--tekst-zacht); display: inline-flex; align-items: center; gap: 6px; }
.terugknop:hover { color: var(--inkt); }
.terugknop svg { width: 15px; height: 15px; }

/* Doodlopende stap: wij kunnen niets betekenen. */
.geenmatch h2 { color: var(--inkt); }

/* --- Bewegende logobalk ----------------------------------------------------- */
.logobalk {
  background: var(--papier);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding: clamp(32px, 3.8vw, 46px) 0;
  overflow: hidden;
}
/* De rij logo's vervaagt aan beide randen. Zonder dat masker wordt een logo
   midden in een woord afgekapt, en dat leest als een fout. */
.loper-venster {
  overflow: hidden;
  /* Niet over de volle breedte maar op het raster van de pagina (.omhulsel),
     en aan beide kanten een vijfde ingedampt. Zo begint en eindigt de rij
     zacht in plaats van dat hij het hele scherm oversteekt. De padding van
     .omhulsel gaat eraf: die zou binnen het masker een harde rand geven. */
  padding: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.logobalk .titel {
  font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--tekst-zacht);
  /* auto, niet 0: dit is een .omhulsel en moet op hetzelfde raster uitlijnen
     als de rest van de pagina. Met marge 0 plakt het label tegen de rand. */
  margin: 0 auto clamp(22px, 2.6vw, 32px);
}
/* Geen gap op .loper zelf. De verschuiving is -50% van de totale breedte, en
   die moet precies één set logo's plus de ruimte erna zijn. Met een gap
   tussen de twee sets kwam er per rondje 38px te weinig verschuiving en
   sprong de balk elke 46 seconden zichtbaar terug. Daarom zit de ruimte nu
   als padding aan het einde van elke set, dan klopt de som. */
.loper { display: flex; width: max-content; animation: schuif 46s linear infinite; }
.loper:hover { animation-play-state: paused; }
.loper ul {
  display: flex; align-items: center;
  gap: clamp(40px, 5.5vw, 76px);
  margin: 0; padding: 0 clamp(40px, 5.5vw, 76px) 0 0; list-style: none;
}
.loper li { display: flex; align-items: center; }

/* De logo's staan los op het vlak, zonder kadertje.
   Twee dingen zijn hier belangrijk:
   1. Een VASTE hoogte, geen max-height. Eneco en Vattenfall hebben in hun
      bestand alleen een verhouding en geen eigen afmeting; met alleen een
      maximumhoogte klapt de browser die dicht tot nul en zijn ze onzichtbaar.
   2. Per logo een eigen hoogte, want een breed woordmerk oogt bij dezelfde
      hoogte veel groter dan een compact beeldmerk. Deze waarden zijn op het
      oog gelijkgetrokken, niet rekenkundig. */
.loper img {
  height: 30px; width: auto;
  opacity: .72;
  transition: opacity .2s var(--soepel);
}
.loper img[src*="vattenfall"]   { height: 17px; }
.loper img[src*="epnl"]         { height: 24px; }
.loper img[src*="nieuwestroom"] { height: 27px; }
.loper img[src*="cleanenergy"]  { height: 26px; }
.loper img[src*="sefe"]         { height: 26px; }
.loper img[src*="eneco"]        { height: 30px; }
.loper img[src*="greenchoice"]  { height: 32px; }
.loper img[src*="sepagreen"]    { height: 32px; }
.loper li:hover img { opacity: 1; }
/* Vier sets, dus een kwart per rondje is precies één set. */
@keyframes schuif { from { transform: translateX(0); } to { transform: translateX(-25%); } }
.logobalk .onder {
  font-size: .82rem; color: var(--tekst-zacht);
  /* Geen eigen max-width: die van .omhulsel moet gelden, anders spant deze
     regel over de volle breedte en staat hij niet op het raster. */
  margin: clamp(22px, 2.6vw, 32px) auto 0;
}

/* --- Oproep halverwege de pagina --------------------------------------------
   Boven en onder een knop is niet genoeg op een pagina van vijf schermen hoog.
   Wie halverwege overtuigd raakt, moet daar kunnen klikken en niet eerst terug
   naar boven hoeven scrollen. */
.oproep {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  margin-top: clamp(34px, 4vw, 52px); padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--lijn);
}
.oproep p { margin: 0; font-size: clamp(1.06rem, 1.6vw, 1.24rem); font-weight: 600; letter-spacing: -.024em; color: var(--inkt); max-width: 34ch; }
.oproep .knop { margin-left: auto; flex: 0 0 auto; }
.oproep.op-donker { border-top-color: var(--lijn-donker-2); }
.oproep.op-donker p { color: var(--op-bos); }
@media (max-width: 620px) {
  .oproep { display: grid; gap: 16px; }
  .oproep .knop { margin-left: 0; width: 100%; }
}

/* --- Rasters ---------------------------------------------------------------
   Drie stappen, zonder kader. Alleen een cijfer, een kop en een regel tekst.
   Het cijfer staat in de serif en groot: dat is het editoriale gebaar dat de
   pagina bij elkaar houdt. */
.stappen { list-style: none; margin: clamp(30px, 3.6vw, 48px) 0 0; padding: 0; display: grid; gap: 32px; }
@media (min-width: 860px) { .stappen { grid-template-columns: repeat(3, 1fr); gap: 46px; } }
/* De foto boven een stap. Eigen foto's van het kantoor in Diemen, geen stock:
   dat is het verschil tussen een pagina die betrouwbaar oogt en een pagina die
   op elke andere vergelijkingssite lijkt. Vaste verhouding, zodat de drie
   kolommen ook uitlijnen als een foto later wordt vervangen. */
.stapfoto {
  /* height: auto is hier geen sierregel. De img draagt width en height als
     attribuut, en de browser gebruikt die hoogte als opmaakregel. Zonder deze
     regel wordt de foto 600 pixels hoog en snijdt object-fit hem doormidden. */
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--rand); margin-bottom: 20px;
  background: var(--bos-2);
}

/* --- De tegels bij de stappen ------------------------------------------------
   Een kaartje over de foto heen. Bij stap 2 laat het zien wat "minimaal twee
   aanbiedingen naast elkaar" betekent, want dat is de belofte waar die stap op
   staat of valt.

   Twee regels waar dit blok zich aan houdt. De eindstand vertelt het verhaal
   ook zonder beweging, want zonder javascript en bij "minder beweging" in het
   systeem staat alles meteen goed. En hij speelt één keer af zodra hij in beeld
   komt, hij herhaalt niet: eeuwig doorlopende beweging trekt de aandacht weg
   van het formulier. */
.staptegel {
  position: relative; margin-bottom: 20px;
  border-radius: var(--rand); overflow: hidden;
  background: var(--bos-2);
}
.staptegel .stapfoto { margin-bottom: 0; }
/* Een donkere sluier over de foto, anders leest het witte kaartje niet. */
.staptegel .stapfoto + .tegelkaart::before {
  content: ''; position: absolute; inset: -8%;
  background: linear-gradient(180deg, rgba(10,46,36,.55), rgba(10,46,36,.78));
}
.staptegel.geentegelfoto {
  aspect-ratio: 3 / 2; display: grid; place-items: center;
  background: linear-gradient(155deg, #08251C, #0B3226 62%, #0E3B2D);
  box-shadow: inset 0 0 0 1px var(--lijn-donker-2);
}

.tegelkaart {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: start; gap: 0; padding: 8%;
}
.staptegel.geentegelfoto .tegelkaart { position: static; }
.tegelkaart > * { position: relative; }
.tegelkop {
  margin: 0 0 9px; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--vuur-licht);
}

.tegelrijen, .tegelvinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; max-width: 250px; }
.tegelrijen li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--papier); color: var(--inkt);
  border-radius: var(--rand-s); padding: 9px 11px;
  font-size: .78rem; font-weight: 600; letter-spacing: -.015em;
}
.tegelrijen i { flex: 0 0 auto; width: 34px; height: 6px; border-radius: 3px; background: var(--lijn-sterk); }
.tegelrijen li:nth-child(2) i, .tegelrijen li:nth-child(3) i { background: var(--vuur); }

.tegelvinkjes li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .8rem; line-height: 1.4; color: var(--op-bos); font-weight: 500;
}
.tegelvinkjes li::before {
  content: ''; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px;
  background: no-repeat center/15px 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9C46A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.6 5.2 5.2L20 6.4'/%3E%3C/svg%3E");
}

/* De eindstand is de standaard. Alleen als de javascript draait wordt er
   eerst iets verborgen, en pas als het blok in beeld komt beweegt het. */
/* Alleen de tegel die als onthulling is aangemerkt beweegt. Zonder deze
   afbakening bleef de kop van de andere tegel voor altijd onzichtbaar, want
   die krijgt de klasse "zichtbaar" nooit. */
.js-onthul .staptegel[data-onthul] .tegelkop  { opacity: 0; }
.js-onthul .staptegel[data-onthul] .tegelrijen li { opacity: 0; }
.js-onthul .staptegel[data-onthul].zichtbaar .tegelkop { animation: tegel-binnen .4s var(--soepel) .3s both; }
.js-onthul .staptegel[data-onthul].zichtbaar .tegelrijen li { animation: tegel-binnen .45s var(--soepel) both; }
.js-onthul .staptegel[data-onthul].zichtbaar .tegelrijen li:nth-child(1) { animation-delay: .55s; }
.js-onthul .staptegel[data-onthul].zichtbaar .tegelrijen li:nth-child(2) { animation-delay: 1.00s; }
.js-onthul .staptegel[data-onthul].zichtbaar .tegelrijen li:nth-child(3) { animation-delay: 1.45s; }
@keyframes tegel-binnen { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.stappen .nr {
  display: block;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.05em;
  line-height: 1; color: var(--vuur);
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--lijn);
}
.stappen h4 { margin-bottom: 9px; }
.stappen p { font-size: .96rem; max-width: 42ch; }

/* --- Het drieluik: de drie stappen en de vier actiepunten ------------------
   Staat over de volle breedte onder het uitlegblok, want dit is het antwoord
   op "en wat moet ik dan doen". Eerst hoe het gaat, dan waarom het nu loont. */
/* De haarlijn boven dit blok wordt getekend en niet als rand gezet. Een rand
   op een .omhulsel loopt namelijk door de eigen binnenmarge heen: op een breed
   scherm blijft hij dan binnen het raster, maar op een telefoon loopt hij van
   rand tot rand. Twee verschillende uitkomsten voor één regel. */
.drieluik { position: relative; margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(40px, 5vw, 68px); }
.drieluik::before {
  content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 1px;
  background: var(--lijn-donker-2);
}
@media (max-width: 560px) { .drieluik::before { left: 18px; right: 18px; } }
.drieluik-kop { display: grid; gap: 14px; }
@media (min-width: 1000px) {
  .drieluik-kop {
    grid-template-columns: minmax(0, 11fr) minmax(0, 15fr);
    column-gap: clamp(48px, 6vw, 100px); align-items: end;
  }
  .drieluik-kop p { margin: 0 0 .3em; max-width: 48ch; }
}

/* De vier actiepunten: kort, één zin per punt, in een raster onder de
   stappen. Ze horen bij de stappen en niet ernaast, dus dezelfde haarlijn. */
.punten { list-style: none; margin: clamp(30px, 3.6vw, 46px) 0 0; padding: 0; display: grid; gap: 26px; }
@media (min-width: 700px)  { .punten { grid-template-columns: repeat(2, 1fr); column-gap: clamp(36px, 4.4vw, 64px); row-gap: 30px; } }
@media (min-width: 1180px) { .punten { grid-template-columns: repeat(4, 1fr); column-gap: clamp(28px, 2.6vw, 40px); } }
.punten li { border-top: 1px solid var(--lijn); padding-top: 16px; }
.punten h3 { margin-bottom: 7px; }
.punten p { font-size: .93rem; line-height: 1.55; max-width: 40ch; }
.vlak-donker .punten li { border-top-color: var(--lijn-donker-2); }
.vlak-donker .punten h3 { color: var(--op-bos); }

/* --- De rekensom -------------------------------------------------------------
   De bedragen staan bewust als gewone zin en niet als getallenbalk. Elke regel
   klopte, maar samen wekten grote bedragen de indruk van een besparingsbelofte,
   en bij oneerlijke handelspraktijken telt de totaalindruk en niet of elke zin
   los waar is. De haarlijn is 1px en draagt geen kleur: hij markeert een
   ingesprongen passage, hij maakt er geen uitgelicht kader van. */
.rekenregel {
  margin-top: clamp(26px, 3vw, 36px);
  padding-left: clamp(18px, 2.2vw, 28px);
  border-left: 1px solid var(--lijn);
  font-size: 1.02rem; line-height: 1.65;
  max-width: 62ch;
}
.vlak-donker .rekenregel { border-left-color: var(--lijn-donker-2); }

/* De enige zin op citaatgrootte op deze hele pagina, en het is bewust de zin
   met het voorbehoud en niet een bedrag. De serif staat er al, dus dit kost
   geen nieuw materiaal, en het zet de nuance groter dan de getallen. Draai dit
   nooit om: zodra een bedrag hier groot komt te staan wordt de totaalindruk
   een besparingsbelofte. Zie PRODUCT.md. */
/* De bedragen mogen vet, maar niet groot. Vet binnen een lopende zin is
   nadruk; een groter corps maakt er een getallenbalk van, en dan kantelt de
   totaalindruk naar een besparingsbelofte. Zie PRODUCT.md. */
.rekenregel strong { font-weight: 700; color: var(--op-bos); }

.rekenregel .uitspraak {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 650; line-height: 1.16;
  letter-spacing: -.034em; color: var(--op-bos);
  margin: clamp(18px, 2vw, 26px) 0; max-width: 24ch;
}

/* Een tekstlink die eruitziet als een vervolgstap, niet als een knop. */
.tekstlink {
  font-weight: 600; color: inherit;
  text-decoration-color: var(--vuur); text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.tekstlink:hover { color: var(--vuur); }
/* Op het groen haalt het terracotta maar 2,35 tegen zijn ondergrond, dus daar
   is de streep zo goed als onzichtbaar. Op donker dus een lichte tint. */
.vlak-donker .tekstlink { text-decoration-color: var(--vuur-licht); }
.vlak-donker .tekstlink:hover { color: var(--vuur-licht); }

/* --- Reviews ---------------------------------------------------------------- */
.reviewkop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.reviewkop .bewijsrij { margin-top: 0; }

.reviews { display: grid; gap: 1px; margin-top: clamp(30px, 3.6vw, 46px); background: var(--lijn); border: 1px solid var(--lijn); }
@media (min-width: 880px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

/* De drie reviews staan als één zetsel naast elkaar, gescheiden door
   haarlijnen. Losse zwevende kaarten met slagschaduw waren precies het
   standaardbeeld waar deze pagina van weg moest. */
.review {
  display: flex; flex-direction: column;
  margin: 0; padding: clamp(24px, 2.6vw, 30px);
  background: var(--kaart-warm); color: var(--inkt);
}
/* Dunne stervormen lopen bij het renderen uit naar de achtergrond, dus op
   papier voldoende contrast is in beeld te weinig. Deze kleur haalt 5,3 op de
   reviewkaart, bij 18 pixels. */
.sterren { display: flex; gap: 3px; margin-bottom: 15px; }
.sterren svg { width: 18px; height: 18px; color: var(--ster); }
.review h3 { color: var(--inkt); margin-bottom: 10px; font-size: 1.06rem; }
.review blockquote {
  margin: 0 0 auto; font-size: .95rem; line-height: 1.62;
  color: var(--tekst-zacht); max-width: none;
}
.review figcaption {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--kaart-warm-lijn);
}
.review figcaption img {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 3px; object-fit: contain;
  background: var(--wit); padding: 4px; border: 1px solid var(--kaart-warm-lijn);
}
.review .wie { font-size: .87rem; line-height: 1.35; min-width: 0; }
.review .wie b { display: block; font-weight: 600; color: var(--inkt); }
.review .wie span { color: var(--tekst-zacht); }
.review .bron {
  margin-left: auto; flex: 0 0 auto;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tekst-zacht); white-space: nowrap;
}

/* --- Wie wel, wie niet -------------------------------------------------------
   Twee zachte vlakken naast elkaar. Het bos voor wie wij helpen, het vuur voor
   wie wij niet kunnen helpen. Geen aparte groen- en roodfamilie: de twee
   merkkleuren dragen het onderscheid zelf. */
.wel-niet { display: grid; gap: 18px; margin-top: clamp(30px, 3.6vw, 46px); }
@media (min-width: 820px) { .wel-niet { grid-template-columns: 1fr 1fr; gap: 22px; } }

.wel-niet > div { border-radius: var(--rand); padding: clamp(24px, 2.6vw, 30px); }
.wel  { background: var(--wel-vlak);  box-shadow: inset 0 0 0 1px var(--wel-rand); }
.niet { background: var(--niet-vlak); box-shadow: inset 0 0 0 1px var(--niet-rand); }
/* Let op: het niet-vlak draagt bewust géén accentkleur. Het vuur betekent op
   deze pagina "hier klikken". Datzelfde vuur op het vlak dat iemand juist
   wegstuurt zegt twee tegengestelde dingen tegelijk. */

.wn-kop { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 20px; }
.wel  .wn-kop { border-bottom: 1px solid var(--wel-rand); }
.niet .wn-kop { border-bottom: 1px solid var(--niet-rand); }
.wn-teken {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--papier);
}
.wel  .wn-teken { background: var(--bos); }
.niet .wn-teken { background: var(--niet-teken); }
.wn-teken svg { width: 18px; height: 18px; }
.wn-kop h3 { margin: 0; font-size: 1.16rem; }
.wel  .wn-kop h3 { color: var(--wel-kop); }
.niet .wn-kop h3 { color: var(--niet-kop); }
.wn-sub { margin: 3px 0 0; font-size: .84rem; }
.wel  .wn-sub { color: var(--wel-sub); }
.niet .wn-sub { color: var(--niet-sub); }

.wel-niet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wel-niet li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  font-size: .97rem; line-height: 1.5; color: var(--tekst-zacht);
}
.wel-niet li strong { color: var(--inkt); font-weight: 600; }
.wn-punt { display: block; margin-top: 3px; }
.wn-punt svg { width: 15px; height: 15px; }
.wel  .wn-punt { color: var(--bos); }
.niet .wn-punt { color: var(--niet-teken); }

.wn-slot {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--niet-rand);
  font-size: .93rem; font-weight: 600; color: var(--niet-kop);
}

/* --- Veelgestelde vragen ------------------------------------------------------ */
.vragen { border-top: 1px solid var(--lijn); max-width: 74ch; }
@media (max-width: 999px) { .vragen { margin-top: clamp(26px, 3.2vw, 42px); } }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-weight: 600; font-size: 1.03rem; letter-spacing: -.016em; color: var(--inkt);
}
.vraag summary::-webkit-details-marker { display: none; }
/* Een getekend pijltje met ronde uiteinden, net als de andere iconen op deze
   pagina. Twee haakse randen van een vierkantje geven een scherpe punt die
   nergens anders voorkomt. */
.vraag summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 16px; height: 16px;
  transform: translateY(-50%); transition: transform .22s var(--soepel);
  background: no-repeat center/16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6259' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.vraag[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.vraag p { padding: 0 0 20px; font-size: .97rem; }

/* --- Sluitblok ----------------------------------------------------------------
   Het tweede donkere anker. Dit blok en de voet zijn samen één veld: eerder
   stond het slot als losse kaart op papier, waardoor er tussen de kaart en de
   voet een dunne papierstreep overbleef die als een fout las in plaats van als
   lucht. Nu loopt het slot van rand tot rand door in de voet. */
.slotvlak { padding: clamp(52px, 6vw, 88px) 0 clamp(44px, 5vw, 66px); }
.slot { text-align: center; }
.slot h2 { max-width: 18ch; margin: 0 auto; color: var(--op-bos); }
.slot p { margin: 18px auto 0; color: var(--op-bos-zacht); }
.slot .knop { margin-top: 28px; }

/* --- Voet ----------------------------------------------------------------- */
.voet { background: var(--bos-2); border-top: 1px solid var(--lijn-donker-2); padding: 56px 0 36px; color: var(--op-bos); }
/* Op de landingspagina loopt het slotblok als één donker veld door in de voet.
   Daar mag de scheidingslijn niet bovenaan de voet staan, want dan snijdt hij
   dat ene veld doormidden: hij schuift naar binnen, tussen de oproep en de
   voetgegevens. Op de losse pagina's staat de voet gewoon onder papier en
   houdt hij zijn eigen bovenlijn. */
.slotvlak + .voet { border-top: 0; padding-top: 8px; }
.slotvlak + .voet .voetraster { padding-top: 48px; border-top: 1px solid var(--lijn-donker); }
.voetraster { display: grid; gap: 32px; }
@media (min-width: 780px) { .voetraster { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; } }
.voet img { width: 92px; margin-bottom: 18px; }
.voet p { color: var(--op-bos-zacht); }
.voet .zacht { color: var(--op-bos-zacht); }
.voet .voetkop {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--op-bos-voet); margin: 0 0 15px; font-weight: 600; line-height: 1.3;
}
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin: 0 0 9px; font-size: .92rem; color: var(--op-bos-zacht); }
.voet a { color: var(--op-bos-zacht); text-decoration: none; }
.voet a:hover { color: var(--op-bos); text-decoration: underline; }
.copyregel {
  max-width: none;
  margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--lijn-donker);
  font-size: .82rem; color: var(--op-bos-voet); line-height: 1.7;
}

/* --- Vaste knop op mobiel --------------------------------------------------- */
.mobielbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: rgba(241,237,228,.95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--lijn-sterk);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  display: none;
}
.mobielbalk .knop { width: 100%; }
@media (max-width: 999px) { .mobielbalk.actief { display: block; } body.met-mobielbalk { padding-bottom: 78px; } }

/* --- Cookiebanner ----------------------------------------------------------- */
.cookiebalk {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 45;
  background: var(--wit); color: var(--inkt);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rand); box-shadow: var(--schaduw-op);
  padding: 18px 20px; max-width: 480px;
}
.cookiebalk[hidden] { display: none !important; }
.cookiebalk .cookiekop { margin: 0 0 8px; font-weight: 600; font-size: .95rem; letter-spacing: -.014em; }
.cookiebalk p { font-size: .87rem; color: var(--tekst-zacht); margin: 0; }
.cookiebalk .keuzes { display: flex; gap: 9px; margin-top: 16px; }
.cookiebalk .knop { flex: 1 1 auto; }

/* Op een telefoon staat onderaan ook de vaste knop. Dan schuift de
   cookiemelding daarboven, zodat ze elkaar niet overlappen. En hij wordt
   compacter, want hij mag het formulier niet onnodig lang afdekken. */
@media (max-width: 999px) {
  .cookiebalk { left: 12px; right: 12px; bottom: 12px; padding: 15px 16px; }
  .cookiebalk p { font-size: .82rem; line-height: 1.45; }
  .cookiebalk .keuzes { margin-top: 12px; }
  .cookiebalk .knop { padding: 10px 12px; font-size: .85rem; }
  body.met-mobielbalk .cookiebalk { bottom: calc(78px + 10px); }
}

/* --- Losse pagina's: verificatie, bedankt, afmelden -------------------------- */
.smal { max-width: 580px; margin: 0 auto; padding: clamp(44px, 6vw, 84px) 26px clamp(60px, 8vw, 100px); }
.smal h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); line-height: 1.02; }
.smal > p { margin-top: 18px; color: var(--tekst-zacht); }

.codevelden { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.codevelden input {
  width: 100%; min-width: 0; text-align: center;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: clamp(1.2rem, 5.6vw, 1.6rem); font-weight: 600;
  padding: 14px 0; color: var(--inkt); background: var(--wit);
  border: 1px solid var(--veld-rand); border-radius: var(--rand-s);
}
.codevelden input:focus { outline: none; border-color: var(--vuur); box-shadow: 0 0 0 3px rgba(184,69,29,.18); }

.melding { padding: 12px 14px; border-radius: var(--rand-s); margin: 0 0 16px; font-size: .89rem; font-weight: 500; line-height: 1.45; }
.melding.goed { background: var(--goed-vlak); border: 1px solid var(--goed-rand); color: var(--goed-tekst); }
.melding.fout { background: var(--fout-vlak); border: 1px solid var(--fout-rand); color: var(--fout-tekst); }
.melding[hidden] { display: none !important; }

.uitleg { margin: 20px 0 0; border-top: 1px solid var(--lijn); }
.uitleg summary { cursor: pointer; font-size: .89rem; font-weight: 600; color: var(--inkt); padding: 14px 0 12px; }
.uitleg summary::marker { color: var(--vuur); }
.uitleg p { font-size: .88rem; color: var(--tekst-zacht); margin: 0 0 14px; max-width: none; }

.tekstknop { background: none; border: 0; padding: 7px 0; cursor: pointer; font: 500 .88rem 'Onest', sans-serif; color: var(--tekst-zacht); text-decoration: underline; text-underline-offset: .18em; }
.tekstknop:hover { color: var(--inkt); }
.tekstknop[disabled] { color: var(--veld-hint); cursor: default; text-decoration: none; }

.gelukt { display: flex; gap: 16px; align-items: center; }
.gelukt svg { flex: 0 0 auto; width: 46px; height: 46px; color: var(--bos); }

.stappenlijst { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; }
.stappenlijst li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--lijn); font-size: .96rem; color: var(--tekst-zacht); }
.stappenlijst li:first-child { border-top: 1px solid var(--lijn); }
.stappenlijst .nr { font-size: 1.15rem; font-weight: 700; letter-spacing: -.05em; line-height: 1.35; color: var(--vuur); }
.stappenlijst strong { display: block; color: var(--inkt); font-weight: 600; margin-bottom: 4px; }

.overslaan { position: absolute; left: -9999px; top: 0; background: var(--vuur); color: var(--op-vuur); padding: 10px 16px; z-index: 60; font-weight: 600; }
.overslaan:focus { left: 0; top: 0; }

.anders { margin-top: clamp(32px, 4vw, 48px); padding-top: 28px; border-top: 1px solid var(--lijn); }
.anders h2 { font-size: clamp(1.5rem, 2.4vw, 1.8rem); margin-bottom: 12px; }
.anders p { color: var(--tekst-zacht); font-size: .95rem; }
.contactregels { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 16px 0 20px; }
.contactregels a {
  display: inline-flex; align-items: center;
  padding: 11px 17px; border-radius: var(--rand-s);
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  color: var(--inkt); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.contactregels a:hover { background: var(--papier-diep); }

.ruimte    { margin-top: 24px; }
.ruimte-l  { margin-top: 36px; }

/* --- Onthullen bij scrollen --------------------------------------------------
   Eén beweging op de hele pagina: inhoud komt een klein stukje omhoog en wordt
   zichtbaar zodra hij in beeld komt. Werkt de javascript niet, dan staat alles
   gewoon meteen op zijn plek. */
.js-onthul [data-onthul] {
  opacity: 0;
  transform: translateY(16px);
}
.js-onthul .zichtbaar {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--soepel), transform .7s var(--soepel);
}

/* De formulierkaart komt iets nadrukkelijker binnen: hij is het onderwerp. */
.js-onthul .kaart[data-onthul] { transform: translateY(22px) scale(.985); }
.js-onthul .kaart[data-onthul].zichtbaar { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .loper { animation: none; }
  .js-onthul [data-onthul] { opacity: 1 !important; transform: none !important; }
}


/* =====================================================================
   Huisstijl van de website (13 september 2026): Geist, groene kop met
   geel logo, gouden pilknoppen, groene hero, footer als op de website.
   Deze regels overschrijven wat hierboven staat; de opbouw blijft.
   ===================================================================== */
body, .stap h2, .knop, h1, h2, h3 { font-family: 'Geist', 'Onest', system-ui, -apple-system, sans-serif; }
.mono, .stempel > span, .codevelden input { font-family: 'Geist', system-ui, sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums; }
h1, h2 { letter-spacing: -.03em; font-weight: 700; }

/* Kop: groene balk met het gele logo, zoals de website */
.kopbalk { background: var(--bos); border-bottom: 1px solid rgba(241,237,228,.12); }
.kopbalk img { height: 44px; width: auto; }
.koptel { color: var(--op-bos); }
.koptel:hover { color: var(--vuur); }

/* Knoppen: gouden pil met donkere tekst, licht indrukken bij klik */
.knop { border-radius: 100vmax; background: var(--vuur); color: var(--op-vuur); box-shadow: none; transition: background .2s ease, transform .16s cubic-bezier(.23,1,.32,1); }
.knop:hover { background: var(--vuur-hover); transform: none; box-shadow: none; }
.knop:active { background: var(--vuur-actief); transform: scale(.97); }
.overslaan { color: var(--op-vuur); }
.knop.stil, .terugknop { border-radius: 100vmax; }

/* Hero: diepgroen met crème tekst en het accentwoord in goud */
.hero { background: var(--bos); color: var(--op-bos); }
.hero h1 { color: var(--op-bos); }
.hero h1 em { color: var(--vuur); font-style: normal; }
.hero-boven > p, .heroknop span, .kenmerken { color: #DCE4DF; }
.kenmerken li::before { background: var(--vuur); }
.hero .bewijs { border-color: transparent; }
.hero .wiebelt { border-color: transparent; }

/* Accenten die op crème stonden in terracotta: nu groen (goud is daar te licht) */
.stappen .nr, .stappenlijst .nr, .tekstlink:hover, .koptel.op-papier:hover, .uitleg summary::marker { color: var(--bos); }
.tekstlink { text-decoration-color: var(--vuur-diep); }
.balk i, .tegelrijen li:nth-child(2) i, .tegelrijen li:nth-child(3) i { background: var(--vuur); }
input:focus, select:focus, .codevelden input:focus { border-color: var(--bos); box-shadow: 0 0 0 3px rgba(13,58,46,.12); }
:focus-visible { outline-color: var(--bos); }
.hero :focus-visible, .vlak-donker :focus-visible, .kopbalk :focus-visible { outline-color: var(--vuur); }
::selection { background: var(--vuur); color: var(--op-vuur); }
input, textarea, select { caret-color: var(--bos); }
.keuze:hover { border-color: var(--bos); background: #F7F4EC; }
.keuze { border-radius: 12px; }

/* Kaarten: ronde hoeken en een zachte schaduw, zoals de website */
.kaart { border-radius: var(--rand); border-color: transparent; box-shadow: 0 20px 60px rgba(22,27,21,.10); }
.tegel, .review, .stapkaart, .wel, .niet { border-radius: 16px; }

/* Voet: dezelfde donkere voet als de website, met gouden kolomkoppen */
.voet { background: #161B15; border-top: 0; color: var(--op-bos); }
.voetkop { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vuur); font-weight: 600; }
.voet a { color: var(--op-bos); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241,237,228,.35); }
.voet a:hover { color: #fff; }
.copyregel { border-top-color: rgba(241,237,228,.15); color: #A9BCB2; }
.voet img { height: 44px; width: auto; }

/* Sticky balk onderaan op telefoon: groen met de gouden knop */
.mobielbalk { background: rgba(13,58,46,.96); border-top: 1px solid rgba(241,237,228,.15); }

/* Fotokaart in de groene hero: lichte tekst */
.hero .wiebelt p { color: #DCE4DF; }
.hero .wiebelt strong { color: var(--op-bos); }
/* "Vier redenen" wordt een wit vlak, anders loopt het groen van de hero door */
.vlak-donker.kort { background: var(--wit); color: var(--inkt); }
.vlak-donker.kort h2, .vlak-donker.kort h3 { color: var(--inkt); }
.vlak-donker.kort p, .vlak-donker.kort .zacht { color: var(--tekst-zacht); }
.vlak-donker.kort .tegelkop { color: var(--bos); }
.vlak-donker.kort .tegel, .vlak-donker.kort .tegels > * { border-color: var(--lijn); }
.vlak-donker.kort [class*="lijn"] { border-color: var(--lijn); }


/* ===== Overgenomen van de website (13 sep 2026): reviewkolommen en voet ===== */
.wtd-reviews__scores{text-align:center;color:#DCE4DF;max-width:40rem;margin:1rem auto 0;font-size:1.02rem;line-height:1.6}
.wtd-reviews__scores a{color:#E9C46A;font-weight:600;text-decoration:underline;text-underline-offset:.15em}
.wtd-reviews{display:flex;justify-content:center;gap:1.5rem;margin-top:2.5rem;max-height:740px;overflow:hidden;position:relative;contain:layout paint}
.wtd-reviews::before,.wtd-reviews::after{content:"";position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none}
.wtd-reviews::before{top:0;background:linear-gradient(to bottom,#0D3A2E,rgba(13,58,46,0))}
.wtd-reviews::after{bottom:0;background:linear-gradient(to top,#0D3A2E,rgba(13,58,46,0))}
.wtd-reviews__kolom{flex:0 1 20rem;min-width:0}
.wtd-reviews__kolom--md,.wtd-reviews__kolom--lg{display:none}
@media (min-width:48em){.wtd-reviews__kolom--md{display:block}}
@media (min-width:64em){.wtd-reviews__kolom--lg{display:block}}
.wtd-reviews__loop{display:flex;flex-direction:column;gap:1.5rem;padding-bottom:1.5rem;animation:wtd-schuif var(--duur,30s) linear infinite;will-change:transform;backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .wtd-reviews{max-height:none;flex-wrap:wrap}
  .wtd-reviews::before,.wtd-reviews::after{display:none}
  .wtd-reviews__loop{animation:none}
  .wtd-reviews__loop[aria-hidden="true"]{display:none}
}
.wtd-review{background:#fff;color:#161B15;border:1px solid #DCD5C6;border-radius:1.5rem;padding:1.75rem 2rem 1.75rem;box-shadow:0 6px 18px rgba(0,0,0,.16);width:100%}
.wtd-review__sterren{display:inline-flex;gap:.15rem;color:#E9C46A;margin-bottom:.7rem}
.wtd-review__sterren svg{width:.95rem;height:.95rem}
.wtd-review__tekst{margin:0;font-size:1rem;line-height:1.6;text-wrap:pretty}
.wtd-review__voet{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem}
.wtd-review__bron{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:#F1EDE4;flex:none}
.wtd-review__bron svg{width:1.3rem;height:1.3rem}
.wtd-review__wie{display:flex;flex-direction:column;line-height:1.3}
.wtd-review__naam{font-weight:600;letter-spacing:-.01em}
.wtd-review__rol{color:#5b625d;font-size:.9rem}
@keyframes wtd-schuif{to{transform:translateY(-100%)}}
.wtd-foot{position:relative;z-index:2;background:#161B15;color:#F1EDE4;font-size:.92rem;line-height:1.6}
.wtd-foot__inner{max-width:75rem;margin:0 auto;padding:clamp(2.5rem,4vw,3.5rem) clamp(1rem,3vw,2rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem}
.wtd-foot h4,.wtd-foot .wtd-foot__kop{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#E9C46A;margin:0 0 .75rem;font-weight:600}
.wtd-foot ul{list-style:none;margin:0;padding:0}
.wtd-foot li{margin:.35rem 0}
.wtd-foot a{color:#F1EDE4;text-decoration:none;border-bottom:1px solid rgba(241,237,228,.3)}
.wtd-foot a:hover{border-bottom-color:#E9C46A}
.wtd-foot__juri{grid-column:1/-1;border-top:1px solid rgba(241,237,228,.18);padding-top:1.1rem;margin:0;font-size:.82rem;color:#A9BCB2;max-width:none}

/* Reviews op de landingspagina staan op papier-diep, dus de vervaging in die kleur */
.wtd-reviews::before{background:linear-gradient(to bottom,#E8E2D5,rgba(232,226,213,0))}
.wtd-reviews::after{background:linear-gradient(to top,#E8E2D5,rgba(232,226,213,0))}
.wtd-reviews{margin-top:2rem}
.reviewsub{margin:6px 0 0;color:var(--tekst-zacht)}
.reviewsub b{color:var(--inkt)}

/* Uitlegvideo onder het formulier, met de gouden afspeelknop van de website */
.videokop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin:0 0 22px}
.videokop h2{margin:0}
.videokop p{margin:0}
.videokader{position:relative;margin:0 auto;max-width:960px;aspect-ratio:16/9;border-radius:var(--rand);overflow:hidden;background:var(--bos);box-shadow:0 20px 60px rgba(22,27,21,.12)}
.wtd-video{position:absolute;inset:0}
.wtd-video video{position:absolute;inset:0;width:100%;height:100%;display:block}
.wtd-video__knop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(13,58,46,.62);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#F1EDE4;font:inherit;padding:0;border-radius:0}
.wtd-video__cirkel{width:6rem;height:6rem;border-radius:50%;background:#E9C46A;color:#161B15;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.23,1,.32,1);animation:wtd-klop 2.4s ease-in-out infinite}
.wtd-video__cirkel svg{margin-left:.35rem}
.wtd-video__knop:hover .wtd-video__cirkel{transform:scale(1.08);animation:none}
.wtd-video__knop:active .wtd-video__cirkel{transform:scale(.97)}
.wtd-video__knop:focus-visible{outline:3px solid #E9C46A;outline-offset:-6px}
.wtd-video__tekst{text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.wtd-video__tekst strong{display:block;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.01em;color:#F1EDE4}
.wtd-video__tekst small{display:block;font-size:1rem;color:#E9C46A;margin-top:.25rem;font-weight:500}
@keyframes wtd-klop{0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 0 0 rgba(233,196,106,.55)}60%{box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 0 22px rgba(233,196,106,0)}}
.wtd-video.is-gestart .wtd-video__knop{display:none}
@media (max-width:47.999em){.wtd-video__knop{gap:.55rem}.wtd-video__cirkel{width:3.6rem;height:3.6rem}.wtd-video__cirkel svg{width:22px;height:22px;margin-left:.2rem}.wtd-video__tekst strong{font-size:1rem}.wtd-video__tekst small{font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.wtd-video__cirkel{animation:none}}

/* Stapkaartjes uit de video-animatie op de drie tegels */
.staptegel{position:relative}
.stapkaartje{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.96);color:#161B15;border-radius:.7rem;padding:.5rem .7rem;box-shadow:0 8px 24px rgba(22,27,21,.22);max-width:13rem}
.stapkaartje__nr{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:#E9C46A;color:#0D3A2E;display:inline-flex;align-items:center;justify-content:center}
.stapkaartje__nr svg{width:.9rem;height:.9rem}
.stapkaartje strong{display:block;font-size:.8rem;line-height:1.2;letter-spacing:-.01em}
.stapkaartje small{display:block;font-size:.7rem;color:#5b625d;margin-top:.1rem}

/* Voet: links op de landingspagina zijn onderstreept met een dun lijntje, zoals op de website */
.wtd-foot__juri{line-height:1.6}

/* Stapkaartjes even groot, één regel */
.stapkaartje{width:11.5rem;max-width:none}
.stapkaartje strong,.stapkaartje small{white-space:nowrap}
/* Video: tijdens het laden blijft de poster staan en zegt de knop dat hij laadt */
.wtd-video.is-laden .wtd-video__cirkel{animation:none;opacity:.55}
.wtd-video.is-laden .wtd-video__tekst strong::after{content:" laadt…"}