/* Compressif / ERA — gedeelde stijl
   Layout: industriële slate-basis, schuine zware koppen (Exo 2, één contour per letter),
   rood = urgentie, blauw = het apparaat, groen = "binnen de richtlijn". Standaard donker, licht via schakelaar. */
:root{
  --ink:#1b2230; --plate:#242c3b; --plate2:#2d3647; --rule:#3b4559;
  --fg:#f1f4f8; --mute:#b4bccb; --slate:#5a6178;
  --red:#ff5a4c; --red-ink:#ff6a5d; --blue:#4fa6f2; --go:#8fd46c; --warn:#ffc24a;
  --band:#c22a1f; --onband:#ffffff; --photo:#ffffff;
  --shadow:0 30px 60px -30px rgba(0,0,0,.6);
  --f-display:"Exo 2 Web","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow Web",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono Web",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --lh:1.6; --ls:0; --ws:0;
  --gutL:max(16px,env(safe-area-inset-left,0px));
  --gutR:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
:root[data-mode="light"]{
  --ink:#f3f5f9; --plate:#ffffff; --plate2:#e9edf3; --rule:#d0d7e1;
  --fg:#161b25; --mute:#4a5364; --slate:#4a5063;
  --red:#d8230a; --red-ink:#b8241a; --blue:#1667b8; --go:#2c7a10; --warn:#8f5400;
  --band:#c22a1f; --onband:#ffffff; --photo:#ffffff;
  --shadow:0 30px 60px -34px rgba(20,30,50,.35);
  color-scheme:light;
}
:root[data-font="leesbaar"]{--f-body:"Atkinson Hyperlegible Web",system-ui,sans-serif}
:root[data-spacing="ruim"]{--ls:.06em;--ws:.16em}

*{box-sizing:border-box}
[hidden]{display:none!important}
[id]{scroll-margin-top:calc(84px + env(safe-area-inset-top,0px))}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root[data-motion="uit"]{scroll-behavior:auto}
:root[data-motion="uit"] *,:root[data-motion="uit"] *::before,:root[data-motion="uit"] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{background:var(--ink);color:var(--fg);font-family:var(--f-body);font-size:1.0625rem;line-height:var(--lh);letter-spacing:var(--ls);word-spacing:var(--ws);-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--ink)}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em}
p a,li a,dd a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.22em;transition:color .15s}
p a:hover,li a:hover,dd a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutL);top:-100px;z-index:100;background:var(--fg);color:var(--ink);padding:12px 16px;font-weight:600}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gutL);padding-right:var(--gutR)}
.narrow{max-width:820px}

h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1;letter-spacing:0;word-spacing:0}
h1{font-size:clamp(2.6rem,7.4vw,5.6rem);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;line-height:.9}
h2{font-size:clamp(2.1rem,5vw,4rem);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
h3{font-size:1.35rem;font-weight:800;line-height:1.15}
h4{font-size:1.05rem;font-weight:800;line-height:1.2}
p{margin:0}
.outline{color:transparent;-webkit-text-stroke:2px var(--fg)}
.dot{color:var(--red)}
.eyebrow{font-family:var(--f-mono);font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;gap:.6em;align-items:center;line-height:1.3}
.eyebrow::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--red);flex:none}
.lead{font-size:1.18rem;color:var(--mute);max-width:62ch}
.src{font-family:var(--f-mono);font-size:.78rem;color:var(--mute);margin-top:12px}
.ph{font-family:var(--f-mono);font-size:.86em;color:var(--warn);border:1px dashed var(--warn);padding:0 .35em;white-space:nowrap}
.tag-ex{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);border:1px dashed var(--warn);padding:4px 8px}

section{padding-block:clamp(64px,9vw,120px);border-top:1px solid var(--rule)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(32px,5vw,56px);max-width:900px}
.page-hero{padding-block:clamp(48px,8vw,104px) clamp(40px,6vw,72px);border-top:0;position:relative;overflow:hidden}
.page-hero .sec-head{margin-bottom:0}
.page-hero h1{margin-block:6px 4px}

/* ---------- Buttons: afgeschuinde hoek mét doorlopende lijn ---------- */
.btn{--b:var(--red);--t:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--f-display);font-weight:800;font-size:1rem;line-height:1.1;text-transform:uppercase;letter-spacing:.04em;word-spacing:0;padding:.95em 1.4em;border:2px solid var(--b);background:var(--b);color:var(--t);text-decoration:none;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);transition:transform .15s,background-color .15s,color .15s}
.btn::after{content:"";position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;pointer-events:none;
  background:linear-gradient(to top left,transparent 50%,var(--b) 50%,var(--b) calc(50% + 2.2px),transparent calc(50% + 2.2px))}
.btn{--b:#d8230a}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;--b:var(--fg);color:var(--fg);clip-path:none}
.btn.ghost::after{display:none}
.btn.ghost:hover{background:var(--fg);color:var(--ink)}
.btn.ghost.on-red{--b:#fff;color:#fff}
.btn.ghost.on-red:hover{background:#fff;color:#a8231a}
.btn.ghost.on-dark{--b:#fff;color:#fff}
.btn.ghost.on-dark:hover{background:#fff;color:#11161f}
.btn.light{--b:#fff;color:#a8231a}
.btn.sm{padding:.62em 1em;font-size:.86rem}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* ---------- Header ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:color-mix(in srgb,var(--ink) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.logo{font-family:var(--f-display);font-weight:900;font-size:1.55rem;text-decoration:none;letter-spacing:-.01em;word-spacing:0;display:inline-flex;align-items:baseline;line-height:1;flex:none}
.logo small{font-size:.66em;position:relative}
.logo small::before{content:"";position:absolute;width:.28em;height:.28em;border-radius:50%;background:var(--red);left:.07em;top:-.04em}
.menu{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.menu a{display:block;text-decoration:none;color:var(--mute);font-family:var(--f-display);font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;padding:10px 10px;line-height:1.1}
.menu a:hover{color:var(--fg)}
.menu a[aria-current="page"]{color:var(--fg);box-shadow:inset 0 -3px 0 var(--red)}
.nav-tools{display:flex;gap:8px;align-items:center;flex:none}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;background:var(--plate);border:1px solid var(--rule);color:var(--fg);cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--fg)}
.icon-btn svg{width:20px;height:20px}
.menu-btn{display:none}
.theme-sw{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 10px;background:var(--plate);border:1px solid var(--rule);color:var(--fg);cursor:pointer;font:inherit;font-size:.82rem}
.theme-sw:hover{border-color:var(--fg)}
.theme-sw .track{width:38px;height:22px;border-radius:11px;background:var(--rule);position:relative;flex:none}
.theme-sw .track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--fg);transition:transform .2s}
.theme-sw[aria-checked="true"] .track{background:var(--blue)}
.theme-sw[aria-checked="true"] .track::after{transform:translateX(16px);background:#fff}
.theme-sw svg{width:16px;height:16px}
.menu-cta,.menu-foot{display:none}
.menu-btn svg+svg{display:none}
@media (max-width:1120px){
  .menu-btn{display:grid}
  .menu-btn[aria-expanded="true"] svg:first-child{display:none}
  .menu-btn[aria-expanded="true"] svg+svg{display:block}
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ink)}
  .nav-tools{margin-left:auto}
  .menu{position:fixed;inset:0;z-index:-1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.6vh,14px);
    margin:0;padding:calc(88px + env(safe-area-inset-top,0px)) var(--gutR) calc(28px + env(safe-area-inset-bottom,0px)) var(--gutL);
    background:var(--ink);overflow-y:auto;text-align:center}
  .menu::before{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:radial-gradient(60% 60% at 50% 100%,color-mix(in srgb,var(--red) 16%,transparent),transparent);pointer-events:none}
  .menu.open{display:flex}
  .menu li{position:relative}
  .menu a{font-size:clamp(2rem,9vw,3.4rem);font-weight:900;font-style:italic;letter-spacing:-.01em;color:var(--fg);padding:6px 10px;border:0;line-height:1.05}
  .menu a:hover{color:var(--red)}
  .menu a[aria-current="page"]{box-shadow:none;padding-left:10px;color:var(--red)}
  .menu a[aria-current="page"]::after{content:"";display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--red);margin-left:.12em;vertical-align:.1em}
  .menu-cta{display:block;margin-top:clamp(14px,3vh,28px)}
  .menu .menu-cta a{font-size:1.1rem;font-style:normal;padding:1em 2.4em;color:#fff;letter-spacing:.06em}
  .menu .menu-cta a:hover{color:#fff}
  .menu-foot{display:grid;gap:4px;margin-top:clamp(14px,3vh,28px);font-size:.92rem;color:var(--mute)}
  .menu.open li{animation:menuIn .42s cubic-bezier(.2,.7,.2,1) both}
  .menu.open li:nth-child(2){animation-delay:.04s}.menu.open li:nth-child(3){animation-delay:.08s}.menu.open li:nth-child(4){animation-delay:.12s}
  .menu.open li:nth-child(5){animation-delay:.16s}.menu.open li:nth-child(6){animation-delay:.2s}.menu.open li:nth-child(7){animation-delay:.24s}
  body.menu-open{overflow:hidden}
}
@keyframes menuIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-height:520px) and (max-width:1120px){.menu{justify-content:flex-start}.menu a{font-size:1.8rem}}

@media (max-width:560px){.theme-sw .lbl{display:none}.nav .btn.donate-top{display:none}}

/* ---------- Weergavepaneel ---------- */
.a11y{position:fixed;z-index:80;top:calc(76px + env(safe-area-inset-top,0px));right:var(--gutR);width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 100px);overflow:auto;background:var(--plate);border:1px solid var(--rule);box-shadow:var(--shadow);padding:20px;display:grid;gap:18px}
.a11y header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.a11y h2{font-size:1.4rem}
.a11y fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.a11y legend{font-weight:600;margin-bottom:8px;padding:0}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--rule)}
.seg button{font:inherit;font-size:.92rem;background:var(--ink);color:var(--fg);border:0;border-right:1px solid var(--rule);padding:10px 6px;cursor:pointer;line-height:1.2}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--ink);font-weight:600}
.a11y .reset{justify-self:start;font:inherit;background:none;border:0;color:var(--fg);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.22em;cursor:pointer;padding:0}

