/* De blokken na de hero: de logowand, en twee verhalen op scroll (Herken je dit? en de cijfers).
   Zonder JavaScript of bij minder beweging staat alles gewoon onder elkaar. Met .film erop (verhalen.js)
   wordt elk blok één vastgeprikt scherm dat stap voor stap vertelt. */

/* ---------- logowand ---------- */
.logos{position:relative;z-index:6;padding:var(--s6) 0}
.logos-binnen{display:grid;gap:var(--s4);justify-items:center;text-align:center}
.logos-kop{font-size:var(--t-klein);font-weight:600;color:var(--op-donker-zacht)}
.logowand{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;border-top:1px solid var(--lijn-donker);border-left:1px solid var(--lijn-donker)}
.logowand li{position:relative;height:120px;display:grid;place-items:center;border-right:1px solid var(--lijn-donker);border-bottom:1px solid var(--lijn-donker);transition:background-color .25s}
.logowand img{grid-area:1/1;max-width:62%;max-height:52px;width:auto;height:auto;object-fit:contain;transition:opacity .25s}
.logowand .wit{opacity:.62}
.logowand .kleur{opacity:0}
.logowand li:hover{background:var(--wit)}
.logowand li:hover .wit{opacity:0}
.logowand li:hover .kleur{opacity:1}
.logowand:hover li:not(:hover) .wit{opacity:.3}

.hero-podium > .gids{position:absolute;z-index:6;left:50%;bottom:var(--s3);transform:translateX(-50%);padding:var(--s1) var(--s2);border-radius:999px;background:var(--op-donker-vol);box-shadow:0 6px 20px var(--diep-12)}

/* ---------- Herken je dit? ---------- */
.sf{position:relative;z-index:6;background:var(--papier)}
.sf-podium{position:relative}
.sf-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);padding:var(--s7) var(--rand) 0}
.sf-foto{margin:0}
.sf-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.sf-binnen{padding-top:var(--s8);padding-bottom:var(--s8)}
.sf-blad{padding:var(--s5) 0;border-bottom:1px solid var(--mist-diep)}
.sf h2{font-size:var(--t-display);line-height:.9;letter-spacing:-.03em;font-weight:750;font-variation-settings:"wdth" 80,"opsz" 96}
.sf-lede{font-family:var(--f-kop);font-weight:600;font-size:var(--t-3);line-height:1.2;font-variation-settings:"wdth" 88;max-width:22ch;margin-top:var(--s3);text-wrap:balance}
.sf-bron{display:flex;align-items:center;gap:var(--s1);font-size:var(--t-label);color:var(--petrol-zacht);margin-top:var(--s3);text-wrap:balance}
.sf-bron img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.sf-label{font-size:var(--t-tekst);font-weight:600;line-height:1.35;color:var(--petrol);margin-bottom:var(--s2);text-wrap:balance}
.sf-zin{font-family:var(--f-kop);font-weight:700;font-size:var(--t-2);line-height:1.08;letter-spacing:-.015em;font-variation-settings:"wdth" 84;max-width:20ch;text-wrap:balance}
.sf-speelt{margin-top:var(--s4)}
.sf-teken{display:block;width:100%;max-width:360px;height:auto;overflow:visible;margin-bottom:var(--s2)}
.sf-speelt .hand{color:var(--framboos);font-size:var(--t-hand);line-height:1;margin-bottom:var(--s1)}
.sf-inzicht{font-family:var(--f-kop);font-weight:700;font-size:var(--t-3);line-height:1.14;font-variation-settings:"wdth" 86;max-width:24ch;text-wrap:balance}
.sf-slot .knoppen{margin-top:var(--s4)}

