/* Peilmaat Bouwkeuring — ontwerp (site.css). Kleuren en lettertypes staan bovenin als variabelen. */
:root{
  --wit:#FBFBFA; --vlak:#F1F2EF; --inkt:#111416; --grafiet:#1F2427; --grijs:#62696E; --lijn:#DFE1DC;
  --laser:#C8F03C; --goed:#2E9D61; --matig:#D99A12; --direct:#D8452E;
  --mono:'Martian Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--wit);color:var(--inkt);font-family:'Familjen Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--laser);color:var(--inkt)}
img{display:block;max-width:100%}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(18px,4vw,52px)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.01em}

header .nav{display:flex;align-items:center;gap:28px;height:74px;border-bottom:1px solid var(--lijn)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.menu{display:flex;gap:24px;font-size:.92rem}
.menu a{text-decoration:none;color:var(--grijs)}
.menu a:hover{color:var(--inkt)}
.cta{background:var(--inkt);color:#fff;text-decoration:none;font-weight:600;font-size:.88rem;padding:12px 18px;border-radius:8px}
.cta:hover{background:var(--grafiet)}
@media(max-width:860px){.menu{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,64px);padding:clamp(32px,5vw,72px) 0 clamp(56px,7vw,96px);align-items:start}
@media(max-width:960px){.hero{grid-template-columns:1fr}}
.hero h1{font-weight:700;font-size:clamp(2.8rem,5.6vw,5.2rem);line-height:.98;letter-spacing:-.045em;margin:0 0 24px}
.hero h1 span{background:linear-gradient(transparent 62%,var(--laser) 62%,var(--laser) 92%,transparent 92%)}
.hero .sub{font-size:1.1rem;color:#3E4448;max-width:40ch;margin:0 0 28px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.96rem;padding:15px 22px;border-radius:8px}
.btn.i{background:var(--inkt);color:#fff}
.btn.i:hover{background:var(--grafiet)}
.btn.l{background:var(--laser);color:var(--inkt)}
.btn.l:hover{filter:brightness(1.05)}
.snel{display:flex;gap:0;margin-top:34px;border:1px solid var(--lijn);border-radius:10px;overflow:hidden}
.snel div{flex:1;padding:14px 16px;border-right:1px solid var(--lijn)}
.snel div:last-child{border-right:0;background:var(--vlak)}
.snel b{display:block;font-size:1.05rem;letter-spacing:-.01em}
.snel span{color:var(--grijs);font-size:.84rem}

/* interactive house */
.huis{position:relative;border-radius:14px;overflow:hidden;background:#ddd}
.huis img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pin{all:unset;cursor:pointer;position:absolute;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;font-weight:500;color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.85),0 8px 20px rgba(0,0,0,.35);transition:transform .2s}
.pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:ring 2.4s infinite}
.pin.goed{background:var(--goed);color:var(--goed)}.pin.matig{background:var(--matig);color:var(--matig)}.pin.direct{background:var(--direct);color:var(--direct)}
.pin b{color:#fff;font-weight:500}
.pin:hover,.pin[aria-pressed=true]{transform:translate(-50%,-50%) scale(1.15)}
.pin:focus-visible{outline:3px solid var(--laser);outline-offset:4px}
@keyframes ring{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.4)}}
.bevinding{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--grafiet);color:#fff;border-radius:14px;padding:18px 22px;margin-top:10px;min-height:96px}
.bevinding .st{font-family:var(--mono);font-size:.7rem;padding:6px 10px;border-radius:999px;color:#fff;white-space:nowrap}
.bevinding h3{margin:0 0 2px;font-size:1.15rem;letter-spacing:-.01em}
.bevinding p{margin:0;font-size:.92rem;color:#B8C0C4}
.bevinding .kost{text-align:right;font-family:var(--mono);font-size:.78rem;color:#B8C0C4;white-space:nowrap}
.bevinding .kost b{display:block;font-family:'Familjen Grotesk',sans-serif;font-size:1.3rem;color:var(--laser);letter-spacing:-.01em}
@media(max-width:620px){.bevinding{grid-template-columns:1fr}.bevinding .kost{text-align:left}}
.hint{font-size:.84rem;color:var(--grijs);margin-top:10px}

section{padding:clamp(64px,8vw,112px) 0}
.kop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,52px)}
@media(max-width:820px){.kop{grid-template-columns:1fr}}
.kop h2{font-weight:700;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.04em;margin:0}
.kop p{margin:0;color:var(--grijs);max-width:48ch}

/* pakketten table */
#keuringen{background:var(--vlak);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.tabel-wrap{overflow-x:auto;background:var(--wit);border-radius:14px;border:1px solid var(--lijn)}
table.pak{width:100%;border-collapse:collapse;min-width:720px}
.pak th,.pak td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--lijn)}
.pak thead th{vertical-align:bottom;border-bottom:2px solid var(--inkt)}
.pak thead th:first-child{width:38%}
.pak .naam{display:block;font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.pak .prijs{display:block;font-size:2rem;font-weight:700;letter-spacing:-.04em;margin-top:6px}
.pak .prijs small{font-size:.8rem;font-weight:400;color:var(--grijs);letter-spacing:0}
.pak thead th.aanbevolen{background:var(--grafiet);color:#fff;border-radius:10px 10px 0 0}
.pak thead th.aanbevolen .prijs small{color:#B8C0C4}
.pak thead th.aanbevolen .tag{display:inline-block;background:var(--laser);color:var(--inkt);font-family:var(--mono);font-size:.64rem;padding:4px 8px;border-radius:999px;margin-bottom:10px}
.pak td.col2{background:rgba(31,36,39,.04)}
.pak tbody td:first-child{font-weight:500}
.pak tbody td small{display:block;font-weight:400;color:var(--grijs);font-size:.84rem}
.ja{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--inkt);color:var(--laser);font-size:.8rem}
.nee{color:#B5BAB6}
.pak tfoot td{border-bottom:0;padding-top:20px;padding-bottom:22px}
.pak-m{display:none}
@media(max-width:760px){.tabel-wrap{display:none}.pak-m{display:grid;gap:14px}
.pm{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:22px}
.pm.aanbevolen{background:var(--grafiet);color:#fff;border-color:var(--grafiet)}
.pm .tag{display:inline-block;background:var(--laser);color:var(--inkt);font-family:var(--mono);font-size:.64rem;padding:4px 8px;border-radius:999px;margin-bottom:10px}
.pm h3{margin:0;font-size:1.3rem;letter-spacing:-.02em}.pm .prijs{font-size:2rem;font-weight:700;letter-spacing:-.04em;margin:4px 0 14px}
.pm .prijs small{font-size:.8rem;font-weight:400;opacity:.7;letter-spacing:0}
.pm ul{list-style:none;margin:0 0 18px;padding:0;font-size:.95rem}.pm li{padding:8px 0;border-top:1px solid rgba(128,128,128,.25);display:flex;gap:10px}
.pm li.nee{opacity:.45;text-decoration:line-through}.pm li::before{content:"\2713";font-weight:700}.pm li.nee::before{content:"\2013"}}
@media(max-width:560px){.onderdeel{grid-template-columns:86px 1fr 86px;gap:10px;font-size:.86rem}.totaal{grid-template-columns:1fr}.papier{transform:none}.snel{flex-direction:column}.snel div{border-right:0;border-bottom:1px solid var(--lijn)}.snel div:last-child{border-bottom:0}}
.aanvraag>*,.form>*{min-width:0}.form input,.form select{width:100%;min-width:0}

/* rapport preview */
.rapport-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:start}
@media(max-width:900px){.rapport-grid{grid-template-columns:1fr}}
.papier{background:#fff;border:1px solid var(--lijn);border-radius:6px;box-shadow:0 30px 60px -30px rgba(17,20,22,.35);padding:clamp(22px,3vw,40px);transform:rotate(-.6deg)}
.papier .kopregel{display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid var(--inkt);padding-bottom:12px;margin-bottom:18px}
.papier .kopregel b{font-size:1.1rem}
.onderdeel{display:grid;grid-template-columns:130px 1fr 110px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--lijn);font-size:.94rem}
.meter{height:8px;border-radius:4px;background:var(--vlak);overflow:hidden}
.meter i{display:block;height:100%;border-radius:4px}
.onderdeel .oordeel{font-family:var(--mono);font-size:.68rem;text-align:right}
.totaal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.totaal div{background:var(--vlak);border-radius:8px;padding:14px 16px}
.totaal span{display:block;font-family:var(--mono);font-size:.66rem;color:var(--grijs)}
.totaal b{font-size:1.4rem;letter-spacing:-.02em}
.totaal div.rood b{color:var(--direct)}
.papier small{display:block;margin-top:16px;color:var(--grijs);font-size:.78rem}
.uitleg p{color:#3E4448;margin:0 0 18px;max-width:46ch}
.uitleg ul{list-style:none;margin:0 0 26px;padding:0}
.uitleg li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--lijn)}
.uitleg li i{flex:none;width:12px;height:12px;border-radius:50%;margin-top:7px}

/* inspecteur */
#inspecteur{background:var(--grafiet);color:#EEF0EC}
.insp{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);align-items:center}
@media(max-width:860px){.insp{grid-template-columns:1fr}}
.insp .ft{position:relative;border-radius:14px;overflow:hidden}
.insp .ft img{width:100%;aspect-ratio:4/5;object-fit:cover}
.insp .ft .meet{position:absolute;left:14px;bottom:14px;background:var(--laser);color:var(--inkt);font-family:var(--mono);font-size:.72rem;padding:8px 12px;border-radius:6px}
.insp h2{font-weight:700;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.04em;margin:0 0 20px;color:#fff}
.insp p{color:#B8C0C4;margin:0 0 18px;max-width:52ch}
.insp-foto2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.insp-foto2 img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.insp-foto2 figure{margin:0}
.insp-foto2 figcaption{font-size:.8rem;color:#8E979C;padding-top:8px}

/* faq */
.faq{max-width:900px}
.faq details{border-top:1px solid var(--lijn)}
.faq details:last-child{border-bottom:1px solid var(--lijn)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-weight:600;font-size:1.15rem;letter-spacing:-.01em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;border-right:2px solid var(--inkt);border-bottom:2px solid var(--inkt);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 22px;color:#3E4448;max-width:68ch}
.faq summary:focus-visible{outline:2px solid var(--inkt);outline-offset:4px}

/* contact */
#contact{padding-top:0}
.aanvraag{background:var(--laser);border-radius:18px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:860px){.aanvraag{grid-template-columns:1fr}}
.aanvraag h2{font-weight:700;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.98;letter-spacing:-.045em;margin:0 0 16px}
.aanvraag p{margin:0;max-width:40ch}
.form{display:grid;grid-template-columns:1fr 110px;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:.84rem;font-weight:600}
.form label.vol{grid-column:1/-1}
.form input,.form select{font:inherit;font-size:1rem;padding:13px 14px;border:1.5px solid var(--inkt);border-radius:8px;background:#fff;color:var(--inkt)}
.form button{grid-column:1/-1;font:inherit;font-weight:600;font-size:1rem;padding:16px;border:0;border-radius:8px;background:var(--inkt);color:#fff;cursor:pointer}
.form button:hover{background:var(--grafiet)}
.form input:focus-visible,.form select:focus-visible,.form button:focus-visible{outline:3px solid var(--inkt);outline-offset:2px}
footer{font-size:.84rem;color:var(--grijs)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;padding-bottom:34px}
footer strong{color:var(--inkt)}
a:focus-visible{outline:2px solid var(--inkt);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   Subpagina's — bouwt voort op de motieven van de homepage
   (laser-markering, meters, mono-labels, rapportpapier, donkere bevindingbalk)
   ========================================================================== */
.menu a[aria-current=page]{color:var(--inkt);font-weight:600;background:linear-gradient(transparent 68%,var(--laser) 68%,var(--laser) 94%,transparent 94%)}
.btn.o{border:1.5px solid var(--inkt);padding:13.5px 20.5px;color:var(--inkt)}
.btn.o:hover{background:var(--inkt);color:#fff}
.btn:focus-visible{outline:3px solid var(--inkt);outline-offset:3px}
.btn,.cta{min-height:44px}
.knoppen{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* paginakop */
.pkop{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,64px);padding:clamp(32px,5vw,64px) 0 clamp(52px,6vw,88px);align-items:center}
.pkop>*{min-width:0}
@media(max-width:960px){.pkop{grid-template-columns:1fr}}
.spoor{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--mono);font-size:.68rem;color:var(--grijs);margin:0 0 22px}
.spoor a{text-decoration:none}.spoor a:hover{color:var(--inkt)}
.spoor i{width:8px;height:8px;border-radius:50%;background:var(--laser);box-shadow:0 0 0 1.5px var(--inkt)}
.pkop h1{font-weight:700;font-size:clamp(2.6rem,5vw,4.7rem);line-height:.98;letter-spacing:-.045em;margin:0 0 22px}
.pkop h1 span{background:linear-gradient(transparent 62%,var(--laser) 62%,var(--laser) 92%,transparent 92%)}
.pkop .sub{font-size:1.1rem;color:#3E4448;max-width:44ch;margin:0 0 28px}
.pkop .snel{margin-top:30px}
.beeld{position:relative;border-radius:14px;overflow:hidden;background:#ddd;margin:0}
.beeld img{width:100%;aspect-ratio:16/11;object-fit:cover}
.beeld .meet{position:absolute;left:14px;bottom:14px;background:var(--laser);color:var(--inkt);font-family:var(--mono);font-size:.72rem;padding:8px 12px;border-radius:6px}
span.pin{cursor:default}

section.vlak{background:var(--vlak);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
section.donker{background:var(--grafiet);color:#EEF0EC}
section.donker .kop h2{color:#fff}
section.donker .kop p{color:#B8C0C4}
section.kort{padding-top:0}
.mono-l{font-family:var(--mono);font-size:.68rem;color:var(--grijs);display:block;margin-bottom:8px}

/* keuringen: index */
.kr-index{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:0}
.kr-index a{display:grid;gap:4px;text-decoration:none;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:18px 20px;min-height:44px;transition:border-color .2s}
.kr-index a:hover{border-color:var(--inkt)}
.kr-index .mono{color:var(--grijs)}
.kr-index b{font-size:1.15rem;letter-spacing:-.02em}
.kr-index span:last-child{font-size:.88rem;color:var(--grijs)}
@media(max-width:900px){.kr-index{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.kr-index{grid-template-columns:1fr}}

/* keuringen: blok per keuring */
.kr{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,80px);align-items:start;scroll-margin-top:24px}
.kr>*{min-width:0}
.kr+.kr{margin-top:clamp(64px,8vw,112px);padding-top:clamp(64px,8vw,112px);border-top:1px solid var(--lijn)}
@media(max-width:900px){.kr{grid-template-columns:1fr}}
.nr-pil{display:inline-block;font-family:var(--mono);font-size:.68rem;background:var(--laser);color:var(--inkt);padding:5px 10px;border-radius:999px}
.kr h2{font-weight:700;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1;letter-spacing:-.04em;margin:16px 0 18px}
.kr p{color:#3E4448;margin:0 0 18px;max-width:54ch}
.kr h3{font-size:1rem;margin:28px 0 6px;letter-spacing:-.01em}
.check{list-style:none;margin:0;padding:0}
.check li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--lijn);font-size:.96rem}
.check li::before{content:"\2713";flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--inkt);color:var(--laser);font-size:.72rem;margin-top:1px}
.check li small{display:block;color:var(--grijs);font-size:.84rem}
.kr-media{display:grid;gap:12px}
.kr-media .beeld img{aspect-ratio:4/3}
.spec{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
.spec .spec-kop{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--grafiet);color:#fff;padding:18px 22px}
.spec .spec-kop b{font-size:1.1rem;letter-spacing:-.01em}
.spec .spec-kop .mono{color:#B8C0C4}
.spec .spec-kop strong{display:block;font-size:1.6rem;letter-spacing:-.03em;color:var(--laser);text-align:right;line-height:1.1}
.spec dl{margin:0}
.spec .rij{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:13px 22px;border-bottom:1px dashed var(--lijn);font-size:.94rem}
.spec dt{font-family:var(--mono);font-size:.66rem;color:var(--grijs);padding-top:3px}
.spec dd{margin:0}
.spec .voet{padding:16px 22px 20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.spec .voet small{color:var(--grijs);font-size:.8rem}
@media(max-width:480px){.spec .rij{grid-template-columns:1fr;gap:2px}}

/* werkwijze in stappen */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.stap{position:relative;padding:30px 28px 0 0;border-top:2px solid rgba(255,255,255,.22)}
.stap::before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--laser)}
.stap .mono{color:var(--laser)}
.stap h3{font-size:1.3rem;letter-spacing:-.02em;margin:10px 0 8px;color:#fff}
.stap p{margin:0;color:#B8C0C4;font-size:.95rem}
@media(max-width:900px){.stappen{grid-template-columns:1fr 1fr;row-gap:40px}}
@media(max-width:520px){.stappen{grid-template-columns:1fr}}
.stappen.licht .stap{border-top-color:var(--inkt)}
.stappen.licht .stap::before{box-shadow:0 0 0 1.5px var(--inkt)}
.stappen.licht .stap .mono{color:var(--grijs)}
.stappen.licht .stap h3{color:var(--inkt)}
.stappen.licht .stap p{color:#3E4448}

/* wie ben u */
.wie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wie a{display:flex;flex-direction:column;gap:10px;text-decoration:none;border:1px solid var(--lijn);border-radius:14px;padding:26px;background:var(--wit);transition:border-color .2s,transform .2s}
.wie a:hover{border-color:var(--inkt);transform:translateY(-2px)}
.wie h3{margin:0;font-size:1.4rem;letter-spacing:-.02em}
.wie p{margin:0;color:#3E4448;font-size:.95rem}
.wie .mono{margin-top:auto;padding-top:10px;border-top:1px solid var(--lijn)}
@media(max-width:860px){.wie{grid-template-columns:1fr}}

/* afsluitende CTA (hergebruikt .aanvraag) */
.slot-lijst{list-style:none;margin:0 0 24px;padding:0}
.slot-lijst li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid rgba(17,20,22,.22)}
.slot-lijst li:last-child{border-bottom:1px solid rgba(17,20,22,.22)}
.slot-lijst b{font-weight:600}
.slot-lijst li>span{font-family:var(--mono);font-size:.72rem;padding-top:3px;text-align:right}
.aanvraag .knoppen{margin-top:4px}

/* rapport: voorbeeldblad */
.blad-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,5vw,72px);align-items:start}
.blad-grid>*{min-width:0}
@media(max-width:1000px){.blad-grid{grid-template-columns:1fr}}
.papier.blad{transform:rotate(.35deg)}
.nr{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--laser);border:1.5px solid var(--inkt);font-family:var(--mono);font-size:.62rem;color:var(--inkt);vertical-align:middle}
.blad .meta{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--lijn);border-radius:8px;margin:0 0 18px;position:relative}
.blad .meta div{padding:10px 12px;border-right:1px solid var(--lijn)}
.blad .meta div:last-child{border-right:0}
.blad .meta dt{font-family:var(--mono);font-size:.6rem;color:var(--grijs)}
.blad .meta dd{margin:2px 0 0;font-size:.88rem;font-weight:600}
.blad .meta>.nr,.blad .samen>.nr,.blad .bfoto>.nr,.blad .bev>.nr{position:absolute;right:-12px;top:-12px}
.blad .samen{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--grafiet);color:#fff;border-radius:8px;padding:14px 16px;margin:0 0 22px}
.blad .samen .st{font-family:var(--mono);font-size:.64rem;padding:6px 10px;border-radius:999px;background:var(--matig);color:#fff;white-space:nowrap}
.blad .samen p{margin:0;font-size:.9rem;color:#DCE1E3}
.blad h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px;font-size:1.05rem;letter-spacing:-.01em;padding-bottom:8px;border-bottom:2px solid var(--inkt)}
.blad h3 .mono{font-weight:400;color:var(--grijs)}
.bfoto{position:relative;margin:0 0 14px}
.bfoto .huis img{aspect-ratio:16/9;object-position:50% 0}
.bfoto .pin{width:26px;height:26px;font-size:.62rem}
.bfoto .pin::after{display:none}
.bfoto figcaption{font-size:.76rem;color:var(--grijs);margin-top:6px}
.bev{position:relative;margin:0;padding:0;list-style:none}
.bev li{display:grid;grid-template-columns:28px 1fr auto 118px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--lijn);font-size:.9rem}
.bev .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-family:var(--mono);font-size:.6rem}
.bev b{display:block;font-weight:600}
.bev small{display:block;color:var(--grijs);font-size:.8rem;margin:0;line-height:1.4}
.bev .k{font-family:var(--mono);font-size:.7rem;text-align:right}
.u{display:inline-block;font-family:var(--mono);font-size:.6rem;padding:4px 8px;border-radius:999px;color:#fff;white-space:nowrap}
.u.direct,.n.direct{background:var(--direct)}.u.matig,.n.matig{background:var(--matig)}.u.goed,.n.goed{background:var(--goed)}
.u.nader{background:transparent;color:var(--direct);border:1.5px dashed var(--direct)}
.blad-voet{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:12px;border-top:1px solid var(--lijn);font-family:var(--mono);font-size:.62rem;color:var(--grijs)}
@media(max-width:640px){.blad .meta{grid-template-columns:1fr 1fr}.blad .meta div:nth-child(2){border-right:0}.blad .meta div:nth-child(-n+2){border-bottom:1px solid var(--lijn)}
.bev li{grid-template-columns:26px 1fr;row-gap:6px}.bev .u,.bev .k{grid-column:2;justify-self:start;text-align:left}
.blad .samen{grid-template-columns:1fr}.blad .samen .st{justify-self:start}
.blad .meta>.nr,.blad .samen>.nr,.blad .bfoto>.nr,.blad .bev>.nr{right:-6px;top:-10px}}
.legenda{list-style:none;margin:0;padding:0}
.legenda li{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:18px 0;border-top:1px solid var(--lijn)}
.legenda li:last-child{border-bottom:1px solid var(--lijn)}
.legenda h3{margin:0 0 4px;font-size:1.1rem;letter-spacing:-.01em}
.legenda p{margin:0;color:#3E4448;font-size:.94rem}
.legenda-kop h2{font-weight:700;font-size:clamp(2rem,3.4vw,3rem);line-height:1;letter-spacing:-.04em;margin:0 0 18px}
.legenda-kop p{color:#3E4448;margin:0 0 24px}

/* urgentieklassen */
.klassen{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.klas{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px}
.klas h3{margin:6px 0 0;font-size:1.25rem;letter-spacing:-.02em}
.klas .mono{color:var(--grijs)}
.klas p{margin:0;font-size:.92rem;color:#3E4448}
.klas .vb{margin-top:auto;padding-top:12px;border-top:1px dashed var(--lijn);font-size:.84rem;color:var(--grijs)}
.klas .meter{margin-top:4px}
.meter i.nader{background:repeating-linear-gradient(90deg,var(--direct) 0 6px,transparent 6px 10px)}
@media(max-width:1100px){.klassen{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.klassen{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.klassen{grid-template-columns:1fr}}

/* tabellen (kostenraming, tarieven) */
.tbl-wrap{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;overflow:hidden}
table.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:top}
.tbl thead th{font-family:var(--mono);font-size:.64rem;font-weight:500;color:var(--grijs);border-bottom:2px solid var(--inkt);vertical-align:bottom}
.tbl td small{display:block;color:var(--grijs);font-size:.82rem}
.tbl .r{text-align:right;white-space:nowrap}
.tbl .bedrag{font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
.tbl tfoot td{background:var(--vlak);font-weight:700;border-bottom:0}
.tbl tfoot .rood{color:var(--direct)}
.tbl thead th.hl{background:var(--grafiet);color:#fff}
.tbl thead th.hl .tag{display:inline-block;background:var(--laser);color:var(--inkt);font-size:.6rem;padding:3px 7px;border-radius:999px;margin-bottom:6px}
.tbl td.hl{background:rgba(31,36,39,.045)}
.tbl .prijs{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
@media(max-width:760px){
 .tbl thead{display:none}
 .tbl,.tbl tbody,.tbl tfoot,.tbl tr,.tbl td{display:block;width:100%}
 .tbl tr{padding:14px 18px;border-bottom:1px solid var(--lijn)}
 .tbl td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:14px;text-align:left}
 .tbl td.r{text-align:right}
 .tbl td[data-l]::before{content:attr(data-l);font-family:var(--mono);font-size:.64rem;color:var(--grijs);padding-top:4px;text-align:left;white-space:nowrap}
 .tbl td:first-child{display:block;padding-bottom:8px}
 .tbl td.hl{background:none}
 .tbl tfoot tr{background:var(--vlak)}
 .tbl .prijs{font-size:1.2rem}
}
.noten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:36px}
.noten div{border-top:2px solid var(--inkt);padding-top:16px}
.noten h3{margin:8px 0 6px;font-size:1.1rem;letter-spacing:-.01em}
.noten p{margin:0;color:#3E4448;font-size:.94rem}
@media(max-width:820px){.noten{grid-template-columns:1fr}}

/* inhoud rapport (hoofdstukken) */
.hfd{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(20px,4vw,64px);list-style:none;margin:0;padding:0;counter-reset:h}
.hfd li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(255,255,255,.18)}
.hfd li::before{counter-increment:h;content:counter(h,decimal-leading-zero);font-family:var(--mono);font-size:.72rem;color:var(--laser)}
.hfd b{color:#fff;font-weight:600}
.hfd small{display:block;color:#B8C0C4;font-size:.86rem}
.hfd li>span:last-child{font-family:var(--mono);font-size:.64rem;color:#8E979C;white-space:nowrap}
@media(max-width:760px){.hfd{grid-template-columns:1fr}}

/* tarieven: rekenhulp */
.reken{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:stretch}
.reken>*{min-width:0}
@media(max-width:900px){.reken{grid-template-columns:1fr}}
.reken-in{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:clamp(20px,3vw,32px);display:grid;gap:20px}
.reken-in>label{display:flex;flex-direction:column;gap:6px;font-size:.84rem;font-weight:600}
.reken-in select{font:inherit;font-size:1rem;padding:13px 14px;border:1.5px solid var(--inkt);border-radius:8px;background:#fff;color:var(--inkt);width:100%;min-width:0}
.reken-in select:focus-visible{outline:3px solid var(--laser);outline-offset:2px}
.uitkomst{background:var(--grafiet);color:#fff;border-radius:14px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column}
.uitkomst .mono{color:#B8C0C4}
.uitkomst output{display:block;font-size:clamp(2.6rem,5vw,4rem);font-weight:700;letter-spacing:-.045em;color:var(--laser);line-height:1;margin:10px 0 6px}
.uitkomst .regels{list-style:none;margin:18px 0 22px;padding:0;font-size:.9rem}
.uitkomst .regels li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.14);color:#DCE1E3}
.uitkomst .regels li>span:last-child{font-family:var(--mono);font-size:.74rem;white-space:nowrap}
.uitkomst small{color:#8E979C;font-size:.8rem}
.uitkomst .btn{margin-top:auto;align-self:flex-start}

/* keuzepillen (radio/checkbox) */
.keuze{border:0;margin:0;padding:0;min-width:0}
.keuze legend{font-size:.84rem;font-weight:600;padding:0;margin-bottom:8px}
.opties{display:flex;flex-wrap:wrap;gap:8px}
.optie{position:relative;display:block}
.optie input{position:absolute;opacity:0;width:1px;height:1px}
.optie span{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1.5px solid var(--inkt);border-radius:999px;font-size:.92rem;font-weight:500;background:#fff;cursor:pointer;transition:background .15s}
.optie span small{font-family:var(--mono);font-size:.64rem;color:var(--grijs)}
.optie input:checked+span{background:var(--inkt);color:#fff}
.optie input:checked+span small{color:var(--laser)}
.optie input:focus-visible+span{outline:3px solid var(--laser);outline-offset:2px;box-shadow:0 0 0 5px var(--inkt)}

/* tarieven: toeslagen + annulering */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.duo>*{min-width:0}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.duo h2{font-weight:700;font-size:clamp(2rem,3.4vw,3rem);line-height:1;letter-spacing:-.04em;margin:0 0 14px}
.duo>div>p{color:#3E4448;margin:0 0 24px;max-width:48ch}
.regels-l{list-style:none;margin:0;padding:0}
.regels-l li{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 0;border-top:1px solid var(--lijn)}
.regels-l li:last-child{border-bottom:1px solid var(--lijn)}
.regels-l b{font-weight:600}
.regels-l small{display:block;color:var(--grijs);font-size:.84rem}
.regels-l li>span:last-child{font-family:var(--mono);font-size:.74rem;white-space:nowrap;padding-top:3px;text-align:right}
.annuleer{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:18px}
.annuleer div{display:flex;flex-direction:column;gap:8px}
.annuleer i{display:block;height:10px;border-radius:5px}
.annuleer .mono{color:var(--grijs)}
.annuleer b{font-size:1.05rem;letter-spacing:-.01em}
.annuleer small{color:var(--grijs);font-size:.82rem;line-height:1.35}
@media(max-width:560px){.annuleer{grid-template-columns:1fr 1fr;row-gap:22px}}
.let{background:var(--vlak);border-radius:10px;padding:16px 18px;font-size:.92rem;color:#3E4448;border-left:4px solid var(--laser)}
.let b{color:var(--inkt)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:12px;align-items:start}
.contact-grid>*{min-width:0}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr}}
.aanvraag.enkel{grid-template-columns:1fr}
.aanvraag.enkel h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:10px}
.form.groot{grid-template-columns:1fr 1fr;gap:14px}
.form.groot .keuze,.form.groot .vol{grid-column:1/-1}
.form .optie{display:block;font-weight:500}
.form .optie span{background:transparent}
.form .optie input:checked+span{background:var(--inkt)}
.form textarea{font:inherit;font-size:1rem;padding:13px 14px;border:1.5px solid var(--inkt);border-radius:8px;background:#fff;color:var(--inkt);width:100%;min-width:0;resize:vertical;min-height:120px}
.form textarea:focus-visible{outline:3px solid var(--inkt);outline-offset:2px}
.form .hulp{font-weight:400;font-size:.78rem;opacity:.75}
.form .scheid{grid-column:1/-1;font-family:var(--mono);font-size:.66rem;padding-top:10px;border-top:1px solid rgba(17,20,22,.25);margin-top:4px}
.form .privacy-noot{grid-column:1/-1;font-size:.82rem;margin:0}
.form .privacy-noot a{font-weight:600}
@media(max-width:560px){.form.groot{grid-template-columns:1fr}}
.gegevens{background:var(--grafiet);color:#EEF0EC;border-radius:18px;padding:clamp(24px,3vw,36px);position:sticky;top:20px}
.gegevens h2{margin:0 0 18px;font-size:1.5rem;letter-spacing:-.02em;color:#fff}
.gegevens dl{margin:0}
.gegevens div{padding:12px 0;border-top:1px solid rgba(255,255,255,.14)}
.gegevens dt{font-family:var(--mono);font-size:.62rem;color:#8E979C;margin-bottom:3px}
.gegevens dd{margin:0;font-size:.98rem}
.gegevens a{text-decoration:none;display:inline-flex;min-height:28px;align-items:center}
.gegevens a:hover{color:var(--laser)}
.gegevens .groot-tel{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--laser)}
.gegevens a:focus-visible{outline-color:var(--laser)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{font-size:.92rem;border:1px solid var(--lijn);background:var(--wit);border-radius:999px;padding:8px 14px}
.chips li.in{background:var(--inkt);color:#fff;border-color:var(--inkt)}

/* privacy */
.tekst-grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.tekst-grid>*{min-width:0}
@media(max-width:860px){.tekst-grid{grid-template-columns:1fr}.toc{position:static!important}}
.toc{position:sticky;top:24px;border-top:2px solid var(--inkt);padding-top:14px}
.toc ol{list-style:none;margin:10px 0 0;padding:0;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:10px;text-decoration:none;padding:8px 0;font-size:.92rem;color:var(--grijs);min-height:36px;align-items:center}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:.62rem}
.toc a:hover{color:var(--inkt)}
.tekst{max-width:72ch}
.tekst section{padding:0 0 36px;margin:0 0 36px;border-bottom:1px solid var(--lijn);scroll-margin-top:20px}
.tekst section:last-child{border-bottom:0}
.tekst h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em;line-height:1.1;margin:0 0 14px}
.tekst p,.tekst li{color:#3E4448}
.tekst p{margin:0 0 14px}
.tekst ul{margin:0 0 14px;padding-left:20px}
.tekst li{margin-bottom:6px}
.tekst .tbl-wrap{margin:8px 0 14px}

/* footer (uitgebreid) */
footer{border-top:1px solid var(--lijn)}
footer .wrap.f-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(20px,4vw,64px);padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(28px,4vw,40px);border-bottom:1px solid var(--lijn)}
.f-top>*{min-width:0}
.f-top .logo{margin:0 0 12px;color:var(--inkt)}
.f-top p{margin:0;max-width:38ch}
.f-top .mono{display:block;color:var(--inkt);margin-bottom:10px}
.f-top ul{list-style:none;margin:0;padding:0}
.f-top li a{text-decoration:none;display:inline-flex;min-height:32px;align-items:center}
.f-top li a:hover{color:var(--inkt)}
@media(max-width:760px){footer .wrap.f-top{grid-template-columns:1fr}}
.form .form__status{grid-column:1/-1}
.form.home{grid-template-columns:1fr 110px}
.form.home label:nth-of-type(2),.form.home label:nth-of-type(3){grid-column:1/-1}
.kop p a,.faq a{font-weight:600}
.blad .kader{position:relative}
.blad .kader>.nr{position:absolute;right:-12px;top:-12px;z-index:2}
@media(max-width:640px){.blad .kader>.nr{right:-8px;top:-10px}}
.spec .spec-kop .mono{display:block;margin-top:2px}
.uitkomst small{margin-bottom:22px}
.hint a{font-weight:600}
img[height]{height:auto}
.annuleer .mono{font-size:.6rem;line-height:1.3;min-height:2.6em}
@media(max-width:760px){.tbl td:empty{display:none}}