/* 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;
}
/* HUISSTIJL-BEGIN: dit blok komt per bedrijf uit data/<klant>/huisstijl.css (de generator
   vervangt het). Alles wat van het logo en de huisstijl afhangt staat hier; de rest van dit
   bestand is structuur en verwijst alleen naar deze variabelen. */
:root{
  /* Huisstijl SLK Techniek: recht uit het chroomlogo. Het logo is zilver op
     zwart, dus dat is de huisstijl: diep zwart als drager, chroomzilver als
     accent. Geen kleur die niet in het logo of het merkbeeld voorkomt. */
  --ink:#101315;        /* donkerste kleur: koppen, header, footer, mobiel menu */
  --ink-rgb:16,19,21;   /* dezelfde kleur als r,g,b voor de overlays (rgba) */
  --petrol:#3b4247;     /* drager: page-hero's, overlays, secundaire knoppen */
  --accent:#23282c;     /* accent: primaire knoppen, iconen, cirkels */
  --accent-hover:#0d1012;
  --accent-donker:#b3bac1;      /* accent OP donker: nav-onderstreping, hero-pijlen, menupijl, hero-omlijnd */
  --accent-donker-rgb:179,186,193;
  --accent-donker-licht:#d7dbdf;
  --hero-pijl-hover:#e8ebed;
  --neutraal:#8f979e;           /* randen van tegels, dots, carrouselpijl-hover */
  --neutraal-rgb:143,151,158;
  --tint:#eaecee;       /* lichte sectiewaas (homepage) */
  --tint2:#eef0f1;      /* sectiewaas subpagina's */
  --salie:#b6bcc1;      /* rustige hero's */
  --bg:#f5f6f7;
  --kaart-tint:#eceef0; /* lege kaartbeelden */
  --foto-tint:#dcdee0;  /* achtergrond achter foto's tijdens laden */
  /* knoppen: bij SLK allemaal chroom zoals het logo; bij een gewone huisstijl per klasse een kleur */
  --chroom:linear-gradient(160deg,#e8ebed 0%,#c7ccd2 46%,#a9b0b7 100%);
  --chroom-hover:linear-gradient(160deg,#f3f5f6 0%,#d6dade 46%,#b7bec4 100%);
  --knop-bg:var(--chroom);
  --knop-tekst:var(--ink);
  --knop-hover:var(--chroom-hover);
  --knop-rand:inset 0 0 0 1px rgba(var(--ink-rgb),.30);   /* 0 0 0 0 transparent = geen rand */
  --cirkel:linear-gradient(135deg,#3b4247,#1a1e21);   /* icoonvlakken (usp, contactkaarten) */
  --plateau-bg:linear-gradient(135deg,#22262a 0%,#111417 52%,#0a0c0e 100%);   /* logoplateau; wit bij een logo dat op wit leesbaar is */
  --hero-gloed:#2e3438;         /* gloed links op de hero-foto's */
  --hero-gloed-rgb:46,52,56;
  --submenu-hover-bg:#f0f1f2;
  --submenu-hover-kleur:var(--ink);
  --cta-bg:#2b3135;             /* donkere CTA-strook */
  --cta-rand:inset 0 0 0 1px rgba(179,186,193,.28);
  --advies-foto:url('../img/hero-3.webp');   /* sfeerfoto in het adviesblok op de over-pagina */
  --wit:#ffffff;
  --groen-vink:#2e9e5b;
/* HUISSTIJL-EINDE */

  --r-kaart:20px;       /* (gemeten) */
  --r-knop:8px;         /* (gemeten) */
  --schaduw:0 0 10px rgba(0,0,0,.10);   /* (gemeten) */
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:106px;     /* (gemeten) */
  --plateau-h:146px;    /* (gemeten) */
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font-family:'Kumbh Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* ---------- typografie ---------- */
h2{font-size:32px;line-height:1.4;font-weight:600;color:var(--ink)}
h3{font-size:20px;line-height:1.3;font-weight:600}
p{font-size:16px;line-height:1.5}
@media(max-width:640px){h2{font-size:26px}}
.eyebrow{
  display:block;color:var(--petrol);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)}
/* Alle knoppen zijn chroom, net als het logo. De donkere rand geeft de knop
   ook op een witte achtergrond een duidelijke vorm. */
.knop-accent,.knop-petrol,.knop-ink,.knop-stil,.knop-licht{
  background:var(--knop-bg);color:var(--knop-tekst);
  box-shadow:var(--knop-rand),0 1px 2px rgba(var(--ink-rgb),.14);
}
.knop-accent:hover,.knop-petrol:hover,.knop-ink:hover,.knop-stil:hover,.knop-licht:hover{
  background:var(--knop-hover);
}
/* per klasse een eigen kleur (gewone huisstijl); zonder deze variabelen valt alles op --knop-bg terug */
.knop-petrol{background:var(--knop-petrol-bg,var(--knop-bg));color:var(--knop-petrol-tekst,var(--knop-tekst))}
.knop-petrol:hover{background:var(--knop-petrol-hover,var(--knop-hover))}
.knop-ink{background:var(--knop-ink-bg,var(--knop-bg));color:var(--knop-ink-tekst,var(--knop-tekst))}
.knop-ink:hover{background:var(--knop-ink-hover,var(--knop-hover))}
.knop-stil{background:var(--knop-stil-bg,var(--knop-bg));color:var(--knop-stil-tekst,var(--knop-tekst))}
.knop-stil:hover{background:var(--knop-stil-hover,var(--knop-hover))}
.knop-licht{background:var(--knop-licht-bg,var(--knop-bg));color:var(--knop-licht-tekst,var(--knop-tekst))}
.knop-licht:hover{background:var(--knop-licht-hover,var(--knop-hover))}
.tekstlink{
  color:var(--petrol);font-size:17px;font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--petrol);padding-bottom:2px;
}
.tekstlink.op-donker{color:var(--wit);border-color:var(--wit)}

/* ---------- header: dichte balk + wit logo-plateau (gemeten) ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);
  background:var(--ink);
  display:flex;align-items:center;
  padding:0 48px 0 max(25vw,320px);
}
.logo-plateau{
  position:absolute;top:0;left:0;z-index:2;
  width:25vw;min-width:320px;height:var(--plateau-h);
  background:var(--plateau-bg);
  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-beeld{width:auto;height:78px;max-width:82%;object-fit:contain;
  transition:transform .35s var(--ease)}
.header.geschrompeld .logo-beeld{transform:scale(.9)}
.footer .footer-logo .logo-beeld{height:62px}
@media(max-width:860px){.logo-beeld{height:44px}}
@media(max-width:420px){.logo-beeld{height:38px}}
.logo-merk{width:57px;height:57px;border-radius:14px;background:var(--accent);
  display:grid;place-items:center;color:var(--wit);font-weight:700;font-size:26px;flex:0 0 auto;
  transition:transform .35s var(--ease)}
.logo-tekst{line-height:1.15;transition:transform .35s var(--ease)}
.logo-tekst b{display:block;color:var(--ink);font-size:22px;letter-spacing:.02em}
.logo-tekst span{display:block;color:var(--petrol);font-size:12px;letter-spacing:.36em;text-transform:uppercase}
/* scrollgedrag (gemeten): plateau 146 -> 106, logo schaalt 264 -> 238 (x0.9) */
.header.geschrompeld .logo-plateau{height:var(--header-h)}
.header.geschrompeld .logo-merk,
.header.geschrompeld .logo-tekst{transform:scale(.9)}

.nav{flex:1;display:flex;align-items:center}
/* de linkgroep staat exact gecentreerd tussen het plateau en de offerteknop */
.nav-links{flex:1;display:flex;align-items:center;justify-content:center;gap:38px}
.nav-links>a,.nav .heeft-sub>a{color:var(--wit);text-decoration:none;font-size:17px;font-weight:500}
.nav .heeft-sub>a{display:inline-block}
.nav-links>a,.nav .heeft-sub>a{padding-bottom:8px;border-bottom:2px solid transparent;
  transition:border-color .3s var(--ease)}
.nav-links>a.actief,.nav .heeft-sub>a.actief,
.nav-links>a:hover,.nav .heeft-sub:hover>a{border-bottom-color:var(--accent-donker)}
.nav .pijltje{font-size:13px;vertical-align:1px;opacity:.85}
.nav .knop{padding:12px 24px 13px;margin-left:6px;white-space:nowrap}
/* dropdown (gemeten: wit, radius 20, schaduw 0 0 10, links 15px, pad 13/20) */
.heeft-sub{position:relative}
.submenu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,8px);
  min-width:186px;background:var(--wit);border-radius:20px;overflow:hidden;
  box-shadow:0 0 10px rgba(0,0,0,.10);list-style:none;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.heeft-sub:hover .submenu,.heeft-sub:focus-within .submenu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.submenu a{
  display:block;padding:13px 20px;font-size:15px;color:var(--ink);
  text-decoration:none;border:0;white-space:nowrap;
  transition:background-color .3s var(--ease);
}
.submenu a:hover{background:var(--submenu-hover-bg);color:var(--submenu-hover-kleur)}
@media(max-width:1360px){.nav-links{gap:22px}
  .nav-links>a,.nav .heeft-sub>a{font-size:15px}
  .nav .knop{font-size:15px;padding:11px 18px 12px}}
@media(max-width:1200px){.nav-links{display:none}
  .nav{justify-content:flex-end}}
/* ---------- hamburger en mobiel menu ---------- */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;margin-left:14px;background:none;border:0;cursor:pointer;
  flex-shrink:0;
}
.hamburger span{display:block;width:24px;height:2px;background:var(--wit);
  margin-inline:auto;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .hamburger span:nth-child(2){opacity:0}
.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1200px){.hamburger{display:flex}}
.mobiel-menu{
  position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;
  background:var(--ink);overflow-y:auto;padding:18px 22px 90px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.menu-open .mobiel-menu{opacity:1;visibility:visible;transform:none}
.menu-open{overflow:hidden}
.mobiel-menu a{display:block;color:var(--wit);text-decoration:none;
  font-size:17px;font-weight:600;padding:14px 6px;
  border-bottom:1px solid rgba(255,255,255,.10)}
.mobiel-menu details{border-bottom:1px solid rgba(255,255,255,.10)}
.mobiel-menu summary{list-style:none;cursor:pointer;color:var(--wit);
  font-size:17px;font-weight:600;padding:14px 6px;position:relative}
.mobiel-menu summary::-webkit-details-marker{display:none}
.mobiel-menu summary::after{content:"\25BE";position:absolute;right:10px;
  color:var(--accent-donker);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(--knop-bg);color:var(--knop-tekst);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 var(--accent-donker);color:var(--wit)}
.knop-hero-omlijnd:hover{background:rgba(var(--accent-donker-rgb),.22);border-color:var(--accent-donker-licht)}
@media(max-width:640px){.hero-sub{font-size:15px;padding:0 20px}}

/* telefoonnummer in de navigatie (alleen op brede schermen) */
.nav-tel{display:none;align-items:center;gap:8px;color:var(--wit);font-weight:600;white-space:nowrap;font-size:15px}
.nav-tel svg{width:16px;height:16px;stroke:var(--wit)}
@media(min-width:1240px){
  .nav-tel{display:inline-flex;margin:0 12px 0 4px}
  .nav-links{gap:26px}
  .nav-links>a,.nav .heeft-sub>a{white-space:nowrap}
}

/* keurmerkenstrook: skill vult echte logo's in EIGEN kleuren in */
.keurmerk-strook{margin-top:clamp(36px,4vw,52px);text-align:center}
.keurmerk-intro{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#7b848a;margin-bottom:18px}
.keurmerk-logos{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:stretch}


/* bedanktpagina: stappen als blok gecentreerd, regels links */
.bedankt-stappen{list-style:none;width:fit-content;margin:0 auto;padding:0;text-align:left;display:grid;gap:12px}
.bedankt-stappen li{display:flex;gap:10px;align-items:flex-start}
.bedankt-stappen li::before{content:"\2713";color:var(--groen-vink);font-weight:700;flex:0 0 auto}
.mobiel-menu .s-ig span{background:var(--ink)}
/* ---------- zwevende aanvraagknop (mobiel, vaste DPS-regel) ---------- */
.zwevend-knop{
  position:fixed;left:14px;bottom:14px;z-index:48;display:none;
  align-items:center;gap:8px;background:var(--knop-bg);color:var(--knop-tekst);
  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), var(--knop-rand);
}
.zwevend-knop svg{width:16px;height:16px}
@media(max-width:900px){.zwevend-knop{display:inline-flex}}
/* whatsapp- en telefoonknop rechtsonder (mobiel, vast onderdeel) */
.bel-knoppen{
  position:fixed;right:14px;bottom:14px;z-index:48;display:none;
  flex-direction:column;gap:10px;
}
.bel-knop{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 10px 26px -8px rgba(var(--ink-rgb),.55);text-decoration:none;
}
.bel-knop svg{width:24px;height:24px}
.bel-wa{background:#25D366}
.bel-tel{background:var(--knop-bg);color:var(--knop-tekst);box-shadow:0 10px 26px -8px rgba(var(--ink-rgb),.55),var(--knop-rand)}
@media(max-width:900px){.bel-knoppen{display:flex}}

/* ---------- schermvullende kop: header + hero + usp-balk = precies 1 scherm ---------- */
.schermvullend{
  min-height:100svh;display:flex;flex-direction:column;
  padding-top:var(--header-h);
}
.schermvullend .hero{flex:1;height:auto;min-height:300px;margin-top:0}
/* eerste scherm: hero + usp + welkom (met knoppen) altijd samen in beeld.
   De hero is maximaal 700px en krimpt automatisch als het scherm lager is;
   de wrapper is wit zodat de groene sectie nooit boven de vouw komt. */
.eerste-scherm{min-height:100svh;background:var(--wit);
  display:flex;flex-direction:column;padding-top:var(--header-h)}
.eerste-scherm .hero{flex:1 1 auto;height:auto;max-height:700px;min-height:270px;margin-top:0}
.eerste-scherm .sectie-wit{flex:0 0 auto;padding:34px 24px 46px}
@media(max-height:1000px){
  .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:820px){
  .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:700px){
  .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:#3c4a4d;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}
}
/* Op een 320x568-scherm (iPhone SE 1) viel de tweede herocta 21px onder de
   vouw. Minder binnenruimte en een strakkere regelafstand halen dat terug. */
@media(max-width:400px) and (max-height:600px){
  .hero-inhoud{padding:18px 16px}
  .hero-titel{line-height:1.3;min-height:0}
  .hero-label{margin-bottom:10px}
  .hero-sub{margin-top:8px}
  .hero-knoppen{margin-top:14px;gap:10px}
}
@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:var(--cirkel);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;
  margin-top:var(--header-h);overflow:hidden;background:var(--petrol);
  display:grid;   /* de inhoud rekt mee en centreert ook als de hero flexibel is */
}
.hero-baan{
  position:absolute;inset:0;display:flex;height:100%;
  will-change:transform;
  transition:transform .9s cubic-bezier(.25,.1,.25,1);
}
.hero-baan.geen-anim{transition:none}
.hero-dia{
  position:relative;flex:0 0 100%;height:100%;
  background-size:cover;background-position:right center;
}
/* gemeten uit de pixels: links dicht petrol, naar rechts steeds transparanter */
.hero-dia::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--hero-gloed) 0%,var(--hero-gloed) 29%,rgba(var(--hero-gloed-rgb),.80) 40%,
  rgba(var(--hero-gloed-rgb),.45) 55%,rgba(var(--hero-gloed-rgb),.20) 75%,rgba(var(--hero-gloed-rgb),.14) 100%)}
