/* 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}}

/* 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:104px 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}
.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}