/* ---------------------------------------------------------------------------
   dennismethod.com, stijl.css versie 2.
   Alles wat de site is, in één bestand. De variabelen staan bovenaan, daaronder
   de letters, de basis, de componenten en de secties. Kleur of maat veranderen
   gebeurt in de eerste vijftig regels, nergens anders.
   Bron, website/claude-design-brief-v2.md hoofdstuk 3 en 4, en de maten uit de
   export van Claude Design (website/BOUWPLAN-v2.md, hoofdstuk 1.4).
   --------------------------------------------------------------------------- */

:root {
  /* Kleuren, gemeten uit het ontwikkelingsschema van Dennis. */
  --papier: #FAF9F5;
  --wit: #FFFFFF;
  --donkerblauw: #0B2A4A;
  --nachtblauw: #061A2F;
  --diepst: #04131F;
  --jade: #52B68C;
  --jade-diep: #2C7A5B;
  --rood-licht: #E8785F;
  --rood-diep: #9E2B20;
  --houtskool: #403838;
  --houtskool-70: #6E6A63;
  --rand-papier: rgba(64, 56, 56, .12);
  --rand-donker: rgba(255, 255, 255, .10);
  --wit-78: rgba(255, 255, 255, .78);
  --wit-72: rgba(255, 255, 255, .72);

  /* Letters. */
  --kop: "Clash Display", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --tekst: "General Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  /* Maten, vloeiend tussen 375 en 1440. */
  --maat-tekst: clamp(17px, 1.3vw, 19px);
  --maat-leid: clamp(18px, 1.45vw, 21px);
  --maat-h1-home: clamp(52px, 7.6vw, 112px);
  --maat-h1: clamp(38px, 4.4vw, 64px);
  --maat-h2: clamp(30px, 3.1vw, 44px);
  --maat-aforisme: clamp(26px, 2.8vw, 40px);
  --maat-adem: clamp(26px, 2.6vw, 36px);
  --maat-vraag: clamp(26px, 2.4vw, 32px);
  --maat-cijfer: clamp(80px, 7.2vw, 104px);
  --maat-woorden: clamp(24px, 2.4vw, 34px);

  /* Afstand en vorm. */
  --inhoud: 1200px;
  --kolom: 680px;
  --marge: 24px;
  --sectie: clamp(56px, 7vw, 96px);
  --menu: 108px;
  --hoek: 20px;
  --hoek-foto: 16px;

  /* Beweging. */
  --duur: 500ms;
  --verloop: cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 900px) {
  :root {
    --marge: 64px;
    --menu: 72px;
  }
}

/* --- Letters, zelf gehost --------------------------------------------------- */

@font-face { font-family: "Clash Display"; font-weight: 300; font-display: swap; src: url("/letters/clash-display-300.woff2") format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 600; font-display: swap; src: url("/letters/clash-display-600.woff2") format("woff2"); }
@font-face { font-family: "Clash Display"; font-weight: 700; font-display: swap; src: url("/letters/clash-display-700.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 400; font-display: swap; src: url("/letters/general-sans-400.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 500; font-display: swap; src: url("/letters/general-sans-500.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 600; font-display: swap; src: url("/letters/general-sans-600.woff2") format("woff2"); }

/* --- Basis ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--donkerblauw);
  font: 400 var(--maat-tekst) / 1.66 var(--tekst);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

[hidden] { display: none !important; }

img, video, svg { max-width: 100%; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

strong, b { font-weight: 600; }

h1, h2, h3 { margin: 0; font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: var(--maat-h1); line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: var(--maat-h2); line-height: 1.1; margin-bottom: 24px; }
h3 { font-size: 20px; line-height: 1.25; }

.midden { max-width: var(--inhoud); margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }
.kolom { max-width: var(--kolom); }
.sectie { padding-top: var(--sectie); padding-bottom: var(--sectie); }
.sectie--strak { padding-top: calc(var(--sectie) * .6); padding-bottom: calc(var(--sectie) * .6); }

.donker { background: var(--donkerblauw); color: var(--wit); }
.nacht { background: var(--nachtblauw); color: var(--wit); }

.leid { font-size: var(--maat-leid); line-height: 1.55; }
.stil { color: var(--houtskool-70); }
.donker .stil, .nacht .stil { color: var(--wit-72); }
.klein { font-size: 15px; }

.merkregel {
  margin: 0 0 12px;
  font: 600 13px / 1.3 var(--kop);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--houtskool-70);
}
.donker .merkregel, .nacht .merkregel { color: var(--wit-78); }

.tijdmerk {
  display: block;
  margin: 0 0 8px;
  font: 600 13px / 1.3 var(--kop);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jade-diep);
}

/* De skip-link naar de inhoud, alleen zichtbaar met het toetsenbord. */
.overslaan {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--jade);
  color: var(--donkerblauw);
  font-weight: 600;
  text-decoration: none;
}
.overslaan:focus { left: 8px; outline: 3px solid var(--jade-diep); outline-offset: 2px; }

/* Focus, overal zichtbaar, nooit halfdoorzichtig. */
:focus-visible { outline: 3px solid var(--jade-diep); outline-offset: 2px; }
.donker :focus-visible, .nacht :focus-visible, .menu--doorzichtig:not(.menu--papier) :focus-visible { outline-color: var(--jade); }

/* --- De kop van de homepage ------------------------------------------------ */

.kop-home {
  font: 300 var(--maat-h1-home) / 1.04 var(--kop);
  letter-spacing: -.025em;
  margin: 8px 0 0;
}
.kop-home .kop__regel { display: block; white-space: nowrap; }
.kop__woord { font-weight: 700; }
.kop__woord--moeten { color: var(--rood-licht); }
.kop__woord--willen { color: var(--jade); }
.papier .kop__woord--moeten { color: var(--rood-diep); }
.papier .kop__woord--willen { color: var(--jade-diep); }

/* De twee soorten pijn, dezelfde twee kleuren, verder nergens. */
.pijn--spijt { color: var(--rood-licht); font-weight: 600; }
.pijn--discipline { color: var(--jade); font-weight: 600; }

/* --- Knoppen --------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--jade);
  color: var(--donkerblauw);
  font: 600 17px / 1 var(--tekst);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duur) var(--verloop), color var(--duur) var(--verloop), transform 300ms var(--verloop), box-shadow 300ms;
}
.knop--groot { height: 60px; padding: 0 32px; font-size: clamp(18px, 1.3vw, 19px); }
.knop:hover, .knop.toon-zweef {
  background: var(--donkerblauw);
  color: var(--papier);
  transform: translateY(-1px);
}
.donker .knop:hover, .nacht .knop:hover, .donker .knop.toon-zweef, .nacht .knop.toon-zweef {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4);
}
.knop:focus-visible, .knop.toon-focus { outline: 3px solid var(--jade-diep); outline-offset: 2px; }
.donker .knop:focus-visible, .nacht .knop:focus-visible, .donker .knop.toon-focus, .nacht .knop.toon-focus { outline-color: var(--jade); }
.knop[aria-busy="true"] { opacity: .7; pointer-events: none; }

.knop--rustig {
  background: transparent;
  border: 2px solid var(--jade-diep);
  color: var(--donkerblauw);
}
.knop--rustig:hover, .knop--rustig.toon-zweef { background: var(--jade); color: var(--donkerblauw); transform: none; }

.onder-knop { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--houtskool-70); }
.donker .onder-knop, .nacht .onder-knop { color: var(--wit-78); }

/* Twee tekstlinks naast elkaar onder een knop. */
.linkrij { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: 16px; }

/* --- Tekstlink ------------------------------------------------------------- */

.tekstlink {
  color: var(--donkerblauw);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--donkerblauw), var(--donkerblauw)), linear-gradient(var(--jade), var(--jade));
  background-repeat: no-repeat;
  background-size: 0 2px, 100% 2px;
  background-position: 0 100%, 0 100%;
  transition: background-size 400ms var(--verloop);
}
.tekstlink:hover, .tekstlink.toon-zweef { background-size: 100% 2px, 100% 2px; }
.donker .tekstlink, .nacht .tekstlink {
  color: var(--wit);
  background-image: linear-gradient(var(--wit), var(--wit)), linear-gradient(var(--jade), var(--jade));
}

