/* ═══════════════════════════════════════════════════════════════════
   SPIL — spilautomation.com · Design Language v2 op het v3-palet
   Eén as draagt de pagina. Lime bestaat alleen met betekenis.
   Bron: docs/library/design-bible (WEBSITE_BIBLE · DESIGN_LANGUAGE_V2 ·
   FORBIDDEN_LANGUAGE · DESIGN_SYSTEM) en brand-book/SPIL_BRAND_BOOK.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Letter — Archivo, zelf gehost (geen externe requests) ─────── */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
}

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
:root{
  /* de vijf lagen — nooit puur zwart */
  --bg:#111111;
  --bg-2:#181818;
  --vlak:#202020;
  --vlak-hover:#252525;
  --verhoogd:#2A2A2A;

  /* inkt */
  --tekst:#F5F5F5;
  --tekst-2:#B5B5B5;
  --tekst-3:#8D8D8D;

  /* betekenis */
  --lime:#A3FF3F;
  --lime-inkt:#121212;
  --succes:#65D96D;
  --waarschuwing:#FFB547;
  --gevaar:#FF5C5C;
  --info:#59C7FF;

  /* lijnen */
  --lijn:rgba(255,255,255,.06);
  --lijn-2:rgba(255,255,255,.12);
  --lijn-3:rgba(255,255,255,.22);

  /* maat */
  --as:112px;
  --omhulsel:1240px;
  --goot:24px;
  --rand:clamp(20px,4vw,48px);
  --ruimte:clamp(104px,13vw,184px);
  --r-10:10px; --r-14:14px; --r-20:20px;

  /* letter */
  --letter:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* beweging — het zetten */
  --traag:cubic-bezier(.16,1,.3,1);
  --vloei:cubic-bezier(.22,.8,.3,1);

  color-scheme:dark;
}

/* ── 2. Basis ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--letter);
  font-size:17px;
  line-height:1.55;
  color:var(--tekst);
  background:var(--bg);
  font-feature-settings:"tnum" 1,"liga" 1;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* één koele werklamp van boven — licht op materiaal, geen verloop tussen kleuren */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1200px 520px at 38% -220px,rgba(255,255,255,.04),transparent 70%);
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
p{margin:0;max-width:58ch}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd,dt{margin:0}
::selection{background:rgba(163,255,63,.28);color:var(--tekst)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:fixed;top:12px;left:12px;z-index:500;transform:translateY(-200%);
  background:var(--lime);color:var(--lime-inkt);font-weight:600;font-size:14px;
  padding:10px 16px;border-radius:var(--r-10);transition:transform .16s var(--vloei);
}
.skip:focus-visible{transform:none;outline-offset:2px}

/* ── 3. Typografie — de SPIL-snede ─────────────────────────────────── */
.display{font-size:clamp(44px,7.2vw,104px);line-height:.96;letter-spacing:-.045em;font-weight:640;max-width:14ch}
h1{font-size:clamp(38px,5.6vw,76px);line-height:.98;letter-spacing:-.042em;font-weight:640;max-width:18ch}
h2{font-size:clamp(30px,4vw,54px);line-height:1.02;letter-spacing:-.038em;font-weight:620;max-width:20ch}
h3{font-size:clamp(21px,2.2vw,28px);line-height:1.16;letter-spacing:-.026em;font-weight:600;max-width:26ch}
h4{font-size:18px;line-height:1.3;letter-spacing:-.014em;font-weight:600}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--tekst-2);letter-spacing:-.012em;max-width:46ch}
.zacht{color:var(--tekst-2)}
.gedempt{color:var(--tekst-3)}
.klein{font-size:14px;line-height:1.5}
.label{font-size:13.5px;line-height:1.4;color:var(--tekst-3);letter-spacing:-.004em}
.label b{color:var(--tekst-2);font-weight:500}
strong{font-weight:600;color:var(--tekst)}
em{font-style:normal;color:var(--tekst)}
.lijn-boven{border-top:1px solid var(--lijn);padding-top:24px}
.stapel{display:grid;gap:14px;align-content:start}
.stapel-s{display:grid;gap:8px;align-content:start}
.stapel-l{display:grid;gap:28px;align-content:start}

