/* ============================================================
   0. LETTERTYPEN (ingesloten,geen externe verbinding)
   ============================================================ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/archivo-800.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/public-sans-400.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/public-sans-500.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/public-sans-600.woff2') format('woff2');}

/* Terugvalletters met dezelfde afmetingen als het echte lettertype.
   Voorkomt dat de tekst verspringt zodra Archivo of Public Sans binnenkomt.
   size-adjust is gemeten door dezelfde zin in beide letters te renderen. */
@font-face{font-family:'Archivo terugval';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:91.2%;ascent-override:87.8%;descent-override:21%;line-gap-override:0%;}
@font-face{font-family:'Public Sans terugval';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:104.1%;ascent-override:95%;descent-override:22.5%;line-gap-override:0%;}

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --groen:#5fb133; --groen-diep:#3c7a1f; --groen-dieper:#2f6117; --groen-zacht:#eef7e7; --groen-rand:#cbe6b8;
  --ink:#1b2a35; --ink-2:#4a5b68; --ink-3:#5d6b76;   /* 5,1:1 op wit; #6f7d88 haalde maar 4,23 */
  --wit:#ffffff; --bg:#f7f8f7; --bg-2:#eef1ef;
  --lijn:#e4e7e5; --lijn-2:#d0d5d2;
  --alarm:#a83f20; --alarm-zacht:#fbeee9; --alarm-rand:#eccbbd;
  --maat:1240px;
  --kop:'Archivo', 'Archivo terugval', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tekst:'Public Sans', 'Public Sans terugval', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --balk:88px;
  --r:12px; --r-s:8px; --r-l:18px;
  --s1:0 1px 2px rgba(27,42,53,.05), 0 2px 6px rgba(27,42,53,.05);
  --s2:0 2px 4px rgba(27,42,53,.05), 0 10px 24px rgba(27,42,53,.08);
  --s3:0 4px 8px rgba(27,42,53,.06), 0 24px 56px rgba(27,42,53,.12);
  --veer:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html{scroll-padding-top:calc(var(--kophoogte, 132px) + 14px); scroll-behavior:smooth;}
body{margin:0; background:var(--wit); color:var(--ink); font-family:var(--tekst);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
/* Afbreken staat alleen op h3 en h4: die staan in smalle kolommen. Op de h1
   en h2 brak de browser 'warmteketen' af als 'warmteke-ten'. */
h1,h2,h3,h4{overflow-wrap:break-word; font-family:var(--kop); font-weight:800; margin:0; line-height:1.06; letter-spacing:-.032em; color:var(--ink);}
h1{font-size:clamp(2.6rem,5vw,4.2rem);}
h2{font-size:clamp(1.9rem,3.1vw,2.75rem);}
h3{font-size:1.2rem; font-weight:700; letter-spacing:-.015em;}
p{margin:0 0 1rem;}
a{color:var(--groen-diep); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--groen-diep); outline-offset:3px; border-radius:4px;}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.75rem 1.1rem; z-index:500;}
.skip:focus{left:0;}
.wrap{max-width:var(--maat); margin:0 auto; padding:0 clamp(20px,4vw,44px);}
.sec{padding:clamp(60px,7vw,108px) 0;}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--ink-2); max-width:68ch;}
.mid .lead{margin-left:auto; margin-right:auto;}
h3,h4{hyphens:auto;}
.kophoek h2{max-width:20ch;}
.kophoek .lead{margin-top:1rem;}
/* ============================================================
   2. KNOPPEN
   ============================================================ */
.k{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; font-size:1rem;
  line-height:1; padding:1rem 1.5rem; border-radius:var(--r-s); border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s var(--veer);}
.k svg{width:18px; height:18px;}
.k--groen{background:var(--groen-diep); color:#fff; box-shadow:var(--s1);}
.k--groen:hover{background:var(--groen-dieper); box-shadow:var(--s2); transform:translateY(-1px); text-decoration:none;}
.k--rand{background:var(--wit); color:var(--ink); border-color:var(--lijn-2);}
.k--rand:hover{border-color:var(--ink); background:var(--bg); transform:translateY(-1px); text-decoration:none;}
.k--alarm{background:var(--alarm); color:#fff;}
.k--alarm:hover{background:#8d3319; transform:translateY(-1px); text-decoration:none;}
.k--groot{padding:1.15rem 1.9rem; font-size:1.05rem;}
.k:disabled{opacity:.55; cursor:not-allowed; transform:none;}
/* ============================================================
   3. KOPBALK + MEGA-DROPDOWN
   ============================================================ */
/* De hele kop plakt. Op smalle schermen kost dat 108 van de 844 pixels, dus
   daar laten we alleen de topbalk wegschuiven: een negatieve top betekent dat
   precies die hoogte eerst uit beeld mag rollen voordat de rest blijft staan.
   Dat is één regel CSS en heeft geen knop nodig die de bezoeker moet vinden. */
.kopgroep{position:sticky; top:0; z-index:200;}
@media (max-width:860px){
  .kopgroep{top:calc(-1 * var(--topbalkhoogte, 44px));}
}
.balk{position:relative; background:var(--wit); border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;}
.balk.vast{border-color:var(--lijn); box-shadow:var(--s1);}
.balk__in{display:flex; align-items:center; gap:1.2rem; height:var(--balk);}
.merk{display:flex; align-items:center; margin-right:auto; background:none; border:0; padding:0;
  cursor:pointer; text-decoration:none;}
.merk:hover{text-decoration:none;}
.merk img{height:54px; width:auto;}
.nav{display:flex; align-items:center; gap:.15rem;}
.nav__item{position:relative;}
.nav__knop,.nav a.nav__link{display:inline-flex; align-items:center; gap:.35rem; font-family:var(--tekst); font-weight:500;
  font-size:.98rem; color:var(--ink); background:none; border:0; padding:.6rem .8rem; border-radius:var(--r-s); cursor:pointer;
  transition:background .16s ease, color .16s ease;}
.nav__knop:hover,.nav a.nav__link:hover{background:var(--bg); color:var(--groen-diep); text-decoration:none;}
.nav a.nav__link.actief,.nav__knop.actief{color:var(--groen-diep); font-weight:600;}
.nav__pijl{width:14px; height:14px; transition:transform .22s var(--veer);}
.nav__item.open .nav__pijl{transform:rotate(180deg);}
/* Het mega-paneel */
.mega{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(680px,90vw); background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-l);
  box-shadow:var(--s3); padding:.7rem; opacity:0; visibility:hidden;
  transition:opacity .2s ease, transform .28s var(--veer), visibility .2s;}
.nav__item.open .mega{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.mega__grid{display:grid; grid-template-columns:1fr 1fr; gap:.2rem;}
.mega__link{display:flex; gap:.85rem; padding:.8rem .9rem; border-radius:var(--r); align-items:flex-start;
  transition:background .16s ease;}
.mega__link:hover{background:var(--bg); text-decoration:none;}
.mega__ico{flex:none; width:52px; height:52px; border-radius:13px;
  display:grid; place-items:center; background:var(--groen-zacht); color:var(--groen-diep);}
.mega__ico svg{width:30px; height:30px;}
.mega__link b{display:block; font-family:var(--kop); font-weight:700; font-size:.95rem; color:var(--ink); letter-spacing:-.01em;}
.mega__link span:not(.mega__ico){display:block; font-size:.86rem; color:var(--ink-3); line-height:1.45;}
.mega__voet{margin-top:.4rem; padding:.85rem .9rem; border-top:1px solid var(--lijn); display:flex; justify-content:space-between;
  align-items:center; gap:1rem; font-size:.9rem; color:var(--ink-2); flex-wrap:wrap;}
.balk__acties{display:flex; align-items:center; gap:.6rem;}
.tel{display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.95rem; color:var(--ink); white-space:nowrap;}
.tel svg{width:16px; height:16px; color:var(--groen-diep);}
.burger{display:none; width:46px; height:46px; border:1px solid var(--lijn-2); background:var(--wit); border-radius:var(--r-s);
  cursor:pointer; align-items:center; justify-content:center;}
.burger svg{width:21px; height:21px;}
/* ============================================================
   4. HERO + DE WARMTEKETEN
   ============================================================ */
.hero{position:relative; overflow:hidden; padding:clamp(48px,6vw,86px) 0 clamp(20px,3vw,36px);
  background:radial-gradient(70% 90% at 78% -20%, var(--groen-zacht), transparent 62%), var(--wit);}
.hero__grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,64px); align-items:center;}
.hero h1{max-width:15ch;}
.hero__beeld{position:relative; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--s3); background:var(--bg-2);}
.hero__beeld img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block;}

