/* ==========================================================================
   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 E — "held"  ·  heldenvanzeist.nl
   Fraunces-koppen (zachte, karaktervolle serif) boven Work Sans, bosgroen met
   amber, royale witruimte en een schildmotief. Dit is de enige site met een
   échte merknaam in plaats van een dienstnaam, dus die mag ook zo ogen.
   ========================================================================== */
:root{
  --accent:#3E5C3B; --accent-donker:#2C452A; --accent-licht:#EAF0E5; --accent-op:#FFFFFF;
  --tweede:#BE7A1F; --tweede-donker:#946015; --tweede-op:#241F16;

  --papier:#FAF7F0; --vlak:#FFFFFF; --vlak-2:#F1ECE1;
  --inkt:#25221B; --grijs:#665F52; --lijn:#E3DBCB; --lijn-sterk:#C4B99F;
  --fout:#9E3B2A; --ok:#3E5C3B;

  --rond:14px; --rond-klein:8px; --rond-knop:8px; --beeld-rond:14px;
  --schaduw:0 2px 10px rgba(37,34,27,.08);
  --schaduw-groot:0 20px 48px rgba(37,34,27,.15);

  --font-body:"Work Sans","Segoe UI",Arial,sans-serif;
  --font-kop:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:"Work Sans","Segoe UI",Arial,sans-serif;
  --kop-gewicht:600; --kop-transform:none; --kop-spatie:-.012em;
}

/* Meer lucht dan de andere thema's: dit merk mag ruimte innemen. */
:root{--band:clamp(3.25rem,6.5vw,5.5rem)}
h2{margin-block:2.3em .7em}
body{line-height:1.72}

/* Het schild keert terug als kopmotief, logo-vorm en opsommingsteken. */
h2::before{
  content:"";display:inline-block;width:.72em;height:.85em;margin-right:.5rem;
  background:var(--tweede);vertical-align:-.08em;
  clip-path:polygon(50% 0,100% 20%,100% 62%,50% 100%,0 62%,0 20%);
}
.logo-merk{clip-path:polygon(50% 0,100% 20%,100% 62%,50% 100%,0 62%,0 20%);
  border-radius:0;width:2.4rem;height:2.6rem}
.hero-punten li::before{border-radius:0;
  clip-path:polygon(50% 0,100% 20%,100% 62%,50% 100%,0 62%,0 20%);
  box-shadow:none}

.site-header{background:color-mix(in srgb,var(--papier) 90%,transparent);
  border-bottom:1px solid var(--lijn)}

.hero{background:
  radial-gradient(90% 120% at 15% 0%,var(--vlak) 0%,transparent 70%),
  var(--accent-licht);
  border-bottom:1px solid var(--lijn)}
.hero .lead{font-size:clamp(1.14rem,1.05rem + .4vw,1.36rem)}

.kaart{background:var(--vlak);border-color:var(--lijn)}
.kaart:hover{border-color:var(--tweede)}
.stappen li::before{border-radius:var(--rond-klein);background:var(--tweede);
  color:var(--tweede-op)}
.stappen li{background:var(--vlak)}

thead th{background:var(--accent);color:var(--accent-op);
  text-transform:none;letter-spacing:0;font-size:.95rem;border-bottom:0}
tbody tr:nth-child(even){background:var(--vlak-2)}

.faq-sectie{background:var(--vlak-2)}

/* Als enige thema staat het formulierblok hier op een donker vlak. De hele
   linkerkolom moet dan omkleuren — anders valt grijze tekst weg in het groen. */
.form-sectie{background:var(--accent-donker);border-top:0}
.form-kop h2{color:#fff}
.form-intro,.form-vertrouwen,.form-noot{color:color-mix(in srgb,#fff 82%,var(--accent))}
.form-kop a,.form-steun a{color:#fff;text-decoration-color:color-mix(in srgb,#fff 55%,transparent)}
.form-vertrouwen li::before{background:var(--tweede)}
.cijfer{background:var(--vlak)}
.cijfer b{font-family:var(--font-kop)}