/* ---------- Hero ---------- */
.hero{border-top:0;padding-block:clamp(40px,6vw,84px) clamp(48px,6vw,84px);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -40% 40%;height:80%;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 20%,transparent),transparent);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:center;position:relative;z-index:1}
.hero-grid>*{min-width:0}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(3.2rem,9vw,7.6rem);line-height:.86;letter-spacing:-.025em;margin-block:22px 26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.frame{position:relative;border:2px solid var(--rule);background:var(--photo);box-shadow:var(--shadow)}
.frame img{display:block;width:100%;height:auto}
.hero-shot{position:relative}
.hero-shot .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;border:0;background:var(--red-btn,#d8230a);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 12px color-mix(in srgb,#d8230a 30%,transparent);transition:transform .2s;z-index:2}
.hero-shot .play:hover{transform:translate(-50%,-50%) scale(1.06)}
.hero-shot .play svg{width:36px;height:36px;margin-left:5px}
.readout{position:absolute;z-index:2;font-family:var(--f-mono);font-size:.78rem;background:var(--ink);color:var(--fg);border:1px solid var(--rule);padding:8px 10px;line-height:1.3}
.readout b{display:block;font-size:1.1rem}
.readout em{font-style:normal;color:var(--go)}
.readout.a{left:-12px;top:-14px}.readout.b{right:-12px;bottom:34px}
@media (max-width:560px){.readout.a{left:6px;top:6px}.readout.b{right:6px;bottom:36px}.readout{font-size:.7rem;padding:6px 8px}.readout b{font-size:.95rem}}
.clock{margin-top:34px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;max-width:540px;padding:16px 18px;border:1px solid var(--rule);background:var(--plate)}
.clock b{font-family:var(--f-mono);font-size:1.9rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--red);line-height:1}
.clock span{font-size:.94rem;color:var(--mute);line-height:1.4}
.clock .bar{grid-column:1/-1;height:6px;background:var(--rule);position:relative;overflow:hidden;margin-top:6px}
.clock .bar i{position:absolute;inset:0 auto 0 0;background:var(--red);width:0;transition:width 1s linear}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);background:var(--ink)}
.stat{padding:26px 22px;border-right:1px solid var(--rule);display:grid;gap:8px;align-content:start}
.stat:last-child{border-right:0}
.stat b{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:.9;letter-spacing:-.02em}
.stat b small{font-size:.45em;font-style:normal;color:var(--mute);margin-left:.15em}
.stat p{color:var(--mute);font-size:.97rem}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media (max-width:440px){.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--rule)}.stat:last-child{border-bottom:0}}

/* ---------- Video player ---------- */
.player{display:grid;grid-template-columns:minmax(0,1fr) 300px;border:1px solid var(--rule);background:var(--plate)}
@media (max-width:980px){.player{grid-template-columns:1fr}}
.screen{position:relative;background:#fff;aspect-ratio:16/9;max-width:100%}
.screen video{width:100%;height:100%;display:block;object-fit:contain;background:#fff}
.bigplay{position:absolute;inset:0;margin:auto;width:110px;height:110px;border-radius:50%;border:0;background:#d8230a;color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 12px rgba(216,35,10,.3);transition:transform .2s}
.bigplay:hover{transform:scale(1.06)}
.bigplay svg{width:42px;height:42px;margin-left:6px}
.controls{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--rule);grid-column:1;flex-wrap:wrap}
.ctl{width:44px;height:44px;border:1px solid var(--rule);background:var(--ink);color:var(--fg);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.ctl:hover{border-color:var(--fg)}
.ctl svg{width:18px;height:18px}
.ctl.txt{width:auto;padding:0 10px;font-family:var(--f-mono);font-size:.78rem;font-weight:700}
.vtrack{position:relative;flex:1 1 180px;height:44px;cursor:pointer;touch-action:none;min-width:120px}
.vtrack .rail{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:var(--rule)}
.vtrack .fill{position:absolute;left:0;top:50%;height:6px;margin-top:-3px;background:var(--red);width:0}
.vtrack .tick{position:absolute;top:50%;width:2px;height:16px;margin-top:-8px;background:var(--mute);opacity:.6}
.vtrack .knob{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--fg);border-radius:50%;left:0}
.time{font-family:var(--f-mono);font-size:.82rem;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.chapters{grid-column:2;grid-row:1/span 2;border-left:1px solid var(--rule);display:flex;flex-direction:column;overflow:auto;max-height:100%}
@media (max-width:980px){.chapters{grid-column:1;grid-row:auto;border-left:0;border-top:1px solid var(--rule);max-height:320px}}
.chapters h3{font-size:.8rem;font-family:var(--f-mono);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:14px 16px;border-bottom:1px solid var(--rule)}
.chap{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:baseline;text-align:left;padding:11px 16px;background:none;border:0;border-bottom:1px solid var(--rule);color:var(--mute);font:inherit;font-size:.97rem;cursor:pointer;position:relative;line-height:1.35}
.chap span{font-family:var(--f-mono);font-size:.78rem;font-variant-numeric:tabular-nums}
.chap:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 5%,transparent)}
.chap.on{color:var(--fg);background:color-mix(in srgb,var(--red) 14%,transparent)}
.chap.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}

