/* Project Acceptance – stijlen
   Tokens uit het brandbook (Acceptatie – Clean v2). Mobile-first. */

/* ---------- Fonts (lokaal) ---------- */
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/Newsreader-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/Newsreader-Italic-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Kleuren */
  --blauw:        #0B6478; /* Mensinc Blauw – merkkleur, acceptatie, primaire knop */
  --blauw-diep:   #095060; /* hover */
  --blauw-licht:  #5492A0; /* voortgang */
  --blauw-tint:   #E7F0F2; /* gekozen antwoord */
  --grijs-licht:  #E9E9E9; /* achtergrond */
  --grijs:        #B9B9B9; /* controle(-balk) */
  --inkt:         #000000; /* tekst */
  --kaart:        #F2F2F2; /* vlakken, kaarten */

  /* Typografie */
  --font-kop:   "Instrument Serif", serif;
  --font-tekst: "Newsreader", Georgia, serif;
  --font-ui:    "Inter", system-ui, sans-serif;

  /* Ritme */
  --breedte: 72rem;
  --smal: 40rem;
  --ruimte: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 14px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grijs-licht);
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.55;
  /* v1.3: geen overflow-x op body (maakte body in iOS Safari/webviews soms een eigen
     scrollcontainer). Horizontale overflow van de golf wordt in .hero afgevangen. */
}
img { max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 .6em;
}
h2 { font-size: clamp(2rem, 5vw, 3rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; }
a { color: var(--blauw); text-underline-offset: .18em; }
a:hover { color: var(--blauw-diep); }
:focus-visible {
  outline: 2px solid var(--blauw);
  outline-offset: 3px;
  border-radius: 4px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skiplink {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--inkt); color: #fff;
  padding: .6rem 1rem; z-index: 10;
  font-family: var(--font-ui); font-weight: 500;
}
.skiplink:focus { top: 1rem; color: #fff; }

.wrap { width: min(100% - 2.5rem, var(--breedte)); margin-inline: auto; }
.wrap--smal { width: min(100% - 2.5rem, var(--smal)); margin-inline: auto; }
.sectie { padding-block: var(--ruimte); }
.sectie--kaart { background: var(--kaart); }

.label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blauw); /* blauw accent zoals de sectielabels in het brandbook */
  margin: 0 0 .9rem;
}
.lead { font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.4; }
.klein { font-size: .95rem; }
.ui { font-family: var(--font-ui); font-weight: 500; }

