/* Scrollverhaal, de opmaak van de motor.
   Dit bestand bevat alleen structuur, ritme en beweging. Kleur, letter en ronding
   komen uit de huisstijl van de klant (klanten/<klant>/huisstijl.css), die de
   --sv-*-tokens hieronder overschrijft. Zet hier dus nooit een klantkleur neer.

   Raster: alle afstanden zijn een stap uit --sv-s1..--sv-s10 (8px-schaal).
   Vakregel: tekst blijft minimaal 12px (liefst 16) binnen elk vak met een rand of vlak. */

:root{
  /* ---- tokens die de huisstijl overschrijft ---- */
  --sv-font:system-ui,-apple-system,"Segoe UI",sans-serif;
  --sv-font-kop:var(--sv-font);
  --sv-kop-gewicht:700;
  --sv-bg:#f7f6f2;          /* pagina */
  --sv-bg-zacht:#fbfaf7;    /* rustige vlakken */
  --sv-papier:#ffffff;      /* kaarten */
  --sv-inkt:#1b1f1e;        /* lopende tekst */
  --sv-inkt-sterk:#0d1110;  /* koppen, grote getallen */
  --sv-inkt-zacht:#4a5150;  /* bijtekst */
  --sv-inkt-licht:#6b7270;  /* meta, bijschrift */
  --sv-lijn:#e4e6e5;        /* randen */
  --sv-lijn-sterk:#cfd3d2;
  --sv-merk:#1e8f8a;        /* hoofdkleur: knoppen, actief, lijnen */
  --sv-merk-donker:#146b66; /* hover, tekst op licht */
  --sv-merk-tekst:var(--sv-merk-donker); /* tekst in merkkleur (links, grote getallen, eyebrow) */
  --sv-merk-licht:#eef8f7;  /* vlak met merktint */
  --sv-merk-rand:#bfe3e0;
  --sv-op-merk:#ffffff;     /* tekst op merkkleur */
  --sv-accent:#f2c94c;      /* de enige roepkleur */
  --sv-accent-licht:#fdf4d6;
  --sv-op-accent:#1b1f1e;
  --sv-voet-bg:#0f3d3a;
  --sv-voet-tekst:rgba(255,255,255,.78);
  --sv-held-bg:linear-gradient(180deg,var(--sv-bg-zacht),var(--sv-merk-licht));
  --sv-held-vlak:var(--sv-bg-zacht);   /* kleur waarin het heldbeeld links wegloopt */
  --sv-held-inkt:var(--sv-inkt-sterk); /* kop in de held; licht bij een donkere held */
  --sv-held-zacht:var(--sv-inkt-zacht);
  --sv-held-meta:var(--sv-inkt-licht);
  --sv-held-eyebrow:var(--sv-merk-donker);
  --sv-radius:20px;
  --sv-radius-klein:12px;
  --sv-schaduw:0 24px 48px -30px rgba(14,26,24,.35);
  --sv-leesbreedte:700px;
  --sv-blokbreedte:1040px;
  --sv-zij:0px;             /* de inhoudsopgave schuift in; het verhaal krijgt de volle breedte */
  --sv-kop:0px;             /* hoogte van een vaste sitenavigatie (modus ingebed) */

  /* ---- raster ---- */
  --sv-s1:8px;--sv-s2:16px;--sv-s3:24px;--sv-s4:32px;--sv-s5:40px;--sv-s6:48px;--sv-s8:64px;--sv-s10:80px;
  --sv-rand:var(--sv-s6);      /* zijmarge van de kolom */
  --sv-ease:cubic-bezier(.2,.6,.2,1);
}
@media (max-width:1100px){:root{--sv-zij:0px;--sv-rand:var(--sv-s3)}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--sv-kop) + var(--sv-s3))}
html,body{margin:0}
body.sv{font-family:var(--sv-font);background:var(--sv-bg);color:var(--sv-inkt);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Alleen binnen het artikel, zodat een ingebedde sitekop zijn eigen opmaak houdt. */
:where(.sv-hoofd,.sv-laag,.sv-voet) a{color:var(--sv-merk-tekst)}
:where(.sv-hoofd,.sv-laag,.sv-zij) :where(h1,h2,h3){font-family:var(--sv-font-kop);font-weight:var(--sv-kop-gewicht);letter-spacing:-.02em;line-height:1.12;margin:0;color:var(--sv-inkt-sterk)}
:where(.sv-hoofd,.sv-laag,.sv-zij) h3{font-size:20px;line-height:1.3}
:where(.sv-hoofd,.sv-laag) img{max-width:100%}

/* ---------- vaste delen: voortgang, stippen, ronde knop, inhoud ---------- */
/* Overgenomen van het verzuimverhaal (KWEEKERS, okt 2026), op Robert's verzoek (8-10-2026: "gecharmeerd van hoe het
   menu werkt en de dots"). Geen vaste inhoudsopgave naast het verhaal: dat leidt af (4-10-2026, immersief).
   - een dunne voortgangsbalk helemaal bovenaan;
   - rechts een rij stippen, één per hoofdstuk, met de titel als je erover beweegt (alleen op een breed scherm);
   - rechtsonder een ronde knop met het hoofdstuknummer en een ring die vol loopt;
   - die knop opent de inhoud als vel van onderen.
   Bij het openingsbeeld en bij de voet zijn stippen en knop er niet: begin en eind zijn van het verhaal. */
.sv-voortgang{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--sv-merk);transform-origin:0 50%;transform:scaleX(0);z-index:135;pointer-events:none}
.sv-hoofd,.sv-voet{margin-left:0}

.sv-stippen{position:fixed;right:var(--sv-s2);top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:10px;opacity:0;pointer-events:none;transition:opacity .4s var(--sv-ease)}
.sv-stippen.zicht{opacity:1;pointer-events:auto}
.sv-stippen a{position:relative;display:block;width:12px;height:12px;border-radius:50%;background:var(--sv-stip,var(--sv-lijn-sterk));transition:background .3s,transform .3s var(--sv-ease)}
.sv-stippen a::before{content:"";position:absolute;inset:-6px}   /* groter raakvlak dan de stip zelf */
.sv-stippen a.gehad{background:var(--sv-stip-gehad,var(--sv-inkt-licht))}
.sv-stippen a.nu{background:var(--sv-merk);transform:scale(1.3)}
.sv-stippen a span{position:absolute;right:26px;top:50%;transform:translate(8px,-50%);white-space:nowrap;background:var(--sv-stip-label,var(--sv-inkt-sterk));color:var(--sv-stip-label-tekst,#fff);font-weight:600;font-size:14px;line-height:1.2;padding:7px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--sv-ease);box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.sv-stippen a:hover span,.sv-stippen a:focus-visible span{opacity:1;transform:translate(0,-50%)}
.sv-stippen a .slot{display:none}
@media (max-width:900px){.sv-stippen{display:none}}

.sv-navring{position:fixed;right:var(--sv-s2);bottom:calc(var(--sv-s2) + env(safe-area-inset-bottom,0px));z-index:81;width:60px;height:60px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--sv-ring-bg,var(--sv-papier));color:var(--sv-ring-tekst,var(--sv-inkt-sterk));box-shadow:0 12px 30px -10px rgba(0,0,0,.35),0 0 0 1px var(--sv-lijn);cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s var(--sv-ease),transform .35s var(--sv-ease)}
.sv-navring.zicht,.sv-navring[aria-expanded="true"]{opacity:1;transform:none;pointer-events:auto}
.sv-navring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sv-navring circle{fill:none;stroke-width:3}
.sv-navring .bg{stroke:var(--sv-ring-spoor,var(--sv-lijn))}
.sv-navring .fg{stroke:var(--sv-merk);stroke-linecap:round}
.sv-navring b{position:relative;font-family:var(--sv-font-kop);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.sv-navring:hover{transform:scale(1.05)}
@media (max-width:600px){.sv-navring{width:52px;height:52px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sv-navring b{font-size:16px}}

.sv-zij{position:fixed;inset:0;z-index:140;visibility:hidden;transition:visibility 0s linear .4s}
.sv-zij.open{visibility:visible;transition:visibility 0s}
.sv-sluier{position:absolute;inset:0;background:rgba(10,14,14,.42);opacity:0;transition:opacity .35s var(--sv-ease)}
.sv-zij.open .sv-sluier{opacity:1}
.sv-vel{position:absolute;left:0;right:0;bottom:0;max-height:86vh;max-height:86dvh;overflow:auto;background:var(--sv-vel-bg,var(--sv-papier));color:var(--sv-inkt);border-radius:24px 24px 0 0;padding:var(--sv-s4) var(--sv-s3) calc(var(--sv-s4) + env(safe-area-inset-bottom,0px));box-shadow:0 -24px 60px -20px rgba(0,0,0,.35);transform:translateY(102%);transition:transform .45s var(--sv-ease)}
.sv-zij.open .sv-vel{transform:none}
.sv-vel-kop,.sv-vel nav,.sv-zij-voet{max-width:960px;margin:0 auto}
.sv-vel-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sv-s2);margin-bottom:var(--sv-s3)}
.sv-zij-kop{display:block;font-family:var(--sv-font-kop);font-size:26px;font-weight:700;color:var(--sv-inkt-sterk);line-height:1.2}
.sv-zij-meta{font-size:15px;color:var(--sv-inkt-licht);margin-top:6px}
.sv-vel-dicht{flex:none;width:48px;height:48px;border-radius:14px;border:1px solid var(--sv-lijn-sterk);background:transparent;color:var(--sv-inkt-sterk);font-size:20px;line-height:1;cursor:pointer}
.sv-vel-dicht:hover{background:var(--sv-merk-licht)}
.sv-toc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px var(--sv-s3)}
.sv-toc a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--sv-inkt-sterk);text-decoration:none;transition:background .25s}
.sv-toc a:hover,.sv-toc a.nu{background:var(--sv-merk-licht)}
.sv-toc .nr{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--sv-bg-zacht);border:1px solid var(--sv-lijn);font-size:15px;font-weight:700;color:var(--sv-merk-tekst);font-variant-numeric:tabular-nums}
.sv-toc a.nu .nr{background:var(--sv-merk);border-color:var(--sv-merk);color:var(--sv-op-merk)}
.sv-toc a.gehad{color:var(--sv-inkt-zacht)}
.sv-toc b{font-size:17px;font-weight:600;line-height:1.3}
.sv-toc .slot{opacity:.55}
body.sv-open .sv-toc .slot{display:none}
.sv-zij-voet{display:flex;align-items:center;gap:var(--sv-s2);margin-top:var(--sv-s3);padding-top:var(--sv-s3);border-top:1px solid var(--sv-lijn)}
.sv-zij-voet:empty{display:none}
.sv-zij-logo img{height:28px;width:auto;display:block}
@media (max-width:700px){.sv-toc{grid-template-columns:1fr}.sv-zij-kop{font-size:22px}}
@media (prefers-reduced-motion:reduce){.sv-vel,.sv-sluier,.sv-navring,.sv-stippen,.sv-stippen a{transition:none}}

/* ---------- scène in vorm scherm (naar het verzuimverhaal, 8-10-2026) ----------
   De tekst staat stil naast het beeld: per stap een korte kop en hooguit een regel uitleg, die in elkaar overlopen.
   Streepjes onder de tekst laten zien bij welke stap je bent. De echte stappen blijven in de pagina als maat
   voor het scrollen (en voor schermlezers); op smal en zonder JavaScript zijn het gewoon de kaarten. */
.sv-scherm-tekst{display:none}
.sv-stapkaart h3{font-size:22px;line-height:1.25;margin:0 0 var(--sv-s1)}
.sv-stapkaart p{margin:0}
@media (min-width:1101px){
  .sv-js .sv-scene.scherm .sv-scherm-tekst{display:block;position:sticky;top:calc(var(--sv-kop) + 12vh);height:calc((100vh - var(--sv-kop)) * .76);margin-bottom:calc((100vh - var(--sv-kop)) * -.76);z-index:1}
  .sv-js .sv-scene.scherm .sv-stap{opacity:0;pointer-events:none}
  .sv-scherm-tekst .st{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + 18px));opacity:0;visibility:hidden;transition:opacity .45s var(--sv-ease),transform .45s var(--sv-ease),visibility 0s linear .45s}
  .sv-scherm-tekst .st.aan{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .45s var(--sv-ease) .1s,transform .45s var(--sv-ease) .1s,visibility 0s}
  .sv-scherm-tekst h3{font-size:clamp(26px,2.4vw,36px);line-height:1.15;letter-spacing:-.015em;margin:0 0 var(--sv-s2);text-wrap:balance;color:var(--sv-inkt-sterk)}
  .sv-scherm-tekst p{font-size:18px;line-height:1.6;margin:0;color:var(--sv-inkt-zacht);text-wrap:pretty}
  .sv-scherm-tekst p strong{color:var(--sv-inkt-sterk)}
  .sv-scherm-tekst .sv-tussenquote{font-family:var(--sv-font-kop);font-size:clamp(24px,2.2vw,32px);font-weight:700;line-height:1.25;color:var(--sv-inkt-sterk);border-left:4px solid var(--sv-accent);padding-left:var(--sv-s3)}
  .sv-streepjes{display:flex;gap:6px;margin-top:var(--sv-s3)}
  .sv-streepjes i{width:28px;height:4px;border-radius:4px;background:var(--sv-lijn-sterk);transition:background .3s}
  .sv-streepjes i.gehad{background:var(--sv-merk-rand)}
  .sv-streepjes i.aan{background:var(--sv-merk)}
}
@media (prefers-reduced-motion:reduce){.sv-scherm-tekst .st{transition:none}}