/* transcript */
.transcript{border:1px solid var(--rule);border-top:0;background:var(--ink)}
.transcript>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-family:var(--f-display);font-weight:800;font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em}
.transcript>summary::-webkit-details-marker{display:none}
.transcript>summary .chev{width:28px;height:28px;border:1px solid var(--rule);display:grid;place-items:center;transition:transform .2s;flex:none}
.transcript[open]>summary .chev{transform:rotate(180deg)}
.transcript>summary:hover{background:var(--plate)}
.tr-body{padding:6px 20px 24px;display:grid;gap:0;border-top:1px solid var(--rule)}
.tr-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--rule)}
.tr-tools label{display:flex;gap:8px;align-items:center;font-size:.95rem;cursor:pointer}
.tr-tools input{width:20px;height:20px;accent-color:var(--red)}
.tr-list{list-style:none;margin:0;padding:0;max-height:min(70vh,640px);overflow:auto}
.tr-item{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.tr-item.on .tr-time{background:var(--red);color:#fff;border-color:var(--red)}
.tr-time{font:inherit;font-family:var(--f-mono);font-size:.85rem;font-weight:700;align-self:start;background:var(--plate);color:var(--fg);border:1px solid var(--rule);padding:6px 8px;cursor:pointer;font-variant-numeric:tabular-nums}
.tr-time:hover{border-color:var(--fg)}
.tr-item p{max-width:70ch}
.tr-item .vo{font-size:1.05rem}
.tr-item .vo b,.tr-item .scene b{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:4px;font-weight:700}
.tr-item .scene{color:var(--mute);margin-top:10px;font-size:.97rem}
.tr-item .scene q{color:var(--fg);quotes:"“" "”"}
.hide-scene .scene{display:none}

/* ---------- Generic two-column / photo ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split>*{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.photo{border:1px solid var(--rule);overflow:hidden;background:var(--photo);margin:0}
.photo img{display:block;width:100%;height:auto}
.stack{display:grid;gap:18px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.pills span{border:1px solid var(--rule);padding:8px 14px;font-family:var(--f-display);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}

/* ---------- Tijdlijn ---------- */
.sim{border:1px solid var(--rule);background:var(--plate);padding:clamp(20px,3.4vw,40px);display:grid;gap:28px}
.sim-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.sim-min{font-family:var(--f-mono);font-weight:700;font-size:clamp(3rem,8vw,5.6rem);line-height:.9;font-variant-numeric:tabular-nums}
.sim-min small{font-size:.32em;color:var(--mute);margin-left:.3em}
.chip{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:7px 12px;border:1px solid currentColor;line-height:1.2}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.lane{position:relative;padding-top:38px}
.lane-bar{height:18px;display:grid;grid-template-columns:4fr 1fr 5fr 2fr;gap:3px}
.lane-bar i{display:block}
.lane-bar i:nth-child(1){background:var(--warn);opacity:.6}
.lane-bar i:nth-child(2){background:var(--red);opacity:.7}
.lane-bar i:nth-child(3){background:var(--red)}
.lane-bar i:nth-child(4){background:#8a1c14}
.lane input{position:absolute;left:0;right:0;bottom:-12px;width:100%;margin:0;height:44px;opacity:0;cursor:pointer}
.lane .thumb{position:absolute;top:26px;width:4px;height:42px;background:var(--fg);margin-left:-2px;pointer-events:none}
.lane .thumb::after{content:"";position:absolute;top:-10px;left:-8px;border:10px solid transparent;border-top-color:var(--fg);border-bottom:0}
.lane:focus-within .thumb{outline:3px solid var(--blue);outline-offset:3px}
.amb{position:absolute;top:0;font-family:var(--f-mono);font-size:.74rem;color:var(--blue);transform:translateX(-50%);white-space:nowrap}
.amb::after{content:"";position:absolute;left:50%;top:20px;height:28px;border-left:2px dashed var(--blue)}
.scale{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.76rem;color:var(--mute);margin-top:10px;font-variant-numeric:tabular-nums}
.sim-msg{font-size:1.2rem;max-width:62ch;min-height:3.4em}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.mini{font:inherit;font-family:var(--f-mono);font-size:.84rem;background:var(--ink);color:var(--fg);border:1px solid var(--rule);padding:9px 12px;cursor:pointer;line-height:1.2}
.mini:hover{border-color:var(--fg)}
.mini[aria-pressed="true"]{border-color:var(--red);background:color-mix(in srgb,var(--red) 16%,var(--ink))}

/* ---------- USP + specs ---------- */
.usp{display:grid;border-top:1px solid var(--rule)}
.usp>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.usp b{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:2rem;color:var(--blue);line-height:1}
.usp p{color:var(--mute)}
.usp h3{margin-bottom:6px}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:900px){.specs{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.specs{grid-template-columns:1fr}}
.spec{background:var(--ink);padding:24px 20px;display:grid;gap:12px;align-content:start;transition:background-color .2s}
.spec:hover{background:var(--plate)}
.spec svg{width:34px;height:34px;color:var(--blue)}
.spec h3{font-size:1.05rem}
.spec p{color:var(--mute);font-size:.95rem}

/* ---------- Trainer ---------- */
.trainer{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule)}
.trainer>*{min-width:0}
@media (max-width:900px){.trainer{grid-template-columns:1fr}}
.pad-side{background:var(--plate);padding:clamp(20px,3vw,36px);display:grid;gap:22px;justify-items:center;text-align:center;border-right:1px solid var(--rule)}
@media (max-width:900px){.pad-side{border-right:0;border-bottom:1px solid var(--rule)}}
.pad{width:min(300px,72vw);aspect-ratio:1;border-radius:50%;border:0;background:#1f7fd6;color:#fff;cursor:pointer;position:relative;font-family:var(--f-display);font-weight:900;font-style:italic;font-size:2.1rem;text-transform:uppercase;box-shadow:0 0 0 10px rgba(31,127,214,.22),inset 0 -16px 0 rgba(0,0,0,.22);transition:transform .07s,box-shadow .07s;user-select:none;-webkit-user-select:none;touch-action:manipulation;line-height:1.1}
.pad.hit{transform:scale(.93);box-shadow:0 0 0 22px rgba(31,127,214,.12),inset 0 -6px 0 rgba(0,0,0,.22)}
.pad small{display:block;font-family:var(--f-mono);font-style:normal;font-size:.8rem;font-weight:500;letter-spacing:.1em;margin-top:6px;text-transform:none}
.pad.breathe{background:#4a5063}
.pulse-ring{position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--fg);opacity:0;pointer-events:none}
.pulse-ring.go{animation:ring .45s ease-out}
@keyframes ring{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.12)}}
.hint{font-size:.94rem;color:var(--mute)}
kbd{font-family:var(--f-mono);font-size:.8rem;border:1px solid var(--rule);padding:1px 6px;background:var(--ink)}
.read-side{padding:clamp(20px,3vw,36px);display:grid;gap:26px;align-content:start}
.bpm{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.bpm b{font-family:var(--f-mono);font-weight:700;font-size:clamp(3.4rem,8vw,5.4rem);line-height:.9;font-variant-numeric:tabular-nums}
.bpm span{font-family:var(--f-mono);color:var(--mute)}
.gauge{position:relative;height:58px;margin-inline:12px}
.gauge .g-rail{position:absolute;left:0;right:0;top:20px;height:14px;background:var(--rule)}
.gauge .g-zone{position:absolute;top:20px;height:14px;background:var(--go)}
.gauge .g-needle{position:absolute;top:10px;width:4px;height:34px;background:var(--fg);margin-left:-2px;transition:left .25s;left:0}
.gauge .g-lbl{position:absolute;top:40px;font-family:var(--f-mono);font-size:.74rem;color:var(--mute);transform:translateX(-50%)}
.count{display:grid;grid-template-columns:repeat(30,1fr);gap:3px}
.count i{height:22px;background:var(--rule)}
.count i.on{background:var(--red)}
.cycle{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.84rem;color:var(--mute);margin-top:8px}
.toggle{font:inherit;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.88rem;padding:11px 14px;background:var(--ink);color:var(--fg);border:1px solid var(--rule);cursor:pointer;display:inline-flex;gap:8px;align-items:center;line-height:1.1}
.toggle[aria-pressed="true"]{border-color:var(--go);color:var(--go)}
.toggle:hover{border-color:var(--fg)}
.note{border-left:4px solid var(--blue);padding:12px 16px;background:var(--plate);font-size:.97rem;color:var(--mute)}
.note b,.note strong{color:var(--fg)}

/* ---------- Chain ---------- */
.chain{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)}
@media (max-width:860px){.chain{grid-template-columns:1fr 1fr}}
.link{background:var(--ink);border:0;border-right:1px solid var(--rule);color:var(--fg);text-align:left;font:inherit;padding:24px 20px 26px;cursor:pointer;display:grid;gap:14px;align-content:start;position:relative;transition:background-color .2s}
.link:last-child{border-right:0}
@media (max-width:860px){.link:nth-child(2){border-right:0}.link:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
.link:hover,.link[aria-selected="true"]{background:var(--plate)}
.link[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--red)}
.link .n{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:3.2rem;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--mute)}
.link[aria-selected="true"] .n{color:var(--red);-webkit-text-stroke:0}
.era-tag{position:absolute;top:18px;right:16px;font-family:var(--f-mono);font-size:.7rem;font-weight:700;background:#1f7fd6;color:#fff;padding:3px 7px;letter-spacing:.08em}
.chain-panel{border:1px solid var(--rule);border-top:0;background:var(--plate);padding:clamp(20px,3vw,34px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
@media (max-width:700px){.chain-panel{grid-template-columns:1fr}}
.chain-panel p{font-size:1.1rem;max-width:64ch}

/* ---------- Who ---------- */
.who-list{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.who-list li{padding:14px 0;border-bottom:1px solid var(--rule);font-family:var(--f-display);font-weight:700;font-size:1.08rem;display:flex;gap:10px;align-items:center;line-height:1.2}
.who-list li::before{content:"";width:14px;height:3px;background:var(--red);flex:none}

/* ---------- Donatieband ---------- */
.band{background:var(--band);color:var(--onband);border-top:0;position:relative;overflow:hidden}
.band::before{content:"ERA ERA ERA ERA ERA ERA";position:absolute;font-family:var(--f-display);font-weight:900;font-style:italic;font-size:22vw;line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.16);top:50%;left:-4vw;transform:translateY(-50%);pointer-events:none}
.band .wrap{position:relative}
.band .lead,.band p{color:rgba(255,255,255,.94)}
.band .eyebrow{color:#fff}
.band .eyebrow::before{background:#fff}
.band h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.band a:not(.btn){color:#fff}
.meter{display:grid;gap:10px}
.meter .m-bar{height:18px;background:rgba(0,0,0,.25);position:relative;overflow:hidden}
.meter .m-bar i{position:absolute;inset:0 auto 0 0;background:#fff}
.meter .m-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.9rem}
.meter .m-row b{font-size:1.5rem}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--rule);padding-block:56px 44px;color:var(--mute);font-size:.97rem;background:var(--ink)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.f-grid{grid-template-columns:1fr}}
.f-grid h2{font-size:.82rem;font-family:var(--f-mono);font-style:normal;font-weight:700;letter-spacing:.14em;color:var(--fg);margin-bottom:14px}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.f-grid a{text-decoration:none;color:var(--mute)}
.f-grid a:hover{color:var(--fg);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}
.f-grid .logo{color:var(--fg);font-size:2rem}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:44px;padding-top:20px;border-top:1px solid var(--rule);font-size:.88rem}

/* ---------- Legal / prose pages ---------- */
.prose{display:grid;gap:18px;max-width:72ch}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:26px}
.prose h3{margin-top:10px}
.prose ul,.prose ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
.prose p,.prose li{color:var(--fg)}
.prose .meta{font-family:var(--f-mono);font-size:.84rem;color:var(--mute)}
.toc{border:1px solid var(--rule);background:var(--plate);padding:18px 20px}
.toc ol{margin:8px 0 0;padding-left:1.3em;display:grid;gap:6px}
.legal-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr}}
.legal-grid .toc{position:sticky;top:calc(88px + env(safe-area-inset-top,0px))}
@media (max-width:900px){.legal-grid .toc{position:static}}
table.data{width:100%;border-collapse:collapse;font-size:.97rem}
table.data th,table.data td{border-bottom:1px solid var(--rule);padding:12px 10px;text-align:left;vertical-align:top}
table.data th{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:700}
.tbl{overflow-x:auto;border:1px solid var(--rule);background:var(--plate)}

