/* 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:#241f1a; /* donkerste kleur: koppen, footerbalk */
--petrol:#5b4433; /* warm notenbruin: overlays, secundaire knoppen, page-hero's */
--accent:#b9793d; /* eiken-amber: knoppen, eyebrows, iconen */
--tint:#efe7dc; /* lichte zandwaas (homepage) */
--tint2:#ece4d9; /* sectiewaas subpagina's */
--salie:#cdbca6; /* zachte zandtint hero's */
--bg:#faf8f5;
--wit:#ffffff;
--groen-vink:#2e9e5b;
--accent-donker:#9c6330; /* hover van accentknoppen en pijlen */
--petrol-donker:#4a3729; /* hover van petrol-knoppen */
--ink-donker:#161210; /* hover van inkt-knoppen */
--tekst:#4a423a; /* lopende tekst in kaarten en alinea's */
--tint3:#e2d5c3; /* achtergrond projectenblok homepage */
--op-accent:#ffffff; /* tekst OP de accentkleur */
--accent-rgb:185,121,61; /* dezelfde kleuren als hierboven, voor rgba() */
--petrol-rgb:91,68,51;
--ink-rgb:36,31,26;
--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) */
--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(--op-accent)}
.knop-accent:hover{background:var(--accent-donker)}
.knop-petrol{background:var(--petrol);color:var(--wit)}
.knop-petrol:hover{background:var(--petrol-donker)}
.knop-ink{background:var(--ink);color:var(--wit)}
.knop-ink:hover{background:var(--ink-donker)}
.knop-stil{background:rgba(255,255,255,.16);color:var(--wit)}
.knop-stil:hover{background:rgba(255,255,255,.28)}
.knop-licht{background:#c9d8d2;color:var(--ink)}
.knop-licht:hover{background:#b8cac2}
.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}
/* de linkgroep staat exact gecentreerd tussen het plateau en de offerteknop */
.nav-links{flex:1;display:flex;align-items:center;justify-content:center;gap:38px}
.nav-links>a,.nav .heeft-sub>a{color:var(--wit);text-decoration:none;font-size:17px;font-weight:500}
.nav .heeft-sub>a{display:inline-block}
.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)}
.nav .pijltje{font-size:13px;vertical-align:1px;opacity:.85}
.nav .knop{padding:12px 24px 13px;margin-left:6px;white-space:nowrap}
/* dropdown (gemeten: wit, radius 20, schaduw 0 0 10, links 15px, pad 13/20) */
.heeft-sub{position:relative}
.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:#f1f5f3;color:var(--petrol)}
@media(max-width:1360px){.nav-links{gap:22px}
.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}
.nav-tel svg{width:16px;height:16px;stroke:var(--wit)}
@media(min-width:1240px){
.nav-tel{display:inline-flex;margin:0 12px 0 4px}
.nav-links{gap:26px}
.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:auto;height:auto;min-height:56px;padding:8px 14px;border:1px solid #e2e6e5;border-radius:10px;color:#a7b0af;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)}
.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}
.nav-tel svg{width:16px;height:16px;stroke:var(--wit)}
@media(min-width:1240px){
.nav-tel{display:inline-flex;margin:0 12px 0 4px}
.nav-links{gap:26px}
.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}
/* bedanktpagina: stappen als blok gecentreerd, regels links */
.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(var(--ink-rgb),.55);
}
.zwevend-knop svg{width:16px;height:16px}
@media(max-width:900px){.zwevend-knop{display:inline-flex}}
/* WhatsApp-knop rechtsonder (vast onderdeel, op elke breedte) */
.bel-knoppen{
/* VASTE REGEL: rechtsonder staat ALLEEN een WhatsApp-knop, op ELKE breedte,
dus ook op desktop. Nooit een mail- of belknop erbij, en nooit terugzetten
naar display:none met een mobiel-only media query. */
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(var(--ink-rgb),.55);text-decoration:none;
}
.bel-knop svg{width:80%;height:80%} /* glyph vult de knop, wit tot dicht bij de rand */
.bel-wa{background:#25D366} /* altijd de merkkleur van WhatsApp */
/* WhatsApp-knop rechtsonder (vast onderdeel, op elke breedte) */
.bel-knoppen{
/* VASTE REGEL: rechtsonder staat ALLEEN een WhatsApp-knop, op ELKE breedte,
dus ook op desktop. Nooit een mail- of belknop erbij, en nooit terugzetten
naar display:none met een mobiel-only media query. */
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(var(--ink-rgb),.55);text-decoration:none;
}
.bel-knop svg{width:80%;height:80%} /* glyph vult de knop, wit tot dicht bij de rand */
.bel-wa{background:#25D366} /* altijd de merkkleur van WhatsApp */
/* ---------- 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:var(--tekst);max-width:790px}
.welkom-in-balk .welkom-acties{margin-top:20px}
.usp-rand{border-top:1px solid rgba(var(--ink-rgb),.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),#357a5e);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(var(--ink-rgb),.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(var(--ink-rgb),.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:block;height:100%;
transform:none;transition:none;
}
.hero-baan.geen-anim{transition:none}
.hero-dia{
/* VASTE REGEL: elke dia is EEN hele foto over de volle breedte, gestapeld op
dezelfde plek. Nooit naast elkaar in een baan die horizontaal schuift:
dan zie je stroken van verschillende foto's tegelijk. */
position:absolute;inset:0;width:100%;height:100%;
background-size:cover;background-position:center center;
opacity:0;transform:scale(1);
transition:opacity 1.4s ease;
}
.hero-dia.actief{opacity:1;animation:hero-zoom 8.4s linear forwards}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.09)}}
@media (prefers-reduced-motion: reduce){
.hero-dia.actief{animation:none;transform:none}
.hero-dia{transition:none}
}
/* egale donkere waas over de HELE foto: de bezoeker ziet een normale foto,
geen dichte kleurkolom links met een lichte strook rechts */
.hero-dia::after{content:"";position:absolute;inset:0;background:
linear-gradient(180deg,rgba(var(--ink-rgb),.58) 0%,rgba(var(--ink-rgb),.46) 42%,rgba(var(--ink-rgb),.62) 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:calc(270px + var(--header-h));padding:calc(var(--header-h) + 34px) 20px 34px}
@media(max-width:640px){.pagina-hero.project-kop{min-height:calc(200px + var(--header-h));padding:calc(var(--header-h) + 30px) 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:#9aada3;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:var(--tekst)}
.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:#f2f5f3;
display:grid;place-items:center;color:#9aada3;font-size:13px;letter-spacing:.08em;
}
.kaart h3{color:var(--ink);margin-bottom:16px}
.kaart ul{
max-width:100%;
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:var(--tekst);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:var(--accent-donker);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,minmax(0,1fr));gap:28px}
.kaart-grid.vier{grid-template-columns:repeat(4,minmax(0,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:#7e968a;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(var(--accent-rgb),.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:var(--tekst);font-size:15px}
/* variant B: split met foto en vinkjes */
.uniek-vinkjes{width:fit-content;max-width:100%;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:var(--tekst)}
.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(var(--accent-rgb),.28);line-height:1}
.pijler h3{font-size:20px;margin:10px 0 10px}
.pijler p{color:var(--tekst);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(var(--accent-rgb),.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:var(--tekst);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(var(--accent-rgb),.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(--op-accent);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:var(--tekst);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:var(--tekst);font-size:14px}
.sp-pijl{align-self:center;color:#9ab0a6}
.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,minmax(0,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:var(--tekst);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:var(--tekst);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(var(--petrol-rgb),0) 30%,rgba(var(--petrol-rgb),.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(var(--petrol-rgb),0) 25%,rgba(var(--petrol-rgb),.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:var(--tekst);font-size:14px;margin-bottom:12px}
/* ---------- kennisbank- en regiokaarten ---------- */
.tip-tag{
display:inline-block;background:rgba(var(--accent-rgb),.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:var(--tekst);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:var(--tekst)}
/* ---------- projectkaarten (gemeten: foto met petrol-overlay, witte titel) ---------- */
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,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(var(--petrol-rgb),.22);transition:background .3s var(--ease)}
.projectkaart::after{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(var(--ink-rgb),0) 38%,rgba(var(--ink-rgb),.85) 100%)}
.projectkaart:hover::before{background:rgba(var(--petrol-rgb),.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:#7ce0a3;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:minmax(0,5fr) minmax(0,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:repeat(2,minmax(0,1fr));gap:18px}
.foto{border-radius:var(--r-kaart);aspect-ratio:4/3;overflow:hidden;background:#c9d8d0}
.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(--op-accent);
font-weight:700;font-size:22px;display:grid;place-items:center;margin:0 auto 20px}
.stap h3{margin-bottom:12px}
.stap p{color:var(--tekst);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:var(--tekst);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:#22383a}
.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;max-width:100%;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:var(--tekst)}
.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),#357a5e);
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(var(--ink-rgb),.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:#236660;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:#1a534d;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(var(--ink-rgb),.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:var(--tekst);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 #d5ded9;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;
background:var(--accent);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(var(--petrol-rgb),.55),rgba(var(--petrol-rgb),.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:var(--tekst);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:var(--tekst)}
.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(var(--accent-rgb),.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:var(--tekst);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(var(--ink-rgb),.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:var(--tekst);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:var(--tekst)}
.foto-label{position:absolute;top:14px;left:14px;z-index:2;
background:rgba(var(--ink-rgb),.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:var(--tekst)}
.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(var(--ink-rgb),.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(var(--ink-rgb),.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:#eef2f0;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(--op-accent)}
.calc-voortgang i{flex:1;height:2px;background:#e3e9e6;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 #e3e9e6;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(var(--accent-rgb),.10);transform:translateY(-1px)}
.calc-tegel.gekozen svg{stroke:var(--petrol)}
.calc-velden .veld input{border:1.5px solid #e3e9e6}
.calc-acties{margin-top:auto;padding-top:22px}
.calc-volgende{
width:100%;display:block;text-align:center;background:var(--accent);color:var(--op-accent);
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:var(--accent-donker);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:var(--tekst)}
.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:var(--tekst);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:#8fd0b2;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(var(--ink-rgb),.12)}
.faq-lijst details{border-bottom:1px solid rgba(var(--ink-rgb),.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:var(--tekst);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:var(--tekst);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:var(--tekst);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 #e3e9e6;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(--ink)}
.video-blok::before{content:"";position:absolute;inset:0;background:rgba(var(--ink-rgb),.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:var(--accent-donker)}
.video-play svg{width:26px;height:26px;margin-left:4px}
.video-label{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
background:rgba(var(--ink-rgb),.75);color:#fff;border-radius:999px;padding:7px 18px;
font-size:13.5px;white-space:nowrap}
/* klikbare zoektermen in artikelteksten (verdiepingspagina's) */
.artikel-inhoud a.sleutelterm{
font-weight:700;color:var(--petrol);text-decoration:underline;
text-decoration-color:rgba(var(--accent-rgb),.55);text-underline-offset:3px;
transition:text-decoration-color .25s var(--ease);
}
.artikel-inhoud a.sleutelterm:hover{text-decoration-color:var(--petrol)}
/* klikbare zoektermen in artikelteksten (verdiepingspagina's) */
.artikel-inhoud a.sleutelterm{
font-weight:700;color:var(--petrol);text-decoration:underline;
text-decoration-color:rgba(var(--accent-rgb),.55);text-underline-offset:3px;
transition:text-decoration-color .25s var(--ease);
}
.artikel-inhoud 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:var(--tekst)}
/* ---------- 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:normal}
.waarom-kaart li{font-size:14px;white-space:normal}
/* 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:normal}
.waarom-kaart li{font-size:14px;white-space:normal}
/* 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}
}
/* ---------- 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}
/* ============================================================
VESTIGINGENSECTIE (meerdere locaties) - VASTE VORM
Eerst een kaartbeeld met een pin per vestiging, daarna een kaart per
locatie met een pandfoto, de diensten, de gegevens en twee knoppen.
Alles gecentreerd, de lijsten als blok zodat de bolletjes en iconen
onder elkaar op een lijn staan.
Kaartbeeld maken met ~/.claude/gereedschap/vestigingenkaart.py
============================================================ */
.vest-kaartbeeld{
margin:0 auto clamp(30px,3.6vw,46px);max-width:960px;text-align:center;
}
.vest-kaartbeeld img{
width:100%;height:auto;display:block;border-radius:22px;
border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
box-shadow:0 18px 44px -22px color-mix(in srgb, var(--ink) 34%, transparent);
}
.vest-kaartbeeld figcaption{
margin-top:14px;font-size:14.5px;color:var(--tekst-zacht, #5b6577);letter-spacing:.01em;
}
.sectie-vestigingen{scroll-margin-top:96px}
.vest-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(22px,2.6vw,34px);align-items:stretch;
max-width:1120px;margin-inline:auto;
}
.vest-kaart{
display:flex;flex-direction:column;text-align:center;
background:var(--wit);border-radius:24px;overflow:hidden;
border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
box-shadow:0 18px 44px -22px color-mix(in srgb, var(--ink) 34%, transparent);
transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.vest-kaart:hover{transform:translateY(-6px);box-shadow:0 26px 56px -22px color-mix(in srgb, var(--ink) 44%, transparent)}
.vest-beeld{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.vest-beeld img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s var(--ease)}
.vest-kaart:hover .vest-beeld img{transform:scale(1.05)}
.vest-beeld::after{content:"";position:absolute;inset:0;
background:linear-gradient(transparent 45%,color-mix(in srgb, var(--ink) 62%, transparent) 100%)}
.vest-plaats{
position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
background:var(--wit);color:var(--ink);
border-radius:999px;padding:7px 18px;font-size:14px;font-weight:700;
letter-spacing:.02em;box-shadow:0 6px 16px -6px color-mix(in srgb, var(--ink) 46%, transparent);
}
.vest-plaats svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.vest-binnen{
display:flex;flex-direction:column;align-items:center;flex:1;
padding:clamp(22px,2.6vw,30px) clamp(18px,2.4vw,28px) clamp(24px,2.6vw,30px);
}
.vest-binnen h3{color:var(--ink);font-size:20px;line-height:1.35;margin:0}
.vest-extra{
display:inline-block;margin-top:9px;
background:transparent;border:1px solid var(--accent);color:var(--ink);
border-radius:999px;padding:5px 15px;font-size:12px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;
}
.vest-diensten{
list-style:none;padding:0;margin:16px 0 0;
width:fit-content;margin-inline:auto;text-align:left;display:grid;gap:9px;
}
.vest-diensten li{display:flex;align-items:flex-start;gap:10px;
font-size:15px;line-height:1.45;color:var(--tekst-zacht, #3a4657)}
.vest-diensten li::before{
content:"";flex:0 0 auto;margin-top:6px;width:9px;height:9px;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.vest-gegevens{
list-style:none;padding:18px 0 0;margin:16px 0 0;
width:fit-content;margin-inline:auto;text-align:left;display:grid;gap:11px;
border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.vest-gegevens li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--tekst-zacht, #3a4657)}
.vest-ico{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
border-radius:9px;background:color-mix(in srgb, var(--ink) 8%, transparent);color:var(--ink)}
.vest-ico svg{width:16px;height:16px}
.vest-gegevens a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;
transition:border-color .3s var(--ease),color .3s var(--ease)}
.vest-gegevens a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.vest-knoppen{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:12px;margin-top:auto;padding-top:22px;
}
.vest-knoppen .knop{margin:0}
.vest-wa{
display:inline-flex;align-items:center;gap:8px;text-decoration:none;
border:1px solid #25D366;color:#128C4B;background:transparent;
border-radius:999px;padding:12px 20px;font-size:15px;font-weight:600;
transition:background .3s var(--ease),color .3s var(--ease);
}
.vest-wa svg{width:17px;height:17px;color:#25D366}
.vest-wa:hover{background:#25D366;color:#fff}
.vest-wa:hover svg{color:#fff}
.vest-meer{
display:inline-block;margin-top:16px;color:var(--ink);font-weight:600;
font-size:15px;text-decoration:none;border-bottom:1px solid var(--accent);
padding-bottom:2px;
}
.vest-meer:hover{color:var(--accent)}
.vest-voet{
text-align:center;margin-top:clamp(28px,3.4vw,40px);
font-size:16px;color:var(--tekst-zacht, #3a4657);
}
.vest-voet a{color:var(--ink);font-weight:700;text-decoration:none;
border-bottom:1px solid var(--accent)}
@media (max-width:900px){
.vest-grid{grid-template-columns:1fr;max-width:520px}
}
@media (max-width:640px){
.vest-binnen h3{font-size:18.5px}
.vest-knoppen{flex-direction:column;width:100%}
.vest-knoppen .knop,.vest-wa{width:100%;justify-content:center;text-align:center}
}
/* ============================================================
VASTE COMPONENTEN 02-09-2026 (uit de builds van AIMEJ, Cleijsen, TCK,
Haarsma, PNT en Friet van Beus). Dit hoort bij de template en wordt niet
meer per klant opnieuw opgebouwd.
============================================================ */
/* ---- zonder JavaScript: alles gewoon zichtbaar (audit-eis CLAUDE.md) ---- */
.no-js .reveal,.no-js .reveal-li,.no-js .reveal-re,
.no-js .reveal-x,.no-js .reveal-x-r,.no-js .stagger>*{
opacity:1 !important;transform:none !important;transition:none !important;
}
.no-js .hero-dia:first-child{opacity:1}
.no-js .mobiel-menu{display:none}
.no-js .concept-gedempt{opacity:1}
@media print{
.header,.mobiel-menu,.zwevend-knop,.bel-knoppen,.hero-pijl,.car-pijl,
.dots,.dps-concept-pill,.dps-concept-modal,.ck-banner{display:none !important}
body{color:#000;background:#fff}
.sectie{padding:16px 0;break-inside:avoid}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}
/* ---- sleutelterm-links staan ook BUITEN .artikel-inhoud (dienst- en regiopagina's) ---- */
a.sleutelterm{
color:var(--ink);font-weight:600;text-decoration:underline;
text-decoration-thickness:1.5px;
text-decoration-color:rgba(var(--accent-rgb),.55);text-underline-offset:3px;
transition:text-decoration-color .3s var(--ease),color .3s var(--ease);
}
a.sleutelterm:hover{color:var(--accent);text-decoration-color:var(--accent)}
/* ---- smalle telefoons: gridkinderen nooit breder dan hun kolom ---- */
.split>*,.kaart-grid>*,.project-grid>*,.tips-grid>*,.fotogrid>*{min-width:0}
@media (max-width:640px){
.kaart ul,.waarom-kaart ul,.footer-boven ul,.uniek-vinkjes{max-width:100%}
.kaart ul li,.waarom-kaart li,.footer-boven .vink{white-space:normal}
.fotogrid{grid-template-columns:1fr}
}
/* ---- echte foto in de dienstkaart en op de dienstpagina.
Absoluut in het vak: een percentage-hoogte op een img in een grid met
place-items:center resolvet in Chrome naar auto, dan valt de foto over de kop. ---- */
.kaart-beeld{position:relative;overflow:hidden;background:var(--tint)}
.kaart-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.product-kaart-beeld{position:relative;overflow:hidden;padding:0}
.product-kaart-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ---- Google-score op een donkere hero ---- */
.g-cijfer{font-weight:700;color:var(--ink)}
.g-score.op-donker .g-cijfer{color:var(--wit)}
.gr-knoppen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
@media(max-width:520px){.gr-knoppen .knop{width:100%;text-align:center}}
/* ---- het echte logobestand in het plateau en in de footer (nooit natekenen) ---- */
.logo-plateau .logo-beeld{
width:auto;height:66px;max-width:min(23vw,300px);object-fit:contain;
transition:height .35s var(--ease);
}
.header.geschrompeld .logo-plateau .logo-beeld{height:58px}
.footer .footer-logo .logo-beeld-donker{width:auto;height:60px;object-fit:contain}
@media(max-width:1100px){
.logo-plateau .logo-beeld{height:56px}
.header.geschrompeld .logo-plateau .logo-beeld{height:50px}
}
@media(max-width:640px){
.logo-plateau .logo-beeld{height:42px;max-width:52vw}
.header.geschrompeld .logo-plateau .logo-beeld{height:38px}
.footer .footer-logo .logo-beeld-donker{height:50px}
}
/* het logo staat op de menulijn, niet 20px eronder (plateau 146px, header 106px) */
.logo-plateau{padding-bottom:calc(var(--plateau-h) - var(--header-h))}
.header.geschrompeld .logo-plateau{padding-bottom:0}
/* ---- VASTE REGEL: hero-CTA en zwevende knop delen dezelfde uitstraling ---- */
.hero-knoppen .knop-accent,.zwevend-knop{
background:var(--accent);color:var(--op-accent);opacity:1;filter:none;
box-shadow:0 10px 26px -8px rgba(var(--accent-rgb),.5);
}
.hero-knoppen .knop-accent:hover,.zwevend-knop:hover{background:var(--accent-donker)}
.hero .hero-inhoud{position:relative;z-index:6}
/* ---- bedrijfsvideo als facade: YouTube laadt pas na de klik ---- */
.video-blok img{width:100%;height:100%;object-fit:cover;display:block}
.video-blok iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-blok.speelt::before,.video-blok.speelt .video-play,.video-blok.speelt .video-label{display:none}
.video-blok .video-play{z-index:2}
.video-blok .video-label{z-index:2}
.split .video-blok{aspect-ratio:4/3;max-width:none}
/* ---- Instagram-sectie: altijd puur zwart, altijd de merkgradient (vaste regel) ---- */
.ig-sectie{background:#000000}
.ig-eyebrow{
display:inline-block;border-radius:999px;padding:8px 20px;
font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
background:transparent;color:transparent;
background-image:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
-webkit-background-clip:text;background-clip:text;
}
.ig-eyebrow,.ig-knop{position:relative;border:0}
.ig-eyebrow::before,.ig-knop::before{
content:"";position:absolute;inset:0;border-radius:999px;padding:1px;
background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;pointer-events:none;
}
.ig-sectie .ig-kop{color:var(--wit)}
.ig-sectie .ig-sub{color:rgba(255,255,255,.72);max-width:640px;margin-inline:auto}
.ig-strook{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
max-width:1080px;margin:clamp(28px,3.4vw,42px) auto clamp(28px,3.4vw,40px)}
.ig-tegel{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#111}
.ig-tegel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease),opacity .4s var(--ease)}
.ig-tegel:hover img{transform:scale(1.07);opacity:.55}
.ig-over{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .4s var(--ease)}
.ig-over svg{width:30px;height:30px}
.ig-tegel:hover .ig-over{opacity:1}
.ig-knop{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border-radius:999px;
padding:13px 26px;font-size:16px;font-weight:600;background:transparent;color:transparent;
background-image:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
-webkit-background-clip:text;background-clip:text;transition:background-color .35s var(--ease)}
.ig-knop svg{width:19px;height:19px;flex:0 0 auto}
.ig-knop:hover{background-color:rgba(220,39,67,.12)}
@media (max-width:900px){ .ig-strook{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .ig-strook{grid-template-columns:repeat(2,1fr);gap:10px} }
/* ---- cookiebanner (Consent Mode v2, gelijkwaardige knoppen, intrekken via de footer) ---- */
.ck-banner{position:fixed;inset:0;z-index:6000;display:grid;place-items:end center;
background:rgba(var(--ink-rgb),.55);padding:0 16px 16px;overflow-y:auto}
.ck-banner[hidden]{display:none}
.ck-kaart{background:var(--wit);border-radius:22px;max-width:620px;width:100%;
padding:clamp(22px,3vw,30px);text-align:center;
box-shadow:0 26px 60px -20px rgba(var(--ink-rgb),.5);margin:16px 0}
.ck-kaart h2{font-size:21px;color:var(--ink);margin:0 0 10px}
.ck-kaart p{font-size:14.5px;line-height:1.6;color:var(--tekst);margin:0}
.ck-keuzes{display:grid;gap:10px;margin:18px 0;text-align:left}
.ck-keuze{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;
border:1px solid rgba(var(--ink-rgb),.14);border-radius:14px;cursor:pointer;font-size:14px}
.ck-keuze.ck-vast{opacity:.75;cursor:default}
.ck-keuze input{margin-top:2px;width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto}
.ck-keuze b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.ck-keuze span{color:var(--tekst);line-height:1.45}
.ck-knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ck-knop{flex:1 1 170px;border:0;border-radius:999px;padding:13px 18px;
font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
transition:filter .3s var(--ease)}
.ck-knop:hover{filter:brightness(1.06)}
.ck-weiger,.ck-keuze-op{background:var(--tint2);color:var(--ink)}
.ck-accept{background:var(--accent);color:var(--op-accent)}
.ck-voet{margin-top:14px;font-size:12.5px;color:var(--tekst)}
body.ck-open{overflow:hidden}
body.dps-concept-open .ck-banner{display:none !important}
@media (max-width:520px){ .ck-knop{flex:1 1 100%} }
/* ---- conceptwijzer: de kaart die WEL doorklikt krijgt "Klik hier" (alleen in het concept) ---- */
.concept-wijzer{
position:absolute;top:12px;right:12px;z-index:3;
background:var(--accent);color:var(--op-accent);
font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:6px 12px 7px;border-radius:999px;
box-shadow:0 8px 20px -8px rgba(22,32,92,.55);
pointer-events:none;
}
.concept-open{position:relative}
.kaart.concept-open{box-shadow:0 0 0 2px var(--accent), var(--schaduw)}
.concept-gedempt{opacity:.72;transition:opacity .3s var(--ease)}
.concept-gedempt:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.concept-gedempt{transition:none}}
/* geen rasterlijnen, geen halve teksten links en rechts, geen pijltjes:
de hero toont EEN hele foto (vaste regel) */
.hero-lijnen{display:none}
.hero-schaduwtekst{display:none}
.hero-pijl{display:none}