/* 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
   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; }
.heel { white-space: nowrap; }   /* getal en eenheid, artikel en nummer, naam en rechtsvorm, TAQQLE-app: blijven op één regel (Safari breekt anders af op het streepje) */
.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); }
}
/* Tweedeling (11 november 2026): tekst op vier kolommen, één kolom lucht, de inhoud op zeven.
   Gewoon (.delen): de kop en wat erbij hoort links, de inhoud rechts. Omgekeerd (.delen--om): de inhoud links, de kop rechts.
   Wissel de twee af op een pagina, en zet er af en toe een blok over de volle breedte tussen
   (Willem, 11 november: "je doet steeds tekst links en visueel rechts. Geen afwisseling").
   De html-volgorde is altijd kop, inhoud, na: zo leest een telefoon en een schermlezer het. Tot en met 1040 staat alles onder elkaar */
.delen > * { grid-column: 1 / -1; min-width: 0; }
.delen__inhoud { margin-top: var(--kop-ruimte); }
.delen__na { margin-top: var(--sp-32); }
a.delen__na { justify-self: start; }
@media (min-width: 1041px) {
  .delen { grid-template-rows: auto 1fr; }
  .delen > .delen__kop { grid-column: 1 / span 4; grid-row: 1; }
  .delen > .delen__inhoud { grid-column: 6 / -1; grid-row: 1 / span 2; margin-top: 0; }
  .delen > .delen__na { grid-column: 1 / span 4; grid-row: 2; align-self: start; }
  .delen--om > .delen__kop, .delen--om > .delen__na { grid-column: 9 / -1; }
  .delen--om > .delen__inhoud { grid-column: 1 / span 7; }
}

/* 4 · zones en focus. Tokens per zone staan in tokens.css */
.zone-top, .zone-kop, .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__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; }
}

/* De stappen (13 november 2026; eerst op /werving, daarna op de homepage #hoe, /hoe-het-werkt #tijdlijn en /kennismaking #verder; Willem: "Ja, alle drie").
   De kop links en waar nodig een knop of link rechts (.stappen-kop); daaronder de stappen als kolommen onder één dunne lijn.
   Per stap een cijfer in een ring op de lijn (.stappen__nr), eronder een klein label in mint-700 (.stappen__label: de tijd, of wie de stap doet),
   de titel (h3) en één zin. Label en titel mogen ontbreken. Elke stap is een subgrid over vier rijen (cijfer, label, titel, zin), zodat
   labels, titels en zinnen in alle kolommen op één hoogte staan, ook als een label ontbreekt of over twee regels loopt (review Astra, 13 november 2026);
   zonder titel is de zin de stap zelf, in de gewone tekstkleur. Vier kolommen; .stappen--drie en .stappen--vijf voor drie en vijf.
   Tot en met 1040 (vijf stappen: tot en met 1200) een verticale lijst: de ringen onder elkaar met de lijn links erlangs.
   De ring heeft de kleur van de zone (--grond), zodat de lijn erachter wegvalt; mint-700 op wit en op het vlak haalt 4,5:1 */
