/* ============================================================
   DAKGENOTEN — één stylesheet voor de hele site.

   Kleuren en lettertypen komen uit Dakgenoten Brandbook.pdf en zijn bindend.
   De vorm eromheen (hoekwaarden, randen, schaduwen, focusstaten) is dat niet:
   dat was een stijlkeuze uit een eerdere bouwronde (PROMPT-IDENTITEIT.md,
   "plat en stevig, geen zwevende schaduwen"), en is op besluit van de
   eigenaar op 05-08-2026 herzien naar een schoner, moderner uitgangspunt —
   zachtere randen, groter afgerond, een subtiele schaduw voor kaarten in
   plaats van nul, en een zachte focusgloed in plaats van een harde rand.
   Merkidentiteit gaat over de teksten en de kleuren, niet over hoe de code
   randen tekent.

   Let op bij het aanpassen van groen: het felgroen #4AAA3C haalt
   met witte tekst 2,96:1 en is dus onleesbaar. Alles waar tekst
   op staat gebruikt --accent (#146B3A, wit erop 6,57:1). Het
   felgroen is er voor accenten op donkere vlakken en voor iconen.
   ============================================================ */

:root{
  /* Vier duren en twee curves, meer niet. Elke afwijking maakt de site
     onrustig, en een tweede curve die net iets anders remt zie je niet
     maar voel je wel. */
  --duur-tik:120ms;   /* reactie op aanraken: hover, focus, indrukken */
  --duur-kort:200ms;  /* kleine staten: menu, doorkleuren */
  --duur-mid:320ms;   /* openen en sluiten van inhoud */
  --duur-intro:480ms; /* binnenkomen bij scrollen */
  --soepel:cubic-bezier(.16,1,.3,1); /* remt af, voor binnenkomen */
  --gelijk:cubic-bezier(.4,0,.2,1);  /* voor staten en verplaatsen */

  --accent:#146B3A;
  --accent-dark:#0E5230;
  --accent-bright:#4AAA3C;
  --accent-tint:#EAF3E4;
  --dark:#1F1F1D;
  --dark-2:#2E2E2A;
  --text:#1F1F1D;
  --muted:#5B5B53;
  --bg:#FFFFFF;
  --bg-soft:#F7F6F1;
  --border:#DCDCD3;
  /* Was #C7C7BC: haalde maar 1,70:1 op wit en 1,57:1 op zand, tegen de 3:1
     die WCAG 1.4.11 eist voor de omtrek van een bedieningselement (velden,
     keuzetegels, de hamburger). Gemeten 10-08-2026. #8F8F84 is de lichtste
     waarde die aan beide kanten boven 3:1 blijft (3,27:1 wit, 3,02:1 zand).
     Daarvóór stond hier #8A8A80 (3,48/3,22), teruggebracht omdat dat als een
     dik Windows-kader oogde — dat argument geldt hier niet meer, dit is de
     ondergrens, geen stijlkeuze. */
  --border-strong:#8F8F84;

  /* ---------- Typografische ladder ----------
     Zes rollen en niets daarbuiten. De maten staan hier één keer en
     schuiven op desktop mee (zie de :root in de media query onderaan),
     zodat een blokkop overal even groot is in plaats van per sectie
     opnieuw gekozen. Wie een maat nodig heeft die hier niet staat,
     heeft een rol te pakken die we nog niet hebben. */
  --type-hero:34px;
  --type-sectie:26px;
  --type-blok:19px;
  --type-lede:18px;
  --type-brood:17px;
  --type-bijschrift:14px;
  /* Getallen die als vorm meedoen (prijzen, het telefoonnummer). Geen kop,
     dus een eigen rung; hij groeit op desktop niet mee, anders wordt een
     prijs groter dan de sectiekop erboven. */
  --type-getal:26px;
  --lh-hero:1.1;
  --lh-kop:1.2;
  --lh-brood:1.6;
  /* Boven 34 px vallen de Poppins-letters uit elkaar; daaronder niet. */
  --sper-kop:-0.02em;

  /* ---------- Twee hoekwaarden ----------
     10 px voor kleine dingen (velden, knoppen, iconen), 18 px voor vlakken
     (kaarten, foto's, banden). Was 4/12: te scherp om zacht te ogen. Rond
     blijft alleen voor wat echt rond is: het logo en het bolletje in de
     badge. */
  --hoek:10px;
  --hoek-vlak:18px;
  --hoek-rond:999px;

  /* ---------- Schaduw ----------
     Twee lagen, zoals een kaart in het echt licht opvangt: een fijne rand
     vlak eronder en een brede, zwakke gloed eromheen. Nooit los, altijd
     samen — één regel, niet ergens een eigen box-shadow verzinnen. --zweef
     is de hover-versie, iets nadrukkelijker, voor wat je kunt aanklikken. */
  --schaduw-kaart:0 1px 2px rgba(31,31,29,.05), 0 12px 28px -6px rgba(31,31,29,.12);
  --schaduw-zweef:0 2px 6px rgba(31,31,29,.06), 0 16px 36px -8px rgba(31,31,29,.16);

  --font-head:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-body:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
/* De onderrand hoort niet de vaste balk te zijn: zonder deze regel landde een
   ankersprong, en vooral een Tab-sprong, met het veld precies achter de
   mobiele balk van 58 px. */
html{scroll-behavior:smooth;scroll-padding-bottom:76px;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  font-size:var(--type-brood);
  line-height:var(--lh-brood);
  overflow-x:hidden;
  width:100%;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 20px;}
section{padding:56px 0;}
h1,h2,h3{color:var(--dark);line-height:var(--lh-kop);font-family:var(--font-head);}
h2{font-size:var(--type-sectie);font-weight:700;margin-bottom:10px;}
h3{font-size:var(--type-blok);font-weight:700;}
.eyebrow{
  color:var(--accent);font-weight:700;font-size:var(--type-bijschrift);
  letter-spacing:0.06em;text-transform:uppercase;margin-bottom:8px;
}
/* ---------- Sectieritme ----------
   Wit en zand wisselen elkaar af, met één haarlijn op de overgang. Dit
   stond twaalf keer als inline stijl op een <section>; per pagina
   overgetikt loopt zo'n ritme vanzelf uit de pas. */
.sectie-zand,.sectie-wit,.sectie-tint{border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;}
.sectie-zand{background:var(--bg-soft);}
/* Derde vlak naast wit/zand, voor een sectie die zich mag onderscheiden
   zonder meteen naar de donkere band te grijpen (verzoek eigenaar,
   12-08-2026: meer dan alleen wit/zand afwisselen). Lichtgroen, dezelfde
   tint als de vinkjes-achtergrond in .step-num--zacht, hier voor het eerst
   als vlak van een hele sectie. */
.sectie-tint{background:var(--accent-tint);}
/* Tegen het groene slotvlak of de donkere voet voegt een haarlijn niets
   toe: daar doet de kleurwissel de scheiding al. */
.sectie-zand:last-child,.sectie-wit:last-child,.sectie-tint:last-child{border-bottom:none;}
/* Klein rond merkpunt op de haarlijn: geen zware sierlijn, maar net genoeg
   om een sectiewissel een moment van rust te geven in plaats van een kale
   rechte streep. De witte ring eromheen ligt op --bg: op de paar plekken
   waar een donkere sectie eraan voorafgaat (nooit bij deze twee klassen)
   zou dat opvallen, maar dat komt hier niet voor. */
.sectie-zand::before,.sectie-wit::before,.sectie-tint::before{
  content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:var(--hoek-rond);background:var(--accent-bright);
  box-shadow:0 0 0 4px var(--bg);
}
.lede{color:var(--muted);font-size:var(--type-lede);max-width:640px;margin-bottom:32px;}
:where(a,button,summary,input,textarea):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}
/* Op de donkere en groene vlakken haalt de groene ring geen 3:1; wit wel.
   Behalve op de witte eilanden binnen die vlakken: de formulierkaart en het
   belblok. Daar viel de witte ring weg tegen wit. */
.hero :where(a,button):not(.form-card *):focus-visible,
.usp-section :where(a,button):not(.trust-phone *):focus-visible,
footer a:focus-visible{
  outline-color:#fff;
}
.overslaan{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--hoek) 0;z-index:100;font-weight:700;
}
.overslaan:focus{left:0;}

/* De kop is sticky, dus een ankersprong landt eronder. Zonder dit
   verdwijnt de kop van de formulierkaart achter de balk. */
[id]{scroll-margin-top:76px;}
@media (min-width:880px){ [id]{scroll-margin-top:92px;} }

/* ---------- Kop ----------
   Een zwevende pil in plaats van een volle balk: .site-header zelf heeft
   geen achtergrond en is alleen de sticky drager met ruimte eromheen; de
   pil is .header-inner. Elke pagina begint met een donkere .hero (zie
   verderop), dus de pil zwevend wit erover is een bewuste, consequente
   combinatie op de hele site — geen speciale styling per pagina nodig. */
.site-header{position:sticky;top:0;z-index:50;padding:14px 14px 0;}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:8px 10px 8px 22px;max-width:1080px;margin:0 auto;
  background:#fff;border-radius:var(--hoek-rond);box-shadow:var(--schaduw-zweef);
}
.header-brand{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0;}
/* Het bronbestand is bijgesneden (gereedschap/beeld-optimaliseren.js),
   dus geen uitsnede-trucs meer nodig. */
.logo-venster{display:flex;align-items:center;min-width:0;flex-shrink:0;}
/* flex-shrink:0 op het beeld zelf is de kern van de fix: zonder dit mag
   flexbox de breedte van het logo laten krimpen terwijl height:40px vast
   blijft staan, en dan wordt het logo op smalle schermen zichtbaar
   platgedrukt. De hoogte, niet de breedte, is en blijft de vaste maat. */
.logo-venster img{height:40px;width:auto;flex-shrink:0;}

/* Altijd het woordmerk (11-08-2026, was eerder alleen het ronde merk onder
   480px — zag er als een leeg gat uit naast de bel-knop). Onder 480px een
   kleinere hoogte (26px i.p.v. 40px, het woordmerk schaalt mee want alleen
   height staat vast): op 375px blijft dan nog altijd zeker 55px speling over
   naast de bel-knop en de hamburger, ruim boven de 12px die eerder op een
   echt toestel al te krap bleek. */
@media (max-width:479px){
  .logo-venster img{height:32px;}
}
.hoofdmenu{display:none;}
.hoofdmenu ul{list-style:none;display:flex;align-items:center;gap:26px;}
.hoofdmenu a{font-weight:600;font-size:var(--type-bijschrift);color:var(--dark);padding:8px 0;display:inline-block;}
/* De enige inset-schaduw op de site, en geen diepte-effect: dit is een
   getekende lijn onder het actieve menu-item. Een border zou de items
   verspringen op hover, een pseudo-element zou een extra laag kosten.
   De mobiele menulaag hangt aan dezelfde regel: daar stond aria-current wel in
   de HTML maar was er niets te zien. Alleen de actieve staat, geen hover: die
   laag wordt met een vinger bediend. */
