/* More by Default, homepage v3.
   Principe: niet meer design, maar beter design. De kleur zit in de karakters, de rust in de opmaak.
   Papier als basis, navy voor de demo en de afsluiting, lime alleen voor GO, paars voor de knop.
   Eén grid (kop links, inhoud rechts), één typeschaal, één radius-systeem (20 / 12 / pil). */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --ink:#030F35; --ink-2:#454B66; --ink-3:#757A90;
  --purple:#763FFD; --purple-deep:#5B2EE0; --purple-soft:#EFE8FF;
  --lime:#DBF714; --lime-press:#C8E40B; --lime-soft:#F3FAC2;
  --paper:#FDF9F7; --paper-2:#F4EFEB; --navy:#030F35;
  --line:rgba(3,15,53,.1); --line-2:rgba(3,15,53,.18);
  --r:20px; --r-s:12px;
  --max:1200px; --pad:clamp(20px,4vw,56px);
  --sp:clamp(88px,9vw,128px);
  --ease:cubic-bezier(.22,.8,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Figtree",ui-sans-serif,system-ui,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
.icon{width:1em;height:1em;flex:none}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- grid en ritme ---------- */
.wrap{max-width:calc(var(--max) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.sectie{padding-block:var(--sp)}
.sectie:not(.donker)+.sectie:not(.donker){padding-top:0}
.sectie:not(.donker)+.sectie:not(.donker)>.wrap>:first-child{padding-top:var(--sp)}
.sectie:not(.donker)+.sectie:not(.donker)>.wrap{position:relative}
.sectie:not(.donker)+.sectie:not(.donker)>.wrap::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--line)}
.sectie:not(.donker)+.sectie:not(.donker)>.wrap.twee>*{padding-top:var(--sp)}
.twee{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,7vw,120px);align-items:start}
.kop-rij{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,7vw,120px);align-items:end;margin-bottom:clamp(48px,5vw,72px)}
.plak{position:sticky;top:120px}

/* ---------- type ---------- */
.label{display:flex;gap:14px;font-size:14px;line-height:1.4;font-weight:600;color:var(--ink-2);margin-bottom:22px}
.label span{color:var(--ink-3);font-variant-numeric:tabular-nums}
h1{font-size:clamp(46px,5.7vw,84px);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
h1>span{display:block}
.h2{font-size:clamp(34px,3.5vw,52px);line-height:1.06;font-weight:800;letter-spacing:-.032em;max-width:16ch;text-wrap:balance}
.lead{font-size:clamp(18px,1.4vw,20px);line-height:1.55;color:var(--ink-2);max-width:44ch}
.h2+.lead{margin-top:24px}
.statement{font-size:clamp(30px,3.5vw,52px);line-height:1.16;font-weight:700;letter-spacing:-.028em;max-width:26ch;text-wrap:pretty}
.statement{font-weight:800}
.statement span{font-weight:500;color:var(--ink)}
.hl{position:relative;z-index:0;white-space:nowrap}
.hl::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.06em;top:.12em;bottom:.02em;background:var(--lime);border-radius:.12em;transform-origin:left center}
@media (prefers-reduced-motion:no-preference){.hl::before{animation:veeg .8s .3s var(--ease) both}}
@keyframes veeg{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:999px;border:0;background:var(--purple);color:#fff;font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,transform .12s}
.knop:hover{background:var(--purple-deep)}
.knop:active{transform:translateY(1px)}
.knop:disabled{opacity:.7;cursor:progress}
.knop-klein{height:42px;padding:0 18px;font-size:15px}
.tekstlink{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--ink);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.tekstlink .icon{width:16px;height:16px;transition:transform .25s var(--ease)}
.tekstlink:hover{text-decoration:underline;text-underline-offset:4px}
.tekstlink:hover .icon{transform:translateX(3px)}
.tekstlink.klein{font-size:14px;color:var(--purple);text-decoration:underline;text-underline-offset:3px}

/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s}
.kop-in{display:flex;align-items:center;gap:36px;height:72px}
.logo{display:block;flex:none}
.logo svg{height:26px;width:auto}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none}
.nav a:hover{color:var(--ink)}
@supports (animation-timeline:scroll()){
  .kop{animation:kopLijn linear both;animation-timeline:scroll();animation-range:0 80px}
  @keyframes kopLijn{to{border-bottom-color:var(--line)}}
}