/* ---------- Header ---------- */
.site-header { padding-block: 1.1rem; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo {
  font-family: var(--font-kop);
  font-size: 1.5rem;
  color: var(--inkt);
  text-decoration: none;
  letter-spacing: .01em;
}
.logo:hover { color: var(--inkt); }
.nav ul { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; }
.nav a {
  font-family: var(--font-ui); font-weight: 500; font-size: .9rem;
  color: var(--inkt); text-decoration: none;
  padding: .5rem .75rem; border-radius: 999px;
}
.nav a:hover { background: var(--kaart); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }
/* v1.8: drie menu-items (Quiz, Aanbod, Over Dion) passen ook op 375px op één regel */
.nav a { white-space: nowrap; }
@media (max-width: 479px) {
  .site-header .wrap { gap: .5rem; }
  .logo { font-size: 1.3rem; white-space: nowrap; }
  .nav ul { gap: 0; }
  .nav a { font-size: .8rem; padding: .45rem .45rem; }
}

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-ui); font-weight: 500; font-size: 1rem;
  line-height: 1.2;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid var(--blauw);
  background: var(--blauw);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.knop:hover { background: var(--blauw-diep); border-color: var(--blauw-diep); color: #fff; }
/* v1.5: één secundaire stijl overal: blauw omlijnd, bij hover gevuld */
.knop--secundair { background: transparent; color: var(--blauw); border-color: var(--blauw); }
.knop--secundair:hover { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.knop--tekst {
  background: none; border: 0; padding: .5rem 0; color: var(--inkt);
}
.knop--tekst:hover { background: none; color: var(--blauw); }
.knop[disabled], .knop[aria-disabled="true"] {
  background: var(--grijs); border-color: var(--grijs); color: #000; cursor: not-allowed;
}
.knop img { width: 1.25rem; height: 1.25rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.knop--blok { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  /* v1.5: kleiner maximum en minder ruimte boven, zodat de knoppen boven de vouw staan */
  --kop: clamp(2.7rem, 10vw, 7.25rem);
  padding-top: clamp(.5rem, 1.5vw, 1.25rem); padding-bottom: calc(var(--ruimte) * .75); text-align: center;
  /* v1.3: vangt de 100vw-golf op mobiel lokaal af. `clip` maakt geen scrollcontainer;
     `hidden` is alleen de terugval voor browsers zonder `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}
.hero-kop {
  position: relative;
  z-index: 1;
  color: var(--blauw); /* Brandbook Clean v2: kop in Mensinc Blauw */
  font-size: var(--kop);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0;
  padding-inline: 1rem;
  display: grid; /* v1.3: beide zinnen in dezelfde cel, hoogte = hoogste zin */
}
.hero-zin { grid-area: 1 / 1; }
/* v1.5: zonder animatie (reduced motion) staat direct de landingszin "Ontdek de formule." */
.hero-zin--start, .hero-zin--eind { visibility: hidden; }
.hero-woord { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* v1.7: eindige tijdlijn van 12,0 s (was 16,8 s), geen lus. Woorden van zin 1 één voor
     één (300 ms uit elkaar, opbouw klaar op 1,8 s, alleen de eerste keer), daarna wisselen
     de zinnen 2 keer (1,2,1,2) en komt "Ontdek de formule.".
     Elke wissel: 0,4 s uit → 0,2 s leeg → 0,4 s in → 1,5 s zichtbaar.
       zin 1: 0–3,3 (uit tot 3,7) · in 6,4–6,8, zichtbaar tot 8,3 (uit tot 8,7) s
       zin 2: in 3,9–4,3, zichtbaar tot 5,8 (uit tot 6,2) · in 8,9–9,3, zichtbaar tot 10,8 (uit tot 11,2) s
       formule: in vanaf 11,4 s (0,6 s), blijft staan (forwards).
     Tussen elke uit en de volgende in zit 0,2 s leeg (ook vóór de formule): nooit twee
     zinnen tegelijk. */
  .hero-zin--start { visibility: visible; animation: hero-tijdlijn-start 12s linear both; }
  .hero-woord { opacity: 0; animation: hero-woord .7s ease-out forwards; animation-delay: calc(.2s + var(--i) * .3s); }
  .hero-zin--eind { visibility: visible; animation: hero-tijdlijn-eind 12s linear both; }
  .hero-zin--formule { animation: hero-formule .6s ease-out 11.4s both; }
}
@keyframes hero-woord {
  from { opacity: 0; transform: translateY(.25em); }
  to   { opacity: 1; transform: none; }
}
/* Percentages van 12,0 s (bv. 3,3 s = 27,50%) */
@keyframes hero-tijdlijn-start {
  0%, 27.50%      { opacity: 1; }
  30.83%, 53.33%  { opacity: 0; }
  56.67%, 69.17%  { opacity: 1; }
  72.50%, 100%    { opacity: 0; }
}
@keyframes hero-tijdlijn-eind {
  0%, 32.50%      { opacity: 0; }
  35.83%, 48.33%  { opacity: 1; }
  51.67%, 74.17%  { opacity: 0; }
  77.50%, 90.00%  { opacity: 1; }
  93.33%, 100%    { opacity: 0; }
}
@keyframes hero-formule {
  from { opacity: 0; transform: translateY(.12em); }
  to   { opacity: 1; transform: none; }
}
/* Surfer-beeld (transparante versie), afgestemd op de mockup in het brandbook:
   de golfkam overlapt alleen de onderkant van regel 2, zodat de kop leesbaar blijft.
   De kam ligt op ±37% van de beeldhoogte. Desktop: beeld 80% breed, hoogte
   80% × 1079/2880 = 29,97% van de breedte, kam = 11,1%. Daarna zakt de kam nog
   0,3 × de korpsgrootte omhoog in de letters (± het onderste kwart van de kapitalen).
   Mobiel: rand tot rand (100vw), hoogte 48,72vw, kam = 18,4vw. */
.hero-golf {
  display: block; /* <picture> is standaard inline: zonder dit werken breedte en negatieve marge niet */
  position: relative;
  z-index: 2;
  pointer-events: none;
  width: 80%;
  margin: calc(-11.1% - .3 * var(--kop)) auto 0;
}
.hero-golf img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
  .hero-golf {
    width: 100vw;
    margin-top: calc(-18.4vw - .3 * var(--kop));
    margin-left: calc(50% - 50vw);
    margin-right: 0;
  }
}
.hero-tekst { max-width: 40rem; margin: clamp(.75rem, 2vw, 1.5rem) auto 0; padding-inline: 1.25rem; }
.hero-tekst .lead { margin-bottom: 0; }
/* v1.5: knoppen direct onder de lead; onderregel/drie stappen daaronder */
.hero .knoppen { justify-content: center; margin-top: 1rem; }
.hero .microcopy { color: #333; margin: .6rem 0 0; }
.hero-onderregel { margin: 1.5rem 0 0; }
/* v1.2: mobiel toont de compacte drie-stappen-component, desktop de oorspronkelijke regel */
.stappen--hero { margin-top: 1.75rem; }
@media (max-width: 899px) {
  .hero-onderregel { display: none; }
}
@media (min-width: 900px) {
  .stappen--hero { display: none; }
}

/* ---------- De Tool voor jouw … (v1.3) ----------
   Vaste regel + rollend woord op een eigen regel, gecentreerd: zo verspringt er niets.
   Het venster is één regel hoog; de lijst schuift verticaal. Laatste item = eerste
   (slaap), zodat de lus naadloos terugspringt. Zonder beweging staat er "rust". */
/* v1.6: hele blok ± 30% kleiner (padding, golflijn, letter, streep) */
.tool { padding-block: calc(var(--ruimte) * .35) calc(var(--ruimte) * .5); text-align: center; }
.tool-golf { display: block; margin: 0 auto clamp(.5rem, 1.4vw, .875rem); width: 7rem; height: auto; color: var(--blauw); }
/* v1.4: groter en "zwaarder" (Instrument Serif heeft één gewicht): grootte, strakke
   regelafstand, negatieve letterafstand, inkt en een heel subtiele text-stroke.
   Het rolvenster is een inline-block waarvan de lijst zo breed is als het langste woord
   (ontspanning): vaste breedte zonder magisch getal. Vaste regel en venster hebben
   dezelfde regelhoogte en staan allebei bovenaan uitgelijnd, dus dezelfde basislijn.
   De blauwe streep (4px) is de onderrand van .tool-rol, buiten het afknippende
   .tool-rol-venster: vaste breedte, staat stil. */
/* v1.5: de streep (6px) hangt nu onder elk woord zelf (woordbreedte) in plaats van onder
   het hele venster. Daardoor oogt een kort woord niet meer "uit het midden" door een lege
   streep. Het venster houdt de breedte van het langste woord, dus "De Tool voor jouw"
   staat altijd op dezelfde x-positie. --rol-h is 1,45em zodat de streep onder de
   onderkast van g en p valt. Mobiel: het woord staat gecentreerd onder de vaste regel. */
/* v1.6: bugfix. De streep zat aan elk bewegend woord (box-shadow) en kon daardoor los
   boven het zichtbare woord staan. Nu: het venster knipt precies op één slot (--rol-h),
   elk woord-slot is exact --rol-h hoog zonder marge/padding, en de streep (4px) is een
   ::after aan de onderkant van het venster zelf, dus staat stil en altijd direct onder
   het woord. Mobiel: vensterbreedte (langste woord), gecentreerd. Desktop: vaste
   vensterbreedte. */
.tool-kop {
  --rol-h: 1.45em;
  font-size: clamp(1.8rem, 4.5vw, 3.85rem);
  line-height: var(--rol-h);
  letter-spacing: -.015em;
  color: var(--inkt);
  -webkit-text-stroke: .4px currentColor;
  font-synthesis: none;
  margin: 0;
}
.tool-vast { display: block; }
.tool-rol {
  display: inline-block;
  vertical-align: top;
  color: var(--blauw);
  text-align: left;
}
.tool-rol-venster { position: relative; display: block; height: var(--rol-h); overflow: hidden; }
.tool-rol-venster::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: var(--blauw); pointer-events: none;
}
/* v1.7: 11 woorden + dubbele "slaap"; zonder JS/beweging staat slot 10 ("rust") */
.tool-rol-lijst { display: block; margin: 0; padding: 0; transform: translateY(calc(-10 * var(--rol-h))); }
.tool-rol-lijst > span {
  display: block; width: fit-content; margin: 0 auto; padding: 0;
  height: var(--rol-h); line-height: var(--rol-h); white-space: nowrap;
}
@media (min-width: 900px) {
  .tool-kop > span { white-space: nowrap; }
  .tool-vast { display: inline-block; vertical-align: top; }
  .tool-rol-lijst > span { margin-inline: 0; } /* desktop: woord links in het vaste venster */
  /* v1.5 (orchestrator): het venster is zo breed als een gemiddeld woord (2.6em) i.p.v. het
     langste, zodat de compositie bij korte woorden niet meer zichtbaar uit het midden staat.
     Langere woorden lopen rechts door; clip-path knipt alleen boven/onder af (overflow:hidden
     zou ook horizontaal knippen). De zin zelf staat nog steeds op een vaste x-positie. */
  .tool-rol-venster { width: 2.6em; overflow: visible; clip-path: inset(0 -100vw 0 -100vw); }
}
/* v1.7: uitgezet; het rollen gebeurt nu in js/tool-rol.js (zie onderaan).
@media (prefers-reduced-motion: no-preference) {
  7 woorden × 2,3 s = 16,1 s; per woord ± 0,7 s rollen, de rest stil
  .tool-rol-lijst { animation: tool-rol 16.1s ease-in-out infinite; }
}
*/
@keyframes tool-rol {
  0%, 9.94%       { transform: translateY(0); }
  14.29%, 24.23%  { transform: translateY(calc(-1 * var(--rol-h))); }
  28.57%, 38.51%  { transform: translateY(calc(-2 * var(--rol-h))); }
  42.86%, 52.80%  { transform: translateY(calc(-3 * var(--rol-h))); }
  57.14%, 67.08%  { transform: translateY(calc(-4 * var(--rol-h))); }
  71.43%, 81.37%  { transform: translateY(calc(-5 * var(--rol-h))); }
  85.71%, 95.65%  { transform: translateY(calc(-6 * var(--rol-h))); }
  100%            { transform: translateY(calc(-7 * var(--rol-h))); }
}

/* ---------- Drie stappen (v1.2, herbruikbaar) ----------
   Drie dunne-lijn cirkels naast elkaar, ook op 390px op één rij.
   Optioneel per stap: .stappen-regel (korte regel) en .stappen-uitleg
   (lange uitleg, alleen zichtbaar binnen .baf--uitgebreid vanaf 900px). */
.stappen { text-align: center; }
.stappen-label { margin-bottom: 1rem; }
.stappen-lijst {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem; max-width: 24rem;
}
/* v1.6: gelijke kolommen. Items bovenaan uitgelijnd, cirkel met vaste maat die nooit
   krimpt (ook bij een ander icoonformaat), naam en onderschrift als blok met dezelfde
   marges, zodat de teksten van alle drie op dezelfde hoogte beginnen. */
.stappen-lijst { align-items: start; }
.stappen-item { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; padding: 0; }
.stappen-cirkel {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex: none;
  width: 4rem; height: 4rem;
  border: 1px solid var(--blauw); border-radius: 50%;
  margin: 0 0 .6rem;
}
.stappen-cirkel img { width: 1.4rem; height: 1.4rem; display: block; flex: none; object-fit: contain; }
.stappen-naam { display: block; font-family: var(--font-ui); font-weight: 500; font-size: .85rem; line-height: 1.3; margin: 0; }
.stappen-regel { display: block; font-size: .95rem; line-height: 1.35; margin-top: .3rem; }
.stappen-uitleg { display: none; }
.baf .stappen { margin-top: 1.5rem; }
@media (min-width: 900px) {
  .baf .stappen-lijst { max-width: 48rem; gap: 2rem; }
  .baf .stappen-cirkel { width: 4.5rem; height: 4.5rem; }
  .baf .stappen-naam { font-size: .95rem; }
  .baf .stappen-regel { font-size: 1.05rem; }
  .baf--uitgebreid .stappen-lijst { max-width: none; }
  .baf--uitgebreid .stappen-uitleg { display: block; margin-top: .75rem; font-size: 1rem; line-height: 1.5; max-width: 22rem; }
}

/* ---------- Probleem ---------- */
.regels { list-style: none; margin: 0; padding: 0; counter-reset: regel; }
.regels li {
  counter-increment: regel;
  display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--grijs);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  line-height: 1.4;
}
.regels li:last-child { border-bottom: 1px solid var(--grijs); }
/* v1.4: lijst met dunne-lijn kruisjes + nadrukkelijke afsluiting */
.kruisjes { list-style: none; margin: 0; padding: 0; }
.kruisjes li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 1rem; align-items: start;
  padding-block: 1.1rem;
  border-top: 1px solid var(--grijs);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  line-height: 1.4;
}
.kruisjes li:last-child { border-bottom: 1px solid var(--grijs); }
.kruisjes img { width: 1.5rem; height: 1.5rem; display: block; margin-top: .12em; }
.probleem-slot {
  font-family: var(--font-kop);
  font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  line-height: 1.12;
  margin: 2.25rem 0 0;
}
.accent { color: var(--blauw); }
.regels li::before {
  content: counter(regel, decimal-leading-zero);
  font-family: var(--font-ui); font-weight: 500; font-size: .8rem;
  letter-spacing: .1em; padding-top: .45rem;
}

