/* Bestelnet — de website. Huisstijl: basilicumgroen, saffraan, room; Bricolage Grotesque + Inter; de toonbankbel. */
:root{
  --groen:#0E3B2E;--groen-2:#155A45;--groen-3:#1F7A5C;--groen-licht:#E2F2EA;
  --saffraan:#FFB627;--saffraan-d:#8A5A00;--room:#F6F2E9;--room-2:#FBF8F1;--wit:#fff;
  --ink:#1B1A17;--muted:#5C574D;--lijn:#E6DFD0;--rood:#C8341F;
  --kop:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --schaduw:0 1px 2px rgba(20,30,20,.06),0 18px 40px -22px rgba(14,59,46,.4);
  --rond:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--room);color:var(--ink);font:17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--kop);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin:0}
h2{font-size:clamp(32px,4.6vw,54px);max-width:18ch}
h3{font-size:21px;letter-spacing:-.01em;line-height:1.2}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.smal{max-width:860px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-focus:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:100;background:var(--wit);padding:10px 14px;border-radius:10px}
:focus-visible{outline:3px solid var(--saffraan);outline-offset:3px;border-radius:6px}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;padding:12px 18px;min-height:48px;font:700 16px/1.2 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s}
.knop:active{transform:scale(.98)}
.knop svg{width:20px;height:20px;fill:currentColor;flex:none}
.knop-goud{background:var(--saffraan);color:#1D1404;box-shadow:0 10px 24px -12px rgba(255,182,39,.9)}
.knop-goud:hover{background:#FFC24A}
.knop-licht{background:var(--wit);color:var(--groen);box-shadow:inset 0 0 0 1.5px var(--lijn)}
.knop-licht:hover{box-shadow:inset 0 0 0 1.5px var(--groen-3)}
.knop-lijn{background:transparent;color:var(--groen);box-shadow:inset 0 0 0 2px var(--groen)}
.knop-lijn:hover{background:var(--groen);color:var(--wit)}
.knop-groot{min-height:56px;padding:14px 24px;font-size:17px;border-radius:16px}
.knop-vol{width:100%}
.knoppenrij{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.knoppenrij-midden{justify-content:center}

/* kopbalk */
.kop{position:sticky;top:0;z-index:50;background:rgba(246,242,233,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.kop.gescrold{border-bottom-color:var(--lijn)}
.kop-in{display:flex;align-items:center;gap:20px;min-height:70px}
.merk{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.merk img{border-radius:10px}
.woord{font-family:var(--kop);font-weight:800;font-size:24px;letter-spacing:-.035em;color:var(--groen)}
.woord span{color:var(--saffraan-d)}
.merk-licht .woord{color:var(--wit)}.merk-licht .woord span{color:var(--saffraan)}
.menu{display:flex;gap:4px;margin-left:12px}
.menu a{text-decoration:none;font-weight:600;font-size:15.5px;color:var(--muted);padding:8px 12px;border-radius:10px}
.menu a:hover{color:var(--groen);background:rgba(14,59,46,.06)}
.kop-knoppen{margin-left:auto;display:flex;gap:10px;align-items:center}
.kop-knoppen .knop{min-height:44px;padding:10px 16px;font-size:15px}
.hamburger{display:none;width:46px;height:46px;border-radius:12px;border:0;background:var(--wit);box-shadow:inset 0 0 0 1.5px var(--lijn);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hamburger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--groen);transition:transform .2s,opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:980px){
  .menu{position:absolute;left:0;right:0;top:70px;flex-direction:column;background:var(--room);border-bottom:1px solid var(--lijn);padding:10px 16px 18px;margin:0;display:none}
  .menu.open{display:flex}
  .menu a{font-size:18px;padding:12px}
  .hamburger{display:inline-flex}
}
@media (max-width:560px){.verberg-klein{display:none}}

/* hero */
.held{position:relative;overflow:hidden;padding:56px 0 80px}
.held::before{content:"";position:absolute;right:-220px;top:-160px;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(255,182,39,.32),rgba(255,182,39,0) 62%);pointer-events:none}
.held-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;position:relative}
.vlag{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;color:var(--groen);background:var(--wit);border-radius:999px;padding:7px 14px;box-shadow:inset 0 0 0 1.5px var(--lijn)}
.stip{width:9px;height:9px;border-radius:50%;background:var(--groen-3);box-shadow:0 0 0 4px rgba(31,122,92,.18);flex:none}
.held h1{font-size:clamp(40px,5.6vw,70px);margin:22px 0 22px;color:var(--groen)}
.held h1 em{font-style:normal;color:var(--saffraan-d);background:linear-gradient(transparent 70%,rgba(255,182,39,.45) 70%);padding:0 .06em}
.lead{font-size:clamp(17px,1.6vw,19.5px);color:var(--muted);max-width:56ch;margin-top:16px}
.held .lead{margin-top:0}
.betaal{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:28px 0 0}
.betaal li{font-size:13.5px;font-weight:700;color:var(--groen);background:rgba(14,59,46,.07);border-radius:999px;padding:6px 12px}

.held-beeld{position:relative;min-height:560px}
.telefoon{position:absolute;left:4%;top:10px;width:270px;height:550px;border-radius:44px;background:#121512;padding:12px;box-shadow:0 40px 80px -30px rgba(14,59,46,.6),inset 0 0 0 2px #2a2f2b;transform:rotate(-4deg)}
.tel-scherm{height:100%;border-radius:33px;background:var(--room-2);overflow:hidden;font-size:13px;display:flex;flex-direction:column}
.tel-kop{display:flex;align-items:center;justify-content:space-between;background:#7A1F12;color:#fff;padding:26px 16px 12px}
.tel-logo{font-family:var(--kop);font-weight:800;font-size:17px}
.tel-mand{width:26px;height:26px;border-radius:50%;background:var(--saffraan);color:#1D1404;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:12px}
.tel-hero{background:linear-gradient(135deg,#9C2A17,#C24A26);color:#fff;padding:16px;display:flex;flex-direction:column;gap:2px}
.tel-hero b{font-family:var(--kop);font-size:19px;line-height:1.1}
.tel-hero span{opacity:.85;font-size:12px}
.tel-rij{display:flex;align-items:center;justify-content:space-between;background:#fff;margin:8px 10px 0;border-radius:12px;padding:10px 12px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tel-rij span{display:flex;flex-direction:column}
.tel-rij b{font-size:13.5px}.tel-rij i{font-style:normal;color:var(--muted);font-size:12px}
.tel-rij em{font-style:normal;width:28px;height:28px;border-radius:8px;background:#1B1A17;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.tel-betaal{margin:12px 10px 0;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:inset 0 0 0 1px var(--lijn)}
.tel-betaal span{font-weight:700;font-size:12.5px}
.tel-methodes{display:flex;gap:6px;margin-top:8px}
.tel-methodes i{font-style:normal;flex:1;text-align:center;border-radius:8px;padding:7px 0;font-weight:700;font-size:11.5px;box-shadow:inset 0 0 0 1.5px var(--lijn)}
.tel-methodes i:first-child{box-shadow:inset 0 0 0 2px #CC0066;color:#CC0066}
.tel-knop{margin:auto 10px 14px;background:#9C2A17;color:#fff;text-align:center;border-radius:12px;padding:12px;font-weight:800}

.bonnen{position:absolute;right:0;top:70px;width:290px}
.bon{position:relative;background:#fff;border-radius:18px;padding:16px;box-shadow:0 30px 60px -24px rgba(14,59,46,.55);border-top:6px solid var(--rood);font-size:14.5px;transform:rotate(3deg)}
.bon.komt{animation:binnen .55s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes binnen{from{opacity:0;transform:translateY(-40px) rotate(8deg) scale(.92)}to{opacity:1;transform:rotate(3deg)}}
.bon-bel{position:absolute;top:-20px;right:-16px;width:48px;height:48px;border-radius:50%;background:var(--rood);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(200,52,31,.45)}
.bon-bel svg{width:24px;height:24px;fill:#fff}
.bon.belt .bon-bel{animation:schud .8s ease-in-out 3}
@keyframes schud{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}}
.bon-kop{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.bon-kop b{font-family:var(--kop);font-size:26px;letter-spacing:-.02em}
.soort{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:var(--groen-licht);color:var(--groen-3)}
.soort.bezorgen{background:#FFF2D6;color:var(--saffraan-d)}
.bon-kop i{margin-left:auto;font-style:normal;color:#8A8478;font-size:12.5px;white-space:nowrap}
.bon ul{list-style:none;margin:0;padding:8px 0;border-top:1px dashed var(--lijn);border-bottom:1px dashed var(--lijn)}
.bon li{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.bon-tot{display:flex;justify-content:space-between;font-weight:700;margin:10px 0 12px}
.bon-knop{background:var(--saffraan);color:#1D1404;border-radius:12px;text-align:center;font-weight:800;padding:11px 8px;font-size:14px}
.chip{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:10px 16px;font-weight:700;font-size:14px;box-shadow:var(--schaduw);white-space:nowrap}
.chip-betaald{left:0;bottom:70px;color:var(--groen)}
.chip-betaald .vink{width:22px;height:22px;border-radius:50%;background:var(--groen-3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.chip-klaar{right:20px;bottom:12px;color:var(--ink)}
.chip-klaar .stip{background:var(--saffraan);box-shadow:0 0 0 4px rgba(255,182,39,.25)}
@media (prefers-reduced-motion:no-preference){.chip-betaald{animation:zweef 6s ease-in-out infinite}.chip-klaar{animation:zweef 7s ease-in-out -2s infinite}}
@keyframes zweef{50%{transform:translateY(-8px)}}
@media (max-width:980px){
  .held{padding:36px 0 56px}
  .held-in{grid-template-columns:1fr}
  .held-beeld{min-height:520px;max-width:560px;width:100%;margin:0 auto}
}
@media (max-width:560px){
  .held-beeld{min-height:470px}
  .telefoon{width:220px;height:450px;left:0;border-radius:38px}
  .tel-kop{padding-top:20px}
  .tel-rij:nth-of-type(5){display:none}
  .bonnen{width:230px;top:40px;right:-4px}
  .bon{font-size:13px;padding:13px}
  .bon-kop b{font-size:22px}
  .chip{font-size:12.5px;padding:8px 12px}
  .chip-betaald{bottom:44px}
  .chip-klaar{right:0;bottom:0}
}

/* feiten */
.feiten{background:var(--groen);color:#fff}
.feiten-in{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-top:34px;padding-bottom:34px}
.feiten b{display:block;font-family:var(--kop);font-size:21px;letter-spacing:-.01em;color:var(--saffraan)}
.feiten span{color:rgba(255,255,255,.8);font-size:15.5px}
@media (max-width:760px){.feiten-in{grid-template-columns:1fr;gap:18px}}

/* secties */
.sectie{padding:100px 0;background:var(--wit)}
.sectie-room{background:var(--room)}
.sectie-groen{background:var(--groen);color:#fff}
.sectie-groen h2{color:#fff}
.label{font-weight:800;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--groen-3);margin-bottom:14px}
.label-licht{color:var(--saffraan)}
.lead-licht{color:rgba(255,255,255,.8)}
@media (max-width:760px){.sectie{padding:68px 0}}

/* stappen */
.stappen{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.stappen li{background:var(--room-2);border-radius:var(--rond);padding:30px 26px;position:relative;box-shadow:inset 0 0 0 1px var(--lijn)}
.stappen .nr{width:46px;height:46px;border-radius:14px;background:var(--groen);color:var(--saffraan);font-family:var(--kop);font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.stappen h3{margin-bottom:10px;color:var(--groen)}
.stappen p{color:var(--muted);font-size:16px}
@media (max-width:860px){.stappen{grid-template-columns:1fr}}

/* portaal */
.portaal-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.vinkjes{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.vinkjes li{position:relative;padding-left:34px;color:rgba(255,255,255,.82);font-size:16.5px}
.vinkjes li b{color:#fff}
.vinkjes li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--saffraan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%231D1404' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.vinkjes-donker li{color:var(--muted)}.vinkjes-donker li b{color:var(--ink)}
.laptop{position:relative}
.laptop-scherm{background:#F6F2E9;border-radius:16px 16px 0 0;border:10px solid #101411;border-bottom-width:14px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);font-size:11px;color:var(--ink)}
.laptop-voet{height:14px;background:linear-gradient(#cfd3d0,#9aa19c);border-radius:0 0 18px 18px;margin:0 -28px;box-shadow:0 18px 30px -12px rgba(0,0,0,.6)}
.pt-kop{display:flex;align-items:center;gap:8px;background:var(--groen);color:#fff;padding:9px 12px}
.pt-merk{display:flex;align-items:center;gap:6px;font-family:var(--kop);font-weight:800;font-size:14px}
.pt-merk span{color:var(--saffraan)}
.pt-zaak{font-weight:700;margin-left:8px;padding-left:10px;border-left:1px solid rgba(255,255,255,.25)}
.pt-pil{margin-left:auto;background:rgba(255,255,255,.14);border-radius:999px;padding:3px 9px;font-weight:700;font-size:10px;color:#7CE0B4}
.pt-pil+.pt-pil{margin-left:6px}
.pt-open{color:#fff}
.pt-tabs{display:flex;gap:4px;padding:9px 12px 0}
.pt-tabs b,.pt-tabs span{padding:5px 10px;border-radius:8px;font-weight:700;color:var(--muted)}
.pt-tabs b{background:#fff;color:var(--groen);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pt-bord{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:10px 12px 14px}
.pt-kolom h4{margin:0 0 7px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:5px}
.pt-kolom h4 i{width:7px;height:7px;border-radius:50%}
.pt-kolom h4 i.r{background:var(--rood)}.pt-kolom h4 i.g{background:var(--saffraan)}.pt-kolom h4 i.ok{background:var(--groen-3)}
.pt-kolom h4 b{margin-left:auto;color:var(--ink)}
.pt-bon{background:#fff;border-radius:10px;padding:8px;margin-bottom:7px;border-top:4px solid var(--lijn);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.pt-rood{border-top-color:var(--rood);box-shadow:0 0 0 1.5px rgba(200,52,31,.3)}
.pt-geel{border-top-color:var(--saffraan)}.pt-groen{border-top-color:var(--groen-3)}
.pt-bk{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.pt-bk b{font-family:var(--kop);font-size:14px}
.pt-s{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:#FFF2D6;color:var(--saffraan-d);border-radius:999px;padding:1px 6px}
.pt-s.a{background:var(--groen-licht);color:var(--groen-3)}
.pt-bon p{margin:0;color:var(--muted);line-height:1.45}
.pt-chips{display:flex;gap:3px;margin:6px 0}
.pt-chips i{font-style:normal;border-radius:999px;padding:1px 7px;font-weight:700;box-shadow:inset 0 0 0 1px var(--lijn)}
.pt-chips i.aan{background:var(--groen);color:#fff;box-shadow:none}
.pt-acc{background:var(--saffraan);color:#1D1404;border-radius:7px;text-align:center;font-weight:800;padding:5px 3px;font-size:10px}
.pt-act{background:var(--groen);color:#fff;border-radius:7px;text-align:center;font-weight:700;padding:5px 3px;margin-top:6px;font-size:10px}
@media (max-width:980px){.portaal-in{grid-template-columns:1fr;gap:44px}.laptop{max-width:640px;margin:0 auto;width:100%}}
@media (max-width:560px){.laptop-scherm{font-size:9px}.pt-kolom:nth-child(3){display:none}.pt-bord{grid-template-columns:1fr 1fr}.laptop-voet{margin:0 -12px}}

/* klanten */
.klant-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.volg{display:flex;justify-content:center}
.volg-kaart{background:var(--room-2);border-radius:var(--rond);padding:24px;width:100%;max-width:380px;box-shadow:var(--schaduw),inset 0 0 0 1px var(--lijn)}
.volg-kop{font-family:var(--kop);font-weight:800;font-size:20px;margin-bottom:12px}
.volg-stap{display:flex;gap:14px;align-items:flex-start;padding:9px 0;color:#9A958A}
.volg-stap i{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:14px}
.volg-stap b{display:block}.volg-stap small{display:block;font-size:14px}
.volg-stap.gedaan{color:var(--groen-3)}.volg-stap.gedaan i{background:var(--groen-3);border-color:var(--groen-3);color:#fff}
.volg-stap.nu{color:var(--ink)}.volg-stap.nu i{background:var(--saffraan);border-color:var(--saffraan)}
@media (prefers-reduced-motion:no-preference){.volg-stap.nu i{animation:puls 1.8s ease-in-out infinite}}
@keyframes puls{50%{box-shadow:0 0 0 7px rgba(255,182,39,.25)}}
.tegels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.tegel{background:var(--room);border-radius:18px;padding:22px}
.tegel h3{font-size:18px;margin-bottom:8px;color:var(--groen)}
.tegel p{color:var(--muted);font-size:15.5px}
@media (max-width:980px){.klant-in{grid-template-columns:1fr;gap:40px}.volg{order:2}}
@media (max-width:560px){.tegels{grid-template-columns:1fr}}

/* rekenhulp */
.reken{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:40px;background:var(--wit);border-radius:var(--rond);padding:28px;box-shadow:var(--schaduw)}
.reken-invoer label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;margin-top:18px}
.reken-invoer label:first-child{margin-top:0}
.reken-invoer output{font-family:var(--kop);font-weight:800;font-size:22px;color:var(--groen)}
input[type=range]{width:100%;margin:12px 0 4px;accent-color:var(--groen-3);height:28px}
.reken-uit{background:var(--room);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:16px}
.vergelijk{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vergelijk>div{background:var(--wit);border-radius:14px;padding:16px}
.vergelijk span{font-size:14px;color:var(--muted);font-weight:600}
.vergelijk b{display:block;font-family:var(--kop);font-size:clamp(24px,3vw,32px);margin:4px 0 2px}
.vergelijk small{font-size:13px;color:var(--muted)}
.vergelijk .bn{box-shadow:inset 0 0 0 2px var(--groen-3)}
.vergelijk .bn b{color:var(--groen-3)}
.winst{background:var(--groen);color:#fff;border-radius:16px;padding:20px}
.winst span{font-weight:600;color:rgba(255,255,255,.8)}
.winst b{display:block;font-family:var(--kop);font-size:clamp(38px,5vw,54px);line-height:1.05;color:var(--saffraan);margin:4px 0}
.winst small{font-size:15px;color:rgba(255,255,255,.85)}
.klein{font-size:13.5px;color:var(--muted)}
@media (max-width:860px){.reken{grid-template-columns:1fr;padding:20px}}
@media (max-width:420px){.vergelijk{grid-template-columns:1fr}}

/* prijs */
.prijs-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.prijskaart{background:var(--room);border-radius:28px;padding:34px;box-shadow:inset 0 0 0 1px var(--lijn)}
.prijs-groot{font-family:var(--kop);font-weight:800;font-size:clamp(56px,7vw,76px);letter-spacing:-.04em;color:var(--groen);line-height:1}
.prijs-groot small{font-size:.42em;letter-spacing:-.01em;color:var(--saffraan-d)}
.prijs-per{color:var(--muted);font-weight:600;margin-top:8px}
.prijskaart .vinkjes{margin:24px 0 28px}
@media (max-width:860px){.prijs-in{grid-template-columns:1fr;gap:32px}}

/* vragen */
.vragen{margin-top:36px;display:grid;gap:12px}
.vragen details{background:var(--wit);border-radius:16px;box-shadow:inset 0 0 0 1px var(--lijn)}
.vragen summary{cursor:pointer;list-style:none;padding:20px 56px 20px 22px;font-weight:700;font-size:17.5px;position:relative}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;border-right:2.5px solid var(--groen);border-bottom:2.5px solid var(--groen);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.vragen details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.vragen details p{padding:0 22px 22px;color:var(--muted)}

/* einde */
.eind{text-align:center;position:relative;overflow:hidden}
.eind::before{content:"";position:absolute;left:50%;top:-200px;width:700px;height:700px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,182,39,.22),transparent 62%)}
.eind-in{position:relative;display:flex;flex-direction:column;align-items:center}
.eind-logo{border-radius:18px;margin-bottom:26px}
.eind h2{margin:0 auto;max-width:16ch}
.eind .lead{margin:20px auto 0}

/* voet */
.voet{background:#0A2B21;color:rgba(255,255,255,.75);padding:44px 0}
.voet-in{display:grid;grid-template-columns:auto 1fr auto;gap:14px 28px;align-items:center}
.voet nav{display:flex;flex-wrap:wrap;gap:6px 18px;grid-column:3}
.voet nav a{text-decoration:none;font-weight:600;font-size:15px}
.voet nav a:hover{color:#fff}
.voet .klein{color:rgba(255,255,255,.5);grid-column:1/-1}
@media (max-width:760px){.voet-in{grid-template-columns:1fr}.voet nav{grid-column:auto}}

/* tekstpagina (privacy) */
.tekstpagina h1{font-size:clamp(34px,4.6vw,52px);color:var(--groen);margin-bottom:20px}
.tekstpagina h2{font-size:24px;margin:30px 0 8px;max-width:none}
.tekstpagina p{color:var(--muted);margin-top:8px}

/* demo-formulier */
.demo-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:center;position:relative}
.demo-tekst .eind-logo{margin-bottom:22px}
.demo-tekst h2{max-width:14ch}
.demo-kaart{background:#fff;color:var(--ink);border-radius:24px;padding:28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.demo-form h3{font-size:24px;color:var(--groen);margin-bottom:6px}
.demo-form label,.contact-form label{display:block;font-weight:600;font-size:14.5px;margin:14px 0 6px}
.demo-form label span,.contact-form label span{color:#8A8478;font-weight:500}
.demo-form input,.contact-form input,.contact-form textarea{width:100%;font:inherit;font-size:16px;border:1.5px solid var(--lijn);border-radius:12px;padding:12px 14px;min-height:50px;background:var(--room-2);color:var(--ink);outline:none}
.contact-form textarea{min-height:140px;resize:vertical}
.demo-form input:focus,.contact-form input:focus,.contact-form textarea:focus{border-color:var(--groen-3);background:#fff;box-shadow:0 0 0 3px rgba(31,122,92,.16)}
.demo-form .knop,.contact-form .knop{margin-top:20px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.demo-fout{color:var(--rood);font-weight:600;font-size:14.5px;margin:12px 0 0}
.demo-noot{color:#8A8478;font-size:13px;margin-top:12px;text-align:center}
.demo-ok{text-align:center;padding:12px 4px}
.demo-ok .rond{width:64px;height:64px;border-radius:50%;background:var(--groen-licht);color:var(--groen-3);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.demo-ok .rond svg{width:32px;height:32px}
.demo-ok h3{font-size:24px;color:var(--groen);margin-bottom:8px}
.demo-ok p{color:var(--muted)}
.demo-ok .knop{margin-top:18px}
@media (max-width:900px){.demo-in{grid-template-columns:1fr;gap:32px;text-align:left}.demo-kaart{padding:22px}}

/* contactpagina */
.contact-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.contact-kanalen{display:grid;gap:12px;margin-top:28px}
.kanaal{display:flex;gap:14px;align-items:center;background:var(--room);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--lijn)}
.kanaal:hover{box-shadow:inset 0 0 0 1.5px var(--groen-3)}
.kanaal i{flex:none;width:44px;height:44px;border-radius:12px;background:var(--groen);color:var(--saffraan);display:flex;align-items:center;justify-content:center;font-style:normal}
.kanaal i svg{width:22px;height:22px;fill:currentColor}
.kanaal b{display:block}.kanaal span{color:var(--muted);font-size:14.5px}
.contact-kaart{background:var(--room);border-radius:24px;padding:28px;box-shadow:inset 0 0 0 1px var(--lijn)}
@media (max-width:900px){.contact-in{grid-template-columns:1fr}}

/* support-assistent */
.chat-knop{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--groen);color:#fff;padding:12px 18px 12px 12px;font:700 15px/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 16px 36px -14px rgba(14,59,46,.7)}
.chat-knop .bol{width:36px;height:36px;border-radius:50%;background:var(--saffraan);display:flex;align-items:center;justify-content:center}
.chat-knop .bol img{width:24px;height:24px;border-radius:6px}
.chat-knop[aria-expanded="true"]{display:none}
.chat{position:fixed;right:18px;bottom:18px;z-index:61;width:min(380px,calc(100vw - 24px));height:min(600px,calc(100vh - 40px));background:#fff;border-radius:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden}
.chat[hidden]{display:none}
.chat-kop{background:var(--groen);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.chat-kop img{width:34px;height:34px;border-radius:9px}
.chat-kop b{display:block;font-size:16px}.chat-kop span{font-size:12.5px;opacity:.8}
.chat-kop button{margin-left:auto;width:36px;height:36px;border-radius:10px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer}
.chat-lijst{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--room-2)}
.bericht{max-width:86%;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.45;white-space:pre-line}
.bericht.zij{background:#fff;box-shadow:inset 0 0 0 1px var(--lijn);border-bottom-left-radius:6px;align-self:flex-start}
.bericht.ik{background:var(--groen);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.bericht .knop{margin-top:10px;min-height:40px;padding:8px 14px;font-size:14px}
.bericht.typt{color:#8A8478}
.chat-snel{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;background:var(--room-2)}
.chat-snel button{border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--lijn);padding:7px 12px;font:600 13px/1.2 Inter,system-ui,sans-serif;color:var(--groen);cursor:pointer}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--lijn);background:#fff}
.chat-form input{flex:1;font:inherit;font-size:15.5px;border:1.5px solid var(--lijn);border-radius:12px;padding:10px 12px;outline:none;min-width:0}
.chat-form input:focus{border-color:var(--groen-3)}
.chat-form button{border:0;border-radius:12px;background:var(--saffraan);color:#1D1404;font-weight:800;padding:0 14px;cursor:pointer}
.chat-noot{font-size:11.5px;color:#8A8478;text-align:center;padding:0 12px 10px;background:#fff}
@media (max-width:520px){.chat{right:12px;bottom:12px}.chat-knop span.tekst{display:none}.chat-knop{padding:10px}}
.paginatitel{font-size:clamp(36px,4.8vw,56px);color:var(--groen);margin-bottom:6px}

/* ---------- demo aanvragen (demo.html): drie stappen ---------- */
[hidden]{display:none!important}
.demo-pagina{padding:46px 0 80px;background:radial-gradient(900px 420px at 100% 0,rgba(255,182,39,.16),transparent 60%),var(--room)}
.demo-raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.demo-uitleg{position:sticky;top:100px}
.demo-uitleg h1{font-size:clamp(34px,4.4vw,52px);color:var(--groen);max-width:14ch}
.demo-uitleg .lead{color:var(--muted);margin-top:14px;font-size:18px}
.demo-uitleg .vinkjes li{color:var(--muted)}.demo-uitleg .vinkjes li b{color:var(--ink)}
.demo-tijdlijn{margin-top:30px;display:grid;gap:0;border-left:2px dashed #D9CFB9;padding-left:0;margin-left:15px}
.demo-tijdlijn div{display:flex;gap:14px;align-items:flex-start;margin-left:-16px;padding:8px 0}
.demo-tijdlijn i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--groen);color:#fff;font:800 14px/30px var(--kop);text-align:center;font-style:normal}
.demo-tijdlijn span{font-weight:700;color:var(--ink);line-height:1.3;padding-top:4px}
.demo-tijdlijn small{display:block;font-weight:500;color:#8A8478;font-size:14px}
.wizard{background:#fff;border-radius:28px;padding:30px;box-shadow:0 30px 70px -36px rgba(14,59,46,.45);border:1px solid var(--lijn)}
.wz-voortgang{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wz-voortgang li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;color:#9A9384;padding-top:12px;border-top:4px solid #ECE5D6}
.wz-voortgang i{flex:none;width:26px;height:26px;border-radius:50%;background:#ECE5D6;color:#7A7364;font:800 13px/26px Inter,sans-serif;text-align:center;font-style:normal}
.wz-voortgang li[aria-current]{color:var(--groen);border-top-color:var(--saffraan)}
.wz-voortgang li[aria-current] i{background:var(--saffraan);color:#1D1404}
.wz-voortgang li.gedaan{color:var(--groen-3);border-top-color:var(--groen-3)}
.wz-voortgang li.gedaan i{background:var(--groen-3);color:#fff}
.wz-stap{border:0;margin:0;padding:0;min-width:0}
.wz-stap legend{font:800 clamp(24px,2.6vw,30px)/1.15 var(--kop);color:var(--groen);letter-spacing:-.02em;padding:0;outline:none}
.wz-sub{color:var(--muted);margin:8px 0 18px;font-size:16px}
.wizard .veld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.wizard label,.wz-label{font-weight:600;font-size:14.5px;color:var(--ink)}
.wizard label span{color:#8A8478;font-weight:500}
.wizard input[type=text],.wizard input:not([type]),.wizard input[type=email],.wizard input[type=tel],.wizard textarea{width:100%;font:inherit;font-size:16px;border:1.5px solid var(--lijn);border-radius:12px;padding:12px 14px;min-height:50px;background:var(--room-2);color:var(--ink);outline:none}
.wizard textarea{min-height:96px;resize:vertical}
.wizard input:focus,.wizard textarea:focus{border-color:var(--groen-3);background:#fff;box-shadow:0 0 0 3px rgba(31,122,92,.16)}
.wizard [aria-invalid=true]{border-color:var(--rood)!important;box-shadow:0 0 0 3px rgba(200,52,31,.14)!important}
.wz-zoek{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) auto;gap:10px;align-items:end}
.wz-zoek .veld{margin:0}
.wz-zoek .knop{min-height:50px}
.wz-zoek-link{grid-template-columns:minmax(0,1fr) auto;margin-top:12px}
.wz-resultaten{margin-top:16px}
.wz-label{margin:0 0 8px}
.wz-lijst{display:grid;gap:8px;max-height:430px;overflow:auto;padding:2px}
.wz-zaak{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--room-2);border:1.5px solid var(--lijn);border-radius:16px;padding:10px 14px 10px 10px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,background .15s,transform .15s}
.wz-zaak:hover{border-color:var(--groen-3);background:#fff}
.wz-zaak:active{transform:scale(.99)}
.wz-zaak i{margin-left:auto;font-style:normal;font-weight:700;font-size:14px;color:var(--groen);background:var(--groen-licht);border-radius:999px;padding:6px 12px;flex:none}
.wz-zaak.is-gekozen{background:var(--groen-licht);border-color:var(--groen-3);cursor:default}
.wz-zaaklogo{width:52px;height:52px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--lijn);flex:none}
.wz-letter{display:flex;align-items:center;justify-content:center;font:800 22px/1 var(--kop);color:var(--groen)}
.wz-zaaktekst{display:flex;flex-direction:column;min-width:0}
.wz-zaaktekst b{font-size:16px;line-height:1.3}
.wz-zaaktekst small{color:var(--muted);font-size:13.5px;line-height:1.35}
.wz-zaaktekst .wz-score{color:var(--groen-3);font-weight:600}
.wz-laden,.wz-niets{color:var(--muted);font-size:15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--room-2);border-radius:14px;padding:12px 14px}
.wz-spin{width:18px;height:18px;border-radius:50%;border:3px solid #E6DFD0;border-top-color:var(--groen-3);animation:wzdraai .8s linear infinite}
@keyframes wzdraai{to{transform:rotate(360deg)}}
.wz-of{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wz-link summary{cursor:pointer;font-weight:700;color:var(--groen);font-size:15px}
.wz-link{width:100%}
.wz-tekstknop{border:0;background:none;padding:0;font:inherit;font-weight:700;font-size:15px;color:var(--groen-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wz-zelf{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:16px}
.wz-breed{grid-column:1/-1}
.wz-groep{margin-bottom:18px}
.wz-chips{display:flex;flex-wrap:wrap;gap:8px}
.wz-chips label{position:relative;cursor:pointer}
.wz-chips input{position:absolute;opacity:0;width:1px;height:1px}
.wz-chips span{display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--lijn);background:var(--room-2);color:var(--ink)!important;font-weight:600!important;font-size:15px;transition:border-color .15s,background .15s}
.wz-chips label:hover span{border-color:var(--groen-3)}
.wz-chips input:checked+span{background:var(--groen);border-color:var(--groen);color:#fff!important}
.wz-chips input:focus-visible+span{outline:3px solid var(--saffraan);outline-offset:2px}
.wz-tip{color:#8A8478;font-size:13.5px;margin-top:8px}
[data-wz-domeinvak]{margin-top:12px}
.wz-logo:not([hidden]){display:flex!important;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--lijn);border-radius:14px;background:var(--room-2);margin-bottom:12px;cursor:pointer}
.wz-logo input{width:20px;height:20px;accent-color:var(--groen-3);flex:none}
.wz-logo img{width:44px;height:44px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--lijn)}
.wz-velden{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.wz-overzicht{background:var(--room-2);border-radius:16px;padding:14px 16px;margin-top:6px}
.wz-overzicht div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-top:1px solid var(--lijn);font-size:14.5px}
.wz-overzicht div:first-of-type{border-top:0}
.wz-overzicht span{color:var(--muted)}
.wz-overzicht b{text-align:right;overflow-wrap:anywhere}
.wz-knoppen{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.wz-knoppen [data-wz-verder]{margin-left:auto;min-width:200px}
.wz-klaar{text-align:center;padding:10px 4px}
.wz-klaar .rond{width:72px;height:72px;border-radius:50%;background:var(--groen-licht);color:var(--groen-3);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.wz-klaar .rond svg{width:36px;height:36px}
.wz-klaar h2{font-size:clamp(26px,3vw,34px);color:var(--groen);margin:0 auto 10px;outline:none}
.wz-klaar p{color:var(--muted);max-width:46ch;margin:0 auto}
.wz-tijdlijn{list-style:none;padding:0;margin:24px auto 6px;max-width:420px;text-align:left;display:grid;gap:4px}
.wz-tijdlijn li{display:flex;gap:12px;align-items:flex-start;padding:8px 10px;border-radius:12px;color:#9A9384}
.wz-tijdlijn i{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font:800 13px/1 Inter,sans-serif;font-style:normal}
.wz-tijdlijn span{font-weight:700;line-height:1.3}
.wz-tijdlijn small{display:block;font-weight:500;font-size:13.5px}
.wz-tijdlijn li.gedaan{color:var(--groen-3)}.wz-tijdlijn li.gedaan i{background:var(--groen-3);border-color:var(--groen-3);color:#fff}
.wz-tijdlijn li.nu{color:var(--ink);background:#FFF6DF}.wz-tijdlijn li.nu i{background:var(--saffraan);border-color:var(--saffraan);color:#1D1404}
.wz-klaar .knoppenrij{justify-content:center;margin-top:22px}
@media (max-width:900px){.demo-raster{grid-template-columns:1fr;gap:24px}.demo-uitleg{position:static}.demo-tijdlijn,.demo-uitleg .vinkjes{display:none}}
@media (max-width:600px){
  .demo-pagina{padding:24px 0 56px}
  .wizard{padding:20px 16px;border-radius:22px}
  .wz-voortgang span{display:none}
  .wz-voortgang li{justify-content:center}
  .wz-zoek{grid-template-columns:1fr 1fr}
  .wz-zoek .veld:first-child{grid-column:1/-1}
  .wz-zoek-link{grid-template-columns:1fr}
  .wz-zelf,.wz-velden{grid-template-columns:1fr}
  .wz-zaak i{display:none}
  .wz-knoppen{flex-direction:column-reverse}
  .wz-knoppen .knop{width:100%}
  .wz-knoppen [data-wz-verder]{min-width:0}
}
@media (prefers-reduced-motion:reduce){.wz-spin{animation:none}}
.demo-stap{color:#8A8478;font-size:14px;margin-bottom:2px}

/* ---------- SEO-pagina's: branches, onderwerpen, kennisbank, steden (bouw-seo.mjs) ---------- */
.menu a[aria-current="page"]{color:var(--groen);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.pkop{padding:56px 0 40px;background:var(--room)}
.pkop h1{font-size:clamp(36px,5.2vw,62px);max-width:20ch;color:var(--groen)}
.pkop .lead{max-width:62ch}
.pkop .label{margin-top:22px}
.kruimels ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;font-size:14px;color:var(--muted)}
.kruimels li+li::before{content:"›";margin-right:8px;color:var(--groen-3)}
.kruimels a{color:var(--groen-3);text-decoration:none;font-weight:600}
.kruimels a:hover{text-decoration:underline}
.artikel-meta{margin-top:18px;color:var(--muted);font-size:15px}
.artikel{max-width:860px;padding-top:24px;padding-bottom:72px}
.tekstblok{padding-top:40px}
.tekstblok h2{font-size:clamp(26px,3.2vw,36px);max-width:none;color:var(--groen);margin-bottom:14px}
.tekstblok p{color:var(--ink);font-size:17.5px;line-height:1.7;margin-top:12px;max-width:68ch}
.tekstblok .vinkjes{margin-top:18px}
.tekstblok .vinkjes li{font-size:17px}
.is-artikel .tekstblok p{font-size:18px}
.reken-blok .reken{margin-top:20px}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:44px;padding:22px 24px;background:var(--groen);color:#fff;border-radius:var(--rond);box-shadow:var(--schaduw)}
.cta-band b{display:block;font-family:var(--kop);font-size:21px;letter-spacing:-.01em}
.cta-band span{display:block;color:rgba(255,255,255,.8);font-size:15.5px;margin-top:4px}
.cta-band .knop{flex:none}
.kaartlinks{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.kaartlinks a{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 22px;background:var(--wit);border-radius:18px;box-shadow:inset 0 0 0 1px var(--lijn);text-decoration:none;transition:box-shadow .2s,transform .2s}
.sectie .kaartlinks a{background:var(--room-2)}
.kaartlinks a:hover{box-shadow:inset 0 0 0 2px var(--groen-3);transform:translateY(-2px)}
.kaartlinks b{font-family:var(--kop);font-size:19px;letter-spacing:-.01em;line-height:1.2;color:var(--groen)}
.kaartlinks span{color:var(--muted);font-size:15px;line-height:1.5}
.kaartlinks-groot{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.eind-kort{text-align:center;display:flex;flex-direction:column;align-items:center}
.eind-kort h2{max-width:none}
.eind-kort .lead{margin-left:auto;margin-right:auto}
/* grote voettekst met alle pagina's (interne links) */
.voet-groot{padding:64px 0 28px}
.voet-kolommen{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr 1fr;gap:32px}
.voet-merk p{margin-top:14px;font-size:15px;color:rgba(255,255,255,.7);max-width:30ch}
.voet-merk .knop{margin-top:6px;color:#1D1404}
.voet-groot h2{font:800 13px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--saffraan);margin-bottom:12px;max-width:none}
.voet-groot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14.5px}
.voet-groot ul a{text-decoration:none;color:rgba(255,255,255,.78)}
.voet-groot ul a:hover{color:#fff;text-decoration:underline}
.voet-steden{grid-template-columns:1fr 1fr;column-gap:12px}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:rgba(255,255,255,.55)}
.voet-onder nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.voet-onder a{text-decoration:none;color:rgba(255,255,255,.7)}
.voet-onder a:hover{color:#fff}
@media (max-width:1000px){.voet-kolommen{grid-template-columns:1fr 1fr 1fr}.voet-merk{grid-column:1/-1}}
@media (max-width:640px){.voet-kolommen{grid-template-columns:1fr 1fr}.cta-band{flex-direction:column;align-items:flex-start}.pkop{padding:36px 0 28px}.tekstblok p{font-size:17px}}
.pkop h1,.tekstblok h2,.kaartlinks b,.cta-band b{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ---------- Rustiger op de telefoon (18 okt) ---------- */
.menu-extra{display:none}
.alleen-groot{display:inline}
.vk summary{list-style:none;cursor:default}
.vk summary::-webkit-details-marker{display:none}
@media (max-width:900px){
  .menu-extra{display:block;margin-top:6px;border-top:1px solid var(--lijn);padding-top:16px!important;color:var(--groen)!important}
}
@media (max-width:640px){
  /* kopbalk: Demo in beeld, Inloggen in het menu */
  .kop-inlog{display:none}
  .kop-knoppen .kop-demo{display:inline-flex;min-height:42px;padding:8px 14px;font-size:15px}
  .alleen-groot{display:none}
  /* minder ruimte en kleinere koppen */
  .sectie{padding:52px 0}
  h2{font-size:clamp(28px,8vw,36px)}
  .lead{font-size:16.5px}
  .label{margin-bottom:10px}
  /* hero: minder losse elementen */
  .held .vlag{font-size:13px;padding:6px 12px}
  .held .betaal,.held-beeld .chip{display:none}
  .held .knoppenrij{gap:10px;margin-top:22px}
  .held .knoppenrij .knop-groot{flex:1 1 0;min-height:52px;padding:12px 14px;font-size:16px}
  .feiten-in>div{padding:0}
  /* stappen, tegels en kaarten compacter */
  .stappen{margin-top:28px;gap:12px}
  .stappen li{padding:20px 18px;display:grid;grid-template-columns:auto 1fr;column-gap:14px}
  .stappen .nr{width:38px;height:38px;font-size:18px;margin:0;grid-row:span 2}
  .stappen h3{margin:6px 0 4px}
  .tegels{gap:10px;margin-top:22px}
  .tegel{padding:16px}
  .vinkjes{gap:10px}
  .kaartlinks{gap:10px;margin-top:22px}
  .kaartlinks a{padding:14px 16px}
  .kaartlinks b{font-size:17px}
  /* voor wie op de homepagina: korte knoppen in twee kolommen */
  #branches .kaartlinks{grid-template-columns:1fr 1fr;gap:8px}
  #branches .kaartlinks a{padding:12px 14px;border-radius:14px}
  #branches .kaartlinks b{font-size:15.5px}
  #branches .kaartlinks span{display:none}
  /* vragen */
  .vragen{margin-top:22px;gap:8px}
  .vragen summary{padding:16px 48px 16px 16px;font-size:16px}
  /* inhoudspagina's */
  .pkop h1{font-size:clamp(32px,9vw,42px)}
  .tekstblok{padding-top:30px}
  .tekstblok h2{font-size:24px}
  .cta-band{margin-top:30px;padding:18px}
  .pkop .knoppenrij .knop-groot{flex:1 1 0;padding:12px;font-size:15.5px}
  /* voettekst: inklapbaar, compact */
  .voet-groot{padding:40px 0 24px}
  .voet-kolommen{grid-template-columns:1fr;gap:0}
  .voet-merk{padding-bottom:20px}
  .vk{border-top:1px solid rgba(255,255,255,.12)}
  .vk summary{cursor:pointer;padding:16px 0;position:relative}
  .vk summary h2{margin:0}
  .vk summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--saffraan);font:700 22px/1 Inter,sans-serif}
  .vk[open] summary::after{content:"–"}
  .vk ul{padding-bottom:16px}
  .voet-steden{grid-template-columns:1fr 1fr 1fr}
  .voet-onder{margin-top:8px}
}