.hoofdmenu a:hover,.hoofdmenu a:focus-visible,.hoofdmenu a[aria-current="page"],
.menulaag a[aria-current="page"]{
  box-shadow:inset 0 -2px 0 var(--accent);
}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* ---------- Bel/WhatsApp-knop in de kop ----------
   Eén <details>: het onthullingspatroon van .vraag hergebruikt, dus geen
   nieuwe JavaScript. Belangrijk verschil met .vraag: het menu hangt hier
   los boven de inhoud (position:absolute), niet inline ertussen. */
/* flex-shrink:1 en niet 0: bij een afgedwongen grotere systeemletter
   (getest 14 t/m 24 px minimumletter) duwde deze knop eerder de hamburger
   letterlijk buiten de afgeronde kop — logo en hamburger staan zelf bewust
   op flex-shrink:0 (zie hierboven), dus moest hier iets kunnen meegeven.
   min-width:0 is nodig om dat krimpen ook echt toe te staan: een flex-item
   is anders nooit smaller dan zijn eigen inhoud. Gemeten 10-08-2026. */
.header-contact{position:relative;flex-shrink:1;min-width:0;}
.header-contact-knop{
  display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  background:var(--accent);color:#fff;font-weight:700;font-size:var(--type-bijschrift);
  padding:11px 16px;border-radius:var(--hoek-rond);white-space:nowrap;
  transition:background var(--duur-tik) var(--gelijk);
}
.header-contact-knop:hover{background:var(--accent-dark);}
.header-contact-knop::-webkit-details-marker{display:none;}
.header-contact-knop svg{width:17px;height:17px;flex-shrink:0;}
.header-contact-lang{display:none;}
/* Het logo wint de ruimte op mobiel: de knop zelf iets krapper (minder
   zijruimte, kleinere letter) in plaats van dat er ergens iets moet gaan
   krimpen dat niet mag krimpen (header-brand en header-actions staan allebei
   op flex-shrink:0). Stond eerst op max-width:400px, "de kleinste schermen":
   gemeten op een echt toestel (07-08-2026, gemeld door de eigenaar) bleek
   de knop op zijn gewone maat bij bredere telefoons dan dat — 393 tot 430 px
   is een heel gewone Android-breedte — al buiten de afgeronde kop uitstak,
   terwijl dat in de smallere emulator-preset van de browser (375 px) niet
   zichtbaar was. Nu geldt de krappere maat overal onder 880 px, tot waar de
   hamburgerknop toch verdwijnt en de volledige tekst het overneemt. */
@media (max-width:879px){
  .header-contact-knop{padding:9px 12px;font-size:12px;gap:6px;}
  .header-contact-knop svg{width:15px;height:15px;}
}
/* Laatste vangnet bij weinig ruimte: de tekst krimpt weg met puntjes in
   plaats van dat de knop zijn eigen breedte afdwingt en er iets anders
   moet toegeven. min-width:0 laat de ellipsis daadwerkelijk aangrijpen —
   een flex-item is anders nooit smaller dan zijn tekst. */
@media (max-width:480px){
  .header-contact-kort{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
}
@media (min-width:880px){
  .header-contact-kort{display:none;}
  .header-contact-lang{display:inline;}
}
.header-contact-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  display:flex;flex-direction:column;gap:2px;min-width:220px;
  background:#fff;border:1px solid var(--border);border-radius:var(--hoek-vlak);
  box-shadow:var(--schaduw-zweef);padding:8px;
}
.header-contact-menu a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--hoek);font-weight:600;font-size:var(--type-bijschrift);color:var(--dark);
}
/* Hover en focus stonden hier op één regel mét outline:none. Daardoor had een
   toetsenbordgebruiker alleen een kleurwissel over: 1,14:1 op de achtergrond en
   2,51:1 op de tekst, allebei onder de 3:1 die PROMPT-IDENTITEIT de enige harde
   grens noemt. En de focusstaat was niet te onderscheiden van hover.
   Dit zijn sinds het vervallen van de zwevende WhatsApp-knop de enige twee
   plekken in de kop om te bellen of te appen. */
.header-contact-menu a:hover{
  background:var(--accent-tint);color:var(--accent);
}
.header-contact-menu a:focus-visible{
  background:var(--accent-tint);color:var(--accent);
  outline:none;box-shadow:0 0 0 2px var(--accent);
}
.header-contact-menu svg{width:18px;height:18px;flex-shrink:0;color:var(--accent);}
.menuknop{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--hoek);border:1.5px solid var(--border-strong);
  background:#fff;cursor:pointer;flex-shrink:0;
}
.menuknop svg{width:22px;height:22px;color:var(--dark);}
/* Zonder JavaScript kan de hamburger niets openen (dat regelt site.js) en
   moet hij dus niet doen alsof hij dat kan; deze link naar de voet is dan
   het alternatief. Omgekeerde zichtbaarheid van hetzelfde stukje ruimte. */
html:not(.js) .menuknop{display:none;}
.no-js-menu-link{
  display:none;align-items:center;height:44px;padding:0 16px;
  border-radius:var(--hoek);border:1.5px solid var(--border-strong);
  font-weight:600;font-size:var(--type-bijschrift);color:var(--dark);
}
html:not(.js) .no-js-menu-link{display:flex;}
@media (min-width:880px){ .no-js-menu-link{display:none!important;} }
/* Boven de zwevende WhatsApp-knop (70) en de mobiele balk (60): die
   tekenden anders dwars over het geopende menu heen. */
.menulaag{
  position:fixed;inset:0;z-index:80;background:#fff;
  padding:20px;overflow-y:auto;display:none;
}
.menulaag[data-open]{display:block;}
.menulaag ul{list-style:none;margin-top:24px;}
.menulaag li{border-bottom:1px solid var(--border);}
.menulaag a{display:block;padding:16px 0;font-size:var(--type-blok);font-weight:600;}
.menulaag-kop{display:flex;align-items:center;justify-content:space-between;}
/* Dezelfde knop als de kopbalk, maar hier los in de volle breedte van het
   menu in plaats van naast een logo: vandaar width:fit-content, anders trekt
   .header-contact-knop (display:flex zonder eigen breedte) open tot de volle
   breedte van de menulaag. */
.menulaag-contact{margin-top:20px;width:fit-content;}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* 18 px zijruimte en niet 26: de knoptekst is overal dezelfde en past op
     360 px binnen de formulierkaart maar net op één regel. Op desktop mag
     hij weer ruimer staan. */
  min-height:52px;padding:14px 18px;border-radius:var(--hoek);
  font-weight:700;font-size:var(--type-brood);border:none;cursor:pointer;
  width:100%;text-align:center;
  transition:background var(--duur-tik) var(--gelijk);
}
/* Geen gloed onder de knop: diepgroen op wit heeft geen schaduw nodig, en
   een zwevende knop is de vormtaal van een softwareproduct. */
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover,.btn-primary:focus-visible,.btn-primary:active{background:var(--accent-dark);}
.btn-outline{background:#fff;color:var(--dark);border:2px solid var(--dark);}
.btn-row{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px;}
/* Eén-knops .btn-row die gecentreerd moet staan (dakcheck-cta.njk). De
   gewone .btn-row is gemaakt voor een linkse hero met meerdere knoppen: op
   desktop wordt hij flex-direction:row zonder max-width (zie media query
   onderaan), zodat twee knoppen naast elkaar passen. Met maar één knop erin
   vult de rij dan de volle breedte van de gecentreerde container, en bleef
   die ene knop aan de linkerkant hangen — margin:auto alleen (de eerdere
   fix) helpt daar niets, want er ís geen extra ruimte om te verdelen zolang
   de rij zelf de volle breedte inneemt. justify-content:center lost dat wél
   op, in kolom- én rijstand. Bewust een losse klasse, niet de basisregel:
   die aanpassen zou ook de opzettelijk linkse knoppenrij in elke hero naar
   het midden trekken. Gevonden en gefixt 12-08-2026. */
.btn-row--centreer{margin-left:auto;margin-right:auto;justify-content:center;}

/* ---------- Hero ----------
   Echte foto onder een verloop. Het verloop is aan de linkerkant
   zwaarder dan rechts, zodat de tekst leesbaar blijft en de foto
   rechts nog te zien is. */
.hero{
  position:relative;color:#fff;padding:36px 0 20px;
  /* De kopbalk zelf heeft geen achtergrond (alleen de zwevende pil erin), en
     stond hiervóór als los blok in de flow: dat gaf een witte streep boven de
     hero, precies zo hoog als de kop. Nu trekt de hero omhoog tot achter de
     kop (margin-top:-76px, gelijk aan de hoogte die scroll-margin-top hier
     verderop al gebruikt) en komt diezelfde ruimte terug als padding op de
     container erbinnen, zodat de tekst zelf niet verschuift — alleen de foto
     schuift omhoog, tot achter de zwevende pil. */
  margin-top:-76px;
  background:
    linear-gradient(100deg, rgba(20,22,20,0.94) 0%, rgba(20,22,20,0.86) 45%, rgba(20,22,20,0.62) 100%),
    url('/beeld/hero-900.webp');
  /* Sinds de nieuwe herofoto (11-08-2026, twee dakdekkers) staan de mensen
     lager en rechts in beeld dan in de vorige foto, waar 30/35% op afgesteld
     stond. Hoger percentage schuift het zichtbare venster naar beneden. */
  background-size:cover;background-position:center 48%;
}
.hero>.container{padding-top:76px;}
/* Grotere schermen krijgen pas de zware versie. */
@media (min-width:900px){
  .hero{
    background-image:
      linear-gradient(100deg, rgba(20,22,20,0.94) 0%, rgba(20,22,20,0.86) 45%, rgba(20,22,20,0.62) 100%),
      url('/beeld/hero-1800.webp');
  }
}
/* Het merkgroen komt als dunne streep terug boven én onder de hero:
   dat is de lijn die de secties aan elkaar rijgt. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--accent-bright) 0%,var(--accent) 60%,transparent 100%);
}
.hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.hero h1{
  font-size:var(--type-hero);font-weight:800;color:#fff;
  line-height:var(--lh-hero);letter-spacing:var(--sper-kop);
}
.hero p.sub{font-size:var(--type-lede);color:#E8E7E0;max-width:560px;}
.hero-trust-strip{
  display:flex;flex-wrap:wrap;gap:10px 18px;
  font-size:var(--type-bijschrift);font-weight:600;color:#D7D6CD;margin-top:4px;
}
.hero-trust-strip span{display:flex;align-items:center;gap:6px;}
.hero-trust-strip svg{width:16px;height:16px;flex-shrink:0;color:var(--accent-bright);}
/* Voor wie nu water binnen heeft: staat vlak onder de belknop. */
.spoedregel{
  font-size:var(--type-bijschrift);font-weight:600;line-height:1.5;
  color:#D7D6CD;max-width:520px;
  border-left:3px solid var(--accent-bright);padding-left:12px;
}

/* Tekstlink die als vervolgstap leest, niet als knop. */
.tekstlink{
  color:var(--accent);font-weight:700;font-size:var(--type-brood);
  text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:6px 0;
}
/* Harde spatie: bij een link over twee regels zakte de pijl anders alleen
   naar de tweede regel. */
.tekstlink::after{content:"\00a0→";text-decoration:none;}

/* Prijs in een kaart. Selector even zwaar als .problem-card p, anders wint
   die van de prijs en is de eenheid groter dan het bedrag. Eén
   implementatie voor home en /kosten/. */
.problem-card .prijs{
  font-family:var(--font-head);font-weight:800;font-size:var(--type-getal);
  color:var(--dark);line-height:var(--lh-hero);margin:4px 0 6px;
}
/* Het bedrag brak op 360 px middenin ("€ 60 – €" / "120"). De eenheid
   mag wel naar de volgende regel, het bedrag zelf nooit. */
.problem-card .prijs .bedrag{white-space:nowrap;}
.problem-card .prijs .eenheid{font-size:var(--type-bijschrift);font-weight:600;color:var(--muted);white-space:nowrap;}
/* Een prijs in woorden is geen bedrag en past niet op één regel. */
.problem-card .prijs--woorden{font-size:var(--type-blok);}

/* ---------- Formulier ---------- */
/* Was ooit "de enige schaduw op de hele site" — dat vlakke uitgangspunt is
   losgelaten, zie de toelichting bovenin. Deze kaart krijgt --schaduw-zweef
   en niet het gewone --schaduw-kaart: hij ligt letterlijk boven de hero en
   mag dat ook laten zien. */
.form-card{
  background:#fff;border-radius:var(--hoek-vlak);padding:20px 18px 22px;
  box-shadow:var(--schaduw-zweef);
  border:1px solid var(--border);margin-top:28px;
}
.form-card h2{font-size:var(--type-blok);}
.form-sub{color:var(--muted);font-size:var(--type-bijschrift);line-height:1.5;margin:6px 0 0;}
.form-sub strong{color:var(--accent);}
.form-micro{color:var(--muted);font-size:var(--type-bijschrift);margin-bottom:20px;}
.form-micro strong{color:var(--accent);}
/* Twee punten naast elkaar boven een lijntje, zoals de D&S-referentie —
   geen nieuwe schaduw, geen nieuwe hoekwaarde, alleen de bestaande
   accentkleur op tekstgrootte. */
.form-vertrouwen{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border);
}
.form-vertrouwen span{display:flex;align-items:center;gap:6px;color:var(--dark);font-weight:600;font-size:var(--type-bijschrift);}
.form-vertrouwen svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;}
/* Een link in kleine tekst, zonder de pijl en het gewicht van .tekstlink:
   die leest als vervolgstap en dit is een verwijzing. */
