/* Vormgeving van de publieke website, "zacht en rond": witte kopbalk, afgeronde getinte vlakken
   binnen één breedte, pilknoppen en een donkere voet. Alles komt uit tokens.css; twee breekpunten:
   768 (rasters naar één kolom) en 1100 (menuknop, paginakopfoto onder de tekst). */

/* ---------- lettertypen ---------- */
@font-face {
  font-family: "Figtree";
  src: url("/static/fonts/Figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/InstrumentSans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--wit);
  color: var(--inkt);
  font: 400 var(--f-tekst) / 1.6 var(--letter-tekst);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
abbr[title] { text-decoration: none; }
:focus-visible { outline: 2px solid var(--primair); outline-offset: 3px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--letter-kop);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--f-titel); line-height: 1.08; }
h2 { font-size: var(--f-kop); }
h3 { font-size: var(--f-sub); line-height: 1.25; }
h1 strong, h2 strong, h3 strong { font-weight: 700; }
strong, b { font-weight: 600; }

.skiplink {
  position: absolute;
  top: -100px;
  left: var(--marge);
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-rond);
  background: var(--donker);
  color: var(--wit);
}
.skiplink:focus { top: 12px; }

/* ---------- opbouw ---------- */
/* .breed is de enige container: alles begint op dezelfde linkerlijn. */
.breed {
  width: 100%;
  max-width: calc(var(--breed) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}
.lees { max-width: var(--lees); }
.inhoud { display: block; padding-bottom: var(--ruimte); }
.blok { margin-top: var(--ruimte); }
.blok__vlak { padding: var(--binnen); border-radius: var(--r-groot); background: var(--tint-zacht); }
@media (max-width: 767px) {
  .blok__vlak { padding-inline: var(--marge); }
}
.blokkop { max-width: var(--lees); margin-bottom: 40px; }
.blokkop__intro { margin-top: 14px; color: var(--inkt-70); }
.blokkop__intro > * + * { margin-top: 12px; }

/* Lopende tekst uit markdown. */
.lees__tekst{ max-width: var(--lees); }
.lees__tekst > * + *{ margin-top: 18px; }
.lees__tekst h2, .lees__tekst h3{ font-size: var(--f-sub); }
.lees__tekst > h2, .lees__tekst > h3{ margin-top: 40px; }
.lees__tekst > :first-child{ margin-top: 0; }
.lees__tekst > h2 + *, .lees__tekst > h3 + *{ margin-top: 10px; }
.lees__tekst a{ color: var(--primair-hover); text-decoration: underline; text-underline-offset: 3px; }
.lees__tekst a:hover{ color: var(--inkt); }
.lees__tekst ul, .paginakop__intro ul{ padding-left: 26px; }
.lees__tekst ul li, .paginakop__intro ul li{ position: relative; }
.lees__tekst ul li::before, .paginakop__intro ul li::before{
  content: "";
  position: absolute;
  top: 0.65em;
  left: -20px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-rond);
  background: var(--primair);
}
.lees__tekst ol{ padding-left: 26px; list-style: decimal; }
.lees__tekst li + li, .paginakop__intro li + li{ margin-top: 8px; }
.lees__tekst table { width: 100%; border-collapse: collapse; }
.lees__tekst th, .lees__tekst td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.lees__tekst th { font-weight: 600; }

/* ---------- iconen en knoppen ---------- */
.icoonvak {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-rond);
  background: var(--tint-sterk);
  color: var(--donker);
}
.icoonvak svg { width: 16px; height: 16px; }

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-rond);
  font-size: var(--f-klein);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-snel), border-color var(--t-snel), color var(--t-snel);
}
.knop__icoon { display: inline-flex; }
.knop__icoon svg, .knop > svg { width: 18px; height: 18px; }
/* Witte tekst op --primair haalt geen 4,5:1; daarom de donkere teal als knopkleur. */
.knop--primair { background: var(--primair-hover); color: var(--wit); }
.knop--primair:hover { background: var(--donker); }
.knop--secundair { border-color: var(--inkt); color: var(--inkt); }
.knop--secundair:hover { background: var(--wit); }
.knop--link { padding: 6px 0; border: 0; border-radius: 0; color: var(--primair-hover); }
.knop--link:hover { color: var(--inkt); }
.knop--transparant { justify-content: flex-start; padding: 0; border: 0; border-radius: 0; font-weight: 500; text-align: left; }
.knop--groot { padding: 17px 30px; }
.knop--klein { padding: 12px 20px; }
@media (max-width: 767px) {
  .knoppen .knop:not(.knop--link) { flex: 1 1 100%; }
}

/* ---------- kopbalk ---------- */
.kop {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--lijn);
  background: var(--wit);
  color: var(--inkt);
  transition: transform var(--t-snel);
}
.kop.is-verborgen { transform: translateY(-100%); }
.kop__binnen { display: flex; align-items: center; gap: 32px; height: 72px; }
.kop__logo { display: inline-flex; flex: none; }
.kop__logo img { width: auto; height: 38px; }
.kop__telefoon { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-klein); font-weight: 500; white-space: nowrap; }
.kop__telefoon .icoonvak { width: auto; height: auto; background: none; }
.kop__telefoon .icoonvak svg { width: 18px; height: 18px; }
.kop__telefoon:hover { color: var(--primair-hover); }
.kop__knop { white-space: nowrap; }
/* Kale kop (aanvulformulier): geen menu, wel taalwissel en telefoon. */
.kop__kaal { display: flex; align-items: center; gap: 20px; margin-left: auto; }
@media (max-width: 767px) {
  .kop__kaal { gap: 12px; }
  .kop__kaal .kop__nummer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.hoofdmenu__link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--f-klein);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--t-snel);
}
.hoofdmenu__pijl { display: inline-flex; transition: transform var(--t-snel); }
.hoofdmenu__pijl svg { width: 16px; height: 16px; }
.hoofdmenu__item.is-open .hoofdmenu__pijl { transform: rotate(180deg); }
.hoofdmenu__link:hover, .hoofdmenu__item.is-open > .hoofdmenu__link { color: var(--primair-hover); }
.hoofdmenu__item.is-actief > .hoofdmenu__link {
  text-decoration: underline 2px var(--primair);
  text-underline-offset: 8px;
}

