/* Taqqle, basis. Geldt voor alle publieke pagina's, niet voor het portal. spec-ronde-3 hoofdstuk 3, 4, 5.1 en 5.10, spec-paginas 1.1 tot en met 1.5, 3 tot en met 6, 8.1 en 10.
   Inhoud: 1 fonts en reset · 2 type · 3 raster · 4 zones en focus · 5 knop, link, chip · 6 blad, regel, status, tijd, afzender, melding, vb, foto
   7 vragen · 8 formulier · 9 menu · 10 mobiel menu · 11 footer · 12 cookiekaart en schakelaar · 13 proefknop
   14 sectie · 15 paginakop · 16 feitenregels · 17 gegevensblad · 18 leeskolom · 19 inhoudsopgave · 20 slot zonder vel · 21 compacte balk · 22 print · 23 beweging uit
   Geen hexwaarden hier: alles uit tokens.css. Sectiewerk van de homepage hoort in css/home.css, dat van de andere pagina's in css/paginas.css. */

/* 1 · fonts en reset */
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"); size-adjust: 94.99%; ascent-override: 105.27%; descent-override: 31.9%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--top-grond); color-scheme: light; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html.menu-open { overflow: hidden; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--wit); color: var(--ink); font: 400 var(--fs-tekst)/var(--lh-tekst) var(--font); font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
html.menu-open body { padding-right: var(--scrollbalk, 0); }
main { flex: 1 0 auto; min-width: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, address, fieldset, legend { margin: 0; padding: 0; }
fieldset { min-width: 0; border: 0; }
address { font-style: normal; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
::selection { background: var(--mint-100); color: var(--ink); }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.overslaan { position: absolute; left: 16px; top: -80px; z-index: var(--z-overslaan); display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--pil); background: var(--ink); color: var(--wit); font-size: 15px; font-weight: 600; text-decoration: none; }
.overslaan:focus { top: 8px; }

/* 2 · type. h1, h2 en h3 hebben hun rol vanzelf; de klassen zijn voor wat geen kop is of een andere rol krijgt */
h1, h2, h3, .blad__titel { overflow-wrap: anywhere; }   /* tekst op 200 procent: een lang woord loopt nooit het scherm uit */
h1, .t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
h2, .t-kop { font-size: var(--fs-kop); line-height: var(--lh-kop); font-weight: 600; letter-spacing: -0.032em; text-wrap: balance; }
h3, .t-kaart { font-size: var(--fs-kaart); line-height: var(--lh-kaart); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.t-feit { font-size: var(--fs-feit); line-height: var(--lh-feit); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.t-anker { font-size: var(--fs-anker); line-height: var(--lh-anker); font-weight: 600; letter-spacing: -0.03em; }
.t-cijfer { font-size: var(--fs-cijfer); line-height: var(--lh-cijfer); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t-vraag { font-size: var(--fs-vraag); line-height: var(--lh-vraag); font-weight: 600; letter-spacing: -0.012em; }
.lead { max-width: 30em; color: var(--tekst-2); font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: -0.006em; text-wrap: pretty; }
.tekst { max-width: 36em; color: var(--tekst-2); font-size: var(--fs-tekst); line-height: var(--lh-tekst); text-wrap: pretty; }
.t-titel { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }   /* de ene leesregel van elk fragment */
.t-klein { font-size: 15px; line-height: 22px; font-weight: 500; }
.t-meta { font-size: 14px; line-height: 18px; font-weight: 500; }
.bedrag { font-variant-numeric: tabular-nums; }   /* bedragen staan met een vaste spatie; zo breekt een regel op 200 procent tekst nog af */

/* 3 · raster: twaalf kolommen, vier hoofdlijnen. Zet grid-column alleen voor 1041 en breder, of gebruik de k-klassen; die vallen onder 1041 vanzelf over de volle breedte */
.wrap { width: min(100% - var(--rand) * 2, var(--wrap)); margin-inline: auto; }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--goot); }
.k1-5 { grid-column: 1 / span 5; }
.k1-6 { grid-column: 1 / span 6; }
.k1-9 { grid-column: 1 / span 9; }
.k7-11 { grid-column: 7 / span 5; }
.k7-12 { grid-column: 7 / span 6; }
@media (max-width: 1040px) {
  .k1-5, .k1-6, .k1-9, .k7-11, .k7-12 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
}

/* 4 · zones en focus. Tokens per zone staan in tokens.css */
.zone-top, .zone-midden, .zone-overzicht, .zone-slot, .zone-voet { background: var(--grond); color: var(--tekst); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
main:focus { outline: 0; }   /* doel van de skiplink en van de cookiekaart, geen knop */
summary, a.regel:focus-visible, .link, .voet__rij { border-radius: var(--r-8); }   /* de focusring volgt de hoekenschaal; .regel alleen bij focus, anders buigt zijn haarlijn omhoog */

/* 5 · knop, tekstlink, chip */
.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--pil); background: var(--knop-grond); color: var(--knop-tekst); font-size: 17px; line-height: 20px; font-weight: 600; letter-spacing: -0.006em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duur-kort) var(--ease), color var(--duur-kort) var(--ease), box-shadow var(--duur-kort) var(--ease), transform var(--duur-kort) var(--ease); }
.knop:hover { background: var(--knop-hover); }
.knop:active { transform: translateY(1px); }
.knop--klein { min-height: 48px; padding: 0 20px; font-size: 15px; }
.knop--omlijnd, html.js .balk__knop[data-omlijnd], html.menu-open .balk__knop { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1px var(--chip-rand); }
.knop--omlijnd:hover, html.js .balk__knop[data-omlijnd]:hover, html.menu-open .balk__knop:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--tekst); }
.knop--vol { width: 100%; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (max-width: 1040px) {
  .knop--klein { min-height: 44px; }
}

.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--tekst); font-size: 17px; line-height: 22px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; cursor: pointer; }
.link:hover { text-decoration-thickness: 2px; }
.link--klein { font-size: 15px; }

