/* ================= Klantcase: beelden op maat en hun bouwstenen =================
   Gebruikt door case2/beelden.njk (opmaak van de klantcase zelf: case2.css). Werking: case2.js zet per
   tekstblok de actieve tekststap; beeld-elementen met data-vanaf="n" krijgen .is-aan zodra stap n bereikt is,
   elementen met data-alleen="n" alleen bij stap n. Alleen transform/opacity bewegen; zonder JS of
   bij "minder beweging" staat alles gewoon zichtbaar. */

/* ---------- Situatie zonder eigen beeld: sporen ---------- */
.sporen { display: grid; gap: var(--sc-space-5); padding: clamp(var(--sc-space-5), 3vw, var(--sc-space-7)); }
.sporen__klant img { display: block; height: 30px; width: auto; }
.spoor { display: grid; gap: var(--sc-space-3); }
.spoor__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-space-2); }
.spoor__kop strong { font-size: var(--sc-fs-lead); }
.spoor__kop span { font-size: var(--sc-fs-small); color: var(--sc-ink-muted); }
.spoor__lijn { height: 6px; border-radius: 6px; background: var(--sc-blue-soft); overflow: hidden; }
.spoor__lijn span { display: block; height: 100%; background: var(--sc-blue); transform-origin: left; }
.spoor--focus .spoor__lijn span { background: var(--sc-lime); }
.spoor__items { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); margin: 0; padding: 0; list-style: none; }
.spoor__items li {
  padding: var(--sc-space-2) var(--sc-space-4); border-radius: var(--sc-radius-pill);
  background: var(--sc-ink); color: var(--sc-white); font-size: var(--sc-fs-small); font-weight: 500;
}
.sporen__sc {
  display: flex; align-items: center; gap: var(--sc-space-3); padding: var(--sc-space-3) var(--sc-space-5);
  border-radius: var(--sc-radius-pill); background: var(--sc-lime); color: var(--sc-ink); font-size: var(--sc-fs-small);
}

/* ---------- Uitdaging zonder eigen beeld: losse onderdelen → één kern ---------- */
.knopen { position: relative; aspect-ratio: 1; padding: 0; container-type: inline-size; overflow: visible; }
.knopen__lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.knopen__lijnen line { stroke-width: .35; vector-effect: non-scaling-stroke; }
.knopen__kris { stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; stroke-dasharray: 4 4; }
.knopen__spaak { stroke: var(--sc-lime); stroke-width: 1.5; }
.knoop {
  position: absolute; left: 0; top: 0; z-index: 3; white-space: nowrap;
  padding: .45em .9em; border-radius: var(--sc-radius-pill); font-size: clamp(.7rem, 2.6cqi, .95rem); font-weight: 600;
  background: var(--sc-white); color: var(--sc-ink); box-shadow: var(--sc-shadow-2);
  transform: translate(calc(var(--x1) * 1cqi - 50%), calc(var(--y1) * 1cqi - 50%));
}
.knopen.is-geordend .knoop { transform: translate(calc(var(--x2) * 1cqi - 50%), calc(var(--y2) * 1cqi - 50%)); }
.knopen__kern {
  position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%;
  display: grid; justify-items: center; gap: var(--sc-space-2); width: 25cqi; padding: var(--sc-space-3);
  border-radius: 50%; aspect-ratio: 1; align-content: center; text-align: center;
  background: var(--sc-lime); color: var(--sc-ink); font-weight: 700; font-size: clamp(.75rem, 3cqi, 1.05rem); line-height: 1.15;
  box-shadow: 0 0 0 10px rgba(221, 229, 54, .18);
}
/* zachte ring om de kern die rustig ademt */
.knopen__kern::after { content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: 50%; background: rgba(221, 229, 54, .14); }