.sf.film .sf-podium{height:100svh;overflow:hidden}
.sf.film .sf-fotos{display:block;position:absolute;top:0;right:0;bottom:0;width:50%;padding:0}
.sf.film .sf-foto{position:absolute;inset:0;margin:0;opacity:0;overflow:hidden}
.sf.film .sf-foto:first-child{opacity:1}
.sf.film .sf-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0}
.sf.film .sf-binnen{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding-top:var(--kop-h);padding-bottom:0}
.sf.film .sf-tekst{position:relative;height:min(600px,calc(100svh - var(--kop-h) - 96px));margin-right:var(--s6)}
.sf.film .sf-blad{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0;border:0}
.sf.film .sf-stap .sf-speelt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;margin:0}
/* tekst staat vast bovenaan, direct onder de gids: je oog blijft op één plek */
.sf.film .sf-tekst{height:min(480px,calc(100svh - var(--kop-h) - 96px))}
.sf.film .sf-blad{inset:var(--gids-h) 0 0 0;justify-content:flex-start}
.sf.film .sf-stap .sf-speelt{justify-content:flex-start}
.sf.film .sf-tekst > .gids,.vf.film .vf-tekst > .gids{position:absolute;top:0;left:0;right:0}

/* ---------- het programma: je half jaar als lijn ---------- */
.pf{position:relative;z-index:6;background:var(--papier)}
.pf-podium{position:relative}
.pf-binnen{padding-top:var(--s8);padding-bottom:var(--s8);display:grid;gap:var(--s5)}
.pf h2{font-size:var(--t-1);line-height:.92;letter-spacing:-.03em;font-weight:750;font-variation-settings:"wdth" 80,"opsz" 96;max-width:16ch;text-wrap:balance}
.pf-lede{font-family:var(--f-kop);font-weight:600;font-size:var(--t-3);line-height:1.22;font-variation-settings:"wdth" 88;max-width:24ch;margin-top:var(--s3);text-wrap:balance}
.pf-blad{padding:var(--s3) 0}
.pf-zin{font-family:var(--f-kop);font-weight:700;font-size:var(--t-2);line-height:1.06;letter-spacing:-.015em;font-variation-settings:"wdth" 84;max-width:16ch;text-wrap:balance}
.pf-klein{font-size:var(--t-lede);line-height:1.45;color:var(--petrol-zacht);margin-top:var(--s2);max-width:30ch;text-wrap:balance}
.pf-pijlerlijst{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:var(--s2);max-width:46ch}
.pf-pijlerlijst b{font-family:var(--f-kop)}
.pf-citaat{margin:0}
.pf-citaat blockquote{margin:0;font-family:var(--f-kop);font-weight:700;font-size:var(--t-3);line-height:1.14;letter-spacing:-.01em;font-variation-settings:"wdth" 86;max-width:22ch;text-wrap:balance}
.pf-citaat figcaption{font-size:var(--t-klein);color:var(--petrol-zacht);margin-top:var(--s2)}
.pf-slot .knoppen{margin-top:var(--s4)}
.pf-baan{position:relative;width:100%}
.pf-lijn,.pf-pijlers{display:block;width:100%;height:auto;overflow:visible}
.pf-pijler-kop{font-family:var(--f-kop);font-weight:750;fill:var(--petrol);font-variation-settings:"wdth" 84}
.pf-pijler-regel{font-family:var(--f-tekst);fill:var(--petrol-zacht)}
.pf-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3)}
.pf-kaart{margin:0;overflow:hidden;border-radius:6px;background:var(--mist)}
.pf-kaart img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.pf-baan.geplaatst{aspect-ratio:800/440}
.pf-baan.geplaatst .pf-lijn,.pf-baan.geplaatst .pf-pijlers{position:absolute;inset:0;height:100%}
.pf-baan.geplaatst .pf-kaarten{display:block;margin:0;position:absolute;inset:0;pointer-events:none}
.pf-baan.geplaatst .pf-kaart{position:absolute;box-shadow:0 10px 24px var(--diep-12);border:3px solid var(--wit)}
.pf-baan.geplaatst .pf-kaart img{aspect-ratio:auto}
.pf:not(.film) .pf-baan,.pf:not(.film) .pf-binnen > .pf-pijlers{max-width:900px}
.pf:not(.film) .pf-pijlerlijst{display:none}
.pf:not(.film) .pf-baan{order:-1}
.pf.film .pf-pijlerlijst{display:none}