.micro-link{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

/* ---------- Formulier in twee stappen ----------
   Zonder JavaScript staat alles gewoon achter elkaar: eerst de tegels
   (data-stap="1"), dan de contactvelden (data-stap="2"), als één doorlopend
   formulier. Verbergen gebeurt pas onder de .js-klasse, die basis.njk
   synchroon vóór de eerste keer tekenen zet — geen flits van een halve
   wizard op een langzaam toestel. Alleen kaarten met data-form-stappen
   (dus: geen vast onderwerp) doen hieraan mee; op een dienstpagina met een
   vast onderwerp bestaat er geen stap 1 en blijft alles gewoon zichtbaar. */
.js .form-card[data-form-stappen] [data-stap="2"]{display:none;}
.js .form-card[data-stap-huidig="2"] [data-stap="1"]{display:none;}
.js .form-card[data-stap-huidig="2"] [data-stap="2"]{display:block;}

/* Puur decoratief, dus pas zichtbaar onder .js: zonder JavaScript is er geen
   "stap" om voortgang van te tonen. Ééń vullingselement met transform:scaleX
   in plaats van een breedte, zodat dit een toegestane animatie is
   (PROMPT-BEWEGING: alleen transform en opacity). */
.form-voortgang{
  display:none;height:4px;border-radius:var(--hoek-rond);
  background:var(--border);overflow:hidden;margin:8px 0 14px;
}
.js .form-voortgang{display:block;}
.form-voortgang-vulling{
  display:block;height:100%;width:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(0.5);
  transition:transform var(--duur-mid) var(--gelijk);
}
.form-card[data-stap-huidig="2"] .form-voortgang-vulling{transform:scaleX(1);}

/* Twee kolommen in plaats van de vrij stromende rij van .keuzes: dat is de
   hoogtewinst van stap 1. De catch-all-tegel spant de volle breedte, zodat
   hij niet als zevende gelijkwaardige optie tussen de andere zes wegvalt. */
/* Samengestelde selector, niet alleen .keuzes--tegels: die staat vóór de
   basisregel .keuzes{display:flex;...} verderop in dit bestand, en bij
   gelijke specificiteit wint de regel die later in het bestand staat. Zonder
   de dubbele klasse hier bleef dit element dus gewoon flex-wrap, nooit een
   raster van twee kolommen. */
.keuzes.keuzes--tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
/* Icoon boven tekst, links uitgelijnd: dezelfde opbouw als de
   probleemkaarten op home, alleen kleiner. De basisregel (.keuze > span)
   blijft gelden voor rand, achtergrond en de checked/focus-staten; hier
   wijzigt alleen de richting en de uitlijning van de inhoud. */
.keuzes--tegels .keuze > span{
  flex-direction:column;align-items:flex-start;justify-content:flex-start;
  text-align:left;gap:6px;min-height:76px;padding:10px;
}
.keuze--breed{grid-column:1/-1;}
/* De catch-all-tegel is breed en één regel, dus weer icoon náást tekst in
   plaats van erboven — anders staat er onder een volle-breedte-tegel een
   hoop lege ruimte naast het icoon. */
.keuze--breed > span{flex-direction:row;align-items:center;min-height:40px;}
.keuze-icoon{
  width:36px;height:36px;border-radius:var(--hoek);background:var(--accent-tint);
  display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;
}
/* 20 px en niet 18: bij de daklekkage-tegel valt het icoon uiteen in een
   los streepje boven een druppel (het pad heeft twee subpaden), en dat is
   bij 18 px te klein om als één geheel te lezen. Iets groter én een dikkere
   lijn (2,25 i.p.v. 2) houdt het leesbaar zonder het pad zelf aan te
   passen — dat pad wordt ook elders op de site hergebruikt. */
.keuze-icoon svg{width:20px;height:20px;stroke-width:2.25;}
.keuze-tekst{font-size:var(--type-bijschrift);font-weight:600;color:var(--dark);}

/* Terug staat vast smal, de verzendknop vult de rest. flex-basis 0% via
   "flex:1" wint van de width:100%/width:auto die .btn per breakpoint al
   zet, dus dit hoeft geen van beide te overschrijven. */
.stap-knoppen{display:flex;gap:12px;margin-top:4px;}
.stap-knoppen .btn-primary{flex:1;}
.stap-knoppen .js-stap-terug{flex:0 0 auto;width:auto;min-width:0;padding-left:16px;padding-right:16px;}

/* Alleen voor schermlezers: de aria-live statusregel bij de voortgangsbalk. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* De drie contactvelden in één vlak. Sinds postcode en plaats eruit gingen
   stond het e-mailveld als enige op een volle regel en viel het formulier uit
   elkaar in losse regels; het vlak maakt van de rij plus het e-mailveld weer
   één blok. De gereserveerde foutruimte onder het e-mailveld is meteen de
   onderrand van het vlak, dus het vlak kost alleen zijn bovenrand. */
/* Het vlak steekt precies zijn eigen padding naar buiten, de kaartrand in. Zo
   houden naam en telefoon exact de breedte die ze zonder vlak ook hadden: met
   28 px binnenmarge erbij paste "0612345678" niet meer in de telefoonkolom
   zodra de kaart smal werd (360 px, en naast de hero rond 940 px). */
.veld-vlak{
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--hoek-vlak);padding:12px;margin:0 -12px 14px;
}
.veld-vlak > .field:last-child{margin-bottom:0;}
.veld-rij{display:flex;flex-wrap:wrap;gap:0 12px;align-items:flex-end;}
.veld-rij .field{flex:1;min-width:0;}
.field{margin-bottom:14px;}
/* :not(.keuze), want een keuzetegel is ook een label binnen een .field, en
   die won van de tegelregel hieronder: elke tegelrij kreeg er zo 6 px
   labelmarge bij die niemand had gevraagd. */
.field label:not(.keuze),.keuzeveld legend{display:block;font-weight:600;font-size:var(--type-bijschrift);margin-bottom:6px;color:var(--dark);}
.field .opt{font-weight:400;color:var(--muted);font-size:var(--type-bijschrift);}
/* De meldingen staan over de volle breedte van het vlak en niet onder het
   losse veld: in een kolom van 149 px werd dezelfde zin vijf regels hoog.
   Was gereserveerd op twee regels (voor naam én telefoon tegelijk fout) plus
   de nu vervallen uitleg bij e-mail, en dat oogde met die uitleg weg als een
   groot leeg gat. Teruggebracht naar één regel: de gangbare situatie (nul of
   één melding) blijft zonder sprong, alleen de zeldzame combinatie van twee
   tegelijk foute velden schuift de knop een fractie — dat weegt niet meer op
   tegen de lege ruimte die het de rest van de tijd kostte. */
.veld-fouten{
  padding:2px 0 6px;
  min-height:calc(6px + 1.5 * var(--type-bijschrift));
}
.veld-fout{color:#B3261E;font-size:var(--type-bijschrift);line-height:1.5;}
.veld-fout:empty{display:none;}
.veld-rij .field{margin-bottom:0;}
.field input[aria-invalid="true"]{border-color:#B3261E;}
.field input,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid var(--border-strong);border-radius:var(--hoek);
  font-size:var(--type-brood);background:#fff;color:var(--text);font-family:inherit;
  transition:border-color var(--duur-tik) var(--gelijk);
}
.field textarea{min-height:80px;resize:vertical;}
/* outline:none mag hier wél, in tegenstelling tot vroeger: de vervanging is
   geen zwakkere staat maar dezelfde twee-lagen-ring als de tegels — een
   scherpe rand van 2 px die zelfstandig 3:1 haalt, plus een zachte gloed
   erbuiten. Zonder die scherpe ring eerst zou alleen de gloed overblijven,
   en die haalt op wit geen 3:1.
   Geen transition op box-shadow (PROMPT-BEWEGING: alleen transform en
   opacity animeren) — de ring verschijnt in één keer, wat voor een
   focusring ook het juiste is: hij moet er meteen staan, niet aanwaaien. */
.field input:focus-visible,.field textarea:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent), 0 0 0 6px var(--accent-tint);
}
/* ---------- Keuzeknoppen "waar gaat het over" ----------
   Zeven knoppen in plaats van een tekstveld met een datalist: die lijst opent
   op iOS Safari niet. De radio zelf is onzichtbaar maar wel focusbaar, dus de
   groep blijft één tabstop met pijltjes ertussen. */