/* ---------- Aanpak zonder eigen beeld: tijdlijn ---------- */
.tijdlijn { display: grid; gap: var(--sc-space-7); padding: clamp(var(--sc-space-6), 4vw, var(--sc-space-8)); }
.tijdlijn__nummers { display: grid; }
.tijdlijn__nu { grid-area: 1 / 1; display: grid; gap: var(--sc-space-2); align-content: start; }
.tijdlijn__nr { font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 800; letter-spacing: -0.05em; line-height: .9; color: var(--sc-lime); }
.tijdlijn__moment { font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-on-dark-muted); }
.tijdlijn__titel { font-size: var(--sc-fs-h3); line-height: var(--sc-lh-snug); }
.tijdlijn__baan { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.tijdlijn__baan::before, .tijdlijn__vulling {
  content: ""; position: absolute; left: 18px; right: 18px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px;
  background: var(--sc-on-dark-line);
}
.tijdlijn__vulling { background: var(--sc-lime); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tijdlijn__baan li span {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--sc-ink); border: 2px solid var(--sc-on-dark-line); color: var(--sc-white); font-size: var(--sc-fs-small); font-weight: 700;
  transition: background-color var(--sc-dur-slow) var(--sc-ease), border-color var(--sc-dur-slow) var(--sc-ease), color var(--sc-dur-slow) var(--sc-ease);
}
.tijdlijn__baan li.is-aan span { background: var(--sc-lime); border-color: var(--sc-lime); color: var(--sc-ink); }
@media (max-width: 899px) {
  .tijdlijn { gap: var(--sc-space-5); padding: var(--sc-space-5); }
  .tijdlijn__nr { font-size: 3.2rem; }
}

/* ================= Beweging ================= */
@media (prefers-reduced-motion: no-preference) {
  /* beeld-elementen die later verschijnen */
  .js [data-scene] [data-vanaf]:not(.is-aan) { opacity: 0; transform: translateY(12px) scale(.96); }
  .js [data-scene] [data-vanaf] { transition: opacity 500ms var(--sc-ease), transform 600ms var(--sc-ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-scene] .spoor[data-vanaf] .spoor__lijn span { transform: scaleX(0); transition: transform 1.1s var(--sc-ease-out) 200ms; }
  .js [data-scene] .spoor.is-aan .spoor__lijn span { transform: scaleX(1); }
  .js [data-scene] line[data-vanaf]:not(.is-aan) { transform: none; }
  .js .knopen.is-geordend .knopen__kris { opacity: 0; }
  .js .knoop { transition: transform 900ms var(--sc-ease-out); transition-delay: calc(var(--i) * 40ms); }
  .js .knopen:not(.is-geordend) .knoop { animation: verhaal-zweef 4s var(--sc-ease) infinite alternate; animation-delay: calc(var(--i) * -.6s); }
  .js .knopen__kern[data-vanaf]:not(.is-aan) { transform: scale(.4); }
  .js .knopen__kern.is-aan::after { animation: verhaal-puls 2.6s var(--sc-ease) 1s infinite; }

  /* tijdlijn: het actieve stapnummer schuift in beeld */
  .js .tijdlijn__nu { opacity: 0; transform: translateY(18px); transition: opacity 400ms var(--sc-ease), transform 500ms var(--sc-ease-out); }
  .js .tijdlijn__nu.is-aan { opacity: 1; transform: none; }
  .js .tijdlijn__baan li[data-vanaf]:not(.is-aan) { opacity: 1; transform: none; }
  .tijdlijn__vulling { transition: transform 600ms var(--sc-ease-out); }
}
/* zonder beweging: alleen het actieve stapnummer tonen */
@media (prefers-reduced-motion: reduce) {
  .js .tijdlijn__nu:not(.is-aan) { visibility: hidden; }
  .js .knopen.is-geordend .knopen__kris { opacity: 0; }
}
html:not(.js) .tijdlijn__nu + .tijdlijn__nu { display: none; }

@keyframes verhaal-zweef { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes verhaal-puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .4; } }

/* Uitdaging zonder onderdelen: de centrale vraag groot in beeld */
.vraagkaart { display: grid; gap: var(--sc-space-4); align-content: center; min-height: 320px; padding: clamp(var(--sc-space-6), 4vw, var(--sc-space-8)); }
.vraagkaart__teken { font-size: clamp(4rem, 3rem + 5vw, 7rem); font-weight: 800; line-height: .8; color: var(--sc-lime); }
.panel .vraagkaart p, .vraagkaart p { margin: 0; max-width: 28ch; font-size: var(--sc-fs-h3); font-weight: 600; line-height: 1.35; color: var(--sc-white); }
@media (max-width: 899px) { .vraagkaart { min-height: 0; } }

/* ================= Beelden op maat per case (src/_includes/caseverhaal/beelden/) ================= */
.beeld { container-type: inline-size; width: 100%; --tint: rgba(64, 114, 177, .08); }
.beeld__vlak { display: grid; gap: clamp(var(--sc-space-3), 3.5cqi, var(--sc-space-5)); padding: clamp(var(--sc-space-4), 5cqi, var(--sc-space-7)); }
.beeld__titel { margin: 0; font-size: var(--sc-fs-small); font-weight: 700; color: var(--sc-blue); }
.on-dark .beeld__titel, .panel .beeld__titel { color: var(--sc-lime); }
.panel .beeld__onder, .on-dark .beeld__onder { color: var(--sc-ink); }
.beeld__onder {
  margin: 0; justify-self: start; padding: var(--sc-space-2) var(--sc-space-4); border-radius: var(--sc-radius-pill);
  background: var(--sc-lime); color: var(--sc-ink); font-size: var(--sc-fs-small); font-weight: 600; line-height: 1.35;
}

/* Keten: schakels als pijlvormen */
.keten__rij { display: grid; grid-template-columns: repeat(min(var(--n), 4), minmax(0, 1fr)); gap: var(--sc-space-2); margin: 0; padding: 0; list-style: none; }
.keten--lang .keten__rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.keten__schakel {
  display: grid; align-content: center; gap: 2px; min-height: clamp(84px, 22cqi, 128px);
  padding: var(--sc-space-3) calc(var(--sc-space-4) + 12px) var(--sc-space-3) calc(var(--sc-space-3) + 14px);
  background: var(--sc-blue-soft); color: var(--sc-ink);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.keten__schakel:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius: var(--sc-radius-sm) 0 0 var(--sc-radius-sm); padding-left: var(--sc-space-4); }
.keten__schakel.is-focus { background: var(--sc-lime); }
.keten__nr { font-size: .72rem; font-weight: 700; color: var(--sc-blue); }
.keten__schakel.is-focus .keten__nr { color: var(--sc-ink); }
.keten__naam { font-size: clamp(.72rem, 2.7cqi, .95rem); line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.keten__noot { font-size: clamp(.68rem, 2.5cqi, .82rem); color: var(--sc-ink-muted); line-height: 1.3; hyphens: auto; }
@container (max-width: 380px) {
  .keten__rij, .keten--lang .keten__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keten__schakel { min-height: 64px; }
}

/* Procesplaat: banen met stappen, knelpunten lichten op */
.proces__banen { display: grid; gap: var(--sc-space-2); }
.proces__baan { display: grid; grid-template-columns: minmax(70px, 24%) minmax(0, 1fr); align-items: center; gap: var(--sc-space-3); padding: var(--sc-space-2) var(--sc-space-3); border-radius: var(--sc-radius-sm); background: var(--tint); }
.proces__baannaam { font-size: clamp(.7rem, 2.6cqi, .85rem); font-weight: 700; color: var(--sc-blue); line-height: 1.2; }
.proces__stappen { position: relative; display: flex; flex-wrap: wrap; gap: var(--sc-space-2) var(--sc-space-4); margin: 0; padding: 0; list-style: none; }
.proces__stap { position: relative; padding: 6px 10px; border-radius: 8px; background: var(--sc-white); border: 1px solid var(--sc-line); box-shadow: var(--sc-shadow-1); font-size: clamp(.68rem, 2.5cqi, .82rem); font-weight: 500; line-height: 1.25; }
.proces__stap + .proces__stap::before { content: ""; position: absolute; left: calc(-1 * var(--sc-space-4)); top: 50%; width: var(--sc-space-4); height: 2px; background: var(--sc-blue); opacity: .5; }
.proces__knel {
  position: absolute; right: -8px; top: -9px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sc-lime); color: var(--sc-ink); font-style: normal; font-size: .7rem; font-weight: 800; box-shadow: 0 0 0 3px rgba(221, 229, 54, .3);
}
.proces__stap.is-knelpunt:has(.proces__knel.is-aan) { border-color: var(--sc-lime); }

/* Dashboard */
.dash { gap: var(--sc-space-4); }
.dash__balk { display: flex; align-items: center; gap: 6px; padding-bottom: var(--sc-space-3); border-bottom: 1px solid var(--sc-on-dark-line); }
.dash__balk span { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-on-dark-line); }
.dash__balk strong { margin-left: var(--sc-space-2); font-size: var(--sc-fs-small); color: var(--sc-white); }
/* label op beelden die een schets zijn en geen echte uitkomst tonen */
.beeld__illustratie {
  margin-left: auto; padding: 2px 8px; border-radius: var(--sc-radius-pill); border: 1px solid var(--sc-on-dark-line);
  font-size: .72rem; font-style: normal; font-weight: 500; color: var(--sc-on-dark-muted); white-space: nowrap;
}
.beeld__titel .beeld__illustratie { margin-left: var(--sc-space-2); }
.surface .beeld__illustratie { border-color: var(--sc-line); color: var(--sc-ink-muted); }
.dash__tabs { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); margin: 0; padding: 0; list-style: none; }
.dash__tabs span {
  display: block; padding: 5px 12px; border-radius: var(--sc-radius-pill); border: 1px solid var(--sc-on-dark-line);
  font-size: clamp(.68rem, 2.4cqi, .8rem); color: var(--sc-on-dark-muted); transition: background-color var(--sc-dur-slow) var(--sc-ease), color var(--sc-dur-slow) var(--sc-ease);
}
.dash__tabs span.is-actief { background: var(--sc-lime); border-color: var(--sc-lime); color: var(--sc-ink); font-weight: 600; }
.dash__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: var(--sc-space-2); margin: 0; padding: 0; list-style: none; }
.dash__kpis li { display: grid; gap: 4px; padding: var(--sc-space-3); border-radius: var(--sc-radius-sm); background: rgba(255, 255, 255, .07); }
.dash__kpis span { font-size: clamp(.66rem, 2.3cqi, .78rem); color: var(--sc-on-dark-muted); line-height: 1.25; }
.dash__kpis strong { font-size: clamp(1rem, 4.5cqi, 1.5rem); color: var(--sc-white); line-height: 1; }
.dash__streep { display: block; height: 6px; width: 70%; border-radius: 6px; background: linear-gradient(90deg, var(--sc-blue), var(--sc-lime)); }
.dash__grafieken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-space-3); }
.dash__grafieken--1 { grid-template-columns: 1fr; }
.dash__grafieken--3 { grid-template-columns: 1.4fr 1fr .8fr; }
.dash__grafiek { display: flex; align-items: flex-end; gap: 5px; height: clamp(70px, 24cqi, 130px); padding: var(--sc-space-3); border-radius: var(--sc-radius-sm); background: rgba(255, 255, 255, .05); }
.dash__grafiek--staaf i { flex: 1; height: calc(var(--h) * 1%); border-radius: 3px 3px 0 0; background: var(--sc-blue); transform-origin: bottom; }
.dash__grafiek--staaf i:nth-child(6) { background: var(--sc-lime); }
.dash__grafiek svg { width: 100%; height: 100%; overflow: visible; }
.dash__grafiek polyline { fill: none; stroke: var(--sc-lime); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; }
.dash__grafiek--donut { justify-content: center; align-items: center; }
.dash__grafiek--donut svg { width: auto; height: 100%; aspect-ratio: 1; transform: rotate(-90deg); }
.dash__ring { fill: none; stroke: var(--sc-on-dark-line); stroke-width: 6; }
.dash__deel { fill: none; stroke: var(--sc-lime); stroke-width: 6; stroke-dasharray: 64 100; }