.pf.film .pf-podium{height:100svh;overflow:hidden}
.pf.film .pf-binnen{height:100%;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--s5);align-items:center;padding-top:var(--kop-h);padding-bottom:0}
.pf.film .pf-tekst{position:relative;height:min(500px,calc(100svh - var(--kop-h) - 96px))}
.pf.film .pf-blad{position:absolute;inset:var(--gids-h) 0 0 0;display:flex;flex-direction:column;justify-content:flex-start;padding:0}
.pf.film .pf-tekst > .gids{position:absolute;top:0;left:0;right:0}

/* ---------- de zelftest: Waar sta jij nu? (zelftest.js) ---------- */
.zt{position:relative;z-index:6;padding:var(--s8) 0}
.zt-binnen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7);align-items:start}
.zt h2{font-size:var(--t-1);line-height:.92;letter-spacing:-.03em;font-weight:750;font-variation-settings:"wdth" 80,"opsz" 96;color:var(--papier);text-wrap:balance}
.zt-lede{font-family:var(--f-kop);font-weight:600;font-size:var(--t-3);line-height:1.22;font-variation-settings:"wdth" 88;max-width:22ch;margin-top:var(--s3);color:var(--op-donker-vol);text-wrap:balance}
.zt-portret{display:none!important}
.zt-klein{font-size:var(--t-klein);color:var(--op-donker-zacht);margin-top:var(--s2)}
.zt-intro{position:sticky;top:calc(var(--kop-h) + var(--s5))}
.zt-kaart{background:var(--vlak-donker);border:1px solid var(--lijn-donker);border-radius:8px;padding:var(--s5);min-height:560px}
.zt-kop{display:flex;align-items:center;gap:var(--s1);margin-bottom:var(--s4);font-size:var(--t-label);font-weight:600;color:var(--op-donker-zacht)}
.zt-stap{width:44px;height:4px;border-radius:2px;background:var(--lijn-donker);overflow:hidden}
.zt-stap i{display:block;height:100%;background:var(--framboos);transform-origin:0 50%;transform:scaleX(0)}
.zt-tel{margin-left:var(--s1)}
.zt-vraag{font-family:var(--f-kop);font-weight:700;font-size:var(--t-3);line-height:1.1;letter-spacing:-.01em;font-variation-settings:"wdth" 86;color:var(--papier);max-width:22ch;text-wrap:balance;outline:none}
.zt-gekozen{font-size:var(--t-klein);color:var(--blush);margin-bottom:var(--s2)}
.zt-opties{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;border-top:1px solid var(--lijn-donker)}
.zt-optie{width:100%;display:grid;grid-template-columns:72px 1fr 20px;gap:var(--s2);align-items:center;padding:var(--s2) var(--s2) var(--s2) var(--s1);background:none;border:0;border-bottom:1px solid var(--lijn-donker);color:var(--papier);text-align:left;text-decoration:none;cursor:pointer;font-family:var(--f-kop);font-weight:700;font-size:var(--t-tekst);line-height:1.2;font-variation-settings:"wdth" 90;transition:background-color .2s,color .2s,padding .2s}
.zt-optie::after{content:"";width:9px;height:9px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg);justify-self:end;opacity:.5;transition:opacity .2s,transform .2s}
.zt-optie:hover,.zt-optie:focus-visible{background:var(--vlak-donker);color:var(--blush)}
.zt-optie:hover::after,.zt-optie:focus-visible::after{opacity:1;transform:translateX(3px) rotate(45deg)}
.zt-optie span{text-wrap:balance}
.zt-glyph{width:72px;height:40px;overflow:visible}
.zt-opties-tekst .zt-optie{grid-template-columns:1fr 20px;padding:var(--s3) var(--s2)}
.zt-terug{margin-top:var(--s4);background:none;border:0;padding:var(--s1) 0;color:var(--op-donker-zacht);font-size:var(--t-klein);font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.zt-terug:hover{color:var(--papier)}
.zt-tekening{display:block;width:100%;max-width:220px;height:auto;overflow:visible;margin-bottom:var(--s2)}
.zt-stapjes{font-size:var(--t-klein);color:var(--blush);margin-bottom:var(--s2)}
.zt-label{color:var(--blush);font-size:var(--t-3);line-height:1;margin-bottom:var(--s1)}
.zt-uitkomst-kop{font-family:var(--f-kop);font-weight:700;font-size:var(--t-3);line-height:1.12;letter-spacing:-.01em;font-variation-settings:"wdth" 86;color:var(--papier);max-width:24ch;text-wrap:balance;outline:none}
.zt-extra{font-size:var(--t-lede);line-height:1.5;color:var(--op-donker);margin-top:var(--s2);max-width:42ch;text-wrap:balance}
.zt-jij{font-size:var(--t-klein);color:var(--op-donker-zacht);text-wrap:balance}
.zt-spiegel{font-size:var(--t-lede);line-height:1.45;color:var(--blush);margin:var(--s1) 0 var(--s4);max-width:40ch;text-wrap:balance}
.zt-jij b{color:var(--op-donker);font-weight:600}
.zt-bron{display:flex;align-items:center;gap:var(--s1);font-size:var(--t-label);color:var(--op-donker-zacht);margin-top:var(--s2)}
.zt-bron img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.zt .knoppen{margin-top:var(--s4)}
.zt-meta{font-size:var(--t-label);color:var(--op-donker-zacht);margin-top:var(--s2)}
.zt.actief .zt-zonder{display:none}
.zt:not(.actief) .zt-kop{display:none}

/* ---------- voor organisaties ---------- */
.og{position:relative;z-index:6;background:var(--mist)}
.og-podium{position:relative}
.og-binnen{padding-top:var(--s8);padding-bottom:var(--s8);display:grid;gap:var(--s5)}
.og h2{font-size:var(--t-1);line-height:.92;letter-spacing:-.03em;font-weight:750;font-variation-settings:"wdth" 80,"opsz" 96;max-width:16ch;text-wrap:balance}
.og-lede{font-family:var(--f-kop);font-weight:600;font-size:var(--t-3);line-height:1.22;font-variation-settings:"wdth" 88;max-width:24ch;margin-top:var(--s3);text-wrap:balance}
.og-blad{padding:var(--s3) 0}
.og-getal b{font-family:var(--f-kop);font-weight:750;font-size:var(--t-display);line-height:.85;letter-spacing:-.04em;font-variation-settings:"wdth" 76,"opsz" 96;color:var(--framboos)}
.og-zin{font-family:var(--f-kop);font-weight:700;font-size:var(--t-3);line-height:1.1;letter-spacing:-.01em;font-variation-settings:"wdth" 86;max-width:20ch;margin-top:var(--s2);text-wrap:balance}
.og-zin-accent{color:var(--framboos)}
.og-bron{font-size:var(--t-label);line-height:1.45;color:var(--petrol-zacht);margin-top:var(--s3);max-width:44ch;text-wrap:balance}
.og-lijst{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);max-width:34ch}
.og-lijst li{position:relative;padding-left:var(--s4);font-family:var(--f-kop);font-weight:700;font-size:var(--t-lede);line-height:1.2;font-variation-settings:"wdth" 88;text-wrap:balance}
.og-lijst li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--framboos)}
.og-slot .knoppen{margin-top:var(--s4)}
.og-slotkop{font-family:var(--f-kop);font-weight:750;font-size:var(--t-3);line-height:1.08;letter-spacing:-.015em;font-variation-settings:"wdth" 84;max-width:20ch;margin-bottom:var(--s3);text-wrap:balance}
.og:not(.film) .og-podiumbeeld{max-width:640px}
.og-podiumbeeld{position:relative;display:grid;gap:var(--s4)}
.og-mensen,.og-kaart{display:block;width:100%;height:auto;overflow:visible}
.og-marinde{position:relative;margin:0;width:min(360px,80%);justify-self:center}
.og-foto{position:relative}
.og-marinde img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 30%}
.og-ring{position:absolute;left:-6%;top:-6%;width:112%;height:112%;overflow:visible}
.og-marinde figcaption{color:var(--framboos);font-size:var(--t-3);text-align:center;margin-top:var(--s5)}

