/* Thermo Flow Vloerverwarming - op basis van DPS-template 4 "Zacht" (v105) */
@font-face{
font-family:'Kumbh Sans';
src:url('../fonts/kumbh-sans-var.woff2') format('woff2');
font-weight:400 700;
font-display:swap;
}
:root{
--ink:#0e2233; /* donkerste kleur: koppen, footerbalk origineel */
--petrol:#1565bf; /* overlays, secundaire knoppen, page-hero's */
--accent:#e62d1f; /* knoppen, eyebrows, iconen */
--tint:#e2eaf3; /* lichte sectiewaas (homepage) */
--tint2:#e4e9ef; /* sectiewaas subpagina's (gemeten) */
--salie:#9db4cb; /* zachte groene hero's (gemeten) */
--bg:#f7f7f7;
--wit:#ffffff;
--groen-vink:#2e9e5b;
--r-kaart:20px; /* (gemeten) */
--r-knop:8px; /* (gemeten) */
--schaduw:0 0 10px rgba(0,0,0,.10); /* (gemeten) */
--ease:cubic-bezier(.22,.61,.36,1);
--header-h:106px; /* (gemeten) */
--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(--petrol);color:var(--wit)}
.knop-accent:hover{background:#0f4c94}
.knop-petrol{background:var(--petrol);color:var(--wit)}
.knop-petrol:hover{background:#0f4c94}
.knop-ink{background:var(--ink);color:var(--wit)}
.knop-ink:hover{background:#081625}
.knop-stil{background:rgba(255,255,255,.16);color:var(--wit)}
.knop-stil:hover{background:rgba(255,255,255,.28)}
.knop-licht{background:#c9d6e4;color:var(--ink)}
.knop-licht:hover{background:#b5c6da}
.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);
background:var(--ink);
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:#eff3f8;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(--petrol);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:124px;height:56px;border:1px solid #e2e5e9;border-radius:10px;color:#a7adb5;font-size:12px;letter-spacing:.06em}
/* bedanktpagina: stappen als blok gecentreerd, regels links */
.bedankt-stappen{list-style:none;width:fit-content;margin:0 auto;padding:0;text-align:left;display:grid;gap:12px}
.bedankt-stappen li{display:flex;gap:10px;align-items:flex-start}
.bedankt-stappen li::before{content:"\2713";color:var(--groen-vink);font-weight:700;flex:0 0 auto}
.mobiel-menu .s-ig span{background:var(--ink)}
.mobiel-menu .menu-social{display:flex;justify-content:center;gap:14px;
margin-top:22px;border:0}
.mobiel-menu .menu-social a{display:grid;place-items:center;padding:0;border-bottom:0}
.mobiel-menu .menu-social a.s-fb{border:2px solid #1877F2}
.mobiel-menu .menu-social a.s-ig{padding:2px}
.mobiel-menu .menu-social a.s-li{border:2px solid #0A66C2}
.mobiel-menu .menu-social a.s-tt{padding:2px}
.mobiel-menu .s-tt span{background:var(--ink)}
.mobiel-menu .menu-score{margin-top:20px;text-align:center}
/* hero: subregel en knoppen (conversie, vast onderdeel) */
.hero-sub{color:var(--wit);font-size:17px;line-height:1.6;max-width:620px;margin:14px auto 0;opacity:.95;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero-knoppen{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.knop-hero-omlijnd{background:transparent;border:2px solid rgba(255,255,255,.85);color:var(--wit)}
.knop-hero-omlijnd:hover{background:rgba(255,255,255,.16)}
@media(max-width:640px){.hero-sub{font-size:15px;padding:0 20px}}
/* 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:124px;height:56px;border:1px solid #e2e5e9;border-radius:10px;color:#a7adb5;font-size:12px;letter-spacing:.06em}
/* bedanktpagina: stappen als blok gecentreerd, regels links */
.bedankt-stappen{list-style:none;width:fit-content;margin:0 auto;padding:0;text-align:left;display:grid;gap:12px}
.bedankt-stappen li{display:flex;gap:10px;align-items:flex-start}
.bedankt-stappen li::before{content:"\2713";color:var(--groen-vink);font-weight:700;flex:0 0 auto}
.mobiel-menu .s-ig span{background:var(--ink)}
/* ---------- zwevende aanvraagknop (mobiel, vaste DPS-regel) ---------- */
.zwevend-knop{
position:fixed;left:14px;bottom:14px;z-index:48;display:none;
align-items:center;gap:8px;background:var(--petrol);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(14,34,51,.55);
}
.zwevend-knop svg{width:16px;height:16px}
@media(max-width:900px){.zwevend-knop{display:inline-flex}}
/* whatsapp- en telefoonknop rechtsonder (mobiel, vast onderdeel) */
.bel-knoppen{
position:fixed;right:14px;bottom:14px;z-index:48;display:none;
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(14,34,51,.55);text-decoration:none;
}
.bel-knop svg{width:24px;height:24px}
.bel-wa{background:#25D366}
.bel-tel{background:var(--petrol)}
@media(max-width:900px){.bel-knoppen{display:flex}}
/* whatsapp- en telefoonknop rechtsonder (mobiel, vast onderdeel) */
.bel-knoppen{
position:fixed;right:14px;bottom:14px;z-index:48;display:none;
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(14,34,51,.55);text-decoration:none;
}
.bel-knop svg{width:24px;height:24px}
.bel-wa{background:#25D366}
.bel-tel{background:var(--petrol)}
@media(max-width:900px){.bel-knoppen{display:flex}}
/* ---------- 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;padding-top:var(--header-h)}
.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:#3a4653;max-width:790px}
.welkom-in-balk .welkom-acties{margin-top:20px}
.usp-rand{border-top:1px solid rgba(14,34,51,.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),#b32218);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(14,34,51,.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(14,34,51,.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;
margin-top:var(--header-h);overflow:hidden;background:var(--petrol);
display:grid; /* de inhoud rekt mee en centreert ook als de hero flexibel is */
}
.hero-baan{
position:absolute;inset:0;display:flex;height:100%;
will-change:transform;
transition:transform .9s cubic-bezier(.25,.1,.25,1);
}
.hero-baan.geen-anim{transition:none}
.hero-dia{
position:relative;flex:0 0 100%;height:100%;
background-size:cover;background-position:right center;
}
/* gemeten uit de pixels: links dicht petrol, naar rechts steeds transparanter */
.hero-dia::after{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,#1565bf 0%,#1565bf 29%,rgba(21,101,191,.80) 40%,
rgba(21,101,191,.45) 55%,rgba(21,101,191,.20) 75%,rgba(21,101,191,.14) 100%)}
/* dunne verticale lijnen op 30 / 47.5 / 65 / 82.5% (gemeten) */
.hero-lijnen{
position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),
linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),
linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),
linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10));
background-size:1px 100%;background-repeat:no-repeat;
background-position:30% 0,47.5% 0,65% 0,82.5% 0;
}
.hero-inhoud{
position:relative;z-index:3;height:100%;
display:grid;place-items:center;text-align:center;color:var(--wit);
padding:48px 24px;
}
/* Google-score linksonder in de hero: los op de foto, zonder vlak */
.google-badge{
position:absolute;bottom:26px;left:26px;z-index:4;
display:flex;align-items:center;gap:9px;
font-size:13.5px;color:var(--wit);white-space:nowrap;
}
.google-badge .g-logo{width:17px;height:17px;flex:0 0 17px}
/* losse score-regel voor in secties */
.g-score{display:inline-flex;flex-direction:column;align-items:center;gap:3px;
font-size:14px;color:var(--ink)}
.g-score .gs-rij{display:inline-flex;align-items:center;gap:9px}
.g-score .g-logo{width:18px;height:18px;flex:0 0 18px}
.g-score .sterren{font-size:14px;letter-spacing:1.5px;margin:0}
.g-score .gs-sub{font-size:12.5px;opacity:.8}
.g-score.op-donker{color:var(--wit)}
.google-badge .sterren{font-size:13px;margin:0;letter-spacing:1.5px}
@media(max-width:900px){
.google-badge{left:50%;bottom:24px;transform:translateX(-50%);
font-size:11.5px;padding:7px 13px;gap:7px}
.google-badge .g-logo{width:14px;height:14px;flex-basis:14px}
.google-badge .sterren{font-size:11px;letter-spacing:1px}
}
.hero-label{display:block;font-size:17px;font-weight:400;margin-bottom:22px}
.hero-titel{
font-size:34px;line-height:1.5;font-weight:700;text-transform:uppercase;
max-width:370px;margin-inline:auto;min-height:3em;
}
.hero-schaduwtekst{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:440px;color:var(--wit);opacity:.10;pointer-events:none;
font-size:28px;line-height:1.5;font-weight:700;text-transform:uppercase;text-align:center;
}
.schaduw-l{left:-70px}
.schaduw-r{right:-70px}
/* pijltjespaar gecentreerd op de verticale lijn van 30% (gemeten: ±50px) */
.hero-pijl{
position:absolute;top:204px;z-index:4;
background:none;border:0;cursor:pointer;padding:14px;
color:rgba(255,255,255,.46);transition:color .3s var(--ease);
}
.hero-pijl:hover{color:rgba(255,255,255,.9)}
.hero-pijl svg{width:30px;height:15px;display:block}
.pijl-l{right:calc(70% + 21px)}
.pijl-r{left:calc(30% + 21px)}
@media(max-width:900px){
.hero-schaduwtekst{display:none}
/* op de telefoon: geen pijltjes; de Google-score staat op hun plek */
.hero-pijl{display:none}
}
/* ---------- page-hero's subpagina's (gemeten) ---------- */
/* gemeten: foto als achtergrond met petrol-laag op 95% dekking eroverheen */
.pagina-hero{
position:relative;margin-top:var(--header-h);
background:var(--petrol) url('../img/hero-2.webp') center/cover no-repeat;
height:270px;display:grid;place-items:center;text-align:center;
}
.pagina-hero::before{content:"";position:absolute;inset:0;
background:var(--petrol);opacity:.95}
/* geen groene gloed maar een heel lichte donkere waas voor het contrast */
.pagina-hero.zonder-gloed::before{background:rgba(0,0,0,.28);opacity:1}
/* projectpagina's: de balk groeit met de inhoud mee en de titel komt los
van het witte logovlak */
.pagina-hero.project-kop{height:auto;min-height:270px;padding:40px 20px 34px}
@media(max-width:640px){.pagina-hero.project-kop{min-height:200px;padding:34px 16px 30px}}
.pagina-hero>*{position:relative;z-index:2}
.pagina-hero h1{
position:relative;z-index:2;
color:var(--wit);font-size:47px;font-weight:700;text-transform:uppercase;
letter-spacing:.01em;
}
.salie-hero{
margin-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{
margin-top:var(--header-h);background:var(--petrol);
padding: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:#9aa5b3;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:#3a4653}
.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:#f1f4f8;
display:grid;place-items:center;color:#9aa5b3;font-size:13px;letter-spacing:.08em;
}
.kaart h3{color:var(--ink);margin-bottom:16px}
.kaart ul{
width:fit-content;margin-inline:auto;text-align:left;
list-style:none;padding:0;margin-bottom:22px;
}
.kaart ul li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#3a4653;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(--petrol);
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:#0f4c94;transform:translateX(3px)}
.kaart-pijl svg{width:18px;height:18px}
/* vast grid (categoriepagina's): geen carrousel */
.kaart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.kaart-grid.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.kaart-grid.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.kaart-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kaart-grid,.kaart-grid.vier{grid-template-columns:1fr;gap:18px}}
.car-pijl{
position:absolute;top:50%;transform:translateY(-50%);
background:none;border:0;cursor:pointer;padding:10px;
color:#7e8b9b;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(230,45,31,.35);transition:background .3s}
.dots span.actief{background:var(--petrol)}
/* ---------- "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:#3a4653;font-size:15px}
/* variant B: split met foto en vinkjes */
.uniek-vinkjes{width:fit-content;margin-inline:auto;text-align:left;list-style:none;margin-top:18px}
.uniek-vinkjes li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:15.5px;color:#3a4653}
.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(230,45,31,.28);line-height:1}
.pijler h3{font-size:20px;margin:10px 0 10px}
.pijler p{color:#3a4653;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(21,101,191,.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(--petrol);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:#3a4653;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(21,101,191,.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(--petrol);color:var(--wit);font-weight:700;font-size:20px;
display:grid;place-items:center;box-shadow:0 0 0 6px var(--wit);position:relative;z-index:2}
.tlv-kaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:24px 26px;text-align:center}
.tlv-kaart h3{font-size:18px;margin-bottom:6px}
.tlv-kaart p{color:#3a4653;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:#3a4653;font-size:14px}
.sp-pijl{align-self:center;color:#9aa8b8}
.sp-pijl svg{width:22px;height:16px}
@media(max-width:960px){.stappen-pijl{grid-template-columns:1fr}
.sp-pijl{transform:rotate(90deg);justify-self:center}}
/* variant D: donkere band met stappenlijst naast foto */
.stappen-donker{position:relative;background:var(--petrol) url('../img/hero-2.webp') center/cover no-repeat}
.stappen-donker::before{content:"";position:absolute;inset:0;background:var(--petrol);opacity:.95}
.stappen-donker .container{position:relative;z-index:2}
.stappen-donker h2{color:var(--wit)}
.stappen-donker .kop-blok p{color:rgba(255,255,255,.85)}
.sd-lijst{max-width:640px;margin-inline:auto;list-style:none;position:relative}
.sd-lijst::before{content:"";position:absolute;top:12px;bottom:12px;left:26px;
width:2px;background:rgba(255,255,255,.25)}
.sd-lijst li{position:relative;display:flex;gap:22px;align-items:flex-start;padding:16px 0}
.sd-nr{position:relative;z-index:2;flex:0 0 52px;width:52px;height:52px;border-radius:50%;
background:var(--wit);color:var(--petrol);font-weight:700;font-size:20px;
display:grid;place-items:center}
.sd-lijst h3{color:var(--wit);font-size:18px;margin:4px 0 6px}
.sd-lijst p{color:rgba(255,255,255,.78);font-size:14.5px}
/* ---------- weetjes & tips (4 varianten) ---------- */
.tips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.tips-grid{grid-template-columns:1fr;gap:18px}}
/* variant A: tipkaart met foto bovenaan */
.tipkaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
overflow:hidden;text-align:center;display:flex;flex-direction:column;
transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tipkaart:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.tipkaart .beeld{aspect-ratio:16/9;overflow:hidden}
.tipkaart .beeld img{width:100%;height:100%;object-fit:cover;
transition:transform .6s var(--ease)}
.tipkaart:hover .beeld img{transform:scale(1.05)}
.tipkaart .binnen{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.tipkaart h3{font-size:19px;margin:10px 0 10px}
.tipkaart p{color:#3a4653;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:#3a4653;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(21,101,191,0) 30%,rgba(21,101,191,.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(21,101,191,0) 25%,rgba(21,101,191,.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:#3a4653;font-size:14px;margin-bottom:12px}
/* ---------- kennisbank- en regiokaarten ---------- */
.tip-tag{
display:inline-block;background:rgba(230,45,31,.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:#3a4653;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:#3a4653}
/* ---------- projectkaarten (gemeten: foto met petrol-overlay, witte titel) ---------- */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.project-grid{grid-template-columns:1fr}}
.projectkaart{
position:relative;border-radius:var(--r-kaart);overflow:hidden;
aspect-ratio:353/250;display:block;text-align:center;
text-decoration:none;background-size:cover;background-position:center;
}
/* besluit Dikkie 20-08: tekst onderin de kaart, foto bovenin zichtbaar,
donkere gloed van onderaf (zoals het vaste DPS-voorbeeld) */
.projectkaart::before{content:"";position:absolute;inset:0;
background:rgba(21,101,191,.22);transition:background .3s var(--ease)}
.projectkaart::after{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(14,34,51,0) 38%,rgba(14,34,51,.85) 100%)}
.projectkaart:hover::before{background:rgba(21,101,191,.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:5fr 6fr;gap:clamp(32px,5vw,64px);align-items:center}
.split>div{text-align:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .knop{margin-top:26px}
.fotogrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.foto{border-radius:var(--r-kaart);aspect-ratio:4/3;overflow:hidden;background:#ccd6e2}
.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(--petrol);color:var(--wit);
font-weight:700;font-size:22px;display:grid;place-items:center;margin:0 auto 20px}
.stap h3{margin-bottom:12px}
.stap p{color:#3a4653;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:#3a4653;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{margin-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:#223243}
.over-hero .knop{margin-top:12px}
.waarom-kaart{
background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
padding:34px 32px;text-align:center;
}
.waarom-kaart h3{font-size:24px;line-height:1.35;margin-bottom:18px}
.waarom-kaart ul{width:fit-content;margin-inline:auto;text-align:left;list-style:none}
.waarom-kaart li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font-size:15px;color:#3a4653}
.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(--petrol);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),#b32218);
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(14,34,51,.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:#1565bf;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:#0f4c94;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(14,34,51,.12);
}
.contact-item:last-child{border-bottom:0}
.contact-cirkel{
flex:0 0 61px;height:61px;border-radius:50%;background:var(--petrol);
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:#3a4653;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 #d5dbe4;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(--petrol);border-radius:40px;
padding:clamp(48px,6vw,72px) clamp(28px,6vw,96px);
text-align:center;color:var(--wit);
}
.cta-blok h2{color:var(--wit);font-size:30px;max-width:640px;margin-inline:auto}
.cta-blok p{margin:16px auto 32px;opacity:.95}
.cta-blok .knop{margin:0 6px 10px}
/* ---------- footer: altijd zwart (vaste DPS-regel) ---------- */
.footer{background:#000000;color:rgba(255,255,255,.72);
padding:clamp(56px,7vw,80px) 24px 0}
.cta-strook + .footer{padding-top:calc(clamp(56px,7vw,80px) + 90px)}
.footer-boven{
max-width:1360px;margin-inline:auto;
display:grid;grid-template-columns:1.5fr 1.2fr 1fr 1fr 1fr;
gap:44px;padding-bottom:48px;
}
@media(max-width:1100px){.footer-boven{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:640px){.footer-boven{grid-template-columns:1fr}}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:22px;text-decoration:none}
.footer .footer-logo .logo-merk{width:44px;height:44px;font-size:20px;
border-radius:11px;color:#ffffff;line-height:1;display:grid;place-items:center}
.footer-logo b{color:var(--wit);font-size:20px;letter-spacing:.02em}
.footer-logo span{display:block;color:rgba(255,255,255,.55);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.footer h4{color:var(--wit);font-size:17px;font-weight:600;margin-bottom:18px}
.footer ul{list-style:none}
.footer li{padding:6px 0;font-size:15px}
.footer a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .3s var(--ease)}
.footer a:hover{color:var(--wit)}
.footer .vink{display:flex;gap:10px;align-items:flex-start}
.footer .vink::before{
content:"";flex:0 0 15px;height:15px;margin-top:4px;
background:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.footer .met-icoon{display:flex;gap:10px;align-items:flex-start}
.footer .met-icoon svg{flex:0 0 15px;height:15px;margin-top:4px;stroke:rgba(255,255,255,.6)}
/* social: elk kanaal in zijn eigen merkkleur met cirkelrand (vaste DPS-regel) */
.social{display:flex;gap:12px;margin-top:22px}
.social a{
flex:0 0 40px;width:40px;height:40px;border-radius:50%;
display:grid;place-items:center;
transition:transform .3s var(--ease);
}
.social a:hover{transform:translateY(-2px)}
.s-fb{border:2px solid #1877F2}
.s-fb svg{width:18px;height:18px;fill:#1877F2;display:block}
.s-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);padding:2px}
.s-ig span{
width:100%;height:100%;border-radius:50%;background:#000;
display:grid;place-items:center;
}
.s-ig svg{width:18px;height:18px;display:block}
.s-li{border:2px solid #0A66C2}
.s-li svg{width:17px;height:17px;fill:#0A66C2;display:block}
.s-tt{background:linear-gradient(45deg,#25F4EE,#FE2C55);padding:2px}
.s-tt span{
width:100%;height:100%;border-radius:50%;background:#000;
display:grid;place-items:center;
}
.s-tt svg{width:17px;height:17px;display:block}
.footer-onder{
max-width:1360px;margin-inline:auto;
border-top:1px solid rgba(255,255,255,.12);
padding:22px 0;font-size:13.5px;color:rgba(255,255,255,.55);
display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:space-between;
}
.footer-onder nav{display:flex;flex-wrap:wrap;gap:14px 30px}
/* mobiel: alleen DPS-regel + copyright, gecentreerd (de juridische links
staan hoger in de footer onder Service) */
@media(max-width:640px){
.footer-onder{flex-direction:column-reverse;justify-content:center;
text-align:center;gap:8px}
.footer-onder nav{justify-content:center}
.footer-onder nav a{display:none}
}
/* mobiel: alleen DPS-regel + copyright, gecentreerd (de juridische links
staan hoger in de footer onder Service) */
@media(max-width:640px){
.footer-onder{flex-direction:column-reverse;justify-content:center;
text-align:center;gap:8px}
.footer-onder nav{justify-content:center}
.footer-onder nav a{display:none}
}
.footer-onder a{color:rgba(255,255,255,.55)}
.footer-onder a:hover{color:var(--wit)}
/* klikbare makerslink: valt op tussen de gedempte foottekst */
.footer-onder a.dps-link{color:var(--salie);text-decoration:underline;text-underline-offset:3px}
.footer-onder a.dps-link:hover{color:var(--wit)}
/* de mobiele regel verbergt alle nav-links, maar de DPS-link blijft altijd staan */
.footer-onder nav a.dps-link{display:inline}
/* ---------- artikelpagina's (kennisbank) ---------- */
.artikel-meta{display:flex;justify-content:center;align-items:center;gap:14px;
flex-wrap:wrap;padding:0 16px;
margin-top:14px;color:rgba(255,255,255,.85);font-size:13.5px}
@media(max-width:640px){
.artikel-meta{display:grid;grid-template-columns:auto auto;justify-content:center;
gap:8px 16px;align-items:center}
.artikel-meta>*:nth-child(3){grid-column:1/-1;justify-self:center}
}
.pagina-hero h1.klein{font-size:38px;text-transform:none}
@media(max-width:640px){.pagina-hero h1.klein{font-size:24px}}
.artikel-meta .tip-tag{margin:0;background:rgba(255,255,255,.18);color:#fff}
.artikel-kop-hero{position:relative;margin-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(21,101,191,.55),rgba(21,101,191,.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:#3a4653;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:#3a4653}
.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(230,45,31,.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:#3a4653;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(14,34,51,.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:#3a4653;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:#3a4653}
.foto-label{position:absolute;top:14px;left:14px;z-index:2;
background:rgba(14,34,51,.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:#3a4653}
.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(14,34,51,.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(14,34,51,.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:#edf1f6;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(--petrol);color:var(--wit)}
.calc-voortgang i{flex:1;height:2px;background:#e3e7ed;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 #e3e7ed;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(--petrol)}
.calc-tegel.gekozen{border-color:var(--petrol);background:rgba(21,101,191,.10);transform:translateY(-1px)}
.calc-tegel.gekozen svg{stroke:var(--petrol)}
.calc-velden .veld input{border:1.5px solid #e3e7ed}
.calc-acties{margin-top:auto;padding-top:22px}
.calc-volgende{
width:100%;display:block;text-align:center;background:var(--petrol);color:var(--wit);
border:0;border-radius:12px;padding:16px;cursor:pointer;
font-family:inherit;font-size:16.5px;font-weight:700;
transition:background .25s var(--ease),transform .25s var(--ease);
}
.calc-volgende:hover{background:#0f4c94;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:#3a4653}
.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(--petrol)}
.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:#3a4653;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(14,34,51,.12)}
.faq-lijst details{border-bottom:1px solid rgba(14,34,51,.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(--petrol);color:#fff}
.faq-lijst details p{padding:0 46px 20px 4px;margin:0;color:#3a4653;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:#3a4653;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:#3a4653;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 #e3e7ed;border-radius:12px;padding:14px 18px;
font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;
transition:border-color .25s var(--ease),transform .25s var(--ease)}
.dienst-knop:hover{border-color:var(--accent);transform:translateY(-1px)}
.dienst-knop::after{content:"\203A";color:var(--accent);font-size:18px}
.cta-donker{background:var(--ink);border-radius:24px;
padding:clamp(40px,5vw,64px) clamp(24px,5vw,72px);text-align:center;color:var(--wit)}
.cta-donker h2{color:var(--wit);margin-bottom:12px}
.cta-donker p{color:rgba(255,255,255,.8);max-width:560px;margin:0 auto 26px}
.video-blok{position:relative;border-radius:var(--r-kaart);overflow:hidden;
aspect-ratio:16/9;max-width:960px;margin-inline:auto;
background:var(--salie) url('../img/hero-2.webp') center/cover no-repeat}
.video-blok::before{content:"";position:absolute;inset:0;background:rgba(14,34,51,.35)}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:78px;height:78px;border-radius:50%;background:var(--petrol);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:#0f4c94}
.video-play svg{width:26px;height:26px;margin-left:4px}
.video-label{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
background:rgba(14,34,51,.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(230,45,31,.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(230,45,31,.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:#3a4653}
/* ---------- mobiele verfijning (besluiten Dikkie 20-08) ---------- */
.alleen-mobiel{display:none}
@media(max-width:860px){
.alleen-desktop{display:none}
.alleen-mobiel{display:block}
/* projecten-sectie homepage: alles gecentreerd */
#projecten .split>div:first-child{text-align:center}
}
@media(max-width:640px){
/* dienstkaarten: zinnen op één regel, vinkjes gelijk gecentreerd */
.kaart ul li{font-size:13.5px;white-space:nowrap}
.waarom-kaart li{font-size:14px;white-space:nowrap}
/* footer: alles gecentreerd, kolommen twee aan twee */
.footer-boven{grid-template-columns:1fr 1fr;gap:30px 14px}
.footer-boven>div{text-align:center}
.footer-boven>div:first-child{grid-column:1/-1}
.footer-boven .footer-logo{justify-content:center}
.footer-boven .footer-logo{justify-content:center}
.footer-boven>div:nth-child(2){order:1}
.footer-boven>div:nth-child(5){order:2}
.footer-boven>div:nth-child(3){order:3}
.footer-boven>div:nth-child(4){order:4}
.footer-boven>div:first-child ul{
display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
width:fit-content;margin-inline:auto}
.footer-boven .vink{font-size:13.5px;white-space:nowrap}
.social{justify-content:center}
.footer .pijl-link{justify-content:center}
}
/* ---------- mobiele verfijning (besluiten Dikkie 20-08) ---------- */
.alleen-mobiel{display:none}
@media(max-width:860px){
.alleen-desktop{display:none}
.alleen-mobiel{display:block}
/* projecten-sectie homepage: alles gecentreerd */
#projecten .split>div:first-child{text-align:center}
}
@media(max-width:640px){
/* dienstkaarten: zinnen op één regel, vinkjes gelijk gecentreerd */
.kaart ul li{font-size:13.5px;white-space:nowrap}
.waarom-kaart li{font-size:14px;white-space:nowrap}
/* footer: alles gecentreerd, kolommen twee aan twee */
.footer-boven{grid-template-columns:1fr 1fr;gap:30px 14px}
.footer-boven>div{text-align:center}
.footer-boven>div:first-child{grid-column:1/-1}
.footer-boven .footer-logo{justify-content:center}
.footer-boven>div:nth-child(2){order:1}
.footer-boven>div:nth-child(5){order:2}
.footer-boven>div:nth-child(3){order:3}
.footer-boven>div:nth-child(4){order:4}
.footer-boven>div:first-child ul{
display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
width:fit-content;margin-inline:auto}
.footer-boven .vink{font-size:13.5px;white-space:nowrap}
.social{justify-content:center}
.footer .pijl-link{justify-content:center}
}
/* ---------- reveals: vaste DPS-waarden ---------- */
.js .reveal{opacity:0;transform:translateY(24px);
transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
/* zijwaartse reveals (stappenplan): schuiven vanaf de eigen kant in beeld */
.js .reveal-li,.js .reveal-re{opacity:0;
transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal-li{transform:translateX(-44px)}
.js .reveal-re{transform:translateX(44px)}
.js .reveal-li.is-visible,.js .reveal-re.is-visible{opacity:1;transform:none}
.js .reveal-li .tlv-nr,.js .reveal-re .tlv-nr{opacity:0;transform:scale(.4);
transition:opacity .5s var(--ease) .3s,transform .5s var(--ease) .3s}
.js .reveal-li.is-visible .tlv-nr,.js .reveal-re.is-visible .tlv-nr{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
.js .reveal-li,.js .reveal-re,.js .reveal-li .tlv-nr,.js .reveal-re .tlv-nr{
opacity:1;transform:none;transition:none}
}
.js .hero .reveal{transform:none}
.stagger>*:nth-child(1){transition-delay:0ms}
.stagger>*:nth-child(2){transition-delay:110ms}
.stagger>*:nth-child(3){transition-delay:220ms}
.stagger>*:nth-child(4){transition-delay:330ms}
.stagger>*:nth-child(5){transition-delay:440ms}
.stagger>*:nth-child(6){transition-delay:550ms}
.stagger>*:nth-child(7){transition-delay:660ms}
.stagger>*:nth-child(8){transition-delay:770ms}
.stagger>*:nth-child(9){transition-delay:880ms}
.stagger>*:nth-child(10){transition-delay:990ms}
.stagger>*:nth-child(11){transition-delay:1100ms}
.stagger>*:nth-child(12){transition-delay:1210ms}
.stagger>*:nth-child(7){transition-delay:660ms}
.stagger>*:nth-child(8){transition-delay:770ms}
.stagger>*:nth-child(9){transition-delay:880ms}
.stagger>*:nth-child(10){transition-delay:990ms}
.stagger>*:nth-child(11){transition-delay:1100ms}
.stagger>*:nth-child(12){transition-delay:1210ms}
@media (prefers-reduced-motion: reduce){
.js .reveal{opacity:1;transform:none;transition:none}
.hero-baan{transition:none}
.logo-plateau,.logo-merk,.logo-tekst{transition:none}
}
/* ---------- mobiel ---------- */
@media(max-width:640px){
:root{--header-h:76px;--plateau-h:100px}
.header{padding:0 16px}
.logo-plateau{width:auto;min-width:0;padding:0 16px;gap:8px;border-radius:0 0 24px 0}
.logo-merk{width:34px;height:34px;font-size:15px;border-radius:9px}
.logo-tekst b{font-size:14px}
.logo-tekst span{font-size:7.5px;letter-spacing:.24em}
.nav .knop{font-size:13px;padding:9px 12px 10px;white-space:nowrap}
.hero{height:78svh}
.hero-titel{font-size:24px;max-width:340px}
.pagina-hero{height:200px}
.cta-blok h2{font-size:24px}
}
@media print{.hero{height:auto}.header{position:static}}
/* mobiel: hero groeit mee en de google-badge staat in de flow onder de
knoppen; staat bewust ONDERAAN het bestand zodat hij de absolute
positionering van eerdere regels wint */
@media(max-width:640px){
.hero{height:auto;min-height:78svh;padding:calc(var(--header-h) + 26px) 0 30px}
.google-badge{position:static;transform:none;margin:18px auto 0;justify-self:center;order:9}
}
/* klantlogo Thermo Flow: afbeelding in plateau en footer */
.logo-plateau img.logo-beeld{height:108px;width:auto;max-width:calc(100% - 32px);object-fit:contain;transition:transform .35s var(--ease)}
.header.geschrompeld .logo-plateau img.logo-beeld{transform:scale(.88)}
.footer-logo img.logo-beeld{height:74px;width:auto}
@media(max-width:900px){
.logo-plateau img.logo-beeld{height:52px;max-width:none}
.footer-logo img.logo-beeld{height:62px}
}
/* ============ DPS COOKIEBANNER (vast onderdeel, Consent Mode v2) ============ */
#dpscb{ position:fixed; inset:auto 0 0 0; z-index:2147483000; padding:14px; display:flex; justify-content:center; }
#dpscb .dpscb-card{ background:#fff; color:#252a2d; border:1px solid #e2e2e2; border-radius:16px;
box-shadow:0 12px 40px rgba(0,0,0,.22); max-width:560px; width:100%; padding:20px 22px; }
#dpscb h3{ margin:0 0 8px; font-size:18px; color:#252a2d !important; }
#dpscb p{ margin:0 0 14px; font-size:14px; line-height:1.55; color:#4a5157; }
#dpscb p a{ color:inherit; text-decoration:underline; }
#dpscb .dpscb-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#dpscb .dpscb-btn{ appearance:none; border:0; border-radius:999px; padding:13px 18px; font-size:15px;
font-weight:700; cursor:pointer; font-family:inherit; }
#dpscb .dpscb-accept{ background:var(--petrol); color:#fff; }
#dpscb .dpscb-deny{ background:#eef0f2; color:#252a2d; }
#dpscb .dpscb-link{ appearance:none; background:none; border:0; padding:10px 0 0; font-size:13.5px;
text-decoration:underline; cursor:pointer; color:#6c7680; font-family:inherit; }
#dpscb .dpscb-opts{ border-top:1px solid #ececec; margin:4px 0 12px; padding-top:12px; display:flex; flex-direction:column; gap:10px; }
#dpscb .dpscb-opts[hidden]{ display:none; }
#dpscb .dpscb-opt{ display:flex; gap:10px; align-items:flex-start; font-size:14px; }
#dpscb .dpscb-opt small{ display:block; color:#77808a; font-size:12.5px; }
#dpscb .dpscb-save{ background:#3a444c; color:#fff; margin-top:2px; }
@media (max-width:640px){ #dpscb{ padding:10px; } #dpscb .dpscb-card{ padding:16px; } }
/* dienst- en artikelfoto's in de kaartbeelden (contentwissel) */
.kaart-beeld{overflow:hidden;padding:0}
.kaart-beeld img,.product-kaart-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.product-kaart-beeld{overflow:hidden;padding:0}
/* lang e-mailadres in de footer netjes laten afbreken op smalle schermen */
.footer-boven li, .footer-boven li a{overflow-wrap:anywhere}