/* ── 4. Omhulsel en de as ──────────────────────────────────────────── */
.omhulsel{max-width:calc(var(--omhulsel) + var(--as));margin-inline:auto;padding-inline:var(--rand)}
.op-as{display:grid;grid-template-columns:var(--as) minmax(0,1fr);position:relative}
.op-as::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;background:var(--lijn-2)}
.inhoud{min-width:0}
.sectie{padding-block:var(--ruimte);position:relative}
.sectie + .sectie{padding-top:0}
.sectie > .moment{position:absolute;left:calc(-1 * var(--as));top:var(--ruimte);width:48px;height:28px}
.sectie + .sectie > .moment{top:0}
.moment .nr{
  position:absolute;left:0;top:-4px;width:48px;height:28px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--tekst-3);font-size:13px;letter-spacing:.02em;font-weight:500;
}
.sectie-kop{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,72px)}
.sectie-kop .label{order:-1}
.sectie-kop .lead{margin-top:6px}
.kolommen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--goot)}
.k-7{grid-column:span 7}.k-5{grid-column:span 5}.k-6{grid-column:span 6}.k-4{grid-column:span 4}.k-8{grid-column:span 8}.k-12{grid-column:1/-1}
.k-start-2{grid-column-start:2}

/* ── 5. Navigatie ──────────────────────────────────────────────────── */
.kop{
  position:sticky;top:0;z-index:100;background:rgba(17,17,17,.92);
  border-bottom:1px solid var(--lijn);
}
@supports (backdrop-filter:blur(1px)){.kop{background:rgba(17,17,17,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
.kop .omhulsel{display:flex;align-items:center;gap:32px;height:66px}
.woordmerk{font-weight:700;font-size:19px;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:10px;margin-right:auto}
.woordmerk i{width:6px;height:6px;border-radius:50%;background:var(--tekst-3);display:block}
.woordmerk span{color:var(--tekst-3);font-weight:500;letter-spacing:-.01em;font-size:15px}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:15px;color:var(--tekst-2);padding:8px 0;position:relative;transition:color .16s}
.nav a:hover{color:var(--tekst)}
.nav a[aria-current="page"]{color:var(--tekst)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--tekst)}
.nav .knop,.nav .knop:hover{margin-left:8px;padding:0 18px;font-size:14px;color:var(--lime-inkt)}
.nav .knop::after{display:none}
.menuknop{display:none;height:40px;padding:0 14px;border:1px solid var(--lijn-2);border-radius:var(--r-10);font-size:14px;color:var(--tekst)}
.menuknop[aria-expanded="true"]{background:var(--vlak)}

/* ── 6. Knoppen — één primaire per compositie ──────────────────────── */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border-radius:var(--r-10);
  font-weight:600;font-size:15.5px;letter-spacing:-.012em;white-space:nowrap;
  border:1px solid transparent;position:relative;overflow:hidden;flex-shrink:0;
  transition:background .18s var(--vloei),border-color .18s,color .18s,transform .18s var(--vloei);
}
.knop-primair{background:var(--lime);color:var(--lime-inkt);padding-left:22px}
.knop-primair::before{ /* de stip schuift binnen bij aanraking */
  content:"";width:7px;height:7px;border-radius:50%;background:var(--lime-inkt);
  margin-left:-17px;opacity:0;transition:margin .22s var(--traag),opacity .22s;
}
.knop-primair:hover::before,.knop-primair:focus-visible::before{margin-left:0;opacity:1}
.knop-primair:hover{background:#B0FF5C}
.knop-secundair{border-color:var(--lijn-2);color:var(--tekst);background:transparent}
.knop-secundair:hover{background:var(--vlak);border-color:var(--lijn-3)}
.knop-tertiair{padding:0 0 2px;min-height:0;border-radius:0;color:var(--tekst);font-weight:500;border-bottom:1px solid var(--lijn-3);transition:border-color .16s}
.knop-tertiair:hover{border-color:var(--tekst)}
.knop-klein{min-height:40px;padding:0 18px;font-size:14px}
.knop:disabled{opacity:.55;cursor:not-allowed}
.acties{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.acties .gedempt{font-size:14px}

/* ── 7. Hero ───────────────────────────────────────────────────────── */
.hero{padding-block:clamp(56px,8vw,112px) 0}
.hero-kop{display:grid;gap:28px;max-width:960px}
.hero-kop .lead{max-width:52ch}
.hero-regel{display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--tekst-3);font-size:14px}
.hero-regel span{display:inline-flex;align-items:center;gap:10px}
.hero-regel span.wacht::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);animation:adem 3.2s ease-in-out infinite}
@keyframes adem{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}