/* Planning */
.planning__raster { position: relative; display: grid; gap: var(--sc-space-2); }
.planning__rij { display: grid; grid-template-columns: 34% minmax(0, 1fr); align-items: center; gap: var(--sc-space-3); }
.planning__naam { font-size: clamp(.7rem, 2.7cqi, .88rem); font-weight: 600; line-height: 1.2; }
.planning__baan { position: relative; height: clamp(16px, 5cqi, 26px); border-radius: var(--sc-radius-pill); background: var(--tint); }
.planning__baan i { position: absolute; top: 0; bottom: 0; left: calc(var(--van) * 1%); width: calc(var(--lengte) * 1%); border-radius: inherit; background: var(--sc-blue); transform-origin: left; }
.planning__rij:nth-child(3n) .planning__baan i { background: var(--sc-lime); }
.planning__nu {
  position: absolute; top: -6px; bottom: -6px; z-index: 1; width: 2px; border-radius: 2px; background: var(--sc-ink);
  left: calc(34% + var(--sc-space-3) + (100% - 34% - var(--sc-space-3)) * var(--p, 0)); transition: left 600ms var(--sc-ease-out);
}
.planning__as { display: flex; justify-content: space-between; margin-left: calc(34% + var(--sc-space-3)); font-size: .75rem; color: var(--sc-ink-muted); }
.planning__mijlpaal { display: flex; align-items: center; gap: var(--sc-space-2); margin: 0; font-size: var(--sc-fs-small); font-weight: 600; }
.planning__mijlpaal span { color: var(--sc-lime); font-size: 1.1rem; filter: drop-shadow(0 0 1px var(--sc-ink)); }

