/* =====================================================================
   AIjurist — klei.css · designsysteem "Klei Mint" v3
   Gebaseerd op Huisstijlgids_AIjurist.pdf + design-tokens.css (aug 2026).
   Eén bestand voor de hele site. Geen externe bronnen.
   ===================================================================== */

/* ---------- fonts (lokaal, SIL OFL — zie assets/fonts/) ---------- */
@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; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- tokens (letterlijk uit design-tokens.css) ---------- */
:root {
  --melk: #ECF1F5;
  --room: #FFFFFF;
  --inkt: #25303B;
  /* dof is opgehoogd van #6E7B88 naar #5B6875: contrast 5,0:1 op melk en
     5,7:1 op room — beide ruim boven de AA-eis van 4,5:1 voor lopende tekst. */
  --dof: #5B6875;
  --accent: #3E7FD0;
  --accent-donker: #2C5FA0;
  /* primaire knop: vulling accent-donker (wit op #2C5FA0 = 6,5:1),
     3D-schaduw 25% donkerder (#214778), hover een tint lichter (#336DB8 = 5,2:1) */
  --knop-vlak: #2C5FA0;
  --knop-vlak-hover: #336DB8;
  --knop-schaduw-kleur: #214778;
  --perzik: #FFD9BE; --lila: #DCD6F5; --botergeel: #FFE9A8;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, system-ui, sans-serif;
  --font-doc: "Inter", -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-schaduw-kleur);
  --veer: cubic-bezier(.2, .9, .3, 1);
  --veer-pop: cubic-bezier(.2, 1.6, .4, 1);
}

/* ---------- basis ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font);
  font-weight: 600;
  background: var(--melk);
  color: var(--inkt);
  font-size: 16px;
  line-height: 1.6;
}
img, svg { max-width: 100%; display: block; }
/* eigen display-regels (.kicker, .kaarten, …) winnen anders van het hidden-attribuut */
[hidden] { display: none !important; }
a { color: var(--accent-donker); }
strong, b { font-weight: 800; }
::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.knop:focus-visible, .pil:focus-visible { border-radius: var(--radius-knop); }

.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);
}
.skiplink:focus { left: 12px; }

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

/* ---------- typografie ---------- */
h1 { font-size: clamp(38px, 5.6vw, 64px); font-weight: 900; letter-spacing: -0.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; line-height: 1.3; }
.punt { color: var(--accent); } /* elke kernzin eindigt op de accentpunt */
.dof { color: var(--dof); }
.tabcijfers, .prijs { font-variant-numeric: tabular-nums; }

/* kop op kaart-formaat: gebruik je als de koppenvolgorde een h2 vraagt
   maar het ontwerp een kaartkop (h3-formaat) laat zien */
.kop-klein { font-size: 19px; font-weight: 800; line-height: 1.3; }

/* alleen voor schermlezers: tabelbijschriften e.d. */
.visueel-verborgen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

section { padding: 56px 0; }
.sectiekop { text-align: center; margin-bottom: 36px; }
.sectiekop h2 { margin-bottom: 8px; }
.sectiekop p { color: var(--dof); max-width: 38em; margin: 0 auto; }
.kicker {
  display: inline-block; font-size: 13px; font-weight: 800; color: var(--accent-donker);
  background: var(--room); border-radius: var(--radius-knop); padding: 6px 16px;
  box-shadow: 0 4px 0 rgba(37,51,43,.08); margin-bottom: 14px;
}

/* ---------- navigatie: zwevende witte pil die bij scroll transformeert ----------
   Zelfde vorm en gedrag als bij AItaxes en AInotary, met AIjurist-kleuren. */
