/* vastly.software: donkere huisstijl (mockups/website_ui_mockup.html v2, akkoord Peter 28-08).
   Tokens: zwart, merkgroen, diagonale lichtbaan. Systeemfont, geen externe bronnen. */
:root{
  --bg:#0A0B0C; --kaart:#151719; --kaart2:#1A1D1F; --rand:#232628; --rand2:#2C3134;
  --tekst:#F2F4F3; --dim:#9BA3A0; --dim2:#7C8582;
  --groen:#6EE7B7; --groen-diep:#123528; --groen-rand:#2C5A46; --groen-donker:#0E2A1D;
  --amber:#F5C063; --fout:#FF9D86;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tekst);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Inter,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--groen)}
.wrap{max-width:1100px;margin:0 auto;padding:0 36px}
.skip{position:absolute;left:-999px;top:8px;background:var(--groen);color:#07130E;padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.visueel-verborgen{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* knoppen */
.knop{display:inline-block;white-space:nowrap;background:var(--groen);color:#07130E;border:none;border-radius:11px;padding:11px 20px;font-size:13.5px;font-weight:800;cursor:pointer;text-decoration:none;font-family:inherit;line-height:1.2;text-align:center}
.knop:hover{filter:brightness(1.06)}
.knop.stil{background:none;color:var(--groen);border:1.5px solid var(--groen-rand)}
.knop.stil:hover{border-color:var(--groen)}
.knop.groot{padding:15px 28px;font-size:15px}

/* navigatie */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,11,12,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--rand)}
.nav .wrap{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tekst)}
.logo .woord{font-size:19px;font-weight:800;letter-spacing:-.2px;line-height:1}
.logo em{font-style:normal;color:var(--groen)}
.logo small{display:block;font-size:9px;letter-spacing:2.4px;text-transform:uppercase;color:var(--dim2);font-weight:600;margin-top:3px}
.nav nav{display:flex;gap:22px}
.nav nav a,.nav .inloggen{font-size:13.5px;color:var(--dim);text-decoration:none;font-weight:600}
.nav nav a:hover,.nav .inloggen:hover{color:var(--tekst)}
.nav nav a.actief{color:var(--groen)}
.nav .rechts{margin-left:auto;display:flex;gap:14px;align-items:center}

/* hero met lichtbaan */
/* overflow:clip, niet hidden (delta-run 12-09): hidden maakt de sectie een scrollcontainer
   zonder schuifbalk; focus op een veld in de huurprijscheck scrolde de sectie intern (scrollTop 423)
   en liet de kaart onder de header verdwijnen. clip knipt het lichtbaan-pseudo-element zonder scroll. */
.hero{position:relative;overflow:clip;border-bottom:1px solid var(--rand)}
.hero::before{content:"";position:absolute;top:-40%;left:18%;width:52%;height:190%;background:linear-gradient(115deg,transparent 0%,rgba(110,231,183,.13) 42%,rgba(110,231,183,.05) 58%,transparent 100%);transform:rotate(9deg);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;padding-top:64px;padding-bottom:56px;align-items:center}
.hero h1{font-size:42px;font-weight:800;letter-spacing:-.8px;line-height:1.12}
.hero h1 em{font-style:normal;color:var(--groen)}
/* Alleen de intro onder de kop (.hero-tekst), nooit elke <p> in de sectie (opmaak-fix 12-09): de
   huurprijscheck-bundel staat in dezelfde hero (#huurprijscheck in .hpc-paneel) en zet zijn typografie
   met Tailwind-utilities (specificiteit 0,1,0); `.hero p` (0,1,1) won daarvan op élke <p> in de kaart,
   zodat "164 punten" (text-[34px] font-bold) als 16 px grijs met 26 px ondermarge rendert. Regel:
   site-regels met element-selectors alleen op de eigen tekstkolom, de bundle-container erbuiten. */