.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--pil); box-shadow: inset 0 0 0 1px var(--chip-rand); color: var(--tekst); font-size: 16px; line-height: 20px; font-weight: 500; white-space: nowrap; transition: background-color var(--duur-kort) var(--ease), color var(--duur-kort) var(--ease), box-shadow var(--duur-kort) var(--ease); }
.chip:hover span { box-shadow: inset 0 0 0 1px var(--tekst); }
.chip input:checked + span { background: var(--chip-aan-grond); color: var(--chip-aan-tekst); box-shadow: inset 0 0 0 1px var(--chip-aan-rand); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 760px) {
  .chip span { padding: 0 14px; }
}

/* 6 · bouwstenen */
.blad { padding: 20px; border-radius: var(--r-12); background: var(--wit); color: var(--ink); box-shadow: var(--s-1); font-size: 15px; line-height: 22px; }
.blad--groot { padding: 24px; }
.blad--over { box-shadow: var(--s-2); }
.blad__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.blad__titel { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.blad__titel--klein { font-size: 15px; line-height: 22px; letter-spacing: 0; }

.regel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: 44px; padding-block: 4px; border-bottom: 1px solid var(--haarlijn); color: var(--tekst); text-decoration: none; font-variant-numeric: tabular-nums; }
.regel:last-child { border-bottom: 0; }
.regel > :first-child { color: var(--tekst-2); font-size: 14px; line-height: 18px; font-weight: 500; }
.regel > :last-child:not(.status) { color: var(--tekst); font-size: 15px; line-height: 22px; font-weight: 500; text-align: right; }
a.regel:hover > :last-child { text-decoration: underline; text-underline-offset: 4px; }

.status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--pil); font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.status--nieuw, .status--wacht { background: var(--ink); color: var(--wit); }
.status--gebeld { background: var(--vlak-2); color: var(--ink); }
.status--offerte, .status--klaar, .status--vanjou { background: var(--mint-100); color: var(--ink); }
.status--opdracht, .status--live { background: var(--mint-800); color: var(--wit); }

.tijd { display: flex; gap: 4px; }
.tijd > * { background: var(--tijd-leeg); }
.tijd--segmenten > * { flex: 1 1 0; height: 8px; border-radius: var(--r-2); }
.tijd--vakjes { flex-wrap: wrap; }
.tijd--vakjes > * { display: grid; place-items: center; flex: 0 0 55px; height: 52px; border-radius: var(--r-8); color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tijd > .is-vol { background: var(--tijd-vol); }
.tijd--vakjes > .is-vol { color: var(--wit); }
.tijd--lijn { position: relative; display: block; height: 28px; }
.tijd--lijn::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--lijn-sterk); }
.tijd__deel { position: absolute; top: 13px; height: 2px; background: var(--tijd-vol); }
.tijd__pil { position: absolute; top: 0; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--pil); background: var(--ink); color: var(--wit); font-size: 14px; line-height: 18px; font-weight: 600; }
.tijd__pil--wij { background: var(--mint); color: var(--ink); }
.tijd__punt { position: absolute; right: 0; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--mint-800); }
@media (max-width: 760px) {
  .tijd--vakjes > * { flex: 1 1 0; height: 48px; }
}