/* --- Menu ------------------------------------------------------------------ */

.menu {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-bottom: calc(-1 * var(--menu));
  background: rgba(250, 249, 245, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--donkerblauw);
  transition: background 300ms, color 300ms;
}
.menu__band {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "merk knop" "links links";
  align-items: center;
  gap: 6px 20px;
  padding: 12px var(--marge);
  max-width: var(--inhoud);
  margin: 0 auto;
}
.menu__merk { grid-area: merk; }
.menu__links { grid-area: links; }
.menu .knop { grid-area: knop; justify-self: end; }
.menu__merk {
  font: 600 18px / 1 var(--kop);
  text-decoration: none;
  letter-spacing: -.01em;
}
.menu__links { display: flex; gap: 20px; line-height: 28px; }
.menu__links a {
  font: 500 15px / 28px var(--tekst);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--jade), var(--jade));
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: 0 100%;
  transition: background-size 400ms var(--verloop);
}
.menu__links a:hover, .menu__links a[aria-current="page"] { background-size: 100% 2px; }
.menu .knop { height: 48px; padding: 0 18px; font-size: 15px; }

/* Boven een donkere hero is het menu doorzichtig, met wit. Alleen met script,
   want zonder script blijft hij papier en dus overal leesbaar. */
html.js .menu--doorzichtig:not(.menu--papier) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--wit);
}

@media (min-width: 900px) {
  .menu__band { grid-template-columns: auto 1fr auto; grid-template-areas: "merk links knop"; gap: 36px; }
  .menu__merk { font-size: 22px; }
  .menu__links { justify-content: flex-end; gap: 36px; }
  .menu__links a { font-size: 16px; }
}

/* --- De meelopende balk, alleen op mobiel ---------------------------------- */

.balk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  justify-content: center;
  padding: 10px var(--marge) calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 249, 245, .96);
  border-top: 1px solid var(--rand-papier);
  transform: translateY(110%);
  transition: transform 300ms var(--verloop);
}
.balk--aan { transform: none; }
.balk .knop { width: 100%; max-width: 420px; }
html:not(.js) .balk { display: none; }
@media (min-width: 900px) { .balk { display: none; } }

/* --- Voet ------------------------------------------------------------------ */

.voet {
  background: var(--donkerblauw);
  color: var(--wit);
  padding: 28px var(--marge);
  font-size: 14px;
  line-height: 2;
}
.voet__band { max-width: var(--inhoud); margin: 0 auto; }
.voet a { color: var(--wit); text-decoration: none; white-space: nowrap; }
.voet a:hover { color: var(--jade); }
.voet__punt { opacity: .5; margin: 0 8px; }

.communityregel {
  padding: 28px 0;
  font-size: 15px;
  color: var(--houtskool-70);
  border-top: 1px solid var(--rand-papier);
}

/* --- Cijferblok ------------------------------------------------------------ */