.hero .hero-tekst p{margin:16px 0 26px;font-size:16px;color:var(--dim);line-height:1.7;max-width:460px}
.hero .acties{display:flex;gap:12px;flex-wrap:wrap}
.hero .store-badges{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.hero .store-badges img{height:44px;width:auto;display:block}
@media (max-width:600px){.hero .store-badges img{height:40px}}
.hero .mini,.mini{font-size:12.5px;color:var(--dim2);margin-top:12px}
.hero .computer-regel{margin-top:6px}.hero .computer-regel a{color:var(--dim);text-decoration:underline}
.schermpje{background:var(--kaart);border:1px solid var(--rand2);border-radius:18px;padding:18px;font-size:12.5px;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(110,231,183,.06)}
.schermpje .kopje{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--groen);font-weight:700;margin-bottom:12px}
.schermpje .rij{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #202325}
.schermpje .rij:last-child{border-bottom:none}
.schermpje .l{color:var(--tekst)}
.schermpje .ok{color:var(--groen);font-weight:700;text-align:right}
.schermpje .let{color:var(--amber);font-weight:700;text-align:right}
.strook{border-bottom:1px solid var(--rand);color:var(--dim2);font-size:12.5px;text-align:center}
.strook .wrap{padding-top:18px;padding-bottom:22px}

/* secties */
.sectie{padding:52px 0}
.sectie.strak{padding-top:0}
.kicker{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--groen);font-weight:800;margin-bottom:8px}
.groot{font-size:28px;font-weight:800;margin-bottom:26px;letter-spacing:-.4px;max-width:640px;line-height:1.2}
.blokken,.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stappen.vijf{grid-template-columns:repeat(5,1fr)}
.taalwissel-onder{margin:18px auto 0;text-align:right}
.blok{background:var(--kaart);border:1px solid var(--rand);border-radius:16px;padding:22px;transition:border-color .15s}
.blok:hover{border-color:var(--groen-rand)}
.blok .ic{font-size:22px}
.blok h3{font-size:15.5px;font-weight:800;margin:12px 0 6px}
.blok p,.stap p{font-size:13px;color:var(--dim);line-height:1.65}
.stappen{counter-reset:s}
.stap{background:var(--kaart2);border:1px solid var(--rand);border-radius:16px;padding:22px}
.stap::before{counter-increment:s;content:counter(s);display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--groen);color:#07130E;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-bottom:12px}
.stap h3{font-size:15px;font-weight:800;margin-bottom:6px}
.prijs{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px}
.prijskaart{background:var(--kaart);border:1px solid var(--rand);border-radius:18px;padding:26px}
.prijskaart.uitgelicht{border-color:var(--groen-rand);box-shadow:0 0 44px rgba(110,231,183,.10)}
.prijskaart .naam{font-size:12px;font-weight:800;color:var(--groen);text-transform:uppercase;letter-spacing:1.4px}
.prijskaart .bedrag{font-size:32px;font-weight:800;margin:10px 0 2px}
.prijskaart .per{font-size:12px;color:var(--dim2);margin-bottom:16px}
.prijskaart .proef{display:inline-block;font-size:12px;font-weight:700;color:var(--groen);margin:-8px 0 14px;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.04)}
.box3-banner{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--kaart);border:1px solid var(--groen-rand);border-radius:18px;padding:30px;box-shadow:0 0 44px rgba(110,231,183,.08)}
.box3-banner>div{max-width:66ch}
.box3-banner .body{color:var(--dim);font-size:15px;line-height:1.7;margin-top:10px}
.prijskaart table.staffel{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 14px}
.prijskaart table.staffel td{padding:9px 0;border-bottom:1px solid var(--rand);color:var(--dim)}
.prijskaart table.staffel td:last-child{text-align:right;font-weight:700;color:var(--tekst)}
.prijskaart ul{list-style:none;font-size:13px;color:var(--dim);line-height:2.1}
.prijskaart li::before{content:"✓  ";color:var(--groen);font-weight:800}

