:root {
  --groen: #0F3B2E;      /* keurgroen: vertrouwen, officieel */
  --groen-2: #1C5743;
  --lint: #F5C518;       /* meetlint-geel: alleen stempel en hoofdknop */
  --beton: #E7E9E5;
  --wit: #FFFFFF;
  --inkt: #17201B;
  --staal: #5E6A64;
  --lijn: #CDD2CD;
  --rood: #B4442B;
  --r-klein: 6px;
  --r-groot: 14px;
  --max: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { font: 400 17px/1.6 'Public Sans', system-ui, sans-serif; color: var(--inkt); background: var(--wit) }
img { display: block; max-width: 100% }
a { color: inherit }
:focus-visible { outline: 3px solid var(--lint); outline-offset: 3px; border-radius: 4px }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px }
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; font-optical-sizing: auto; line-height: 1.04; letter-spacing: -.02em }

/* ---------- header ---------- */
.kop { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lijn) }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px }
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 22px/1 'Bricolage Grotesque'; color: var(--groen); letter-spacing: -.02em }
.merk svg { width: 34px; height: 34px }
.nav { display: flex; gap: 28px; align-items: center; font-weight: 500; font-size: 15px }
.nav a { text-decoration: none; color: var(--staal) }
.nav a:hover { color: var(--inkt) }
.nav .vak { color: var(--groen); font-weight: 600; border: 1.5px solid var(--groen); padding: 8px 14px; border-radius: var(--r-klein) }
@media (max-width: 820px) { .nav a:not(.vak) { display: none } }

/* ---------- hero ---------- */
.hero { overflow-x: clip; padding: 48px 0 104px }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center }
.hero h1 { font-size: clamp(40px, 4.7vw, 66px); font-weight: 800; color: var(--groen); max-width: 11ch }
.hero .lead { font-size: 18px; color: var(--staal); max-width: 34em; margin-top: 22px }
.zoek { margin-top: 34px; background: var(--wit); border: 1.5px solid var(--groen); border-radius: var(--r-groot); padding: 8px; display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 8px; box-shadow: 0 18px 40px -24px rgba(15,59,46,.45) }
.veld { display: flex; flex-direction: column; padding: 8px 12px; border-radius: var(--r-klein) }
.veld + .veld { border-left: 1px solid var(--lijn) }
.veld label { font-size: 13px; font-weight: 600; color: var(--staal) }
.veld input { border: 0; font: 500 17px 'Public Sans'; color: var(--inkt); padding: 4px 0; background: transparent; width: 100% }
.veld input:focus { outline: none }
.veld:focus-within { background: #F4F6F3 }
.knop { font: 700 16px 'Public Sans'; border: 0; border-radius: 10px; padding: 0 26px; cursor: pointer; background: var(--lint); color: var(--inkt); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 56px }
.knop:hover { background: #E8B90C }
.knop.donker { background: var(--groen); color: var(--wit) }
.knop.donker:hover { background: var(--groen-2) }
.klein { font-size: 14px; color: var(--staal); margin-top: 14px }
.snel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px }
.snel button { font: 500 14px 'Public Sans'; border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt); border-radius: 999px; padding: 7px 14px; cursor: pointer }
.snel button:hover { border-color: var(--groen) }

