/* ============================================================
   AInotary — klei.css · familiestijl "Klei Mint" v3
   Tokens uit Huisstijl/design-tokens.css, met twee bewuste toegankelijkheids-
   afwijkingen: --dof is donkerder (#675D4F) en witte tekst staat altijd op
   accent-donker (#AE5524) i.p.v. accent (#E0763A), met #9C4A1F voor accent-
   kleurige tekst op lichte vlakken. Zie het contrastoverzicht
   onderaan dit bestand.
   ============================================================ */

/* Design-tokens AInotary — een huis van AIffective · v3 "Klei Mint" */
:root {
  /* klei-wereld */
  --melk: #F5EFE7;      /* zachte achtergrond */
  --room: #FFFFFF;          /* kaarten en knoppen-basis */
  --inkt: #332B25;      /* tekst en koppen */
  --dof: #675D4F;        /* secundaire tekst · 5,65:1 op melk · 6,45:1 op wit */
  --accent: #E0763A;  /* accent: chips, accentpunten, secundaire markeringen */
  --accent-donker: #AE5524; /* accentkleur donker · vlakken en knoppen; wit erop = 5,09:1 */
  --accent-tekst: #9C4A1F;  /* accentkleur als tékst op melk/room/perzik · ≥4,5:1 overal */
  --knop-vulling: #AE5524;  /* primaire pil */
  --knop-diepte: #82401B;   /* 3D-schaduw: 25% donkerder dan de vulling */
  --perzik: #FFD9BE; --lila: #DCD6F5; --botergeel: #FFE9A8; /* pastelvormen (familie-breed) */

  /* typografie: rond en vriendelijk */
  --font: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, system-ui, sans-serif;

  /* klei-vormen */
  --radius-kaart: 28px; --radius-knop: 999px;
  --klei-schaduw: 0 10px 0 rgba(37, 51, 43, 0.08);      /* kaarten */
  --knop-schaduw: 0 6px 0 var(--knop-diepte);           /* drukbare knop; :active -> 0 0 0 */

  --veer: cubic-bezier(.2, .9, .3, 1);
  --veer-pop: cubic-bezier(.2, 1.6, .4, 1);
}

/* --- lokale Nunito (geen externe bronnen) --- */
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

/* --- basis --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--melk);
  color: var(--inkt);
  font-weight: 600;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* lange Nederlandse samenstellingen mogen nooit het scherm uit lopen */
  overflow-wrap: break-word;
}
.juridisch p, .juridisch li, article.kennis p, article.kennis li { hyphens: auto; }
img, svg { max-width: 100%; }
::selection { background: var(--perzik); color: var(--inkt); }
:focus-visible { outline: 2px solid var(--accent-donker); outline-offset: 3px; border-radius: 8px; }

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

.punt { color: var(--accent); }
/* de merkpunt in kleine tekst (voet) heeft de tekstvariant nodig */
footer.site .merkkolom .punt, .voetnoot .punt { color: var(--accent-tekst); }

h1 { font-size: clamp(38px, 5.6vw, 62px); font-weight: 900; letter-spacing: -.01em; line-height: 1.08; }
h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 900; line-height: 1.15; }
h3 { font-size: 19px; font-weight: 800; }
p  { font-size: 16px; }
.dof { color: var(--dof); }
.klein { font-size: 13px; color: var(--dof); }
strong, b { font-weight: 800; }
a { color: inherit; }

/* --- knoppen: drukbaar --- */
.knop {
  display: inline-block; text-decoration: none; cursor: pointer; border: 0;
  font-family: var(--font); font-size: 16px; font-weight: 800;
  background: var(--knop-vulling); color: #fff;
  border-radius: var(--radius-knop); padding: 15px 30px;
  box-shadow: var(--knop-schaduw);
  transition: transform .14s var(--veer), box-shadow .14s var(--veer), background .14s var(--veer);
}
.knop:hover  { transform: translateY(2px); box-shadow: 0 4px 0 var(--knop-diepte); background: var(--accent-tekst); }
.knop:active { transform: translateY(6px); box-shadow: 0 0 0 var(--knop-diepte); }
.knop.klein-formaat { font-size: 14.5px; padding: 11px 22px; box-shadow: 0 5px 0 var(--knop-diepte); }
.knop.wit { background: var(--room); color: var(--accent-tekst); box-shadow: 0 6px 0 rgba(0,0,0,.22); }
.knop.wit:hover { box-shadow: 0 4px 0 rgba(0,0,0,.22); }
.knop.wit:active { box-shadow: 0 0 0 rgba(0,0,0,.22); }
.knop-stil {
  display: inline-block; text-decoration: none;
  font-size: 15px; font-weight: 700; color: var(--inkt);
  background: var(--room); border-radius: var(--radius-knop); padding: 12px 24px;
  box-shadow: 0 4px 0 rgba(37,51,43,.12);
  transition: transform .14s var(--veer), box-shadow .14s var(--veer);
}
.knop-stil:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(37,51,43,.12); }
.knop-stil:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(37,51,43,.12); }