/* ---------- labels, knoppen, bron ---------- */
.sv-eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sv-merk-tekst)}
.sv-label{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--sv-merk-rand);background:var(--sv-merk-licht);color:var(--sv-merk-tekst)}
/* bron als knopje met een kaartje dat inschuift, niet als losse regel onder elk blok */
.sv-bron{position:relative;display:inline-block;margin-top:12px;vertical-align:top}
.sv-bronknop{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:600;line-height:1;padding:6px 12px;border-radius:999px;border:1px solid var(--sv-merk-rand);background:var(--sv-merk-licht);color:var(--sv-merk-tekst);cursor:pointer}
.sv-bronknop::before{content:"i";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--sv-merk);color:var(--sv-op-merk);font-size:11px;font-weight:800;font-style:italic}
.sv-bronknop:hover,.sv-bronknop[aria-expanded="true"]{border-color:var(--sv-merk)}
.sv-bronpop{display:none}
.sv-bron.open .sv-bronpop{display:flex;flex-direction:column;gap:8px;position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:max-content;max-width:min(360px,calc(100vw - 48px));padding:14px 16px;border-radius:var(--sv-radius-klein);background:var(--sv-papier);border:1px solid var(--sv-lijn);box-shadow:0 20px 40px -16px rgba(0,0,0,.35);animation:svBronIn .2s var(--sv-ease)}
.sv-bron.open.links .sv-bronpop{left:auto;right:0}
.sv-bronpop a{font-size:14px;font-weight:500;line-height:1.35;color:var(--sv-merk-tekst);text-decoration:none;border-bottom:1px dashed var(--sv-merk-rand);overflow-wrap:anywhere}
.sv-bronpop a:hover{border-bottom-style:solid}
@keyframes svBronIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
html:not(.sv-js) .sv-bronknop{display:none}
html:not(.sv-js) .sv-bronpop{display:flex;flex-direction:column;gap:4px}
.sv-proto{font-size:13px;background:var(--sv-accent-licht);color:var(--sv-inkt);padding:4px 10px;border-radius:6px;display:inline-block}
.sv-knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:600;font-size:16px;padding:14px 24px;border-radius:999px;border:0;cursor:pointer;background:var(--sv-merk);color:var(--sv-op-merk);text-decoration:none;transition:filter .2s}
.sv-knop:hover{filter:brightness(.92)}
.sv-knop.accent{background:var(--sv-accent);color:var(--sv-op-accent)}
.sv-knop.licht{background:transparent;border:1px solid currentColor;color:inherit}
.sv-klein{font-size:14px;color:var(--sv-inkt-licht)}

/* ---------- deelknop: op elk blok met een id ---------- */
[data-deel]{position:relative}
.sv-deel{position:absolute;top:var(--sv-s2);right:var(--sv-s2);display:inline-flex;gap:var(--sv-s1);align-items:center;font:inherit;font-size:13px;font-weight:500;border:1px solid var(--sv-lijn-sterk);background:var(--sv-papier);color:var(--sv-inkt-zacht);border-radius:999px;padding:6px 12px;cursor:pointer;z-index:5}
.sv-deel:hover{border-color:var(--sv-merk);color:var(--sv-merk-tekst)}
.sv-deel.klaar{background:var(--sv-merk);border-color:var(--sv-merk);color:var(--sv-op-merk)}
@media (max-width:700px){.sv-deel .tekst{display:none}}

/* ---------- held ---------- */
.sv-held{position:relative;overflow:hidden;background:var(--sv-held-bg)}
.sv-held-beeld{position:absolute;inset:0 0 0 38%;background-size:cover;background-position:center 30%;-webkit-mask:linear-gradient(90deg,transparent 0%,#000 45%);mask:linear-gradient(90deg,transparent 0%,#000 45%)}
.sv-held::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--sv-held-vlak) 34%,color-mix(in srgb,var(--sv-held-vlak) 55%,transparent) 70%,color-mix(in srgb,var(--sv-held-vlak) 10%,transparent) 100%)}
.sv-held-in{position:relative;z-index:2;max-width:880px;padding:max(120px,calc(var(--sv-kop) + var(--sv-s10))) var(--sv-s6) var(--sv-s8)}
/* held-in uitlijnen op het sitemenu, zoals bij de artikelen: de tekst begint waar de menubalk begint
   (balk max 1460px met een rand van clamp(20px,4vw,60px), plus de binnenmarge van de balk) */
@media (min-width:1101px){.sv-held-in{box-sizing:content-box;padding-left:calc((100% - min(1460px,100% - 2 * clamp(20px,4vw,60px))) / 2 + clamp(18px,1.9vw,28px))}}
.sv-held h1{font-size:clamp(34px,4.6vw,64px);line-height:1.08;max-width:18ch;margin:var(--sv-s3) 0;color:var(--sv-held-inkt)}
.sv-held .sv-eyebrow{color:var(--sv-held-eyebrow)}
.sv-held .sv-meta{color:var(--sv-held-meta)}
.sv-dek{font-size:clamp(19px,1.7vw,22px);line-height:1.55;color:var(--sv-held-zacht);max-width:40ch;margin:0}
.sv-byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sv-s2) var(--sv-s3);margin-top:var(--sv-s4)}
.sv-logochip{display:inline-flex;align-items:center;gap:12px;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:999px;padding:8px 18px 8px 10px;font-size:14px;font-weight:500;color:var(--sv-inkt-zacht);box-shadow:0 8px 20px -12px rgba(14,26,24,.25)}
.sv-logochip img{height:30px;width:auto}
.sv-meta{display:flex;flex-wrap:wrap;gap:var(--sv-s1) var(--sv-s3);font-size:13px;color:var(--sv-inkt-licht)}
.sv-meta span + span::before{content:"·";margin-right:var(--sv-s3);color:var(--sv-merk-tekst)}
.sv-labels{display:flex;flex-wrap:wrap;gap:var(--sv-s1);margin-top:var(--sv-s3)}
.sv-held > .sv-deel{top:auto;bottom:var(--sv-s3);right:var(--sv-s3)}
@media (max-width:1100px){.sv-held-in{padding:calc(var(--sv-kop) + 80px) var(--sv-s3) var(--sv-s6)}.sv-held-beeld{inset:0;opacity:.28;-webkit-mask:none;mask:none}}
@media (max-width:700px){.sv-held-beeld{opacity:.16}}

/* ---------- artikel: de tekst is de ruggengraat ---------- */
.sv-artikel{max-width:1120px;margin:0 auto;padding:var(--sv-s8) var(--sv-rand)}
.sv-hfd{position:relative;max-width:var(--sv-leesbreedte);margin:0 auto;padding-top:var(--sv-s8)}
.sv-hfd:first-child{padding-top:0}
.sv-hfd h2{font-size:clamp(28px,3vw,38px);line-height:1.15;margin:0 0 var(--sv-s3);padding-right:96px}
.sv-hfd > .sv-deel{top:calc(var(--sv-s8) + 4px);right:0}
.sv-hfd:first-child > .sv-deel{top:4px}
.sv-hfd > p,.sv-inhoud > p{font-size:19px;line-height:1.75;margin:0 0 var(--sv-s3)}
.sv-hfd > p strong{font-weight:700;color:var(--sv-inkt-sterk)}
.sv-tussenquote{font-family:var(--sv-font-kop);font-size:clamp(24px,2.6vw,32px);line-height:1.3;font-weight:700;color:var(--sv-merk-tekst);margin:var(--sv-s6) 0;padding-left:var(--sv-s3);border-left:4px solid var(--sv-accent)}
@media (max-width:700px){.sv-hfd > p{font-size:17px}.sv-hfd h2{padding-right:56px}}

/* ---------- blokken: breder dan de leeskolom, gecentreerd met marge (geen transform) ---------- */
.sv-blok{position:relative;margin:var(--sv-s6) 0}
.sv-blok.breed{--bw:min(var(--sv-blokbreedte),calc(100vw - var(--sv-zij) - 2*var(--sv-rand)));width:var(--bw);margin-left:calc((100% - var(--bw))/2)}
.sv-blok.vol{--bw:calc(100vw - var(--sv-zij));width:var(--bw);margin-left:calc((100% - var(--bw))/2)}
.sv-vak{background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);padding:var(--sv-s4)}
.sv-vak > .sv-deel{top:var(--sv-s2);right:var(--sv-s2)}
.sv-blokkop{font-size:20px;font-weight:700;margin:0 0 var(--sv-s3);padding-right:96px;color:var(--sv-inkt-sterk)}
.sv-blokvoet{margin-top:var(--sv-s3);font-size:15px;color:var(--sv-inkt-licht)}
.sv-bronrij{display:flex;flex-wrap:wrap;gap:0 var(--sv-s2)}
@media (max-width:700px){.sv-vak{padding:var(--sv-s3)}}

/* kpis */
.sv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sv-s3)}
.sv-kpi{position:relative;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);padding:var(--sv-s3) var(--sv-s3) var(--sv-s2);box-shadow:var(--sv-schaduw)}
.sv-kpi .getal{font-family:var(--sv-font-kop);font-size:clamp(40px,4.4vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--sv-inkt-sterk);padding-right:96px}
.sv-kpi .getal small{font-size:.45em;font-weight:600;margin-left:.2em;color:var(--sv-merk-tekst)}
.sv-kpi p{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--sv-inkt-zacht)}

/* intro: wat je leert, voor wie */
.sv-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sv-s3)}
.sv-intro h3{margin:0 0 var(--sv-s2);padding-right:88px}
.sv-intro p{margin:0;font-size:16px;color:var(--sv-inkt-zacht)}
.sv-vink{list-style:none;margin:0;padding:0}
.sv-vink li{position:relative;padding:6px 0 6px 28px;font-size:16px}
.sv-vink li::before{content:"";position:absolute;left:2px;top:14px;width:13px;height:7px;border-left:2px solid var(--sv-merk);border-bottom:2px solid var(--sv-merk);transform:rotate(-45deg)}
@media (max-width:700px){.sv-intro{grid-template-columns:1fr}}

/* feitenkaart */
/* feitenkaart: label in een vaste kolom, de waarde links uitgelijnd ernaast. Nooit rechts uitlijnen: een waarde van
   meer dan één regel wordt dan een rafelige rand (Robert, 20-10-2026: "dik slordig"). */
.sv-feit{display:grid;grid-template-columns:minmax(96px,168px) minmax(0,1fr);gap:var(--sv-s3);align-items:baseline;padding:var(--sv-s2) 0;border-bottom:1px solid var(--sv-lijn);font-size:17px;line-height:1.45}
.sv-feit:last-of-type{border:0}
.sv-feit span{color:var(--sv-inkt-licht);font-size:15px;font-weight:600}
.sv-feit b{text-align:left;font-weight:600;color:var(--sv-inkt-sterk);min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.sv-feit{grid-template-columns:minmax(0,1fr);gap:4px}}

/* beeld */
.sv-fig{position:relative;margin:0}
.sv-fig img{display:block;width:100%;height:auto;border-radius:var(--sv-s2);border:1px solid var(--sv-lijn);background:var(--sv-papier);box-shadow:var(--sv-schaduw)}
.sv-fig figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--sv-inkt-licht)}
.sv-fig figcaption a{font-size:13px;margin-left:6px;white-space:normal;overflow-wrap:anywhere}
.sv-fig > .sv-deel{top:14px;right:14px}

/* quote */
.sv-quote{margin:var(--sv-s6) 0;padding:var(--sv-s4) var(--sv-s5);border-left:4px solid var(--sv-merk);background:var(--sv-papier);border-radius:0 var(--sv-radius) var(--sv-radius) 0}
.sv-quote blockquote{margin:0;font-family:var(--sv-font-kop);font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.35;padding-right:88px;color:var(--sv-inkt-sterk)}
.sv-quote .origineel{margin:14px 0 0;font-size:15px;color:var(--sv-inkt-licht);font-style:italic}
.sv-quote cite{display:block;margin-top:14px;font-style:normal;font-size:15px;color:var(--sv-inkt-licht)}
@media (max-width:700px){.sv-quote{padding:var(--sv-s3)}.sv-quote blockquote{padding-right:48px}}

/* kaarten met cijfers */
.sv-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sv-s3)}
.sv-kaart{position:relative}
.sv-kaart .van{font-size:14px;font-weight:600;color:var(--sv-inkt-licht);padding-right:88px}
.sv-kaart .getal{font-family:var(--sv-font-kop);font-size:clamp(34px,3.6vw,48px);font-weight:800;letter-spacing:-.02em;color:var(--sv-inkt-sterk)}
.sv-kaart p{margin:12px 0 0;font-size:16px;color:var(--sv-inkt-zacht)}
.sv-mini{display:flex;align-items:flex-end;gap:10px;margin-top:var(--sv-s3)}
.sv-mini .mk{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.sv-mini .mk b{font-size:13px;font-weight:600;white-space:nowrap}
.sv-mini .mk i{display:block;width:100%;height:calc(var(--h) * 1.1px);background:linear-gradient(180deg,var(--sv-merk),var(--sv-merk-donker));border-radius:6px 6px 0 0;opacity:.85}
.sv-mini .mk span{font-size:13px;color:var(--sv-inkt-licht)}

/* lijst met accent ("wat dit voor jou betekent") */
.sv-lijst{border-left:4px solid var(--sv-accent);border-radius:0 var(--sv-radius) var(--sv-radius) 0}
.sv-lijst ul{margin:0;padding-left:20px}
.sv-lijst li{margin:0 0 var(--sv-s2);font-size:17px;line-height:1.6}

/* zelftest */
.sv-zelftest{background:var(--sv-merk-licht);border-color:var(--sv-merk-rand)}
.sv-zt-lijst{list-style:none;counter-reset:zt;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sv-s2)}
.sv-zt-vraag{counter-increment:zt;display:grid;grid-template-columns:1fr auto;gap:var(--sv-s2) var(--sv-s3);align-items:center;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-s2);padding:var(--sv-s2) var(--sv-s3)}
.sv-zt-vraag p{margin:0;font-size:16px;line-height:1.5}
.sv-zt-vraag p::before{content:counter(zt) ". ";font-weight:700;color:var(--sv-merk-tekst)}
.sv-zt-knoppen{display:flex;gap:var(--sv-s1)}
.sv-zt-knoppen button{font:inherit;font-weight:600;font-size:15px;padding:10px 18px;border-radius:999px;border:1px solid var(--sv-lijn-sterk);background:var(--sv-papier);color:var(--sv-inkt);cursor:pointer}
.sv-zt-knoppen button:hover{border-color:var(--sv-merk)}
.sv-zt-knoppen button.aan[data-a="ja"]{background:var(--sv-merk);border-color:var(--sv-merk);color:var(--sv-op-merk)}
.sv-zt-knoppen button.aan[data-a="nee"]{background:var(--sv-inkt);border-color:var(--sv-inkt);color:var(--sv-papier)}
.sv-zt-uitslag{margin-top:var(--sv-s3);font-size:17px;line-height:1.5;font-weight:600}
.sv-zt-uitslag b{color:var(--sv-merk-tekst)}
@media (max-width:700px){.sv-zt-vraag{grid-template-columns:1fr}}