.hero__sub{margin:1.5rem 0 2rem; font-size:clamp(1.08rem,1.45vw,1.28rem); color:var(--ink-2); max-width:56ch;}
.hero__acties{display:flex; flex-wrap:wrap; gap:.7rem;}
.hero__na{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.6rem; font-size:.94rem; color:var(--ink-2);}
.hero__na span{display:inline-flex; align-items:center; gap:.45rem;}
.hero__na svg{width:17px; height:17px; color:var(--groen-diep);}
.gebouw{fill:#fff; stroke:var(--groen-diep); stroke-width:2;}
.schema.actief{display:block;}
/* zones: standaard rustig{fill:transparent; stroke:transparent; stroke-width:2; transition:fill .22s ease, stroke .22s ease;}
.scene.kiest .zone.aan{opacity:1;}
.zone.aan .zone__vlak{fill:rgba(95,177,51,.10); stroke:var(--groen-diep);}
#zone0.aan .zone__vlak,#zone1.aan .zone__vlak{fill:rgba(111,125,136,.10); stroke:#8b96a0;}
/* onzichtbare keuzezones{position:absolute; inset:0;}
/* kale zone: de tekening draagt zelf de labels{padding:0; background:none;}

/* ── TOPBALK ─────────────────────────────────────────────────────
   Bereikbaarheid boven de hoofdbalk. Scrollt weg;
alleen de
   hoofdbalk blijft plakken. */
.topbalk{background:var(--bg); border-bottom:1px solid var(--lijn); font-size:.875rem;}
.topbalk__in{display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  min-height:44px; flex-wrap:wrap;}
.topbalk__lijst{list-style:none; margin:0; padding:0; display:flex; align-items:center;
  gap:1.5rem; flex-wrap:wrap;}
.topbalk__lijst li{display:flex; align-items:center; gap:.45rem; color:var(--ink-2);}
.topbalk__lijst svg{width:16px; height:16px; color:var(--groen); flex:none;}
.topbalk__lijst a{color:var(--ink-2); display:flex; align-items:center; gap:.45rem;
  min-height:44px; border-radius:var(--r-s); transition:color .18s var(--veer);}
.topbalk__lijst a:hover{color:var(--groen-diep); text-decoration:none;}
/* Taalkiezer: een wereldbol met de huidige taal, en een uitklaplijst met de
   voluit geschreven talen. Een bol is universeel — 'NL' zegt niets tegen
   iemand die de site juist niet in het Nederlands wil. */
/* Terug naar boven: verschijnt pas na twee schermen scrollen, want daarvoor is
   hij overbodig. Blijft uit de weg van de storingsknop op mobiel. */
/* Belblok op de storingspagina: één regel, één knop, geen concurrentie. */
.sec--strak{padding-top:0; padding-bottom:0;}
.sec--vervolg{padding-top:clamp(2rem,4vw,3rem);}
/* In een smalle kolom is de gewone h2 te groot; hij breekt dan over drie regels. */
.kophoek--klein h2{font-size:clamp(1.3rem,2.2vw,1.75rem); max-width:none;}
.belblok{display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  flex-wrap:wrap; padding:1.5rem clamp(1.1rem,3vw,2rem); border-radius:var(--r-l);
  background:var(--alarm-zacht); border:1px solid var(--alarm-rand);}
.belblok__label{margin:0; font-family:var(--kop); font-weight:800; font-size:clamp(1.15rem,2vw,1.5rem);
  letter-spacing:-.02em; color:var(--ink);}
.belblok__uitleg{margin:.35rem 0 0; color:var(--ink-2); font-size:.95rem; max-width:52ch;}
.belblok__knop{flex:none; font-size:1.12rem; padding:.95rem 1.5rem; gap:.6rem;}
.belblok__knop svg{width:20px; height:20px;}
@media (max-width:620px){
  .belblok{flex-direction:column; align-items:stretch; text-align:left;}
  .belblok__knop{justify-content:center;}
}

/* Melding als het formulier tijdelijk niet verstuurt. Bewust in de kleur van
   de storingsknop: het is geen tip maar een beperking. */
.formuit{margin:0 0 1.3rem; padding:.85rem 1rem; border-radius:var(--r-s);
  background:var(--alarm-zacht); border:1px solid var(--alarm-rand);
  color:var(--ink); font-size:.94rem; line-height:1.6;}
.formuit a{color:var(--alarm); font-weight:600;}
.formuit__bel{width:100%; justify-content:center;}

/* Reactietijd vlak boven de verzendknop: daar valt de beslissing om te wachten
   of alsnog te bellen. */
.reactietijd{margin:0 0 .9rem; padding:.7rem .9rem; border-radius:var(--r-s);
  background:var(--bg); color:var(--ink-2); font-size:.9rem; line-height:1.55;}

/* Bedankpagina */
.bedankt{max-width:68ch;}
.bedankt__stappen{counter-reset:stap; list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;}
.bedankt__stappen li{counter-increment:stap; position:relative; padding-left:3.1rem;}
.bedankt__stappen li::before{content:counter(stap); position:absolute; left:0; top:-.1rem;
  width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:50%;
  background:var(--groen-zacht); color:var(--groen-dieper); font-family:var(--kop);
  font-weight:800; font-size:.95rem;}
.bedankt__stappen b{display:block; font-weight:700; color:var(--ink); margin-bottom:.15rem;}
.bedankt__stappen span{color:var(--ink-2); line-height:1.65;}
.bedankt__spoed{margin-top:2rem; padding:1.2rem 1.3rem; border-radius:var(--r-m);
  background:var(--bg); border:1px solid var(--lijn);}
.bedankt__spoed p{margin:0 0 .9rem; color:var(--ink-2);}
.bedankt__spoed p:last-child{margin-bottom:0;}
.bedankt__spoed[hidden]{display:none;}

.omhoog{position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px); z-index:180;
  width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--lijn);
  border-radius:50%; background:var(--wit); color:var(--ink); box-shadow:var(--s2);
  cursor:pointer; opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .22s var(--veer), transform .22s var(--veer), background .18s ease;}
.omhoog.zichtbaar{opacity:1; transform:none; pointer-events:auto;}
.omhoog:hover{background:var(--bg); color:var(--groen-dieper);}
.omhoog:focus-visible{outline:2px solid var(--groen-diep); outline-offset:2px;}
.omhoog svg{width:19px; height:19px;}
@media (prefers-reduced-motion:reduce){ .omhoog{transition:opacity .01s;} }

.taalkies{position:relative; margin-left:auto; padding-right:1rem;}
.taalkies__knop{display:inline-flex; align-items:center; gap:.4rem; min-height:44px;
  padding:0 .5rem; background:none; border:0; border-radius:var(--r-s); cursor:pointer;
  font-family:var(--tekst); font-size:.8125rem; font-weight:700; letter-spacing:.04em;
  color:var(--ink-2); transition:color .18s var(--veer), background .18s var(--veer);}