/* het zetten — alleen de hero komt aan */
.zet{opacity:.001;transform:translateY(14px)}
.gezet .zet{opacity:1;transform:none;transition:opacity .6s var(--traag),transform .7s var(--traag)}
.gezet .zet:nth-child(2){transition-delay:.06s}
.gezet .zet:nth-child(3){transition-delay:.12s}
.gezet .zet:nth-child(4){transition-delay:.18s}
.gezet .zet:nth-child(5){transition-delay:.24s}
html:not(.js) .zet{opacity:1;transform:none}

/* ── 8. Het toneel en de close-up ─────────────────────────────────── */
.toneel{
  margin-top:clamp(40px,6vw,80px);position:relative;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r-20);
  padding:10px;transform:perspective(1600px) rotateX(1.6deg);transform-origin:50% 0;
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 40px 80px -40px rgba(0,0,0,.8),0 80px 140px -60px rgba(0,0,0,.7);
  transition:transform .8s var(--traag);
}
.toneel:hover,.toneel:focus-within{transform:perspective(1600px) rotateX(0deg)}
.toneel-scherm{border-radius:14px;overflow:hidden;background:#141414;border:1px solid var(--lijn)}
.toneel-scherm img{width:100%;height:auto}
.toneel-scherm.uitsnede{aspect-ratio:16/8.4}
.toneel-scherm.uitsnede img{height:100%;object-fit:cover;object-position:top}
.toneel-onder{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding:14px 8px 4px}
.toneel-onder .label{max-width:60ch}
.etiket{
  display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:999px;
  font-size:12.5px;font-weight:500;color:var(--tekst-2);border:1px solid var(--lijn-2);white-space:nowrap;
}
.etiket::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tekst-3)}
.etiket-gemeten{color:var(--tekst);border-color:rgba(163,255,63,.45)}
.etiket-gemeten::before{background:var(--lime)}
.etiket-lopend::before{background:var(--tekst-2)}
.etiket-voorbeeld::before{background:transparent;border:1px solid var(--tekst-3)}
.etiket-concept{border-style:dashed}
.etiket-concept::before{background:transparent;border:1px dashed var(--tekst-3)}

.detail{display:grid;gap:14px;align-content:start}
.detail figure{margin:0;display:grid;gap:14px}
.detail-beeld{
  border-radius:var(--r-14);overflow:hidden;background:var(--vlak);border:1px solid var(--lijn);
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset;
}
.detail-beeld img{width:100%;height:auto}
.detail figcaption{display:grid;gap:6px}
.detail figcaption b{font-weight:600;color:var(--tekst)}
.detail figcaption span{color:var(--tekst-2);font-size:15px;line-height:1.5}
.close-ups{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--goot);margin-top:var(--goot);align-items:start}
.close-ups .detail:nth-child(1){grid-column:1;grid-row:1}
.close-ups .detail:nth-child(2){grid-column:2;grid-row:1 / span 2;max-width:400px}
.close-ups .detail:nth-child(3){grid-column:1;grid-row:2}

/* ── 9. Het register — een gewone woensdag ─────────────────────────── */
.register{border-top:1px solid var(--lijn-2);display:grid}
.register-kop{display:flex;justify-content:space-between;gap:16px;padding:14px 0;color:var(--tekst-3);font-size:14px;border-bottom:1px solid var(--lijn)}
.regel{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px 20px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--lijn);text-align:left;width:100%;color:inherit;
  transition:background .18s;
}
.regel time{color:var(--tekst-3);font-size:14px}
.regel .wat{display:grid;gap:4px}
.regel .wat b{font-weight:500;color:var(--tekst)}
.regel .wat span{color:var(--tekst-3);font-size:15px;max-width:58ch}
.regel .gevolg{color:var(--tekst-3);font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.regel .gevolg::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--tekst-3);transition:background .18s,border-color .18s}
.regel[aria-pressed="true"]{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent)}
.regel[aria-pressed="true"] .gevolg{color:var(--tekst)}
.regel[aria-pressed="true"] .gevolg::before{background:var(--lime);border-color:var(--lime)}
.register-som{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 28px;padding:20px 0 0;align-items:baseline}
.register-som .stat-getal{font-size:clamp(28px,3vw,40px)}
.register-som .label{max-width:52ch}