/* weerleggen: afvinklijst */
.sv-weerleg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sv-s2)}
.sv-weerleg label{display:flex;gap:var(--sv-s2);align-items:flex-start;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-s2);padding:var(--sv-s2) var(--sv-s3);cursor:pointer;font-size:16px;line-height:1.55}
.sv-weerleg input{width:20px;height:20px;margin-top:3px;accent-color:var(--sv-merk);flex:none}
.sv-weerleg label:has(input:checked){border-color:var(--sv-merk);background:var(--sv-merk-licht)}
.sv-weerleg > .sv-deel{top:calc(-1 * var(--sv-s6));right:0}

/* bronnenlijst */
.sv-bronnen > p{font-size:16px;color:var(--sv-inkt-zacht);margin:0}
.sv-soorten{display:flex;flex-wrap:wrap;gap:var(--sv-s1) var(--sv-s3);margin-top:var(--sv-s3);font-size:15px;color:var(--sv-inkt-zacht)}
.sv-bronlijst{list-style:none;padding:0;margin:var(--sv-s4) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--sv-s1) var(--sv-s4)}
.sv-bronlijst li{display:flex;gap:12px;align-items:baseline;font-size:15px;padding:10px 0;border-bottom:1px solid var(--sv-lijn)}
.sv-bronlijst li,.sv-bronlijst a{min-width:0}
.sv-bronlijst a{overflow-wrap:anywhere}
.sv-soort{font-size:13px;padding:3px 10px;border-radius:6px;white-space:nowrap;flex:none;display:inline-block;background:var(--sv-merk-licht);color:var(--sv-merk-tekst)}
.sv-soort.s-2{background:var(--sv-accent-licht);color:var(--sv-inkt)}
.sv-soort.s-3{background:var(--sv-lijn);color:var(--sv-inkt)}
@media (max-width:700px){.sv-bronlijst{grid-template-columns:1fr}}

/* uitnodiging (cta) met sfeerbeeld */
.sv-cta{position:relative;overflow:hidden;border-radius:var(--sv-radius);padding:var(--sv-s6) var(--sv-s5);background:linear-gradient(160deg,var(--sv-merk),var(--sv-merk-donker));color:var(--sv-op-merk)}
.sv-cta-beeld{position:absolute;inset:0 0 0 48%;background-size:cover;background-position:center 25%;-webkit-mask:linear-gradient(90deg,transparent,#000 35%);mask:linear-gradient(90deg,transparent,#000 35%)}
.sv-cta-in{position:relative;z-index:1;max-width:560px}
.sv-cta h3{font-size:clamp(24px,2.4vw,30px);margin:0 0 var(--sv-s2);color:inherit;padding-right:88px}
.sv-cta p{margin:0 0 var(--sv-s3);font-size:17px;opacity:.9}
.sv-knoppen{display:flex;flex-wrap:wrap;gap:var(--sv-s2)}
@media (max-width:700px){.sv-cta{padding:var(--sv-s5) var(--sv-s3)}.sv-cta.met-beeld{padding-top:calc(260px + var(--sv-s3))}.sv-cta-beeld{inset:0 0 auto 0;height:280px;-webkit-mask:linear-gradient(180deg,#000 55%,transparent);mask:linear-gradient(180deg,#000 55%,transparent)}}

/* ---------- poort ---------- */
.sv-achter{position:relative}
.sv-achter.dicht .sv-inhoud{filter:blur(7px);opacity:.55;pointer-events:none;user-select:none;max-height:1100px;overflow:hidden;-webkit-mask:linear-gradient(180deg,#000 10%,transparent 85%);mask:linear-gradient(180deg,#000 10%,transparent 85%)}
.sv-poort{display:none;position:absolute;left:0;right:0;top:120px;z-index:10}
.sv-achter.dicht .sv-poort{display:block}
.sv-poortkaart{max-width:620px;margin:0 auto;background:var(--sv-papier);border-radius:24px;padding:var(--sv-s5);box-shadow:0 40px 80px -24px rgba(14,26,24,.35);border:1px solid var(--sv-lijn)}
.sv-poortkaart h3{font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin:14px 0 12px}
.sv-poortkaart p{color:var(--sv-inkt-zacht);margin:0 0 var(--sv-s3)}
.sv-poortkaart ul{margin:0 0 var(--sv-s3);padding:0;list-style:none}
.sv-poortkaart li{padding:6px 0 6px 28px;position:relative;font-size:16px}
.sv-poortkaart li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:8px;border-left:2px solid var(--sv-merk);border-bottom:2px solid var(--sv-merk);transform:rotate(-45deg)}
.sv-velden{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sv-velden input{font:inherit;font-size:16px;padding:14px 16px;border-radius:var(--sv-radius-klein);border:1px solid var(--sv-lijn-sterk);background:var(--sv-bg-zacht);width:100%}
.sv-velden input:focus{outline:2px solid var(--sv-merk-rand);border-color:var(--sv-merk)}
.sv-velden .breed{grid-column:1/-1}
.sv-velden .sv-knop{margin-top:6px}
@media (max-width:700px){.sv-velden{grid-template-columns:1fr}.sv-poortkaart{padding:var(--sv-s4) var(--sv-s3)}}

/* ---------- voet ---------- */
.sv-voet{background:var(--sv-voet-bg);color:var(--sv-voet-tekst);padding:var(--sv-s5) var(--sv-s6);font-size:14px}
.sv-voet a{color:inherit}
.sv-voet .sv-proto{background:rgba(255,255,255,.14);color:#fff}

/* =========================================================
   Scènes: het beeld blijft staan, de tekst loopt erlangs.
   vorm "naast": tekst links, beeld rechts vast (breed); op smal
   staat het beeld bovenin vast en schuiven kaarten erover.
   vorm "vol": foto of video over de hele breedte staat stil,
   de tekst schuift er in kaarten overheen.
   ========================================================= */
.sv-scene{margin:var(--sv-s8) 0}
.sv-scene > .sv-deel{top:var(--sv-s2);right:var(--sv-s3);z-index:6}
.sv-scene-in{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);grid-template-areas:"tekst beeld";gap:var(--sv-s8);max-width:1240px;margin:0 auto;padding:0 var(--sv-s6)}
.sv-scene-tekst{grid-area:tekst;padding:30vh 0 40vh}
.sv-scene-beeld{grid-area:beeld;position:relative}
.sv-plak{position:sticky;top:calc(var(--sv-kop) + 12vh);height:calc((100vh - var(--sv-kop)) * .76);display:flex;align-items:center;justify-content:center}
.sv-plak > *{width:100%}
.sv-stap{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .45s var(--sv-ease)}
.sv-stap.nu{opacity:1}
.sv-stap p{font-size:19px;line-height:1.75;margin:0}
.sv-stap p + p{margin-top:var(--sv-s2)}
.sv-stap .sv-tussenquote{margin:0}

@media (max-width:1100px){
  .sv-scene-in{display:block;padding:0 var(--sv-s3);position:relative}
  .sv-scene-beeld{position:sticky;top:var(--sv-kop);height:calc(100vh - var(--sv-kop));z-index:0;display:flex;align-items:flex-start;padding-top:56px}
  .sv-plak{position:relative;top:auto;height:auto;max-height:46vh;width:100%;align-items:flex-start}
  .sv-plak > *{transform-origin:top center}
  .sv-scene-tekst{position:relative;z-index:1;margin-top:-50vh;padding:0 0 30vh}
  .sv-stap{min-height:115vh;justify-content:flex-end;opacity:1}
  .sv-stap > *{background:color-mix(in srgb,var(--sv-papier) 96%,transparent);border:1px solid var(--sv-lijn);border-radius:var(--sv-s2);padding:var(--sv-s3);box-shadow:0 20px 40px -20px rgba(14,26,24,.35);backdrop-filter:blur(6px)}
  .sv-stap p{font-size:17px}
  .sv-stap p + p{margin-top:0}
}

/* vorm vol: foto of video staat stil, kaarten schuiven erover */
.sv-scene.doek .sv-scene-in{display:block;max-width:none;padding:0;position:relative}
/* een foto of video over de hele breedte loopt door tot bovenaan, ook achter een zwevende sitekop */
.sv-scene.doek .sv-scene-beeld{position:sticky;top:0;height:100vh;z-index:0;padding:0;overflow:hidden}
.sv-scene.doek .sv-plak{position:absolute;inset:0;top:0;height:100%;max-height:none}
.sv-scene.doek .sv-scene-tekst{position:relative;z-index:1;margin-top:-100vh;padding:60vh var(--sv-s6) 40vh;max-width:none}
.sv-scene.doek .sv-stap{min-height:100vh;opacity:1;justify-content:center;max-width:520px}
.sv-scene.doek.rechts .sv-stap{margin-left:auto}
.sv-scene.doek.midden .sv-stap{margin:0 auto}
.sv-scene.doek .sv-stap > *{background:color-mix(in srgb,var(--sv-papier) 94%,transparent);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);padding:var(--sv-s4);box-shadow:0 30px 60px -24px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.sv-scene.doek .sv-stap blockquote{margin:0;font-family:var(--sv-font-kop);font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.3;color:var(--sv-inkt-sterk)}
.sv-scene.doek .sv-stap cite{display:block;margin-top:var(--sv-s2);font-style:normal;font-size:15px;color:var(--sv-inkt-licht)}
@media (max-width:1100px){.sv-scene.doek .sv-scene-tekst{padding:60vh var(--sv-s3) 40vh}.sv-scene.doek .sv-stap{max-width:none}.sv-scene.doek .sv-stap > *{padding:var(--sv-s3)}}

/* foto-lagen */
.sv-foto{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s var(--sv-ease)}
.sv-foto.aan,.sv-foto:only-child{opacity:1}
.sv-foto img,.sv-foto video{width:100%;height:100%;object-fit:cover;display:block}
.sv-foto figcaption{position:absolute;right:var(--sv-s2);bottom:var(--sv-s2);font-size:14px;color:#fff;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:6px}
.sv-foto figcaption a{color:#fff}
.sv-scene.doek .sv-plak::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.22))}
.sv-scene.doek.kalm .sv-foto img{transform:scale(1.06);transition:transform 6s linear}
.sv-scene.doek.kalm .sv-foto.aan img{transform:scale(1)}

/* scènetype stappen */
.sv-sc-stappen{display:flex;flex-direction:column;gap:var(--sv-s2);max-width:560px}
.sv-st-vast{background:var(--sv-merk-licht);border:1px solid var(--sv-merk-rand);border-radius:var(--sv-s2);padding:var(--sv-s2) var(--sv-s3);font-weight:600;font-size:16px;transition:box-shadow .4s}
.sv-st-vast span{display:block;font-size:13px;font-weight:600;color:var(--sv-merk-tekst);margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em}
.sv-st-vast.aan{box-shadow:0 0 0 2px var(--sv-merk)}
.sv-st{background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);padding:var(--sv-s3);display:flex;flex-direction:column;gap:var(--sv-s1);opacity:.3;transform:scale(.97);transition:opacity .5s var(--sv-ease),transform .5s var(--sv-ease),border-color .5s,box-shadow .5s}
.sv-st .klein{font-size:14px;font-weight:600;color:var(--sv-inkt-licht)}
.sv-st .groot{font-family:var(--sv-font-kop);font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--sv-inkt-sterk)}
.sv-st p{margin:0;font-size:15px;line-height:1.55;color:var(--sv-inkt-zacht);display:none}
.sv-st .voet{padding-top:var(--sv-s2);border-top:1px solid var(--sv-lijn);font-size:15px;font-weight:600;display:none}
.sv-st .voet span{display:block;font-size:13px;font-weight:500;color:var(--sv-inkt-licht);margin-bottom:4px}
.sv-st.aan{opacity:1;transform:none;border-color:var(--sv-merk);box-shadow:var(--sv-schaduw)}
.sv-st.aan .groot{color:var(--sv-merk-tekst)}
.sv-st.aan p,.sv-st.aan .voet{display:block}
.sv-sc-stappen.alles .sv-st{opacity:1;transform:none}
.sv-sc-stappen.alles .sv-st p,.sv-sc-stappen.alles .sv-st .voet{display:none}
.sv-st.gehad{opacity:.6;transform:none}
@media (max-width:1100px){
  .sv-st-vast{display:none}
  .sv-st:not(.aan){padding:12px var(--sv-s2)}
  .sv-st:not(.aan) .klein{display:none}
  .sv-st:not(.aan) .groot{font-size:18px}
  .sv-st .groot{font-size:22px}
  .sv-st p{display:none!important}
  .sv-sc-stappen{gap:var(--sv-s1)}
}

/* scènetype beelden: grote aanduiding, wisselend beeld, rail */
.sv-sc-beelden{position:relative;width:100%;height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:var(--sv-s2)}
.sv-bl-groot{font-family:var(--sv-font-kop);font-size:clamp(64px,8vw,120px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--sv-merk-tekst)}
.sv-bl-lagen{position:relative;min-height:0}
.sv-bl-laag{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;gap:var(--sv-s2);opacity:0;transform:translateY(16px);transition:opacity .5s var(--sv-ease),transform .5s var(--sv-ease);pointer-events:none}
.sv-bl-laag.aan{opacity:1;transform:none;pointer-events:auto}
.sv-bl-laag img{width:100%;height:auto;max-height:calc(100% - 180px);object-fit:contain;object-position:left top;border-radius:var(--sv-s2);border:1px solid var(--sv-lijn);background:var(--sv-papier);box-shadow:var(--sv-schaduw)}
.sv-bl-laag figcaption{display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.5;color:var(--sv-inkt-zacht)}
.sv-bl-laag figcaption b{font-size:17px;color:var(--sv-inkt-sterk)}
.sv-bl-laag figcaption a{font-size:13px;margin-right:var(--sv-s2)}
.sv-rail{list-style:none;margin:0;padding:0;display:flex;gap:var(--sv-s1)}
.sv-rail li{flex:1;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--sv-inkt-licht);min-width:0}
.sv-rail li i{display:block;height:4px;border-radius:4px;background:var(--sv-lijn);transition:background .4s}
.sv-rail li.gehad i,.sv-rail li.aan i{background:var(--sv-merk)}
.sv-rail li.aan{color:var(--sv-merk-tekst)}
@media (max-width:1100px){
  .sv-sc-beelden{height:auto;display:flex;flex-direction:column}
  .sv-bl-groot{font-size:56px}
  .sv-bl-lagen{display:grid}
  .sv-bl-laag{position:relative;inset:auto;grid-area:1/1}
  .sv-bl-laag img{max-height:none}
}

/* scènetype panelen: één paneel tegelijk, gestapeld in één rastercel */
.sv-sc-panelen{display:grid;width:100%}
.sv-pn{grid-area:1/1;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);padding:var(--sv-s4);display:flex;flex-direction:column;gap:var(--sv-s2);opacity:0;transform:translateY(16px);transition:opacity .5s var(--sv-ease),transform .5s var(--sv-ease);pointer-events:none}
.sv-pn.aan{opacity:1;transform:none;pointer-events:auto}
.sv-pn .van{font-weight:600;color:var(--sv-inkt-zacht)}
.sv-pn .getal{font-family:var(--sv-font-kop);font-size:48px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--sv-merk-tekst)}
.sv-pn p{margin:0;color:var(--sv-inkt-zacht);font-size:15px}
.sv-pn-rij{display:flex;align-items:center;gap:var(--sv-s4);flex-wrap:wrap}
.sv-pn-rij div{display:flex;flex-direction:column;gap:4px}
.sv-pn-rij small{font-size:13px;color:var(--sv-inkt-licht);font-weight:600}
.sv-pn-rij b{font-size:30px;font-weight:800;color:var(--sv-inkt-sterk)}
.sv-pn-rij em{font-style:normal;font-size:14px;color:var(--sv-inkt-licht)}
.sv-pn .sv-mini .mk i{height:calc(var(--h) * 2px);transform:scaleY(.05);transform-origin:bottom;transition:transform .8s var(--sv-ease)}
.sv-pn.aan .sv-mini .mk i{transform:none}
@media (max-width:1100px){.sv-pn{padding:var(--sv-s3)}.sv-pn .getal{font-size:40px}}

/* scènetype staven */
.sv-sc-staven .sv-staven{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--sv-s3);align-items:end;height:340px;border-bottom:2px solid var(--sv-lijn-sterk)}
.sv-sk{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.sv-sk-w{font-family:var(--sv-font-kop);font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.02em;margin-bottom:10px;opacity:0;transition:opacity .5s;color:var(--sv-inkt-sterk)}
.sv-sk-s{width:min(96px,70%);height:calc(var(--h) * 1%);background:linear-gradient(180deg,var(--sv-merk),var(--sv-merk-donker));border-radius:12px 12px 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--sv-ease);transition-delay:calc(var(--i) * .12s)}
.sv-sk-l{font-size:14px;color:var(--sv-inkt-licht);margin-top:12px;height:0;overflow:visible;white-space:nowrap}
.sv-scene:not([data-s="-1"]) .sv-sk-s{transform:none}
.sv-scene:not([data-s="-1"]) .sv-sk-w{opacity:1}
.sv-sk.nadruk .sv-sk-s{background:linear-gradient(180deg,var(--sv-accent),color-mix(in srgb,var(--sv-accent) 70%,#000))}
.sv-breuk{position:absolute;top:0;bottom:0;border-left:2px dashed var(--sv-accent);opacity:0;transition:opacity .5s}
.sv-breuk span{position:absolute;bottom:var(--sv-s1);left:var(--sv-s1);font-size:13px;font-weight:600;background:var(--sv-accent-licht);padding:4px 12px;border-radius:6px;width:max-content;max-width:min(200px,40vw);line-height:1.35}
.sv-breuk.aan{opacity:1}
@media (max-width:1100px){.sv-sc-staven .sv-staven{height:260px;gap:12px}}

/* scènetype video: de video staat vast en loopt mee met het scrollen */
.sv-video{position:absolute;inset:0;margin:0}
.sv-video video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.sv-scene:not(.doek) .sv-video{position:relative;inset:auto}
.sv-scene:not(.doek) .sv-video video{height:auto;border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw)}
.sv-video figcaption{position:absolute;right:var(--sv-s2);bottom:var(--sv-s2);font-size:14px;color:#fff;background:rgba(0,0,0,.45);padding:4px 10px;border-radius:6px}
.sv-video figcaption a{color:#fff}

/* losse video die afspeelt zodra hij in beeld is */
.sv-clip{position:relative;margin:0}
.sv-clip video{display:block;width:100%;height:auto;border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);background:#000}
.sv-clip figcaption{margin-top:12px;font-size:14px;color:var(--sv-inkt-licht)}
.sv-clip > .sv-deel{top:14px;right:14px}


/* =========================================================
   Lagen: een plusje opent een paneel dat van rechts inschuift
   (op smal van onderen). De pagina erachter wordt donkerder.
   Het plusje draait naar een kruisje zolang de laag open is.
   ========================================================= */
.sv-plus{position:relative;display:inline-block;flex:none;width:22px;height:22px;border-radius:50%;background:var(--sv-merk);vertical-align:-4px;transition:transform .45s var(--sv-ease),background .3s}
.sv-plus::before,.sv-plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;background:var(--sv-op-merk);border-radius:2px}
.sv-plus::after{transform:rotate(90deg)}
.sv-plus.groot{width:48px;height:48px}
.sv-plus.groot::before,.sv-plus.groot::after{width:18px;margin-left:-9px}
[aria-expanded="true"] .sv-plus,.sv-plus.open{transform:rotate(135deg);background:var(--sv-accent)}
[aria-expanded="true"] .sv-plus::before,[aria-expanded="true"] .sv-plus::after,.sv-plus.open::before,.sv-plus.open::after{background:var(--sv-op-accent)}

/* plusje in de lopende tekst */
.sv-pluslink{font:inherit;color:var(--sv-merk-tekst);background:none;border:0;padding:0 2px 0 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--sv-merk-rand);text-decoration-thickness:2px;text-underline-offset:4px;display:inline;line-height:inherit}
.sv-pluslink .sv-plus{margin-left:6px;width:20px;height:20px}
.sv-pluslink:hover{text-decoration-color:var(--sv-merk)}
.sv-pluslink:hover .sv-plus{transform:rotate(90deg)}
.sv-pluslink[aria-expanded="true"]:hover .sv-plus{transform:rotate(135deg)}

/* verdiepingskaart */
.sv-verd-knop{position:relative;width:100%;display:flex;align-items:center;gap:var(--sv-s3);text-align:left;font:inherit;color:inherit;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);padding:var(--sv-s3) var(--sv-s4);cursor:pointer;box-shadow:var(--sv-schaduw);transition:border-color .3s,transform .3s var(--sv-ease)}
.sv-verd-knop:hover{border-color:var(--sv-merk);transform:translateY(-2px)}
.sv-verd-knop:hover .sv-plus{transform:rotate(90deg)}
.sv-verd-knop[aria-expanded="true"]:hover .sv-plus{transform:rotate(135deg)}
.sv-verd-tekst{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;padding-right:72px}
.sv-verd-tekst b{font-family:var(--sv-font-kop);font-size:20px;line-height:1.3;color:var(--sv-inkt-sterk)}
.sv-verd-tekst > span:last-child{font-size:16px;color:var(--sv-inkt-zacht)}
.sv-verdieping > .sv-deel{top:var(--sv-s2);right:calc(var(--sv-s4) + 64px)}
@media (max-width:700px){.sv-verd-knop{padding:var(--sv-s3)}.sv-verd-tekst{padding-right:0}.sv-verdieping > .sv-deel{top:calc(-1 * var(--sv-s5));right:0}}

/* beeld met plusjes */
.sv-hs-vlak{position:relative}
.sv-hotspot{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:var(--sv-s1);font:inherit;background:none;border:0;padding:0;cursor:pointer;z-index:2}
.sv-hotspot .sv-plus{width:36px;height:36px;box-shadow:0 0 0 0 color-mix(in srgb,var(--sv-merk) 60%,transparent);animation:sv-puls 2.4s infinite}
.sv-hotspot .sv-plus::before,.sv-hotspot .sv-plus::after{width:14px;margin-left:-7px}
.sv-hotspot-label{font-size:14px;font-weight:600;background:var(--sv-papier);color:var(--sv-inkt);padding:6px 12px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(0,0,0,.4);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--sv-ease);white-space:nowrap;pointer-events:none}
.sv-hotspot:hover .sv-hotspot-label,.sv-hotspot:focus-visible .sv-hotspot-label{opacity:1;transform:none}
.sv-hotspot:hover .sv-plus{transform:rotate(90deg)}
.sv-hotspot[aria-expanded="true"] .sv-plus{animation:none}
@keyframes sv-puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sv-merk) 55%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:700px){.sv-hotspot .sv-plus{width:30px;height:30px}.sv-hotspot-label{display:none}}