/* --- navigatie: zwevende pil die transformeert bij scroll --- */
.navdrager { position: sticky; top: 0; z-index: 60; padding: 14px 0 6px; }
nav.hoofd {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  max-width: 1080px; margin: 0 auto; padding: 12px 22px;
  border-radius: var(--radius-knop);
  transition: background .3s ease, box-shadow .3s ease, transform .3s var(--veer);
}
.navdrager.vast nav.hoofd {
  background: var(--room);
  box-shadow: 0 8px 0 rgba(37,51,43,.08);
}
nav.hoofd .merk { display: flex; align-items: center; text-decoration: none; }
nav.hoofd .merk img { height: 34px; display: block; } /* wordmark ≥ 100px breed (huisstijlgids) */
.navlinks { display: flex; gap: 8px; align-items: center; }
.navlinks a {
  text-decoration: none; color: var(--inkt); font-size: 14.5px; font-weight: 700;
  padding: 9px 16px; border-radius: var(--radius-knop);
  transition: transform .14s var(--veer), background .14s;
}
.navlinks a:hover { transform: translateY(-2px); background: var(--room); box-shadow: 0 4px 0 rgba(37,51,43,.10); }
.navdrager.vast .navlinks a:hover { background: var(--melk); box-shadow: none; }
.navlinks a.actief { background: var(--room); box-shadow: 0 4px 0 rgba(37,51,43,.10); }
.navdrager.vast .navlinks a.actief { background: var(--melk); box-shadow: none; }
.navlinks a.nav-cta {
  background: var(--knop-vulling); color: #fff; font-weight: 800;
  padding: 11px 20px; box-shadow: 0 5px 0 var(--knop-diepte);
}
.navlinks a.nav-cta:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--knop-diepte); background: var(--accent-tekst); }
.navlinks a.nav-cta:active { transform: translateY(5px); box-shadow: 0 0 0 var(--knop-diepte); }

/* mobiel menu */
.menuknop {
  display: none; border: 0; background: var(--room); cursor: pointer;
  font-family: var(--font); font-weight: 800; font-size: 14.5px; color: var(--inkt);
  border-radius: var(--radius-knop); padding: 11px 20px;
  box-shadow: 0 4px 0 rgba(37,51,43,.12);
}
@media (max-width: 900px) {
  .navlinks {
    display: none; position: absolute; top: calc(100% + 8px); right: 26px; left: 26px;
    flex-direction: column; align-items: stretch; text-align: center;
    background: var(--room); border-radius: var(--radius-kaart); padding: 16px;
    box-shadow: var(--klei-schaduw);
  }
  .navlinks a:hover { background: var(--melk); box-shadow: none; }
  .navlinks a.actief { background: var(--melk); box-shadow: none; }
  .navdrager.open .navlinks { display: flex; }
  .menuknop { display: inline-block; }
  nav.hoofd { position: relative; }
}

/* --- hero --- */
/* eigen stapelcontext, zodat de decoratie hieronder altijd achter de herotekst blijft */
header.hero { text-align: center; padding: 66px 0 46px; position: relative; isolation: isolate; }
header.hero.krap { padding: 46px 0 24px; }
.hero-p { font-size: 18.5px; color: var(--dof); max-width: 32em; margin: 20px auto 30px; line-height: 1.6; font-weight: 600; }
.zon {
  position: absolute; top: 26px; right: 6%; width: 86px; height: 86px; border-radius: 50%;
  background: var(--botergeel); box-shadow: inset -8px -10px 0 rgba(37,51,43,.08);
  pointer-events: none; z-index: -1;
}
.wolk {
  position: absolute; top: 112px; left: 4%; width: 118px; height: 44px; border-radius: 999px;
  background: var(--room); box-shadow: inset -6px -8px 0 rgba(37,51,43,.05);
  pointer-events: none; z-index: -1;
}
/* pastelvormen staan in de tekstflow en kunnen niets overlappen; expliciet vastgelegd */
.vorm { position: relative; z-index: 0; pointer-events: none; }
@media (max-width: 700px) { .zon { width: 60px; height: 60px; right: 4%; top: 12px; } .wolk { width: 88px; height: 34px; top: auto; bottom: -6px; } }

/* knoppenpaar in de hero: netjes uitlijnen, ook als ze afbreken */
.hero-acties { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
/* beide heroknoppen even groot, ongeacht de lengte van het opschrift */
.hero-acties .knop, .hero-acties .knop-stil {
  min-width: 250px; text-align: center; font-size: 16px; padding: 13px 26px;
}

.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: 15px;
}
.ballon i { font-style: normal; color: var(--accent-tekst); }

