/* ==========================================================
   Forty · huisstijl Papier (oktober 2026)
   Lichte basis, kleur loopt mee met het scrollen, kleur zit in de vorm.
   Regels: zie HUISSTIJL.md in de root van de repo.
   Alles hangt aan html[data-variant="papier"], dat op elke pagina staat.
   ========================================================== */

html[data-variant] {
  --tekst-zacht: #5F5B85;          /* donkerder dan in forty.css: kleine tekst > 4,5:1 */
  --canvas: #F6F6F3;               /* papier, de rustkleur van de kleurreis */
  --ultramarijn: #2341D6;          /* één blauw voor alles: accent, vlak en trechter */
  --ultramarijn-diep: #2341D6;
  --vlak-ultramarijn: var(--ultramarijn);
  --zon: #FFC72C;                  /* zonnegeel: de actie, op licht en op blauw dezelfde tint */
  --zon-licht: #FFC72C;
  --label: 12px;
}

/* ---------- 1. Canvas en kleurreis ----------
   Eén vlakke achtergrondkleur voor de hele pagina, die tijdens het scrollen
   langzaam verschuift (papier en lila). Secties zijn transparant. */
html[data-variant] body { background: var(--reis, var(--canvas)); }
html[data-variant] .hero,
html[data-variant] .sec:not(.band),
html[data-variant] .sec--wit,
html[data-variant] .sec--rand,
html[data-variant] .paginakop,
html[data-variant] .case-drie { background: transparent !important; }
html[data-variant] [data-ontvouw]:not(.band) { clip-path: none; }