.afzender { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 600; }
.afzender__onder { display: block; color: var(--stil); font-size: 14px; line-height: 18px; font-weight: 400; }
.afzender__letter { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-8); background: var(--klant); color: var(--wit); font-size: 14px; line-height: 1; font-weight: 600; transition: background-color var(--duur-in) var(--ease); }

.melding { width: 348px; max-width: 100%; padding: 16px 18px; border-radius: var(--r-12); background: var(--wit); color: var(--ink); box-shadow: 0 0 0 1px var(--melding-rand), var(--s-3); }
.melding__kop { display: flex; align-items: center; gap: 6px; color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.melding__icoon { flex: none; width: 13px; height: 13px; }
.melding__nu { margin-left: auto; color: var(--stil); font-weight: 400; }
.melding__titel { display: block; margin-top: 8px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.melding__tekst { margin-top: 4px; color: var(--zacht); font-size: 15px; line-height: 22px; }
@media (max-width: 760px) {
  .melding { width: 318px; }
}

.vb { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--pil); background: var(--vb-grond); color: var(--vb-tekst); box-shadow: var(--vb-rand); font-size: 14px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.vb--lb, .vb--rb, .vb--lo { position: absolute; z-index: 1; }
.vb--lb { left: 16px; top: 16px; }
.vb--rb { right: 16px; top: 16px; }
.vb--lo { left: 16px; bottom: 16px; }

.foto { position: relative; overflow: hidden; border-radius: var(--r-20); background: var(--vlak-2); }
.foto > img, .foto > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.logo { display: block; width: calc(var(--logo-hoogte) * var(--logo-verhouding)); height: var(--logo-hoogte); max-width: none; color: inherit; }
.logo--20 { --logo-hoogte: 20px; }
.logo--21 { --logo-hoogte: 21px; }

/* 7 · vragen: native details, zonder hoogte-animatie */
.vragen { border-top: 2px solid var(--ink); }
.vraag { border-bottom: 1px solid var(--lijn-sterk); }
.vraag summary { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: start; column-gap: 16px; min-height: 76px; padding-block: 24px; }
.vraag[open] summary { padding-bottom: 8px; }
.vraag__plus { position: relative; width: 40px; height: 40px; margin-block: -5px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--lijn-sterk); transition: background-color var(--duur-kort) var(--ease), transform var(--duur-kort) var(--ease); }
.vraag__plus::before, .vraag__plus::after { content: ""; position: absolute; left: 12px; top: 19px; width: 16px; height: 2px; border-radius: 1px; background: var(--ink); }
.vraag__plus::after { transform: rotate(90deg); }
.vraag summary:hover .vraag__plus { background: var(--vlak); }
.vraag[open] .vraag__plus { transform: rotate(45deg); }
.vraag__antwoord { padding-bottom: 28px; color: var(--ink); }
.vraag__antwoord p { max-width: 36em; }
.vraag__antwoord > * + * { margin-top: 12px; }
@media (max-width: 760px) {
  .vraag summary { min-height: 68px; padding-block: 20px; }
  .vraag__plus { margin-block: -7px; }
}

/* 8 · formulier: blad over de naad, velden 20 uit elkaar, groepen 32. Velden 48 hoog, hoek 12; label boven het veld, toelichting vóór het veld, fout eronder.
   Nooit zone-tokens in een blad. De keuze is een chip met vaste kleuren, gekozen ink met wit: radio's, werkt zonder JavaScript */
.blad--formulier { padding: var(--sp-32); box-shadow: var(--s-2); }
.formulier { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }   /* de kolom volgt het blad, ook als de knop niet past */
.formulier__kop { margin-bottom: var(--sp-4); }
.formulier__kop h2 { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: -0.02em; text-wrap: balance; }
.formulier__kop p { margin-top: var(--sp-8); color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.formulier > .knop { justify-self: start; margin-top: var(--sp-4); }
.formulier__privacy { margin-top: calc(var(--sp-4) * -1); color: var(--zacht); font-size: 14px; line-height: 18px; }
.formulier__privacy a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.formulier__fout { padding: 14px 16px; border-radius: var(--r-8); background: var(--fout-50); color: var(--ink); font-size: 15px; line-height: 22px; }
.formulier__fout:focus { outline: 2px solid var(--focus); outline-offset: 3px; }
.formulier__fout a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.veld-regel { margin-top: var(--sp-12); padding: 14px 16px; border-radius: var(--r-8); background: var(--mint-50); color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 500; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.knop[aria-busy="true"] { cursor: progress; }
@media (max-width: 760px) {
  .blad--formulier { padding: var(--sp-24); }
  .formulier > .knop { justify-self: stretch; white-space: normal; text-align: center; }   /* breekt alleen af als het echt niet past: 200 procent tekst */
}
@media (max-width: 359px) {
  .formulier > .knop { padding-inline: var(--sp-12); }
}
.veld { display: grid; gap: 8px; align-content: start; }
.veld__label { color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 600; }
.veld__sub { color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 500; }
.veld__optioneel { color: var(--zacht); font-weight: 400; }
.veld__hulp { color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.veld__invoer { width: 100%; min-height: 48px; padding: 11px 16px; border: 1px solid var(--veld-rand); border-radius: var(--r-12); background: var(--wit); color: var(--ink); font-size: 17px; line-height: 24px; transition: border-color var(--duur-kort) var(--ease); }
.veld__invoer:hover { border-color: var(--zacht); }
.veld__invoer::placeholder { color: var(--stil); opacity: 1; }
.veld__invoer[aria-invalid="true"], .veld__invoer[aria-invalid="true"]:hover { padding: 10px 15px; border: 2px solid var(--fout); }
textarea.veld__invoer { display: block; min-height: 120px; max-height: 320px; resize: vertical; field-sizing: content; }
.veld__fout { color: var(--fout); font-size: 14px; line-height: 18px; font-weight: 500; }
fieldset.veld { display: block; }
fieldset.veld > .veld__label { display: block; margin-bottom: var(--sp-8); padding: 0; }
fieldset.veld > .veld__hulp, fieldset.veld > .veld__fout { display: block; margin-top: var(--sp-8); }
fieldset.veld > .veld__hulp { margin-top: 0; margin-bottom: var(--sp-8); }
.veld__paar { display: grid; gap: var(--sp-12); }
.veld__deel { display: grid; gap: var(--sp-8); }
.chip--blad { --chip-rand: var(--veld-rand); --chip-aan-grond: var(--ink); --chip-aan-tekst: var(--wit); --chip-aan-rand: var(--ink); --tekst: var(--ink); }
.veld__keuzes { display: flex; flex-wrap: wrap; gap: var(--sp-8); }

/* 9 · menu */
.balk { --logo-hoogte: 28px; position: sticky; top: 0; z-index: var(--z-balk); flex: none; }
.balk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--top-lijn); pointer-events: none; transition: opacity var(--duur-kort) var(--ease); }
html.js .balk:not(.is-gescrold)::after { opacity: 0; }
.balk__in { align-items: center; height: var(--balk); }
.balk__merk { grid-column: 1 / span 6; grid-row: 1; justify-self: start; display: flex; align-items: center; min-height: 44px; border-radius: var(--r-8); color: var(--tekst); text-decoration: none; }
.balk__nav { grid-column: 7 / -1; grid-row: 1; justify-self: start; margin-left: -12px; }
.balk__nav ul { display: flex; }
.balk__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-8); color: var(--tekst-2); font-size: 15px; line-height: 22px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--duur-kort) var(--ease); }
.balk__nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--top-actief); transform: scaleX(0); transform-origin: left center; transition: transform var(--duur-kort) var(--ease); }
.balk__nav a:hover, .balk__nav a[aria-current] { color: var(--tekst); }
.balk__nav a[aria-current]::after { transform: scaleX(1); }
.balk__knop { grid-column: 7 / -1; grid-row: 1; justify-self: end; }
.balk__menu { display: none; position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--chip-rand); color: var(--tekst); transition: box-shadow var(--duur-kort) var(--ease); }
.balk__menu::before, .balk__menu::after { content: ""; position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--duur-kort) var(--ease); }
.balk__menu::before { transform: translateY(-4px); }
.balk__menu::after { transform: translateY(4px); }
.balk__menu:hover { box-shadow: inset 0 0 0 1px var(--tekst); }
.balk__menu[aria-expanded="true"]::before { transform: rotate(45deg); }
.balk__menu[aria-expanded="true"]::after { transform: rotate(-45deg); }
/* Vier menu-items en de knop: tot 1240 is de knop korter en staan de items dichter op elkaar */
@media (min-width: 1041px) and (max-width: 1239px) {
  .balk__knop-rest { display: none; }
  .balk__nav { margin-left: -8px; }
  .balk__nav a { padding-inline: 8px; }
  .balk__nav a::after { left: 8px; right: 8px; }
}
@media (max-width: 1040px) {
  .balk__in { display: flex; gap: 12px; }
  .balk__merk { margin-right: auto; }
  .balk__nav, .balk__knop-rest { display: none; }
  .balk__menu { display: block; }
}
@media (max-width: 760px) {
  .balk { --logo-hoogte: 26px; }
  .balk__knop { padding: 0 17px; }
}