/* Bronnen die samenkomen */
.bronnen__veld { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(36px, .5fr) minmax(0, 1fr); align-items: stretch; }
.bronnen__lijst { display: grid; align-content: space-around; gap: var(--sc-space-2); margin: 0; padding: 0; list-style: none; }
.bronnen__lijst li { padding: 6px 12px; border-radius: var(--sc-radius-pill); background: var(--sc-white); color: var(--sc-ink); font-size: clamp(.68rem, 2.5cqi, .84rem); font-weight: 600; line-height: 1.2; box-shadow: var(--sc-shadow-2); }
.bronnen__lijnen { width: 100%; height: 100%; overflow: visible; }
.bronnen__lijnen path { fill: none; stroke: var(--sc-lime); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .85; stroke-dasharray: 1; }
.bronnen__doel {
  align-self: center; display: grid; gap: 4px; padding: var(--sc-space-4); border-radius: var(--sc-radius-lg);
  background: var(--sc-lime); color: var(--sc-ink); box-shadow: 0 0 0 10px rgba(221, 229, 54, .14);
}
.bronnen__doel strong { font-size: clamp(.85rem, 3.4cqi, 1.1rem); line-height: 1.2; }
.bronnen__doel span { font-size: clamp(.68rem, 2.4cqi, .8rem); line-height: 1.3; }

