/* Zelf gehoste lettertypen (SIL Open Font License), bron: Google Fonts */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunito-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunito-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunito-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunito-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Punte: het echtheidspapier. Veiligheidspapier, guilloche, microtekst, genummerde velden en een stempel,
   leesbaar en warm. Eén stylesheet voor alle pagina's en talen. */

:root {
  --papier: #ECEAF4;
  --papier-2: #E2DEEC;
  --vel: #FBFAFE;
  --wit: #FFFFFF;
  --inkt: #2E2147;
  --inkt-2: #4A3570;
  --tekst: #262035;
  --gedempt: #574F6B;
  --lijn: rgba(46, 33, 71, .14);
  --lijn-sterk: rgba(46, 33, 71, .3);
  --honing: #F6B93B;
  --honing-diep: #E8A21C;
  --vermiljoen: #C8343F;
  --munt: #2A7461;
  --munt-zacht: #DDEEE7;
  --wa: #12784A;
  --wa-diep: #0D5F3A;
  --op-inkt: #D7D1E8;
  --iris: linear-gradient(90deg, #F6B93B 0%, #EE8A4A 26%, #D4566B 50%, #9A4E9B 75%, #6A55A0 100%);

  --r: 6px;
  --r-groot: 14px;
  --schaduw: 0 1px 1px rgba(46, 33, 71, .05), 0 12px 32px -14px rgba(46, 33, 71, .24);
  --schaduw-groot: 0 2px 4px rgba(46, 33, 71, .06), 0 34px 70px -28px rgba(46, 33, 71, .38);
  --display: "Bricolage Grotesque", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tekstfont: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --sectie: clamp(4rem, 8vw, 6.75rem);
  --uit: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; scrollbar-color: var(--inkt-2) var(--papier-2); }
body {
  margin: 0;
  font-family: var(--tekstfont);
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--papier);
  overflow-x: clip;
  caret-color: var(--inkt-2);
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--honing); color: var(--inkt); }
img, svg { max-width: 100%; }
a { color: var(--inkt-2); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--inkt); }
:focus-visible { outline: 3px solid var(--honing-diep); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); color: var(--inkt); text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(2.45rem, 5.2vw, 4.15rem); font-weight: 800; line-height: 1.01; letter-spacing: -.038em; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.8rem); font-weight: 750; line-height: 1.06; letter-spacing: -.03em; }
h3 { font-size: 1.22rem; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.55; color: var(--gedempt); max-width: 46ch; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.smal { max-width: 860px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 100; background: var(--honing); color: var(--inkt); padding: .6rem 1rem; border-radius: var(--r); font-weight: 800; }
.skip:focus { left: 10px; }

/* veldlabel: het kleine gedrukte label van een formulierveld */
.veldlabel { font: 800 .72rem/1.3 var(--tekstfont); letter-spacing: .13em; text-transform: uppercase; color: var(--inkt-2); margin: 0; }

/* irisdruk: dunne gedrukte kleurstrook */
.iris { position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--iris); }

/* microtekst: echte woorden, zo klein dat ze een lijn worden */
.microtekst { height: 14px; overflow: hidden; border-top: 1px solid var(--lijn); background: var(--papier-2); }
.microtekst span { display: block; white-space: nowrap; font: 800 7px/14px var(--tekstfont); letter-spacing: .3em; color: rgba(46, 33, 71, .42); }
.microtekst-licht { background: rgba(0, 0, 0, .14); border-top-color: rgba(255, 255, 255, .08); }
.microtekst-licht span { color: rgba(255, 255, 255, .28); }

