/* Template 4 "Zacht" – gemeten op teunsnoekzonweringen.nl, 19-08-2026.
Alle waarden met (gemeten) komen letterlijk uit het origineel. */
@font-face{
font-family:'Kumbh Sans';
src:url('../fonts/kumbh-sans-var.woff2') format('woff2');
font-weight:400 700;
font-display:swap;
}
:root{
--ink:#2c3a2b; /* donkere drager: koppen, titels, donkere vlakken */
--petrol:#35682b; /* diep logogroen: overlays, page-hero's, 2e knop */
--accent:#58a847; /* logogroen #58a847: knoppen, eyebrows, iconen */
--tint:#e7f0e0; /* lichte sectiewaas (homepage) */
--tint2:#eaefe4; /* sectiewaas subpagina's (gemeten) */
--salie:#a9c79b; /* zachte groene waas */
--bg:#f7f7f7;
--wit:#ffffff;
--groen-vink:#2e9e5b;
--r-kaart:20px; /* (gemeten) */
--r-knop:8px; /* (gemeten) */
--schaduw:0 0 10px rgba(0,0,0,.10); /* (gemeten) */
--ease:cubic-bezier(.22,.61,.36,1);
--header-h:106px; /* (gemeten) */
--nav-gap:26px; /* tussenruimte tussen ALLE items in de header */
--nav-vrij:40px; /* minimale afstand van de headerrij tot het logoplateau */
--plateau-h:146px; /* (gemeten) */
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
font-family:'Kumbh Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* ---------- typografie ---------- */
h2{font-size:32px;line-height:1.4;font-weight:600;color:var(--ink)}
h3{font-size:20px;line-height:1.3;font-weight:600}
p{font-size:16px;line-height:1.5}
@media(max-width:640px){h2{font-size:26px}}
.eyebrow{
display:block;color:var(--accent);font-size:13px;font-weight:600;
text-transform:uppercase;letter-spacing:.18em;margin-bottom:14px;
}
/* ---------- knoppen (gemeten: 17px/500, 8px, 14px 25px 15px) ---------- */
.knop{
display:inline-block;font-size:17px;font-weight:500;text-decoration:none;
border-radius:var(--r-knop);padding:14px 25px 15px;border:0;cursor:pointer;
font-family:inherit;
transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.knop:hover{transform:translateY(-2px)}
.knop-accent{background:var(--accent);color:var(--wit)}
.knop-accent:hover{background:#4a9139}
.knop-petrol{background:var(--petrol);color:var(--wit)}
.knop-petrol:hover{background:#27501f}
.knop-ink{background:var(--ink);color:var(--wit)}
.knop-ink:hover{background:#1d2a1c}
.knop-stil{background:rgba(255,255,255,.16);color:var(--wit)}
.knop-stil:hover{background:rgba(255,255,255,.28)}
.knop-licht{background:#dbe7d2;color:var(--ink)}
.knop-licht:hover{background:#cbdcbf}
.tekstlink{
color:var(--petrol);font-size:17px;font-weight:500;text-decoration:none;
border-bottom:1px solid var(--petrol);padding-bottom:2px;
}
.tekstlink.op-donker{color:var(--wit);border-color:var(--wit)}
/* ---------- header: dichte balk + wit logo-plateau (gemeten) ---------- */
.header{
position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);
/* VASTE REGEL: nooit een dekkende balk. De hero loopt eronder door en een
permanente zachte waas van bovenaf houdt logo en menutekst leesbaar.
Zie het HEADERFIX-blok onderaan dit bestand. */
background:none;
background-image:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
background-size:100% 140px;background-repeat:no-repeat;
display:flex;align-items:center;
padding:0 48px 0 max(25vw,320px);
}
.logo-plateau{
position:absolute;top:0;left:0;z-index:2;
width:25vw;min-width:320px;height:var(--plateau-h);
background:var(--wit);border-radius:0 0 40px 0;
display:flex;align-items:center;justify-content:center;gap:16px;
padding:0 24px;text-decoration:none;
box-shadow:0 6px 18px rgba(0,0,0,.08);
transition:height .35s var(--ease);
}
.logo-merk{width:57px;height:57px;border-radius:14px;background:var(--accent);
display:grid;place-items:center;color:var(--wit);font-weight:700;font-size:26px;flex:0 0 auto;
transition:transform .35s var(--ease)}
.logo-tekst{line-height:1.15;transition:transform .35s var(--ease)}
.logo-tekst b{display:block;color:var(--ink);font-size:22px;letter-spacing:.02em}
.logo-tekst span{display:block;color:var(--petrol);font-size:12px;letter-spacing:.36em;text-transform:uppercase}
/* scrollgedrag (gemeten): plateau 146 -> 106, logo schaalt 264 -> 238 (x0.9) */
.header.geschrompeld .logo-plateau{height:var(--header-h)}
.header.geschrompeld .logo-merk,
.header.geschrompeld .logo-tekst{transform:scale(.9)}
.nav{flex:1;display:flex;align-items:center;justify-content:flex-end;line-height:1.35;
gap:var(--nav-gap);padding-left:var(--nav-vrij);padding-right:22px}
/* Een doorlopende rij: menu-items, telefoonnummer en offerteknop staan allemaal
op dezelfde lijn met exact dezelfde tussenruimte (--nav-gap), en de rij houdt
altijd --nav-vrij afstand tot het witte logoplateau.
Fout die is voorgekomen: .nav-links had flex:1 met justify-content:center.
Bij veel menu-items vulde die groep de hele ruimte, plakte het eerste item
("Home") tegen het plateau, en viel er tegelijk een gat tussen het laatste
menu-item en het telefoonnummer. Niet terugzetten naar center. */
.nav-links{flex:0 1 auto;display:flex;align-items:center;
justify-content:flex-end;gap:var(--nav-gap)}
.nav-links>a,.nav .heeft-sub>a{color:var(--wit);text-decoration:none;font-size:17px;font-weight:500;line-height:1.35}
.nav .heeft-sub>a{display:inline-flex;align-items:center;gap:5px}
.nav-links>a,.nav .heeft-sub>a{padding-bottom:8px;border-bottom:2px solid transparent;
transition:border-color .3s var(--ease)}
.nav-links>a.actief,.nav .heeft-sub>a.actief,
.nav-links>a:hover,.nav .heeft-sub:hover>a{border-bottom-color:var(--accent)}
/* Het pijltje stond op vertical-align:1px en duwde de regelbox van de vier
dropdown-items een pixel omlaag ten opzichte van de gewone menu-items.
Met inline-flex op de link en flex op de wrapper staat alles exact gelijk. */
.nav .pijltje{font-size:13px;line-height:1;opacity:.85}
.nav .knop{padding:12px 24px 13px;margin-left:0;white-space:nowrap;line-height:1.35}
.nav .knop .knop-kort{display:none}
/* dropdown (gemeten: wit, radius 20, schaduw 0 0 10, links 15px, pad 13/20) */
.heeft-sub{position:relative}
.nav .heeft-sub{display:flex;align-items:center}
.submenu{
position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,8px);
min-width:186px;background:var(--wit);border-radius:20px;overflow:hidden;
box-shadow:0 0 10px rgba(0,0,0,.10);list-style:none;
opacity:0;visibility:hidden;
transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.heeft-sub:hover .submenu,.heeft-sub:focus-within .submenu{
opacity:1;visibility:visible;transform:translate(-50%,0);
}
.submenu a{
display:block;padding:13px 20px;font-size:15px;color:var(--ink);
text-decoration:none;border:0;white-space:nowrap;
transition:background-color .3s var(--ease);
}
.submenu a:hover{background:#f3f6f0;color:var(--petrol)}
@media(max-width:1360px){:root{--nav-gap:15px}
.nav-links>a,.nav .heeft-sub>a{font-size:15px}
.nav .knop{font-size:15px;padding:11px 18px 12px}}
@media(max-width:1200px){.nav-links{display:none}
.nav{justify-content:flex-end}}
/* ---------- hamburger en mobiel menu ---------- */
.hamburger{
display:none;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;margin-left:14px;background:none;border:0;cursor:pointer;
flex-shrink:0;
}
.hamburger span{display:block;width:24px;height:2px;background:var(--wit);
margin-inline:auto;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .hamburger span:nth-child(2){opacity:0}
.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1200px){.hamburger{display:flex}}
.mobiel-menu{
position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;
background:var(--ink);overflow-y:auto;padding:18px 22px 90px;
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.menu-open .mobiel-menu{opacity:1;visibility:visible;transform:none}
.menu-open{overflow:hidden}
.mobiel-menu a{display:block;color:var(--wit);text-decoration:none;
font-size:17px;font-weight:600;padding:14px 6px;
border-bottom:1px solid rgba(255,255,255,.10)}
.mobiel-menu details{border-bottom:1px solid rgba(255,255,255,.10)}
.mobiel-menu summary{list-style:none;cursor:pointer;color:var(--wit);
font-size:17px;font-weight:600;padding:14px 6px;position:relative}
.mobiel-menu summary::-webkit-details-marker{display:none}
.mobiel-menu summary::after{content:"\25BE";position:absolute;right:10px;
color:var(--accent);transition:transform .3s var(--ease)}
.mobiel-menu details[open] summary::after{transform:rotate(180deg)}
.mobiel-menu details a{font-weight:400;font-size:15.5px;padding:11px 6px 11px 20px;
color:rgba(255,255,255,.85);border-bottom:0}
.mobiel-menu details ul{list-style:none;padding-bottom:8px}
.mobiel-menu .menu-offerte{margin-top:20px;background:var(--accent);border:0;
border-radius:12px;text-align:center;font-size:17px;padding:16px}
.mobiel-menu .menu-social{display:flex;justify-content:center;gap:14px;
margin-top:22px;border:0}
.mobiel-menu .menu-social a{display:grid;place-items:center;padding:0;border-bottom:0}
.mobiel-menu .menu-social a.s-fb{border:2px solid #1877F2}
.mobiel-menu .menu-social a.s-ig{padding:2px}
.mobiel-menu .menu-social a.s-li{border:2px solid #0A66C2}
.mobiel-menu .menu-social a.s-tt{padding:2px}
.mobiel-menu .s-tt span{background:var(--ink)}
.mobiel-menu .menu-score{margin-top:20px;text-align:center}
/* hero: subregel en knoppen (conversie, vast onderdeel) */
.hero-sub{color:var(--wit);font-size:17px;line-height:1.6;max-width:620px;margin:14px auto 0;opacity:.95;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero-knoppen{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.knop-hero-omlijnd{background:transparent;border:2px solid rgba(255,255,255,.85);color:var(--wit)}
.knop-hero-omlijnd:hover{background:rgba(255,255,255,.16)}
@media(max-width:640px){.hero-sub{font-size:15px;padding:0 20px}}
/* telefoonnummer in de navigatie (alleen op brede schermen) */
.nav-tel{display:none;align-items:center;gap:8px;color:var(--wit);font-weight:600;white-space:nowrap;font-size:15px;
line-height:1.35;padding-bottom:8px;border-bottom:2px solid transparent}
.nav-tel svg{width:16px;height:16px;stroke:var(--wit)}
@media(min-width:1240px){
.nav-tel{display:inline-flex;margin:0}
.nav-links>a,.nav .heeft-sub>a{white-space:nowrap}
}
/* keurmerkenstrook: skill vult echte logo's in EIGEN kleuren in */
.keurmerk-strook{margin-top:clamp(36px,4vw,52px);text-align:center}
.keurmerk-intro{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a949a;margin-bottom:16px}
.keurmerk-logos{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.keurmerk-vak{display:grid;place-items:center;width:124px;height:56px;border:1px solid #e6ebe2;border-radius:10px;color:#a8aea3;font-size:12px;letter-spacing:.06em}
/* bedanktpagina: stappen als blok gecentreerd, regels links */
.bedankt-stappen{list-style:none;width:fit-content;margin:0 auto;padding:0;text-align:left;display:grid;gap:12px}
.bedankt-stappen li{display:flex;gap:10px;align-items:flex-start}
.bedankt-stappen li::before{content:"\2713";color:var(--groen-vink);font-weight:700;flex:0 0 auto}
.mobiel-menu .s-ig span{background:var(--ink)}
.mobiel-menu .menu-social{display:flex;justify-content:center;gap:14px;
margin-top:22px;border:0}
.mobiel-menu .menu-social a{display:grid;place-items:center;padding:0;border-bottom:0}
.mobiel-menu .menu-social a.s-fb{border:2px solid #1877F2}
.mobiel-menu .menu-social a.s-ig{padding:2px}
.mobiel-menu .menu-social a.s-li{border:2px solid #0A66C2}
.mobiel-menu .menu-social a.s-tt{padding:2px}
.mobiel-menu .s-tt span{background:var(--ink)}
.mobiel-menu .menu-score{margin-top:20px;text-align:center}
/* hero: subregel en knoppen (conversie, vast onderdeel) */
.hero-sub{color:var(--wit);font-size:17px;line-height:1.6;max-width:620px;margin:14px auto 0;opacity:.95;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero-knoppen{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.knop-hero-omlijnd{background:transparent;border:2px solid rgba(255,255,255,.85);color:var(--wit)}
.knop-hero-omlijnd:hover{background:rgba(255,255,255,.16)}
@media(max-width:640px){.hero-sub{font-size:15px;padding:0 20px}}
/* keurmerkenstrook: skill vult echte logo's in EIGEN kleuren in */
.keurmerk-strook{margin-top:clamp(36px,4vw,52px);text-align:center}
.keurmerk-intro{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a949a;margin-bottom:16px}
.keurmerk-logos{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.keurmerk-vak{display:grid;place-items:center;width:124px;height:56px;border:1px solid #e6ebe2;border-radius:10px;color:#a8aea3;font-size:12px;letter-spacing:.06em}
/* bedanktpagina: stappen als blok gecentreerd, regels links */
.bedankt-stappen{list-style:none;width:fit-content;margin:0 auto;padding:0;text-align:left;display:grid;gap:12px}
.bedankt-stappen li{display:flex;gap:10px;align-items:flex-start}
.bedankt-stappen li::before{content:"\2713";color:var(--groen-vink);font-weight:700;flex:0 0 auto}
.mobiel-menu .s-ig span{background:var(--ink)}
/* ---------- zwevende aanvraagknop (mobiel, vaste DPS-regel) ---------- */
.zwevend-knop{
position:fixed;left:14px;bottom:14px;z-index:48;display:none;
align-items:center;gap:8px;background:var(--accent);color:var(--wit);
text-decoration:none;font-weight:700;font-size:15px;
border-radius:999px;padding:13px 20px;
box-shadow:0 10px 26px -8px rgba(44,58,43,.55);
}
.zwevend-knop svg{width:16px;height:16px}
@media(max-width:900px){.zwevend-knop{display:inline-flex}}
/* whatsapp-knop rechtsonder (elke breedte, vast onderdeel) */
.bel-knoppen{
position:fixed;right:14px;bottom:14px;z-index:48;display:flex;
flex-direction:column;gap:10px;
}
.bel-knop{
width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
box-shadow:0 10px 26px -8px rgba(44,58,43,.55);text-decoration:none;
}
.bel-knop svg{width:24px;height:24px}
.bel-wa{background:#25D366}
/* ---------- schermvullende kop: header + hero + usp-balk = precies 1 scherm ---------- */
.schermvullend{
min-height:100svh;display:flex;flex-direction:column;
padding-top:var(--header-h);
}
.schermvullend .hero{flex:1;height:auto;min-height:300px;margin-top:0}
/* eerste scherm: hero + usp + welkom (met knoppen) altijd samen in beeld.
De hero is maximaal 700px en krimpt automatisch als het scherm lager is;
de wrapper is wit zodat de groene sectie nooit boven de vouw komt. */
.eerste-scherm{min-height:100svh;background:var(--wit);
display:flex;flex-direction:column}
.eerste-scherm .hero{flex:1 1 auto;height:auto;max-height:700px;min-height:270px;margin-top:0}
.eerste-scherm .sectie-wit{flex:0 0 auto;padding:34px 24px 46px}
@media(max-height:860px){
.usp-balk{padding-top:20px}
.eerste-scherm .sectie-wit{padding:24px 24px 34px}
.eerste-scherm .sectie-wit h2{font-size:26px}
.eerste-scherm .sectie-wit .kop-blok p{font-size:14px;margin-top:8px}
.eerste-scherm .welkom-acties{margin-top:16px}
}
@media(max-height:700px){
.eerste-scherm .hero{min-height:250px}
.eerste-scherm .hero-inhoud{padding:20px}
.eerste-scherm .hero-label{font-size:15px;margin-bottom:8px}
.eerste-scherm .hero-titel{font-size:22px;min-height:0;max-width:320px}
.eerste-scherm .sectie-wit{padding:18px 24px 26px}
.eerste-scherm .sectie-wit h2{font-size:22px}
.eerste-scherm .sectie-wit .kop-blok p{font-size:12.5px;margin-top:6px}
.eerste-scherm .welkom-acties{margin-top:12px}
.eerste-scherm .welkom-acties .knop{padding:9px 15px 10px;font-size:14px}
.eerste-scherm .welkom-acties .tekstlink{font-size:14px}
.usp-balk{padding-top:14px;padding-bottom:2px}
.usp-c{padding:2px 14px}
.usp-c b{font-size:18px}
.usp-c span{font-size:11.5px}
}
/* extreem lage schermen: introzin vervalt zodat kop en knoppen in beeld blijven */
@media(max-height:672px){
.eerste-scherm .hero{min-height:225px}
.eerste-scherm .sectie-wit .kop-blok p{display:none}
.eerste-scherm .sectie-wit .kop-blok{margin-bottom:0}
}
.usp-balk{background:var(--wit);padding:30px 24px 6px}
.usp-binnen{max-width:1200px;margin-inline:auto}
/* welkom-teksten in de witte balk, met de usp-rij als onderste regel */
.welkom-in-balk{text-align:center;max-width:850px;margin-inline:auto}
.welkom-in-balk h2{font-size:30px}
.welkom-in-balk p{margin:10px auto 0;color:#4a5446;max-width:790px}
.welkom-in-balk .welkom-acties{margin-top:20px}
.usp-rand{border-top:1px solid rgba(44,58,43,.10);margin-top:24px;padding-top:18px}
/* lage schermen: compacter zodat alles in beeld blijft */
@media(max-height:820px){
.usp-balk{padding-top:22px}
.welkom-in-balk h2{font-size:24px}
.welkom-in-balk p{font-size:14px;margin-top:6px}
.welkom-in-balk .welkom-acties{margin-top:14px}
.welkom-in-balk .knop{padding:10px 18px 11px;font-size:15px}
.usp-rand{margin-top:16px;padding-top:12px}
.usp-c b{font-size:22px}
}
/* heel lage schermen en telefoons: extra compact */
@media(max-height:680px),(max-width:640px){
.schermvullend .hero{min-height:260px}
.usp-balk{padding-top:18px;padding-bottom:14px}
.welkom-in-balk h2{font-size:21px}
.welkom-in-balk p{font-size:13px;line-height:1.45}
.welkom-in-balk .welkom-acties{margin-top:12px;gap:16px}
.welkom-in-balk .knop{padding:9px 15px 10px;font-size:14px}
.welkom-in-balk .tekstlink{font-size:14px}
.usp-rand{margin-top:12px;padding-top:10px}
.usp-c{padding:2px 14px}
.usp-c b{font-size:18px}
.usp-c span{font-size:11.5px}
}
@media(max-height:668px){
.schermvullend .hero{min-height:236px}
.schermvullend .hero-inhoud{padding:24px}
.schermvullend .hero-label{font-size:15px;margin-bottom:10px}
.schermvullend .hero-titel{font-size:24px;min-height:0;max-width:320px}
}
/* variant A: iconen met tekst */
.usp-iconen{display:flex;justify-content:center;align-items:center;gap:clamp(20px,3.5vw,60px);flex-wrap:wrap}
.usp-item{display:flex;align-items:center;gap:12px;text-align:left}
.usp-ic{flex:0 0 44px;width:44px;height:44px;border-radius:12px;
background:linear-gradient(135deg,var(--accent),#3f7c2a);display:grid;place-items:center}
.usp-ic svg{width:20px;height:20px;stroke:#fff;fill:none}
.usp-item b{display:block;font-size:15px;color:var(--ink)}
.usp-item span{display:block;font-size:13px;color:#69727d}
/* variant B: vinkjesregel met scheidingslijntjes */
.usp-vinkjes{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}
.usp-v{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink);
padding:8px 26px;border-right:1px solid rgba(44,58,43,.12)}
.usp-v:last-child{border-right:0}
.usp-v svg{width:17px;height:17px;flex:0 0 17px}
/* variant C: cijfers */
.usp-cijfers{display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap}
@media(max-width:640px){
.usp-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:14px 0}
.usp-cijfers .usp-c{border:0;padding:6px 8px}
}
@media(max-width:640px){
.usp-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:14px 0}
.usp-cijfers .usp-c{border:0;padding:6px 8px}
}
.usp-c{text-align:center;padding:4px clamp(20px,3.5vw,44px);border-right:1px solid rgba(44,58,43,.12)}
.usp-c:last-child{border-right:0}
.usp-c b{display:block;font-size:26px;font-weight:700;color:var(--petrol);line-height:1.2}
.usp-c span{display:block;font-size:13px;color:#69727d;margin-top:2px}
/* variant D: pill-badges */
.usp-pills{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.usp-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent);
border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;color:var(--ink)}
.usp-pill svg{width:15px;height:15px;flex:0 0 15px}
/* ---------- hero-slider homepage (gemeten: 700px, slide 900ms, interval 5000ms) ---------- */
.hero{
position:relative;height:700px;min-height:560px;
overflow:hidden;background:var(--petrol);
display:grid; /* de inhoud rekt mee en centreert ook als de hero flexibel is */
}
.hero-baan{
position:absolute;inset:0;display:flex;height:100%;
will-change:transform;
transition:transform .9s cubic-bezier(.25,.1,.25,1);
}
.hero-baan.geen-anim{transition:none}
.hero-dia{
position:relative;flex:0 0 100%;height:100%;
background-size:cover;background-position:right center;
}
/* gemeten uit de pixels: links dicht petrol, naar rechts steeds transparanter */
.hero-dia::after{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,#35682b 0%,#35682b 29%,rgba(53,104,43,.80) 40%,
rgba(53,104,43,.45) 55%,rgba(53,104,43,.20) 75%,rgba(53,104,43,.14) 100%)}
/* dunne verticale lijnen op 30 / 47.5 / 65 / 82.5% (gemeten) */
.hero-lijnen{
position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),
linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),
linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),
linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10));
background-size:1px 100%;background-repeat:no-repeat;
background-position:30% 0,47.5% 0,65% 0,82.5% 0;
}
.hero-inhoud{
position:relative;z-index:3;height:100%;
display:grid;place-items:center;text-align:center;color:var(--wit);
padding:48px 24px;
}
/* Google-score linksonder in de hero: los op de foto, zonder vlak */
.google-badge{
position:absolute;bottom:26px;left:26px;z-index:4;
display:flex;align-items:center;gap:9px;
font-size:13.5px;color:var(--wit);white-space:nowrap;
}
.google-badge .g-logo{width:17px;height:17px;flex:0 0 17px}
/* losse score-regel voor in secties */
.g-score{display:inline-flex;flex-direction:column;align-items:center;gap:3px;
font-size:14px;color:var(--ink)}
.g-score .gs-rij{display:inline-flex;align-items:center;gap:9px}
.g-score .g-logo{width:18px;height:18px;flex:0 0 18px}
.g-score .sterren{font-size:14px;letter-spacing:1.5px;margin:0}
.g-score .gs-sub{font-size:12.5px;opacity:.8}
.g-score.op-donker{color:var(--wit)}
.google-badge .sterren{font-size:13px;margin:0;letter-spacing:1.5px}
@media(max-width:900px){
.google-badge{left:50%;bottom:24px;transform:translateX(-50%);
font-size:11.5px;padding:7px 13px;gap:7px}
.google-badge .g-logo{width:14px;height:14px;flex-basis:14px}
.google-badge .sterren{font-size:11px;letter-spacing:1px}
}
.hero-label{display:block;font-size:17px;font-weight:400;margin-bottom:22px}
.hero-titel{
font-size:34px;line-height:1.5;font-weight:700;text-transform:uppercase;
max-width:370px;margin-inline:auto;min-height:3em;
}
.hero-schaduwtekst{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:440px;color:var(--wit);opacity:.10;pointer-events:none;
font-size:28px;line-height:1.5;font-weight:700;text-transform:uppercase;text-align:center;
}
.schaduw-l{left:-70px}
.schaduw-r{right:-70px}
/* pijltjespaar gecentreerd op de verticale lijn van 30% (gemeten: ±50px) */
.hero-pijl{
position:absolute;top:204px;z-index:4;
background:none;border:0;cursor:pointer;padding:14px;
color:rgba(255,255,255,.46);transition:color .3s var(--ease);
}
.hero-pijl:hover{color:rgba(255,255,255,.9)}
.hero-pijl svg{width:30px;height:15px;display:block}
.pijl-l{right:calc(70% + 21px)}
.pijl-r{left:calc(30% + 21px)}
@media(max-width:900px){
.hero-schaduwtekst{display:none}
/* op de telefoon: geen pijltjes; de Google-score staat op hun plek */
.hero-pijl{display:none}
}
/* ---------- page-hero's subpagina's (gemeten) ---------- */
/* gemeten: foto als achtergrond met petrol-laag op 95% dekking eroverheen */
.pagina-hero{
position:relative;padding-top:var(--header-h);
background:var(--petrol) url('../img/hero-2.webp') center/cover no-repeat;
display:grid;place-items:center;text-align:center;
}
.pagina-hero::before{content:"";position:absolute;inset:0;
background:var(--petrol);opacity:.95}
/* geen groene gloed maar een heel lichte donkere waas voor het contrast */
.pagina-hero.zonder-gloed::before{background:rgba(0,0,0,.28);opacity:1}
/* projectpagina's: de balk groeit met de inhoud mee en de titel komt los
van het witte logovlak */
.pagina-hero.project-kop{height:auto;min-height:270px;padding:40px 20px 34px}
@media(max-width:640px){.pagina-hero.project-kop{min-height:200px;padding:34px 16px 30px}}
.pagina-hero>*{position:relative;z-index:2}
.pagina-hero h1{
position:relative;z-index:2;
color:var(--wit);font-size:47px;font-weight:700;text-transform:uppercase;
letter-spacing:.01em;
}
.salie-hero{
padding-top:var(--header-h);background:var(--salie);
padding:clamp(56px,7vw,96px) 24px;
}
.salie-hero h1{font-size:40px;font-weight:600;color:var(--ink)}
@media(max-width:640px){
.pagina-hero h1{font-size:32px}
.salie-hero h1{font-size:30px}
}
/* ---------- product-hero (gemeten: petrol 540, titel 42, witte kaart rechts) ---------- */
.product-hero{
background:var(--petrol);
padding:calc(var(--header-h) + 64px) 24px 56px;
}
.product-hero .binnen>div:first-child{text-align:center}
.product-hero .binnen{
max-width:1140px;margin-inline:auto;
display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;
}
.product-hero h1{
color:var(--wit);font-size:42px;font-weight:700;text-transform:uppercase;margin-bottom:28px;
}
.spec-lijst{list-style:none;color:var(--wit);margin-bottom:0;
width:fit-content;margin-inline:auto;text-align:left}
.spec-lijst li{
display:flex;align-items:center;gap:14px;padding:15px 0;font-size:16px;
border-bottom:1px solid rgba(255,255,255,.18);
}
.spec-lijst li:last-child{border-bottom:0}
.spec-lijst svg{flex:0 0 20px;height:20px;opacity:.9}
.product-kaart-beeld{
background:var(--wit);border-radius:30px;box-shadow:var(--schaduw);
padding:36px;min-height:380px;display:grid;place-items:center;
color:#a3ad9a;font-size:13px;letter-spacing:.08em;
}
@media(max-width:860px){
.product-hero .binnen{grid-template-columns:1fr}
.product-hero h1{font-size:30px}
.product-kaart-beeld{margin:0}
}
/* ---------- secties ---------- */
.sectie{padding:clamp(64px,7vw,100px) 24px}
.container{max-width:1140px;margin-inline:auto}
.sectie-wit{background:var(--wit)}
.sectie-grijs{background:var(--bg)}
.sectie-tint{background:var(--tint)}
.sectie-tint2{background:var(--tint2)}
.sectie-salie{background:var(--salie)}
.kop-blok{max-width:790px;margin-bottom:clamp(36px,5vw,56px)}
.kop-blok.midden{margin-inline:auto;text-align:center}
.kop-blok p{margin-top:14px;color:#4a5446}
.welkom-acties{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:28px}
/* ---------- kaarten en carrousel ---------- */
.carrousel{position:relative;padding:0 56px}
@media(max-width:640px){.carrousel{padding:0 34px}}
.kaarten{
display:grid;grid-auto-flow:column;
grid-auto-columns:calc((100% - 56px)/3);gap:28px;
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:6px;
}
.kaarten::-webkit-scrollbar{display:none}
.kaarten>*{scroll-snap-align:start}
@media(max-width:900px){.kaarten{grid-auto-columns:calc((100% - 28px)/2)}}
@media(max-width:640px){.kaarten{grid-auto-columns:100%;gap:18px}}
.kaart{
background:var(--wit);border-radius:var(--r-kaart);padding:26px 26px 30px;
box-shadow:var(--schaduw);text-align:center;
display:flex;flex-direction:column;
transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.kaart:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.kaart-beeld{
height:190px;border-radius:14px;margin-bottom:24px;
background:#f3f6f0;
display:grid;place-items:center;color:#a3ad9a;font-size:13px;letter-spacing:.08em;
}
.kaart h3{color:var(--ink);margin-bottom:16px}
.kaart ul{
width:fit-content;margin-inline:auto;text-align:left;
list-style:none;padding:0;margin-bottom:22px;
}
.kaart ul li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#4a5446;padding:4px 0}
.kaart ul li::before{
content:"";flex:0 0 16px;height:16px;margin-top:3px;
background:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.kaart-pijl{
width:46px;height:46px;border-radius:50%;background:var(--accent);
display:grid;place-items:center;margin:auto auto 0;text-decoration:none;
transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.kaart-pijl:hover{background:#4a9139;transform:translateX(3px)}
.kaart-pijl svg{width:18px;height:18px}
/* vast grid (categoriepagina's): geen carrousel */
.kaart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.kaart-grid.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.kaart-grid.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.kaart-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kaart-grid,.kaart-grid.vier{grid-template-columns:1fr;gap:18px}}
.car-pijl{
position:absolute;top:50%;transform:translateY(-50%);
background:none;border:0;cursor:pointer;padding:10px;
color:#7f9174;transition:color .3s var(--ease);
}
.car-pijl:hover{color:var(--petrol)}
.car-pijl svg{width:14px;height:24px;display:block}
.car-l{left:6px}.car-r{right:6px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:30px}
.dots span{width:6px;height:6px;border-radius:50%;background:rgba(88,168,71,.35);transition:background .3s}
.dots span.actief{background:var(--accent)}
/* ---------- "wat ons uniek maakt" (4 varianten) ---------- */
/* variant A: zes iconenkaarten */
.uniek-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.uniek-kaarten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.uniek-kaarten{grid-template-columns:1fr;gap:18px}}
.uniek-kaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:34px 26px;text-align:center;
transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.uniek-kaart:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.uniek-kaart h3{font-size:19px;margin:16px 0 10px}
.uniek-kaart p{color:#4a5446;font-size:15px}
/* variant B: split met foto en vinkjes */
.uniek-vinkjes{width:fit-content;margin-inline:auto;text-align:left;list-style:none;margin-top:18px}
.uniek-vinkjes li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:15.5px;color:#4a5446}
.uniek-vinkjes li::before{content:"";flex:0 0 17px;height:17px;margin-top:3px;
background:url('data:image/svg+xml;utf8,') center/contain no-repeat}
/* variant C: drie pijlers met groot nummer */
.pijlers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
@media(max-width:860px){.pijlers{grid-template-columns:1fr}}
.pijler{text-align:center}
.pijler-nr{font-size:64px;font-weight:700;color:rgba(88,168,71,.28);line-height:1}
.pijler h3{font-size:20px;margin:10px 0 10px}
.pijler p{color:#4a5446;font-size:15px}
/* variant D: donkere band met vier punten */
.uniek-donker{position:relative;background:var(--petrol) url('../img/hero-1.webp') center/cover no-repeat}
.uniek-donker::before{content:"";position:absolute;inset:0;background:var(--petrol);opacity:.95}
.uniek-donker .container{position:relative;z-index:2}
.uniek-donker h2,.uniek-donker .kop-blok p{color:var(--wit)}
.uniek-donker .kop-blok p{opacity:.85}
.uniek-punten{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:1000px){.uniek-punten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.uniek-punten{grid-template-columns:1fr}}
.uniek-punt{text-align:center;color:var(--wit)}
.uniek-punt .c-icoon{margin-bottom:14px}
.uniek-punt h3{color:var(--wit);font-size:18px;margin-bottom:8px}
.uniek-punt p{color:rgba(255,255,255,.75);font-size:14.5px}
/* ---------- stappenplan naar tevredenheid (4 varianten) ---------- */
/* variant A: horizontale tijdlijn */
.tijdlijn{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tijdlijn::before{content:"";position:absolute;top:26px;left:12%;right:12%;
height:2px;background:rgba(88,168,71,.35)}
.tl-stap{position:relative;text-align:center;padding-top:0}
.tl-nr{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;
background:var(--accent);color:var(--wit);font-weight:700;font-size:20px;
display:grid;place-items:center;margin:0 auto 18px;
box-shadow:0 0 0 6px var(--wit)}
.tl-stap h3{font-size:18px;margin-bottom:8px}
.tl-stap p{color:#4a5446;font-size:14.5px}
@media(max-width:860px){.tijdlijn{grid-template-columns:1fr;gap:34px}
.tijdlijn::before{left:50%;right:auto;top:26px;bottom:26px;width:2px;height:auto;transform:translateX(-50%)}}
/* variant B: verticale zigzag-tijdlijn */
.tijdlijn-vert{position:relative;max-width:860px;margin-inline:auto;overflow-x:clip}
.tijdlijn-vert::before{content:"";position:absolute;top:10px;bottom:10px;left:50%;
width:2px;background:rgba(88,168,71,.35);transform:translateX(-50%)}
.tlv-rij{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;
align-items:center;margin-bottom:34px}
.tlv-rij:last-child{margin-bottom:0}
.tlv-nr{grid-column:2;justify-self:center;width:52px;height:52px;border-radius:50%;
background:var(--accent);color:var(--wit);font-weight:700;font-size:20px;
display:grid;place-items:center;box-shadow:0 0 0 6px var(--wit);position:relative;z-index:2}
.tlv-kaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:24px 26px;text-align:center}
.tlv-kaart h3{font-size:18px;margin-bottom:6px}
.tlv-kaart p{color:#4a5446;font-size:14.5px}
.tlv-rij:nth-child(odd) .tlv-kaart{grid-column:1;grid-row:1}
.tlv-rij:nth-child(even) .tlv-kaart{grid-column:3;grid-row:1}
@media(max-width:720px){
.tijdlijn-vert::before{left:26px}
.tlv-rij{grid-template-columns:52px 1fr;gap:16px}
.tlv-nr{grid-column:1}
.tlv-rij:nth-child(odd) .tlv-kaart,.tlv-rij:nth-child(even) .tlv-kaart{grid-column:2;grid-row:1}}
/* variant C: kaarten met pijlen ertussen */
.stappen-pijl{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
gap:14px;align-items:stretch}
.sp-kaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:30px 20px;text-align:center;position:relative}
.sp-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
background:var(--petrol);color:var(--wit);border-radius:999px;
font-size:12px;font-weight:700;letter-spacing:.1em;padding:5px 14px}
.sp-kaart .c-icoon{margin:8px auto 14px}
.sp-kaart h3{font-size:17px;margin-bottom:8px}
.sp-kaart p{color:#4a5446;font-size:14px}
.sp-pijl{align-self:center;color:#a3b39a}
.sp-pijl svg{width:22px;height:16px}
@media(max-width:960px){.stappen-pijl{grid-template-columns:1fr}
.sp-pijl{transform:rotate(90deg);justify-self:center}}
/* variant D: donkere band met stappenlijst naast foto */
.stappen-donker{position:relative;background:var(--petrol) url('../img/hero-2.webp') center/cover no-repeat}
.stappen-donker::before{content:"";position:absolute;inset:0;background:var(--petrol);opacity:.95}
.stappen-donker .container{position:relative;z-index:2}
.stappen-donker h2{color:var(--wit)}
.stappen-donker .kop-blok p{color:rgba(255,255,255,.85)}
.sd-lijst{max-width:640px;margin-inline:auto;list-style:none;position:relative}
.sd-lijst::before{content:"";position:absolute;top:12px;bottom:12px;left:26px;
width:2px;background:rgba(255,255,255,.25)}
.sd-lijst li{position:relative;display:flex;gap:22px;align-items:flex-start;padding:16px 0}
.sd-nr{position:relative;z-index:2;flex:0 0 52px;width:52px;height:52px;border-radius:50%;
background:var(--wit);color:var(--petrol);font-weight:700;font-size:20px;
display:grid;place-items:center}
.sd-lijst h3{color:var(--wit);font-size:18px;margin:4px 0 6px}
.sd-lijst p{color:rgba(255,255,255,.78);font-size:14.5px}
/* ---------- weetjes & tips (4 varianten) ---------- */
.tips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.tips-grid{grid-template-columns:1fr;gap:18px}}
/* variant A: tipkaart met foto bovenaan */
.tipkaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
overflow:hidden;text-align:center;display:flex;flex-direction:column;
transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tipkaart:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.tipkaart .beeld{aspect-ratio:16/9;overflow:hidden}
.tipkaart .beeld img{width:100%;height:100%;object-fit:cover;
transition:transform .6s var(--ease)}
.tipkaart:hover .beeld img{transform:scale(1.05)}
.tipkaart .binnen{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.tipkaart h3{font-size:19px;margin:10px 0 10px}
.tipkaart p{color:#4a5446;font-size:14.5px;margin-bottom:16px;flex:1}
/* variant B: wist-u-dat-kaarten met accentrand */
.weetkaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
border-top:4px solid var(--accent);padding:34px 28px;text-align:center;
display:flex;flex-direction:column;
transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.weetkaart:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.weetkaart .c-icoon{margin:0 auto 18px;border-radius:50%}
.weetkaart h3{font-size:19px;margin-bottom:10px}
.weetkaart p{color:#4a5446;font-size:14.5px;margin-bottom:16px;flex:1}
/* variant C: foto-overlay tipkaart */
.tip-overlay{position:relative;border-radius:var(--r-kaart);overflow:hidden;
aspect-ratio:4/5;display:flex;align-items:flex-end;text-decoration:none;
background-size:cover;background-position:center;
transition:transform .45s var(--ease)}
.tip-overlay:hover{transform:translateY(-5px)}
.tip-overlay::after{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(53,104,43,0) 30%,rgba(53,104,43,.88) 85%)}
.tip-overlay .binnen{position:relative;z-index:2;padding:26px;color:var(--wit);text-align:center;width:100%}
.tip-overlay h3{color:var(--wit);font-size:19px;margin:10px 0 8px}
.tip-overlay p{color:rgba(255,255,255,.85);font-size:14px;margin-bottom:12px}
.tip-overlay .tekstlink{color:var(--wit);border-color:rgba(255,255,255,.7)}
/* variant D: uitgelichte tip + kleinere weetjes */
.tips-magazine{display:grid;grid-template-columns:6fr 5fr;gap:28px;align-items:stretch}
@media(max-width:900px){.tips-magazine{grid-template-columns:1fr}}
.tip-groot{position:relative;border-radius:var(--r-kaart);overflow:hidden;min-height:420px;
display:flex;align-items:flex-end;background-size:cover;background-position:center}
.tip-groot::after{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(53,104,43,0) 25%,rgba(53,104,43,.9) 90%)}
.tip-groot .binnen{position:relative;z-index:2;padding:32px;color:var(--wit);text-align:center;width:100%}
.tip-groot h3{color:var(--wit);font-size:24px;margin:10px 0 10px}
.tip-groot p{color:rgba(255,255,255,.85);font-size:15px;margin-bottom:14px}
.tip-groot .tekstlink{color:var(--wit);border-color:rgba(255,255,255,.7)}
.tips-klein{display:flex;flex-direction:column;gap:28px}
.tip-klein{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:26px 26px;flex:1;display:flex;flex-direction:column;text-align:center;justify-content:center}
.tip-klein h3{font-size:18px;margin:8px 0 8px}
.tip-klein p{color:#4a5446;font-size:14px;margin-bottom:12px}
/* ---------- kennisbank- en regiokaarten ---------- */
.tip-tag{
display:inline-block;background:rgba(88,168,71,.14);color:var(--petrol);
border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;
}
.kaart .tekstlink{font-size:15px}
.kaart p.samenvatting{color:#4a5446;font-size:15px;margin-bottom:18px}
.artikel-inhoud{max-width:790px;margin-inline:auto}
.artikel-inhoud h2{margin:36px 0 12px;font-size:26px}
.artikel-inhoud p{margin-bottom:14px;color:#4a5446}
/* ---------- projectkaarten (gemeten: foto met petrol-overlay, witte titel) ---------- */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.project-grid{grid-template-columns:1fr}}
.projectkaart{
position:relative;border-radius:var(--r-kaart);overflow:hidden;
aspect-ratio:353/250;display:block;text-align:center;
text-decoration:none;background-size:cover;background-position:center;
}
/* besluit Dikkie 20-08: tekst onderin de kaart, foto bovenin zichtbaar,
donkere gloed van onderaf (zoals het vaste DPS-voorbeeld) */
.projectkaart::before{content:"";position:absolute;inset:0;
background:rgba(53,104,43,.22);transition:background .3s var(--ease)}
.projectkaart::after{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(44,58,43,0) 38%,rgba(44,58,43,.85) 100%)}
.projectkaart:hover::before{background:rgba(53,104,43,.10)}
.projectkaart .binnen{position:absolute;inset:auto 0 0 0;z-index:2;color:var(--wit);
padding:0 20px 20px}
.projectkaart h3{color:var(--wit);font-size:21px;margin-bottom:6px}
.projectkaart p{font-size:15px;opacity:.9}
/* groen regiopunt op de kaart (vast onderdeel) */
.projectkaart .regio{
display:flex;justify-content:center;align-items:center;gap:6px;
margin-top:8px;color:#a9e08a;font-size:14.5px;font-weight:600;
}
.projectkaart .regio svg{width:14px;height:14px;flex:0 0 14px}
/* ---------- splitsectie ---------- */
.split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,64px);align-items:center}
.split>div{text-align:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .knop{margin-top:26px}
.fotogrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.foto{border-radius:var(--r-kaart);aspect-ratio:4/3;overflow:hidden;background:#dbe7d2}
.foto img{width:100%;height:100%;object-fit:cover}
/* ---------- werkwijze-stappen ---------- */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.stappen{grid-template-columns:1fr}}
.stap{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:36px 28px;text-align:center}
.stap-nr{width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--wit);
font-weight:700;font-size:22px;display:grid;place-items:center;margin:0 auto 20px}
.stap h3{margin-bottom:12px}
.stap p{color:#4a5446;font-size:15px}
/* ---------- reviews: slider met avatars, zoals het origineel ---------- */
.kaarten.review-strook{padding-top:34px}
.review{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:44px 26px 26px;text-align:center;position:relative}
.review-avatar{
position:absolute;top:-31px;left:50%;transform:translateX(-50%);
width:62px;height:62px;border-radius:50%;
color:var(--wit);display:grid;place-items:center;font-weight:700;font-size:24px;
}
.g-badge{
position:absolute;right:-3px;bottom:-1px;width:22px;height:22px;
background:var(--wit);border-radius:50%;display:grid;place-items:center;
box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.g-badge svg{width:13px;height:13px}
.review-naam{display:block;font-size:16px;font-weight:600;margin-top:6px}
.review-datum{display:block;font-size:13px;color:#8a949a;margin:2px 0 10px}
.sterren{color:#f2b01e;letter-spacing:3px;font-size:18px;margin-bottom:14px}
.review p{color:#4a5446;font-size:15px;margin-bottom:0}
.review-acties{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}
.google-regel{
display:flex;flex-direction:column;align-items:center;gap:6px;
margin:34px 0 30px;font-size:15px;color:var(--ink);
}
.google-regel .gr-rij{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.google-regel .gr-sub{font-size:13px;color:#69727d}
.google-regel .g-logo{width:20px;height:20px}
.google-regel .sterren{font-size:16px;margin:0;letter-spacing:2px}
/* ---------- waarom-kaart (over-hero) ---------- */
.over-hero{padding-top:var(--header-h);background:var(--salie);overflow:hidden}
.over-hero .binnen{
max-width:1140px;margin-inline:auto;padding:clamp(48px,6vw,80px) 24px;
display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;
}
.over-hero .binnen>div{text-align:center}
.over-hero h1{font-size:40px;font-weight:600;margin-bottom:22px}
.over-hero p{margin-bottom:16px;color:#39442f}
.over-hero .knop{margin-top:12px}
.waarom-kaart{
background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:34px 32px;text-align:center;
}
.waarom-kaart h3{font-size:24px;line-height:1.35;margin-bottom:18px}
.waarom-kaart ul{width:fit-content;margin-inline:auto;text-align:left;list-style:none}
.waarom-kaart li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font-size:15px;color:#4a5446}
.waarom-kaart li::before{
content:"";flex:0 0 16px;height:16px;margin-top:3px;
background:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
@media(max-width:860px){
.over-hero .binnen{grid-template-columns:1fr}
.over-hero h1{font-size:30px}
}
/* ---------- advies-split (over) ---------- */
.advies{display:grid;grid-template-columns:1fr 1fr;margin-top:0}
@media(max-width:860px){.advies{grid-template-columns:1fr}}
/* sfeerfoto, schoon zonder gloed (besluit Dikkie 19-08) */
.advies .beeld{
position:relative;min-height:320px;
background:var(--salie) url('../img/hero-3.webp') center/cover no-repeat;
}
.advies .tekst{background:var(--accent);color:var(--wit);
padding:clamp(48px,6vw,88px) clamp(28px,5vw,72px);text-align:center}
.advies .tekst h2{color:var(--wit);margin-bottom:16px}
.advies .tekst p{opacity:.95;max-width:480px;margin:0 auto 28px}
/* ---------- direct-contactblok (naar vast DPS-voorbeeld) ---------- */
.eyebrow-pill{
display:inline-block;background:transparent;border:1px solid var(--accent);
color:var(--ink);border-radius:999px;padding:8px 20px;
text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;
margin-bottom:18px;
}
.contact-kaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1000px){.contact-kaarten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.contact-kaarten{grid-template-columns:1fr}}
.c-kaart{
background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:30px 22px;text-align:center;
transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.c-kaart:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.c-icoon{
width:54px;height:54px;border-radius:14px;margin:0 auto 16px;
background:linear-gradient(135deg,var(--accent),#3f7c2a);
display:grid;place-items:center;
}
.c-icoon svg{width:24px;height:24px;stroke:#fff;fill:none}
.c-kaart h3{font-size:18px;margin-bottom:8px}
.c-kaart .c-hoofd{display:block;font-weight:600;color:var(--ink);font-size:15px;
text-decoration:none;margin-bottom:8px}
.c-kaart p{color:#69727d;font-size:14px}
.kaart-blok{
position:relative;border-radius:var(--r-kaart);overflow:hidden;
margin-top:clamp(36px,5vw,64px);height:520px;box-shadow:var(--schaduw);
max-width:960px;margin-inline:auto;
}
.kaart-blok img{width:100%;height:100%;object-fit:cover}
.kaart-blok iframe{width:100%;height:100%;border:0;display:block}
.kaart-laden{
position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
box-shadow:0 10px 26px -8px rgba(44,58,43,.45);
}
.kaart-attributie{
position:absolute;right:8px;bottom:6px;font-size:10px;color:#555;
background:rgba(255,255,255,.75);padding:2px 7px;border-radius:6px;
}
.contact-acties{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:36px}
.knop-pil{border-radius:999px}
.knop-omlijnd{background:var(--wit);border:1.5px solid var(--ink);color:var(--ink)}
.knop-omlijnd:hover{background:#f2f2f2}
/* ---------- contactpagina (gemeten) ---------- */
.contact-sectie{background:var(--wit);padding:110px 0 0;display:grid;
grid-template-columns:60% 1fr;align-items:start}
.contact-paneel{
background:var(--salie);border-radius:0 60px 0 0;
padding:60px clamp(28px,9vw,130px);
}
.contact-paneel h2{margin-bottom:34px}
.contact-paneel input,.contact-paneel textarea{
width:100%;background:var(--wit);border:0;border-radius:8px;
padding:8px 16px;font-size:16px;font-family:inherit;color:var(--ink);
height:40px;margin-bottom:16px;display:block;
}
.contact-paneel textarea{height:106px;padding-top:10px;resize:vertical}
.contact-paneel input:focus,.contact-paneel textarea:focus{
outline:2px solid var(--accent);outline-offset:0}
.contact-paneel ::placeholder{color:#69727d}
.knop-verstuur{
display:inline-flex;align-items:center;gap:10px;
background:#35682b;color:var(--wit);border:0;cursor:pointer;
border-radius:8px;padding:18px 25px 18px 30px;font-size:16px;font-weight:500;
font-family:inherit;margin-top:16px;
transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.knop-verstuur:hover{background:#27501f;transform:translateY(-2px)}
.knop-verstuur svg{width:18px;height:12px}
.contact-info{padding:40px clamp(24px,4vw,72px) 60px}
.contact-item{
display:flex;gap:22px;align-items:flex-start;
padding:30px 0;border-bottom:1px solid rgba(44,58,43,.12);
}
.contact-item:last-child{border-bottom:0}
.contact-cirkel{
flex:0 0 61px;height:61px;border-radius:50%;background:var(--accent);
display:grid;place-items:center;
}
.contact-cirkel svg{width:22px;height:14px}
.contact-item h3{font-size:20px;margin-bottom:6px}
.contact-item p,.contact-item a{color:#4a5446;font-size:16px;text-decoration:none}
.contact-item a:hover{color:var(--petrol)}
@media(max-width:900px){
.contact-sectie{grid-template-columns:1fr;padding-top:56px}
.contact-paneel{border-radius:0 40px 0 0}
.contact-info{padding:40px 24px}
}
/* ---------- formulieren ---------- */
.form-kaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:clamp(28px,4vw,44px)}
.form-rij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.form-rij{grid-template-columns:1fr}}
.veld{margin-bottom:18px;text-align:left}
.veld label{display:block;font-size:15px;font-weight:600;margin-bottom:7px}
.veld input,.veld textarea,.veld select{
width:100%;padding:13px 16px;font-size:16px;font-family:inherit;color:var(--ink);
border:1px solid #dde5d6;border-radius:var(--r-knop);background:var(--wit);
transition:border-color .3s var(--ease);
}
.veld input:focus,.veld textarea:focus,.veld select:focus{
outline:none;border-color:var(--accent);
}
.gotcha{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
/* ---------- cta-blok: valt half over de footer (gemeten: 90px overlap) ---------- */
.cta-strook{padding:0 24px;position:relative;z-index:2;margin-bottom:-90px}
/* de strook draagt de achtergrond van de sectie erboven, maar alleen tot waar
de overlap met de footer begint: de onderste 90px blijft doorzichtig zodat
de groene balk over de zwarte footer valt */
.cta-strook.cta-wit{background:linear-gradient(var(--wit) calc(100% - 90px),rgba(255,255,255,0) calc(100% - 90px))}
.cta-strook.cta-tint2{background:linear-gradient(var(--tint2) calc(100% - 90px),rgba(222,228,227,0) calc(100% - 90px))}
.cta-strook.cta-grijs{background:linear-gradient(var(--bg) calc(100% - 90px),rgba(247,247,247,0) calc(100% - 90px))}
.cta-blok{
max-width:1140px;margin-inline:auto;
/* diep logogroen i.p.v. het felle accent: witte tekst blijft leesbaar op dit
grote vlak (vaste DPS-regel: nooit wit op een fel accent) */
background:linear-gradient(135deg,#4a9139,var(--petrol));border-radius:40px;
padding:clamp(48px,6vw,72px) clamp(28px,6vw,96px);
text-align:center;color:var(--wit);
}
.cta-blok h2{color:var(--wit);font-size:30px;max-width:640px;margin-inline:auto}
.cta-blok p{margin:16px auto 32px;opacity:.95}
.cta-blok .knop{margin:0 6px 10px}
/* ---------- footer: altijd zwart (vaste DPS-regel) ---------- */
.footer{background:#000000;color:rgba(255,255,255,.72);
padding:clamp(56px,7vw,80px) 24px 0}
.cta-strook + .footer{padding-top:calc(clamp(56px,7vw,80px) + 90px)}
.footer-boven{
max-width:1360px;margin-inline:auto;
display:grid;grid-template-columns:1.5fr 1.2fr 1fr 1fr 1fr;
gap:44px;padding-bottom:48px;
}
@media(max-width:1100px){.footer-boven{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:640px){.footer-boven{grid-template-columns:1fr}}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:22px;text-decoration:none}
.footer .footer-logo .logo-merk{width:44px;height:44px;font-size:20px;
border-radius:11px;color:#ffffff;line-height:1;display:grid;place-items:center}
.footer-logo b{color:var(--wit);font-size:20px;letter-spacing:.02em}
.footer-logo span{display:block;color:rgba(255,255,255,.55);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.footer h4{color:var(--wit);font-size:17px;font-weight:600;margin-bottom:18px}
.footer ul{list-style:none}
.footer li{padding:6px 0;font-size:15px}
.footer a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .3s var(--ease)}
.footer a:hover{color:var(--wit)}
.footer .vink{display:flex;gap:10px;align-items:flex-start}
.footer .vink::before{
content:"";flex:0 0 15px;height:15px;margin-top:4px;
background:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.footer .met-icoon{display:flex;gap:10px;align-items:flex-start}
.footer .met-icoon svg{flex:0 0 15px;height:15px;margin-top:4px;stroke:rgba(255,255,255,.6)}
/* social: elk kanaal in zijn eigen merkkleur met cirkelrand (vaste DPS-regel) */
.social{display:flex;gap:12px;margin-top:22px}
.social a{
flex:0 0 40px;width:40px;height:40px;border-radius:50%;
display:grid;place-items:center;
transition:transform .3s var(--ease);
}
.social a:hover{transform:translateY(-2px)}
.s-fb{border:2px solid #1877F2}
.s-fb svg{width:18px;height:18px;fill:#1877F2;display:block}
.s-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);padding:2px}
.s-ig span{
width:100%;height:100%;border-radius:50%;background:#000;
display:grid;place-items:center;
}
.s-ig svg{width:18px;height:18px;display:block}
.s-li{border:2px solid #0A66C2}
.s-li svg{width:17px;height:17px;fill:#0A66C2;display:block}
.s-tt{background:linear-gradient(45deg,#25F4EE,#FE2C55);padding:2px}
.s-tt span{
width:100%;height:100%;border-radius:50%;background:#000;
display:grid;place-items:center;
}
.s-tt svg{width:17px;height:17px;display:block}
.footer-onder{
max-width:1360px;margin-inline:auto;
border-top:1px solid rgba(255,255,255,.12);
padding:22px 0;font-size:13.5px;color:rgba(255,255,255,.55);
display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:space-between;
}
.footer-onder nav{display:flex;flex-wrap:wrap;gap:14px 30px}
/* mobiel: alleen DPS-regel + copyright, gecentreerd (de juridische links
staan hoger in de footer onder Service) */
@media(max-width:640px){
.footer-onder{flex-direction:column-reverse;justify-content:center;
text-align:center;gap:8px}
.footer-onder nav{justify-content:center}
.footer-onder nav a{display:none}
}
/* mobiel: alleen DPS-regel + copyright, gecentreerd (de juridische links
staan hoger in de footer onder Service) */
@media(max-width:640px){
.footer-onder{flex-direction:column-reverse;justify-content:center;
text-align:center;gap:8px}
.footer-onder nav{justify-content:center}
.footer-onder nav a{display:none}
}
.footer-onder a{color:rgba(255,255,255,.55)}
.footer-onder a:hover{color:var(--wit)}
/* klikbare makerslink: valt op tussen de gedempte foottekst */
.footer-onder a.dps-link{color:var(--salie);text-decoration:underline;text-underline-offset:3px}
.footer-onder a.dps-link:hover{color:var(--wit)}
/* de mobiele regel verbergt alle nav-links, maar de DPS-link blijft altijd staan */
.footer-onder nav a.dps-link{display:inline}
/* ---------- artikelpagina's (kennisbank) ---------- */
.artikel-meta{display:flex;justify-content:center;align-items:center;gap:14px;
flex-wrap:wrap;padding:0 16px;
margin-top:14px;color:rgba(255,255,255,.85);font-size:13.5px}
@media(max-width:640px){
.artikel-meta{display:grid;grid-template-columns:auto auto;justify-content:center;
gap:8px 16px;align-items:center}
.artikel-meta>*:nth-child(3){grid-column:1/-1;justify-self:center}
}
.pagina-hero h1.klein{font-size:38px;text-transform:none}
@media(max-width:640px){.pagina-hero h1.klein{font-size:24px}}
.artikel-meta .tip-tag{margin:0;background:rgba(255,255,255,.18);color:#fff}
.artikel-kop-hero{position:relative;padding-top:var(--header-h);
min-height:340px;display:grid;place-items:center;text-align:center;
background-size:cover;background-position:center;padding:56px 24px}
.artikel-kop-hero::before{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(53,104,43,.55),rgba(53,104,43,.88))}
.artikel-kop-hero>*{position:relative;z-index:2}
.artikel-kop-hero h1{color:var(--wit);font-size:clamp(28px,3.4vw,42px);
font-weight:700;max-width:760px;margin-inline:auto}
.artikel-inhoud p{margin-bottom:16px;color:#4a5446;font-size:16.5px;line-height:1.65}
.artikel-inhoud h2{margin:38px 0 14px;font-size:25px}
.artikel-inhoud ul.vinkjes{width:fit-content;margin:0 auto 18px;text-align:left;list-style:none}
.artikel-inhoud ul.vinkjes li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;
font-size:15.5px;color:#4a5446}
.artikel-inhoud ul.vinkjes li::before{content:"";flex:0 0 16px;height:16px;margin-top:4px;
background:url('data:image/svg+xml;utf8,') center/contain no-repeat}
.artikel-foto{border-radius:var(--r-kaart);overflow:hidden;margin:26px 0}
.artikel-foto img{width:100%;display:block}
.tip-kader{background:var(--tint);border-left:4px solid var(--accent);
border-radius:0 var(--r-kaart) var(--r-kaart) 0;padding:20px 24px;margin:26px 0;
text-align:left}
.tip-kader b{display:block;color:var(--petrol);margin-bottom:6px;font-size:15px;
text-transform:uppercase;letter-spacing:.08em}
.tip-kader p{margin:0;font-size:15.5px}
.samenvatting-blok{background:var(--wit);border:1px solid rgba(88,168,71,.35);
border-radius:var(--r-kaart);padding:24px 28px;margin:0 0 30px;text-align:left}
.samenvatting-blok b{display:block;margin-bottom:10px;color:var(--petrol);
text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.inhoudsopgave{background:var(--bg);border-radius:var(--r-kaart);padding:22px 26px;
margin-bottom:30px;text-align:left}
.inhoudsopgave b{display:block;margin-bottom:10px;font-size:15px}
.inhoudsopgave ol{margin-left:20px;color:#4a5446;font-size:15px}
.inhoudsopgave li{padding:3px 0}
.inhoudsopgave a{color:var(--petrol);text-decoration:none}
.inhoudsopgave a:hover{text-decoration:underline}
.faq details{background:var(--wit);border-radius:12px;box-shadow:var(--schaduw);
margin-bottom:12px;padding:0;text-align:left;overflow:hidden}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:15.5px;
list-style:none;position:relative;padding-right:44px}
.faq summary::after{content:"▾";position:absolute;right:20px;top:50%;
transform:translateY(-50%);color:var(--accent);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.faq details p{padding:0 20px 16px;margin:0;font-size:15px}
.artikel-cta{background:var(--tint);border-radius:var(--r-kaart);padding:28px;
text-align:center;margin-top:34px}
.artikel-cta .knop{margin:6px 8px}
.artikel-cta b{display:block;font-size:18px;margin-bottom:6px}
.artikel-cta p{margin-bottom:16px}
/* variant met zijbalk */
.artikel-layout{display:grid;grid-template-columns:1fr 320px;gap:clamp(32px,4vw,56px);
max-width:1140px;margin-inline:auto;align-items:start}
@media(max-width:960px){.artikel-layout{grid-template-columns:1fr}}
.artikel-zijbalk{position:sticky;top:calc(var(--header-h) + 24px);
display:flex;flex-direction:column;gap:22px}
.zijbalk-blok{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:24px;text-align:center}
.zijbalk-blok h3{font-size:17px;margin-bottom:12px}
.zijbalk-blok ul{list-style:none;text-align:center}
.zijbalk-blok li{padding:5px 0;font-size:14.5px}
.zijbalk-blok a{color:var(--petrol);text-decoration:none}
.zijbalk-blok a:hover{text-decoration:underline}
.zijbalk-blok .knop{margin-top:8px}
/* ---------- projectdetailpagina's ---------- */
/* gegevensbalk bovenaan (naar vast DPS-voorbeeld) */
.feiten-balk{
background:var(--tint);border-radius:var(--r-kaart);
display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
padding:26px 32px;margin-bottom:clamp(32px,4vw,48px);
}
@media(max-width:900px){.feiten-balk{grid-template-columns:repeat(2,1fr)}}
/* mobiel blijft twee aan twee (besluit Dikkie) */
.feiten-balk div{text-align:center}
.feiten-balk b{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--petrol);margin-bottom:6px}
.feiten-balk span{font-size:16px;font-weight:600;color:var(--ink)}
/* locatie-pin op de foto */
.locatie-pin{
position:absolute;left:14px;bottom:14px;z-index:2;
display:inline-flex;align-items:center;gap:7px;
background:rgba(44,58,43,.82);color:var(--wit);border-radius:999px;
padding:7px 15px 7px 11px;font-size:13.5px;font-weight:600;letter-spacing:.02em;
}
.locatie-pin svg{width:14px;height:14px;flex:0 0 14px}
/* aanpak-stappen: gecentreerd met groene vinkjes (besluit Dikkie) */
.aanpak-inhoud{text-align:center;max-width:790px;margin-inline:auto}
.aanpak-kop{display:flex;align-items:center;justify-content:center;gap:10px;
font-size:22px;margin:30px 0 10px}
.aanpak-kop:first-child{margin-top:0}
.aanpak-kop svg{width:20px;height:20px;flex:0 0 20px}
.aanpak-inhoud p{color:#4a5446;margin-bottom:6px}
/* projectgalerij: mozaïek */
.galerij{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.galerij .g-rij2{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr;gap:20px}
@media(max-width:860px){.galerij,.galerij .g-rij2{grid-template-columns:1fr}}
.galerij .foto{aspect-ratio:auto;min-height:280px}
.galerij .foto img{height:100%}
.feiten-rij{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:26px 0}
.feit{background:var(--wit);border-radius:12px;box-shadow:var(--schaduw);
padding:14px 24px;text-align:center;min-width:150px}
.feit b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
color:var(--petrol);margin-bottom:3px}
.feit span{font-size:15px;color:#4a5446}
.foto-label{position:absolute;top:14px;left:14px;z-index:2;
background:rgba(44,58,43,.78);color:#fff;border-radius:999px;
padding:5px 15px;font-size:12.5px;letter-spacing:.06em}
.project-zigzag{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);
align-items:center;margin-bottom:clamp(36px,5vw,56px)}
@media(max-width:860px){.project-zigzag{grid-template-columns:1fr}}
.project-zigzag .tekst{text-align:center}
.project-zigzag .tekst h2{margin-bottom:12px;font-size:26px}
.project-zigzag .tekst p{color:#4a5446}
.project-zigzag:nth-of-type(even) .foto{order:2}
@media(max-width:860px){.project-zigzag:nth-of-type(even) .foto{order:0}}
/* ---------- offerte-samenstellen wizard ---------- */
.calc-kaart{
background:var(--wit);border-radius:24px;box-shadow:0 18px 44px -18px rgba(44,58,43,.28);
max-width:1140px;margin-inline:auto;overflow:hidden;
display:grid;grid-template-columns:1fr 1fr;
}
.calc-kaart.smal{grid-template-columns:1fr;max-width:760px}
@media(max-width:960px){.calc-kaart{grid-template-columns:1fr}}
/* voor/na-schuif */
.voorna{position:relative;min-height:420px;overflow:hidden;user-select:none;touch-action:none}
.voorna img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.voorna .na{clip-path:inset(0 0 0 50%)}
.voorna .greep{
position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--wit);z-index:3;
}
.voorna .greep::after{
content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:50%;background:#000000;
box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.voorna .vn-label{position:absolute;top:16px;z-index:2;background:rgba(44,58,43,.8);
color:#fff;border-radius:999px;padding:6px 15px;font-size:13px;font-weight:600}
.voorna .vn-label.links{left:16px}
.voorna .vn-label.rechts{right:16px}
/* wizard */
.calc{padding:clamp(26px,3.5vw,40px);display:flex;flex-direction:column;text-align:left}
@media(max-width:640px){
.calc{text-align:center}
.calc .veld{text-align:center}
.calc .veld label{text-align:center}
}
.calc-voortgang{display:flex;align-items:center;margin-bottom:24px}
.calc-voortgang span{
width:30px;height:30px;border-radius:50%;flex:0 0 30px;
display:grid;place-items:center;font-size:13.5px;font-weight:700;
background:#f0f4ed;color:#8a949a;transition:background .3s var(--ease),color .3s var(--ease);
}
.calc-voortgang span.actief{background:var(--petrol);color:var(--wit)}
.calc-voortgang span.klaar{background:var(--accent);color:var(--wit)}
.calc-voortgang i{flex:1;height:2px;background:#e8eee3;margin:0 6px}
.calc-stapnr{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:#8a949a;
text-transform:uppercase;margin-bottom:6px}
.calc h3{font-size:22px;margin-bottom:6px}
.calc .calc-sub{color:#69727d;font-size:14.5px;margin-bottom:18px}
.calc-stap{display:none}
.calc-stap.actief{display:block}
.calc-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.calc-tegels{grid-template-columns:repeat(2,1fr)}}
.calc-tegel{
border:1.5px solid #e8eee3;border-radius:14px;background:var(--wit);
padding:16px 10px;text-align:center;cursor:pointer;font-family:inherit;
transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.calc-tegel svg{width:22px;height:22px;stroke:var(--ink);fill:none;margin-bottom:8px}
.calc-tegel b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.3}
.calc-tegel:hover{border-color:var(--accent)}
.calc-tegel.gekozen{border-color:var(--accent);background:rgba(88,168,71,.10);transform:translateY(-1px)}
.calc-tegel.gekozen svg{stroke:var(--petrol)}
.calc-velden .veld input{border:1.5px solid #e8eee3}
.calc-acties{margin-top:auto;padding-top:22px}
.calc-volgende{
width:100%;display:block;text-align:center;background:var(--accent);color:var(--wit);
border:0;border-radius:12px;padding:16px;cursor:pointer;
font-family:inherit;font-size:16.5px;font-weight:700;
transition:background .25s var(--ease),transform .25s var(--ease);
}
.calc-volgende:hover{background:#4a9139;transform:translateY(-1px)}
.calc-terug{background:none;border:0;color:#8a949a;cursor:pointer;font-family:inherit;
font-size:14px;margin-top:12px;display:inline-flex;align-items:center;gap:6px}
.calc-terug:hover{color:var(--petrol)}
.calc-gerust{display:flex;justify-content:center;align-items:center;
gap:8px 16px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:#8a949a}
.cg-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cg-item svg{width:14px;height:14px;flex:0 0 auto}
.calc-foutmelding{color:#c0392b;font-size:13.5px;margin-top:10px;display:none}
/* zijpaneel-samenvatting (variant C) */
.calc-zijpaneel{background:var(--tint);padding:clamp(26px,3.5vw,40px);
display:flex;flex-direction:column;gap:18px;text-align:left}
.calc-zijpaneel h4{font-size:17px}
.calc-keuzes{list-style:none;font-size:14.5px;color:#4a5446}
.calc-keuzes li{display:flex;gap:8px;padding:4px 0;align-items:flex-start}
.calc-keuzes li::before{content:"\\2713";color:var(--groen-vink);font-weight:700}
/* donkere sectie-variant (D) */
.calc-donker{position:relative;background:var(--petrol) url('../img/hero-3.webp') center/cover no-repeat}
.calc-donker::before{content:"";position:absolute;inset:0;background:var(--petrol);opacity:.93}
.calc-donker .container{position:relative;z-index:2}
.calc-donker h2,.calc-donker .kop-blok p{color:var(--wit)}
/* ---------- info-kaarten (verder lezen / regio's) ---------- */
.info-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.info-kaarten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.info-kaarten{grid-template-columns:1fr}}
.info-kaart{display:flex;gap:16px;align-items:flex-start;background:var(--wit);
border-radius:16px;box-shadow:var(--schaduw);padding:22px;text-decoration:none;
transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.info-kaart:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.ik-icoon{flex:0 0 44px;height:44px;border-radius:12px;background:var(--tint);
display:grid;place-items:center;transition:background .35s var(--ease)}
.info-kaart:hover .ik-icoon{background:var(--accent)}
.ik-icoon svg{width:18px;height:18px;stroke:var(--petrol);transition:stroke .35s var(--ease)}
.info-kaart:hover .ik-icoon svg{stroke:#fff}
.info-kaart h3{font-size:17px;color:var(--petrol);margin-bottom:6px;text-align:left}
.info-kaart p{font-size:14px;color:#4a5446;text-align:left;line-height:1.5}
/* regiochips (donkere variant) */
.regio-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.regio-chip{display:inline-flex;align-items:center;gap:8px;
border:1.5px solid rgba(255,255,255,.35);border-radius:999px;
padding:12px 22px;color:var(--wit);text-decoration:none;font-weight:600;font-size:15px;
transition:border-color .3s var(--ease),background .3s var(--ease)}
.regio-chip:hover{border-color:#a6d78e;background:rgba(255,255,255,.08)}
.regio-chip svg{width:15px;height:15px}
/* ---------- faq-varianten ---------- */
/* A: brede rijen met lijnen en ronde plusknop (naar vast voorbeeld) */
.faq-lijst{max-width:940px;margin-inline:auto;text-align:left;border-top:1px solid rgba(44,58,43,.12)}
.faq-lijst details{border-bottom:1px solid rgba(44,58,43,.12)}
.faq-lijst summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
align-items:center;gap:18px;padding:22px 4px;font-weight:600;font-size:16.5px;color:var(--ink)}
.faq-lijst summary::-webkit-details-marker{display:none}
.faq-lijst summary::after{content:"+";flex:0 0 36px;height:36px;border-radius:50%;
background:var(--tint);color:var(--petrol);display:grid;place-items:center;
font-size:20px;font-weight:600;transition:transform .3s var(--ease),background .3s var(--ease)}
.faq-lijst details[open] summary::after{transform:rotate(45deg);background:var(--accent);color:#fff}
.faq-lijst details p{padding:0 46px 20px 4px;margin:0;color:#4a5446;font-size:15.5px;text-align:left}
/* C: twee kolommen */
.faq-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;max-width:1040px;margin-inline:auto}
@media(max-width:860px){.faq-kolommen{grid-template-columns:1fr}}
/* D: split met contactblokje */
.faq-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:900px){.faq-split{grid-template-columns:1fr}}
.faq-vraagblok{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:26px;text-align:center}
.faq-vraagblok h3{font-size:18px;margin-bottom:8px}
.faq-vraagblok p{color:#4a5446;font-size:14.5px;margin-bottom:14px}
/* ---------- werkgebiedpagina's ---------- */
.dienstkaart-blok{background:var(--wit);border-radius:var(--r-kaart);
box-shadow:var(--schaduw);padding:28px 30px;text-align:center}
.dienstkaart-blok h3{color:var(--petrol);font-size:19px;margin-bottom:8px}
.dienstkaart-blok>p{color:#4a5446;font-size:15px;margin-bottom:20px;max-width:640px;margin-inline:auto}
.dienst-knoppen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.dienst-knoppen{grid-template-columns:1fr}}
.dienst-knop{display:flex;justify-content:space-between;align-items:center;gap:10px;
border:1.5px solid #e8eee3;border-radius:12px;padding:14px 18px;
font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;
transition:border-color .25s var(--ease),transform .25s var(--ease)}
.dienst-knop:hover{border-color:var(--accent);transform:translateY(-1px)}
.dienst-knop::after{content:"\203A";color:var(--accent);font-size:18px}
.cta-donker{background:var(--ink);border-radius:24px;
padding:clamp(40px,5vw,64px) clamp(24px,5vw,72px);text-align:center;color:var(--wit)}
.cta-donker h2{color:var(--wit);margin-bottom:12px}
.cta-donker p{color:rgba(255,255,255,.8);max-width:560px;margin:0 auto 26px}
.video-blok{position:relative;border-radius:var(--r-kaart);overflow:hidden;
aspect-ratio:16/9;max-width:960px;margin-inline:auto;
background:var(--salie) url('../img/hero-2.webp') center/cover no-repeat}
.video-blok::before{content:"";position:absolute;inset:0;background:rgba(44,58,43,.35)}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:78px;height:78px;border-radius:50%;background:var(--accent);border:0;cursor:pointer;
display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);
transition:transform .25s var(--ease),background .25s var(--ease)}
.video-play:hover{transform:translate(-50%,-50%) scale(1.06);background:#4a9139}
.video-play svg{width:26px;height:26px;margin-left:4px}
.video-label{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
background:rgba(44,58,43,.75);color:#fff;border-radius:999px;padding:7px 18px;
font-size:13.5px;white-space:nowrap}
/* klikbare zoektermen: OVERAL dezelfde huisstijlkleur, niet alleen binnen
.artikel-inhoud. Fout die is voorgekomen: op de dienst- en regiopagina's
stonden deze links buiten .artikel-inhoud en werden ze browserblauw. */
a.sleutelterm{
font-weight:700;color:var(--petrol);text-decoration:underline;
text-decoration-color:rgba(88,168,71,.55);text-underline-offset:3px;
transition:text-decoration-color .25s var(--ease);
}
a.sleutelterm:hover{text-decoration-color:var(--petrol)}
/* ---------- juridisch ---------- */
.juridisch{max-width:850px;margin-inline:auto}
.juridisch h2{margin:36px 0 12px;font-size:24px}
.juridisch p{margin-bottom:14px;color:#4a5446}
/* ---------- mobiele verfijning (besluiten Dikkie 20-08) ---------- */
.alleen-mobiel{display:none}
@media(max-width:860px){
.alleen-desktop{display:none}
.alleen-mobiel{display:block}
/* projecten-sectie homepage: alles gecentreerd */
#projecten .split>div:first-child{text-align:center}
}
@media(max-width:640px){
/* dienstkaarten: zinnen op één regel, vinkjes gelijk gecentreerd */
.kaart ul li{font-size:13.5px;white-space:nowrap}
.waarom-kaart li{font-size:14px;white-space:nowrap}
/* footer: alles gecentreerd, kolommen twee aan twee */
.footer-boven{grid-template-columns:1fr 1fr;gap:30px 14px}
.footer-boven>div{text-align:center}
.footer-boven>div:first-child{grid-column:1/-1}
.footer-boven .footer-logo{justify-content:center}
.footer-boven .footer-logo{justify-content:center}
.footer-boven>div:nth-child(2){order:1}
.footer-boven>div:nth-child(5){order:2}
.footer-boven>div:nth-child(3){order:3}
.footer-boven>div:nth-child(4){order:4}
.footer-boven>div:first-child ul{
display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
width:fit-content;margin-inline:auto}
.footer-boven .vink{font-size:13.5px;white-space:nowrap}
.social{justify-content:center}
.footer .pijl-link{justify-content:center}
}
/* ---------- mobiele verfijning (besluiten Dikkie 20-08) ---------- */
.alleen-mobiel{display:none}
@media(max-width:860px){
.alleen-desktop{display:none}
.alleen-mobiel{display:block}
/* projecten-sectie homepage: alles gecentreerd */
#projecten .split>div:first-child{text-align:center}
}
@media(max-width:640px){
/* dienstkaarten: zinnen op één regel, vinkjes gelijk gecentreerd */
.kaart ul li{font-size:13.5px;white-space:nowrap}
.waarom-kaart li{font-size:14px;white-space:nowrap}
/* footer: alles gecentreerd, kolommen twee aan twee */
.footer-boven{grid-template-columns:1fr 1fr;gap:30px 14px}
.footer-boven>div{text-align:center}
.footer-boven>div:first-child{grid-column:1/-1}
.footer-boven .footer-logo{justify-content:center}
.footer-boven>div:nth-child(2){order:1}
.footer-boven>div:nth-child(5){order:2}
.footer-boven>div:nth-child(3){order:3}
.footer-boven>div:nth-child(4){order:4}
.footer-boven>div:first-child ul{
display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
width:fit-content;margin-inline:auto}
.footer-boven .vink{font-size:13.5px;white-space:nowrap}
.social{justify-content:center}
.footer .pijl-link{justify-content:center}
}
/* ---------- reveals: vaste DPS-waarden ---------- */
.js .reveal{opacity:0;transform:translateY(24px);
transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
/* zijwaartse reveals (stappenplan): schuiven vanaf de eigen kant in beeld */
.js .reveal-li,.js .reveal-re{opacity:0;
transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal-li{transform:translateX(-44px)}
.js .reveal-re{transform:translateX(44px)}
.js .reveal-li.is-visible,.js .reveal-re.is-visible{opacity:1;transform:none}
.js .reveal-li .tlv-nr,.js .reveal-re .tlv-nr{opacity:0;transform:scale(.4);
transition:opacity .5s var(--ease) .3s,transform .5s var(--ease) .3s}
.js .reveal-li.is-visible .tlv-nr,.js .reveal-re.is-visible .tlv-nr{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
.js .reveal-li,.js .reveal-re,.js .reveal-li .tlv-nr,.js .reveal-re .tlv-nr{
opacity:1;transform:none;transition:none}
}
.js .hero .reveal{transform:none}
.stagger>*:nth-child(1){transition-delay:0ms}
.stagger>*:nth-child(2){transition-delay:110ms}
.stagger>*:nth-child(3){transition-delay:220ms}
.stagger>*:nth-child(4){transition-delay:330ms}
.stagger>*:nth-child(5){transition-delay:440ms}
.stagger>*:nth-child(6){transition-delay:550ms}
.stagger>*:nth-child(7){transition-delay:660ms}
.stagger>*:nth-child(8){transition-delay:770ms}
.stagger>*:nth-child(9){transition-delay:880ms}
.stagger>*:nth-child(10){transition-delay:990ms}
.stagger>*:nth-child(11){transition-delay:1100ms}
.stagger>*:nth-child(12){transition-delay:1210ms}
.stagger>*:nth-child(7){transition-delay:660ms}
.stagger>*:nth-child(8){transition-delay:770ms}
.stagger>*:nth-child(9){transition-delay:880ms}
.stagger>*:nth-child(10){transition-delay:990ms}
.stagger>*:nth-child(11){transition-delay:1100ms}
.stagger>*:nth-child(12){transition-delay:1210ms}
@media (prefers-reduced-motion: reduce){
.js .reveal{opacity:1;transform:none;transition:none}
.hero-baan{transition:none}
.logo-plateau,.logo-merk,.logo-tekst{transition:none}
}
/* ---------- mobiel ---------- */
@media(max-width:640px){
:root{--header-h:76px;--plateau-h:100px}
.header{padding:0 16px}
.logo-plateau{width:auto;min-width:0;padding:0 16px;gap:8px;border-radius:0 0 24px 0}
.logo-merk{width:34px;height:34px;font-size:15px;border-radius:9px}
.logo-tekst b{font-size:14px}
.logo-tekst span{font-size:7.5px;letter-spacing:.24em}
.nav .knop{font-size:13px;padding:9px 12px 10px;white-space:nowrap}
.hero{height:78svh}
.hero-titel{font-size:24px;max-width:340px}
.pagina-hero{height:200px}
.cta-blok h2{font-size:24px}
}
@media print{.hero{height:auto}.header{position:static}}
/* mobiel: hero groeit mee en de google-badge staat in de flow onder de
knoppen; staat bewust ONDERAAN het bestand zodat hij de absolute
positionering van eerdere regels wint */
@media(max-width:640px){
.hero{height:auto;min-height:78svh;padding:calc(var(--header-h) + 26px) 0 30px}
.google-badge{position:static;transform:none;margin:18px auto 0;justify-self:center;order:9}
}
/* TEMPLATEFIX 24-08-2026: footer-vinkjes liepen op mobiel buiten het scherm zodra
de tekst langer was dan de kolom (grid van 164px). Flex-items krimpen niet uit
zichzelf, dus min-width en afbreken expliciet zetten. */
.footer .vink{min-width:0;overflow-wrap:anywhere}
.footer-boven ul{max-width:100%}
.footer-boven>div{min-width:0}
/* TEMPLATEFIX 24-08-2026 (2): op mobiel staat de footer in een grid van 1fr 1fr.
1fr heeft een automatische minimumbreedte, dus zodra een woord langer is dan de
kolom groeit het grid buiten het scherm en ontstaat horizontaal scrollen.
minmax(0,1fr) laat de kolom wel krimpen. */
@media(max-width:640px){
.footer-boven{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* TEMPLATEFIX 24-08-2026 (3): op de vinkjesregels in de footer staat white-space:nowrap.
Bij een langere tekst dan de kolom loopt de regel daardoor buiten het scherm en gaat
de hele pagina op mobiel horizontaal scrollen. Op smalle schermen mag de tekst gewoon
afbreken; het vinkje blijft links naast de eerste regel staan. */
@media(max-width:900px){
.footer .vink{white-space:normal;flex-wrap:nowrap;align-items:flex-start}
.footer .vink::before{margin-top:4px}
}
/* ---------- header: alles op een lijn, en de knop altijd in beeld ----------
De rij is: menu-items, telefoonnummer, offerteknop. Wordt het te krap, dan
krimpt eerst de tussenruimte, dan de letter, en pas als laatste valt het
telefoonnummer weg. De offerteknop mag NOOIT buiten beeld lopen.
Reken het na als je menu-items toevoegt of weghaalt. De rij heeft nodig:
25vw (het plateau) + de som van de items + (aantal-1) x --nav-gap
+ --nav-vrij + 22px
Deze trappen zijn gemeten op NEGEN menu-items plus telefoon en knop; op
volle maat past dat pas vanaf ongeveer 1790px. Met minder items is er meer
lucht, dus dan werken ze ook.
Fout die is voorgekomen: met de eigen menu-items van de klant erbij werd de
rij te breed en stond "Offerte aanvragen" 168px buiten het scherm op 1440.
Meet daarom altijd van 1920 tot 360, niet alleen op 1440.
Let op: het mobiele menu begint bij max-width:1200px, dus deze regels
starten bij min-width:1201px. */
@media(min-width:1201px) and (max-width:1789px){
:root{--nav-gap:20px;--nav-vrij:32px}
.nav-links>a,.nav .heeft-sub>a{font-size:16px}
}
@media(min-width:1201px) and (max-width:1659px){
:root{--nav-gap:16px;--nav-vrij:26px}
.nav-links>a,.nav .heeft-sub>a{font-size:15px}
.nav-tel{font-size:14px}
}
@media(min-width:1201px) and (max-width:1540px){
/* vanaf hier past het telefoonnummer er niet meer bij zonder de rij te
wringen; het staat nog wel in het mobiele menu en in de footer */
.nav-tel{display:none}
}
@media(min-width:1201px) and (max-width:1300px){
:root{--nav-gap:12px;--nav-vrij:18px}
.nav-links>a,.nav .heeft-sub>a{font-size:14.5px}
.nav .knop{padding:11px 18px 12px;font-size:15px}
}
/* ---------- smalle schermen: de offerteknop mag het logoplateau niet raken ----------
Het plateau staat position:absolute, dus de nav houdt er uit zichzelf geen
rekening mee. Fout die is voorgekomen: op 390px lag de knop 21px over het
witte plateau heen, op 360px zelfs 51px. Daarom hieronder een korte
knoptekst; de span-variant staat in genereer.py. */
@media(max-width:430px){
.nav .knop{padding:10px 13px 11px;font-size:13.5px;letter-spacing:0}
.nav .knop .knop-lang{display:none}
.nav .knop .knop-kort{display:inline}
.nav{gap:10px}
}
@media(max-width:345px){
/* nog smaller past er niets meer naast; de bezoeker heeft hier het mobiele
menu en de zwevende knop "Aanvraag doen" linksonder */
.nav .knop{display:none}
}
/* ---- voorbeeldreviews: Google-vormgeving blijft compleet, alleen het cijfer
en de datum worden vervangen door het woord concept (vaste regel) ---- */
.review-concept{
display:inline-block;background:var(--ink);color:var(--wit);
border-radius:999px;padding:2px 10px 3px;
font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.google-badge .review-concept,
.g-score.op-donker .review-concept{background:rgba(255,255,255,.24)}
/* alleen een VOORBEELDREVIEW krijgt een pill; een echte datum blijft gewoon tekst */
.review .review-datum.voorbeeld{
display:inline-block;border:1px solid var(--accent);border-radius:999px;
padding:3px 12px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink);
}
.google-regel .gr-sub{max-width:640px;margin-inline:auto;text-align:center}
/* het woord concept op de plek van een teller-cijfer, zelfde maatvoering */
.usp-c b.teller-concept{text-transform:uppercase;letter-spacing:.06em;font-size:.62em}
/* ---------- HEADERFIX-DOORZICHTIG ----------
VASTE REGEL: de header is ALTIJD volledig doorzichtig, ook na het scrollen,
en wordt nooit een dekkende of witte balk. De hero en de subhero's lopen er
met padding-top onderdoor, zodat de foto tot bovenaan het scherm doorloopt.
Logo en menutekst blijven leesbaar door de permanente gradient op .header.
Fout die is voorgekomen (AIMEJ Transport, 01-09-2026): de doorzichtig-regel
stond op .nav in plaats van op .header. De nav is maar 48px hoog binnen een
header van 106px, dus boven en onder die strook bleef de dekkende
headerkleur staan als twee gekleurde lijnen rond de menutekst.
Zet deze regel dus NOOIT terug op .nav en geef .header nooit weer een
achtergrondkleur. */
.hero .hero-inhoud{padding-top:calc(var(--header-h) + 12px)}
.pagina-hero{min-height:calc(270px + var(--header-h))}
.pagina-hero h1,.pagina-hero .artikel-meta{position:relative;z-index:2}
/* ================= KLANTLAAG: PNT Duurzame technieken =================
Huisstijl uit het logo: groen #58a847 (accent, drager van knoppen en randen),
grijs #7c7c7c (neutrale tekstkleur uit "Duurzame technieken") en geel
#e2cc00 (de zon in het beeldmerk) als subtiel derde accent. */
:root{--pnt-geel:#e2cc00;--pnt-grijs:#7c7c7c}
/* het echte logobestand in het plateau, overal identiek, nooit hertekend */
.logo-beeld{height:78px;width:auto;display:block;transition:transform .35s var(--ease)}
.header.geschrompeld .logo-beeld{transform:scale(.9)}
/* zwarte footer: lichte pill achter hetzelfde logobestand, logo blijft ongewijzigd */
.footer .footer-logo{display:inline-block;background:#ffffff;border-radius:16px;
padding:12px 18px;text-decoration:none}
.footer .footer-logo .logo-beeld{height:58px}
@media(max-width:900px){
.logo-beeld{height:44px}
.header.geschrompeld .logo-beeld{transform:none}
}
@media(max-width:400px){.logo-beeld{height:38px}}
/* dienstkaart met een echte foto in plaats van een leeg vlak */
.kaart-beeld{padding:0;overflow:hidden;position:relative;background:#eef1ea}
.kaart-beeld img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.product-kaart-beeld{padding:0;overflow:hidden;background:#eef1ea}
.product-kaart-beeld img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* offerteblok: een echte projectfoto naast het formulier */
.calc-beeld{position:relative;min-height:420px;overflow:hidden}
.calc-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:960px){.calc-beeld{min-height:240px}}
/* de zon uit het beeldmerk als subtiel derde accent */
.keurmerk-vak{border-color:rgba(88,168,71,.4);color:var(--pnt-grijs);width:auto;min-width:124px;padding:0 14px;text-align:center;line-height:1.25}
/* ============================================================
MOBIELE HERSTELREGELS (templatefouten, zie LEES-MIJ)
============================================================ */
/* een kaart mag nooit breder worden dan zijn gridcel */
.kaart,.kaart-grid>*,.project-grid>*,.tips-grid>*,.puzzelgrid>*{min-width:0}
.kaart ul,.waarom-kaart ul{max-width:100%}
.kaart ul li,.waarom-kaart li{min-width:0;overflow-wrap:anywhere}
@media(max-width:400px){.kaart ul,.waarom-kaart ul{width:auto}}
/* TEMPLATEFOUT: white-space:nowrap op de vinkjesregels onder 640px liet langere
zinnen niet afbreken en gaf horizontale scroll over de hele pagina. */
@media(max-width:640px){
.kaart ul li{white-space:normal}
.waarom-kaart li{white-space:normal}
}
/* TEMPLATEFOUT: .fotogrid bleef ook op mobiel twee kolommen, waardoor de
projecttitel boven de kaart uit stak. */
@media(max-width:640px){.fotogrid{grid-template-columns:1fr}}
/* TEMPLATEFOUT: de zijwaartse reveal van het stappenplan duwde de rij 44px naar
rechts en gaf op smalle telefoons horizontale scroll. */
@media(max-width:720px){.js .reveal-li,.js .reveal-re{transform:translateY(24px)}}
/* ============================================================
PUZZELSTUKKEN: de dienstkaarten in de vorm van het beeldmerk
Wens van de klant: de puzzelstukken van zijn eigen site meenemen.
De vorm komt uit een SVG-masker, zodat de foto er echt in wordt uitgesneden.
============================================================ */
.puzzelgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
@media(max-width:1000px){.puzzelgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.puzzelgrid{grid-template-columns:1fr;gap:26px}}
.puzzelkaart{display:block;text-decoration:none;text-align:center;
transition:transform .45s var(--ease)}
.puzzelkaart:hover{transform:translateY(-6px)}
.pz-vorm{
position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
background:var(--tint2);
-webkit-mask-image:var(--pz-masker);mask-image:var(--pz-masker);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
:root{
--pz-masker:url("data:image/svg+xml;utf8,");
}
.pz-vorm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pz-waas{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(44,58,43,.18) 0%,rgba(44,58,43,.30) 45%,rgba(44,58,43,.62) 100%);
transition:background .45s var(--ease)}
.puzzelkaart:hover .pz-waas{background:linear-gradient(180deg,rgba(53,104,43,.28) 0%,rgba(53,104,43,.42) 45%,rgba(53,104,43,.70) 100%)}
.pz-titel{
position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;
padding:0 24%;color:var(--wit);font-size:clamp(17px,1.5vw,21px);font-weight:700;
line-height:1.25;text-transform:uppercase;letter-spacing:.06em;
text-shadow:0 2px 12px rgba(0,0,0,.45)}
.pz-onder{display:block;padding:16px 10px 0;text-align:center}
.pz-kort{display:block;color:#4a5446;font-size:15px;line-height:1.5;max-width:32ch;margin-inline:auto}
.pz-meer{display:inline-block;margin-top:10px;color:var(--petrol);font-weight:600;font-size:15px;
border-bottom:2px solid var(--accent);padding-bottom:2px}
@media(max-width:640px){
.pz-titel{font-size:19px;padding:0 20%}
.pz-kort{font-size:14.5px}
}
/* ============================================================
TAALKNOP
============================================================ */
.taalknop{
display:inline-grid;place-items:center;width:42px;height:34px;flex:0 0 auto;
border:1px solid rgba(255,255,255,.55);border-radius:8px;
color:var(--wit);text-decoration:none;font-size:13.5px;font-weight:700;letter-spacing:.06em;
transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.taalknop:hover{background:rgba(255,255,255,.16);border-color:var(--wit)}
.menu-taal{display:block;text-align:center;margin-top:10px;color:var(--wit);
text-decoration:none;font-weight:600;border:1px solid rgba(255,255,255,.4);
border-radius:999px;padding:9px 18px}
@media(max-width:1200px){.taalknop{width:38px;height:32px;font-size:12.5px}}
@media(max-width:430px){.taalknop{display:none}}
/* ============================================================
SITEMAP-PAGINA
============================================================ */
.sitemap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
@media(max-width:900px){.sitemap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sitemap-grid{grid-template-columns:1fr}}
.sitemap-blok h2{font-size:20px;margin-bottom:12px;color:var(--ink)}
.sitemap-blok ul{list-style:none;padding:0;margin-bottom:8px}
.sitemap-blok li{padding:4px 0;font-size:15px}
.sitemap-blok a{color:#4a5446;text-decoration:none}
.sitemap-blok a:hover{color:var(--accent)}
/* ============================================================
COOKIEBANNER + CONSENT MODE V2
============================================================ */
.ck-overlay{position:fixed;inset:0;z-index:6000;background:rgba(20,26,19,.55);
display:flex;align-items:flex-end;justify-content:center;padding:16px}
.ck-overlay[hidden]{display:none}
.ck-paneel{background:var(--wit);border-radius:22px;max-width:720px;width:100%;
padding:clamp(22px,3vw,34px);box-shadow:0 18px 50px rgba(0,0,0,.28);
max-height:88vh;overflow:auto}
.ck-paneel h2{font-size:21px;margin-bottom:10px}
.ck-paneel p{font-size:14.5px;color:#4a5446;margin-bottom:14px}
.ck-paneel a{color:var(--petrol)}
.ck-keuzes{margin:4px 0 18px}
.ck-rij{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid #e6ebe2}
.ck-rij:first-child{border-top:0}
.ck-rij b{display:block;font-size:15px}
.ck-rij span{display:block;font-size:13.5px;color:#4a5446;margin-top:2px}
.ck-rij input{margin-top:4px;width:18px;height:18px;accent-color:var(--accent);flex:0 0 18px}
.ck-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.ck-knoppen .knop{flex:1 1 auto;text-align:center;font-size:16px;padding:13px 20px}
.ck-fijn{font-size:12.5px;color:#7f9174;margin-top:14px;margin-bottom:0}
@media(max-width:560px){.ck-knoppen .knop{flex:1 1 100%}}
/* ---- keurmerken: de echte badges, altijd in hun eigen kleuren ----
Alle vakken even hoog, zodat de rij als een geheel leest. Nooit een filter
of grijstint over een keurmerk (vaste DPS-regel). */
.keurmerk-logos{align-items:center;gap:clamp(22px,3vw,44px)}
.keurmerk-vak{height:76px}
.keurmerk-vak.keurmerk-logo{
border:0;background:none;padding:0;width:auto;min-width:0;height:76px;
display:grid;place-items:center;
}
.keurmerk-vak.keurmerk-logo img{height:76px;width:auto;max-width:100%;display:block;filter:none}
@media(max-width:640px){
.keurmerk-logos{gap:18px}
.keurmerk-vak{height:56px}
.keurmerk-vak.keurmerk-logo,.keurmerk-vak.keurmerk-logo img{height:56px}
}
/* ---- projectenoverzicht: nooit een half gevulde rij met een gat ernaast ----
Het aantal projecten is niet altijd deelbaar door het aantal kolommen. Blijven
er kaarten over, dan staan die gecentreerd onder de rij erboven in plaats van
links met een leeg vak ernaast (vaste DPS-regel over symmetrische grids). */
.project-grid.alles{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.project-grid.alles > *{flex:0 1 calc((100% - 48px)/3);max-width:calc((100% - 48px)/3)}
@media(max-width:900px){
.project-grid.alles > *{flex-basis:calc((100% - 24px)/2);max-width:calc((100% - 24px)/2)}
}
@media(max-width:640px){
.project-grid.alles{gap:18px}
.project-grid.alles > *{flex-basis:100%;max-width:100%}
}
/* ---- pagina-hero: de kop mag nooit achter het witte logoplateau vallen ----
Het plateau is 25vw breed (minimaal 320px) en 146px hoog, en staat absoluut.
Een lange titel liep daar links onderdoor. De kop krijgt daarom altijd
ruimte onder het plateau en blijft binnen de leesbreedte. */
.pagina-hero{padding-top:var(--plateau-h)}
.pagina-hero.project-kop{padding-top:calc(var(--plateau-h) + 16px)}
.pagina-hero h1,.pagina-hero h1.klein{
max-width:min(900px,86vw);margin-inline:auto;text-wrap:balance;
}
.pagina-hero .artikel-meta{max-width:min(900px,86vw);margin-inline:auto}
@media(max-width:640px){
.pagina-hero{padding-top:calc(var(--plateau-h) + 8px)}
.pagina-hero.project-kop{padding-top:calc(var(--plateau-h) + 10px)}
.pagina-hero h1,.pagina-hero h1.klein{max-width:92vw}
}