.kb-teaser{position:relative;overflow:clip;background:var(--groen-donker);border:1px solid var(--groen-rand);border-radius:20px;margin:0 0 52px;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.kb-teaser::before{content:"";position:absolute;top:-60%;right:-10%;width:45%;height:220%;background:linear-gradient(115deg,transparent,rgba(110,231,183,.12),transparent);transform:rotate(12deg);pointer-events:none}
.kb-teaser h2{font-size:23px;font-weight:800;letter-spacing:-.3px}
.kb-teaser p{font-size:13.5px;color:#BFE8D2;margin:8px 0 16px;line-height:1.65}
.kb-teaser .vragen{display:flex;flex-direction:column;gap:9px;position:relative}
.kb-teaser .v{display:block;background:#ffffff0d;border:1px solid var(--groen-rand);border-radius:11px;padding:12px 15px;font-size:13px;font-weight:600;color:var(--tekst);text-decoration:none}
.kb-teaser .v:hover{background:#ffffff1a}

/* kennisbank */
.kb-hero{position:relative;overflow:clip;padding:52px 0;text-align:center;border-bottom:1px solid var(--rand)}
.kb-hero::before{content:"";position:absolute;top:-50%;left:30%;width:40%;height:200%;background:linear-gradient(115deg,transparent,rgba(110,231,183,.10),transparent);transform:rotate(9deg);pointer-events:none}
.kb-hero .wrap{position:relative}
.kb-hero h1{font-size:30px;font-weight:800;letter-spacing:-.4px;line-height:1.2}
.kb-hero p{color:var(--dim);font-size:14px;margin-top:8px}
.kb-hero.klein{padding:34px 0;text-align:left}
.kb-hero.klein h1{font-size:26px}
.kb-hero.klein .zoek{margin-left:0}
.kb-hero .mini a{color:var(--dim)}
.zoek{position:relative;max-width:560px;margin:22px auto 0;background:var(--kaart);border:1px solid var(--rand2);border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 18px;text-align:left}
.zoek:focus-within{border-color:var(--groen-rand)}
.zoek input{flex:1;background:none;border:none;color:var(--tekst);font-size:14.5px;padding:15px 0;font-family:inherit;outline:none;min-width:0}
.zoek input::placeholder{color:var(--dim2)}
.zoek input::-webkit-search-cancel-button{-webkit-appearance:none}
.zoek .resultaten{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);background:var(--kaart);border:1px solid var(--rand2);border-radius:14px;list-style:none;overflow:hidden;z-index:20;box-shadow:0 18px 44px rgba(0,0,0,.5);text-align:left}
.zoek .resultaten li a{display:block;padding:12px 16px;color:var(--tekst);text-decoration:none;font-size:13.5px;border-bottom:1px solid var(--rand)}
.zoek .resultaten li:last-child a{border-bottom:none}
.zoek .resultaten li a:hover,.zoek .resultaten li a:focus{background:var(--kaart2)}
.zoek .resultaten small{display:block;color:var(--dim2);font-size:11.5px;margin-top:2px}
.zoek .resultaten .leeg{padding:12px 16px;color:var(--dim);font-size:13px}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:30px 0}
.catgrid.compact{padding-top:12px;grid-template-columns:repeat(4,1fr)}
.cat{display:block;background:var(--kaart);border:1px solid var(--rand);border-radius:14px;padding:18px;color:var(--tekst);text-decoration:none;transition:border-color .15s}
.cat:hover{border-color:var(--groen-rand)}
.cat .ic{font-size:22px}
.cat h3{font-size:14.5px;font-weight:800;margin:8px 0 4px}
.cat p{font-size:12.5px;color:var(--dim);line-height:1.5}
.cat .n{display:block;font-size:11px;color:var(--dim2);margin-top:8px;font-weight:700}
.catgrid.compact .cat h3{font-size:13.5px}
.vraaglijst{display:flex;flex-direction:column;gap:8px}
.vraag{display:flex;justify-content:space-between;gap:14px;background:var(--kaart);border:1px solid var(--rand);border-radius:12px;padding:14px 18px;font-size:14px;font-weight:600;color:var(--tekst);text-decoration:none}
.vraag:hover{border-color:var(--groen-rand)}
.vraag .pijl{color:var(--groen)}
.cta-breed{background:var(--groen-donker);border:1px solid var(--groen-rand);border-radius:16px;padding:24px 28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:0 0 52px}
.cta-breed .t{flex:1;min-width:260px}
.cta-breed h2{font-size:17px;font-weight:800}
.cta-breed p{font-size:13.5px;color:#BFE8D2;margin-top:4px}

/* artikel */
.kruimel{font-size:12.5px;color:var(--dim2);margin-bottom:10px}
.kruimel a{color:var(--dim2);text-decoration:none}
.kruimel a:hover{color:var(--groen)}
.kruimel b{color:var(--groen)}
.artikel{padding:28px 36px 52px;max-width:800px}
.artikel h1{font-size:28px;font-weight:800;line-height:1.25;margin-bottom:6px;letter-spacing:-.4px}
.artikel .meta{font-size:12px;color:var(--dim2);margin-bottom:18px}
.artikel .kort{background:var(--kaart);border-left:4px solid var(--groen);border-radius:0 12px 12px 0;padding:14px 18px;font-size:15px;line-height:1.6;margin-bottom:18px}
.artikel .kort b{color:var(--groen)}
.artikel .body{font-size:15px;line-height:1.75;color:#C9D0CD;margin-bottom:14px}
.cta-in{background:var(--groen-donker);border:1px solid var(--groen-rand);border-radius:14px;padding:20px 24px;margin:22px 0}
.cta-in h2{font-size:15.5px;font-weight:800;line-height:1.35}
.cta-in p{font-size:13px;color:#BFE8D2;margin:6px 0 14px;line-height:1.55}
.disclaimer{font-size:12px;color:var(--dim2);line-height:1.6;margin-top:18px}
.verwant{border-top:1px solid var(--rand);padding-top:16px;margin-top:22px}
.verwant a{display:block;font-size:13.5px;color:var(--groen);font-weight:600;text-decoration:none;padding:4px 0}
.verwant a:hover{text-decoration:underline}

/* footer */
footer{border-top:1px solid var(--rand);background:#0D0F10;font-size:12.5px;color:var(--dim2)}
footer .kolommen{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px;padding-top:30px;padding-bottom:18px}
footer b{color:var(--tekst);display:block;margin-bottom:8px;font-size:13px}
footer .slogan{color:var(--groen);font-weight:700}
footer a{display:block;color:var(--dim2);text-decoration:none;padding:3px 0}
footer a:hover{color:var(--tekst)}
footer .juridisch{padding-top:14px;padding-bottom:30px;border-top:1px solid var(--rand);line-height:1.7;font-size:11.5px}

/* aanmeldmodal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:200}
.overlay[hidden]{display:none}
.modal{position:relative;background:var(--kaart);border:1px solid var(--rand2);border-radius:18px;padding:28px;max-width:440px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modal h3{font-size:19px;font-weight:800;margin-bottom:6px}
.modal p{font-size:13.5px;color:var(--dim);line-height:1.55}
.modal label,.modal .label{display:block;font-size:12px;font-weight:700;color:var(--dim);margin:14px 0 6px}
.modal input[type=text],.modal input[type=email]{width:100%;background:var(--bg);border:1px solid var(--rand2);border-radius:10px;padding:11px 12px;color:var(--tekst);font-size:14px;font-family:inherit}
.modal input:focus{outline:none;border-color:var(--groen-rand)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills label{margin:0;padding:8px 12px;border:1px solid var(--rand2);border-radius:999px;font-size:12.5px;color:var(--dim);cursor:pointer;font-weight:600}
.pills input:checked+label{background:var(--groen-diep);border-color:var(--groen-rand);color:var(--groen)}
.pills input:focus-visible+label{outline:2px solid var(--groen)}
.honing{display:none}
.modal .knop.groot{width:100%;margin-top:18px}
.modal .noot{font-size:12px;color:var(--dim2);margin-top:10px}
.modal .noot.fout{color:var(--fout)}
.modal .sluit{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--dim);font-size:24px;cursor:pointer;line-height:1}
#aanmelden-klaar{text-align:center;padding:10px 0 4px}
#aanmelden-klaar .vinkje{width:52px;height:52px;border:2.5px solid var(--groen);border-radius:50%;color:var(--groen);font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
#aanmelden-klaar .knop{margin-top:16px}

@media (max-width:860px){
  .hero-grid,.kb-teaser,.prijs{grid-template-columns:1fr}
  .blokken,.stappen,.stappen.vijf,.catgrid,.catgrid.compact{grid-template-columns:1fr 1fr}
  footer .kolommen{grid-template-columns:1fr 1fr}
  .nav nav a.weg{display:none}
}
@media (max-width:430px){
  .wrap{padding:0 20px}
  .nav .wrap{gap:14px}
  .nav .inloggen{display:none}
  .hero-grid{padding-top:38px;padding-bottom:36px;gap:24px}
  .hero h1{font-size:30px;letter-spacing:-.5px}
  .sectie{padding:32px 0}
  .groot{font-size:23px}
  .blokken,.stappen,.stappen.vijf,.catgrid,.catgrid.compact{grid-template-columns:1fr}
  .kb-teaser{padding:24px;margin-bottom:32px}
  .kb-hero{padding:36px 0}
  .kb-hero h1{font-size:24px}
  .artikel{padding:20px 20px 40px}
  .artikel h1{font-size:23px}
  .cta-breed{padding:20px;margin-bottom:32px}
  footer .kolommen{grid-template-columns:1fr}
}

/* privacyverklaring (juridische tekst in artikel-opmaak, website-restjes-run 30-08) */
.juridische-tekst .taalwissel{font-size:12.5px;margin:0 0 10px}
.juridische-tekst .taalwissel a{color:var(--dim2)}
.juridische-tekst .taalwissel a:hover{color:var(--tekst)}
.juridische-tekst h2{font-size:17px;font-weight:800;color:var(--groen);margin:26px 0 8px}
.juridische-tekst p{font-size:15px;line-height:1.75;color:#C9D0CD;margin-bottom:12px}
.juridische-tekst ul{padding-left:22px;margin-bottom:12px}
.juridische-tekst li{font-size:15px;line-height:1.7;color:#C9D0CD;margin-bottom:8px}
.juridische-tekst strong{color:var(--tekst);font-weight:600}
.juridische-tekst a{color:var(--groen)}

/* huurprijscheck (run E, 11-09-2026): landing met de tool, evergreen tabelpagina */
.hpc-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:start;padding-top:56px;padding-bottom:48px;position:relative}
.vm-hero{position:relative;padding-top:64px;padding-bottom:56px}
.vm-hero .hero-tekst{max-width:760px}
.hpc-beloftes{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.hpc-beloftes li{display:flex;flex-direction:column;font-size:13.5px;color:var(--dim);border-left:3px solid var(--groen-rand);padding-left:12px}
.hpc-beloftes li b{color:var(--tekst);font-size:14px}
.hpc-paneel{background:var(--kaart);border:1px solid var(--rand);border-radius:20px;padding:22px;box-shadow:0 0 44px rgba(110,231,183,.08)}
.hpc-paneel .hpc-noot{font-size:12.5px;color:var(--dim)}
.hpc-tabel{width:100%;border-collapse:collapse;font-size:14px;background:var(--kaart);border:1px solid var(--rand);border-radius:14px;overflow:hidden}
.hpc-tabel th,.hpc-tabel td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--rand)}
.hpc-tabel th{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim2)}
.hpc-tabel tr:last-child td{border-bottom:none}
.hpc-tabel td:last-child{font-weight:700;color:var(--tekst)}
.hpc-tabel-smal{max-width:520px}
.hpc-segmenten{max-width:760px}
.hpc-kolommen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hpc-kolommen .hpc-tabel td:first-child{color:var(--dim)}
.hpc-faq{display:flex;flex-direction:column;gap:8px;max-width:800px}
.hpc-vraag{background:var(--kaart);border:1px solid var(--rand);border-radius:12px;padding:0 18px}
.hpc-vraag summary{cursor:pointer;padding:14px 0;font-size:14px;font-weight:600;color:var(--tekst);list-style:none}
.hpc-vraag summary::-webkit-details-marker{display:none}
.hpc-vraag summary::after{content:"+";float:right;color:var(--groen);font-weight:800}
.hpc-vraag[open] summary::after{content:"\2212"}
.hpc-vraag p{font-size:13.5px;color:var(--dim);line-height:1.65;padding:0 0 14px}
.hpc-vraag p a{color:var(--groen)}
.disclaimer.wrap{display:block;margin-bottom:40px}
@media (max-width:860px){
  .hpc-hero-grid{grid-template-columns:1fr;padding-top:36px;padding-bottom:32px}
  .vm-hero{padding-top:38px;padding-bottom:36px}
  .hpc-kolommen{grid-template-columns:1fr 1fr}
}
@media (max-width:430px){
  .hpc-paneel{padding:14px;margin:0 -8px}
  .hpc-kolommen{grid-template-columns:1fr 1fr}
}

/* navigatie op smalle schermen (delta-run 12-09): tot 700 px past de volledige balk niet
   (logo + Kennisbank + Huurprijscheck + Inloggen + Probeer Vastly liep op 375 px buiten beeld).
   Zichtbaar blijven logo, Huurprijscheck en een menuknop; de rest klapt uit onder de balk.
   Puur CSS (checkbox + label), werkt zonder JavaScript; de checkbox blijft toetsenbord-bereikbaar. */
.menu-schakel{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;pointer-events:none}
.menu-knop{display:none}
@media (max-width:700px){
  .nav .wrap{flex-wrap:wrap;gap:8px 14px}
  .logo small{display:none}
  .menu-knop{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;margin-left:auto;padding:0 11px;border:1px solid var(--rand2);border-radius:10px;cursor:pointer;background:var(--kaart)}
  .menu-knop span{display:block;height:2px;background:var(--tekst);border-radius:2px;transition:transform .15s,opacity .15s}
  .menu-schakel:focus-visible ~ .menu-knop{outline:2px solid var(--groen);outline-offset:2px}
  .nav nav{gap:14px}
  .nav nav a{display:none}
  .nav nav a.blijf{display:inline}
  .nav .rechts{display:none}
  .menu-schakel:checked ~ nav{display:flex;flex-direction:column;flex-basis:100%;order:10;gap:0;border-top:1px solid var(--rand);padding-top:6px}
  .menu-schakel:checked ~ nav a{display:block;padding:10px 0;font-size:15px}
  .menu-schakel:checked ~ .rechts{display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;order:11;gap:10px;padding-bottom:6px}
  .menu-schakel:checked ~ .rechts .inloggen{display:block;padding:8px 0;font-size:15px}
  .menu-schakel:checked ~ .rechts .knop{width:100%}
  .menu-schakel:checked ~ .menu-knop span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-schakel:checked ~ .menu-knop span:nth-child(2){opacity:0}
  .menu-schakel:checked ~ .menu-knop span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
/* Prijzen huurprijscheck (eindproduct-run 17-09 deel C): pills, uitgelichte kaart, tekstpagina. */
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(110,231,183,.14);color:var(--groen,#6EE7B7);font-size:12px;font-weight:600;margin-bottom:8px}
.blok.top{border-color:rgba(110,231,183,.6);box-shadow:0 0 0 1px rgba(110,231,183,.25)}
.blok h3{margin:4px 0 8px}
.blok .knop{display:inline-block;margin-top:12px}
.wrap.tekst{max-width:760px}
.wrap.tekst h2{font-size:18px;margin:26px 0 8px}
.wrap.tekst p{color:var(--dim);line-height:1.6}
@media (min-width:900px){.blokken.vier{grid-template-columns:repeat(4,1fr)}}