.cijferblok { margin: 40px 0; }
.cijferblok__cijfer {
  display: block;
  font: 300 var(--maat-cijfer) / 1 var(--kop);
  letter-spacing: -.03em;
  color: var(--jade);
}
.cijferblok__regel { margin: 10px 0 0; font-size: 15px; color: var(--wit); }
.papier .cijferblok__cijfer { color: var(--donkerblauw); }
.papier .cijferblok__regel { color: var(--houtskool-70); }
html.js .cijferblok { opacity: 0; transform: scale(.96); transform-origin: left center; }
html.js .cijferblok.in-beeld { opacity: 1; transform: none; transition: opacity 600ms var(--verloop), transform 600ms var(--verloop); }

/* --- Aforisme -------------------------------------------------------------- */

.aforisme {
  position: relative;
  margin: 36px 0;
  padding-top: 18px;
  max-width: var(--kolom);
}
.aforisme::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 3px;
  background: var(--jade);
  transform-origin: left center;
}
.aforisme__tekst {
  margin: 0;
  font: 600 var(--maat-aforisme) / 1.2 var(--kop);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.aforisme__bron { margin: 12px 0 0; font-size: 14px; color: var(--houtskool-70); }
.donker .aforisme__bron, .nacht .aforisme__bron { color: var(--wit-72); }

.aforisme--groot { padding: 0 0 0 28px; }
.aforisme--groot::before { width: 3px; height: 100%; transform-origin: top center; }
.aforisme--groot .aforisme__tekst { font-size: var(--maat-h2); line-height: 1.1; }

html.js .aforisme::before { transform: scaleX(0); }
html.js .aforisme--groot::before { transform: scaleY(0); }
html.js .aforisme.in-beeld::before { transform: none; transition: transform 600ms var(--verloop); }

/* --- Vraagregel en de drie ademhalingen ------------------------------------- */

.vraagregel {
  margin: 0 0 28px;
  max-width: var(--kolom);
  font: 600 var(--maat-vraag) / 1.2 var(--kop);
  letter-spacing: -.01em;
}

.adem { list-style: none; margin: 40px 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 52px); }
.adem li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  font: 300 var(--maat-adem) / 1.25 var(--kop);
  letter-spacing: -.01em;
}
.adem__nr { font: 500 13px / 2.2 var(--kop); letter-spacing: .1em; color: var(--jade-diep); }
.adem li:nth-child(2) { transition-delay: 120ms; }
.adem li:nth-child(3) { transition-delay: 240ms; }

/* --- Woordrijen ------------------------------------------------------------ */

.vijf-woorden {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 28px;
  font: 600 clamp(20px, 2vw, 26px) / 1.2 var(--kop);
}
.vier-woorden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin: 28px 0;
  font: 600 var(--maat-woorden) / 1.15 var(--kop);
  letter-spacing: -.01em;
}
@media (min-width: 900px) { .vier-woorden { display: flex; flex-wrap: wrap; gap: 12px 40px; } .vier-woorden > * { white-space: nowrap; } }
.vijf-woorden > *:nth-child(2), .vier-woorden > *:nth-child(2) { transition-delay: 60ms; }
.vijf-woorden > *:nth-child(3), .vier-woorden > *:nth-child(3) { transition-delay: 120ms; }
.vijf-woorden > *:nth-child(4), .vier-woorden > *:nth-child(4) { transition-delay: 180ms; }
.vijf-woorden > *:nth-child(5) { transition-delay: 240ms; }

/* --- Stappenlijn ----------------------------------------------------------- */

.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.stap { position: relative; padding-left: 56px; }
.stap__nummer {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--jade);
  background: var(--papier);
  display: grid;
  place-items: center;
  font: 600 15px / 1 var(--kop);
  color: var(--jade-diep);
}
.stap__merk {
  position: absolute;
  left: 0;
  top: 42px;
  width: 56px;
  white-space: nowrap;
  text-align: center;
  padding: 2px 0;
  background: var(--papier);
  font: 600 10px / 1.2 var(--kop);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jade-diep);
}
.stap__kop { margin: 5px 0 6px; font: 600 20px / 1.25 var(--kop); }
.stap__tekst { margin: 0; }
/* De lijn tussen de stappen, per stap een stukje naar de volgende. */
.stap::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: -32px;
  width: 2px;
  background: var(--jade);
  transform-origin: top center;
}
.stap:last-child::after { display: none; }
/* De opening vóór stap 3, de lijn stopt en stap 3 staat een stuk verder. */
.stappen--opening .stap:nth-child(2)::after { bottom: auto; height: 40px; background: rgba(82, 182, 140, .35); }
.stappen--opening .stap:nth-child(3) { margin-left: 24px; }

html.js .stap::after { transform: scaleY(0); }
html.js .stappen.in-beeld .stap::after { transform: none; transition: transform 800ms var(--verloop); }
html.js .stappen.in-beeld .stap:nth-child(2)::after { transition-delay: 300ms; }
html.js .stappen .stap:nth-child(2) { transition-delay: 120ms; }
html.js .stappen .stap:nth-child(3) { transition-delay: 240ms; }
html.js .stappen--opening .stap:nth-child(3) { transition-delay: 500ms; }

@media (min-width: 900px) {
  .stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .stap { padding-left: 0; padding-top: 56px; }
  .stap__merk { top: 44px; width: auto; min-width: 36px; text-align: left; }
  .stap::after { left: 44px; right: -40px; top: 17px; bottom: auto; width: auto; height: 2px; transform-origin: left center; }
  .stappen--opening .stap:nth-child(2)::after { right: auto; width: 40px; height: 2px; }
  .stappen--opening .stap:nth-child(3) { margin-left: 24px; }
  html.js .stap::after { transform: scaleX(0); }
}

/* --- Het verhaal, klevend tussenkopje en voortgangslijn --------------------- */

.verhaal { position: relative; }
.verhaal__lijn { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .12); }
.voortgang { position: absolute; inset: 0; background: var(--jade); }
.voortgang--actief {
  background: linear-gradient(180deg, var(--rood-licht), var(--jade));
  clip-path: inset(0 0 calc((1 - var(--voortgang, 0)) * 100%) 0);
}
.verhaal__deel { position: relative; padding: 32px 0 32px 28px; }