.keuzeveld{border:0;}
.keuzes{display:flex;flex-wrap:wrap;gap:6px;}
/* De tegels groeien mee tot de regel vol is, zodat de rechterrand recht loopt.
   Basis auto en niet 0: met basis 0 past alles op één regel en wordt elke tegel
   even smal en onleesbaar. */
.keuze{position:relative;display:inline-flex;flex:1 1 auto;}
/* min-height terug naar 0: de radio erft die van .field input en werd zo een
   onzichtbaar strookje van 48 px dat over de tegel eronder heen viel. */
.keuze input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0;}
/* Direct kind (>) en niet elke span binnen .keuze: de tegel met icoon
   nestelt .keuze-icoon en .keuze-tekst als spans ín deze span, en zonder de
   ">" ving deze regel die twee ook — dan kregen icoon en tekst allebei de
   volle tegelbreedte, elk als eigen blok onder elkaar. */
.keuze > span{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  width:100%;min-height:44px;padding:8px 12px;
  border:1px solid var(--border-strong);border-radius:var(--hoek);
  font-size:var(--type-bijschrift);font-weight:600;color:var(--dark);
  cursor:pointer;background:#fff;
  transition:background var(--duur-tik) var(--gelijk),border-color var(--duur-tik) var(--gelijk);
}
/* De schaduw bij aanraken komt van een pseudo-element dat in opacity
   oploopt, niet van een getransitioned box-shadow — dat laatste verbiedt
   PROMPT-BEWEGING expliciet (alleen transform en opacity animeren). */
.keuze > span::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:var(--schaduw-kaart);opacity:0;pointer-events:none;
  transition:opacity var(--duur-tik) var(--gelijk);
}
/* Zacht optillen bij aanraken en aanwijzen, niet alleen bij aangevinkt —
   dat is het verschil tussen "hier kun je op klikken" en een vlakke lijst. */
.keuze:hover > span{border-color:var(--accent);}
.keuze:hover > span::after{opacity:1;}
.keuze input:checked+span{
  background:var(--accent-tint);border-color:var(--accent);color:var(--accent);
}
/* Zonder dit smelt het icoonbadge (ook accent-tint) samen met de tegel
   zodra hij aangevinkt is en verdwijnt het icoon zichtbaar in zijn eigen
   achtergrond. */
.keuze input:checked+span .keuze-icoon{background:#fff;}
/* De ring hoort om de knop die je ziet, niet om de radio van 1 px.
   Twee lagen: een scherpe ring van 2 px in --accent voor het contrast
   (dezelfde kleur die elders al op wit 6,57:1 haalt), plus een zachte,
   bredere gloed erbuiten voor het zachte gevoel. Alleen de scherpe ring
   hoeft het contrast te halen; --accent-tint alleen (zonder die ring) haalt
   op wit geen 3:1 en is dus als enige indicator niet genoeg. */
.keuze:has(input:focus-visible) > span{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent), 0 0 0 6px var(--accent-tint);}

/* Het lokveld voor bots. Niet display:none: een deel van de bots slaat
   verborgen velden over, en dan vangt het niets. */
.lokveld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.verzendmelding{
  margin-top:12px;padding:12px 14px;border-radius:var(--hoek);
  background:#FBE9E7;border:1px solid #B3261E;color:#B3261E;
  font-size:var(--type-brood);
}
.verzendmelding a{color:#B3261E;font-weight:700;text-decoration:underline;}
/* De bevestiging komt in de plaats van het formulier te staan, in dezelfde
   kaart, zodat de bezoeker niet hoeft te zoeken of het gelukt is.
   De kleur staat er expliciet bij: in de hero erft alles wit, en dan stond
   deze tekst onzichtbaar op de witte kaart. */
.form-bevestiging{color:var(--text);}
.form-bevestiging h2{font-size:var(--type-blok);margin-bottom:10px;color:var(--dark);}
.form-bevestiging h2:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}
.form-bevestiging p{margin-bottom:12px;}
.form-bevestiging p:last-child{margin-bottom:0;}
.form-bevestiging .vinkje{
  /* Het vinkje is echt rond, dus --hoek-rond en niet 50%: dat leverde op een
     vierkant precies dezelfde cirkel op, maar wel een vierde hoekwaarde. */
  width:44px;height:44px;border-radius:var(--hoek-rond);background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.form-bevestiging .vinkje svg{width:24px;height:24px;}
/* Zolang de aanvraag onderweg is, blijft de knop staan waar hij staat en is
   hij niet nog een keer in te drukken. */
.dg-form button[disabled]{opacity:0.7;cursor:progress;}

/* ---------- Keurmerken ----------
   Was 34 px: op verzoek van de eigenaar (07-08-2026) een flink stuk groter
   gezet, zodat de keurmerken zelf het vertrouwen dragen in plaats van dat
   je moet turen om ze te herkennen. */
.keur{background:#fff;border-bottom:1px solid var(--border);padding:32px 0;}
.keur-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 44px;}
.keur-logos figure{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;}
.keur-logos img{height:56px;width:auto;}
.keur-logos figcaption{font-size:var(--type-bijschrift);color:var(--muted);font-weight:600;letter-spacing:0.02em;}
@media (min-width:880px){
  .keur{padding:40px 0;}
  .keur-logos img{height:68px;}
}
/* Het certificaatnummer onder de naam. Staat er alleen zodra het in
   _data/keurmerken.js is ingevuld; zonder nummer blijft de regel weg. */
.keur-logos .keur-nummer{display:block;font-weight:400;letter-spacing:0;}


/* ---------- Probleemraster ----------
   minmax(0,1fr) en niet 1fr: bij 1fr (= minmax(auto,1fr)) duwt de
   langste inhoud zijn kolom breder en staan de kaarten scheef. */
.problem-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.problem-card{
  position:relative;
  background:#fff;border:1px solid var(--border);border-radius:var(--hoek-vlak);
  padding:16px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--schaduw-kaart);
  cursor:default;transition:border-color var(--duur-tik) var(--gelijk),transform var(--duur-tik) var(--gelijk);
}
/* Dezelfde pseudo-element-truc als bij de tegels: de nadrukkelijkere
   schaduw komt in via opacity, niet via een getransitioned box-shadow. */
a.problem-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:var(--schaduw-zweef);opacity:0;pointer-events:none;
  transition:opacity var(--duur-tik) var(--gelijk);
}
/* Alleen kaarten die ergens heen gaan reageren op aanraking. Focus krijgt
   dezelfde staat als hover, anders mist een toetsenbordgebruiker hem. Iets
   optillen (1 px) plus de nadrukkelijkere schaduw: hetzelfde signaal als de
   tegels in het formulier, consequent doorgetrokken. */
a.problem-card{cursor:pointer;}
a.problem-card:hover,a.problem-card:focus-visible,a.problem-card:active{
  border-color:var(--accent);transform:translateY(-1px);
}
a.problem-card:hover::after,a.problem-card:focus-visible::after,a.problem-card:active::after{opacity:1;}
a.problem-card:focus-visible{outline:none;}
a.problem-card:focus-visible::after{box-shadow:var(--schaduw-zweef), 0 0 0 2px var(--accent);}
.problem-card .icon-wrap{
  width:40px;height:40px;border-radius:var(--hoek);background:var(--accent-tint);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
}
.problem-card .icon-wrap svg{width:22px;height:22px;}
/* Alleen op de zes symptoomkaarten op home (#problemen): duidelijk maken
   dat dit een link is, en de lege ruimte onderin gebruiken die door
   grid-rijen met ongelijke tekstlengte anders leeg bleef. */
.problem-card-cta{
  margin-top:auto;padding-top:6px;
  display:inline-flex;align-items:center;gap:4px;
  color:var(--accent);font-weight:700;font-size:var(--type-bijschrift);
}
.problem-card-cta svg{width:14px;height:14px;flex-shrink:0;transition:transform var(--duur-tik) var(--gelijk);}
a.problem-card:hover .problem-card-cta svg,
a.problem-card:focus-visible .problem-card-cta svg{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){
  .problem-card-cta svg{transition:none;}
}
.problem-card p{color:var(--muted);}
/* Het kolomaantal moet het aantal kaarten delen, anders blijft er in een
   breedteband één kaart alleen achter. Drie kaarten gaan dus van één naar
   drie kolommen en vier kaarten van twee naar vier; de tussenstap staat
   er expliciet in. auto-fit koos dat aantal zelf en verschoof het gat
   alleen naar een andere breedte (gemeten: 512-753 px en 560-879 px, en
   dat laatste raakt 768 px, iPad staand). */
.problem-grid--drie{grid-template-columns:1fr;}
.problem-grid--vier{grid-template-columns:repeat(2,minmax(0,1fr));}
/* Zwaarder dan .problem-grid: het driekolomsraster van >=880 verderop zou
   die vier kaarten anders alsnog in drie kolommen persen. */