/* ---------- knoppen: gedrukte platen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.2rem; border-radius: var(--r); border: 1.5px solid transparent;
  font: 800 1rem/1.2 var(--tekstfont); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--uit), box-shadow .2s;
}
.knop:active { transform: translateY(1px); }
.knop-hoofd { background: var(--honing); color: var(--inkt); box-shadow: inset 0 -2px 0 rgba(46, 33, 71, .16); }
.knop-hoofd:hover { background: var(--honing-diep); color: var(--inkt); }
.knop-wa { background: var(--wa); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.knop-wa:hover { background: var(--wa-diep); color: #fff; }
.knop-lijn { background: var(--vel); border-color: var(--lijn-sterk); color: var(--inkt); }
.knop-lijn:hover { border-color: var(--inkt); background: var(--wit); color: var(--inkt); }
.knop-groot { min-height: 56px; padding: 1rem 1.4rem; font-size: 1.06rem; }
.knop-klein { min-height: 40px; padding: .5rem .85rem; font-size: .93rem; }
.knop-vol { width: 100%; }
.knop[disabled] { opacity: .6; cursor: progress; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.is-ontbrekend { outline: 2px dashed var(--vermiljoen); outline-offset: 3px; }
.knop-icoon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r); border: 1.5px solid var(--lijn-sterk); background: var(--wit); color: var(--inkt); cursor: pointer; transition: border-color .2s; }
.knop-icoon:hover { border-color: var(--inkt); }
.ic { flex: none; }

/* ---------- kop ---------- */
.kop { position: sticky; top: 0; z-index: 50; background: var(--papier); }
.kop-binnen { display: flex; align-items: center; gap: 1.25rem; min-height: 74px; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.logo-teken { display: block; }
.logo-woord { font: 800 1.55rem/1 var(--display); letter-spacing: -.035em; color: var(--inkt); }
.hoofdnav ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.hoofdnav li a { display: block; padding: .55rem .8rem; border-radius: var(--r); font-weight: 750; font-size: .98rem; color: var(--tekst); text-decoration: none; }
.hoofdnav li a:hover { background: var(--vel); color: var(--inkt); }
.hoofdnav li a[aria-current="page"] { color: var(--inkt); background: linear-gradient(var(--honing), var(--honing)) no-repeat center bottom 4px / calc(100% - 1.6rem) 3px; }
.hoofdnav-actie { display: none; }
.talen { display: flex; border: 1.5px solid var(--lijn-sterk); border-radius: var(--r); overflow: hidden; background: var(--vel); }
.talen a { display: grid; place-items: center; min-width: 40px; min-height: 38px; padding: 0 .5rem; font: 800 .78rem/1 var(--tekstfont); letter-spacing: .06em; color: var(--gedempt); text-decoration: none; }
.talen a + a { border-left: 1px solid var(--lijn); }
.talen a:hover { color: var(--inkt); background: var(--wit); }
.talen a[aria-current="true"] { background: var(--inkt); color: #fff; }
.menuknop { display: none; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .7rem; border: 1.5px solid var(--lijn-sterk); border-radius: var(--r); background: var(--vel); color: var(--inkt); font: 800 .95rem var(--tekstfont); cursor: pointer; }
.menuknop-open, .menuknop-dicht, .menuknop-label { display: inline-flex; }
.menuknop .menuknop-dicht { display: none; }
.menuknop[aria-expanded="true"] .menuknop-open { display: none; }
.menuknop[aria-expanded="true"] .menuknop-dicht { display: inline-flex; }

@media (max-width: 1060px) {
  .kop-binnen { gap: .6rem; min-height: 66px; }
  .menuknop { display: inline-flex; }
  .kop-actie { display: none; }
  .hoofdnav { position: absolute; inset: 100% 0 auto 0; background: var(--vel); border-bottom: 1px solid var(--lijn-sterk); box-shadow: var(--schaduw); padding: .75rem var(--gutter) 1.25rem; display: none; }
  .kop.open .hoofdnav { display: block; }
  .hoofdnav ul { flex-direction: column; gap: 0; }
  .hoofdnav li a { padding: .9rem .25rem; font-size: 1.15rem; border-bottom: 1px solid var(--lijn); border-radius: 0; }
  .hoofdnav li a[aria-current="page"] { background: linear-gradient(var(--honing), var(--honing)) no-repeat left .25rem bottom .45rem / 2.75rem 3px; }
  .hoofdnav-actie { display: block; margin-top: 1rem; }
}
@media (max-width: 420px) {
  .logo-woord { font-size: 1.3rem; }
  .logo-teken { width: 34px; height: 34px; }
  .talen a { min-width: 34px; padding: 0 .3rem; font-size: .74rem; }
  .menuknop .menuknop-label { display: none; }
  .menuknop { padding: 0 .55rem; }
}

/* ---------- held ---------- */
.held { position: relative; padding-top: clamp(2rem, 5vw, 4.25rem); background: var(--papier) url(/assets/rozet.svg) no-repeat right -14vw top -12vw / min(1000px, 92vw); }
.held::after { content: ""; display: block; height: 52px; margin-top: clamp(2.5rem, 5vw, 4rem); background: url(/assets/golfband.svg) repeat-x center / 1440px 52px; }
.held-raster { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.held-tekst { padding-top: clamp(0rem, 2vw, 1.5rem); }
.held h1 { margin-bottom: 1.25rem; }
.held .knoppen { margin: 2rem 0 1.1rem; }
.held-noot { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--gedempt); font-weight: 700; }
.held-noot .ic { color: var(--munt); }
.held-blad { container-type: inline-size; }
.handtekening { display: grid; gap: .4rem; max-width: 24rem; margin: 2.25rem 0 0; }
.handtekening strong { padding-bottom: .55rem; border-bottom: 1.5px solid var(--inkt); font: 750 1.4rem/1.1 var(--display); letter-spacing: -.02em; color: var(--inkt); }
.handtekening span { font-size: .95rem; line-height: 1.4; color: var(--gedempt); }
.handtekening-groot { margin: 0 0 1.5rem; max-width: none; }
.handtekening-groot strong { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; }

.feiten { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1.5px solid var(--inkt); }
.feiten li { display: flex; gap: .75rem; align-items: flex-start; padding: 1.1rem 1.25rem; color: var(--gedempt); line-height: 1.4; }
.feiten li + li { border-left: 1px solid var(--lijn-sterk); }
.feiten .ic { color: var(--inkt-2); margin-top: 1px; }
.feiten strong { font-family: var(--display); font-weight: 750; color: var(--inkt); font-size: 1.08rem; }

@media (max-width: 900px) {
  .held-raster { grid-template-columns: minmax(0, 1fr); }
  .held { background-position: right -40vw top -10vw; background-size: 130vw; }
  .feiten { grid-template-columns: minmax(0, 1fr); }
  .feiten li { padding: .9rem .25rem; }
  .feiten li + li { border-left: 0; border-top: 1px solid var(--lijn-sterk); }
}

/* ---------- dossierblad (documentencheck) ---------- */
.dossier {
  position: relative; isolation: isolate; overflow: hidden; container-type: inline-size;
  background: var(--vel); border: 1px solid rgba(46, 33, 71, .1); border-radius: var(--r-groot);
  box-shadow: var(--schaduw-groot); padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.15rem, 3vw, 2.1rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
.dossier-rozet { position: absolute; z-index: -1; width: 300px; height: 300px; right: -90px; top: -90px; color: var(--inkt); opacity: .1; pointer-events: none; }
.dossier-rozet path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.dossier.tekent .dossier-rozet path { animation: teken 2.2s var(--uit) both; }
.dossier.tekent .dossier-rozet path:nth-child(3n+2) { animation-delay: .12s; }
.dossier.tekent .dossier-rozet path:nth-child(3n) { animation-delay: .24s; }
@keyframes teken { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.dossier-titel { font-size: clamp(1.35rem, 3.4cqi, 1.75rem); line-height: 1.12; margin: 0 0 .4rem; max-width: min(24ch, calc(100% - 7rem)); }
.dossier-intro { color: var(--gedempt); font-size: .98rem; line-height: 1.5; margin: 0 0 1.15rem; max-width: min(46ch, calc(100% - 7rem)); }
.dossier-keuze { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.dossier-keuze legend { padding: 0; margin-bottom: .55rem; }
.keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.keuze { position: relative; display: flex; align-items: center; gap: .65rem; min-height: 50px; padding: .55rem .75rem; border: 1.5px solid var(--lijn-sterk); border-radius: var(--r); background: var(--wit); cursor: pointer; font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--tekst); transition: border-color .18s, background-color .18s; }
.keuze:hover { border-color: var(--inkt-2); }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze:has(input:focus-visible) { outline: 3px solid var(--honing-diep); outline-offset: 2px; }
.keuze-vak { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--inkt-2); border-radius: 3px; background: var(--wit); color: #fff; }
.keuze-vak .ic { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--uit); }
.keuze:has(input:checked) { border-color: var(--inkt); background: #F2EFF9; color: var(--inkt); }
.keuze:has(input:checked) .keuze-vak { background: var(--inkt); border-color: var(--inkt); }
.keuze:has(input:checked) .keuze-vak .ic { opacity: 1; transform: none; }

.dossier-lijsten { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem 1.6rem; padding-top: 1.1rem; border-top: 1.5px dashed var(--lijn-sterk); }
.dossier-blok { position: relative; min-width: 0; }
.dossier-blok .veldlabel { margin-bottom: .6rem; }
.doclijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.doclijst li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .55rem; font-size: .95rem; line-height: 1.42; }
.doclijst .ic { color: var(--munt); margin-top: 2px; }
.doclijst-sit, .dossier-tip { display: none; }
.dossier-leeg p { margin: 0 0 .4rem; color: var(--gedempt); font-size: .95rem; }
.latente-lijnen span { display: block; height: 1.55rem; border-bottom: 1.5px dotted var(--lijn-sterk); }
.latente-lijnen span:nth-child(2) { width: 82%; }
.latente-lijnen span:nth-child(3) { width: 64%; }
.dossier:has(input:checked) .dossier-leeg { display: none; }
.dossier:has(input[value="werknemer"]:checked) [data-sit="werknemer"],
.dossier:has(input[value="zelfstandige"]:checked) [data-sit="zelfstandige"],
.dossier:has(input[value="werkzoekende"]:checked) [data-sit="werkzoekende"],
.dossier:has(input[value="student"]:checked) [data-sit="student"],
.dossier:has(input[value="inkomen"]:checked) [data-sit="inkomen"],
.dossier:has(input[value="gezin"]:checked) [data-sit="gezin"] { display: grid; }
.dossier:has(input[value="gezin"]:checked) [data-sit-tip="gezin"] { display: block; }
.dossier-tip { margin: .85rem 0 0; padding: .75rem .85rem; background: var(--munt-zacht); border-radius: var(--r); font-size: .9rem; line-height: 1.45; color: #1C4C40; }
.dossier-tip strong { color: #133B31; }
.dossier.speelt .doclijst-sit li { animation: inkt .65s var(--uit) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes inkt { from { clip-path: inset(0 100% 0 0); opacity: .25; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

.stempel { position: absolute; z-index: 2; top: 1.4rem; right: 1rem; width: 104px; height: 104px; color: var(--vermiljoen); opacity: 0; transform: rotate(-14deg) scale(1.2); mix-blend-mode: multiply; pointer-events: none; }
.dossier:has(input:checked) .stempel { opacity: .9; transform: rotate(-14deg); }
.dossier.speelt .stempel { animation: druk .55s var(--uit) .3s both; }
@keyframes druk { 0% { opacity: 0; transform: rotate(-26deg) scale(1.75); } 55% { opacity: .95; transform: rotate(-12deg) scale(.93); } 100% { opacity: .9; transform: rotate(-14deg) scale(1); } }

.dossier-noot { margin: 1.25rem 0 1rem; font-size: .84rem; line-height: 1.5; color: var(--gedempt); max-width: 62ch; }
.dossier-acties { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.dossier-meer { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; font-weight: 800; }
.dossier-meer .ic { transition: transform .25s var(--uit); }
.dossier-meer:hover .ic { transform: translateX(3px); }
@container (max-width: 400px) {
  .keuzes { grid-template-columns: minmax(0, 1fr); }
  .stempel { width: 76px; height: 76px; top: 1.2rem; right: .25rem; }
  .dossier-titel, .dossier-intro { max-width: calc(100% - 4.5rem); }
}

@container (max-width: 600px) {
  .dossier-lijsten { grid-template-columns: minmax(0, 1fr); }
  .dossier-acties .knop { flex: 1 1 auto; }
}

/* ---------- secties algemeen ---------- */
.sectiekop { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sectiekop h2 { margin-bottom: .6rem; }
.sectiekop p { color: var(--gedempt); font-size: 1.1rem; margin: 0; }

/* ---------- register van de diensten ---------- */
.register { background: var(--vel); padding-block: var(--sectie); }
.register-groep { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem clamp(1.5rem, 4vw, 3.5rem); padding-top: 1.35rem; border-top: 2px solid var(--inkt); }
.register-groep + .register-groep { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.register-groepkop h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.register-groepkop p { color: var(--gedempt); font-size: .97rem; max-width: 38ch; margin: 0; }
.register-rijen { list-style: none; margin: 0; padding: 0; }
.register-rij { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naam pijl" "tekst pijl"; gap: .35rem 1.5rem; padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--lijn-sterk); color: inherit; text-decoration: none; }
.register-rijen li:first-child .register-rij { padding-top: 0; }
.register-rij::before { content: ""; position: absolute; z-index: -1; inset: 0 -1rem; background: var(--papier); clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--uit); }
.register-rij:hover::before { clip-path: inset(0 0 0 0); }
.register-naam { grid-area: naam; font: 750 clamp(1.45rem, 2.9vw, 2.3rem)/1.08 var(--display); letter-spacing: -.03em; color: var(--inkt); }
.register-tekst { grid-area: tekst; color: var(--gedempt); max-width: 58ch; }
.register-pijl { grid-area: pijl; align-self: center; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--lijn-sterk); color: var(--inkt); transition: background-color .25s, border-color .25s, transform .35s var(--uit); }
.register-rij:hover .register-pijl { background: var(--honing); border-color: var(--honing); transform: translateX(4px); }
@media (max-width: 800px) {
  .register-groep { grid-template-columns: minmax(0, 1fr); }
  .register-pijl { width: 42px; height: 42px; }
  .register-rij::before { inset: 0 -.5rem; }
}

/* ---------- vertrouwen: aanspreekpunt en verklaringen ---------- */
.vertrouwen { padding-block: var(--sectie); }
.vertrouwen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ondertekenaar { position: relative; isolation: isolate; overflow: hidden; background: var(--vel); border: 1px solid rgba(46, 33, 71, .1); border-radius: var(--r-groot); box-shadow: var(--schaduw); padding: clamp(1.5rem, 3vw, 2.25rem); }
.ondertekenaar-rozet { position: absolute; z-index: -1; width: 380px; height: 380px; right: -150px; bottom: -150px; color: var(--inkt); opacity: .08; }
.ondertekenaar-tekst { max-width: 40ch; margin-bottom: 1.75rem; font-size: 1.05rem; }
.verklaringen h2 { margin-bottom: 1.4rem; }
.verklaringen ul { list-style: none; margin: 0; padding: 0; }
.verklaringen li { position: relative; padding: 1.1rem 0 1.1rem 2.6rem; border-top: 1px solid var(--lijn-sterk); }
.verklaringen li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--munt); background: var(--munt-zacht); }
.verklaringen li::after { content: ""; position: absolute; left: 8px; top: calc(1.3rem + 6px); width: 7px; height: 11px; border: solid var(--munt); border-width: 0 2.25px 2.25px 0; transform: rotate(45deg); }
.verklaringen h3 { margin-bottom: .25rem; }
.verklaringen p { margin: 0; color: var(--gedempt); }
@media (max-width: 900px) { .vertrouwen-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- route ---------- */
.route { background: var(--vel); padding-block: var(--sectie); }
.route-dienst { background: var(--papier); }
.route-lijst { position: relative; list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.route-lijst::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 44px; transform: translateY(-50%); background: url(/assets/golfband.svg) repeat-x center / 720px 44px; }
.route-lijst li { position: relative; }
.route-zegel { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.1rem; border-radius: 50%; background: var(--inkt) url(/assets/rozet-licht.svg) center / 280%; color: #fff; font: 800 1.35rem/1 var(--display); box-shadow: 0 0 0 7px var(--vel), 0 0 0 8.5px var(--lijn-sterk); }
.route-dienst .route-zegel { box-shadow: 0 0 0 7px var(--papier), 0 0 0 8.5px var(--lijn-sterk); }
.route-lijst h3 { margin-bottom: .35rem; }
.route-lijst p { color: var(--gedempt); margin: 0; max-width: 34ch; }
@media (max-width: 800px) {
  .route-lijst { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .route-lijst::before { display: none; }
  .route-lijst li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1.1rem; }
  .route-zegel { grid-row: span 2; margin: 0; }
}

/* ---------- prijsafspraken (pruimen strook) ---------- */
.voorwaarden { position: relative; overflow: hidden; isolation: isolate; background: var(--inkt) url(/assets/rozet-licht.svg) no-repeat left -260px center / 820px; color: var(--op-inkt); padding-block: var(--sectie); }
.voorwaarden::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--iris); }
.voorwaarden-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.voorwaarden h2, .voorwaarden h3 { color: #fff; }
.voorwaarden-kop p { color: var(--op-inkt); font-size: 1.1rem; max-width: 40ch; }
.voorwaarden-lijst { list-style: none; margin: 0; padding: 0; }
.voorwaarden-lijst li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.voorwaarden-lijst li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.voorwaarden-lijst .ic { color: var(--honing); margin-top: 2px; }
.voorwaarden-lijst h3 { margin-bottom: .25rem; font-size: 1.25rem; }
.voorwaarden-lijst p { margin: 0; }
@media (max-width: 900px) { .voorwaarden-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- getuigenissen ---------- */
.getuigen { padding-block: var(--sectie); }
.getuigen-noot { display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem !important; color: var(--munt) !important; font-weight: 750; font-size: 1rem !important; }
.getuigen-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); padding-top: .75rem; }
.briefje { position: relative; margin: 0; padding: 1.6rem 1.5rem 1.35rem; background: var(--vel); border: 1px solid rgba(46, 33, 71, .1); border-radius: var(--r); box-shadow: var(--schaduw); }
.briefje blockquote { margin: 0 0 1.25rem; }
.briefje blockquote p { margin: 0; font: 650 1.12rem/1.5 var(--tekstfont); color: var(--tekst); }
.briefje blockquote p::before { content: "\201C"; }
.briefje blockquote p::after { content: "\201D"; }
.briefje figcaption { display: flex; align-items: center; gap: .8rem; padding-top: 1rem; border-top: 1px dashed var(--lijn-sterk); }
.briefje figcaption strong { display: block; color: var(--inkt); }
.briefje figcaption span span { color: var(--gedempt); font-size: .92rem; }
.zegel { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--vermiljoen); background: var(--vel) url(/assets/rozet.svg) center / 300%; color: var(--vermiljoen); font: 800 1.1rem/1 var(--display); transform: rotate(-9deg); }
@media (max-width: 900px) {
  .getuigen-rij { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---------- aanvraag en formulier ---------- */
.aanvraag { background: var(--papier-2); padding-block: var(--sectie); }
.aanvraag-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.aanvraag-wa { display: grid; gap: .8rem; justify-items: start; margin: 1.6rem 0; padding: 1.15rem 1.25rem; background: var(--vel); border: 1px solid var(--lijn); border-radius: var(--r-groot); }
.aanvraag-wa p { margin: 0; font-weight: 750; color: var(--inkt); }
.punten { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.punten li { display: flex; gap: .65rem; padding: .45rem 0; }
.punten .ic { color: var(--inkt-2); margin-top: 3px; }
.verwant-titel { margin: 2rem 0 .6rem; }
.verwant { list-style: none; margin: 0; padding: 0; }
.verwant a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--lijn-sterk); font-weight: 750; color: var(--inkt); text-decoration: none; }
.verwant a:hover .ic { transform: translateX(3px); }
.verwant .ic { transition: transform .25s var(--uit); }
.contactlijst { margin: 0; display: grid; gap: .9rem; }
.contactlijst div { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: .7rem; }
.contactlijst .ic { grid-row: span 2; color: var(--inkt-2); margin-top: 3px; }
.contactlijst dt { font-weight: 800; color: var(--inkt); }
.contactlijst dd { margin: 0; color: var(--gedempt); }
.aanvraag-vel { container-type: inline-size; }
@media (max-width: 900px) { .aanvraag-raster { grid-template-columns: minmax(0, 1fr); } }

.formulier { position: relative; isolation: isolate; overflow: hidden; background: var(--vel) url(/assets/rozet.svg) no-repeat right -220px bottom -220px / 560px; border: 1px solid rgba(46, 33, 71, .1); border-radius: var(--r-groot); box-shadow: var(--schaduw-groot); padding: clamp(1.5rem, 3vw, 2.25rem); }
.veld-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@container (max-width: 520px) { .veld-rij { grid-template-columns: minmax(0, 1fr); } }
.veld { margin-bottom: 1.05rem; min-width: 0; }
.veld label { display: flex; align-items: center; gap: .5rem; margin-bottom: .42rem; font: 800 .76rem/1.3 var(--tekstfont); letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-2); }
.veldnr { display: inline-grid; place-items: center; width: 21px; height: 21px; flex: none; border: 1px solid var(--lijn-sterk); border-radius: 3px; font-size: .7rem; letter-spacing: 0; color: var(--gedempt); background: var(--wit); }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 52px; padding: .8rem .9rem; font: inherit; font-size: 1rem; color: var(--tekst);
  background: var(--wit); border: 1.5px solid var(--lijn-sterk); border-radius: var(--r);
  box-shadow: inset 0 1px 2px rgba(46, 33, 71, .05); transition: border-color .18s, box-shadow .18s;
}
.veld textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--inkt-2); }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 3.5px rgba(246, 185, 59, .6); }
.veld [aria-invalid="true"] { border-color: var(--vermiljoen); }
.veld .fout { margin: .35rem 0 0; color: var(--vermiljoen); font-weight: 750; font-size: .88rem; }
.kies { position: relative; }
.kies select { appearance: none; padding-right: 2.6rem; cursor: pointer; }
.kies .ic { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: var(--gedempt); pointer-events: none; }
.hint { margin: .4rem 0 0; font-size: .86rem; color: var(--gedempt); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gdpr { font-size: .88rem; color: var(--gedempt); }
.veld-situatie { margin: 0 0 1.05rem; padding: .7rem .85rem; background: var(--munt-zacht); border-radius: var(--r); font-size: .95rem; color: #1C4C40; }
.veld-situatie .veldlabel { display: block; color: #1C4C40; margin-bottom: .15rem; }
.formulier-status { margin: .8rem 0 0; font-weight: 750; }
.formulier-status:empty { display: none; }
.formulier-status.ok { color: var(--munt); }
.formulier-status.err { color: var(--vermiljoen); }
.formulier-status a { font-weight: 800; }

/* ---------- paginakop ---------- */
.paginakop { position: relative; padding: clamp(2.5rem, 6vw, 4.75rem) 0 0; background: var(--papier) url(/assets/rozet.svg) no-repeat right -18vw top -16vw / min(900px, 90vw); }
.paginakop::after { content: ""; display: block; height: 48px; margin-top: clamp(2.5rem, 5vw, 3.75rem); background: url(/assets/golfband.svg) repeat-x center / 1440px 48px; }
.paginakop h1 { max-width: 20ch; margin-bottom: 1rem; }
.paginakop .lead { max-width: 54ch; }
.paginakop .knoppen { margin-top: 1.75rem; }
.paginakop-kort h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.kruimel { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1.25rem; font-size: .92rem; color: var(--gedempt); }
.kruimel a { color: var(--gedempt); }
.kruimel [aria-current] { color: var(--inkt); font-weight: 750; }

/* ---------- diensten ---------- */
.tabs { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .5rem; scrollbar-width: thin; }
.tabs a { flex: none; padding: .65rem 1rem; border: 1.5px solid var(--lijn-sterk); border-radius: var(--r); background: var(--vel); font-weight: 800; color: var(--inkt); text-decoration: none; }
.tabs a:hover { border-color: var(--inkt); }
.dienstsectie { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.dienstsectie:nth-of-type(odd) { background: var(--vel); }
.dienstrijen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--inkt); }
.dienstrij { position: relative; isolation: isolate; display: block; padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--lijn-sterk); color: inherit; text-decoration: none; }
.dienstrij::before { content: ""; position: absolute; z-index: -1; inset: 0 -1rem; background: var(--papier); clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--uit); }
.dienstsectie:nth-of-type(even) .dienstrij::before { background: var(--vel); }
.dienstrij:hover::before { clip-path: inset(0 0 0 0); }
.dienstrij:hover .register-pijl { background: var(--honing); border-color: var(--honing); transform: translateX(4px); }
.dienstrij-kop { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
.dienstrij .register-naam { margin: 0; }
.dienstrij-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 2rem; margin: 0; }
.dienstrij-velden div { padding-top: .6rem; border-top: 1px dashed var(--lijn-sterk); }
.dienstrij-velden dd { margin: .25rem 0 0; color: var(--gedempt); font-size: .98rem; line-height: 1.5; }
.dienstrij-resultaat dd { color: var(--inkt); font-weight: 750; }
@media (max-width: 800px) { .dienstrij-velden { grid-template-columns: minmax(0, 1fr); } .dienstrij::before { inset: 0 -.5rem; } }
.kanttekening { display: flex; gap: .8rem; align-items: flex-start; margin: 1.5rem 0 0; padding: 1rem 1.15rem; background: var(--vel); border: 1px solid var(--lijn); border-radius: var(--r); font-size: .96rem; }
.kanttekening .ic { color: var(--inkt-2); margin-top: 2px; }

/* ---------- dienstpagina ---------- */
.detail-intro { background: var(--vel); padding-block: clamp(3rem, 6vw, 5rem); }
.detail-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tekstkolom p { font-size: 1.08rem; max-width: 64ch; }
.takenvel { background: var(--papier); border-radius: var(--r-groot); padding: clamp(1.25rem, 3vw, 1.75rem); }
.takenvel-titel { font-size: 1.35rem; margin-bottom: .75rem; }
.takenvel ul { list-style: none; margin: 0; padding: 0; }
.takenvel li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .65rem; padding: .65rem 0; border-top: 1px dashed var(--lijn-sterk); line-height: 1.5; }
.takenvel .ic { color: var(--munt); margin-top: 3px; }
.documenten, .dossierstrook { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--papier); }
.documenten-vel { position: relative; overflow: hidden; max-width: 860px; background: var(--vel); border-radius: var(--r-groot); box-shadow: var(--schaduw); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.documenten-vel h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.doclijst-vakjes { gap: 0; }
.doclijst-vakjes li { grid-template-columns: 22px minmax(0, 1fr); gap: .75rem; padding: .7rem 0; border-top: 1px dashed var(--lijn-sterk); font-size: 1rem; }
.vakje { width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--inkt-2); border-radius: 3px; background: var(--wit); }
.dossierstrook-raster { max-width: 900px; }
@media (max-width: 900px) { .detail-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- vragen ---------- */
.vragensectie { padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--vel); }
.vragensectie h2 { margin-bottom: 1.25rem; }
.vragen { border-top: 2px solid var(--inkt); }
.vraag { border-bottom: 1px solid var(--lijn-sterk); }
.vraag summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 0; cursor: pointer; list-style: none; font: 750 1.12rem/1.35 var(--tekstfont); color: var(--inkt); }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--inkt-2); }
.vraag summary .ic { transition: transform .3s var(--uit); color: var(--inkt-2); }
.vraag[open] summary .ic { transform: rotate(180deg); }
.vraag-antwoord p { margin: 0 0 1.35rem; max-width: 66ch; }