.tussenkop {
  position: sticky;
  top: calc(var(--menu) + 8px);
  z-index: 5;
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(6, 26, 47, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 600 12px / 1.3 var(--kop);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}

@media (min-width: 900px) {
  .verhaal__deel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; padding-left: 40px; }
  .tussenkop { justify-self: start; }
  .verhaal__inhoud { max-width: var(--kolom); }
  .verhaal__inhoud > .fotokaart, .verhaal__inhoud > .strook { margin: 0 0 28px; }
  .verhaal__inhoud > .strook { gap: 16px; }
  .verhaal__inhoud--klein { display: block; }
  .verhaal__tekst .cijferblok { margin-top: 28px; }
}

/* --- Foto's ---------------------------------------------------------------- */

.fotokaart { margin: 28px 0; }
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--hoek);
  background: var(--donkerblauw);
}
.foto img { display: block; width: 100%; height: auto; }
.foto--verhaal { border-radius: var(--hoek-foto); }
/* Geen duotoon. Michael besloot op 6 september 2026 dat elke foto gewoon in
   kleur staat, zonder blauwe laag. De duotoon uit hoofdstuk 3.4 van de brief
   vervalt daarmee. */
.onderschrift {
  margin: 10px 0 0;
  font: 500 13px / 1.5 var(--tekst);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--houtskool-70);
}
.donker .onderschrift, .nacht .onderschrift { color: var(--wit-72); }
.onderschrift--lang { text-transform: none; letter-spacing: 0; font-size: 14px; }

.strook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.strook--twee { grid-template-columns: 1fr 1fr; }
.strook--klein { max-width: 72%; }
.strook .fotokaart { margin: 0; }
.strook .foto img { aspect-ratio: 1 / 1; object-fit: cover; }
.strook--twee .foto img { aspect-ratio: 4 / 5; }
.strook > :nth-child(2) { transition-delay: 60ms; }
.strook > :nth-child(3) { transition-delay: 120ms; }

/* --- Tijdwoord, in Straks als het rustiger is ------------------------------- */

.moment { position: relative; padding-top: 56px; }
.moment + .moment { padding-top: 72px; }
.moment + .moment + .moment { padding-top: 88px; }
.moment + .moment + .moment + .moment { padding-top: 104px; }
.tijdwoord {
  position: absolute;
  left: -6px;
  top: 26px;
  font: 300 96px / 1 var(--kop);
  letter-spacing: -.03em;
  color: rgba(255, 255, 255, .075);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.tijdstempel {
  display: block;
  margin: 0 0 12px;
  font: 600 12px / 1.3 var(--kop);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.moment p { position: relative; }

/* --- Videokaart ------------------------------------------------------------ */

.videokaart {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--hoek);
  border: 1px solid var(--rand-donker);
  background: var(--nachtblauw);
}
.videokaart video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--nachtblauw); }
.videokaart__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--nachtblauw);
  cursor: pointer;
  text-align: left;
  color: var(--wit);
}
.videokaart__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; }
.videokaart__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 26, 47, .05) 30%, rgba(6, 26, 47, .82) 100%);
}
.videokaart__titel {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
  font: 600 clamp(20px, 2vw, 26px) / 1.16 var(--kop);
}
.videokaart__speel {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--jade);
  transform: translate(-50%, -58%);
  box-shadow: 0 6px 24px rgba(6, 26, 47, .45);
}
.videokaart__speel::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 21px;
  border-left: 17px solid var(--donkerblauw);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.videokaart__poster:focus-visible { outline: 3px solid var(--jade); outline-offset: -3px; }
html:not(.js) .videokaart__poster { display: none; }
.videokaart--speelt .videokaart__poster { display: none; }

.videokaart__eind {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--nachtblauw);
  color: var(--wit);
}
.videokaart__eind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 20%; }
.videokaart__eind::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 26, 47, .5), rgba(6, 26, 47, .88));
}
.videokaart__eindtekst {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  text-align: center;
}
.videokaart__eindtekst p { margin: 0; font: 600 clamp(22px, 2.2vw, 30px) / 1.2 var(--kop); }
.videokaart__knop55 { display: flex; justify-content: center; margin-top: 26px; }
html.js .videokaart__eind:not([hidden]) { animation: zacht-in 500ms ease; }

/* --- Formulier ------------------------------------------------------------- */

.formulier { display: grid; gap: 22px; max-width: 560px; }
.veld { display: grid; gap: 8px; }
.veld label, .keuzes__vraag { font-weight: 600; font-size: 15px; }
.veld input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--houtskool-70);
  border-radius: 12px;
  background: var(--wit);
  font: 400 17px / 1 var(--tekst);
  color: var(--donkerblauw);
}
.veld input:focus-visible, .veld input.toon-focus {
  outline: 3px solid var(--jade-diep);
  outline-offset: 2px;
  border-color: var(--jade-diep);
}
.veld input[aria-invalid="true"] { border: 2px solid var(--donkerblauw); }
.veld__fout { font-size: 14px; }
.veld__regel { font-size: 14px; color: var(--houtskool-70); }

.keuzes { display: flex; flex-wrap: wrap; gap: 10px; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze span {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--houtskool-70);
  border-radius: 999px;
  font: 600 16px / 1 var(--tekst);
  color: var(--donkerblauw);
  cursor: pointer;
  transition: background 250ms var(--verloop), color 250ms, border-color 250ms;
}
.keuze input:checked + span { background: var(--donkerblauw); border-color: var(--donkerblauw); color: var(--papier); }
.keuze input:focus-visible + span { outline: 3px solid var(--jade-diep); outline-offset: 2px; }