/* ---------- Product: hotspots ---------- */
.explode{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;border:1px solid var(--rule);background:var(--plate)}
@media (max-width:960px){.explode{grid-template-columns:1fr}}
.drawing{position:relative;padding:clamp(12px,3vw,32px);border-right:1px solid var(--rule);background:
  linear-gradient(var(--rule) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/40px 40px,var(--ink)}
@media (max-width:960px){.drawing{border-right:0;border-bottom:1px solid var(--rule)}}
.drawing-in{position:relative}
.drawing svg{display:block;width:100%;height:auto;color:var(--fg)}
.hs{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid #fff;background:#d8230a;color:#fff;font-family:var(--f-mono);font-weight:700;font-size:.95rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(216,35,10,.6);animation:hsPulse 2.4s infinite;padding:0;line-height:1}
.hs[aria-pressed="true"]{background:#1f7fd6;animation:none;box-shadow:0 0 0 8px rgba(31,127,214,.3)}
.hs:hover{transform:scale(1.08)}
@keyframes hsPulse{0%{box-shadow:0 0 0 0 rgba(216,35,10,.55)}70%{box-shadow:0 0 0 14px rgba(216,35,10,0)}100%{box-shadow:0 0 0 0 rgba(216,35,10,0)}}
@media (max-width:560px){.hs{width:32px;height:32px;margin:-16px 0 0 -16px;font-size:.82rem}}
.part{padding:clamp(20px,3vw,36px);display:grid;gap:18px;align-content:start}
.part .num{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:4.4rem;line-height:.8;color:var(--red)}
.part p{color:var(--mute);font-size:1.06rem}
.part dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;border-top:1px solid var(--rule);padding-top:16px}
.part dt{font-family:var(--f-mono);font-size:.8rem;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;padding-top:2px}
.part dd{margin:0;font-weight:600}
.part-nav{display:flex;gap:10px;flex-wrap:wrap}
.part-list{display:flex;flex-wrap:wrap;gap:8px;padding:14px clamp(12px,3vw,32px);border-top:1px solid var(--rule);grid-column:1/-1}

/* ---------- TRL ---------- */
.trl{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;align-items:end;min-height:300px;padding-top:40px;position:relative}
.trl button{--h:calc(var(--i) * 11% + 12%);height:var(--h);min-height:56px;border:2px solid var(--rule);background:var(--plate);color:var(--fg);font:inherit;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:10px 8px;text-align:left;position:relative;transition:background-color .2s}
.trl{height:340px}
.trl button b{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:1.7rem;line-height:.9}
.trl button small{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.trl button.done{background:color-mix(in srgb,var(--blue) 26%,var(--plate));border-color:color-mix(in srgb,var(--blue) 60%,var(--rule))}
.trl button.now{background:#d8230a;border-color:#d8230a;color:#fff}
.trl button.now small{color:#fff}
.trl button.now::before{content:"Hier staan we";position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:.74rem;font-weight:700;background:var(--fg);color:var(--ink);padding:4px 8px}
.trl button[aria-pressed="true"]{outline:3px solid var(--fg);outline-offset:2px}
.trl button:hover{background:var(--plate2)}
.trl button.now:hover{background:#b8241a}
@media (max-width:720px){
  .trl{grid-template-columns:1fr;height:auto;min-height:0;padding-top:0;gap:6px}
  .trl button{height:auto;min-height:0;flex-direction:row;align-items:center;gap:12px;width:calc(var(--i) * 6% + 46%)}
  .trl button small{margin-top:0}
  .trl button.now::before{position:static;transform:none;order:3;margin-left:auto}
}
.trl-detail{margin-top:24px;border:1px solid var(--rule);background:var(--plate);padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
.trl-detail .big{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:4.6rem;line-height:.8}
.trl-detail p{color:var(--mute);max-width:64ch;margin-top:10px}
@media (max-width:560px){.trl-detail{grid-template-columns:1fr}}

/* ---------- Doneren ---------- */
.tracker{border:1px solid var(--rule);background:var(--plate);padding:clamp(20px,3.4vw,40px);display:grid;gap:26px}
.t-top{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:end;justify-content:space-between}
.t-amt{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:clamp(3rem,9vw,6.4rem);line-height:.85;letter-spacing:-.02em}
.t-amt small{font-size:.32em;font-style:normal;color:var(--mute);letter-spacing:0;margin-left:.2em}
.t-kpis{display:flex;gap:28px;flex-wrap:wrap}
.t-kpis div{display:grid;gap:2px}
.t-kpis b{font-family:var(--f-mono);font-size:1.5rem;font-variant-numeric:tabular-nums}
.t-kpis span{font-size:.9rem;color:var(--mute)}
.t-bar{position:relative;height:30px;background:var(--ink);border:1px solid var(--rule);margin-top:36px}
.t-bar .got{position:absolute;inset:0 auto 0 0;background:#d8230a}
.t-bar .yours{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(-45deg,var(--warn) 0 6px,transparent 6px 12px);opacity:.9}
.t-bar .ms{position:absolute;top:-36px;bottom:-6px;width:0;border-left:2px dashed var(--mute)}
.t-bar .ms span{position:absolute;top:0;left:6px;font-family:var(--f-mono);font-size:.72rem;color:var(--mute);white-space:nowrap}
.t-bar .ms.hit{border-left-color:var(--go)}
.t-bar .ms.hit span{color:var(--go)}
.t-bar .ms.last span{left:auto;right:6px}
.milestones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)}
@media (max-width:900px){.milestones{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.milestones{grid-template-columns:1fr}}
.milestones li{padding:22px 20px;border-right:1px solid var(--rule);display:grid;gap:10px;align-content:start;background:var(--ink)}
.milestones li:last-child{border-right:0}
@media (max-width:900px){.milestones li{border-bottom:1px solid var(--rule)}}
.milestones .st{font-family:var(--f-mono);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.milestones .st.hit{color:var(--go)}.milestones .st.next{color:var(--red)}.milestones .st.later{color:var(--mute)}
.milestones b{font-family:var(--f-mono);font-size:1.2rem}
.milestones p{color:var(--mute);font-size:.95rem}
.impact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;border:1px solid var(--rule)}
@media (max-width:900px){.impact{grid-template-columns:1fr}}
.impact>div{padding:clamp(20px,3vw,36px)}
.impact .in{background:var(--plate);border-right:1px solid var(--rule);display:grid;gap:18px;align-content:start}
@media (max-width:900px){.impact .in{border-right:0;border-bottom:1px solid var(--rule)}}
.amount-out{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:clamp(3rem,8vw,5rem);line-height:.9}
input[type=range].big{width:100%;accent-color:#d8230a;height:32px}
.alloc{display:grid;gap:16px}
.alloc .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:baseline}
.alloc .row b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.alloc .row .bar{grid-column:1/-1;height:12px;background:var(--rule);position:relative}
.alloc .row .bar i{position:absolute;inset:0 auto 0 0;background:var(--c)}
.alloc .row span{font-weight:600}
.alloc .row small{grid-column:1/-1;color:var(--mute);font-size:.92rem}
.don-card{background:var(--plate);border:1px solid var(--rule);padding:clamp(20px,3vw,32px);display:grid;gap:18px}
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.amounts button{font:inherit;font-family:var(--f-mono);font-weight:700;font-size:1.05rem;padding:14px 4px;background:var(--ink);border:2px solid var(--rule);color:var(--fg);cursor:pointer}
.amounts button[aria-pressed="true"]{border-color:var(--red);background:color-mix(in srgb,var(--red) 18%,var(--ink))}
.custom{display:flex;align-items:center;border:2px solid var(--rule);background:var(--ink)}
.custom span{padding:0 12px;font-family:var(--f-mono);color:var(--mute)}
.custom input{flex:1;min-width:0;background:transparent;border:0;color:var(--fg);font:inherit;font-family:var(--f-mono);font-size:1.05rem;padding:12px 12px 12px 0}
.custom input:focus{outline:none}
.custom:focus-within{border-color:var(--blue)}
.freq{display:flex;border:2px solid var(--rule)}
.freq button{flex:1;font:inherit;font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:.9rem;letter-spacing:.04em;padding:11px;background:transparent;color:var(--mute);border:0;cursor:pointer}
.freq button[aria-pressed="true"]{background:var(--fg);color:var(--ink)}
.don-card .btn{width:100%}
.don-msg{font-size:.95rem;color:var(--mute);border-top:1px solid var(--rule);padding-top:14px}
.don-msg.ok{color:var(--fg)}
.don-msg.err{color:var(--warn)}

/* ---------- FAQ ---------- */
.faq-tools{display:grid;gap:16px;margin-bottom:28px}
.search{display:flex;align-items:center;border:2px solid var(--rule);background:var(--plate)}
.search svg{width:22px;height:22px;margin:0 12px;color:var(--mute);flex:none}
.search input{flex:1;min-width:0;background:transparent;border:0;color:var(--fg);font:inherit;font-size:1.1rem;padding:14px 14px 14px 0}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--blue)}
.faq-list{display:grid;border-top:1px solid var(--rule)}
.faq-group h2{font-size:1.5rem;padding:28px 0 12px}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-family:var(--f-display);font-weight:700;font-size:1.15rem;line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{width:30px;height:30px;border:1px solid var(--rule);display:grid;place-items:center;flex:none;font-family:var(--f-mono);font-size:1.1rem;transition:transform .2s}
.qa[open] summary .pm{transform:rotate(45deg);border-color:var(--red);color:var(--red)}
.qa summary:hover{color:var(--red)}
.qa .ans{padding:0 0 22px;color:var(--mute);max-width:70ch;display:grid;gap:10px}
.qa .ans p{color:var(--mute)}
.faq-empty{padding:28px 0;color:var(--mute)}
.ask{margin-top:48px;border:2px solid var(--fg);padding:clamp(22px,3.4vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;position:relative}
@media (max-width:700px){.ask{grid-template-columns:1fr}}
.ask h2{font-size:clamp(1.8rem,4vw,2.8rem)}

/* ---------- Contact ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:var(--ink);padding:26px 22px;display:grid;gap:12px;align-content:start}
.card svg{width:30px;height:30px;color:var(--blue)}
.card p{color:var(--mute)}
.card .val{font-family:var(--f-mono);font-size:1rem;color:var(--fg);word-break:break-word}
.copy{font:inherit;font-size:.86rem;background:none;border:1px solid var(--rule);color:var(--fg);padding:7px 10px;cursor:pointer;justify-self:start}
.copy:hover{border-color:var(--fg)}
.routes{display:grid;border-top:1px solid var(--rule)}
.routes>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:16px 24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--rule)}
@media (max-width:760px){.routes>div{grid-template-columns:1fr}}
.routes p{color:var(--mute)}

/* ---------- Over ons ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:900px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.values{grid-template-columns:1fr}}
.values div{background:var(--ink);padding:26px 22px;display:grid;gap:10px;align-content:start}
.values b{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:2.6rem;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--blue)}
.values p{color:var(--mute)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.team{grid-template-columns:1fr}}
.person{border:1px solid var(--rule);background:var(--plate)}
.person .av{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,var(--plate2) 0 12px,var(--plate) 12px 24px);display:grid;place-items:center;color:var(--mute);font-family:var(--f-mono);font-size:.8rem}
.person div:last-child{padding:16px 18px;display:grid;gap:4px}
.person p{color:var(--mute);font-size:.95rem}
.timeline{list-style:none;margin:0;padding:0;display:grid;border-left:3px solid var(--rule);margin-left:8px}
.timeline li{position:relative;padding:0 0 28px 28px;display:grid;gap:6px}
.timeline li::before{content:"";position:absolute;left:-10px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid var(--rule)}
.timeline li.done::before{background:var(--blue);border-color:var(--blue)}
.timeline li.now::before{background:#d8230a;border-color:#d8230a;box-shadow:0 0 0 6px rgba(216,35,10,.25)}
.timeline .when{font-family:var(--f-mono);font-size:.8rem;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.timeline p{color:var(--mute)}

/* ===== v3 ===== */
.theme-btn .i-moon{display:none}
:root[data-mode="light"] .theme-btn .i-sun{display:none}
:root[data-mode="light"] .theme-btn .i-moon{display:block}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}

/* hartslaglijn */
.ecg{height:56px;position:relative;overflow:hidden}
.ecg svg{display:block;width:100%;height:100%}
.ecg path{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ecg .ecg-base{stroke:var(--rule);stroke-width:2}
.ecg .ecg-pulse{stroke:var(--red);stroke-width:3;stroke-dasharray:120 880;stroke-dashoffset:1000;animation:ecg 3.2s linear infinite;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--red) 60%,transparent))}
@keyframes ecg{to{stroke-dashoffset:0}}
:root[data-motion="uit"] .ecg .ecg-pulse{stroke-dasharray:none;stroke-dashoffset:0;stroke-width:2;filter:none}
@media (prefers-reduced-motion:reduce){.ecg .ecg-pulse{stroke-dasharray:none;stroke-dashoffset:0;stroke-width:2;filter:none}}
.ecg-divider{position:relative;z-index:5;height:60px;margin:-30px 0;pointer-events:none}
.ecg-divider .ecg-base{stroke:var(--rule);stroke-width:1.5}
footer.site{border-top:0}
main:has(> .band:last-child) + .ecg-foot .ecg-base{stroke:color-mix(in srgb,var(--fg) 35%,transparent)}
main:has(> .band:last-child) + .ecg-foot .ecg-pulse{stroke:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.5))}

/* footer contact */
.f-contact{gap:14px!important}
.f-contact li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:1.06rem;color:var(--fg);line-height:1.45}
.f-contact svg{width:22px;height:22px;color:var(--red);margin-top:2px}
.f-kvk{font-family:var(--f-mono);font-size:.7rem;font-weight:700;color:var(--red);margin-top:4px}