/* ---------- 2. Hero: lichte compositie met de trechter ---------- */
html[data-variant] .hero { color: var(--inkt); --laag1: #F6DCC8; --laag2: #DCD5FF; --laag3: var(--ultramarijn); }
html[data-variant] .hero .korrel { display: none; }
html[data-variant] .hero__lead { color: var(--tekst); }
html[data-variant] .hero__tekst { max-width: none; }
html[data-variant] .hero__lead,
html[data-variant] .hero__acties,
html[data-variant] .hero__bewijs { max-width: 560px; }

/* De kop: tweede regel springt een kolom in, het label staat in die kolom */
html[data-variant] .hero h1 { font-size: clamp(54px, 6.9vw, 116px); line-height: .92; letter-spacing: -.02em; }
html[data-variant] .hero h1 .woorden + .woorden { padding-left: clamp(0px, 9vw, 150px); }
html[data-variant] .hero__tekst .eyebrow { order: -1; padding-left: clamp(0px, 9vw, 150px); }
.woord--accent .woord__in { color: var(--ultramarijn); }

/* De trechter: breed en kort (alle opties), smal en lang (het besluit), stip aan het eind */
html[data-variant] .hero__laag {
  aspect-ratio: auto; max-width: none; top: 0; left: auto; filter: none; box-shadow: none;
  translate: 0 var(--parallax, 0px);
}
html[data-variant] .hero__laag--1 { background: var(--laag1); right: 3%; width: 30vw; height: 52%; }
html[data-variant] .hero__laag--2 { background: var(--laag2); right: calc(3% + 5.5vw); width: 19vw; height: 70%; }
html[data-variant] .hero__laag--3 { background: var(--laag3); right: calc(3% + 11vw); width: 8vw; height: 88%; -webkit-mask-image: none; mask-image: none; }
html[data-variant] .hero__laag--3::before {
  content: ""; position: absolute; left: 50%; bottom: 6%; width: 26%; min-width: 10px; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; background: var(--zon);
}

/* Bewijs onder de knoppen: één cijfer met bron */
.hero__bewijs {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(23,20,61,.14);
  text-decoration: none; color: inherit;
}
.hero__bewijs-cijfer { font-family: var(--serif); font-size: 48px; line-height: 1; letter-spacing: -.01em; }
.hero__bewijs-tekst { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.4; }
.hero__bewijs-bron { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; color: var(--tekst-zacht); }
.hero__bewijs:hover .hero__bewijs-bron { color: var(--ultramarijn); }
@media (prefers-reduced-motion: no-preference) {
  .hero__bewijs { opacity: 0; transform: translateY(12px); animation: zacht-op .8s var(--curve-uit) 1.15s forwards; }
}

@media (max-width: 860px) {
  html[data-variant] .hero__lagen::after { display: none; }
  html[data-variant] .hero__laag { -webkit-mask-image: none; mask-image: none; }
  html[data-variant] .hero__laag--1 { right: 20%; width: 32vw; height: 130px; }
  html[data-variant] .hero__laag--2 { right: calc(20% + 5.5vw); width: 21vw; height: 180px; }
  html[data-variant] .hero__laag--3 { right: calc(20% + 11vw); width: 10vw; height: 232px; }
  html[data-variant] .hero__in { padding-top: 268px !important; }
}
@media (max-width: 760px) {
  html[data-variant] .hero h1 .woorden + .woorden,
  html[data-variant] .hero__tekst .eyebrow { padding-left: 0; }
}

/* ---------- 3. Letters: per teken op, met een minieme scheefstand ---------- */
.letter { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero .woord__in, .paginakop .woord__in { transform: none; animation: none; }
  .beweeg-klaar .band .woord__in, .beweeg-klaar .band.in-beeld .woord__in { transform: none; transition: none; }
  .woord { overflow: visible; }
  .hero .letter, .paginakop .letter {
    opacity: 0; transform: translateY(.28em) skew(-4deg, 1.8deg) scaleY(.92); transform-origin: 0 100%;
    animation: letter-op .9s var(--curve-uit) forwards; animation-delay: calc(.15s + var(--c, 0) * 16ms);
  }
  .hero .woorden + .woorden .letter { animation-delay: calc(.4s + var(--c, 0) * 16ms); }
  .beweeg-klaar .band .letter {
    opacity: 0; transform: translateY(.28em) skew(-4deg, 1.8deg) scaleY(.92); transform-origin: 0 100%;
    transition: opacity .7s var(--curve-uit), transform .9s var(--curve-uit); transition-delay: calc(var(--c, 0) * 14ms);
  }
  .beweeg-klaar .band.in-beeld .letter { opacity: 1; transform: none; }
}
@keyframes letter-op { to { opacity: 1; transform: none; } }

/* ---------- 4. Kop en footer in de kleur van het canvas ---------- */
html[data-variant] .kop__nav,
html[data-variant] .kop__menu-knop {
  background: var(--reis, var(--canvas)); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(23,20,61,.10); box-shadow: 0 6px 24px rgba(23,20,61,.06);
}
html[data-variant] .kop.kop--vast { background: var(--reis, var(--canvas)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 rgba(23,20,61,.08); }
html[data-variant] .kop.kop--vast .kop__nav { box-shadow: none; }

html[data-variant] .voet { background: var(--reis, var(--canvas)); color: var(--inkt); }
html[data-variant] .voet__merk img { filter: brightness(.12); }
html[data-variant] .voet__onder, html[data-variant] .voet__onder a { color: var(--tekst-zacht); }
html[data-variant] .voet__kol a { color: var(--inkt); }
html[data-variant] .voet__kol a:hover, html[data-variant] .voet__onder a:hover { color: var(--ultramarijn); }
html[data-variant] .voet__onder { border-top-color: rgba(23,20,61,.12); }

/* ---------- 5. Het ene donkere vlak: vlak ultramarijn, geen verloop ---------- */
html[data-variant] .band:not(.band--nacht) { background: var(--vlak-ultramarijn) !important; }
html[data-variant] .band .korrel { display: none; }
html[data-variant] .band--nacht { background: var(--inkt) !important; }
html[data-variant] .uitgelicht { background: var(--vlak-ultramarijn); }

/* ---------- 6. Kaarten: wit zonder grijze rand, hovers zonder optillen ---------- */
html[data-variant] .herken,
html[data-variant] .casekaart,
html[data-variant] .verhaalkaart,
html[data-variant] .kern,
html[data-variant] .productblok { border-color: transparent; box-shadow: 0 1px 2px rgba(23,20,61,.04); }
html[data-variant] .herken:hover,
html[data-variant] .casekaart:hover,
html[data-variant] .verhaalkaart:hover,
html[data-variant] .productblok:hover { transform: none; }
/* Kaarten zonder beeld: de rand wordt ultramarijn en de pijl schuift een stukje op */
html[data-variant] .herken:hover,
html[data-variant] .productblok:hover { border-color: var(--ultramarijn); }
.herken .naar { transition: transform var(--t-kort) var(--curve); }
.herken:hover .naar { transform: translateX(4px); }
/* Kaarten met beeld: alleen het beeld zoomt licht in, de leeslink wordt onderstreept */
html[data-variant] .casekaart:hover .casekaart__beeld img,
html[data-variant] .verhaalkaart:hover .verhaalkaart__beeld svg { transform: scale(1.04); }
.verhaalkaart__beeld { overflow: hidden; }
.verhaalkaart__beeld svg { transition: transform var(--t-midden) var(--curve); }
html[data-variant] .casekaart:hover .casekaart__lees { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 7. Eén labelstijl ---------- */
html[data-variant] .eyebrow,
html[data-variant] .label-nr,
html[data-variant] .casekaart__naam,
html[data-variant] .case-drie__kop,
html[data-variant] .case-zij span,
html[data-variant] .kern span,
html[data-variant] .artikel__meta span,
html[data-variant] .voet__kol span {
  font-size: var(--label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}
html[data-variant] .eyebrow,
html[data-variant] .case-zij span,
html[data-variant] .kern span,
html[data-variant] .artikel__meta span,
html[data-variant] .voet__kol span { color: var(--tekst-zacht); }
html[data-variant] .label-nr { color: var(--ultramarijn); }
html[data-variant] .op-donker .eyebrow,
html[data-variant] .uitgelicht .eyebrow { color: var(--lila-licht); }
html[data-variant] .verhaalkaart .eyebrow { font-size: var(--label); }

/* ---------- 8. Cases schuiven over elkaar (homepage, desktop) ---------- */
@media (min-width: 961px) {
  .cases-stapel { display: flex; flex-direction: column; gap: 24px; }
  .cases-stapel > .casekaart {
    position: sticky; top: calc(112px + var(--n, 0) * 18px);
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 40px; row-gap: 16px;
    grid-template-rows: auto auto auto 1fr; padding: 16px 40px 16px 16px; min-height: 420px;
    transform-origin: 50% 0; box-shadow: 0 -8px 32px rgba(23,20,61,.06);
  }
  .cases-stapel > .casekaart .casekaart__beeld { margin: 0; grid-row: 1 / span 4; aspect-ratio: auto; align-self: stretch; min-height: 340px; }
  .cases-stapel > .casekaart .casekaart__kop { margin-top: 24px; }
  .cases-stapel > .casekaart h3 { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.05 !important; }
  .cases-stapel > .casekaart .casekaart__lees { align-self: end; margin: 0 0 24px !important; }
}

/* ---------- 9. Case in drie stappen: vraag, toets, besluit ---------- */
.case-drie__in {
  display: grid; grid-template-columns: minmax(0, 200px) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 56px); padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px);
  border-top: 1px solid rgba(23,20,61,.12); border-bottom: 1px solid rgba(23,20,61,.12);
}
.case-drie__meta { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--tekst); }
.case-drie__meta .chip { margin-top: 6px; }
.case-drie__stap { display: flex; flex-direction: column; gap: 12px; }
.case-drie__kop { display: flex; gap: 16px; color: var(--tekst-zacht); padding-bottom: 12px; border-bottom: 1px solid rgba(35,65,214,.22); }
.case-drie__kop b { font-weight: 600; color: var(--inkt); }
.case-drie__stap p { font-family: var(--serif); font-size: 22px; line-height: 1.25; color: var(--inkt); text-wrap: pretty; }
.case-drie__stap--besluit p { color: var(--ultramarijn-diep); }
@media (max-width: 960px) {
  .case-drie__in { grid-template-columns: 1fr; }
  .case-drie__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .case-drie__meta .chip { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .beweeg-klaar .case-drie__stap { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--curve-uit), transform .8s var(--curve-uit); transition-delay: calc(var(--s, 0) * 120ms); }
  .beweeg-klaar .case-drie.in-beeld .case-drie__stap { opacity: 1; transform: none; }
}

/* ---------- 10. Kleur aangescherpt: één blauw, zon die op licht staat ---------- */
html[data-variant] .btn--zon { background: var(--zon-licht); }
html[data-variant] .op-donker .btn--zon,
html[data-variant] .band .btn--zon { background: var(--zon); }
/* Geen gloed: de knop is een vlak geel vlak, bij hover een fractie dieper */
html[data-variant] .btn--zon { box-shadow: none; }
html[data-variant] .btn--zon:hover { box-shadow: none; filter: brightness(.96); }
html[data-variant] .uitkomst { border-color: rgba(35,65,214,.14); }
html[data-variant] .uitkomst__kol--go .uitkomst__tegels span { background: var(--ultramarijn); }

/* ---------- 11. Overige pagina's: dezelfde regels als de homepage ---------- */
/* De trechter in de paginakop van overzichtspagina's, kleiner dan in de hero */
html[data-variant] .paginakop--vorm { overflow: hidden; }
.paginakop__vorm { position: absolute; inset: 0; pointer-events: none; }
.vorm__laag { position: absolute; top: 0; border-radius: 999px; translate: 0 var(--parallax, 0px); }
.vorm__laag--1 { background: #F6DCC8; right: 4%; width: 15vw; height: 50%; }
.vorm__laag--2 { background: #DCD5FF; right: calc(4% + 2.9vw); width: 9.2vw; height: 64%; }
.vorm__laag--3 { background: var(--ultramarijn); right: calc(4% + 5.7vw); width: 3.6vw; height: 78%; }
.vorm__laag--3::before {
  content: ""; position: absolute; left: 50%; bottom: 7%; width: 30%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; background: var(--zon);
}
html[data-variant] .paginakop--vorm .paginakop__in > * { max-width: min(1000px, calc(100vw - 4% - 15vw - 180px)); }
@media (prefers-reduced-motion: no-preference) {
  .vorm__laag { opacity: 0; transform: translateY(14%); animation: laag-op 1.6s var(--curve-uit) forwards; }
  .vorm__laag--1 { animation-delay: .1s; }
  .vorm__laag--2 { animation-delay: .3s; }
  .vorm__laag--3 { animation-delay: .5s; }
}
@media (max-width: 860px) {
  .paginakop__vorm { display: none; }
  html[data-variant] .paginakop--vorm .paginakop__in > * { max-width: none; }
}

/* Uitgelicht verhaal: wit vlak, kleur zit in de trechter (één donker moment per pagina) */
html[data-variant] .uitgelicht { background: #fff; color: var(--inkt); box-shadow: 0 1px 2px rgba(23,20,61,.04); }
html[data-variant] .uitgelicht .korrel { display: none; }
html[data-variant] .uitgelicht p { color: var(--tekst); }
html[data-variant] .uitgelicht .eyebrow { color: var(--tekst-zacht); }
html[data-variant] .uitgelicht span[style*="font-weight:600"] { color: var(--ultramarijn); }
html[data-variant] .uitgelicht:hover h2 { color: var(--ultramarijn); }

/* Manifest op Over: licht, met haarlijnen. De slotband blijft het enige donkere vlak */
html[data-variant] .sec--manifest .korrel { display: none; }
html[data-variant] .sec--manifest .manifest { border-top-color: rgba(23,20,61,.14); }
html[data-variant] .sec--manifest .manifest li { border-bottom-color: rgba(23,20,61,.14); }
html[data-variant] .sec--manifest .manifest li span { font-size: var(--label); font-weight: 600; letter-spacing: .14em; color: var(--ultramarijn); }
html[data-variant] .sec--manifest .manifest li p { color: var(--inkt); }

/* ---------- 12. Perzik als steunkleur: de praktijk, de mensen, de context ----------
   Blauw is het besluit, zon de actie, perzik alles wat over het echte werk gaat. */
html[data-variant] {
  --perzik: #F6DCC8;        /* vorm: brede laag van de trechter */
  --perzik-licht: #FBEDE3;  /* vlak achter citaten en labels */
  --perzik-lijn: #E9B596;   /* lijn in perzik, bijvoorbeeld boven de Vraag-stap */
  --data: #9FB6BF;          /* blauwgrijs: tweede kleur in grafieken, naast blauw */
  --perzik-tekst: #A8542B;  /* tekst op perzik-licht */
}
/* Citaten in artikelen: geen blauwe rand, een zacht perzik vlak */
html[data-variant] .prose blockquote { border-left: 0; background: var(--perzik-licht); border-radius: 24px; padding: 28px 32px; }
html[data-variant] .prose blockquote cite, html[data-variant] .prose blockquote footer { color: var(--perzik-tekst); }
/* Sector- en methodelabels: context, dus perzik. Besluitlabels blijven blauw. */
html[data-variant] .chip--zacht { background: var(--perzik-licht); border-color: transparent; color: var(--perzik-tekst); font-weight: 600; }
/* Case in drie stappen volgt de trechter: vraag perzik, toets lila, besluit blauw */
html[data-variant] .case-drie__kop { border-bottom-width: 2px; }
html[data-variant] .case-drie__stap[style*="--s:0"] .case-drie__kop { border-bottom-color: var(--perzik-lijn); }
html[data-variant] .case-drie__stap[style*="--s:1"] .case-drie__kop { border-bottom-color: #B9B0F5; }
html[data-variant] .case-drie__stap--besluit .case-drie__kop { border-bottom-color: var(--ultramarijn); }

/* ---------- 13. Letter: Instrument Serif voor koppen en kernzinnen, DM Sans voor titels van onderdelen ----------
   Kaart-, stap-, lijst- en tabeltitels onder ongeveer 36 pixels staan in DM Sans halfvet.
   Instrument Serif heeft maar één gewicht en wordt op die maten te dun. */
html[data-variant] :is(
  .verhaalkaart h3, .casekaart:not(.cases-stapel > .casekaart) h3, .herken h3, .herken > .serif, .productblok__t, .volgende strong,
  .lijst-kolom h3, .prose h3, .artikel h3, .vk__k h3, .meth h3, .team .lid h3, .pv-blok h3, .pv-4 h3,
  .cv__titel, .a3__titel, .persoon__rol, .uitkomst__t
) {
  font-family: var(--sans); font-weight: 600; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.25; letter-spacing: -.012em;
}
html[data-variant] :is(.case-drie__stap p, .lijst-kolom .vraag, .route .vraag, .herken .vraag, .pv-feiten dt, .rijen dt, .vk__blijft b, .pv-blok p > strong) {
  font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -.008em;
}
html[data-variant] thead th { font-family: var(--sans); font-weight: 600; font-size: 14px; }

/* ---------- 14. Review Bedow: minder vlakken, één labelstijl, geen verlopen, vrije trechter ---------- */
/* Kaarten zonder eigen object-rol worden kolommen met een haarlijn */
html[data-variant] .herken--lijn { background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--inkt); border-radius: 0; padding: 24px 0 0; }
html[data-variant] .herken--lijn:hover { border-color: var(--inkt); }
html[data-variant] .productblok { background: transparent !important; box-shadow: none; border: 0; border-top: 1px solid rgba(23,20,61,.14); border-bottom: 1px solid rgba(23,20,61,.14); border-radius: 0; padding: 24px 0; }
html[data-variant] .productblok:hover { border-color: var(--ultramarijn); }

/* Eén labelstijl, ook voor de nummers in productkaarten */
html[data-variant] .label-nr { font-size: var(--label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-zacht); }

/* De vijf verschuivingen: typografisch, geen beeld met verloop */
.verschuivingen { display: block; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--inkt); }
.verschuivingen li { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(23,20,61,.14); font-family: var(--serif); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; color: var(--inkt); }
.verschuivingen li span { font-family: var(--sans); font-size: var(--label); font-weight: 600; letter-spacing: .14em; color: var(--ultramarijn); }

/* Geen verlopen: route, stappen, uitkomst en verhaalbeelden vlak */
html[data-variant] .route::before { background: #DCD5FF; }
html[data-variant] .stap__punt { border-color: var(--ultramarijn); }
html[data-variant] .stap:first-child .stap__punt { border-color: #B9B0F5; }
html[data-variant] .stap:last-child .stap__punt { background: var(--zon); box-shadow: none; }
@media (max-width: 860px) {
  html[data-variant] .stap:not(:last-child)::after, html[data-variant] .stap:nth-child(2)::after { background: #DCD5FF; }
}
html[data-variant] .uitkomst__kol--go .uitkomst__tegels span { background: var(--ultramarijn); }
html[data-variant] .verhaalkaart__beeld { background: #EEEDF8; }

/* De trechter komt van boven de rand: geen ronde toppen vlak onder de navigatie */
@media (min-width: 861px) {
  html[data-variant] .hero__laag { top: -180px; }
  html[data-variant] .hero__laag--1 { height: calc(52% + 180px); }
  html[data-variant] .hero__laag--2 { height: calc(70% + 180px); }
  html[data-variant] .hero__laag--3 { height: calc(88% + 180px); }
  .vorm__laag { top: -140px; }
  .vorm__laag--1 { height: calc(50% + 140px); }
  .vorm__laag--2 { height: calc(64% + 140px); }
  .vorm__laag--3 { height: calc(78% + 140px); }
}

/* ---------- 15. Beeld in één toon: casefoto's in inkt en wit, zodat ze niet met het palet vechten ---------- */
html[data-variant] .casekaart__beeld { background: var(--inkt) !important; }
html[data-variant] .casekaart__beeld img { filter: grayscale(1) contrast(1.08) brightness(1.05); mix-blend-mode: screen; }

/* ---------- 16. Puntenwolk: van veel naar één (homepage) ---------- */
.wolk { position: relative; height: 240vh; }
.wolk__plak { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.wolk__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; width: 100%; }
.wolk__tekst { display: flex; flex-direction: column; gap: 24px; }
.wolk__doek { width: 100%; height: min(72vh, 680px); display: block; }
.wolk__stappen { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid rgba(23,20,61,.14); }
.wolk__stappen li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid rgba(23,20,61,.14); opacity: .35; transition: opacity .45s cubic-bezier(.2,.7,.2,1); }
.wolk__stappen li.is-actief, .wolk__stappen li.is-gedaan { opacity: 1; }
.wolk__stappen b { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; color: var(--inkt); }
.wolk__stappen li:nth-child(3).is-actief b { color: var(--ultramarijn); }
.wolk__stappen span { color: var(--tekst); }
@media (max-width: 860px) {
  .wolk { height: 220vh; }
  .wolk__in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wolk__doek { height: 44vh; order: -1; }
  .wolk__tekst { gap: 12px; }
  .wolk__stappen { margin-top: 4px; }
  .wolk__stappen li { padding: 10px 0; }
  .wolk__stappen b { font-size: 24px; }
  .wolk__stappen span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .wolk { height: auto; }
  .wolk__plak { position: static; height: auto; padding-block: 96px; }
  .wolk__stappen li { opacity: 1; }
}

/* ---------- 17. Trechter als navigatie op productpagina's, en duur bij de knop ---------- */
/* Op een productpagina licht de laag van dat product op, de andere twee wijken */
.paginakop--toetsen .vorm__laag--1, .paginakop--toetsen .vorm__laag--3,
.paginakop--landen .vorm__laag--1, .paginakop--landen .vorm__laag--2 { opacity: .28 !important; animation: none; transform: none; }
.paginakop--toetsen .vorm__laag--3::before { opacity: 0; }
.paginakop--toetsen .vorm__laag--2 { background: #B9B0F5; }
/* Duur en drempel naast de knop, zoals Neko de prijs gewoon in beeld zet */
.cta-meta { font-size: 14px; color: var(--tekst-zacht); white-space: nowrap; }
.op-donker .cta-meta, .band .cta-meta { color: var(--lila-licht); }
.hero__acties { flex-wrap: wrap; align-items: center; }
.paginakop--toetsen .vorm__laag--3 { opacity: 0 !important; }  /* bij toetsen is er nog geen besluit */