/* Bureau van Invloed, merk 2026: tokens en basis.
   Bron van het merk: 00_BRAIN/merk-identiteit/brand-identity-2026.html */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:75% 100%;font-display:swap;src:url(fonts/bricolage-grotesque.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans.woff2) format('woff2')}
@font-face{font-family:'Caveat Brush';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/caveat-brush.woff2) format('woff2')}

:root{
  --petrol:#16303E; --petrol-diep:#0E2029; --petrol-zacht:#3D5A69;
  --framboos:#DB3F62; --framboos-knop:#D33A5D; --framboos-diep:#B5304F; --blush:#FFD9DF;
  --mist:#E3EBEE; --mist-diep:#CBD8DD; --papier:#FBFCFB; --raster:#D3DEE2;
  --hout:#C99A6B;
  --f-kop:'Bricolage Grotesque',system-ui,sans-serif;
  --f-tekst:'Instrument Sans',system-ui,sans-serif;
  --f-hand:'Caveat Brush',cursive;
  /* ruimte: alles op deze schaal */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --rand:clamp(20px,4.5vw,72px);
  --kop-h:84px;
  --gloed-kleur:rgba(219,63,98,.2);
  --gloed:radial-gradient(1100px 600px at 85% 0%,var(--gloed-kleur),transparent 60%);
}
@media (max-width:900px){:root{--kop-h:68px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mist);color:var(--petrol);font-family:var(--f-tekst);font-size:var(--t-tekst);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--framboos);outline-offset:3px;border-radius:4px}
.binnen{max-width:1320px;margin:0 auto;padding:0 var(--rand)}
.sla-over{position:absolute;left:var(--s2);top:-80px;z-index:200;background:var(--petrol);color:var(--papier);padding:var(--s2) var(--s2);border-radius:999px;text-decoration:none;font-weight:600}
.sla-over:focus{top:var(--s2)}