.stappen-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--sp-24) var(--goot); }
.stappen { --stappen-aantal: 4; position: relative; display: grid; grid-template-columns: repeat(var(--stappen-aantal), minmax(0, 1fr)); column-gap: var(--goot); margin-top: var(--kop-ruimte); }
.stappen--drie { --stappen-aantal: 3; }
.stappen--vijf { --stappen-aantal: 5; }
.stappen::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: var(--lijn-sterk); }
.stappen li { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; padding-right: var(--sp-16); }
.stappen li > .stappen__nr { grid-row: 1; }
.stappen li > .stappen__label { grid-row: 2; }
.stappen li > h3 { grid-row: 3; }
.stappen li > p:last-child { grid-row: 4; }
.stappen__nr { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--grond); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font-size: 14px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.stappen__label { margin-top: 20px; color: var(--tekst-2); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .01em; }
.stappen h3 { margin-top: 6px; font-size: 22px; line-height: 28px; letter-spacing: -0.012em; }
.stappen p:last-child { margin-top: var(--sp-8); color: var(--tekst-2); font-size: 17px; line-height: 26px; text-wrap: pretty; }
.stappen .stappen__nr + p:last-child { margin-top: 20px; color: var(--tekst); font-size: 19px; line-height: 28px; }   /* zonder label en titel */
@media (max-width: 1040px) {
  .stappen { grid-template-columns: minmax(0, 1fr); row-gap: 0; max-width: 560px; }
  .stappen::before { display: none; }
  .stappen li { display: block; grid-row: auto; padding: 0 0 var(--sp-32) 52px; }
  .stappen li:last-child { padding-bottom: 0; }
  .stappen li::before { content: ""; position: absolute; left: 15.5px; top: 32px; bottom: 0; width: 1px; background: var(--lijn-sterk); }
  .stappen li:last-child::before { display: none; }
  .stappen__nr { position: absolute; left: 0; top: 0; }
  .stappen__label { margin-top: 0; line-height: 32px; }
  .stappen h3 { margin-top: 2px; }
  .stappen__nr + h3, .stappen .stappen__nr + p:last-child { margin-top: 0; padding-top: 2px; }
}
/* Vijf stappen passen pas boven 1200 naast elkaar; daaronder dezelfde verticale lijst als hierboven */
@media (min-width: 1041px) and (max-width: 1200px) {
  .stappen--vijf { grid-template-columns: minmax(0, 1fr); row-gap: 0; max-width: 560px; }
  .stappen--vijf::before { display: none; }
  .stappen--vijf li { display: block; grid-row: auto; padding: 0 0 var(--sp-32) 52px; }
  .stappen--vijf li:last-child { padding-bottom: 0; }
  .stappen--vijf li::before { content: ""; position: absolute; left: 15.5px; top: 32px; bottom: 0; width: 1px; background: var(--lijn-sterk); }
  .stappen--vijf li:last-child::before { display: none; }
  .stappen--vijf .stappen__nr { position: absolute; left: 0; top: 0; }
  .stappen--vijf .stappen__label { margin-top: 0; line-height: 32px; }
  .stappen--vijf h3 { margin-top: 2px; }
  .stappen--vijf .stappen__nr + h3 { margin-top: 0; padding-top: 2px; }
}
@media (forced-colors: active) {
  .stappen__nr { border: 1px solid CanvasText; }   /* hoge-contrastmodus: de ring zonder schaduw */
}

.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; }

/* Lijst met vinkjes: het vinkje is getekend, dus geen los beeld. Mint-700 op licht (5,8:1); op inkt zet je de randkleur op mint */
.vinken { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.vinken li { position: relative; padding-left: 26px; }
.vinken li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 7px; border-left: 2px solid var(--mint-700); border-bottom: 2px solid var(--mint-700); transform: rotate(-45deg); }

.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: 14px; }   /* namen van het oude woordmerk; hoogtes passen bij TAQQLE in hoofdletters */
.logo--21 { --logo-hoogte: 15px; }
/* Op wit en op foto staat het logo altijd wit in een inktblok, nooit los (Willem, 7 november 2026). Het blok is de vrije ruimte: de hoogte van de a rondom */
.logoblok { display: inline-flex; flex: none; width: max-content; padding: calc(var(--logo-hoogte) * 0.578); border-radius: calc(var(--logo-hoogte) * 0.244); background: var(--ink); color: var(--wit); }
.blad .logoblok { --logo-hoogte: 15px; }   /* op een blad, vel of document: het kleine woordmerk */

/* 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: 15px; line-height: 22px; font-weight: 500; }
.botcheck { display: none; }   /* alleen zichtbaar als Cloudflare om een klik vraagt */
.botcheck.is-open { display: block; }
.formulier > .knop { justify-self: start; margin-top: var(--sp-4); }
.formulier__afzender { margin-top: calc(var(--sp-4) * -1); color: var(--zacht); font-size: 15px; line-height: 22px; }
.formulier__afzender a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.formulier__privacy { margin-top: calc(var(--sp-8) * -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: 16px; line-height: 22px; font-weight: 500; }   /* 16 px: ook voor wie slechter ziet, juist waar iemand vastloopt */
.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: 16px; line-height: 22px; font-weight: 500; }
/* Website of beschrijving (checkformulieren): een vinkje "Ik heb geen website". Aangevinkt: het websiteveld weg, de beschrijving erbij.
   Alleen met :has; een oudere browser toont beide velden en de controle werkt dan zoals daarvoor. */
.veld--website { gap: var(--sp-12); }
.vinkje { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 500; cursor: pointer; }
.vinkje input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.vinkje input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@supports selector(:has(*)) {
  .formulier:not(:has(#f-geen-website:checked)) [data-geen-site],
  .formulier:has(#f-geen-website:checked) [data-met-site] { display: none; }
}
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); }
/* Optionele velden achter één regel (kennismaking): wie niets toe te voegen heeft, ziet ze niet (Willem, 8 november) */
.extra { border-block: 1px solid var(--lijn); }
.extra__kop { display: flex; align-items: center; gap: 8px; min-height: 52px; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 600; }
.extra__kop::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 400; }
.extra[open] .extra__kop::after { content: "−"; }
.extra__velden { display: grid; gap: 20px; padding-bottom: var(--sp-24); }