.og.film .og-podium{height:100svh;overflow:hidden}
.og.film .og-binnen{height:100%;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s6);align-items:center;padding-top:var(--kop-h);padding-bottom:0}
.og.film .og-tekst{position:relative;height:min(520px,calc(100svh - var(--kop-h) - 96px))}
.og.film .og-blad{position:absolute;inset:var(--gids-h) 0 0 0;display:flex;flex-direction:column;justify-content:flex-start;padding:0}
.og.film .og-tekst > .gids{position:absolute;top:0;left:0;right:0}
.og.film .og-podiumbeeld{display:block;height:min(520px,calc(100svh - var(--kop-h) - 96px))}
.og.film .og-mensen,.og.film .og-kaart{position:absolute;inset:0;width:100%;height:100%}
.og.film .og-marinde{position:absolute;left:50%;top:50%;width:min(340px,70%);transform:translate(-50%,-55%)}

/* ---------- het slot: gratis beginnen (slot.js) ---------- */
.gb{position:relative;z-index:6;background:var(--papier);padding:var(--s7) 0}
.gb-binnen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s7);align-items:center}
.gb-vel{display:grid;gap:var(--s1);padding:var(--s5) var(--s5) var(--s4);border-radius:4px;color:var(--petrol);text-decoration:none;transform:rotate(-2deg);box-shadow:0 24px 60px var(--diep-22);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.gb-vel:hover{transform:rotate(-.5deg) translateY(-4px) !important;box-shadow:0 30px 70px var(--diep-22)}
.gb-vel .hand{color:var(--framboos);font-size:var(--t-hand);line-height:1}
.gb-vel b{font-family:var(--f-kop);font-weight:800;font-size:var(--t-1);line-height:.95;letter-spacing:-.02em;font-variation-settings:"wdth" 78;text-wrap:balance}
.gb-vel-sub{font-size:var(--t-tekst);line-height:1.4;color:var(--petrol-zacht);max-width:30ch;text-wrap:balance}
.gb-teken{width:82%;height:auto;justify-self:center;margin-top:var(--s2);overflow:visible}
.gb h2{font-size:var(--t-2);line-height:1;letter-spacing:-.025em;font-weight:750;font-variation-settings:"wdth" 82,"opsz" 96;max-width:18ch;text-wrap:balance}
.gb-lede{font-size:var(--t-lede);line-height:1.5;max-width:40ch;margin-top:var(--s3);text-wrap:balance}
.gb-meta{font-size:var(--t-klein);color:var(--petrol-zacht);margin-top:var(--s2)}
.gb .knoppen{margin-top:var(--s4)}
.gb-kennis{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--mist-diep);display:grid;gap:var(--s1);max-width:44ch}
.gb-kennis-kop{font-family:var(--f-kop);font-weight:700;font-size:var(--t-3);line-height:1.15;font-variation-settings:"wdth" 86}
.gb-kennis-tekst{margin-top:var(--s1);font-size:var(--t-klein);line-height:1.5;color:var(--petrol-zacht);text-wrap:balance}
.gb-kennis .pijl-link{justify-self:start;margin-top:var(--s1)}
.gb-ook{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--t-klein)}
.gb-ook a{color:var(--petrol-zacht);text-underline-offset:4px}
.gb-ook a:hover{color:var(--framboos)}