/* film-popup */
dialog.film{width:min(1240px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);margin:auto;padding:0;border:1px solid var(--rule);background:var(--plate);color:var(--fg);box-shadow:var(--shadow);overflow:auto}
dialog.film::backdrop{background:rgba(8,11,17,.82);backdrop-filter:blur(4px)}
.film-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--plate);z-index:2}
.film-head h2{font-size:clamp(1.2rem,2.4vw,1.7rem)}
dialog.film .player{border:0;border-bottom:1px solid var(--rule)}
dialog.film .transcript{border:0}
@media (max-width:980px){dialog.film .chapters{max-height:220px}}
body.modal-open{overflow:hidden}

/* onzekerheden / daarom de ERA */
.doubt{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule)}
.doubt>div{padding:clamp(22px,3.4vw,40px);display:grid;gap:20px;align-content:start}
.doubt>div:first-child{background:var(--plate);border-right:1px solid var(--rule)}
@media (max-width:900px){.doubt{grid-template-columns:1fr}.doubt>div:first-child{border-right:0;border-bottom:1px solid var(--rule)}}
.doubt h3{font-size:clamp(1.5rem,2.6vw,2rem);font-style:italic;font-weight:900;text-transform:uppercase}
.marks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.marks li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;font-size:1.06rem}
.marks li::before{content:"";width:30px;height:30px;display:block;background-repeat:no-repeat;background-position:center;background-size:16px}
.marks.no li::before{border:2px solid var(--red);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23e8463a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.marks.yes li::before{background-color:#1f7fd6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.marks.no li{color:var(--mute)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-top:0}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}
.pillars div{background:var(--ink);padding:24px 22px;display:grid;gap:10px;align-content:start}
.pillars b{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.pillars p{color:var(--mute)}

/* ervaar het zelf */
.try{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.try{grid-template-columns:1fr}}
.try a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;align-items:end;padding:clamp(22px,3vw,34px);border:1px solid var(--rule);background:var(--plate);text-decoration:none;color:var(--fg);transition:border-color .2s,transform .2s;position:relative;overflow:hidden}
.try a:hover{border-color:var(--red);transform:translateY(-3px)}
.try .big{font-family:var(--f-mono);font-weight:700;font-size:clamp(2.6rem,6vw,4rem);line-height:.9;color:var(--red);grid-column:1/-1;font-variant-numeric:tabular-nums}
.try h3{font-size:clamp(1.5rem,2.6vw,2rem);font-style:italic;font-weight:900;text-transform:uppercase}
.try p{color:var(--mute);margin-top:8px}
.try .go{width:52px;height:52px;display:grid;place-items:center;background:#d8230a;color:#fff}
.try .go svg{width:22px;height:22px}
.who-row{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:860px){.who-row{grid-template-columns:1fr}}
.who-row .who-list{margin-top:0;grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.who-row .who-list{grid-template-columns:1fr 1fr}}
@media (min-width:981px){.player .chapters{contain:size}}
/* eindscherm film */
.endcard{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;padding:20px;background:rgba(17,22,31,.88);color:#fff}
.endcard-q{font-family:var(--f-display);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(2rem,6vw,4.2rem);line-height:.9}
@media (max-width:560px){.endcard .btn{font-size:.85rem;padding:.7em 1em}}

/* productillustratie */
.era-drawing .dr-shadow{fill:#000;opacity:.35}
.era-drawing .dr-ground{stroke:var(--mute);stroke-width:2;fill:none}
.era-drawing .dr-hatch{stroke:var(--rule);stroke-width:1.5;fill:none}
.era-drawing .dr-person{fill:color-mix(in srgb,var(--fg) 7%,transparent);stroke:color-mix(in srgb,var(--fg) 22%,transparent);stroke-width:1.5;stroke-dasharray:6 6}
.era-drawing .dr-parts g{stroke:var(--fg);stroke-width:2.5;stroke-linejoin:round;transition:stroke .2s,filter .2s}
.era-drawing .dr-fill{fill:color-mix(in srgb,var(--fg) 12%,var(--ink))}
.era-drawing .dr-blue{fill:#1f7fd6}
.era-drawing .dr-dark{fill:var(--fg)}
.era-drawing .dr-bolt{fill:var(--ink)}
.era-drawing .dr-detail{fill:none;stroke-width:1.5;opacity:.45}
.era-drawing .dr-detail-inv{fill:none;stroke:var(--ink);stroke-width:1.5}
.era-drawing .dr-parts g.sel{stroke:#e8463a;filter:drop-shadow(0 0 6px rgba(232,70,58,.55))}
.era-drawing .dr-parts g.sel .dr-fill{fill:color-mix(in srgb,#e8463a 18%,var(--ink))}
.era-drawing .dr-red-f{fill:#e8463a}
.era-drawing .dr-dim-l{stroke:var(--mute);stroke-width:1;stroke-dasharray:3 3;fill:none}
.era-drawing .dr-dim-a{stroke:#e8463a;stroke-width:2;fill:none}
.era-drawing .dr-dim text{font-family:var(--f-mono);font-size:16px;font-weight:700;fill:#e8463a}
.era-drawing .dr-move path{stroke:#e8463a;stroke-width:2.5;fill:none;stroke-dasharray:6 5}
.era-drawing .dr-move text{font-family:var(--f-mono);font-size:14px;fill:var(--mute)}
.hs{width:34px;height:34px;margin:-17px 0 0 -17px;font-size:.88rem}
@media (max-width:560px){.hs{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:.76rem}}

/* logo (SVG) */
.logo .logo-svg{display:block;height:28px;width:auto;color:var(--fg)}
.f-grid .logo .logo-svg{height:34px}
@media (max-width:560px){.logo .logo-svg{height:24px}}
.f-grid a.btn,.f-grid a.btn:hover{color:#fff;text-decoration:none}
/* teamfoto's */
.person .av{aspect-ratio:1/1;background:#e6e6e6;overflow:hidden}
.person .av img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.person:hover .av img{transform:scale(1.03)}
.person h3{font-size:1.3rem}
.person p{font-family:var(--f-mono);font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
body.menu-open .nav .donate-top,body.menu-open .progress{visibility:hidden}
/* echte productillustratie */
@media (min-width:961px){.explode{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.drawing{background:linear-gradient(rgba(27,34,48,.06) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(27,34,48,.06) 1px,transparent 1px) 0 0/32px 32px,#f4f6f9}
.drawing-in{max-width:560px;margin:0 auto}
.drawing svg.era-real{display:block;width:100%;height:auto}
.drawing .hs{box-shadow:0 0 0 0 rgba(216,35,10,.5),0 2px 8px rgba(0,0,0,.25)}
.drawing .hs[aria-pressed="true"]{box-shadow:0 0 0 8px rgba(31,127,214,.28),0 2px 8px rgba(0,0,0,.25)}

@media (max-width:560px){.drawing .hs{width:26px;height:26px;margin:-13px 0 0 -13px;font-size:.72rem;border-width:1.5px}}
/* donatieformulier: velden */
.fields{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field span{font-weight:600}
.field span small{font-weight:400;color:var(--mute)}
.field input{font:inherit;font-size:1.02rem;color:var(--fg);background:var(--ink);border:2px solid var(--rule);padding:11px 12px;min-width:0;width:100%}
.field input:focus{outline:none;border-color:var(--blue)}
.field>small{color:var(--mute);font-size:.88rem}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:.97rem;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:#d8230a}
.mandate{font-size:.92rem;color:var(--mute);border-left:3px solid var(--red);padding:8px 12px;background:var(--ink)}
.mandate strong{color:var(--fg)}
.pay-note{display:flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:.78rem;color:var(--mute)}
.btn:disabled{opacity:.7;cursor:progress;transform:none}
.f-contact a{color:var(--fg)}

/* zachte overgang rond de hartslaglijn */
.hero::after{-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 100%);mask-image:linear-gradient(180deg,#000 35%,transparent 100%)}
.hero{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 70%,color-mix(in srgb,var(--blue) 6%,var(--ink)) 100%)}
.hero + .ecg-divider + section{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 6%,var(--ink)) 0,var(--ink) 260px)}
main > .band:last-child{background:linear-gradient(180deg,var(--band) 0%,var(--band) 40%,color-mix(in srgb,var(--band) 50%,var(--ink)) 100%)}
main:has(> .band:last-child) ~ footer.site{background:linear-gradient(180deg,color-mix(in srgb,var(--band) 50%,var(--ink)) 0,color-mix(in srgb,var(--band) 12%,var(--ink)) 140px,var(--ink) 320px)}
.hero::after{inset:auto -10% 0 40%;height:80%;-webkit-mask-image:linear-gradient(180deg,#000 15%,transparent 90%);mask-image:linear-gradient(180deg,#000 15%,transparent 90%)}
/* contact: e-mail per onderwerp */
.routes-table{table-layout:fixed;min-width:640px}
.routes-table col{width:auto}
.routes-table th[scope="row"]{font-family:var(--f-display);font-size:1.12rem;font-weight:800;letter-spacing:0;text-transform:none;color:var(--fg);width:22%}
.routes-table td{color:var(--mute);vertical-align:middle}
.routes-table th,.routes-table td{padding:18px 16px;vertical-align:middle}
.routes-table thead th:nth-child(1){width:22%}.routes-table thead th:nth-child(2){width:40%}.routes-table thead th:nth-child(3){width:26%}.routes-table thead th:nth-child(4){width:12%}
.routes-table td:last-child{text-align:right}
.routes-table a.mail{font-family:var(--f-mono);font-size:.95rem;color:var(--fg);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.22em;word-break:break-all}
.routes-table a.mail:hover{color:var(--red)}
.routes-table tbody tr:last-child th,.routes-table tbody tr:last-child td{border-bottom:0}
@media (max-width:700px){
  .routes-tbl{overflow:visible;border:0;background:none}
  .routes-table,.routes-table tbody,.routes-table tr,.routes-table th,.routes-table td{display:block;width:100%!important;min-width:0}
  .routes-table thead{display:none}
  .routes-table tr{border:1px solid var(--rule);background:var(--plate);padding:16px;margin-bottom:12px;display:grid;gap:6px}
  .routes-table th,.routes-table td{padding:0;border:0;text-align:left!important}
  .routes-table td:last-child{margin-top:6px}
}
@media (max-width:700px){
  table.data.routes-table th,table.data.routes-table td{padding:0;border:0}
  table.data.routes-table tr{gap:8px;padding:18px}
  table.data.routes-table td:last-child{margin-top:4px}
}
/* lijntekeningen in "Ervaar het zelf" */
.try a{min-height:260px}
.try a>*:not(.try-art){position:relative;z-index:1}
.try-art{position:absolute;right:-8px;bottom:-6px;width:58%;max width:360px;max-width:360px;height:auto;pointer-events:none;z-index:0;opacity:.9;transition:opacity .3s,transform .4s}
.try a:hover .try-art{opacity:1;transform:scale(1.03)}
.try-art .ln{stroke:color-mix(in srgb,var(--fg) 24%,transparent)}
.try-art .ac{stroke:var(--red);opacity:.75}
.try-art .ac-soft{opacity:.4}
.try-art .lbl{font-family:var(--f-mono);font-size:13px;fill:color-mix(in srgb,var(--fg) 45%,transparent)}
.try a:hover .try-art .ln{stroke:color-mix(in srgb,var(--fg) 36%,transparent)}
.try-art .press{animation:tryPress .545s cubic-bezier(.5,0,.5,1) infinite}
.try-art .rings{transform-origin:150px 170px;animation:tryRing .545s ease-out infinite}
.try-art .hand-rot{animation:tryRot 12s linear infinite}
@keyframes tryPress{0%,100%{transform:translateY(0)}45%{transform:translateY(12px)}}
@keyframes tryRing{0%,40%{opacity:0;transform:scale(.9)}60%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes tryRot{to{transform:rotate(360deg)}}
@media (max-width:560px){.try-art{width:70%;opacity:.55}.try a{min-height:230px}}
.try a{min-height:300px;align-content:space-between}
.try-art{top:-6px;bottom:auto;right:-6px;width:50%;max-width:300px}
.try a h3,.try a p{max-width:62%}
.try .big{max-width:55%}
@media (max-width:560px){.try-art{width:56%;opacity:.7}.try a h3,.try a p{max-width:none}.try a{min-height:0;padding-top:clamp(22px,3vw,34px)}}
.try-art .hand{stroke:color-mix(in srgb,var(--fg) 34%,transparent);fill:var(--plate)}
.try-art .fo{stroke:color-mix(in srgb,var(--fg) 34%,transparent)}
.try-art .fi{stroke:var(--plate)}
.try a:hover .try-art .hand,.try a:hover .try-art .fo{stroke:color-mix(in srgb,var(--fg) 50%,transparent)}
.try-hands{top:auto;bottom:-6px}
.try-hands{right:96px;bottom:-4px;width:40%;max-width:250px}
@media (max-width:560px){.try-hands{right:78px;width:46%}}
@media (max-width:560px){
  .try a{grid-template-columns:minmax(0,1fr) auto}
  .try .try-art{position:relative;inset:auto;grid-column:1/-1;justify-self:center;width:72%;max-width:280px;margin:-8px 0 -4px;opacity:1}
  .try a[href="ritme.html"] p,.try a h3,.try a p,.try .big{max-width:none}
}
/* Voel het ritme: tellen */
.try-count{top:-6px;bottom:auto;right:-6px;width:50%;max-width:300px}
.try-art .cnt{fill:color-mix(in srgb,var(--fg) 16%,transparent);animation:cntFill 16.35s steps(1,end) infinite}
@keyframes cntFill{0%{fill:var(--red)}96%{fill:var(--red)}100%{fill:color-mix(in srgb,var(--fg) 16%,transparent)}}
.try-count .rings{transform-origin:150px 140px}
:root[data-motion="uit"] .try-art .cnt{animation:none;fill:color-mix(in srgb,var(--fg) 16%,transparent)}
:root[data-motion="uit"] .try-art .cnt:nth-child(-n+12){fill:var(--red)}
@media (prefers-reduced-motion:reduce){.try-art .cnt:nth-child(-n+12){fill:var(--red)}}
.try-count .rings{transform-origin:150px 124px}
.try-count .rings{transform-origin:118px 150px}
.try-count circle.ac[fill]{fill:var(--red)}
/* lijntekening op de testpagina's */
.art-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(24px,4vw,56px);align-items:center}
.art-hero .try-art.page-art{position:static;inset:auto;width:100%;max-width:380px;justify-self:end;opacity:1}
.art-hero .try-art .ln{stroke:color-mix(in srgb,var(--fg) 30%,transparent)}
@media (max-width:860px){.art-hero .wrap{grid-template-columns:1fr}.art-hero .try-art.page-art{order:-1;justify-self:start;max-width:300px;margin-bottom:-8px}}
/* drie stappen: van prototype naar de praktijk */
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.steps3 li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:26px 22px;border-right:1px solid var(--rule);background:var(--ink);align-content:start}
.steps3 li:last-child{border-right:0}
.steps3 .n{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:3.4rem;line-height:.8;color:var(--red)}
.steps3 .st{font-family:var(--f-mono);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.steps3 h3{margin-bottom:8px}
.steps3 p{color:var(--mute)}
@media (max-width:900px){.steps3{grid-template-columns:1fr}.steps3 li{border-right:0;border-bottom:1px solid var(--rule)}.steps3 li:last-child{border-bottom:0}}
.steps3.on-band{grid-template-columns:1fr;border:0;margin-top:14px;gap:10px}
.steps3.on-band li{background:rgba(0,0,0,.16);border:0;padding:14px 16px}
.steps3.on-band .n{color:#fff;font-size:2.2rem}
.steps3.on-band .st{color:rgba(255,255,255,.8)}
.steps3.on-band h3{color:#fff;font-size:1.12rem;margin-bottom:0}
.steps3.on-band p:not(.st){display:none}
/* opgebouwd totaal + donateurs */
.total{margin-top:28px;border:1px solid var(--rule);background:var(--plate);padding:clamp(20px,3.4vw,36px);display:grid;gap:18px}
.tot-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.donor-wrap{border-top:1px solid var(--rule);padding-top:20px;display:grid;gap:14px}
.donor-title{font-size:1.3rem}
.donors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:900px){.donors{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.donors{grid-template-columns:1fr}}
.donors li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;padding:12px 14px;background:var(--ink);border:1px solid var(--rule)}
.donors .d-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donors .d-name.anon{color:var(--mute);font-style:italic;font-weight:500}
.donors .d-amt{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.donors .d-when{grid-column:1/-1;font-family:var(--f-mono);font-size:.74rem;color:var(--mute)}
.donors-empty{color:var(--mute)}
#donorsMore{justify-self:start}
/* doelen */
.goals{margin-top:28px;display:grid;gap:18px}
.goal-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--rule)}
@media (max-width:860px){.goal-grid{grid-template-columns:1fr}}
.goal{padding:22px;border-right:1px solid var(--rule);display:grid;gap:8px;align-content:start;background:var(--ink)}
.goal:last-child{border-right:0}
@media (max-width:860px){.goal{border-right:0;border-bottom:1px solid var(--rule)}.goal:last-child{border-bottom:0}}
.goal .g-tag{font-family:var(--f-mono);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.goal .g-amt{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:clamp(2rem,3.6vw,2.8rem);line-height:.9}
.goal p{color:var(--mute)}
.goal-total{background:color-mix(in srgb,var(--red) 12%,var(--ink))}
.total .t-bar{margin-top:30px}
@media (max-width:560px){.t-bar .ms-long{display:none}}
/* doellijnen bij opgebouwd totaal: labels gelijk uitgelijnd links van de lijn */
.total .t-bar{margin-top:40px}
.total .t-bar .ms{top:-30px;bottom:-8px}
.total .t-bar .ms span{left:auto;right:8px;top:0;line-height:16px;font-size:.74rem}
.total .t-bar .ms span .ms-long{position:static;font-size:inherit}