/* 10 · mobiel menu: een blad van de balk tot de onderkant van het scherm */
.menublad { position: fixed; left: 0; right: 0; top: var(--balk); bottom: 0; display: none; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 0 var(--rand) calc(24px + env(safe-area-inset-bottom)); border: 0; background: var(--grond); color: var(--tekst); overflow-y: auto; overscroll-behavior: contain; transition: opacity var(--duur-uit) var(--ease), transform var(--duur-uit) var(--ease); }
.menublad[open] { display: block; }
html.js .menublad:not(.is-open) { opacity: 0; transform: translateY(-8px); }
.menublad.is-open { transition-duration: var(--duur-in); }
.menublad :focus-visible { outline-offset: -2px; }
.menublad__rij { display: flex; align-items: center; min-height: 64px; border-radius: var(--r-8); color: var(--tekst); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.menublad li + li { border-top: 1px solid var(--haarlijn); }
.menublad .knop { width: 100%; margin-top: 24px; }
.menublad__contact { margin-top: 24px; }
@media (min-width: 1041px) {
  .menublad { display: none !important; }
}

/* 11 · footer */
.voet { --logo-hoogte: 34px; position: relative; z-index: 2; flex: none; padding-block: 96px 40px; border-top: 1px solid transparent; }
.voet__merk { grid-column: 1 / span 6; }
.voet__adres { margin-top: 24px; color: var(--tekst-2); font-size: 15px; line-height: 24px; }
.voet__kolommen { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--goot); }
.voet__kolom { min-width: 0; }
.voet__kop { margin-bottom: 8px; color: var(--tekst-2); font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: 0; }
.voet__rij { display: flex; align-items: center; min-height: 44px; width: 100%; overflow-wrap: anywhere; color: var(--tekst); font-size: 15px; line-height: 22px; font-weight: 400; text-align: left; text-decoration: none; }
.voet__rij:hover { text-decoration: underline; text-underline-offset: 4px; }
.voet__nummer { white-space: nowrap; }
.voet__onder { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--haarlijn); color: var(--tekst-2); font-size: 14px; line-height: 18px; font-weight: 500; }
.voet__onder p { grid-column: 1 / -1; }
/* Stijl inkt: afsluiting en footer zijn allebei ink, de haarlijn zegt waar de footer begint. In licht-inkt is de rand onzichtbaar, zodat de maten in beide stijlen gelijk blijven */
html[data-stijl="inkt"] .voet { border-top-color: var(--voet-lijn); }
@media (max-width: 1040px) {
  .voet__raster { row-gap: 48px; }
  .voet__merk, .voet__kolommen { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .voet { --logo-hoogte: 28px; padding-block: 64px 32px; }
  .voet__raster { row-gap: 32px; }
  .voet__kolommen { grid-template-columns: minmax(0, 1fr) 150px; row-gap: 32px; }
  .voet__onder { row-gap: 8px; margin-top: 32px; }
}
@media (max-width: 359px) {
  .voet__kolommen { display: block; }
  .voet__kolom + .voet__kolom { margin-top: 32px; }
}

/* 12 · cookiekaart en schakelaar: een blad linksonder, niet modaal. Twee gelijke omlijnde knoppen; consent.js bouwt hem */
html:not(.js) [data-cookie-open], html.geen-cookies [data-cookie-open] { display: none; }
html.cookie-open body { padding-bottom: var(--cookie-hoogte, 0); }
html.menu-open .cookiekaart { visibility: hidden; }
.cookiekaart { position: fixed; left: var(--sp-24); bottom: var(--sp-24); z-index: var(--z-cookie); width: 440px; max-width: calc(100vw - var(--sp-48)); max-height: 60vh; padding: var(--sp-24); box-shadow: var(--s-2); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(8px); transition: opacity var(--duur-uit) var(--ease), transform var(--duur-uit) var(--ease); }
.cookiekaart.is-open { opacity: 1; transform: none; transition-duration: var(--duur-in); }
.cookiekaart__titel { margin-bottom: var(--sp-8); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.cookiekaart__tekst { color: var(--zacht); font-size: 15px; line-height: 22px; }
.cookiekaart__tekst a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cookiekaart__knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); margin-top: var(--sp-12); }
.cookiekaart__breed { grid-column: 1 / -1; }
.cookiekaart .knop { min-height: 48px; padding-inline: var(--sp-12); }
.cookiekaart__rijen { margin-top: var(--sp-8); }
.cookiekaart__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-24); }
.cookiekaart [data-cookie="opslaan"] { margin-top: var(--sp-8); }
.schakelaar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: var(--sp-16); min-height: 56px; padding-block: var(--sp-8); border-top: 1px solid var(--lijn); cursor: pointer; }
.schakelaar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.schakelaar input:disabled { cursor: default; }
.schakelaar__naam { display: block; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 600; }
.schakelaar__uitleg { display: block; color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.schakelaar__knop { position: relative; width: 44px; height: 24px; border-radius: var(--pil); background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--veld-rand); transition: background-color var(--duur-kort) var(--ease); }
.schakelaar__knop::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--wit); box-shadow: var(--s-1); transition: transform var(--duur-kort) var(--ease); }
.schakelaar input:checked ~ .schakelaar__knop { background: var(--ink); box-shadow: none; }
.schakelaar input:checked ~ .schakelaar__knop::after { transform: translateX(20px); }
.schakelaar input:disabled ~ .schakelaar__knop { background: var(--zacht); }
.schakelaar input:focus-visible ~ .schakelaar__knop { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 760px) {
  .cookiekaart { left: var(--sp-12); right: var(--sp-12); bottom: var(--sp-12); width: auto; max-width: none; max-height: calc(100dvh - 72px); padding: var(--sp-16); }   /* een bovengrens: de gewone stand blijft even hoog, de voorkeurenstand past nu in beeld */
  .cookiekaart .knop { min-height: 44px; }
}
@media (max-width: 359px) {
  .cookiekaart__knoppen { grid-template-columns: minmax(0, 1fr); }
}