.foto { position: relative }
.foto img { width: 100%; height: min(540px, 66vh); min-height: 380px; object-fit: cover; object-position: 35% 50%; border-radius: var(--r-groot) }
.stempel { position: absolute; width: 168px; height: 168px; top: -30px; right: -26px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)); animation: stempel .9s cubic-bezier(.2,1.4,.4,1) .35s both }
@keyframes stempel { from { transform: scale(1.7) rotate(-40deg); opacity: 0 } to { transform: scale(1) rotate(-12deg); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .stempel { animation: none; transform: rotate(-12deg) } }

.check { position: absolute; left: -36px; bottom: -40px; width: min(370px, 90%); background: var(--wit); border-radius: var(--r-groot); padding: 18px 20px 20px; box-shadow: 0 24px 50px -20px rgba(23,32,27,.45); border: 1px solid var(--lijn) }
.check .titel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.check h3 { font-size: 19px; color: var(--groen) }
.check .vb { font-size: 12px; color: var(--staal); border: 1px solid var(--lijn); border-radius: 999px; padding: 1px 8px }
.check dl { margin-top: 12px; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; font-size: 14.5px }
.check dt { color: var(--staal); padding-right: 10px }
.check dd { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.schaal { position: relative; height: 10px; margin: 16px 0 8px; border-radius: 99px; background: var(--beton) }
.schaal .band { position: absolute; left: 22%; width: 46%; top: 0; bottom: 0; background: #9FC6B2; border-radius: 99px }
.schaal .pin { position: absolute; left: 84%; top: -5px; width: 4px; height: 20px; background: var(--rood); border-radius: 2px }
.check .oordeel { font-size: 14px; color: var(--rood); font-weight: 600 }

@media (max-width: 920px) {
  .hero { padding: 36px 0 96px; background: var(--wit) }
  .hero .wrap { grid-template-columns: 1fr; gap: 64px }
  .foto { margin: 0 8px }
  .check { left: -8px }
  .stempel { width: 128px; height: 128px; right: -6px; top: -36px }
}
@media (max-width: 600px) {
  .zoek { grid-template-columns: 1fr }
  .veld + .veld { border-left: 0; border-top: 1px solid var(--lijn) }
}

/* ---------- beloftes ---------- */
.beloftes { background: var(--beton); padding: 72px 0 80px }
.beloftes .rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px }
.belofte h3 { font-size: 22px; color: var(--groen); margin-bottom: 8px }
.belofte p { color: var(--staal); font-size: 15.5px }
.belofte svg { width: 30px; height: 30px; margin-bottom: 14px; color: var(--groen) }
@media (max-width: 900px) { .beloftes .rij { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .beloftes .rij { grid-template-columns: 1fr; gap: 28px } }

/* ---------- secties ---------- */
section.blok { padding: 96px 0 }
.blok h2 { font-size: clamp(32px, 3.8vw, 48px); color: var(--groen); max-width: 18ch }
.blok .intro { color: var(--staal); max-width: 38em; margin-top: 14px; font-size: 18px }

/* klussen */
.klussen { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; margin-top: 48px }
.groot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.groot a { position: relative; display: block; border-radius: var(--r-groot); overflow: hidden; text-decoration: none; color: var(--wit); aspect-ratio: 4/3 }
.groot a:first-child { grid-column: span 2; aspect-ratio: 16/7 }
.groot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s }
.groot a:hover img { transform: scale(1.04) }
.groot span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; background: linear-gradient(transparent, rgba(10,30,22,.85)); font: 700 20px 'Bricolage Grotesque' }
.groot small { display: block; font: 500 14px 'Public Sans'; opacity: .85 }
.lijst h3 { font-size: 22px; color: var(--groen); margin-bottom: 6px }
.lijst p { color: var(--staal); font-size: 15px; margin-bottom: 18px }
.lijst ul { list-style: none }
.lijst li { break-inside: avoid; border-bottom: 1px solid var(--lijn) }
.lijst li a { display: flex; justify-content: space-between; padding: 11px 0; text-decoration: none; font-weight: 500 }
.lijst li a:hover { color: var(--groen) }
.lijst li em { font-style: normal; color: var(--staal); font-size: 14px; font-variant-numeric: tabular-nums }
@media (max-width: 900px) { .klussen { grid-template-columns: 1fr } }
@media (max-width: 520px) { .lijst ul { columns: 1 } .groot { grid-template-columns: 1fr } .groot a:first-child { grid-column: auto; aspect-ratio: 4/3 } }

/* zo werkt het */
.stappen { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 52px; border-top: 2px solid var(--groen) }
.stap { padding: 22px 28px 0 0; position: relative }
.stap::before { counter-increment: s; content: counter(s); position: absolute; top: -17px; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--groen); color: var(--wit); font: 700 15px/32px 'Public Sans'; text-align: center }
.stap h3 { font-size: 21px; margin-top: 20px; color: var(--inkt) }
.stap p { color: var(--staal); font-size: 15.5px; margin-top: 6px }
@media (max-width: 900px) { .stappen { grid-template-columns: 1fr 1fr; row-gap: 40px } }
@media (max-width: 520px) { .stappen { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--groen); padding-left: 28px } .stap::before { left: -45px; top: 4px } .stap h3 { margin-top: 0 } }