@media (min-width:700px){
  .problem-grid.problem-grid--drie{grid-template-columns:repeat(3,minmax(0,1fr));}
  .problem-grid.problem-grid--vier{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ---------- Werk ----------
   Groter dan eerst, met een bijschrift dat over de foto valt en
   een rustige inzoom bij hover. Het eerste beeld is breed: dat
   geeft het raster ritme in plaats van vier gelijke blokjes. */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.werk-item{
  position:relative;overflow:hidden;border-radius:var(--hoek-vlak);
  border:1px solid var(--border);background:var(--dark);
}
.werk-item img{
  width:100%;height:230px;object-fit:cover;display:block;
  transition:transform var(--duur-intro) var(--soepel);
}
.werk-item:hover img{transform:scale(1.05);}
/* Het verloop moet zwaar genoeg zijn dat de letters ook op een
   lichte gevel leesbaar blijven. Gemeten eis: de lichtste pixel
   achter een letter niet lichter dan ongeveer rgb(119,119,119).
   Op 320 en 360 px valt het bijschrift over drie regels en loopt de
   bovenste regel het lichte deel van het verloop in — daar zakte het
   contrast tot 4,08:1 (WCAG 1.4.3 vraagt 4,5:1). Stops verzwaard en
   opnieuw naar boven verschoven, gemeten 10-08-2026. */
.werk-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:38px 14px 12px;color:#fff;font-size:var(--type-bijschrift);font-weight:600;
  background:linear-gradient(180deg,
    rgba(20,22,20,0) 0%,
    rgba(20,22,20,0.72) 25%,
    rgba(20,22,20,0.95) 55%,
    rgba(20,22,20,0.92) 100%);
}
.werk-item--breed{grid-column:1 / -1;}
.werk-item--breed img{height:300px;}
/* Eén foto over de volle breedte. Stond als inline grid-template-columns:1fr
   op het raster, en dan maakte de span-regel van .werk-item--breed op >=880
   een lege kolom van 0 px. Dubbele klasse omdat het vierkolomsraster van
   >=880 verderop in dit bestand staat. */
.work-grid.work-grid--vol{grid-template-columns:1fr;}
.work-grid--vol .werk-item--breed{grid-column:1 / -1;}

/* Eén losse foto naast een kop, geen rastercollage: vierkant en met een
   organische rand, zodat niet alles op de site een rechthoek is (verzoek
   eigenaar, 11-08-2026). border-radius-percentages schalen vanzelf mee met
   de boxgrootte, in tegenstelling tot clip-path: path(). Dubbele klasse
   voor genoeg gewicht om de vaste hoogte van .werk-item img te verslaan,
   ook onder de mobiele media query verderop in dit bestand. */
.werk-item.werk-item--blob{
  border:none;background:none;
  border-radius:63% 37% 54% 46% / 43% 37% 63% 57%;
  max-width:420px;margin-left:auto;margin-right:auto;
}
.werk-item.werk-item--blob img{height:auto;aspect-ratio:1/1;}

/* Kop van "Stap voor stap" op /hoe-het-werkt/: een gewoon vierkant fotootje
   naast de titel, geen los blok erboven met witruimte voor de eerste stap. */
.werkt-kop{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:20px;}
.werkt-kop-tekst{flex:1 1 260px;min-width:0;}
.werkt-kop-foto{width:120px;flex-shrink:0;margin:0;}
.werkt-kop-foto img{width:100%;height:120px;object-fit:cover;}
@media (min-width:600px){
  .werkt-kop-foto{width:180px;}
  .werkt-kop-foto img{height:180px;}
}

/* ---------- Dienstpagina: alternerende tekst/foto-sectie ----------
   "Herken je dit?" en "Zo gaat het op het dak" krijgen elk een foto naast
   de tekst, wisselend van zijde. Ronde hoek (24px, nieuw t.o.v. --hoek/
   --hoek-vlak) i.p.v. een schuine snede: die laatste zou bij een blok dat
   van zijde wisselt en op elke breedte tussen 320-1080px moet kloppen te
   makkelijk tekst raken of scheef ogen. */
.dienst-split{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;}
.dienst-split-foto{border-radius:24px;overflow:hidden;border:1px solid var(--border);}
.dienst-split-foto img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;}
@media (min-width:880px){
  .dienst-split{grid-template-columns:1fr 1fr;gap:48px;}
  .dienst-split--links .dienst-split-foto{order:-1;}
}
@media (max-width:479px){
  .dienst-split{gap:16px;}
}

/* ---------- Voor/na-bewijsblok ----------
   werk-6 en werk-7 zijn zelf al één samengesteld voor-en-na-beeld (geen
   twee losse vierkante foto's) — de labels lezen als twee helften van dat
   ene beeld, geen figcaption. Alleen op /diensten/dak-vervangen/. */
.voor-na-blok{max-width:min(70%,560px);margin:32px auto 0;}
.voor-na-foto{position:relative;border-radius:var(--hoek-vlak);overflow:hidden;border:1px solid var(--border);}
.voor-na-foto img{width:100%;height:auto;display:block;}
.voor-na-label{
  position:absolute;bottom:10px;
  font-size:var(--type-bijschrift);font-weight:700;color:#fff;
  background:rgba(20,22,20,0.72);padding:4px 12px;border-radius:var(--hoek-rond);
}
.voor-na-label--voor{left:10px;}
.voor-na-label--na{right:10px;}
@media (max-width:479px){
  .voor-na-blok{max-width:88%;}
}

/* ---------- Rustig binnenkomen bij scrollen ----------
   Let op de .js: zonder JavaScript staat alles gewoon zichtbaar.
   Verbergen doen we pas als er ook iets is dat het weer laat
   verschijnen, anders is een omgevallen script een lege pagina. */
.js .verschijn{opacity:0;transform:translateY(14px);}
.js .verschijn.is-zichtbaar{
  opacity:1;transform:none;
  transition:opacity var(--duur-intro) var(--soepel),transform var(--duur-intro) var(--soepel);
}

/* ---------- Hero-intro ----------
   De tekst komt één keer binnen, van boven naar beneden, 60 ms uit elkaar.
   De foto staat stil: die is het LCP-beeld en elke transform erop kost
   laadtijd. Het formulier is geen kind van .hero-inner en beweegt dus niet
   mee. Alleen onder .js, anders houdt een omgevallen script een lege hero
   over. */
.js .hero-inner>*{animation:hero-in var(--duur-intro) var(--soepel) both;}
.js .hero-inner>*:nth-child(2){animation-delay:60ms;}
.js .hero-inner>*:nth-child(3){animation-delay:120ms;}
.js .hero-inner>*:nth-child(4){animation-delay:180ms;}
.js .hero-inner>*:nth-child(5){animation-delay:240ms;}
.js .hero-inner>*:nth-child(6){animation-delay:300ms;}
@keyframes hero-in{from{opacity:0;transform:translateY(14px);}}

@media (prefers-reduced-motion:reduce){
  .js .verschijn{opacity:1;transform:none;}
  .werk-item:hover img{transform:none;}
  .js .hero-inner>*{animation:none;}
}