/* 13 · proefknop: alleen met ?proef=1, gaat na de kleurkeuze uit de pagina */
.proef { position: fixed; left: 16px; bottom: 16px; z-index: var(--z-proef); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--pil); background: var(--wit); box-shadow: var(--s-2); color: var(--ink); font-size: 14px; line-height: 18px; font-weight: 500; }
.proef span { padding: 0 8px 0 12px; color: var(--zacht); }
.proef button { min-height: 44px; padding: 0 14px; border-radius: var(--pil); transition: background-color var(--duur-kort) var(--ease), color var(--duur-kort) var(--ease); }
.proef button:focus-visible { outline-color: var(--ink); }
.proef button[aria-pressed="true"] { background: var(--ink); color: var(--wit); }

/* 14 · sectie: volle breedte, sectieruimte uit de tokens. Na de paginakop begint de eerste sectie 160 onder de naad, ook als er een object overheen hangt */
.sectie { padding-block: var(--sectie); }
.sectie--vervolg { padding-top: 0; }

/* 15 · paginakop: 40 onder de balk, 64 eronder. Links kolom 1 tot 6, rechts het object, dat 64 over de naad doorloopt (48 op mobiel).
   Het object telt in de hoogte van de rij twee keer de naad minder mee: één keer de ruimte onder de rij, één keer de overhang */