/* offertecheck */
.ocheck { background: var(--groen); color: var(--wit) }
.ocheck .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.ocheck h2 { color: var(--wit) }
.ocheck .intro { color: #C5D6CD }
.ocheck ul { list-style: none; margin-top: 26px }
.ocheck li { padding: 10px 0 10px 30px; position: relative; border-top: 1px solid rgba(255,255,255,.14) }
.ocheck li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 13px; height: 7px; border-left: 2.5px solid var(--lint); border-bottom: 2.5px solid var(--lint); transform: rotate(-45deg) }
.drop { border: 2px dashed rgba(255,255,255,.4); border-radius: var(--r-groot); padding: 48px 28px; text-align: center; cursor: pointer; transition: background .2s, border-color .2s }
.drop:hover, .drop.over { background: rgba(255,255,255,.06); border-color: var(--lint) }
.drop svg { width: 46px; height: 46px; color: var(--lint); margin: 0 auto 14px }
.drop b { display: block; font: 700 22px 'Bricolage Grotesque' }
.drop span { display: block; color: #C5D6CD; font-size: 15px; margin-top: 6px }
.drop .gekozen { color: var(--lint); font-weight: 600; margin-top: 14px; min-height: 1.6em }
.drop .knop { margin-top: 20px; display: inline-flex; color: var(--inkt); font-size: 16px; padding: 0 26px }
@media (max-width: 900px) { .ocheck .wrap { grid-template-columns: 1fr; gap: 40px } }

/* voor vakmensen */
.vakmensen .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start }
.voorwaarden { margin-top: 30px; display: grid; gap: 0 }
.voorwaarden div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--lijn) }
.voorwaarden dt { font-weight: 700; color: var(--groen) }
.voorwaarden dd { color: var(--staal); font-size: 15.5px }
.vakmensen .knop { margin-top: 28px }
.mockup { background: var(--beton); border-radius: var(--r-groot); padding: 26px }
.browser { background: var(--wit); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 40px -26px rgba(23,32,27,.5) }
.browser .balk { display: flex; gap: 6px; padding: 10px 12px; background: #F1F3F0; border-bottom: 1px solid var(--lijn) }
.browser .balk i { width: 10px; height: 10px; border-radius: 50%; background: var(--lijn) }
.browser .balk em { margin-left: 10px; font-style: normal; font-size: 12px; color: var(--staal) }
.browser .inhoud { padding: 22px; display: grid; grid-template-columns: 1fr 120px; gap: 18px; align-items: center }
.browser .inhoud strong { font: 800 22px/1.1 'Bricolage Grotesque'; color: #2B2B2B; display: block }
.browser .inhoud p { font-size: 13px; color: var(--staal); margin-top: 8px }
.browser .nep { height: 9px; border-radius: 9px; background: #ECEEEB; margin-top: 8px }
.badge-onderschrift { font-size: 14px; color: var(--staal); margin-top: 16px }
@media (max-width: 900px) { .vakmensen .wrap { grid-template-columns: minmax(0, 1fr) } .voorwaarden div { grid-template-columns: 1fr; gap: 4px } }

/* transparantie + footer */
.eerlijk { background: var(--beton); padding: 56px 0 }
.eerlijk p { max-width: 62em; color: var(--inkt); font-size: 16px }
.eerlijk p + p { margin-top: 10px; color: var(--staal); font-size: 15px }
footer { background: var(--inkt); color: #B9C2BD; padding: 44px 0; font-size: 14px }
footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap }
footer .merk { color: var(--wit) }

/* ---------- subpagina's: keurmerk en controle ---------- */
.pagina-kop { padding: 56px 0 40px; border-bottom: 1px solid var(--lijn) }
.pagina-kop .wrap { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center }
.pagina-kop h1 { font-size: clamp(34px, 4vw, 54px); color: var(--groen); max-width: 16ch }
.pagina-kop p { color: var(--staal); max-width: 40em; margin-top: 14px; font-size: 18px }
.pagina-kop .zegel { width: 132px; height: 132px; transform: rotate(-12deg) }
.inhoud { padding: 56px 0 96px }
.inhoud .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: start }
.inhoud h2 { font-size: 28px; color: var(--groen); margin-bottom: 18px }
.eisen { list-style: none; border-top: 1px solid var(--lijn) }
.eisen li { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--lijn); align-items: start }
.eisen b { display: block; color: var(--inkt) }
.eisen span { color: var(--staal); font-size: 15.5px }
.eisen .st { font-style: normal; font-size: 13.5px; font-weight: 600; white-space: nowrap; padding: 2px 10px; border-radius: 999px }
.st.ok { background: #DCEFE4; color: var(--groen) }
.st.wacht { background: #FBF0C9; color: #6B5300 }
.vink { width: 22px; height: 22px; border-radius: 50%; background: var(--groen); position: relative; margin-top: 2px }
.vink::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border-right: 2.5px solid var(--lint); border-bottom: 2.5px solid var(--lint); transform: rotate(45deg) }
.vink.open { background: var(--beton) }
.vink.open::after { display: none }
.kaart { background: var(--beton); border-radius: var(--r-groot); padding: 28px }
.kaart h3 { font-size: 22px; color: var(--groen) }
.kaart dl { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15.5px }
.kaart dt { color: var(--staal) }
.kaart .knop { margin-top: 22px; width: 100% }
.kaart p.klein { margin-top: 12px }
.terug { display: inline-block; margin-top: 18px; color: var(--groen); font-weight: 600 }
@media (max-width: 900px) { .inhoud .wrap { grid-template-columns: minmax(0, 1fr) } .pagina-kop .wrap { grid-template-columns: minmax(0, 1fr) } .pagina-kop .zegel { display: none } }

/* partners op de homepage */
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 40px }
.partner { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 20px; text-decoration: none }
.partner:hover { border-color: var(--groen) }
.partner img { width: 56px; height: 56px }
.partner b { display: block; font: 700 19px/1.2 'Bricolage Grotesque'; color: var(--inkt) }
.partner span { display: block; color: var(--staal); font-size: 14.5px; margin-top: 3px }
.partner.leeg { border-style: dashed; grid-template-columns: 1fr; color: var(--staal); font-size: 15px }

/* ---------- formulieren (aanvraag, offertecheck) ---------- */
.formpagina { padding: 48px 0 96px; background: var(--beton); min-height: 70vh }
.formpagina .wrap { max-width: 760px }
.formpagina h1 { font-size: clamp(32px, 4vw, 46px); color: var(--groen) }
.formpagina h1:focus { outline: none }
.formpagina .lead { color: var(--staal); font-size: 18px; margin-top: 12px; max-width: 36em }
.voortgang { list-style: none; display: flex; gap: 8px; margin: 28px 0 20px }
.voortgang li { flex: 1; font-size: 14px; font-weight: 600; color: var(--staal); padding-top: 10px; border-top: 4px solid var(--lijn) }
.voortgang li.actief { color: var(--groen); border-color: var(--groen) }
.voortgang li.klaar { color: var(--groen); border-color: #9FC6B2 }
.paneel { background: var(--wit); border-radius: var(--r-groot); padding: 32px; box-shadow: 0 18px 40px -30px rgba(15,59,46,.5) }
.paneel h2 { font-size: 26px; color: var(--groen); margin-bottom: 20px }
.paneel h2:focus { outline: none }
.rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.vak-veld { margin-bottom: 18px }
.vak-veld > label, .vak-veld > .label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px }
.vak-veld .hint { display: block; font-weight: 400; color: var(--staal); font-size: 14px }
.vak-veld input[type=text], .vak-veld input[type=email], .vak-veld input[type=tel], .vak-veld select, .vak-veld textarea {
  width: 100%; font: 400 16px 'Public Sans'; color: var(--inkt); border: 1.5px solid var(--lijn); border-radius: 10px; padding: 12px 14px; background: var(--wit) }
.vak-veld textarea { min-height: 120px; resize: vertical }
.vak-veld input:focus, .vak-veld select:focus, .vak-veld textarea:focus { outline: none; border-color: var(--groen); box-shadow: 0 0 0 3px rgba(15,59,46,.12) }
[aria-invalid="true"] { border-color: var(--rood) !important }
.fout { display: block; color: var(--rood); font-size: 14px; font-weight: 600; min-height: 0; margin-top: 6px }
.fout:empty { display: none }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px }
.keuzes label { border: 1.5px solid var(--lijn); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 15px }
.keuzes input { position: absolute; opacity: 0; pointer-events: none }
.keuzes label:has(input:checked) { border-color: var(--groen); background: #E6F0EA; color: var(--groen); font-weight: 600 }
.keuzes label:has(input:focus-visible) { outline: 3px solid var(--lint); outline-offset: 2px }
.foto-knop { display: inline-flex; align-items: center; gap: 10px; border: 1.5px dashed var(--lijn); border-radius: 10px; padding: 12px 16px; cursor: pointer; font-weight: 600; color: var(--groen) }
.foto-knop:hover { border-color: var(--groen) }
.vinkje { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--inkt); margin-top: 6px }
.vinkje input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--groen) }
.uitleg { background: #F4F6F3; border-radius: 10px; padding: 14px 16px; font-size: 14.5px; color: var(--staal); margin: 8px 0 18px }
.uitleg b { color: var(--inkt) }
.knoppen { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px }
.knop.licht { background: transparent; color: var(--staal); padding: 0 6px; min-height: 48px }
.knop.licht:hover { background: transparent; color: var(--inkt) }
.knop:disabled { opacity: .6; cursor: progress }
.match { list-style: none; margin: 28px 0 8px; display: grid; gap: 12px }
.match li { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; background: var(--wit); border-radius: var(--r-groot); padding: 18px 20px }
.match b { display: block; font: 700 20px/1.2 'Bricolage Grotesque'; color: var(--inkt) }
.match span { color: var(--staal); font-size: 15px }
.match .st { font-style: normal; font-size: 13.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap }
.na { margin-top: 40px }
.na h2 { font-size: 24px; color: var(--groen) }
.na-lijst { margin: 12px 0 24px 20px; color: var(--inkt) }
.na-lijst li { margin-bottom: 8px }
@media (max-width: 600px) { .rij2 { grid-template-columns: 1fr } .paneel { padding: 22px } .match li { grid-template-columns: 44px 1fr } .match .st { grid-column: 2 } }

/* tekstpagina's (zo werkt het, privacy, voorwaarden) */
.tekst { padding: 56px 0 96px }
.tekst .wrap { max-width: 760px }
.tekst h1 { font-size: clamp(34px, 4vw, 50px); color: var(--groen) }
.tekst h2 { font-size: 24px; color: var(--groen); margin: 36px 0 10px }
.tekst p, .tekst li { color: var(--inkt); font-size: 17px }
.tekst p + p { margin-top: 12px }
.tekst ul, .tekst ol { margin: 8px 0 0 22px }
.tekst li { margin-bottom: 6px }
.concept { background: #FBF0C9; color: #5A4600; border-radius: 10px; padding: 12px 16px; font-size: 15px; margin-top: 18px }
.regios { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 32px }
.regios div { border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 18px 20px }
.regios b { display: block; font: 800 34px/1 'Bricolage Grotesque'; color: var(--groen) }
.regios span { display: block; color: var(--staal); font-size: 15px; margin-top: 6px }
footer nav { display: flex; gap: 20px; flex-wrap: wrap }
footer nav a { color: #B9C2BD; text-decoration: none }
footer nav a:hover { color: var(--wit) }

/* ---------- hoofdmenu ---------- */
.kop .wrap { position: relative }
.hoofdmenu { display: flex; align-items: center; gap: 18px; margin-left: auto }
.menu { list-style: none; display: flex; align-items: center; gap: 4px }
.menu-item { position: relative }
.menu-kop { font: 500 15px 'Public Sans'; color: var(--inkt); background: none; border: 0; cursor: pointer; padding: 10px 12px; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px }
button.menu-kop::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s }
.menu-kop:hover, .menu-item.open > .menu-kop { background: #F1F3F0; color: var(--groen) }
.menu-item.open > button.menu-kop::after { transform: rotate(-135deg) translateY(-1px) }
.uitklap { position: absolute; top: calc(100% + 10px); left: 0; min-width: 300px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-groot); box-shadow: 0 24px 50px -24px rgba(23,32,27,.35); padding: 12px; display: none; z-index: 30 }
.uitklap::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px }
.uitklap.breed { display: none; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 8px 20px; width: min(820px, 90vw); left: -40px; padding: 20px 20px 0 }
.menu-item.open > .uitklap { display: block }
.menu-item.open > .uitklap.breed { display: grid }
@media (hover: hover) and (min-width: 1021px) {
  .menu-item:hover > .uitklap { display: block }
  .menu-item:hover > .uitklap.breed { display: grid }
}
.uitklap ul { list-style: none }
.uitklap a, .uitklap .binnenkort { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--inkt); font-weight: 600; font-size: 15px; line-height: 1.35 }
.uitklap a:hover { background: #F1F3F0; color: var(--groen) }
.uitklap a[aria-current="page"] { color: var(--groen); background: #E6F0EA }
.uitklap small { display: block; font-weight: 400; font-size: 13.5px; color: var(--staal); margin-top: 2px }
.uitklap .binnenkort { color: var(--staal); cursor: default; position: relative; padding-right: 92px }
.uitklap .binnenkort em { position: absolute; right: 12px; top: 10px; font-style: normal; font-size: 12px; font-weight: 600; background: #FBF0C9; color: #6B5300; border-radius: 999px; padding: 1px 8px }
.kolom-kop { font: 700 14px 'Public Sans'; color: var(--staal); padding: 0 12px 6px; border-bottom: 1px solid var(--lijn); margin-bottom: 6px }
.uitklap-voet { grid-column: 1 / -1; margin: 8px -20px 0; padding: 14px 32px !important; border-radius: 0 0 var(--r-groot) var(--r-groot) !important; background: var(--beton); color: var(--groen) !important }
.menu-cta { min-height: 44px; padding: 0 18px; font-size: 15px }
.menu-knop { display: none; margin-left: auto; align-items: center; gap: 10px; font: 600 15px 'Public Sans'; background: none; border: 1.5px solid var(--lijn); border-radius: 8px; padding: 9px 14px; cursor: pointer; color: var(--inkt) }
.streep, .streep::before, .streep::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative }
.streep::before, .streep::after { content: ""; position: absolute; left: 0 }
.streep::before { top: -6px } .streep::after { top: 6px }
.mobiel-open .streep { background: transparent }
.mobiel-open .streep::before { top: 0; transform: rotate(45deg) }
.mobiel-open .streep::after { top: 0; transform: rotate(-45deg) }

@media (max-width: 1020px) {
  .menu-knop { display: inline-flex }
  .hoofdmenu { display: none; position: fixed; inset: 68px 0 0 0; background: var(--wit); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 32px; overflow-y: auto }
  .mobiel-open .hoofdmenu { display: flex }
  .menu { flex-direction: column; align-items: stretch; gap: 0 }
  .menu-item { border-bottom: 1px solid var(--lijn) }
  .menu-kop { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 18px; font-weight: 600; border-radius: 0 }
  .menu-kop:hover, .menu-item.open > .menu-kop { background: none }
  .uitklap, .uitklap.breed { position: static; box-shadow: none; border: 0; padding: 0 0 12px; min-width: 0; width: auto }
  .uitklap.breed { grid-template-columns: 1fr; left: 0 }
  .uitklap-voet { margin: 4px 0 0; border-radius: 8px !important; padding: 12px !important }
  .menu-cta { margin-top: 24px; min-height: 54px; font-size: 16px }
}
/* backdrop-filter maakt van de header het kader voor position: fixed; uitzetten als het mobiele menu open is */
.kop.mobiel-open { backdrop-filter: none; background: var(--wit) }

/* ================= kennisbank, kostenpagina's en tools ================= */
.kruimel { padding: 20px 0 0 }
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--staal) }
.kruimel li + li::before { content: "/"; margin-right: 8px; color: var(--lijn) }
.kruimel a { color: var(--staal); text-decoration: none }
.kruimel a:hover { color: var(--groen); text-decoration: underline }
.artikel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; padding-top: 24px; padding-bottom: 96px }
.artikel-tekst { max-width: 760px; min-width: 0 }
.artikel-kop .thema-label a { font-size: 14px; font-weight: 600; color: var(--groen); text-decoration: none; background: #E6F0EA; padding: 4px 12px; border-radius: 999px }
.artikel-kop h1 { font-size: clamp(32px, 4.2vw, 50px); color: var(--groen); margin: 16px 0 14px; max-width: 20ch }
.artikel-kop .meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--staal) }
.artikel .lead { font-size: 19px; line-height: 1.6; color: var(--inkt); margin: 28px 0 24px; font-weight: 500 }
.inhetkort { background: #F4F6F3; border-left: 4px solid var(--groen); border-radius: 0 var(--r-groot) var(--r-groot) 0; padding: 20px 24px; margin-bottom: 24px }
.inhetkort ul { margin: 8px 0 0 18px }
.inhetkort li { margin-bottom: 6px }
.kop-klein { font: 700 14px "Public Sans", sans-serif; color: var(--staal); margin-bottom: 4px }
.toc { border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 18px 24px; margin-bottom: 40px }
.toc ol { margin: 6px 0 0 20px; columns: 2; column-gap: 32px; font-size: 15px }
.toc li { margin-bottom: 4px; break-inside: avoid }
.toc a { color: var(--inkt); text-decoration: none }
.toc a:hover { color: var(--groen); text-decoration: underline }
.tekst h2 { font-size: clamp(25px, 2.6vw, 31px); color: var(--groen); margin: 48px 0 14px; scroll-margin-top: 90px }
.tekst h3 { font-size: 21px; color: var(--inkt); margin: 28px 0 8px; scroll-margin-top: 90px }
.tekst p, .tekst li { font-size: 17.5px; line-height: 1.7 }
.tekst p + p { margin-top: 14px }
.tekst ul, .tekst ol { margin: 12px 0 16px 24px }
.tekst li { margin-bottom: 6px }
.tekst a { color: var(--groen); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 3px }
.tekst strong { color: var(--inkt) }
.tekst .tabel-wrap, .prijs-hero { overflow-x: auto; margin: 20px 0 24px; border: 1px solid var(--lijn); border-radius: var(--r-groot) }
.tekst table, .prijs-hero table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px }
.tekst th, .prijs-hero th { text-align: left; background: #F1F3F0; color: var(--inkt); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--lijn); vertical-align: bottom }
.tekst td, .prijs-hero td { padding: 11px 14px; border-bottom: 1px solid var(--lijn); vertical-align: top; line-height: 1.5 }
.tekst tr:last-child td, .prijs-hero tr:last-child td { border-bottom: 0 }
.prijs-hero td:last-child { font-weight: 700; color: var(--groen) }
.prijs-acties { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 28px }
.kader { border-radius: var(--r-groot); padding: 16px 20px; margin: 22px 0; border-left: 4px solid }
.kader p { margin: 0 }
.kader p + p { margin-top: 8px }
.kader-letop { background: #FBEDE8; border-color: var(--rood) }
.kader-vuistregel { background: #FBF0C9; border-color: var(--lint) }
.kader-kortgezegd { background: #E6F0EA; border-color: var(--groen) }
.cta-blok { background: var(--groen); color: var(--wit); border-radius: var(--r-groot); padding: 24px 26px; margin: 32px 0 }
.cta-blok .cta-kop { font: 700 21px "Bricolage Grotesque", sans-serif; margin-bottom: 6px }
.cta-blok p { color: #D7E5DD; margin-bottom: 14px }
.cta-blok.cta-licht { background: #F1F3F0; color: var(--inkt) }
.cta-blok.cta-licht p { color: var(--staal) }
.cta-blok .knop { min-height: 50px }
.bronnen-kop + ul li { font-size: 15px }
.verder { margin-top: 56px; padding-top: 32px; border-top: 2px solid var(--groen) }
.verder h2 { font-size: 26px; color: var(--groen); margin-bottom: 18px }
.artikel-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px }
.artikel-kaart { display: block; border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 18px 20px; text-decoration: none; color: var(--inkt); background: var(--wit) }
.artikel-kaart:hover { border-color: var(--groen) }
.artikel-kaart b { display: block; font: 700 18px/1.25 "Bricolage Grotesque", sans-serif; color: var(--groen); margin-bottom: 6px }
.artikel-kaart span { display: block; font-size: 14.5px; color: var(--staal); line-height: 1.5 }
.zijbalk { position: sticky; top: 92px; display: grid; gap: 16px }
.zij-cta { background: var(--groen); color: var(--wit); border-radius: var(--r-groot); padding: 22px }
.zij-cta .cta-kop { font: 700 20px "Bricolage Grotesque", sans-serif }
.zij-cta p { color: #D7E5DD; font-size: 15px; margin: 6px 0 14px }
.zij-cta .knop { width: 100%; min-height: 50px }
.zij-links { border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 18px 20px }
.zij-links ul { list-style: none; margin-top: 6px }
.zij-links li { border-bottom: 1px solid var(--lijn) }
.zij-links li:last-child { border-bottom: 0 }
.zij-links a { display: block; padding: 9px 0; color: var(--inkt); text-decoration: none; font-weight: 600; font-size: 15px }
.zij-links a:hover { color: var(--groen) }
@media (max-width: 1020px) {
  .artikel-grid { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .zijbalk { position: static }
  .toc ol { columns: 1 }
}

/* hubs */
.hub { padding: 0 0 96px }
.hub h1 { font-size: clamp(36px, 4.6vw, 56px); color: var(--groen); margin: 18px 0 12px }
.hub .lead { font-size: 19px; color: var(--staal); max-width: 40em; margin-bottom: 16px }
.hub .lead a { color: var(--groen); font-weight: 600 }
.hub-thema { margin-top: 48px }
.hub-thema h2 { font-size: 28px; color: var(--groen); margin-bottom: 6px }
.hub-thema h2 a { color: inherit; text-decoration: none }
.hub-thema h2 a:hover { text-decoration: underline }
.hub-thema .intro { color: var(--staal); margin-bottom: 16px }
.hub-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px }
.hub-links a { display: inline-block; border: 1px solid var(--lijn); border-radius: 999px; padding: 8px 16px; text-decoration: none; color: var(--groen); font-weight: 600 }

/* menu met 4 kolommen */
.uitklap.breed-4 { grid-template-columns: repeat(4, minmax(170px, 1fr)); width: min(960px, 92vw); left: -60px }
@media (max-width: 1020px) { .uitklap.breed-4 { grid-template-columns: 1fr } }

/* footer */
footer.voet { background: var(--inkt); color: #B9C2BD; padding: 56px 0 28px; font-size: 14.5px }
.voet-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px }
.voet-merk p { margin-top: 14px; line-height: 1.6; max-width: 32em }
footer.voet .merk { color: var(--wit) }
.voet-kop { font: 700 15px "Public Sans", sans-serif; color: var(--wit); margin: 0 0 10px }
.voet-kop:not(:first-child) { margin-top: 22px }
footer.voet ul { list-style: none }
footer.voet li { margin-bottom: 6px }
footer.voet a { color: #B9C2BD; text-decoration: none }
footer.voet a:hover { color: var(--wit); text-decoration: underline }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; font-size: 13.5px }
@media (max-width: 900px) { .voet-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .voet-grid { grid-template-columns: 1fr } }

/* tools */
.tool-pagina .paneel { margin-bottom: 24px }
.vc fieldset { border: 0; margin-bottom: 18px }
.label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px }
.keuzes-groot { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px }
.keuzes-groot label { border-radius: 12px; padding: 14px 16px; font-weight: 600 }
.vc-uitkomst { border-radius: var(--r-groot); padding: 26px 28px; margin-bottom: 40px; border: 2px solid }
.vc-uitkomst:focus { outline: none }
.vc-uitkomst .cta-kop { font: 800 26px "Bricolage Grotesque", sans-serif; margin-bottom: 10px }
.vc-uitkomst.vc-ja { background: #E6F0EA; border-color: var(--groen) }
.vc-uitkomst.vc-ja .cta-kop { color: var(--groen) }
.vc-uitkomst.vc-twijfel { background: #FBF5DF; border-color: var(--lint) }
.vc-uitkomst.vc-nee { background: #FBEDE8; border-color: var(--rood) }
.vc-uitkomst.vc-nee .cta-kop { color: var(--rood) }
.vc-lijst { margin: 8px 0 14px 20px }
.vc-lijst li { margin-bottom: 8px; line-height: 1.55 }
ul.vc-lijst.vc-nee { color: #7A2E1D }
ul.vc-lijst.vc-twijfel { color: #5A4600 }
ul.vc-lijst.vc-ja { color: var(--groen) }
.vc-uitkomst .klein a { color: var(--groen); font-weight: 600 }
.kc-regels { display: grid; gap: 16px; margin: 28px 0 12px }
.kc-uitkomst { display: flex; flex-direction: column; justify-content: center; background: #F1F3F0; border-radius: 10px; padding: 12px 16px }
.kc-uitkomst b { font: 800 22px "Bricolage Grotesque", sans-serif; color: var(--groen) }
.kc-uitkomst span:last-child { font-size: 13px; color: var(--staal) }
.kc-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; font-size: 15px }
.kc-voet a { color: var(--groen); font-weight: 600 }
.kc-totaal { margin: 12px 0 48px; background: var(--groen); color: var(--wit) }
.kc-totaal:empty { display: none }
.kc-totaal .kop-klein { color: #C5D6CD }
.kc-totaal p { color: #D7E5DD }
p.kc-groot { font: 800 clamp(30px, 4vw, 42px) "Bricolage Grotesque", sans-serif; color: var(--wit); margin: 4px 0 10px }
.kc-totaal .knop.donker { background: var(--wit); color: var(--groen) }
.aanmelding { background: #F1F3F0; border-radius: var(--r-groot); padding: 24px; margin-top: 28px }
.aanmelding .cta-kop { font: 700 21px "Bricolage Grotesque", sans-serif; color: var(--groen); margin-bottom: 14px }
.aanmelding .knop { margin-top: 8px }
.aanmelding .klein a { color: var(--groen); font-weight: 600 }
.inhoud-controle { padding: 48px 0 96px }
.controle-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: start }
.inhoud-controle h2 { font-size: 28px; color: var(--groen); margin-bottom: 18px }
@media (max-width: 900px) { .controle-grid { grid-template-columns: minmax(0, 1fr) } }

footer.voet .voet-kop a { color: var(--wit) }

#kc-meer { border: 1.5px solid var(--groen); color: var(--groen); padding: 0 20px; min-height: 48px }

.meta-klein { color: var(--staal); font-size: 15px; margin-top: 12px }
.meta-klein a { color: var(--groen); font-weight: 600 }

.badgecode { margin-top: 28px; border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 14px 18px }
.badgecode summary { cursor: pointer; font-weight: 600; color: var(--groen) }
.badgecode pre { white-space: pre-wrap; word-break: break-all; background: #F1F3F0; border-radius: 8px; padding: 12px; font-size: 13px; margin-top: 10px }

.disclaimer { border: 1px solid var(--lijn); border-left: 4px solid var(--staal); border-radius: 0 var(--r-groot) var(--r-groot) 0; padding: 14px 18px; margin: 0 0 24px; font-size: 14.5px; color: var(--staal); background: #FAFBFA }
.disclaimer p + p { margin-top: 6px }
.tekst + .disclaimer { margin-top: 32px }
.disclaimer .geldlenen { color: var(--inkt); font-size: 15px }