.taalkies__knop:hover{color:var(--groen-diep); background:var(--wit);}
.taalkies__knop:focus-visible{outline:2px solid var(--groen-diep); outline-offset:-2px;}
.taalkies__bol{width:17px; height:17px; flex:none; color:var(--groen-diep);}
.taalkies__punt{width:11px; height:11px; flex:none; transition:transform .2s var(--veer);}
.taalkies__knop[aria-expanded="true"] .taalkies__punt{transform:rotate(180deg);}
.taalkies__lijst{position:absolute; top:calc(100% - 2px); right:1rem; z-index:220;
  min-width:172px; margin:0; padding:.35rem; list-style:none; background:var(--wit);
  border:1px solid var(--lijn); border-radius:var(--r-m); box-shadow:var(--s2);}
.taalkies__lijst[hidden]{display:none;}
.taalkies__lijst a{display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  min-height:44px; padding:0 .7rem; border-radius:var(--r-s); font-size:.9375rem;
  font-weight:500; color:var(--ink); transition:background .16s ease;}
.taalkies__lijst a:hover{background:var(--bg); text-decoration:none;}
.taalkies__lijst a[aria-current="true"]{font-weight:700; color:var(--groen-dieper);}
.taalkies__vink{width:15px; height:15px; flex:none; color:var(--groen-diep);}
.taalkies__code{opacity:.55; font-size:.78rem; font-weight:700; letter-spacing:.05em;}

.topbalk__sociaal{display:flex; align-items:center; gap:.7rem; color:var(--ink); font-weight:700;}
/* Het groene rondje blijft 28px, maar het aantikbare vlak wordt 44px met een
   onzichtbare rand eromheen. Zo staat de topbalk niet vol met bollen. */
.topbalk__sociaal a{position:relative; width:28px; height:28px; border-radius:50%;
  background:var(--groen-diep); color:#fff;
  display:grid; place-items:center; transition:background .2s var(--veer), transform .2s var(--veer);}
.topbalk__sociaal a::after{content:""; position:absolute; inset:-8px;}
.topbalk__sociaal a:hover{background:var(--groen-dieper); transform:translateY(-1px);}
.topbalk__sociaal svg{width:15px; height:15px;}
@media (max-width:860px){
/* De kop plakt mee en kost dus permanent schermruimte: hier compacter. */
:root{--balk:70px;}
.merk img{height:42px; width:auto;}
.topbalk{font-size:.78rem;}
.topbalk__in{min-height:36px; gap:.8rem; flex-wrap:nowrap; justify-content:space-between;}
.topbalk__lijst{gap:.9rem; flex-wrap:nowrap;}
.topbalk__lijst li:first-child{display:none;}      /* 'Nederland' wijkt als eerste */
.topbalk__sociaal span{display:none;}              /* het label 'Sociale media:' ook */
.topbalk__sociaal a{width:24px; height:24px;}
.topbalk__sociaal svg{width:13px; height:13px;}
}
@media (max-width:560px){
/* Alleen nog wat je echt kunt aantikken. */
.topbalk__lijst li:nth-child(2){display:none;}     /* e-mailadres past niet meer */
.topbalk__lijst li:last-child{display:none;}       /* 'Vacatures' staat in het menu */
.topbalk__in{justify-content:space-between;}
}

/* ── KLANTLOGO'S ─────────────────────────────────────────────────
   Grijswaarden in rust zodat negen huisstijlen elkaar niet bijten;
kleur bij hover. Eén raster van 5 x 2 zonder gaten. */
.klantlogos{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--lijn);
  border:1px solid var(--lijn); border-radius:var(--r-l); overflow:hidden;}
.klantlogo{background:var(--wit); display:grid; place-items:center; padding:24px 20px; min-height:108px;}
.klantlogo img{max-width:100%; max-height:46px; width:auto; height:auto;
  filter:grayscale(1); opacity:.6;
  transition:filter .3s var(--veer), opacity .3s var(--veer), transform .3s var(--veer);}
.klantlogo:hover img{filter:none; opacity:1; transform:scale(1.05);}
.klantlogo--tekst span{font-family:var(--kop); font-weight:800; font-size:1.1rem; letter-spacing:-.02em;
  color:var(--ink-3); transition:color .3s var(--veer);}
.klantlogo--tekst:hover span{color:var(--ink);}
.klantlogo--open{background:var(--bg);}
.klantlogo--open span{font-size:.82rem; font-weight:600; color:var(--ink-3);}
@media (max-width:1040px){
.klantlogos{grid-template-columns:repeat(3,1fr);} }
@media (max-width:620px){
.klantlogos{grid-template-columns:repeat(2,1fr);}
.klantlogo{min-height:88px; padding:18px 14px;}
.klantlogo img{max-height:36px;} }
/* ── ZAKELIJK: WARMTEWET, 24/7 EN USP'S ─────────────────────────── */
.wetgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem;}
.wetkaart{background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-l);
  padding:1.5rem 1.6rem 1.6rem; box-shadow:var(--s1);
  transition:border-color .3s var(--veer), box-shadow .3s var(--veer);}
.wetkaart:hover{border-color:var(--groen-rand); box-shadow:var(--s2);}
.wetkaart h3{font-size:1.08rem; margin-bottom:1.1rem; line-height:1.3;}
.wetkaart p{margin:0; font-size:.93rem; line-height:1.6;}
.wetkaart p b{display:block; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  margin-bottom:.35rem; font-weight:700;}
.wetkaart__wet{color:var(--ink-2); padding-bottom:1.1rem; margin-bottom:1.1rem !important;
  border-bottom:1px solid var(--lijn);}
.wetkaart__wet b{color:var(--ink-3);}
.wetkaart__svs{color:var(--ink);}
.wetkaart__svs b{color:var(--groen-diep);}

.storingsband{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,4vw,52px);
  align-items:center;}
.storingsband__beeld{margin:0; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--s2);}
.storingsband__beeld img{display:block; width:100%; height:auto;}

.uspgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem;}
.usp{display:flex; gap:.85rem; align-items:flex-start; background:var(--wit);
  border:1px solid var(--lijn); border-radius:var(--r); padding:1.25rem 1.3rem; box-shadow:var(--s1);
  transition:border-color .3s var(--veer), box-shadow .3s var(--veer), transform .3s var(--veer);}
.usp:hover{border-color:var(--groen-rand); box-shadow:var(--s2); transform:translateY(-3px);}
.usp__vink{flex:none; width:26px; height:26px; border-radius:8px; background:var(--groen-zacht);
  color:var(--groen-diep); display:grid; place-items:center; margin-top:.1rem;}
.usp__vink svg{width:15px; height:15px;}
.usp h2,.usp h3{font-size:.98rem; line-height:1.3; margin-bottom:.35rem;}
.usp p{margin:0; font-size:.875rem; line-height:1.55; color:var(--ink-2);}

@media (max-width:1080px){
  .wetgrid{grid-template-columns:1fr;}
  .uspgrid{grid-template-columns:repeat(2,1fr);}
  .storingsband{grid-template-columns:1fr;}
}
@media (max-width:620px){ .uspgrid{grid-template-columns:1fr;} }

/* ── Sfeerbeeld op de contactpagina ── */
.contactbeeld{margin:0 0 1.4rem; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--lijn); box-shadow:var(--s1); background:var(--wit);}
.contactbeeld img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  object-position:50% 35%;}
.contactbeeld figcaption{padding:.85rem 1.1rem; font-size:.88rem; color:var(--ink-2);
  border-top:1px solid var(--lijn);}

/* ══════════════════════════════════════════════════════════════════
   WERKEN BIJ SVS
   Warmer dan de rest van de site: meer beeld, meer lucht, zachtere
   vlakken. Wel binnen dezelfde tokens, zodat het één merk blijft.
   ══════════════════════════════════════════════════════════════════ */