/* Trechter */
.trechter__lagen { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; justify-items: center; }
.trechter__lagen li {
  display: grid; justify-items: center; gap: 2px; width: calc(var(--b) * 1%); padding: var(--sc-space-3) var(--sc-space-4);
  border-radius: var(--sc-radius-sm); text-align: center; color: var(--sc-white);
  background: color-mix(in srgb, var(--sc-blue) calc(100% - var(--i) * 22%), var(--sc-lime));
}
.trechter__lagen li:nth-child(n+4) { color: var(--sc-ink); }
.trechter__lagen strong { font-size: clamp(.78rem, 3cqi, .98rem); line-height: 1.2; }
.trechter__lagen span { font-size: clamp(.66rem, 2.4cqi, .8rem); opacity: .85; line-height: 1.25; }
.trechter__uitkomst { justify-self: center; margin: 0; padding: var(--sc-space-2) var(--sc-space-5); border-radius: var(--sc-radius-pill); background: var(--sc-ink); color: var(--sc-lime); font-size: var(--sc-fs-small); font-weight: 700; text-align: center; }

/* Gesprek (chatvenster) */
.gesprek { gap: var(--sc-space-4); }
.gesprek__kop { display: flex; align-items: center; gap: var(--sc-space-3); padding-bottom: var(--sc-space-3); border-bottom: 1px solid var(--sc-line); font-size: var(--sc-fs-small); }
.gesprek__avatar { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--sc-lime), var(--sc-blue)); }
.gesprek__berichten { display: grid; gap: var(--sc-space-3); margin: 0; padding: 0; list-style: none; }
.gesprek__bericht { max-width: 82%; padding: var(--sc-space-3) var(--sc-space-4); border-radius: 16px; font-size: clamp(.72rem, 2.7cqi, .9rem); line-height: 1.4; }
.gesprek__bericht--vraag { justify-self: end; background: var(--sc-blue); color: var(--sc-white); border-bottom-right-radius: 4px; }
.gesprek__bericht--antwoord { justify-self: start; background: var(--tint); color: var(--sc-ink); border-bottom-left-radius: 4px; border: 1px solid var(--sc-line); }