.melding {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--houtskool-70);
  border-radius: 12px;
  background: var(--wit);
  font-size: 15px;
}

/* --- De eigen beelden, getekend in de kleuren van het systeem ---------------- */

.uitslag {
  padding: 24px;
  background: var(--wit);
  border: 1px solid var(--rand-papier);
  border-radius: var(--hoek);
  color: var(--donkerblauw);
}
.uitslag__kop { margin: 0 0 6px; font: 600 12px / 1.3 var(--kop); letter-spacing: .16em; text-transform: uppercase; color: var(--houtskool-70); }
.uitslag__rij { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 12px; }
.uitslag__naam { font: 600 15px / 1.2 var(--kop); }
.uitslag__balk { height: 12px; border-radius: 6px; background: rgba(11, 42, 74, .08); overflow: hidden; }
.uitslag__balk i { display: block; height: 100%; width: var(--w, 70%); background: var(--jade); transform-origin: left center; }
.uitslag__balk--laag i { background: var(--rood-licht); }
html.js .uitslag__balk i { transform: scaleX(0); }
html.js .uitslag.in-beeld .uitslag__balk i { transform: none; transition: transform 600ms var(--verloop); }
.uitslag__rij:nth-child(3) i { transition-delay: 60ms; }
.uitslag__rij:nth-child(4) i { transition-delay: 120ms; }
.uitslag__rij:nth-child(5) i { transition-delay: 180ms; }
.uitslag__rij:nth-child(6) i { transition-delay: 240ms; }

.tekening { margin: 0; }
.tekening svg { display: block; width: 100%; height: auto; }
.tekening text { font: 500 14px var(--tekst); fill: currentColor; }

.zon { max-width: 320px; }
.zon line { stroke: var(--jade); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 80; }
html.js .zon line { stroke-dashoffset: 80; }
html.js .zon.in-beeld line { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--verloop); }
.zon line:nth-of-type(2) { transition-delay: 60ms; }
.zon line:nth-of-type(3) { transition-delay: 120ms; }
.zon line:nth-of-type(4) { transition-delay: 180ms; }
.zon line:nth-of-type(5) { transition-delay: 240ms; }
.zon line:nth-of-type(6) { transition-delay: 300ms; }
.zon line:nth-of-type(7) { transition-delay: 360ms; }
.zon line:nth-of-type(8) { transition-delay: 420ms; }
.zon line:nth-of-type(9) { transition-delay: 480ms; }
.zon line:nth-of-type(10) { transition-delay: 540ms; }

.richtingen path { fill: none; stroke: var(--jade); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; }
.richtingen circle { fill: var(--jade); }
html.js .richtingen path { stroke-dashoffset: 1; }
html.js .richtingen.in-beeld path { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--verloop); }
.richtingen path:nth-of-type(2) { transition-delay: 150ms; }
.richtingen path:nth-of-type(3) { transition-delay: 300ms; }

.traject { max-width: 600px; }
.traject svg { display: block; width: 100%; height: 24px; overflow: visible; }
.traject line { stroke: rgba(255, 255, 255, .55); stroke-width: 2; vector-effect: non-scaling-stroke; }
.papier .traject line { stroke: rgba(11, 42, 74, .35); }
.traject circle { fill: var(--jade); transform-box: fill-box; transform-origin: center; }
.traject__woorden { display: flex; justify-content: space-between; margin: 10px 0 0; font: 500 14px / 1.4 var(--tekst); }
html.js .traject circle { transform: scale(0); }
html.js .traject.in-beeld circle { transform: none; transition: transform 500ms var(--verloop); }
.traject circle:nth-of-type(2) { transition-delay: 100ms; }
.traject circle:nth-of-type(3) { transition-delay: 200ms; }

/* --- Korrel ---------------------------------------------------------------- */

.korrel { position: relative; isolation: isolate; }
.korrel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
.korrel > * { position: relative; z-index: 1; }
@media (max-width: 899px) { .korrel::before { opacity: .03; } }

/* --- Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: clamp(640px, 100svh, 900px);
  padding-top: var(--menu);
  display: flex;
  align-items: flex-end;
  background: var(--nachtblauw);
  color: var(--wit);
  overflow: hidden;
}
.hero__beeld { position: absolute; inset: 0; z-index: 0; }
.hero__beeld .foto { position: absolute; inset: 0; border-radius: 0; background: var(--nachtblauw); }
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 18%; }
.hero__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 68% 28%, rgba(6, 26, 47, 0) 0%, rgba(6, 26, 47, .15) 60%, rgba(6, 26, 47, .6) 100%),
    linear-gradient(180deg, rgba(6, 26, 47, .45) 0%, rgba(6, 26, 47, .02) 22%, rgba(6, 26, 47, .14) 44%, rgba(6, 26, 47, .84) 64%, var(--nachtblauw) 80%);
}
.hero__tekst { position: relative; z-index: 2; width: 100%; max-width: var(--inhoud); margin: 0 auto; padding: 0 var(--marge) 24px; }
.hero__regel { margin: 16px 0 0; max-width: 520px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.hero .knop { margin-top: 20px; }

@media (min-width: 900px) {
  .hero { align-items: center; }
  .hero__beeld { left: auto; width: 62%; }
  .hero__beeld img { object-position: 50% 20%; }
  .hero__beeld::after {
    background:
      linear-gradient(90deg, var(--nachtblauw) 0%, rgba(6, 26, 47, .86) 18%, rgba(6, 26, 47, .3) 46%, rgba(6, 26, 47, .08) 70%, rgba(6, 26, 47, .3) 100%),
      linear-gradient(180deg, rgba(6, 26, 47, .5) 0%, rgba(6, 26, 47, 0) 28%, rgba(6, 26, 47, 0) 62%, var(--nachtblauw) 100%);
  }
  .hero__tekst { padding-bottom: 20px; }
  .hero__kolom { width: min(600px, 48%); }
  .hero .knop { margin-top: 34px; }
}

/* De hero op papier, voor /individueel en /zakelijk. */
.hero--papier {
  min-height: 0;
  background: var(--papier);
  color: var(--donkerblauw);
  align-items: flex-start;
  padding-bottom: calc(var(--sectie) * .6);
}
.hero--papier .hero__tekst { padding-top: calc(var(--sectie) * .5); }
.hero--papier .hero__regel { color: inherit; }

