/* Woonbesluit — opmaak van gemeenten.html; de gedeelde klassen staan in style.css */
/* ===================================================================
   VOOR GEMEENTEN EN CORPORATIES
   Een verkooppagina, maar met dezelfde regels als de rest van de site:
   geen belofte die niet waargemaakt wordt, geen getal zonder herkomst.
   De lezer is een beleidsmedewerker of een programmamanager die zich
   afvraagt of dit meer is dan weer een rekentool.

   Deelt de kop, de voet en de knoppen (.lp-…) met de voorpagina, uit
   voorpagina.css; wat alleen hier voorkomt heet .gm-… en staat hieronder.
   =================================================================== */
/* secties, uitleg en vragen, vroeger van de voorpagina */
.lp-sectie{padding:44px 0 8px}
.lp-sectie h2{font-size:clamp(26px,3vw,34px);margin:0 0 6px;letter-spacing:-.02em;color:var(--gray-900);line-height:1.1}
.lp-sectie>p.lp-intro{font-size:17px;color:var(--gray-700);margin:0 0 22px;max-width:60ch}
.lp-nodig{margin-top:16px;background:var(--merk-tint);border:1px solid var(--merk-zacht);border-radius:var(--r-l);padding:14px 18px;font-size:15px;color:var(--gray-900);display:flex;gap:12px;align-items:flex-start}
.lp-nodig .ico{color:var(--merk-diep);flex:none;margin-top:2px}
.lp-vragen{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.lp-vragen details{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-m);padding:0 18px}
.lp-vragen summary{cursor:pointer;font-weight:700;font-size:15.5px;min-height:52px;display:flex;align-items:center;list-style:none;color:var(--gray-900);gap:10px}
.lp-vragen summary::-webkit-details-marker{display:none}
.lp-vragen summary::after{content:"+";content:"+"/"";margin-left:auto;font-size:22px;color:var(--merk-diep);font-weight:400;flex:none}
.lp-vragen details[open] summary::after{content:"–";content:"–"/""}
.lp-vragen details p{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--gray-700)}
.lp-vragen details a{color:var(--merk-diep)}
/* de twee knoppen in de kop van de pagina: met een regel uitleg eronder */
.lp-knoppen{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.gm-hero .lp-cta{justify-content:flex-start;gap:12px;min-height:58px;padding:10px 18px;font-size:17px;border-width:1px}
.gm-hero .lp-cta small{display:block;font-weight:500;font-size:13.5px;color:var(--gray-700);margin-top:2px}
.gm-hero .lp-cta.hoofd small{color:var(--knop-op);opacity:.9}
.gm-hero .lp-cta:not(.hoofd):hover{background:var(--merk-tint);border-color:var(--merk-zacht)}
main.lp-wrap{padding-bottom:48px}
.gm-hero{padding:24px 0 8px;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);align-items:start}
.gm-hero h1{font-size:clamp(32px,4.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:14px 0 0;max-width:20ch;color:var(--gray-900)}
.gm-hero p.lead{font-size:17px;line-height:1.5;color:var(--gray-700);margin:16px 0 0;max-width:62ch}
.gm-hero .lp-knoppen{margin-top:20px}
/* het kaartje rechts: wat een bewoner ziet, in het klein */
.gm-vitrine{background:var(--merk-diep);color:#fff;border-radius:var(--r-xl);padding:22px 24px 24px;box-shadow:var(--schaduw-paneel)}
.gm-vitrine .kop{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--op-diep)}
.gm-vitrine .naam{font-size:20px;font-weight:800;margin-top:4px;letter-spacing:-.02em}
.gm-vitrine .regel{display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(255,255,255,.08);border-radius:12px;padding:11px 14px;margin-top:9px;font-size:14.5px}
.gm-vitrine .regel b{font-weight:800;color:var(--goed-op-diep);font-variant-numeric:tabular-nums}
.gm-vitrine .voet{font-size:13px;color:var(--op-diep);margin-top:14px;line-height:1.45}
.gm-vitrine .merkstaal{display:flex;gap:7px;margin-top:14px;align-items:center}
.gm-vitrine .merkstaal i{width:26px;height:26px;border-radius:8px;display:block;border:1px solid rgba(255,255,255,.35)}
.gm-vitrine .merkstaal span{font-size:13px;color:var(--op-diep)}
/* cijfers waar het gesprek over gaat */
.gm-cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.gm-cijfer{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:18px 20px}
.gm-cijfer b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--merk-diep);font-variant-numeric:tabular-nums}
.gm-cijfer span{display:block;font-size:14px;color:var(--gray-700);margin-top:4px;line-height:1.45}
/* wat u krijgt: drie kaarten uit het ontwerp */
.gm-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gm-kaart{background:var(--vlak);border:1px solid var(--merk-zacht);border-radius:15px;padding:16px 18px}
.gm-kaart .lp-ico{width:38px;height:38px;border-radius:11px;background:var(--merk-tint);color:var(--merk-diep);display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px}
.gm-kaart .lp-ico .ico{width:21px;height:21px}
.gm-kaart h3{font-size:16px;font-weight:800;margin:0}
.gm-kaart p{font-size:13.5px;color:var(--gray-700);margin:5px 0 0;line-height:1.5}
.gm-kaart p+p{margin-top:7px}
/* de aanpak, als tijdlijn */
.gm-stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gm-stap{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:16px 18px}
.gm-stap .nr{width:30px;height:30px;border-radius:50%;background:var(--knop);color:var(--knop-op);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-bottom:9px}
.gm-stap h3{font-size:15.5px;font-weight:800;margin:0;color:var(--merk-diep)}
.gm-stap p{font-size:13.5px;color:var(--gray-700);margin:5px 0 0;line-height:1.5}
.gm-stap .tijd{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;background:var(--merk-tint);border:1px solid var(--merk-zacht);border-radius:var(--r-rond);padding:3px 10px;color:var(--merk-diep)}
/* privacy: het gesprek dat een gemeente sowieso voert */
.gm-privacy{background:var(--merk-diep);color:#fff;border-radius:var(--r-xl);padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:start;margin-top:8px}
.gm-privacy h2{color:#fff;font-size:clamp(24px,3vw,32px);margin:0 0 10px;letter-spacing:-.02em;line-height:1.1}
.gm-privacy p{margin:0 0 12px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.94)}
.gm-privacy p:last-child{margin-bottom:0}
.gm-privacy a{color:#fff}
.gm-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.gm-lijst li{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.08);border-radius:12px;padding:11px 14px;font-size:14.5px;line-height:1.45}
.gm-lijst li .ico{flex:none;width:21px;height:21px;color:var(--goed-op-diep);margin-top:2px}
.gm-lijst li b{display:block;font-size:15px}
/* CTA-balk uit het ontwerp */
.gm-cta{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:center;background:var(--merk-diep);color:#fff;border-radius:16px;padding:20px 24px;margin-top:16px}
.gm-cta .kop{font-size:19px;font-weight:800;letter-spacing:-.01em}
.gm-cta .sub{font-size:14px;color:var(--op-diep);margin-top:5px;line-height:1.45}
.gm-cta .knoppen{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.gm-knop{display:inline-flex;align-items:center;height:50px;padding:0 22px;border-radius:12px;border:none;background:var(--knop);color:var(--knop-op);font-size:16px;font-weight:800;text-decoration:none}
.gm-knop:hover{background:var(--knop-hover)}
.gm-knop.tweede{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;height:50px;padding:0 18px;font-size:15px;font-weight:700}
.gm-knop.tweede:hover{background:rgba(255,255,255,.22)}
.gm-cta :focus-visible{outline-color:var(--merk-licht)}
.gm-privacy :focus-visible{outline-color:var(--merk-licht)}
/* toegankelijkheidsblok, let-op-palet */
.gm-wcag{margin-top:14px;background:var(--let-tint);border:1px solid var(--let-rand);border-radius:13px;padding:12px 16px;font-size:13.5px;color:var(--let-tekst);line-height:1.5}
.gm-wcag a{color:var(--let-tekst)}
@media (max-width:1020px){
  .gm-hero{grid-template-columns:1fr;gap:24px}
  .gm-cijfers,.gm-kaarten{grid-template-columns:1fr 1fr}
  .gm-stappen{grid-template-columns:1fr 1fr}
  .gm-privacy{grid-template-columns:1fr}
}
@media (max-width:860px){
  .lp-vragen{grid-template-columns:1fr}
  .gm-cta{grid-template-columns:1fr}
  .gm-cta .knoppen{justify-content:flex-start}
}
@media (max-width:640px){
  .gm-cijfers,.gm-kaarten,.gm-stappen{grid-template-columns:1fr}
}