/* --- kruimelpad: bescheiden, op mobiel wel aantikbaar --- */
.kruimel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px 4px; font-size: 13.5px; font-weight: 700; color: var(--dof);
  margin-bottom: 16px;
}
.kruimel a, .kruimel [aria-current] {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 6px;
  border-radius: 999px; color: var(--dof); text-decoration: none;
}
.kruimel a:hover { color: var(--inkt); background: var(--room); }
.kruimel [aria-current] { color: var(--inkt); }
.kruimel .scheider { color: rgba(51,43,37,.30); }
@media (max-width: 767px) {
  .kruimel a, .kruimel [aria-current] { min-height: 44px; padding: 4px 10px; }
}

.label-chip {
  display: inline-block; font-size: 13px; font-weight: 800; color: var(--accent-tekst);
  background: var(--perzik); border-radius: 999px; padding: 6px 16px; margin-bottom: 18px;
}
.label-chip.stil { background: var(--room); color: var(--dof); box-shadow: 0 4px 0 rgba(37,51,43,.08); }

/* --- secties --- */
section { padding: 56px 0; }
.sectiekop { text-align: center; margin-bottom: 36px; }
.sectiekop .sub { color: var(--dof); font-weight: 600; margin-top: 8px; }

/* --- kaarten --- */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kaarten.twee { grid-template-columns: repeat(2, 1fr); }
.kaart {
  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 var(--veer);
}
a.kaart { text-decoration: none; color: inherit; display: block; }
.kaart:hover { transform: translateY(-4px) rotate(-.5deg); }
.kaart h3 { margin-bottom: 8px; }
.kaart p { font-size: 15px; color: var(--dof); line-height: 1.6; }
.kaart .meer { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 800; color: var(--accent-tekst); }
@media (max-width: 860px) { .kaarten, .kaarten.twee { grid-template-columns: 1fr; } }

/* pastelvormen als iconen — max drie per scherm, volgorde perzik → lila → botergeel */
.vorm {
  width: 54px; height: 54px; border-radius: 18px; margin-bottom: 18px;
  box-shadow: inset -5px -6px 0 rgba(37,51,43,.10);
  transition: transform .25s var(--veer-pop);
}
.vorm.perzik { background: var(--perzik); border-radius: 50%; }
.vorm.lila { background: var(--lila); }
.vorm.botergeel { background: var(--botergeel); border-radius: 50% 18px 50% 18px; }
.kaart:hover .vorm { transform: rotate(-6deg) scale(1.08); }