/* scrim en paneel */
.sv-scrim{position:fixed;inset:0;z-index:140;background:rgba(8,12,11,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .45s var(--sv-ease)}
.sv-scrim[hidden]{display:block;pointer-events:none}
body.sv-laag-open .sv-scrim{opacity:1;pointer-events:auto}
.sv-laag{position:fixed;top:0;right:0;bottom:0;z-index:145;width:min(560px,92vw);background:var(--sv-papier);box-shadow:-40px 0 80px -40px rgba(0,0,0,.5);transform:translateX(104%);visibility:hidden;transition:transform .55s cubic-bezier(.16,.84,.24,1),visibility 0s linear .55s;display:flex;flex-direction:column;outline:0}
body.sv-laag-open .sv-laag{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.16,.84,.24,1),visibility 0s}
body.sv-laag-open{overflow:hidden}
body.sv-laag-open .sv-hoofd{transform:scale(.985);transform-origin:50% 30%}
.sv-hoofd{transition:transform .55s var(--sv-ease)}
.sv-laag-kop{display:flex;justify-content:flex-end;align-items:center;gap:var(--sv-s2);padding:var(--sv-s2) var(--sv-s3);border-bottom:1px solid var(--sv-lijn)}
.sv-laag-deel{font:inherit;font-size:13px;font-weight:500;border:1px solid var(--sv-lijn-sterk);background:var(--sv-papier);color:var(--sv-inkt-zacht);border-radius:999px;padding:6px 12px;cursor:pointer}
.sv-laag-deel.klaar{background:var(--sv-merk);border-color:var(--sv-merk);color:var(--sv-op-merk)}
.sv-laag-dicht{background:none;border:0;padding:4px;cursor:pointer}
.sv-laag-dicht .sv-plus{width:40px;height:40px}
.sv-laag-dicht .sv-plus::before,.sv-laag-dicht .sv-plus::after{width:16px;margin-left:-8px}
.sv-laag-in{overflow-y:auto;padding:var(--sv-s4) var(--sv-s5) var(--sv-s6);display:flex;flex-direction:column;gap:var(--sv-s2)}
.sv-laag-in > *{opacity:0;transform:translateY(12px);transition:opacity .4s var(--sv-ease),transform .4s var(--sv-ease)}
body.sv-laag-open .sv-laag-in > *{opacity:1;transform:none}
body.sv-laag-open .sv-laag-in > *:nth-child(2){transition-delay:.06s}
body.sv-laag-open .sv-laag-in > *:nth-child(3){transition-delay:.12s}
body.sv-laag-open .sv-laag-in > *:nth-child(n+4){transition-delay:.18s}
.sv-laag-in h3{font-size:clamp(24px,2.4vw,30px);line-height:1.2}
.sv-laag-in p{margin:0;font-size:17px;line-height:1.7}
.sv-laag-in ul{margin:0;padding-left:20px}
.sv-laag-in li{margin-bottom:var(--sv-s1);font-size:16px}
.sv-laag-getal{font-family:var(--sv-font-kop);font-size:56px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--sv-merk-tekst)}
.sv-laag-beeld{margin:var(--sv-s1) 0}
.sv-laag-beeld img{display:block;width:100%;height:auto;border-radius:var(--sv-s2);border:1px solid var(--sv-lijn)}
.sv-laag-beeld figcaption{margin-top:var(--sv-s1);font-size:13px;color:var(--sv-inkt-licht)}
.sv-laag .sv-knoppen{margin-top:var(--sv-s2)}
@media (max-width:700px){
  .sv-laag{top:auto;left:0;width:auto;height:88vh;border-radius:var(--sv-radius) var(--sv-radius) 0 0;transform:translateY(104%);box-shadow:0 -30px 60px -30px rgba(0,0,0,.5)}
  .sv-laag-in{padding:var(--sv-s3) var(--sv-s3) var(--sv-s5)}
  body.sv-laag-open .sv-hoofd{transform:none}
}