/* dia's met een eigen mobiel beeld (HERO_SLIDES in data.py): het desktopbeeld heeft de
   volledige foto rechts op effen --hero-gloed, onder 640px komt het staande beeld met een
   egale laag, zodat een staande klantfoto nergens wordt ingezoomd */
.hero-dia.heeft-m{background-color:var(--hero-gloed)}
/* de foto staat rechts: daar geen schaduwtitel dwars over de foto heen */
.hero:has(.heeft-m) .schaduw-r{display:none}
@media(max-width:640px){
  .hero-dia.heeft-m{background-image:var(--hero-m)!important;background-position:center!important}
  .hero-dia.heeft-m::after{background:linear-gradient(180deg,rgba(var(--hero-gloed-rgb),.55) 0%,
    rgba(var(--hero-gloed-rgb),.40) 45%,rgba(var(--hero-gloed-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:var(--accent-donker);transition:color .3s var(--ease);
}
.hero-pijl:hover{color:var(--hero-pijl-hover)}
.hero-pijl svg{width:30px;height:15px;display:block}
.pijl-l{right:calc(70% + 21px)}
.pijl-r{left:calc(30% + 21px)}
@media(max-width:900px){
  .hero-schaduwtekst{display:none}
  /* op de telefoon: geen pijltjes; de Google-score staat op hun plek */
  .hero-pijl{display:none}
}

/* ---------- page-hero's subpagina's (gemeten) ---------- */
/* gemeten: foto als achtergrond met petrol-laag op 95% dekking eroverheen */
.pagina-hero{
  position:relative;margin-top:var(--header-h);
  /* Snelheid (15-09-2026): onder de laag van 95 procent is de foto nauwelijks
     zichtbaar; de kleine variant van 720px (25 KB) i.p.v. 1920px (139 KB). */
  background:var(--petrol) url('../img/hero-2-klein.webp') center/cover no-repeat;
  height:270px;display:grid;place-items:center;text-align:center;
  /* zonder zijruimte plakte de titel op 60 pagina's tegen beide schermranden */
  padding-inline:24px;
}
@media(max-width:640px){.pagina-hero{padding-inline:20px}}
.pagina-hero::before{content:"";position:absolute;inset:0;
  background:var(--petrol);opacity:.95}
/* geen groene gloed maar een heel lichte donkere waas voor het contrast */
.pagina-hero.zonder-gloed::before{background:rgba(0,0,0,.28);opacity:1}
/* projectpagina's: de balk groeit met de inhoud mee en de titel komt los
   van het witte logovlak */
.pagina-hero.project-kop{height:auto;min-height:270px;padding:40px 20px 34px}
@media(max-width:640px){.pagina-hero.project-kop{min-height:200px;padding:34px 16px 30px}}
.pagina-hero>*{position:relative;z-index:2}
.pagina-hero h1{
  position:relative;z-index:2;
  color:var(--wit);font-size:47px;font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;
}
.salie-hero{
  margin-top:var(--header-h);background:var(--salie);
  padding:clamp(56px,7vw,96px) 24px;
}
.salie-hero h1{font-size:40px;font-weight:600;color:var(--ink)}
@media(max-width:640px){
  .pagina-hero h1{font-size:32px}
  .salie-hero h1{font-size:30px}
}

/* ---------- product-hero (gemeten: petrol 540, titel 42, witte kaart rechts) ---------- */
.product-hero{
  margin-top:var(--header-h);background:var(--petrol);
  padding:64px 24px 56px;
}
.product-hero .binnen>div:first-child{text-align:center}
.product-hero .binnen{
  max-width:1140px;margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;
}
.product-hero h1{
  color:var(--wit);font-size:42px;font-weight:700;text-transform:uppercase;margin-bottom:28px;
}
.spec-lijst{list-style:none;color:var(--wit);margin-bottom:0;
  width:fit-content;margin-inline:auto;text-align:left}
.spec-lijst li{
  display:flex;align-items:center;gap:14px;padding:15px 0;font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.spec-lijst li:last-child{border-bottom:0}
.spec-lijst svg{flex:0 0 20px;height:20px;opacity:.9}
.product-kaart-beeld{
  background:var(--wit);border-radius:30px;box-shadow:var(--schaduw);
  padding:18px;min-height:380px;display:grid;place-items:center;overflow:hidden;
  color:#9aada3;font-size:13px;letter-spacing:.08em;
}
.product-kaart-beeld img{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:20px;display:block}
/* Op smalle schermen werd het kader staand (276x344) terwijl de dienstfoto's
   liggend zijn (900x675): 40 procent viel weg. Onder 860px houdt de foto
   daarom gewoon zijn eigen 4:3-verhouding. */
@media(max-width:860px){
  .product-kaart-beeld{min-height:0;padding:14px}
  /* De bron is 900px breed. Over de volle kaartbreedte werd de foto 784px
     getoond: 1,15x, dus zacht op een retina-tablet. Met een plafond van 600px
     blijft hij op 1,5x en dus scherp. */
  .product-kaart-beeld img{height:auto;aspect-ratio:4/3;max-height:none;
    max-width:600px;margin-inline:auto}
}
@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:#3c4a4d}
.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{
  /* Was height:190px. Het kader is een grid met een impliciete rij die op de foto
     wordt gemeten: de rij werd 233px, liep over het kader heen en height:100% op
     de foto volgde de rij. Gevolg: op elke dienst- en artikelkaart viel de
     onderkant van de foto weg (Dikkie zag het op 15-09 op zijn telefoon). Het
     kader heeft nu de 4:3 van de foto's zelf: niets valt meer af. */
  aspect-ratio:4/3;grid-template-rows:minmax(0,1fr);border-radius:14px;margin-bottom:24px;overflow:hidden;
  background:var(--kaart-tint);
  display:grid;place-items:center;color:#9aada3;font-size:13px;letter-spacing:.08em;
}
.kaart-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.kaart h3{color:var(--ink);margin-bottom:16px}
.kaart ul{
  width:fit-content;margin-inline:auto;text-align:left;
  list-style:none;padding:0;margin-bottom:22px;
}
.kaart ul li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#3c4a4d;padding:4px 0}
.kaart ul li::before{
  content:"";flex:0 0 16px;height:16px;margin-top:3px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%232e9e5b" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M2.5 8.5l3.5 3.5 7-8"/></svg>') center/contain no-repeat;
}
.kaart-pijl{
  width:46px;height:46px;border-radius:50%;background:var(--knop-bg);color:var(--knop-tekst);
  box-shadow:var(--knop-rand),0 1px 2px rgba(var(--ink-rgb),.14);
  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(--knop-hover);transform:translateX(3px)}
.kaart-pijl svg{width:18px;height:18px}
/* vast grid (categoriepagina's): geen carrousel */
.kaart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.kaart-grid.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.kaart-grid.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.kaart-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kaart-grid,.kaart-grid.vier{grid-template-columns:1fr;gap:18px}}
.car-pijl{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:10px;
  color:#7e968a;transition:color .3s var(--ease);
}
.car-pijl:hover{color:var(--neutraal)}
.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(--neutraal-rgb),.4);transition:background .3s}
.dots span.actief{background:var(--neutraal)}

/* ---------- "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:#3c4a4d;font-size:15px}
/* variant B: split met foto en vinkjes */
.uniek-vinkjes{width:fit-content;margin-inline:auto;text-align:left;list-style:none;margin-top:18px}
.uniek-vinkjes li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:15.5px;color:#3c4a4d}
.uniek-vinkjes li::before{content:"";flex:0 0 17px;height:17px;margin-top:3px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%232e9e5b" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M2.5 8.5l3.5 3.5 7-8"/></svg>') 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(59,66,71,.28);line-height:1}
.pijler h3{font-size:20px;margin:10px 0 10px}
.pijler p{color:#3c4a4d;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(59,66,71,.35)}
.tl-stap{position:relative;text-align:center;padding-top:0}
.tl-nr{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:var(--wit);font-weight:700;font-size:20px;
  display:grid;place-items:center;margin:0 auto 18px;
  box-shadow:0 0 0 6px var(--wit)}
.tl-stap h3{font-size:18px;margin-bottom:8px}
.tl-stap p{color:#3c4a4d;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(59,66,71,.35);transform:translateX(-50%)}
.tlv-rij{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;
  align-items:center;margin-bottom:34px}
.tlv-rij:last-child{margin-bottom:0}
.tlv-nr{grid-column:2;justify-self:center;width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:var(--wit);font-weight:700;font-size:20px;
  display:grid;place-items:center;box-shadow:0 0 0 6px var(--wit);position:relative;z-index:2}
.tlv-kaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
  padding:24px 26px;text-align:center}
.tlv-kaart h3{font-size:18px;margin-bottom:6px}
.tlv-kaart p{color:#3c4a4d;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:#3c4a4d;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-klein.webp') center/cover no-repeat}
.stappen-donker::before{content:"";position:absolute;inset:0;background:var(--petrol);opacity:.95}
.stappen-donker .container{position:relative;z-index:2}
.stappen-donker h2{color:var(--wit)}
.stappen-donker .kop-blok p{color:rgba(255,255,255,.85)}
.sd-lijst{max-width:640px;margin-inline:auto;list-style:none;position:relative}
.sd-lijst::before{content:"";position:absolute;top:12px;bottom:12px;left:26px;
  width:2px;background:rgba(255,255,255,.25)}
.sd-lijst li{position:relative;display:flex;gap:22px;align-items:flex-start;padding:16px 0}
.sd-nr{position:relative;z-index:2;flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  background:var(--wit);color:var(--petrol);font-weight:700;font-size:20px;
  display:grid;place-items:center}
.sd-lijst h3{color:var(--wit);font-size:18px;margin:4px 0 6px}
.sd-lijst p{color:rgba(255,255,255,.78);font-size:14.5px}

/* ---------- weetjes & tips (4 varianten) ---------- */
.tips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.tips-grid{grid-template-columns:1fr;gap:18px}}
/* variant A: tipkaart met foto bovenaan */
.tipkaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
  overflow:hidden;text-align:center;display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tipkaart:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.tipkaart .beeld{aspect-ratio:16/9;overflow:hidden}
.tipkaart .beeld img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.tipkaart:hover .beeld img{transform:scale(1.05)}
.tipkaart .binnen{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.tipkaart h3{font-size:19px;margin:10px 0 10px}
.tipkaart p{color:#3c4a4d;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:#3c4a4d;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(--ink-rgb),0) 18%,rgba(var(--ink-rgb),.55) 48%,rgba(var(--ink-rgb),.93) 88%)}
.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)}
/* Eén kolom tussen 641 en 900px maakte van 4:5 een kaart van 720x900; met 16:10
   blijft het een fotokaart in plaats van een zuil. Tussen 901 en 1140px staan er
   weer drie naast elkaar en is de kaart maar 285px breed: daar meer hoogte,
   anders vult de tekst 85 procent van de foto. */
@media(min-width:641px) and (max-width:900px){.tip-overlay{aspect-ratio:16/10}}
@media(min-width:901px) and (max-width:1140px){.tip-overlay{aspect-ratio:7/10}}
/* Zelfde verhaal als bij de projectkaart: op 320px stond de tekst over de
   hele foto heen. Meer hoogte en een compactere tekst. */
@media(max-width:480px){
  .tip-overlay{aspect-ratio:3/4}
  .tip-overlay .binnen{padding:20px 18px}
  .tip-overlay h3{font-size:17.5px;margin:8px 0 6px}
  .tip-overlay p{font-size:13.5px;margin-bottom:10px}
}
@media(max-width:400px){.tip-overlay{aspect-ratio:5/8}}
/* 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(59,66,71,0) 25%,rgba(59,66,71,.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:#3c4a4d;font-size:14px;margin-bottom:12px}

/* ---------- kennisbank- en regiokaarten ---------- */
.tip-tag{
  display:inline-block;background:rgba(59,66,71,.14);color:var(--petrol);
  border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;
}
.kaart .tekstlink{font-size:15px}
.kaart p.samenvatting{color:#3c4a4d;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:#3c4a4d}

/* ---------- projectkaarten (gemeten: foto met petrol-overlay, witte titel) ---------- */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.project-grid{grid-template-columns:1fr}}
.projectkaart{
  position:relative;border-radius:var(--r-kaart);overflow:hidden;
  aspect-ratio:353/250;display:block;text-align:center;
  text-decoration:none;background-size:cover;background-position:center;
}
/* besluit Dikkie 20-08: tekst onderin de kaart, foto bovenin zichtbaar,
   donkere gloed van onderaf (zoals het vaste DPS-voorbeeld) */
.projectkaart::before{content:"";position:absolute;inset:0;
  background:rgba(var(--ink-rgb),.30);transition:background .3s var(--ease)}
.projectkaart::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(var(--ink-rgb),0) 26%,rgba(var(--ink-rgb),.55) 58%,rgba(var(--ink-rgb),.92) 100%)}
.projectkaart:hover::before{background:rgba(var(--ink-rgb),.18)}
.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}
/* Op smalle schermen vulde het tekstblok tot 92 procent van de kaart, waardoor
   de foto er niet meer onder vandaan kwam. Kaart hoger, tekst iets kleiner. */
@media(max-width:480px){
  .projectkaart{aspect-ratio:5/4}
  .projectkaart .binnen{padding:0 16px 16px}
  .projectkaart h3{font-size:18.5px}
  .projectkaart p{font-size:14px}
  .projectkaart .regio{font-size:13.5px;margin-top:6px}
}
@media(max-width:400px){.projectkaart{aspect-ratio:1/1}}

/* ---------- splitsectie ---------- */
.split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,64px);align-items:center}
.split>div{text-align:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .knop{margin-top:26px}
/* Tussen 861 en 1180px stond de projectensectie nog in twee kolommen, waardoor
   de vier fotokaarten maar 211px breed werden. De titel liep dan tot 226px hoog
   in een kaart van 149px en werd bovenaan afgekapt. Daar dus onder elkaar. */
@media(max-width:1180px){#projecten .split{grid-template-columns:1fr}}
.fotogrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* Op de telefoon zijn twee kolommen te smal: de kaart werd 162x115 terwijl het
   tekstblok 277px hoog is, waardoor de titel wegviel en de resttekst over de
   foto liep. Vanaf 640px dus een kolom, gelijk aan .project-grid elders. */
@media(max-width:640px){.fotogrid{grid-template-columns:1fr;gap:16px}}
.foto{border-radius:var(--r-kaart);aspect-ratio:4/3;overflow:hidden;background:var(--foto-tint)}
/* Zodra de splitsectie onder 860px in een kolom valt, werd de foto 812px breed
   getoond uit een bron van 1000px. Plafond van 660px houdt hem op 1,5x. */
@media(min-width:641px) and (max-width:900px){.split .foto,.over-hero .foto{max-width:660px;margin-inline:auto}}
.foto img{width:100%;height:100%;object-fit:cover}

/* ---------- werkwijze-stappen ---------- */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.stappen{grid-template-columns:1fr}}
.stap{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
  padding:36px 28px;text-align:center}
.stap-nr{width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--wit);
  font-weight:700;font-size:22px;display:grid;place-items:center;margin:0 auto 20px}
