/* ==========================================================================
   CORE — gedeeld componentsysteem voor alle microsites.
   Bevat GEEN kleuren, letters of vormen: die komen uit het thema-bestand dat
   hierboven wordt geplakt (zie eleventy.config.mjs). Core gebruikt uitsluitend
   tokens, zodat één thema-laag de hele site van karakter verandert.

   Tokencontract dat elk thema moet leveren:
     kleur   --accent --accent-donker --accent-licht --accent-op
             --tweede --tweede-donker --tweede-op
             --papier --vlak --vlak-2 --inkt --grijs --lijn --lijn-sterk
             --fout --ok
     vorm    --rond --rond-klein --rond-knop --beeld-rond
             --schaduw --schaduw-groot
     letter  --font-body --font-kop --font-ui
             --kop-gewicht --kop-transform --kop-spatie
   ========================================================================== */

/* --- Ruimte- en typeschaal (gelijk voor alle thema's) -------------------- */
:root{
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4.5rem;
  --kader:64rem;         /* de kolom waarin alles staat — één linkerkantlijn */
  --maat:38rem;          /* leesbreedte lopende tekst — circa 72 tekens */
  --rand:1.35rem;        /* ruimte tussen kader en schermrand */
  --band:clamp(2.5rem,5vw,4.25rem);  /* verticale ademruimte van een sectie */
  --h1:clamp(2rem,1.35rem + 2.6vw,3.05rem);
  --h2:clamp(1.45rem,1.26rem + .78vw,1.95rem);
  --h3:clamp(1.12rem,1.07rem + .2vw,1.24rem);
  --lead:clamp(1.09rem,1.03rem + .32vw,1.28rem);
  --klein:.9rem;
  --mini:.8rem;
  color-scheme:light;    /* bewuste keuze: één lichte wereld, zie AFBEELDINGEN.md */
}

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

/* `clip` in plaats van `hidden`: dat maakt géén scrollcontainer aan, dus de
   plakkende kop blijft werken terwijl de pagina nooit zijwaarts schuift. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}

body{
  margin:0;
  background:var(--papier);
  color:var(--inkt);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Raster --------------------------------------------------------------
   Eén kader van 64rem waarin álles staat: hero, tekst, tabellen, kaarten. Dat
   geeft de hele pagina dezelfde linkerkantlijn. De leesbreedte regelen we niet
   met een smaller kader maar met een max-width op de tekstelementen zelf, zodat
   een alinea nooit te lang wordt maar wél links uitlijnt met de rest.
   Banden met een eigen achtergrond krijgen `vol` en lopen door tot de rand. */
main{
  display:grid;
  grid-template-columns:
    [vol-start] minmax(var(--rand),1fr)
    [inhoud-start] minmax(0,var(--kader)) [inhoud-end]
    minmax(var(--rand),1fr) [vol-end];
  row-gap:0;
}
main>*{grid-column:inhoud;min-width:0}
main>.vol,main>.hero,main>.section,main>.beeldband,main>.cta-blok,
main>.usp-balk,main>.form-sectie,main>.faq-sectie{grid-column:vol}

/* Lopende tekst blijft leesbaar; brede elementen mogen het hele kader vullen. */
main>p,main>ul,main>ol,main>dl,main>blockquote,
main>h1,main>h2,main>h3,main>h4{max-width:var(--maat)}
/* Een stappenlijst of kaartenrij ís geen lopende tekst: die staat toevallig in
   een <ol> of <ul> en zou anders halverwege het kader ophouden terwijl de
   cijferrij en de kaarten ernaast wél doorlopen. */
main>.stappen,main>.kaarten,main>.cijfers-rij,main>.voor-na{max-width:none}

/* Binnenwikkel voor volle-breedte-banden — lijnt exact uit met het kader. */
.wrap{
  max-width:calc(var(--kader) + 2 * var(--rand));
  margin-inline:auto;padding-inline:var(--rand);
}
.smal{max-width:var(--maat)}

/* --- Typografie ---------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--font-kop);
  font-weight:var(--kop-gewicht);
  text-transform:var(--kop-transform);
  letter-spacing:var(--kop-spatie);
  line-height:1.15;
  text-wrap:balance;
  margin:0;
  /* Nederlands zit vol lange samenstellingen: "binnenschilderwerk" past op een
     telefoon niet op één regel en zou anders buiten beeld lopen. De pagina is
     nl, dus de browser breekt op de juiste plek af; breken zonder streepje is
     de achtervang als hij geen woordafbreking kent. */
  hyphens:auto;
  overflow-wrap:break-word;
}
h1{font-size:var(--h1);margin-block:.15em .45em}
h2{font-size:var(--h2);margin-block:1.9em .55em}
h3{font-size:var(--h3);margin-block:1.5em .35em;line-height:1.3}
h4{font-size:1rem;margin-block:1.3em .3em}
h2:first-child,h3:first-child{margin-top:0}