.submenu__titel { font-family: var(--letter-kop); font-size: var(--f-sub); font-weight: 500; line-height: 1.25; }
.submenu__beschrijving { margin: 8px 0 20px; font-size: var(--f-klein); color: var(--inkt-70); }
.submenu__kolom--intro .knop--transparant { flex-direction: row-reverse; justify-content: flex-end; font-size: var(--f-klein); }
.submenu__link { width: 100%; gap: 12px; padding: 10px 0; font-size: var(--f-klein); }
.submenu__link small { display: block; margin-top: 2px; font-size: var(--f-klein); font-weight: 400; color: var(--inkt-70); }
.submenu__link:hover, .submenu__link.is-actief { color: var(--primair-hover); }
.submenu__link.is-actief .knop__tekst { font-weight: 600; }

/* Taalwissel: twee vlaggen, de huidige omrand. Op een groot scherm rechts van het menu, kleiner
   altijd zichtbaar naast de menuknop. */
.taalwissel__lijst { display: flex; align-items: center; gap: 2px; }
.taalwissel__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-klein);
  transition: border-color var(--t-snel);
}
.taalwissel__link:hover { border-color: var(--primair-hover); }
.taalwissel__link[aria-current] { border-color: var(--rand-veld); }
.taalwissel__vlag { display: inline-flex; flex: none; overflow: hidden; border-radius: calc(var(--r-klein) / 2); }
.taalwissel__vlag svg { width: 24px; height: 16px; }
.taalwissel--mobiel { margin-left: auto; }
.taalwissel--mobiel + .kop__menuknop { margin-left: 4px; }

.kop__menuknop { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; margin-left: auto; padding: 0 9px; }
.kop__menuknop span { display: block; height: 2px; border-radius: var(--r-rond); background: currentColor; transition: transform var(--t-snel), opacity var(--t-snel); }
body.menu-open .kop__menuknop span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .kop__menuknop span:nth-child(2) { opacity: 0; }
body.menu-open .kop__menuknop span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (min-width: 1100px) {
  .kop__binnen { height: 84px; }
  .kop__logo img { height: 42px; }
  .kop__menuknop, .taalwissel--mobiel { display: none; }
  .hoofdmenu { display: flex; flex: 1; align-items: center; gap: 12px; height: 100%; }
  /* Met de muis is 36 px genoeg; zo past het Nederlandse menu met de vlaggetjes op 1100 px. */
  .taalwissel--menu .taalwissel__link { min-width: 36px; }
  .hoofdmenu__lijst { display: flex; gap: clamp(12px, calc(2vw - 8px), 32px); height: 100%; }
  .hoofdmenu__item { position: relative; display: flex; align-items: center; }
  .hoofdmenu__extra { display: flex; align-items: center; gap: 16px; margin-left: auto; }
  .submenu {
    position: absolute;
    top: 100%;
    left: -24px;
    z-index: 15;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t-snel), visibility 0s linear 150ms;
  }
  .hoofdmenu__item:last-child .submenu { right: -24px; left: auto; }
  .hoofdmenu__item.is-open .submenu { visibility: visible; opacity: 1; transition-delay: 0s; }
  .submenu__binnen {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--lijn);
    border-radius: var(--r);
    background: var(--wit);
  }
  .submenu__kolom { width: 300px; padding: 28px 32px; }
  /* Een lang submenu (de keuringen) in twee kolommen, anders wordt het hoger dan het scherm. */
  .submenu__lijst:has(> li:nth-child(7)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; width: 540px; }
  .submenu__kolom--intro { background: var(--tint-zacht); }
}
@media (max-width: 1099px) {
  .hoofdmenu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    height: calc(100dvh - 72px);
    overflow-y: auto;
    padding: 8px var(--marge) 32px;
    border-top: 1px solid var(--lijn);
    background: var(--wit);
  }
  body.menu-open .hoofdmenu { display: block; }
  .taalwissel--menu { display: none; }
  .hoofdmenu__item { border-bottom: 1px solid var(--lijn); }
  .hoofdmenu__link { justify-content: space-between; width: 100%; min-height: 56px; font-size: var(--f-tekst); }
  .submenu { display: none; padding-bottom: 12px; }
  .hoofdmenu__item.is-open .submenu { display: block; }
  .submenu__titel { display: none; }
  .submenu__beschrijving { margin-top: 0; }
  .submenu__kolom--intro { padding-bottom: 8px; }
  .hoofdmenu__extra { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding-top: 24px; }
  .hoofdmenu__extra .kop__telefoon { font-size: var(--f-tekst); }
}