/* Matrix: opties tegen criteria */
.matrix__raster { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(var(--k), minmax(0, 1fr)); gap: 6px; align-items: center; }
.matrix__kolom { font-size: clamp(.6rem, 2.2cqi, .74rem); color: var(--sc-on-dark-muted); text-align: center; line-height: 1.2; align-self: end; padding-bottom: 4px; }
.matrix__rij { font-size: clamp(.68rem, 2.5cqi, .84rem); font-weight: 600; line-height: 1.2; color: var(--sc-white); }
@container (max-width: 520px) {
  .matrix__kolom { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; text-align: left; max-height: 96px; padding: 0; }
}
.matrix__cel { justify-self: center; width: clamp(14px, 5cqi, 24px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--sc-on-dark-line); }
/* lege vakjes: geen schijnscores; ze lichten alleen op als kader */
.matrix__cel.is-aan { border-color: rgba(221, 229, 54, .55); }

/* Kerncijfers */
.getal { align-content: center; min-height: clamp(220px, 60cqi, 380px); }
.getal--2, .getal--3 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); column-gap: var(--sc-space-6); }
.getal--2 .getal__item strong { font-size: clamp(2rem, 10cqi, 4rem); }
.getal__item { display: grid; gap: var(--sc-space-2); }
.getal__item strong { font-size: clamp(2.4rem, 14cqi, 5.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: .9; color: var(--sc-lime); }
.getal--3 .getal__item strong { font-size: clamp(1.8rem, 9cqi, 3.2rem); }
.getal__item span { font-size: clamp(.8rem, 3cqi, 1.05rem); color: var(--sc-on-dark-muted); line-height: 1.35; max-width: 30ch; }
.getal .beeld__onder { grid-column: 1 / -1; }

/* Voor en na */
.voorna { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; padding: 0; gap: var(--sc-space-2); }
.voorna__kant { display: grid; align-content: start; gap: var(--sc-space-3); padding: clamp(var(--sc-space-4), 4cqi, var(--sc-space-6)); }
.voorna__kant ul { display: grid; gap: var(--sc-space-2); margin: 0; padding: 0; list-style: none; }
.voorna__kant li { padding-left: 18px; position: relative; font-size: clamp(.74rem, 2.8cqi, .92rem); line-height: 1.35; }
.voorna__kant--voor li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 2px; background: var(--sc-ink-muted); }
.voorna__kant--na li::before { content: ""; position: absolute; left: 0; top: .35em; width: 9px; height: 9px; border-radius: 50%; background: var(--sc-lime); }
.voorna__kant--voor { color: var(--sc-ink-muted); }
.voorna__pijl { align-self: center; justify-self: center; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 14px solid var(--sc-lime); filter: drop-shadow(0 0 1px var(--sc-ink)); }
@container (max-width: 420px) {
  .voorna { grid-template-columns: 1fr; }
  .voorna__pijl { transform: rotate(90deg); }
}