/* Binnenkomst bij het laden, kop, regel, knop, beeld, met 80 ms ertussen.
   De twee woorden krijgen hun kleur een tel later. */
@keyframes rij-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes zacht-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kleur-woord { from { color: var(--wit); } }
.hero .merkregel, .hero .kop-home, .hero h1 { animation: rij-in 500ms var(--verloop) backwards; }
.hero .hero__regel { animation: rij-in 500ms var(--verloop) 80ms backwards; }
.hero .knop, .hero .onder-knop { animation: zacht-in 500ms ease 160ms backwards; }
.hero__beeld { animation: zacht-in 600ms ease 240ms backwards; }
.hero .kop__woord--moeten { animation: rij-in 500ms var(--verloop) backwards, kleur-woord 400ms ease 820ms backwards; }
.hero .kop__woord--willen { animation: rij-in 500ms var(--verloop) backwards, kleur-woord 400ms ease 900ms backwards; }

/* --- In beeld schuiven ----------------------------------------------------- */

html.js .schuif { opacity: 0; transform: translateY(14px); }
html.js .schuif--foto { transform: translateY(16px); }
html.js .schuif.in-beeld { opacity: 1; transform: none; transition: opacity var(--duur) var(--verloop), transform var(--duur) var(--verloop); }

/* --- Minder beweging, dan staat alles stil en zichtbaar --------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .schuif { opacity: 1; transform: none; }
  html.js .cijferblok { opacity: 1; transform: none; }
  html.js .aforisme::before, html.js .aforisme--groot::before, html.js .stap::after { transform: none; }
  html.js .uitslag__balk i, html.js .traject circle { transform: none; }
  html.js .zon line { stroke-dashoffset: 0; }
  html.js .richtingen path { stroke-dashoffset: 0; }
  .voortgang--actief { background: var(--jade); clip-path: none; }
}

/* --- Alleen op de testpagina ----------------------------------------------- */

.proef { padding: 40px 0; border-top: 1px solid var(--rand-papier); }
.proef__naam { margin: 0 0 20px; font: 600 13px / 1.3 var(--kop); letter-spacing: .16em; text-transform: uppercase; color: var(--houtskool-70); }
.donker .proef__naam, .nacht .proef__naam { color: var(--wit-72); }
.proef__rij { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-bottom: 20px; }
.staal { display: grid; gap: 4px; font-size: 13px; }
.staal i { display: block; width: 88px; height: 56px; border-radius: 12px; border: 1px solid var(--rand-papier); }

/* --- De homepage, de reis van donker naar papier ----------------------------- */

.sectie-video { padding: 30px 0 20px; background: linear-gradient(180deg, var(--nachtblauw), var(--donkerblauw)); }
.sectie-video .videokaart { max-width: 760px; margin: 0 auto; }
.sectie-video .videokaart__knop55 { margin-bottom: 20px; }
@media (min-width: 900px) { .sectie-video { padding: 8px 0 56px; } }