/* ---------- USP's ---------- */
.usp-section{background:var(--dark);color:#fff;}
.usp-section .eyebrow{color:var(--accent-bright);}
.usp-section h2{color:#fff;}
/* Er staat op dit moment geen lede in deze band, dus deze regel raakt niets.
   Hij blijft staan omdat hij bij het setje "op donker" hoort: zonder hem valt
   een lede terug op --muted en dat haalt op dit vlak 2,41:1. Weghalen bij de
   volgende opruimronde is dus een val, geen winst. */
.usp-section .lede{color:#C8C7BE;}
.usp-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.usp-card{
  background:var(--dark-2);border-radius:var(--hoek-vlak);padding:16px;
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid rgba(255,255,255,0.06);
}
.usp-card .icon-wrap{
  width:38px;height:38px;border-radius:var(--hoek);background:rgba(74,170,60,0.22);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent-bright);flex-shrink:0;
}
.usp-card .icon-wrap svg{width:20px;height:20px;}
.usp-card h3{color:#F2F1EC;margin-bottom:5px;}
.usp-card p{color:#C8C7BE;font-weight:400;}

/* ---------- Cijferrij (in de donkere .usp-section) ----------
   Grote getallen in plaats van icoon-kaarten, voor pagina's waar dat beter
   past dan nog een kaartenraster (verzoek eigenaar, 12-08-2026: "echt
   creativiteit", geen wit/zand-sectie die er weer hetzelfde uitziet als de
   vorige). Hergebruikt .usp-section (donkere band) als omhulsel. */
.cijfer-rij{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;text-align:center;}
@media (min-width:700px){ .cijfer-rij{grid-template-columns:repeat(4,1fr);} }
.cijfer{display:flex;flex-direction:column;gap:2px;}
.cijfer-getal{
  font-family:var(--font-head);font-weight:800;font-size:36px;line-height:1;
  color:var(--accent-bright);letter-spacing:var(--sper-kop);
}
.cijfer-label{font-size:var(--type-bijschrift);color:#C8C7BE;}
@media (min-width:880px){ .cijfer-getal{font-size:46px;} }

/* ---------- Uitgelicht statement ----------
   Eén zin, groot gezet als vormgeving in plaats van een kaartenraster of nog
   een lede-paragraaf — de tekstgrootte draagt de sectie (opmaakdiagnose
   11-08-2026 en verzoek eigenaar 12-08-2026). Het streepje erboven is het
   enige nieuwe "vormpje": klein, decoratief, geen los illustratief element
   dat om alt-tekst of een eigen betekenis vraagt. */
.statement-band{text-align:center;}
.statement-band .streep{width:56px;height:4px;border-radius:999px;background:var(--accent-bright);margin:0 auto 22px;}
.statement{
  font-family:var(--font-head);font-weight:800;color:var(--dark);
  font-size:26px;line-height:1.3;letter-spacing:var(--sper-kop);
  max-width:760px;margin:0 auto;
}
.statement .accent{color:var(--accent);}
@media (min-width:880px){ .statement{font-size:34px;} }

/* ---------- "Waarom Dakgenoten": twee kolommen, foto met inkeping ----------
   Namaak van de BDS-Dak-sectie (verzoek eigenaar, 11-08-2026), met eigen
   stijl/teksten: compacte rijen i.p.v. een kaartengrid, foto rechts met een
   pijlvormige inkeping i.p.v. een rechte diagonaal. Zelfde bleed-techniek
   als .cta-foto-band verderop (tekst in .container, foto los ernaast) —
   op mobiel een gewoon blok ín de leesvolgorde na de tekst, vanaf 880px een
   absoluut gepositioneerd paneel dat tot de rand van het scherm doorloopt. */
.usp-section--bds{position:relative;overflow:hidden;}
.usp-section--bds .container{position:relative;z-index:1;}
.usp-bds-inhoud{max-width:600px;}
.usp-lijst{display:grid;grid-template-columns:1fr;gap:10px;margin:20px 0 0;}
.usp-rij{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 16px;border:1px solid rgba(255,255,255,0.12);border-radius:var(--hoek-vlak);
  background:var(--dark-2);
}
/* Twee kolommen (dus drie rijen voor zes punten) vanaf 1080px — verzoek
   eigenaar (11-08-2026): de sectie was met alle zes onder elkaar te lang,
   nam bijna het hele scherm in beslag. Onder 1080px (waar de sectie er
   sowieso al gestapeld/mobiel uitziet, geen foto ernaast) blijft het één
   kolom, zoals gevraagd. */
@media (min-width:1080px){
  .usp-lijst{grid-template-columns:repeat(2,1fr);}
}
.usp-rij .icon-wrap{
  width:38px;height:38px;border-radius:var(--hoek);background:rgba(74,170,60,0.22);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent-bright);flex-shrink:0;
}
.usp-rij .icon-wrap svg{width:20px;height:20px;}
.usp-rij h3{color:#F2F1EC;margin-bottom:3px;}
.usp-rij p{color:#C8C7BE;font-weight:400;}
.usp-bds-foto{
  position:relative;width:100%;height:220px;margin-top:28px;
  clip-path:polygon(0 14%,100% 0,100% 100%,0 100%);
}
.usp-bds-foto img{width:100%;height:100%;object-fit:cover;display:block;}
/* Vanaf 1080px (= de eigen max-width van .container): daaronder rekent de
   browser het linker "restje" van een gecentreerde container mee, en dat
   past niet in een simpele vw-formule. calc(50% - 120px) is direct afgeleid
   van "waar eindigt de 600px-tekstkolom binnen een gecentreerde 1080px-
   container" — dat gaf bij min(50vw, ...) op 1440px nog 80px overlap tussen
   tekst en foto (gemeten, niet aangenomen), deze formule niet: op elke
   breedte ≥1080px blijft er precies 40px lucht over, gecontroleerd van
   1080 tot 1920px. */
@media (min-width:1080px){
  .usp-bds-foto{
    position:absolute;top:0;right:0;bottom:0;left:auto;height:auto;margin-top:0;
    width:calc(50% - 120px);
    /* De pijlvormige inkeping: rechte rand, op de verticale middenband een
       driehoekige punt die 10% van de foto-breedte naar binnen steekt. */
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 58%,10% 50%,0 42%);
  }
}

/* ---------- Sluitende CTA-band met foto ----------
   Zelfde diagonale-bleed-techniek als .usp-section--foto hierboven, maar
   een eigen klasse met eigen inhoud (11-08-2026): zo blijft die sectie,
   die al goedgekeurd was, onaangeroerd. Dit is de tweede en laatste losse
   foto op de homepage buiten de hero en "Ons werk". */
.cta-foto-band{position:relative;overflow:hidden;background:var(--dark);color:#fff;}
.cta-foto-band .eyebrow{color:var(--accent-bright);}
.cta-foto-band h2{color:#fff;}
.cta-foto-band .lede{color:#C8C7BE;}
.cta-foto-band .container{position:relative;z-index:1;}
.cta-foto-band-inhoud{max-width:520px;}
/* Onder 880px: gewoon een blok in de leesvolgorde, vol breedte, met een
   bescheiden schuine hoek linksboven — geen absolute positionering (dat is
   een desktop-truc voor de bleed-tot-de-rand). Zo blijft de foto zichtbaar
   op mobiel in plaats van weg te vallen (verzoek eigenaar, 11-08-2026). */
.cta-foto-band-beeld{
  position:relative;width:100%;height:200px;margin-top:28px;
  clip-path:polygon(0 14%,100% 0,100% 100%,0 100%);
}
.cta-foto-band-beeld img{width:100%;height:100%;object-fit:cover;display:block;}
@media (min-width:880px){
  .cta-foto-band-beeld{
    position:absolute;top:0;right:0;bottom:0;left:auto;height:auto;margin-top:0;
    width:min(46vw,calc(100% - 600px));
    clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
  }
  .cta-foto-band-beeld::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(20,22,20,0.75) 0%,rgba(20,22,20,0) 30%);
  }
}


/* ---------- Stappen ---------- */
.steps{display:flex;flex-direction:column;gap:0;}
.step{
  display:flex;gap:16px;padding:16px 0;
  border-bottom:1px solid var(--border);align-items:flex-start;
}
.step:last-child{border-bottom:none;}
.step-content{display:flex;flex-direction:column;}
.step-num{
  width:36px;height:36px;border-radius:var(--hoek);background:var(--accent);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:var(--type-bijschrift);font-family:var(--font-head);
}
.step h3{margin-bottom:3px;}
.step p{color:var(--muted);}
/* Icoon per stap, alleen op de vier homepage-stappen (.steps--iconen): een
   los badge boven de kop, dezelfde opzet als .usp-card .icon-wrap. Raakt
   het nummervak en de lijn niet aan — die blijven exact zoals ze waren. */
.steps--iconen .step-content .icon-wrap{
  width:40px;height:40px;border-radius:var(--hoek);background:var(--accent-tint);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.steps--iconen .step-content .icon-wrap svg{width:22px;height:22px;}
/* Een nummervak dat geen nummer draagt maar een vinkje: herkenning, geen
   volgorde. Stond als inline stijl op dienst.njk. */
.step-num--zacht{background:var(--accent-tint);color:var(--accent);}

/* ---------- De lijn langs de stappen ----------
   Grijs is de weg, groen is hoever je bent. Gestapeld hangt de lijn per
   stap: één stukje van dit nummer naar het volgende. Aan de lijst als
   geheel klopt de onderkant niet, want de laatste stap is hoger dan zijn
   nummer. .is-bereikt komt uit de IntersectionObserver in basis.njk, dus
   zonder scroll-listener. */
.steps--lijn .step{position:relative;}
.steps--lijn .step:not(:last-child)::before,
.steps--lijn .step:not(:last-child)::after{
  content:"";position:absolute;left:17px;top:34px;bottom:-34px;width:2px;
}
.steps--lijn .step:not(:last-child)::before{background:var(--border);}
.steps--lijn .step:not(:last-child)::after{background:var(--accent);transform-origin:top;}
/* Zonder JavaScript staat de lijn er gewoon helemaal; hij verdwijnt pas
   als er ook iets is dat hem weer laat groeien. */
.js .steps--lijn .step:not(:last-child)::after{
  transform:scaleY(0);transition:transform var(--duur-mid) var(--gelijk);
}
.js .steps--lijn .step.is-doorgetrokken::after{transform:scaleY(1);}
/* De nummers moeten over de lijn heen, anders tekent hij dwars door de
   cijfers: een absoluut geplaatst pseudo-element wint van gewone kinderen. */
.steps--lijn .step-num{position:relative;z-index:1;}
.js .steps--lijn .step-num{
  background:var(--border);color:var(--dark);
  transition:background var(--duur-kort) var(--gelijk),color var(--duur-kort) var(--gelijk);
}
.js .steps--lijn .step.is-bereikt .step-num{background:var(--accent);color:#fff;}

/* ---------- Vragen ----------
   Veertien antwoorden achter elkaar maakten /veelgestelde-vragen/ 8174 px lang
   op 390 px. Inklappen is hier geen lengtetruc maar de enige manier om een
   antwoord volledig te houden: dat over de garantie is acht regels omdat de
   wettelijke alinea erbij hoort, en die mag er niet uit.
   <details> klapt zelf open, dus dit werkt ook zonder JavaScript, en summary
   is vanzelf focusbaar; de ring komt uit de algemene focusregel bovenaan.
   De scheidingslijn hangt aan het item zelf en niet aan .steps--kolom: daar
   viel de lijn ooit weg zodra de stappen op desktop naast elkaar gingen
   staan, en dat kan hier niet gebeuren. */
.vragen{border-top:1px solid var(--border);}
.vraag{border-bottom:1px solid var(--border);}
.vraag summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:14px 0;cursor:pointer;list-style:none;
}
.vraag summary::-webkit-details-marker{display:none;}
.vraag summary h3{transition:color var(--duur-tik) var(--gelijk);}
.vraag summary:hover h3,.vraag summary:focus-visible h3{color:var(--accent);}
/* Het teken is twee streepjes over elkaar; open blijft de horizontale over.
   Twee achtergrondlagen in plaats van een tweede element, zodat er straks
   nog iets te draaien valt als de hoogteanimatie erbij komt. */
.vraag summary::after{
  content:"";flex:0 0 auto;width:16px;height:16px;margin-top:6px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/16px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/2px 16px no-repeat;
}
.vraag[open] summary::after{background-size:16px 2px,0 0;}
/* Twee omhulsels om het antwoord: het buitenste wordt later het raster dat van
   0fr naar 1fr groeit (PROMPT-BEWEGING), het binnenste houdt zijn eigen
   hoogte. Nu doet alleen het binnenste iets. */
.vraag-antwoord-in{padding:0 0 18px;max-width:65ch;}
.vraag-antwoord-in p{color:var(--muted);}
.vraag-antwoord-in p+p{margin-top:10px;}

/* De lijst bovenaan: veertien koppen als ankerlink, zodat je niet veertien
   dichte vragen langs hoeft te scrollen om de jouwe te vinden. */
.vraag-index ul{list-style:none;}
.vraag-index li{border-bottom:1px solid var(--border);}
.vraag-index a{
  display:flex;align-items:center;min-height:48px;padding:6px 0;
  color:var(--accent);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- Verder lezen ----------
   Onderaan een pagina die verder alleen naar het formulier wijst. Drie vaste
   links en geen kaarten: dit is een uitgang, geen aanbod. */
.verder-lezen ul{list-style:none;border-top:1px solid var(--border);}
.verder-lezen li{border-bottom:1px solid var(--border);}
/* Geen flex op de link zelf: de pijl van .tekstlink is een ::after en die
   schoof dan als los flex-item naar de rechterrand zodra een link over twee
   regels liep. Hoogte komt van de padding, niet van een flexbox. */
.verder-lezen .tekstlink{padding:12px 0;}

/* ---------- Blogartikel ----------
   De H1 en de herofoto komen uit de markdown-inhoud zelf (zie
   blog-artikel.njk), dus die krijgen hier hun opmaak mee als onderdeel van
   .artikel-inhoud, niet als losse regel ergens in de sitebrede h1/img-CSS.
   Kolombreedte 680px: iets smaller dan de 760px van .verder-lezen, want
   lopende tekst leest prettiger op minder tekens per regel dan een lijst
   met korte linkregels. */
.artikel-inhoud{max-width:680px;margin:0 auto;}
.artikel-inhoud>h1:first-child{
  font-size:var(--type-hero);font-weight:800;color:var(--dark);
  line-height:var(--lh-hero);letter-spacing:var(--sper-kop);margin-bottom:20px;
}
/* Bronfoto's uit drie verschillende stockbanken lopen uiteen van liggend tot
   staand (tot 2268×4032 gemeten). Zonder max-height trok een staande foto
   het artikel op één plek 1200px lang leeg. */
.artikel-inhoud img{border-radius:var(--hoek-vlak);margin-bottom:28px;width:100%;max-height:440px;object-fit:cover;}
.artikel-inhoud p{margin-bottom:18px;}
.artikel-inhoud h2{margin-top:44px;}
.artikel-inhoud h3{margin-top:28px;margin-bottom:8px;}
.artikel-inhoud ul,.artikel-inhoud ol{margin:0 0 18px 22px;}
.artikel-inhoud li{margin-bottom:6px;}
.artikel-inhoud li>p{margin-bottom:0;}
/* :not(.btn): zonder die uitzondering had deze regel een hogere specificiteit
   dan .btn-primary{color:#fff}, en werd de knoptekst van de afsluitende CTA
   even groen als zijn eigen achtergrond — onleesbaar. */
.artikel-inhoud a:not(.btn){color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.artikel-inhoud strong{color:var(--dark);}
.artikel-inhoud svg{margin:8px 0 28px;}
/* Het "Kort samengevat"-blok: een blockquote met vetgedrukte eerste regel
   en een puntenlijst erin. Groene tint, geen citaatstreepje — dit is geen
   citaat maar een leeswijzer. */
.artikel-inhoud blockquote{
  background:var(--accent-tint);border-left:4px solid var(--accent);
  border-radius:0 var(--hoek) var(--hoek) 0;
  padding:18px 20px 4px;margin:0 0 28px;color:var(--dark-2);
}
.artikel-inhoud blockquote ul{margin-left:20px;}
.artikel-inhoud blockquote p:first-child{margin-bottom:10px;}
/* De afsluitende CTA-knop staat als ruwe HTML in de markdown-inhoud zelf
   (zie de artikelen in src/blog/), in plaats van een aparte .sectie-tint na
   de artikeltekst: dat was een dubbele CTA (verzoek eigenaar, 13-08-2026). */
.artikel-cta{text-align:center;margin:8px 0 12px;}

/* ---------- Blogoverzicht ----------
   Hergebruikt .problem-card (rand, schaduw, hover-optil) en
   .problem-grid--drie (1 kolom mobiel, 3 kolommen vanaf 900px): dezelfde
   kaartkeuze als de rest van de site, alleen met een thumbnail erboven. */
.blog-kaart{padding:0;overflow:hidden;gap:0;}
/* height:auto met opzet: zonder die regel wint het height="400"-attribuut
   uit blog.njk van de aspect-ratio hieronder (de attributen zijn alleen
   bedoeld om vroege ruimte te reserveren), en toonde de kaart een
   uitgerekte, verkeerd bijgesneden thumbnail. */
.blog-kaart img{border-radius:0;margin-bottom:0;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
.blog-kaart-tekst{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;}
/* margin-top:auto duwt "Lees meer" naar de onderrand van de kaart, ongeacht
   hoe lang de titel/omschrijving van dat artikel is — anders stond hij bij
   een korte tekst hoger dan bij de buurkaart (verzoek eigenaar, 13-08-2026:
   moet duidelijker klikbaar ogen). */
.blog-kaart-lees{margin-top:auto;padding-top:4px;}
.blog-kaart-datum{font-size:var(--type-bijschrift);color:var(--muted);}
.blog-kaart h3{font-size:var(--type-blok);}
.blog-kaart p{color:var(--muted);font-size:var(--type-bijschrift);line-height:var(--lh-brood);}

/* ---------- Ervaringen ----------
   Het blok staat er alleen als er echte reviews in _data/reviews.js staan; zie
   de uitleg in dat bestand. De kaart is de gewone .problem-card, dus hier
   staat alleen wat een quote anders maakt dan een kaart met een kop. */
.review-quote p{color:var(--text);}
/* De kaarten zijn even hoog; de naam hoort dan onderaan te staan en niet
   direct onder een korte review te blijven hangen. */
.review-wie{font-size:var(--type-bijschrift);font-weight:700;color:var(--dark);margin-top:auto;}
.review-wie span{display:block;font-weight:400;color:var(--muted);}
.review-bron{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;}
.review-bron img{height:34px;width:auto;}

/* ---------- Vertrouwensblok ---------- */
.trust-phone{
  text-align:center;margin-top:24px;padding:20px;
  background:#fff;border:1.5px dashed var(--accent);border-radius:var(--hoek-vlak);
}
.trust-phone a:not(.btn){
  display:block;font-size:var(--type-getal);font-weight:800;color:var(--accent);
  margin-top:4px;padding:10px 0;font-family:var(--font-head);
  line-height:var(--lh-hero);
}
/* Op verzoek van de eigenaar (07-08-2026) een echte belknop in plaats van
   los tekstnummer: hetzelfde .btn-primary als de rest van de site, alleen
   met wat ruimte erboven omdat .trust-phone geen eigen gap heeft. */
.trust-phone .btn{margin-top:14px;}
.trust-disclaimer{font-size:var(--type-bijschrift);color:var(--muted);margin-top:14px;font-style:italic;}

/* ---------- Voet ---------- */
footer{
  background:var(--dark);color:#B8B8AE;
  padding:28px 0 100px;font-size:var(--type-bijschrift);text-align:center;
}
/* Het witte logo staat gestapeld (merkteken boven het woordmerk) en heeft
   een andere verhouding dan het horizontale bestand. Dus geen uitsnede hier.
   Het is een JPEG zonder transparantie: mix-blend-mode:screen laat het zwart
   wegvallen tegen de donkere voet. Vervangen door een PNG of SVG met
   transparantie zodra die er is. */
footer .voet-logo{
  height:96px;width:auto;margin:0 auto 16px;
  mix-blend-mode:screen;
}
footer a{color:var(--accent-bright);display:inline-block;padding:5px 0;}
footer .footer-row{margin-top:6px;}
footer .payoff{
  color:#F2F1EC;font-family:var(--font-head);font-weight:600;
  font-size:var(--type-lede);margin-bottom:10px;
}
/* De voet had geen enkele link naar een andere pagina. Dit is de plek waar de
   hele site op een rij staat, dus de links zijn hier vingergroot. */
.voet-menu{margin-top:22px;padding-top:14px;border-top:1px solid var(--dark-2);}
.voet-menu ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;}
.voet-menu a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;padding:0;}
.voet-menu a[aria-current="page"]{color:#fff;}

/* ---------- Sticky WhatsApp ---------- */
/* De zwevende WhatsApp-knop is weg. Hij kapte koppen af tot 47 px, en de
   marge naast de tekstkolom wordt pas breed genoeg rond 1500 px. WhatsApp
   staat in de kopbalk, op alle breedtes en op elke pagina. */

/* ---------- Mobiele balk ----------
   Staat sinds 07-08-2026 alleen nog op de lekkagepagina (primaireActie:
   bellen, zie basis.njk): de doorlopende WhatsApp-variant is vervallen,
   want die stond al in de kopbalk. Klasse en opmaak blijven .mobile-bar
   heten, ook nu er nog maar één inhoud voor is — een eigen naam voor één
   variant is meer omdoop- dan bouwwerk. */
.mobile-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;
  background:#fff;border-top:1.5px solid var(--border-strong);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.mobile-bar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:58px;font-weight:700;font-size:var(--type-brood);
}
/* Twee knoppen: een smalle witte links en de gevulde groene rechts. Wat er in
   staat wisselt per pagina (basis.njk); waar bellen voorgaat draagt de groene
   het telefoonnummer. De klassen zeggen dus iets over de vorm, niet over de
   actie. */
.mobile-bar a.call{
  flex:0 0 auto;padding:0 20px;background:var(--bg-soft);
  border-right:1px solid var(--border);color:var(--dark);
}
.mobile-bar a.form{flex:1;background:var(--accent);color:#fff;}
.mobile-bar svg{width:20px;height:20px;}

/* ---------- Zwevende aanbodstrook ---------- */
/* Boven de mobiele balk (60) en onder de menulaag (80). Verborgen via het
   HTML-attribuut, niet via een class: site.js zet/haalt "hidden" weg, en
   zonder JavaScript verschijnt hij dus nooit — precies goed, want zonder
   JavaScript is er ook geen scrollmeting om hem op te baseren. */
.aanbod{
  position:fixed;left:12px;right:12px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:58;
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--border);border-radius:var(--hoek-vlak);
  padding:10px 12px;box-shadow:var(--schaduw-zweef);
}
/* De mobiele balk staat nu alleen nog op de lekkagepagina (primaireActie:
   bellen); alleen dáár moet de strook erboven zweven in plaats van erover
   heen. Op elke andere pagina bestaat .mobile-bar niet en geldt de gewone
   afstand hierboven. Alleen onder 880 px: daarboven is .mobile-bar toch al
   display:none en geldt verderop de eigen desktop-positie. */
@media (max-width:879px){
  .mobile-bar ~ .aanbod{bottom:calc(58px + env(safe-area-inset-bottom,0px) + 16px);}
}
.aanbod[hidden]{display:none;}
.aanbod-ico{
  width:34px;height:34px;border-radius:var(--hoek);background:var(--accent-tint);
  display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;
}
.aanbod-ico svg{width:18px;height:18px;}
.aanbod-txt{display:flex;flex-direction:column;min-width:0;flex:1;}
.aanbod-txt b{font-size:var(--type-brood);color:var(--dark);line-height:1.2;}
.aanbod-sub{font-size:var(--type-bijschrift);color:var(--muted);}
/* Kleine FOMO-regel binnen dezelfde ondertitel: kleiner en schuin, zodat
   het als een terzijde oogt in plaats van als een tweede, even zware
   regel — dat duwde de strook op smalle schermen naar drie regels hoog. */
/* .aanbod-urgent is vervallen met "Beperkte plekken", 06-08-2026. */
.aanbod-cta{
  flex-shrink:0;background:var(--accent);color:#fff;font-weight:700;font-size:var(--type-bijschrift);
  padding:10px 14px;border-radius:var(--hoek);white-space:nowrap;
}
.aanbod-sluit{
  flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--muted);
  font-size:1.4rem;line-height:1;padding:2px 4px;
}
/* Komt op als hij verschijnt (site.js haalt dan het hidden-attribuut weg);
   de globale prefers-reduced-motion-regel verderop in dit bestand zet de
   animatieduur al op nul, dus die hoeft hier niet nogmaals. */
.aanbod{animation:aanbod-in var(--duur-intro) var(--soepel);}
@keyframes aanbod-in{from{opacity:0;transform:translateY(14px);}}

/* ---------- Mini-knopje na wegklikken ----------
   Zelfde plek als de strook (rechtsonder), maar dan als klein rond
   icoonknopje: wegklikken hoeft niet "voorgoed weg", alleen "niet meer
   ongevraagd in beeld" te betekenen. site.js wisselt hidden tussen dit
   knopje en .aanbod, nooit allebei tegelijk zichtbaar. */
.aanbod-mini{
  position:fixed;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:58;
  width:46px;height:46px;border-radius:var(--hoek-rond);
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--schaduw-zweef);
  transition:background var(--duur-tik) var(--gelijk);
}
.aanbod-mini:hover,.aanbod-mini:focus-visible{background:var(--accent-dark);}
.aanbod-mini svg{width:22px;height:22px;}
.aanbod-mini[hidden]{display:none;}
@media (max-width:879px){
  .mobile-bar ~ .aanbod-mini{bottom:calc(58px + env(safe-area-inset-bottom,0px) + 16px);}
}
@media (min-width:880px){
  .aanbod-mini{right:20px;bottom:20px;}
}

/* ---------- Toestemming voor meten ---------- */
/* Boven de mobiele balk (60) en de kopbalk (50), onder de menulaag (80): een
   geopend menu hoort hier overheen te vallen, niet andersom. Op mobiel staat
   hij op de balk in plaats van eroverheen; die balk is 58 px plus de
   veilige zone. De twee knoppen zijn even breed en even hoog: weigeren kost
   precies zoveel als accepteren. */
.toestemming{
  position:fixed;left:0;right:0;z-index:70;
  bottom:calc(58px + env(safe-area-inset-bottom,0px));
  background:#fff;border-top:1.5px solid var(--border-strong);
}
.toestemming-inner{padding:14px 20px;display:flex;flex-direction:column;gap:12px;}
.toestemming-tekst strong{
  display:block;font-family:var(--font-head);font-size:var(--type-brood);
  color:var(--dark);margin-bottom:4px;line-height:var(--lh-kop);
}
.toestemming-tekst p{font-size:var(--type-bijschrift);color:var(--muted);}
.toestemming-tekst a{
  color:var(--accent);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}
/* Naast elkaar, ook op 360 px: gestapeld kostte de balk 62 px extra, en de
   twee knoppen naast elkaar laten meteen zien dat ze evenveel wegen. */
.toestemming-knoppen{display:flex;gap:10px;}
.toestemming-knoppen .btn{flex:1;min-width:0;}

/* ---------- Desktop ---------- */
@media (min-width:880px){
  /* De ladder schuift als geheel op; verderop in dit blok staat geen enkele
     losse lettergrootte meer. Hero/sectie waren 60/40px (bijna 3,5x de
     lopende tekst van 17px); op verzoek van de eigenaar (12-08-2026, "de
     kopteksten mogen kleiner, ongeveer 3x in plaats van 6x") teruggebracht
     naar 48/32px. --type-blok en --type-lede blijven ongewijzigd: de klacht
     ging over de grote kopteksten, niet over h3 of lopende lede-tekst. */
  :root{
    --type-hero:48px;
    --type-sectie:32px;
    --type-blok:22px;
    --type-lede:20px;
  }
  section{padding:80px 0;}
  /* Pas hier gaat de sectiekop over de 34 px waarboven Poppins uit elkaar
     valt; op mobiel (26 px) zou dezelfde sperring de letters juist in
     elkaar duwen. */
  h2{letter-spacing:var(--sper-kop);}
  /* .hoofdmenu en .menuknop wisselen niet hier maar in een eigen media query
     onderaan dit bestand: op 880 px passen de zes menu-items plus de knop van
     238 px nog niet naast elkaar. Gemeten: op 880 en 890 px werd de pagina
     breder dan het scherm (899 px), en de groene knop stak buiten de witte
     pil. Alleen onzichtbaar omdat body op overflow-x:hidden staat. Ze passen
     pas rond 1060 px.
     .header-tel is vervallen met de gecombineerde Bel/WhatsApp-knop. */
  .hero{padding:70px 0 64px;margin-top:-92px;}
  .hero>.container{padding-top:92px;}
  .hero-inner{max-width:640px;}
  .btn-row{flex-direction:row;max-width:none;}
  .btn{width:auto;min-width:230px;padding:14px 26px;}
  /* Met de knoptekst op 17 px in plaats van 16 groeide de herokolom over
     zijn eigen breedte heen; 14 px zijruimte in plaats van 18 haalt de
     twee knoppen weer binnen. */
  .hero .btn{min-width:0;padding:14px 14px;white-space:nowrap;}
  .problem-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* Ons werk krijgt meer breedte en hogere beelden: dat is het enige
     beeldmoment tussen de hero en de donkere band. */
  .sectie-werk .container{max-width:1360px;}
  .work-grid{grid-template-columns:repeat(4,1fr);gap:16px;}
  /* Zes foto's i.p.v. vier (10-08-2026, twee nieuwe echte projectfoto's
     erbij): op 4 kolommen bleef er een rij van twee over met twee lege
     vakken. Alleen hier, niet voor het algemene .work-grid elders. */
  .sectie-werk .work-grid{grid-template-columns:repeat(3,1fr);}
  .werk-item img{height:210px;}
  .sectie-werk .werk-item img{height:300px;}
  .werk-item--breed{grid-column:span 2;}
  .werk-item--breed img{height:210px;}
  .hero{background-position:center 48%;}
  .usp-grid{grid-template-columns:repeat(3,1fr);}
  .steps{flex-direction:row;gap:20px;}
  .step{
    flex-direction:column;border-bottom:none;
    border-right:1px solid var(--border);padding:0 20px;
  }
  .step:last-child{border-right:none;}
  /* Zonder flex-basis schaalt elke kolom op zijn eigen inhoud: op 1440
     werd de derde stap 189 px terwijl de eerste 417 px kreeg. Alleen voor
     de rij-variant; in een kolom zou flex-basis:0 de hoogtes verdelen. */
  .steps:not(.steps--kolom)>.step{flex:1 1 0;min-width:0;}
  /* Een lijst die ook op desktop onder elkaar staat (vragen, opsommingen).
     De scheiding gaat mee terug van rechts naar onder, anders houdt zo'n
     rij helemaal geen lijn meer over. */
  .steps--kolom{flex-direction:column;gap:0;}
  .steps--kolom .step{
    flex-direction:row;border-right:none;
    border-bottom:1px solid var(--border);padding:16px 0;
  }
  .steps--kolom .step:last-child{border-bottom:none;}
  /* In de rij-vorm staan de nummers naast elkaar, dus kantelt de lijn mee.
     Hier klopt één lijn over de hele rij wel: de kolommen zijn even breed
     en het nummer staat bovenin. Hij groeit als geheel, want de vier stappen
     komen tegelijk in beeld. */
  .steps--lijn:not(.steps--kolom){position:relative;}
  .steps--lijn:not(.steps--kolom) .step::before,
  .steps--lijn:not(.steps--kolom) .step::after{content:none;}
  .steps--lijn:not(.steps--kolom)::before,
  .steps--lijn:not(.steps--kolom)::after{
    /* Het laatste nummer staat 38 px vanaf de linkerkant van zijn eigen
       kolom, dus de rechterkant hangt af van hoeveel kolommen er zijn.
       --stappen komt uit basis.njk; zonder JavaScript blijft het bij vier. */
    --kolom:calc((100% - (var(--stappen,4) - 1) * 20px) / var(--stappen,4));
    content:"";position:absolute;left:38px;right:calc(var(--kolom) - 38px);top:17px;height:2px;
  }
  .steps--lijn:not(.steps--kolom)::before{background:var(--border);}
  .steps--lijn:not(.steps--kolom)::after{
    background:var(--accent);
    transform:scaleX(var(--voortgang,1));transform-origin:left;
    transition:transform var(--duur-mid) var(--gelijk);
  }
  /* Een rij komt in één keer in beeld. Met een kleine trap loopt de lijn
     door de nummers heen in plaats van dat alles tegelijk omslaat. */
  .js .steps--lijn:not(.steps--kolom) .step:nth-child(2) .step-num{transition-delay:80ms;}
  .js .steps--lijn:not(.steps--kolom) .step:nth-child(3) .step-num{transition-delay:160ms;}
  .js .steps--lijn:not(.steps--kolom) .step:nth-child(4) .step-num{transition-delay:240ms;}
  /* Veertien regels onder elkaar kost op desktop bijna een schermhoogte aan
     lucht; in twee kolommen staat de hele lijst in één blik. Kolommen en geen
     raster: in een raster loopt de volgorde van links naar rechts terwijl je
     ogen naar beneden lezen, en dan bepaalt de langste vraag van een rij de
     hoogte van de andere. */
  .vraag-index ul{columns:2;column-gap:36px;}
  .vraag-index li{break-inside:avoid;}
  .mobile-bar{display:none;}
  /* Geen mobiele balk meer om boven te blijven: rechtsonder in de hoek,
     smal genoeg om als kaart te lezen in plaats van als balk. */
  .aanbod{left:auto;right:20px;bottom:20px;max-width:380px;}
  /* Geen mobiele balk meer om boven te blijven, dus tegen de onderrand. */
  .toestemming{bottom:0;}
  .toestemming-inner{
    flex-direction:row;align-items:center;justify-content:space-between;gap:28px;
  }
  .toestemming-tekst{max-width:640px;}
  .toestemming-knoppen{flex-shrink:0;}
  .toestemming-knoppen .btn{flex:0 0 auto;width:auto;min-width:170px;}
  footer{padding:36px 0;}
}

/* ---------- Hero met formulier ernaast ----------
   Later dan de rest van desktop. De 940 px komt uit een meting van tóén de
   hero nog twee knoppen naast elkaar had (517 px) plus het formulier
   (zo'n 340 px), plus 40 gat en 40 containerruimte. Sinds de
   "Vraag een gratis dakcheck aan"-knop is vervallen (het formulier staat er
   al naast, zie de hero-sectie) is de hero-kolom smaller geworden en is dit
   getal niet opnieuw gemeten — bij de eerstvolgende render-controle op
   breedtes tussen 880 en 940 px checken of de knip nog op de juiste plek zit
   of dat hij naar beneden kan.
   De herokolom is de ruimere van de twee: bij 1fr/1fr braken de knoppen op
   elke desktopbreedte in twee regels. */
@media (min-width:940px){
  .form-layout{display:grid;grid-template-columns:1.12fr 0.88fr;gap:40px;align-items:start;}
  .form-layout .form-card{margin-top:0;}
}

@media (prefers-reduced-motion:reduce){
  /* Ook de wachttijden eruit: zonder dat blijft een gestaffeld effect zijn
     vertraging houden en verschijnt het alsnog te laat. */
  *,*::before,*::after{
    transition-duration:.01ms!important;transition-delay:0ms!important;
    animation-duration:.01ms!important;animation-delay:0ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important;
  }
}

/* ---------- Menu: pas ruimte vanaf 1140 px ----------
   Gemeten wat de kop op één regel nodig heeft: merk 131 + menu 606 + knop 238
   = 975 px, plus twee tussenruimtes en de binnenmarge van de pil komt dat op
   ongeveer 1031 px.

   Dit stond op 880 px. Daar liep de kop over drie regels en werd de pagina
   899 px breed op een scherm van 880 — echte horizontale overloop, alleen
   onzichtbaar doordat body op overflow-x:hidden staat. Dat raakte iPad
   liggend, Chromebooks en elk venster dat niet gemaximaliseerd is.

   1060 en 1080 zijn allebei gemeten en allebei te krap: op 1080 bleef er zes
   pixels over. Zes pixels is geen speling — vanochtend brak de kop op een echt
   toestel terwijl er in de browser twaalf pixels over leken te zijn.
   De pil is nooit breder dan 1080 px, dus meer speling dan hier komt er niet.

   Wordt er ooit een menu-item weggehaald, dan mag dit getal fors omlaag: elk
   item scheelt ongeveer 100 px. Meet dan opnieuw op 880, 1024, 1140 en 1440. */
@media (min-width:1140px){
  .hoofdmenu{display:block;}
  .menuknop{display:none;}
}