p{margin-block:.75em}
.lead{font-size:var(--lead);line-height:1.55;color:var(--inkt)}
.snel-antwoord{
  margin:var(--s4) 0 var(--s5);padding:var(--s4) var(--s5);
  border-left:4px solid var(--accent);border-radius:0 var(--rond) var(--rond) 0;
  background:var(--accent-licht);color:var(--inkt);font-size:1.05rem;line-height:1.6;
}
.snel-antwoord strong{color:var(--accent-donker, var(--accent))}
.eyebrow{
  font-family:var(--font-ui);font-size:var(--mini);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--accent-donker);
  margin:0 0 var(--s3);
}
.klein{font-size:var(--klein);color:var(--grijs)}
.bron{font-size:var(--mini);color:var(--grijs);font-style:normal}

a{color:var(--accent-donker);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{text-decoration-thickness:2px}

ul,ol{margin-block:.75em;padding-left:1.3em}
li{margin-block:.3em}
li::marker{color:var(--accent)}

strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--lijn);margin-block:var(--s6)}
blockquote{margin:var(--s5) 0;padding-left:var(--s4);border-left:3px solid var(--accent);color:var(--grijs)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--vlak-2);padding:.1em .35em;border-radius:var(--rond-klein)}

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

:where(a,button,summary,input,select,textarea,label):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:2px;
}
[id]{scroll-margin-top:5rem}

/* --- Sla-over-link -------------------------------------------------------- */
.sla-over{
  position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--accent);color:var(--accent-op);
  padding:var(--s3) var(--s4);border-radius:var(--rond-klein);
  font-family:var(--font-ui);font-weight:700;text-decoration:none;
  transition:top .15s ease;
}
.sla-over:focus{top:var(--s3)}

/* --- Kop van de site ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--vlak) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--lijn);
}
.header-rij{display:flex;align-items:center;gap:var(--s4);
  padding-block:var(--s3);min-height:3.9rem}
.logo{
  display:inline-flex;align-items:center;gap:.55rem;margin-right:auto;
  font-family:var(--font-kop);font-weight:800;font-size:1.05rem;line-height:1.1;
  letter-spacing:var(--kop-spatie);text-transform:var(--kop-transform);
  color:var(--inkt);text-decoration:none;
}
.logo:hover{text-decoration:none}
.logo-merk{
  flex:0 0 auto;display:grid;place-items:center;
  width:2.15rem;height:2.15rem;border-radius:var(--rond-klein);
  background:var(--accent);color:var(--accent-op);
  font-family:var(--font-kop);font-weight:800;font-size:1rem;letter-spacing:0;
}
.logo-woorden{display:block;max-width:11ch}

.hoofdnav ul{display:flex;align-items:center;gap:var(--s5);
  list-style:none;margin:0;padding:0}
.hoofdnav a{font-family:var(--font-ui);font-size:.95rem;font-weight:600;
  color:var(--inkt);text-decoration:none;padding-block:.35rem;white-space:nowrap;
  border-bottom:2px solid transparent}
.hoofdnav a:hover{border-bottom-color:var(--lijn-sterk)}
.hoofdnav a[aria-current]{border-bottom-color:var(--accent);color:var(--accent-donker)}
.nav-cta a{border-bottom:0}
.nav-cta a:hover{border-bottom:0}
/* Op brede schermen staat het hele menu er al: de schakelaar hoort dan ook
   niet in de tabvolgorde. Op mobiel wordt hij onzichtbaar maar wél focusbaar. */
.nav-schakel,.nav-knop{display:none}

/* --- Knoppen -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.25rem;min-height:2.85rem;
  font-family:var(--font-ui);font-size:1rem;font-weight:700;line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;
  border:2px solid var(--accent-donker);border-radius:var(--rond-knop);
  background:transparent;color:var(--accent-donker);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
.btn:hover{background:var(--accent-licht);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primair{background:var(--accent);border-color:var(--accent);color:var(--accent-op);
  box-shadow:var(--schaduw)}
.btn-primair:hover{background:var(--accent-donker);border-color:var(--accent-donker);
  color:var(--accent-op)}
.btn-tweede{background:var(--tweede);border-color:var(--tweede);color:var(--tweede-op)}
.btn-tweede:hover{background:var(--tweede-donker);border-color:var(--tweede-donker);
  color:var(--tweede-op)}
.btn-groot{padding:.95rem 1.7rem;min-height:3.25rem;font-size:1.06rem}
.knoppen,.hero-acties{display:flex;flex-wrap:wrap;gap:var(--s3);
  margin-block:var(--s5) 0;align-items:center}

/* --- Beeld: figuur en gereserveerde plek ---------------------------------
   Elke foto krijgt een vaste verhouding, zodat de bladspiegel niet verspringt
   als het beeld later wordt toegevoegd (geen layout shift, goed voor CLS).
   Álle beeld staat in een `.figuur` — ook in de hero en in een kaart. Eén plek
   waar verhouding, bijsnijden en hoek geregeld zijn; een kale <img> ernaast zou
   die drie stilzwijgend missen. De hoek is een eigen token omdat een thema het
   beeld hoekiger of ronder mag zetten dan de kaders eromheen. */