/* ---------- rustig in beeld ---------- */
.sv-fade{opacity:0;transform:translateY(14px);transition:opacity .6s var(--sv-ease),transform .6s var(--sv-ease)}
.sv-fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .sv-fade{opacity:1;transform:none}
  .sv-stap{opacity:1}
}

/* ---------- zonder JavaScript: alle beelden van een scène onder elkaar, niets verborgen ---------- */
html:not(.sv-js) .sv-st,html:not(.sv-js) .sv-pn,html:not(.sv-js) .sv-bl-laag,html:not(.sv-js) .sv-sk-w{opacity:1;transform:none}
html:not(.sv-js) .sv-st p,html:not(.sv-js) .sv-st .voet{display:block}
html:not(.sv-js) .sv-pn,html:not(.sv-js) .sv-bl-laag{grid-area:auto;position:relative;inset:auto;margin-bottom:var(--sv-s2)}
html:not(.sv-js) .sv-sc-panelen,html:not(.sv-js) .sv-bl-lagen{display:block}
html:not(.sv-js) .sv-sk-s{transform:none}
html:not(.sv-js) .sv-foto:first-child{opacity:1}
html:not(.sv-js) .sv-plak{position:relative;top:auto;height:auto}
html:not(.sv-js) .sv-stap{opacity:1}

/* =========================================================
   Bewegende blokken (21-09): woorden die oplichten, een tekstband,
   panelen die over elkaar schuiven, een swipe-slider en een
   tijdlijn die zijwaarts schuift terwijl je naar beneden scrolt.
   ========================================================= */

/* woorden die oplichten: elk woord kleurt in als de lezer erlangs scrolt */
.sv-woorden{max-width:900px;margin-left:auto;margin-right:auto;padding-right:72px}  /* ruimte voor de deelknop rechtsboven */
@media (max-width:700px){.sv-woorden{padding-right:0;padding-top:48px}}
.sv-woorden p{margin:0;font-family:var(--sv-font-kop);font-weight:var(--sv-kop-gewicht);font-size:clamp(28px,4vw,52px);line-height:1.18;letter-spacing:-.02em;color:var(--sv-inkt-sterk)}
.sv-woorden .w{opacity:.16;transition:opacity .25s linear,color .25s linear}
.sv-woorden .w.aan{opacity:1}
.sv-woorden .w.nadruk.aan{color:var(--sv-merk-tekst);box-shadow:inset 0 -.18em 0 var(--sv-accent)}
.sv-woorden cite{display:block;margin-top:var(--sv-s3);font-style:normal;font-size:15px;color:var(--sv-inkt-licht)}
html:not(.sv-js) .sv-woorden .w{opacity:1}

/* tekstband: grote regels schuiven zijwaarts mee met het scrollen */
.sv-band{overflow:hidden;padding:var(--sv-s6) 0;background:var(--sv-band-bg,transparent)}
.sv-band-regel{display:block;white-space:nowrap;font-family:var(--sv-font-kop);font-weight:var(--sv-kop-gewicht);font-size:clamp(56px,11vw,168px);line-height:1;letter-spacing:-.04em;color:var(--sv-inkt-sterk);will-change:transform;padding:0 var(--sv-s6)}
.sv-band-regel + .sv-band-regel{margin-top:var(--sv-s2)}
.sv-band-regel.hol{color:transparent;-webkit-text-stroke:2px var(--sv-inkt-sterk)}
.sv-band-regel strong{color:var(--sv-merk-tekst);font-weight:inherit}
.sv-band-onder{max-width:var(--sv-leesbreedte);margin:var(--sv-s4) auto 0;padding:0 var(--sv-s3);font-size:17px;color:var(--sv-inkt-zacht);text-align:center}
.sv-band > .sv-deel{top:var(--sv-s2);right:var(--sv-s3)}
html:not(.sv-js) .sv-band-regel{white-space:normal}

/* stapel: panelen blijven staan tot het volgende eroverheen schuift */
.sv-stapel{padding:0 var(--sv-rand) var(--sv-s8)}
.sv-stapel-paneel{position:sticky;top:calc(var(--sv-kop) + var(--sv-s4) + var(--i) * var(--sv-s2));max-width:var(--sv-blokbreedte);min-height:min(72vh,640px);margin:0 auto var(--sv-s10);display:grid;grid-template-columns:1fr 1fr;border-radius:var(--sv-radius);overflow:hidden;background:var(--sv-papier);border:1px solid var(--sv-lijn);box-shadow:0 40px 80px -40px rgba(0,0,0,.35);transform-origin:50% 0;will-change:transform}
.sv-stapel-paneel:last-child{margin-bottom:0}
.sv-stapel-paneel:nth-child(even){background:var(--sv-merk-licht);border-color:var(--sv-merk-rand)}
.sv-stapel-tekst{padding:var(--sv-s6) var(--sv-s5);display:flex;flex-direction:column;justify-content:center;gap:var(--sv-s2)}
.sv-stapel-nr{font-family:var(--sv-font-kop);font-size:clamp(48px,6vw,88px);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--sv-merk-tekst)}
.sv-stapel-tekst h3{font-size:clamp(24px,2.6vw,34px);line-height:1.15;padding-right:72px}
.sv-stapel-tekst p{margin:0;font-size:17px;line-height:1.65;color:var(--sv-inkt-zacht)}
.sv-stapel-beeld{position:relative;min-height:240px}
.sv-stapel-beeld img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.sv-stapel-paneel.zonder-beeld{grid-template-columns:1fr}
.sv-stapel-paneel > .sv-deel{top:var(--sv-s3);right:var(--sv-s3)}
.sv-stapel-paneel .sv-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .1s linear}
@media (max-width:700px){
  .sv-stapel{padding:0 var(--sv-s2) var(--sv-s6)}
  .sv-stapel-paneel{grid-template-columns:1fr;min-height:70vh;grid-template-rows:auto 1fr}
  .sv-stapel-beeld{min-height:28vh;order:-1}
  .sv-stapel-tekst{padding:var(--sv-s4) var(--sv-s3)}
  .sv-stapel-tekst h3{padding-right:56px}
}

/* swipe-slider: vegen, slepen of met de pijlen, klikt vast op elke kaart */
.sv-slider{position:relative}
.sv-slider-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sv-s3);max-width:var(--sv-blokbreedte);margin:0 auto var(--sv-s3);padding:0 var(--sv-rand)}
.sv-slider-kop h3{font-size:clamp(22px,2.4vw,30px);line-height:1.2}
.sv-slider-pijlen{display:flex;gap:var(--sv-s1);flex:none}
.sv-slider-pijlen button{width:48px;height:48px;border-radius:50%;border:1px solid var(--sv-lijn-sterk);background:var(--sv-papier);color:var(--sv-inkt);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,opacity .2s}
.sv-slider-pijlen button:hover{border-color:var(--sv-merk);background:var(--sv-merk);color:var(--sv-op-merk)}
.sv-slider-pijlen button:disabled{opacity:.35;pointer-events:none}
.sv-slider-baan{display:flex;gap:var(--sv-s3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--sv-rand);padding:var(--sv-s1) var(--sv-rand) var(--sv-s3);scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.sv-slider-baan::-webkit-scrollbar{display:none}
.sv-slider-baan.sleept{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.sv-slider-baan.sleept *{pointer-events:none}
.sv-slide{position:relative;flex:0 0 min(420px,82vw);scroll-snap-align:start;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);overflow:hidden;display:flex;flex-direction:column;user-select:none;transition:transform .35s var(--sv-ease),box-shadow .35s var(--sv-ease)}
.sv-slide:hover{transform:translateY(-4px);box-shadow:var(--sv-schaduw)}
.sv-slide img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;-webkit-user-drag:none}
.sv-slide-in{padding:var(--sv-s3);display:flex;flex-direction:column;gap:var(--sv-s1)}
.sv-slide-in .sv-eyebrow{padding-right:72px}
.sv-slide-in b{font-family:var(--sv-font-kop);font-size:20px;line-height:1.3;color:var(--sv-inkt-sterk)}
.sv-slide-in p{margin:0;font-size:16px;line-height:1.55;color:var(--sv-inkt-zacht)}
.sv-slide > .sv-deel{top:var(--sv-s2);right:var(--sv-s2)}
.sv-slider-stippen{display:flex;justify-content:center;gap:var(--sv-s1)}
.sv-slider-stippen i{width:8px;height:8px;border-radius:4px;background:var(--sv-lijn-sterk);transition:width .3s var(--sv-ease),background .3s}
.sv-slider-stippen i.aan{width:24px;background:var(--sv-merk)}
@media (max-width:700px){.sv-slider-pijlen{display:none}}

/* zijwaarts: de sectie staat vast en de kaarten schuiven horizontaal voorbij */
.sv-zijwaarts{position:relative;height:calc(var(--n) * 70vh + 100vh)}
.sv-zw-vast{position:sticky;top:var(--sv-kop);height:calc(100vh - var(--sv-kop));overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:var(--sv-s4);padding:var(--sv-s4) 0}
/* de kaarten lopen zacht weg aan de randen, zodat het afsnijden een bedoelde beweging is.
   Het masker zit op het vaste vlak, niet op de baan: een masker schuift mee met een transform
   en knipt dan alles weg wat buiten de oorspronkelijke doos valt. */
.sv-zw-vast{-webkit-mask:linear-gradient(90deg,transparent 0,#000 var(--sv-s4),#000 calc(100% - var(--sv-s4)),transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 var(--sv-s4),#000 calc(100% - var(--sv-s4)),transparent 100%)}
.sv-zw-kop{padding:0 var(--sv-s6);display:flex;align-items:baseline;justify-content:space-between;gap:var(--sv-s3)}
.sv-zw-kop h3{font-size:clamp(24px,2.8vw,36px);line-height:1.15;max-width:22ch}
.sv-zw-teller{font-size:15px;font-weight:600;color:var(--sv-inkt-licht);font-variant-numeric:tabular-nums;flex:none;padding-right:128px}
.sv-zw-baan{display:flex;gap:var(--sv-s4);padding:0 var(--sv-s6);will-change:transform}
.sv-zw-kaart{position:relative;flex:0 0 clamp(280px,42vw,640px);background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);overflow:hidden;box-shadow:var(--sv-schaduw)}
.sv-zw-kaart img{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:40vh;object-fit:cover}
/* zijwaarts breed: sinds het verhaal de volle breedte heeft, pasten 4 kaarten in beeld en schoof er niets.
   Kaarten van 42vw zorgen dat de rij altijd breder is dan het scherm; past hij toch, dan geen dode scroll (sv-past). */
.sv-zijwaarts.sv-past{height:auto}.sv-zijwaarts.sv-past .sv-zw-vast{position:relative;height:auto;padding:var(--sv-s6) 0}.sv-zijwaarts.sv-past .sv-zw-rail,.sv-zijwaarts.sv-past .sv-zw-teller{display:none}
.sv-zw-in{padding:var(--sv-s3) var(--sv-s4) var(--sv-s4);display:flex;flex-direction:column;gap:var(--sv-s1)}
.sv-zw-groot{font-family:var(--sv-font-kop);font-size:clamp(40px,4.4vw,64px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--sv-merk-tekst)}
.sv-zw-in b{font-size:19px;line-height:1.3;color:var(--sv-inkt-sterk)}
.sv-zw-in p{margin:0;font-size:16px;line-height:1.55;color:var(--sv-inkt-zacht)}
.sv-zw-rail{margin:0 var(--sv-s6);height:4px;border-radius:4px;background:var(--sv-lijn);overflow:hidden}
.sv-zw-rail i{display:block;height:100%;width:100%;background:var(--sv-merk);transform-origin:0 50%;transform:scaleX(0)}
.sv-zw-vast > .sv-deel{top:var(--sv-s3);right:var(--sv-s5)}
@media (max-width:700px){.sv-zw-kop,.sv-zw-baan{padding:0 var(--sv-s3)}.sv-zw-rail{margin:0 var(--sv-s3)}.sv-zw-teller{display:none}}
html:not(.sv-js) .sv-zijwaarts{height:auto}
html:not(.sv-js) .sv-zw-vast{position:relative;height:auto;overflow-x:auto;padding:var(--sv-s6) 0}
@media (prefers-reduced-motion:reduce){
  .sv-zijwaarts{height:auto}
  .sv-zw-vast{position:relative;height:auto;overflow-x:auto;padding:var(--sv-s6) 0}
  .sv-band-regel{white-space:normal}
  .sv-woorden .w{opacity:1}
}

/* ---- grote cijfers (kpis met vorm "groot"): icoon, getal dat de ruimte pakt, ring of vergelijkingsbalk ---- */
.sv-icoon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--sv-merk-licht);color:var(--sv-inkt-sterk)}
.sv-icoon svg{width:26px;height:26px}
.sv-kpis.groot{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:var(--sv-s3)}
.sv-kpis.groot .sv-kpi{padding:var(--sv-s5) var(--sv-s5) var(--sv-s4);display:flex;flex-direction:column;gap:var(--sv-s2);overflow:hidden}
.sv-kpis.groot .sv-kpi .getal{font-size:clamp(72px,8.4vw,136px);line-height:.9;letter-spacing:-.045em;padding-right:0;margin-top:var(--sv-s1)}
.sv-kpis.groot .sv-kpi .getal small{font-size:.38em;letter-spacing:-.02em;margin-left:2px}
.sv-kpis.groot .sv-kpi p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--sv-inkt);max-width:34ch}
.sv-kpis.groot .sv-kpi.met-grafiek:not(:has(.sv-duo)) .getal{padding-right:clamp(96px,11vw,150px)}
.sv-kpis.groot.n3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.sv-kpis.groot.n3 .sv-kpi{padding:var(--sv-s4)}
.sv-kpis.groot.n3 .sv-kpi .getal{font-size:clamp(64px,6vw,100px)}
.sv-kpis.groot.n3 .sv-ring{width:clamp(72px,6.5vw,96px);right:var(--sv-s3);top:calc(var(--sv-s4) + 60px)}
.sv-kpis.groot.n3 .sv-kpi.met-grafiek:not(:has(.sv-duo)) .getal{padding-right:clamp(80px,7vw,110px)}
.sv-ring{position:absolute;right:var(--sv-s4);top:calc(var(--sv-s5) + 56px);width:clamp(96px,10vw,140px);height:auto;transform:rotate(-90deg)}
.sv-ring circle{fill:none;stroke-width:12}
.sv-ring .bg{stroke:var(--sv-lijn)}
.sv-ring .vg{stroke:var(--sv-merk);stroke-linecap:round;stroke-dasharray:var(--p) 100;transition:stroke-dasharray 1.4s cubic-bezier(.2,.6,.2,1) .15s}
.sv-duo{display:grid;gap:10px;margin-top:var(--sv-s1)}
.sv-duo .rij{display:grid;grid-template-columns:minmax(0,12em) 1fr auto;align-items:center;gap:var(--sv-s2);font-size:15px;color:var(--sv-inkt-zacht)}
.sv-duo .rij i{display:block;height:14px;border-radius:999px;background:var(--sv-lijn);position:relative;overflow:hidden}
.sv-duo .rij i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--w) * 1%);background:var(--sv-merk);border-radius:inherit;transition:width 1.4s cubic-bezier(.2,.6,.2,1) .15s}
.sv-duo .rij.zacht i::after{background:var(--sv-inkt-licht)}
.sv-duo .rij b{font-weight:800;color:var(--sv-inkt-sterk);min-width:3ch;text-align:right}
.sv-js .sv-kpis:not(.in) .sv-ring .vg{stroke-dasharray:0 100}
.sv-js .sv-kpis:not(.in) .sv-duo i::after{width:0}
@media (max-width:700px){.sv-kpis.groot .sv-kpi{padding:var(--sv-s4) var(--sv-s3) var(--sv-s3)}.sv-ring{width:84px;top:calc(var(--sv-s4) + 60px);right:var(--sv-s3)}.sv-kpis.groot .sv-kpi.met-grafiek:not(:has(.sv-duo)) .getal{padding-right:96px}.sv-kpis.groot.n3 .sv-ring{width:84px;top:calc(var(--sv-s4) + 60px)}.sv-duo .rij{grid-template-columns:minmax(0,7em) 1fr auto}}
@media (prefers-reduced-motion:reduce){.sv-ring .vg,.sv-duo i::after{transition:none}}

