/* ============================================================
   AItaxes — klei.css · huisstijl "Klei Mint" v3 (aug 2026)
   Gebaseerd op design-tokens.css en Huisstijlgids_AItaxes.pdf
   ============================================================ */

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Variable.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* klei-wereld (letterlijk uit design-tokens.css) */
  --melk: #EDF3EC;
  --room: #FFFFFF;
  --inkt: #25332B;
  /* dof is verdiept t.o.v. de gids (#6E7F74) zodat secundaire tekst op melk én
     room boven 4,5:1 uitkomt: 4,79:1 op melk, 5,40:1 op wit */
  --dof: #5E6E64;
  --accent: #2FA96A;
  --accent-donker: #1F7A4B;
  /* vulling van primaire knoppen (wit erop haalt 5,33:1) met een 25% donkerder
     variant als 3D-schaduw eronder */
  --knop-vul: #1F7A4B;
  --knop-diep: #175C38;
  --perzik: #FFD9BE; --lila: #DCD6F5; --botergeel: #FFE9A8;
  --fout: #A8402A; --fout-zacht: #FBE4DC;

  --font: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, system-ui, sans-serif;

  --radius-kaart: 28px; --radius-knop: 999px;
  --klei-schaduw: 0 10px 0 rgba(37, 51, 43, 0.08);
  --knop-schaduw: 0 6px 0 var(--knop-diep);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  font-family: var(--font);
  background: var(--melk);
  color: var(--inkt);
  font-weight: 600;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--knop-vul); color: #fff; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 26px; }
.wrap--smal { max-width: 780px; }

h1, h2, h3, h4 {
  line-height: 1.12; letter-spacing: -0.01em;
  /* lange samenstellingen (tegenbewijsregeling, inkomstenbelasting) mogen breken op smalle schermen */
  overflow-wrap: break-word; hyphens: auto;
}
h1 { font-size: clamp(38px, 5.6vw, 62px); font-weight: 900; }
h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 900; }
h3 { font-size: 20px; font-weight: 800; }
.accentpunt { color: var(--accent); }

p { font-size: 16px; }
.dof { color: var(--dof); }
a { color: var(--accent-donker); }
strong, b { font-weight: 800; }
.tab-cijfers { font-variant-numeric: tabular-nums; }

/* skiplink */
.skiplink {
  position: absolute; left: -9999px; top: 12px; z-index: 200;
  background: var(--room); color: var(--inkt); font-weight: 800;
  padding: 12px 22px; border-radius: var(--radius-knop);
  box-shadow: var(--klei-schaduw); text-decoration: none;
}
.skiplink:focus { left: 12px; }

/* focusring op accent-donker: als niet-tekst-indicator moet hij 3:1 halen tegen
   melk én room — #2FA96A bleef daar met 2,66:1 onder */
:focus-visible { outline: 2px solid var(--knop-vul); outline-offset: 3px; border-radius: 8px; }