/* ---------- hero ---------- */
.hero-in{min-height:min(820px,calc(100svh - 72px));align-content:center;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(48px,6vw,88px)}
.hero .label{margin-bottom:28px}
.hero .lead{margin-top:30px;max-width:36ch}
.knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:36px}

.podium{position:relative;margin:0}
.podium-beeld{position:relative;container-type:inline-size;aspect-ratio:100/66}
.podium-beeld::before{content:"";position:absolute;left:4%;right:2%;bottom:-3%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(3,15,53,.10),rgba(3,15,53,0))}
.groep li{position:absolute;left:calc(var(--x)*1cqw);bottom:calc(var(--b)*1cqw);z-index:var(--z)}
.groep img{height:calc(var(--h)*1cqw);width:auto;max-width:none;transform-origin:50% 100%}
.held{position:absolute;left:23cqw;bottom:-1cqw;width:56cqw;z-index:4;transform-origin:50% 100%}
.held img{width:100%;height:auto;transition:opacity .35s}
.held img+img{position:absolute;inset:0}
.held img:not(.on){opacity:0}
.kaart-knop{position:absolute;left:21.6%;top:60.2%;width:56.3%;height:23.9%;border:0;padding:0;background:transparent;border-radius:9%/18%;cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:opacity .25s}
.kaart-knop span{font-size:clamp(28px,9.2cqw,88px);font-weight:900;letter-spacing:-.045em;line-height:1;transform:rotate(-1.5deg);transition:transform .2s var(--ease)}
.kaart-knop:hover span{transform:rotate(-1.5deg) scale(1.07)}
.kaart-knop:active span{transform:rotate(-1.5deg) scale(.94)}
.kaart-knop:focus-visible{outline:4px solid var(--purple);outline-offset:4px}
.podium.klaar .kaart-knop{opacity:0;pointer-events:none}
.podium.hop .groep img,.podium.hop .held{animation:hop .75s var(--ease) both;animation-delay:calc(var(--i)*70ms)}
@keyframes hop{0%{transform:translateY(0) scale(1)}12%{transform:translateY(0) scale(1.04,.93)}40%{transform:translateY(-16%) scale(.97,1.04)}68%{transform:translateY(0) scale(1.05,.95)}84%{transform:translateY(-2%) scale(1)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.podium.hop .groep img,.podium.hop .held{animation:none}}
.bijschrift{display:flex;gap:12px;align-items:baseline;margin:26px 0 0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--ink-3)}
.bijschrift b{color:var(--ink);font-weight:700}
.stip{flex:none;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--ink);transform:translateY(-1px)}
.stip[data-s="klaar"]{background:var(--purple);box-shadow:none}

/* ---------- 01 probleem ---------- */
/* (alleen het statement; geen extra beeld) */