/* ---------- Inzicht ---------- */
.inzicht { display: grid; gap: 2.5rem; align-items: center; }
.inzicht figure { margin: 0; justify-self: center; max-width: 18rem; }
/* Tegenpolen (v1.1): groter en uitgesneden tot de illustratie zelf (de bron heeft
   veel lege ruimte boven en onder). Uitsnede x 12–82%, y 27–89% van het origineel. */
.inzicht .tegenpolen { width: 100%; max-width: 26rem; }
.tegenpolen-uitsnede {
  aspect-ratio: 825 / 1300;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--grijs);
  background: #EAEAEA;
}
.tegenpolen-uitsnede img {
  display: block;
  width: 142.86%;
  max-width: none;
  margin: -68.6% 0 0 -17.14%;
}
.inzicht figcaption { font-family: var(--font-ui); font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; text-align: center; margin-top: .5rem; }
.slotzin {
  font-family: var(--font-kop);
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  margin-top: 1.75rem;
}
@media (min-width: 800px) {
  .inzicht { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---------- Kaarten ---------- */
.kaarten { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 800px) {
  .kaarten { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.kaart {
  background: var(--kaart);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}
.sectie--kaart .kaart { background: var(--grijs-licht); }
.kaart-icoon { width: 2.5rem; height: 2.5rem; margin-bottom: 1.1rem; display: block; }
.kaart h3 { margin-bottom: .4rem; }
.kaart p:last-child { margin-bottom: 0; }
.stap {
  font-family: var(--font-ui); font-weight: 500; font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .35rem;
}

/* ---------- Voor wie ---------- */
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li {
  position: relative;
  padding: .85rem 0 .85rem 2.25rem;
  border-top: 1px solid var(--grijs);
}
.lijst li:last-child { border-bottom: 1px solid var(--grijs); }
.lijst li::before {
  content: "";
  position: absolute; left: 0; top: 1.05rem;
  width: 1.25rem; height: 1.25rem;
  background: url("../assets/icons/vinkje.svg") center / contain no-repeat;
}

/* ---------- Belofte ---------- */
.belofte { text-align: center; }
.belofte .kaart-icoon { margin-inline: auto; }
.belofte h2 { max-width: 22ch; margin-inline: auto; }
.belofte .knoppen { justify-content: center; }

/* ---------- Skyline + footer ---------- */
.skyline { display: block; margin: 0 auto; width: min(100%, 60rem); mix-blend-mode: multiply; opacity: .85; }
.skyline-band { padding-top: var(--ruimte); }
.site-footer {
  border-top: 1px solid var(--grijs);
  padding-block: 2.5rem 3rem;
  font-size: .95rem;
  text-align: center;
}
.site-footer .slagzin {
  font-family: var(--font-kop); font-size: 1.6rem; line-height: 1; text-transform: uppercase; margin-bottom: 1rem;
}
.site-footer p { margin-bottom: .5rem; }
.footer-disclaimer { max-width: 34rem; margin-inline: auto; font-size: .9rem; line-height: 1.5; margin-bottom: 1rem !important; }
.site-footer .bedrijf { font-family: var(--font-ui); font-weight: 500; font-size: .8rem; letter-spacing: .04em; margin-top: 1rem; }

/* ---------- Tekstpagina (disclaimer) ---------- */
.tekstpagina h1 { font-size: clamp(2.4rem, 7vw, 4rem); }
.tekstpagina h2 { font-size: 1.8rem; margin-top: 2.5rem; }
.tekstpagina ul { padding-left: 1.2rem; }
.tekstpagina li { margin-bottom: .6rem; }
/* v1.5: volledige disclaimertekst bovenaan disclaimer.html */
.disclaimer-kern {
  font-size: 1.2rem; line-height: 1.5;
  border-left: 3px solid var(--blauw);
  padding: .25rem 0 .25rem 1.1rem;
  margin-bottom: 1.75rem;
}

/* ---------- Quiz ---------- */
.quiz { padding-block: clamp(1.5rem, 5vw, 3.5rem) var(--ruimte); }
.quiz-scherm[hidden] { display: none; }
.quiz-kop { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.quiz-top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-ui); font-weight: 500; font-size: .9rem;
  margin-bottom: .75rem;
}
.voortgang {
  height: 4px; background: var(--kaart); border-radius: 999px; overflow: hidden;
  margin-bottom: 2rem;
}
.voortgang span {
  display: block; height: 100%; width: 0;
  background: var(--blauw-licht); border-radius: inherit;
  transition: width .35s ease;
}
.vraag { border: 0; margin: 0; padding: 0; min-width: 0; }
.vraag legend {
  font-family: var(--font-kop);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.1;
  padding: 0;
  margin-bottom: 1.5rem;
}
.antwoord { display: block; position: relative; margin-bottom: .7rem; cursor: pointer; }
.antwoord input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.antwoord span {
  display: block;
  background: var(--kaart);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  padding: 1.05rem 3.25rem 1.05rem 1.25rem;
  font-size: 1.1rem; line-height: 1.4;
  transition: background-color .15s ease, border-color .15s ease;
}
.antwoord:hover span { border-color: var(--grijs); }
.antwoord input:focus-visible + span { outline: 2px solid var(--blauw); outline-offset: 2px; }
.antwoord input:checked + span {
  background: var(--blauw-tint);
  border-color: var(--blauw-licht);
}
.antwoord input:checked + span::after {
  content: "";
  position: absolute; right: 1.1rem; top: 50%;
  width: 1.4rem; height: 1.4rem; transform: translateY(-50%);
  background: url("../assets/icons/vinkje.svg") center / contain no-repeat;
}
.quiz-actie { margin-top: 1.75rem; display: flex; justify-content: center; }
.quiz-actie .knop { min-width: 12rem; }

/* Profiel */
.profiel { text-align: center; }
.profiel-naam { font-size: clamp(2.6rem, 9vw, 3.8rem); margin-bottom: .5rem; }
.profiel-typering { max-width: 32rem; margin-inline: auto; }
/* v1.9: buurprofiel bij een score dicht bij de drempel (drempel ± 10, zie quiz-data.js) */
.profiel-buur { font-style: italic; font-size: 1.15rem; color: var(--blauw, currentColor); margin: -.25rem 0 .75rem; }
.balken { text-align: left; margin: 2rem 0 .5rem; }
.balk { margin-bottom: 1.25rem; }
.balk-kop {
  display: flex; justify-content: space-between;
  font-family: var(--font-ui); font-weight: 500; font-size: .95rem;
  margin-bottom: .45rem;
}
.balk-spoor { height: 10px; background: var(--kaart); border-radius: 999px; overflow: hidden; }
.balk-vulling { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .8s ease; }
.balk--controle .balk-vulling { background: var(--grijs); }
.balk--acceptatie .balk-vulling { background: var(--blauw); }
.harmonie { font-style: italic; text-align: left; margin-bottom: 1.75rem; }
.groeidoel {
  background: var(--kaart);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  text-align: left;
  margin-bottom: 1.75rem;
}
.groeidoel .label { margin-bottom: .3rem; }
.groeidoel .stap { color: var(--blauw); margin-bottom: .6rem; }
.groeidoel p:last-child { margin-bottom: 0; font-size: 1.2rem; }
.microcopy { font-family: var(--font-ui); font-weight: 500; font-size: .8rem; margin-top: .75rem; }
/* v1.5: profiel-CTA duidelijker */
.profiel-volgende { margin-bottom: .6rem; }
.profiel .knop--blok { font-size: 1.1rem; padding-block: 1.1rem; }
.profiel .microcopy a { color: #333; }

/* ---------- Aanbod ---------- */
/* v1.5: compacte intro; prijs + knop hoog in de kaart (boven de vouw), bullets daaronder */
.sectie.aanbod { padding-top: clamp(1rem, 2.5vw, 2rem); }
.aanbod-kop { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: .3em; }
.aanbod .kaart { display: flex; flex-direction: column; }
.aanbod .kaart h2 { font-size: 1.8rem; margin-bottom: .4rem; }
.aanbod .knop img { filter: invert(1); }
.aanbod .lead { max-width: 38rem; margin-bottom: 0; }
.aanbod .kaarten { margin-top: 1.5rem; }
.aanbod .kaart ul { padding-left: 1.1rem; margin: 1.25rem 0 0; }
.aanbod .kaart li { margin-bottom: .35rem; }
.kaart-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.kaart-top .kaart-icoon, .kaart-top .status { margin-bottom: 0; }
.kaart-top .kaart-icoon { width: 2.25rem; height: 2.25rem; }
.kaart-kort { font-size: 1.05rem; line-height: 1.45; margin-bottom: 1rem; }
@media (min-width: 800px) {
  /* gelijke hoogte van de korte omschrijving: prijzen en knoppen staan op één lijn */
  .kaart-kort { min-height: calc(3 * 1.45em); }
}
.prijs {
  font-family: var(--font-kop); font-size: 2.4rem; line-height: 1; margin: 0 0 .2rem;
}
.prijs-noot { font-family: var(--font-ui); font-weight: 500; font-size: .75rem; margin-bottom: .9rem; }
.status {
  display: inline-block;
  font-family: var(--font-ui); font-weight: 500; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--inkt); border-radius: 999px;
  padding: .2rem .6rem; margin-bottom: 1rem; align-self: flex-start;
}
.knop-uitleg { font-size: .95rem; margin-top: .75rem; }
.portret { border-radius: 10px; margin: 1.25rem 0 0; display: block; }
.kaart .portret { width: 100%; height: auto; }
/* Mobiel overzicht (alleen < 800px): naam · prijs · knop */
.aanbod-overzicht ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.overzicht-regel {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 0 0 .4rem;
}
.overzicht-regel a { font-family: var(--font-kop); font-size: 1.45rem; line-height: 1.1; color: var(--inkt); }
.overzicht-prijs { font-family: var(--font-kop); font-size: 1.45rem; line-height: 1.1; color: var(--blauw); white-space: nowrap; }
.aanbod-overzicht .knop { padding-block: .8rem; }
.aanbod-overzicht + .kaarten { margin-top: 2.5rem; }
@media (min-width: 800px) {
  .aanbod-overzicht { display: none; }
  .aanbod-overzicht + .kaarten { margin-top: 1.5rem; }
}
.baf-regel { text-align: center; margin-top: 3rem; }
.baf-regel strong { font-weight: 500; }
.baf-regel--quiz { margin-top: 1rem; }
.aanbod-quiz { text-align: center; margin-top: 2rem; }
.aanbod-quiz p { margin-bottom: .75rem; }

/* ---------- Over Dion (v1.8) ----------
   Mobiel: portret boven (max. 55vh, bovenkant zichtbaar), tekst eronder.
   Desktop: portret ± 40% links, tekst rechts, verticaal gecentreerd; past op 1440×900. */
.sectie.over { padding-top: clamp(.5rem, 2vw, 1.5rem); }
.over-grid { display: grid; gap: 2rem; }
.over-portret {
  display: block; width: 100%; height: auto;
  max-height: 55vh; object-fit: cover; object-position: top;
}
.over-kop { font-size: clamp(2.4rem, 6vw, 4rem); color: var(--blauw); margin-bottom: .4em; }
.over-tekst > p:not([class]) { font-size: 1.15rem; line-height: 1.5; }
.over-feiten { list-style: none; margin: 1.5rem 0; padding: 0; font-family: var(--font-ui); font-weight: 500; font-size: .9rem; }
.over-feiten li {
  border-top: 1px solid var(--grijs);
  border-left: 3px solid var(--blauw);
  padding: .55rem 0 .55rem .85rem;
}
.over-feiten li:last-child { border-bottom: 1px solid var(--grijs); }
.over-slot { font-family: var(--font-kop); font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.12; margin: 0 0 1.5rem; }
.over-quiz { margin-top: .75rem; }
.over-quiz a { color: #333; }
@media (min-width: 800px) {
  .over-grid { grid-template-columns: 2fr 3fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
  .over-portret { max-height: calc(100vh - 6rem); object-fit: contain; object-position: center; }
}

/* ---------- Beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* v1.6 (orchestrator): de streep blijft vast aan de onderkant van het woordvenster, maar
   schaalt (scaleX, alleen de breedte) mee met het zichtbare woord, op dezelfde tijdlijn
   als het rollen. Zo staat hij op desktop niet meer half onder "ontspanning" en op mobiel
   niet breder dan een kort woord. Woordbreedtes in em gemeten in Instrument Serif.
   Mobiel: gecentreerd; desktop: links, net als het woord. Zonder beweging: breedte "rust". */
.tool-rol-venster::after {
  left: 50%; right: auto; width: 1em; margin-left: -.5em;
  transform-origin: center; transform: scaleX(1.29);
}
@media (min-width: 900px) {
  .tool-rol-venster::after { left: 0; margin-left: 0; transform-origin: left center; }
}
/* v1.7: uitgezet (vaste em-breedtes schaalden slecht), vervangen door js/tool-rol.js.
@media (prefers-reduced-motion: no-preference) {
  .tool-rol-venster::after { animation: tool-streep 16.1s ease-in-out infinite; }
}
*/
@keyframes tool-streep {
  0%, 9.94%       { transform: scaleX(1.73); }
  14.29%, 24.23%  { transform: scaleX(2.15); }
  28.57%, 38.51%  { transform: scaleX(3.42); }
  42.86%, 52.80%  { transform: scaleX(1.81); }
  57.14%, 67.08%  { transform: scaleX(2.68); }
  71.43%, 81.37%  { transform: scaleX(4.23); }
  85.71%, 95.65%  { transform: scaleX(1.29); }
  100%            { transform: scaleX(1.73); }
}

/* v1.7: het Tool-blok staat in de hero, onder knoppen + microcopy en boven
   .hero-onderregel / .stappen--hero. Kleiner, zodat het in balans is met de cirkels.
   Desktop: "rusteloze gedachten" (± 7em) loopt rechts door vanaf de vaste x-positie en
   blijft vanaf 900px binnen beeld (± 8,9em rechts van het midden bij max. 2,75rem). */
.hero .tool { padding: 0; margin-top: clamp(1.5rem, 3vw, 2rem); }
.hero .tool-golf { width: 5.5rem; margin-bottom: .5rem; }
.hero .tool-kop { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
/* v1.7: js/tool-rol.js stuurt het rollen (transform + transition) en zet --streep op de
   gemeten breedte van het actieve woord. Zonder JS of bij reduced motion: stil "rust",
   streep op de breedte van "rust" (1,29em). Mobiel gecentreerd, desktop links. */
.tool--js .tool-rol-lijst { transition: transform .7s ease-in-out; }
.tool-rol-venster::after {
  width: var(--streep, 1.29em); margin-left: 0;
  transform: translateX(-50%);
  transition: width .6s ease-in-out; /* v1.7 (orchestrator): iets sneller dan het rollen (.7s), zodat de streep bij een korter woord al smal is als het woord staat */
}
@media (min-width: 900px) {
  .tool-rol-venster::after { transform: none; }
}

/* ---------- Ervaringen (v1.7, vervangt "Het inzicht") ---------- */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.reviews { margin-top: 1.75rem; }
.review { display: flex; flex-direction: column; gap: 1rem; }
.review-top { display: flex; align-items: center; gap: .85rem; }
.review-avatar { display: block; flex: none; width: 3rem; height: 3rem; color: var(--blauw); }
.review-avatar text { font-family: var(--font-ui); font-weight: 500; font-size: 17px; fill: currentColor; }
.review-sterren { display: block; width: 5.5rem; height: auto; color: var(--blauw); }
.review-quote { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.review-quote p { margin: 0; }
.review .review-naam { margin: auto 0 0; font-family: var(--font-ui); font-weight: 500; font-size: .85rem; }

/* v2.0: één review over (placeholders verborgen): één kaart (links uitgelijnd onder de kop) in plaats van een 3-koloms grid */
.reviews--een { grid-template-columns: 1fr !important; max-width: 40rem; }
.reviews--een .review-quote { font-size: 1.25rem; }

/* v2.0.1: nog niet beschikbaar */
.knop--binnenkort{opacity:.45;cursor:default;pointer-events:none}