.nav-buiten { position: sticky; top: 0; z-index: 100; padding: 14px 0 6px; }
.nav-buiten > .wrap { padding: 0 16px; }
nav.hoofdnav {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 22px; border-radius: var(--radius-knop);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav-buiten.vast nav.hoofdnav {
  background: var(--room); box-shadow: 0 8px 0 rgba(37,51,43,.08); padding: 10px 22px;
}
.merk { display: inline-flex; align-items: center; }
.merk img { height: 32px; width: auto; }
.navlinks { display: flex; gap: 8px; align-items: center; }
.pil {
  text-decoration: none; color: var(--inkt); font-size: 15px; font-weight: 700;
  border-radius: var(--radius-knop); padding: 10px 16px;
  transition: transform .15s var(--veer), box-shadow .15s var(--veer), background .15s var(--veer);
  white-space: nowrap;
}
.pil:hover { transform: translateY(-2px); background: var(--room); box-shadow: 0 4px 0 rgba(37,51,43,.10); }
.nav-buiten.vast .pil:hover { background: var(--melk); box-shadow: none; }
.pil[aria-current="page"] { background: var(--room); box-shadow: 0 4px 0 rgba(37,51,43,.10); }
.nav-buiten.vast .pil[aria-current="page"] { background: var(--melk); box-shadow: inset 0 2px 0 rgba(37,51,43,.06); }

/* ---------- knoppen (drukbaar) ---------- */
.knop {
  display: inline-block; text-decoration: none; text-align: center; cursor: pointer;
  background: var(--knop-vlak); color: #fff; border: 0; 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 var(--veer), box-shadow .12s var(--veer), background-color .12s var(--veer);
}
.knop:hover { background: var(--knop-vlak-hover); transform: translateY(2px); box-shadow: 0 4px 0 var(--knop-schaduw-kleur); }
.knop:active { transform: translateY(6px); box-shadow: 0 0 0 var(--knop-schaduw-kleur); }
.knop.klein { font-size: 15px; padding: 11px 22px; box-shadow: 0 5px 0 var(--knop-schaduw-kleur); }
.knop.klein:hover { box-shadow: 0 4px 0 var(--knop-schaduw-kleur); }
.knop.wit { background: var(--room); color: var(--accent-donker); box-shadow: 0 6px 0 rgba(37,51,43,.18); }
.knop.wit:hover { box-shadow: 0 4px 0 rgba(37,51,43,.18); }
.knop.wit:active { box-shadow: 0 0 0 rgba(37,51,43,.18); }

/* ---------- hamburger + mobiel menu ---------- */
.hamburger {
  display: none; cursor: pointer; border: 0; background: var(--room);
  border-radius: var(--radius-knop); padding: 12px 14px; box-shadow: 0 4px 0 rgba(37,51,43,.12);
}
.hamburger span { display: block; width: 20px; height: 2.6px; border-radius: 3px; background: var(--inkt); transition: transform .25s var(--veer), opacity .2s; }
.hamburger span + span { margin-top: 4.4px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobielmenu {
  display: none; position: fixed; inset: 92px 16px auto 16px; z-index: 99;
  background: var(--room); border-radius: var(--radius-kaart); box-shadow: var(--klei-schaduw);
  padding: 18px; flex-direction: column; gap: 8px;
  /* korte schermen (iPhone SE, landschap): menu blijft binnen beeld en scrollt zelf,
     zodat de knop onderaan altijd bereikbaar is */
  max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain;
}
@supports not (height: 100dvh) { .mobielmenu { max-height: calc(100vh - 108px); } }
.mobielmenu.open { display: flex; animation: rijs .35s var(--veer) backwards; }
.mobielmenu a { text-decoration: none; color: var(--inkt); font-weight: 800; font-size: 17px; padding: 12px 16px; border-radius: 16px; }
.mobielmenu a:hover, .mobielmenu a[aria-current="page"] { background: var(--melk); }
.mobielmenu .knop { margin-top: 8px; color: #fff; }

/* ---------- kruimelpad ---------- */
.kruimelbalk { padding: 12px 0 0; }
/* op artikel- en documentpagina's exact uitlijnen met de tekstkolom */
.kruimelbalk.smal { max-width: 760px; margin: 0 auto; padding: 12px 26px 0; }
.kruimels ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 8px; font-size: 13.5px; font-weight: 700; color: var(--dof);
}
.kruimels a { color: var(--dof); text-decoration: none; border-radius: 6px; }
.kruimels a:hover { color: var(--inkt); text-decoration: underline; }
.kruimels li[aria-current="page"] { font-weight: 600; }
.kruimels .scheider { color: rgba(37, 51, 43, .3); }

/* ---------- sticky wachtlijst-balk (alleen smalle schermen) ---------- */
.mobielcta { display: none; }
@media (max-width: 767px) {
  .mobielcta {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 12px calc(16px + env(safe-area-inset-right, 0px))
             calc(12px + env(safe-area-inset-bottom, 0px))
             calc(16px + env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px); box-shadow: 0 -6px 24px rgba(37, 51, 43, .10);
    transform: translateY(130%); visibility: hidden;
    transition: transform .3s var(--veer), visibility .3s;
  }
  .mobielcta.toon { transform: translateY(0); visibility: visible; }
  .mobielcta .tekst { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--dof); }
  .mobielcta .tekst b { display: block; font-size: 14.5px; font-weight: 800; color: var(--inkt); }
  .mobielcta .knop { flex: 0 0 auto; font-size: 14.5px; padding: 13px 18px; box-shadow: 0 4px 0 var(--knop-schaduw-kleur); }
  .mobielcta .sluit {
    flex: 0 0 auto; border: 0; background: var(--melk); color: var(--dof); cursor: pointer;
    width: 44px; height: 44px; border-radius: 50%; font-size: 18px; font-weight: 800;
    font-family: var(--font); line-height: 1; display: flex; align-items: center; justify-content: center;
  }
  /* het mobiele menu wint altijd van de balk */
  body.menu-open .mobielcta { transform: translateY(130%); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .mobielcta { transition: none; } }

/* ---------- voorbeeldcasus ---------- */
.fictief {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  background: var(--botergeel); border-radius: 22px; padding: 16px 22px;
  font-size: 14.5px; font-weight: 700; color: var(--inkt);
  box-shadow: 0 6px 0 rgba(37, 51, 43, .08);
}
.fictief .merk {
  flex: 0 0 auto; background: var(--room); border-radius: var(--radius-knop);
  padding: 3px 12px; font-size: 12.5px; font-weight: 800;
}
.fictief p { flex: 1 1 16em; margin: 0; }
.casuskop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.casuskop .badge { margin-bottom: 0; }
.casusuitkomst {
  background: var(--melk); border-radius: 18px; padding: 16px 20px; margin-top: 16px;
  font-size: 15px; color: var(--inkt);
}

/* ---------- lees ook ---------- */
.leesook { margin: 36px 0 8px; }
.leesook h2 { font-size: 19px; font-weight: 800; line-height: 1.3; margin: 0 0 14px; }
.leesook ul { list-style: none; display: grid; gap: 10px; margin: 0; }
.leesook a {
  display: block; background: var(--room); border-radius: 18px; padding: 15px 20px;
  box-shadow: 0 6px 0 rgba(37, 51, 43, .07); text-decoration: none; color: var(--inkt);
  font-weight: 800; font-size: 15.5px; transition: transform .18s var(--veer);
}
.leesook a:hover { transform: translateY(-3px); }
.leesook a span { display: block; font-weight: 600; font-size: 14.5px; color: var(--dof); margin-top: 3px; }

/* ---------- 100% online ---------- */
.online-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.online-strip .kaart { text-align: center; }
.online-strip .kaart .vorm { margin-left: auto; margin-right: auto; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 72px 0 56px; position: relative; }
.hero p.intro { font-size: 19px; color: var(--dof); max-width: 32em; margin: 20px auto 30px; }
.hero .acties { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.zon {
  position: absolute; top: 28px; right: 6%; width: 88px; height: 88px; border-radius: 50%;
  background: var(--botergeel); box-shadow: inset -8px -10px 0 rgba(37,51,43,.08); z-index: -1;
}
.wolk {
  position: absolute; top: 116px; left: 4%; width: 120px; height: 44px; border-radius: var(--radius-knop);
  background: var(--room); box-shadow: inset -6px -8px 0 rgba(37,51,43,.05); z-index: -1;
}
.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-donker); }
.ballon i a { color: inherit; }

/* ---------- kaarten ---------- */
.kaart {
  background: var(--room); border-radius: var(--radius-kaart); padding: 30px 26px;
  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:hover { transform: translateY(-4px) rotate(-.5deg); }
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kaarten-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.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-weight: 800; font-size: 15px; color: var(--accent-donker); }

/* pastelvormen als iconen — perzik (cirkel), lila (kussen), botergeel (blad); max 3 per scherm */
.vorm {
  width: 56px; height: 56px; 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); border-radius: 18px; }