/* ---------- de cijfers ---------- */
.vf{position:relative;z-index:6;background:var(--mist)}
.vf-podium{position:relative}
.vf-veld-wrap{position:relative;height:60vw;max-height:560px;margin:0 var(--rand)}
.vf-veld{width:100%;height:100%;overflow:visible}
.vf-foto{margin:var(--s3) var(--rand) 0}
.vf-foto img{width:100%;max-height:70vh;object-fit:cover;border-radius:8px}
.vf:not(.film) .vf-podium{display:flex;flex-direction:column}
.vf:not(.film) .vf-binnen{order:-1;padding-bottom:var(--s3)}
.vf:not(.film) .vf-veld-wrap{order:0;margin:0 auto;width:min(1176px,calc(100% - 2 * var(--rand)))}
.vf:not(.film) .vf-foto{order:1;margin-bottom:var(--s7)}
.vf-binnen{padding-top:var(--s7);padding-bottom:var(--s7)}
.vf-blad{padding:var(--s3) 0}
.vf-kop{font-size:var(--t-1);line-height:.94;letter-spacing:-.03em;font-weight:750;font-variation-settings:"wdth" 80,"opsz" 96;max-width:14ch}
.vf-getal{display:grid;line-height:.85}
.vf-getal span{font-family:var(--f-kop);font-weight:600;font-size:var(--t-3);color:var(--petrol-zacht);margin-bottom:var(--s1)}
.vf-getal b{font-family:var(--f-kop);font-weight:750;font-size:var(--t-display);letter-spacing:-.04em;font-variation-settings:"wdth" 76,"opsz" 96;font-variant-numeric:tabular-nums}
.vf-zin{font-family:var(--f-kop);font-weight:700;font-size:var(--t-3);line-height:1.12;font-variation-settings:"wdth" 86;max-width:16ch;margin-top:var(--s2);text-wrap:balance}
.vf-legenda span{display:inline-flex;align-items:center;gap:var(--s1);white-space:nowrap}
.vf-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);font-size:var(--t-klein);color:var(--petrol-zacht);margin-top:var(--s3)}
.stip-vol,.stip-open{flex:none;display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--petrol)}
.stip-open{background:none;box-shadow:inset 0 0 0 1.7px var(--petrol)}
.vf-groot{font-family:var(--f-kop);font-weight:750;font-size:var(--t-2);line-height:1.02;letter-spacing:-.02em;font-variation-settings:"wdth" 82;max-width:17ch;text-wrap:balance}
.vf-licht .knoppen{margin-top:var(--s4)}
.vf-bron{font-size:var(--t-label);line-height:1.45;color:var(--petrol-zacht);max-width:60ch;margin-top:var(--s3);text-wrap:balance}