/* ── Kop met teamfoto ── */
.wbhero{background:linear-gradient(180deg, var(--groen-zacht) 0%, var(--wit) 78%);
  padding:clamp(38px,5vw,72px) 0 clamp(30px,4vw,54px);}
.wbhero__in{display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(28px,4vw,60px); align-items:center;}
.wbhero__label{display:inline-block; font-family:var(--kop); font-size:.74rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--groen-diep);
  background:var(--wit); border:1px solid var(--groen-rand); border-radius:99px;
  padding:.4rem .95rem; margin-bottom:1.2rem;}
.wbhero h1{font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.05; letter-spacing:-.035em; margin:0;}
.wbhero .lead{margin-top:1.1rem; max-width:52ch;}
.wbhero__knoppen{display:flex; gap:.7rem; flex-wrap:wrap; margin:1.8rem 0 0;}
.wbhero__punten{list-style:none; margin:1.8rem 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.2rem;}
.wbhero__punten li{display:flex; gap:.55rem; align-items:center; font-size:.92rem;
  font-weight:600; color:var(--ink-2);}
.wbhero__punten svg{width:16px; height:16px; flex:none; color:var(--groen-diep);}
.wbhero__beeld{margin:0; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--s3);}
.wbhero__beeld img{display:block; width:100%; height:auto; aspect-ratio:14/9; object-fit:cover;}

/* ── Drie kernwaarden ── */
.waarden{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.waarde{display:flex; flex-direction:column; background:var(--wit); border:1px solid var(--lijn);
  border-radius:var(--r-l); overflow:hidden; box-shadow:var(--s1);
  transition:transform .3s var(--veer), box-shadow .3s var(--veer), border-color .3s var(--veer);}
.waarde:hover{transform:translateY(-4px); box-shadow:var(--s2); border-color:var(--groen-rand);}
.waarde__beeld{margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2);}
.waarde__beeld img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--veer);}
.waarde:hover .waarde__beeld img{transform:scale(1.045);}
.waarde__lijf{padding:1.35rem 1.4rem 1.5rem;}
.waarde__lijf h3{font-size:1.22rem; margin-bottom:.55rem;}
.waarde__lijf p{margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.6;}

/* ── Citaat ── */
.citaat{margin:0; background:var(--groen-zacht); border:1px solid var(--groen-rand);
  border-radius:var(--r-l); padding:clamp(28px,4vw,48px); text-align:center;}
.citaat p{font-family:var(--kop); font-weight:700; letter-spacing:-.025em; margin:0;
  font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.28; color:var(--ink);}
.citaat footer{margin-top:1rem; font-size:.9rem; font-weight:600; color:var(--groen-diep);}

/* ── Dagritme ── */
.dagritme{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(5,1fr); gap:0; counter-reset:dag;}
.dagstap{position:relative; padding:2.4rem 1.1rem 0; }
/* de lijn die de stappen verbindt */
.dagstap::before{content:''; position:absolute; top:11px; left:0; right:0; height:2px; background:var(--groen-rand);}
.dagstap:first-child::before{left:50%;}
.dagstap:last-child::before{right:50%;}
.dagstap::after{content:''; position:absolute; top:5px; left:calc(50% - 7px); width:14px; height:14px;
  border-radius:50%; background:var(--wit); border:3px solid var(--groen); box-shadow:0 0 0 4px var(--bg);}
.dagstap__tijd{display:block; font-family:var(--mono-of-kop, var(--kop)); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--groen-diep); text-align:center;}
.dagstap__kop{display:block; font-family:var(--kop); font-weight:700; font-size:1.02rem;
  margin:.4rem 0 .35rem; text-align:center; letter-spacing:-.015em;}
.dagstap__tekst{display:block; font-size:.875rem; line-height:1.55; color:var(--ink-2); text-align:center;}

/* ── Arbeidsvoorwaarden ── */
.vwgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem;}
.vw{display:flex; gap:.9rem; align-items:flex-start; background:var(--wit); border:1px solid var(--lijn);
  border-radius:var(--r); padding:1.3rem 1.35rem; box-shadow:var(--s1);
  transition:border-color .3s var(--veer), box-shadow .3s var(--veer), transform .3s var(--veer);}
.vw:hover{border-color:var(--groen-rand); box-shadow:var(--s2); transform:translateY(-3px);}
.vw__ico{flex:none; width:38px; height:38px; border-radius:11px; background:var(--groen-zacht);
  color:var(--groen-diep); display:grid; place-items:center;}
.vw__ico svg{width:19px; height:19px;}
.vw h3{font-size:.98rem; line-height:1.3; margin-bottom:.3rem;}
.vw p{margin:0; font-size:.865rem; line-height:1.5; color:var(--ink-2);}

/* ── Vacaturetegels ── */
.vactegels{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.6rem;}
.vactegel{position:relative; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-l);
  padding:1.6rem 1.7rem 1.5rem; box-shadow:var(--s1);
  transition:border-color .3s var(--veer), box-shadow .3s var(--veer), transform .3s var(--veer);}
.vactegel:hover{transform:translateY(-4px); box-shadow:var(--s2); border-color:var(--groen-rand);}
.vactegel[aria-selected="true"]{border-color:var(--groen-diep); box-shadow:var(--s2);}
.vactegel__streep{display:block; width:34px; height:3px; border-radius:2px; background:var(--groen);
  margin-bottom:1rem; transform-origin:left; transition:transform .3s var(--veer);}
.vactegel:hover .vactegel__streep,
.vactegel[aria-selected="true"] .vactegel__streep{transform:scaleX(1.88);}
.vactegel h3{font-size:1.24rem; line-height:1.25; margin-bottom:.45rem;}
.vactegel > p{margin:0 0 1.1rem; color:var(--ink-2); font-size:.95rem; line-height:1.55;}
.vactegel__meta{list-style:none; margin:0 0 1.15rem; padding:0; display:flex; flex-wrap:wrap; gap:.45rem;}
.vactegel__meta li{font-size:.79rem; font-weight:600; color:#5b6873; background:var(--bg);
  border:1px solid var(--lijn); border-radius:99px; padding:.28rem .7rem;}
.vactegel__lees{display:inline-flex; align-items:center; gap:.42rem; font-size:.9rem;
  font-weight:700; color:var(--groen-diep);}
.vactegel__lees svg{width:16px; height:16px; transition:transform .25s var(--veer);}
.vactegel:hover .vactegel__lees svg{transform:translateX(3px);}
.vactegel:focus-visible{outline:2px solid var(--groen-diep); outline-offset:3px;}

/* ── Vacaturedetail ── */
.vacdetail{display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(22px,3vw,40px);
  background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-l);
  padding:clamp(24px,3.4vw,42px); box-shadow:var(--s1); align-items:start;}
.vacdetail__hoofd h3{font-size:clamp(1.35rem,2.4vw,1.75rem); margin-bottom:.7rem;}
.vacdetail__hoofd h4{font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--groen-diep); margin:1.9rem 0 .8rem;}
.vacdetail__toon{margin:1.7rem 0 0; padding:1.1rem 1.25rem; background:var(--groen-zacht);
  border:1px solid var(--groen-rand); border-radius:var(--r); font-size:.93rem; line-height:1.6;
  color:var(--ink-2);}
.vacdetail__kaart{position:sticky; top:calc(var(--kophoogte, 132px) + 16px); background:var(--bg);
  border:1px solid var(--lijn); border-radius:var(--r); padding:1.4rem 1.5rem 1.5rem;}
