/* Woonbesluit — opmaak van index.html; de gedeelde klassen staan in style.css */
/* ===================================================================
   DE VOORPAGINA (ontwerp VP)
   De besparing staat vooraan: de bezoeker kiest een type woning en een
   bouwperiode en ziet wat een huis als het zijne bespaart. Daaronder hoe het
   werkt, drie voorbeeldhuizen, waar de getallen vandaan komen, het verhaal,
   de vragen en contact. De kop en de voet (.lp-kop, .lp-voet) horen ook bij
   de gemeentenpagina en komen uit v3kop.html en v3voet.html. Alles wat alleen
   hier voorkomt heet .vp-…
   =================================================================== */
body.voorpagina{background:var(--vlak)}
.vp-hoofd{max-width:none;padding:0}
.lp-wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
/* kop */
.lp-kop{display:flex;align-items:center;gap:16px 28px;min-height:74px;flex-wrap:wrap}
.lp-kop .merkblok{display:flex;align-items:center;gap:10px;color:var(--gray-900);text-decoration:none;flex:1 0 auto}
.lp-kop .merkblok b{font-size:18px;font-weight:800;letter-spacing:-.01em}
/* W5: met "met hulp van" staat de stichting direct naast ons logo */
.lp-kop:has(>.via-kop:not([hidden])) .merkblok{flex:0 0 auto}
.lp-kop .via-kop{flex:1 0 auto}
.lp-nav{display:flex;align-items:center;gap:6px 26px;flex-wrap:wrap;font-size:15px}
.lp-nav a{color:var(--gray-700);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 2px}
.lp-nav a:hover{color:var(--merk-diep);text-decoration:underline}
.lp-nav a.lp-knop{background:var(--knop);color:var(--knop-op);border-radius:var(--r-m);padding:0 18px;font-weight:800;text-decoration:none}
.lp-nav a.lp-knop:hover{background:var(--knop-hover);text-decoration:none}
/* knoppen: één groene per beeld, de tweede is een omlijning */
.lp-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:var(--r-m);padding:0 22px;text-decoration:none;font-weight:800;font-size:15.5px;border:2px solid var(--gray-300);color:var(--gray-900);background:var(--vlak);cursor:pointer;font-family:inherit}
.lp-cta .ico{width:22px;height:22px;flex:none}
.lp-cta.hoofd{background:var(--knop);border-color:var(--knop);color:var(--knop-op)}
.lp-cta.hoofd:hover{background:var(--knop-hover);border-color:var(--knop-hover)}
.lp-cta.rand{border-color:var(--merk-diep);color:var(--merk-diep);background:transparent}
.lp-cta.rand:hover{background:var(--merk-tint)}
/* de vraag, je huis in twee keuzes, en de besparing ernaast */
.vp-vraag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:start;padding-top:40px;padding-bottom:64px}
.vp-links{display:flex;flex-direction:column;gap:20px}
.vp-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font-size:13.5px;font-weight:800;color:var(--merk-diep);background:var(--merk-tint);border-radius:var(--r-rond);padding:5px 12px}
.vp-badge .ico{width:17px;height:17px}
.vp-vraag h1{font-size:clamp(34px,4.4vw,50px);line-height:1.04;letter-spacing:-.04em;margin:0;font-weight:800;color:var(--gray-900);text-wrap:balance}
.vp-vraag p.onder{font-size:clamp(17px,1.5vw,18.5px);line-height:1.5;color:var(--gray-700);margin:0;max-width:34em}
.vp-kiezer{display:flex;flex-direction:column;gap:14px;background:var(--papier);border:1px solid var(--gray-300);border-radius:20px;padding:18px 20px}
.vp-kies{border:0;margin:0;padding:0;min-width:0}
.vp-vraagje{font-size:14.5px;font-weight:800;padding:0;margin:0 0 8px;color:var(--gray-900)}
.vp-pillen{display:flex;flex-wrap:wrap;gap:7px}
.vp-pil{position:relative;display:inline-flex}
.vp-pil input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.vp-pil span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:2px solid var(--gray-300);border-radius:var(--r-rond);background:var(--vlak);font-size:14px;font-weight:700;color:var(--gray-900)}
.vp-pil input:checked+span{border-color:var(--merk);background:var(--merk-tint)}
.vp-pil input:checked+span::before{content:"✓";content:"✓"/"";font-weight:800;color:var(--merk-diep)}
.vp-pil input:focus-visible+span{outline:3px solid var(--merk-diep);outline-offset:3px}
.vp-cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.vp-cta .lp-cta.hoofd{min-height:60px;padding:0 28px;font-size:18px}
.vp-cta-noot{font-size:15px;color:var(--gray-700)}
/* UX 22: staat er een woonplan in deze browser, dan staat dat bovenaan. */
.vp-terug{margin:0 0 18px;padding:14px 18px;border:2px solid var(--merk-diep);border-radius:var(--r-l);background:var(--merk-tint)}
.vp-terug[hidden]{display:none}
.vp-terug p{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--gray-900)}
.vp-rekening{display:inline-flex;margin-top:12px}
.vp-beloftes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14.5px;color:var(--gray-700)}
.vp-beloftes li{display:flex;gap:7px;align-items:center}
.vp-beloftes .ico{width:19px;height:19px;flex:none;color:var(--goed)}
/* de kaart: wat een huis als dit bespaart, uit de rekenkern bij het bouwen */
.vp-bes{background:var(--merk-diep);color:#fff;border-radius:var(--r-xl);padding:26px 28px;display:flex;flex-direction:column;gap:16px;scroll-margin-top:16px}
.vp-bes p{margin:0}
.vp-bes-kop{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--goed-op-diep)}
.vp-bes-kop .ico{width:19px;height:19px;flex:none}
.vp-bes-getal{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:17px;font-weight:700}
.vp-bes-getal span{font-size:clamp(44px,6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1}
.vp-bes-zuinig{font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.vp-bes-zin{font-size:var(--t-lopend);line-height:var(--t-regel)}
.vp-maat{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-direction:column;gap:8px}
.vp-maat li{display:grid;grid-template-columns:22px minmax(0,1fr) 110px 64px;gap:10px;align-items:center;font-size:var(--t-toel)}
.vp-maat .ico{width:19px;height:19px;color:var(--goed-op-diep)}
.vp-maat b{text-align:right;font-weight:800}
.vp-bar{display:block;height:8px;background:rgba(255,255,255,.16);border-radius:4px;overflow:hidden}
.vp-bar i{display:block;height:100%;background:var(--merk)}
.vp-maat li.vp-maat-meer{display:block;font-size:var(--t-toel);color:var(--op-diep)}
.vp-bes-onder{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
.vp-bes-onder div{display:flex;flex-direction:column}
.vp-bes-onder dt{font-size:13px;color:var(--op-diep)}
.vp-bes-onder dd{margin:0;font-size:20px;font-weight:800}
.vp-bes-bron{font-size:var(--t-toel);color:var(--op-diep);line-height:1.45}
/* zo werkt het */
.vp-zo{padding:48px 0 44px;border-bottom:1px solid var(--gray-100)}
.vp-oog{font-size:14px;font-weight:800;color:var(--goed)}
.vp-zo h2,.vp-besparen h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;margin:4px 0 0;line-height:1.1;color:var(--gray-900)}
.vp-stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:26px 0 0;padding:0;list-style:none}
.vp-stappen li{display:flex;flex-direction:column;gap:8px}
.vp-stappen .nr{width:36px;height:36px;border-radius:50%;background:var(--merk-tint);color:var(--merk-diep);font-size:16px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.vp-stappen b{font-size:16.5px}
.vp-stappen span.tekst{font-size:var(--t-lopend);color:var(--gray-700);line-height:1.5}
/* drie huizen, doorgerekend */
.vp-besparen{background:var(--gray-100);padding:44px 0}
.vp-kopregel{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;justify-content:space-between}
.vp-kopregel p{margin:0;font-size:var(--t-toel);color:var(--gray-700);max-width:22em}
.vp-huizen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px;margin-top:22px}
.vp-huis{background:transparent;border:2px dashed var(--gray-500);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px}
.vp-huis-kop{display:flex;gap:12px;align-items:flex-start}
.vp-huis-foto{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px}
.vp-huis-ico{width:44px;height:44px;border-radius:12px;background:var(--merk-tint);color:var(--merk-diep);display:inline-flex;align-items:center;justify-content:center;flex:none}
.vp-huis-ico .ico{width:24px;height:24px}
.vp-huis h3{margin:0;font-size:17px;color:var(--gray-900)}
.vp-huis-kop p{margin:2px 0 0;font-size:var(--t-toel);color:var(--gray-700)}
.vp-huis-getal{margin:0;display:flex;align-items:baseline;gap:6px;font-size:14px;font-weight:700}
.vp-huis-getal span{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--goed)}
.vp-huis-onder{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding-top:10px;border-top:1px solid var(--gray-100);font-size:13.5px}
.vp-huis-onder div{display:flex;flex-direction:column}
.vp-huis-onder dt{color:var(--gray-700)}
.vp-huis-onder dd{margin:0;font-size:15px;font-weight:800}
.vp-huis .lp-cta{min-height:44px;font-size:14.5px;margin-top:2px}
/* K6: een rekenvoorbeeld is gestippeld, een echt verhaal (.vr-kaart) niet */
.vp-reken{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px;border-radius:var(--r-rond);border:1px dashed var(--gray-500);color:var(--gray-700);font-size:13.5px;font-weight:700}
.vp-reken .ico{width:17px;height:17px}
/* echte huizen, gemeten (VH): de kaarten staan ook op /verhalen/ */
.vr-blok{padding:44px 0}
.vr-blok-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 16px}
.vr-blok h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;margin:4px 0 0;line-height:1.1;color:var(--gray-900)}
.vr-alle{min-height:44px;display:inline-flex;align-items:center;font-size:16px;font-weight:700;color:var(--merk-diep)}
.vr-blok-intro{margin:10px 0 0;font-size:var(--t-lopend);line-height:var(--t-regel);color:var(--gray-700);max-width:40em}
.vr-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px;margin-top:22px}
.vr-kaart{text-decoration:none;color:var(--gray-900);background:var(--vlak);border:1px solid var(--gray-300);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--schaduw-kaart)}
.vr-kaart:hover{border-color:var(--merk-diep)}
.vr-kaart:focus-visible{outline:3px solid var(--merk-diep);outline-offset:3px}
.vr-kaart-foto{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--gray-100)}
.vr-kaart-tekst{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.vr-band{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:4px 12px;border-radius:14px;background:var(--merk-diep);color:#fff;font-size:13.5px;font-weight:700;line-height:1.25}
.vr-band .ico{width:17px;height:17px;flex:none;color:var(--goed-op-diep)}
.vr-kaart-kop{font-size:18px;line-height:1.25;text-wrap:balance}
.vr-kaart-wie{font-size:var(--t-toel);color:var(--gray-700)}
.vr-kern{margin-top:auto;display:flex;gap:8px;align-items:center;padding-top:10px;border-top:1px solid var(--gray-100)}
.vr-kern .ico{width:24px;height:24px;flex:none}
.vr-kern div{display:flex;flex-direction:column}
.vr-kern b{font-size:18px}
.vr-kern span{font-size:13px;color:var(--gray-700)}
.vr-kern.gemeten .ico,.vr-kern.gemeten b{color:var(--goed)}
.vr-kern.volgt .ico,.vr-kern.volgt b{color:var(--info)}
.vr-concept{position:sticky;top:0;z-index:20;display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 16px;border:3px dashed var(--let);border-radius:12px;background:var(--let-tint);color:var(--let-tekst);font-size:15px;line-height:1.45}
.vr-concept .ico{width:22px;height:22px;flex:none;color:var(--let)}
.vr-concept-merk{align-self:flex-start;font-size:13px;font-weight:800;padding:2px 9px;border:2px dashed var(--let);border-radius:var(--r-rond);color:var(--let-tekst)}
.vr-maker{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:#fff}
.vr-maker .ico{width:19px;height:19px}
/* waar de getallen vandaan komen */
.vp-bronnen{padding:40px 0 48px}
/* W5: hulp in jouw gemeente, het zoekveld naar de gemeentenpagina */
.vp-gemeente{padding:8px 0 48px}
.vp-gemzoek{display:flex;flex-direction:column;gap:6px;max-width:520px;margin-top:16px}
.vp-gemzoek label{font-size:15px;font-weight:700;color:var(--gray-900)}
.vp-gemzoek div{display:flex;gap:8px}
.vp-gemzoek input{flex:1;min-width:0;font:inherit;font-size:16px;min-height:50px;padding:0 14px;border:1px solid var(--veldrand);border-radius:12px;background:var(--veld);color:var(--gray-900)}
.vp-bronlijst{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin:0;padding:0;list-style:none}
.vp-bronlijst li{display:flex;gap:10px;font-size:var(--t-toel);line-height:1.45}
.vp-bronlijst .ico{width:22px;height:22px;flex:none;color:var(--merk-diep)}
.vp-bronlijst span.tekst{color:var(--gray-700)}
/* het verhaal: het enige blok met kleur */
.vp-verhaal{background:var(--merk-diep);color:#fff;padding:clamp(40px,6vw,64px) 0}
.vp-verhaal h2{font-size:14px;font-weight:800;color:var(--goed-op-diep);margin:0 0 16px}
.vp-verhaal p{margin:0 0 14px;font-size:var(--t-lopend);line-height:1.6;max-width:42em}
.vp-verhaal p:last-child{margin-bottom:0}
.vp-verhaal .aanhef{display:block;font-size:clamp(20px,2.4vw,26px);line-height:1.35;letter-spacing:-.015em;font-weight:700;margin-bottom:12px}
.vp-verhaal :focus-visible{outline-color:var(--merk-licht)}
/* bronnen, vragen en contact: links de kop, rechts de inhoud */
.vp-tweekol{display:grid;grid-template-columns:320px 1fr;gap:56px}
.vp-vragen{padding:48px 0}
.vp-contact{padding:36px 0 56px}
.vp-contact .lp-wrap>.vp-tweekol{border-top:1px solid var(--gray-300);padding-top:36px}
.vp-tweekol h2{font-size:clamp(24px,3vw,30px);letter-spacing:-.03em;margin:0 0 12px;color:var(--gray-900);line-height:1.15}
.vp-bronnen h2{margin-top:4px}
.vp-tweekol p{margin:0;font-size:var(--t-lopend);color:var(--gray-700);line-height:1.5}
.vp-tweekol a{color:var(--merk-diep)}
.vp-lijst details{border-top:1px solid var(--gray-300)}
.vp-lijst details:last-child{border-bottom:1px solid var(--gray-300)}
.vp-lijst summary{cursor:pointer;font-weight:700;font-size:17px;min-height:58px;display:flex;align-items:center;gap:12px;list-style:none;color:var(--gray-900)}
.vp-lijst summary::-webkit-details-marker{display:none}
.vp-lijst summary::after{content:"+";content:"+"/"";margin-left:auto;font-size:26px;font-weight:400;color:var(--merk-diep);flex:none;width:24px;text-align:center}
.vp-lijst details[open] summary::after{content:"–";content:"–"/""}
.vp-lijst details p{margin:0 0 18px;font-size:var(--t-lopend);line-height:1.6;color:var(--gray-700);max-width:44em}
/* het formulier */
.vp-formvak{max-width:620px}
.vp-veld{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:700;margin:0 0 12px;color:var(--gray-900)}
.vp-veld input,.vp-veld textarea{font:inherit;font-size:16px;font-weight:400;width:100%;box-sizing:border-box;min-height:50px;padding:0 14px;border:1px solid var(--veldrand);border-radius:12px;background:var(--veld);color:var(--gray-900)}
.vp-veld textarea{min-height:120px;padding:12px 14px;resize:vertical}
.vp-veld [aria-invalid="true"]{border:2px solid var(--fout)}
.vp-fout{display:flex;gap:6px;align-items:center;font-size:var(--t-toel);color:var(--fout);margin:-6px 0 12px}
.vp-fout .ico{width:18px;height:18px;flex:none}
.vp-fout[hidden]{display:none}
.vp-acties{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.vp-acties .lp-cta{min-height:50px;font-size:15.5px}
.vp-klein{font-size:var(--t-toel);color:var(--gray-500);margin:12px 0 0;line-height:1.45;max-width:60ch}
.vp-uit{margin:12px 0 0;font-size:var(--t-lopend);min-height:1.2em}
.vp-uit.fout{display:flex;gap:6px;align-items:flex-start;color:var(--fout)}
.vp-uit .ico{width:18px;height:18px;flex:none;margin-top:2px}
.vp-klaar{display:flex;gap:10px;background:var(--goed-tint);border:1px solid var(--goed-rand);border-radius:var(--r-m);padding:16px 18px;font-size:var(--t-lopend);line-height:1.5}
.vp-klaar[hidden]{display:none}
.vp-klaar .ico{width:22px;height:22px;flex:none;color:var(--goed);margin-top:1px}
.vp-klaar button{min-height:44px;border:0;background:transparent;color:var(--merk-diep);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer;padding:0 4px}
.vp-strik{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* mijn rapport kwijt: klein, onder het formulier */
.vp-rapport{margin-top:28px;border-top:1px solid var(--gray-300)}
.vp-rapport summary{cursor:pointer;font-weight:700;font-size:15.5px;min-height:52px;display:flex;align-items:center;color:var(--merk-diep)}
.vp-rapport .velden{display:grid;grid-template-columns:8rem 7rem 1fr;gap:12px;margin-bottom:8px}
.vp-rapport .vp-veld{margin:0}
.vp-rapport p.uitleg{margin:0 0 14px;font-size:var(--t-lopend)}
@media (max-width:1020px){
  .vp-vraag{grid-template-columns:1fr;gap:36px;padding-bottom:48px}
  .vp-tweekol{grid-template-columns:1fr;gap:20px}
  .vp-stappen{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .lp-kop{padding-top:12px;padding-bottom:6px;gap:8px}
  /* geen hamburgermenu: vier links en Begin passen, en zo werkt het ook zonder script */
  .lp-nav{gap:8px}
  .lp-nav a{background:var(--merk-tint);border:1px solid var(--gray-300);border-radius:var(--r-rond);padding:0 14px;font-size:14px}
  .lp-nav a.lp-knop{border-color:var(--knop)}
}
@media (max-width:640px){
  .vp-vraag .lp-cta.hoofd{display:flex;flex:1 1 100%}
  .vp-bes{padding:22px 20px}
  .vp-maat li{grid-template-columns:22px minmax(0,1fr) auto}
  .vp-bar{display:none}
  .vp-stappen{grid-template-columns:1fr}
  .vp-bronlijst{grid-template-columns:1fr}
  .vp-rapport .velden{grid-template-columns:1fr}
  .vp-acties .lp-cta{width:100%}
}
/* de voet: dezelfde op de voorpagina en de gemeentenpagina */
.lp-voet{background:var(--gray-100);padding:22px 0;font-size:14px;color:var(--gray-700)}
.lp-voetrij{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center}
.lp-voetmerk{flex:1;min-width:16em}
.lp-voetlinks{display:flex;flex-wrap:wrap;gap:0 22px}
.lp-voetlinks a{color:var(--gray-700);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.lp-voetlinks a:hover{color:var(--merk-diep);text-decoration:underline}