.vf.film .vf-podium{height:100svh;overflow:hidden}
.vf.film .vf-veld-wrap{position:absolute;top:calc(var(--kop-h) + var(--s5));bottom:var(--s7);right:var(--rand);left:46%;height:auto;max-height:none;margin:0}
.vf.film .vf-foto{display:block;position:absolute;inset:0;z-index:3;margin:0;clip-path:circle(0px at 50% 50%)}
.vf.film .vf-foto img{width:100%;height:100%;max-height:none;border-radius:0;object-fit:cover}
.vf.film .vf-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--diep-85) 0%,var(--diep-35) 45%,var(--diep-0) 75%)}
.vf.film .vf-binnen{position:relative;z-index:4;height:100%;padding-top:var(--kop-h);padding-bottom:0;display:grid;align-items:center}
.vf.film .vf-tekst{position:relative;width:min(560px,44%);height:min(560px,calc(100svh - var(--kop-h) - 120px))}
.vf.film .vf-blad{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0}
.vf.film .vf-blad:not(.vf-licht){top:var(--gids-h);justify-content:flex-start}
.vf.film .vf-licht{color:var(--papier)}
.vf.film .vf-bron{position:absolute;left:var(--rand);right:var(--rand);bottom:var(--s3);margin:0}

@media (max-width:900px){
  .gb{padding:var(--s7) 0}
  .gb-binnen{grid-template-columns:1fr;gap:var(--s6)}
  .gb-vel{padding:var(--s4) var(--s3) var(--s3);margin:0 var(--s1)}
  .og.film .og-binnen{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:var(--s3);padding-top:calc(var(--kop-h) + var(--s3))}
  .og.film .og-podiumbeeld{order:-1;height:34svh}
  .og.film .og-tekst{height:calc(66svh - var(--kop-h) - var(--s3) * 3)}
  .og.film .og-marinde{width:min(200px,52%)}
  .og.film .og-marinde figcaption{font-size:var(--t-tekst);margin-top:var(--s3);white-space:nowrap}
  .og-getal b{font-size:var(--t-display)}
  .zt{padding:var(--s7) 0}
  .zt-binnen{grid-template-columns:1fr;gap:var(--s4)}
  .zt-intro{position:static}
  .zt-kaart{padding:var(--s3);min-height:0}
  .zt-optie{grid-template-columns:56px 1fr 16px;font-size:var(--t-klein);padding:var(--s2) var(--s1) var(--s2) 0}
  .zt-glyph{width:56px;height:32px}
  .pf:not(.film) .pf-pijlerlijst{display:grid}
  .pf.film .pf-binnen{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:var(--s3);padding-top:calc(var(--kop-h) + var(--s3))}
  .pf.film .pf-baan{order:-1}
  .pf.film .pf-tekst{height:calc(100svh - var(--kop-h) - (100vw - 2 * var(--rand)) * .95 - var(--s3) * 3)}
  .pf.film .pf h2,.pf.film h2{font-size:var(--t-1)}
  .pf-zin{font-size:var(--t-3)}
  .pf-citaat blockquote{font-size:var(--t-3)}
  .hero-podium > .gids{left:auto;right:var(--rand);transform:none}
  .logowand{grid-template-columns:repeat(4,minmax(0,1fr))}   /* 8 logo's: 2 rijen van 4 */
  .logowand li{height:96px}
  .sf.film .sf-fotos{width:100%;height:calc(38svh + var(--kop-h));bottom:auto}
  .sf.film .sf-binnen{grid-template-columns:1fr;align-items:start;padding-top:calc(var(--kop-h) + 38svh + var(--s3))}
  .sf.film .sf-tekst{height:calc(62svh - var(--kop-h) - var(--s7));margin:0}
  .sf-zin{font-size:var(--t-3)}
  .sf-inzicht{font-size:var(--t-3)}
  .sf.film .sf-teken{max-width:220px}
  .vf.film .vf-veld-wrap{left:var(--rand);right:var(--rand);top:calc(var(--kop-h) + var(--s3));bottom:auto;height:40svh}
  .vf.film .vf-binnen{align-items:start;padding-top:calc(var(--kop-h) + 40svh + var(--s5))}
  .vf.film .vf-tekst{width:100%;height:calc(60svh - var(--kop-h) - var(--s8))}
  .vf.film .vf-blad{justify-content:flex-start}
  .vf.film .vf-kop{font-size:var(--t-1)}
  .vf.film .vf-getal b{font-size:var(--t-display)}
  .vf.film .vf-licht{top:calc(-40svh - var(--s5) + var(--s3));bottom:auto;justify-content:flex-start}
  .vf.film .vf-foto img{object-position:72% 50%}
  .vf.film .vf-foto::after{background:linear-gradient(180deg,var(--diep-85) 0%,var(--diep-55) 38%,var(--diep-0) 60%)}
  .sf-fotos{grid-template-columns:1fr;padding-top:var(--s5)}
}