/* ---------- paginakop ---------- */
.paginakop { padding-top: 24px; }
.paginakop__vlak { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--r-groot); background: var(--tint); }
.paginakop__tekst { padding: var(--binnen); }
.paginakop__titel { max-width: 16em; }
.paginakop__datum { display: block; margin-top: 14px; font-size: var(--f-klein); color: var(--inkt-70); }
.paginakop__intro { max-width: var(--lees); margin-top: 20px; font-size: var(--f-sub); line-height: 1.5; }
.paginakop__intro > * + * { margin-top: 12px; }
@media (max-width: 767px) {
  .paginakop__intro { font-size: var(--f-tekst); }
}
.paginakop__intro a { text-decoration: underline; text-underline-offset: 3px; }
.paginakop__foto img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.paginakop__icoon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border-radius: var(--r-rond);
  background: var(--primair-hover);
  color: var(--wit);
}
.paginakop__icoon--vink { background: var(--goed); }
.paginakop__icoon--kruis { background: var(--fout); }
.paginakop__icoon svg { width: 28px; height: 28px; stroke-width: 2.5; }
@media (min-width: 1100px) {
  .paginakop__vlak--met-foto { grid-template-columns: 1.1fr 0.9fr; }
  .paginakop__vlak--met-foto .paginakop__tekst { align-self: center; padding-right: 56px; }
  .paginakop__foto img { min-height: 440px; aspect-ratio: auto; }
  .paginakop--groot .paginakop__foto img { min-height: 520px; }
}

.kruimelpad { margin-bottom: 18px; font-size: var(--f-klein); color: var(--inkt-70); }
.kruimelpad ol { display: flex; flex-wrap: wrap; }
.kruimelpad li + li::before { content: "/"; margin: 0 6px; }
.kruimelpad a:hover { color: var(--inkt); text-decoration: underline; }
.kruimelpad [aria-current] { color: var(--inkt); }

/* ---------- badges ---------- */
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px var(--gat); }
.badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 20px 8px 8px;
  border-radius: var(--r-rond);
  background: var(--tint-zacht);
  font-size: var(--f-klein);
  line-height: 1.35;
}
.badge__icoon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-rond);
  background: var(--tint-sterk);
  color: var(--donker);
}
.badge__icoon svg { width: 20px; height: 20px; }
.blok__vlak .badge { background: var(--wit); }