.figuur{margin:var(--s6) 0;display:grid;gap:var(--s3)}
.figuur img,.figuur .foto-plaats{
  width:100%;aspect-ratio:var(--verhouding,3/2);object-fit:cover;
  border-radius:var(--beeld-rond);
}
.figuur figcaption{font-size:var(--klein);color:var(--grijs);line-height:1.5}
.figuur-vol{grid-column:vol}

.foto-plaats{
  position:relative;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb,var(--accent) 7%,transparent) 0 10px,
      transparent 10px 20px),
    var(--vlak-2);
  border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--lijn));
  color:var(--accent-donker);
  overflow:hidden;
}
.foto-plaats::before{
  content:"";width:2.2rem;height:2.2rem;margin-bottom:.4rem;
  background:currentColor;opacity:.45;
  /* eenvoudige camera-vorm, als masker zodat hij de themakleur volgt */
  -webkit-mask:var(--icoon-foto) center/contain no-repeat;
  mask:var(--icoon-foto) center/contain no-repeat;
}
.foto-plaats-label{
  position:absolute;bottom:.6rem;left:.6rem;right:.6rem;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem .6rem;
  font-family:var(--font-ui);font-size:var(--mini);line-height:1.35;
  text-align:center;
}
.foto-plaats-naam{font-weight:700}
.foto-plaats-maat{opacity:.7;font-variant-numeric:tabular-nums}
:root{--icoon-foto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 7.5 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.5L15 3H9Zm3 5.5A5.5 5.5 0 1 1 6.5 14 5.5 5.5 0 0 1 12 8.5Zm0 2A3.5 3.5 0 1 0 15.5 14 3.5 3.5 0 0 0 12 10.5Z'/%3E%3C/svg%3E")}

/* Beeldband: volle breedte, tekst eroverheen. Werkt ook zonder foto. */
.beeldband{position:relative;display:grid;isolation:isolate;
  background:var(--accent-donker);color:#fff;overflow:hidden}
.beeldband>.figuur,.beeldband>img,.beeldband>.foto-plaats{
  grid-area:1/1;margin:0;border-radius:0;width:100%;
  aspect-ratio:var(--verhouding,16/6);object-fit:cover}
.beeldband-tekst{grid-area:1/1;z-index:1;align-self:end;
  padding:var(--s6) var(--rand);
  background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff}
.beeldband-tekst h2,.beeldband-tekst p{color:#fff;max-width:38rem;margin-inline:auto}

/* --- Hero ---------------------------------------------------------------- */
.hero{background:var(--vlak);border-bottom:1px solid var(--lijn);
  padding-block:var(--band)}
.hero-in{
  max-width:calc(var(--kader) + 2 * var(--rand));margin-inline:auto;
  padding-inline:var(--rand);
  display:grid;gap:clamp(var(--s5),4vw,var(--s7));align-items:center;
}
/* Twee kolommen alleen als er echt beeld staat. Bij een productiebouw zonder
   foto blijft de wikkel leeg achter; dan valt de hero terug op één kolom. */
.hero-in:has(.hero-media:not(:empty)){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero-media:empty,.kaart-media:empty{display:none}
.hero h1{margin-top:0}
/* Zonder beeld wordt de hero één kolom; de tekst mag dan niet over de volle
   kaderbreedte uitlopen, want dat leest niet meer. */
.hero-tekst{max-width:40rem}
.hero .lead{margin-bottom:0;color:var(--grijs)}
.hero-media .figuur{margin:0}
.hero-media .figuur img,.hero-media .foto-plaats{
  aspect-ratio:var(--verhouding,4/3);box-shadow:var(--schaduw-groot)}

/* Korte bewijsregels onder de knoppen — geen keurmerken, alleen wat waar is */
.hero-punten{
  list-style:none;margin:var(--s5) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  font-family:var(--font-ui);font-size:var(--klein);color:var(--grijs);
}
.hero-punten li{display:flex;align-items:center;gap:.4rem;margin:0}
.hero-punten li::before{
  content:"";flex:0 0 auto;width:1.05rem;height:1.05rem;border-radius:50%;
  background:var(--accent);
  -webkit-mask:var(--icoon-vink) center/.72rem no-repeat;
  mask:var(--icoon-vink) center/.72rem no-repeat;
  box-shadow:0 0 0 3px var(--accent-licht);
}
:root{
  --icoon-vink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 4.8 11.8l1.4-1.4 3.4 3.4 8-8 1.4 1.4Z'/%3E%3C/svg%3E");
  --icoon-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M0 0h24v3H0zM0 7.5h24v3H0zM0 15h24v3H0z'/%3E%3C/svg%3E");
}

/* --- USP-balk ------------------------------------------------------------ */
.usp-balk{background:var(--vlak-2);border-bottom:1px solid var(--lijn);
  padding-block:var(--s5)}
.usp-balk ul{
  max-width:calc(var(--kader) + 2 * var(--rand));margin-inline:auto;
  padding:0 var(--rand);list-style:none;
  display:grid;gap:var(--s4) var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.usp-balk li{margin:0;display:grid;gap:.15rem}
.usp-balk b{font-family:var(--font-ui);font-size:.98rem;color:var(--inkt)}
.usp-balk span{font-size:var(--klein);color:var(--grijs);line-height:1.5}

/* --- Cijferblok (de regionale datalaag als bewijs) ------------------------ */
/* Bewust 9rem als ondergrens: daarmee vallen vier cijfers op een telefoon in
   een blok van twee bij twee in plaats van vier hoge blokken onder elkaar. */
.cijfers-rij{
  display:grid;gap:var(--s3);margin-block:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
}
.cijfer{background:var(--vlak);border:1px solid var(--lijn);
  border-radius:var(--rond);padding:var(--s4);text-align:left}
.cijfer b{
  display:block;font-family:var(--font-kop);font-size:clamp(1.6rem,1.2rem + 1.5vw,2.2rem);
  font-weight:var(--kop-gewicht);line-height:1.05;color:var(--accent-donker);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.cijfer span{display:block;margin-top:.35rem;font-size:var(--klein);
  color:var(--grijs);line-height:1.45}

/* --- Kaarten -------------------------------------------------------------- */
.kaarten{
  display:grid;gap:var(--s4);margin-block:var(--s6);padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}
/* Vier kaarten in drie kolommen laat een gat van een derde rij open. Twee bij
   twee vult dat op, en de kaarten worden er ook nog leesbaarder van. */
@media (min-width:52rem){
  .kaarten:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.kaart{
  display:flex;flex-direction:column;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond);
  padding:var(--s5);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.kaart:hover{border-color:var(--accent);box-shadow:var(--schaduw);transform:translateY(-2px)}
.kaart h3{margin-top:0;margin-bottom:.35rem}
/* Een link in een kaart is soms de titel en soms een "lees meer" midden in een
   zin — in beide gevallen een doel van pakweg 20px hoog. Daarom is de hele
   kaart het doelgebied. Dat kan omdat elke kaart precies één link heeft;
   validate.mjs weigert een tweede, want die zou eronder verdwijnen. */
.kaart{position:relative}
.kaart a::after{content:"";position:absolute;inset:0}
.kaart p{margin-block:.35em}
.kaart p:last-child{margin-bottom:0;margin-top:auto;padding-top:var(--s3)}
.kaart-media{margin:calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4);border-radius:0}
.kaart-media .figuur{margin:0}
.kaart-media .figuur img,.kaart-media .foto-plaats{
  border-radius:var(--beeld-rond) var(--beeld-rond) 0 0;
  border-bottom:0}

/* --- Stappen -------------------------------------------------------------- */
.stappen{
  counter-reset:stap;list-style:none;padding:0;margin-block:var(--s6);
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.stappen li{
  position:relative;margin:0;padding:var(--s5) var(--s4) var(--s4);
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond);
}
.stappen li::before{
  counter-increment:stap;content:counter(stap);
  position:absolute;top:calc(var(--s4) * -.7);left:var(--s4);
  display:grid;place-items:center;width:2.3rem;height:2.3rem;
  border-radius:var(--rond-klein);
  background:var(--accent);color:var(--accent-op);
  font-family:var(--font-kop);font-weight:800;font-size:1.05rem;
  box-shadow:0 0 0 4px var(--vlak);
}
.stappen li b,.stappen li strong{display:block;margin-top:.55rem;margin-bottom:.15rem;
  font-family:var(--font-ui)}

/* --- Tabellen ------------------------------------------------------------- */
.tabel-scroll,main>table{overflow-x:auto}
table{
  border-collapse:collapse;width:100%;margin-block:var(--s5);
  background:var(--vlak);font-size:.97rem;font-variant-numeric:tabular-nums;
  border:1px solid var(--lijn);border-radius:var(--rond);
  border-spacing:0;overflow:hidden;
}
th,td{padding:.68rem .85rem;text-align:left;border-bottom:1px solid var(--lijn);
  vertical-align:top}
thead th{
  background:var(--accent-licht);color:var(--accent-donker);
  font-family:var(--font-ui);font-weight:700;font-size:var(--klein);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.35;
  border-bottom:2px solid color-mix(in srgb,var(--accent) 35%,transparent);
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--vlak-2) 55%,transparent)}
/* Eerste kolom is de labelkolom: die mag niet tot één woord per regel worden
   platgedrukt. De rest breekt gewoon af — deze tabellen bevatten ook proza. */
th:first-child,td:first-child{min-width:9rem}

/* --- Uitgelichte blokken --------------------------------------------------- */
.uitgelicht,.let-op{
  margin-block:var(--s6);padding:var(--s5);
  border-radius:var(--rond);border:1px solid var(--lijn);
  background:var(--vlak);
}
.uitgelicht{border-left:4px solid var(--accent);background:var(--accent-licht);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--lijn))}
.let-op{border-left:4px solid var(--tweede)}
.uitgelicht>:first-child,.let-op>:first-child{margin-top:0}
.uitgelicht>:last-child,.let-op>:last-child{margin-bottom:0}
.uitgelicht h3,.let-op h3{margin-top:0}

/* --- Kruimelpad ----------------------------------------------------------- */
.kruimels{background:var(--vlak-2);border-bottom:1px solid var(--lijn);
  font-family:var(--font-ui);font-size:var(--klein)}
.kruimels .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding-block:.6rem;color:var(--grijs)}
.kruimels a{color:var(--accent-donker)}
.kruimels [aria-current]{color:var(--inkt);font-weight:600}

/* --- Statusblok -----------------------------------------------------------
   Alleen op regelgevings- en prijspagina's: wanneer is dit voor het laatst
   gecontroleerd en waar. Elders op de site staan geen datumstempels. */
.statusblok{
  margin:0 0 var(--s6);padding:var(--s4) var(--s5);
  background:var(--vlak-2);border-left:4px solid var(--accent);
  border-radius:0 var(--rond) var(--rond) 0;
  font-size:var(--klein);line-height:1.55;color:var(--grijs);max-width:var(--maat);
}
.statusblok b{color:var(--inkt)}
.statusblok time{font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Voor/na ------------------------------------------------------------- */
.voor-na{display:grid;gap:var(--s4);margin-block:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.voor-na .figuur{margin:0}
.voor-na figcaption{font-family:var(--font-ui);font-weight:700;color:var(--inkt)}

/* --- CTA-blok in de tekst ------------------------------------------------- */
.cta-blok{background:var(--accent-donker);color:#fff;padding-block:var(--band)}
.cta-blok .wrap{display:grid;gap:var(--s4);justify-items:start}
.cta-blok h2,.cta-blok h3{color:#fff;margin:0}
.cta-blok p{color:color-mix(in srgb,#fff 82%,var(--accent));margin:0;max-width:38rem}
.cta-blok .btn{border-color:#fff;color:#fff}
.cta-blok .btn:hover{background:#fff;color:var(--accent-donker)}
.cta-blok .btn-primair{background:#fff;color:var(--accent-donker);border-color:#fff;box-shadow:none}
.cta-blok .btn-primair:hover{background:var(--accent-licht);color:var(--accent-donker)}

/* --- Veelgestelde vragen --------------------------------------------------- */
.faq-sectie{padding-block:var(--band);background:var(--vlak-2);
  border-top:1px solid var(--lijn)}
.faq-sectie>.wrap>h2{margin-top:0}
.faq{display:grid;gap:var(--s2);margin-top:var(--s5)}
.faq-antwoord p{max-width:var(--maat)}
.faq details{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond);
  overflow:hidden;transition:border-color .15s ease;
}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--lijn))}
.faq summary{
  display:flex;align-items:flex-start;gap:var(--s3);cursor:pointer;
  padding:var(--s4) var(--s5) var(--s4) var(--s4);
  font-family:var(--font-ui);font-weight:700;line-height:1.4;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;margin-left:auto;width:1.1rem;height:1.1rem;
  background:var(--accent);
  -webkit-mask:var(--icoon-chevron) center/contain no-repeat;
  mask:var(--icoon-chevron) center/contain no-repeat;
  transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{background:var(--accent-licht)}
.faq-antwoord{padding:0 var(--s5) var(--s4) var(--s4);color:var(--grijs)}
.faq-antwoord>:first-child{margin-top:0}
.faq-antwoord>:last-child{margin-bottom:0}
:root{--icoon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 5.6 9l1.4-1.4 5 5 5-5L18.4 9Z'/%3E%3C/svg%3E")}

/* --- Formulier ------------------------------------------------------------
   Het enige conversiepunt van deze sites. Op brede schermen staat links waarom
   je zou aanvragen en wat er daarna gebeurt, rechts het formulier zelf. */
.form-sectie{padding-block:var(--band);background:var(--accent-licht);
  border-top:1px solid color-mix(in srgb,var(--accent) 20%,var(--lijn))}
.form-in{
  display:grid;align-items:start;
  column-gap:clamp(var(--s5),4vw,var(--s7));row-gap:var(--s5);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  /* Het formulier is hoger dan de tekst ernaast en beslaat beide rijen. Zonder
     deze regel verdeelt de browser die overhoogte over rij 1 én 2, en valt er
     een gat tussen de introtekst en de bewijsregels eronder. Alle rek naar de
     tweede rij: de tekst blijft dan één blok. */
  grid-template-rows:auto 1fr;
}
.form-kop{grid-column:1;grid-row:1}
.form-steun{grid-column:1;grid-row:2}
.form-kaart,.form-frame{grid-column:2;grid-row:1 / span 2}
.form-kop h2{margin-top:0}
.form-intro{color:var(--grijs);margin-bottom:0}
.form-kaart{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond);
  padding:clamp(var(--s5),3vw,var(--s6));box-shadow:var(--schaduw);
}
.form-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.veld{margin-block:var(--s3)}
.veld label{display:block;margin-bottom:.3rem;
  font-family:var(--font-ui);font-size:.9rem;font-weight:700;color:var(--inkt)}
.veld input,.veld select,.veld textarea{
  width:100%;padding:.68rem .8rem;font:inherit;font-size:1rem;
  color:var(--inkt);background:var(--vlak);
  border:1.5px solid var(--lijn-sterk);border-radius:var(--rond-klein);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.veld input:hover,.veld select:hover,.veld textarea:hover{border-color:var(--accent)}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  border-color:var(--accent);outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);
}
.veld textarea{resize:vertical;min-height:6.5rem}
.veld-consent{margin-top:var(--s4)}
.veld-consent label{
  display:flex;gap:var(--s3);align-items:flex-start;
  font-weight:400;font-size:var(--klein);line-height:1.5;color:var(--grijs);
  font-family:var(--font-body);cursor:pointer;
}
.veld-consent input{width:1.15rem;height:1.15rem;flex:0 0 auto;margin-top:.15rem;
  accent-color:var(--accent)}
.veld-verstopt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.veld-knop{margin:var(--s5) 0 0}
.form-kaart .btn-groot{width:100%}
/* Leeg neemt de melding geen ruimte in — anders staat er een gat onder de knop. */
.form-melding{font-family:var(--font-ui);font-weight:700;margin:0}
.form-melding:not(:empty){margin-top:var(--s4)}
.form-melding.is-fout{color:var(--fout)}
.form-melding.is-ok{color:var(--ok)}

/* Is de aanvraag binnen, dan verdwijnt het formulier en is deze bevestiging het
   enige wat er nog staat. De kaart maakt dan plaats: het bevestigingsvlak ís
   de kaart, zodat de tekst de volle breedte houdt. */
.form-kaart.is-verstuurd{padding:0;background:transparent;border-color:transparent;box-shadow:none}
.form-kaart.is-verstuurd .form-melding{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s4);align-items:start;
  margin:0;padding:clamp(var(--s5),3vw,var(--s6));font-size:var(--lead);line-height:1.45;
  background:var(--vlak);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--lijn));
  border-radius:var(--rond);box-shadow:var(--schaduw);
}
.form-kaart.is-verstuurd .form-melding::before{
  content:"";width:2rem;height:2rem;flex:0 0 auto;
  background:var(--accent);
  -webkit-mask:var(--icoon-vink) center/contain no-repeat;
  mask:var(--icoon-vink) center/contain no-repeat;
}
.form-noot{font-size:var(--mini);color:var(--grijs);line-height:1.5;margin:var(--s4) 0 0}
/* Formulier van een leadplatform. De binnenkant is niet van ons, dus we geven
   het blok een vaste gereserveerde hoogte: anders krijg je op een telefoon een
   schuifbalk binnen een schuifbalk, of een leeg vlak dat later dichtklapt.
   Levert de partner postMessage-hoogtes, dan past het script de hoogte aan. */
.form-frame{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond);
  box-shadow:var(--schaduw);overflow:hidden;color-scheme:light;
}
.form-frame iframe{
  display:block;width:100%;border:0;
  height:var(--frame-hoogte,54rem);
  transition:height .2s ease;
}

.form-vertrouwen{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s3);font-size:var(--klein);color:var(--grijs);
  max-width:var(--maat);
}
.form-vertrouwen li{display:flex;gap:.5rem;align-items:flex-start;margin:0}
.form-vertrouwen li::before{
  content:"";flex:0 0 auto;width:1rem;height:1rem;margin-top:.22rem;
  background:var(--accent);
  -webkit-mask:var(--icoon-vink) center/contain no-repeat;
  mask:var(--icoon-vink) center/contain no-repeat;
}
.cf-turnstile{margin-top:var(--s4)}

/* --- Voet ---------------------------------------------------------------- */
/* Eindigt de pagina op een gekleurde band, dan sluit de voet daar direct op aan;
   eindigt hij op gewone tekst, dan zorgt de regel hieronder voor witruimte. */
main>*:last-child:not(.section):not(.vol):not(.hero){margin-bottom:var(--s7)}
.site-footer{
  padding-block:var(--s7) var(--s5);
  background:var(--inkt);color:color-mix(in srgb,#fff 78%,var(--inkt));
  font-size:var(--klein);line-height:1.6;
}
.site-footer a{color:#fff;text-decoration-color:color-mix(in srgb,#fff 45%,transparent)}
.footer-kolommen{display:grid;gap:var(--s5);
  grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}
.footer-titel{
  font-family:var(--font-ui);font-size:var(--mini);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:#fff;margin:0 0 var(--s3);
}
.footer-nav{list-style:none;margin:0;padding:0}
.footer-nav li{margin-block:.35rem}
.disclosure{margin:0;max-width:36rem}
.footer-klein{margin-top:var(--s2)}
.footer-onder{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid color-mix(in srgb,#fff 15%,transparent);
  font-size:var(--mini);
}

/* --- Vaste actiebalk op mobiel --------------------------------------------
   Zodra het formulier zelf in beeld komt schuift de balk weg: hij is dan
   overbodig en zou de verstuurknop bedekken. Zonder JavaScript blijft hij
   gewoon staan — dan is hij nog altijd de snelste route naar het formulier. */
.mobiele-cta{display:none;transition:transform .2s ease}
.mobiele-cta.is-weg{transform:translateY(115%);pointer-events:none}

/* --- Secties ------------------------------------------------------------- */
.section{padding-block:var(--band)}

/* ==========================================================================
   Kleine schermen
   ========================================================================== */
/* Het menu klapt eerder in dan de rest van de opmaak: zes rubrieken plus een
   knop en een sitenaam passen pas boven de 1100px naast elkaar. */
@media (max-width:1100px){
  .site-header{position:relative}
  .header-rij{position:relative;gap:var(--s3)}
  .logo-woorden{max-width:none;font-size:.98rem}
  .nav-knop{
    display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
    padding:.5rem .85rem;border:1.5px solid var(--lijn-sterk);
    border-radius:var(--rond-knop);
    font-family:var(--font-ui);font-size:.92rem;font-weight:700;color:var(--inkt);
    /* anders selecteert een tik op een telefoon het woord in plaats van te openen */
    user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  }
  .nav-knop::before{
    content:"";width:1.05rem;height:.75rem;background:currentColor;
    -webkit-mask:var(--icoon-menu) center/contain no-repeat;
    mask:var(--icoon-menu) center/contain no-repeat;
  }
  .nav-schakel{display:block;position:absolute;width:1px;height:1px;
    opacity:0;pointer-events:none;margin:0}
  .nav-schakel:checked~ul{display:flex}
  .nav-schakel:checked+.nav-knop{background:var(--accent);color:var(--accent-op);
    border-color:var(--accent)}
  .nav-schakel:focus-visible+.nav-knop{outline:3px solid var(--accent);outline-offset:2px}
  .hoofdnav ul{
    display:none;position:absolute;top:calc(100% + .55rem);right:0;left:0;
    z-index:60;flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s2);background:var(--vlak);
    border:1px solid var(--lijn);border-radius:var(--rond);
    box-shadow:var(--schaduw-groot);
  }
  .hoofdnav li{border-bottom:1px solid var(--lijn)}
  .hoofdnav li:last-child{border-bottom:0}
  .hoofdnav a{display:block;padding:.7rem .6rem;border-bottom:0}
  .hoofdnav a[aria-current]{color:var(--accent-donker);background:var(--accent-licht);
    border-radius:var(--rond-klein)}
  .nav-cta{padding-top:var(--s2)}
  .nav-cta .btn{width:100%}

  /* Zodra de kop-CTA in het menu verdwijnt, moet de offerteknop elders terug. */
  .mobiele-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    gap:var(--s3);align-items:center;
    padding:.65rem var(--rand) max(.65rem,env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--vlak) 94%,transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--lijn);
  }
  .mobiele-cta span{font-family:var(--font-ui);font-size:var(--klein);
    color:var(--grijs);line-height:1.3;flex:1 1 auto}
  .mobiele-cta .btn{flex:0 0 auto;padding-inline:1rem}
  body{padding-bottom:4.5rem}
  .site-footer{margin-bottom:0}
}

/* De hero wordt één kolom. Tekst blijft bovenaan: de kop en de knop moeten als
   eerste in beeld staan, het beeld is bijzaak. */
@media (max-width:900px){
  .hero-in:has(.hero-media:not(:empty)){grid-template-columns:1fr}
  .hero-media{max-width:36rem;width:100%}
  /* Volgorde op smalle schermen: waarom → invullen → geruststelling. De
     bewijsregels staan dan direct onder de verstuurknop. */
  .form-in{grid-template-columns:1fr;grid-template-rows:none}
  .form-kop,.form-kaart,.form-frame,.form-steun{grid-column:1;grid-row:auto}
  .form-frame iframe{height:var(--frame-hoogte-mobiel,var(--frame-hoogte,68rem))}
  .footer-kolommen{grid-template-columns:1fr 1fr}
  .footer-kolommen>:first-child{grid-column:1/-1}
}

@media (max-width:760px){
  .form-raster{grid-template-columns:1fr}
  .footer-kolommen{grid-template-columns:1fr}
  .kaart-media{margin-inline:calc(var(--s5) * -1)}
  .hero-punten{gap:var(--s2) var(--s4)}
  /* Het toestemmingsvinkje is juridisch het zwaarste element van het formulier
     en moet met een duim te raken zijn. */
  .veld-consent input{width:1.45rem;height:1.45rem;margin-top:.05rem}
  .veld-consent label{font-size:.95rem}
}

/* Een banderol van 21/9 wordt op een telefoon een streepje; daar staat het
   beeld beter iets hoger. De bronfoto blijft dezelfde, hij snijdt alleen bij. */
@media (max-width:600px){
  main>.figuur img,main>.figuur .foto-plaats{aspect-ratio:16/9}
}

/* --------------------------------------------------------------------------
   Tabellen op een telefoon: elke rij wordt een kaartje met de eerste cel als
   kop en daaronder label-waardeparen. Zo lees je een prijs zonder zijwaarts te
   schuiven. Het kolomlabel komt uit `data-kop`, dat de bouwstap toevoegt.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .tabel-scroll{overflow-x:visible}
  table{display:block;border:0;background:transparent;border-radius:0;margin-block:var(--s5)}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  tbody{display:block}
  tbody tr{
    display:block;margin-bottom:var(--s3);padding:var(--s4);
    background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond);
  }
  tbody tr:nth-child(even){background:var(--vlak)}
  tbody td{
    display:grid;grid-template-columns:minmax(7rem,42%) 1fr;gap:var(--s2) var(--s3);
    padding:.35rem 0;border-bottom:0;align-items:baseline;
  }
  /* Kleine kapitalen zouden hier over twee regels breken en het label zwaarder
     maken dan de waarde ernaast; in gewone schrijfwijze past het meestal op één. */
  tbody td::before{
    content:attr(data-kop);
    font-family:var(--font-ui);font-size:var(--klein);font-weight:700;
    color:var(--grijs);line-height:1.4;
  }
  /* De eerste cel is het onderwerp van de rij en wordt de kop van het kaartje. */
  tbody td:first-child{
    display:block;font-family:var(--font-kop);font-weight:var(--kop-gewicht);
    font-size:1.05rem;line-height:1.25;min-width:0;
    padding:0 0 var(--s2);margin-bottom:var(--s2);
    border-bottom:1px solid var(--lijn);
  }
  tbody td:first-child::before{display:none}
  tbody td:last-child{padding-bottom:0}
}

