/* 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:#1F2A2F; /* donkerste kleur: koppen, footerbalk origineel */
--petrol:#34434a; /* overlays, secundaire knoppen, page-hero's */
--accent:#A8896A; /* knoppen, eyebrows, iconen */
--tint:#efe9e2; /* lichte sectiewaas (homepage) */
--tint2:#eceeef; /* sectiewaas subpagina's (gemeten) */
--salie:#c9b8a5; /* zachte groene hero's (gemeten) */
--bg:#f7f7f7;
--wit:#ffffff;
--groen-vink:#2e9e5b;
--accent-donker:#8f7356; /* hover van accentknoppen en pijlen */
--petrol-donker:#27343a; /* hover van petrol-knoppen */
--ink-donker:#141c20; /* hover van inkt-knoppen */
--tekst:#3d4a50; /* lopende tekst in kaarten en alinea's */
--tint3:#e4dbd1; /* achtergrond projectenblok homepage */
--op-accent:#1F2A2F; /* tekst OP de accentkleur; bij een lichte accentkleur op var(--ink) zetten */
--accent-rgb:168,137,106; /* dezelfde kleuren als hierboven, voor rgba(): ALTIJD mee omzetten */
--petrol-rgb:52,67,74;
--ink-rgb:31,42,47;
--r-kaart:20px; /* (gemeten) */
--r-knop:8px; /* (gemeten) */
--schaduw:0 0 10px rgba(0,0,0,.10); /* (gemeten) */
--ease:cubic-bezier(.22,.61,.36,1);
--header-h:106px; /* (gemeten) */
--nav-gap:26px; /* tussenruimte tussen ALLE items in de header */
--nav-vrij:40px; /* minimale afstand van de headerrij tot het logoplateau */
--plateau-h:146px; /* (gemeten) */
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
font-family:'Kumbh Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* ---------- typografie ---------- */
h2{font-size:32px;line-height:1.4;font-weight:600;color:var(--ink)}
h3{font-size:20px;line-height:1.3;font-weight:600}
p{font-size:16px;line-height:1.5}
@media(max-width:640px){h2{font-size:26px}}
.eyebrow{
display:block;color:var(--accent);font-size:13px;font-weight:600;
text-transform:uppercase;letter-spacing:.18em;margin-bottom:14px;
}
/* ---------- knoppen (gemeten: 17px/500, 8px, 14px 25px 15px) ---------- */
.knop{
display:inline-block;font-size:17px;font-weight:500;text-decoration:none;
border-radius:var(--r-knop);padding:14px 25px 15px;border:0;cursor:pointer;
font-family:inherit;
transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.knop:hover{transform:translateY(-2px)}
.knop-accent{background:var(--accent);color:var(--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;justify-content:flex-end;line-height:1.35;
gap:var(--nav-gap);padding-left:var(--nav-vrij);padding-right:22px}
/* Een doorlopende rij: menu-items, telefoonnummer en offerteknop staan allemaal
op dezelfde lijn met exact dezelfde tussenruimte (--nav-gap), en de rij houdt
altijd --nav-vrij afstand tot het witte logoplateau.
Fout die is voorgekomen: .nav-links had flex:1 met justify-content:center.
Bij veel menu-items vulde die groep de hele ruimte, plakte het eerste item
("Home") tegen het plateau, en viel er tegelijk een gat tussen het laatste
menu-item en het telefoonnummer. Niet terugzetten naar center. */
.nav-links{flex:0 1 auto;display:flex;align-items:center;
justify-content:flex-end;gap:var(--nav-gap)}
.nav-links>a,.nav .heeft-sub>a{color:var(--wit);text-decoration:none;font-size:17px;font-weight:500;line-height:1.35}
.nav .heeft-sub>a{display:inline-flex;align-items:center;gap:5px}
.nav-links>a,.nav .heeft-sub>a{padding-bottom:8px;border-bottom:2px solid transparent;
transition:border-color .3s var(--ease)}
.nav-links>a.actief,.nav .heeft-sub>a.actief,
.nav-links>a:hover,.nav .heeft-sub:hover>a{border-bottom-color:var(--accent)}
/* Het pijltje stond op vertical-align:1px en duwde de regelbox van de vier
dropdown-items een pixel omlaag ten opzichte van de gewone menu-items.
Met inline-flex op de link en flex op de wrapper staat alles exact gelijk. */
.nav .pijltje{font-size:13px;line-height:1;opacity:.85}
.nav .knop{padding:12px 24px 13px;margin-left:0;white-space:nowrap;line-height:1.35}
.nav .knop .knop-kort{display:none}
/* dropdown (gemeten: wit, radius 20, schaduw 0 0 10, links 15px, pad 13/20) */
.heeft-sub{position:relative}
.nav .heeft-sub{display:flex;align-items:center}
.submenu{
position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,8px);
min-width:186px;background:var(--wit);border-radius:20px;overflow:hidden;
box-shadow:0 0 10px rgba(0,0,0,.10);list-style:none;
opacity:0;visibility:hidden;
transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.heeft-sub:hover .submenu,.heeft-sub:focus-within .submenu{
opacity:1;visibility:visible;transform:translate(-50%,0);
}
.submenu a{
display:block;padding:13px 20px;font-size:15px;color:var(--ink);
text-decoration:none;border:0;white-space:nowrap;
transition:background-color .3s var(--ease);
}
.submenu a:hover{background:#f1f5f3;color:var(--petrol)}
@media(max-width:1360px){:root{--nav-gap:15px}
.nav-links>a,.nav .heeft-sub>a{font-size:15px}
.nav .knop{font-size:15px;padding:11px 18px 12px}}
@media(max-width:1200px){.nav-links{display:none}
.nav{justify-content:flex-end}}
/* ---------- hamburger en mobiel menu ---------- */
.hamburger{
display:none;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;margin-left:14px;background:none;border:0;cursor:pointer;
flex-shrink:0;
}
.hamburger span{display:block;width:24px;height:2px;background:var(--wit);
margin-inline:auto;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .hamburger span:nth-child(2){opacity:0}
.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1200px){.hamburger{display:flex}}
.mobiel-menu{
position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;
background:var(--ink);overflow-y:auto;padding:18px 22px 90px;
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.menu-open .mobiel-menu{opacity:1;visibility:visible;transform:none}
.menu-open{overflow:hidden}
.mobiel-menu a{display:block;color:var(--wit);text-decoration:none;
font-size:17px;font-weight:600;padding:14px 6px;
border-bottom:1px solid rgba(255,255,255,.10)}
.mobiel-menu details{border-bottom:1px solid rgba(255,255,255,.10)}
.mobiel-menu summary{list-style:none;cursor:pointer;color:var(--wit);
font-size:17px;font-weight:600;padding:14px 6px;position:relative}
.mobiel-menu summary::-webkit-details-marker{display:none}
.mobiel-menu summary::after{content:"\25BE";position:absolute;right:10px;
color:var(--accent);transition:transform .3s var(--ease)}
.mobiel-menu details[open] summary::after{transform:rotate(180deg)}
.mobiel-menu details a{font-weight:400;font-size:15.5px;padding:11px 6px 11px 20px;
color:rgba(255,255,255,.85);border-bottom:0}
.mobiel-menu details ul{list-style:none;padding-bottom:8px}
.mobiel-menu .menu-offerte{margin-top:20px;background:var(--accent);border:0;
border-radius:12px;text-align:center;font-size:17px;padding:16px}
.mobiel-menu .menu-social{display:flex;justify-content:center;gap:14px;
margin-top:22px;border:0}
.mobiel-menu .menu-social a{display:grid;place-items:center;padding:0;border-bottom:0}
.mobiel-menu .menu-social a.s-fb{border:2px solid #1877F2}
.mobiel-menu .menu-social a.s-ig{padding:2px}
.mobiel-menu .menu-social a.s-li{border:2px solid #0A66C2}
.mobiel-menu .menu-social a.s-tt{padding:2px}
.mobiel-menu .s-tt span{background:var(--ink)}
.mobiel-menu .menu-score{margin-top:20px;text-align:center}
/* hero: subregel en knoppen (conversie, vast onderdeel) */
.hero-sub{color:var(--wit);font-size:17px;line-height:1.6;max-width:620px;margin:14px auto 0;opacity:.95;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero-knoppen{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.knop-hero-omlijnd{background:transparent;border:2px solid rgba(255,255,255,.85);color:var(--wit)}
.knop-hero-omlijnd:hover{background:rgba(255,255,255,.16)}
@media(max-width:640px){.hero-sub{font-size:15px;padding:0 20px}}
/* telefoonnummer in de navigatie (alleen op brede schermen) */
.nav-tel{display:none;align-items:center;gap:8px;color:var(--wit);font-weight:600;white-space:nowrap;font-size:15px;
line-height:1.35;padding-bottom:8px;border-bottom:2px solid transparent}
.nav-tel svg{width:16px;height:16px;stroke:var(--wit)}
@media(min-width:1240px){
.nav-tel{display:inline-flex;margin:0}
.nav-links>a,.nav .heeft-sub>a{white-space:nowrap}
}
/* keurmerkenstrook: skill vult echte logo's in EIGEN kleuren in */
.keurmerk-strook{margin-top:clamp(36px,4vw,52px);text-align:center}
.keurmerk-intro{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a949a;margin-bottom:16px}
.keurmerk-logos{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.keurmerk-vak{display:grid;place-items:center;width: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}}
/* 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}
}
/* ---------- header: alles op een lijn, en de knop altijd in beeld ----------
De rij is: menu-items, telefoonnummer, offerteknop. Wordt het te krap, dan
krimpt eerst de tussenruimte, dan de letter, en pas als laatste valt het
telefoonnummer weg. De offerteknop mag NOOIT buiten beeld lopen.
Reken het na als je menu-items toevoegt of weghaalt. De rij heeft nodig:
25vw (het plateau) + de som van de items + (aantal-1) x --nav-gap
+ --nav-vrij + 22px
Deze trappen zijn gemeten op NEGEN menu-items plus telefoon en knop; op
volle maat past dat pas vanaf ongeveer 1790px. Met minder items is er meer
lucht, dus dan werken ze ook.
Fout die is voorgekomen: met de eigen menu-items van de klant erbij werd de
rij te breed en stond "Offerte aanvragen" 168px buiten het scherm op 1440.
Meet daarom altijd van 1920 tot 360, niet alleen op 1440.
Let op: het mobiele menu begint bij max-width:1200px, dus deze regels
starten bij min-width:1201px. */
@media(min-width:1201px) and (max-width:1789px){
:root{--nav-gap:20px;--nav-vrij:32px}
.nav-links>a,.nav .heeft-sub>a{font-size:16px}
}
@media(min-width:1201px) and (max-width:1659px){
:root{--nav-gap:16px;--nav-vrij:26px}
.nav-links>a,.nav .heeft-sub>a{font-size:15px}
.nav-tel{font-size:14px}
}
@media(min-width:1201px) and (max-width:1360px){
/* vanaf hier past het telefoonnummer er niet meer bij zonder de rij te
wringen; het staat nog wel in het mobiele menu en in de footer */
.nav-tel{display:none}
}
@media(min-width:1201px) and (max-width:1300px){
:root{--nav-gap:12px;--nav-vrij:18px}
.nav-links>a,.nav .heeft-sub>a{font-size:14.5px}
.nav .knop{padding:11px 18px 12px;font-size:15px}
}
/* ---------- smalle schermen: de offerteknop mag het logoplateau niet raken ----------
Het plateau staat position:absolute, dus de nav houdt er uit zichzelf geen
rekening mee. Fout die is voorgekomen: op 390px lag de knop 21px over het
witte plateau heen, op 360px zelfs 51px. Daarom hieronder een korte
knoptekst; de span-variant staat in genereer.py. */
@media(max-width:430px){
.nav .knop{padding:10px 13px 11px;font-size:13.5px;letter-spacing:0}
.nav .knop .knop-lang{display:none}
.nav .knop .knop-kort{display:inline}
.nav{gap:10px}
}
@media(max-width:345px){
/* nog smaller past er niets meer naast; de bezoeker heeft hier het mobiele
menu en de zwevende knop "Aanvraag doen" linksonder */
.nav .knop{display:none}
}
/* ---- voorbeeldreviews: Google-vormgeving blijft compleet, alleen het cijfer
en de datum worden vervangen door het woord concept (vaste regel) ---- */
.review-concept{
display:inline-block;background:var(--ink);color:var(--wit);
border-radius:999px;padding:2px 10px 3px;
font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.google-badge .review-concept,
.g-score.op-donker .review-concept{background:rgba(255,255,255,.24)}
/* alleen een VOORBEELDREVIEW krijgt een pill; een echte datum blijft gewoon tekst */
.review .review-datum.voorbeeld{
display:inline-block;border:1px solid var(--accent);border-radius:999px;
padding:3px 12px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink);
}
.google-regel .gr-sub{max-width:640px;margin-inline:auto;text-align:center}
/* het woord concept op de plek van een teller-cijfer, zelfde maatvoering */
.usp-c b.teller-concept{text-transform:uppercase;letter-spacing:.06em;font-size:.62em}
/* ---------- HEADERFIX-DOORZICHTIG ----------
VASTE REGEL: de header is ALTIJD volledig doorzichtig, ook na het scrollen,
en wordt nooit een dekkende of witte balk. De hero en de subhero's lopen er
met padding-top onderdoor, zodat de foto tot bovenaan het scherm doorloopt.
Logo en menutekst blijven leesbaar door de permanente gradient op .header.
Fout die is voorgekomen (AIMEJ Transport, 01-09-2026): de doorzichtig-regel
stond op .nav in plaats van op .header. De nav is maar 48px hoog binnen een
header van 106px, dus boven en onder die strook bleef de dekkende
headerkleur staan als twee gekleurde lijnen rond de menutekst.
Zet deze regel dus NOOIT terug op .nav en geef .header nooit weer een
achtergrondkleur. */
.hero .hero-inhoud{padding-top:calc(var(--header-h) + 12px)}
.pagina-hero{min-height:calc(270px + var(--header-h))}
.pagina-hero h1,.pagina-hero .artikel-meta{position:relative;z-index:2}
/* ============================================================
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}
/* ===== DagLichtDesign concept: vaste regels skill ===== */
.header{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}
.hero{margin-top:0}
.eerste-scherm{padding-top:0}
.eerste-scherm .hero-inhoud{padding-top:calc(var(--header-h) + 12px)}
.pagina-hero{margin-top:0;height:calc(270px + var(--header-h));padding-top:var(--header-h)}
.product-hero{margin-top:0;padding-top:calc(64px + var(--header-h))}
.over-hero,.artikel-kop-hero{margin-top:0;padding-top:var(--header-h)}
.logo-plateau{padding-bottom:calc(var(--plateau-h) - var(--header-h))}
.header.geschrompeld .logo-plateau{padding-bottom:0}
.hero-lijnen,.hero-schaduwtekst,.hero-pijl{display:none!important}
/* footer is zwart: origineel logo op een lichte ondergrond, logo zelf ongewijzigd */
.footer .footer-logo{display:inline-flex;background:#fff;border-radius:14px;padding:10px 18px}
.kaart-beeld img,.product-kaart-beeld img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
.hero-baan .hero-dia:nth-child(1){background-image:url('../img/hero-1-m.webp')!important}
.hero-baan .hero-dia:nth-child(2){background-image:url('../img/hero-2-m.webp')!important}
.hero-baan .hero-dia:nth-child(3){background-image:url('../img/hero-3-m.webp')!important}
}
/* ============================================================
DPS MEDIA — CONCEPTDESIGN-MELDING: aliassen voor de gouden template
Het component komt uit de zilver-template en gebruikt daar andere
variabelenamen. Hier worden ze een op een gekoppeld aan de gouden
huisstijlvariabelen, zodat het component automatisch meekleurt met de
klant zonder dat er iets aan het component zelf verandert.
============================================================ */
:root{
--bronze:var(--accent);
--bronze-light:var(--salie);
--bronze-dark:var(--petrol);
--gold:var(--accent);
--cream:var(--wit);
--surface:var(--wit);
--surface-2:var(--tint2);
--bg-alt:var(--tint);
--border:rgba(var(--ink-rgb),.14);
--text:var(--ink);
--text-soft:rgba(var(--ink-rgb),.78);
--text-muted:rgba(var(--ink-rgb),.60);
--heading-brand:var(--ink);
--brand-dark:var(--petrol);
--shadow:var(--schaduw);
--font-heading:'Kumbh Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
/* ============================================================
DPS MEDIA — CONCEPTDESIGN-MELDING (vaste component)
Pill onderaan het scherm + modal bij klik op een niet-gebouwde link.
============================================================ */
.dps-concept-pill{
position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:1200;
display:inline-flex; align-items:center; gap:9px;
padding:9px 18px; border-radius:999px;
font-family:var(--font-heading); font-size:11.5px; font-weight:700;
letter-spacing:2.4px; text-transform:uppercase;
color:var(--cream); background:rgba(10,11,13,.82);
border:1px solid color-mix(in srgb, var(--bronze) 55%, transparent);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
box-shadow:0 10px 26px -10px rgba(0,0,0,.7);
cursor:pointer; transition:background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.dps-concept-pill:hover{ background:rgba(10,11,13,.95); border-color:var(--bronze); transform:translateX(-50%) translateY(-2px); }
.dps-concept-dot{
width:7px; height:7px; border-radius:50%; background:var(--bronze); flex:none;
box-shadow:0 0 0 4px color-mix(in srgb, var(--bronze) 22%, transparent);
}
/* Op mobiel is de onderrand bezet door de bot-knop en WhatsApp. De melding wordt
daar een dunne vaste balk over de volle breedte, en de zwevende knoppen schuiven
er precies bovenop. Zo valt de melding nooit over de inhoud van de pagina. */
@media (max-width:900px){
.dps-concept-pill{
left:0; right:0; bottom:0; top:auto; transform:none;
width:100%; justify-content:center;
border-radius:0; border:0; border-top:1px solid color-mix(in srgb, var(--bronze) 45%, transparent);
background:rgba(6,7,9,.94);
padding:10px 16px; font-size:10.5px; letter-spacing:2px;
box-shadow:0 -8px 22px -12px rgba(0,0,0,.8);
}
.dps-concept-pill:hover{ transform:none; background:rgba(6,7,9,.98); }
/* zwevende knoppen boven de conceptbalk */
.agbot{ bottom:56px !important; }
.wa-btn{ bottom:60px !important; }
.tel-btn{ bottom:122px !important; }
.wa-widget{ bottom:58px !important; }
body.dps-concept-open .dps-concept-pill{ display:none; }
}
/* Als de conceptmelding open staat, staan de zwevende knoppen en de cookiebanner
niet in de weg. */
body.dps-concept-open .agbot,
body.dps-concept-open .wa-widget,
body.dps-concept-open .wa-btn,
body.dps-concept-open .tel-btn,
body.dps-concept-open #dpscb{ display:none !important; }
/* ============================================================
TEMPLATE-FIXES (gevonden bij de D-Lectro-build, 05-08-2026)
============================================================ */
/* 1. VASTE REGEL 10: de header is ALTIJD volledig doorzichtig, ook op subpagina's.
De subhero loopt met padding-top achter de header door, dus de foto blijft
zichtbaar; een permanente zachte gradient houdt logo en menu leesbaar. */
/* De waas hoort op .header, NIET op .nav. De nav is maar 48px hoog binnen een
header van 106px; stond de gradient op .nav, dan bleef de headerkleur boven
en onder die strook staan als twee gekleurde lijnen rond de menutekst.
Fout die is voorgekomen bij AIMEJ Transport, 01-09-2026. */
body.has-subhero .nav:not(.scrolled), body.has-subhero .nav, .nav, .nav.scrolled{
background:none !important;
box-shadow:none !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.header, .header.scrolled, .header.geschrompeld{
background-color:transparent !important;
background-image:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0)) !important;
background-size:100% 140px !important;
background-repeat:no-repeat !important;
box-shadow:none !important;
}
/* 2. Vangnet: een element dat in beeld is (in-view) moet ALTIJD zichtbaar worden.
Zonder dit kan tekst op sommige pagina's onzichtbaar blijven staan. */
.fade-in.in-view, .fade-in.is-visible,
.reveal.in-view, .reveal.is-visible,
.reveal-x.in-view, .reveal-x.is-visible,
.reveal-x-r.in-view, .reveal-x-r.is-visible,
.stagger.in-view > *, .stagger.is-visible > *{
opacity:1 !important; transform:translate(0,0) scale(1) !important;
}
/* 3. Hero-content op mobiel exact verticaal gecentreerd tussen de onderkant van de
header en de onderkant van het scherm. Puur CSS, geen JS-meting, dus geen
sprong bij het laden. Staat bewust als laatste, zodat losse padding-overrides
de centrering niet kunnen breken. */
@media (max-width:900px){
.hp-hs-static-content{
position:absolute !important;
top:var(--header-h,110px) !important; bottom:0 !important;
left:0 !important; right:0 !important;
width:auto !important; height:auto !important; max-width:none !important;
transform:none !important; margin:0 !important;
display:flex !important; flex-direction:column !important;
justify-content:center !important; align-items:center !important;
padding:0 22px !important;
z-index:7 !important;
}
}
/* ============================================================
DONKERE VARIANT — AANZETTEN MET data-theme="dark" OP
------------------------------------------------------------
De template is standaard LICHT. Heeft de klant een donkere
huisstijl (donkere site, licht logo op zwart), dan zet je
data-theme="dark" op het -element van elke pagina en is
de hele site in een keer donker. Vul daarna alleen nog de
accentkleuren van de klant in het blok hieronder in.
Zonder dat attribuut doet dit blok helemaal niets.
============================================================ */
html[data-theme="dark"]{
/* === PER KLANT INVULLEN: het accent uit het logo === */
--bronze:#C4CDDA !important; /* accent (bij D-Lectro zilver) */
--bronze-light:#E9EEF5 !important; /* lichtere variant van het accent */
--bronze-dark:#9AA6B6 !important; /* donkerdere variant van het accent */
--gold:#CDD6E2 !important; /* gedeelde CTA-knop (hero + zwevende knop) */
--gold-dark:#98A3B2 !important;
--cta-shadow:rgba(205,214,226,.45) !important;
--cta-shadow-hover:rgba(205,214,226,.6) !important;
/* === De donkere basis. Meestal ongewijzigd laten. === */
--bg:#0E1013 !important; --bg-alt:#15181D !important; --bg-cream:#15181D !important;
--surface:#191D23 !important; --surface-2:#1F242B !important; --bg-card:#191D23 !important;
--brand-dark:#0B0D10 !important; --brand-darker:#000000 !important;
--charcoal:#101318 !important; --charcoal-soft:#181C22 !important;
--bg-dark:#000000 !important; --bg-dark-alt:#181C22 !important;
--cream:#EEF2F7 !important; --paper:#12151A !important; --walnut:#181C22 !important;
--text:#B6BEC9 !important; --text-soft:#A9B2BE !important; --text-muted:#89929E !important;
--heading-brand:#EEF2F7 !important;
--border:rgba(255,255,255,.11) !important; --border-soft:rgba(255,255,255,.07) !important;
--shadow-sm:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.30) !important;
--shadow:0 4px 6px rgba(0,0,0,.30),0 10px 25px rgba(0,0,0,.38) !important;
--shadow-lg:0 10px 15px rgba(0,0,0,.35),0 25px 50px rgba(0,0,0,.45) !important;
--shadow-xl:0 25px 50px rgba(0,0,0,.5),0 40px 80px rgba(0,0,0,.45) !important;
}
/* --- basis --- */
html[data-theme="dark"] body{ background:var(--bg) !important; color:var(--text) !important; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6{
color:var(--heading-brand) !important;
}
html[data-theme="dark"] section.alt{ background:var(--bg-alt) !important; }
html[data-theme="dark"] .hp-services{ background:var(--bg-alt) !important; }
html[data-theme="dark"] .footer{ background:#000000 !important; }
/* --- vlakken die in de lichte template wit waren --- */
html[data-theme="dark"] .hpgr-card,
html[data-theme="dark"] .hp-waarom-card,
html[data-theme="dark"] .hp-contact .hp-calc-v2,
html[data-theme="dark"] .hp-faqcontact,
html[data-theme="dark"] .nav-lang-dd,
html[data-theme="dark"] .rucalc-card,
html[data-theme="dark"] .rucalc-pill,
html[data-theme="dark"] .rucalc-ta,
html[data-theme="dark"] .rucalc-f input,
html[data-theme="dark"] .lp-form,
html[data-theme="dark"] .lp-of-form input,
html[data-theme="dark"] .lp-of-form textarea,
html[data-theme="dark"] .actie-card,
html[data-theme="dark"] .ck-card,
html[data-theme="dark"] .wg-prov,
html[data-theme="dark"] .seo-related-card,
html[data-theme="dark"] .hp-svc-body,
html[data-theme="dark"] .hp-tips-card-body,
html[data-theme="dark"] .hp-calc-wizard input,
html[data-theme="dark"] .hp-calc-wizard textarea{
background:var(--surface) !important;
border-color:var(--border) !important;
color:var(--text) !important;
}
html[data-theme="dark"] .hpgr-card, html[data-theme="dark"] .hp-waarom-card,
html[data-theme="dark"] .hp-contact .hp-calc-v2, html[data-theme="dark"] .hp-faqcontact,
html[data-theme="dark"] .actie-card, html[data-theme="dark"] .ck-card{
box-shadow:0 1px 0 rgba(255,255,255,.04) inset, var(--shadow) !important;
}
html[data-theme="dark"] .hp-svc-card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .hp-tips-card,
html[data-theme="dark"] .hp-werk-step,
html[data-theme="dark"] .faq-item{ border-color:var(--border) !important; }
/* --- teksten in die vlakken --- */
html[data-theme="dark"] .hpgr-card h3, html[data-theme="dark"] .hp-waarom-card h3,
html[data-theme="dark"] .actie-card h3, html[data-theme="dark"] .ck-card h3,
html[data-theme="dark"] .hp-svc-body h3, html[data-theme="dark"] .hp-tips-card-body h3,
html[data-theme="dark"] .hp-werk-step h3, html[data-theme="dark"] .hpgr-name,
html[data-theme="dark"] .seo-related-card h4, html[data-theme="dark"] .seo-related-card h4 span,
html[data-theme="dark"] .faq-q, html[data-theme="dark"] .faq-q span,
html[data-theme="dark"] .hp-faqcontact-info h3, html[data-theme="dark"] .calc-contact-item strong{
color:var(--heading-brand) !important;
}
html[data-theme="dark"] .hpgr-card p, html[data-theme="dark"] .hp-waarom-card p,
html[data-theme="dark"] .hp-faqcontact p, html[data-theme="dark"] .actie-card p,
html[data-theme="dark"] .ck-card p, html[data-theme="dark"] .hp-svc-body p,
html[data-theme="dark"] .hp-tips-card-body p, html[data-theme="dark"] .hp-svc-features li,
html[data-theme="dark"] .hp-werk-step p, html[data-theme="dark"] .faq-a-inner,
html[data-theme="dark"] .hpgr-text, html[data-theme="dark"] .hp-tips-card,
html[data-theme="dark"] .hp-tips-meta span, html[data-theme="dark"] .calc-contact-item span,
html[data-theme="dark"] .calc-contact-item a{
color:var(--text-soft) !important;
}
html[data-theme="dark"] section p strong,
html[data-theme="dark"] .hp-overons-lead strong{ color:var(--cream) !important; }
/* --- knoppen: op donker is het accent de primaire knop --- */
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] a.btn.btn-primary,
html[data-theme="dark"] .btn-accent{ background:var(--bronze) !important; color:#0B0D10 !important; }
html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] a.btn.btn-primary:hover{
background:var(--bronze-light) !important; color:#0B0D10 !important;
}
html[data-theme="dark"] .btn-ghost{ color:var(--cream) !important; border-color:var(--cream) !important; }
html[data-theme="dark"] .btn-ghost:hover{ background:var(--cream) !important; color:#0B0D10 !important; }
html[data-theme="dark"] .btn-outline{ color:var(--bronze) !important; border-color:var(--bronze) !important; }
html[data-theme="dark"] .btn-outline:hover{ background:var(--bronze) !important; color:#0B0D10 !important; }
html[data-theme="dark"] .btn-light{ background:var(--cream) !important; color:#0B0D10 !important; }
html[data-theme="dark"] .dps-cta-gold{ background:var(--gold) !important; color:#0B0D10 !important; }
html[data-theme="dark"] .dps-cta-gold:hover{ background:var(--bronze-light) !important; color:#0B0D10 !important; }
/* --- calculator --- */
html[data-theme="dark"] .rucalc-head h3, html[data-theme="dark"] .rucalc-q,
html[data-theme="dark"] .hp-calc-v2 h3, html[data-theme="dark"] .hp-calc-v2 h4,
html[data-theme="dark"] .hp-contact .hp-calc-v2 h3, html[data-theme="dark"] .hp-contact .rucalc-q{
color:var(--heading-brand) !important;
}
html[data-theme="dark"] .rucalc-hint, html[data-theme="dark"] .hp-calc-sub,
html[data-theme="dark"] .rucalc-opt, html[data-theme="dark"] .rucalc-f span{ color:var(--text-soft) !important; }
html[data-theme="dark"] .rucalc-steps-lbl span{ color:var(--text-muted) !important; }
html[data-theme="dark"] .rucalc-card-lbl{ color:var(--cream) !important; }
html[data-theme="dark"] .rucalc-card-ic{
background:color-mix(in srgb, var(--bronze) 12%, transparent) !important; color:var(--bronze) !important;
}
html[data-theme="dark"] .rucalc-card:hover, html[data-theme="dark"] .rucalc-pill:hover{ border-color:var(--bronze) !important; }
html[data-theme="dark"] .rucalc-card.is-active, html[data-theme="dark"] .rucalc-pill.is-active{
border-color:var(--bronze) !important; background:var(--surface-2) !important; color:var(--cream) !important;
}
html[data-theme="dark"] .rucalc-upload{
background:rgba(255,255,255,.03) !important; border-color:var(--border) !important; color:var(--text-soft) !important;
}
html[data-theme="dark"] .rucalc-upload-t, html[data-theme="dark"] .rucalc-upload-t strong{ color:var(--cream) !important; }
html[data-theme="dark"] .rucalc-prog-track{ background:rgba(255,255,255,.10) !important; }
html[data-theme="dark"] .rucalc-ta::placeholder, html[data-theme="dark"] .rucalc-f input::placeholder{ color:var(--text-muted); }
/* --- reviewsectie (Google-blauw is geen huisstijl) --- */
html[data-theme="dark"] .hpgr-rating strong{ color:var(--heading-brand) !important; }
html[data-theme="dark"] .hpgr-date, html[data-theme="dark"] .hpgr-count,
html[data-theme="dark"] .hpgr-meta, html[data-theme="dark"] .hpgr-meta span{ color:var(--text-muted) !important; }
html[data-theme="dark"] .hpgr-meta .hpgr-card-stars,
html[data-theme="dark"] .hpgr-card .hpgr-card-stars{ color:#FBBC05 !important; }
html[data-theme="dark"] .hpgr-write, html[data-theme="dark"] .hpgr-tag,
html[data-theme="dark"] .hp-tips-tag{
color:var(--bronze) !important; background:transparent !important;
border:1px solid color-mix(in srgb, var(--bronze) 45%, transparent) !important;
}
html[data-theme="dark"] .hpgr-write:hover{
background:color-mix(in srgb, var(--bronze) 12%, transparent) !important; border-color:var(--bronze) !important;
}
html[data-theme="dark"] .hpgr-allcta{ color:var(--bronze) !important; }
html[data-theme="dark"] .hpgr-avatar{ color:#0B0D10 !important; }
/* --- Instagram-knop nooit een witte balk op zwart --- */
html[data-theme="dark"] .hp-insta-btn{ background:transparent !important; color:#fff !important; position:relative; border-radius:999px; }
html[data-theme="dark"] .hp-insta-btn::before{
content:""; position:absolute; inset:0; border-radius:999px; padding:2px;
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-composite:exclude; pointer-events:none;
}
/* ============================================================
DPS MEDIA — CONCEPTDESIGN-MELDING, MODAL
------------------------------------------------------------
TEMPLATE-GAT (gevonden 05-08-2026 bij Dak-Gigant): de template
levert wel de .dps-concept-pill mee, maar GEEN styling voor de
modal die concept-mode.js opbouwt. Zonder dit blok verschijnt er
een ongestylede laag met een schermvullend vinkje in plaats van
een nette melding. Dit blok hoort in de template zelf.
Alles gecentreerd, lijst als blok gecentreerd met regels links.
============================================================ */
/* FIX: stond op z-index 1300 terwijl het mobiele menu op 3000 staat. De melding
opende daardoor ACHTER het menu en de knop leek stuk. */
.dps-concept-modal{ position:fixed; inset:0; z-index:5000; display:none }
body.dps-concept-open .mobile-menu,
body.dps-concept-open .mobile-menu-overlay{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important }
.dps-concept-modal[aria-hidden="false"]{ display:block }
.dps-concept-backdrop{
position:absolute; inset:0; background:rgba(12,11,13,.74);
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
animation:dpsConceptFade .3s var(--ease) both;
}
.dps-concept-panel{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:min(520px, calc(100vw - 36px)); max-height:calc(100vh - 48px); overflow:auto;
background:var(--bg,#fff); border-radius:22px; padding:38px 32px 30px;
text-align:center;
box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
animation:dpsConceptIn .42s var(--ease) both;
}
@keyframes dpsConceptFade{ from{opacity:0} to{opacity:1} }
@keyframes dpsConceptIn{ from{opacity:0; transform:translate(-50%,-46%)} to{opacity:1; transform:translate(-50%,-50%)} }
.dps-concept-close{
position:absolute; top:14px; right:14px; width:38px; height:38px;
display:grid; place-items:center; border-radius:50%;
background:var(--bg-alt,#F3F0ED); color:var(--brand-dark,#1C1B1F);
transition:background .35s var(--ease);
}
.dps-concept-close:hover{ background:var(--border,#E7E2DD) }
.dps-concept-close svg{ width:17px; height:17px }
.dps-concept-ic{
display:grid; place-items:center; margin:0 auto 16px;
width:62px; height:62px; border-radius:50%;
background:color-mix(in srgb, var(--bronze) 12%, transparent); color:var(--bronze);
}
.dps-concept-ic svg{ width:30px; height:30px }
.dps-concept-panel h3{
font-family:var(--font-heading); font-weight:800;
font-size:clamp(21px,3.2vw,26px); line-height:1.2; letter-spacing:-.02em;
color:var(--heading-brand,var(--brand-dark)); margin:0 0 12px;
}
.dps-concept-lead{ color:var(--text); font-size:15.5px; line-height:1.65; margin:0 0 22px }
.dps-concept-works{
background:var(--bg-alt,#F3F0ED); border-radius:16px; padding:18px 20px; margin:0 0 24px;
}
.dps-concept-works strong{
display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
color:var(--brand-dark); margin-bottom:10px;
}
/* het BLOK gecentreerd, de regels links, zodat alle vinkjes op één lijn staan */
.dps-concept-works ul{
list-style:none; padding:0; margin:0;
width:fit-content; margin-inline:auto; text-align:left;
display:flex; flex-direction:column; gap:9px;
}
.dps-concept-works li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--text) }
.dps-concept-works li svg{ width:15px; height:15px; flex:none; margin-top:4px; stroke:#16a34a }
.dps-concept-btn{
display:inline-flex; align-items:center; justify-content:center;
min-height:50px; padding:15px 30px; border-radius:999px;
background:var(--bronze); color:#fff;
font-family:var(--font-heading); font-weight:700; font-size:15px;
box-shadow:0 10px 26px -8px color-mix(in srgb, var(--bronze) 50%, transparent);
transition:transform .45s var(--ease), background-color .45s var(--ease);
}
.dps-concept-btn:hover{ background:var(--bronze-dark); transform:translateY(-2px) }
.dps-concept-by{
display:block; margin-top:16px; font-size:12px; letter-spacing:.1em;
text-transform:uppercase; color:var(--text-muted);
}
body.dps-concept-open{ overflow:hidden }
@media print{ .dps-concept-pill, .dps-concept-modal{ display:none !important } }
/* De concept-uitschakelregel zet elders pointer-events:none op niet-gebouwde links.
Daardoor komt er geen klik binnen en opent de conceptmelding nooit. Hier zetten we
pointer-events terug aan: concept-mode.js vangt de klik af en toont de melding. */
a[data-concept-disabled], a[href="#!"]{ pointer-events:auto !important; cursor:pointer !important }
/* --- mobiel menu: het paneel is donker, dus de links ook licht --- */
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .mmx-scroll{ background:var(--bg) !important; }
html[data-theme="dark"] .mmx-scroll a,
html[data-theme="dark"] .mmx-scroll .mmx-acc-btn,
html[data-theme="dark"] .mmx-scroll li > a,
html[data-theme="dark"] .mobile-menu a,
html[data-theme="dark"] .mobile-menu button,
html[data-theme="dark"] .mobile-menu-close{ color:var(--cream) !important; }
html[data-theme="dark"] .mmx-scroll .submenu a{ color:var(--text-soft) !important; }
html[data-theme="dark"] .mmx-head, html[data-theme="dark"] .mmx-foot{ border-color:var(--border) !important; }
html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .breadcrumb span{ color:var(--cream) !important; }
/* --- mobiel menu: kop, voet en knoppen mee in de donkere variant --- */
html[data-theme="dark"] .mmx-head,
html[data-theme="dark"] .mmx-foot,
html[data-theme="dark"] .mobile-menu .mmx-head,
html[data-theme="dark"] .mobile-menu .mmx-foot{
background:var(--bg) !important; border-color:var(--border) !important;
}
html[data-theme="dark"] .mmx-foot .btn-ghost{
color:var(--cream) !important; border-color:var(--border) !important; background:transparent !important;
}
html[data-theme="dark"] .mmx-foot .btn-primary{ background:var(--bronze) !important; color:#0B0D10 !important; }
html[data-theme="dark"] .mobile-menu-close{ border-color:var(--border) !important; }
html[data-theme="dark"] .mobile-menu-close{
background:transparent !important; color:var(--cream) !important;
border:1px solid var(--border) !important;
}
/* Conceptmelding: eigen kleuren beschermen tegen de template-cascade */
.dps-concept-panel h3{ color:var(--heading-brand,#EEF2F7) !important; }
.dps-concept-lead{ color:var(--text-soft,#A9B2BE) !important; }
.dps-concept-works strong{ color:var(--bronze,#C4CDDA) !important; }
.dps-concept-works li{ color:var(--text-soft,#A9B2BE) !important; }
.dps-concept-btn{ color:#0B0D10 !important; }
.dps-concept-by{ color:var(--text-muted,#89929E) !important; }
.dps-concept-pill{ color:var(--cream,#EEF2F7) !important; }
/* Vaste valkuil uit de zilver-builds: pointer-events moet expliciet aan blijven,
anders komt de klik nooit binnen en lijkt de knop stuk. Laatste regel, dus wint. */
a[data-concept-disabled], a[href="#!"]{ pointer-events:auto !important; cursor:pointer !important }
/* De knoptekst in de conceptmelding stond hard op bijna-zwart (bedoeld voor een gouden
knop in de zilver-template). Op een donkere accentkleur is dat slecht leesbaar, dus
de tekstkleur volgt nu de knop zelf. */
.dps-concept-btn{ color:#ffffff !important; background:var(--accent) !important; border-color:var(--accent) !important }
.dps-concept-btn:hover{ background:var(--petrol) !important; border-color:var(--petrol) !important }
/* De CONCEPTDESIGN-balk staat op mobiel onderaan over de volle breedte. De zwevende
aanvraagknop en de bel/WhatsApp-knoppen liepen daar deels achter. Op smalle schermen
schuiven ze daarom precies boven de balk. */
@media(max-width:900px){
.zwevend-knop{bottom:52px}
.bel-knoppen{bottom:52px}
}