.stap h3{margin-bottom:12px}
.stap p{color:#3c4a4d;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;
  /* alle kaarten in de slider zijn even hoog (anders springt hij), maar bij een
     korte review bleef er tot 161px leeg onderin. De inhoud staat nu verticaal
     gecentreerd, zodat de lucht gelijk boven en onder verdeeld wordt. */
  display:flex;flex-direction:column;justify-content:center}
.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:#3c4a4d;font-size:15px;margin-bottom:0}
.review-acties{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}
.google-regel{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:34px 0 30px;font-size:15px;color:var(--ink);
}
.google-regel .gr-rij{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.google-regel .gr-sub{font-size:13px;color:#69727d}
.google-regel .g-logo{width:20px;height:20px}
.google-regel .sterren{font-size:16px;margin:0;letter-spacing:2px}

/* ---------- waarom-kaart (over-hero) ---------- */
.over-hero{margin-top:var(--header-h);background:var(--salie);overflow:hidden}
.over-hero .binnen{
  max-width:1140px;margin-inline:auto;padding:clamp(48px,6vw,80px) 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;
}
.over-hero .binnen>div{text-align:center}
.over-hero h1{font-size:40px;font-weight:600;margin-bottom:22px}
.over-hero p{margin-bottom:16px;color:#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}
/* stond eerst als inline stijl in de generator; nu in CSS zodat de breedte
   mee kan bewegen met de foto erboven */
.waarom-over{position:relative;margin:-100px auto 0;max-width:88%}
/* Tussen 641 en 900px is de busfoto afgetopt op 660px. De kaart eronder moet
   dan smaller zijn dan de foto, anders steekt hij aan beide kanten uit. */
@media(min-width:641px) and (max-width:900px){.waarom-over{max-width:580px}}
@media(max-width:640px){.waarom-over{margin-top:-60px;max-width:92%}}
.waarom-kaart ul{width:fit-content;margin-inline:auto;text-align:left;list-style:none}
.waarom-kaart li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font-size:15px;color:#3c4a4d}
.waarom-kaart li::before{
  content:"";flex:0 0 16px;height:16px;margin-top:3px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%232e9e5b" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M2.5 8.5l3.5 3.5 7-8"/></svg>') 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) var(--advies-foto) 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:var(--cirkel);
  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);box-shadow:var(--schaduw);margin-inline:auto;
  /* De kaartopname is 1280x688. Met een vaste hoogte van 520px werd het kader
     bij elke breedte onder de 960px staand en sneed tot 37 procent weg. Met de
     verhouding van de bron zelf valt er nooit iets af. En met een plafond van
     850px blijft de weergave op 1,5x de bron, dus blijven de plaatsnamen scherp. */
  aspect-ratio:1280/688;max-width:850px;
}
/* De kaart is een brede opname (1280x688). In een kader van 342x520 sneed dat
   65 procent weg, waardoor de omliggende plaatsen buiten beeld vielen.
   Op de telefoon dus een lager kader, dan blijft de hele regio zichtbaar. */
/* De kaartfoto is 1280x688; in een blok van 312x260 sneed dat 36 procent weg.
   Op de telefoon dus een liggende verhouding, dan blijft de hele regio in beeld. */
/* onder 480px zou 1,86 een streepje van 150px hoog opleveren; 16:10 leest beter
   en snijdt maar 14 procent weg */
@media(max-width:480px){.kaart-blok{aspect-ratio:16/10}}
.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(--neutraal);color:var(--ink)}
.knop-omlijnd:hover{background:var(--knop-bg);border-color:var(--neutraal)}

/* ---------- 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:#3c4a4d;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(--cta-bg);border-radius:40px;
  box-shadow:var(--cta-rand);
  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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%232e9e5b" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M2.5 8.5l3.5 3.5 7-8"/></svg>') 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}
}
.footer-onder a{color:rgba(255,255,255,.55)}
.footer-onder a:hover{color:var(--wit)}
/* klikbare makerslink: valt op tussen de gedempte foottekst */
.footer-onder a.dps-link{color:var(--salie);text-decoration:underline;text-underline-offset:3px}
.footer-onder a.dps-link:hover{color:var(--wit)}
/* de mobiele regel verbergt alle nav-links, maar de DPS-link blijft altijd staan */
.footer-onder nav a.dps-link{display:inline}

/* ---------- artikelpagina's (kennisbank) ---------- */
.artikel-meta{display:flex;justify-content:center;align-items:center;gap:14px;
  flex-wrap:wrap;padding:0 16px;
  margin-top:14px;color:rgba(255,255,255,.85);font-size:13.5px}
@media(max-width:640px){
  .artikel-meta{display:grid;grid-template-columns:auto auto;justify-content:center;
    gap:8px 16px;align-items:center}
  .artikel-meta>*:nth-child(3){grid-column:1/-1;justify-self:center}
}
.pagina-hero h1.klein{font-size:38px;text-transform:none}
@media(max-width:640px){.pagina-hero h1.klein{font-size:24px}}
.artikel-meta .tip-tag{margin:0;background:rgba(255,255,255,.18);color:#fff}
.artikel-kop-hero{position:relative;margin-top:var(--header-h);
  min-height:340px;display:grid;place-items:center;text-align:center;
  background-size:cover;background-position:center;padding:56px 24px}
.artikel-kop-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(59,66,71,.55),rgba(59,66,71,.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:#3c4a4d;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:#3c4a4d}
.artikel-inhoud ul.vinkjes li::before{content:"";flex:0 0 16px;height:16px;margin-top:4px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%232e9e5b" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M2.5 8.5l3.5 3.5 7-8"/></svg>') 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(59,66,71,.35);
  border-radius:var(--r-kaart);padding:24px 28px;margin:0 0 30px;text-align:left}
.samenvatting-blok b{display:block;margin-bottom:10px;color:var(--petrol);
  text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.inhoudsopgave{background:var(--bg);border-radius:var(--r-kaart);padding:22px 26px;
  margin-bottom:30px;text-align:left}
.inhoudsopgave b{display:block;margin-bottom:10px;font-size:15px}
.inhoudsopgave ol{margin-left:20px;color:#3c4a4d;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)}}
/* Op 320px passen twee kolommen niet meer: "OPENINGSTIJDEN" duwde de pagina
   11px breder dan het scherm. Daar dus een kolom en minder zijpadding. */
@media(max-width:400px){.feiten-balk{grid-template-columns:1fr;padding:22px 18px;gap:16px}}
/* 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:#3c4a4d;margin-bottom:6px}
/* projectgalerij: twee gelijke kolommen op 4:3 (15-09-2026). Het mozaiek met
   vaste rijhoogte sneed 27 tot 31 procent van elke foto weg, en op de telefoon won
   de basisregel met min-height:280px van de 4:3-regel (cascadevolgorde). Nu staat
   elke foto volledig in beeld; zes foto's = drie rijen van twee. 20px smaller dan
   de container houdt de foto's op 550px, ruim 1,8x hun bron. */
.galerij{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1120px;margin-inline:auto}
.galerij .g-rij2{display:contents}
.galerij .foto{aspect-ratio:4/3;min-height:0}
.galerij .foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.galerij{grid-template-columns:1fr}}
.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:#3c4a4d}
.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:#3c4a4d}
.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}
/* Onder 1100px staat de wizard onder elkaar. Ging de kaart dan over de volle
   breedte, dan werd de foto erboven 1002px getoond uit een bron van 1200px
   (1,2x, zichtbaar zacht). Met een plafond van 800px blijft hij op 1,5x. */
@media(max-width:1100px){.calc-kaart{grid-template-columns:1fr;max-width:800px}}
/* 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(--wit)}
.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(--neutraal)}
.calc-tegel.gekozen{border-color:var(--neutraal);background:rgba(var(--neutraal-rgb),.14);transform:translateY(-1px)}
.calc-tegel.gekozen svg{stroke:var(--ink)}
.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(--knop-bg);color:var(--knop-tekst);
  border:0;border-radius:12px;padding:16px;cursor:pointer;box-shadow:var(--knop-rand);
  font-family:inherit;font-size:16.5px;font-weight:700;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.calc-volgende:hover{background:var(--knop-hover);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:#3c4a4d}
.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:#3c4a4d;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:#3c4a4d;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:#3c4a4d;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:#3c4a4d;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(--salie) url('../img/hero-2.webp') center/cover no-repeat}
.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-hover)}
.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(59,66,71,.45);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(59,66,71,.45);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:#3c4a4d}

/* ---------- mobiele verfijning (besluiten Dikkie 20-08) ---------- */
.alleen-mobiel{display:none}
@media(max-width:860px){
  .alleen-desktop{display:none}
  .alleen-mobiel{display:block}
  /* projecten-sectie homepage: alles gecentreerd */
  #projecten .split>div:first-child{text-align:center}
}
@media(max-width:640px){
  /* dienstkaarten: zinnen op één regel, vinkjes gelijk gecentreerd */
  .kaart ul li{font-size:13.5px;white-space:nowrap}
  .waarom-kaart li{font-size:14px;white-space:nowrap}
  /* footer: alles gecentreerd, kolommen twee aan twee */
  .footer-boven{grid-template-columns:1fr 1fr;gap:30px 14px}
  .footer-boven>div{text-align:center}
  .footer-boven>div:first-child{grid-column:1/-1}
  .footer-boven .footer-logo{justify-content:center}
  .footer-boven .footer-logo{justify-content:center}
  .footer-boven>div:nth-child(2){order:1}
  .footer-boven>div:nth-child(5){order:2}
  .footer-boven>div:nth-child(3){order:3}
  .footer-boven>div:nth-child(4){order:4}
  .footer-boven>div:first-child ul{
    display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
    width:fit-content;margin-inline:auto}
  .footer-boven .vink{font-size:13.5px;white-space:nowrap}
  .social{justify-content:center}
  .footer .pijl-link{justify-content:center}
}

/* ---------- mobiele verfijning (besluiten Dikkie 20-08) ---------- */
.alleen-mobiel{display:none}
@media(max-width:860px){
  .alleen-desktop{display:none}
  .alleen-mobiel{display:block}
  /* projecten-sectie homepage: alles gecentreerd */
  #projecten .split>div:first-child{text-align:center}
}
@media(max-width:640px){
  /* dienstkaarten: zinnen op één regel, vinkjes gelijk gecentreerd */
  .kaart ul li{font-size:13.5px;white-space:nowrap}
  .waarom-kaart li{font-size:14px;white-space:nowrap}
  /* footer: alles gecentreerd, kolommen twee aan twee */
  .footer-boven{grid-template-columns:1fr 1fr;gap:30px 14px}
  .footer-boven>div{text-align:center}
  .footer-boven>div:first-child{grid-column:1/-1}
  .footer-boven .footer-logo{justify-content:center}
  .footer-boven>div:nth-child(2){order:1}
  .footer-boven>div:nth-child(5){order:2}
  .footer-boven>div:nth-child(3){order:3}
  .footer-boven>div:nth-child(4){order:4}
  .footer-boven>div:first-child ul{
    display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
    width:fit-content;margin-inline:auto}
  .footer-boven .vink{font-size:13.5px;white-space:nowrap}
  .social{justify-content:center}
  .footer .pijl-link{justify-content:center}
}

/* ---------- reveals: vaste DPS-waarden ---------- */
.js .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
/* zijwaartse reveals (stappenplan): schuiven vanaf de eigen kant in beeld */
.js .reveal-li,.js .reveal-re{opacity:0;
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal-li{transform:translateX(-44px)}
.js .reveal-re{transform:translateX(44px)}
.js .reveal-li.is-visible,.js .reveal-re.is-visible{opacity:1;transform:none}
.js .reveal-li .tlv-nr,.js .reveal-re .tlv-nr{opacity:0;transform:scale(.4);
  transition:opacity .5s var(--ease) .3s,transform .5s var(--ease) .3s}
.js .reveal-li.is-visible .tlv-nr,.js .reveal-re.is-visible .tlv-nr{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal-li,.js .reveal-re,.js .reveal-li .tlv-nr,.js .reveal-re .tlv-nr{
    opacity:1;transform:none;transition:none}
}
.js .hero .reveal{transform:none}
.stagger>*:nth-child(1){transition-delay:0ms}
.stagger>*:nth-child(2){transition-delay:110ms}
.stagger>*:nth-child(3){transition-delay:220ms}
.stagger>*:nth-child(4){transition-delay:330ms}
.stagger>*:nth-child(5){transition-delay:440ms}
.stagger>*:nth-child(6){transition-delay:550ms}
.stagger>*:nth-child(7){transition-delay:660ms}
.stagger>*:nth-child(8){transition-delay:770ms}
.stagger>*:nth-child(9){transition-delay:880ms}
.stagger>*:nth-child(10){transition-delay:990ms}
.stagger>*:nth-child(11){transition-delay:1100ms}
.stagger>*:nth-child(12){transition-delay:1210ms}
.stagger>*:nth-child(7){transition-delay:660ms}
.stagger>*:nth-child(8){transition-delay:770ms}
.stagger>*:nth-child(9){transition-delay:880ms}
.stagger>*:nth-child(10){transition-delay:990ms}
.stagger>*:nth-child(11){transition-delay:1100ms}
.stagger>*:nth-child(12){transition-delay:1210ms}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero-baan{transition:none}
  .logo-plateau,.logo-merk,.logo-tekst{transition:none}
}

/* ---------- mobiel ---------- */
@media(max-width:640px){
  :root{--header-h:76px;--plateau-h:100px}
  .header{padding:0 16px}
  .logo-plateau{width:auto;min-width:0;padding:0 16px;gap:8px;border-radius:0 0 24px 0}
  .logo-merk{width:34px;height:34px;font-size:15px;border-radius:9px}
  .logo-tekst b{font-size:14px}
  .logo-tekst span{font-size:7.5px;letter-spacing:.24em}
  .nav .knop{font-size:13px;padding:9px 12px 10px;white-space:nowrap}
  .hero{height:78svh}
  .hero-titel{font-size:24px;max-width:340px}
  .pagina-hero{height:200px}
  .cta-blok h2{font-size:24px}
}
@media print{.hero{height:auto}.header{position:static}}

/* mobiel: hero groeit mee en de google-badge staat in de flow onder de
   knoppen; staat bewust ONDERAAN het bestand zodat hij de absolute
   positionering van eerdere regels wint */
@media(max-width:640px){
  .hero{height:auto;min-height:78svh;padding:calc(var(--header-h) + 26px) 0 30px}
  .google-badge:not(.hero-scores){position:static;transform:none;margin:18px auto 0;justify-self:center;order:9}
}

/* ---------- cookiebanner + Consent Mode v2 (DPS-component, vast onderdeel) ---------- */
#dpscb{ position:fixed; inset:auto 0 0 0; z-index:2147483000; padding:14px; display:flex; justify-content:center; }
#dpscb .dpscb-card{ background:#fff; color:var(--ink); border:1px solid #e2e6e7; border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.22); max-width:560px; width:100%; padding:20px 22px; }
#dpscb h3{ margin:0 0 8px; font-size:18px; color:var(--ink) !important; }
#dpscb p{ margin:0 0 14px; font-size:14px; line-height:1.55; color:#4a5157; }
#dpscb p a{ color:inherit; text-decoration:underline; }
#dpscb .dpscb-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#dpscb .dpscb-btn{ appearance:none; border:0; border-radius:999px; padding:13px 18px; font-size:15px;
  font-weight:700; cursor:pointer; font-family:inherit; }
#dpscb .dpscb-accept{ background:var(--accent); color:#fff; }
#dpscb .dpscb-deny{ background:#e9ebec; color:var(--ink); }
#dpscb .dpscb-link{ appearance:none; background:none; border:0; padding:10px 0 0; font-size:13.5px;
  text-decoration:underline; cursor:pointer; color:#6c7680; font-family:inherit; }
#dpscb .dpscb-opts{ border-top:1px solid #ececec; margin:4px 0 12px; padding-top:12px; display:flex; flex-direction:column; gap:10px; }
#dpscb .dpscb-opt{ display:flex; gap:10px; align-items:flex-start; font-size:14px; }
#dpscb .dpscb-opt small{ display:block; color:#77808a; font-size:12.5px; }
#dpscb .dpscb-save{ background:var(--petrol); color:#fff; margin-top:2px; }
#dpscb .dpscb-opts[hidden]{ display:none !important; }
@media(max-width:520px){ #dpscb .dpscb-btns{ grid-template-columns:1fr } }

/* vangnet: gridkolommen mogen op smalle schermen krimpen (lange inhoud duwt anders
   de kolom breder dan het scherm) */
.split>*,.over-hero .binnen>*,.product-hero .binnen>*{min-width:0}
.product-hero h1,.over-hero h1,.pagina-hero h1{overflow-wrap:anywhere}

/* ---------- zonder JavaScript blijft alles zichtbaar en bruikbaar ---------- */
.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-baan{transform:none!important}
.no-js .hero-dia:not(:first-child){display:none}
.no-js .hero-pijl,.no-js .car-pijl,.no-js .dots{display:none}
.no-js .kaarten,.no-js .review-strook{overflow-x:auto;scroll-snap-type:x mandatory}
.no-js .calc-stap{display:block!important}
.no-js .calc-voortgang,.no-js .calc-stapnr,.no-js .calc-terug{display:none}
.no-js .calc-volgende::after{content:" en versturen"}
.no-js .mobiel-menu,.no-js .hamburger{display:none!important}
.no-js .kaart-blok img{display:block}



/* ---------- platformstrook: waar SLK overal beoordeeld wordt ---------- */
.platform-strook{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:12px;margin-top:clamp(26px,3vw,34px);
}
.pf-kaart{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  min-width:146px;padding:16px 18px 14px;background:var(--wit);
  border:1px solid #dfe3e6;border-radius:14px;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
a.pf-kaart:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(var(--ink-rgb),.10);border-color:#cdd3d8}
/* het logo staat bovenaan, allemaal op dezelfde optische hoogte */
.pf-logo{height:22px;width:auto;max-width:118px;object-fit:contain;display:block;margin-bottom:6px}
.pf-google{display:flex;align-items:center;gap:6px}
.pf-google svg{width:19px;height:19px;display:block}
.pf-google b{font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.pf-cijfer{font-size:23px;color:var(--ink);line-height:1.1}
.pf-aantal{font-size:12.5px;color:#6d757b}
@media(max-width:560px){
  .pf-kaart{min-width:0;flex:1 1 44%;padding:14px 10px 12px}
  .pf-logo{height:19px;max-width:100%}
}
/* de knoppenrij eronder krijgt lucht: hij plakte tegen de strook (gemeten: 3px) */
.platform-strook + .review-acties{margin-top:clamp(26px,3vw,34px)}

/* ---------- reviewblok in de rechterzijbalk ---------- */
.zb-score h3{display:flex;align-items:center;gap:8px}
.zb-g{width:17px;height:17px;display:inline-flex;flex:0 0 17px}
.zb-g svg{width:17px;height:17px;display:block}
.zb-cijfer{display:flex;align-items:center;gap:9px;margin:2px 0 2px}
.zb-cijfer b{font-size:28px;color:var(--ink);line-height:1}
.zb-cijfer .sterren{font-size:14px}
.zb-sub{font-size:13px;color:#6d757b;margin-bottom:14px}
.zb-review{display:flex;gap:10px;padding:12px 0;border-top:1px solid #e6e9eb}
.zb-avatar{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;
}
.zb-review b{display:block;font-size:13.5px;color:var(--ink)}
.zb-review .sterren{font-size:12px;display:block;margin:1px 0 4px}
.zb-review p{font-size:13px;line-height:1.45;color:#4a5157}
.zb-score .tekstlink{display:inline-block;margin-top:12px;font-size:14px}

/* ---------- scorebalk in de hero: vier witte logo's onder de knoppen ---------- */
/* Kaal op de foto, geen drager. De officiele witte logovarianten van de
   platformen houden het leesbaar; een zachte schaduw vangt op dat de herofoto
   niet overal even donker is. */
.hero-scores{
  display:grid;grid-template-columns:repeat(4,auto);
  column-gap:clamp(18px,2.4vw,34px);row-gap:12px;
  justify-content:center;align-items:center;
  width:fit-content;margin:24px auto 0;
}
.hs-item{
  display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  background:none;box-shadow:none;padding:0;
  text-shadow:0 1px 8px rgba(0,0,0,.8),0 0 3px rgba(0,0,0,.55);
}
.hs-cijfer{font-size:16px;color:var(--wit);line-height:1;font-weight:700}
.hs-logo{
  height:17px;width:auto;max-width:84px;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.8)) drop-shadow(0 0 2px rgba(0,0,0,.5));
}
.hs-google{display:flex;align-items:center;gap:7px}
.hs-google svg{width:17px;height:17px;display:block;filter:drop-shadow(0 1px 5px rgba(0,0,0,.6))}
.hs-merk{font-size:14.5px;color:var(--wit);font-weight:600;letter-spacing:-.01em}
/* optische correctie: de woordmerken vullen hun kader alle drie voor bijna
   100 procent met inkt, dus op gelijke hoogte oogt Trustoo veel zwaarder */
.hs-trustoo{height:13px}
.hs-trustpilot{height:15px}
.hs-infobel{height:14px}
@media(max-width:1100px){
  .hero-scores{column-gap:clamp(14px,2vw,24px)}
  .hs-logo{height:15.5px;max-width:74px}
  .hs-trustoo{height:12px}.hs-trustpilot{height:13.5px}.hs-infobel{height:12.5px}
  .hs-google svg{width:15.5px;height:15.5px}
  .hs-merk{font-size:13px}
  .hs-cijfer{font-size:14.5px}
}
/* op de telefoon past een rij van vier niet: dan 2x2 */
@media(max-width:640px){
  .hero-scores{grid-template-columns:repeat(2,auto);column-gap:26px;row-gap:11px;margin-top:22px}
  .hs-logo{height:14px;max-width:66px}
  .hs-trustoo{height:11px}.hs-trustpilot{height:12.5px}.hs-infobel{height:11.5px}
  .hs-google svg{width:14px;height:14px}
  .hs-merk{font-size:12px}
  .hs-cijfer{font-size:13.5px}
}

/* ---------- keurmerken: echte logo's waar die bestaan ---------- */
.keurmerk-vak{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-width:142px;padding:15px 16px 13px;
  background:var(--wit);border:1px solid #dfe3e6;border-radius:14px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.keurmerk-vak:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(var(--ink-rgb),.09);border-color:#cdd3d8}
/* de officiele logo's in hun eigen kleuren, op gelijke optische hoogte */
.km-logo{height:30px;width:auto;max-width:118px;object-fit:contain;display:block}
/* geen logo beschikbaar: een badge in de huisstijl, nooit een nagemaakt logo */
.km-icoon{
  width:30px;height:30px;display:grid;place-items:center;color:var(--petrol);
}
.km-icoon svg{width:26px;height:26px;display:block}
.km-naam{font-size:14.5px;color:var(--ink);line-height:1;margin-top:-3px}
.km-onder{font-size:11.5px;color:#6d757b;text-align:center;line-height:1.25}
@media(max-width:640px){
  .keurmerk-logos{gap:9px}
  .keurmerk-vak{min-width:0;flex:1 1 45%;padding:12px 8px 11px;gap:6px}
  .km-logo{height:25px;max-width:100%}
  .km-icoon,.km-icoon svg{width:25px;height:25px}
  .km-naam{font-size:13.5px}
  .km-onder{font-size:10.5px}
}

/* ---------- eerste scherm compacter: knop en keurmerken eerder in beeld ---------- */
/* Gemeten: de contactknop stond op y=1107 bij een viewport van 900px. Door de
   marges in het welkomblok strakker te zetten komt hij ruim 100px hoger. */
.eerste-scherm .sectie-wit{padding-top:24px;padding-bottom:30px}
.eerste-scherm .kop-blok{margin-bottom:26px}
.eerste-scherm .kop-blok p{margin-top:10px}
.eerste-scherm .welkom-acties{margin-top:18px}
.eerste-scherm .keurmerk-strook{margin-top:26px}
.eerste-scherm .keurmerk-intro{margin-bottom:14px}
@media(max-width:900px){
  .eerste-scherm .sectie-wit{padding-top:18px;padding-bottom:24px}
  .eerste-scherm .kop-blok{margin-bottom:20px}
  .eerste-scherm .welkom-acties{margin-top:16px}
  .eerste-scherm .keurmerk-strook{margin-top:22px}
}

/* keurmerkstrook compacter zodra de hoogte krap is */
@media(max-height:1000px){
  .eerste-scherm .keurmerk-strook{margin-top:20px}
  .eerste-scherm .keurmerk-intro{margin-bottom:11px;font-size:11.5px}
  .eerste-scherm .keurmerk-vak{min-width:126px;padding:11px 13px 10px;gap:5px}
  .eerste-scherm .km-logo{height:25px}
  .eerste-scherm .km-icoon,.eerste-scherm .km-icoon svg{width:25px;height:25px}
  .eerste-scherm .km-naam{font-size:13.5px}
  .eerste-scherm .km-onder{font-size:10.5px}
}
@media(max-height:820px){
  .eerste-scherm .keurmerk-strook{margin-top:15px}
  .eerste-scherm .keurmerk-vak{min-width:112px;padding:9px 10px 8px;gap:4px}
  .eerste-scherm .km-logo{height:21px}
  .eerste-scherm .km-icoon,.eerste-scherm .km-icoon svg{width:21px;height:21px}
  .eerste-scherm .km-naam{font-size:12.5px}
  .eerste-scherm .km-onder{font-size:10px}
  .eerste-scherm .hero-scores{margin-top:16px}
}

/* Op schermen die niet hoog genoeg zijn om alles te tonen, wordt de
   keurmerkstrook compact: alleen de logo's en de naam, zonder onderregel.
   Zo blijven de contactknop en de keurmerken samen boven de vouw. */
@media(max-height:1000px){
  .eerste-scherm .km-onder{display:none}
  .eerste-scherm .keurmerk-vak{min-width:104px;padding:10px 12px;gap:0}
  .eerste-scherm .km-logo{height:24px}
  .eerste-scherm .km-icoon,.eerste-scherm .km-icoon svg{width:22px;height:22px}
  .eerste-scherm .km-naam{font-size:12.5px;margin-top:2px}
  .eerste-scherm .keurmerk-logos{gap:9px}
}

/* de busfoto bij "Waarom kiezen voor ons" is een liggende opname: 7:5 in plaats
   van 4:3, zo staat de hele bus erop zonder dat de zijkanten of de wielen
   worden afgesneden */
.foto-breed{aspect-ratio:7/5}

/* ---------- beeld naast de offertewizard ---------- */
/* Hier stond een voor/na-schuif, maar SLK heeft geen voor-foto's: op al zijn
   beeldmateriaal staat de airco er al op. Twee keer dezelfde foto met een
   filter suggereert een verschil dat er niet is, dus staat er nu een echte
   foto. Zodra de klant een wand voor en na aanlevert, gaat de schuif terug. */
.calc-beeld{position:relative;min-height:420px;overflow:hidden}
.calc-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cb-bijschrift{
  position:absolute;left:16px;bottom:16px;z-index:2;
  background:rgba(var(--ink-rgb),.8);color:var(--wit);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:7px 13px;border-radius:999px;
}
/* Onder 860px staat de wizard onder elkaar en werd het beeld een platte strook
   van 720x240: 56 procent van de opname viel weg. Met een vaste verhouding
   blijft de foto herkenbaar op elke breedte. */
/* onder 1100px staat de foto boven de wizard: dan de 4:3 van de foto zelf (was 16:10,
   17 procent weg) */
@media(max-width:1100px){.calc-beeld{min-height:0;aspect-ratio:4/3}}

/* Opeenvolgende alinea's plakten aan elkaar: de basis-p heeft geen marge en op
   de project- en regiopagina's stond er ook geen inline. Gemeten: 19 plekken
   met 0px ruimte. Inline marges (style="margin-top:..") winnen hier gewoon van. */
p + p{margin-top:14px}

/* Sleuteltermen stonden alleen binnen .artikel-inhoud opgemaakt. Op de dienst-
   en regiopagina's bleven 66 links dus standaard browserblauw (#0000EE).
   Deze regel geldt overal; de artikelvariant hierboven blijft leidend. */
a.sleutelterm{
  font-weight:700;color:var(--petrol);text-decoration:underline;
  text-decoration-color:rgba(59,66,71,.45);text-underline-offset:3px;
  transition:text-decoration-color .25s var(--ease);
}
a.sleutelterm:hover{text-decoration-color:var(--petrol)}

/* ---------- links die nog op de browserstandaard stonden ---------- */
/* Gemeten: 115 links op de sitemap, het telefoonnummer op bedankt.html en twee
   wrapper-links stonden in #0000EE. Die kleur komt in geen enkele huisstijl voor. */
.juridisch a{color:var(--petrol);text-decoration:underline;
  text-decoration-color:rgba(59,66,71,.4);text-underline-offset:3px}
.juridisch a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.bedankt-stappen a,.container > .reveal a:not(.knop):not(.tekstlink):not(.sleutelterm){
  color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
/* wrapper-links (logoplateau, projectkaart) hebben zelf geen tekst: laat ze erven */
a.logo-plateau,a.projectkaart,a.tip-overlay,a.pf-kaart,a.footer-logo{color:inherit}

/* Op een 360px-scherm (iPhone SE) liepen de footer-vinkjes tegen de rand door
   de nowrap uit de template. Daar mag de tekst gewoon afbreken. */
@media(max-width:400px){
  .footer-boven .vink{white-space:normal}
  .footer-boven>div:first-child ul{grid-template-columns:1fr;text-align:center}
  .footer-boven .vink{justify-content:center}
  /* Ook in de kaarten kan een lange regel met nowrap niet krimpen. Op een
     360px-scherm duwde "A-merken: Daikin, LG, Mitsubishi, Panasonic" de hele
     pagina 16px breder dan het scherm. Daar mag de tekst dus afbreken. */
  .kaart ul li,.waarom-kaart li{white-space:normal}
  /* Twee footerkolommen zijn op 320px maar 146px breed: "Airco reparatie &
     storingen" en "Heel Gelderland en Overijssel" braken dan over drie regels.
     Onder 400px daarom een kolom. */
  .footer-boven{grid-template-columns:1fr}
  .footer-boven>div:first-child{grid-column:auto}
  /* de tijdlijn hield maar 152px over voor de tekst naast de bol */
  .tijdlijn-vert::before{left:20px}
  .tlv-rij{grid-template-columns:40px 1fr;gap:12px}
  .tlv-nr{width:40px;height:40px;font-size:16px;box-shadow:0 0 0 5px var(--tint2)}
  .tlv-kaart{padding:18px 16px}
  /* en de waarom-kaart op de homepage maar 175px */
  .waarom-kaart{padding:22px 16px}
  .waarom-kaart h3{font-size:20px}
  /* De reviewkaart hield 152px tekst over: 34px carrouselmarge plus 26px
     kaartpadding aan beide kanten. Smaller maken geeft 188px. */
  .carrousel{padding:0 30px}
  .car-pijl{padding:8px}
  .car-l{left:0}.car-r{right:0}
  .review{padding:40px 12px 22px}
  .kaart{padding:22px 16px 26px}
}

/* Sitemap: twee kolommen met lange termen als "Lekdichtheidscontrole" passen
   niet op een 320px-scherm. Daar dus een kolom, en lange woorden mogen breken. */
.juridisch ul{overflow-wrap:anywhere}
@media(max-width:420px){.juridisch ul{columns:1 !important}}

/* ---------- kennisbank: hub met korte antwoorden (SEO, 15-09-2026) ---------- */
/* De verdiepingspagina's hingen alleen aan losse tekstlinks; hier krijgen ze
   allemaal een vaste plek in de sitestructuur. */
.hub-lijst{list-style:none;padding:0;margin:0 auto;width:fit-content;text-align:left}
.hub-lijst li{padding:5px 0;font-size:14.5px;line-height:1.45}
.hub-lijst a{color:var(--petrol);text-decoration:underline;text-decoration-color:rgba(59,66,71,.4);
  text-underline-offset:3px;transition:text-decoration-color .25s var(--ease)}
.hub-lijst a:hover{text-decoration-color:var(--petrol)}
.hub-kaart h3{margin-bottom:12px}