@media (max-width:480px){
  /* Knoppen van ongelijke breedte onder elkaar oogt rafelig; op smalle
     schermen lopen ze door tot de rand. */
  .hero .knoppen .btn,.cta-blok .btn{width:100%}
}

@media (max-width:420px){
  .mobiele-cta span{display:none}
  .mobiele-cta .btn{flex:1 1 auto}
}

/* ==========================================================================
   Voorkeuren en print
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .kaart:hover{transform:none}
}

@media print{
  .site-header,.mobiele-cta,.form-sectie,.cta-blok,.foto-plaats{display:none}
  body{background:#fff;color:#000;padding-bottom:0}
  main{display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
}

/* ==========================================================================
   THEMA A — "blok & balk"  ·  isolatiecoevorden.nl
   Slabserif-koppen (Bitter) op een nuchtere grotesk (Libre Franklin), diep
   bosgroen met messing, rechte hoeken. Gereedschapskist-logica: alles is een
   blok, niets is rond. Past bij de maatregel-gedreven opbouw.
   ========================================================================== */
:root{
  --accent:#2F5D3A; --accent-donker:#234A2C; --accent-licht:#E7EEE6; --accent-op:#FFFFFF;
  /* Messing, licht genoeg gehouden voor 5,1:1 contrast met de donkere tekst
     die erop staat — de vorige tint haalde 4,18 en zakte daarmee onder de norm. */
  --tweede:#B8853A; --tweede-donker:#835A1E; --tweede-op:#1B1F18;

  --papier:#F3F2EC; --vlak:#FFFFFF; --vlak-2:#EBEAE1;
  --inkt:#1F241C; --grijs:#585F52; --lijn:#DCD9CD; --lijn-sterk:#BFBBAB;
  --fout:#8C2F1F; --ok:#2F5D3A;

  --rond:2px; --rond-klein:2px; --rond-knop:2px; --beeld-rond:0;
  --schaduw:0 2px 0 0 rgba(31,36,28,.12);
  --schaduw-groot:8px 8px 0 0 rgba(47,93,58,.14);

  --font-body:"Libre Franklin","Segoe UI",Arial,sans-serif;
  --font-kop:"Bitter",Georgia,"Times New Roman",serif;
  --font-ui:"Libre Franklin","Segoe UI",Arial,sans-serif;
  --kop-gewicht:700; --kop-transform:none; --kop-spatie:-.005em;
}