.vacdetail__kaart h4{font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:1rem;}
.vacdetail__kaart dl{margin:0 0 1.4rem;}
.vacdetail__kaart dt{font-size:.78rem; color:var(--ink-3); font-weight:600;}
.vacdetail__kaart dd{margin:.1rem 0 .9rem; font-weight:600; font-size:.96rem; color:var(--ink);}
.vacdetail__kaart dd:last-of-type{margin-bottom:0;}
.vacdetail__kaart .k{width:100%; justify-content:center;}
.vacdetail__bel{margin:.9rem 0 0; font-size:.87rem; color:var(--ink-2); text-align:center;}
.vacdetail__bel a{color:var(--groen-diep); font-weight:600;}

/* ── Sollicitatieproces ── */
.solstappen{list-style:none; margin:0 0 2.2rem; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.solstap{display:flex; gap:1rem; align-items:flex-start; background:var(--wit);
  border:1px solid var(--lijn); border-radius:var(--r); padding:1.4rem 1.45rem; box-shadow:var(--s1);}
.solstap__nr{flex:none; width:34px; height:34px; border-radius:50%; background:var(--groen-diep);
  color:#fff; display:grid; place-items:center; font-family:var(--kop); font-weight:800; font-size:1rem;}
.solstap h3{font-size:1.02rem; margin-bottom:.35rem;}
.solstap p{margin:0; font-size:.9rem; line-height:1.55; color:var(--ink-2);}

.twijfel{display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap;
  background:var(--groen-zacht); border:1px solid var(--groen-rand); border-radius:var(--r-l);
  padding:clamp(22px,3vw,34px);}
.twijfel h3{font-size:1.28rem; margin-bottom:.4rem;}
.twijfel p{margin:0; color:var(--ink-2); max-width:56ch; font-size:.95rem; line-height:1.6;}
.twijfel__knoppen{display:flex; gap:.7rem; flex-wrap:wrap; margin:0;}

/* ── Responsief ── */
@media (max-width:1080px){
  .wbhero__in{grid-template-columns:1fr;}
  .wbhero__beeld{order:-1;}
  .waarden{grid-template-columns:1fr;}
  .vwgrid{grid-template-columns:repeat(2,1fr);}
  .vactegels{grid-template-columns:1fr;}
  .vacdetail{grid-template-columns:1fr;}
  .vacdetail__kaart{position:static;}
  .solstappen{grid-template-columns:1fr;}
  /* het dagritme wordt een verticale tijdlijn */
  .dagritme{grid-template-columns:1fr; gap:0;}
  .dagstap{padding:0 0 1.6rem 2.6rem; text-align:left;}
  .dagstap::before{top:0; bottom:0; left:6px; right:auto; width:2px; height:auto;}
  .dagstap:first-child::before{top:8px; left:6px;}
  .dagstap:last-child::before{bottom:auto; height:8px;}
  .dagstap::after{top:2px; left:0;}
  .dagstap__tijd,.dagstap__kop,.dagstap__tekst{text-align:left;}
  .dagstap__kop{margin-top:.15rem;}
}
@media (max-width:620px){
  .vwgrid{grid-template-columns:1fr;}
  .wbhero__punten{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .waarde,.vw,.vactegel,.waarde__beeld img,.vactegel__streep{transition:none;}
  .waarde:hover,.vw:hover,.vactegel:hover{transform:none;}
  .waarde:hover .waarde__beeld img{transform:none;}
}

/* ── Beeld bij 'Waarom onderhoud loont' ── */
.onderhoudbeeld{margin:2.2rem 0 0; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--lijn); box-shadow:var(--s1); background:var(--wit);}
.onderhoudbeeld img{display:block; width:100%; height:auto; aspect-ratio:21/9; object-fit:cover;
  object-position:50% 45%;}
.onderhoudbeeld figcaption{padding:.85rem 1.15rem; font-size:.88rem; color:var(--ink-2);
  border-top:1px solid var(--lijn);}

/* ── DIENSTPAGINA'S ─────────────────────────────────────────────── */
.kruimels{display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--ink-3);
  margin-bottom:1.1rem; flex-wrap:wrap;}
.kruimels a{color:var(--ink-2);} .kruimels a:hover{color:var(--groen-diep);}
.kruimels [aria-current]{color:var(--ink-3);}

.dienstbeeld{margin:0 0 2.4rem; border-radius:var(--r-l); overflow:hidden; border:1px solid var(--lijn);
  box-shadow:var(--s2); max-width:760px;}
.dienstbeeld img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;}

/* ── Dienstpagina ────────────────────────────────────────────────
   Drie registers die er verschillend uitzien, zodat er weer een eerste,
   tweede en derde element te onderscheiden valt:
     .feitband   breed  · foto naast de harde feiten
     .dienstblok smal   · argument en uitleg, 64ch
     .speclijst  breed  · protocol en leveringen, twee kolommen, haarlijnen
   Smal en breed wisselen af; dat is het ritme dat er eerst niet was. */

.sec--dienst{padding-top:0;}

/* De feitenband. Foto en feiten zijn even zwaar: het beeld toont wie er komt,
   de feiten zeggen wat u krijgt. */
.feitband{display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(1.6rem,3.2vw,3.2rem);
  align-items:center; padding-bottom:clamp(2.4rem,4vw,3.6rem);
  border-bottom:1px solid var(--lijn); margin-bottom:clamp(2.4rem,4vw,3.6rem);}
.feitband__beeld{margin:0; border-radius:var(--r-l); overflow:hidden;
  background:var(--bg); box-shadow:var(--s1);}
.feitband__beeld img{width:100%; height:auto; display:block;}
.feiten{margin:0; display:grid;}
.feiten > div{padding:.95rem 0; border-top:1px solid var(--lijn);}
.feiten > div:first-child{border-top:0; padding-top:0;}
.feiten > div:last-child{padding-bottom:0;}
.feiten dt{font-family:var(--kop); font-weight:800; font-size:1.02rem;
  letter-spacing:-.015em; color:var(--ink); margin-bottom:.2rem;}
.feiten dd{margin:0; font-size:.93rem; line-height:1.6; color:var(--ink-2);}

/* De kop staat in een eigen kolom links van de tekst. Zo wordt de breedte
   gebruikt zonder de leesregel onleesbaar lang te maken, en staan alle koppen
   onder elkaar: je leest de pagina in een blik langs de linkerrand. */
.dienstblok{display:grid; grid-template-columns:14rem minmax(0,62ch);
  column-gap:clamp(1.2rem,3.4vw,3.4rem); row-gap:0;
  margin-bottom:1.4rem; align-items:start;}
.dienstblok > *{grid-column:2;}
/* De kop staat in rij 1 van de linkerkolom. Hem over alle rijen laten spannen
   ging mis: het raster maakte dan net zoveel rijen als de span groot was. */
.dienstblok h2{grid-column:1; margin:0;
  font-size:clamp(1.1rem,1.55vw,1.28rem); line-height:1.3; text-wrap:balance;}
.dienstblok--start{margin-top:clamp(2.6rem,4vw,3.8rem);}
.feitband + .dienstblok--start{margin-top:0;}
.dienstblok:last-child{margin-bottom:0;}
.dienstblok p{color:var(--ink-2); line-height:1.7; margin-bottom:1rem;}
.dienstblok p:last-child{margin-bottom:0;}

/* De speclijst is breed en dicht. Twee kolommen op ruime schermen, want dit
   wordt gescand en niet regel voor regel gelezen. */
/* De ruime tussenruimte zit boven een kop en niet onder een lijst: een lijst
   en de alinea eronder horen bij elkaar. */
.speclijst{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  /* begint op dezelfde lijn als de tekst, niet bij de kop */
  column-gap:clamp(1.6rem,3vw,3rem);
  margin:0 0 1.5rem calc(14rem + clamp(1.2rem,3.4vw,3.4rem));
  padding:0; list-style:none;}