/* ── 10. Chaos → orde — de doorsnede ───────────────────────────────── */
.orde{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);column-gap:0;align-items:stretch;margin-top:8px}
.orde-kop{display:contents}
.orde-kop span{padding:0 0 14px;font-size:13.5px;color:var(--tekst-3);border-bottom:1px solid var(--lijn)}
.orde-kop span:nth-child(3){text-align:right}
.orde-rij{display:contents}
.orde-rij > *{padding:16px 0;border-bottom:1px solid var(--lijn)}
.orde-in{display:grid;gap:3px;padding-right:20px!important;position:relative}
.orde-in::after{content:"";position:absolute;right:0;top:50%;width:20px;height:1px;background:var(--lijn-3)}
.orde-in b{font-weight:500;color:var(--tekst)}
.orde-in span,.orde-uit span{color:var(--tekst-3);font-size:14.5px}
.orde-as{position:relative;background:linear-gradient(var(--lijn-3),var(--lijn-3)) center/100% 1px no-repeat}
.orde-as::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--lijn-3)}
.orde-as::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--bg);border:1.5px solid var(--tekst-2)}
.orde-as.wacht::after{background:var(--lime);border-color:var(--lime);animation:adem 3.2s ease-in-out infinite}
.orde-uit{display:grid;gap:3px;padding-left:20px!important;position:relative;text-align:right}
.orde-uit::before{content:"";position:absolute;left:0;top:50%;width:20px;height:1px;background:var(--lijn-3)}
.orde-uit b{font-weight:500;color:var(--tekst)}
.orde-uit b.lime{color:var(--lime)}
.orde-slot{grid-column:1/-1;padding-top:28px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between}
.orde-slot .stelling{font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.03em;font-weight:600;max-width:24ch}

/* ── 11. Tweeluik partner / product ───────────────────────────────── */
.tweeluik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--goot);border-top:1px solid var(--lijn-2)}
.tweeluik > div{padding-top:24px;display:grid;gap:14px;align-content:start;position:relative}
.tweeluik > div + div::before{content:"";position:absolute;left:calc(var(--goot) / -2);top:24px;bottom:0;width:1px;background:var(--lijn)}
.tweeluik h3{max-width:22ch}
.tweeluik ul{display:grid;gap:8px;color:var(--tekst-2);margin-top:6px}
.tweeluik li{padding-left:18px;position:relative}
.tweeluik li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tekst-3)}

/* ── 12. Statregel — de cijferwet ─────────────────────────────────── */
.stat{display:grid;gap:6px;align-content:start}
.stat-getal{font-size:clamp(44px,6vw,88px);line-height:.95;letter-spacing:-.05em;font-weight:640;font-variant-numeric:tabular-nums}
.stat-getal small{font-size:.42em;letter-spacing:-.02em;color:var(--tekst-2);font-weight:500;margin-left:.2em}
.stat-getal.lime{color:var(--lime)}
.stat .verhaal{color:var(--tekst-2);max-width:40ch;font-size:16px}
.stat-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--goot);border-top:1px solid var(--lijn-2);padding-top:24px}
.stat-rij .stat-getal{font-size:clamp(32px,3.6vw,52px)}

/* ── 13. Uurwerk-grafiek ──────────────────────────────────────────── */
.grafiek{display:grid;gap:14px}
.grafiek-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;align-items:baseline}
.grafiek-kop h4{max-width:32ch}
.grafiek svg{width:100%;height:auto;overflow:visible}
.staaf{fill:#3A3A3A;transition:fill .16s}
.staaf:hover,.staaf:focus{fill:#5A5A5A;outline:0}
.staaf.nu{fill:var(--lime)}
.staaf.nu:hover{fill:#B0FF5C}
.grafiek-uitlees{min-height:24px;font-size:15px;color:var(--tekst-2)}
.grafiek-uitlees b{color:var(--tekst);font-weight:600}
.grafiek-tabel{font-size:14px;color:var(--tekst-2)}
.grafiek-tabel summary{cursor:pointer;color:var(--tekst-3);list-style:none;display:inline-block;border-bottom:1px solid var(--lijn-3)}
.grafiek-tabel summary::-webkit-details-marker{display:none}
.grafiek-tabel table{border-collapse:collapse;margin-top:12px;width:100%;max-width:520px}
.grafiek-tabel td,.grafiek-tabel th{text-align:left;padding:6px 12px 6px 0;border-bottom:1px solid var(--lijn);font-weight:400}
.grafiek-tabel th{color:var(--tekst-3)}

/* ── 14. Momenten op een as (werkwijze, stappen, cases) ───────────── */
.stappen{display:grid;border-top:1px solid var(--lijn-2)}
.stap{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--goot);padding:28px 0;border-bottom:1px solid var(--lijn);align-items:start}
.stap .nr-s{color:var(--tekst-3);font-size:14px;padding-top:6px;position:relative;padding-left:18px}
.stap .nr-s::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--tekst-3)}
.stap.gedaan .nr-s::before{background:var(--tekst-2);border-color:var(--tekst-2)}
.stap.nu .nr-s::before{background:var(--lime);border-color:var(--lime);animation:adem 3.2s ease-in-out infinite}
.stap-in{display:grid;gap:10px}
.stap-in h3{max-width:30ch}
.stap-in p{color:var(--tekst-2)}
.stap-feiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--goot);margin-top:8px;padding-top:14px;border-top:1px solid var(--lijn)}
.stap-feiten div{display:grid;gap:4px;font-size:15px;color:var(--tekst-2)}
.stap-feiten dt{color:var(--tekst-3);font-size:13.5px}
.stap-feiten dd{color:var(--tekst-2)}
.stap-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--tekst-3);margin-top:4px}
.stap-meta b{color:var(--tekst-2);font-weight:500}
.stappen-compact .stap{padding:18px 0;grid-template-columns:56px minmax(0,1fr)}
.stappen-compact h3{font-size:19px}