/* Koppen krijgen een dragende balk links — het bouwmotief van dit thema. */
h2{padding-left:.7rem;border-left:7px solid var(--accent)}
h3{padding-left:.7rem;border-left:3px solid var(--tweede)}

.logo-merk{border-radius:0}
.site-header{border-bottom:3px solid var(--accent)}

.hero{background:var(--vlak);border-top:9px solid var(--accent);
  border-bottom:1px solid var(--lijn)}
.hero h1{border-left:0;padding-left:0}

/* Kaarten als gestapelde blokken met een gekleurde flank. */
.kaart{border-left:6px solid var(--accent);border-radius:0}
.kaart:hover{border-left-color:var(--tweede);transform:none;
  box-shadow:5px 5px 0 0 color-mix(in srgb,var(--accent) 16%,transparent)}
.kaarten{gap:1px;background:var(--lijn)}
.kaarten .kaart{border:0;border-left:6px solid var(--accent)}

.stappen li{border-radius:0;border-left:6px solid var(--tweede)}
.stappen li::before{border-radius:0}

table{border-radius:0}
thead th{border-radius:0}

.faq details{border-radius:0;border-left:4px solid var(--lijn-sterk)}
.faq details[open]{border-left-color:var(--accent)}

.form-kaart{border-radius:0;border-top:5px solid var(--accent)}
.cijfer{border-radius:0;border-top:4px solid var(--tweede)}
.uitgelicht,.let-op{border-radius:0}
.foto-plaats{border-radius:0}
.btn{border-radius:0}