/* AI Act Zorg: sitestijl. Gebruikt tokens.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--papier);color:var(--inkt);font:var(--t-m)/var(--regelhoogte-tekst) var(--font-tekst)}
a{color:var(--petrol)}
a:hover{color:#0b4b5b}
:focus-visible{outline:var(--focus);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--inkt);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.klein{font-size:var(--t-xs);color:var(--gedempt)}
p,li{max-width:var(--max-regel)}

/* kop */
.kop{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:30}
.kop-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt);font:700 21px/1 var(--font-kop)}
.nav{display:flex;gap:4px 16px;flex-wrap:wrap;margin-left:auto;align-items:center;font-size:var(--t-s)}
.nav a{text-decoration:none;color:var(--inkt);padding:6px 2px;font-weight:600;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--lijn)}
.nav a[aria-current="page"]{border-bottom-color:var(--petrol)}
.nav a.cta{background:var(--petrol);color:#fff;padding:7px 14px;border-radius:var(--hoek);border:0}
.nav a.cta:hover{background:#0b4b5b}

/* koppen */
h1,h2,h3{font-family:var(--font-kop);line-height:var(--regelhoogte-kop);margin:0}
h1{font-size:clamp(var(--t-2xl),4.2vw,2.9rem);font-weight:700;letter-spacing:-.4px;max-width:22ch;text-wrap:balance}
h2{font-size:var(--t-xl);font-weight:700}
h3{font-size:var(--t-l);font-weight:700}
.sectie{border-top:1px solid var(--lijn);position:relative;padding:28px 0 52px;margin-top:36px}
.sectie::before{content:"";position:absolute;top:-1px;left:0;width:var(--r8);height:5px;background:var(--petrol)}
.sectie>h2{margin-bottom:6px}
.sectie>.sub{color:var(--gedempt);margin:0 0 22px;max-width:var(--max-regel)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center;padding:56px 0 30px}
.hero .lead{font-size:var(--t-l);color:var(--gedempt);max-width:50ch;margin:16px 0 24px}
.hero .voet-noot{margin-top:14px}
.acties{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.knop{display:inline-block;padding:11px 20px;border-radius:var(--hoek);border:1px solid var(--petrol);background:var(--petrol);color:#fff;font:600 var(--t-m) var(--font-tekst);text-decoration:none;cursor:pointer}
.knop:hover{background:#0b4b5b;color:#fff}
.knop.rand{background:var(--wit);color:var(--petrol)}
.knop.rand:hover{background:var(--petrol-zacht);color:var(--petrol)}
.knop:disabled{opacity:.5;cursor:not-allowed}

/* de band */
.kaartje{display:grid;grid-template-columns:var(--band) 1fr;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek-kaart);overflow:hidden}
.kaartje .b{background:var(--kleur,var(--lijn));transition:background-color .35s}
.kaartje .i{padding:16px 20px}
.kaartje .kicker{font-size:var(--t-xs);color:var(--gedempt)}
.kaartje h3{margin:2px 0 10px}
.kaartje dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:var(--t-s)}
.kaartje dt{color:var(--gedempt)}
.kaartje dd{margin:0;font-weight:600}
.r-verboden{--kleur:var(--verboden)}.r-hoog{--kleur:var(--hoog)}.r-transparantie{--kleur:var(--transparantie)}.r-overig{--kleur:var(--overig)}

.tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:var(--t-xs);font-weight:600;color:var(--k);background:var(--z)}
.tag.hoog{--k:var(--hoog);--z:var(--hoog-zacht)}.tag.transparantie{--k:var(--transparantie);--z:var(--transparantie-zacht)}.tag.overig{--k:var(--overig);--z:var(--overig-zacht)}.tag.verboden{--k:var(--verboden);--z:var(--verboden-zacht)}

/* rijen en lijsten */
.rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rij.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.rij.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.blok{border-top:1px solid var(--lijn);padding-top:12px}
.blok h3{margin-bottom:6px}
.blok p{margin:0 0 8px}
.prijs{font-weight:600;color:var(--inkt)}
.vlak{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek-kaart);padding:20px}
.stappen{counter-reset:s;list-style:none;margin:0;padding:0}
.stappen li{counter-increment:s;border-top:1px solid var(--lijn);padding:12px 0 12px 42px;position:relative}
.stappen li::before{content:counter(s);position:absolute;left:0;top:12px;width:28px;height:28px;border-radius:50%;background:var(--petrol-zacht);color:var(--petrol);font-weight:700;display:grid;place-items:center}
.zo-wel,.zo-niet{border-left:6px solid;padding:10px 14px;background:var(--wit);margin:0 0 10px}
.zo-wel{border-color:var(--ok)}.zo-niet{border-color:var(--verboden)}
table.t{width:100%;border-collapse:collapse;font-size:var(--t-s)}
@media(max-width:700px){.prose table.t{display:block;overflow-x:auto}}
[tabindex="-1"]:focus{outline:none}
table.t th{text-align:left;color:var(--gedempt);font-size:var(--t-xs);border-bottom:1px solid var(--lijn);padding:6px 10px 6px 0}
table.t td{padding:8px 10px 8px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.concept{background:var(--hoog-zacht);border-left:6px solid var(--hoog);padding:10px 14px;margin:16px 0;max-width:var(--max-regel);font-size:var(--t-s)}
.pagina{padding:40px 0 20px}
.pagina .lead{font-size:var(--t-l);color:var(--gedempt);margin:12px 0 0;max-width:56ch}
.prose h2{margin:34px 0 8px}
.prose h3{margin:22px 0 6px}
.prose p,.prose li{max-width:var(--max-regel)}

/* formulieren */
.veld{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;max-width:520px}
.veld label{font-weight:600;font-size:var(--t-s)}
.veld .help{font-size:var(--t-xs);color:var(--gedempt)}
input[type=text],input[type=email],select,textarea{font:inherit;font-size:var(--t-m);padding:10px 12px;border:1px solid #8da0ac;border-radius:var(--hoek);background:var(--wit);color:var(--inkt);width:100%}
textarea{min-height:130px;resize:vertical}
.keuzes{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0}
.keuze{display:flex;gap:10px;align-items:flex-start;background:var(--wit);border:1px solid #8da0ac;border-radius:var(--hoek);padding:12px 14px;cursor:pointer}
.keuze:hover{background:var(--petrol-zacht)}
.keuze input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--petrol)}
.keuze:has(input:checked){border-color:var(--petrol);background:var(--petrol-zacht)}
fieldset{border:0;margin:0;padding:0}
legend{font:700 var(--t-xl)/1.2 var(--font-kop);margin-bottom:6px;padding:0}

/* rol-check */
.check{max-width:720px}
.voortgang{height:6px;background:#e3e9ed;border-radius:3px;overflow:hidden;margin:0 0 6px}
.voortgang i{display:block;height:100%;background:var(--petrol);width:0;transition:width .3s}
.uitkomst .kaartje{margin:18px 0}
.uitkomst ul{padding-left:20px}
.vervolg h4{font:700 var(--t-m)/1.2 var(--font-kop);margin:0 0 6px}
.vervolg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0}

/* kaartenstapel in de hero: drie categorieën, één bovenop */
.stapel{position:relative;isolation:isolate;margin:0 18px 18px 0}
.stapel::before,.stapel::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--wit);border:1px solid var(--lijn);border-left:var(--band) solid var(--transparantie);border-radius:var(--hoek-kaart)}
.stapel::before{transform:translate(18px,18px);border-left-color:var(--overig)}
.stapel::after{transform:translate(9px,9px)}
.stapel .kaartje{box-shadow:0 1px 0 var(--lijn)}
.stapel .kaartje .i{padding:22px 24px}
.stapel .kaartje h3{font-size:var(--t-xl)}
/* ritme: getinte band en afsluiter */
.sectie.getint{background:var(--petrol-zacht);box-shadow:0 0 0 100vmax var(--petrol-zacht);clip-path:inset(0 -100vmax);border-top-color:transparent;padding-left:0;padding-right:0}
.sectie.getint::before{top:0}
.afsluiter{background:var(--petrol);color:#fff;margin-top:56px;padding:44px 0}
main:has(.afsluiter)+.voet{margin-top:0}
.afsluiter-in{display:flex;gap:24px 48px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.afsluiter h2{color:#fff;font-size:var(--t-2xl)}
.afsluiter p{margin:8px 0 0;color:#e6f1f4;max-width:52ch}
.knop.licht{background:#fff;color:var(--petrol);border-color:#fff}
.knop.licht:hover{background:var(--petrol-zacht);color:var(--petrol)}
.tekstlink.licht{color:#fff;text-decoration-color:#8fc3d0}
.tekstlink.licht:hover{color:#fff}
.afsluiter :focus-visible{outline-color:#fff}
.belofte{margin:14px 0 0;font-weight:600;color:var(--inkt)}
.afzender-regel{margin:6px 0 0}
.legenda{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--t-s)}
.legenda li{display:flex;align-items:center;gap:6px;max-width:none}
.legenda li::before{content:"";width:8px;height:18px;border-radius:1px;background:var(--kleur)}

/* tweede orde acties en indelingen */
.tekstlink{font-weight:600;color:var(--petrol);text-underline-offset:3px;padding:8px 4px}
.meer{display:flex;gap:6px 24px;flex-wrap:wrap;margin:18px 0 0;font-weight:600}
.twee-kol{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;align-items:start}
.zijkant{border-left:var(--band) solid var(--petrol);padding:2px 0 2px 18px}
.zijkant p{margin:6px 0 0}
.stapel.groot{margin-right:22px}
.stapel.groot .kaartje .i{padding:30px 32px}
.stapel.groot .kaartje h3{font-size:var(--t-2xl)}
.stapel.groot .kaartje dl{font-size:var(--t-m);gap:8px 18px}
.stapel.groot .kaartje{transform:rotate(-1.2deg)}
.deur ul{margin:0 0 10px;padding-left:40px}
.deur li{margin-bottom:4px}
@media(max-width:860px){.twee-kol{grid-template-columns:1fr;gap:24px}.stapel.groot .kaartje{transform:none}}

/* twee kanten: gebruiker en bouwer */
.deur{display:grid;grid-template-columns:var(--band) 1fr;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek-kaart);overflow:hidden;text-decoration:none;color:var(--inkt)}
.deur::before{content:"";background:var(--kleur)}
.deur>*{grid-column:2;padding:0 22px}
.deur h3{padding-top:18px}
.deur p{margin:6px 0 10px}
.deur-tekst{padding-bottom:18px;color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.deur:hover{background:var(--petrol-zacht);color:var(--inkt)}
.deur.gebruiker{--kleur:var(--petrol)}
.deur.bouwer{--kleur:var(--inkt)}
.deur::before{grid-row:1/4}
.vlak.band-links{border-left:var(--band) solid var(--petrol);margin:8px 0 0;max-width:var(--max-regel)}
.vlak.band-links p{margin:0 0 6px}
.vlak.band-links ul{margin:0;padding-left:20px}

/* voet */
.voet{background:var(--inkt);color:#c9d6e0;margin-top:56px;padding:36px 0 64px;font-size:var(--t-s)}
.voet a{color:#fff;text-decoration-color:#6f8aa3;text-underline-offset:3px}
.voet a:hover{color:#fff;text-decoration-color:var(--signaal)}
.voet :focus-visible{outline-color:#8fd0e0}
.voet .klein{color:#a9b9c7}
.voet-links{display:flex;gap:6px 20px;flex-wrap:wrap;font-weight:600}
.voet p{margin:0 0 12px}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:32px;gap:28px}
  .rij,.rij.vier{grid-template-columns:1fr 1fr}
  h1{font-size:var(--t-2xl)}
}
@media(max-width:560px){
  .rij,.rij.twee,.rij.vier{grid-template-columns:1fr}
  .kop-in{gap:6px 12px;padding-top:8px;padding-bottom:0}
  .nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:0 18px;padding-bottom:2px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:10px 2px}
  .nav a.cta{order:-1;padding:7px 14px;margin:2px 4px 2px 0}
  .nav{min-width:0}
  .hero{grid-template-columns:minmax(0,1fr)}
  .twee-kol{grid-template-columns:minmax(0,1fr)}
  .stapel,.stapel.groot{margin-right:14px}
}
@media print{.kop,.voet,.acties,.skip{display:none}body{background:#fff}}