/* flip-overpapier: het raster waar alles op getekend wordt */
.papier{background-color:var(--papier);background-image:linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
.donker{background:var(--gloed),linear-gradient(170deg,var(--petrol),var(--petrol-diep));color:var(--papier)}

h1,h2,h3{font-family:var(--f-kop);font-weight:800;letter-spacing:-.02em;margin:0;font-variation-settings:"wdth" 80;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.hand{font-family:var(--f-hand);font-weight:400;letter-spacing:0}

/* knoppen */
.knoppen{display:flex;flex-wrap:wrap;gap:var(--s2)}
.knop{display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s2) var(--s3);border-radius:999px;font-weight:700;font-size:var(--t-klein);line-height:1.1;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background-color .2s,box-shadow .2s,color .2s,transform .2s}
.knop.hoofd{background:var(--framboos-knop);color:var(--wit)}  /* een tik dieper dan het logo: wit erop haalt zo 4,6:1 */
.knop.hoofd:hover{background:var(--framboos-diep);transform:translateY(-1px)}
.knop.lijn{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.knop.lijn:hover{background:var(--petrol);color:var(--papier);box-shadow:inset 0 0 0 2px var(--petrol)}
.donker .knop.lijn:hover{background:var(--papier);color:var(--petrol);box-shadow:inset 0 0 0 2px var(--papier)}
.knop svg{width:18px;height:18px;flex:none}

/* tekstlink met een getekende streep eronder */
.pijl-link{display:inline-flex;align-items:center;gap:var(--s1);font-weight:700;text-decoration:none;border-bottom:2px solid var(--framboos);padding-bottom:2px}
.pijl-link:hover{color:var(--framboos)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* =====================================================================
   DE BASISLIJN (16 okt 2026)
   Alles wat een nieuwe pagina nodig heeft. Nieuwe css gebruikt alleen deze tokens:
   geen losse px voor afstanden, geen losse lettergroottes, geen losse kleuren.
   _controle.py weigert de bouw als dat toch gebeurt. Uitleg en voorbeelden: /basis/
   ===================================================================== */
:root{
  /* letters: acht stappen, meer niet */
  --t-display:clamp(3rem,1rem + 5.8vw,8.2rem);   /* hero en grote slotzinnen */
  --t-1:clamp(2.4rem,1.2rem + 3vw,4.4rem);       /* kop van een verhaal */
  --t-2:clamp(2rem,1.1rem + 2.2vw,3.4rem);       /* kop van een gewoon blok */
  --t-3:clamp(1.4rem,1.05rem + 1.2vw,2.2rem);    /* subkop, kaartkop, vraag */
  --t-lede:clamp(1.1rem,1rem + .4vw,1.3rem);      /* de zin onder een kop */
  --t-tekst:18px;                                /* lopende tekst */
  --t-klein:16px;                                /* ondersteunend, nooit kleiner */
  --t-label:14px;                                /* labels, kapitalen, bron; de ondergrens */
  --t-hand:clamp(1.5rem,1.3rem + .5vw,1.8rem);   /* handschrift, Caveat Brush */
  --r-kop:.95; --r-tekst:1.55;                   /* regelhoogte */

  /* afstanden: s0 en s1 tot en met s8 hierboven, op een eenheid van 8 */
  --s0:4px;
  /* het raster */
  --breed:1320px;                                /* buitenmaat van .binnen */
  --maat:62ch;                                   /* leesbreedte van lopende tekst */
  --maat-kop:18ch;                               /* breedte van een kop */
  --goot:var(--s4);                              /* ruimte tussen kolommen */
  --blok:var(--s8);                              /* boven en onder een blok */
  --blok-compact:var(--s7);

  /* kleuren met doorzicht: op donker en op licht */
  --op-donker:rgba(251,252,251,.86);             /* tekst op petrol */
  --op-donker-zacht:rgba(251,252,251,.7);        /* bron, label op petrol */
  --lijn-donker:rgba(251,252,251,.16);           /* lijn tussen rijen op petrol */
  --lijn-licht:rgba(22,48,62,.16);               /* lijn tussen rijen op licht */
  --vlak-donker:rgba(251,252,251,.06);           /* kaart op petrol */
  --schaduw:0 24px 60px rgba(14,32,41,.22);
  --wit:#fff; --zwart:#000; --zwart-50:rgba(0,0,0,.45); --mist-licht:#F1F5F6;
  --lijn-donker-sterk:rgba(251,252,251,.3);      /* rand van een knop of vak op petrol */
  --op-donker-vol:rgba(251,252,251,.92);         /* bijna wit op petrol */
  /* petrol diep met doorzicht: schaduwen en sluiers */
  --diep-0:rgba(14,32,41,0); --diep-12:rgba(14,32,41,.12); --diep-22:rgba(14,32,41,.24);
  --diep-35:rgba(14,32,41,.4); --diep-55:rgba(14,32,41,.55); --diep-85:rgba(14,32,41,.85);
}
@media (max-width:900px){:root{--goot:var(--s3);--blok:var(--s7);--blok-compact:var(--s6)}}
@media (max-width:560px){:root{--goot:var(--s2)}}
/* breekpunten: alleen 560 (telefoon), 900 (tablet) en 1100 (klein scherm) */

.pagina main{padding-top:var(--kop-h)}   /* op de andere pagina's staat de vaste kop boven het eerste blok */

/* ---------- blokken: elk blok is een <section class="blok vlak-..."> ---------- */
.blok{position:relative;z-index:6;padding:var(--blok) 0}
.blok.compact{padding:var(--blok-compact) 0}
.vlak-mist{background:var(--mist);color:var(--petrol)}
.vlak-papier{background:var(--papier);color:var(--petrol)}
.vlak-raster{color:var(--petrol)}          /* combineren met .papier: het flip-overvel */
.vlak-donker{background:var(--gloed),linear-gradient(170deg,var(--petrol),var(--petrol-diep));color:var(--papier)}

/* ---------- het raster: 12 kolommen, één goot ---------- */
.raster-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--goot);row-gap:var(--s5)}
.k-3{grid-column:span 3}.k-4{grid-column:span 4}.k-5{grid-column:span 5}.k-6{grid-column:span 6}
.k-7{grid-column:span 7}.k-8{grid-column:span 8}.k-12{grid-column:1 / -1}
@media (max-width:900px){.k-3,.k-4{grid-column:span 6}.k-5,.k-6,.k-7,.k-8{grid-column:1 / -1}}
@media (max-width:560px){.k-3,.k-4{grid-column:1 / -1}}
.rijen > *{border-top:1px solid var(--lijn-licht);padding:var(--s3) 0}   /* lijntjes tussen rijen */
.rijen > :last-child{border-bottom:1px solid var(--lijn-licht)}
.vlak-donker .rijen > *{border-color:var(--lijn-donker)}

/* ---------- typografie ---------- */
.t-display{font-family:var(--f-kop);font-weight:750;font-size:var(--t-display);line-height:.9;letter-spacing:-.03em;font-variation-settings:"wdth" 80,"opsz" 96}
.t-1{font-size:var(--t-1);line-height:var(--r-kop);letter-spacing:-.03em;font-weight:750;font-variation-settings:"wdth" 80,"opsz" 96;max-width:var(--maat-kop)}
.t-2{font-size:var(--t-2);line-height:1;letter-spacing:-.025em;font-weight:750;font-variation-settings:"wdth" 82,"opsz" 96;max-width:var(--maat-kop)}
.t-3{font-family:var(--f-kop);font-size:var(--t-3);line-height:1.12;letter-spacing:-.01em;font-weight:700;font-variation-settings:"wdth" 88}
.t-lede{font-size:var(--t-lede);line-height:1.5;max-width:44ch;text-wrap:balance}
.t-tekst{font-size:var(--t-tekst);line-height:var(--r-tekst);max-width:var(--maat)}
.t-klein{font-size:var(--t-klein);line-height:1.5}
.t-label{font-size:var(--t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.t-hand{font-family:var(--f-hand);font-size:var(--t-hand);line-height:1;color:var(--framboos)}
.vlak-donker .t-hand{color:var(--blush)}
.vlak-donker .t-lede,.vlak-donker .t-tekst{color:var(--op-donker)}
.zacht{color:var(--petrol-zacht)} .vlak-donker .zacht{color:var(--op-donker-zacht)}
* + .t-lede,* + .t-tekst{margin-top:var(--s3)} .blok * + .knoppen{margin-top:var(--s4)}
h1,h2,h3,.t-lede,.t-3,.t-tekst,.t-klein{text-wrap:balance}   /* R14: geen staartjes */
.t-hand + h1,.t-hand + h2,.t-hand + .t-1,.t-hand + .t-2{margin-top:var(--s2)}
code{overflow-wrap:anywhere}

/* ---------- onderdelen ---------- */
.b-kaart{background:var(--papier);border-radius:8px;padding:var(--s5);box-shadow:var(--schaduw)}
.vlak-donker .b-kaart{background:var(--vlak-donker);border:1px solid var(--lijn-donker);box-shadow:none}
.b-feit .b-getal{font-family:var(--f-kop);font-weight:800;font-size:var(--t-display);line-height:.85;letter-spacing:-.04em;font-variation-settings:"wdth" 78}
.b-feit .b-getal + *{margin-top:var(--s2)}
.b-citaat{margin:0}
.b-citaat blockquote{margin:0;font-family:var(--f-kop);font-weight:700;font-size:var(--t-3);line-height:1.2;font-variation-settings:"wdth" 88;text-wrap:balance}
.b-citaat figcaption{margin-top:var(--s2);font-size:var(--t-klein);color:var(--petrol-zacht)}
.vlak-donker .b-citaat figcaption{color:var(--op-donker-zacht)}
.b-portret{position:relative;width:96px}
.b-portret img{width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 30%}
.b-portret svg{position:absolute;left:-8%;top:-8%;width:116%;height:116%;overflow:visible;pointer-events:none}
.b-foto{margin:0;border-radius:8px;overflow:hidden}
.b-foto img{width:100%;height:auto;display:block}     /* een foto staat op volle sterkte, nooit weggewassen achter tekst */

/* bronnen: een knop die de bronnen laat inschuiven, geen bronregel onder elk blok */
.bronnen{margin-top:var(--s4)}
.bronnen summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol-zacht)}
.bronnen summary::-webkit-details-marker{display:none}
.bronnen summary::before{content:"";width:var(--s3);height:var(--s3);border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;background:linear-gradient(currentColor,currentColor) center/10px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 10px no-repeat;transition:transform .3s}
.bronnen[open] summary::before{transform:rotate(45deg)}
.bronnen ol{margin:var(--s2) 0 0;padding-left:var(--s3);font-size:var(--t-klein);line-height:1.5;max-width:var(--maat)}
.vlak-donker .bronnen summary{color:var(--op-donker-zacht)} .vlak-donker .bronnen ol{color:var(--op-donker)}
img{height:auto}   /* les 14 okt: een img met width en height krijgt altijd height:auto */

/* ---------- de voet: op elke pagina dezelfde (verhuisd uit verhalen.css, 16 okt) ---------- */
.voet{position:relative;z-index:6;padding:var(--s7) 0 var(--s4)}
.voet a{color:inherit;text-decoration:none}
.voet-boven{display:flex;justify-content:space-between;align-items:end;gap:var(--s5);flex-wrap:wrap;padding-bottom:var(--s6);border-bottom:1px solid var(--lijn-donker)}
.voet-zin{font-family:var(--f-kop);font-weight:800;font-size:var(--t-2);line-height:.98;letter-spacing:-.025em;font-variation-settings:"wdth" 80;max-width:19ch;text-wrap:balance}
.voet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);padding:var(--s6) 0;border-bottom:1px solid var(--lijn-donker)}
.voet-kolom h2{font-family:var(--f-tekst);font-size:var(--t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blush);margin-bottom:var(--s3);font-variation-settings:normal}
.voet-kolom ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.voet-kolom a{font-size:var(--t-tekst);color:var(--op-donker);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.voet-kolom a:hover,.voet-onder a:hover{color:var(--papier);border-color:var(--framboos)}
.voet-marinde{display:grid;grid-template-columns:72px 1fr;gap:var(--s2);align-items:center;margin-bottom:var(--s3)}
.voet-naam{font-family:var(--f-kop);font-weight:700;font-size:var(--t-tekst);line-height:1.1;font-variation-settings:"wdth" 88}
.voet-rol{font-size:var(--t-klein);color:var(--op-donker-zacht);margin-top:2px}
.voet-onder{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s4);font-size:var(--t-klein);color:var(--op-donker-zacht)}
.voet-onder ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s4)}
.voet-onder a{border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
@media (max-width:900px){.voet-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.voet-contact{grid-column:1 / -1}}
@media (max-width:560px){.voet-grid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}.voet-boven .knoppen{width:100%}.voet-boven .knop{flex:1 1 100%;justify-content:center}}
.voet-foto{position:relative}
.voet-foto img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 30%}
.voet-ring{position:absolute;left:-8%;top:-8%;width:116%;height:116%;overflow:visible;pointer-events:none}