/* ---------- donkere hoofdstukken ---------- */
.donker{background:var(--navy);color:#fff}
.donker .label{color:rgba(255,255,255,.8)}
.donker .label span{color:rgba(255,255,255,.5)}
.donker .lead{color:rgba(255,255,255,.72)}
.donker .h2{color:#fff}

/* ---------- 02 demo ---------- */
.venster{background:#fff;color:var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:0 40px 100px -40px rgba(0,0,0,.7)}
.venster-balk{display:flex;justify-content:space-between;align-items:center;height:52px;padding:0 22px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-3)}
.venster-merk{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
.venster-merk .mark{height:18px;width:auto}
.venster-in{display:grid;grid-template-columns:230px minmax(0,1fr) 290px}
.inbox{background:var(--paper);border-right:1px solid var(--line);padding:20px 12px}
.inbox-kop{font-size:13px;font-weight:700;color:var(--ink-3);padding:0 10px 10px}
.inbox li{display:grid;gap:2px;padding:12px;border-radius:var(--r-s);font-size:14px;line-height:1.35}
.inbox li b{font-weight:700}
.inbox li span{color:var(--ink-2)}
.inbox li em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-top:4px}
.inbox li.actief{background:#fff;box-shadow:0 1px 2px rgba(3,15,53,.06),0 0 0 1px var(--line)}
.inbox li.actief em{color:var(--purple)}
.item{display:flex;flex-direction:column;min-width:0}
.item-top{padding:22px 28px 20px;border-bottom:1px solid var(--line)}
.item-meta{font-size:13px;color:var(--ink-3)}
.item-meta b{color:var(--ink-2);font-weight:600}
.item h3{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.015em;margin-top:6px}
.item-mail{margin-top:12px;padding:12px 16px;background:var(--paper);border-radius:var(--r-s);font-size:15px;color:var(--ink-2)}
.stappen{padding:12px 16px;display:grid;gap:2px;flex:1;align-content:start}
.stappen[hidden]{display:none}
.stap{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:11px 12px;border-radius:var(--r-s);opacity:.4;transition:opacity .35s,background-color .35s}
.stap b{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.s-tekst{display:block;font-size:14.5px;line-height:1.45;color:var(--ink-2);margin-top:2px}
.bol{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;color:transparent;background:#fff;transition:background-color .3s,border-color .3s,color .3s}
.bol .icon{width:13px;height:13px}
.stap.bezig{opacity:1;background:var(--paper)}
.stap.bezig .bol{border-color:var(--purple);border-top-color:transparent}
@media (prefers-reduced-motion:no-preference){.stap.bezig .bol{animation:draai .9s linear infinite}}
@keyframes draai{to{transform:rotate(360deg)}}
.stap.klaar{opacity:1}
.stap.klaar .bol{background:var(--purple);border-color:var(--purple);color:#fff}
.stap.wacht{opacity:1;background:var(--lime-soft)}
.stap.wacht .bol{border-color:var(--ink);border-style:dashed}
.go-actie{display:none;align-items:center;gap:14px;margin-top:12px}
.stap.wacht .go-actie{display:flex}
.go-actie small{font-size:13px;color:var(--ink-2)}
.go-knop{width:56px;height:56px;border-radius:50%;border:0;background:var(--lime);color:var(--ink);font-size:18px;font-weight:900;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(3,15,53,.14);transition:transform .15s var(--ease),background-color .2s}
.go-knop:hover{transform:scale(1.06);background:var(--lime-press)}
.go-knop:active{transform:scale(.95)}
.item-voet{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 28px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.item-voet button{background:none;border:0;padding:0;font-size:13.5px;font-weight:700;color:var(--purple);cursor:pointer}
.orch{background:var(--paper);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px}
.orch-beeld{position:relative;aspect-ratio:1}
.orch-beeld img{position:absolute;inset:0;width:100%;opacity:0;transition:opacity .35s}
.orch-beeld img.on{opacity:1}
.orch-voet{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.status{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border-radius:999px;font-size:13px;font-weight:700;background:var(--paper-2);color:var(--ink)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--purple)}
.status[data-s="go"]{background:var(--lime-soft)}
.status[data-s="go"] i{background:var(--ink)}
.status[data-s="klaar"]{background:var(--purple);color:#fff}
.status[data-s="klaar"] i{background:var(--lime)}
.verzonden{padding:20px 28px 24px;flex:1}
.verzonden[hidden]{display:none}
.verzonden-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink-3)}
.stempel{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:var(--purple);color:#fff;font-size:13.5px;font-weight:700}
.mail-kop{margin-top:16px;border-top:1px solid var(--line)}
.mail-kop div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.mail-kop dt{color:var(--ink-3)}
.mail-kop dd{font-weight:600}
.mail-body{margin-top:16px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.pdf{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:9px 14px;border-radius:var(--r-s);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600}
.pdf .icon{width:18px;height:18px;color:#C4320A}
@media (prefers-reduced-motion:no-preference){.verzonden:not([hidden]){animation:in .45s var(--ease) both}}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- lijsten (GO, eerlijk) ---------- */
.lijst{border-top:1px solid var(--line-2)}
.lijst>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.lijst dt{font-size:18px;font-weight:700}
.lijst dd{color:var(--ink-2);font-size:17px;line-height:1.55}
.eerlijk{border-top:1px solid var(--line-2)}
.eerlijk li{padding:20px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.5;color:var(--ink-2)}
.eerlijk b{color:var(--ink);font-weight:700}

/* ---------- 04 team ---------- */
.rollen{border-top:1px solid var(--line-2)}
.rollen li{display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.rollen img{width:64px;height:56px;object-fit:contain;object-position:center bottom}
.rollen h3{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.rollen p{font-size:16px;line-height:1.45;color:var(--ink-2)}
.rollen .eerste{padding:20px 0}
.rollen .eerste img{width:64px;height:72px}
.tag{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--lime);color:var(--ink);white-space:nowrap}

/* ---------- 05 pakketten ---------- */
.tabel-scroll{border-top:1px solid var(--line-2)}
.pakket-tabel{width:100%;border-collapse:collapse;table-layout:fixed}
.pakket-tabel th,.pakket-tabel td{text-align:left;vertical-align:top;padding:18px 22px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5;font-weight:400}
.pakket-tabel thead td,.pakket-tabel tbody th{width:20%;padding-left:0}
.pakket-tabel thead th{padding-top:28px;padding-bottom:24px;border-bottom-color:var(--line-2)}
.pakket-tabel tbody th{font-size:15px;font-weight:600;color:var(--ink)}
.pakket-tabel td{color:var(--ink-2)}
.p-naam{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.p-pos{display:block;margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.p-label{display:block;font-size:13px;font-weight:700;color:var(--purple);margin-bottom:8px}
.pakket-tabel .act{background:#fff}
.pakket-tabel td.act{color:var(--ink)}
.pakket-tabel thead .act{border-radius:var(--r-s) var(--r-s) 0 0}
.pakket-tabel tbody tr:last-child .act{border-radius:0 0 var(--r-s) var(--r-s)}
.voetnoot{margin-top:28px;font-size:15px;color:var(--ink-3);max-width:70ch}

/* ---------- 06 vragen ---------- */
.faq-kop{font-size:22px;font-weight:700;letter-spacing:-.015em;margin:clamp(56px,6vw,80px) 0 12px}
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:18px;font-weight:700;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.plus{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:transform .3s var(--ease)}
.plus .icon{width:12px;height:12px}
.faq details[open] .plus{transform:rotate(45deg)}
.antwoord p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:60ch;padding-bottom:22px}

/* ---------- 07 werkscan ---------- */
.slot .h2{max-width:12ch}
.start{margin-top:40px;border-top:1px solid rgba(255,255,255,.16)}
.start li{display:block;position:relative;padding:16px 0 16px 32px;border-bottom:1px solid rgba(255,255,255,.12);font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.68)}
.start span{position:absolute;left:0;top:16px;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;font-weight:600}
.start b{color:#fff;font-weight:700}
.formulier,.bedankt{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.veld{display:grid;gap:8px;align-content:start}
.veld.vol{grid-column:1/-1}
.veld label{font-size:14.5px;font-weight:600}
.veld label small{font-weight:400;color:var(--ink-3);font-size:13px}
.veld input,.veld textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-s);padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.veld textarea{min-height:128px;resize:vertical;line-height:1.5}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px var(--purple-soft)}
.veld .fout{display:none;font-size:13.5px;font-weight:600;color:#B42318}
.veld.is-fout input,.veld.is-fout textarea{border-color:#D92D20;background:#FFF8F7}
.veld.is-fout .fout{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.verstuur{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.verstuur p{font-size:14px;color:var(--ink-3);max-width:32ch;line-height:1.45}
.melding{margin-top:14px;font-size:15px;font-weight:600}
.melding:empty{display:none}
.melding.fout{color:#B42318}
.bedankt{display:none;grid-template-columns:120px 1fr;gap:24px;align-items:center}
.bedankt img{width:120px}
.bedankt h3{font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.025em}
.bedankt p{margin-top:10px;color:var(--ink-2);font-size:16px}
.verzonden-ok .formulier{display:none}
.verzonden-ok .bedankt{display:grid}

/* ---------- voet ---------- */
.voet{background:var(--navy);color:rgba(255,255,255,.7)}
.voet-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px 48px;padding-block:44px 40px;border-top:1px solid rgba(255,255,255,.12)}
.voet-logo svg{height:26px;width:auto}
.voet-regel{font-size:15px}
.voet-links{display:flex;flex-wrap:wrap;gap:8px 26px}
.voet-links a{font-size:14.5px;text-decoration:none}
.voet-links a:hover{color:#fff}
.voet-klein{grid-column:1/-1;font-size:13.5px;color:rgba(255,255,255,.45)}

/* ---------- tekstpagina's ---------- */
.tekstpagina{min-height:60vh}
.tekstpagina h1{font-size:clamp(40px,5vw,72px);margin-bottom:32px}
.tekstpagina h2{font-size:21px;font-weight:700;margin-top:36px}
.tekstpagina p{max-width:62ch;color:var(--ink-2);margin-top:8px}
.tekstpagina .terug{margin-top:44px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .venster-in{grid-template-columns:minmax(0,1fr) 240px}
  .inbox{display:none}
}
@media (max-width:960px){
  .nav{display:none}
  .kop-in .knop{margin-left:auto}
  .hero-in{grid-template-columns:1fr;row-gap:44px}
  .twee,.kop-rij{grid-template-columns:1fr;row-gap:40px}
  .sectie:not(.donker)+.sectie:not(.donker)>.wrap.twee>*+*{padding-top:0}
  .plak{position:static}
  .tabel-scroll{overflow-x:auto;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad)}
  .pakket-tabel{min-width:760px}
  .pakket-tabel tbody th,.pakket-tabel thead td{position:sticky;left:0;background:var(--paper);z-index:1;width:120px}
}
@media (max-width:700px){
  body{font-size:17px}
  .kop-in{height:62px}
  .logo svg{height:22px}
  .knoppen{gap:22px}
  .bijschrift{margin-left:0}
  .venster-in{grid-template-columns:1fr}
  .venster-pad{display:none}
  .orch{order:-1;flex-direction:row;justify-content:flex-start;border-left:0;border-bottom:1px solid var(--line);padding:12px 18px}
  .orch-beeld{width:72px}
  .orch-voet{align-items:flex-start}
  .item-top{padding:18px 18px 16px}
  .stappen{padding:10px 8px}
  .item-voet,.verzonden{padding-inline:18px}
  .lijst>div{grid-template-columns:1fr;gap:6px}
  .rollen li{grid-template-columns:52px 1fr}
  .rollen img{width:52px;height:46px}
  .rollen .tag{grid-column:2;justify-self:start}
  .velden{grid-template-columns:1fr}
  .verstuur .knop{width:100%}
  .bedankt{grid-template-columns:1fr}
  .voet-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}
@media (max-width:420px){
  .kop-in{gap:16px}
  .logo svg{height:20px}
  .kop .knop-klein{height:38px;padding:0 14px;font-size:14px}
}
@media (max-width:700px){:root{--sp:72px}}

/* karakters op redactionele schaal in de linkerkolom */
.kolombeeld{margin-top:clamp(40px,4vw,64px);width:min(300px,70%);position:relative}
.kolombeeld::after,.groepje::after{content:"";position:absolute;left:8%;right:8%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(3,15,53,.09),rgba(3,15,53,0));z-index:-1}
.kolombeeld img{width:100%}
.groepje{position:relative;container-type:inline-size;width:min(420px,100%);aspect-ratio:100/60;margin-top:clamp(40px,4vw,64px);isolation:isolate}
.groepje img{position:absolute;left:calc(var(--x)*1cqw);bottom:calc(var(--b)*1cqw);height:calc(var(--h)*1cqw);width:auto;max-width:none;z-index:var(--z)}
.sectie:not(.donker)+.sectie:not(.donker)>.wrap.twee>*{padding-bottom:0}
@media (max-width:960px){.kolombeeld{width:220px}.groepje{width:min(340px,100%)}}
@media (max-width:700px){
  .hero-in{min-height:0;padding-top:20px;row-gap:28px}
  .hero .label{margin-bottom:18px}
  .hero .lead{margin-top:20px}
  .knoppen{margin-top:26px}
}

/* v4: herpositionering. Twee nieuwe lijsten in de bestaande taal (haarlijnen, geen nieuwe effecten). */
.hero h1{font-size:clamp(44px,4.9vw,72px);line-height:1.02}
.onderdelen{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:28px;border-top:1px solid var(--line-2)}
.onderdelen li{padding-top:24px}
.onderdelen .nr{display:block;font-size:14px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-bottom:32px}
.onderdelen h3{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin-bottom:10px;text-wrap:balance}
.onderdelen p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.brein{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;border-top:1px solid var(--line-2)}
.brein li{padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.4;font-weight:600}
.brein-noot{margin-top:36px;display:grid;gap:18px}
.brein-noot p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.brein-noot b{color:var(--ink);font-weight:700}
@media (max-width:1100px){
  .onderdelen{grid-template-columns:1fr}
  .onderdelen li{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.6fr);gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
  .onderdelen .nr{margin:0}
  .onderdelen h3{margin:0}
}
@media (max-width:700px){
  .onderdelen li{grid-template-columns:32px minmax(0,1fr);gap:6px 12px}
  .onderdelen p{grid-column:2}
  .hero h1{font-size:clamp(40px,11vw,52px)}
}
@media (max-width:520px){.brein{grid-template-columns:1fr}}
.nw{white-space:nowrap}