/* ================= Veelgestelde vragen (14 okt) =================
   Rustig blok op petrol tussen Voor organisaties (mist) en het slot (papier).
   Links de kop met Marinde als aanspreekpunt, rechts de vragen als lijst met lijnen ertussen. */
.vr{position:relative;z-index:6;padding:var(--s8) 0}
.vr-binnen{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s7);align-items:start}
.vr-intro{position:sticky;top:calc(var(--kop-h) + var(--s5))}
.vr h2{font-size:var(--t-2);line-height:1;letter-spacing:-.025em;font-weight:750;font-variation-settings:"wdth" 82,"opsz" 96;max-width:16ch;color:var(--papier)}
.vr-lede{font-size:var(--t-lede);line-height:1.5;max-width:30ch;margin-top:var(--s3);color:var(--op-donker)}
.vr-marinde{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);align-items:center;margin-top:var(--s5)}
.vr-foto,.voet-foto{position:relative}
.vr-foto img,.voet-foto img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 30%}
.vr-ring,.voet-ring{position:absolute;left:-8%;top:-8%;width:116%;height:116%;overflow:visible;pointer-events:none}
.vr-naam{color:var(--blush);font-size:var(--t-3);line-height:1;margin-bottom:var(--s1)}
.vr-marinde a{color:var(--papier);text-decoration:none;font-size:var(--t-klein);border-bottom:2px solid transparent;transition:border-color .2s}
.vr-marinde a:hover{border-color:var(--framboos)}
.vr-marinde p+p{margin-top:2px}