.speclijst li{display:grid; grid-template-columns:auto 1fr; gap:.7rem;
  align-items:start; padding:.8rem 0; border-top:1px solid var(--lijn);
  font-size:.955rem; line-height:1.55; color:var(--ink-2);}
.speclijst li svg{width:16px; height:16px; margin-top:.2rem; flex:none;
  color:var(--groen-diep);}
.speclijst b{display:block; color:var(--ink); font-weight:700;}
.speclijst--een{grid-template-columns:1fr;}

/* De slotband en de andere diensten sluiten de pagina, over de volle breedte. */
.dienstslot{display:grid; grid-template-columns:1fr auto; gap:clamp(1.2rem,3vw,2.4rem);
  align-items:center; padding:clamp(1.5rem,3vw,2.2rem) clamp(1.4rem,3vw,2.2rem);
  border-radius:var(--r-l); background:var(--bg); border:1px solid var(--lijn);}
.dienstslot h2{font-size:clamp(1.15rem,2vw,1.45rem); margin-bottom:.4rem;}
.dienstslot p{margin:0; color:var(--ink-2); font-size:.95rem; max-width:52ch;}
.dienstslot__knoppen{display:flex; gap:.7rem; flex-wrap:wrap; margin:0;}

.andersrij{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.4rem,3vw,2.6rem); margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:1.2rem; border-top:1px solid var(--lijn);}
.andersrij__kop{grid-column:1 / -1; font-family:var(--kop); font-weight:800;
  font-size:1.02rem; letter-spacing:-.015em; color:var(--ink); margin-bottom:.5rem;}
.andersrij a{display:block; padding:.85rem 0; border-top:1px solid var(--lijn);
  color:var(--ink); transition:color .16s ease;}
.andersrij a:hover{color:var(--groen-dieper); text-decoration:none;}
.andersrij b{display:block; font-family:var(--kop); font-weight:800;
  font-size:1rem; letter-spacing:-.015em; margin-bottom:.15rem;}
.andersrij span{display:block; font-size:.9rem; line-height:1.5; color:var(--ink-2);}

@media (max-width:1080px){
  .dienstblok{grid-template-columns:1fr;}
  /* ook de kinderen terug naar kolom 1: anders maakt de browser een tweede
     kolom aan die niet bestaat en loopt de tekst buiten het scherm */
  .dienstblok > *{grid-column:1;}
  .dienstblok h2{margin-bottom:.3rem; font-size:clamp(1.3rem,2.3vw,1.6rem);}
  .speclijst{margin-left:0 !important;}
}
@media (max-width:940px){
  .feitband{grid-template-columns:1fr; gap:1.6rem;}
  .speclijst{grid-template-columns:1fr;}
  .andersrij{grid-template-columns:1fr 1fr;}
  .dienstslot{grid-template-columns:1fr;}
}
/* 'Inbedrijfstellingen' past op 390px niet op een regel en brak dan midden in
   het woord af. Kleiner zetten lost dat op zonder afbreekstreepje. */
@media (max-width:430px){
  .paginakop h1{font-size:clamp(1.7rem,7.4vw,2.1rem);}
}
@media (max-width:620px){
  .andersrij{grid-template-columns:1fr;}
  .dienstslot__knoppen .k{width:100%; justify-content:center;}
}

/* ── Juridische pagina: rustig, leesbaar, lange regels vermijden ── */
/* Inhoudsopgave op lange tekstpagina's. Dertien koppen zonder navigatie is
   acht schermen scrollen om te vinden hoe lang iets bewaard blijft. */
.inhoud{margin:0 0 2.6rem; padding:1.2rem 1.3rem; border-radius:var(--r-m);
  background:var(--bg); border:1px solid var(--lijn);}
.inhoud__kop{margin:0 0 .7rem; font-family:var(--kop); font-weight:800; font-size:.95rem;
  letter-spacing:-.01em; color:var(--ink);}
.inhoud__lijst{margin:0; padding:0; list-style:none; counter-reset:hfd;
  display:grid; gap:.1rem; grid-template-columns:repeat(2,1fr);}
.inhoud__lijst li{counter-increment:hfd;}
.inhoud__lijst a{display:block; padding:.4rem .5rem .4rem 2rem; position:relative;
  border-radius:var(--r-s); font-size:.925rem; color:var(--ink-2); line-height:1.45;}
.inhoud__lijst a::before{content:counter(hfd,decimal-leading-zero); position:absolute;
  left:.5rem; font-size:.75rem; font-weight:700; color:var(--groen-diep);
  font-variant-numeric:tabular-nums; top:.5rem;}
.inhoud__lijst a:hover{background:var(--wit); color:var(--groen-dieper); text-decoration:none;}
@media (max-width:640px){ .inhoud__lijst{grid-template-columns:1fr;} }

/* 58ch levert circa 68 werkelijke tekens per regel; 1ch is de breedte van
   het cijfer 0 en dus breder dan een gemiddelde letter. */
.juridisch{max-width:58ch}
.juridisch h2{font-size:clamp(1.2rem,2.2vw,1.5rem); margin:2.6rem 0 .8rem;}
.juridisch h2:first-of-type{margin-top:0;}
.juridisch h3{font-size:1.02rem; margin:1.7rem 0 .5rem; color:var(--ink);}
.juridisch p{margin-bottom:1rem; color:var(--ink-2); line-height:1.72;}
.juridisch p b{color:var(--ink);}
/* Kader met een samenvatting. De AVG vraagt om een "beknopte, transparante en
   gemakkelijk toegankelijke vorm"; daarom staat de samenvatting bovenaan de
   privacyverklaring visueel apart. Er was wel een klasse maar geen opmaak. */
.let{margin:0 0 2.2rem; padding:1.15rem 1.3rem; border-radius:var(--r-m);
  background:var(--bg); border:1px solid var(--lijn);}
.let p{margin:0; color:var(--ink-2); line-height:1.7;}
.let p + p{margin-top:.8rem;}
.let.tip{background:var(--groen-zacht); border-color:var(--groen-rand);}
.let.tip p{color:var(--ink);}
.juridisch .let{max-width:none; margin-bottom:2rem;}
.juridisch .tabelrand{margin-bottom:1.6rem;}
.juridisch .kant__lijst{gap:.55rem; margin-bottom:1.2rem;}
.geglijst{list-style:none; margin:0 0 1.2rem; padding:1rem 1.2rem; display:grid; gap:.3rem;
  background:var(--bg); border:1px solid var(--lijn); border-radius:var(--r); font-size:.95rem;
  color:var(--ink-2);}
.geglijst b{color:var(--ink);}
.vinkje{flex:none; width:15px; height:15px; margin-top:.2rem; border-radius:50%;
  background:var(--groen-zacht); border:1px solid var(--groen-rand); display:inline-block;}

/* ── DIENSTENTEGELS ─────────────────────────────────────────────────
   Zes tegels,drie kolommen. Eén boodschap per tegel.
   Hover raakt alleen kleur,schaduw en beeldschaal — nooit de hoogte,zodat er in het raster niets verspringt. */
.tegels{display:grid; gap:1.15rem; grid-template-columns:repeat(3,1fr);}
/* Zes tegels onder elkaar maakt de startpagina bijna dertien schermen lang.
   Op mobiel tonen we de drie kernproposities en de rest op verzoek. */
.tegelsmeer{display:none; margin-top:1.3rem; text-align:center;}
@media (max-width:760px){
  .tegelsmeer{display:block;}
  /* Zichtbaar blijven de drie kernproposities: afleversets (1),
     stadsverwarming (2) en inbedrijfstellingen (4). De overige drie komen
     achter de knop. */
  .tegels .tegel:nth-child(3),
  .tegels .tegel:nth-child(n+5){display:none;}
  .tegels.tegels--alles .tegel{display:block;}
}
@media (max-width:1040px){
.tegels{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){
.tegels{grid-template-columns:1fr;} }
.tegel{position:relative; display:flex; flex-direction:column; background:var(--wit);
  border:1px solid var(--lijn); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--s1);
  transition:transform .3s var(--veer), box-shadow .3s var(--veer), border-color .3s var(--veer);}
