/* 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:288px;           /* breedte inhoudsopgave, 0 op smal */
  --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, inhoudsopgave ---------- */
/* voortgang altijd helemaal bovenaan, ook boven een sitekop */
.sv-voortgang{position:fixed;left:0;top:0;height:3px;width:0;background:var(--sv-merk);z-index:135}
/* de inhoudsopgave loopt door tot bovenaan; onder een sitekop begint de inhoud onder die kop */
.sv-zij{position:fixed;left:0;top:0;bottom:0;width:var(--sv-zij);z-index:70;display:flex;flex-direction:column;gap:var(--sv-s3);padding:calc(var(--sv-kop) + var(--sv-s4)) var(--sv-s3) var(--sv-s4);overflow-y:auto;background:linear-gradient(180deg,var(--sv-papier),var(--sv-merk-licht));border-right:1px solid var(--sv-lijn)}
.sv-zij-logo img{height:28px;width:auto;display:block}
.sv-zij-kop{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sv-merk-tekst)}
.sv-zij-meta{font-size:14px;color:var(--sv-inkt-licht);margin-top:calc(-1 * var(--sv-s2))}
.sv-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sv-toc a{display:flex;gap:var(--sv-s2);align-items:flex-start;padding:10px var(--sv-s2);border-radius:var(--sv-radius-klein);color:var(--sv-inkt-zacht);text-decoration:none;border-left:2px solid transparent;transition:background .25s,color .25s,border-color .25s}
.sv-toc a:hover{background:var(--sv-merk-licht);color:var(--sv-inkt-sterk)}
.sv-toc a.nu{background:var(--sv-merk-licht);color:var(--sv-inkt-sterk);border-left-color:var(--sv-merk)}
.sv-toc .nr{font-size:13px;font-weight:600;color:var(--sv-merk-tekst);padding-top:2px;flex:none;font-variant-numeric:tabular-nums}
.sv-toc b{font-size:15px;font-weight:600;line-height:1.3}
.sv-toc .slot{flex:none;margin:4px 0 0 auto;opacity:.6}
body.sv-open .sv-toc .slot{display:none}
.sv-zij-voet{margin-top:auto}
.sv-toc-knop{display:none}
.sv-hoofd,.sv-voet{margin-left:var(--sv-zij)}
@media (max-width:1100px){
  /* op smal staat de knop (Sluiten) bovenin de open inhoudsopgave: de inhoud begint eronder */
  .sv-zij{padding-top:calc(var(--sv-kop) + 12px + 36px + var(--sv-s3))}
  .sv-zij{width:min(320px,86vw);transform:translateX(-102%);visibility:hidden;transition:transform .35s var(--sv-ease),visibility 0s linear .35s;box-shadow:30px 0 60px -30px rgba(0,0,0,.4)}
  .sv-zij.open{transform:none;visibility:visible;transition:transform .35s var(--sv-ease),visibility 0s}
  .sv-toc-knop{display:inline-flex;align-items:center;gap:var(--sv-s1);position:fixed;left:var(--sv-s3);top:calc(var(--sv-kop) + 12px);z-index:80;font:inherit;font-weight:600;font-size:14px;padding:8px var(--sv-s2);border-radius:999px;border:0;background:var(--sv-merk);color:var(--sv-op-merk);box-shadow:0 12px 30px -10px rgba(0,0,0,.4);cursor:pointer}
}

/* ---------- 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)}
.sv-bron{display:inline-block;margin-top:12px;font-size:13px;font-weight:500;color:var(--sv-merk-tekst);text-decoration:none;border-bottom:1px dashed var(--sv-merk-rand)}
.sv-bron:hover{border-bottom-style:solid}
.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)}
.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:72px}
.sv-kpi .getal small{font-size:.45em;font-weight:600;margin-left:4px;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 */
.sv-feit{display:flex;justify-content:space-between;gap:var(--sv-s2);padding:14px 0;border-bottom:1px solid var(--sv-lijn);font-size:16px}
.sv-feit:first-child{padding-right:96px}
.sv-feit:last-of-type{border:0}
.sv-feit span{color:var(--sv-inkt-licht)}
.sv-feit b{text-align:right}
@media (max-width:520px){.sv-feit{flex-direction:column;gap:2px}.sv-feit b{text-align:left}}

/* 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:nowrap}
.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:12px;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% - 120px);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:12px;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}
.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,30vw,440px);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:34vh;object-fit:cover}
.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}}