/* ============ navigatie — sticky, transformeert bij scroll ============ */
.nav-anker { position: sticky; top: 0; z-index: 100; padding-top: 14px; }
.nav {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  max-width: 1120px; margin: 0 auto; padding: 14px 26px;
  border-radius: var(--radius-knop);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.klei {
  background: var(--room);
  box-shadow: 0 6px 0 rgba(37, 51, 43, .08);
  padding: 10px 22px;
}
/* padding maakt het raakvlak 44px hoog zonder de balk hoger te maken */
.nav-merk { display: inline-flex; align-items: center; padding: 7px 0; }
.nav-merk img { height: 30px; width: auto; display: block; }
.nav-links { display: flex; gap: 8px; align-items: center; }
.nav-links a {
  text-decoration: none; color: var(--inkt); font-size: 15px; font-weight: 700;
  border-radius: var(--radius-knop); padding: 9px 16px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.nav-links a:hover { background: var(--room); box-shadow: 0 4px 0 rgba(37, 51, 43, .1); transform: translateY(-2px); }
.nav.klei .nav-links a:hover { background: var(--melk); box-shadow: 0 4px 0 rgba(37, 51, 43, .07); }
.nav-links a[aria-current="page"] { background: var(--room); box-shadow: 0 4px 0 rgba(37, 51, 43, .1); }
.nav.klei .nav-links a[aria-current="page"] { background: var(--melk); box-shadow: inset 0 2px 0 rgba(37,51,43,.06); }
.nav-links a.knop, .nav-links a.knop:hover { background: var(--knop-vul); color: #fff; }

.nav-hamburger {
  display: none; border: 0; background: var(--room); color: var(--inkt);
  font: inherit; font-weight: 800; font-size: 15px;
  border-radius: var(--radius-knop); padding: 10px 18px;
  box-shadow: 0 4px 0 rgba(37, 51, 43, .12); cursor: pointer;
}
.nav-mobiel {
  display: none; position: absolute; left: 26px; right: 26px; top: calc(100% + 10px);
  background: var(--room); border-radius: var(--radius-kaart);
  box-shadow: var(--klei-schaduw); padding: 14px;
}
.nav-mobiel.open { display: block; }
.nav-mobiel a {
  display: block; text-decoration: none; color: var(--inkt);
  font-weight: 800; font-size: 16px; padding: 12px 16px; border-radius: 16px;
}
.nav-mobiel a:hover, .nav-mobiel a[aria-current="page"] { background: var(--melk); }
.nav-mobiel a.knop { background: var(--knop-vul); color: #fff; text-align: center; margin-top: 6px; }

/* omslagpunt naar het hamburgermenu: met "Over ons" erbij past de balk pas
   vanaf ongeveer 980px op één regel */
@media (max-width: 979px) {
  .nav-links { display: none; }
  .nav-hamburger { display: inline-block; }
  .nav-anker { position: relative; }
}

/* ============ kruimelpad — bescheiden, boven de inhoud ============ */
.kruimels { padding: 16px 0 0; font-size: 13.5px; font-weight: 700; }
.kruimels ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.kruimels li { display: flex; align-items: center; gap: 8px; color: var(--dof); min-width: 0; }
.kruimels li + li::before { content: "›"; color: var(--dof); opacity: .55; font-weight: 800; }
.kruimels a {
  color: var(--dof); text-decoration: none; border-radius: 8px;
  /* raakvlak van 44px zonder de balk optisch hoger te maken */
  padding: 12px 6px; margin: -12px -6px;
}
.kruimels a:hover { color: var(--accent-donker); text-decoration: underline; text-underline-offset: 3px; }
.kruimels [aria-current="page"] { color: var(--inkt); }

/* ============ knoppen — drukbaar ============ */
.knop {
  display: inline-block; text-decoration: none; border: 0; cursor: pointer;
  background: var(--knop-vul); color: #fff; font-family: var(--font);
  font-size: 17px; font-weight: 800; border-radius: var(--radius-knop);
  padding: 16px 30px; box-shadow: var(--knop-schaduw);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* hover blijft bewust klein: alleen de knop zakt 2px in, de kleur verandert niet */
.knop:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--knop-diep); }
.knop:active { transform: translateY(6px); box-shadow: 0 0 0 var(--knop-diep); }
.knop--klein { font-size: 15px; padding: 11px 22px; box-shadow: 0 5px 0 var(--knop-diep); }
.knop--klein:hover { box-shadow: 0 3px 0 var(--knop-diep); }
.knop--klein:active { transform: translateY(5px); box-shadow: 0 0 0 var(--knop-diep); }
.knop--wit {
  background: var(--room); color: var(--inkt);
  box-shadow: 0 6px 0 rgba(37, 51, 43, .14);
}
.knop--wit:hover { box-shadow: 0 4px 0 rgba(37, 51, 43, .14); }
.knop--wit:active { box-shadow: 0 0 0 rgba(37, 51, 43, .14); }
.knop--op-accent { background: #fff; color: var(--accent-donker); box-shadow: 0 6px 0 rgba(0, 0, 0, .22); }
.knop--op-accent:hover { box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
.knop--op-accent:active { box-shadow: 0 0 0 rgba(0, 0, 0, .22); }
/* deze knop staat als enige direct op het accentvlak: daar zou een groene ring
   wegvallen tegen de ondergrond, dus wit (5,32:1 op #1F7A4B) */
.knop--op-accent:focus-visible { outline-color: #fff; }

/* pil-labels */
.pil {
  display: inline-block; background: var(--room); border-radius: var(--radius-knop);
  padding: 7px 16px; font-size: 13.5px; font-weight: 800;
  box-shadow: 0 4px 0 rgba(37, 51, 43, .08);
}
/* chip met witte tekst: accent-donker, anders haalt 13,5px geen AA */
.pil--accent { background: var(--knop-vul); color: #fff; box-shadow: 0 4px 0 var(--knop-diep); }
.pil--botergeel { background: var(--botergeel); }
.pil--lila { background: var(--lila); }
.pil--perzik { background: var(--perzik); }
.pil--concept { background: var(--botergeel); }

/* ============ hero ============ */
.hero { text-align: center; padding: 70px 0 44px; position: relative; }
.hero p:has(> .knop) { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero p.intro {
  font-size: 19px; color: var(--dof); max-width: 32em;
  margin: 20px auto 30px; line-height: 1.6;
}
.hero .sub-onder { margin-top: 14px; font-size: 14px; color: var(--dof); }
.hero > * { position: relative; z-index: 1; }
.zon {
  position: absolute; top: 24px; right: 6%; width: 88px; height: 88px; border-radius: 50%;
  background: var(--botergeel); box-shadow: inset -8px -10px 0 rgba(37, 51, 43, .08);
  pointer-events: none; z-index: 0;
}
.wolk {
  position: absolute; top: 108px; left: 4%; width: 120px; height: 44px; border-radius: 999px;
  background: var(--room); box-shadow: inset -6px -8px 0 rgba(37, 51, 43, .05);
  pointer-events: none; z-index: 0;
}
@media (max-width: 700px) { .zon { width: 62px; height: 62px; right: 4%; } .wolk { width: 90px; height: 34px; top: 84px; } }

.ballon {
  display: inline-block; background: var(--room); border-radius: 24px; padding: 18px 26px;
  box-shadow: 0 8px 0 rgba(37, 51, 43, .10); margin-top: 40px;
  font-weight: 700; font-size: 15.5px;
}
.ballon i { font-style: normal; color: var(--accent); font-weight: 800; }

/* ============ secties & kaarten ============ */
section { padding: 56px 0; }
.sectiekop { text-align: center; margin-bottom: 36px; }
.sectiekop .sub { color: var(--dof); font-weight: 600; margin-top: 8px; max-width: 40em; margin-left: auto; margin-right: auto; }

.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kaarten--2 { grid-template-columns: repeat(2, 1fr); }
.kaarten--4 { grid-template-columns: repeat(4, 1fr); }
.kaart {
  position: relative;
  border-radius: var(--radius-kaart); padding: 30px 26px; background: var(--room);
  box-shadow: var(--klei-schaduw), inset 0 2px 0 rgba(255, 255, 255, .9);
  transition: transform .18s ease;
}
a.kaart { display: block; text-decoration: none; color: var(--inkt); }
.kaart:hover { transform: translateY(-4px) rotate(-.5deg); }
.kaart--stil:hover { transform: none; }
.kaart h3 { margin-bottom: 8px; }
.kaart p { font-size: 15px; color: var(--dof); line-height: 1.6; }
.kaart .kaart-prijs { margin-top: 14px; font-size: 15px; color: var(--inkt); font-weight: 800; }
.kaart .hoek-pil { position: absolute; top: 20px; right: 20px; }
/* kaarten zonder pastelvorm: kop mag niet onder de hoek-pil schuiven */
.kaart .hoek-pil + h3 { margin-top: 34px; }

.vorm {
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: 18px;
  box-shadow: inset -5px -6px 0 rgba(37, 51, 43, .10);
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.kaart:hover .vorm { transform: rotate(-6deg) scale(1.08); }
.vorm--perzik { background: var(--perzik); border-radius: 50%; }
.vorm--lila { background: var(--lila); }
.vorm--botergeel { background: var(--botergeel); border-radius: 50% 18px 50% 18px; }

@media (max-width: 980px) { .kaarten--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .kaarten, .kaarten--2, .kaarten--4 { grid-template-columns: 1fr; } }

/* lijstje met accent-vinkjes */
.vinklijst { list-style: none; }
.vinklijst li { position: relative; padding-left: 34px; margin-bottom: 12px; font-size: 15.5px; }
.vinklijst li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%; background: var(--knop-vul); color: #fff;
  font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 var(--knop-diep);
}
/* twee kolommen op ruime schermen, één zodra het krap wordt (column-width wint) */
.vinklijst--twee { columns: 2 15em; column-gap: 40px; }
.vinklijst--twee li { break-inside: avoid; }

.kruislijst { list-style: none; }
.kruislijst li { position: relative; padding-left: 34px; margin-bottom: 12px; font-size: 15.5px; color: var(--dof); }
.kruislijst li::before {
  content: "—"; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%; background: var(--room); color: var(--dof);
  font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(37, 51, 43, .1);
}

/* ============ stappen ============ */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stap {
  background: var(--room); border-radius: var(--radius-kaart); padding: 28px 24px;
  text-align: center; box-shadow: var(--klei-schaduw);
}
.stap .bol {
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 900; font-size: 22px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; box-shadow: 0 5px 0 var(--accent-donker);
}
.stap b { font-size: 17px; font-weight: 800; display: block; margin-bottom: 6px; }
.stap p { font-size: 14.5px; color: var(--dof); line-height: 1.55; }
.stappen--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .stappen--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .stappen, .stappen--4 { grid-template-columns: 1fr; } }

/* ============ zaakstraat — verticale dossierreis ============ */
.reis { position: relative; max-width: 720px; margin: 0 auto; padding-left: 66px; }
.reis::before {
  content: ""; position: absolute; left: 25px; top: 8px; bottom: 8px; width: 6px;
  border-radius: 999px; background: var(--room); box-shadow: inset 0 2px 0 rgba(37, 51, 43, .06);
}
.reis .lijn-vul {
  position: absolute; left: 25px; top: 8px; width: 6px; height: 0;
  border-radius: 999px; background: var(--accent);
  transition: height .4s ease;
}
.reis-stap { position: relative; margin-bottom: 26px; }
.reis-stap .bol {
  position: absolute; left: -66px; top: 4px;
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff;
  font-weight: 900; font-size: 20px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 0 var(--accent-donker);
}
.reis-stap .kaart { padding: 24px 26px; }
.reis-stap .kaart p { margin-top: 4px; }
.reis-stap .wie { display: inline-block; margin-top: 12px; font-size: 12.5px; }

/* ============ tijdlijn (deadline box 3) ============ */
.tijdlijn { position: relative; padding-left: 44px; max-width: 720px; margin: 0 auto; }
.tijdlijn::before {
  content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 6px;
  border-radius: 999px; background: var(--room); box-shadow: inset 0 2px 0 rgba(37, 51, 43, .06);
}
.mijlpaal { position: relative; padding-bottom: 26px; }
.mijlpaal::before {
  content: ""; position: absolute; left: -40px; top: 4px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--room); border: 4px solid var(--accent);
  box-shadow: 0 3px 0 rgba(37, 51, 43, .1);
}
.mijlpaal--nu::before { background: var(--accent); }
.mijlpaal--deadline::before { border-color: var(--accent-donker); background: var(--botergeel); }
.mijlpaal .wanneer { font-size: 13px; font-weight: 800; color: var(--accent-donker); }
.mijlpaal b { display: block; font-size: 16.5px; font-weight: 800; margin: 2px 0 2px; }
.mijlpaal p { font-size: 14.5px; color: var(--dof); }

/* aftelbanner */
.aftel {
  background: var(--room); border-radius: var(--radius-kaart); padding: 26px 30px;
  box-shadow: var(--klei-schaduw); display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap; justify-content: center; text-align: center;
}
.aftel .dagen {
  font-size: 44px; font-weight: 900; color: var(--accent-donker);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.aftel .toel { max-width: 30em; font-size: 15px; color: var(--dof); text-align: left; }
@media (max-width: 640px) { .aftel .toel { text-align: center; } }

/* ============ forfait vs. werkelijk — uitleg-visual ============ */
.staafuitleg { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: end; max-width: 720px; margin: 0 auto; }
.staafkolom { text-align: center; }
.staaf {
  border-radius: 22px 22px 16px 16px; margin: 0 auto 14px; width: min(180px, 70%);
  box-shadow: var(--klei-schaduw), inset 0 3px 0 rgba(255, 255, 255, .5);
  transform-origin: bottom; position: relative;
}
.staaf--forfait { height: 220px; background: var(--perzik); }
/* de staaf draagt een klein wit label, dus ook hier accent-donker */
.staaf--werkelijk { height: 110px; background: var(--knop-vul); }
.staaf .staaf-label {
  position: absolute; top: 14px; left: 0; right: 0; font-size: 13px; font-weight: 900;
}
.staaf--werkelijk .staaf-label { color: #fff; }
.staafkolom b { display: block; font-size: 16px; }
.staafkolom p { font-size: 14px; color: var(--dof); max-width: 22em; margin: 4px auto 0; }
.staafuitleg + .staaf-voetnoot { text-align: center; font-size: 13.5px; color: var(--dof); max-width: 44em; margin: 26px auto 0; }

/* ============ prijsvlak (accent) ============ */
/* accentvlakken dragen ook lopende tekst, dus staan ze op accent-donker:
   wit haalt daar 5,32:1 in plaats van 3,00:1 op #2FA96A */
.prijsvlak {
  background: var(--knop-vul); border-radius: 36px; padding: 52px 40px; text-align: center;
  color: #fff; box-shadow: 0 12px 0 var(--knop-diep);
}
.prijsvlak h2 { color: #fff; }
.prijsvlak p { color: #fff; font-weight: 600; max-width: 36em; margin: 12px auto 28px; }
/* drie gelijke kolommen met een gecentreerde max-breedte, zodat het midden van de
   rij precies onder het midden van de knop en van het vlak ligt en er niets uitsteekt */
.vinkjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px auto 0; max-width: 860px; }
.vinkjes span {
  /* inkt-waas i.p.v. wit-waas: witte tekst haalt zo AA-contrast op het accentvlak */
  background: rgba(37, 51, 43, .30); color: #fff; border-radius: var(--radius-knop);
  padding: 8px 18px; font-size: 13.5px; font-weight: 700; text-align: center;
  /* de kolommen zijn even hoog; zo staat ook een chip van twee regels netjes gecentreerd */
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 760px) { .vinkjes { grid-template-columns: 1fr; max-width: 420px; } }

/* ============ prijstabellen ============ */
.prijskaart { display: flex; flex-direction: column; }
.prijskaart .bedrag { font-size: 38px; font-weight: 900; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.prijskaart .bedrag small { font-size: 16px; font-weight: 700; color: var(--dof); }
.prijskaart .btw { font-size: 12.5px; color: var(--dof); margin-bottom: 14px; }
.prijskaart .vinklijst { margin-top: 6px; margin-bottom: 18px; }
.prijskaart .vinklijst li { font-size: 14.5px; margin-bottom: 9px; }
.prijskaart .knop { margin-top: auto; align-self: flex-start; }
.prijskaart--uitgelicht { outline: 3px solid var(--accent); outline-offset: -3px; }
/* uitklapbare pakketuitleg in een prijskaart: exact het faq-patroon (zie hieronder),
   alleen wisselen vlak en plusbol van kleur, omdat wit-op-wit niet te zien zou zijn */
.prijskaart .faq { margin: 14px 0 18px; }
.prijskaart .faq details { background: var(--melk); }
.prijskaart .faq summary::after { background: var(--room); }
.prijskaart .faq .antwoord > :last-child { margin-bottom: 0; }

/* ============ faq ============ */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.faq details {
  background: var(--room); border-radius: 22px; box-shadow: 0 6px 0 rgba(37, 51, 43, .07);
  padding: 0; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; position: relative;
  font-weight: 800; font-size: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--melk); color: var(--accent-donker);
  font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.faq details[open] summary::after { content: "–"; transform: translateY(-50%) rotate(180deg); }
.faq .antwoord { padding: 0 24px 22px; color: var(--dof); font-size: 15px; }
.faq .antwoord p + p { margin-top: 10px; }

/* ============ artikelen / lange tekst ============ */
.artikel { max-width: 720px; margin: 0 auto; }
.artikel-kop { text-align: center; padding: 56px 0 8px; }
.artikel-kop .meta { margin-top: 14px; }
.artikel h2 { font-size: clamp(22px, 3vw, 28px); text-align: left; margin: 38px 0 12px; }
.artikel h3 { margin: 28px 0 8px; }
.artikel p { margin-bottom: 14px; font-size: 16px; }
.artikel ul, .artikel ol { margin: 0 0 14px 22px; }
.artikel li { margin-bottom: 8px; font-size: 15.5px; }
.artikel .kader {
  background: var(--room); border-radius: 22px; padding: 22px 26px; margin: 22px 0;
  box-shadow: 0 6px 0 rgba(37, 51, 43, .07);
}
.artikel .kader p:last-child { margin-bottom: 0; }
.artikel table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.artikel th, .artikel td { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--melk); }
.artikel th { font-weight: 800; }
.tabel-scroll { overflow-x: auto; background: var(--room); border-radius: 22px; padding: 8px 16px; box-shadow: 0 6px 0 rgba(37, 51, 43, .07); }

.concept-balk {
  background: var(--botergeel); border-radius: 18px; padding: 14px 20px; margin: 20px 0;
  font-size: 14px; box-shadow: 0 5px 0 rgba(37, 51, 43, .08);
}

/* ============ footer ============ */
footer.site-voet { padding: 64px 0 44px; }
.voet-kaart {
  background: var(--room); border-radius: var(--radius-kaart); padding: 40px;
  box-shadow: var(--klei-schaduw);
}
.voet-kolommen { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.voet-kolommen h4 { font-size: 14px; font-weight: 900; margin-bottom: 12px; }
.voet-kolommen ul { list-style: none; }
.voet-kolommen li { margin-bottom: 8px; }
.voet-kolommen a { text-decoration: none; color: var(--dof); font-size: 14px; font-weight: 700; }
.voet-kolommen a:hover { color: var(--accent-donker); }
.voet-merk img { height: 28px; width: auto; margin-bottom: 12px; }
.voet-merk p { font-size: 13.5px; color: var(--dof); max-width: 24em; }
.voet-onder {
  margin-top: 30px; padding-top: 22px; border-top: 2px solid var(--melk);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--dof);
}
@media (max-width: 820px) { .voet-kolommen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .voet-kolommen { grid-template-columns: 1fr; } }
/* op mobiel ruimere raakvlakken (44px) voor de voetlinks */
@media (max-width: 767px) {
  .voet-kolommen li { margin-bottom: 0; }
  .voet-kolommen a { display: inline-block; padding: 11px 0; }
  .voet-onder a { display: inline-block; padding: 12px 0; }
}

/* ============ beweging ============ */
.onthul { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .intro, .hero .knop, .hero .ballon, .hero .pil, .hero .sub-onder {
    animation: rijs .7s cubic-bezier(.2, .9, .3, 1) backwards;
  }
  .hero .intro { animation-delay: .12s; }
  .hero .knop { animation-delay: .22s; }
  .hero .sub-onder { animation-delay: .28s; }
  .hero .ballon { animation-delay: .34s; }
  @keyframes rijs { from { opacity: 0; transform: translateY(22px); } }

  .zon { animation: zweef 7s ease-in-out infinite; }
  .wolk { animation: drijf 11s ease-in-out infinite; }
  @keyframes zweef { 50% { transform: translateY(-12px); } }
  @keyframes drijf { 50% { transform: translateX(16px) translateY(-6px); } }
  .hero .ballon { animation: rijs .7s cubic-bezier(.2, .9, .3, 1) .34s backwards, bob 4s ease-in-out 1.2s infinite; }
  @keyframes bob { 50% { transform: translateY(-5px); } }

  .js .onthul { opacity: 0; }
  .js .onthul.zichtbaar { opacity: 1; animation: rijs .65s cubic-bezier(.2, .9, .3, 1) backwards; }
  .js .onthul.zichtbaar[data-vertraging="1"] { animation-delay: .1s; }
  .js .onthul.zichtbaar[data-vertraging="2"] { animation-delay: .2s; }
  .js .onthul.zichtbaar[data-vertraging="3"] { animation-delay: .3s; }
  .js .stap.zichtbaar .bol, .js .reis-stap.zichtbaar .bol { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) .25s backwards; }
  @keyframes pop { from { transform: scale(0); } }
  .js .staaf { transform: scaleY(0); transition: transform .65s cubic-bezier(.2, .9, .3, 1); }
  .js .zichtbaar .staaf { transform: scaleY(1); }
  .js .zichtbaar .staaf--werkelijk { transition-delay: .18s; }
  .js .prijsvlak.zichtbaar .vinkjes span { animation: rijs .5s ease backwards .15s; }
  .js .prijsvlak.zichtbaar .vinkjes span:nth-child(2) { animation-delay: .27s; }
  .js .prijsvlak.zichtbaar .vinkjes span:nth-child(3) { animation-delay: .39s; }
  .js .prijsvlak.zichtbaar .vinkjes span:nth-child(4) { animation-delay: .51s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reis .lijn-vul { transition: none; }
}

/* ============================================================
   formulieren — klei-velden, drukbare knop, duidelijke staten
   ============================================================ */
.formulier { display: grid; gap: 18px; }
.formulier--kolommen { grid-template-columns: 1fr 1fr; }
.formulier .veld--breed { grid-column: 1 / -1; }
@media (max-width: 640px) { .formulier--kolommen { grid-template-columns: 1fr; } }

.veld { display: block; }
.veld > label {
  display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 7px;
}
.veld .hint { display: block; font-size: 13px; font-weight: 600; color: var(--dof); margin-top: -3px; margin-bottom: 7px; }
.veld .optioneel { font-weight: 700; color: var(--dof); }

.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld select,
.veld textarea {
  width: 100%; display: block; font-family: var(--font); font-size: 16px; font-weight: 600;
  color: var(--inkt); background: var(--melk); border: 2px solid transparent;
  border-radius: 18px; padding: 14px 18px; line-height: 1.5;
  box-shadow: inset 0 2px 0 rgba(37, 51, 43, .06);
  transition: border-color .15s ease, background .15s ease;
  -webkit-appearance: none; appearance: none;
}
.veld textarea { min-height: 148px; resize: vertical; }
.veld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235E6E64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px;
  padding-right: 46px; cursor: pointer;
}
.veld input::placeholder, .veld textarea::placeholder { color: var(--dof); font-weight: 600; opacity: .75; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--knop-vul); background: var(--room); }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { outline: 2px solid var(--knop-vul); outline-offset: 2px; }

.veld--fout input, .veld--fout select, .veld--fout textarea { border-color: var(--fout); background: var(--fout-zacht); }
.veld-fout {
  display: none; margin-top: 7px; font-size: 13.5px; font-weight: 800; color: var(--fout);
}
.veld--fout .veld-fout { display: block; }

/* honeypot — verborgen voor mensen, zichtbaar voor botjes */
.honing {
  position: absolute !important; left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* laadstatus op de pill-knop */
.knop[data-bezig] { opacity: .85; cursor: progress; pointer-events: none; }
.knop[data-bezig]::before {
  content: ""; display: inline-block; vertical-align: -2px; margin-right: 10px;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: draai .7s linear infinite;
}
.knop--wit[data-bezig]::before, .knop--op-accent[data-bezig]::before {
  border-color: rgba(37, 51, 43, .25); border-top-color: var(--accent-donker);
}
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .knop[data-bezig]::before { animation-duration: 2s; } }

.form-voet { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-voet .klein { color: var(--dof); max-width: 30em; }

/* meldingen bij het formulier */
.form-melding {
  border-radius: 22px; padding: 16px 22px; font-size: 14.5px; font-weight: 700;
  box-shadow: 0 5px 0 rgba(37, 51, 43, .08);
}
.form-melding[hidden] { display: none; }
.form-melding--fout { background: var(--fout-zacht); color: var(--fout); }
.form-melding--fout a { color: var(--fout); }

/* succes-staat in Klei Mint */
.form-klaar {
  text-align: center; padding: 34px 26px;
  background: var(--melk); border-radius: var(--radius-kaart);
  box-shadow: inset 0 2px 0 rgba(37, 51, 43, .05);
}
.form-klaar .vink {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--accent); color: #fff; font-size: 30px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 var(--accent-donker);
}
.form-klaar h3 { margin-bottom: 8px; }
.form-klaar p { font-size: 15px; color: var(--dof); max-width: 34em; margin: 0 auto; }
.form-klaar p + p { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .form-klaar .vink { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) backwards; }
}

/* ============ wachtlijst ============ */
.wachtvlak {
  background: var(--knop-vul); border-radius: 36px; padding: 46px 40px;
  color: #fff; box-shadow: 0 12px 0 var(--knop-diep);
}
.wachtvlak h2 { color: #fff; text-align: center; }
.wachtvlak > .wacht-intro {
  color: #fff; font-weight: 600; max-width: 38em;
  margin: 12px auto 30px; text-align: center;
}
.wachtvlak .wacht-kaart {
  background: var(--room); border-radius: var(--radius-kaart); padding: 32px 30px;
  max-width: 620px; margin: 0 auto; color: var(--inkt);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9);
}
.wachtvlak .vinkjes { margin-top: 26px; }
@media (max-width: 560px) { .wachtvlak { padding: 34px 20px; border-radius: 28px; } .wachtvlak .wacht-kaart { padding: 24px 20px; } }

/* compacte wachtlijst-strook binnen een pagina */
.wachtstrook {
  background: var(--room); border-radius: var(--radius-kaart); padding: 30px 32px;
  box-shadow: var(--klei-schaduw); max-width: 780px; margin: 0 auto;
}
.wachtstrook h2, .wachtstrook h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.wachtstrook > p { font-size: 15px; color: var(--dof); margin-bottom: 20px; }
.wachtstrook .formulier { gap: 14px; }
@media (max-width: 560px) { .wachtstrook { padding: 24px 20px; } }

/* ============ portret (over-ons) ============ */
.portret-vlak { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; }
@media (max-width: 780px) { .portret-vlak { grid-template-columns: 1fr; } }
.portret { position: relative; padding: 16px 16px 0; }
.portret::before {
  content: ""; position: absolute; inset: 0 0 34px 0;
  background: var(--lila); border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  box-shadow: inset -8px -10px 0 rgba(37, 51, 43, .06);
  z-index: 0;
}
.portret img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  border-radius: var(--radius-kaart); background: var(--room);
  box-shadow: var(--klei-schaduw);
}
.portret figcaption { position: relative; z-index: 1; margin-top: 16px; font-size: 13.5px; color: var(--dof); font-weight: 700; }
.portret-tekst p { font-size: 16.5px; margin-bottom: 14px; }
.portret-tekst p:last-child { margin-bottom: 0; }

/* zustermerken in de footer */
.voet-familie {
  margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--melk);
  font-size: 13.5px; color: var(--dof); font-weight: 700;
}
.voet-familie strong { font-weight: 900; color: var(--inkt); }
.voet-familie a { color: var(--dof); text-decoration: underline; text-underline-offset: 3px; }
.voet-familie a:hover { color: var(--accent-donker); }
.voet-familie + .voet-onder { border-top: 0; margin-top: 12px; padding-top: 10px; }

/* ============ vaste wachtlijst-balk op mobiel (< 768px) ============ */
.mob-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(237, 243, 236, .97);
  box-shadow: 0 -6px 22px rgba(37, 51, 43, .12);
  transform: translateY(130%);
}
@supports (backdrop-filter: blur(8px)) { .mob-cta { backdrop-filter: blur(8px); } }
.mob-cta[hidden] { display: none !important; }
.mob-cta.toon { transform: translateY(0); }
.mob-cta .knop { flex: 1 1 auto; text-align: center; padding-left: 18px; padding-right: 18px; }
.mob-cta-sluit {
  flex: 0 0 44px; width: 44px; height: 44px; border: 0; cursor: pointer;
  background: var(--room); color: var(--dof); border-radius: 50%;
  font: inherit; font-size: 20px; font-weight: 800; line-height: 1;
  box-shadow: 0 3px 0 rgba(37, 51, 43, .12);
}
.mob-cta-sluit:hover { color: var(--inkt); }
@media (prefers-reduced-motion: no-preference) {
  .mob-cta { transition: transform .28s cubic-bezier(.2, .9, .3, 1); }
}
@media (min-width: 768px) { .mob-cta { display: none !important; } }

/* ============ voorbeeldcasus ============ */
.casus-kaart { position: relative; }
.casus-kaart .casus-stap { font-size: 13px; font-weight: 900; color: var(--accent-donker); }
.casus-kaart b { display: block; font-size: 16.5px; margin: 2px 0 6px; }
.casus-bedrag {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0;
  padding-top: 16px; border-top: 2px solid var(--melk);
}
.casus-bedrag div { font-size: 14px; color: var(--dof); font-weight: 700; }
.casus-bedrag b { display: block; font-size: 20px; color: var(--inkt); font-variant-numeric: tabular-nums; }

/* ============ lees ook ============ */
.leesook { max-width: 720px; margin: 44px auto 0; padding-top: 28px; border-top: 2px solid rgba(37, 51, 43, .10); }
.leesook h2 { font-size: 20px; font-weight: 900; text-align: left; margin: 0 0 16px; }
.leesook ul { list-style: none; display: grid; gap: 12px; margin: 0; }
.leesook li { margin: 0; }
.leesook a {
  display: block; text-decoration: none; color: var(--inkt);
  background: var(--room); border-radius: 18px; padding: 16px 20px;
  box-shadow: 0 5px 0 rgba(37, 51, 43, .07);
  transition: transform .15s ease;
}
.leesook a:hover { transform: translateY(-3px); }
.leesook a b { display: block; font-size: 15.5px; font-weight: 800; }
.leesook a span { display: block; font-size: 14px; color: var(--dof); font-weight: 600; margin-top: 3px; }

/* hulpjes */
.midden { text-align: center; }
.ruimte-boven { margin-top: 28px; }
.ruimte-onder { margin-bottom: 28px; }
.klein { font-size: 13.5px; }