/* ---------- kaarten ---------- */
.kaarten { display: grid; gap: var(--gat); }
.kaarten--locaties { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kaart {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--tint-zacht);
  transition: background-color var(--t-snel);
}
.kaart:hover { background: var(--tint); }
.kaart__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.kaart__titel, .kaart__datum, .kaart__tekst { margin-inline: clamp(20px, 3vw, 30px); }
.kaart__titel { margin-top: 28px; font-size: var(--f-sub); }
.kaart:hover .kaart__titel { text-decoration: underline; text-underline-offset: 4px; }
.kaart__datum { margin-top: 6px; font-size: var(--f-klein); color: var(--inkt-70); }
.kaart__tekst { margin-top: 10px; font-size: var(--f-klein); color: var(--inkt-70); }
.kaart__tekst > * + * { margin-top: 10px; }
.kaart__link { display: inline-flex; align-items: center; gap: 6px; margin: auto clamp(20px, 3vw, 30px) 0; padding-top: 14px; font-size: var(--f-klein); font-weight: 600; color: var(--primair-hover); text-decoration: underline; text-underline-offset: 3px; }
.kaart__link svg { width: 16px; height: 16px; }
.kaart > :last-child { margin-bottom: 30px; }
.blok__vlak .kaart { background: var(--wit); }
.blok__vlak .kaart:hover { background: var(--tint); }
@media (min-width: 768px) {
  .kaarten:not(.kaarten--locaties) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .kaarten:not(.kaarten--locaties) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- foto en tekst ---------- */
.foto-tekst { display: grid; gap: 32px; align-items: center; }
.foto-tekst__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.foto-tekst .blokkop { margin-bottom: 20px; }
@media (min-width: 768px) {
  .foto-tekst { grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
  .foto-tekst--links .foto-tekst__foto { order: -1; }
}

/* ---------- stappen ---------- */
.stappen { display: grid; gap: 40px var(--gat); counter-reset: stap; }
.stap { padding-top: 22px; border-top: 2px solid var(--tint-sterk); counter-increment: stap; }
.stap::before {
  content: counter(stap);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -41px 0 16px;
  border-radius: var(--r-rond);
  background: var(--primair-hover);
  color: var(--wit);
  font-size: var(--f-klein);
  font-weight: 700;
}
.stap__titel { margin-bottom: 6px; }
.stap__tekst { font-size: var(--f-klein); color: var(--inkt-70); }
.stap__tekst > * + * { margin-top: 8px; }
@media (min-width: 768px) {
  .stappen { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ---------- prijzen ---------- */
.prijzen { display: grid; gap: var(--gat); }
.prijskaart { display: flex; flex-direction: column; gap: 10px; padding: 28px 30px 30px; border-radius: var(--r); background: var(--tint-zacht); }
.prijskaart__prijs { font-family: var(--letter-kop); font-size: var(--f-kop); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.prijskaart__opmerking { font-size: var(--f-klein); color: var(--inkt-70); }
.prijskaart__details { margin-top: 6px; border-top: 1px solid var(--lijn); }
.prijskaart__details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 4px; font-size: var(--f-klein); font-weight: 600; cursor: pointer; list-style: none; }
.prijskaart__details summary::-webkit-details-marker { display: none; }
.prijskaart__details summary::after, .faq__vraag summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-snel);
}
.prijskaart__details[open] summary::after, .faq__vraag[open] summary::after { transform: rotate(45deg); }
.prijskaart__inhoud { padding-top: 8px; font-size: var(--f-klein); }
.prijskaart__inhoud ul { padding-left: 20px; list-style: disc; }
.prijskaart__inhoud > * + *, .prijskaart__inhoud li + li { margin-top: 6px; }
.prijskaart .knoppen { margin-top: auto; padding-top: 14px; }
.blok__vlak .prijskaart { background: var(--wit); }
.tarieven { padding: 24px 28px; border-radius: var(--r); background: var(--tint-zacht); }
.tarieven + .tarieven { margin-top: var(--gat); }
.tarieven__kop { margin-bottom: 10px; }
.tarieven__tabel { width: 100%; border-collapse: collapse; }
.tarieven__tabel th, .tarieven__tabel td { padding: 12px 0; border-top: 1px solid var(--lijn); font-weight: 400; text-align: left; vertical-align: top; }
.tarieven__prijs { padding-left: 24px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarieven__tabel td.tarieven__prijs { text-align: right; }
.blok__vlak .tarieven { background: var(--wit); }
.tarieven__groep th { padding-top: 22px; font-weight: 600; }
.tarieven__btw { display: block; font-size: var(--f-klein); font-weight: 400; color: var(--inkt-70); }
.tarieven .knoppen { padding-top: 18px; }
@media (max-width: 767px) {
  .tarieven { padding: 20px 18px; }
  .tarieven__prijs { padding-left: 12px; }
}
.prijzen--lijst .tarieven { grid-column: 1 / -1; }
.prijzen--lijst .prijskaart--korting { align-self: start; }
.prijzen__voetnoot { margin-top: 20px; font-size: var(--f-klein); color: var(--inkt-70); }
.prijzen__voetnoot > * + * { margin-top: 8px; }
@media (min-width: 768px) {
  .prijzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .prijzen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prijzen--lijst .tarieven { grid-column: span 2; }
}

/* ---------- veelgestelde vragen ---------- */
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq__vraag { border-radius: var(--r-klein); background: var(--tint-zacht); }
.faq__vraag summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
.faq__vraag summary::-webkit-details-marker { display: none; }
.faq__vraag summary:hover .faq__titel { color: var(--primair-hover); }
.faq__titel { font-size: var(--f-tekst); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.faq__antwoord { padding: 0 22px 22px; }
.faq__antwoord > * + * { margin-top: 12px; }
.faq__antwoord a { color: var(--primair-hover); text-decoration: underline; text-underline-offset: 3px; }
.faq__antwoord ul { padding-left: 20px; list-style: disc; }
.blok__vlak .faq__vraag { background: var(--wit); }

/* ---------- nieuws ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.tag { display: inline-block; padding: 6px 14px; border-radius: var(--r-rond); background: var(--tint); font-size: var(--f-klein); transition: background-color var(--t-snel); }
.tag:hover { background: var(--tint-sterk); }

/* ---------- oproep en checklist (tekstblokken) ---------- */
.oproep {
  display: grid;
  gap: 20px 32px;
  padding: var(--binnen);
  border-radius: var(--r-groot);
  background: var(--tint-zacht);
}
.oproep .blokkop { margin-bottom: 12px; }
.oproep .lees__tekst { max-width: var(--lees); }
.oproep .knoppen { margin-top: 0; }
.oproep__icoon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r); background: var(--primair); color: var(--wit); }
.oproep__icoon svg { width: 26px; height: 26px; }
@media (min-width: 768px) {
  .oproep--met-icoon { grid-template-columns: auto minmax(0, 1fr); }
  .oproep--met-icoon .knoppen { grid-column: 2; }
}
@media (min-width: 1100px) {
  .oproep { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .oproep--met-icoon { grid-template-columns: auto minmax(0, 1fr) auto; }
  .oproep--met-icoon .knoppen { grid-column: auto; }
}

/* Op overzichts- en keuringspagina's is een lijst in een tekstblok een afvinklijst in een vlak. */
.pagina--overzicht .lees__tekst ul, .pagina--keuring .lees__tekst ul {
  display: grid;
  gap: 12px;
  padding: 24px 28px;
  border-radius: var(--r);
  background: var(--tint-zacht);
}
.pagina--overzicht .lees__tekst li + li, .pagina--keuring .lees__tekst li + li { margin-top: 0; }
.pagina--overzicht .lees__tekst ul li, .pagina--keuring .lees__tekst ul li { padding-left: 34px; }
.pagina--overzicht .lees__tekst ul li::before, .pagina--keuring .lees__tekst ul li::before {
  top: 0.1em;
  left: 0;
  width: 22px;
  height: 22px;
}
.pagina--overzicht .lees__tekst ul li::after, .pagina--keuring .lees__tekst ul li::after {
  content: "";
  position: absolute;
  top: calc(0.1em + 5px);
  left: 8px;
  width: 6px;
  height: 10px;
  border: solid var(--wit);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- aanvraagstrook ---------- */
.strook {
  display: grid;
  gap: 8px 48px;
  padding: var(--binnen);
  border-radius: var(--r-groot);
  background: var(--donker);
  color: var(--wit);
}
.strook__tekst > * + * { margin-top: 10px; }
.strook__tekst a { text-decoration: underline; text-underline-offset: 3px; }
.strook .knoppen { margin-top: 20px; }
.strook .knop--secundair { border-color: var(--wit); color: var(--wit); }
.strook .knop--secundair:hover { background: var(--wit); color: var(--donker); }
@media (min-width: 1100px) {
  .strook { grid-template-columns: 1fr auto; align-items: center; }
  .strook__titel, .strook__tekst { grid-column: 1; }
  .strook .knoppen { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* ---------- formulier- en statusindeling ---------- */
.formulier-indeling { display: grid; gap: 48px; align-items: start; }
.formulier__kaart { min-width: 0; padding: clamp(24px, 4vw, 40px); border-radius: var(--r); background: var(--tint-zacht); }
.formulier__titel { margin-bottom: 24px; font-size: var(--f-sub); }
.hulp { padding: 30px; border-radius: var(--r); background: var(--tint); }
.hulp__titel { margin-bottom: 14px; font-size: var(--f-sub); }
.hulp__contact { display: grid; gap: 10px; font-size: var(--f-klein); font-weight: 600; }
.hulp__contact a { display: inline-flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.hulp__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hulp__contact .icoonvak { background: var(--wit); }
.hulp__tijden, .hulp__tekst { margin-top: 14px; font-size: var(--f-klein); color: var(--inkt-70); }
.hulp__tekst a { text-decoration: underline; }
.status { max-width: var(--lees); }
.status .hulp { margin-top: 40px; }
.status > .hulp:first-child { margin-top: 0; }
.status__kop { margin-bottom: 28px; }
.status__stappen { counter-reset: status; }
.status__stappen li { position: relative; padding: 0 0 24px 54px; counter-increment: status; }
.status__stappen li::before {
  content: counter(status);
  position: absolute;
  top: -3px;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-rond);
  background: var(--tint-sterk);
  font-size: var(--f-klein);
  font-weight: 700;
}
.status__stappen li > * + * { margin-top: 4px; }
.status .knoppen { margin-top: 12px; }
.status > .knoppen:first-child { margin-top: 0; }
.status__vertaling { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--lijn); }
.status__intro { margin: 14px 0 0; font-size: var(--f-sub); line-height: 1.5; }
.status__intro > * + * { margin-top: 12px; }
@media (min-width: 1100px) {
  .formulier-indeling { grid-template-columns: minmax(0, 1fr) 340px; }
  /* Het contactblok schuift mee; 100px laat ruimte voor de kopbalk als die terugkomt. */
  .formulier-indeling > .hulp { position: sticky; top: 100px; align-self: start; }
}

/* ---------- formuliervelden ---------- */
.formulier__velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gat); }
.veld { grid-column: span 2; min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 768px) {
  .veld--half { grid-column: span 1; }
}
.formulier__kop { grid-column: span 2; margin-top: 12px; font-size: var(--f-sub); line-height: 1.25; }
.formulier__kop:first-child { margin-top: 0; }
.formulier__hulp, .veld__hulp { grid-column: span 2; margin-bottom: 8px; font-size: var(--f-klein); color: var(--inkt-70); }
.veld__label { display: inline-block; margin-bottom: 8px; padding: 0; font-size: var(--f-klein); font-weight: 600; line-height: 1.3; }
.verplicht { color: var(--fout); }
.formulier__uitleg { margin-bottom: 20px; font-size: var(--f-klein); color: var(--inkt-70); }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Een veld of melding waar de focus heen springt, blijft onder de kopbalk zichtbaar. */
.veld, .formulier__melding { scroll-margin-top: 130px; }
/* De rand van een invoerveld is altijd zichtbaar: --rand-veld haalt 3:1 op wit en op elke tint. */
.veld input:not([type="checkbox"]):not([type="radio"]), .veld textarea, .veld select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--rand-veld);
  border-radius: var(--r-klein);
  background: var(--wit);
  color: var(--inkt);
  font: inherit;
  font-size: var(--f-tekst);
  line-height: 1.3;
}
.veld input::placeholder, .veld textarea::placeholder { color: var(--inkt-70); opacity: 1; }
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: 2px solid var(--primair); outline-offset: 1px; }
.veld textarea { min-height: 140px; resize: vertical; }
.veld select {
  appearance: none;
  padding-right: 48px;
  background-image: linear-gradient(45deg, transparent 50%, var(--inkt) 50%), linear-gradient(135deg, var(--inkt) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.veld input[type="file"] { padding: 10px 12px; font-size: var(--f-klein); }
/* iOS toont een leeg datumveld lager en de datum gecentreerd. */
.veld input[type="date"] { min-height: calc(1.3em + 28px); appearance: none; text-align: left; }
.veld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.veld--fout input:not([type="checkbox"]):not([type="radio"]), .veld--fout textarea, .veld--fout select { border-color: var(--fout); }
.veld__fout { margin-top: 8px; font-size: var(--f-klein); line-height: 1.4; color: var(--fout); }

/* Zoekbare keuzelijst (keuzelijst.js): een tekstvak met een pijl, de opties in een blok eronder. */
.keuzelijst { position: relative; }
.keuzelijst::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--inkt);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: transform var(--t-snel);
}
.keuzelijst.is-open::after { transform: rotate(180deg); }
.veld .keuzelijst > input.keuzelijst__invoer { padding-right: 48px; text-overflow: ellipsis; }
.keuzelijst__lijst, .keuzelijst__geen {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 15;
  border: 1px solid var(--rand-veld);
  border-radius: var(--r-klein);
  background: var(--wit);
}
.keuzelijst__lijst { max-height: min(320px, 50vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.keuzelijst__optie { padding: 10px 12px; border-radius: var(--r-klein); font-size: var(--f-klein); line-height: 1.3; cursor: pointer; }
.keuzelijst__optie:hover { background: var(--tint-zacht); }
.keuzelijst__optie.is-actief { background: var(--tint); }
.keuzelijst__optie[aria-selected="true"] { font-weight: 600; }
.keuzelijst__geen { padding: 14px 16px; font-size: var(--f-klein); color: var(--inkt-70); }

.veld--groep .veld__label { margin-bottom: 12px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.keuzes--onder-elkaar, .veld--groep.veld--half .keuzes { flex-direction: column; gap: 12px; }
.vinkje { display: flex; align-items: flex-start; gap: 12px; font-size: var(--f-klein); line-height: 1.45; cursor: pointer; }
.vinkje input {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1px solid var(--rand-veld);
  border-radius: calc(var(--r-klein) / 2);
  background: var(--wit);
  appearance: none;
  cursor: pointer;
}
.vinkje input[type="radio"] { border-radius: var(--r-rond); }
.vinkje input:checked { border-color: var(--primair-hover); background: var(--primair-hover); }
.vinkje input:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--wit);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vinkje input[type="radio"]:checked::after { inset: 5px; border-radius: var(--r-rond); mask: none; }
.vinkje input:focus-visible { outline: 2px solid var(--primair); outline-offset: 2px; }
.vinkje a { color: var(--primair-hover); text-decoration: underline; }
.veld--fout .vinkje input { border-color: var(--fout); }

.formulier__honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__melding { margin-bottom: 24px; padding: 14px 18px; border-left: 3px solid var(--fout); border-radius: var(--r-klein); background: var(--wit); color: var(--fout); font-size: var(--f-klein); }
.formulier__melding:focus { outline: 2px solid var(--fout); outline-offset: 2px; }
.formulier__melding-titel { font-weight: 600; }
.formulier__foutlijst { margin-top: 8px; padding-left: 20px; list-style: disc; }
.formulier__foutlijst li + li { margin-top: 4px; }
.formulier__foutlijst a { color: var(--fout); text-decoration: underline; }
.formulier__voet { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.formulier__voet .knop { flex: none; }
.formulier__privacy { font-size: var(--f-klein); color: var(--inkt-70); }
.formulier__privacy a { color: var(--primair-hover); text-decoration: underline; }
.htmx-request .knop--groot { opacity: 0.6; pointer-events: none; }
@media (min-width: 768px) {
  .formulier__voet { flex-direction: row; align-items: center; gap: var(--gat); }
}

/* ---------- afspraak maken (boekingsblok met TIMIFY-widget) ---------- */
/* De stappen onder elkaar in de formulierkaart: een klare stap is een regel met vinkbol, keuze en
   "Wijzigen", de actieve stap stelt zijn vraag met keuzekaarten of toont de widget, een latere stap
   is een gedempte regel. Na elke keuze komt de actieve stap gestaffeld binnen. */
.boekstap {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 16px 0;
  /* Hoogte van de vaste kopbalk plus lucht; boeken.js en aanvullen.js schuiven hierop. */
  scroll-margin-top: 100px;
}
.boekstap + .boekstap { border-top: 1px solid var(--lijn); }
.boekstap--actief { align-items: start; padding-bottom: 28px; }
.boekstap:first-child { padding-top: 0; }
.boekstap:last-child { padding-bottom: 0; }
.boekstap__bol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-rond);
  font-size: var(--f-klein);
  font-weight: 700;
}
.boekstap__bol svg { width: 18px; height: 18px; stroke-width: 2.5; }
.boekstap--klaar .boekstap__bol { background: var(--tint-sterk); color: var(--donker); }
.boekstap--actief .boekstap__bol { background: var(--primair-hover); color: var(--wit); }
.boekstap--later .boekstap__bol { border: 1.5px solid var(--rand-veld); color: var(--inkt-70); }
.boekstap--later .boekstap__label { color: var(--inkt-70); }

.boekstap__samenvatting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  min-height: 40px;
  margin: -4px -12px;
  padding: 4px 12px;
  border-radius: var(--r-klein);
  transition: background-color var(--t-snel);
}
.boekstap__samenvatting:hover { background: var(--wit); }
/* Vaste breedte, zodat de keuzes onder elkaar beginnen; een lange stapnaam breekt af. */
.boekstap--klaar .boekstap__label { flex: none; width: 150px; font-size: var(--f-klein); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--inkt-70); }
.boekstap__waarde { font-weight: 600; line-height: 1.3; }
.boekstap__wijzig { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--f-klein); color: var(--primair-hover); }
.boekstap__wijzig svg { width: 16px; height: 16px; }
.boekstap__samenvatting:hover .boekstap__wijzig-tekst { text-decoration: underline; text-underline-offset: 3px; }

