/* 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 */
.hero{position:relative;overflow:hidden;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)}
.hero 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 .mini,.mini{font-size:12.5px;color:var(--dim2);margin-top:12px}
.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}
.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}
.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:hidden;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:hidden;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,.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,.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)}