.paginakop { --naad: var(--sp-64); position: relative; padding-block: 40px var(--naad); }
.paginakop__tekst { grid-column: 1 / span 6; min-width: 0; }
.paginakop__object { position: relative; z-index: 1; grid-column: 7 / -1; align-self: start; min-width: 0; margin-bottom: calc(var(--naad) * -2); }
.paginakop__object--naad { align-self: end; }   /* kort object naast lange tekst: hangt toch over de naad */
.paginakop h1 { font-size: var(--fs-kop); line-height: var(--lh-kop); letter-spacing: -0.032em; }
.paginakop__meta { margin-bottom: var(--sp-12); color: var(--tekst-2); font-size: 14px; line-height: 18px; font-weight: 500; }
.paginakop__lead { margin-top: var(--sp-24); }
.paginakop__tekst-lang { max-width: 36em; margin-top: var(--sp-24); color: var(--tekst); font-size: var(--fs-tekst); line-height: var(--lh-tekst); text-wrap: pretty; }
.paginakop__knop { margin-top: var(--sp-32); }
.paginakop__na { margin-top: var(--sp-24); color: var(--tekst); font-size: 17px; line-height: 26px; }
.paginakop--document .paginakop__tekst { grid-column: 1 / span 8; }
.paginakop--vol { min-height: calc(100vh - 400px); padding-bottom: var(--sectie); }
main > .paginakop:last-child:not(.paginakop--vol) { margin-bottom: var(--sectie); }
.versieregel { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-24); margin-top: var(--sp-12); color: var(--tekst-2); font-size: 15px; line-height: 22px; }
.versieregel > span { display: inline-flex; align-items: center; min-height: 44px; }
.versieregel .link { font-size: 15px; }
@media (max-width: 1040px) {
  .paginakop { --naad: var(--sp-48); padding-top: var(--sp-32); }
  .paginakop__tekst, .paginakop__object, .paginakop--document .paginakop__tekst { grid-column: 1 / -1; }
  .paginakop__object { margin-top: var(--sp-48); }
  .paginakop__object > .blad--formulier { max-width: 560px; }
}
@media (max-width: 760px) {
  .paginakop { padding-top: var(--sp-24); }
  .paginakop__object { margin-top: var(--sp-32); }
  .paginakop__knop .knop { width: 100%; }
}