/* voet van de site in modus ingebed: over de volle breedte, boven de inhoudsopgave */
.sv-sitevoet{position:relative;z-index:85}

/* auteur: regel in de held en blok "Geschreven door" (meta > auteur) */
.sv-auteur{display:flex;align-items:center;gap:var(--sv-s2);margin-top:var(--sv-s4)}
.sv-auteur .sv-auteur-foto{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--sv-merk)}
.sv-auteur b{display:block;color:var(--sv-held-inkt);font-size:16px}
.sv-auteur span{display:block;color:var(--sv-held-zacht);font-size:14px}
.sv-auteur + .sv-byline{margin-top:var(--sv-s3)}
.sv-schrijver{display:flex;gap:var(--sv-s4);align-items:flex-start}
.sv-schrijver .sv-auteur-foto{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 96px}
.sv-schrijver h3{margin:4px 0 var(--sv-s1);font-size:clamp(22px,2vw,28px);padding-right:88px}
.sv-schrijver p{margin:0 0 var(--sv-s3);color:var(--sv-inkt-zacht)}
@media (max-width:700px){.sv-schrijver{flex-direction:column;gap:var(--sv-s2)}.sv-schrijver .sv-auteur-foto{width:72px;height:72px;flex-basis:72px}}

/* bronnen, 21-09: één kolom op een vast raster. Het soortlabel staat al bij elke bron, dus geen losse legenda,
   en geen tweede deelknop: het hoofdstuk Bronnen heeft er al een. */
.sv-hfd > .sv-bronnen > .sv-deel{display:none}
.sv-bronnen .sv-soorten{display:none}
.sv-bronlijst{grid-template-columns:1fr;gap:0;margin-top:var(--sv-s3);border-top:1px solid var(--sv-lijn)}
.sv-bronlijst li{display:grid;grid-template-columns:136px 1fr;gap:var(--sv-s2);align-items:start;padding:var(--sv-s2) 0;font-size:16px;line-height:1.45}
.sv-bronlijst .sv-soort{justify-self:start;margin-top:1px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.sv-bronnen .sv-klein{margin-top:var(--sv-s2);font-size:14px;color:var(--sv-inkt-licht)}
@media (max-width:480px){.sv-bronlijst li{grid-template-columns:1fr;gap:var(--sv-s1)}}

/* ---- Leesbare maten (21-09, Robert: "die blokjes niet te klein maken, grotere teksten").
   Ondergrenzen voor alles in een blok. Lopende tekst in een blok 17px, bijschriften 15px,
   labels 14px, iconen 56px. Kleiner mag alleen het bijschrift op een foto of video. */
.sv-kpi p,.sv-pn p,.sv-st p,.sv-st .voet,.sv-bl-laag figcaption,.sv-duo .rij,.sv-bronlijst li,.sv-soorten,.sv-blokvoet,
.sv-quote .origineel,.sv-quote cite,.sv-woorden cite,.sv-scene.doek .sv-stap cite{font-size:17px}
.sv-fig figcaption,.sv-clip figcaption,.sv-klein,.sv-kaart .van,.sv-sk-l,.sv-pn-rij em,.sv-hotspot-label,.sv-laag-beeld figcaption,.sv-st .klein{font-size:15px}
.sv-eyebrow,.sv-label,.sv-bron,.sv-soort,.sv-mini .mk b,.sv-mini .mk span,.sv-pn-rij small,.sv-rail li,.sv-st-vast span,.sv-breuk span,.sv-st .voet span{font-size:14px}
.sv-icoon{width:56px;height:56px;border-radius:16px}
.sv-icoon svg{width:30px;height:30px}

/* ---------- delen op LinkedIn en WhatsApp: boven in de held, onderaan het stuk en in het menu onder elke Deel-knop ---------- */
.sv-deelbalk{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sv-s1) var(--sv-s1);margin-top:var(--sv-s3)}
.sv-deelbalk-l{font-size:14px;font-weight:700;margin-right:var(--sv-s1)}
.sv-dk{display:inline-flex;align-items:center;gap:var(--sv-s1);min-height:44px;padding:0 18px;border-radius:999px;box-sizing:border-box;font:inherit;font-size:15px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;border:1.5px solid currentColor;background:transparent;color:inherit;transition:transform .2s var(--sv-ease),background .2s,border-color .2s,color .2s}
.sv-dk svg{width:18px;height:18px;flex:0 0 18px}
.sv-dk:hover{transform:translateY(-1px)}
.sv-dk.li{background:var(--sv-accent);border-color:var(--sv-accent);color:var(--sv-op-accent)}
.sv-dk.klaar{background:var(--sv-merk);border-color:var(--sv-merk);color:var(--sv-op-merk)}
.sv-held .sv-deelbalk{color:var(--sv-held-inkt)}
.sv-held .sv-deelbalk-l{color:var(--sv-held-zacht)}
.sv-deeleind{max-width:var(--sv-leesbreedte);margin:var(--sv-s8) auto;padding:var(--sv-s5);box-sizing:border-box;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);color:var(--sv-inkt);text-align:center}
.sv-deeleind-kop{margin:0;font-family:var(--sv-font-kop);font-weight:var(--sv-kop-gewicht);font-size:26px;line-height:1.15;color:var(--sv-inkt-sterk)}
.sv-deeleind .sv-deelbalk{justify-content:center}
.sv-deelmenu{position:fixed;z-index:60;display:flex;flex-direction:column;gap:var(--sv-s1);padding:var(--sv-s1);background:var(--sv-papier);color:var(--sv-inkt);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw)}
.sv-deelmenu .sv-dk{justify-content:flex-start;border-color:transparent}
.sv-deelmenu .sv-dk.li{border-color:var(--sv-accent)}
html:not(.sv-js) .sv-deelbalk,html:not(.sv-js) .sv-deeleind{display:none}
@media (max-width:700px){.sv-deeleind{padding:var(--sv-s4) var(--sv-s3)}.sv-deeleind-kop{font-size:22px}.sv-deelbalk-l{flex-basis:100%}}

/* koppen in balans, geen staartje op de laatste regel (Robert, okt 2026); de oogcheck bewaakt het */
:where(.sv-hoofd) :where(h1,h2,h3,.sv-woorden p,blockquote){text-wrap:balance}

/* kaart met een getal: deelknop en bronknop samen in een voetregel, nooit meer over het getal (oogcheck, 8-10-2026) */
.sv-kpi .getal{padding-right:0}
.sv-kpis.sv-kpis.sv-kpis .sv-kpi{padding-bottom:calc(var(--sv-s3) + 44px)}  /* sterker dan .sv-kpis.groot.n3 .sv-kpi */
.sv-kpi > .sv-deel{top:auto;bottom:var(--sv-s2);right:var(--sv-s2)}
.sv-kpis .sv-kpi > .sv-bron{position:absolute;left:var(--sv-s3);bottom:var(--sv-s2);margin:0}
.sv-kpis.groot .sv-kpi > .sv-bron{left:var(--sv-s5)}
.sv-kpis.groot.n3 .sv-kpi > .sv-bron{left:var(--sv-s4)}
@media (max-width:700px){.sv-kpis.groot .sv-kpi > .sv-bron{left:var(--sv-s3)}}
/* op smal schuiven de stappen over het beeld: alleen de kaart zelf vangt klikken, zodat knoppen in het beeld (bron, deel) bruikbaar blijven */
@media (max-width:1100px){.sv-scene:not(.doek) .sv-stap{pointer-events:none}.sv-scene:not(.doek) .sv-stap > *{pointer-events:auto}}
.sv-kpis .sv-kpi > .sv-bron{bottom:calc(var(--sv-s2) + 3px)}   /* even hoog als de deelknop ernaast */
.sv-kpis.groot .sv-kpi .getal small{margin-left:.15em}

/* ---------- werkcase: reflectie, toets, takeaways, werkblad (9-10-2026) ---------- */
.sv-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sv-reflectie{background:var(--sv-accent-licht);border-color:var(--sv-accent);border-width:1px 1px 1px 5px;border-style:solid}
.sv-rf-vraag{font-family:var(--sv-font-kop);font-size:clamp(20px,2vw,24px);line-height:1.3;color:var(--sv-inkt-sterk);margin:var(--sv-s1) 0 var(--sv-s1)}
.sv-rf-hint{margin:0 0 var(--sv-s2);font-size:16px;line-height:1.5;color:var(--sv-inkt-zacht)}
.sv-rf-label{display:block}
.sv-reflectie textarea{display:block;width:100%;box-sizing:border-box;min-height:96px;font:inherit;font-size:16px;line-height:1.5;color:var(--sv-inkt);background:var(--sv-papier);border:1px solid var(--sv-lijn-sterk);border-radius:var(--sv-radius-klein);padding:12px 14px;resize:vertical}
.sv-reflectie textarea:focus{outline:2px solid var(--sv-merk);outline-offset:1px;border-color:var(--sv-merk)}
.sv-rf-noot{margin:var(--sv-s1) 0 0;font-size:14px;color:var(--sv-inkt-licht)}

.sv-toets{background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);padding:var(--sv-s5)}
.sv-ts-kop h3,.sv-takeaways h3,.sv-werkblad h3{font-size:clamp(24px,2.4vw,32px);margin:var(--sv-s1) 0 var(--sv-s4);color:var(--sv-inkt-sterk)}
.sv-ts-lijst{list-style:none;counter-reset:ts;margin:0;padding:0;display:grid;gap:var(--sv-s3)}
.sv-ts-vraag{counter-increment:ts;padding:var(--sv-s3);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius-klein);background:var(--sv-bg-zacht)}
.sv-ts-v{margin:0 0 var(--sv-s2);font-size:17px;font-weight:700;line-height:1.4;color:var(--sv-inkt-sterk)}
.sv-ts-v::before{content:counter(ts) ". ";color:var(--sv-merk-tekst)}
.sv-ts-opties{display:grid;gap:8px}
.sv-ts-opties button{font:inherit;font-size:16px;line-height:1.4;text-align:left;padding:12px 16px;border-radius:var(--sv-radius-klein);border:1px solid var(--sv-lijn-sterk);background:var(--sv-papier);color:var(--sv-inkt);cursor:pointer;transition:border-color .2s,background .2s}
.sv-ts-opties button:hover{border-color:var(--sv-merk)}
.sv-ts-vraag.klaar button{cursor:default}
.sv-ts-vraag.klaar button:not(.juist):not(.gekozen){opacity:.55}
.sv-ts-opties button.juist{background:var(--sv-merk-licht);border-color:var(--sv-merk);font-weight:700}
.sv-ts-opties button.gekozen:not(.juist){background:var(--sv-accent-licht);border-color:var(--sv-accent)}
.sv-ts-uitleg{display:none;margin-top:var(--sv-s2);padding:12px 14px;border-radius:var(--sv-radius-klein);background:var(--sv-papier);border:1px solid var(--sv-lijn);font-size:16px;line-height:1.5;color:var(--sv-inkt)}
.sv-ts-vraag.klaar .sv-ts-uitleg{display:block}
.sv-ts-vraag.goed .sv-ts-uitleg b{color:var(--sv-merk-tekst)}
.sv-ts-score:not(:empty){margin-top:var(--sv-s3);font-family:var(--sv-font-kop);font-size:22px;font-weight:800;color:var(--sv-inkt-sterk)}