/* ── 15. Besluiten (Decision Layer) ───────────────────────────────── */
.besluiten{display:grid;gap:12px}
.besluit{
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r-14);padding:20px 22px;
  display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;align-items:start;
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset;
}
.besluit i{width:8px;height:8px;border-radius:50%;background:var(--lime);margin-top:9px;display:block}
.besluit .feit{font-weight:500}
.besluit .reden{color:var(--tekst-3);font-size:15px;margin-top:4px}
.besluit .keuze{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:14px;color:var(--tekst-2)}
.besluit .keuze span{padding:6px 12px;border:1px solid var(--lijn-2);border-radius:999px}

/* ── 16. Lijsten met betekenis ────────────────────────────────────── */
.feiten{display:grid;border-top:1px solid var(--lijn-2)}
.feit-rij{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:var(--goot);padding:20px 0;border-bottom:1px solid var(--lijn)}
.feit-rij dt{font-weight:500;color:var(--tekst)}
.feit-rij dd{color:var(--tekst-2)}
.feit-rij dd p{max-width:60ch}
.feiten-stapel .feit-rij{grid-template-columns:1fr;gap:6px}
.pad{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:var(--goot);padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--lijn-2)}
.pad:last-of-type{border-bottom:1px solid var(--lijn-2)}
.pad-kop{display:grid;gap:12px;align-content:start;position:sticky;top:90px}
.pad-kop .nr-p{color:var(--tekst-3);font-size:14px}
.pad-in{display:grid;gap:18px}
.pad-in dl{display:grid;gap:14px}
.pad-in dt{color:var(--tekst-3);font-size:13.5px}
.pad-in dd{color:var(--tekst-2)}
.pad-in dd p{max-width:62ch}
.pad-in .modules{display:flex;flex-wrap:wrap;gap:8px}
.pad-in .modules span{font-size:13.5px;color:var(--tekst-2);border:1px solid var(--lijn-2);border-radius:999px;padding:5px 11px}
.branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--goot);border-top:1px solid var(--lijn-2)}
.branche{padding:24px 0;border-bottom:1px solid var(--lijn);display:grid;gap:12px;align-content:start}
.branche ul{display:grid;gap:6px;color:var(--tekst-2);font-size:15.5px}
.branche li{padding-left:18px;position:relative}
.branche li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tekst-3)}
.branche .start{font-size:15px;color:var(--tekst-2);padding-top:10px;border-top:1px solid var(--lijn)}
.branche .start b{color:var(--tekst);font-weight:500}

/* ── 17. Situatiekeuze → pakket ───────────────────────────────────── */
.situaties{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--goot)}
.situatie-lijst{display:grid;border-top:1px solid var(--lijn-2)}
.situatie-lijst label{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;padding:18px 0;
  border-bottom:1px solid var(--lijn);cursor:pointer;color:var(--tekst-2);transition:color .16s;
}
.situatie-lijst label:hover{color:var(--tekst)}
.situatie-lijst input{appearance:none;width:14px;height:14px;margin:6px 4px 0;border-radius:50%;border:1.5px solid var(--tekst-3);transition:background .16s,border-color .16s}
.situatie-lijst input:checked{background:var(--lime);border-color:var(--lime)}
.situatie-lijst input:checked + span{color:var(--tekst)}
.situatie-lijst input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.situatie-lijst label span{display:grid;gap:3px}
.situatie-lijst label span small{color:var(--tekst-3);font-size:14px}
.situatie-uit{display:grid;align-content:start}
.pakket-kaart{display:none;gap:16px;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r-20);padding:clamp(22px,3vw,36px);box-shadow:0 1px 0 rgba(255,255,255,.045) inset}
.situaties:has(#sit-1:checked) #pk-1,.situaties:has(#sit-2:checked) #pk-2,.situaties:has(#sit-3:checked) #pk-3,.situaties:has(#sit-4:checked) #pk-4{display:grid}
.pakket-kaart .prijs{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline;padding-top:16px;border-top:1px solid var(--lijn)}
.pakket-kaart .prijs b{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.04em;font-weight:640}
.pakket-kaart .prijs span{color:var(--tekst-3);font-size:14px}
.pakket-kaart ul{display:grid;gap:8px;color:var(--tekst-2)}
.pakket-kaart li{padding-left:18px;position:relative}
.pakket-kaart li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tekst-3)}
.pakket-kaart .acties{margin-top:6px}

