:root{--navy:#0c1d2e;--navy2:#123043;--blauw:#0f8a5f;--blauw2:#0b7350;--licht:#7ee2b8;--lijn:#e3e8f0;--grijs:#475569;--bg:#f4f8f6;--goud:#f0b429}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:#16202f;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--blauw)}img{max-width:100%}
.in{max-width:1120px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;background:#fff;padding:8px;z-index:9}
.kop{background:var(--navy);color:#fff;position:sticky;top:0;z-index:5}
.kop .in{display:flex;align-items:center;gap:12px;min-height:66px;flex-wrap:wrap}
.merk{color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;margin-right:auto;min-height:44px}
.merk svg{flex:none}@media (max-width:1240px){.kop .merk svg{height:32px;width:auto}}@media (max-width:560px){.kop .merk svg{height:30px;width:auto}}
.hnav{display:flex;gap:4px;flex-wrap:wrap}
.hnav a{color:#c9ded6;text-decoration:none;font-weight:600;font-size:.94rem;padding:10px 12px;border-radius:9px;min-height:44px;display:inline-flex;align-items:center}
.hnav a:hover,.hnav a[aria-current=page]{background:rgba(255,255,255,.1);color:#fff}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 20px;font-weight:700;text-decoration:none;min-height:48px;border:0;cursor:pointer;font:inherit;font-weight:700}
.knop.blauw{background:var(--blauw);color:#fff!important}.knop.blauw:hover{background:var(--blauw2)}
.knop.wa{background:#0e7a40;color:#fff!important}
.knop.rand{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.knop.klein{padding:9px 15px;min-height:44px;font-size:.92rem}
.kruim{background:var(--bg);font-size:.88rem;padding:10px 0;color:var(--grijs)}
.kruim a{color:var(--grijs)}.kruim .in{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.held{background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;padding:44px 0 56px}
.held .in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:start}
.held h1{font-size:clamp(1.8rem,4.6vw,2.9rem);line-height:1.12;margin:0 0 14px;letter-spacing:-.02em}
.held p.lead{color:#c9ded6;font-size:1.1rem;margin:0 0 20px}
.usps{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:8px}
.usps li{display:flex;gap:10px;align-items:flex-start}.usps svg{color:var(--licht);flex:none;margin-top:3px}
.acties{display:flex;flex-wrap:wrap;gap:10px}
.kaart{background:#fff;color:#16202f;border-radius:18px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.kaart h2{margin:0 0 4px;font-size:1.3rem}.kaart p.sub{margin:0 0 10px;color:var(--grijs);font-size:.93rem}
.kaart label{display:block;font-weight:700;font-size:.85rem;margin:12px 0 5px}
.kaart input,.kaart select,.kaart textarea{width:100%;padding:12px 13px;border:1px solid #d3dae5;border-radius:10px;font:inherit;min-height:48px;background:#fff;color:inherit}
.kaart textarea{min-height:90px;resize:vertical}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kaart button{width:100%;margin-top:16px}
.melding{margin:12px 0 0;font-weight:600}
.klaar{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:12px;padding:16px}
.blok{padding:56px 0}.blok.grijs{background:var(--bg)}.blok.smal .in{max-width:820px}
.blok h2{font-size:clamp(1.45rem,3.2vw,2rem);margin:0 0 8px;letter-spacing:-.01em}
.blok h3{font-size:1.15rem;margin:26px 0 6px}
.blok p.intro{color:var(--grijs);margin:0 0 26px;max-width:720px}
.stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stap{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:20px}
.stap b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blauw);color:#fff;margin-bottom:10px}
.stap h3{margin:0 0 6px;font-size:1.05rem}.stap p{margin:0;color:var(--grijs);font-size:.95rem}
.diensten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dienst{display:block;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:16px;text-decoration:none;color:inherit}
.dienst:hover{border-color:var(--blauw)}
.dienst h3{margin:0 0 4px;font-size:1rem;color:var(--navy)}.dienst p{margin:0 0 8px;color:var(--grijs);font-size:.9rem}
.dienst span{font-weight:700;color:var(--blauw);font-size:.9rem}
/* BELKNOP-OVERAL-20260920: elke regiokaart heeft een zichtbare belactie. Vóór deze datum stond er bij
   acht steden een leeg <small></small> — geen nummer, geen knop, dus geen manier om te bellen. */
.regios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.regiokaart{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;height:100%}
.regiokaart:hover{border-color:var(--blauw)}
.regiokaart .naam{font-weight:800;color:var(--navy);text-decoration:none;font-size:1.02rem;min-height:44px;display:flex;align-items:center}
.regiokaart .plaatsen{color:var(--grijs);font-size:.86rem;margin:-6px 0 0}
.plaatslijst{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 18px}
.plaatslijst a{text-decoration:none}.plaatslijst a:hover{text-decoration:underline}
.plaatslijst li{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;border:1px solid var(--lijn);border-radius:10px;font-weight:600;color:var(--navy);font-size:.95rem}
.plaatslijst li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--blauw);flex:none}
.regiokaart .acties{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.regiokaart .knop{flex:1 1 auto}
.regiokaart .landelijk{font-size:.8rem;color:var(--grijs)}
.partner{background:var(--navy);color:#fff;border-radius:20px;padding:30px;display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:20px;align-items:center}
.partner h2{color:#fff}.partner p{color:#c9ded6;margin:0}
.faq details{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer;color:var(--navy);min-height:44px;display:flex;align-items:center}
.faq p{margin:10px 0 0;color:var(--grijs)}
/* TIKDOEL-44-20260920 — gemeten met domeinbouw/layout-audit.mjs: op een telefoon waren de merknaam,
   de uitklapvragen en de 'naar de inhoud'-link 26-29px hoog. Onder 44px mist een duim het doel. */
@media (pointer:coarse),(max-width:700px){.skip:focus{min-height:44px;display:inline-flex;align-items:center}
a[href^="tel:"]:not(.knop),a[href^="mailto:"]:not(.knop){display:inline-flex;align-items:center;min-height:44px}
/* KRUIMEL-TIKDOEL-20260920 — layout-audit.mjs mat de kruimel-link "Home" op 40x23px bij 320 en 390px. */
.kruim a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}.kruim{padding:4px 0}
.kb h3 a,.kb .lees a{display:inline-flex;align-items:center;min-height:44px}}
.voet{background:var(--navy);color:#c9ded6;padding:34px 0 90px;font-size:.93rem}
.voet a{color:#fff}@media (pointer:coarse),(max-width:700px){.voet a{display:inline-flex;align-items:center;min-height:44px}
/* korte voetlinks ("Tools") waren 36px breed — een duim mist dat */
.voetnav a{min-width:44px;justify-content:center}}
.voet .in{display:grid;gap:8px}.voetnav{display:flex;gap:14px;flex-wrap:wrap}
.belbalk{position:fixed;left:0;right:0;bottom:0;display:none;gap:8px;padding:10px 12px;background:#fff;box-shadow:0 -6px 20px rgba(12,29,46,.12);z-index:6}
.belbalk .knop{flex:1}
/* kennisbank + tools */
.kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kb article{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:18px;display:flex;flex-direction:column}
.kb h3{margin:0 0 6px;font-size:1.04rem}.kb h3 a{color:var(--navy);text-decoration:none}
.kb p{margin:0 0 12px;color:var(--grijs);font-size:.93rem}
.kb .lees{margin-top:auto;font-weight:700;font-size:.92rem}
.thema{border-left:3px solid var(--blauw);padding-left:12px;margin:34px 0 14px}
.thema h3{margin:0;font-size:1.2rem}.thema p{margin:4px 0 0;color:var(--grijs);font-size:.94rem}
.tool{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:22px;margin-bottom:18px}
.tool label{display:block;font-weight:700;font-size:.9rem;margin:14px 0 6px}
.tool select,.tool input{width:100%;padding:12px 13px;border:1px solid #d3dae5;border-radius:10px;font:inherit;min-height:48px;background:#fff}
.uitkomst{margin-top:18px;background:var(--bg);border:1px solid var(--lijn);border-radius:12px;padding:16px}
.uitkomst b{color:var(--navy)}.uitkomst .groot{font-size:1.5rem;font-weight:800;color:var(--navy);display:block;margin:4px 0}
table.prijs{width:100%;border-collapse:collapse;margin:14px 0}
table.prijs th,table.prijs td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--lijn);font-size:.95rem}
table.prijs th{color:var(--grijs);font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
table.prijs td:last-child{text-align:right;font-weight:700;color:var(--navy);white-space:nowrap}
.staafjes{display:flex;align-items:flex-end;gap:5px;height:120px;margin:16px 0 6px}
.staafjes div{flex:1;background:var(--blauw);border-radius:4px 4px 0 0;min-height:3px;position:relative}
.staaflabels{display:flex;gap:5px;font-size:.78rem;color:var(--grijs)}
.staaflabels span{flex:1;text-align:center}
.cijferrij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.cijfer{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:16px}
.cijfer b{display:block;font-size:1.7rem;color:var(--navy);line-height:1.1}
.cijfer span{color:var(--grijs);font-size:.86rem}
.bron{font-size:.85rem;color:var(--grijs);margin-top:10px}
.lijst{padding-left:18px;color:var(--grijs)}.lijst li{margin-bottom:7px}
@media (max-width:900px){.held .in{grid-template-columns:1fr}.diensten{grid-template-columns:repeat(2,minmax(0,1fr))}
.regios,.kb{grid-template-columns:repeat(2,minmax(0,1fr))}.stappen{grid-template-columns:1fr}.partner{grid-template-columns:1fr}
.cijferrij{grid-template-columns:1fr}}
/* KOP-OP-TELEFOON-20260920 — gemeten: de kop was 256px hoog op 320px en 208px op 390px, doordat de zeven
   menu-items afbraken over 2-3 regels. En hij is sticky, dus dat bleef staan: 30% van het scherm, plus de
   vaste belbalk onderaan. Nu: één rij die zijwaarts schuift, en niet meer plakkend op een telefoon. */
@media (max-width:900px){
 .kop{position:static}
 .hnav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%}
 .hnav::-webkit-scrollbar{display:none}
 .hnav a{white-space:nowrap;flex:0 0 auto}
 .kop .in{flex-wrap:nowrap;gap:8px}
}
/* CHATBEL-OVER-WHATSAPP-20260920 — de chatbel (z-index 2147483000) lag over de WhatsApp-knop in de vaste
   belbalk: 58x40px overlap, en een tik kwam bij de chat terecht in plaats van bij WhatsApp. De belbalk
   verhogen helpt niet (de chat staat hoger dan elke z-index die wij kunnen zetten), dus zetten we de bel
   erboven. */
@media (max-width:560px){#sb-fab,.sb-fab{bottom:86px!important}}
@media (max-width:560px){.rij{grid-template-columns:1fr}.diensten,.regios,.kb{grid-template-columns:1fr}
.kop .knop.rand span{display:none}/* 🪤 het label gaat hier weg; de link houdt zijn naam via aria-label (KNOP-HOUDT-NAAM-20260920) */.belbalk{display:flex}.held{padding:30px 0 40px}.hnav a{font-size:.9rem;padding:10px}}

/* VOET-HERONTWERP-20260928 */
.voet{padding:0!important;background:linear-gradient(180deg,#0c1d2e 0%,#08141f 100%);font-size:.95rem}
.voet a{color:#d6ebe2;text-decoration:none}.voet a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.voet .in.voet-rooster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;padding-top:56px;padding-bottom:40px}
.voet-merk p{color:#a9c7bb;line-height:1.65;margin:14px 0 20px;max-width:36ch}
.voet-merk .merk{display:inline-flex}
.voet .knop.voet-bel{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
.voet .knop.voet-bel:hover{text-decoration:none;filter:brightness(1.08)}
.voet-kop{color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;margin:6px 0 14px}
.voet-kolom{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.voet-kolom a{display:inline-flex;align-items:center;gap:9px}
.voet-kolom svg,.voet-bel svg{width:17px;height:17px;flex:none}
.voet-meer{color:var(--licht)!important;font-weight:700}
.voet-open{display:inline-flex;align-items:center;gap:8px;color:#a9c7bb}
.voet-open::before{content:"";width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}
.voet-onder{border-top:1px solid rgba(255,255,255,.09)}
.voet-onder .in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:18px;padding-bottom:22px;color:#8fb0a3;font-size:.85rem}
.voet-onder .in{padding-right:230px}   /* ruimte voor de chatknop rechtsonder */
@media (max-width:900px){.voet .in.voet-rooster{grid-template-columns:1fr 1fr;gap:32px 24px}.voet-merk{grid-column:1/-1}}
@media (max-width:560px){.voet .in.voet-rooster{grid-template-columns:1fr;gap:26px;padding-top:40px;padding-bottom:20px}
 .voet-kolom{gap:0}.voet-kolom a{min-height:44px}.voet-onder .in{padding-bottom:100px;padding-right:76px}}
/* CHATKNOP-20260928 — de gedeelde widget (slimbot sb-site-chat.js) tekent een blauwe bol met emoji die over de voet
   en naast de belbalk lag. Per site overschreven: pil met icoon en label; op mobiel compact BOVEN de belbalk. */
html body #sb-fab{width:auto!important;height:52px!important;padding:0 20px 0 16px!important;gap:10px;border-radius:999px!important;
 font-size:0!important;background:linear-gradient(135deg,#0f8a5f,#0b7350)!important;border:2px solid rgba(255,255,255,.22)!important;
 box-shadow:0 12px 28px rgba(12,29,46,.35)!important;right:24px!important;bottom:24px!important;transition:transform .15s,box-shadow .15s}
html body #sb-fab:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(12,29,46,.42)!important}
html body #sb-fab>*{display:none!important}   /* eigen icoon+label via ::before/::after; de widget-inhoud (emoji of svg+label) verbergen */
html body #sb-fab::before{content:"";width:22px;height:22px;background:#fff;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01'/%3E%3C/svg%3E") center/contain no-repeat}
html body #sb-fab::after{content:"Stel een vraag";color:#fff;font-size:15px;font-weight:700;font-family:inherit;letter-spacing:.01em}
@media (max-width:560px){html body #sb-fab{bottom:84px!important;right:14px!important;width:52px!important;padding:0!important;justify-content:center}
 html body #sb-fab::after{display:none}}

/* HERO-FOTO-20260928 — eigenaar: "achtergronden foto's geven, veel beter". Per paginatype een sfeerfoto uit de eigen
   beeldbank onder een blauw verloop (tekst blijft leesbaar); mobiel een lichtere 800px-versie. */
.held{position:relative;background:linear-gradient(100deg,rgba(8,24,30,.9) 0%,rgba(12,29,46,.7) 38%,rgba(12,70,58,.28) 70%,rgba(12,70,58,.12) 100%),var(--held-foto,none) center/cover no-repeat,var(--navy)!important}
.held--home,.held--kennis,.held--tools{--held-foto:url(/assets/held-home.webp)}
.held--dienst{--held-foto:url(/assets/held-dienst.webp)}
.held--regio{--held-foto:url(/assets/held-regio.webp)}
.held--contact{--held-foto:url(/assets/held-contact.webp)}
.held h1{text-shadow:0 2px 18px rgba(0,0,0,.45)}.held p.lead,.held li{text-shadow:0 1px 10px rgba(0,0,0,.4)}
@media (max-width:700px){.held{background:linear-gradient(180deg,rgba(8,24,30,.72) 0%,rgba(12,29,46,.86) 55%,rgba(12,29,46,.94) 100%),var(--held-foto,none) center/cover no-repeat,var(--navy)!important}
 .held--home,.held--kennis,.held--tools{--held-foto:url(/assets/held-home-800.webp)}.held--dienst{--held-foto:url(/assets/held-dienst-800.webp)}
 .held--regio{--held-foto:url(/assets/held-regio-800.webp)}.held--contact{--held-foto:url(/assets/held-contact-800.webp)}}
/* KOP-EEN-RIJ-20260928 — tussen 901 en 1240px sprong het menu naar een 2e rij door het bredere logo */
.kop .knop.rand{white-space:nowrap}@media (max-width:900px){.hnav{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);padding-right:18px}}@media (min-width:561px) and (max-width:1240px){.kop .knop.rand span{display:none}.kop .knop.rand{padding-left:13px;padding-right:13px;flex:none}}
@media (min-width:901px) and (max-width:1240px){
 .hnav{gap:0}.hnav a{padding:10px 9px;font-size:.9rem}}
/* HAMBURGER-20260930 — eigenaar: "vreemde scroll in het menu" op de telefoon. Onder 900px was het menu één rij
   die zijwaarts schoof (KOP-OP-TELEFOON-20260920) met een vervaagde rand: niemand ziet dat er meer items zijn.
   Nu: een hamburgerknop die het menu als paneel onder de kop uitklapt. Staat onderaan zodat hij de oudere
   schuifregels (overflow-x, mask, nowrap) overschrijft. */
.menuknop{display:none}
@media (max-width:900px){
 .kop .in{position:relative}
 .menuknop{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:#fff;cursor:pointer;padding:0}
 .menuknop span,.menuknop span::before,.menuknop span::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s,background .2s}
 .menuknop span::before,.menuknop span::after{content:"";position:absolute;left:0}
 .menuknop span::before{top:-7px}.menuknop span::after{top:7px}
 .kop.open .menuknop span{background:transparent}
 .kop.open .menuknop span::before{transform:translateY(7px) rotate(45deg)}.kop.open .menuknop span::after{transform:translateY(-7px) rotate(-45deg)}
 .hnav{display:none!important;position:absolute;left:0;right:0;top:100%;flex-direction:column;flex-wrap:nowrap;gap:2px;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;
  padding:8px 16px 16px!important;background:var(--navy);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 14px 28px rgba(0,0,0,.28);z-index:7}
 .kop.open .hnav{display:flex!important}
 .hnav a{font-size:1rem!important;padding:12px 14px!important;white-space:normal;flex:none}
}

/* ONTWERP-MC-20260930 — zie portaal_ontwerp.py. Staat als laatste in groep.css zodat hij de oudere regels wint;
   mediaregels voor .held/.blok staan hier ook in een media query, anders overschrijft de basisregel de mobiele. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/inter-latin.woff2) format("woff2")}
:root{--amber:#f5a524;--amber2:#ffb53d;--inkt:#0c1d2e;--canvas:#f4f8f6;--tint:#eaf7f1;--ease:cubic-bezier(.2,.7,.2,1);
 --sh1:0 1px 2px rgba(12,29,46,.06),0 1px 3px rgba(12,29,46,.08);--sh2:0 2px 4px rgba(12,29,46,.04),0 10px 28px rgba(12,29,46,.10);
 --sh3:0 4px 8px rgba(12,29,46,.06),0 28px 56px rgba(6,14,32,.30)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--inkt);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:800;letter-spacing:-.025em}
.blok h2{font-size:clamp(1.65rem,3.4vw,2.4rem);color:var(--navy);line-height:1.14}
.blok.grijs{background:var(--canvas)}
@media (min-width:701px){.blok{padding:88px 0}}
.held h1{font-weight:900;font-size:clamp(2.05rem,5vw,3.35rem);line-height:1.06;letter-spacing:-.035em}
.held h1 em{font-style:normal;color:var(--goud)}
.held p.lead{font-size:1.13rem;line-height:1.6;color:#d3e8df}
@media (min-width:561px){.held{padding:68px 0 80px}}
.pil{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 11px;border-radius:999px;background:rgba(255,255,255,.1);
 border:1px solid rgba(255,255,255,.2);font-size:.84rem;font-weight:600;color:#e3f3ec;margin:0 0 18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pil i{width:8px;height:8px;border-radius:50%;background:#34d399;animation:puls 2.2s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
/* hero komt binnen: alleen beweging op de h1 (LCP), de rest ook zacht in */
@keyframes op{from{opacity:.01;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes schuif{from{transform:translateY(12px)}to{transform:none}}
.held .pil,.held p.lead,.held .usps,.held .acties{animation:op .7s var(--ease) both}
.held h1{animation:schuif .7s var(--ease) both}
.held p.lead{animation-delay:.08s}.held .usps{animation-delay:.16s}.held .acties{animation-delay:.24s}
.held .kaart{animation:op .8s .12s var(--ease) both}
/* formulierkaart */
.kaart{border-radius:22px;padding:26px;box-shadow:var(--sh3)}
.kaart h2{font-weight:800;color:var(--navy);letter-spacing:-.02em}
.kaart input,.kaart select,.kaart textarea{background:#f8fafd;border-color:#d8e1ee;transition:border-color .15s,box-shadow .15s,background .15s}
.kaart input:focus,.kaart select:focus,.kaart textarea:focus{outline:0;background:#fff;border-color:var(--blauw);box-shadow:0 0 0 4px rgba(15,138,95,.15)}
.kaart button.knop,.knop.goud{background:var(--amber);color:#1c1300!important;box-shadow:0 10px 22px rgba(245,165,36,.32)}
.kaart button.knop:hover,.knop.goud:hover{background:var(--amber2)}
.knop{transition:transform .18s var(--ease),box-shadow .18s,background .18s,filter .18s}
.knop:hover{transform:translateY(-1px)}.knop:active{transform:none}
.knop.blauw{box-shadow:0 10px 22px rgba(15,138,95,.28)}
/* vertrouwensband */
.band{background:linear-gradient(90deg,#0c2a3a,#0f5a47);color:#e3f3ec;border-top:1px solid rgba(255,255,255,.08)}
.band ul{list-style:none;margin:0 auto;padding:18px 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1120px}
.band li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:.93rem;line-height:1.35}
.band li+li{border-left:1px solid rgba(255,255,255,.12);padding-left:16px}
.band svg{width:38px;height:38px;padding:9px;border-radius:11px;background:rgba(255,255,255,.1);flex:none;color:#fff}
@media (max-width:900px){.band ul{grid-template-columns:1fr 1fr;gap:14px 16px}.band li+li{border-left:0;padding-left:0}}
@media (max-width:380px){.band li{font-size:.86rem}.band svg{width:34px;height:34px;padding:8px}}
/* sectiekop met oog-label */
.skop{text-align:center;max-width:720px;margin:0 auto 44px}.skop.links{text-align:left;margin-left:0}
.oog{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blauw);margin:0 0 10px}
.oog::before{content:"";width:22px;height:2px;background:var(--goud);border-radius:2px}
.blok .skop p.intro{margin:12px auto 0;font-size:1.06rem;max-width:620px}.skop.links p.intro{margin-left:0}
/* stappen op een verbindingslijn */
.stappen{position:relative;gap:28px}
.stappen::before{content:"";position:absolute;top:20px;left:16.6%;right:16.6%;height:2px;background:linear-gradient(90deg,var(--navy),var(--blauw) 60%,var(--goud))}
.stappen .stap{border:0;background:transparent;padding:0;text-align:center;position:relative}
.stappen .stap b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;margin:0 auto 20px;position:relative;z-index:1;box-shadow:0 0 0 7px var(--canvas)}
.blok:not(.grijs) .stappen .stap b{box-shadow:0 0 0 7px #fff}
.stappen .stap:last-child b{background:var(--goud);color:var(--navy)}
.stap-beeld{background:#fff;border:1px solid var(--lijn);border-radius:18px;box-shadow:var(--sh1);padding:18px;margin-bottom:18px;display:grid;place-items:center;transition:transform .25s var(--ease),box-shadow .25s}
.stap:hover .stap-beeld{transform:translateY(-3px);box-shadow:var(--sh2)}
.stap-beeld svg{width:100%;max-width:230px;height:auto;display:block}
.stappen .stap h3{font-size:1.14rem;color:var(--navy);margin:0 0 6px}.stappen .stap p{max-width:34ch;margin:0 auto}
.golf{animation:golf 1.8s ease-in-out infinite}@keyframes golf{50%{opacity:.25}}
@media (max-width:900px){
 .stappen{grid-template-columns:1fr;gap:26px}
 .stappen::before{left:19px;right:auto;top:20px;bottom:20px;width:2px;height:auto;background:linear-gradient(180deg,var(--navy),var(--blauw) 60%,var(--goud))}
 .stappen .stap{text-align:left;padding-left:62px}.stappen .stap b{position:absolute;left:0;top:0;margin:0}
 .stappen .stap p{margin:0}.stap-beeld{padding:14px}}
/* kaarten: diensten, regio's, kennisbank */
.diensten{gap:16px}
.dienst{border-radius:16px;padding:20px;box-shadow:var(--sh1);display:flex;flex-direction:column;transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.dienst:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#b9e3d1}
.dienst .ico{width:46px;height:46px;border-radius:13px;background:var(--tint);color:var(--blauw);display:grid;place-items:center;margin-bottom:14px;transition:background .22s,color .22s}
.dienst:hover .ico{background:var(--blauw);color:#fff}
.dienst .ico svg{width:24px;height:24px}
.dienst h3{font-size:1.04rem;font-weight:800;margin-bottom:6px}.dienst span{margin-top:auto}
.dienst span::after{content:" →";transition:margin .2s}.dienst:hover span::after{margin-left:4px}
.regiokaart,.kb article,.cijfer,.tool{border-radius:16px;box-shadow:var(--sh1);transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.regiokaart:hover,.kb article:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#b9e3d1}
/* vragen */
.faq-duo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq-duo .skop{margin:0;position:sticky;top:90px}
.faq details{border-radius:14px;box-shadow:var(--sh1);padding:0;transition:box-shadow .2s,border-color .2s}
.faq details[open]{box-shadow:var(--sh2);border-color:#b9e3d1}
.faq summary{list-style:none;padding:14px 18px;justify-content:space-between;gap:16px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--blauw);display:grid;place-items:center;font-weight:800;font-size:1.1rem;transition:background .2s,color .2s}
.faq details[open] summary::after{content:"–";background:var(--goud);color:var(--navy)}
.faq details p{padding:0 18px 16px;margin:0}
@media (max-width:900px){.faq-duo{grid-template-columns:1fr;gap:24px}.faq-duo .skop{position:static}}
/* slotbanner */
.slot-cta{background:radial-gradient(900px 380px at 85% -10%,rgba(126,226,184,.28),transparent 60%),linear-gradient(160deg,#0c1d2e 0%,#0f5a47 100%);color:#fff;text-align:center;padding:88px 0}
.slot-cta svg.embleem{width:56px;height:56px;margin:0 auto 14px;display:block}
.slot-cta h2{color:#fff;font-size:clamp(1.9rem,4.2vw,2.8rem);margin:0 auto 12px;max-width:20ch;line-height:1.1}
.slot-cta p{color:#c9ded6;max-width:560px;margin:0 auto 26px;font-size:1.06rem}
.slot-cta .acties{justify-content:center}
.slot-cta .punten{list-style:none;display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;padding:0;margin:24px 0 0;color:#a9c7bb;font-size:.9rem}
.slot-cta .punten li{display:inline-flex;align-items:center;gap:7px}.slot-cta .punten svg{width:17px;height:17px;color:var(--goud)}
@media (max-width:700px){.slot-cta{padding:60px 0}}
/* onthullen bij scrollen — alleen met werkende observer (zie ONTHUL_JS) */
html.rv-js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.rv-js .rv.is-in{opacity:1;transform:none}
html.rv-js .rv-d1{transition-delay:.1s}html.rv-js .rv-d2{transition-delay:.2s}
html.rv-nu .rv{transition:none!important;opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important}html.rv-js .rv{opacity:1;transform:none;transition:none}}
@media print{.rv{opacity:1!important;transform:none!important}}
.voet-kolom a{min-width:44px}   /* layout-audit: "Tools" in de voet was 39px breed */

/* GIDS-GROEP-20260930 — gidspagina's van slotenmakersgroep.nl */
.gids-kop{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.gids-inhoud h2{font-size:clamp(1.3rem,2.6vw,1.6rem);margin:38px 0 10px;scroll-margin-top:90px}
.gids-inhoud h2:first-child{margin-top:0}
.gids-inhoud p,.gids-inhoud li{font-size:1.04rem;line-height:1.7}
.gids-inhoud ul,.gids-inhoud ol{padding-left:20px}.gids-inhoud li{margin-bottom:8px}
.stappenlijst{list-style:none;counter-reset:st;padding-left:0!important}
.stappenlijst li{counter-increment:st;position:relative;padding-left:46px;margin-bottom:14px}
.stappenlijst li::before{content:counter(st);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:.9rem;display:grid;place-items:center}
.let-op,.tip{border-radius:14px;padding:16px 18px;margin:16px 0;font-size:1rem;line-height:1.6}
.let-op{background:#fff4f2;border:1px solid #fecdc6;border-left:4px solid #dc2626}
.tip{background:var(--tint);border:1px solid #cdeadd;border-left:4px solid var(--goud)}
.gids-zij{position:sticky;top:90px;display:grid;gap:14px}
.gids-zij .blokje{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:18px;box-shadow:var(--sh1)}
.gids-zij b.kopje{display:block;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);margin-bottom:10px}
.gids-zij ol{margin:0;padding-left:18px}.gids-zij li{margin-bottom:6px;font-size:.94rem}
.gids-zij a{text-decoration:none}.gids-zij a:hover{text-decoration:underline}
.gids-zij .knop{width:100%;margin-top:8px}
.gidsen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:0}
.gidskaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:20px;text-decoration:none;color:inherit;box-shadow:var(--sh1);height:100%;transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.gidskaart:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#b9e3d1}
.gidskaart small{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blauw)}
.gidskaart b{display:block;font-size:1.06rem;color:var(--navy);margin:8px 0 6px;line-height:1.3}
.gidskaart span{color:var(--grijs);font-size:.92rem;line-height:1.5}
.gidskaart em{margin-top:auto;padding-top:12px;font-style:normal;font-weight:700;color:var(--blauw);font-size:.92rem}
@media (max-width:1000px){.gidsen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.gids-kop{grid-template-columns:1fr;gap:28px}.gids-zij{position:static}}
@media (max-width:560px){.gidsen{grid-template-columns:1fr}}
.gemeenten th:not(:first-child),.gemeenten td:not(:first-child){text-align:right}.gemeenten td:not(:first-child){white-space:nowrap}.gemeenten th{text-transform:none;letter-spacing:0;line-height:1.3}
.gemeenten td{vertical-align:top}.gemeenten small{font-weight:400}
@media (max-width:560px){.gemeenten th,.gemeenten td{font-size:.86rem;padding:9px 6px}}

/* SLOTKLAAR-20260930 — eigen merk */
.zoek-gemeente{display:flex;gap:10px;max-width:560px;margin:0 auto}
.zoek-gemeente input{flex:1;min-height:52px;padding:12px 16px;border:1px solid #cfe3d9;border-radius:999px;font:inherit;background:#fff}
.zoek-gemeente input:focus{outline:0;border-color:var(--blauw);box-shadow:0 0 0 4px rgba(15,138,95,.15)}
.gem-lijst{columns:4 180px;column-gap:24px;list-style:none;padding:0;margin:24px 0 0}
.gem-lijst li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--lijn);display:flex;justify-content:space-between;gap:8px;font-size:.95rem}
.gem-lijst a{text-decoration:none;font-weight:600;color:var(--navy);display:inline-flex;align-items:center;min-height:40px}.gem-lijst a:hover{text-decoration:underline}
.gem-lijst small{color:var(--grijs);white-space:nowrap}
.opvallend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:18px 0 0}
.opvallend li{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:16px;box-shadow:var(--sh1);font-size:.97rem}
.opvallend b{display:block;color:var(--navy);font-size:1.05rem;margin-bottom:4px}
@media (max-width:900px){.opvallend{grid-template-columns:1fr}}

/* LOGO-GEANIMEERD-20260930 → LOGO-BUS-SLOT-20260930 — zie logo_svg(); alleen transform/opacity/dashoffset */
.lg{overflow:visible}
.lg *{transform-box:view-box}
.lg .lg-bus{animation:lg-rij 1s cubic-bezier(.22,1,.36,1) .1s both}
.lg .lg-wiel{animation:lg-wiel 1s cubic-bezier(.22,1,.36,1) .1s both}
.lg .lg-snel path{stroke-dasharray:4;animation:lg-snel 1s ease-out .1s both}
.lg .lg-gat{transform-origin:15.6px 21px;animation:lg-gat .6s cubic-bezier(.34,1.56,.64,1) .9s both}
.lg .lg-badge{transform-origin:32.2px 8.6px;animation:lg-pop .55s cubic-bezier(.34,1.56,.64,1) 1.05s both}
.lg .lg-vink{stroke-dasharray:1;animation:lg-vink .4s ease-out 1.4s both}
.lg .lg-ring{transform-origin:20px 20px;animation:lg-ring 1.2s ease-out 1.4s both}
.lg .lg-glans{animation:lg-glans 9s ease-in-out 1.8s infinite}
.merk:hover .lg .lg-bus,.merk:focus-visible .lg .lg-bus{animation:lg-hobbel .6s ease-in-out}
.merk:hover .lg .lg-wiel{animation:lg-wiel2 .6s linear}
@keyframes lg-rij{0%{transform:translateX(-12px);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
@keyframes lg-wiel{0%{transform:rotate(-360deg)}100%{transform:none}}
@keyframes lg-wiel2{to{transform:rotate(360deg)}}
@keyframes lg-snel{0%{stroke-dashoffset:4;opacity:0}40%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes lg-gat{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
@keyframes lg-pop{0%{transform:scale(0)}100%{transform:none}}
@keyframes lg-vink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lg-ring{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.45)}}
@keyframes lg-hobbel{0%,100%{transform:none}30%{transform:translateY(-1.2px)}60%{transform:translateY(.4px)}}
@keyframes lg-glans{0%,8%{opacity:1;transform:skewX(-18deg) translateX(0)}22%,100%{opacity:1;transform:skewX(-18deg) translateX(290px)}}
@media (prefers-reduced-motion:reduce){.lg *{animation:none!important}}
/* BEWEGING-20260930 — hero met zacht bewegend licht, stippen die drijven, gloed op kaarten */
.held{overflow:hidden;isolation:isolate}
.held::after{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
 background:radial-gradient(34% 40% at 20% 30%,rgba(52,211,153,.45),transparent 70%),radial-gradient(30% 36% at 80% 70%,rgba(245,196,81,.30),transparent 70%),
 radial-gradient(26% 30% at 60% 15%,rgba(16,185,129,.35),transparent 70%);animation:aurora 18s ease-in-out infinite alternate}
.held .in{position:relative;z-index:1}
@keyframes aurora{0%{transform:translate3d(-4%,-2%,0) rotate(0)}50%{transform:translate3d(4%,3%,0) rotate(8deg)}100%{transform:translate3d(-2%,5%,0) rotate(-6deg)}}
.blok.grijs{background-image:radial-gradient(rgba(15,138,95,.10) 1.2px,transparent 1.3px);background-size:24px 24px}   /* stil: een bewegende achtergrond hertekent elk frame het hele vlak (accu op mobiel) */
.dienst,.regiokaart,.kb article,.gidskaart{position:relative}
.dienst::before,.kb article::before,.regiokaart::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
 background:linear-gradient(135deg,#34d399,#f5c451,#10b981);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.dienst:hover::before,.kb article:hover::before,.regiokaart:hover::before{opacity:1}
.dienst:hover .ico{animation:wip .5s ease}
@keyframes wip{30%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(8deg)}100%{transform:none}}
.kaart button.knop{position:relative;overflow:hidden}
.kaart button.knop::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
 transform:skewX(-20deg);animation:knopglans 5s ease-in-out 2s infinite}
@keyframes knopglans{0%,70%{left:-60%}100%{left:130%}}
.band li svg{animation:bandpuls 4s ease-in-out infinite}.band li:nth-child(2) svg{animation-delay:1s}.band li:nth-child(3) svg{animation-delay:2s}.band li:nth-child(4) svg{animation-delay:3s}
@keyframes bandpuls{0%,100%{box-shadow:0 0 0 0 rgba(126,226,184,0)}50%{box-shadow:0 0 0 6px rgba(126,226,184,.12)}}
.slot-cta{background-size:200% 200%;animation:ctaverloop 14s ease-in-out infinite alternate;position:relative;overflow:hidden}
@keyframes ctaverloop{from{background-position:0% 0%}to{background-position:100% 100%}}
.slot-cta svg.embleem{animation:zweef 5s ease-in-out infinite;filter:drop-shadow(0 12px 24px rgba(16,185,129,.45))}
@keyframes zweef{50%{transform:translateY(-8px) rotate(-3deg)}}
.oog::before{transition:width .6s var(--ease)}.skop.rv:not(.is-in) .oog::before{width:0}
html.rv-js .staafjes.rv div{transform-origin:bottom;transition:transform .9s var(--ease)}
html.rv-js .staafjes.rv:not(.is-in) div{transform:scaleY(0)}
.staafjes.rv div:nth-child(2){transition-delay:.04s}.staafjes.rv div:nth-child(3){transition-delay:.08s}.staafjes.rv div:nth-child(4){transition-delay:.12s}
.staafjes.rv div:nth-child(5){transition-delay:.16s}.staafjes.rv div:nth-child(6){transition-delay:.2s}.staafjes.rv div:nth-child(7){transition-delay:.24s}
.staafjes.rv div:nth-child(8){transition-delay:.28s}.staafjes.rv div:nth-child(9){transition-delay:.32s}.staafjes.rv div:nth-child(10){transition-delay:.36s}
.staafjes.rv div:nth-child(11){transition-delay:.4s}.staafjes.rv div:nth-child(12){transition-delay:.44s}
.staafjes div{background:linear-gradient(180deg,#34d399,#0f8a5f)}
#voortgang{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:60;
 background:linear-gradient(90deg,#34d399,#f5c451);pointer-events:none}
/* KOP-PAST-20260930 — logo (200px) + 7 menu-items + belknop passen niet in de .in van 1120px: belknop viel eronder (ook op 1440+) */
@media (min-width:901px){.hnav{gap:0}.hnav a{padding:10px 9px;font-size:.9rem}.kop .knop.rand span{display:none}.kop .knop.rand{padding-left:13px;padding-right:13px;flex:none}}
.gem-lijst a{min-width:44px}
.plaatslijst li{overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.held::after,.slot-cta,.slot-cta svg.embleem,.band li svg,.kaart button.knop::after{animation:none!important}#voortgang{display:none}}

/* SLOTKLAAR-ZIJMENU-20260930 — mobiel menu als geanimeerde zijbalk (zie domeinbouw/slotklaar_menu.py) */
.hnav-cta,.hnav-dek{display:none}
@media (max-width:900px){
 .kop{z-index:80}
 .hnav{display:flex!important;position:fixed!important;top:var(--kop-b,64px);right:0;bottom:0;left:auto!important;
  width:min(86vw,360px);flex-direction:column;gap:4px;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))!important;
  background:linear-gradient(165deg,#123043 0%,#0c1d2e 62%,#0a2a22 100%);border-top:0;border-left:1px solid rgba(126,226,184,.14);
  box-shadow:-24px 0 60px rgba(0,0,0,.45);overflow-y:auto!important;overscroll-behavior:contain;z-index:79;
  transform:translateX(104%);visibility:hidden;transition:transform .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s}
 .kop.open .hnav{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.22,1,.36,1),visibility 0s}
 .hnav a{position:relative;display:flex!important;align-items:center;justify-content:space-between;gap:12px;
  min-height:54px;padding:14px 16px!important;border-radius:14px;font-size:1.06rem!important;font-weight:650;color:#e6eef7;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
 .hnav a::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);opacity:.55;transition:transform .2s,opacity .2s}
 .hnav a:hover,.hnav a:focus-visible{background:rgba(126,226,184,.1);border-color:rgba(126,226,184,.28);color:#fff}
 .hnav a:hover::after,.hnav a:focus-visible::after{transform:translateX(3px) rotate(-45deg);opacity:1}
 .hnav a[aria-current=page]{background:linear-gradient(90deg,rgba(15,138,95,.32),rgba(15,138,95,.08));border-color:rgba(126,226,184,.35);color:#fff}
 .hnav a[aria-current=page]::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#7ee2b8}
 .kop.open .hnav a,.kop.open .hnav-cta{animation:skm-in .5s cubic-bezier(.22,1,.36,1) both}
 .kop.open .hnav a:nth-child(1){animation-delay:.06s}.kop.open .hnav a:nth-child(2){animation-delay:.1s}
 .kop.open .hnav a:nth-child(3){animation-delay:.14s}.kop.open .hnav a:nth-child(4){animation-delay:.18s}
 .kop.open .hnav a:nth-child(5){animation-delay:.22s}.kop.open .hnav a:nth-child(6){animation-delay:.26s}
 .kop.open .hnav a:nth-child(7){animation-delay:.3s}.kop.open .hnav a:nth-child(8){animation-delay:.34s}
 .kop.open .hnav-cta{animation-delay:.38s}
 .hnav-cta{display:grid;gap:10px;margin-top:auto;padding-top:18px}
 .hnav .hnav-cta a{justify-content:center;gap:10px;min-height:56px;border-radius:999px;font-weight:800;font-size:1.05rem!important;border:0}
 .hnav .hnav-cta a::after,.hnav .hnav-cta a::before{display:none}
 .hnav .hnav-cta .skm-bel{background:linear-gradient(135deg,#f0b429,#f5a524);color:#0c1d2e;box-shadow:0 10px 26px rgba(240,180,41,.3)}
 .hnav .hnav-cta .skm-wa{background:#128c56;color:#fff}
 .hnav .hnav-cta svg{width:20px;height:20px;flex:none}
 .hnav-cta small{display:flex;align-items:center;justify-content:center;gap:8px;color:#9fb4c9;font-size:.86rem}
 .hnav-cta small i{width:8px;height:8px;border-radius:50%;background:#7ee2b8;box-shadow:0 0 0 0 rgba(126,226,184,.6);animation:skm-puls 2s infinite}
 .hnav-dek{display:block;position:fixed;inset:0;top:var(--kop-b,64px);z-index:78;background:rgba(6,14,24,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
 html.skm-open .hnav-dek{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
 html.skm-open,html.skm-open body{overflow:hidden}
 /* de chatknop (#sb-fab, Slimbot) en de belbalk onderin zweefden over de knoppen in de zijbalk; die heeft ze zelf */
 #sb-fab,.belbalk{transition:opacity .25s,transform .25s}
 html.skm-open #sb-fab,html.skm-open .belbalk{opacity:0!important;transform:scale(.85);pointer-events:none}
 .kop.open .menuknop{background:rgba(126,226,184,.12);border-color:rgba(126,226,184,.4)}
 .menuknop span,.menuknop span::before,.menuknop span::after{transition:transform .35s cubic-bezier(.22,1,.36,1),background .2s}
 .kop.open .menuknop span::before{transform:translateY(7px) rotate(135deg)}.kop.open .menuknop span::after{transform:translateY(-7px) rotate(45deg)}
}
@keyframes skm-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes skm-puls{0%{box-shadow:0 0 0 0 rgba(126,226,184,.6)}70%{box-shadow:0 0 0 8px rgba(126,226,184,0)}100%{box-shadow:0 0 0 0 rgba(126,226,184,0)}}
@media (prefers-reduced-motion:reduce){
 .hnav,.kop.open .hnav,.hnav-dek,html.skm-open .hnav-dek{transition:none!important}
 .kop.open .hnav a,.kop.open .hnav-cta,.hnav-cta small i{animation:none!important}
}

/* SLOTKLAAR-EXTRA-20260930 — stappen bewegen, kaart van Nederland, PDOK-adres (zie domeinbouw/slotklaar_extra.py) */
/* 1. stappen */
@supports selector(:has(a)){
 .rv-js .stappen::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.4s cubic-bezier(.22,1,.36,1) .25s}
 .rv-js .stappen:has(.stap.is-in)::before{transform:scaleX(1)}
}
.rv-js .stappen .stap b{transform:scale(.4);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.rv-js .stappen .stap.is-in b{transform:none;opacity:1}
.rv-js .stappen .stap.rv-d1 b{transition-delay:.45s}.rv-js .stappen .stap.rv-d2 b{transition-delay:.9s}
.stappen .stap.is-in b::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--blauw);opacity:0;animation:skx-ring 1.6s ease-out .7s 2}
.stappen .stap.rv-d1.is-in b::after{animation-delay:1.15s}.stappen .stap.rv-d2.is-in b::after{animation-delay:1.6s;border-color:var(--goud)}
.stappen .stap.is-in .stap-beeld svg{animation:skx-zweef 5s ease-in-out 1.2s infinite}
.stappen .stap.rv-d1.is-in .stap-beeld svg{animation-delay:1.8s}.stappen .stap.rv-d2.is-in .stap-beeld svg{animation-delay:2.4s}
.stappen .stap .golf{transform-box:fill-box;transform-origin:left center;animation:skx-golf 1.8s ease-in-out infinite}
.stappen .stap{transition:transform .3s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.stappen .stap:hover{transform:translateY(-4px)}}
@keyframes skx-ring{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(1.7)}}
@keyframes skx-zweef{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes skx-golf{0%,100%{opacity:.35;transform:scaleX(.85)}50%{opacity:1;transform:none}}

/* 2. kaart */
.skx-kaart-blok{background:linear-gradient(180deg,#0c1d2e 0%,#0f2a3a 100%);color:#e6eef7;overflow:hidden;position:relative}
.skx-kaart-blok .oog{color:#7ee2b8}.skx-kaart-blok h2{color:#fff}.skx-kaart-blok .intro{color:#b9c9da}
.skx-kaart{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:26px}
.skx-svg{width:100%;height:auto;max-height:640px;display:block;overflow:visible}
.skx-svg .p path{fill:#15384c;stroke:#2f6a74;stroke-width:.9;stroke-linejoin:round;transition:fill .25s,stroke .25s}
.skx-svg .p{cursor:pointer;outline:none}
.skx-svg .p:hover path,.skx-svg .p:focus-visible path{fill:#1b5a52;stroke:#7ee2b8}
.skx-svg .p.aan path{fill:#0f8a5f;stroke:#b8f5d9}
.skx-svg .dot{fill:#7ee2b8;opacity:.55}
.skx-svg .p.aan~.dots .dot{opacity:.35}
.skx-svg .dot.in-aan{fill:#f0b429;opacity:1}
.skx-svg .lbl{font:700 9px/1 Inter,system-ui,sans-serif;fill:#dbe8f3;pointer-events:none;paint-order:stroke;stroke:#0c1d2e;stroke-width:2.4px}
.skx-paneel{background:rgba(255,255,255,.04);border:1px solid rgba(126,226,184,.18);border-radius:20px;padding:20px;min-height:300px}
.skx-zoek{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:4px 6px 4px 16px;margin-bottom:16px}
.skx-zoek input{flex:1;border:0;outline:0;font:inherit;min-height:44px;background:transparent;color:#0c1d2e}
.skx-zoek svg{width:18px;height:18px;color:#0f8a5f;flex:none}
.skx-lijst h3{margin:0 0 4px;color:#fff;font-size:1.25rem}.skx-lijst .n{color:#9fb4c9;font-size:.9rem;margin:0 0 12px}
.skx-lijst ul{list-style:none;margin:0;padding:0;columns:2 150px;column-gap:14px;max-height:360px;overflow:auto;overscroll-behavior:contain}
.skx-lijst li{break-inside:avoid}
.skx-lijst a{display:flex;align-items:center;min-height:40px;color:#dbe8f3;text-decoration:none;font-weight:600;font-size:.95rem;border-radius:8px;padding:0 8px}
.skx-lijst a:hover,.skx-lijst a:focus-visible{background:rgba(126,226,184,.12);color:#fff}
.skx-leeg{color:#9fb4c9}
.skx-js .skx-lijst{display:none}.skx-js .skx-lijst.aan{display:block;animation:skx-in .45s cubic-bezier(.22,1,.36,1)}
.skx-js .skx-lijst.aan li{animation:skx-in .4s cubic-bezier(.22,1,.36,1) both}
.skx-start{display:none}.skx-js .skx-start{display:block}
.skx-start p{color:#b9c9da;margin:0 0 12px}.skx-chips{display:flex;flex-wrap:wrap;gap:8px}
.skx-chips button{font:600 .9rem/1 inherit;font-family:inherit;color:#dbe8f3;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 14px;cursor:pointer;min-height:40px}
.skx-chips button:hover,.skx-chips button:focus-visible{background:#0f8a5f;border-color:#7ee2b8;color:#fff}
/* binnenkomen */
.skx-js .skx-svg .p{opacity:0;transform:translateY(14px) scale(.97);transform-box:fill-box;transform-origin:center}
.skx-js .skx-svg .dot{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.skx-js .skx-kaart.zien .p{opacity:1;transform:none;transition:opacity .7s,transform .8s cubic-bezier(.22,1,.36,1)}
.skx-js .skx-kaart.zien .dot{opacity:.55;transform:none;transition:opacity .5s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.skx-js .skx-kaart.zien .dot.twk{animation:skx-twk 3.2s ease-in-out infinite}
@keyframes skx-twk{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes skx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:900px){.skx-kaart{grid-template-columns:1fr}.skx-svg{max-height:460px}.skx-lijst ul{max-height:none}}

/* 3. PDOK-adres */
.skx-ac{position:relative}
.skx-ac ul{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--lijn);
 border-radius:14px;box-shadow:0 18px 40px rgba(12,29,46,.18);max-height:280px;overflow:auto;animation:skx-in .2s ease-out}
.skx-ac li{padding:11px 12px;border-radius:9px;cursor:pointer;font-size:.95rem;color:#0c1d2e;display:flex;gap:10px;align-items:center}
.skx-ac li small{margin-left:auto;color:#6b7c8f;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.skx-ac li[aria-selected=true],.skx-ac li:hover{background:#eaf7f1}
.skx-ac li b{font-weight:700}
.skx-ac .bron{font-size:.72rem;color:#8a98a8;padding:6px 12px 2px;cursor:default}
.skx-ac .bron:hover{background:none}

@media (prefers-reduced-motion:reduce){
 .rv-js .stappen::before,.rv-js .stappen .stap b{transition:none!important;transform:none!important;opacity:1!important}
 .stappen .stap b::after,.stappen .stap .stap-beeld svg,.stappen .stap .golf,.skx-js .skx-kaart.zien .dot.twk,.skx-js .skx-lijst.aan,.skx-js .skx-lijst.aan li,.skx-ac ul{animation:none!important}
 .skx-js .skx-svg .p,.skx-js .skx-svg .dot{opacity:1!important;transform:none!important;transition:none!important}
 .skx-js .skx-svg .dot{opacity:.55!important}
}

/* SLOTKLAAR-STAPSCENES-20260930 — de drie illustraties als korte, herhalende scène (zie slotklaar_extra.py) */
.blok.grijs:has(.stappen){position:relative;overflow:hidden;background:radial-gradient(1200px 500px at 50% -10%,#eaf7f1 0%,#f4f8f6 55%,#eef4f9 100%)}
.blok.grijs:has(.stappen)::before,.blok.grijs:has(.stappen)::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
 filter:blur(60px);opacity:.55;animation:sx-blob 22s ease-in-out infinite alternate}
.blok.grijs:has(.stappen)::before{background:#c9f0dd;left:-160px;top:-120px}
.blok.grijs:has(.stappen)::after{background:#ffe3a3;right:-180px;bottom:-200px;animation-delay:-11s;opacity:.4}
.blok.grijs:has(.stappen)>.in{position:relative;z-index:1}
@keyframes sx-blob{from{transform:translate(0,0) scale(1)}to{transform:translate(80px,40px) scale(1.12)}}
.stap-beeld.sx-b{padding:10px;border-radius:22px;background:linear-gradient(160deg,#ffffff 0%,#f3faf6 100%);border:1px solid #dcebe3;
 box-shadow:0 18px 40px -18px rgba(12,29,46,.35),0 2px 6px rgba(12,29,46,.06);overflow:hidden;aspect-ratio:16/10}
.stap-beeld.sx-b svg{max-width:none;width:100%;height:100%;animation:none!important}
.sx *{transform-box:fill-box}
/* scène 1 */
.sx-speel .sx1 .sx-tel{transform-origin:center;animation:sx-ring 6s ease-in-out infinite}
.sx-speel .sx1 .sx-g1,.sx-speel .sx1 .sx-g2{transform-origin:left center;animation:sx-golf1 6s ease-out infinite}
.sx-speel .sx1 .sx-g2{animation-name:sx-golf2}
.sx-speel .sx1 .sx-f{transform-origin:left center;animation:sx-typ1 6s steps(8,end) infinite}
.sx-speel .sx1 .sx-f2{animation-name:sx-typ2}.sx-speel .sx1 .sx-f3{animation-name:sx-typ3}
.sx-speel .sx1 .sx-knop{transform-origin:center;animation:sx-druk 6s ease-in-out infinite}
.sx1 .sx-vlieg{opacity:0}
.sx-speel .sx1 .sx-vlieg{animation:sx-vlieg 6s ease-in infinite}
@keyframes sx-ring{0%,4%{transform:none}6%,14%,22%{transform:rotate(-9deg)}10%,18%,26%{transform:rotate(9deg)}30%,100%{transform:none}}
@keyframes sx-golf1{0%,4%{opacity:0;transform:scale(.6)}10%{opacity:1;transform:none}28%{opacity:1}34%,100%{opacity:0;transform:scale(1.15)}}
@keyframes sx-golf2{0%,8%{opacity:0;transform:scale(.6)}14%{opacity:1;transform:none}28%{opacity:1}36%,100%{opacity:0;transform:scale(1.15)}}
@keyframes sx-typ1{0%,32%{transform:scaleX(0)}42%,100%{transform:scaleX(1)}}
@keyframes sx-typ2{0%,42%{transform:scaleX(0)}52%,100%{transform:scaleX(1)}}
@keyframes sx-typ3{0%,52%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
@keyframes sx-druk{0%,64%{transform:none}67%{transform:scale(.86)}71%,100%{transform:none}}
@keyframes sx-vlieg{0%,68%{opacity:0;transform:none}72%{opacity:1;transform:none}90%{opacity:0;transform:translate(36px,-60px) rotate(-12deg) scale(.7)}100%{opacity:0}}
/* scène 2 */
.sx-speel .sx2 .sx-d{transform-origin:center;animation:sx-dot1 6s cubic-bezier(.34,1.56,.64,1) infinite}
.sx-speel .sx2 .sx-d2{animation-name:sx-dot2}.sx-speel .sx2 .sx-d3{animation-name:sx-dot3}
.sx-speel .sx2 .sx-prijslijn{transform-origin:left center;animation:sx-lijn 6s cubic-bezier(.22,1,.36,1) infinite}
.sx2 .sx-v{stroke-dasharray:24;stroke-dashoffset:0}
.sx-speel .sx2 .sx-v1{animation:sx-vink1 6s ease-out infinite}.sx-speel .sx2 .sx-v2{animation:sx-vink2 6s ease-out infinite}.sx-speel .sx2 .sx-v3{animation:sx-vink3 6s ease-out infinite}
.sx-speel .sx2 .sx-stempel{transform-origin:center;animation:sx-stempel 6s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sx-dot1{0%,4%{transform:scale(0)}10%,100%{transform:none}}
@keyframes sx-dot2{0%,9%{transform:scale(0)}15%,100%{transform:none}}
@keyframes sx-dot3{0%,14%{transform:scale(0)}20%,100%{transform:none}}
@keyframes sx-lijn{0%,20%{transform:scaleX(0)}32%,100%{transform:scaleX(1)}}
@keyframes sx-vink1{0%,30%{stroke-dashoffset:24}38%,100%{stroke-dashoffset:0}}
@keyframes sx-vink2{0%,38%{stroke-dashoffset:24}46%,100%{stroke-dashoffset:0}}
@keyframes sx-vink3{0%,46%{stroke-dashoffset:24}54%,100%{stroke-dashoffset:0}}
@keyframes sx-stempel{0%,56%{opacity:0;transform:scale(2.2) rotate(8deg)}62%{opacity:1;transform:scale(.92)}66%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
/* scène 3 */
.sx-speel .sx3 .sx-bus{animation:sx-bus 6s cubic-bezier(.22,1,.36,1) infinite}
.sx-speel .sx3 .sx-wiel{animation:sx-wiel 6s cubic-bezier(.22,1,.36,1) infinite}
.sx-speel .sx3 .sx-deur{transform-origin:left center;animation:sx-deur 6s ease-in-out infinite}
.sx-speel .sx3 .sx-ok{transform-origin:center;animation:sx-ok 6s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes sx-bus{0%{transform:translateX(-150px);opacity:0}6%{opacity:1}30%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes sx-wiel{0%{transform:rotate(-540deg)}30%,100%{transform:none}}
@keyframes sx-deur{0%,36%{transform:none}46%,62%{transform:scaleX(.18)}72%,100%{transform:none}}
@keyframes sx-ok{0%,70%{opacity:0;transform:scale(0)}76%{opacity:1;transform:scale(1.25)}80%,94%{opacity:1;transform:none}100%{opacity:0;transform:scale(.8)}}
@media (max-width:900px){.stap-beeld.sx-b{aspect-ratio:16/9;max-width:520px;margin-left:auto;margin-right:auto}}
@media (prefers-reduced-motion:reduce){.sx *,.blok.grijs:has(.stappen)::before,.blok.grijs:has(.stappen)::after{animation:none!important}.sx1 .sx-vlieg{opacity:0}}

/* SLOTKLAAR-THEMA-LICHT-20260930 — licht thema (zie domeinbouw/slotklaar_thema.py) */
:root{--t-mint:#effaf5;--t-goud:#fff6e0;--t-lijn:#e2ece7;--t-tekst:#0c1d2e;--t-zacht:#475569}
body{background:#fbfdfc}

/* kop */
body .kop{background:rgba(255,255,255,.97)!important;color:var(--t-tekst);
 border-bottom:1px solid rgba(12,29,46,.07);box-shadow:0 12px 32px -26px rgba(12,29,46,.55)}
/* 🪤 backdrop-filter maakt de kop het referentiekader voor position:fixed-kinderen: het mobiele zijmenu (fixed, in de
   kop) werd daardoor maar ~36 px hoog en de laag erover blokkeerde het megamenu-knopje. Glas dus alleen op desktop. */
@media (min-width:901px){body .kop{background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}}
body .kop .merk{color:var(--t-tekst)}
body .kop .lg-woord{fill:var(--t-tekst)}
@media (min-width:901px){
 body .kop .hnav a{color:#334155}
 body .kop .hnav a:hover,body .kop .hnav a[aria-current=page]{background:#eaf7f1;color:#0b7350}
}
body .kop .knop.rand{background:#fff;border-color:#cfe3d9;color:var(--t-tekst);box-shadow:0 4px 14px -8px rgba(12,29,46,.35)}
body .kop .knop.rand:hover{border-color:#0f8a5f;color:#0b7350}
body .kop .menuknop{color:var(--t-tekst);border-color:#cfe3d9;background:#fff}
body .kop.open .menuknop{background:#eaf7f1;border-color:#9fd8bf}

/* hero */
body .held{background:linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(250,254,252,.93) 38%,rgba(239,250,245,.62) 62%,rgba(255,246,224,.3) 100%),
 var(--held-foto,none) center/cover no-repeat,#f4fbf7!important;color:var(--t-tekst)}
body .held::after{mix-blend-mode:normal;opacity:.5;background:radial-gradient(34% 40% at 18% 28%,rgba(126,226,184,.35),transparent 70%),
 radial-gradient(30% 36% at 82% 72%,rgba(245,196,81,.25),transparent 70%)}
body .held h1,body .held h1 em{color:var(--t-tekst);text-shadow:none!important}
/* eigenaar 30-09: "alle hero-teksten hebben een lelijke shadow" — de zwarte gloed uit het donkere portaalontwerp
   (.held h1 / .held p.lead,.held li) overal in de hero weg */
html body .held h1,html body .held h1 em,html body .held p,html body .held li,html body .held .pil,html body .held a,html body .held span{text-shadow:none!important}
body .held h1 em{background:linear-gradient(90deg,#0f8a5f 0%,#18a874 45%,#e9a820 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
body .held p.lead,body .held p{color:var(--t-zacht)}
body .held li{color:#334155}
body .held li svg{color:#0f8a5f}
body .held .pil{background:#fff;border-color:#d7eee3;color:#0b7350;box-shadow:0 6px 18px -12px rgba(15,138,95,.5)}
body .held .knop.rand,body .held a.knop:not(.blauw):not(.wa):not(.geel){color:var(--t-tekst)}
body .kruim{background:#f4fbf7;border-bottom:1px solid var(--t-lijn)}

/* vertrouwensband */
body .band{background:linear-gradient(90deg,#ecfaf3 0%,#ffffff 50%,#fff6e0 100%);color:var(--t-tekst);border-top:1px solid var(--t-lijn);border-bottom:1px solid var(--t-lijn)}
body .band svg{background:#fff;color:#0f8a5f;box-shadow:0 6px 16px -10px rgba(12,29,46,.4)}

/* slotbanner */
body .slot-cta{background:radial-gradient(900px 380px at 85% -10%,rgba(126,226,184,.45),transparent 60%),
 radial-gradient(700px 320px at 10% 110%,rgba(245,196,81,.35),transparent 60%),linear-gradient(160deg,#f2fbf7 0%,#ffffff 50%,#fff7e6 100%)!important;color:var(--t-tekst)}
body .slot-cta h2{color:var(--t-tekst)}
body .slot-cta p{color:var(--t-zacht)}
body .slot-cta .punten{color:#334155}

/* voet */
body .voet{background:linear-gradient(180deg,#f3faf6 0%,#eef4f9 100%)!important;color:var(--t-zacht);border-top:1px solid var(--t-lijn)}
body .voet a{color:var(--t-tekst)}
body .voet a:hover{color:#0b7350}
body .voet .lg-woord{fill:var(--t-tekst)}
body .voet-kop{color:var(--t-tekst)}
body .voet-merk p,body .voet-open{color:var(--t-zacht)}
body .voet .knop.voet-bel{color:#fff}
body .voet-meer{color:#0b7350!important}
body .voet-onder .in{color:#64748b;border-top:1px solid var(--t-lijn)}

/* kaart van Nederland (slotklaar_extra.py) */
body .skx-kaart-blok{background:linear-gradient(180deg,#f4fbf7 0%,#eef6fb 100%);color:var(--t-tekst)}
body .skx-kaart-blok .oog{color:#0f8a5f}body .skx-kaart-blok h2{color:var(--t-tekst)}body .skx-kaart-blok .intro{color:var(--t-zacht)}
body .skx-svg .p path{fill:#dcf2e7;stroke:#9fd8bf}
body .skx-svg .p:hover path,body .skx-svg .p:focus-visible path{fill:#c3ead7;stroke:#0f8a5f}
body .skx-svg .p.aan path{fill:#0f8a5f;stroke:#0b7350}
body .skx-svg .dot{fill:#0f8a5f}
body .skx-svg .dot.in-aan{fill:#f5b82e}
body .skx-svg .lbl{fill:var(--t-tekst);stroke:#fff}
body .skx-paneel{background:#fff;border-color:var(--t-lijn);box-shadow:0 24px 50px -32px rgba(12,29,46,.45)}
body .skx-zoek{border:1px solid #d7e5dd}
body .skx-lijst h3{color:var(--t-tekst)}body .skx-lijst .n,body .skx-start p,body .skx-leeg{color:#64748b}
body .skx-lijst a{color:var(--t-tekst)}
body .skx-lijst a:hover,body .skx-lijst a:focus-visible{background:#eaf7f1;color:#0b7350}
body .skx-chips button{background:#fff;border-color:#d7e5dd;color:var(--t-tekst)}

/* mobiel zijmenu (slotklaar_menu.py) */
@media (max-width:900px){
 /* megamenu-knop van claude-c7 (slotklaar_megamenu.py) was afgestemd op het donkere paneel */
 body .hnav .mm-knop{color:#0b7350!important;background:#f4fbf7!important;border-color:#cdeadd!important}
 body .hnav .mega .mm-kop,body .hnav .mega [class*=kop]{color:#0f8a5f}
 body .hnav{background:linear-gradient(165deg,#ffffff 0%,#f1faf5 60%,#fff7e6 100%)!important;border-left:1px solid var(--t-lijn)!important;box-shadow:-24px 0 60px rgba(12,29,46,.18)!important}
 body .hnav a{color:var(--t-tekst)!important;background:#fff!important;border-color:var(--t-lijn)!important;box-shadow:0 4px 14px -12px rgba(12,29,46,.4)}
 body .hnav a:hover,body .hnav a:focus-visible{background:#eaf7f1!important;border-color:#9fd8bf!important}
 body .hnav a[aria-current=page]{background:linear-gradient(90deg,#dcf5e9,#f4fbf7)!important;border-color:#9fd8bf!important}
 body .hnav a[aria-current=page]::before{background:#0f8a5f}
 body .hnav .hnav-cta a.skm-wa{color:#fff!important;background:#128c56!important}
 body .hnav .hnav-cta a.skm-bel{color:#0c1d2e!important;background:linear-gradient(135deg,#f0b429,#f5a524)!important}
 body .hnav-cta small{color:#64748b}
 body .hnav-dek{background:rgba(12,29,46,.28)}
}

/* SLOTKLAAR-HERO-PER-DIENST-20260930 */
.held-sfeer{position:absolute;right:14px;bottom:12px;z-index:2;font-size:.72rem;font-weight:600;letter-spacing:.02em;
 color:#475569;background:rgba(255,255,255,.82);border:1px solid rgba(12,29,46,.08);border-radius:999px;padding:4px 10px;pointer-events:none}

/* SLOTKLAAR-MEGAMENU-20260930 (claude-c7) — alle diensten onder "Diensten", zie domeinbouw/slotklaar_megamenu.py */
.mm-knop{display:none}.mega{display:none}
.mm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:901px){
 .mm-knop{display:inline-flex;align-items:center;justify-content:center;width:28px;height:34px;margin:0 0 0 -9px;padding:0;
  background:none;border:0;color:inherit;cursor:pointer;border-radius:8px}
 .mm-knop i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
 .mm-knop:focus-visible{outline:2px solid #7ee2b8;outline-offset:2px}
 .mm-mob{display:none}
 .kop.mm-open .mm-knop i{transform:rotate(-135deg) translate(-2px,-2px)}
 /* dicht = display:none (niet alleen onzichtbaar): in volledige-pagina-opnames schemerde het paneel anders door */
 .mega{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;color:#16202f;
  border-top:1px solid rgba(126,226,184,.25);box-shadow:0 24px 50px rgba(8,24,30,.22)}
 .kop.mm-open .mega{display:block;animation:mm-in .22s cubic-bezier(.22,1,.36,1) both}
 .mm-in{max-width:1120px;margin:0 auto;padding:26px 20px 28px;display:grid;grid-template-columns:1fr 1.35fr 1fr 250px;gap:26px}
 .mm-kol{display:flex;flex-direction:column;gap:4px;min-width:0}
 .mm-kop{margin:0 0 6px;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0b7350}
 .hnav .mega a.mm-item{display:flex!important;align-items:flex-start;gap:12px;padding:10px!important;border-radius:12px;
  color:#16202f!important;text-decoration:none;font-size:inherit!important;background:none;border:0;min-height:0}
 .hnav .mega a.mm-item::after,.hnav .mega a.mm-item::before{display:none}
 .hnav .mega a.mm-item:hover,.hnav .mega a.mm-item:focus-visible{background:#eaf7f1}
 .mm-ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#eaf7f1;color:#0f8a5f}
 .mm-ico svg{width:22px;height:22px}
 .mm-tekst{display:flex;flex-direction:column;min-width:0}
 .mm-tekst b{font-size:.95rem;line-height:1.25}
 .mm-tekst small{color:#4b5563;font-size:.82rem;line-height:1.35;margin-top:2px}
 .mm-tekst em{font-style:normal;color:#0b7350;font-weight:700;font-size:.8rem;margin-top:3px}
 .mm-spoed{background:#0c1d2e;color:#e6eef7;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;align-self:start}
 .mm-spoed .mm-kop{color:#7ee2b8}.mm-spoed b{font-size:1.05rem;color:#fff}.mm-spoed p{margin:0;font-size:.88rem;color:#b9c9d8}
 .hnav .mega a.mm-bel{display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:999px;
  background:linear-gradient(135deg,#f0b429,#f5a524);color:#0c1d2e!important;font-weight:800;text-decoration:none;padding:0 14px!important;font-size:.95rem!important;margin-top:4px}
 .hnav .mega a.mm-bel svg{width:18px;height:18px}
 .hnav .mega a.mm-alle{display:block;color:#7ee2b8!important;font-weight:700;font-size:.88rem!important;padding:4px 0!important;text-decoration:none}
 .hnav .mega a.mm-alle:hover{text-decoration:underline}
}
@media (min-width:901px){.mega{max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}}
@media (min-width:901px) and (max-width:1080px){.mm-in{grid-template-columns:repeat(3,1fr);gap:18px;padding:20px 16px 22px}.mm-tekst small{display:none}.mm-spoed{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 18px}.mm-spoed p{display:none}.hnav .mega a.mm-bel{margin-top:0}}
@media (max-width:900px){
 .mm-knop{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:10px 16px 10px 28px;margin:-2px 0 2px;
  background:rgba(126,226,184,.06);border:1px dashed rgba(126,226,184,.28);border-radius:14px;color:#b9e3d1;font:inherit;font-weight:650;font-size:.98rem;cursor:pointer}
 .mm-knop i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}
 .mm-knop[aria-expanded=true] i{transform:rotate(-135deg)}
 .mm-knop:focus-visible{outline:2px solid #7ee2b8;outline-offset:2px}
 .hnav .mm-knop,.hnav .mega{flex:none}
 .mega{display:block;max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.22,1,.36,1)}
 .mm-knop[aria-expanded=true]+.mega{max-height:1400px}
 .mm-in{display:flex;flex-direction:column;gap:2px;padding:4px 0 8px 12px}
 .mm-kop{margin:10px 0 4px 12px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7ee2b8}
 .mm-kol{display:flex;flex-direction:column;gap:4px}
 .hnav .mega a.mm-item{min-height:46px!important;padding:8px 12px 8px 16px!important;font-size:.98rem!important;gap:12px;justify-content:flex-start!important;
  background:transparent!important;border-color:transparent!important}
 .hnav .mega a.mm-item::after{display:none}
 .hnav .mega a.mm-item:hover,.hnav .mega a.mm-item:focus-visible{background:rgba(126,226,184,.1)!important}
 .mm-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(126,226,184,.12);color:#7ee2b8}
 .mm-ico svg{width:18px;height:18px}
 .mm-tekst{display:flex;flex-direction:column;flex:1;min-width:0}
 .mm-tekst b{font-weight:650;line-height:1.3}.mm-tekst small{display:none}
 .mm-tekst em{font-style:normal;font-size:.8rem;color:#9fb4c9;font-weight:500}
 .mm-spoed{display:none}
}
@keyframes mm-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mega,.kop.mm-open .mega,.mm-knop i{transition:none!important;animation:none!important}}

/* SLOTKLAAR-DIENSTFOTOS-20260930 (claude-c7) — foto's per dienst, zie domeinbouw/slotklaar_diensten.py */
.skd{margin:22px 0 30px}
.skd-galerij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.skd-galerij.skd-n3 .skd-fig:first-child,.skd-galerij.skd-n2 .skd-fig{grid-column:1/-1}
.skd-fig{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#eaf7f1;border:1px solid #d6ebe2}
.skd-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.skd-galerij.skd-n3 .skd-fig:first-child img,.skd-galerij.skd-n2 .skd-fig img{aspect-ratio:16/9}
.skd-fig figcaption{padding:9px 12px;font-size:.84rem;line-height:1.4;color:#374151;background:#fff}
.skd-lbl{position:absolute;top:8px;left:8px;background:rgba(12,29,46,.78);color:#fff;font-size:.72rem;font-weight:700;
 letter-spacing:.04em;padding:3px 8px;border-radius:999px}
.skd-noot{margin:14px 0 0;font-size:.82rem;color:#6b7280}
@media (max-width:700px){.skd-galerij{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}.skd-galerij::-webkit-scrollbar{display:none}.skd-fig{flex:0 0 82%;scroll-snap-align:start}.skd-galerij.skd-n2 .skd-fig,.skd-galerij .skd-fig:only-child{flex-basis:88%}.skd-fig img,.skd-galerij.skd-n3 .skd-fig:first-child img,.skd-galerij.skd-n2 .skd-fig img{aspect-ratio:4/3}}

/* SLOTKLAAR-CONTRAST-20260930 (claude-c7) — contrast ≥ 4,5:1 en meer kleur, zie domeinbouw/slotklaar_contrast.py.
   Specificiteit html body … omdat het lichte thema (slotklaar_thema.py) body … + !important gebruikt. */
:root{--sk-groen-tekst:#0b7350;--sk-groen-diep:#0a6a4a}
/* knoppen (links, niet de oranje verzendknop van het formulier): wit op #0b7350 → #0a6a4a (≥ 5,86:1) */
html body a.knop.blauw,html body .belbalk .knop.blauw,html body .zoek-gemeente .knop.blauw{background:linear-gradient(135deg,#0b7350 0%,#0a6a4a 100%)!important;color:#fff!important}
html body a.knop.blauw:hover,html body a.knop.blauw:focus-visible{background:linear-gradient(135deg,#0a6a4a 0%,#0f5a47 100%)!important}
html body .voet-bel{background:linear-gradient(135deg,#0b7350,#0a6a4a)!important;color:#fff!important}
/* tekstlinks, inhoudsopgave, kleine groene labels */
html body main a:not(.knop):not(.gidskaart):not(.mm-item):not(.dienst):not([class*="knop"]):not([class*="kaart"]){color:var(--sk-groen-tekst)}
html body .gids-zij a,html body .faq a,html body .bron a,html body .lijst a{color:var(--sk-groen-tekst)!important}
html body .oog,html body .skx-kaart-blok .oog{color:var(--sk-groen-tekst)!important}
html body main a small,html body main a em,html body .gidskaart small,html body .gidskaart em{color:var(--sk-groen-tekst)!important}
/* held: DONKER verloop navy → diepgroen over de foto (eigenaar 23:0x: "licht én donkere kleurovergangen, niet alles wit").
   Kop wit → held donker → secties licht → oproep en voet donker. Het formulier blijft een witte kaart. */
html body .held{background:linear-gradient(100deg,rgba(8,20,31,.94) 0%,rgba(12,29,46,.88) 38%,rgba(15,90,71,.62) 68%,rgba(15,90,71,.35) 100%),
 radial-gradient(700px 360px at 100% 100%,rgba(240,180,41,.25),transparent 60%),
 var(--held-foto,none) center/cover no-repeat,#0c1d2e!important;color:#fff!important}
@media (max-width:900px){html body .held{background:linear-gradient(180deg,rgba(8,20,31,.93) 0%,rgba(12,29,46,.9) 55%,rgba(15,90,71,.88) 100%),
 var(--held-foto,none) center/cover no-repeat,#0c1d2e!important}}
html body .held h1{color:#fff!important}
html body .held h1 em{background:linear-gradient(90deg,#7ee2b8 0%,#b9f0d6 45%,#f5c451 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
html body .held > .in > div:first-child p,html body .held .lead{color:#d6e4ee!important}
html body .held > .in > div:first-child li{color:#e6eef7!important}
html body .held > .in > div:first-child li svg{color:#7ee2b8!important}
html body .held > .in > div:first-child a:not(.knop){color:#fff!important;text-decoration:underline;text-underline-offset:3px;font-weight:700}
html body .held .pil{background:rgba(255,255,255,.1)!important;border-color:rgba(126,226,184,.35)!important;color:#b9f0d6!important;box-shadow:none!important}
html body .held .knop.rand,html body .held a.knop:not(.blauw):not(.wa):not(.geel){color:#fff!important;border-color:rgba(255,255,255,.55)!important}
html body .held .held-sfeer{background:rgba(8,20,31,.6)!important;color:#e6eef7!important;border-color:rgba(255,255,255,.15)!important}
/* band onder de held: dieper verloop */
html body .band{background:linear-gradient(90deg,#d9f1e5 0%,#f3fbf7 50%,#fdecc3 100%)!important}
/* afsluitende oproep: donker verloop navy → diepgroen met gouden gloed */
html body .slot-cta{background:radial-gradient(900px 380px at 85% -10%,rgba(126,226,184,.30),transparent 60%),
 radial-gradient(700px 320px at 0% 110%,rgba(240,180,41,.20),transparent 60%),
 linear-gradient(160deg,#0c1d2e 0%,#123043 45%,#0f5a47 100%)!important;color:#fff!important}
html body .slot-cta h2{color:#fff!important}html body .slot-cta p{color:#d3e4dc!important}html body .slot-cta .punten,html body .slot-cta .punten li{color:#b9d3c8!important}
html body .slot-cta .knop.rand,html body .slot-cta a.knop:not(.blauw):not(.wa):not(.geel){color:#fff!important;border-color:rgba(255,255,255,.55)!important;background:transparent!important}
/* grijze blokken en de kaartsectie: zacht verloop mint → wit → goud i.p.v. overal bijna-wit */
html body .blok.grijs,html body .skx-kaart-blok{background:radial-gradient(1100px 420px at 100% 0%,rgba(240,180,41,.14),transparent 62%),
 radial-gradient(1100px 460px at 0% 100%,rgba(15,138,95,.16),transparent 60%),
 linear-gradient(180deg,#e3f3eb 0%,#f3faf6 55%,#fff5de 100%)!important}
/* voettekst: donker verloop, lichte tekst */
html body .voet{background:radial-gradient(900px 360px at 90% 0%,rgba(126,226,184,.16),transparent 60%),
 linear-gradient(180deg,#0c1d2e 0%,#08141f 100%)!important;color:#c9d9d1!important}
html body .voet a:not(.voet-bel):not(.knop){color:#e3eee8!important}
html body .voet a:not(.voet-bel):not(.knop):hover{color:#7ee2b8!important}
html body .voet .voet-kop,html body .voet h2,html body .voet h3,html body .voet b,html body .voet strong{color:#fff!important}
html body .voet small,html body .voet p,html body .voet li{color:#b9cbc3!important}
html body .voet .voet-meer{color:#7ee2b8!important}
html body .voet svg:not(.embleem){color:#7ee2b8}
/* logo in de nu donkere voet: het woord was navy (thema: body .voet .lg-woord) → wit */
html body .voet .lg-woord{fill:#fff!important}
/* dienstkaarten: 9 diensten → 3 × 3 i.p.v. 4+4+1 (Schuifpuien stond alleen op de derde rij) */
@media (min-width:1000px){html body .diensten{grid-template-columns:repeat(3,minmax(0,1fr))!important}}