/* --- 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-donker); 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(--knop-diepte);
}
.stap b { font-size: 16.5px; font-weight: 800; display: block; margin-bottom: 6px; }
.stap p { font-size: 14.5px; color: var(--dof); line-height: 1.55; }
@media (max-width: 860px) { .stappen { grid-template-columns: 1fr; } }

/* --- accentvlak (prijsblok) --- */
.accentvlak {
  background: var(--accent-donker); border-radius: 36px; padding: 52px 40px; text-align: center;
  color: #fff; box-shadow: 0 12px 0 var(--knop-diepte);
}
.accentvlak h2 { color: #fff; }
.accentvlak p { color: #fff; font-weight: 600; max-width: 36em; margin: 12px auto 28px; }
/* drie gelijke kolommen, zodat de rij symmetrisch onder de knop uitkomt */
.vinkjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px auto 0; max-width: 860px; }
.vinkjes span { background: rgba(0,0,0,.18); border-radius: 999px; padding: 8px 18px; font-size: 13.5px; font-weight: 700; text-align: center; }
@media (max-width: 760px) { .vinkjes { grid-template-columns: 1fr; max-width: 420px; } }

/* --- levenslijn (alleen op de homepage) --- */
.levenslijn { position: relative; }
.levenslijn-svg { display: block; width: 100%; height: auto; }
.levenslijn-svg path.lijn {
  fill: none; stroke: rgba(51,43,37,.18); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 10 14;
}
.moment {
  position: absolute; transform: translate(-50%, -50%);
  text-decoration: none; color: var(--inkt); text-align: center;
  background: var(--room); border-radius: 22px; padding: 14px 20px;
  box-shadow: 0 8px 0 rgba(37,51,43,.09);
  transition: transform .2s var(--veer);
  min-width: 132px;
}
.moment:hover { transform: translate(-50%, -50%) translateY(-4px) rotate(-.6deg); }
.moment b { display: block; font-size: 15.5px; font-weight: 800; }
.moment span { display: block; font-size: 12.5px; color: var(--dof); font-weight: 700; }
.moment .stip { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin: 0 auto 7px; }
.moment.toekomst { background: var(--melk); box-shadow: inset 0 0 0 2px rgba(51,43,37,.10); }
.moment.toekomst .stip { background: rgba(51,43,37,.18); }
.levenslijn-mobiel { display: none; }
/* onder 1000px botsen de zwevende momentkaarten; dan de verticale variant */
@media (max-width: 1000px) {
  .levenslijn-breed { display: none; }
  .levenslijn-mobiel { display: grid; gap: 14px; max-width: 380px; margin: 0 auto; }
  .levenslijn-mobiel .moment { position: static; transform: none; }
  .levenslijn-mobiel .moment:hover { transform: translateY(-3px); }
}

/* --- tabellen (prijzen) --- */
.tabelkaart { background: var(--room); border-radius: var(--radius-kaart); box-shadow: var(--klei-schaduw); overflow: hidden; }
.tabelrol { overflow-x: auto; }
table.prijzen { width: 100%; border-collapse: collapse; min-width: 560px; }
table.prijzen th, table.prijzen td { text-align: left; padding: 16px 22px; font-size: 15px; }
table.prijzen th { font-size: 13px; font-weight: 800; color: var(--dof); text-transform: none; border-bottom: 2px solid var(--melk); }
table.prijzen td { border-bottom: 2px solid var(--melk); }
table.prijzen tr:last-child td { border-bottom: 0; }
table.prijzen .bedrag { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.prijzen .toel { color: var(--dof); font-size: 13.5px; }

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

/* --- dienstpagina-elementen --- */
.twee-kolom { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .twee-kolom { grid-template-columns: 1fr; } }
.prijskaart {
  background: var(--accent-donker); color: #fff; border-radius: var(--radius-kaart);
  padding: 30px 28px; box-shadow: 0 10px 0 var(--knop-diepte); text-align: center;
  position: sticky; top: 96px;
}
.prijskaart .bedrag { font-size: 44px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.prijskaart .bedrag small { font-size: 17px; font-weight: 800; }
.prijskaart p { color: #fff; font-size: 14px; margin: 10px 0 18px; }
.prijskaart .klein { color: rgba(255,255,255,.92); }
.lijstje { display: grid; gap: 12px; }
.lijstje li {
  list-style: none; background: var(--room); border-radius: 18px; padding: 14px 18px 14px 46px;
  box-shadow: 0 6px 0 rgba(37,51,43,.07); font-size: 15px; position: relative;
}
.lijstje li::before {
  content: "✓"; position: absolute; left: 18px; top: 14px;
  color: var(--accent-tekst); font-weight: 900;
}
.notitieblok {
  background: var(--room); border-radius: 22px; padding: 22px 24px;
  box-shadow: 0 8px 0 rgba(37,51,43,.08); font-size: 14.5px; color: var(--dof);
}
.notitieblok b { color: var(--inkt); }
.notitieblok .stipje { color: var(--accent-tekst); font-weight: 900; }

/* --- proceslijn op dienstpagina's --- */
.proceslijn { display: grid; gap: 0; position: relative; }
.procesitem { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 26px; position: relative; }
.procesitem::before {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 3px;
  background: rgba(51,43,37,.10); border-radius: 2px;
}
.procesitem:last-child::before { display: none; }
/* De lichte goot hierboven vult zich in de accentkleur terwijl je langs de
   stappen scrolt, net als de dossierreis bij AItaxes en De Lijn bij AIjurist.
   klei.js maakt dit element aan en zet de hoogte; zonder JS blijft de goot
   gewoon grijs staan. */
.proceslijn .lijn-vul {
  position: absolute; left: 21px; top: 44px; width: 3px; height: 0;
  background: var(--accent); border-radius: 2px;
  pointer-events: none;
  transition: height .45s var(--veer);
}
@media (prefers-reduced-motion: reduce) {
  /* geen beweging, maar de lijn springt wél meteen naar de juiste hoogte */
  .proceslijn .lijn-vul { transition: none; }
}
.procesitem .pbol {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-donker); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px;
  box-shadow: 0 4px 0 var(--knop-diepte); flex-shrink: 0;
}
.procesitem b { display: block; font-size: 16px; font-weight: 800; margin-top: 8px; }
.procesitem p { font-size: 14.5px; color: var(--dof); }

/* --- artikelen --- */
article.kennis { background: var(--room); border-radius: var(--radius-kaart); box-shadow: var(--klei-schaduw); padding: 44px clamp(24px, 5vw, 56px); }
article.kennis h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 10px; }
article.kennis .meta { color: var(--dof); font-size: 13.5px; font-weight: 700; margin-bottom: 28px; }
article.kennis h2 { font-size: 24px; margin: 34px 0 10px; text-align: left; }
article.kennis h3 { margin: 24px 0 8px; }
article.kennis p { margin-bottom: 14px; color: var(--inkt); }
article.kennis p.intro { font-size: 18px; color: var(--dof); }
article.kennis ul, article.kennis ol { margin: 0 0 14px 22px; }
article.kennis li { margin-bottom: 8px; }
article.kennis .kader {
  background: var(--melk); border-radius: 18px; padding: 18px 22px; margin: 20px 0;
  font-size: 14.5px;
}
article.kennis .kader b { color: var(--accent-tekst); }
article.kennis .tabelrol { margin: 16px 0 22px; }
article.kennis table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 14.5px; }
article.kennis .tabelrol table { margin: 0; min-width: 440px; }
article.kennis th, article.kennis td { text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--melk); }
article.kennis th { color: var(--dof); font-size: 13px; }
article.kennis td.bedrag { font-variant-numeric: tabular-nums; font-weight: 800; }