.boekstap__teller { margin-top: 6px; font-size: var(--f-klein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primair-hover); }
.boekstap__vraag { margin: 4px 0 24px; font-size: var(--f-sub); }
.boekstap__vraag:focus { outline: none; }
.boekstap__uitleg { margin: -12px 0 24px; font-size: var(--f-klein); line-height: 1.5; color: var(--inkt-70); }
.boekstap__groep { margin: 24px 0 12px; font-family: var(--letter-tekst); font-size: var(--f-klein); font-weight: 700; letter-spacing: 0; }
.boekstap__vraag + .boekstap__groep { margin-top: 0; }

.keuzekaarten { display: grid; gap: 14px; }
@media (min-width: 768px) {
  .keuzekaarten--2, .keuzekaarten--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .keuzekaarten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.keuzekaart {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 18px 44px 18px 18px;
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  background: var(--wit);
  transition: border-color var(--t-snel), background-color var(--t-snel);
}
@media (min-width: 768px) {
  /* Gestapeld staat de tekst onder het icoon, dus hoeft hij niet om het rondje heen. */
  .keuzekaarten--3 .keuzekaart { flex-direction: column; padding-right: 18px; }
}
.keuzekaart:hover { border-color: var(--primair); }
/* htmx-request: de aangeklikte kaart kleurt meteen, nog voor de volgende stap er is. */
.keuzekaart[aria-current="true"], .keuzekaart.htmx-request { border-color: var(--primair); outline: 1px solid var(--primair); outline-offset: -2px; background: var(--tint); }
.keuzekaart__icoon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--r-klein); background: var(--tint-sterk); color: var(--donker); }
.keuzekaart__icoon svg { width: 20px; height: 20px; }
.keuzekaart__tekst { display: grid; gap: 2px; min-width: 0; }
.keuzekaart__titel { font-size: var(--f-klein); font-weight: 700; line-height: 1.35; }
.keuzekaart__regel { font-size: var(--f-klein); line-height: 1.4; color: var(--inkt-70); white-space: pre-line; }
.keuzekaart__radio {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--rand-veld);
  border-radius: var(--r-rond);
  background: var(--wit);
}
.keuzekaart__radio svg { width: 12px; height: 12px; stroke-width: 3.5; opacity: 0; }
.keuzekaart[aria-current="true"] .keuzekaart__radio, .keuzekaart.htmx-request .keuzekaart__radio { border-color: var(--primair-hover); background: var(--primair-hover); color: var(--wit); }
.keuzekaart[aria-current="true"] .keuzekaart__radio svg, .keuzekaart.htmx-request .keuzekaart__radio svg { opacity: 1; }