.vorm-botergeel { background: var(--botergeel); border-radius: 50% 18px 50% 18px; }
.kaart-hover:hover .vorm { transform: rotate(-6deg) scale(1.08); }

/* ---------- De Lijn — het dossier reist langs de proceslijn en eindigt in de Ai-punt ---------- */
.lijn { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: stap; }
.lijn::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 26px; height: 4px; border-radius: 4px;
  background: rgba(37,51,43,.10); z-index: 0;
}
.lijn::after { /* de Ai-punt: einde van de lijn */
  content: ""; position: absolute; right: calc(4% - 9px); top: 19px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 3px 0 var(--accent-donker);
}
/* de vier stapkaarten zijn even groot, ook als de ene stap korter tekst heeft */
.stap { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; }
.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 .kaart { padding: 22px 18px; flex: 1 1 auto; }
.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; }

/* verticale variant (hoe-het-werkt, voorbeeld-dossier)
   De lijn is een lege goot die zich bij het scrollen vult, net als de
   dossierreis bij AItaxes. De vulhoogte zet klei.js. */
.lijn-v { position: relative; display: grid; gap: 26px; padding-left: 56px; }
.lijn-v::before {
  content: ""; position: absolute; left: 23px; top: 8px; bottom: 26px; width: 6px; border-radius: 999px;
  background: var(--room); box-shadow: inset 0 2px 0 rgba(37,51,43,.06);
}
.lijn-v .lijn-vul {
  position: absolute; left: 23px; top: 8px; width: 6px; height: 0; max-height: calc(100% - 34px);
  border-radius: 999px; background: var(--accent); transition: height .4s ease;
}
.lijn-v::after {
  content: ""; position: absolute; left: 17px; bottom: 8px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 3px 0 var(--accent-donker);
}
.lijn-v .halte { position: relative; }
.lijn-v .halte .bol {
  position: absolute; left: -56px; top: 8px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 900; font-size: 21px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 0 var(--accent-donker);
}
.lijn-v .halte .kaart h3 { margin-bottom: 10px; }
.lijn-v .halte .kaart p { color: var(--dof); font-size: 15.5px; }
.lijn-v .halte ul { margin: 12px 0 0 18px; color: var(--dof); font-size: 15px; display: grid; gap: 6px; }