.straks { padding: 44px 0 40px; background: linear-gradient(180deg, var(--donkerblauw) 0%, #0A2544 40%, #071E37 75%, var(--nachtblauw) 100%); }
.straks h2 { margin-bottom: 8px; }
@media (min-width: 900px) { .straks { padding: 64px 0 56px; } }

.verhaal-band { color: var(--wit); background: var(--donkerblauw); scroll-margin-top: var(--menu); }
h1, h2, h3, [id] { scroll-margin-top: calc(var(--menu) + 16px); }
.verhaal-band__kop { padding: 52px 0 8px; margin: 0; }
.verhaal__deel--1 { background: linear-gradient(180deg, var(--donkerblauw), #0A2544); }
.verhaal__deel--2 { background: linear-gradient(180deg, #0A2544, var(--nachtblauw)); }
.verhaal__deel--3 { background: linear-gradient(180deg, var(--nachtblauw), var(--diepst)); }
.verhaal__deel--4 { background: linear-gradient(180deg, var(--diepst), var(--donkerblauw)); }
.verhaal__deel--5 { background: linear-gradient(180deg, var(--donkerblauw), #1A4A78); }
.verhaal__deel--6 { background: linear-gradient(180deg, #1A4A78, #2F6699); }
.verhaal__slot { background: #2F6699; padding: 24px 0 72px 28px; }
.verhaal__slot .aforisme { margin-top: 0; }
.verhaal__slot .aforisme__tekst { font-weight: 300; font-size: var(--maat-aforisme); }
.verhaal__slot p { max-width: var(--kolom); }
.verhaal__tekst .cijferblok { margin: 36px 0 8px; }
.verhaal__tekst .strook { margin: 28px 0 8px; }
.fotokaart--klein { max-width: 33%; }
@media (max-width: 899px) {
  .verhaal__inhoud--klein { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
  .verhaal__inhoud--klein .fotokaart--klein { max-width: none; margin-top: 0; }
}
@media (min-width: 900px) {
  .verhaal-band__kop { padding: 72px 0 8px 40px; }
  .verhaal__slot { padding: 32px 0 96px 272px; }
  .fotokaart--klein { max-width: 220px; }
}

.leven .adem { margin: 32px 0 28px; }
.leven .leven__knop { margin: 28px 0 0; }
.leven .onder-knop { margin-top: 12px; }

.grondlegger__band { display: grid; gap: 32px; }
.grondlegger__portret { margin: 0; max-width: 420px; }
.grondlegger__portret .foto img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 900px) {
  .grondlegger__band { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
  .grondlegger__tekst { max-width: var(--kolom); }
}

.onderdeel .stappen { margin: 8px 0 40px; }
.onderdeel__slot .vraagregel { margin-top: 28px; }
.onderdeel__slot .knop { margin-top: 4px; }

/* Papieren secties na elkaar delen één tussenruimte, niet twee. */
.sectie.papier { padding-top: calc(var(--sectie) * .5); padding-bottom: calc(var(--sectie) * .5); }
.verhaal-band + .sectie.papier { padding-top: var(--sectie); }
.sectie.papier h2 { margin-bottom: 20px; }
.grondlegger__band { gap: 24px; }
@media (min-width: 900px) { .grondlegger__band { gap: 48px; } }
.onderdeel .stappen { margin: 8px 0 28px; }

/* De strook van 2015 in De weg terug, staand zodat gezicht en arm heel blijven. */
.verhaal__deel--4 .strook .foto img { aspect-ratio: 4 / 5; object-position: 50% 12%; }

/* Twee tekeningen rechts naast de tekst, alleen op een groot scherm. */
.tekening--zij { display: none; }
@media (min-width: 900px) {
  .tweeluik { display: grid; grid-template-columns: minmax(0, var(--kolom)) minmax(0, 1fr); gap: 64px; align-items: center; }
  .tekening--zij { display: block; max-width: 320px; margin: 0 auto; }
}
.ringen circle { fill: none; stroke: var(--jade-diep); stroke-width: 2; stroke-dasharray: 1; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
.ringen .ringen__punt { fill: var(--jade); stroke: none; stroke-dasharray: none; transform: none; }
html.js .ringen circle:not(.ringen__punt) { stroke-dashoffset: 1; }
html.js .ringen.in-beeld circle:not(.ringen__punt) { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--verloop); }
.ringen circle:nth-of-type(2) { transition-delay: 80ms; }
.ringen circle:nth-of-type(3) { transition-delay: 160ms; }
.ringen circle:nth-of-type(4) { transition-delay: 240ms; }
.ringen circle:nth-of-type(5) { transition-delay: 320ms; }
html.js .ringen .ringen__punt { opacity: 0; }
html.js .ringen.in-beeld .ringen__punt { opacity: 1; transition: opacity 400ms ease 700ms; }
@media (prefers-reduced-motion: reduce) { html.js .ringen circle { stroke-dashoffset: 0; opacity: 1; } }

/* De trap, vijf woorden die oplopen, naast de belofte. */
.trap { margin: 0; max-width: 360px; }
.trap__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.trap__tree { position: relative; padding: 0 0 0 20px; font: 600 clamp(20px, 1.8vw, 24px) / 1.2 var(--kop); color: var(--donkerblauw); }
.trap__tree::before { content: ""; position: absolute; left: 0; top: 0; bottom: -14px; width: 3px; background: var(--jade); transform-origin: top; }
.trap__tree:last-child::before { bottom: 0; }
.trap__tree:nth-child(2) { margin-left: 24px; }
.trap__tree:nth-child(3) { margin-left: 48px; }
.trap__tree:nth-child(4) { margin-left: 72px; }
.trap__tree:nth-child(5) { margin-left: 96px; }
.trap__regel { margin: 18px 0 0; font-size: 14px; color: var(--houtskool-70); }
html.js .trap__tree { opacity: 0; transform: translateY(10px); }
html.js .trap.in-beeld .trap__tree { opacity: 1; transform: none; transition: opacity 500ms var(--verloop), transform 500ms var(--verloop); }
html.js .trap.in-beeld .trap__tree:nth-child(2) { transition-delay: 120ms; }
html.js .trap.in-beeld .trap__tree:nth-child(3) { transition-delay: 240ms; }
html.js .trap.in-beeld .trap__tree:nth-child(4) { transition-delay: 360ms; }
html.js .trap.in-beeld .trap__tree:nth-child(5) { transition-delay: 480ms; }
@media (prefers-reduced-motion: reduce) { html.js .trap__tree { opacity: 1; transform: none; } }

/* --- /aanvraag, één scherm, één beslissing ----------------------------------- */
.aanvraag { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; }
.aanvraag .hero__tekst { padding-top: 28px; padding-bottom: 40px; }
.aanvraag h1 { margin-bottom: 16px; }
.aanvraag__vraag { margin: 28px 0 16px; font: 600 clamp(20px, 2vw, 26px) / 1.25 var(--kop); }
.aanvraag__keuzes { display: grid; gap: 20px; }
.aanvraag__keuze .knop { width: 100%; max-width: 320px; }
.aanvraag__keuze .onder-knop { margin-top: 8px; }
.aanvraag__slot { margin-top: 28px; }
@media (min-width: 560px) { .aanvraag__keuzes { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 900px) { .aanvraag .hero__tekst { padding-top: 56px; } .aanvraag__vraag { margin-top: 40px; } }

/* --- /individueel ------------------------------------------------------------ */
.hero__kolom--breed { max-width: 760px; }
.voorwie__band { display: grid; gap: 28px; }
.voorwie__portret { margin: 0; max-width: 420px; }
.voorwie__portret .foto img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.voorwie__tekst > .schuif { margin-bottom: 28px; }
.drempel { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rand-papier); }
.drempel__eerste { font: 600 clamp(22px, 2.2vw, 30px) / 1.2 var(--kop); margin-bottom: 14px; }
@media (min-width: 900px) {
  .voorwie__band { grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .voorwie__tekst { max-width: var(--kolom); }
}
.traject-band { background: linear-gradient(180deg, var(--nachtblauw), #1A4A78); }
.traject-band h2 { margin-bottom: 40px; }
.rij { display: grid; gap: 24px; margin-bottom: 56px; align-items: center; }
.rij__beeld { max-width: 420px; }
.rij .zon { max-width: 260px; }
.rij .cijferblok { margin: 0; }
.rij p.schuif { margin: 0; max-width: var(--kolom); }
@media (min-width: 900px) {
  .rij { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .rij--wissel .rij__beeld { order: 2; }
  .rij__beeld { justify-self: center; width: 100%; }
}
.traject-band__slot { margin-top: 16px; }
.slot .knop { margin-top: 8px; }

/* Op donker wint donker, ook als de pagina zelf papier is. */
.donker .cijferblok__cijfer, .nacht .cijferblok__cijfer { color: var(--jade); }
.donker .cijferblok__regel, .nacht .cijferblok__regel { color: var(--wit); }
.donker .kop__woord--moeten, .nacht .kop__woord--moeten { color: var(--rood-licht); }
.donker .kop__woord--willen, .nacht .kop__woord--willen { color: var(--jade); }
/* De voet breekt per link, nooit midden in een woordpaar. */
.voet__band { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }

/* De hero van /individueel op een groot scherm, tekst links, het portret rechts. */
.hero__portret { display: none; margin: 0; }
@media (min-width: 900px) {
  .hero__tweeluik { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); gap: 64px; align-items: center; }
  .hero__portret { display: block; max-width: 440px; justify-self: end; }
  .hero__portret .foto img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
  .voorwie__portret { display: none; }
  .voorwie__band { grid-template-columns: minmax(0, 1fr); }
}

/* Op de telefoon blijven losse foto's binnen de maat. */
@media (max-width: 899px) {
  .verhaal__inhoud > .fotokaart .foto img { max-height: 300px; object-fit: cover; object-position: 50% 25%; }
  .grondlegger__portret, .voorwie__portret { max-width: 72%; }
  .grondlegger__portret .foto img, .voorwie__portret .foto img { aspect-ratio: 4 / 5; }
  .strook--twee .foto img { aspect-ratio: 4 / 5; }
}

/* --- /zakelijk ---------------------------------------------------------------- */
.stand--open { display: none; }
html[data-teamroute="open"] .stand--open { display: block; }
html[data-teamroute="open"] .stand--dicht { display: none; }
.hero__uitslag { margin-top: 32px; max-width: 520px; }
@media (min-width: 900px) { .hero__uitslag { margin-top: 0; justify-self: end; width: 100%; } }
.redenen { display: grid; gap: 28px; margin-bottom: 32px; }
.reden p { margin: 0; }
@media (min-width: 900px) {
  .redenen { grid-template-columns: 1fr 1fr; gap: 0; }
  .reden { padding-right: 40px; }
  .reden + .reden { padding-left: 40px; padding-right: 0; border-left: 1px solid var(--rand-papier); }
}
.aforisme--klein .aforisme__tekst { font-size: clamp(22px, 2vw, 28px); }
.cijfers-twee { display: grid; gap: 24px; margin-bottom: 32px; }
.cijfers-twee .cijferblok { margin: 0; }
.cijfers-twee .cijferblok__cijfer { font-size: clamp(56px, 6vw, 96px); }
@media (min-width: 900px) { .cijfers-twee { grid-template-columns: 1fr 1fr; gap: 48px; } }
.onderstreept { text-decoration: underline; text-decoration-color: var(--jade); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* De brede tekstkolom in de hero van de losse pagina's, niet de 48 procent van de homepage. */
@media (min-width: 900px) {
  .hero__kolom--breed { width: auto; max-width: 720px; }
  .hero--papier h1 { max-width: 14ch; }
}

/* Papieren secties na elkaar, één lucht ertussen en niet twee. */
.sectie.papier { padding-top: calc(var(--sectie) * .7); padding-bottom: calc(var(--sectie) * .7); }
.sectie.papier + .sectie.papier { padding-top: 0; }
.hero--papier + .sectie.papier { padding-top: calc(var(--sectie) * .3); }
.aforisme { margin: 28px 0 24px; }
.aforisme--groot { margin-top: 0; }
.sectie.papier .fotokaart:first-child { margin-top: 0; }

/* --- /gesprek ------------------------------------------------------------------ */
.gesprek__kop { display: grid; gap: 20px; margin-bottom: 36px; }
.gesprek__portret { margin: 0; width: 88px; }
.gesprek__portret .foto { border-radius: 50%; }
.gesprek__portret .foto img { aspect-ratio: 1; object-fit: cover; }
@media (min-width: 600px) { .gesprek__kop { grid-template-columns: 96px minmax(0, 1fr); gap: 28px; align-items: start; } .gesprek__portret { width: 96px; } }
.gesprek .formulier { margin-bottom: 56px; }
.gesprek__h2 { margin-top: 8px; }
.gesprek__spanning { margin-top: 36px; }
html.herkend .koud { display: none; }
fieldset.veld { border: 0; padding: 0; margin: 0; }
fieldset.veld legend { margin-bottom: 10px; padding: 0; }

/* --- /privacy en /community ------------------------------------------------ */
.privacy h2 { font-size: clamp(22px, 2vw, 28px); margin: 36px 0 12px; }
.privacy ul { margin: 0 0 1.2em; padding-left: 22px; }
.privacy li { margin-bottom: 8px; }
#lijst .formulier { margin: 32px 0 48px; }

/* Pagina's zonder hero beginnen onder het menu. */
main > .sectie:first-child { padding-top: calc(var(--menu) + 24px); }