/* ---------- over ons ---------- */
.verhaal { background: var(--vel); padding-block: var(--sectie); }
.verhaal-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.waarden { padding-block: var(--sectie); }
.waarden-lijst { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.waarden-lijst li { padding-top: 1rem; border-top: 2px solid var(--inkt); }
.waarden-lijst p { color: var(--gedempt); margin: 0; }
.grens { padding-bottom: var(--sectie); }
.grens-vel { max-width: 780px; display: flex; gap: 1.1rem; align-items: flex-start; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--vel); border: 1px solid var(--lijn); border-radius: var(--r-groot); }
.grens-vel .ic { color: var(--inkt-2); }
.grens-vel h2 { font-size: 1.5rem; }
.grens-vel p { margin: 0; }
.slot { background: var(--papier-2); padding-block: clamp(3rem, 6vw, 4.5rem); }
.slot-raster { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; }
.slot h2 { margin-bottom: .4rem; }
.slot p { margin: 0; color: var(--gedempt); max-width: 52ch; }
@media (max-width: 900px) {
  .verhaal-raster { grid-template-columns: minmax(0, 1fr); }
  .waarden-lijst { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- privacy ---------- */
.leestekst { background: var(--vel); padding-block: clamp(3rem, 6vw, 5rem); }
.leestekst h2 { font-size: 1.45rem; margin-top: 2rem; }
.leestekst h2:first-child { margin-top: 0; }
.wettelijk { display: grid; gap: .1rem; margin: 0; }
.wettelijk div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px dashed var(--lijn-sterk); }
.wettelijk dd { margin: 0; }
@media (max-width: 600px) { .wettelijk div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }

/* ---------- meldingen (bedankt, fout, 404) ---------- */
.melding { padding-block: clamp(3rem, 8vw, 6rem); }
.melding-vel { position: relative; isolation: isolate; overflow: hidden; background: var(--vel); border-radius: var(--r-groot); box-shadow: var(--schaduw-groot); padding: clamp(2rem, 5vw, 3.5rem); }
.melding-rozet { position: absolute; z-index: -1; width: 440px; height: 440px; right: -170px; top: -170px; color: var(--inkt); opacity: .08; }
.melding .stempel { position: static; display: block; width: 120px; height: 120px; margin-bottom: 1.25rem; opacity: .9; transform: rotate(-12deg); }
.melding-icoon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 1.25rem; border-radius: 50%; background: var(--papier); color: var(--inkt); }
.melding h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.melding .knoppen { margin-top: 1.5rem; }