/* De keuzelijst met bedrijfsnummers onder de kaarten van de klantstap. */
.boekcontract { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: 24px; }
.boekcontract .veld { flex: 1 1 240px; }

/* De widget, met de lader erover tot TIMIFY zich meldt en de paspoortbanner erboven zodra de
   widget om de persoonsgegevens vraagt (boeken.js). */
.boekwidget { scroll-margin-top: 100px; }
.boekwidget__paspoort {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--tint-sterk);
  border-radius: var(--r-klein);
  background: var(--wit);
  font-size: var(--f-klein);
  font-weight: 600;
}
.boekwidget__paspoort[hidden] { display: none; }
.boekwidget__paspoort svg { flex: none; width: 22px; height: 22px; color: var(--primair-hover); }
.boekwidget__kader { position: relative; overflow: hidden; border-radius: var(--r-klein); background: var(--wit); }
/* Beginhoogte gelijk aan MINIMUM in boeken.js; daarna zet dat de hoogte van de stap. */
.boekwidget__frame { display: block; width: 100%; height: 320px; border: 0; }
.boekwidget__lader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
  background: var(--wit);
  transition: opacity var(--t-snel);
}
.boekwidget__lader[hidden] { display: none; }
.boekwidget__lader.is-klaar { opacity: 0; pointer-events: none; }
.boekwidget__lader-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skelet {
  display: block;
  border-radius: var(--r-klein);
  background: linear-gradient(100deg, var(--tint-zacht) 30%, var(--tint) 50%, var(--tint-zacht) 70%) 0 0 / 300% 100%;
  animation: boeking-glans 1.4s linear infinite;
}
.skelet--kop { width: 45%; height: 22px; }
.skelet--kaart { height: 96px; border-radius: var(--r); }
.skelet--veld { height: 46px; }
.skelet--knop { width: 40%; height: 50px; margin-top: 20px; border-radius: var(--r-rond); }
.boekwidget__na { margin-top: 24px; font-size: var(--f-klein); }
.terugval .knoppen { margin-top: 24px; }