/* ---------- de scrollgids (gids.js): waar je bent in een verhaal ---------- */
:root{--gids-h:56px}
.gids{display:flex;align-items:center;gap:var(--s2);min-height:24px;font-size:var(--t-label);font-weight:600;line-height:1;color:var(--petrol);transition:opacity .3s}
.gids.is-weg{opacity:0}
.gids-balken{display:flex;gap:var(--s1);list-style:none;margin:0;padding:0}
.gids-balken li{width:44px;height:4px;border-radius:2px;background:var(--lijn-licht);overflow:hidden}
.gids-balken i{display:block;height:100%;background:var(--framboos);transform-origin:0 50%;transform:scaleX(0)}
.gids-tel{font-variant-numeric:tabular-nums}
.gids-hint{display:none;align-items:center;gap:var(--s1);color:var(--petrol-zacht)}
.gids.met-hint .gids-hint{display:inline-flex}
.gids.met-hint .gids-tel{display:none}
.gids-hint svg{animation:gids-pijl 1.6s ease-in-out infinite}
@keyframes gids-pijl{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ---------- formulier: een aanvraag naar /api/aanvraag (assets/aanvraag.js) ---------- */
.formulier{display:grid;gap:var(--s2)}
.formulier .twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.formulier label{display:grid;gap:var(--s1);align-content:start;font-size:var(--t-klein);font-weight:700}
.formulier label small{font-weight:400;color:var(--petrol-zacht);font-size:var(--t-label)}
.formulier input:not([type=checkbox]),.formulier textarea{width:100%;font:inherit;font-weight:400;font-size:var(--t-tekst);padding:var(--s2) var(--s2);border-radius:8px;border:2px solid var(--lijn-licht);background:var(--wit);color:var(--petrol)}
.formulier input:focus,.formulier textarea:focus{outline:none;border-color:var(--petrol)}
.formulier .akkoord{display:flex;gap:var(--s1);align-items:flex-start;font-weight:400}
.formulier .akkoord input{margin-top:var(--s0);width:var(--s3);height:var(--s3);accent-color:var(--framboos-knop);flex:none}
.formulier .knop{justify-self:start;margin-top:var(--s1)}
.formulier .knop[disabled]{opacity:.6;cursor:wait}
.formulier .robot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier .melding{font-size:var(--t-klein);min-height:var(--s3);color:var(--framboos-diep)}
.vlak-donker .formulier label small{color:var(--op-donker-zacht)}
.vlak-donker .formulier input:not([type=checkbox]),.vlak-donker .formulier textarea{border-color:var(--lijn-donker-sterk);background:var(--petrol-diep);color:var(--papier)}
.vlak-donker .formulier input:focus{border-color:var(--papier)}
.vlak-donker .formulier .melding{color:var(--blush)}
.klaar-blok[hidden]{display:none}
@media (max-width:560px){.formulier .twee{grid-template-columns:minmax(0,1fr)}}

/* de nieuwsbrief in de voet, op elke pagina */
.voet-brief{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:start;padding:var(--s6) 0;border-bottom:1px solid var(--lijn-donker)}
.voet-brief-kop{font-family:var(--f-kop);font-weight:800;font-size:var(--t-3);line-height:1.05}
.voet-brief-tekst p:not(.voet-brief-kop),.voet-brief .klaar-blok p:not(.voet-brief-kop){margin-top:var(--s2);color:var(--op-donker-zacht)}
.voet-brief .formulier input:not([type=checkbox]){background:var(--papier)}
.voet-brief-klein{font-size:var(--t-klein);color:var(--op-donker-zacht)}
.voet-brief .formulier .melding{color:var(--blush)}
@media (max-width:900px){.voet-brief{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.voet-brief .formulier .twee{grid-template-columns:minmax(0,1fr)}}

/* een zin van Marinde zelf, in haar handschrift */
.zin-van-marinde{display:block;margin-top:var(--s3);font-size:var(--t-3);max-width:var(--maat-kop);text-wrap:balance}
.zin-van-marinde.lang{max-width:var(--maat);font-size:var(--t-hand)}

/* naden: waar twee vlakken elkaar raken, loopt de rand organisch, geen rechte streep.
   Elke naad heeft een eigen, onregelmatige rand en een getekende stiftlijn die er net niet netjes overheen loopt.
   De bocht staat in een eigen strook (--naad, als rand in de kleur van het vorige vlak), zodat hij geen ruimte van de inhoud afpakt.
   Na de hero niet: die eindigt al in petrol, net als de logo's. */
:root{--naad:var(--s5);--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 22.2C12 23.2 158 28.4 273 28.5C389 28.5 509 22.3 651 22.4C793 22.6 1028 29.6 1125 29.5C1222 29.3 1213 22.9 1231 21.4C1249 19.9 1231 20.1 1234 20.6C1236 21.1 1206 25.2 1247 24.5C1288 23.8 1441 17.6 1480 16.3V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-55 15.2C-38 16.8 -80 23.4 46 24.5C172 25.5 558 21.3 702 21.4C846 21.4 855 23.8 910 24.7C964 25.6 975 27.8 1028 26.8C1081 25.8 1194 20.0 1228 18.7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");--naad-stift:var(--petrol-zacht)}
@media (max-width:560px){:root{--naad:var(--s4)}}
main>[data-vlak]:nth-child(8n+2){--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 22.2C12 23.2 158 28.4 273 28.5C389 28.5 509 22.3 651 22.4C793 22.6 1028 29.6 1125 29.5C1222 29.3 1213 22.9 1231 21.4C1249 19.9 1231 20.1 1234 20.6C1236 21.1 1206 25.2 1247 24.5C1288 23.8 1441 17.6 1480 16.3V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-55 15.2C-38 16.8 -80 23.4 46 24.5C172 25.5 558 21.3 702 21.4C846 21.4 855 23.8 910 24.7C964 25.6 975 27.8 1028 26.8C1081 25.8 1194 20.0 1228 18.7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
main>[data-vlak]:nth-child(8n+3){--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 21.1C-13 22.5 12 30.1 120 29.7C229 29.3 503 20.3 610 18.7C717 17.1 723 20.4 763 20.2C804 20.0 766 17.7 853 17.6C939 17.5 1181 20.3 1285 19.6C1390 18.9 1448 14.4 1480 13.3V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M191 28.6C258 27.1 528 21.8 597 20.0C666 18.2 561 18.5 603 17.8C644 17.0 781 15.3 843 15.4C906 15.4 920 17.2 976 18.0C1032 18.8 1129 20.1 1177 20.4C1226 20.7 1251 20.1 1265 20.0' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
main>[data-vlak]:nth-child(8n+4){--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 42.0C126 40.3 772 33.9 958 32.0C1144 30.0 1011 34.8 1075 30.5C1140 26.1 1279 5.7 1347 6.0C1414 6.3 1458 27.7 1480 32.0V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M75 42.1C95 42.0 173 42.0 195 41.6C217 41.2 179 40.4 208 39.9C236 39.4 329 39.1 365 38.8C400 38.4 318 39.5 422 37.8C526 36.1 895 30.3 990 28.8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
main>[data-vlak]:nth-child(8n+5){--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 25.4C35 23.8 322 17.7 408 15.9C495 14.0 454 14.4 478 14.3C503 14.1 420 10.4 555 14.8C691 19.3 1167 39.9 1291 40.8C1415 41.8 1276 23.8 1299 20.4C1322 17.0 1399 19.4 1429 20.6C1460 21.8 1472 26.3 1480 27.4V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-22 22.7C13 22.8 132 23.6 184 23.1C236 22.6 184 18.9 290 19.5C396 20.2 720 26.3 820 27.0C919 27.8 873 24.0 885 23.8C897 23.6 870 24.3 892 25.6C915 27.0 993 30.7 1019 31.9C1045 33.2 1008 31.9 1049 32.9C1090 33.9 1229 37.1 1264 38.0' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
main>[data-vlak]:nth-child(8n+6){--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 19.9C-23 21.2 3 26.8 59 28.0C115 29.1 152 28.3 296 26.9C440 25.4 747 19.6 924 19.5C1102 19.3 1270 25.4 1363 26.2C1456 26.9 1460 24.2 1480 23.8V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M117 25.7C136 26.1 195 28.0 233 27.8C270 27.6 308 25.0 342 24.8C377 24.5 423 26.6 440 26.2C458 25.9 375 23.9 448 22.5C520 21.2 802 19.1 874 18.3C946 17.5 836 17.4 879 17.7C922 18.1 1091 20.0 1134 20.4' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
main>[data-vlak]:nth-child(8n+7){--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 17.5C-3 17.3 124 14.0 180 16.4C235 18.7 259 29.7 293 31.8C328 33.8 307 28.9 387 28.5C467 28.1 689 29.0 772 29.5C855 29.9 847 29.9 883 31.1C919 32.3 890 37.9 989 36.7C1089 35.6 1398 26.2 1480 24.1V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M128 18.1C178 19.9 378 27.3 432 28.9C486 30.5 448 28.1 453 27.8C458 27.6 422 27.4 460 27.5C498 27.6 567 27.5 681 28.4C794 29.3 1057 32.5 1143 32.7C1230 32.9 1142 31.3 1199 29.4C1257 27.5 1441 22.5 1489 21.1' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
main>[data-vlak]:nth-child(8n+8){--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 24.8C24 24.8 235 26.1 347 24.9C459 23.8 545 18.0 630 17.9C715 17.8 789 23.0 858 24.3C927 25.6 938 26.8 1042 25.7C1146 24.7 1407 19.3 1480 18.0V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-26 22.4C-7 22.4 64 22.5 87 22.5C110 22.6 105 22.8 113 23.0C121 23.1 77 23.9 136 23.5C194 23.1 381 21.1 462 20.4C543 19.7 534 18.5 621 19.3C709 20.1 890 24.9 988 25.1C1086 25.4 1145 22.2 1210 20.8C1276 19.5 1355 17.6 1383 16.9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
main>[data-vlak]:nth-child(8n+9){--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 36.8C-25 34.9 12 28.8 50 25.5C87 22.2 142 16.7 184 17.0C227 17.3 226 26.5 306 27.3C385 28.0 511 24.5 662 21.5C814 18.5 1097 9.4 1215 9.4C1333 9.4 1327 19.5 1371 21.3C1415 23.0 1462 20.1 1480 19.8V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M250 21.4C285 21.7 409 22.4 462 23.1C516 23.8 533 25.6 570 25.5C606 25.3 647 23.3 682 22.4C717 21.4 761 20.3 780 19.7C800 19.1 750 19.6 798 18.8C847 18.1 1027 16.5 1073 15.0C1120 13.6 1059 11.1 1079 10.1C1098 9.2 1171 9.3 1189 9.2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.voet{--naad-vorm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M-40 25.4C70 24.7 415 21.9 618 21.0C820 20.1 1059 22.0 1176 20.1C1293 18.3 1278 11.7 1320 9.8C1363 8.0 1406 7.1 1433 8.9C1460 10.8 1472 18.9 1480 20.9V48H-40Z'/%3E%3C/svg%3E");--naad-lijn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M228 26.1C250 25.6 335 23.8 359 23.0C384 22.2 370 21.1 374 21.3C377 21.5 376 24.6 381 24.4C386 24.2 361 20.9 405 19.9C449 18.9 601 18.6 645 18.3C688 18.1 639 17.7 666 18.4C693 19.1 749 22.4 807 22.5C864 22.5 979 19.1 1013 18.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
[data-vlak=mist]{--naad-vlak:var(--mist)}
[data-vlak=papier]{--naad-vlak:var(--papier)}
[data-vlak=donker]{--naad-vlak:radial-gradient(1100px 600px at 85% var(--naad),var(--gloed-kleur),transparent 60%),var(--petrol)}
[data-vlak=raster],.papier{--naad-vlak:linear-gradient(var(--raster) 1px,transparent 1px) -1px calc(var(--naad) - 1px)/32px 32px,linear-gradient(90deg,var(--raster) 1px,transparent 1px) -1px 0/32px 32px,var(--papier)}
main>[data-vlak=mist]:not(.hero)+[data-vlak]:not([data-vlak=mist]){--naad-voor:var(--mist)}
main>[data-vlak=papier]+[data-vlak]:not([data-vlak=papier]){--naad-voor:var(--papier)}
main>[data-vlak=raster]+[data-vlak]:not([data-vlak=raster]){--naad-voor:var(--papier)}
main>[data-vlak=donker]+[data-vlak]:not([data-vlak=donker]){--naad-voor:var(--petrol-diep)}
main:has(>section[data-vlak=papier]:last-of-type)+.voet{--naad-voor:var(--papier)}
main:has(>section[data-vlak=mist]:last-of-type)+.voet{--naad-voor:var(--mist)}
:is(
  main>[data-vlak=mist]:not(.hero)+[data-vlak]:not([data-vlak=mist]),
  main>[data-vlak=papier]+[data-vlak]:not([data-vlak=papier]),
  main>[data-vlak=raster]+[data-vlak]:not([data-vlak=raster]),
  main>[data-vlak=donker]+[data-vlak]:not([data-vlak=donker]),
  main:has(>section[data-vlak]:last-of-type:not([data-vlak=donker]))+.voet
){position:relative;z-index:7;border-top:var(--naad) solid var(--naad-voor);background-clip:padding-box}
:is(
  main>[data-vlak=mist]:not(.hero)+[data-vlak]:not([data-vlak=mist]),
  main>[data-vlak=papier]+[data-vlak]:not([data-vlak=papier]),
  main>[data-vlak=raster]+[data-vlak]:not([data-vlak=raster]),
  main>[data-vlak=donker]+[data-vlak]:not([data-vlak=donker]),
  main:has(>section[data-vlak]:last-of-type:not([data-vlak=donker]))+.voet
)::before,:is(
  main>[data-vlak=mist]:not(.hero)+[data-vlak]:not([data-vlak=mist]),
  main>[data-vlak=papier]+[data-vlak]:not([data-vlak=papier]),
  main>[data-vlak=raster]+[data-vlak]:not([data-vlak=raster]),
  main>[data-vlak=donker]+[data-vlak]:not([data-vlak=donker]),
  main:has(>section[data-vlak]:last-of-type:not([data-vlak=donker]))+.voet
)::after{content:"";position:absolute;left:0;right:0;top:calc(var(--naad) * -1);height:var(--naad);pointer-events:none}
:is(
  main>[data-vlak=mist]:not(.hero)+[data-vlak]:not([data-vlak=mist]),
  main>[data-vlak=papier]+[data-vlak]:not([data-vlak=papier]),
  main>[data-vlak=raster]+[data-vlak]:not([data-vlak=raster]),
  main>[data-vlak=donker]+[data-vlak]:not([data-vlak=donker]),
  main:has(>section[data-vlak]:last-of-type:not([data-vlak=donker]))+.voet
)::before{z-index:1;top:calc(var(--naad) * -1 + 1px);background:var(--naad-vlak);-webkit-mask:var(--naad-vorm) 0 0/100% 100% no-repeat;mask:var(--naad-vorm) 0 0/100% 100% no-repeat}
:is(
  main>[data-vlak=mist]:not(.hero)+[data-vlak]:not([data-vlak=mist]),
  main>[data-vlak=papier]+[data-vlak]:not([data-vlak=papier]),
  main>[data-vlak=raster]+[data-vlak]:not([data-vlak=raster]),
  main>[data-vlak=donker]+[data-vlak]:not([data-vlak=donker]),
  main:has(>section[data-vlak]:last-of-type:not([data-vlak=donker]))+.voet
)::after{z-index:2;background:var(--naad-stift);-webkit-mask:var(--naad-lijn) 0 0/100% 100% no-repeat;mask:var(--naad-lijn) 0 0/100% 100% no-repeat}

/* kringen op de naad: mensen die half in het ene en half in het andere vlak staan, jij in framboos stapt over */
.kringen{position:absolute;z-index:3;top:calc(var(--naad) * -.5);right:var(--rand);width:clamp(120px,13vw,190px);transform:translateY(-50%);pointer-events:none}
.kringen.links{right:auto;left:var(--rand)}
.kringen svg{display:block;width:100%;height:auto;overflow:visible}
.kringen .ring{fill:none;stroke:var(--petrol-zacht);stroke-width:2.5;stroke-linecap:round}
.kringen .jij{fill:var(--framboos)}
.kringen .stap{fill:none;stroke:var(--framboos);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 7}