.sv-takeaways{background:var(--sv-papier);border:1px solid var(--sv-merk-rand);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);padding:var(--sv-s5)}
.sv-takeaways ol{list-style:none;counter-reset:tk;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sv-s3)}
.sv-takeaways li{counter-increment:tk;position:relative;padding:var(--sv-s3) var(--sv-s3) var(--sv-s3) 64px;border-radius:var(--sv-radius-klein);background:var(--sv-merk-licht);border:1px solid var(--sv-merk-rand)}
.sv-takeaways li::before{content:counter(tk);position:absolute;left:var(--sv-s3);top:var(--sv-s3);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--sv-merk);color:var(--sv-op-merk);font-weight:800;font-size:16px}
.sv-takeaways li b{display:block;font-size:17px;line-height:1.35;color:var(--sv-inkt-sterk);margin-bottom:6px}
.sv-takeaways li p{margin:0;font-size:16px;line-height:1.5;color:var(--sv-inkt-zacht)}

.sv-werkblad{background:var(--sv-papier);border:2px dashed var(--sv-merk-rand);border-radius:var(--sv-radius);padding:var(--sv-s5)}
.sv-wb-intro{margin:calc(var(--sv-s2) * -1) 0 var(--sv-s4);font-size:16px;line-height:1.5;color:var(--sv-inkt-zacht)}
.sv-wb-inhoud{display:grid;gap:0;border-top:1px solid var(--sv-lijn)}
.sv-wb-deel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--sv-s3);padding:14px 0;border-bottom:1px solid var(--sv-lijn)}
.sv-wb-deel b{font-size:16px;line-height:1.4;color:var(--sv-inkt-sterk)}
.sv-wb-deel p{margin:0;font-size:16px;line-height:1.5;color:var(--sv-inkt);white-space:pre-line;overflow-wrap:anywhere}
.sv-wb-deel p.leeg{color:var(--sv-inkt-licht);font-style:italic}
.sv-wb-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sv-s4)}
@media (max-width:700px){.sv-toets,.sv-takeaways,.sv-werkblad{padding:var(--sv-s3)}.sv-wb-deel{grid-template-columns:1fr;gap:4px}.sv-takeaways li{padding-left:60px}}
@media print{
  body.sv-wb-print *{visibility:hidden}
  body.sv-wb-print .sv-werkblad,body.sv-wb-print .sv-werkblad *{visibility:visible}
  body.sv-wb-print .sv-werkblad{position:absolute;left:0;top:0;width:100%;border:0;padding:0}
  body.sv-wb-print .sv-wb-knoppen{display:none}
}

/* ---------- rekenmodule ---------- */
.sv-rekenmodule{background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);padding:var(--sv-s5)}
.sv-rm-kop h3{font-size:clamp(24px,2.4vw,32px);margin:var(--sv-s1) 0 var(--sv-s2);color:var(--sv-inkt-sterk)}
.sv-rm-kop p{margin:0;font-size:16px;line-height:1.5;color:var(--sv-inkt-zacht)}
.sv-rm-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sv-s3) var(--sv-s5);margin:var(--sv-s4) 0 var(--sv-s3)}
.sv-rm-in label{display:flex;flex-direction:column;gap:6px}
.sv-rm-in label > span{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sv-s2);font-size:15px;font-weight:600;color:var(--sv-inkt-sterk)}
.sv-rm-in label b{font-family:var(--sv-font-kop);font-size:18px;color:var(--sv-merk-tekst);white-space:nowrap}
.sv-rekenmodule input[type=range]{width:100%;accent-color:var(--sv-merk);height:28px;margin:0}
.sv-rm-uit{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sv-s2)}
.sv-rm-cel{display:grid;align-content:start;gap:6px;padding:var(--sv-s3);border-radius:var(--sv-radius-klein);background:var(--sv-bg-zacht);border:1px solid var(--sv-lijn)}
.sv-rm-cel.groot{background:var(--sv-merk-licht);border-color:var(--sv-merk-rand)}
.sv-rm-cel small{font-size:14px;font-weight:600;line-height:1.35;color:var(--sv-inkt-zacht)}
.sv-rm-cel b{font-family:var(--sv-font-kop);font-size:clamp(28px,3vw,38px);font-weight:800;line-height:1.1;color:var(--sv-inkt-sterk);overflow-wrap:anywhere}
.sv-rm-cel em{font-style:normal;font-size:14px;line-height:1.45;color:var(--sv-inkt-licht)}
.sv-rm-meter{margin-top:var(--sv-s3);padding:var(--sv-s3) var(--sv-s4) var(--sv-s4);border-radius:var(--sv-radius-klein);border:2px solid var(--sv-lijn);transition:border-color .3s,background .3s}
.sv-rm-meter[data-stand="laag"]{border-color:var(--sv-accent);background:var(--sv-accent-licht)}
.sv-rm-meter[data-stand="goed"]{border-color:var(--sv-merk-rand);background:var(--sv-merk-licht)}
.sv-rm-mkop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sv-s2);margin-bottom:var(--sv-s2)}
.sv-rm-mkop span{font-size:16px;font-weight:700;color:var(--sv-inkt-sterk)}
.sv-rm-mkop b{font-family:var(--sv-font-kop);font-size:36px;font-weight:800;color:var(--sv-inkt-sterk);white-space:nowrap}
.sv-rm-schaal{position:relative;height:16px;border-radius:8px;background:var(--sv-lijn)}
.sv-rm-schaal .grens{position:absolute;left:calc(var(--x) * 1%);top:-6px;bottom:-6px;width:3px;margin-left:-1px;background:var(--sv-inkt-sterk);border-radius:2px}
.sv-rm-schaal .naald{position:absolute;left:calc(var(--x, 0) * 1%);top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--sv-papier);border:4px solid var(--sv-inkt-sterk);transition:left .35s var(--sv-ease)}
.sv-rm-as{position:relative;height:20px;margin-top:12px;font-size:14px;color:var(--sv-inkt-zacht)}
.sv-rm-as .grenslabel{position:absolute;left:calc(var(--x) * 1%);transform:translateX(calc(var(--x) * -1%));font-weight:700;color:var(--sv-inkt-sterk);white-space:nowrap}
.sv-rm-oordeel{margin:var(--sv-s2) 0 0;font-size:16px;font-weight:700;color:var(--sv-inkt-sterk)}
.sv-rm-noot{margin:var(--sv-s3) 0 0;font-size:14px;line-height:1.5;color:var(--sv-inkt-licht)}
@media (max-width:700px){.sv-rekenmodule{padding:var(--sv-s3)}.sv-rm-in{grid-template-columns:1fr}.sv-rm-meter{padding:var(--sv-s3)}}

/* ---------- echt werk laten zien: waaier en browser (18-10-2026) ----------
   Uit de TTLC-pagina's webinars (het slide deck, de landingspagina), brian en content.
   Een scherm is een apparaat, geen merkvlak: de rand en balk zijn altijd donker, ook bij een lichte klant. */
.sv-bb{flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;background:#141417;border-bottom:1px solid #26262c}
.sv-bb i{width:9px;height:9px;border-radius:50%;background:#3a3a43;flex:none}
.sv-bb i:nth-child(1){background:#F0766A}.sv-bb i:nth-child(2){background:#F8B518}.sv-bb i:nth-child(3){background:#8FD6A0}
.sv-bb span{margin-left:8px;min-width:0;white-space:nowrap;overflow:hidden;font-size:14px;line-height:1.3;color:#b9b0a0}
.sv-bb .sv-bb-url{padding:4px 14px;border-radius:999px;background:#26231c;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* waaier: op breed een hoge rail met een vast podium, de scroll draait de waaier */
.sv-waaier{position:relative}
.sv-wa-vast{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sv-s4);padding:var(--sv-s6) 0;overflow:hidden}
.sv-wa-kop{text-align:center;max-width:var(--sv-leesbreedte);padding:0 var(--sv-s3)}
.sv-wa-kop h3{margin:0;font-family:var(--sv-font-kop);font-size:clamp(26px,3vw,40px);line-height:1.12;color:var(--sv-inkt-sterk)}
.sv-wa-zin{margin:var(--sv-s2) 0 0;font-size:17px;line-height:1.5;color:var(--sv-inkt-zacht)}
.sv-wa-rij{list-style:none;margin:0;padding:0;position:relative;width:min(760px,74vw);aspect-ratio:16/11;perspective:1800px;transform-style:preserve-3d}
.sv-wa-s{--x:0;--a:0;position:absolute;inset:0;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#0E0E10;border:1px solid #34343c;
  box-shadow:0 60px 100px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04);
  transform:translateX(calc(var(--x) * 58%)) translateZ(calc(var(--a) * -260px)) rotateY(calc(var(--x) * -32deg));
  will-change:transform}
/* geen opacity op het scherm (de oogcheck weigert doorschijnend beeld): de schermen achter het middelste worden donkerder */
.sv-wa-s::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(10,10,11,calc(min(var(--a), 1) * .45))}
/* zonder JavaScript: het eerste scherm vooraan, de rest gewaaierd erachter */
.sv-wa-s[data-i="0"]{z-index:10}.sv-wa-s[data-i="1"]{--x:1;--a:1;z-index:8}.sv-wa-s[data-i="2"]{--x:2;--a:2;z-index:6}
.sv-wa-s[data-i="3"]{--x:3;--a:3;z-index:4}.sv-wa-s[data-i="4"]{--x:4;--a:3;z-index:2}
.sv-wa-venster{position:relative;flex:1;overflow:hidden;background:#050506}
.sv-wa-venster img{display:block;width:100%;height:auto;will-change:transform}
.sv-wa-teller{margin:0;font-size:15px;font-weight:600;color:var(--sv-inkt-licht);font-variant-numeric:tabular-nums;text-align:center;padding:0 var(--sv-s3)}
.sv-wa-teller b{color:var(--sv-merk-tekst)}
@media (min-width:1001px){
  html.sv-js .sv-waaier{height:calc(var(--n) * 80vh + 100vh)}
  html.sv-js .sv-wa-vast{position:sticky;top:var(--sv-kop);height:calc(100vh - var(--sv-kop));justify-content:center;padding:var(--sv-s4) 0}
  html.sv-js .sv-wa-rij{width:min(820px,56vw,calc((100vh - var(--sv-kop) - 300px) * 1.45))}
}
@media (max-width:700px){.sv-wa-rij{width:72vw}.sv-wa-s{transform:translateX(calc(var(--x) * 40%)) translateZ(calc(var(--a) * -220px)) rotateY(calc(var(--x) * -30deg))}}
/* op een telefoon past een titel of adres niet in de balk; afkappen mag niet, dus alleen de bolletjes (de teller noemt de titel) */
@media (max-width:700px){.sv-bb span{display:none}}
@media (prefers-reduced-motion:reduce){html.sv-js .sv-waaier{height:auto}html.sv-js .sv-wa-vast{position:relative;height:auto}}

/* browser: een echte pagina die vanzelf naar beneden loopt, met de onderdelen ernaast */
.sv-browser{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--sv-s6);align-items:center}
.sv-br-tekst h3{margin:0 0 var(--sv-s2);font-family:var(--sv-font-kop);font-size:clamp(24px,2.6vw,34px);line-height:1.15;color:var(--sv-inkt-sterk)}
.sv-br-tekst > p{margin:0;font-size:17px;line-height:1.55;color:var(--sv-inkt-zacht)}
.sv-br-lijst{list-style:none;margin:var(--sv-s3) 0 0;padding:0;display:grid;gap:6px}
.sv-br-k{display:flex;align-items:center;gap:var(--sv-s2);width:100%;min-height:48px;padding:8px 16px;border-radius:var(--sv-radius-klein);border:1px solid transparent;background:transparent;
  color:var(--sv-inkt-zacht);font:inherit;font-size:17px;font-weight:700;text-align:left;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.sv-br-k small{font-size:14px;font-variant-numeric:tabular-nums;color:inherit}
.sv-br-k:hover{color:var(--sv-inkt-sterk)}
.sv-br-k.aan{background:var(--sv-papier);border-color:var(--sv-lijn);color:var(--sv-inkt-sterk);box-shadow:var(--sv-schaduw)}
.sv-br-k.aan small{color:var(--sv-merk-tekst)}
.sv-br-k:focus-visible{outline:2px solid var(--sv-merk);outline-offset:2px}
.sv-br-live{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--sv-s3);font-weight:700;color:var(--sv-inkt-sterk);text-decoration:none;border-bottom:2px solid var(--sv-merk)}
.sv-br-raam{border-radius:18px;overflow:hidden;background:#1A1813;border:1px solid #2c2820;box-shadow:0 60px 110px -50px rgba(20,20,20,.7)}
.sv-br-venster{position:relative;aspect-ratio:16/10;overflow:hidden;background:#050506}
.sv-br-venster img{display:block;width:100%;height:auto;transition:transform 1.4s cubic-bezier(.65,0,.25,1)}
@media (max-width:1000px){.sv-browser{grid-template-columns:1fr;gap:var(--sv-s4)}.sv-br-raam{order:-1}}
@media (max-width:700px){.sv-br-lijst{display:flex;flex-wrap:wrap;gap:6px}.sv-br-k{width:auto;min-height:44px;padding:6px 14px;font-size:15px;border-color:var(--sv-lijn)}}
@media (prefers-reduced-motion:reduce){.sv-br-venster img{transition:none}}

/* ---------- jouw cijfers (18-10-2026): de lezer vult in, het verhaal rekent mee ---------- */
.sv-jij-blok{background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);padding:var(--sv-s5)}
.sv-jij-kop h3{margin:var(--sv-s1) 0 0;font-family:var(--sv-font-kop);font-size:clamp(24px,2.6vw,32px);line-height:1.15;color:var(--sv-inkt-sterk)}
.sv-jij-kop p{margin:var(--sv-s2) 0 0;font-size:17px;line-height:1.55;color:var(--sv-inkt-zacht)}
.sv-jij-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--sv-s3);margin-top:var(--sv-s4)}
.sv-jij-veld{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--sv-s1) var(--sv-s2);padding:var(--sv-s3);border-radius:var(--sv-radius-klein);background:var(--sv-merk-licht);border:1px solid var(--sv-merk-rand)}
.sv-jij-l{font-size:16px;font-weight:600;line-height:1.35;color:var(--sv-inkt-sterk);min-width:0}
.sv-jij-w{font-family:var(--sv-font-kop);font-size:clamp(28px,3vw,36px);font-weight:800;line-height:1.1;color:var(--sv-merk-tekst);white-space:nowrap;font-variant-numeric:tabular-nums}
.sv-jij-veld input{grid-column:1 / -1;width:100%;height:32px;margin:0;accent-color:var(--sv-merk)}
.sv-jij-noot{margin:var(--sv-s3) 0 0;font-size:15px;line-height:1.5;color:var(--sv-inkt-licht)}
/* een getal in de lopende tekst dat meerekent: herkenbaar als jouw getal, en het licht op als het verandert */
.sv-jij{font-weight:800;color:var(--sv-merk-tekst);background:var(--sv-merk-licht);border-radius:6px;padding:0 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-jij.flits{animation:sv-jij-flits .9s var(--sv-ease)}
@keyframes sv-jij-flits{0%{background:var(--sv-accent)}100%{background:var(--sv-merk-licht)}}
@media (max-width:700px){.sv-jij-blok{padding:var(--sv-s3)}}

/* jijmeter: jouw uitkomst tegen de vergelijking, als dashboard-indicator (richting, kleur, maat) */
.sv-jijmeter{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sv-s5);align-items:center;background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw);padding:var(--sv-s5);
  --jm-kleur:var(--sv-merk);--jm-vlak:var(--sv-merk-licht);--jm-tekst:var(--sv-merk-tekst)}