/* ---------- taalkeuze ---------- */
.kiezer { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--papier) url(/assets/rozet.svg) no-repeat center / min(1100px, 140vw); }
.kiezer-vel { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: 560px; padding: 3rem clamp(1.25rem, 5vw, 2.5rem) 2.5rem; text-align: center; background: var(--vel); border-radius: var(--r-groot); box-shadow: var(--schaduw-groot); }
.kiezer-vel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--iris); }
.kiezer-rozet { position: absolute; z-index: -1; width: 520px; height: 520px; left: 50%; top: -300px; transform: translateX(-50%); color: var(--inkt); opacity: .08; }
.kiezer-logo svg { width: 64px; height: 64px; }
.kiezer h1 { font-size: 3rem; margin: .5rem 0; }
.kiezer-talen { color: var(--gedempt); font-weight: 700; font-size: .98rem; }
.kiezer ul { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.kiezer .knop { width: 100%; min-height: 56px; font-size: 1.08rem; }

/* ---------- voet ---------- */
.voet { position: relative; background: var(--inkt); color: var(--op-inkt); }
.voet-band { height: 6px; background: var(--iris); }
.voet-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, 1.35fr) minmax(0, 1.2fr); gap: 2rem; padding-block: clamp(3rem, 6vw, 4rem) 2.25rem; }
.voet a { color: #fff; text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.logo-licht .logo-woord { color: #fff; }
.voet-merk p { margin: 1rem 0 1.25rem; max-width: 30ch; }
.voet-lijst { list-style: none; margin: 0; padding: 0; }
.voet-lijst li { margin: 0 0 .55rem; line-height: 1.4; }
.voet-wettelijk .veldlabel { color: var(--honing); margin-bottom: .75rem; }
.voet-wettelijk p { margin: 0 0 .35rem; font-size: .94rem; }
.voet-onder { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-block: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .86rem; color: #BDB5D4; }
.voet-onder p { margin: 0; }
@media (max-width: 900px) { .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .voet-raster { grid-template-columns: minmax(0, 1fr); }
  .voet-onder { padding-bottom: 6rem; }
}

/* ---------- zwevende WhatsApp-knop ---------- */
.wa-zwevend { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 12px 26px -8px rgba(13, 95, 58, .6); transition: opacity .3s, transform .4s var(--uit), background-color .2s; }
.wa-zwevend:hover { background: var(--wa-diep); color: #fff; }
@media (min-width: 1061px) { .wa-zwevend { display: none; } }
.kop.open ~ .wa-zwevend { display: none; }
.wa-zwevend.verborgen { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}