@keyframes boeking-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes boeking-glans { from { background-position: 100% 0; } to { background-position: 0 0; } }
.boekstap--actief .boekstap__teller, .boekstap--actief .boekstap__vraag, .boekstap__groep,
.keuzekaarten > li, .boekwidget, .terugval { animation: boeking-in 0.45s ease-out both; }
.keuzekaarten > li, .boekwidget, .terugval { animation-delay: 60ms; }
.keuzekaarten > li:nth-child(2) { animation-delay: 100ms; }
.keuzekaarten > li:nth-child(3) { animation-delay: 140ms; }
.keuzekaarten > li:nth-child(n + 4) { animation-delay: 180ms; }

@media (max-width: 767px) {
  .boekstap { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
  .boekstap__bol { width: 32px; height: 32px; }
  /* Smal scherm: de keuzes nemen ook de kolom van de bol in (32 + 12), anders blijft er te weinig over. */
  .boekstap--actief :is(.keuzekaarten, .boekstap__groep, .boekwidget, .terugval, .boekcontract, .formulier__velden, .aanvulstap__knoppen) { margin-left: -44px; }
  .boekstap--klaar .boekstap__label { width: 100%; min-width: 0; }
  .boekstap__wijzig-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .keuzekaart { padding: 14px 40px 14px 14px; }
}

/* ---------- aanvulformulier (/aanvullen/) ---------- */
.boekingskeuze { display: grid; gap: 10px; margin-bottom: 30px; padding: 18px 22px; border: 1px solid var(--tint-sterk); border-radius: var(--r-klein); background: var(--wit); }
.boekingskeuze__rij { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.boekingskeuze__naam { font-size: var(--f-klein); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.boekingskeuze__waarde { margin: 0; }
.aanvullen__adres { display: block; font-size: var(--f-klein); color: var(--inkt-70); }
@media (min-width: 768px) {
  .aanvullen__afspraak .boekingskeuze__rij { display: grid; grid-template-columns: 170px 1fr; }
}
.aanvullen__formulier > .formulier__melding { margin: 0 0 24px; }
.aanvulvraag__tekst { white-space: pre-line; }
.aanvulvraag--instructie, .aanvulvraag__toelichting { padding: 14px 18px; border-left: 3px solid var(--primair); border-radius: var(--r-klein); background: var(--wit); font-size: var(--f-klein); }
.aanvulvraag__toelichting { margin: 2px 0 16px; }
.aanvulvraag__instructie { margin-bottom: 12px; font-size: var(--f-klein); }
.aanvulvraag__instructie:last-child { margin-bottom: 0; }
.aanvulvraag__instructie--kop { margin-bottom: 8px; font-weight: 600; }
.aanvulvraag__toelichting > * + *, .aanvulvraag__instructie > * + * { margin-top: 8px; }
.aanvulvraag__toelichting ul, .aanvulvraag__instructie ul { padding-left: 22px; list-style: disc; }
.aanvullen__verklaring { margin-top: 24px; }
.aanvulvraag__opnieuw { color: var(--primair-hover); font-weight: 500; }
.aanvullen__annulering { font-size: var(--f-klein); }
.aanvullen__bekend { font-size: var(--f-klein); }

/* Het formulier in de stappen van het boeken. De server zet de beginstand, aanvullen.js wisselt
   daarna: alleen de actieve stap toont zijn velden. */
.aanvulstap .boekstap__samenvatting, .aanvulstap .aanvulstap__later, .aanvulstap .boekstap__inhoud,
.aanvulstap .boekstap__bol svg { display: none; }
.aanvulstap.boekstap--klaar .boekstap__samenvatting { display: flex; }
.aanvulstap.boekstap--klaar .boekstap__bol svg { display: block; }
.aanvulstap.boekstap--klaar .aanvulstap__nummer { display: none; }
.aanvulstap.boekstap--later .aanvulstap__later { display: block; }
.aanvulstap.boekstap--actief .boekstap__inhoud { display: block; }
button.boekstap__samenvatting { width: calc(100% + 24px); text-align: left; }
.aanvulstap .boekstap__waarde { flex: 1 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aanvulstap__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 32px; }
.aanvulstap__knoppen .knop[hidden] { display: none; }
.aanvulstap__vorige { color: var(--primair-hover); }
.aanvulstap__privacy { margin-top: 18px; }
/* backwards, niet both: een animatie die blijft doorwerken maakt een eigen stapellaag, en dan valt
   de open keuzelijst achter de knoppen eronder. */
.aanvulstap.boekstap--actief .formulier__velden, .aanvulstap.boekstap--actief .aanvulstap__knoppen {
  animation: boeking-in 0.45s ease-out 60ms backwards;
}
@media (min-width: 768px) {
  .aanvulstap .boekstap__samenvatting { flex-wrap: nowrap; }
  .aanvulstap.boekstap--klaar .boekstap__label { flex: 0 1 auto; width: auto; min-width: 120px; max-width: 240px; }
  .aanvulstap .boekstap__wijzig { flex: none; }
}
@media (max-width: 767px) {
  .aanvulstap .boekstap__waarde { flex-basis: 0; }
  .aanvulstap__knoppen { flex-direction: column; align-items: stretch; }
  .aanvulstap__vorige { justify-content: center; }
}

/* De bedankpagina met een openstaande aanbetaling: het formulier klaar, de aanbetaling actief. */
.aanvullen__betaling { padding: var(--binnen); border-radius: var(--r); background: var(--tint-zacht); }
.aanvullen__verstuurd:hover { background: none; }
.aanvullen__betaaltekst { margin-bottom: 18px; }
.aanvullen__bedrag { display: flex; align-items: baseline; gap: 16px; }
.aanvullen__bedrag dt { font-size: var(--f-klein); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--inkt-70); }
.aanvullen__bedrag dd { margin: 0; font-family: var(--letter-kop); font-size: var(--f-kop); font-weight: 700; }
.aanvullen__betaald { margin-top: 18px; font-size: var(--f-klein); color: var(--inkt-70); }

/* ---------- voet ---------- */
.voet { padding: 64px 0 40px; background: var(--donker); color: var(--wit); font-size: var(--f-klein); }
.voet--kort { padding: 26px 0; }
.voet__kolommen { display: grid; gap: 40px var(--gat); }
.voet__logo { width: 150px; margin-bottom: 20px; }
.voet__slogan, .voet__klein, .voet__tekst { opacity: 0.85; }
.voet__contact, .voet__links { display: grid; gap: 8px; margin-top: 16px; }
.voet__klein { margin-top: 16px; }
.voet__locaties { display: grid; gap: 14px; }
.voet__locaties a { font-weight: 600; }
.voet__adres { display: block; opacity: 0.85; }
.voet__kop { margin-bottom: 16px; font-size: var(--f-tekst); font-weight: 600; letter-spacing: 0; }
.voet a:hover { text-decoration: underline; text-underline-offset: 3px; }
.voet__tekst > * + * { margin-top: 10px; }
.voet__tekst a { text-decoration: underline; text-underline-offset: 3px; }
.voet__onder { display: flex; flex-direction: column; gap: 24px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--primair-hover); }
.voet__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.voet__partners img { width: auto; height: 48px; padding: 8px 14px; border-radius: var(--r-klein); background: var(--wit); }
.voet__onderlinks { display: flex; flex-wrap: wrap; gap: 8px 20px; opacity: 0.85; }
@media (min-width: 768px) {
  .voet__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet__onder { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1100px) {
  .voet__kolommen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- beweging en print ---------- */
/* Overgenomen uit lenis.css van dezelfde versie als static/js/lenis.min.js. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* zacht-scrollen.js zet .binnenkomen alleen op wat nog onder de vouw staat. */
.binnenkomen {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
  transition-delay: var(--vertraging, 0ms);
}
.binnenkomen.is-binnen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .kop, .voet, .strook, .knoppen, .kop__menuknop { display: none !important; }
}