.vr-lijst{border-top:1px solid var(--lijn-donker)}
.vr-vraag{border-bottom:1px solid var(--lijn-donker)}
.vr-vraag summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 32px;gap:var(--s3);align-items:center;padding:var(--s3) 0;font-family:var(--f-kop);font-weight:700;font-size:var(--t-lede);line-height:1.2;letter-spacing:-.01em;font-variation-settings:"wdth" 88;color:var(--papier);text-wrap:balance;transition:color .2s}
.vr-vraag summary::-webkit-details-marker{display:none}
.vr-vraag summary::after{content:"";width:32px;height:32px;border-radius:50%;justify-self:end;
  background:linear-gradient(var(--papier),var(--papier)) center/14px 2.5px no-repeat,linear-gradient(var(--papier),var(--papier)) center/2.5px 14px no-repeat;
  box-shadow:inset 0 0 0 2px var(--lijn-donker-sterk);transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .2s,box-shadow .2s}
.vr-vraag summary:hover{color:var(--blush)}
.vr-vraag summary:hover::after{box-shadow:inset 0 0 0 2px var(--framboos)}
.vr-vraag[open] summary::after{transform:rotate(45deg);background-color:var(--framboos-knop);box-shadow:inset 0 0 0 2px var(--framboos-knop)}
.vr-antwoord{padding:0 var(--s6) var(--s4) 0;overflow:hidden}
.vr-antwoord p{font-size:var(--t-tekst);line-height:1.6;color:var(--op-donker);max-width:52ch;text-wrap:balance}
.vr-antwoord .pijl-link{margin-top:var(--s2);color:var(--papier)}
.vr-antwoord .pijl-link:hover{color:var(--blush)}


@media (max-width:900px){
  .vr{padding:var(--s7) 0}
  .vr-binnen{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .vr-intro{position:static}
  .vr-antwoord{padding-right:0}
}
@media (max-width:560px){
}

/* Herken je dit?: wat je dan doet, onder wat er eigenlijk speelt */
.sf-doe-label{margin-top:var(--s3)}
.sf-doe{font-size:var(--t-tekst);font-weight:600;line-height:1.4;max-width:34ch;text-wrap:balance}
.sf-doe span{font-style:italic}
.sf.film .sf-teken{max-width:250px;margin-bottom:var(--s1)}
.sf.film .sf-speelt .hand{margin-bottom:0}
.sf.film .sf-doe-label{margin-top:var(--s2)}
.sf.film .sf-teken{max-width:min(250px, calc((100svh - 520px) * 1.32))}
.sf.film .sf-doe-label{margin-top:var(--s3)}

/* de verwijzing naar de leiderschapsscan, op de plek van de oude zelftest */
.sw{padding:var(--s7) 0}
.sw-binnen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s6);align-items:end}
.sw-hand{color:var(--blush);font-size:var(--t-hand);margin-bottom:var(--s1)}
.sw-lede{max-width:30ch}
@media (max-width:900px){.sw-binnen{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}