/* 8b · WhatsApp rechtsonder (dock, js/chat.js). Ink met een witte rand: op wit én op ink even duidelijk.
   Laag 60: boven de balk, onder de cookiekaart. Weg bij het menu, bij de cookiekaart op de telefoon
   en op de telefoon zolang iemand in een veld typt (.is-stil). */
html { scroll-padding-bottom: 88px; }
.dock { position: fixed; right: max(var(--rand), env(safe-area-inset-right)); bottom: calc(min(var(--rand), 24px) + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 10px; animation: dock-in var(--duur-in) var(--ease); }
.dock { transform: translateY(calc(var(--dock-op, 0px) * -1)); transition: opacity var(--duur-kort) var(--ease), transform var(--duur-kort) var(--ease); }
.dock__knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: var(--pil); background: var(--ink); color: var(--wit); box-shadow: 0 0 0 2px var(--wit), var(--s-2); font-size: 16px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--duur-kort) var(--ease); }
.dock__knop:hover { transform: translateY(-2px); }
.dock__knop:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; box-shadow: 0 0 0 8px var(--wit), var(--s-2); }   /* op wit zie je de inktrand, op inkt de witte rand eromheen */
.dock__knop svg { flex: none; width: 24px; height: 24px; }
.dock__wa { width: 52px; }
.dock__woord { display: none; }
.dock.is-weg:not(:focus-within) { opacity: 0; pointer-events: none; }
.dock.is-stil, html.menu-open .dock { visibility: hidden; }
@keyframes dock-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 761px) {
  .dock { right: 24px; bottom: 24px; }
  .dock__wa { width: auto; padding: 0 20px 0 16px; }   /* op een groot scherm met het woord erbij */
  .dock__woord { display: inline; }
}
@media (max-width: 760px) {   /* alleen waar hij de kaart raakt; op de computer staat de kaart linksonder en de knop rechtsonder (13 november 2026) */
  html.cookie-open .dock { visibility: hidden; }
}
@media (max-width: 760px) {
  .voet { padding-bottom: 96px; }   /* de laatste regel van de footer blijft boven de knoppen */
}
@media (prefers-reduced-motion: reduce) {
  .dock { animation: none; }
  .dock__knop:hover { transform: none; }
}
@media print {
  .dock { display: none; }
}

/* 9 · menu */
.balk { --logo-hoogte: 20px; 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; }
/* Sinds 11 november 2026 (menu: Wat we doen · Wat het kost · Over ons · Personeel werven): het woordmerk links, de items en de knop samen rechts.
   De langere namen passen niet meer naast de knop in de rechterhelft van het raster; daarom een rij in plaats van de twaalf kolommen */
.balk__in { display: flex; align-items: center; gap: var(--sp-16); height: var(--balk); }
.balk__merk { display: flex; align-items: center; min-height: 44px; margin-right: auto; border-radius: var(--r-8); color: var(--tekst); text-decoration: none; }
.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); }
@media (forced-colors: active) {
  .balk__nav a::after { forced-color-adjust: none; background: CanvasText; }   /* hoge-contrastmodus: het verloop valt weg, de streep blijft in de tekstkleur */
}
.balk__knop { flex: none; }
.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 a { padding-inline: 8px; }
  .balk__nav a::after { left: 8px; right: 8px; }
}
@media (max-width: 1040px) {
  .balk__in { gap: 12px; }
  .balk__nav, .balk__knop-rest { display: none; }
  .balk__menu { display: block; }
}
@media (max-width: 760px) {
  .balk { --logo-hoogte: 18px; }
  .balk__knop { padding: 0 17px; }
}
/* Sterk ingezoomd (G10): onder 300 past de knop niet meer naast het woordmerk en de menuknop. Hij staat ook in de pagina en in het menu */
@media (max-width: 299px) {
  .balk__knop { display: none; }
}

/* 10 · mobiel menu: een blad van de balk tot de onderkant van het scherm.
   Sinds 12 november 2026 (Willem: "Kun je het menu ook optimaliseren?"): de vier items bovenaan, de twee knoppen en "Al klant? Log in" onderaan,
   binnen bereik van de duim. Het blad is een kolom met de acties onderaan (margin-top: auto); is het scherm te laag (320 × 568, liggend),
   dan staan de acties direct onder de lijst en scrolt het blad. De hoogte volgt de zichtbare hoogte (dvh), met ruimte voor de onderrand van iOS */