/* Documenten als waaier */
.documenten { min-height: clamp(240px, 64cqi, 400px); align-content: space-between; }
.documenten__waaier { position: relative; height: clamp(170px, 46cqi, 290px); margin: 0; padding: 0; list-style: none; }
.document {
  position: absolute; left: 50%; bottom: 0; display: grid; align-content: start; gap: 6px;
  width: clamp(96px, 22cqi, 160px); aspect-ratio: 3 / 4; padding: var(--sc-space-3);
  border-radius: 10px; background: var(--sc-white); color: var(--sc-ink); box-shadow: var(--sc-shadow-3);
  transform-origin: 50% 120%;
  --plek: calc(var(--i) - (var(--n) - 1) / 2);
  transform: translateX(calc(-50% + var(--plek) * 94%)) translateY(calc(var(--plek) * var(--plek) * 5px)) rotate(calc(var(--plek) * 4deg));
}
.document__soort { justify-self: start; padding: 2px 8px; border-radius: var(--sc-radius-pill); background: var(--sc-blue-soft); color: var(--sc-blue); font-size: .62rem; font-weight: 700; text-transform: lowercase; }
.document:last-child .document__soort { background: var(--sc-lime); color: var(--sc-ink); }
.document strong { font-size: clamp(.66rem, 2.3cqi, .84rem); line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.document i { display: block; height: 4px; border-radius: 4px; background: var(--tint); }
.document i:nth-of-type(2) { width: 80%; }
.document i:nth-of-type(3) { width: 60%; }
.js [data-scene] .document[data-vanaf]:not(.is-aan) { transform: translateX(-50%) translateY(24px); opacity: 0; }
.js [data-scene] .document[data-vanaf] { transition: opacity 500ms var(--sc-ease), transform 800ms var(--sc-ease-out); transition-delay: calc(var(--i) * 90ms); }

/* Beweging van de beelden */
@media (prefers-reduced-motion: no-preference) {
  .js [data-scene] .dash__grafiek--staaf i { transform: scaleY(0); transition: transform 700ms var(--sc-ease-out); transition-delay: calc(var(--i) * 60ms); }
  .js [data-scene] .dash__grafiek.is-aan i { transform: scaleY(1); }
  .js [data-scene] .dash__grafiek polyline, .js [data-scene] .bronnen__lijnen path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--sc-ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-scene] .dash__grafiek.is-aan polyline, .js [data-scene] .bronnen__lijnen path.is-aan { stroke-dashoffset: 0; }
  .js [data-scene] .bronnen__lijnen path[data-vanaf]:not(.is-aan) { transform: none; }
  .js [data-scene] .dash__deel { stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s var(--sc-ease-out); }
  .js [data-scene] .dash__grafiek.is-aan .dash__deel { stroke-dasharray: 64 100; }
  .js [data-scene] .planning__rij .planning__baan i { transform: scaleX(0); transition: transform 900ms var(--sc-ease-out); transition-delay: calc(var(--i) * 80ms); }
  .js [data-scene] .planning__rij.is-aan .planning__baan i { transform: scaleX(1); }
  .js [data-scene] .proces__baan.is-aan .proces__stap { animation: sc-rise 500ms var(--sc-ease-out) both; animation-delay: calc(var(--j) * 90ms); }
  .js [data-scene] .proces__knel.is-aan { animation: verhaal-puls 2.4s var(--sc-ease) .6s infinite; }
  .js [data-scene] .voorna__kant.is-aan li { animation: sc-rise 450ms var(--sc-ease-out) both; animation-delay: calc(200ms + var(--i) * 90ms); }
}
@media (prefers-reduced-motion: reduce) {
  .planning__nu { transition: none; }
}

@container (max-width: 520px) {
  .document { width: 21cqi; padding: var(--sc-space-2); gap: 4px; }
  .document__soort { font-size: .55rem; padding: 1px 6px; }
  .documenten__waaier { height: calc(21cqi * 4 / 3 + 30px); }
}
/* netwerk: lange labels mogen afbreken, zodat ze de kern niet bedekken */
.knoop { white-space: normal; max-width: 30cqi; text-align: center; line-height: 1.2; }

/* Op mobiel staat het beeld bovenin vast: compacter */
@media (max-width: 899px) {
  .case2-laag .beeld__vlak, .case2-laag .sporen { padding: var(--sc-space-4); gap: var(--sc-space-3); }
  .case2-laag .spoor__items li { padding: 4px var(--sc-space-3); }
  .case2-laag .getal { min-height: 0; }
  .case2-laag .documenten { min-height: 0; }
  .case2-laag .documenten__waaier { height: 130px; }
}