/* --- juridische teksten --- */
.juridisch h2 { font-size: 21px; text-align: left; margin: 30px 0 8px; }
.juridisch p, .juridisch li { font-size: 15px; color: var(--inkt); margin-bottom: 10px; }
.juridisch ul { margin-left: 22px; }
.concept-banner {
  background: var(--botergeel); border-radius: 18px; padding: 14px 20px; font-size: 14px;
  font-weight: 700; margin-bottom: 28px;
}

/* --- footer --- */
footer.site {
  margin-top: 40px; padding: 56px 0 42px;
}
.footgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 36px; }
@media (max-width: 860px) { .footgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footgrid { grid-template-columns: 1fr; } }
footer.site .kolomkop { font-size: 13px; font-weight: 800; color: var(--dof); margin-bottom: 12px; }
footer.site a { display: block; text-decoration: none; color: var(--inkt); font-size: 14.5px; font-weight: 700; margin-bottom: 9px; }
footer.site a:hover { color: var(--accent-tekst); }
footer.site .merkkolom img { height: 34px; margin-bottom: 14px; } /* wordmark ≥ 100px breed (huisstijlgids) */
footer.site .merkkolom p { font-size: 13.5px; color: var(--dof); }
.voetnoot {
  border-top: 2px solid rgba(51,43,37,.08); padding-top: 26px;
  font-size: 12.5px; color: var(--dof); line-height: 1.7;
}
.voetnoot p { max-width: 84ch; }
.voetnoot p + p { margin-top: 10px; }
.voetnoot .copyregel { margin-top: 16px; font-weight: 700; }

/* ============================================================
   Formulieren — klei-velden, drukbare knop, eerlijke statussen.
   ============================================================ */
.formulier { display: grid; gap: 14px; }
.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .veldrij { grid-template-columns: 1fr; } }
.veld { display: grid; gap: 7px; }
.veld label { font-size: 14px; font-weight: 800; color: var(--inkt); }
.veld .hint { font-size: 12.5px; font-weight: 700; color: var(--dof); }
.veld input, .veld select, .veld textarea {
  font-family: var(--font); font-size: 15.5px; font-weight: 600; color: var(--inkt);
  background: var(--melk); border: 2px solid transparent; border-radius: 18px;
  padding: 13px 16px; width: 100%;
  transition: border-color .16s var(--veer), background .16s;
}
.veld textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.veld select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23675D4F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px; padding-right: 44px;
}
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--accent); background: var(--room); }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { border-radius: 18px; outline-offset: 2px; }
.veld input::placeholder, .veld textarea::placeholder { color: var(--dof); font-weight: 600; }
.veld.fout input, .veld.fout select, .veld.fout textarea { border-color: var(--accent-tekst); background: var(--room); }
.veldfout { font-size: 13px; font-weight: 800; color: var(--accent-tekst); }
.veld:not(.fout) .veldfout { display: none; }

/* honeypot: onzichtbaar voor mensen, wel bereikbaar voor bots */
.pot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.formulier .knop[disabled] { opacity: .72; cursor: progress; transform: translateY(3px); box-shadow: 0 3px 0 var(--knop-diepte); }
.formulier .knop.wit[disabled] { box-shadow: 0 3px 0 rgba(0,0,0,.22); }
.formregel { font-size: 13px; color: var(--dof); font-weight: 700; line-height: 1.55; }
.formregel a { color: var(--accent-tekst); }
.formfout {
  background: var(--perzik); border-radius: 18px; padding: 14px 18px;
  font-size: 14px; font-weight: 700; color: var(--inkt);
}
.formfout a { color: var(--accent-tekst); }
.formfout[hidden] { display: none; }

/* geslaagd — rustige klei-staat, geen confetti */
.formgeslaagd { text-align: center; padding: 12px 0 4px; }
.formgeslaagd .vink {
  width: 58px; height: 58px; border-radius: 50%; background: var(--accent-donker); color: #fff;
  font-size: 27px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; box-shadow: 0 5px 0 var(--knop-diepte);
}
.formgeslaagd b { display: block; font-size: 19px; font-weight: 900; margin-bottom: 8px; }
.formgeslaagd p { font-size: 15px; color: var(--dof); max-width: 30em; margin: 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .formgeslaagd { animation: rijs .5s var(--veer) backwards; }
  .formgeslaagd .vink { animation: pop .5s var(--veer-pop) .1s backwards; }
}