.sv-jijmeter[data-stand="laag"]{--jm-kleur:#C2410C;--jm-vlak:#FDEBDD;--jm-tekst:#9A3412}
.sv-jijmeter[data-stand="gelijk"]{--jm-kleur:var(--sv-inkt-zacht);--jm-vlak:var(--sv-bg-zacht);--jm-tekst:var(--sv-inkt-sterk)}
.sv-jm-links{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sv-s1)}
.sv-jm-getal{font-family:var(--sv-font-kop);font-size:clamp(44px,5.6vw,72px);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--sv-inkt-sterk);font-variant-numeric:tabular-nums}
.sv-jm-pil{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--jm-vlak);color:var(--jm-tekst);font-size:16px;font-weight:700;line-height:1.25;transition:background .3s,color .3s}
.sv-jm-pil i{flex:none;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid currentColor;transition:transform .3s var(--sv-ease)}
.sv-jm-pil[data-richting="neer"] i{transform:rotate(180deg)}
.sv-jijmeter[data-stand="gelijk"] .sv-jm-pil i{border:0;width:12px;height:3px;background:currentColor;border-radius:2px}
.sv-jm-links p{margin:var(--sv-s1) 0 0;font-size:17px;line-height:1.5;color:var(--sv-inkt-zacht)}
/* de rijen delen één raster, zodat beide balken op dezelfde plek beginnen */
.sv-jm-rechts{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sv-s3) var(--sv-s2)}
.sv-jm-rij{display:contents}
.sv-jm-rechts > .sv-bronrij{grid-column:1 / -1}
.sv-jm-rij > span{font-size:16px;font-weight:700;color:var(--sv-inkt-sterk)}
.sv-jm-rij > b{font-size:18px;font-weight:800;color:var(--sv-inkt-sterk);font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-jm-baan{height:20px;border-radius:10px;background:var(--sv-lijn);overflow:hidden}
.sv-jm-baan i{display:block;height:100%;width:calc(var(--x) * 1%);border-radius:10px;background:var(--sv-lijn-sterk);transition:width .6s var(--sv-ease),background .3s}
.sv-jm-rij.jij .sv-jm-baan i{background:var(--jm-kleur)}
.sv-jm-rij.ref .sv-jm-baan i{background:var(--sv-inkt-licht)}
@media (max-width:800px){.sv-jijmeter{grid-template-columns:1fr;padding:var(--sv-s3);gap:var(--sv-s3)}}
@media (prefers-reduced-motion:reduce){.sv-jm-baan i,.sv-jm-pil i{transition:none}.sv-jij.flits{animation:none}}

/* ---------- de expert praat mee: portret, de echte zin, en de clip met geluid ---------- */
.sv-expert{margin-left:auto;margin-right:auto}
.sv-ex-kaart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sv-s4);align-items:start;padding:var(--sv-s5);background:var(--sv-papier);border:1px solid var(--sv-lijn);border-radius:var(--sv-radius);box-shadow:var(--sv-schaduw)}
.sv-ex-foto{width:120px;height:120px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px var(--sv-papier),0 0 0 6px var(--sv-merk)}
.sv-ex-foto img{display:block;width:100%;height:100%;object-fit:cover}
.sv-ex-tekst blockquote{margin:0;font-family:var(--sv-font-kop);font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.3;color:var(--sv-inkt-sterk)}
.sv-ex-tekst blockquote::before{content:"\201C"}.sv-ex-tekst blockquote::after{content:"\201D"}
.sv-ex-tekst figcaption{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:var(--sv-s2);font-size:16px;color:var(--sv-inkt-zacht)}
.sv-ex-tekst figcaption b{color:var(--sv-inkt-sterk)}
.sv-ex-knop{display:inline-flex;align-items:center;gap:12px;margin-top:var(--sv-s3);min-height:52px;padding:8px 22px 8px 8px;border-radius:999px;border:0;background:var(--sv-merk);color:var(--sv-op-merk);font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.sv-ex-knop small{font-size:15px;font-weight:600;opacity:.85;font-variant-numeric:tabular-nums}
.sv-ex-play{flex:none;width:38px;height:38px;border-radius:50%;background:var(--sv-op-merk);position:relative}
.sv-ex-play::after{content:"";position:absolute;left:15px;top:11px;border-left:12px solid var(--sv-merk);border-top:8px solid transparent;border-bottom:8px solid transparent}
.sv-ex-knop[aria-expanded="true"] .sv-ex-play::after{left:12px;top:12px;width:14px;height:14px;border:0;background:var(--sv-merk);border-radius:2px}
.sv-ex-knop:focus-visible{outline:3px solid var(--sv-accent);outline-offset:3px}
.sv-ex-tekst .sv-bronrij{display:block;margin-top:var(--sv-s2)}
.sv-ex-speler{grid-column:1 / -1;border-radius:var(--sv-radius-klein);overflow:hidden;background:#000}
.sv-ex-speler video{display:block;width:100%;aspect-ratio:16/9;max-height:78vh;object-fit:cover;background:#000}
.sv-expert.staand .sv-ex-speler{max-width:min(380px,100%);margin-left:auto;margin-right:auto}
.sv-expert.staand .sv-ex-speler video{aspect-ratio:9/16}
.sv-ex-speler video:not([controls]){cursor:pointer}
/* staande clip op breed: de clip staat als derde kolom in de kaart, met de poster op volle sterkte; de knop speelt hem daar af */
@media (min-width:900px){
  .sv-expert.staand .sv-ex-kaart{grid-template-columns:auto minmax(0,1fr) minmax(200px,260px)}
  .sv-expert.staand .sv-ex-speler,.sv-expert.staand .sv-ex-speler[hidden]{display:block;grid-column:auto;width:100%;max-width:none;margin:0}
}
@media (max-width:640px){.sv-ex-kaart{grid-template-columns:1fr;padding:var(--sv-s3);gap:var(--sv-s2)}.sv-ex-foto{width:96px;height:96px}}

/* ---------- geluid op maat: een knop zet muziek per hoofdstuk aan ---------- */
.sv-geluid{position:fixed;left:var(--sv-s2);bottom:calc(var(--sv-s2) + env(safe-area-inset-bottom,0px));z-index:81;width:60px;height:60px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  background:var(--sv-ring-bg,var(--sv-papier));color:var(--sv-ring-tekst,var(--sv-inkt-sterk));box-shadow:0 12px 30px -10px rgba(0,0,0,.35),0 0 0 1px var(--sv-lijn);cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s var(--sv-ease),transform .35s var(--sv-ease)}
.sv-geluid.zicht{opacity:1;transform:none;pointer-events:auto}
.sv-geluid svg,.sv-geluid-start svg{width:26px;height:26px}
.sv-geluid[aria-pressed="true"]{background:var(--sv-merk);color:var(--sv-op-merk)}
.sv-geluid .x,.sv-geluid-start .x{display:none}
.sv-geluid[aria-pressed="false"] .g1,.sv-geluid[aria-pressed="false"] .g2{display:none}
.sv-geluid[aria-pressed="false"] .x{display:inline}
.sv-geluid[aria-pressed="true"] .g1,.sv-geluid[aria-pressed="true"] .g2,.sv-geluid-start[aria-pressed="true"] .g1,.sv-geluid-start[aria-pressed="true"] .g2{animation:sv-golf 1.6s ease-in-out infinite}
.sv-geluid[aria-pressed="true"] .g2,.sv-geluid-start[aria-pressed="true"] .g2{animation-delay:.3s}
@keyframes sv-golf{0%,100%{opacity:1}50%{opacity:.35}}
.sv-geluid-start{display:inline-flex;align-items:center;gap:10px;margin-top:var(--sv-s3);min-height:48px;padding:10px 20px;border-radius:999px;border:1px solid currentColor;background:transparent;color:var(--sv-held-inkt);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.sv-geluid-start[aria-pressed="true"]{background:var(--sv-merk);border-color:var(--sv-merk);color:var(--sv-op-merk)}
@media (max-width:600px){.sv-geluid{width:52px;height:52px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.sv-geluid .g1,.sv-geluid .g2,.sv-geluid-start .g1,.sv-geluid-start .g2{animation:none!important}}

/* ---------- koppen en kerncijfers met klasse (18-10-2026) ---------- */
/* elk woord van een hoofdstukkop schuift op uit zijn eigen masker */
.sv-masker .sv-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .16em;margin:0 -.04em -.16em}
.sv-masker .sv-wi{display:inline-block;transform:translateY(112%);transition:transform .85s var(--sv-ease);transition-delay:calc(var(--i) * 55ms)}
.sv-masker.zicht .sv-wi{transform:none}
/* ==woord== : een handgetekende cirkel die zich tekent */
.sv-cirkel{position:relative;display:inline-block;white-space:nowrap}
.sv-cirkel-lijn{position:absolute;left:-9%;top:-34%;width:118%;height:168%;overflow:visible;pointer-events:none}
.sv-cirkel-lijn path{fill:none;stroke:var(--sv-accent);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--sv-ease) .25s}
.sv-cirkel.zicht .sv-cirkel-lijn path,html:not(.sv-js) .sv-cirkel-lijn path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.sv-masker .sv-wi{transform:none;transition:none}.sv-cirkel-lijn path{stroke-dashoffset:0;transition:none}}
/* de ring lag over de tekst onder het getal (gezien 18-10-2026): ook de tekst houdt ruimte vrij naast de ring */
.sv-kpis.groot .sv-kpi.met-grafiek:not(:has(.sv-duo)) > p{padding-right:clamp(96px,11vw,150px)}
.sv-kpis.groot.n3 .sv-kpi.met-grafiek:not(:has(.sv-duo)) > p{padding-right:clamp(80px,7vw,110px)}
@media (max-width:700px){.sv-kpis.groot .sv-kpi.met-grafiek:not(:has(.sv-duo)) > p{padding-right:96px}}

/* Cijfers in kpi-tegels schalen met de tegel, niet met het scherm (19-10-2026, Scanfie-inzichten: "94.000" liep op
   1600 breed uit zijn tegel; met vw groeit het getal mee met het scherm terwijl drie tegels naast elkaar smal blijven). */
.sv-kpis.groot .sv-kpi{container-type:inline-size}
/* --n = aantal tekens van het getal (plus de kleine eenheid), gezet door bouw.py: een langer getal wordt kleiner, zodat
   "102.000" net zo goed past als "35". Een teken is ongeveer 0,6em breed. */
.sv-kpis.groot .sv-kpi .getal{font-size:clamp(36px,calc(140cqi / max(var(--n,4),3)),136px);white-space:nowrap}
.sv-kpis.groot.n3 .sv-kpi .getal{font-size:clamp(36px,calc(140cqi / max(var(--n,4),3)),100px)}
.sv-kpis.groot .sv-kpi.met-grafiek:not(:has(.sv-duo)) .getal{font-size:clamp(36px,calc(100cqi / max(var(--n,4),3)),100px)}

/* ingebed in een site: het artikel heeft een eigen vlak, zodat een sitevoet of donkere naad eronder nooit door de tekst schijnt (20-10-2026) */
.sv-ingebed .sv-hoofd{position:relative;z-index:0;background:var(--sv-bg)}
/* onthult de site de voet (body.onthul), dan mag de wrapper geen eigen laag boven het artikel maken */
body.onthul .sv-sitevoet{position:static;z-index:auto}
/* schermafdrukken en beelden met tekst: nooit bijsnijden, het hele beeld in zijn vak (20-10-2026) */
img.sv-heel{object-fit:contain!important;background:var(--sv-heel-bg,#FDFAF6)}