/* ── 18. Pakketten (prijzenpagina) ────────────────────────────────── */
.pakketten{display:grid;gap:var(--goot)}
.pakket{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:var(--goot);padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--lijn-2)}
.pakket:last-child{border-bottom:1px solid var(--lijn-2)}
.pakket.aanbevolen{position:relative}
.pakket.aanbevolen::before{content:"";position:absolute;left:calc(-1 * var(--as) + 20px);top:calc(clamp(28px,4vw,44px) + 4px);width:9px;height:9px;border-radius:50%;background:var(--tekst)}
.pakket-kop{display:grid;gap:10px;align-content:start}
.pakket-kop .naam{font-size:14px;color:var(--tekst-3)}
.pakket-kop h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;max-width:16ch}
.pakket-kop .voor{color:var(--tekst-2)}
.pakket-in{display:grid;gap:18px;align-content:start}
.prijsregel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--goot);padding-bottom:18px;border-bottom:1px solid var(--lijn)}
.prijsregel div{display:grid;gap:2px}
.prijsregel b{font-size:clamp(26px,2.8vw,38px);letter-spacing:-.04em;font-weight:640;line-height:1.05}
.prijsregel b small{font-size:.5em;color:var(--tekst-3);font-weight:500;letter-spacing:-.01em;margin-left:.25em}
.prijsregel span{color:var(--tekst-3);font-size:14px}
.uitkomsten{display:grid;gap:8px;color:var(--tekst-2)}
.uitkomsten li{padding-left:18px;position:relative}
.uitkomsten li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tekst-3)}
.vouw{border-top:1px solid var(--lijn)}
.vouw summary{cursor:pointer;list-style:none;padding:14px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--tekst-2);font-size:15px}
.vouw summary::-webkit-details-marker{display:none}
.vouw summary::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .2s var(--traag)}
.vouw[open] summary::after{background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat}
.vouw summary:hover{color:var(--tekst)}
.vouw-in{padding:0 0 18px;color:var(--tekst-2);display:grid;gap:8px;font-size:15.5px}
.vouw-in li{padding-left:18px;position:relative}
.vouw-in li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tekst-3)}

/* ── 19. Vragen ───────────────────────────────────────────────────── */
.vragen{display:grid;border-top:1px solid var(--lijn-2);max-width:820px}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.015em}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";width:14px;height:14px;flex:none;background:linear-gradient(var(--tekst-2),var(--tekst-2)) center/14px 1.5px no-repeat,linear-gradient(var(--tekst-2),var(--tekst-2)) center/1.5px 14px no-repeat;transition:transform .22s var(--traag)}
.vraag[open] summary::after{transform:rotate(45deg)}
.vraag p{color:var(--tekst-2);padding-bottom:22px;max-width:64ch}
.vraag p + p{margin-top:-10px}

/* ── 20. Vertrouwen / feitenrooster ───────────────────────────────── */
.zeker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--goot);border-top:1px solid var(--lijn-2)}
.zeker div{padding:22px 0;border-bottom:1px solid var(--lijn);display:grid;gap:6px}
.zeker b{font-weight:600}
.zeker p{color:var(--tekst-2);font-size:15.5px}

/* ── 21. Het slot ─────────────────────────────────────────────────── */
.slot{padding-block:var(--ruimte);text-align:center;border-top:1px solid var(--lijn)}
.slot .omhulsel{display:grid;justify-items:center;gap:26px}
.slot h2{max-width:16ch;font-size:clamp(34px,5vw,68px);letter-spacing:-.045em}
.slot .lead{text-align:center;max-width:44ch}
.slot .acties{justify-content:center}
.slot .gedempt{font-size:14px;max-width:44ch}
.slot .gedempt a{color:var(--tekst-2);border-bottom:1px solid var(--lijn-3)}