/* statusbalk (klantlabels uit de zaakstraat) */
.statusbalk { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.statusbalk span {
  background: var(--room); border-radius: var(--radius-knop); padding: 8px 18px;
  font-size: 13.5px; font-weight: 700; box-shadow: 0 4px 0 rgba(37,51,43,.08); color: var(--dof);
}
.statusbalk span.actief { background: var(--knop-vlak); color: #fff; box-shadow: 0 4px 0 var(--knop-schaduw-kleur); }

/* ---------- prijzen ---------- */
.prijskaart { display: flex; flex-direction: column; }
.prijskaart .prijsregel { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 4px; }
.prijskaart .prijs { font-size: 40px; font-weight: 900; letter-spacing: -.01em; }
.prijskaart .prijs-sub { font-size: 13px; color: var(--dof); }
.prijskaart ul { list-style: none; margin: 16px 0 22px; display: grid; gap: 9px; }
.prijskaart ul li { padding-left: 28px; position: relative; font-size: 15px; color: var(--dof); }
.prijskaart ul li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--melk); color: var(--accent-donker); font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.prijskaart .knop { margin-top: auto; }
.badge {
  display: inline-block; align-self: flex-start; font-size: 12.5px; font-weight: 800; color: var(--accent-donker);
  background: var(--melk); border-radius: var(--radius-knop); padding: 5px 14px; margin-bottom: 6px;
}
.prijsvlak {
  background: var(--knop-vlak); border-radius: 36px; padding: 52px 40px; text-align: center;
  color: #fff; box-shadow: 0 12px 0 var(--knop-schaduw-kleur);
}
.prijsvlak h2 { color: #fff; }
.prijsvlak p { color: #fff; max-width: 36em; margin: 12px auto 28px; }
.vinkjes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.vinkjes span { background: rgba(255,255,255,.10); border-radius: var(--radius-knop); padding: 8px 18px; font-size: 13.5px; font-weight: 700; }

/* ---------- accordeon (FAQ) ---------- */
.accordeon { display: grid; gap: 14px; }
.accordeon details {
  background: var(--room); border-radius: 22px; box-shadow: 0 6px 0 rgba(37,51,43,.07);
  overflow: hidden;
}
.accordeon summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 800; font-size: 16.5px; padding: 20px 24px;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  background:
    linear-gradient(var(--accent-donker), var(--accent-donker)) center/14px 2.5px no-repeat,
    linear-gradient(var(--accent-donker), var(--accent-donker)) center/2.5px 14px no-repeat;
  border-radius: 2px; transition: transform .3s var(--veer);
}
.accordeon details[open] summary::after { transform: rotate(135deg); }
.accordeon .antwoord { padding: 0 24px 22px; color: var(--dof); font-size: 15.5px; }
.accordeon .antwoord p + p { margin-top: 10px; }
.accordeon .antwoord a { font-weight: 700; }

/* ---------- tabbladen ---------- */
.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.tabs [role="tab"] {
  cursor: pointer; border: 0; font-family: var(--font); font-size: 15px; font-weight: 800;
  background: var(--room); color: var(--inkt); border-radius: var(--radius-knop); padding: 11px 22px;
  box-shadow: 0 4px 0 rgba(37,51,43,.12); transition: transform .15s var(--veer), box-shadow .15s var(--veer);
}
.tabs [role="tab"]:hover { transform: translateY(-2px); }
.tabs [role="tab"][aria-selected="true"] { background: var(--knop-vlak); color: #fff; box-shadow: 0 4px 0 var(--knop-schaduw-kleur); }
[role="tabpanel"][hidden] { display: none; }
[role="tabpanel"] { animation: rijs .4s var(--veer) backwards; }

/* ---------- tabellen ---------- */
.tabelrol { overflow-x: auto; border-radius: var(--radius-kaart); }
table.klei {
  width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0;
  background: var(--room); border-radius: var(--radius-kaart); box-shadow: var(--klei-schaduw);
  font-size: 15px;
}
table.klei th, table.klei td { text-align: left; padding: 15px 20px; }
table.klei th { font-weight: 800; font-size: 14px; }
table.klei thead th { border-bottom: 2px solid var(--melk); }
table.klei tbody tr + tr td, table.klei tbody tr + tr th { border-top: 1px solid var(--melk); }
table.klei td { color: var(--dof); font-weight: 600; }
table.klei td.tabcijfers { color: var(--inkt); font-weight: 800; }

/* ---------- lijstjes & blokjes ---------- */
.checklijst { list-style: none; display: grid; gap: 10px; }
.checklijst li { padding-left: 30px; position: relative; color: var(--dof); font-size: 15.5px; }
.checklijst li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--room); color: var(--accent-donker); font-size: 12px; font-weight: 900;
  box-shadow: 0 2px 0 rgba(37,51,43,.10); display: flex; align-items: center; justify-content: center;
}
.kaart .checklijst li::before { background: var(--melk); box-shadow: none; }
.kruislijst { list-style: none; display: grid; gap: 10px; }
.kruislijst li { padding-left: 30px; position: relative; color: var(--dof); font-size: 15.5px; }
.kruislijst li::before {
  content: "→"; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--melk); color: var(--accent-donker); font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.let-op {
  background: var(--room); border-radius: 22px; padding: 20px 24px; box-shadow: 0 6px 0 rgba(37,51,43,.07);
  font-size: 15px; color: var(--dof);
}
.let-op b { color: var(--inkt); }

/* concept-markering voor juridische conceptteksten */
.concept-banner {
  background: var(--botergeel); border-radius: 22px; padding: 16px 22px; margin-bottom: 30px;
  font-size: 14.5px; font-weight: 700; color: var(--inkt);
  box-shadow: 0 6px 0 rgba(37,51,43,.08);
}

/* ---------- juridische documentpagina's (Inter) ---------- */
.doc { font-family: var(--font-doc); font-weight: 400; }
.doc h2, .doc h3 { font-family: var(--font); margin: 28px 0 10px; }
.doc .kaart > h2:first-child, .doc .kaart > h3:first-child { margin-top: 0; }
.doc p, .doc li { font-size: 15.5px; color: #3d4854; line-height: 1.7; }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { margin: 12px 0 12px 22px; display: grid; gap: 8px; }
.doc .kaart { padding: 36px 34px; }

/* ---------- kennisbank-artikelen ---------- */
.artikel { max-width: 760px; margin: 0 auto; padding: 0 26px 56px; }
.artikel .artkop { text-align: center; padding: 64px 0 40px; }
.artikel .artkop h1 { font-size: clamp(30px, 4.4vw, 46px); }
.artikel .artkop .meta { color: var(--dof); font-size: 14px; margin-top: 14px; }
.artikel h2 { font-size: clamp(22px, 3vw, 30px); margin: 40px 0 12px; }
.artikel h3 { margin: 26px 0 8px; }
.artikel p { margin: 12px 0; color: #3d4854; font-size: 16.5px; }
.artikel ul, .artikel ol { margin: 12px 0 12px 24px; display: grid; gap: 8px; color: #3d4854; font-size: 16px; }
.artikel .cta-kaart {
  background: var(--room); border-radius: var(--radius-kaart); padding: 26px 28px; margin: 30px 0;
  box-shadow: var(--klei-schaduw);
}
.artikel .cta-kaart p { margin: 0 0 14px; color: var(--dof); }
.artikel .rekenvoorbeeld {
  background: var(--room); border-radius: 22px; padding: 22px 26px; margin: 18px 0;
  box-shadow: 0 6px 0 rgba(37,51,43,.07); font-size: 15.5px;
}
.artikel .terug { display: inline-block; margin-top: 8px; font-weight: 800; text-decoration: none; }

/* ---------- formulieren ---------- */
.veld { display: grid; gap: 7px; margin-bottom: 18px; }
.veld label { font-weight: 800; font-size: 14.5px; }
.veld input, .veld textarea, .veld select {
  font-family: var(--font); font-weight: 600; font-size: 16px; color: var(--inkt);
  background: var(--room); border: 0; border-radius: 12px; padding: 14px 16px;
  box-shadow: inset 0 0 0 1.5px rgba(37,51,43,.10);
}
.kaart .veld input, .kaart .veld textarea, .kaart .veld select { background: var(--melk); box-shadow: none; }
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.veld .hint { font-size: 13px; color: var(--dof); }
.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* verplicht-markering + inline foutmeldingen */
.veld label .nodig { color: var(--accent-donker); }
.veld .foutmelding { font-size: 13px; font-weight: 800; color: #B23B33; }
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"], .veld select[aria-invalid="true"],
.kaart .veld input[aria-invalid="true"], .kaart .veld textarea[aria-invalid="true"], .kaart .veld select[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px #B23B33;
}

/* honingpot: onzichtbaar voor mensen, wél leesbaar voor schermlezers (die hem leeg laten) */
.veld-verborgen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* knop in laadstaat: ingedrukt en niet nogmaals te versturen */
.knop[data-bezig] { transform: translateY(6px); box-shadow: 0 0 0 var(--knop-schaduw-kleur); cursor: progress; }
.knop.wit[data-bezig] { box-shadow: 0 0 0 rgba(37,51,43,.18); }
.knop[disabled] { opacity: .9; }

.minipunt { font-size: 13px; color: var(--dof); margin-top: 12px; line-height: 1.5; }
.minipunt a { color: var(--dof); }

/* status na verzenden: succes (accentpunt) of fout (perzik) */
.formmelding { display: none; }
.formmelding.toon { display: block; animation: rijs .5s var(--veer) backwards; }
.formmelding .stip {
  width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 0 var(--accent-donker); margin-bottom: 16px;
}
.formmelding h3 { margin-bottom: 8px; font-size: 20px; }
.formmelding p { color: var(--dof); font-size: 15.5px; }
.formmelding p + p { margin-top: 10px; }
.formmelding.fout .stip { background: var(--perzik); color: var(--inkt); box-shadow: 0 5px 0 rgba(37,51,43,.14); }
.formmelding.fout a { font-weight: 800; }

/* ---------- wachtlijst ---------- */
.wachtvlak {
  background: var(--room); border-radius: 36px; padding: 44px 40px;
  box-shadow: var(--klei-schaduw), inset 0 2px 0 rgba(255,255,255,.9); position: relative;
}
.wachtvlak > .vorm-hoek {
  position: absolute; top: -26px; right: -18px; width: 96px; height: 96px; border-radius: 50% 18px 50% 18px;
  background: var(--botergeel); box-shadow: inset -6px -8px 0 rgba(37,51,43,.08); z-index: -1;
}
.wachtvlak .wachtkop { text-align: center; margin-bottom: 26px; }
.wachtvlak .wachtkop p { color: var(--dof); max-width: 34em; margin: 10px auto 0; }
.wachtvlak form { max-width: 560px; margin: 0 auto; }
.wachtvlak .knop { width: 100%; }
.wachtstrip { display: grid; gap: 4px; }
.wachtstrip .knop { width: auto; }

/* ---------- de mens erachter ---------- */
.mens { display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: start; }
.portretkaart {
  position: relative; background: var(--room); border-radius: var(--radius-kaart); padding: 14px;
  box-shadow: var(--klei-schaduw), inset 0 2px 0 rgba(255,255,255,.9);
}
.portretkaart img { border-radius: 20px; width: 100%; height: auto; }
.portretkaart .vorm-achter {
  position: absolute; top: -26px; left: -28px; width: 132px; height: 132px; border-radius: 50%;
  background: var(--lila); box-shadow: inset -7px -9px 0 rgba(37,51,43,.08); z-index: -1;
}
.portretkaart .naamplaat {
  margin-top: 14px; padding: 0 6px 4px; text-align: center;
}
.portretkaart .naamplaat b { display: block; font-size: 16px; font-weight: 800; }
.portretkaart .naamplaat span { font-size: 13.5px; color: var(--dof); }
.mens .tekst p + p { margin-top: 12px; }
.mens .tekst p { color: var(--dof); font-size: 16px; }
.mens .tekst p.leidend { color: var(--inkt); font-size: 17px; }

/* ---------- footer ---------- */
footer.site {
  padding: 56px 0 44px; margin-top: 40px;
}
.footgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 36px; }
.footgrid h2 { font-size: 14px; font-weight: 800; line-height: 1.3; margin-bottom: 12px; }
.footgrid ul { list-style: none; display: grid; gap: 8px; }
.footgrid a { text-decoration: none; color: var(--dof); font-size: 14.5px; font-weight: 600; }
.footgrid a:hover { color: var(--inkt); }
.footgrid .merkkolom p { color: var(--dof); font-size: 14px; margin-top: 12px; max-width: 26em; }
.footnoot { text-align: center; color: var(--dof); font-size: 13.5px; border-top: 1px solid rgba(37,51,43,.08); padding-top: 26px; }
.footnoot a { color: var(--dof); }
.footnoot .zusters { display: block; margin-top: 10px; font-size: 12.5px; color: var(--dof); opacity: .85; }
.footnoot .zusters b { font-weight: 800; color: var(--inkt); }

/* ---------- beweging: rijs / pop / zweef ---------- */
@keyframes rijs { from { opacity: 0; transform: translateY(22px); } }
@keyframes pop { from { transform: scale(0); } }
@keyframes zweef { 50% { transform: translateY(-12px); } }
@keyframes drijf { 50% { transform: translateX(16px) translateY(-6px); } }
@keyframes bob { 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .intro, .hero .acties, .hero .ballon, .hero .kicker { animation: rijs .65s var(--veer) backwards; }
  .hero .intro { animation-delay: .12s; }
  .hero .acties { animation-delay: .22s; }
  .hero .ballon { animation: rijs .65s var(--veer) .34s backwards, bob 4s ease-in-out 1.4s infinite; }
  .zon { animation: zweef 7s ease-in-out infinite; }
  .wolk { animation: drijf 11s ease-in-out infinite; }

  /* scroll-onthulling: trapsgewijs, veerkrachtig */
  .js .onthul { opacity: 0; }
  .js .onthul.zichtbaar { opacity: 1; animation: rijs .65s var(--veer) backwards; }
  .js .onthul.zichtbaar.v2 { animation-delay: .1s; }
  .js .onthul.zichtbaar.v3 { animation-delay: .2s; }
  .js .onthul.zichtbaar.v4 { animation-delay: .3s; }
  .js .stap.onthul.zichtbaar .bol, .js .halte.onthul.zichtbaar .bol { animation: pop .5s var(--veer-pop) .25s backwards; }
  .js .lijn.onthul::before { transform: scaleX(0); transform-origin: left; }
  .js .lijn.onthul.zichtbaar::before { transform: scaleX(1); transition: transform .9s var(--veer) .15s; }
  .js .lijn.onthul::after { transform: scale(0); }
  .js .lijn.onthul.zichtbaar::after { transform: scale(1); transition: transform .45s var(--veer-pop) .95s; }
  .js .prijsvlak.onthul.zichtbaar .vinkjes span { animation: rijs .5s ease backwards .15s; }
  .js .prijsvlak.onthul.zichtbaar .vinkjes span:nth-child(2) { animation-delay: .27s; }
  .js .prijsvlak.onthul.zichtbaar .vinkjes span:nth-child(3) { animation-delay: .39s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */

/* De pillenrij heeft met "Over ons" erbij ruim 1020px nodig. Daaronder de
   hamburger, anders duwt de navigatie de pagina zijwaarts open. */
@media (max-width: 1039px) {
  .navlinks { display: none; }
  .hamburger { display: block; padding: 14px; }
}

@media (max-width: 980px) {
  .kaarten { grid-template-columns: repeat(2, 1fr); }
  .lijn { grid-template-columns: repeat(2, 1fr); }
  .lijn::before, .lijn::after { display: none; }
  .footgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .mens { grid-template-columns: 1fr; gap: 26px; justify-items: center; }
  .portretkaart { max-width: 300px; }
  .mens .tekst { max-width: 640px; }
}
@media (max-width: 680px) {
  section { padding: 44px 0; }
  /* kop iets kleiner op smalle schermen, zodat gewone woorden ("zonder") heel blijven */
  h1 { font-size: clamp(30px, 9vw, 44px); }
  h2 { font-size: clamp(24px, 6.4vw, 32px); }
  /* lange samenstellingen (bv. "Vaststellingsovereenkomst?") netjes afbreken i.p.v. afkappen */
  h1, h2 { overflow-wrap: break-word; hyphens: auto; }
  /* in de hoofdkop liever een extra regel dan een afbreekstreepje midden in een gewoon
     woord ("Wij re-gelen"); overflow-wrap vangt op wat écht niet past. */
  h1 { hyphens: manual; }
  /* artikelkoppen zijn lang; liever een extra regel dan twee afbreekstreepjes
     ("huurwo-ning"). overflow-wrap vangt op wat écht niet past. */
  .artikel .artkop h1 { font-size: clamp(27px, 7.6vw, 40px); hyphens: manual; }
  .kaarten, .kaarten-2, .lijn { grid-template-columns: 1fr; }
  .veldrij { grid-template-columns: 1fr; }
  .wachtvlak { padding: 34px 22px; }
  .wachtvlak > .vorm-hoek { width: 70px; height: 70px; top: -18px; right: -8px; }
  .portretkaart .vorm-achter { width: 96px; height: 96px; top: -18px; left: -18px; }
  .hero { padding: 48px 0 40px; }
  .zon { width: 64px; height: 64px; right: 4%; top: 12px; }
  .wolk { display: none; }
  .prijsvlak { padding: 40px 24px; }
  .footgrid { grid-template-columns: 1fr; }
  .lijn-v { padding-left: 0; }
  .lijn-v::before, .lijn-v::after, .lijn-v .lijn-vul { display: none; }
  .lijn-v .halte .bol { position: static; margin-bottom: 14px; }
  .online-strip { grid-template-columns: 1fr; }
}

/* zeer smalle toestellen (320px): iets minder lucht opzij, koppen blijven heel */
@media (max-width: 380px) {
  .wrap, .wrap-smal, .artikel, .kruimelbalk.smal { padding-left: 18px; padding-right: 18px; }
  .kaart { padding: 24px 20px; }
  .wachtvlak { padding: 28px 18px; }
  .prijsvlak { padding: 34px 18px; }
  .doc .kaart { padding: 26px 20px; }
  .prijskaart .prijs { font-size: 34px; }
  .mobielcta .knop { padding: 13px 15px; font-size: 14px; }
  .mobielcta .tekst { font-size: 12.5px; }
}

/* de sticky balk mag nooit de laatste regel content afdekken */
@media (max-width: 767px) {
  body.cta-actief footer.site { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- aanraakvlakken op touch-schermen: minimaal 44x44 ---------- */
@media (max-width: 959px) {
  .knop.klein { padding: 13px 22px; }
  .kruimelbalk { padding-top: 2px; }
  .kruimels a, .kruimels li[aria-current="page"] {
    display: inline-block; padding: 11px 3px;
  }
  .merk { min-height: 44px; }
  .tabs [role="tab"] { padding: 12px 22px; }
  .portretkaart .naamplaat a { display: inline-block; padding: 12px 6px; }
  .footgrid ul { gap: 0; }
  .footgrid a { display: inline-block; padding: 11px 0; }
  .footnoot a { display: inline-block; padding: 6px 0; }
  .artikel .terug { padding: 11px 0; }
  .mobielmenu a { padding: 13px 16px; }
}