.tegel:hover,.tegel:focus-within{transform:translateY(-5px); box-shadow:var(--s3); border-color:var(--groen-rand);}
.tegel__beeld{position:relative; margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2);}
.tegel__beeld img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--veer);}
.tegel:hover .tegel__beeld img{transform:scale(1.045);}
/* verloop onderlangs zodat het insigne op elke foto leesbaar blijft */
.tegel__beeld::after{content:''; position:absolute; inset:auto 0 0 0; height:55%;
  background:linear-gradient(to top, rgba(27,42,53,.40), rgba(27,42,53,0)); pointer-events:none;}
.tegel__ico{position:absolute; left:14px; bottom:14px; z-index:1; width:44px; height:44px;
  display:grid; place-items:center; background:var(--wit); border-radius:12px;
  box-shadow:0 2px 10px rgba(27,42,53,.18); color:var(--groen-diep);}
.tegel__ico svg{width:21px; height:21px;}
.tegel__ico{transition:background .28s var(--veer), color .28s var(--veer);}
.tegel:hover .tegel__ico{background:var(--groen-diep); color:#fff;}
.tegel__lijf{display:flex; flex-direction:column; flex:1; padding:1.3rem 1.35rem 1.4rem;}
.tegel__lijf h3{font-family:var(--kop); font-weight:700; font-size:1.14rem; letter-spacing:-.02em;
  line-height:1.25; margin:0; color:var(--ink);}
/* accentstreep groeit bij hover — de enige beweging binnen de tegel */
.tegel__streep{display:block; width:32px; height:3px; border-radius:2px; margin:.65rem 0 .8rem;
  background:var(--groen); transform-origin:left; transition:transform .3s var(--veer);}
.tegel:hover .tegel__streep{transform:scaleX(1.94);}
.tegel__lijf > p{margin:0 0 1.15rem; color:var(--ink-2); font-size:.93rem; line-height:1.58;}
.tegel__punten{list-style:none; margin:0 0 1.15rem; padding:0; display:grid; gap:.45rem;}
.tegel__punten li{display:flex; gap:.55rem; align-items:flex-start;
  font-size:.85rem; line-height:1.45; color:#5b6873;}
.tegel__punten svg{flex:none; width:15px; height:15px; margin-top:.13rem; color:var(--groen-diep);}
.tegel__link{margin-top:auto; padding-top:1rem; border-top:1px solid var(--lijn); display:inline-flex; align-items:center; gap:.42rem;
  font-family:var(--tekst); font-size:.875rem; font-weight:600; color:var(--groen-diep);
  text-decoration:none; border-radius:var(--r-s);}
.tegel__link::after{content:''; position:absolute; inset:0;}
/* hele tegel klikbaar */
.tegel__link svg{width:16px; height:16px; transition:transform .25s var(--veer);}
.tegel:hover .tegel__link svg{transform:translateX(3px);}
.tegel__link:focus-visible{outline:2px solid var(--groen-diep); outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
.tegel,.tegel__beeld img,.tegel__streep,.tegel__link svg{transition:none;}
.tegel:hover{transform:none;}
.tegel:hover .tegel__beeld img{transform:none;}
}
/* ── Schakelrij onder het schema: navigatie{position:relative; height:80px; margin-top:.5rem;}
/* de markering zit in de tekening zelf{fill:transparent; stroke:transparent; stroke-width:2; pointer-events:none;
  transition:fill .22s ease, stroke .22s ease;}
.zvlak.aan{fill:var(--groen-diep); stroke:none;}
#z0.aan,#z1.aan{fill:rgba(111,125,136,.10); stroke:#8b96a0;}
/* ============================================================
   5. VERTROUWENSBAND
   ============================================================ */
.band{background:var(--ink); color:#fff;}
.band__in{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px);
  padding-block:clamp(26px,3vw,40px);}
/* let op: alleen verticaal,anders vervalt de paginamarge */
.band__cel b{display:block; font-family:var(--kop); font-weight:800; font-size:clamp(1.3rem,2vw,1.75rem); letter-spacing:-.02em; color:#fff;}
.band__cel span{display:block; font-size:.92rem; color:#b9c6cf; margin-top:.25rem;}
.band__cel--plaats b{color:#b9c6cf; font-size:1.05rem; font-weight:700;}
/* ============================================================
   6. DIENSTEN-VERKENNER
   ============================================================ */
.verk{display:grid; grid-template-columns:minmax(260px,.85fr) 1.15fr; gap:clamp(20px,3vw,40px); align-items:start;}
/* Twee gelijke kolommen. Als klasse en niet als inline stijl, anders kan de
   mediaquery hieronder hem niet meer terugzetten naar één kolom. */
.verk--twee{grid-template-columns:1fr 1fr;}
.verk__knop svg.ico{width:20px; height:20px; flex:none; color:var(--groen-diep);}
@keyframes zacht{from{opacity:.55; transform:translateY(6px);} to{opacity:1; transform:none;}}
/* ============================================================
   7. TWEE KANTEN
   ============================================================ */
.kanten{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; border:1px solid var(--lijn);
  border-radius:var(--r-l); overflow:hidden; background:var(--wit); box-shadow:var(--s1);}
.kant{padding:clamp(24px,3vw,40px);}
.kant h3{font-size:1.35rem; margin-bottom:.6rem;}
.kant p{color:var(--ink-2); margin:0;}
.kant__lijst{margin-top:1.1rem; display:grid; gap:.5rem;}
.kant__lijst li{display:flex; gap:.55rem; font-size:.96rem; color:var(--ink-2);}
.kant__lijst svg{width:17px; height:17px; color:var(--groen-diep); flex:none; margin-top:.26rem;}
.kanten__as{width:1px; background:var(--lijn); position:relative;}
.kanten__as span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--groen-diep); color:#fff;
  font-family:var(--kop); font-weight:700; font-size:.72rem; letter-spacing:.05em; padding:.4rem .6rem; border-radius:99px; white-space:nowrap;}
.teamfoto{border-radius:var(--r-l); overflow:hidden; box-shadow:var(--s2); margin-bottom:clamp(28px,3.5vw,44px);}
.teamfoto img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;}
/* ============================================================
   9. TABEL CONTRACTVORMEN
   ============================================================ */
.tabelrand{min-width:0; border:1px solid var(--lijn); border-radius:var(--r-l); overflow:auto; background:var(--wit); box-shadow:var(--s1);}
table{width:100%; border-collapse:collapse; min-width:660px;}
th,td{text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--lijn); font-size:.97rem;}
thead th{font-family:var(--kop); font-weight:700; font-size:.86rem; color:var(--ink); background:var(--bg);}
tbody tr:last-child td{border-bottom:0;}
tbody tr{transition:background .16s ease;}
tbody tr:hover{background:var(--bg);}
td b{font-family:var(--kop); font-weight:700; letter-spacing:-.01em;}
.ja{color:var(--groen-diep); font-weight:600;}
.nee{color:var(--ink-3);}
/* ============================================================
   10. UITLEG-HOVER (vakterm)
   ============================================================ */
.term{border-bottom:1px dotted var(--groen-diep); cursor:help; position:relative; color:inherit; font-weight:600;}
.term__bel{position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  width:min(20rem,72vw); background:var(--ink); color:#fff; padding:.75rem .9rem; border-radius:var(--r-s); font-size:.87rem;
  font-weight:400; line-height:1.5; box-shadow:var(--s3); opacity:0; visibility:hidden;
  transition:opacity .18s ease, transform .24s var(--veer), visibility .18s; z-index:60;}
.term__bel::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--ink);}
.term:hover .term__bel,.term:focus-visible .term__bel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
/* ============================================================
   11. LOGO-PLAATSHOUDERS
   ============================================================ */