/* --- formulier op het accentvlak (oranje) --- */
.accentvlak .formulier { max-width: 620px; margin: 0 auto; text-align: left; }
.accentvlak .veld label { color: #fff; }
.accentvlak .veld input, .accentvlak .veld select, .accentvlak .veld textarea { background: var(--room); }
.accentvlak .veld input:focus, .accentvlak .veld select:focus, .accentvlak .veld textarea:focus { border-color: var(--knop-diepte); }
.accentvlak .veld.fout input, .accentvlak .veld.fout select { border-color: #7d3612; }
.accentvlak .veldfout { color: #fff; background: rgba(0,0,0,.18); border-radius: 999px; padding: 3px 12px; justify-self: start; }
.accentvlak .formregel { color: #fff; text-align: center; }
.accentvlak .formregel a { color: #fff; }
.accentvlak .formfout { background: rgba(255,255,255,.94); }
.accentvlak .formgeslaagd .vink { background: var(--room); color: var(--accent-tekst); box-shadow: 0 5px 0 rgba(0,0,0,.22); }
.accentvlak .formgeslaagd b { color: #fff; }
.accentvlak .formgeslaagd p { color: #fff; }
:focus-visible { outline: 2px solid var(--accent-donker); outline-offset: 3px; }
.accentvlak :focus-visible { outline-color: #fff; }

/* --- wachtlijstsectie op de homepage --- */
.wachtvlak {
  background: var(--room); border-radius: 36px; padding: 48px clamp(24px, 5vw, 52px);
  box-shadow: var(--klei-schaduw), inset 0 2px 0 rgba(255,255,255,.9);
  position: relative; overflow: hidden;
}
.wachtvlak .wachtvorm {
  position: absolute; width: 210px; height: 210px; border-radius: 50%;
  background: var(--perzik); opacity: .55; right: -70px; top: -70px; pointer-events: none;
}
.wachtvlak .wachtvorm.twee { background: var(--lila); left: -80px; bottom: -90px; right: auto; top: auto; width: 180px; height: 180px; }
.wachtvlak > * { position: relative; }
.wachtvlak .wachtkop { text-align: center; margin-bottom: 28px; }
.wachtvlak .wachtkop p { color: var(--dof); margin-top: 10px; max-width: 34em; margin-left: auto; margin-right: auto; }
.wachtvlak .formulier { max-width: 620px; margin: 0 auto; }
@media (max-width: 700px) {
  .wachtvlak { padding: 36px 22px; }
  .wachtvlak .wachtvorm { width: 128px; height: 128px; right: -46px; top: -46px; opacity: .4; }
  .wachtvlak .wachtvorm.twee { width: 108px; height: 108px; left: -46px; bottom: -56px; }
}
.wachtvlak .formmidden { text-align: center; margin-top: 6px; }
.wachtvlak .formregel { text-align: center; }

/* compacte wachtlijst op dienstpagina's */
.wachtstrook {
  background: var(--room); border-radius: var(--radius-kaart); padding: 30px 28px;
  box-shadow: var(--klei-schaduw);
}
.wachtstrook h3 { margin-bottom: 6px; }
.wachtstrook > p { font-size: 14.5px; color: var(--dof); margin-bottom: 18px; }
.wachtstrook .formulier { gap: 12px; }

/* --- de mens erachter (over.html) --- */
.mensblok { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; }
@media (max-width: 780px) { .mensblok { grid-template-columns: 1fr; } .portret { max-width: 300px; margin: 0 auto; } }
.portret { position: relative; }
.portret .portretvorm {
  position: absolute; inset: 18px -16px -18px 16px; border-radius: 50% 30% 50% 30%;
  background: var(--lila); z-index: 0;
}
.portret img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  border-radius: var(--radius-kaart); box-shadow: var(--klei-schaduw);
}
.portret .naamkaartje {
  position: relative; z-index: 2; background: var(--room); border-radius: 18px;
  padding: 12px 18px; box-shadow: 0 6px 0 rgba(37,51,43,.09);
  margin: -22px 18px 0; text-align: center;
}
.portret .naamkaartje b { display: block; font-size: 15.5px; font-weight: 900; }
.portret .naamkaartje span { display: block; font-size: 12.5px; color: var(--dof); font-weight: 700; }
.mensblok .menstekst p { color: var(--inkt); margin-bottom: 12px; }
.mensblok .menstekst p:last-child { margin-bottom: 0; }

/* zustermerken */
.zusterrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 700px) { .zusterrij { grid-template-columns: 1fr; } }
.zuster {
  background: var(--melk); border-radius: 18px; padding: 16px 18px; text-decoration: none; display: block;
}
.zuster b { display: block; font-size: 15px; font-weight: 900; }
.zuster span { display: block; font-size: 13px; color: var(--dof); font-weight: 700; }
.zuster.link:hover { background: var(--perzik); }

footer.site .initiatief { font-size: 13px; color: var(--dof); font-weight: 700; margin-top: 10px; line-height: 1.6; }
footer.site .initiatief b { color: var(--inkt); font-weight: 900; }
footer.site .initiatief a { display: inline; font-size: inherit; font-weight: 800; margin: 0; color: var(--accent-tekst); text-decoration: none; }
footer.site .initiatief a:hover { text-decoration: underline; }

/* --- bedankpagina --- */
.bedankvink {
  width: 66px; height: 66px; border-radius: 50%; background: var(--accent-donker); color: #fff;
  font-size: 31px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; box-shadow: 0 6px 0 var(--knop-diepte);
}
@media (prefers-reduced-motion: no-preference) {
  .bedankvink { animation: pop .5s var(--veer-pop) .1s backwards; }
}

/* ============================================================
   Voorbeeldcasus — geïllustreerd dossier, nadrukkelijk fictief.
   ============================================================ */
.fictiefbalk {
  background: var(--botergeel); border-radius: 18px; padding: 14px 20px;
  font-size: 14px; font-weight: 700; line-height: 1.55; margin-bottom: 28px;
}
.fictiefbalk b { font-weight: 900; }
.casuskaart {
  background: var(--room); border-radius: var(--radius-kaart); padding: 30px clamp(22px, 4vw, 34px);
  box-shadow: var(--klei-schaduw), inset 0 2px 0 rgba(255,255,255,.9);
  margin-bottom: 26px;
}
.casuskop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.casuskop h2 { font-size: clamp(22px, 3vw, 28px); text-align: left; }
.casuskaart > p.situatie { color: var(--dof); font-size: 15.5px; margin: 10px 0 24px; }
.casuskaart .fictiefmerk {
  font-size: 12px; font-weight: 800; color: var(--accent-tekst);
  background: var(--perzik); border-radius: 999px; padding: 5px 14px; white-space: nowrap;
}
.casusregel {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding-bottom: 24px; position: relative;
}
.casusregel::before {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 3px;
  background: rgba(51,43,37,.10); border-radius: 2px;
}
.casusregel:last-child { padding-bottom: 0; }
.casusregel:last-child::before { display: none; }
.casusregel .cbol {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-donker); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px;
  box-shadow: 0 4px 0 var(--knop-diepte); flex-shrink: 0;
}
.casusregel .cinhoud b { display: block; font-size: 16px; font-weight: 800; margin: 8px 0 4px; }
.casusregel .cinhoud p { font-size: 14.5px; color: var(--dof); }
.casusregel .cinhoud .wiedoet {
  display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 800;
  background: var(--melk); border-radius: 999px; padding: 5px 14px; color: var(--inkt);
}
@media (max-width: 620px) {
  .casusregel { gap: 14px; }
}

/* --- "Lees ook" onder artikelen --- */
.leesook { margin-top: 30px; }
.leesook .leeskop { font-size: 13px; font-weight: 800; color: var(--dof); margin-bottom: 14px; }
.leesook .leesrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .leesook .leesrij { grid-template-columns: 1fr; } }
.leesook a {
  display: block; background: var(--melk); border-radius: 18px; padding: 16px 18px;
  text-decoration: none; color: var(--inkt); min-height: 44px;
  transition: transform .16s var(--veer), background .16s;
}
.leesook a:hover { transform: translateY(-3px); background: var(--perzik); }
.leesook a b { display: block; font-size: 15px; font-weight: 800; line-height: 1.35; }
.leesook a span { display: block; font-size: 12.5px; color: var(--dof); font-weight: 700; margin-top: 4px; }

/* --- contextuele tekstlink in lopende tekst --- */
a.tekstlink { color: var(--accent-tekst); font-weight: 800; text-decoration: none; }
a.tekstlink:hover { text-decoration: underline; }

/* ============================================================
   Tikdoelen op aanraakschermen: overal minstens 44x44.
   ============================================================ */
@media (max-width: 767px) {
  nav.hoofd .merk { min-height: 44px; }
  .menuknop { min-height: 44px; padding: 11px 20px; }
  .navlinks a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  footer.site a {
    display: flex; align-items: center; min-height: 44px; margin-bottom: 2px;
  }
  footer.site .merkkolom a,
  footer.site .initiatief a { display: inline; min-height: 0; margin: 0; }
  .faq summary { padding-top: 22px; padding-bottom: 22px; }
  .knop, .knop-stil { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .zuster { min-height: 44px; }
  .kaart .meer a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============================================================
   Sticky wachtlijst-balk — alleen op smalle schermen.
   ============================================================ */
.stickycta { display: none; }
@media (max-width: 767px) {
  .stickycta {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 12px; right: 12px; z-index: 70;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--room); border-radius: var(--radius-kaart);
    box-shadow: 0 10px 0 rgba(37,51,43,.12), 0 2px 22px rgba(37,51,43,.14);
    padding: 12px 12px 12px 18px;
    transform: translateY(140%); opacity: 0;
    transition: transform .32s var(--veer), opacity .32s var(--veer);
    pointer-events: none;
  }
  .stickycta.tonen { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .stickycta .ctatekst { flex: 1; min-width: 0; }
  .stickycta .ctatekst b { display: block; font-size: 14.5px; font-weight: 900; line-height: 1.25; }
  .stickycta .ctatekst span { display: block; font-size: 12px; font-weight: 700; color: var(--dof); }
  .stickycta .knop { font-size: 14px; padding: 12px 18px; box-shadow: 0 5px 0 var(--knop-diepte); white-space: nowrap; }
  .stickycta .sluit {
    flex-shrink: 0; width: 44px; height: 44px; border: 0; background: var(--melk); cursor: pointer;
    border-radius: 50%; color: var(--dof); font-family: var(--font); font-size: 19px; font-weight: 900;
    display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .stickycta .sluit:hover { background: var(--perzik); color: var(--accent-tekst); }
  /* de balk mag nooit de laatste inhoud afdekken */
  body.heeft-stickycta footer.site { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .stickycta { transition: none; }
}

/* ============================================================
   Beweging — rijst uit de klei, veerkrachtig, 120–650 ms.
   Alles uit bij prefers-reduced-motion.
   ============================================================ */
.onthul { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  header.hero h1, header.hero .hero-p, header.hero .knop, header.hero .ballon, header.hero .label-chip {
    animation: rijs .65s var(--veer) backwards;
  }
  header.hero .hero-p { animation-delay: .12s; }
  header.hero .knop { animation-delay: .22s; }
  header.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); } }

  .ballon { animation: rijs .65s var(--veer) .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 .6s var(--veer) backwards; }
  .js .onthul.zichtbaar.v2 { animation-delay: .1s; }
  .js .onthul.zichtbaar.v3 { animation-delay: .2s; }
  .js .onthul.zichtbaar.v4 { animation-delay: .3s; }

  /* de zwevende momentkaarten staan gecentreerd met translate(-50%, -50%);
     de gewone rijs-keyframe zou die centrering tijdens de animatie wegdrukken,
     waardoor de rechterkaart 66px naar buiten schoof. Zelfde beweging, centrering behouden. */
  .js .levenslijn-breed .onthul.zichtbaar { animation-name: rijs-moment; }
  @keyframes rijs-moment { from { opacity: 0; transform: translate(-50%, -50%) translateY(22px); } }

  .js .stap.zichtbaar .bol { animation: pop .5s var(--veer-pop) .3s backwards; }
  .js .procesitem.zichtbaar .pbol { animation: pop .5s var(--veer-pop) .15s backwards; }
  @keyframes pop { from { transform: scale(0); } }

  .js .levenslijn-svg path.lijn { transition: stroke-dashoffset 1.4s var(--veer); }
  .js .accentvlak.zichtbaar .vinkjes span { animation: rijs .5s ease backwards .15s; }
  .js .accentvlak.zichtbaar .vinkjes span:nth-child(2) { animation-delay: .27s; }
  .js .accentvlak.zichtbaar .vinkjes span:nth-child(3) { animation-delay: .39s; }
}

/* ============================================================
   Contrastverantwoording (WCAG 2.1, berekend)
   melk #F5EFE7 · room #FFFFFF · perzik #FFD9BE · inkt #332B25

   Accent-ramp en waar hij mag staan:
     --accent        #E0763A  markeringen zonder letters (punt, stip, vormen)
     --accent-donker #AE5524  vlakken, knoppen en bollen met WÍTTE tekst erop
     --accent-tekst  #9C4A1F  accentkleur als tékst op een licht vlak, + hover
     --knop-diepte   #82401B  3D-schaduw (25% donkerder dan de vulling)

   Gemeten ratio's
     dof #675D4F op melk .................. 5,65:1   (was 3,73:1)
     dof #675D4F op wit ................... 6,45:1   (was 4,26:1)
     dof #675D4F op perzik ................ 4,89:1
     inkt #332B25 op melk ................ 12,15:1
     wit op knop/vlak #AE5524 ............. 5,09:1   (was 3,08:1 op #E0763A)
     wit op knop-hover #9C4A1F ............ 6,15:1
     wit op vinkje-pil (zwart 18% erop) ... 6,86:1
     #9C4A1F als tekst op wit ............. 6,15:1
     #9C4A1F als tekst op melk ............ 5,39:1
     #9C4A1F als tekst op perzik (chip) ... 4,67:1
     focusring #AE5524 op melk ............ 4,46:1   (eis 3:1 voor UI)
     veldrand #E0763A op wit .............. 3,08:1   (eis 3:1 voor UI)

   Accent #E0763A draagt nergens meer tekst.
   ============================================================ */