/* ── 22. Voet ─────────────────────────────────────────────────────── */
.voet{border-top:1px solid var(--lijn);padding-block:48px 36px;color:var(--tekst-3);font-size:14.5px}
.voet .omhulsel{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.voet h4{font-size:13.5px;color:var(--tekst-3);font-weight:500;margin-bottom:14px}
.voet ul{display:grid;gap:9px}
.voet a:hover{color:var(--tekst)}
.voet .merk{display:grid;gap:14px;align-content:start}
.voet .merk p{max-width:32ch}
.voet-onder{grid-column:1/-1;border-top:1px solid var(--lijn);padding-top:20px;margin-top:8px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:13.5px}

/* ── 23. Formulieren ──────────────────────────────────────────────── */
.formulier{display:grid;gap:26px}
.veld{display:grid;gap:8px}
.veld > label,.veld > .veld-label{font-size:15px;font-weight:500}
.veld .hint{color:var(--tekst-3);font-size:14px}
.invoer{
  width:100%;min-height:48px;padding:12px 14px;background:var(--bg-2);border:1px solid var(--lijn-2);
  border-radius:var(--r-10);color:var(--tekst);transition:border-color .16s,background .16s;
}
.invoer::placeholder{color:var(--tekst-3)}
.invoer:hover{border-color:var(--lijn-3)}
.invoer:focus{outline:0;border-color:var(--lime);background:var(--bg)}
textarea.invoer{min-height:132px;resize:vertical;line-height:1.5}
select.invoer{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tekst-3) 50%),linear-gradient(-45deg,transparent 50%,var(--tekst-3) 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.veld-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.fout{color:var(--gevaar);font-size:14px;display:none}
.veld.mis .fout{display:block}
.veld.mis .invoer{border-color:rgba(255,92,92,.6)}
.keuzes{display:flex;flex-wrap:wrap;gap:10px}
.keuze{position:relative}
.keuze input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.keuze span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--lijn-2);border-radius:999px;color:var(--tekst-2);font-size:15px;transition:border-color .16s,color .16s,background .16s}
.keuze span::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--tekst-3);transition:background .16s,border-color .16s}
.keuze input:hover + span{border-color:var(--lijn-3);color:var(--tekst)}
.keuze input:checked + span{color:var(--tekst);border-color:var(--lijn-3);background:var(--vlak)}
.keuze input:checked + span::before{background:var(--lime);border-color:var(--lime)}
.keuze input:focus-visible + span{outline:2px solid var(--lime);outline-offset:3px}
.akkoord{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;color:var(--tekst-2)}
.akkoord input{appearance:none;width:18px;height:18px;margin-top:3px;border:1.5px solid var(--tekst-3);border-radius:5px;display:grid;place-content:center;transition:background .16s,border-color .16s}
.akkoord input::before{content:"";width:9px;height:5px;border:2px solid var(--lime-inkt);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.akkoord input:checked{background:var(--lime);border-color:var(--lime)}
.akkoord input:checked::before{opacity:1}
.akkoord a{color:var(--tekst);border-bottom:1px solid var(--lijn-3)}
.bereik{display:grid;gap:10px}
.bereik input[type=range]{width:100%;accent-color:var(--lime)}
.bereik output{font-weight:600;font-size:18px}

/* de intake als as met momenten */
.intake{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.voortgang{position:sticky;top:96px;display:grid;gap:0;border-left:1px solid var(--lijn-2);margin-left:3px}
.voortgang button{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0 12px 0;margin-left:-4px;text-align:left;color:var(--tekst-3);font-size:15px}
.voortgang button i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--tekst-3);background:var(--bg);display:block;margin-left:-3.5px;transition:background .18s,border-color .18s}
.voortgang button[aria-current="step"]{color:var(--tekst)}
.voortgang button[aria-current="step"] i{background:var(--lime);border-color:var(--lime);animation:adem 3.2s ease-in-out infinite}
.voortgang button.gedaan i{background:var(--tekst-2);border-color:var(--tekst-2)}
.voortgang button:disabled{cursor:default}
.stap-paneel{display:grid;gap:26px}
.js .stap-paneel[hidden]{display:none}
.stap-paneel h2{font-size:clamp(26px,3vw,40px)}
.stap-nav{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;padding-top:8px}
.intake-samenvatting{display:grid;gap:10px;border-top:1px solid var(--lijn-2)}
.intake-samenvatting div{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--lijn);font-size:15px}
.intake-samenvatting dt{color:var(--tekst-3)}
.intake-samenvatting dd{color:var(--tekst-2)}
.js .zonder-js{display:none}
html:not(.js) .alleen-js{display:none}