.logos{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.noot{display:inline-flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--ink-2); background:var(--bg);
  border:1px solid var(--lijn); border-radius:99px; padding:.5rem .95rem;}
.noot svg{width:15px; height:15px; color:var(--alarm); flex:none;}
/* ============================================================
   12. CONTACT
   ============================================================ */
.contact{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(26px,4vw,54px); align-items:start;}
.gegevens{display:grid; gap:.7rem;}
.geg{display:flex; gap:.9rem; align-items:center; padding:1rem 1.1rem; border:1px solid var(--lijn); border-radius:var(--r);
  background:var(--wit); transition:border-color .2s ease, box-shadow .2s ease;}
.geg:hover{border-color:var(--groen-rand); box-shadow:var(--s1);}
.geg__ico{width:42px; height:42px; border-radius:var(--r-s); background:var(--groen-zacht); color:var(--groen-diep);
  display:grid; place-items:center; flex:none;}
.geg__ico svg{width:20px; height:20px;}
.geg dt{font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); font-weight:600;}
.geg dd{margin:0; font-size:1.08rem; font-weight:600;}
.geg a{color:var(--ink); display:inline-block; min-height:24px; line-height:24px;}   /* losstaande contactregel: aantikbaar op mobiel */
.geg a:hover{color:var(--groen-diep);}
.form{background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-l); padding:clamp(22px,3vw,34px); box-shadow:var(--s2);}
.veld{margin-bottom:1rem;}
.veld label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem;}
.veld input,.veld select,.veld textarea{width:100%; font-family:var(--tekst); font-size:1rem; padding:.85rem .95rem;
  border:1px solid var(--lijn-2); border-radius:var(--r-s); background:var(--wit); color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease;}
.veld input:hover,.veld select:hover,.veld textarea:hover{border-color:var(--ink-3);}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none; border-color:var(--groen-diep); box-shadow:0 0 0 3px rgba(60,122,31,.15);}
.veld textarea{min-height:120px; resize:vertical;}
.veld input:user-invalid,.veld textarea:user-invalid,.veld select:user-invalid{border-color:var(--alarm);}
.veld input:user-invalid ~ .fout,.veld textarea:user-invalid ~ .fout,.veld select:user-invalid ~ .fout{display:block;}
.fout{display:none; margin-top:.3rem; font-size:.85rem; color:var(--alarm);}
.r2{display:grid; grid-template-columns:1fr 1fr; gap:.9rem;}
/* Huisnummer en postcode zijn kort; die horen ook op een telefoon naast
   elkaar, anders kost een adres vier volle regels. */
.r2--kort{grid-template-columns:1fr 1.3fr;}
.r3{display:grid; grid-template-columns:2fr 1fr 1fr; gap:.9rem;}
.val{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.mislukt{display:none; gap:.6rem; align-items:flex-start; background:var(--alarm-zacht);
  border:1px solid var(--alarm-rand); color:var(--alarm); padding:.95rem 1.1rem;
  border-radius:var(--r-s); font-weight:600; font-size:.93rem; margin-bottom:1rem; line-height:1.5;}
.mislukt svg{width:19px; height:19px; flex:none; margin-top:.15rem;}
.mislukt a{color:var(--alarm); text-decoration:underline;}
.gelukt{display:none; gap:.6rem; align-items:flex-start; background:var(--groen-zacht); border:1px solid var(--groen-rand);
  color:var(--groen-diep); padding:.95rem 1.1rem; border-radius:var(--r-s); font-weight:600; margin-bottom:1rem;}
.gelukt svg{width:19px; height:19px; flex:none; margin-top:.15rem;}
.mini{font-size:.85rem; color:var(--ink-3); margin:.8rem 0 0;}
/* ============================================================
   13. VOET
   ============================================================ */
.voet{background:var(--ink); color:#b9c6cf; padding:clamp(48px,6vw,76px) 0 1.8rem;}
.voet__raster{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:clamp(24px,4vw,48px); margin-bottom:2.4rem;}
.voet img{height:40px; width:auto; margin-bottom:1rem;}
.voet p{font-size:.95rem; max-width:34ch; color:#b9c6cf;}
.voet h4{color:#fff; font-size:.9rem; margin-bottom:.85rem;}
.voet a{color:#b9c6cf; display:block; padding:.28rem 0; font-size:.95rem;}
.voet a:hover{color:#fff; text-decoration:none;}
.voet__onder{border-top:1px solid rgba(255,255,255,.14); padding-top:1.4rem; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:.7rem; font-size:.86rem; color:#9aa9b4;}
.laag.open{display:flex;}
@keyframes opkomst{from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;}}
.spoed{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--groen-zacht);
  border:1px solid var(--groen-rand); border-radius:var(--r); padding:.95rem 1.15rem; margin-bottom:1rem;}
.spoed span{font-size:.93rem; color:var(--ink-2);}
.spoed a{font-family:var(--kop); font-weight:800; font-size:1.32rem; color:var(--ink);}
.attentie{background:var(--alarm-zacht); border:1px solid var(--alarm-rand); border-radius:var(--r); padding:.85rem 1.05rem;
  font-size:.93rem; margin-bottom:1.3rem;}
/* ============================================================
   15. WEERGAVEN
   ============================================================ */
.weergave{display:block;}
.weergave.actief{display:block;}
.paginakop{padding:clamp(46px,5.5vw,84px) 0 clamp(24px,3vw,40px);
  background:radial-gradient(60% 100% at 85% 0%, var(--groen-zacht), transparent 65%), var(--wit);}
/* De inleiding staat groter, dus 62ch zou breder uitvallen dan het leesblok
   eronder. 58ch komt op dezelfde kolombreedte uit. */
.paginakop p{margin-top:1rem; color:var(--ink-2); font-size:1.14rem; max-width:58ch;}
/* ============================================================
   16. RESPONSIEF
   ============================================================ */
@media (max-width:1080px){
  .verk,.verk--twee,.contact,.hero__grid{grid-template-columns:1fr;}
  .band__in{grid-template-columns:repeat(2,1fr);}
  .voet__raster{grid-template-columns:1fr 1fr;}
  .tel{display:none;}
}
@media (max-width:860px){
.nav,.tel{display:none;}
.burger{display:flex;}
.nav.mobiel{display:flex; position:fixed; top:var(--balk); left:0; right:0; bottom:0; flex-direction:column;
    align-items:stretch; background:var(--wit); padding:1rem; gap:.2rem; overflow:auto; z-index:190;}
.nav.mobiel .nav__item{position:static;}
.nav.mobiel .nav__knop,.nav.mobiel a.nav__link{width:100%; justify-content:space-between; padding:.95rem 1rem; font-size:1.05rem;}
.nav.mobiel .mega{position:static; transform:none; width:100%; box-shadow:none; border:0; padding:0 0 .6rem;
    opacity:1; visibility:visible; display:none;}
.nav.mobiel .nav__item.open .mega{display:block; transform:none;}
.nav.mobiel .mega__grid{grid-template-columns:1fr;}
.hero__beeld img{aspect-ratio:3/2;}
.kanten{grid-template-columns:1fr;}
.kanten__as{width:auto; height:auto; display:flex; justify-content:center; align-items:center; padding:.5rem 0; background:var(--bg);}
.kanten__as span{position:static; transform:none;}
.r2,.r3{grid-template-columns:1fr;}
.r2.r2--kort{grid-template-columns:1fr 1.3fr;}
.logos{grid-template-columns:repeat(2,1fr);}
.voet__raster{grid-template-columns:1fr;}
.band__in{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}