.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: flex; flex-direction: column; }
@supports (height: 100dvh) {
  .menublad { bottom: auto; height: calc(100dvh - var(--balk)); }   /* iOS: de adresbalk telt niet mee, de knoppen blijven in beeld */
}
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); }
/* Het actieve item: een streep in mint onder het woord, zoals onder het actieve item in de balk op desktop */
.menublad__rij[aria-current] { text-decoration: underline; text-decoration-color: var(--top-actief); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.menublad > ul, .menublad__acties { flex: none; }
.menublad__acties { margin-top: auto; padding-top: var(--sp-24); }
.menublad .knop { width: 100%; }
.menublad .menublad__whatsapp { margin-top: 12px; }   /* één contactknop onder de hoofdactie (voorstel 10 november) */
.menublad__login { margin-top: 12px; color: var(--tekst-2); font-size: 15px; line-height: 22px; text-align: center; }
.menublad__login a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border-radius: var(--r-8); color: var(--tekst); font-weight: 600; text-underline-offset: 4px; }
/* Laag scherm (liggend, of een kleine telefoon met de adresbalk open): de items wat lager, en is er breedte genoeg, de twee knoppen naast elkaar.
   Zo past alles op een telefoon in liggende stand bijna zonder scrollen; anders scrolt het blad */
@media (max-height: 500px) {
  .menublad__rij { min-height: 48px; font-size: 20px; line-height: 26px; }
  .menublad__acties { padding-top: var(--sp-16); }
}
@media (max-height: 500px) and (min-width: 560px) {
  .menublad__acties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .menublad .menublad__whatsapp { margin-top: 0; }
  .menublad__login { grid-column: 1 / -1; margin-top: 4px; }
}
@media (max-width: 1040px) {
  /* Met het menu open staat de knop van de balk ook onderaan in het blad: in de balk verdwijnt hij, zonder dat het woordmerk verspringt */
  html.menu-open .balk__knop { visibility: hidden; }
}
@media (min-width: 1041px) {
  .menublad { display: none !important; }
}

/* 11 · footer */
.voet { --logo-hoogte: 24px; position: relative; z-index: 2; flex: none; padding-block: 96px 40px; border-top: 1px solid transparent; }
.voet__merk { grid-column: 1 / span 5; }
.voet__adres { margin-top: 24px; color: var(--tekst-2); font-size: 15px; line-height: 24px; }
.voet__kolommen { grid-column: 6 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); column-gap: var(--goot); }   /* Contact op drie kolommen (het nummer blijft op één regel), TAQQLE-app en Juridisch elk op twee */
.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; }
@media (min-width: 1041px) { .voet__onder p:first-child { grid-column: 1 / 7; } }
/* Afsluiting en footer zijn allebei ink: de haarlijn zegt waar de footer begint */
.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: 20px; 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: sinds 13 november 2026 een los onderdeel met een eigen stijlblad (css/cookies.css, bij js/cookies.js). Hier alleen wat de site er zelf mee doet */
html:not(.js) [data-cookie-open], html.geen-cookies [data-cookie-open] { display: none; }

/* 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); }
.zone-top .feiten, .zone-kop .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 elke pagina. Kop over kolom 1 tot 9, de zin en de knop links eronder
   (sinds 11 november 2026; ze stonden op de rechterhelft, Willem: "steeds tekst links en visueel rechts") */
.slot--zonder-vel { padding-top: clamp(80px, calc(7.6923vw + 21.54px), 120px); }
.slot--zonder-vel .slot__onder { display: block; }
.slot--zonder-vel .slot__tekst { min-width: 0; padding-block: var(--sp-32) var(--sp-96); }
.slot--zonder-vel .lead { max-width: min(100%, 538px); }
.slot--zonder-vel .knoppen { margin-top: var(--sp-32); }
.slot--zonder-vel .knop { max-width: 100%; padding-block: var(--sp-12); white-space: normal; text-align: center; }   /* vergrote tekst (G10): de knop breekt af in plaats van het scherm uit te lopen */
@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); }
  /* Wat een eigen achtergrond houdt (statussen, pillen, kaarten op inkt) drukt die ook af; anders staat er lichte tekst op wit papier */
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .zone-top, .zone-kop, .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, .cookiepil, .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; }
}

/* Bijlage 2 onder het vel van de check, in het slot (ook op de homepage) en op de bedankpagina; daarom in basis.css: los van de onderdelen van de check zelf. */
.vel__bijlage2 { margin-top: var(--sp-16); padding-top: var(--sp-12); border-top: 1px dashed var(--lijn-knop); color: var(--zacht); font-size: 15px; line-height: 22px; font-weight: 500; }

/* Telefoon: compactere voet, de links in twee kolommen (review mobiel van Fable 5.2, 15 november 2026) */
@media (max-width: 760px) and (min-width: 360px) {
  .voet { padding-block: 48px 24px; }
  .voet__kolommen { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .voet__kolom ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-16); }
}