/* ── 24. Contact ──────────────────────────────────────────────────── */
.wegen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--goot);border-top:1px solid var(--lijn-2)}
.weg{padding-top:26px;display:grid;gap:14px;align-content:start;position:relative}
.weg + .weg::before{content:"";position:absolute;left:calc(var(--goot) / -2);top:26px;bottom:0;width:1px;background:var(--lijn)}
.weg p{color:var(--tekst-2)}
.weg .acties{margin-top:8px}

/* ── 25. Proza (over, privacy, voorwaarden) ───────────────────────── */
.proza{display:grid;gap:22px;max-width:66ch;font-size:17.5px;color:var(--tekst-2)}
.proza h2{font-size:clamp(24px,2.6vw,34px);color:var(--tekst);margin-top:18px}
.proza h3{font-size:20px;color:var(--tekst);margin-top:8px}
.proza p{max-width:none}
.proza ul{display:grid;gap:8px}
.proza li{padding-left:18px;position:relative}
.proza li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tekst-3)}
.proza a{color:var(--tekst);border-bottom:1px solid var(--lijn-3)}
.proza .lead{color:var(--tekst-2)}
.citaat{font-size:clamp(24px,3vw,40px);letter-spacing:-.035em;font-weight:600;line-height:1.1;color:var(--tekst);max-width:20ch}

/* ── 26. Bedankt ──────────────────────────────────────────────────── */
.stip-groot{width:14px;height:14px;border-radius:50%;background:var(--lime);animation:adem 3.2s ease-in-out infinite;margin-bottom:8px}

/* ── 27. Responsief ───────────────────────────────────────────────── */
@media (max-width:1040px){
  :root{--as:64px}
  .op-as::before{left:12px}
  .moment .nr{width:36px;left:-6px}
  .close-ups{grid-template-columns:1fr}
  .voet .omhulsel{grid-template-columns:1fr 1fr}
  .k-7,.k-5,.k-6,.k-4,.k-8{grid-column:1/-1}
  .k-start-2{grid-column-start:1}
  .situaties{grid-template-columns:1fr}
  .intake{grid-template-columns:1fr}
  .voortgang{position:static;display:flex;flex-wrap:wrap;gap:4px 18px;border-left:0;margin:0;border-bottom:1px solid var(--lijn);padding-bottom:6px}
  .voortgang button{padding:8px 0;grid-template-columns:14px minmax(0,1fr)}
  .voortgang button i{margin-left:0}
  .pad-kop{position:static}
}
@media (max-width:780px){
  :root{--as:0px;--ruimte:clamp(80px,14vw,120px)}
  .op-as{grid-template-columns:1fr}
  .op-as::before{display:none}
  .sectie > .moment{position:static;width:auto;height:auto}
  .moment .nr{position:relative;top:auto;width:auto;height:auto;justify-content:flex-start;margin-bottom:14px;padding-left:0}
  .nav{
    display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--lijn);padding:8px 0 12px;
  }
  .nav.open{display:flex}
  .nav a{padding:12px var(--rand);font-size:17px}
  .nav a[aria-current="page"]::after{display:none}
  .nav .knop{margin:10px var(--rand) 4px;justify-content:center}
  .menuknop{display:inline-flex;align-items:center}
  .kop .omhulsel{gap:16px}
  .woordmerk span{display:none}
  .regel{grid-template-columns:52px minmax(0,1fr)}
  .regel .gevolg{grid-column:2;white-space:normal}
  .orde{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)}
  .orde-in b,.orde-uit b{font-size:15px}
  .orde-in span,.orde-uit span{font-size:13px}
  .tweeluik,.wegen,.zeker,.branches,.stat-rij,.veld-rij,.prijsregel,.stap-feiten{grid-template-columns:1fr}
  .tweeluik > div + div::before,.weg + .weg::before{display:none}
  .tweeluik > div + div,.weg + .weg{border-top:1px solid var(--lijn)}
  .pad,.pakket,.feit-rij{grid-template-columns:1fr}
  .pakket.aanbevolen::before{display:none}
  .stap{grid-template-columns:48px minmax(0,1fr)}
  .voet .omhulsel{grid-template-columns:1fr}
  .toneel{padding:6px;border-radius:14px;transform:none}
  .toneel-scherm{border-radius:9px}
  .display{max-width:none}
  .hero-kop{gap:22px}
}