/* 16 · feitenregels: offerteregels onder een lead. Geen label Voorbeeld: dit zijn feiten */
.feiten { max-width: 427px; margin-top: var(--sp-32); border-top: 1px solid var(--lijn-sterk); }
html[data-stijl="inkt"] .zone-top .feiten { border-top-color: var(--chip-rand); }

/* 17 · gegevensblad: bedrijfsgegevens en de bedankpagina's. Offerteregels van 48, het label houdt zijn langste woord, de waarde mag afbreken */
.blad--gegevens { padding: var(--sp-32); box-shadow: var(--s-2); }
.blad--gegevens .blad__titel { margin-bottom: var(--sp-8); }
.blad--gegevens .regel { grid-template-columns: minmax(min-content, 1fr) minmax(0, max-content); min-height: 48px; }
.blad--gegevens .regel a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .blad--gegevens { padding: var(--sp-24); }
  .blad--gegevens .regel { min-height: 44px; padding-block: var(--sp-8); }
}

/* 18 · leeskolom: tekst op kolom 4 tot 10, regels 36em. De tellers van de artikelen en leden staan in paginas.css (spec-paginas 5.7) */
.leesvlak { padding-block: var(--sp-64) var(--sectie); }
.lees { grid-column: 4 / span 7; min-width: 0; color: var(--ink); font-size: var(--fs-tekst); line-height: var(--lh-tekst); }
.lees p, .lees li { max-width: 36em; text-wrap: pretty; }
.lees p + p, .lees p + ul, .lees p + ol, .lees ul + p, .lees ol + p, .lees ul + ol, .lees ol + ul, .lees p + table, .lees table + p { margin-top: var(--sp-16); }
.lees [id] { scroll-margin-top: 96px; }
.lees h2 { margin: var(--sp-64) 0 var(--sp-16); font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: -0.02em; }
.lees > h2:first-child, .lees > :first-child > h2:first-child { margin-top: 0; }
.lees h2:focus { outline: 0; }   /* na een klik in de inhoudsopgave is de scrollpositie het signaal */
.lees h3 { margin: var(--sp-32) 0 var(--sp-8); font-size: var(--fs-vraag); line-height: var(--lh-vraag); letter-spacing: -0.012em; }
.lees ul, .lees ol { padding-left: 20px; }
.lees ul { list-style: disc; }
.lees ol { list-style: decimal; }
.lees li + li { margin-top: var(--sp-8); }
.lees a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lees a:hover { text-decoration-thickness: 2px; }
.lees table { width: 100%; max-width: 36em; border-collapse: collapse; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.lees th, .lees td { padding: var(--sp-8) var(--sp-12) var(--sp-8) 0; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.lees th { font-weight: 600; }
.lees tr:last-child td { border-bottom: 0; }
@media (max-width: 1040px) {
  .lees { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .leesvlak { padding-top: var(--sp-48); }
  .lees h2 { margin-top: var(--sp-48); }
}

/* 19 · inhoudsopgave: een lijst die als lijst leest. Op desktop sticky, op tablet en mobiel een details boven de tekst */
.inhoud { grid-column: 1 / span 3; position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); margin: -6px; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
html.cookie-open .inhoud { max-height: calc(100vh - 120px - var(--cookie-hoogte, 0px)); }   /* de lijst scrolt boven de kaart, zodat een rij met focus er niet onder valt */
.inhoud__kop { margin-bottom: var(--sp-8); color: var(--zacht); font-size: 14px; line-height: 18px; font-weight: 500; }
.inhoud ol { border-top: 1px solid var(--lijn-sterk); }
.inhoud li { border-bottom: 1px solid var(--lijn); }
.inhoud a { display: flex; align-items: center; min-height: 40px; padding-block: var(--sp-8); border-radius: var(--r-8); color: var(--zacht); font-size: 15px; line-height: 22px; text-decoration: none; transition: color var(--duur-kort) var(--ease); }
.inhoud a:hover, .inhoud a[aria-current] { color: var(--ink); }
.inhoud a[aria-current] { font-weight: 600; }
.inhoud--mobiel { display: none; }
.inhoud--mobiel summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-16); border-radius: var(--r-12); background: var(--vlak); color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 600; }
.inhoud--mobiel .vraag__plus { margin-top: 0; }
.inhoud--mobiel[open] .vraag__plus { transform: rotate(45deg); }
.inhoud--mobiel ol { margin-top: var(--sp-8); padding-inline: var(--sp-16); }
.inhoud--mobiel li + li { border-top: 1px solid var(--lijn); }
.inhoud--mobiel a { display: flex; align-items: center; min-height: 44px; padding-block: var(--sp-8); color: var(--ink); font-size: 15px; line-height: 22px; text-decoration: none; }
@media (max-width: 1040px) {
  .inhoud { display: none; }
  .inhoud--mobiel { display: block; grid-column: 1 / -1; margin-bottom: var(--sp-32); }
}

/* 20 · slot zonder vel: de afsluiting van de homepage zonder de pdf. Kop over kolom 1 tot 9, lead en knop op de middenlijn */
.slot--zonder-vel { padding-top: clamp(80px, calc(7.6923vw + 21.54px), 120px); }
.slot--zonder-vel .slot__onder { display: flex; justify-content: flex-end; }
.slot--zonder-vel .slot__tekst { flex: 0 0 calc(50% - 12px); min-width: 0; padding-block: 56px var(--sp-96); }
.slot--zonder-vel .lead { max-width: min(100%, 538px); }
.slot--zonder-vel .knoppen { margin-top: var(--sp-32); }
@media (max-width: 1040px) {
  .slot--zonder-vel .t-display { font-size: 56px; line-height: 58px; }
  .slot--zonder-vel .slot__onder { display: block; }
  .slot--zonder-vel .slot__tekst { padding-top: 40px; }
}
@media (max-width: 760px) {
  .slot--zonder-vel .t-display { font-size: var(--fs-display); line-height: var(--lh-display); }
  .slot--zonder-vel .slot__tekst { padding-block: var(--sp-24) var(--sp-64); }
  .slot--zonder-vel .knop { width: 100%; }
  .slot--zonder-vel .knoppen { flex-direction: column; align-items: flex-start; gap: var(--sp-8); margin-top: var(--sp-24); }
}

/* 21 · compacte balk op de gratis check: woordmerk, één tekstlink en de ronde menuknop op elke breedte, geen items en geen knop naar de pagina zelf */
.balk--compact .balk__in { display: flex; align-items: center; gap: var(--sp-16); }
.balk--compact .balk__merk { margin-right: auto; }
.balk--compact .balk__link { display: block; min-width: 0; overflow: hidden; line-height: 44px; white-space: nowrap; text-overflow: ellipsis; }   /* op 200 procent tekst loopt de link af, de menuknop blijft in beeld */
.balk--compact .balk__menu { display: block; }
@media (min-width: 1041px) {
  .balk--compact .menublad[open] { display: block !important; left: auto; width: 440px; box-shadow: var(--s-2); }
}
@media (max-width: 389px) {
  .balk--compact .balk__in { gap: var(--sp-8); }
}
@media (max-width: 359px) {
  .balk--compact .balk__link { display: none; }
}

/* 22 · print: alleen h1, versieregel, tekst en het adresblok onderaan. Zwart op wit, ook in de stijl inkt */
@media print {
  @page { margin: 20mm; }
  html, body { background: var(--wit); }
  .zone-top, .zone-midden, .zone-slot, .zone-voet { --grond: var(--wit); --tekst: var(--zwart); --tekst-2: var(--zwart); --haarlijn: var(--lijn); }
  body { display: block; color: var(--zwart); font-size: 11pt; line-height: 1.45; }
  .overslaan, .balk, .menublad, .cookiekaart, .proef, .inhoud, .inhoud--mobiel, .knop, .voet__merk .logo, .voet__kolommen, .voet__onder, .slot--zonder-vel { display: none !important; }
  .paginakop, .leesvlak, .voet { padding: 0; }
  .paginakop h1 { font-size: 20pt; line-height: 1.15; }
  .lees { width: 100%; max-width: none; color: var(--zwart); font-size: 11pt; line-height: 1.45; }
  .lees p, .lees li, .lees table { max-width: none; }
  .lees h2 { margin-top: 18pt; margin-bottom: 6pt; font-size: 14pt; line-height: 1.25; break-after: avoid; }
  .lees h3 { margin-top: 12pt; margin-bottom: 4pt; font-size: 12pt; line-height: 1.25; break-after: avoid; }
  .lees li, .regel, .lees tr { break-inside: avoid; }
  .lees a { text-decoration: underline; }
  .lees a[href^="http"]::after { content: " (" attr(href) ")"; }
  .voet { margin-top: 18pt; }
  .voet__adres { margin-top: 0; font-size: 10pt; line-height: 1.4; }
}

/* 23 · beweging uit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}