/* website_l2s. site.css
 * GEGENEREERD door tools/rebuild-css.js uit het klikbare prototype plus
 * tools/css-additions.css. Niet met de hand bewerken.
 */

@font-face{font-family:"Inter var";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter var";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter var";src:url("../fonts/inter-750.woff2") format("woff2");font-weight:750;font-style:normal;font-display:swap}

:root{
  --ink:#0d1520;--ink-2:#334154;--muted:#5d6b7e;--muted-2:#8493a5;
  --bg:#f7fafc;--bg-2:#eef4f8;--surface:#fff;--raise:#f2f7fa;
  --line:rgba(13,21,32,.09);--line-2:var(--track);
  --brand:#0d4f5c;--brand-hi:#0a3b45;--glow:#84dff1;--glow-soft:rgba(132,223,241,.22);--focus:#0d6f86;
  --m-sponsor:#dff2cb;--m-sponsor-ink:#24582f;
  --m-leden:#c9eff7;--m-leden-ink:#0d4f5c;
  --m-comm:#fae1c8;--m-comm-ink:#8a5220;
  --m-site:#f6e6a8;--m-site-ink:#6b5410;
  --m-vrijw:#e4dcf9;--m-vrijw-ink:#4a3a8f;
  --m-event:#fbd6e2;--m-event-ink:#8a2f52;
  --page:var(--m-leden);--page-ink:var(--m-leden-ink);
  /* tokens die NIET meedraaien met de modus: vlakken die in beide modi donker blijven */
  --ink-surface:#0d1520;--on-ink:#eaf2f6;--on-brand:#ffffff;
  --header-bg:rgba(247,250,252,.87);
  --track:rgba(13,21,32,.13);--tint-line:rgba(13,21,32,.12);--tint-badge:rgba(255,255,255,.7);
  --r:16px;--r-s:11px;--r-l:26px;
  --sh-s:0 2px 10px rgba(13,21,32,.05);--sh:0 10px 34px rgba(13,21,32,.07);--sh-l:0 26px 70px rgba(13,21,32,.11);
  --max:1200px;--sans:"Inter var",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* ══════════════════════════════════════════════════════════════════════════
   DONKERE MODUS — alleen tokens, geen enkele component herschreven.
   Dat is precies waarom het tokensysteem er is: één laag omzetten en de hele
   site kantelt mee. De ZES MODULEKLEUREN blijven herkenbaar dezelfde kleuren,
   maar draaien om: donker vlak + lichte inkt i.p.v. pastel + donkere inkt.
   Volgorde: systeemvoorkeur is de default, een expliciete keuze wint altijd.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8eef4;--ink-2:#b6c4d1;--muted:#8b9aa8;--muted-2:#6d7b89;
    --bg:#0d1117;--bg-2:#121922;--surface:#161d26;--raise:#1d2530;
    --line:rgba(232,238,244,.10);--line-2:rgba(232,238,244,.19);
    --brand:#6fd0e6;--brand-hi:#93e2f3;--glow:#84dff1;--glow-soft:rgba(132,223,241,.13);--focus:#84dff1;
    --m-sponsor:#1e3324;--m-sponsor-ink:#a6dfb0;
    --m-leden:#123a45;--m-leden-ink:#93dff0;
    --m-comm:#3a2a17;--m-comm-ink:#f0c894;
    --m-site:#37300e;--m-site-ink:#ead67c;
    --m-vrijw:#282249;--m-vrijw-ink:#c2b5f5;
    --m-event:#3a1f2c;--m-event-ink:#f5adc3;
    --sh-s:0 2px 10px rgba(0,0,0,.34);--sh:0 10px 34px rgba(0,0,0,.42);--sh-l:0 26px 70px rgba(0,0,0,.52);
    --ink-surface:#070b10;--on-ink:#e8eef4;--on-brand:#08222a;
    --header-bg:rgba(13,17,23,.86);
    --track:rgba(232,238,244,.16);--tint-line:rgba(232,238,244,.14);--tint-badge:rgba(255,255,255,.16);
  }
}
:root[data-theme="dark"]{
  --ink:#e8eef4;--ink-2:#b6c4d1;--muted:#8b9aa8;--muted-2:#6d7b89;
  --bg:#0d1117;--bg-2:#121922;--surface:#161d26;--raise:#1d2530;
  --line:rgba(232,238,244,.10);--line-2:rgba(232,238,244,.19);
  --brand:#6fd0e6;--brand-hi:#93e2f3;--glow:#84dff1;--glow-soft:rgba(132,223,241,.13);--focus:#84dff1;
  --m-sponsor:#1e3324;--m-sponsor-ink:#a6dfb0;
  --m-leden:#123a45;--m-leden-ink:#93dff0;
  --m-comm:#3a2a17;--m-comm-ink:#f0c894;
  --m-site:#37300e;--m-site-ink:#ead67c;
  --m-vrijw:#282249;--m-vrijw-ink:#c2b5f5;
  --m-event:#3a1f2c;--m-event-ink:#f5adc3;
  --sh-s:0 2px 10px rgba(0,0,0,.34);--sh:0 10px 34px rgba(0,0,0,.42);--sh-l:0 26px 70px rgba(0,0,0,.52);
  --ink-surface:#070b10;--on-ink:#e8eef4;--on-brand:#08222a;
  --header-bg:rgba(13,17,23,.86);
  --track:rgba(232,238,244,.16);--tint-line:rgba(232,238,244,.14);--tint-badge:rgba(255,255,255,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;padding-bottom:54px}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--brand);color:var(--on-brand);padding:10px 16px;border-radius:10px}
.skip:focus{left:8px}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.022em;font-weight:760}
h1{font-size:clamp(31px,4.8vw,56px);letter-spacing:-.032em}
h2{font-size:clamp(24px,3.2vw,38px)}h3{font-size:17.5px}h4{font-size:14.5px}
p{margin:0}
.lead{font-size:clamp(16px,1.32vw,18.5px);color:var(--ink-2);line-height:1.62}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.kicker{font-size:12.4px;font-weight:730;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.section{padding:clamp(48px,6.6vw,92px) 0}
.section--soft{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.section--flat{background:var(--bg-2)}
.section--ink{background:var(--ink-surface);color:#eaf2f6}
.section--ink h2,.section--ink h3{color:#fff}.section--ink .lead{color:#a9bccb}
.head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(18px,4vw,52px);align-items:end;margin-bottom:clamp(24px,3.4vw,42px)}
@media(max-width:880px){.head{grid-template-columns:1fr;align-items:start;gap:13px}}
code{font-family:var(--mono);font-size:.88em;background:var(--raise);padding:2px 6px;border-radius:6px;border:1px solid var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 22px;
  border-radius:999px;font-weight:685;font-size:15.4px;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn--pri{background:var(--brand);color:var(--on-brand);box-shadow:0 8px 22px rgba(13,79,92,.28)}
.btn--pri:hover{background:var(--brand-hi)}
.btn--sec{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--sh-s)}
.btn--sec:hover{border-color:var(--brand);color:var(--brand)}
.btn--lite{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.26)}
.btn--lite:hover{background:rgba(255,255,255,.21)}
.btn--sm{min-height:42px;padding:9px 18px;font-size:14.4px}
.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.i-s{width:15px;height:15px}

/* ── microbar + header ── */
.microbar{background:var(--ink-surface);color:#b9cbd6;font-size:12.4px}
.microbar .wrap{display:flex;align-items:center;gap:15px;min-height:38px;flex-wrap:wrap}
.microbar b{color:#fff;font-weight:650}.microbar .sp{flex:1}
.dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex:none;box-shadow:0 0 0 4px rgba(74,222,128,.16)}
@media(max-width:820px){.microbar .hide-s{display:none}}
header.site{position:sticky;top:0;z-index:90;background:var(--header-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:11px;min-height:72px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;font-size:18.5px}
.brand .mark{width:33px;height:33px;border-radius:10px;background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font-size:12.5px;font-weight:800;letter-spacing:-.04em;flex:none}
.nav .sp{flex:1}
.navlinks{display:flex;align-items:center;gap:3px}.navlinks>*{position:relative}
.navlink{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px;font-size:14.8px;font-weight:560;color:var(--ink-2)}
.navlink:hover{background:var(--raise);color:var(--ink-surface)}
.navlink.is-active{background:var(--raise);color:var(--brand);font-weight:680}
.navlink[aria-expanded="true"]{background:var(--raise);color:var(--ink-surface)}
.navlink[aria-expanded="true"] .chev{transform:rotate(180deg)}
.chev{transition:transform .18s ease}
.nav-cta{display:flex;align-items:center;gap:9px}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);align-items:center;justify-content:center;background:var(--surface)}
@media(max-width:1140px){.navlinks,.nav-cta .btn--sec{display:none}.burger{display:inline-flex}}
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(880px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-l);padding:20px;opacity:0;visibility:hidden;transition:.18s ease;z-index:95}
.mega[data-open="1"]{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mega-item{display:flex;gap:11px;padding:11px;border-radius:14px;transition:background .15s}
.mega-item:hover{background:var(--raise)}
.mega-item .chip{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.mega-item strong{display:block;font-size:14.4px;font-weight:680;letter-spacing:-.012em}
.mega-item span{font-size:12.4px;color:var(--muted);line-height:1.42}
.mega-foot{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.4px;color:var(--muted)}
@media(max-width:760px){.mega-grid{grid-template-columns:1fr}}
/* mobiel paneel */
.msheet{position:fixed;inset:0;z-index:120;background:rgba(13,21,32,.5);opacity:0;visibility:hidden;transition:.2s}
.msheet[data-open="1"]{opacity:1;visibility:visible}
.msheet__panel{position:absolute;right:0;top:0;bottom:0;width:min(380px,90vw);background:var(--bg);
  padding:18px;overflow:auto;transform:translateX(100%);transition:transform .24s ease}
.msheet[data-open="1"] .msheet__panel{transform:none}
.msheet__panel h4{margin:16px 0 8px;color:var(--muted);font-size:11.6px;letter-spacing:.09em;text-transform:uppercase}
.msheet__panel a{display:block;padding:11px 13px;border-radius:11px;background:var(--surface);border:1px solid var(--line);margin-bottom:6px;font-size:14.6px;font-weight:600}

/* ── kaarten/grids ── */
.grid{display:grid;gap:13px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:21px;box-shadow:var(--sh-s);transition:.18s ease}
.card:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:14.3px;line-height:1.58}
.card .chip{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:13px}

/* het losse onthul-paneel is vervangen door SECTIE-COLLAPSE (.sc) — zie de rust-pass onderaan */
@keyframes rvIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ── hero ── */
.hero{position:relative;padding:clamp(40px,5.4vw,80px) 0 clamp(36px,4.4vw,64px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -20% auto -20%;height:620px;z-index:-1;
  background:radial-gradient(60% 60% at 50% 0%,var(--glow-soft),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,4.6vw,60px);align-items:center}
@media(max-width:1040px){.hero-grid{grid-template-columns:1fr;gap:32px}}
.hero h1{margin:16px 0 0}
.hero .lead{margin-top:18px;max-width:37ch}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.hero-note{margin-top:14px;font-size:13.4px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-note svg{color:#16a34a}
.hero-roles{margin-top:28px;padding-top:21px;border-top:1px solid var(--line)}
.hero-roles .kicker{margin-bottom:10px;display:block}
.rolerow{display:flex;gap:7px;flex-wrap:wrap}
.rolechip{padding:7px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);
  font-size:13.4px;font-weight:560;color:var(--ink-2);box-shadow:var(--sh-s)}
.rolechip:hover{border-color:var(--brand);color:var(--brand)}
.motor{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-l);padding:20px}
.motor-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.motor-top .kicker{flex:1}
.motor-ring{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}
.mtile{border-radius:15px;padding:13px 12px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--tint-line);position:relative}
.mtile strong{font-size:13px;font-weight:700;letter-spacing:-.014em;line-height:1.25}
.mtile em{font-style:normal;font-size:11.4px;opacity:.78;font-weight:600}
.mtile .on{position:absolute;top:10px;right:10px;width:16px;height:16px;border-radius:50%;background:var(--tint-badge);display:grid;place-items:center}
.motor-bar{display:flex;align-items:center;gap:12px;padding:14px;border-radius:15px;background:var(--raise)}
.motor-bar div{flex:1}.motor-bar .kicker{font-size:11px}
.motor-bar b{font-size:23px;letter-spacing:-.03em;display:block;margin-top:1px}

/* ── proofstrip ── */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.proof .wrap{display:flex;align-items:center;gap:clamp(13px,2.8vw,32px);flex-wrap:wrap;padding-top:19px;padding-bottom:19px}
.proof .lbl{font-size:12.4px;font-weight:730;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.proof b{font-size:15.4px;font-weight:720;letter-spacing:-.02em;color:var(--ink-2)}
.proof a:hover b{color:var(--brand)}

/* ── historie ── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(20px,3.6vw,50px);align-items:start}
@media(max-width:960px){.split{grid-template-columns:1fr}}
.story{background:var(--ink-surface);color:#dfeaf1;border-radius:var(--r-l);padding:clamp(22px,3vw,32px);position:relative;overflow:hidden}
.story::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(132,223,241,.22),transparent 68%)}
.story h3{color:#fff;font-size:20.5px;margin-bottom:12px}
.story p{color:#a9bccb;font-size:14.6px;line-height:1.68}.story p+p{margin-top:11px}
.story .sig{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;gap:11px;font-size:13.4px;color:#8fa6b6}
.story .sig i{width:36px;height:36px;border-radius:50%;background:var(--glow);color:var(--ink-surface);display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:13px;flex:none}

/* ── calculator ── */
.calc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(16px,2.6vw,28px);align-items:start}
@media(max-width:1040px){.calc{grid-template-columns:1fr}}
.modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:920px){.modgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.modgrid{grid-template-columns:1fr}}
.mod{position:relative;text-align:left;border-radius:18px;padding:18px;border:1.5px solid transparent;background:var(--surface);
  box-shadow:var(--sh-s);transition:.18s ease;display:flex;flex-direction:column;gap:9px;min-height:196px}
.mod:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.mod[aria-pressed="true"]{border-color:currentColor;box-shadow:var(--sh)}
.mod .chip{width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.mod h3{font-size:16.2px}
.mod p{font-size:13.2px;color:var(--muted);line-height:1.52;flex:1}
.mod .price{font-size:14.4px;font-weight:760;letter-spacing:-.02em}
.mod .price small{font-weight:560;color:var(--muted);font-size:12.4px;letter-spacing:0}
.mod .more{font-size:12.6px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:5px}
.mod .sw{position:absolute;top:16px;right:16px;width:40px;height:23px;border-radius:999px;background:var(--track);transition:.18s}
.mod .sw::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}
.mod[aria-pressed="true"] .sw{background:currentColor}
.mod[aria-pressed="true"] .sw::after{transform:translateX(17px)}
.mod .free{position:absolute;top:16px;right:16px;font-size:10.8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px}
.bill{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-l);padding:22px}
.sliders{margin:16px 0 8px;display:grid;gap:14px}
.sl label{display:flex;justify-content:space-between;align-items:baseline;font-size:13.4px;font-weight:620;color:var(--ink-2);margin-bottom:6px}
.sl label b{font-size:15px;color:var(--ink-surface)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--brand) var(--pct,40%),var(--tint-line) var(--pct,40%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  border:2.5px solid var(--brand);cursor:pointer;box-shadow:var(--sh-s)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid var(--brand);cursor:pointer}
.lines{margin:16px 0;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.line{display:flex;justify-content:space-between;gap:12px;font-size:13.6px;color:var(--ink-2)}
.line span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.line i{width:9px;height:9px;border-radius:3px;flex:none}
.line b{font-variant-numeric:tabular-nums;font-weight:680;white-space:nowrap}
.line.is-off{opacity:.34}
.total{border-top:1.5px solid var(--ink);margin-top:14px;padding-top:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.total .kicker{margin-bottom:2px;display:block}
.total b{font-size:35px;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.total .per{font-size:13.2px;color:var(--muted);font-weight:600;text-align:right}
.save{margin-top:12px;padding:11px 13px;border-radius:12px;background:var(--m-sponsor);color:var(--m-sponsor-ink);
  font-size:13px;font-weight:640;display:flex;gap:9px;align-items:flex-start}
.bill .btn{width:100%;margin-top:14px}
.bill .fine{margin-top:10px;font-size:12.1px;color:var(--muted-2);line-height:1.5;text-align:center}

/* ── flow / donker ── */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:st}
@media(max-width:880px){.flow{grid-template-columns:1fr}}
.step{position:relative;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:22px}
.step::before{counter-increment:st;content:counter(st);position:absolute;top:-14px;left:22px;width:30px;height:30px;border-radius:50%;
  background:var(--glow);color:var(--ink-surface);display:grid;place-items:center;font-weight:800;font-size:14px}
.step h3{margin:10px 0 8px;font-size:17px}
.step p{color:#9db2c2;font-size:14px;line-height:1.6}
.auto{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(18px,3vw,32px);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-l);padding:clamp(20px,3vw,30px)}
@media(max-width:960px){.auto{grid-template-columns:1fr}}
.tl{list-style:none;margin:14px 0 0;padding:0}
.tl li{position:relative;padding:0 0 16px 30px;border-left:1.5px dashed rgba(255,255,255,.2);color:#b7c9d6;font-size:14px}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-6px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 4px rgba(132,223,241,.16)}
.tl li b{color:#fff;font-weight:660}
.checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:14.2px;color:#cfe0ea;line-height:1.55}
.checks li svg{color:#4ade80;margin-top:2px;flex:none}
.checks li b{color:#fff;font-weight:660}

/* ── integraties / onboarding / rollen ── */
.intg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:920px){.intg{grid-template-columns:repeat(2,1fr)}}
.itile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 16px;box-shadow:var(--sh-s);transition:.16s}
.itile:hover{border-color:var(--brand);transform:translateY(-2px)}
.itile strong{display:block;font-size:14.8px;font-weight:720;letter-spacing:-.018em}
.itile span{font-size:12.5px;color:var(--muted)}
.soon{font-size:10.2px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--m-site-ink);
  background:var(--m-site);padding:2px 7px;border-radius:999px;margin-left:6px;white-space:nowrap}
.wiz{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:880px){.wiz{grid-template-columns:1fr}}
.onb{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:ob}
@media(max-width:1040px){.onb{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.onb{grid-template-columns:1fr}}
.ob{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;box-shadow:var(--sh-s)}
.ob b{counter-increment:ob;content:counter(ob);display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--brand);color:var(--on-brand);font-size:13.4px;margin-bottom:12px}
.ob h3{font-size:15.8px;margin-bottom:6px}
.ob p{font-size:13.3px;color:var(--muted);line-height:1.55}
.rolegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:920px){.rolegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rolegrid{grid-template-columns:1fr}}
.role{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;box-shadow:var(--sh-s);transition:.16s}
.role:hover{border-color:var(--brand);transform:translateY(-2px)}
.role .chip{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.role strong{display:block;font-size:15.2px;font-weight:700;letter-spacing:-.015em}
.role span{font-size:13.2px;color:var(--muted);line-height:1.5}

/* ── verhalen ── */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,3vw,30px);box-shadow:var(--sh)}
.quote blockquote{margin:14px 0 0;font-size:clamp(16px,1.6vw,19px);line-height:1.55;letter-spacing:-.014em;color:var(--ink);font-weight:520}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.quote .who i{width:44px;height:44px;border-radius:12px;background:var(--raise);display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:12.5px;color:var(--brand);flex:none;letter-spacing:-.03em}
.quote .who strong{display:block;font-size:14.4px;font-weight:700}
.quote .who span{font-size:12.6px;color:var(--muted)}
.quote .res{margin-top:14px;padding:11px 13px;border-radius:12px;background:var(--m-sponsor);color:var(--m-sponsor-ink);font-size:13.2px;font-weight:620}

/* ── faq ── */
.faqwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(20px,3.6vw,46px);align-items:start}
@media(max-width:960px){.faqwrap{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--line);max-width:78ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:17px 40px 17px 0;position:relative;font-size:16.2px;font-weight:660;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:23px;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--brand)}
.faq .ans{padding:0 0 19px;color:var(--ink-2);font-size:14.7px;line-height:1.66}
.ctacard{background:var(--ink-surface);color:#dfeaf1;border-radius:var(--r-l);padding:26px;position:sticky;top:96px}
.ctacard h3{color:#fff;font-size:21px;margin-bottom:10px}
.ctacard p{color:#a9bccb;font-size:14.2px;line-height:1.6}
.ctacard .btn{width:100%;margin-top:8px}
.ctacard ul{list-style:none;margin:18px 0;padding:0;display:grid;gap:9px}
.ctacard li{display:flex;gap:10px;font-size:13.6px;color:#cfe0ea}
.ctacard li svg{color:#4ade80;flex:none;margin-top:2px}

/* ── detailpagina ── */
.crumbs{padding:16px 0 0;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.crumbs .cur{color:var(--ink-2);font-weight:620}
.mhero{padding:clamp(20px,2.6vw,32px) 0 clamp(34px,4.4vw,56px)}
.mhero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(22px,3.6vw,48px);align-items:start}
@media(max-width:980px){.mhero-grid{grid-template-columns:1fr;gap:26px}}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:999px;
  background:var(--page);color:var(--page-ink);font-size:13px;font-weight:700;letter-spacing:-.01em}
.badge .chip{width:24px;height:24px;border-radius:7px;background:var(--tint-badge);display:grid;place-items:center}
.answer{margin-top:20px;padding:18px 20px;border-left:4px solid var(--page-ink);background:var(--surface);
  border-radius:0 var(--r) var(--r) 0;box-shadow:var(--sh-s);font-size:16.2px;line-height:1.6;color:var(--ink-2)}
.answer b{color:var(--ink);font-weight:700}
.pricebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-l);padding:24px;position:sticky;top:96px}
.pricebox .big{display:flex;align-items:flex-end;gap:8px;margin:6px 0 4px}
.pricebox .big b{font-size:44px;letter-spacing:-.04em;line-height:1}
.pricebox .big span{font-size:14.2px;color:var(--muted);font-weight:620;padding-bottom:6px}
.pricebox .ex{font-size:12.8px;color:var(--muted-2)}
.calcrow{margin:18px 0;padding:16px;border-radius:14px;background:var(--page);color:var(--page-ink)}
.calcrow label{display:flex;justify-content:space-between;font-size:13.2px;font-weight:660;margin-bottom:8px}
.calcrow input[type=range]{background:var(--track)}
.calcrow input[type=range]::-webkit-slider-thumb{border-color:currentColor}
.calcrow .out{margin-top:12px;padding-top:12px;border-top:1px solid var(--tint-line);display:flex;justify-content:space-between;
  align-items:baseline;font-size:13.4px;font-weight:640}
.calcrow .out b{font-size:22px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pricebox ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.pricebox li{display:flex;gap:10px;font-size:13.9px;color:var(--ink-2)}
.pricebox li svg{color:var(--page-ink);flex:none;margin-top:2px}
.pricebox .btn{width:100%}
.pricebox .fine{margin-top:10px;font-size:12.1px;color:var(--muted-2);text-align:center;line-height:1.5}
.vs{background:var(--surface);border-radius:var(--r-l);overflow:hidden}
.vs-scroll{overflow-x:auto}
.vs table{width:100%;border-collapse:collapse;font-size:14.3px;min-width:620px}
.vs th,.vs td{padding:14px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.vs thead th{background:var(--raise);font-size:12.2px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:720}
.vs thead th:last-child{background:var(--page);color:var(--page-ink)}
.vs tbody tr:last-child td{border-bottom:0}
.vs td:first-child{font-weight:660;width:30%}
.vs td.old{color:var(--muted)}
.vs td.new{background:var(--raise);font-weight:600;color:var(--ink-surface)}
.vs td.new svg{display:inline;vertical-align:-3px;margin-right:7px;color:#16a34a;width:16px;height:16px}
.ilist{display:flex;gap:9px;flex-wrap:wrap}
.ipill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line-2);font-size:14px;font-weight:620;box-shadow:var(--sh-s)}
.ipill:hover{border-color:var(--page-ink);color:var(--page-ink)}
.proofcard{background:var(--ink-surface);color:#dfeaf1;border-radius:var(--r-l);padding:clamp(24px,3.2vw,36px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(18px,2.8vw,38px);align-items:center}
@media(max-width:880px){.proofcard{grid-template-columns:1fr}}
.proofcard blockquote{margin:12px 0 0;font-size:clamp(16.5px,1.8vw,20.5px);line-height:1.5;color:#fff;font-weight:540;letter-spacing:-.017em}
.proofcard .who{margin-top:18px;font-size:13.4px;color:#9db2c2}
.stats{display:grid;gap:10px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px}
.stat b{display:block;font-size:27px;letter-spacing:-.035em;color:var(--glow);line-height:1}
.stat span{font-size:12.8px;color:#9db2c2}
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:880px){.next{grid-template-columns:1fr}}
.ncard{border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px;min-height:152px;transition:.18s}
.ncard:hover{transform:translateY(-3px)}
.ncard strong{font-size:16.2px;font-weight:740;letter-spacing:-.018em}
.ncard p{font-size:13.2px;opacity:.82;flex:1;line-height:1.5}
.ncard .go{font-size:12.8px;font-weight:720;display:inline-flex;align-items:center;gap:6px}

/* ── eind-cta + formulieren ── */
.final{background:linear-gradient(135deg,#0d4f5c,#08343d);color:#fff;border-radius:var(--r-l);
  padding:clamp(26px,4.4vw,52px);text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:340px;
  background:radial-gradient(50% 60% at 50% 100%,rgba(132,223,241,.32),transparent 70%)}
.final>*{position:relative}
.final h2{color:#fff;max-width:22ch;margin:0 auto}
.final p{color:#b9dfe8;margin:15px auto 0;max-width:56ch;font-size:16.2px}
.final .row{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.final .btn--pri{background:#fff;color:#0d4f5c}
.final .btn--pri:hover{background:#eaf9fc}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-l);padding:clamp(20px,3vw,32px)}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:640px){.fgrid2{grid-template-columns:1fr}}
.field{display:block}
.field span{display:block;font-size:13.4px;font-weight:640;color:var(--ink-2);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--bg);font-size:15px;color:var(--ink);min-height:48px}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--focus);outline-offset:1px;background:#fff}
.pickgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 4px}
@media(max-width:820px){.pickgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pickgrid{grid-template-columns:1fr}}
.pick{border-radius:14px;padding:15px;text-align:left;border:1.5px solid var(--line);background:var(--surface);
  display:flex;gap:11px;align-items:flex-start;transition:.16s;box-shadow:var(--sh-s)}
.pick:hover{transform:translateY(-2px)}
.pick[aria-pressed="true"]{border-color:currentColor}
.pick .chip{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.pick strong{display:block;font-size:14.3px;font-weight:700;letter-spacing:-.015em;color:var(--ink-surface)}
.pick span{font-size:12.4px;color:var(--muted)}
.formnote{margin-top:14px;padding:13px 15px;border-radius:12px;background:var(--m-leden);color:var(--m-leden-ink);
  font-size:13.2px;font-weight:600;display:flex;gap:10px;align-items:flex-start}

/* ── footer ── */
footer.site{background:var(--ink-surface);color:#93a8b8;padding:clamp(38px,5vw,62px) 0 26px;font-size:13.8px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:clamp(16px,2.6vw,32px)}
@media(max-width:1040px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
footer.site h4{color:#fff;font-size:12.2px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:12px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer.site a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fbrand .brand{color:#fff;margin-bottom:12px}
.fbrand p{font-size:13.4px;line-height:1.6;max-width:34ch}
.fbot{margin-top:22px;padding-top:19px;border-top:1px solid rgba(255,255,255,.11);display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12.6px}
.fbot .sp{flex:1}
.colofon{margin-top:32px;padding:clamp(20px,2.6vw,28px);border-radius:var(--r-l);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center}
.colofon p{color:#93a8b8}
.colofon a:hover{color:#fff}
@media(max-width:760px){.colofon{grid-template-columns:1fr}.colofon .btn{width:100%}}

/* ── prototypebalk ── */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:160;background:var(--ink-surface);color:#cfe0ea;
  border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.pbar .wrap{display:flex;align-items:center;gap:11px;min-height:54px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.pbar .tag{font-size:10.6px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--glow);
  color:var(--ink);padding:4px 9px;border-radius:999px;flex:none}
.pbar .url{font-family:var(--mono);font-size:12.4px;color:#fff;background:rgba(255,255,255,.08);
  padding:6px 11px;border-radius:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(46vw,460px)}
.pbar .sp{flex:1}
.pbar select{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:8px 12px;font-size:12.6px;font-weight:640;max-width:52vw}
.pbar select option{color:#111}
.pbar button{font-size:12.4px;font-weight:660;padding:8px 13px;border-radius:999px;color:#cfe0ea;border:1px solid rgba(255,255,255,.18)}
.pbar button:hover{background:rgba(255,255,255,.1);color:#fff}
.pbar button[data-on="1"]{background:var(--glow);color:var(--ink-surface);border-color:var(--glow)}
@media(max-width:720px){.pbar .url{max-width:100%;flex:1 1 100%;order:5}.pbar .hide-s{display:none}}
/* ══ TAAL- EN THEMASCHAKELAAR ══ */
.langsw{display:inline-flex;background:var(--raise);border:1px solid var(--line);border-radius:999px;padding:3px;flex:none}
.langsw button{padding:6px 11px;border-radius:999px;font-size:12.4px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.langsw button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-s)}
.langsw button:hover{color:var(--ink)}
.themesw{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--ink-2);flex:none;transition:.16s}
.themesw:hover{border-color:var(--brand);color:var(--brand)}
.themesw .ic-d{display:none}
:root[data-theme="dark"] .themesw .ic-d{display:block}
:root[data-theme="dark"] .themesw .ic-l{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themesw .ic-d{display:block}
  :root:not([data-theme="light"]) .themesw .ic-l{display:none}
}
@media(max-width:1140px){.langsw,.themesw{display:none}}
.msheet__panel .langsw,.msheet__panel .themesw{display:inline-flex}
.msheet__panel .sheettools{display:flex;gap:9px;align-items:center;margin:14px 0 4px}

/* ══ COOKIEBANNER ══ (zit vast onderaan, boven de prototypebalk) */
.cc{position:fixed;left:16px;right:16px;bottom:70px;z-index:170;max-width:560px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);
  box-shadow:0 24px 70px rgba(13,21,32,.24);padding:22px;display:none}
.cc[data-open="1"]{display:block;animation:rvIn .28s ease}
.cc h3{font-size:18px;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.cc h3 .ic{width:34px;height:34px;border-radius:10px;background:var(--m-site);color:var(--m-site-ink);display:grid;place-items:center;flex:none}
.cc p{font-size:13.8px;color:var(--muted);line-height:1.58}
.cc ul{list-style:none;margin:12px 0;padding:0;display:grid;gap:6px}
.cc ul li{font-size:13.2px;color:var(--ink-2);display:flex;gap:9px}
.cc ul li svg{color:var(--brand);flex:none;margin-top:3px}
.cc-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.cc-actions .btn{flex:1 1 auto;min-width:150px}
.cc-link{background:none;border:0;padding:0;margin-top:12px;font-size:12.8px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cc-link:hover{color:var(--brand)}
.cc-prefs{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);gap:10px}
.cc[data-prefs="1"] .cc-prefs{display:grid}
.cc-row{display:flex;gap:12px;align-items:flex-start;padding:13px;border-radius:13px;background:var(--raise)}
.cc-row strong{display:block;font-size:14.2px}
.cc-row span{font-size:12.6px;color:var(--muted);line-height:1.5}
.cc-sw{width:42px;height:24px;border-radius:999px;background:var(--track);position:relative;flex:none;
  border:0;cursor:pointer;transition:.18s;margin-left:auto}
.cc-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}
.cc-sw[aria-checked="true"]{background:var(--brand)}
.cc-sw[aria-checked="true"]::after{transform:translateX(18px)}
.cc-sw[disabled]{background:var(--brand);opacity:.45;cursor:not-allowed}
@media(max-width:620px){.cc{left:10px;right:10px;bottom:64px;padding:18px;max-height:76vh;overflow:auto}
  .cc-actions .btn{flex:1 1 100%}}

/* ══ SOCIALS ══ */
.socials{display:flex;gap:9px;margin-top:16px}
.soc{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);color:#cfe0ea;transition:.16s}
.soc:hover{background:var(--glow);color:var(--ink-surface);border-color:var(--glow);transform:translateY(-2px)}

/* ══ NIEUWS ══ */
.press{display:grid;gap:11px}
.press a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:17px 19px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);transition:.16s}
.press a:hover{border-color:var(--brand);transform:translateY(-2px)}
.press .src{font-size:12.2px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  min-width:118px;display:flex;flex-direction:column;gap:2px}
.press .src b{color:var(--ink);font-size:13.6px;letter-spacing:0;text-transform:none}
.press h3{font-size:16px;letter-spacing:-.015em}
.press .go{color:var(--brand);flex:none}
@media(max-width:700px){.press a{grid-template-columns:1fr;gap:7px}.press .go{display:none}}

/* ══ CHANGELOG ══ */
.rel{display:grid;gap:0}
.rel article{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(16px,3vw,36px);
  padding:clamp(20px,2.6vw,30px) 0;border-top:1px solid var(--line)}
.rel article:first-child{border-top:0;padding-top:0}
@media(max-width:760px){.rel article{grid-template-columns:1fr;gap:12px}}
.rel .meta{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rel .ver{font-family:var(--mono);font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--ink-surface);color:#fff;letter-spacing:-.02em}
.rel .date{font-size:12.8px;color:var(--muted)}
.rel .tagline{font-size:11.4px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px}
.rel h3{font-size:19px;margin-bottom:12px;letter-spacing:-.02em}
.rel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rel li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;font-size:14.3px;line-height:1.55;color:var(--ink-2)}
.rel li .dot{width:9px;height:9px;border-radius:3px;margin-top:7px;flex:none}
.rel li b{color:var(--ink-surface)}
.rel li em{font-style:normal;color:var(--muted);font-size:13.4px}

/* ══════════════════════════════════════════════════════════════════════════
   RUST-PASS — minder chrome, zelfde woorden
   ══════════════════════════════════════════════════════════════════════════
   1. Drie fontgewichten in plaats van elf.
   2. Sectiekop = één linkerkolom met de lead eronder (i.p.v. een brede band).
   3. Niet-klikbare kaarten verliezen hun doosje: alleen een haarlijn erboven.
      Klikbare kaarten hóuden hun doosje — zo zie je waar je op kunt klikken.
   4. Elke sectie kan collapsen via <details>: kicker + H2 + lead zitten in de
      <summary> en blijven dus ALTIJD zichtbaar. Alleen het bewijs klapt weg.
      SEO: de inhoud staat gewoon in de HTML en de koppenstructuur blijft heel.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · typografie — drie gewichten in plaats van elf.
      Bewust als cascade van laag naar hoog specifiek, zodat er niets doorheen glipt. */
body,p,li,td,span,div,a,blockquote,em,small{font-weight:400}
strong,b,th,label,summary,button,select,input,
.btn,.brand,.badge,.ipill,.rolechip,.navlink.is-active,.sc-btn,.pick strong,.itile strong,
.role strong,.quote .who strong,.ncard strong,.mod .price,.field span,.sl label,
.calcrow label,.faq summary,.vs td:first-child,.vs td.new,.line b,.proof b,
.checks li b,.tl li b,.answer b,.lead strong{font-weight:600}
.kicker,.eyebrow,.soon,.free,.pbar .tag,.proof .lbl,footer.site h4,.vs thead th{font-weight:700}
h1,h2,h3,h4,.brand,.mark,.total b,.pricebox .big b,.stat b,.motor-bar b,
.ob b,.story .sig i,.quote .who i{font-weight:750}
h2{letter-spacing:-.026em}
/* micro-labels blijven leesbaar zonder extra gewicht */
.kicker,.eyebrow,.proof .lbl,footer.site h4{letter-spacing:.1em}

/* 2 · sectiekop */
.head{display:block;margin-bottom:clamp(22px,3vw,38px);max-width:none}
.head>div{margin:0}
.head h2{margin-top:7px;max-width:19ch}
.head .lead{margin-top:13px;max-width:62ch}

/* 3 · rustige, niet-klikbare kaarten */
.feat{display:grid;gap:clamp(18px,2.4vw,30px) clamp(20px,2.6vw,34px)}
.feat.c3{grid-template-columns:repeat(3,1fr)}
.feat.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.feat.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.feat.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.feat.c3,.feat.c4{grid-template-columns:1fr}}
.feat article{padding-top:17px;border-top:1px solid var(--line)}
.feat .chip{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px}
.feat h3{font-size:16.4px;margin-bottom:7px;letter-spacing:-.016em}
.feat p{color:var(--muted);font-size:14.2px;line-height:1.58}
.section--ink .feat article{border-top-color:rgba(255,255,255,.14)}
.section--ink .feat p{color:#9db2c2}
/* klikbare kaarten: subtieler doosje, geen zware schaduw */
a.card{box-shadow:none;border-color:var(--line)}
a.card:hover{box-shadow:var(--sh-s);border-color:var(--line-2);transform:translateY(-2px)}
.itile{box-shadow:none}
.role{box-shadow:none}
.step{background:rgba(255,255,255,.04)}

/* 4 · SECTIE-COLLAPSE */
.sc{border:0}
.sc>summary{list-style:none;cursor:pointer;display:block;border-radius:var(--r)}
.sc>summary::-webkit-details-marker{display:none}
.sc>summary:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
.sc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.sc-head .head{margin-bottom:0}
.sc-btn{display:inline-flex;align-items:center;gap:9px;flex:none;margin-top:26px;
  padding:9px 9px 9px 16px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);font-size:13.4px;font-weight:600;color:var(--ink-2);transition:.16s}
.sc>summary:hover .sc-btn{border-color:var(--brand);color:var(--brand)}
.sc-btn .ring{width:26px;height:26px;border-radius:50%;background:var(--raise);display:grid;place-items:center;flex:none}
.sc>summary:hover .sc-btn .ring{background:var(--brand);color:var(--on-brand)}
.sc-btn .chev{transition:transform .22s ease}
.sc[open] .sc-btn .chev{transform:rotate(180deg)}
.sc[open] .lbl-shut{display:inline}.sc[open] .lbl-open{display:none}
.sc:not([open]) .lbl-shut{display:none}
.sc-body{padding-top:clamp(20px,2.6vw,32px);animation:rvIn .26s ease}
.section--ink .sc-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#cfe0ea}
.section--ink .sc-btn .ring{background:rgba(255,255,255,.12)}
.section--ink .sc>summary:hover .sc-btn{border-color:var(--glow);color:#fff}
.section--ink .sc>summary:hover .sc-btn .ring{background:var(--glow);color:var(--ink-surface)}
@media(max-width:820px){
  .sc-head{grid-template-columns:1fr;gap:14px}
  .sc-btn{margin-top:0;width:100%;justify-content:center;padding:11px 16px}
}
/* de enige echte UNLOCK op de pagina houdt zijn accentkleur */
.sc--unlock .sc-btn{background:var(--glow);color:var(--ink-surface);border-color:var(--glow);font-weight:600}
.sc--unlock .sc-btn .ring{background:var(--tint-line);color:var(--ink-surface)}
.sc--unlock:not([open]) .sc-body{display:none}
.section--ink .sc--unlock .sc-btn{background:var(--glow);color:var(--ink-surface);border-color:var(--glow)}
.section--ink .sc--unlock .sc-btn .ring{background:rgba(13,21,32,.14);color:var(--ink-surface)}

/* 5 · minder tinten: section--flat wordt gewoon zacht */
.section--flat{background:var(--bg-2)}
.section--soft{background:var(--bg-2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
/* ══ TOEVOEGINGEN OP DE PROTOTYPE-CSS ══════════════════════════════════════
   Alles wat de productiesite nodig heeft en het prototype niet had. Wordt door
   tools/rebuild-css.js achter de basis geplakt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ INKLAPKNOP: op desktop LINKS UITGELIJND ONDER DE TEKST ══
   Stond eerst rechtsboven naast de kop. Dat trok het oog weg van de kop en gaf
   een grote lege ruimte in het midden. Nu leest de bezoeker eerst kop en lead,
   en staat de knop daar recht onder, op dezelfde linkerlijn als de kicker, de
   kop en de lead. Eén verticale lijn door het hele blok, geen zwevend element.
   Owner-besluit 2026-08-16. */
.sc-head{display:flex;flex-direction:column;gap:0}
.sc-head .head{margin-bottom:0}
.sc-btn{align-self:flex-start;margin-top:clamp(18px,2.4vw,26px)}
@media(max-width:820px){
  .sc-head{gap:14px}
  /* Op een telefoon staat deze knop onder een hoge kaart en scrolde je er zo
     overheen: een witte pil met een dunne grijze rand leest daar als een label,
     niet als een knop. Gevuld in de merkkleur, hoger, en met de tekst groter is
     hij niet meer te missen. Op desktop blijft hij stil, want daar staat hij
     naast de kop en is de context al duidelijk. Owner-melding 2026-08-18. */
  .sc-btn{align-self:stretch;width:100%;justify-content:center;margin-top:16px;
    min-height:52px;padding:9px 16px;font-size:15px;
    background:var(--brand);border-color:var(--brand);color:var(--on-brand);
    box-shadow:0 8px 22px rgba(13,79,92,.26)}
  .sc-btn .sc-count{color:inherit;opacity:.72}
  .sc-btn .ring{background:rgba(255,255,255,.2);color:#fff}
  .sc>summary:hover .sc-btn{border-color:var(--brand);color:var(--on-brand)}
  /* In een donkere sectie zou hetzelfde diepe groen wegvallen tegen de
     achtergrond, dus daar de lichte accentkleur. */
  .section--ink .sc-btn{background:var(--glow);border-color:var(--glow);
    color:var(--ink-surface);box-shadow:none}
  .section--ink .sc-btn .ring{background:rgba(13,21,32,.14);color:var(--ink-surface)}
}

/* ══ CLUBMOTOR IN DE HERO ══
   De ring met moduletegels stond in het prototype met een inline style op elke
   tegel. Dat kan niet onder een CSP zonder unsafe-inline, dus de kleur komt nu
   uit de tint-klassen. Bij de port was de ring per ongeluk helemaal weggevallen,
   waardoor de kaart alleen een bedrag toonde zonder te zeggen waar het vandaan
   kwam. Owner-melding 2026-08-17. */
.motor-tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:3px 9px;border-radius:999px;background:var(--raise)}
.motor-sub{margin-top:13px;font-size:13.4px;line-height:1.55;color:var(--ink-2)}
.motor-bar b small{font-size:14px;font-weight:600;color:var(--muted)}

/* Rijen in plaats van de tegels van het prototype: in drie kolommen van 140px
   past geen zin, en zonder die zin zegt een prijs niets. Nu heeft elke module
   een eigen regel met de opbrengst eronder. */
/* Twee kolommen op desktop, zodat de hele kaart binnen één beeld past en er
   niet gescrold hoeft te worden. De 1px gap laat de containerachtergrond door
   en vormt zo de haarlijnen: geen losse randregels per rij die in een raster
   toch altijd ergens dubbel of missend uitkomen. Owner-besluit 2026-08-17. */
.motor-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:14px 0;
  border:1px solid var(--tint-line);border-radius:15px;overflow:hidden;background:var(--tint-line)}
.mrow{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;background:var(--surface)}
@media(max-width:600px){.motor-list{grid-template-columns:1fr}}
.mrow-ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--raise);color:var(--muted-2)}
.mrow-txt{flex:1;min-width:0}
.mrow-top{display:flex;gap:10px;align-items:baseline}
.mrow-top strong{flex:1;min-width:0;font-size:13.2px;font-weight:700;letter-spacing:-.014em}
.mrow-top em{flex:none;font-style:normal;font-size:11.4px;font-weight:600;color:var(--muted)}
.mrow-sub{display:block;margin-top:2px;font-size:11.8px;line-height:1.45;color:var(--muted)}
.mrow--uit .mrow-top strong,.mrow--uit .mrow-sub{color:var(--muted-2)}

/* Lucht tussen de drie stapkaarten en het blok eronder: die stonden tegen
   elkaar aan en lazen daardoor als één brok. Owner-melding 2026-08-17. */
.auto{margin-top:clamp(22px,3vw,36px)}

/* ══ RUSTIGE HERO + VOORBEELD VÓÓR DE REKENMODULE ══
   De clubmotor is uit de hero gehaald. Er blijft één kolom over, begrensd op de
   breedte die de tekst eerst ook had, zodat de kop niet ineens over de volle
   1200px uitwaaiert. Owner-besluit 2026-08-17. */
/* Twee kolommen: links kicker, kop en lead, rechts de acties. De knoppen stonden
   onder de tekst, waardoor de hero vier blokken hoog werd. Naast elkaar is het
   compacter en rustiger. De checkregel eronder is er later helemaal uit.
   Owner-besluit 2026-08-17. */
.hero-grid--split{grid-template-columns:minmax(0,1.08fr) minmax(0,.6fr);align-items:center}
@media(max-width:1040px){.hero-grid--split{grid-template-columns:1fr}}
.hero-act .hero-cta{margin-top:0;flex-direction:column;align-items:stretch;gap:10px;flex-wrap:nowrap}
.hero-act .hero-cta .btn{justify-content:center}


/* ══ ROLKAARTJES ══
   Stonden eerst als grijze pillen in de hero en daarna als brede kaarten met een
   samenvatting in "Voor wie". Beide weg: de hero blijft leeg en de sectie toont
   alleen de zes namen. De uitleg staat toch op /voor/<rol>, dus die twee keer
   afdrukken kostte alleen hoogte. Owner-besluit 2026-08-17. */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rgrid{grid-template-columns:1fr}}
.rcard{display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-s);
  transition:transform .18s,border-color .18s,box-shadow .18s}
.rcard .chip{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.rcard strong{flex:1;min-width:0;font-size:14.6px;font-weight:650;letter-spacing:-.015em}
.rc-arw{flex:none;color:var(--muted);opacity:0;transform:translateX(-5px);transition:.18s}
.rcard:hover{transform:translateX(6px);border-color:var(--brand);box-shadow:var(--sh)}
.rcard:hover .rc-arw{opacity:1;transform:translateX(0);color:var(--brand)}

/* Het voorbeeld staat in de <summary>, dus naast de openknop en zichtbaar
   terwijl de sectie dicht is. Het paar staat GECENTREERD onder de linkslijnende
   kop: de kaart is te hoog en te smal om links te blijven hangen, dan valt de
   knop in een gat rechts. Kaart en knop staan onder elkaar en gecentreerd:
   eerst het voorbeeld lezen, dan pas de stap naar de rekenmodule.
   Owner-besluit 2026-08-17. */
.sc-prev{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,26px);
  margin:clamp(24px,3.2vw,38px) auto 0;max-width:900px}
.sc-prev .motor{width:100%}
.sc-prev .sc-btn{margin-top:0;flex:none}
@media(max-width:820px){
  .sc-prev{gap:16px}
  .sc-prev .motor{flex:1 1 100%;max-width:none}
  .sc-prev .sc-btn{width:100%;justify-content:center}
}

/* De hero linkt naar #prijzen. Zonder deze marge landt de kop onder de
   plakkende header. */
.section[id]{scroll-margin-top:96px}

/* ══ SNELRAIL ══
   Modules, koppelingen en prijzen als drie iconen, op elke breedte zichtbaar.
   Glas met blur net als de header, een gloedring bij hover en een systeemlabel
   in kapitalen. Vanaf 1360px staat hij staand in de rechtermarge (daar is ruimte:
   1200px inhoud plus twee marges van 80px), daaronder liggend onderaan het
   scherm. Owner-besluit 2026-08-17. */
/* De rail bezit deze drie bestemmingen op ELKE breedte, dus ze staan nooit
   dubbel in de bovenbalk. */
.navlink--rail{display:none}
/* De rail draagt hetzelfde verloop als de primaire knop, met witte iconen erop.
   Hij was doorschijnend wit met grijze iconen en zweefde daarmee náást het merk
   in plaats van erin (owner 2026-08-30). De blur is eruit: achter een dekkend
   verloop is er niets meer om doorheen te kijken. */
.rail{display:flex;position:fixed;z-index:80;padding:7px;border-radius:999px;
  background:var(--grad-brand);border:1px solid rgba(19,114,104,.55);
  box-shadow:var(--sh-l),0 0 0 3px rgba(13,79,92,.12),0 0 16px rgba(13,79,92,.34);
  animation:l2s-rail-gloed 3.2s ease-in-out infinite}
/* Een klein randje met gloed in het diepe merkgroen, dezelfde kleur als de
   primaire knop: genoeg om te zien dat er iets zit, te zwak om af te leiden
   van de tekst, en het valt binnen het merk in plaats van ernaast. De puls ademt langzaam; wie beweging heeft
   uitgezet krijgt hem stil, maar wel zichtbaar. Owner-besluit 2026-08-17. */
@keyframes l2s-rail-gloed{
  0%,100%{box-shadow:var(--sh-l),0 0 0 3px rgba(13,79,92,.12),0 0 16px rgba(13,79,92,.34)}
  50%    {box-shadow:var(--sh-l),0 0 0 5px rgba(13,79,92,.2),0 0 26px rgba(13,79,92,.52)}
}
@media(prefers-reduced-motion:reduce){.rail{animation:none}}

/* Wegschuiven tijdens het lezen. Alleen onder 1360px, want daarboven staat de
   rail naast de inhoud in plaats van erover. De translateX(-50%) moet mee in de
   verschoven stand, anders springt hij eerst naar rechts voor hij verdwijnt. */
@media(max-width:1359px){
  .rail{transition:transform .24s ease,opacity .24s ease}
  .rail.is-weg{transform:translateX(-50%) translateY(150%);opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.rail{transition:none}}

/* Smal scherm: liggende pil onderaan, binnen duimbereik. Een staande rail langs
   de rand zou op een telefoon over de tekst heen liggen. De safe-area houdt hem
   los van de streep onderaan een iPhone.

   De pil zweeft over de pagina, dus onderaan moet er ruimte onder de laatste
   inhoud zijn; anders staat de voettekst er permanent achter. Owner-melding
   2026-08-18. */
@media(max-width:1359px){footer.site{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.rail{flex-direction:row;gap:4px;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%)}
.railtip{position:absolute;left:50%;bottom:calc(100% + 10px);white-space:nowrap;padding:7px 12px;
  border-radius:10px;background:var(--ink-surface);color:#fff;font-size:10.6px;font-weight:750;
  letter-spacing:.11em;text-transform:uppercase;
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(5px);transition:.16s}
.railbtn:hover .railtip,.railbtn:focus-visible .railtip{opacity:1;transform:translateX(-50%) translateY(0)}

/* Breed scherm: staand in de rechtermarge, label klapt naar links open. */
@media(min-width:1360px){
  /* staand: het verloop kantelt mee, anders loopt het over de korte kant */
  .rail{flex-direction:column;gap:4px;padding:8px;left:auto;bottom:auto;
    right:clamp(14px,2.2vw,34px);top:50%;transform:translateY(-50%);
    background:var(--grad-brand-v)}
  .railtip{left:auto;bottom:auto;right:calc(100% + 12px);top:50%;
    transform:translateY(-50%) translateX(6px)}
  .railbtn:hover .railtip,.railbtn:focus-visible .railtip{transform:translateY(-50%) translateX(0)}
}

.railbtn{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;transition:background .16s,color .16s,box-shadow .16s}
.railbtn:hover{background:rgba(255,255,255,.16);color:#fff;box-shadow:0 0 0 3px var(--glow-soft)}
/* De pagina waar je staat draait om: wit vlak met het icoon in het diepe groen.
   Op een verloop is een donkerder vlak niet te onderscheiden. */
.railbtn[aria-current="page"]{background:#fff;color:#06292f;
  box-shadow:0 6px 18px rgba(6,41,47,.34)}

/* ══ UITKLAPMENU OP MOBIEL ══
   De burger schakelde body.nav-open, maar die class was nergens gestyled: op
   elk scherm onder 1140px deed de knop dus helemaal niets en was er geen
   navigatie. Gevonden 2026-08-17 bij het bouwen van de rail. */
@media(max-width:1140px){
  body.nav-open .navlinks{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;padding:6px clamp(16px,4vw,32px) 14px;
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--sh-l)}
  body.nav-open .navlinks .navlink{padding:14px 2px;font-size:16px;border-top:1px solid var(--line)}
}

/* ══ ONBOARDING ALS FLOWCHART ══
   Was een rij losse kaartjes met een leeg teal blokje ervoor: de CSS-counter die
   het stapnummer moest tonen is bij de port nooit meegekomen. Vervangen door een
   echte stepper met een doorlopende lijn door de knooppunten.

   Eén opmaak, twee richtingen. Boven 1040px horizontaal: de lijn loopt van het
   midden van de eerste bol naar het midden van de laatste, doordat elke stap een
   halve lijn links (::before) en een halve rechts (::after) tekent en de buitenste
   helften wegvallen. Dat klopt bij elk aantal stappen, zonder percentages die je
   met de hand moet narekenen. Daaronder kantelt dezelfde opzet naar een verticale
   tijdlijn, wat op tablet en mobiel leesbaarder is dan geknepen kolommen.
   Owner-besluit 2026-08-17. */
.fchart{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.fstep{position:relative;padding:0 clamp(8px,1.2vw,16px);text-align:center}
.fstep::before,.fstep::after{content:"";position:absolute;top:21px;height:2px;background:var(--line-2)}
.fstep::before{left:0;width:50%}
.fstep::after{left:50%;width:50%}
.fstep:first-child::before,.fstep:last-child::after{content:none}
.fstep-node{position:relative;z-index:1;width:44px;height:44px;margin:0 auto;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);border:2px solid var(--line-2);
  font-size:15px;font-weight:750;letter-spacing:-.02em;color:var(--brand);box-sizing:border-box}
.fstep:first-child .fstep-node{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.fstep h3{margin:15px 0 6px;font-size:16.2px;font-weight:700;letter-spacing:-.022em}
.fstep p{font-size:13.6px;line-height:1.6;color:var(--muted)}

@media(max-width:1040px){
  .fchart{grid-template-columns:1fr}
  .fstep{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px;
    text-align:left;padding:0 0 clamp(20px,3vw,28px)}
  .fstep:last-child{padding-bottom:0}
  .fstep::before{content:none}
  .fstep::after{top:50px;left:21px;width:2px;height:calc(100% - 50px)}
  .fstep-node{margin:0}
  .fstep h3{margin:9px 0 5px}
  .fstep p{max-width:62ch}
}

/* ══ LOGOSTRIP ══
   Zolang een clublogo ontbreekt rendert de naam, dus de strip is nooit half leeg.
   In de donkere modus krijgt elk logo een wit plaatje eronder: clublogo's zijn
   vrijwel altijd voor een lichte ondergrond gemaakt en een donker wapen op een
   donkere balk is onzichtbaar. Owner-besluit 2026-08-17. */
/* ══ DOORLOPENDE LOGOBAND ══
   Drie clubs tegelijk in beeld, ongeacht de schermbreedte. De rekensom: de band
   is 400% van het zichtvenster en bevat twee sets van 50% (dus elk 200% van het
   venster). Zes clubs per set delen die 200%, dus elke club is 33,3% breed en er
   passen er precies drie. De animatie schuift één set op, waarna de kopie op
   exact dezelfde plek staat: geen sprong.

   Bij hover en bij toetsenbordfocus staat hij stil, zodat je een logo kunt
   aanklikken. Wie beweging heeft uitgezet krijgt de oude, gewoon doorlopende
   rij terug in plaats van drie clubs en de rest afgesneden.
   Owner-besluit 2026-08-17. */
.marq{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marq-track{display:flex;width:400%;animation:l2s-marq 34s linear infinite}
.marq-set{width:50%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center}
.marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused}
@keyframes l2s-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.proof .cl{display:inline-flex;align-items:center;justify-content:center;padding:0 clamp(10px,1.6vw,22px);min-width:0}
.proof .cl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(prefers-reduced-motion:reduce){
  .marq{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marq-track{width:100%;animation:none;flex-wrap:wrap}
  .marq-set{width:auto;display:flex;flex-wrap:wrap;gap:0 clamp(13px,2.8vw,32px)}
  .marq-set[aria-hidden="true"]{display:none}
  .proof .cl{padding:0}
}
.proof .cl img{height:clamp(26px,2.7vw,36px);width:auto;display:block;opacity:1;
  transition:opacity .16s,transform .16s}
.proof .cl:hover img{opacity:1;transform:translateY(-1px)}
@media (prefers-color-scheme:dark){
  .proof .cl img{background:#fff;border-radius:9px;padding:5px 8px}
}
:root[data-theme="light"] .proof .cl img{background:none;padding:0}
:root[data-theme="dark"] .proof .cl img{background:#fff;border-radius:9px;padding:5px 8px}

/* ══ GECENTREERDE SECTIEKOP ══
   Voor secties die alleen een kicker hebben. Zonder kop en lead staat een enkel
   woord links in een breed veld te zwerven; gecentreerd leest het als opschrift
   boven wat eronder komt. Owner-besluit 2026-08-17. */
.section--mid .head{text-align:center}
.section--mid .head .lead{margin-left:auto;margin-right:auto}
.section--mid .head h2{margin-left:auto;margin-right:auto}
/* Ook de openknop van een inklapbare sectie hoort dan in het midden. */
.section--mid .sc-head{align-items:center}
.section--mid .sc-btn{align-self:center}

/* ══ TRIGGER NAAST DE KOP ══
   Voor secties waar de kop kort is en de knop anders een halve schermhoogte
   lager belandt. Onder 900px valt hij alsnog onder de tekst, want naast een kop
   van drie regels past geen knop meer. Owner-besluit 2026-08-17. */
.section--side .sc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(20px,4vw,48px)}
.section--side .sc-btn{align-self:center;margin-top:0}
@media(max-width:900px){
  .section--side .sc-head{grid-template-columns:1fr;gap:0}
  .section--side .sc-btn{margin-top:14px}
}

/* ══ VERHAALKAART ══
   Eén knop op een lege band zag er verlaten uit. Nu een donkere kaart met het
   merkteken, een korte aanleiding en de knop: genoeg om nieuwsgierig te maken,
   nog steeds één blok hoog. Owner-besluit 2026-08-17. */
.storycard{position:relative;max-width:680px;margin:0 auto;text-align:center;
  background:var(--ink-surface);color:#dfeaf1;border-radius:var(--r-l);
  padding:clamp(32px,4.2vw,46px) clamp(24px,4vw,44px);box-shadow:var(--sh-l);overflow:hidden}
.storycard::before{content:"";position:absolute;inset:-60% -30% auto -30%;height:300px;
  background:radial-gradient(55% 60% at 50% 0%,rgba(132,223,241,.16),transparent 70%);pointer-events:none}
.storycard-mark{position:relative;display:grid;place-items:center;width:46px;height:46px;margin:0 auto 18px;
  border-radius:14px;background:var(--brand);color:#fff;font-size:14px;font-weight:800;letter-spacing:-.04em}
.storycard .kicker{color:var(--glow)}
.storycard h2{color:#fff;font-size:clamp(21px,2.6vw,28px);margin:10px auto 14px;max-width:20ch}
.storycard p{color:#a9bccb;font-size:15px;line-height:1.65;max-width:52ch;margin:0 auto}
/* Deze stond twee keer in dit bestand, de tweede met margin:0, waardoor de knop
   tegen de tekst aan plakte. Nu één regel, en de afstand hangt aan .storycard
   zelf zodat de modal zijn eigen maat houdt. Owner-melding 2026-08-18. */
.story-cta{display:flex;justify-content:center;margin:0}
.storycard .story-cta{margin-top:clamp(28px,3.4vw,38px)}

/* ══ BREDE MODAL ══ */
.modal--wide{max-width:min(880px,calc(100vw - 32px))}
.modal--wide .feat{grid-template-columns:1fr 1fr;gap:16px 26px}
@media(max-width:640px){.modal--wide .feat{grid-template-columns:1fr}}
.modal-sub{display:block;margin:26px 0 12px;color:var(--glow)}
/* Altijd twee naast elkaar, ook op een telefoon: zes rollen onder elkaar wordt
   precies de lange lijst die we hier niet willen. De kaartjes zijn daarom in de
   modal krapper dan op de pagina, de naam mag afbreken en het pijltje verdwijnt
   zodra de ruimte op is. Pas onder 380px valt hij terug op één kolom, want daar
   past "Vrijwilligerscoördinator" naast een icoon echt niet meer.
   Owner-besluit 2026-08-17. */
.modal-in .rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.modal-in .rcard{padding:10px 12px;gap:10px}
.modal-in .rcard .chip{width:30px;height:30px;border-radius:9px}
.modal-in .rcard strong{font-size:12.8px;line-height:1.3}
@media(max-width:560px){.modal-in .rc-arw{display:none}}
@media(max-width:380px){.modal-in .rgrid{grid-template-columns:1fr}}
.modal-in .rcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none;color:#eaf2f7}
.modal-in .rcard:hover{border-color:var(--glow);transform:translateX(4px)}
.modal-in .rcard:hover .rc-arw{color:var(--glow)}
.modal-in .story-cta{margin-top:24px}

/* ══ MODAL ══
   Op <dialog> gebouwd, dus focusval, Escape en de backdrop komen van de browser.
   De inhoud staat in de HTML en niet in JavaScript, zodat zoekmachines het
   verhaal ook lezen zonder de knop in te drukken. Owner-besluit 2026-08-17. */
.modal{border:0;padding:0;background:transparent;max-width:min(720px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);overflow:visible;color:inherit}
.modal::backdrop{background:rgba(13,21,32,.62);backdrop-filter:blur(4px)}
.modal-in{position:relative;background:var(--ink-surface);color:#dfeaf1;border-radius:var(--r-l);
  padding:clamp(26px,4vw,42px);box-shadow:var(--sh-l);max-height:calc(100vh - 48px);overflow:auto}
.modal-in .kicker{color:var(--glow)}
.modal-in h2{color:#fff;font-size:clamp(21px,2.6vw,27px);margin:10px 0 14px;max-width:22ch}
.modal-in p{color:#a9bccb;font-size:15px;line-height:1.68}
.modal-in p+p{margin-top:12px}
/* De drie herkenningspunten staan in de modal onder elkaar: drie kolommen van
   200px zouden hier onleesbaar worden. Kleuren zijn die van een donkere
   ondergrond, want de modal is altijd donker, ook in de lichte modus. */
.modal-in .feat{grid-template-columns:1fr;gap:16px;margin:20px 0}
.modal-in .feat article{padding-top:15px;border-top:1px solid rgba(255,255,255,.14)}
.modal-in .feat .chip{margin-bottom:10px}
.modal-in .feat h3{color:#fff;font-size:15.4px}
.modal-in .feat p{color:#9db2c2;font-size:13.8px}
.modal-in .sig{margin-top:20px;padding-top:17px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;gap:11px;font-size:13.4px;color:#8fa6b6}
.modal-in .sig i{font-style:normal;font-weight:750;color:#fff}
.modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.1);color:#dfeaf1;border:0;cursor:pointer}
.modal-x:hover{background:rgba(255,255,255,.2)}

/* ══ FAQ IN TWEE KOLOMMEN ══
   Negen vragen onder elkaar maakt een lange sliert. Twee kolommen halveert de
   hoogte en laat de vraagkoppen als een raster lezen, wat rustiger oogt. Ze
   staan met align-items:start, zodat een openstaand antwoord alleen zijn eigen
   kaart uitrekt en niet de buurman meesleept. Onder 820px één kolom, want daar
   wordt een vraag anders drie regels hoog. Owner-besluit 2026-08-17. */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;
  gap:0 clamp(24px,3.4vw,48px);max-width:none;border-top:0}
.faq details{border-top:1px solid var(--line);border-bottom:0}
@media(max-width:820px){.faq{grid-template-columns:1fr}}

/* ══ PAGINAKOP: ÉÉN GECENTREERDE COMPOSITIE ══
   Eerst stonden kop en antwoordblok naast elkaar, daarna met de knoppen ertussen
   in drie kolommen. Dat laatste past niet: de middenkolom pakt ruim 300px van de
   1200, waardoor de kop in vijf regels werd geperst en het antwoordblok in
   dertien. Nu alles onder elkaar en gecentreerd, over de volle breedte.

   De kop krijgt daardoor zijn oude formaat terug (hij hoeft geen halve kolom
   meer te delen), het antwoordblok houdt een leesbare regellengte van 60 tekens,
   en de knoppen staan waar het oog na het lezen vanzelf uitkomt.

   Het antwoordblok verliest zijn accentbalk links, want die staat scheef onder
   gecentreerde tekst. In plaats daarvan een kort streepje erboven: even
   herkenbaar, wel symmetrisch. Owner-besluit 2026-08-18. */
.mhero-col{max-width:none;border-top:1px solid var(--line);
  padding-top:clamp(26px,3vw,40px);text-align:center}
.mhero-col h1{margin:0 auto;max-width:22ch}

.mhero-col .answer{position:relative;margin:clamp(22px,2.8vw,34px) auto 0;
  max-width:60ch;padding:clamp(20px,2.4vw,28px) 0 0;
  background:none;box-shadow:none;border:0;border-radius:0;
  font-size:16.4px;line-height:1.68;text-align:center}
.mhero-col .answer::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:52px;height:3px;border-radius:2px;
  background:var(--page-ink)}

.mhero-col .hero-cta{justify-content:center;margin-top:clamp(26px,3.2vw,38px)}

/* Op mobiel blijft het zoals het was: links uitgelijnd en onder elkaar. */
@media(max-width:940px){
  .mhero-col{text-align:left;max-width:74ch;padding-top:clamp(20px,3vw,28px)}
  .mhero-col h1{margin:0;max-width:none}
  .mhero-col .answer{margin-left:0;margin-right:0;text-align:left;max-width:none;
    padding:18px 20px;border-left:4px solid var(--page-ink);
    background:var(--surface);border-radius:0 var(--r) var(--r) 0;box-shadow:var(--sh-s)}
  .mhero-col .answer::before{content:none}
  .mhero-col .hero-cta{justify-content:flex-start;margin-top:22px}
}

.mhero+.section,.mhero+.section--soft{padding-top:clamp(30px,3.6vw,52px)}

/* ══ SFEERBEELDEN ══
   Drie foto's van echte clubs, alle drie als DECORATIE onder een zware donkere
   laag. Uitgangspunten:

   1. De achtergrondkleur blijft staan als eerste laag. Laadt het beeld niet, of
      kent de browser geen webp, dan zie je precies wat je nu ziet. Het beeld
      draagt nooit de leesbaarheid.
   2. Er ligt altijd een verloop overheen dat donker genoeg is voor AA-contrast
      op de witte tekst. Doorgerekend met de echte foto's: bij een laag van 80
      procent haalt het SLECHTSTE punt (een spierwitte plek in de rook) nog 9,9:1
      tegen wit en 6,9:1 tegen de lead-kleur. AA vraagt 4,5:1, AAA vraagt 7:1.
      Daarom ligt de laag op 80 procent waar de foto het meest mag doorkomen en
      op 90 tot 92 procent aan de randen en waar de kop staat.
   3. background-attachment blijft scroll, geen fixed: dat schokt op iOS en kost
      op elke scroll een herteken-ronde.

   Bestanden komen uit tools/prepare-images.php (1600px, kwaliteit 60, samen
   ongeveer 200 KB). Owner-verzoek 2026-08-17: wel beleving, niet schreeuwerig. */

.section--bg{position:relative;background-repeat:no-repeat;background-size:cover;
  background-position:center}
.section--bg-usecase{
  background-image:
    linear-gradient(180deg,rgba(13,21,32,.9) 0%,rgba(13,21,32,.8) 45%,rgba(13,21,32,.92) 100%),
    url("/assets/img/sfeer-usecase.webp")}
/* Op een breed scherm is deze sectie veel breder dan hoog, dus wordt de foto op
   breedte geschaald en boven en onder afgesneden. Met "center" viel de snee door
   de koppen van het juichende groepje. 22 procent duwt het beeld omlaag, waardoor
   de bovenkant van de foto meedoet en de groep compleet in beeld staat. Alleen op
   desktop: op een smal scherm is de sectie juist hoger dan breed en klopt het
   midden wel. Owner-melding 2026-08-18. */
@media(min-width:940px){.section--bg-usecase{background-position:center 22%}}

/* De verhaalkaart. Het beeld staat rechts uitgesneden zodat de gezichten niet
   half achter de tekst verdwijnen; de linkerhelft is het donkerst, want daar
   staat de kop. */
.storycard{
  background-image:
    linear-gradient(105deg,rgba(13,21,32,.93) 0%,rgba(13,21,32,.84) 55%,rgba(13,21,32,.8) 100%),
    url("/assets/img/sfeer-over.webp");
  background-repeat:no-repeat;background-size:cover;background-position:center 30%}

/* De hero is licht, dus daar kan geen donkere laag overheen. Het beeld ligt als
   aparte laag rechtsboven, vervaagt naar links weg met een masker en staat op
   18 procent. De tekst links raakt het daardoor nooit. */
.hero::after{content:"";position:absolute;inset:0 0 auto auto;z-index:-1;
  width:min(62%,780px);height:100%;
  background:url("/assets/img/sfeer-hero.webp") right center/cover no-repeat;
  opacity:.18;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,#000 62%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 0%,#000 62%,#000 100%)}
@media(prefers-color-scheme:dark){.hero::after{opacity:.24}}
:root[data-theme="light"] .hero::after{opacity:.18}
:root[data-theme="dark"] .hero::after{opacity:.24}
@media(max-width:1040px){.hero::after{width:100%;opacity:.11}}

/* ══ BEVESTIGING NA EEN AANVRAAG ══ */
.okpanel{max-width:66ch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(26px,4vw,44px);box-shadow:var(--sh)}
.okpanel .ok-ic{width:52px;height:52px;padding:12px;border-radius:50%;background:var(--m-sponsor);
  color:var(--m-sponsor-ink);margin-bottom:18px;box-sizing:border-box}
.okpanel h2{margin-bottom:12px}
.okpanel p{color:var(--ink-2);font-size:16.4px;line-height:1.6}
.okpanel .fine-left{color:var(--muted);font-size:14px;margin-top:14px}
.okpanel .hero-cta{margin-top:24px}

/* ══ SERVERGERENDERDE ONDERDELEN die het prototype niet had ══ */
.crumbwrap{background:var(--bg)}
.srcline{margin-top:12px;font-size:13.4px;color:var(--muted)}
.sc-count{font-size:11.4px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.cardprice{margin-top:12px;font-weight:600}
.modlist{display:grid;gap:8px;margin:10px 0 16px}
.modrow{display:flex;gap:10px;align-items:center;padding:11px;border-radius:12px;font-size:13.8px;font-weight:600}
.modrow span{flex:1}
.b-md{font-size:26px}
.fine-left{font-size:13.4px;color:var(--muted);margin-top:14px}
.lead-after{margin-top:24px;max-width:62ch}
.after{margin-top:18px}
.wizwrap{margin-top:clamp(22px,3vw,34px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formactions{margin-top:16px}
.formactions .btn{width:100%}
.field-full{grid-column:1/-1}
.socrow{display:flex;gap:11px;flex-wrap:wrap}
.chip-init{background:var(--raise);color:var(--brand);font-weight:750;font-size:12px;letter-spacing:-.03em}
/* Clublogo in plaats van de initialen: hetzelfde vierkant, het logo past erin
   zonder uitsnede, zodat een staand wapenschild en een rond embleem even zwaar
   wegen. */
.chip-logo{background:var(--raise);padding:5px;overflow:hidden}
.chip-logo img{width:100%;height:100%;object-fit:contain;display:block}
.card-row{display:flex;gap:12px;align-items:center}
.linkbtn{color:inherit;text-decoration:underline;text-underline-offset:3px;font-size:12.6px}
.line-disc{color:var(--m-sponsor-ink);font-weight:600}
.errorpage{max-width:60ch}
.langsw a{padding:6px 11px;border-radius:999px;font-size:12.4px;font-weight:600;color:var(--muted)}
.langsw a[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-s)}
/* de tint-klassen vervangen de inline stijlen uit het prototype (CSP) */
.tint-sponsor{background:var(--m-sponsor);color:var(--m-sponsor-ink)}
.tint-leden{background:var(--m-leden);color:var(--m-leden-ink)}
.tint-comm{background:var(--m-comm);color:var(--m-comm-ink)}
.tint-site{background:var(--m-site);color:var(--m-site-ink)}
.tint-vrijw{background:var(--m-vrijw);color:var(--m-vrijw-ink)}
.tint-event{background:var(--m-event);color:var(--m-event-ink)}
.tint-ink-sponsor{color:var(--m-sponsor-ink)}
.tint-ink-leden{color:var(--m-leden-ink)}
.tint-ink-comm{color:var(--m-comm-ink)}
.tint-ink-site{color:var(--m-site-ink)}
.tint-ink-vrijw{color:var(--m-vrijw-ink)}
.tint-ink-event{color:var(--m-event-ink)}
.line i.tint-sponsor,.line i.tint-leden,.line i.tint-comm,.line i.tint-site,.line i.tint-vrijw,.line i.tint-event{width:9px;height:9px;border-radius:3px}


.icon-sprite{position:absolute}

/* ══════════════════════════════════════════════════════════════════════════
   UITERLIJK: REDACTIE
   Aangezet met define('L2S_SITE_SKIN','redactie') in config.inc.php.

   WAAROM. De standaardvariant gebruikt het idioom dat elke SaaS-site gebruikt:
   overal ronde hoeken, zachte schaduwen, pastelvlakken. Dat leest als sjabloon.
   Deze variant doet het omgekeerde, zoals grote clubsites het doen: rechte
   hoeken, geen schaduw maar haarlijnen, zwarte chrome, en typografie die het
   werk doet in plaats van doosjes.

   Wat NIET verandert: de zes modulekleuren (dat is het merksysteem), de
   inhoud, de HTML, de toegankelijkheid en het contrast. Alleen de tokenlaag en
   een handvol chrome-onderdelen. Owner-verzoek 2026-08-18.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-skin="redactie"]{
  /* rechte hoeken, overal */
  --r:0px; --r-s:0px; --r-l:0px;
  /* geen schaduw: diepte komt van lijnen en vlakken */
  --sh-s:none; --sh:none; --sh-l:none;
  /* neutrale grijzen in plaats van blauwzweem, en echt zwart */
  --ink:#000; --ink-2:#2a2a2a; --muted:#666; --muted-2:#8c8c8c;
  --bg:#fff; --bg-2:#f2f2f2; --surface:#fff; --raise:#f0f0f0;
  --line:rgba(0,0,0,.16); --track:rgba(0,0,0,.2); --tint-line:rgba(0,0,0,.18);
  --ink-surface:#000; --header-bg:#000;
}
:root[data-skin="redactie"][data-theme="dark"]{
  --bg:#0a0a0a; --bg-2:#131313; --surface:#131313; --raise:#1c1c1c;
  --ink:#fff; --ink-2:#d4d4d4; --muted:#9a9a9a; --muted-2:#767676;
  --line:rgba(255,255,255,.18); --track:rgba(255,255,255,.22);
  --ink-surface:#000; --header-bg:#000;
}

/* ── typografie: meer contrast tussen groot en klein ── */
[data-skin="redactie"] h1{letter-spacing:-.045em;font-weight:800;line-height:1.02}
[data-skin="redactie"] h2{letter-spacing:-.04em;font-weight:800;line-height:1.06}
[data-skin="redactie"] .kicker{font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--ink)}
[data-skin="redactie"] .mhero-col .answer{font-size:17px}
[data-skin="redactie"] .mhero-col .answer::before{background:var(--ink);width:64px;height:4px}

/* ── chrome: zwarte balk, geen glas ── */
[data-skin="redactie"] header.site{background:#000;border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none}
[data-skin="redactie"] .brand{color:#fff}
[data-skin="redactie"] .brand .mark{background:#fff;color:#000;border-radius:0}
[data-skin="redactie"] .navlink{color:#c9c9c9;text-transform:uppercase;
  font-size:12px;letter-spacing:.12em;font-weight:700;border-radius:0}
[data-skin="redactie"] .navlink:hover{color:#fff;background:rgba(255,255,255,.1)}
[data-skin="redactie"] .langsw{background:rgba(255,255,255,.1)}
[data-skin="redactie"] .langsw a{color:#b5b5b5;border-radius:0}
[data-skin="redactie"] .langsw a[aria-current="true"]{background:#fff;color:#000}
[data-skin="redactie"] .themesw,[data-skin="redactie"] .burger{background:transparent;
  border-color:rgba(255,255,255,.28);color:#fff;border-radius:0}

/* ── knoppen: hoekig, in kapitalen, hoog contrast ── */
[data-skin="redactie"] .btn{border-radius:0;text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;font-size:12.6px}
[data-skin="redactie"] .btn--pri{background:#000;color:#fff}
[data-skin="redactie"] .btn--pri:hover{background:var(--brand)}
[data-skin="redactie"] .btn--sec{background:transparent;color:var(--ink);
  border:1px solid var(--ink)}
[data-skin="redactie"] .btn--sec:hover{background:var(--ink);color:var(--bg)}
[data-skin="redactie"] header.site .btn--sec{color:#fff;border-color:#fff}
[data-skin="redactie"] header.site .btn--sec:hover{background:#fff;color:#000}
[data-skin="redactie"] header.site .btn--pri{background:#fff;color:#000}

/* ── secties: haarlijnen in plaats van vlakken ── */
[data-skin="redactie"] .section+.section{border-top:1px solid var(--line)}
[data-skin="redactie"] .section--soft{background:var(--bg-2)}
[data-skin="redactie"] .proof{background:#000;border:0}
[data-skin="redactie"] .proof .lbl{color:#8c8c8c}
[data-skin="redactie"] .proof b{color:#fff}
[data-skin="redactie"] .proof a:hover b{color:var(--glow)}

/* ── kaarten en tegels: rand in plaats van schaduw ── */
[data-skin="redactie"] .motor,[data-skin="redactie"] .rcard,
[data-skin="redactie"] .card,[data-skin="redactie"] .itile,
[data-skin="redactie"] .step,[data-skin="redactie"] .auto,
[data-skin="redactie"] .mod,[data-skin="redactie"] .bill,
[data-skin="redactie"] .okpanel,[data-skin="redactie"] .storycard{
  border-radius:0;box-shadow:none;border:1px solid var(--line)}
[data-skin="redactie"] .motor-list,[data-skin="redactie"] .motor-bar,
[data-skin="redactie"] .mrow-ic,[data-skin="redactie"] .chip,
[data-skin="redactie"] .storycard-mark,[data-skin="redactie"] .motor-tag{border-radius:0}
[data-skin="redactie"] .rcard:hover{border-color:var(--ink);transform:none;background:var(--bg-2)}

/* ── de rail en de openknoppen volgen mee ── */
[data-skin="redactie"] .rail{border-radius:0;background:#000;border-color:#000;
  box-shadow:none;animation:none}
[data-skin="redactie"] .railbtn{border-radius:0;color:#b5b5b5}
[data-skin="redactie"] .railbtn:hover{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
[data-skin="redactie"] .railbtn[aria-current="page"]{background:#fff;color:#000;box-shadow:none}
[data-skin="redactie"] .railtip{border-radius:0;background:#fff;color:#000}
[data-skin="redactie"] .sc-btn{border-radius:0;text-transform:uppercase;letter-spacing:.1em;
  border-color:var(--ink);color:var(--ink)}
[data-skin="redactie"] .sc-btn .ring{border-radius:0;background:var(--ink);color:var(--bg)}
[data-skin="redactie"] .modal,[data-skin="redactie"] .modal-in,
[data-skin="redactie"] .modal-x{border-radius:0}
[data-skin="redactie"] .fstep-node{border-radius:0;border-width:2px}
[data-skin="redactie"] .marq{-webkit-mask-image:none;mask-image:none}

/* ══ REDACTIE: DE HERO OVER DE VOLLE BREEDTE ══
   Bij grote clubsites draagt de foto de hero en staat de kop erop, niet ernaast.
   Het beeld gaat daarom van 18 naar 55 procent, met een verloop eroverheen dat
   links het donkerst is zodat de tekst daar zijn contrast houdt.

   De alfawaarden zijn NIET op gevoel gekozen. Voor witte tekst op een spierwitte
   plek in de foto is een zwarte laag van 0,54 het omslagpunt naar AA; bij een
   laag van #111 ligt dat op 0,58. Beide verlopen blijven daar overal boven. */
[data-skin="redactie"] .hero{background:#000;color:#fff;overflow:hidden;position:relative}
[data-skin="redactie"] .hero::before{content:none}
[data-skin="redactie"] .hero::after{inset:0;width:100%;opacity:1;z-index:0;
  background:
    linear-gradient(100deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 42%,rgba(0,0,0,.66) 100%),
    url("/assets/img/sfeer-hero.webp") center/cover no-repeat;
  -webkit-mask-image:none;mask-image:none}
[data-skin="redactie"] .hero .wrap{position:relative;z-index:1}
[data-skin="redactie"] .hero h1{color:#fff}
[data-skin="redactie"] .hero .lead{color:#cfcfcf}
[data-skin="redactie"] .hero .eyebrow{color:#fff;background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24)}
[data-skin="redactie"] .hero .btn--sec{color:#fff;border-color:#fff;background:transparent}
[data-skin="redactie"] .hero .btn--sec:hover{background:#fff;color:#000}
[data-skin="redactie"] .hero .btn--pri{background:#fff;color:#000}
[data-skin="redactie"] .hero .btn--pri:hover{background:var(--glow)}

/* ══════════════════════════════════════════════════════════════════════════
   UITERLIJK: AFFICHE
   Aangezet met define('L2S_SITE_SKIN','affiche').

   Het poster-idioom: bijna geen meubilair, heel veel wit, één enorme uitspraak
   in kapitalen, beeld van rand tot rand, en knoppen als volledig ronde pillen.
   Waar 'redactie' structuur maakt met lijnen en vlakken, maakt deze variant
   structuur met LEEGTE. Kaders, randen en schaduwen gaan er daarom vrijwel
   allemaal uit. Owner-verzoek 2026-08-18.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-skin="affiche"]{
  --r:0px; --r-s:0px; --r-l:0px;
  --sh-s:none; --sh:none; --sh-l:none;
  --ink:#111; --ink-2:#111; --muted:#707070; --muted-2:#9a9a9a;
  --bg:#fff; --bg-2:#fafafa; --surface:#fff; --raise:#f5f5f5;
  --line:rgba(0,0,0,.1); --track:rgba(0,0,0,.14); --tint-line:rgba(0,0,0,.1);
  --ink-surface:#111; --header-bg:rgba(255,255,255,.9);
}
:root[data-skin="affiche"][data-theme="dark"]{
  --bg:#111; --bg-2:#171717; --surface:#171717; --raise:#1f1f1f;
  --ink:#fff; --ink-2:#f0f0f0; --muted:#a0a0a0; --muted-2:#7a7a7a;
  --line:rgba(255,255,255,.14); --track:rgba(255,255,255,.2);
  --header-bg:rgba(17,17,17,.9);
}

/* Typografie draagt alles. De kop van de hero in kapitalen; sectiekoppen NIET,
   want die zijn hele zinnen en worden in kapitalen onleesbaar. */
/* Kapitalen op 68px maakten van een zin van 72 tekens zes regels beeldvullende
   herrie. Kleiner, en met een LICHT POSITIEVE spatiering: kapitalen hebben die
   nodig, terwijl kleine letters juist strakker willen.

   De maat is 28ch en niet smaller: Nederlandse samenstellingen zijn in kapitalen
   loeibreed ("VRIJWILLIGERSWERK" is 17 tekens), dus onder de 24ch past er maar
   één woord per regel en krijg je een smalle toren. Nu drie regels.
   Owner-melding 2026-08-18. */
[data-skin="affiche"] .hero h1{text-transform:uppercase;font-weight:800;
  letter-spacing:.004em;line-height:1.08;font-size:clamp(23px,2.7vw,36px);max-width:28ch}
[data-skin="affiche"] .hero .lead{font-size:16px;max-width:44ch}
/* Het label stond in een grijs blokje dat als markeerstift oogde. */
[data-skin="affiche"] .hero .eyebrow{background:transparent;border:0;padding-left:0;
  letter-spacing:.2em;font-size:11px}
[data-skin="affiche"] h2{font-weight:800;letter-spacing:-.035em;line-height:1.04}
[data-skin="affiche"] .kicker{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--ink)}
[data-skin="affiche"] .lead{font-size:17.5px}

/* Chrome: bijna niets. Geen rand onder de header, navigatie klein en strak. */
[data-skin="affiche"] header.site{border-bottom:0}
[data-skin="affiche"] .navlink{text-transform:uppercase;font-size:12px;
  letter-spacing:.13em;font-weight:700;border-radius:0}
[data-skin="affiche"] .brand .mark{border-radius:0}

/* Knoppen: volledig ronde pillen, zwart of omlijnd. */
[data-skin="affiche"] .btn{border-radius:999px;text-transform:uppercase;
  letter-spacing:.09em;font-weight:700;font-size:12.6px;padding:15px 30px}
[data-skin="affiche"] .btn--pri{background:var(--ink);color:var(--bg)}
[data-skin="affiche"] .btn--pri:hover{background:#000}
[data-skin="affiche"] .btn--sec{background:transparent;color:var(--ink);border:1px solid var(--track)}
[data-skin="affiche"] .btn--sec:hover{border-color:var(--ink)}
[data-skin="affiche"] .sc-btn{border-radius:999px;text-transform:uppercase;letter-spacing:.09em}
[data-skin="affiche"] .sc-btn .ring{border-radius:999px}

/* Structuur uit leegte: meer lucht, minder kaders. */
[data-skin="affiche"] .section{padding:clamp(64px,9vw,132px) 0}
[data-skin="affiche"] .card,[data-skin="affiche"] .itile,[data-skin="affiche"] .rcard,
[data-skin="affiche"] .mod,[data-skin="affiche"] .bill,[data-skin="affiche"] .motor{
  box-shadow:none;border:1px solid var(--line)}
[data-skin="affiche"] .rcard{border:0;border-bottom:1px solid var(--line);padding-left:0;padding-right:0}
[data-skin="affiche"] .rcard:hover{transform:none;background:transparent;border-color:var(--ink)}
[data-skin="affiche"] .feat article{border-top-width:2px;border-top-color:var(--ink)}

/* De hero: beeld van rand tot rand, kop eroverheen. */
[data-skin="affiche"] .hero{background:#111;color:#fff;position:relative;overflow:hidden;
  padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(56px,9vw,120px)}
[data-skin="affiche"] .hero::before{content:none}
[data-skin="affiche"] .hero::after{inset:0;width:100%;opacity:1;z-index:0;
  background:
    linear-gradient(180deg,rgba(17,17,17,.82) 0%,rgba(17,17,17,.68) 45%,rgba(17,17,17,.92) 100%),
    url("/assets/img/sfeer-hero.webp") center 35%/cover no-repeat;
  -webkit-mask-image:none;mask-image:none}
[data-skin="affiche"] .hero .wrap{position:relative;z-index:1}
[data-skin="affiche"] .hero h1,[data-skin="affiche"] .hero .eyebrow{color:#fff}
[data-skin="affiche"] .hero .lead{color:#e0e0e0}
[data-skin="affiche"] .hero .eyebrow{background:rgba(255,255,255,.14);border-color:transparent}
[data-skin="affiche"] .hero .btn--pri{background:#fff;color:#111}
[data-skin="affiche"] .hero .btn--sec{color:#fff;border-color:rgba(255,255,255,.5)}
[data-skin="affiche"] .hero .btn--sec:hover{border-color:#fff}

/* De rail en de logoband blijven licht, want deze variant leeft van wit. */
[data-skin="affiche"] .rail{border-radius:999px;animation:none;box-shadow:none;
  border-color:var(--track)}
[data-skin="affiche"] .railbtn{border-radius:999px}
[data-skin="affiche"] .railtip{border-radius:999px}
[data-skin="affiche"] .proof{background:var(--bg);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}


/* ══ DE HERO PAST IN ÉÉN SCHERM ══
   Geldt voor de twee uiterlijken met een formaatvullende foto. De hero vult de
   hoogte van het venster min de header, en de inhoud staat verticaal gecentreerd.

   svh en niet vh: op een telefoon rekent vh met de balken weggeschoven, waardoor
   de hero bij het laden alsnog een stuk buiten beeld valt. Het is een min-height,
   dus als de inhoud toch hoger is groeit hij gewoon mee in plaats van af te
   kappen. Owner-eis 2026-08-18. */
[data-skin="redactie"] .hero,[data-skin="affiche"] .hero{
  min-height:calc(100svh - 96px);display:grid;align-content:center;
  padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(28px,4vw,56px)}
@media(max-width:1040px){
  [data-skin="redactie"] .hero,[data-skin="affiche"] .hero{min-height:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   UITERLIJK: CLUB   ·   define('L2S_SITE_SKIN','club')
   Naar de ontwerpbrief van 2026-08-18. Redactioneel en beeldgedreven, zoals
   grote clubsites. Wordt sectie voor sectie opgebouwd.

   STAP 1 van 9: kleur, typografie, knoppen, chrome en de hero.

   PALET: precies drie kleuren.
     zwart   #0b0b0b  dominant, draagt de chrome
     gebroken wit #f5f3f0  de pagina. Warm, niet het blauwgrijs van elke SaaS-site.
     accent  #0d4f5c  het merkgroen, SPAARZAAM: één element per scherm.
   Meer is er niet. De twee grijzen die je in de tokens ziet zijn geen vierde
   kleur maar stappen van dezelfde zwart-naar-wit-as, nodig voor hover-vlakken
   en bijschriften. Ze zijn bewust DONKER (#46443f, 8,3:1 op de pagina): de
   brief vraagt om geen grijs-op-grijs, en het oude #8a877f haalde net 3,4:1.
   Geen verlopen in de UI (alleen als scrim over een foto), geen gekleurde
   sectievlakken. Kleur hoort uit de content te komen.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-skin="club"]{
  --r:0px; --r-s:0px; --r-l:0px;
  --sh-s:none; --sh:none; --sh-l:none;

  --ink:#0b0b0b; --ink-2:#0b0b0b; --muted:#46443f; --muted-2:#46443f;
  --bg:#f5f3f0; --bg-2:#f5f3f0; --surface:#fff; --raise:#ece9e4;
  --line:rgba(11,11,11,.14); --track:rgba(11,11,11,.2); --tint-line:rgba(11,11,11,.14);
  --brand:#0d4f5c; --brand-hi:#0b3f4a; --glow:#0d4f5c; --glow-soft:rgba(13,79,92,.12);
  --ink-surface:#0b0b0b; --on-ink:#f5f3f0; --header-bg:#0b0b0b;
  --page:transparent; --page-ink:#0b0b0b;
}
:root[data-skin="club"][data-theme="dark"]{
  --bg:#0b0b0b; --bg-2:#0b0b0b; --surface:#141414; --raise:#1b1b1b;
  --ink:#f5f3f0; --ink-2:#f5f3f0; --muted:#a09d96; --muted-2:#7d7a73;
  --line:rgba(245,243,240,.16); --track:rgba(245,243,240,.24);
  --header-bg:#0b0b0b; --page-ink:#f5f3f0;
}

/* ── TYPOGRAFIE ──────────────────────────────────────────────────────────
   Eén familie, drie rollen: kop (zwaar en strak), body (rustig), label
   (klein in kapitalen). Geen grijs-op-grijs: body is dezelfde inkt als de kop,
   alleen de labels zijn gedempt. */
[data-skin="club"] h1{font-weight:800;letter-spacing:-.038em;line-height:1.02}
[data-skin="club"] h2{font-weight:800;letter-spacing:-.035em;line-height:1.05}
[data-skin="club"] h3{font-weight:750;letter-spacing:-.02em}
[data-skin="club"] .kicker{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--ink)}
/* LET OP: nooit een blanket-regel op p. Die zette ook de alinea's op de zwarte
   vlakken (hero, use case, verhaalkaart, modal, voettekst) op inktzwart, en dan
   is er niets meer te lezen. Alleen de lichte context krijgt hier een kleur, en
   elk donker vlak zegt hieronder expliciet wat het wil. */
[data-skin="club"] .section .lead{color:var(--ink-2)}
[data-skin="club"] .feat p,[data-skin="club"] .card p{color:var(--muted)}

/* ── KNOPPEN: ÉÉN STIJL, OVERAL ─────────────────────────────────────────
   Rechthoekig, in kapitalen. Gevuld = de enige plek waar het accent mag
   opduiken. Omlijnd = alle andere acties. Geen derde variant. */
[data-skin="club"] .btn{border-radius:0;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;font-size:12px;padding:16px 28px;border:1px solid transparent}
[data-skin="club"] .btn--pri{background:var(--ink);color:var(--bg);box-shadow:none}
[data-skin="club"] .btn--pri:hover{background:var(--brand)}
[data-skin="club"] .btn--sec{background:transparent;color:var(--ink);border-color:var(--track)}
[data-skin="club"] .btn--sec:hover{border-color:var(--ink);background:transparent}
[data-skin="club"] .btn--lite{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}

/* ── CHROME: zwarte balk, verder niets ──────────────────────────────────── */
[data-skin="club"] header.site{background:#0b0b0b;border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none}
[data-skin="club"] .brand{color:#f5f3f0}
[data-skin="club"] .brand .mark{background:#f5f3f0;color:#0b0b0b;border-radius:0}
[data-skin="club"] .navlink{color:#b6b3ac;text-transform:uppercase;font-size:11.5px;
  letter-spacing:.14em;font-weight:700;border-radius:0}
[data-skin="club"] .navlink:hover{color:#fff;background:transparent;text-decoration:underline;
  text-underline-offset:6px}
[data-skin="club"] .langsw{background:transparent}
[data-skin="club"] .langsw a{color:#b6b3ac;border-radius:0}
[data-skin="club"] .langsw a[aria-current="true"]{background:transparent;color:#fff;
  box-shadow:inset 0 -2px 0 #fff}
[data-skin="club"] .themesw,[data-skin="club"] .burger{background:transparent;
  border-color:rgba(245,243,240,.3);color:#f5f3f0;border-radius:0}
[data-skin="club"] header.site .btn--sec{color:#f5f3f0;border-color:rgba(245,243,240,.45)}
[data-skin="club"] header.site .btn--sec:hover{border-color:#fff}
[data-skin="club"] header.site .btn--pri{background:var(--brand);color:#fff}
[data-skin="club"] header.site .btn--pri:hover{background:#12606f}

/* ── RUIMTE: secties mogen ademen ───────────────────────────────────────── */
[data-skin="club"] .section{padding:clamp(72px,10vw,150px) 0}
[data-skin="club"] .section--soft{background:var(--bg)}
/* background-color en NIET background: de verkorte vorm wist background-image,
   en daar zit de sfeerfoto van deze sectie in. */
[data-skin="club"] .section--ink{background-color:#0b0b0b}
[data-skin="club"] .section+.section{border-top:1px solid var(--line)}

/* ── HERO: beeld over de volle breedte, scrim van zwart naar transparant ──
   De tekst staat linksonder, waar de scrim het dichtst is. Eén accentknop. */
[data-skin="club"] .hero{position:relative;overflow:hidden;background:#0b0b0b;color:#fff;
  min-height:calc(100svh - 96px);display:grid;align-content:end;
  padding-top:clamp(60px,10vw,120px);padding-bottom:clamp(44px,6vw,84px)}
[data-skin="club"] .hero::before{content:none}
[data-skin="club"] .hero::after{inset:0;width:100%;opacity:1;z-index:0;
  background:
    linear-gradient(0deg,rgba(11,11,11,.95) 0%,rgba(11,11,11,.72) 38%,rgba(11,11,11,.34) 72%,rgba(11,11,11,.28) 100%),
    url("/assets/img/sfeer-hero.webp") center 40%/cover no-repeat;
  -webkit-mask-image:none;mask-image:none}
[data-skin="club"] .hero .wrap{position:relative;z-index:1}
[data-skin="club"] .hero-grid{grid-template-columns:minmax(0,1fr);gap:0;align-items:end}
[data-skin="club"] .hero .eyebrow{background:transparent;border:0;padding:0;color:#fff;
  font-size:11px;letter-spacing:.24em;font-weight:700;text-transform:uppercase}
[data-skin="club"] .hero .eyebrow svg{display:none}
[data-skin="club"] .hero h1{color:#fff;font-size:clamp(30px,4.4vw,54px);max-width:24ch;
  margin-top:18px}
[data-skin="club"] .hero .lead{color:#d8d5cf;max-width:46ch;margin-top:20px;font-size:16.4px}
[data-skin="club"] .hero-act{margin-top:clamp(26px,3vw,38px)}
[data-skin="club"] .hero .hero-cta{flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center}
[data-skin="club"] .hero .btn--pri{background:var(--brand);color:#fff;border-color:var(--brand)}
[data-skin="club"] .hero .btn--pri:hover{background:#12606f}
[data-skin="club"] .hero .btn--sec{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
[data-skin="club"] .hero .btn--sec:hover{border-color:#fff}
@media(max-width:1040px){[data-skin="club"] .hero{min-height:0}}

/* ══ CLUB, STAP 2 van 9: logoband + "Wat maakt ons anders" ═════════════════
   Twee dingen uit de brief landen hier.

   1. MODULEKLEUREN MONOCHROOM. De zes pasteltinten zaten als vlakje achter een
      icoon náást elke tekstregel. Dat is precies het "feature card met icoon en
      kleur-achtergrond" dat eruit moest. In dit uiterlijk zijn de tints kleurloos
      en verdwijnen de decoratieve iconen helemaal; de modulekleur leeft alleen
      nog op de moduledetailpagina's, waar hij iets ONDERSCHEIDT in plaats van
      versiert. Owner-akkoord 2026-08-18.

   2. GEEN KAARTEN MAAR KOLOMMEN. Zonder icoon en zonder doosje blijft er een
      redactioneel raster over: een dunne lijn boven elk item, een kop, een
      alinea. Dat is hoe een clubsite een opsomming zet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* de tints worden neutraal, overal in dit uiterlijk */
[data-skin="club"] .tint-sponsor,[data-skin="club"] .tint-leden,
[data-skin="club"] .tint-comm,[data-skin="club"] .tint-site,
[data-skin="club"] .tint-vrijw,[data-skin="club"] .tint-event{
  background:transparent;color:var(--ink)}
[data-skin="club"] .tint-ink-sponsor,[data-skin="club"] .tint-ink-leden,
[data-skin="club"] .tint-ink-comm,[data-skin="club"] .tint-ink-site,
[data-skin="club"] .tint-ink-vrijw,[data-skin="club"] .tint-ink-event{color:var(--ink)}

/* decoratieve iconen weg: naast elke tekstregel voegen ze niets toe */
[data-skin="club"] .feat .chip{display:none}
[data-skin="club"] .rcard .chip{display:none}

/* ── logoband: rustige band tussen twee haarlijnen ───────────────────────── */
[data-skin="club"] .proof{background:var(--bg);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
[data-skin="club"] .proof .wrap{padding-top:26px;padding-bottom:26px}
[data-skin="club"] .proof .lbl{color:var(--muted);letter-spacing:.2em;font-size:11px}
[data-skin="club"] .proof b{color:var(--ink);font-weight:700;letter-spacing:-.01em;
  text-transform:uppercase;font-size:14px}
[data-skin="club"] .proof a:hover b{color:var(--brand)}

/* ── opsommingen als redactioneel raster ─────────────────────────────────── */
[data-skin="club"] .feat{gap:clamp(26px,3.4vw,44px) clamp(26px,3.4vw,48px)}
[data-skin="club"] .feat article{padding-top:20px;border-top:2px solid var(--ink)}
[data-skin="club"] .feat h3{font-size:17.4px;margin-bottom:9px;letter-spacing:-.022em}
[data-skin="club"] .feat p{font-size:14.6px;line-height:1.62;color:var(--muted)}

/* ── de sectie zelf: kop links, niet gecentreerd ─────────────────────────── */
[data-skin="club"] .section--mid .head{text-align:left}
[data-skin="club"] .section--mid .head .lead,
[data-skin="club"] .section--mid .head h2{margin-left:0;margin-right:0}
/* En de flexbox eromheen ook. text-align:left lijnt alleen de TEKST BINNEN het
   blok uit; met align-items:center krimpt het blok zelf tot zijn inhoud en
   wordt dat gecentreerd. Dan staat de kop midden op de pagina terwijl de kaart
   eronder links staat. Owner-melding 2026-08-18. */
[data-skin="club"] .section--mid .sc-head{align-items:stretch}
[data-skin="club"] .section--mid .sc-btn{align-self:flex-start}
/* Alleen de knop die RECHTSTREEKS in de sectie staat, niet die binnen de
   verhaalkaart: die kaart is een gecentreerde compositie en daar hoort de
   knop dus in het midden. Het kind-teken (>) maakt dat verschil expliciet
   in plaats van het verderop weer terug te draaien. */
[data-skin="club"] .section--mid > .wrap > .story-cta{justify-content:flex-start}
[data-skin="club"] .head h2{max-width:16ch}
[data-skin="club"] .head .lead{max-width:54ch}

/* ── de modal: zwart vlak, geen doosjes erin ─────────────────────────────── */
[data-skin="club"] .modal-in{background:#0b0b0b;color:#f5f3f0;border-radius:0}
[data-skin="club"] .modal::backdrop{background:rgba(11,11,11,.78);backdrop-filter:none}
[data-skin="club"] .modal-in .kicker{color:#f5f3f0}
[data-skin="club"] .modal-in h2{color:#fff}
[data-skin="club"] .modal-in p{color:#c8c5bf}
[data-skin="club"] .modal-in .feat article{border-top-color:rgba(245,243,240,.85)}
[data-skin="club"] .modal-in .feat h3{color:#fff}
[data-skin="club"] .modal-in .feat p{color:#a8a5a0}
[data-skin="club"] .modal-in .rcard{background:transparent;border:0;
  border-bottom:1px solid rgba(245,243,240,.2);border-radius:0;padding:13px 0;color:#f5f3f0}
[data-skin="club"] .modal-in .rcard:hover{background:transparent;transform:none;
  border-bottom-color:#fff}
[data-skin="club"] .modal-in .rcard strong{color:#fff;font-size:14px}
[data-skin="club"] .modal-in .modal-x{border-radius:0;background:rgba(245,243,240,.14);color:#fff}

/* ══ CLUB: DONKERE VLAKKEN ZEGGEN ZELF WAT ZE WILLEN ══
   Elk vlak met een donkere achtergrond krijgt hier zijn eigen tekstkleuren, in
   plaats van te hopen dat een algemene regel het goed doet. Nagerekend op
   #0b0b0b: body 15,0:1, gedempt 8,7:1. */
[data-skin="club"] .section--ink,[data-skin="club"] .section--ink p,
[data-skin="club"] .section--ink .lead,[data-skin="club"] .section--ink .kicker,
[data-skin="club"] .storycard,[data-skin="club"] .storycard p,
[data-skin="club"] .modal-in,[data-skin="club"] footer.site p{color:#e8e5e0}
[data-skin="club"] .section--ink h2,[data-skin="club"] .section--ink h3,
[data-skin="club"] .storycard h2,[data-skin="club"] .storycard .kicker{color:#fff}
[data-skin="club"] .section--ink .lead,[data-skin="club"] .storycard p,
[data-skin="club"] .step p,[data-skin="club"] .checks li{color:#b9b5ae}
[data-skin="club"] .storycard::before{background:none}

/* ══ CLUB: HET ACCENT OP DE ICONEN ══
   Owner-verzoek: de rail en de functionele iconen in het merkgroen van de live
   site. Op zwart is #0d4f5c te donker om te lezen, dus daar een lichtere trap
   van dezelfde kleur: #2e9fb5 haalt 6,4:1 op #0b0b0b. Op de lichte pagina blijft
   het diepe #0d4f5c, dat haalt daar 8,0:1. */
[data-skin="club"] .rail{background:#0b0b0b;border-color:#0d4f5c;box-shadow:none;animation:none}
[data-skin="club"] .railbtn{color:#2e9fb5}
[data-skin="club"] .railbtn:hover{background:rgba(46,159,181,.16);color:#66c8da;box-shadow:none}
[data-skin="club"] .railbtn[aria-current="page"]{background:#0d4f5c;color:#fff}
[data-skin="club"] .railtip{background:#0d4f5c;color:#fff;border-radius:0}
[data-skin="club"] .storycard-mark{background:#0d4f5c;color:#fff}
/* De stapnummers kregen hier eerst een accentrand en de eerste een gevuld vlak,
   toen dat nog ronde bollen waren. Stap 5 maakte er kale cijfers van, en dan is
   dat gevulde vlak een groen blokje achter de "1". Weg dus: de nadruk op de
   eerste stap komt van de dikkere lijn eronder. */
[data-skin="club"] .checks li svg{color:#2e9fb5}
[data-skin="club"] .hero-note svg{color:#2e9fb5}
[data-skin="club"] .mrow-ic{color:#0d4f5c}
[data-skin="club"] .sc-btn .ring{background:#0d4f5c;color:#fff}
[data-skin="club"] .section--ink .sc-btn{border-color:#2e9fb5;color:#fff}
[data-skin="club"] .section--ink .sc-btn .ring{background:#2e9fb5;color:#0b0b0b}

/* ══ CLUB: ÉÉN VORMTAAL, GEEN UITZONDERINGEN ══
   De tokens --r/--r-s/--r-l staan al op 0, maar ruim veertig onderdelen hebben
   een hardgecodeerde ronding die daar niet aan hangt: pillen van 999px, cirkels
   van 50% en losse waarden tussen 7 en 16px. Ze staan hier opgesomd; een
   blanket-regel op * verliest het van elke specifiekere selector en zou de helft
   stil laten staan. Owner-melding 2026-08-18. */
[data-skin="club"] .rail,[data-skin="club"] .railbtn,[data-skin="club"] .railtip,
[data-skin="club"] .sc-btn,[data-skin="club"] .sc-btn .ring,
[data-skin="club"] .langsw,[data-skin="club"] .langsw a,[data-skin="club"] .langsw button,
[data-skin="club"] .navlink,[data-skin="club"] .burger,[data-skin="club"] .themesw,
[data-skin="club"] .chip,[data-skin="club"] .card .chip,[data-skin="club"] .feat .chip,
[data-skin="club"] .mod .chip,[data-skin="club"] .rcard .chip,[data-skin="club"] .role .chip,
[data-skin="club"] .pick .chip,[data-skin="club"] .badge .chip,
[data-skin="club"] .modal-in .rcard .chip,[data-skin="club"] .mega-item .chip,
[data-skin="club"] .mrow-ic,[data-skin="club"] .motor-list,[data-skin="club"] .motor-tag,
[data-skin="club"] .motor-bar,[data-skin="club"] .rcard,[data-skin="club"] .modrow,
[data-skin="club"] .storycard-mark,[data-skin="club"] .fstep-node,
[data-skin="club"] .modal-x,[data-skin="club"] .okpanel .ok-ic,
[data-skin="club"] .itile,[data-skin="club"] .stat,[data-skin="club"] .calcrow,
[data-skin="club"] .quote .res,[data-skin="club"] .mega-item,[data-skin="club"] .msheet__panel a,
[data-skin="club"] .mod .sw,[data-skin="club"] .pbar button,[data-skin="club"] .skip,
[data-skin="club"] .cc h3 .ic,[data-skin="club"] .mtile .on,[data-skin="club"] .proof .cl img,
[data-skin="club"] .mod .free,[data-skin="club"] .save,[data-skin="club"] .step::before,
[data-skin="club"] input[type=range]{border-radius:0}

/* APART, en met opzet NIET in de lijst hierboven. Kent een browser één selector
   in een komma-lijst niet, dan gooit hij de HELE regel weg. Firefox kent
   ::-webkit-slider-thumb niet en Chrome kent ::-moz-range-thumb niet, dus samen
   in één lijst werkte er in geen enkele browser iets. Precies daardoor bleef bij
   de eerste poging alles rond terwijl de regels er wel stonden. */
[data-skin="club"] input[type=range]::-webkit-slider-thumb{border-radius:0}
[data-skin="club"] input[type=range]::-moz-range-thumb{border-radius:0}

[data-skin="club"] .rail{padding:6px}
[data-skin="club"] .railbtn{width:46px;height:46px}

/* ══ CLUB, STAP 3 van 9: de use case ══════════════════════════════════════
   Twee doosjes eruit, één reeks ervoor terug.

   1. DE DRIE STAPPEN waren kaartjes met een randje, een vlakje en een cijfer in
      een cirkeltje dat half over de bovenrand hing. Nu een genummerde reeks: het
      cijfer groot in wit, een dunne lijn eronder, dan de kop. Dat leest als een
      stappenplan in plaats van als drie losse tegels.

      Wit en niet het accent: de brief zegt hoogstens één accentelement per
      scherm, en drie stapcijfers zijn er drie. Bovendien haalde het accent op
      het lichtste punt van de scrim maar 3,5:1; genoeg voor grote tekst, maar
      krap. Wit haalt daar 10,9:1 en het accent blijft voor de knop.

   2. HET BLOK "Zonder dat een vrijwilliger iets doet" was een doos BINNEN een
      sectie die zelf al een vlak is. Twee randen om dezelfde inhoud. Nu geen
      doos meer, alleen een haarlijn erboven die hem van de stappen scheidt.

   Het cijfer staat via een CSS-teller in ::before, dus de HTML blijft ongemoeid.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-skin="club"] .flow{gap:clamp(26px,3.6vw,52px);counter-reset:st}
[data-skin="club"] .step{background:transparent;border:0;border-radius:0;padding:0;
  padding-top:56px;position:relative}
[data-skin="club"] .step::before{counter-increment:st;content:counter(st);
  position:absolute;top:0;left:0;width:auto;height:auto;border-radius:0;
  background:transparent;color:#f5f3f0;font-size:34px;font-weight:800;
  letter-spacing:-.04em;line-height:1;display:block}
[data-skin="club"] .step::after{content:"";position:absolute;top:46px;left:0;right:0;
  height:1px;background:rgba(245,243,240,.28)}
[data-skin="club"] .step h3{margin:0 0 10px;font-size:18px;color:#fff;letter-spacing:-.022em}
[data-skin="club"] .step p{font-size:14.6px;line-height:1.62;color:#b9b5ae}

[data-skin="club"] .auto{background:transparent;border:0;border-radius:0;padding:0;
  margin-top:clamp(44px,5.5vw,80px);padding-top:clamp(30px,3.6vw,44px);
  border-top:1px solid rgba(245,243,240,.28)}
[data-skin="club"] .auto .kicker{color:#2e9fb5}
[data-skin="club"] .auto h3{color:#fff;font-size:clamp(20px,2.4vw,26px);margin-top:6px;
  letter-spacing:-.03em;max-width:18ch}
[data-skin="club"] .checks{gap:13px}
[data-skin="club"] .checks li{font-size:15px;color:#d5d2cc}
[data-skin="club"] .checks li b{color:#fff;font-weight:700}

/* ══ CLUB, STAP 4 van 9: modules en prijzen ════════════════════════════════
   De sectie met de meeste doosjes. Alles wat een kader had krijgt een lijn, en
   waar twee kaders om dezelfde inhoud stonden blijft er één over.

   DE MODULEKAARTEN. Waren afgeronde tegels met schaduw, een gekleurde tint en
   een schuifje van 999px. Nu een vlak vak met een dunne rand. De AAN-stand is
   het enige waar kleur echt iets betekent, en die is nu ook echt af te lezen:
   zwart vlak, witte tekst. Dat is duidelijker dan een tint die verandert.

   DE REKENKAART. Stond in een doos met schaduw naast de modules. Nu een kolom
   met alleen een linkerlijn, zodat de aandacht naar het bedrag gaat.

   HET VOORBEELD. Het paar kaart-plus-knop stond gecentreerd terwijl de kop
   links staat. Nu allebei links, op dezelfde lijn.
   ═══════════════════════════════════════════════════════════════════════════ */

/* het voorbeeld links, in lijn met de kop */
[data-skin="club"] .sc-prev{align-items:flex-start;margin-left:0;max-width:640px}

/* de clubmotorkaart: rand in plaats van doos, en de bar als strook */
[data-skin="club"] .motor{background:var(--surface);border:1px solid var(--line);padding:0}
[data-skin="club"] .motor-top{padding:16px 18px 14px;border-bottom:1px solid var(--line)}
[data-skin="club"] .motor-sub{padding:0 18px;margin-top:14px}
[data-skin="club"] .motor-list{margin:16px 0 0;border:0;border-top:1px solid var(--tint-line)}
[data-skin="club"] .motor-bar{background:transparent;border-top:1px solid var(--ink);
  padding:16px 18px;margin-top:0}
[data-skin="club"] .motor-tag{background:transparent;border:1px solid var(--track);
  color:var(--muted);padding:3px 8px}

/* modulekaarten: vlak vak, aan-stand als zwart vlak */
[data-skin="club"] .mod{border-radius:0;border:1px solid var(--line);box-shadow:none;
  background:var(--surface);min-height:0;padding:18px}
[data-skin="club"] .mod:hover{transform:none;box-shadow:none;border-color:var(--ink)}
[data-skin="club"] .mod[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);
  box-shadow:none;color:var(--bg)}
[data-skin="club"] .mod[aria-pressed="true"] h3,
[data-skin="club"] .mod[aria-pressed="true"] .price{color:var(--bg)}
[data-skin="club"] .mod[aria-pressed="true"] p{color:#b9b5ae}
[data-skin="club"] .mod[aria-pressed="true"] .chip{color:var(--bg)}
[data-skin="club"] .mod .sw{border-radius:0;width:34px;height:18px;background:var(--track)}
[data-skin="club"] .mod[aria-pressed="true"] .sw{background:var(--bg)}
[data-skin="club"] .mod .free{background:transparent;border:1px solid var(--track);
  color:var(--muted)}
[data-skin="club"] .mod h3{font-size:16px}
[data-skin="club"] .mod .price{font-size:15px}

/* de rekenkaart: kolom met een lijn, geen doos */
[data-skin="club"] .bill{background:transparent;border:0;border-left:1px solid var(--ink);
  border-radius:0;box-shadow:none;padding:0 0 0 clamp(18px,2.4vw,30px)}
[data-skin="club"] .bill h3{font-size:15px;text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;color:var(--muted)}
[data-skin="club"] .total{border-top:2px solid var(--ink)}
[data-skin="club"] .total b{font-size:30px;letter-spacing:-.04em}
[data-skin="club"] .save{background:transparent;border:1px solid var(--track);color:var(--ink)}
[data-skin="club"] .fine{text-align:left;color:var(--muted)}

/* de schuifjes in dezelfde vormtaal */
[data-skin="club"] input[type=range]{height:4px;background:var(--track)}
[data-skin="club"] input[type=range]::-webkit-slider-thumb{background:var(--ink)}
[data-skin="club"] input[type=range]::-moz-range-thumb{background:var(--ink);border:0}

/* ══ CLUB, STAP 5 van 9: de onboarding ═════════════════════════════════════
   Dezelfde vorm als de use case van stap 3, zodat de pagina één manier heeft om
   stappen te tonen in plaats van twee.

   De bollen met een rand en een verbindingslijn er doorheen zijn eruit. Nu het
   cijfer groot en links uitgelijnd, met ÉÉN doorlopende haarlijn over de volle
   breedte eronder. Die lijn verbindt de stappen net zo goed als de oude, maar
   hij hoort bij de rij in plaats van dat elke stap zijn eigen halve lijn tekent.

   De eerste stap houdt zijn nadruk, niet met een gevulde bol maar met een dikkere
   lijn eronder: dat is waar je begint.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-skin="club"] .fchart{gap:clamp(20px,2.6vw,40px)}
[data-skin="club"] .fstep{text-align:left;padding:0;padding-top:52px}
[data-skin="club"] .fstep-node{position:absolute;top:0;left:0;width:auto;height:auto;
  margin:0;background:transparent;border:0;border-radius:0;color:var(--ink);
  font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1;display:block}
[data-skin="club"] .fstep::before{content:"";left:0;width:100%;top:44px;height:1px;
  background:var(--line)}
[data-skin="club"] .fstep::after{content:none}
[data-skin="club"] .fstep:first-child::before{height:2px;background:var(--ink)}
[data-skin="club"] .fstep h3{margin:16px 0 7px;font-size:16.6px}
[data-skin="club"] .fstep p{font-size:14.2px;line-height:1.62;color:var(--muted)}

@media(max-width:1040px){
  /* Verticaal blijft de lijn links staan, zoals in de standaardvariant, maar dan
     als haarlijn naast het cijfer in plaats van door de bollen heen. */
  [data-skin="club"] .fstep{grid-template-columns:44px minmax(0,1fr);padding-top:0;
    padding-bottom:clamp(22px,3vw,30px)}
  [data-skin="club"] .fstep-node{position:static;font-size:24px}
  [data-skin="club"] .fstep::before{content:"";top:34px;left:11px;width:1px;
    height:calc(100% - 34px);background:var(--line)}
  [data-skin="club"] .fstep:first-child::before{width:2px;background:var(--ink)}
  [data-skin="club"] .fstep:last-child::before{content:none}
  [data-skin="club"] .fstep h3{margin-top:4px}
}

/* ══ CLUB, STAP 6 van 9: verhaalkaart en FAQ ═══════════════════════════════
   DE VERHAALKAART was een gecentreerde doos met een foto erin, midden op een
   lichte pagina. Twee talen door elkaar: de rest van de sectie is links
   uitgelijnd en zonder kaders. Nu een band over de volle sectiebreedte met de
   foto en een scrim, tekst links, net als de hero en de use case. Het merkteken
   staat weer als klein blokje bovenaan in plaats van als gecentreerde badge.

   DE FAQ hield een plusje van twee streepjes rechts. In deze vormtaal is dat een
   liggend streepje dat bij openen kantelt: minder tekens, zelfde betekenis. De
   vraag zelf wordt zwaarder gezet, want dat is de tekst die geciteerd wordt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── verhaalkaart: band in plaats van doos ── */
[data-skin="club"] .storycard{max-width:none;text-align:left;padding:clamp(44px,6vw,88px) clamp(24px,4vw,56px)}
[data-skin="club"] .storycard::before{content:none}
[data-skin="club"] .storycard-mark{margin:0 0 20px;width:42px;height:42px;
  background:var(--brand);color:#fff}
[data-skin="club"] .storycard .kicker{color:#e8e5e0}
[data-skin="club"] .storycard h2{margin:12px 0 14px;max-width:18ch;
  font-size:clamp(24px,3.2vw,38px)}
[data-skin="club"] .storycard p{margin:0;max-width:52ch;font-size:16px}
[data-skin="club"] .storycard .story-cta{justify-content:flex-start;margin-top:clamp(26px,3vw,36px)}
[data-skin="club"] .storycard .btn--pri{background:#fff;color:#0b0b0b;border-color:#fff}
[data-skin="club"] .storycard .btn--pri:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ── FAQ: haarlijnen en een kantelend streepje ── */
[data-skin="club"] .faq{gap:0 clamp(30px,4vw,60px)}
[data-skin="club"] .faq details{border-top:1px solid var(--line)}
[data-skin="club"] .faq summary{padding:20px 44px 20px 0;font-size:16.6px;font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
[data-skin="club"] .faq summary::after{border:0;background:var(--ink);width:14px;height:2px;
  right:8px;top:29px;transform:none;transition:transform .2s ease}
[data-skin="club"] .faq details[open] summary::after{transform:rotate(90deg);background:var(--brand)}
[data-skin="club"] .faq .ans{padding:0 44px 22px 0;font-size:15px;line-height:1.68;color:var(--muted)}

/* ══ CLUB, STAP 7 van 9: voettekst en cookiebanner ═════════════════════════
   DE VOETTEKST was al zwart, maar leunde op een blauwgrijze tekstkleur (#93a8b8)
   die met dit palet niet meer klopt en op 6,0:1 zit. Nu de warme grijs-as van de
   rest van het uiterlijk, kolomkoppen in kapitalen met meer spatiëring, en een
   haarlijn onder de eerste rij zodat de kolommen als een raster lezen.

   DE COOKIEBANNER was een zwevende doos met een afgeronde rand, een schaduw van
   70px en een gekleurd icoonvlakje. In dit uiterlijk een strakke zwarte balk aan
   de onderkant over de volle breedte: hij hoort bij de site en niet bij de
   inhoud, dus hij hoeft ook niet als kaartje te zweven.

   Over de rail: die zweeft op smalle schermen 14px boven de onderrand en zit dus
   in hetzelfde gebied. De banner heeft z-index 170 tegen 80 en is ruim hoger dan
   de 72px die de rail beslaat, dus hij dekt hem volledig af in plaats van er half
   overheen te vallen. Zodra je een keuze maakt verdwijnt de banner en staat de
   rail er weer. Dat is met opzet: de keuze gaat voor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── voettekst ── */
[data-skin="club"] footer.site{background:#0b0b0b;color:#a8a5a0;
  padding-top:clamp(52px,6vw,88px)}
[data-skin="club"] footer.site h4{color:#fff;font-size:11px;letter-spacing:.2em}
[data-skin="club"] footer.site a{color:#a8a5a0}
[data-skin="club"] footer.site a:hover{color:#fff}
[data-skin="club"] .fgrid{padding-bottom:clamp(30px,3.6vw,48px);
  border-bottom:1px solid rgba(245,243,240,.16)}
[data-skin="club"] .fbot{border-top:0;margin-top:20px;padding-top:0;color:#8a877f}
[data-skin="club"] .fbrand .mark{background:#f5f3f0;color:#0b0b0b}
[data-skin="club"] .colofon p{color:#a8a5a0}
[data-skin="club"] .socials a{border:1px solid rgba(245,243,240,.24);color:#e8e5e0}
[data-skin="club"] .socials a:hover{background:#f5f3f0;color:#0b0b0b;border-color:#f5f3f0}

/* ── cookiebanner: balk in plaats van zwevende kaart ── */
[data-skin="club"] .cc{left:0;right:0;bottom:0;max-width:none;border-radius:0;
  border:0;border-top:1px solid rgba(245,243,240,.2);box-shadow:none;
  background:#0b0b0b;color:#e8e5e0;padding:clamp(20px,2.6vw,28px) clamp(16px,4vw,32px)}
[data-skin="club"] .cc h3{color:#fff;font-size:16px;letter-spacing:-.02em}
[data-skin="club"] .cc h3 .ic{background:transparent;border:1px solid rgba(245,243,240,.3);
  color:#e8e5e0;width:30px;height:30px}
[data-skin="club"] .cc p{color:#b9b5ae;max-width:72ch}
[data-skin="club"] .cc .btn--sec{color:#e8e5e0;border-color:rgba(245,243,240,.4)}
[data-skin="club"] .cc .btn--sec:hover{border-color:#fff;color:#fff}
[data-skin="club"] .cc .btn--pri{background:#f5f3f0;color:#0b0b0b}
[data-skin="club"] .cc .btn--pri:hover{background:var(--brand);color:#fff}
[data-skin="club"] .cc a{color:#e8e5e0}

/* ══ CLUB, STAP 8 van 9: de detailpagina's ═════════════════════════════════
   Modules, integraties en rollen. Dezelfde ingreep als op de homepage: kaders
   worden lijnen, en waar twee kaders om dezelfde inhoud stonden blijft er één.

   HIER MAG DE MODULEKLEUR WEL. Op de detailpagina onderscheidt hij één module
   van de andere vijf, en dat is precies het verschil met de opsommingen op de
   homepage waar hij naast elke regel stond te versieren. Hij zit alleen op de
   badge bovenaan, niet op elk element.

   DE EIND-CTA had een verloop van twee tinten groen. De brief zegt geen
   verlopen, dus dat wordt een effen zwart vlak met één accentknop erin.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-skin="club"] .crumbs{font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted)}
[data-skin="club"] .crumbs .cur{color:var(--ink);font-weight:700}

/* de badge bovenaan: hier blijft de modulekleur, als enige plek */
[data-skin="club"] .badge{border-radius:0;background:transparent;border:1px solid var(--ink);
  color:var(--ink);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700}

/* kaarten en tegels: lijn in plaats van doos */
[data-skin="club"] .card{border-radius:0;box-shadow:none;border:1px solid var(--line);
  padding:20px;transition:border-color .16s}
[data-skin="club"] .card:hover{border-color:var(--ink);transform:none;box-shadow:none}
[data-skin="club"] .card h3{font-size:17px;letter-spacing:-.022em}
[data-skin="club"] .itile{border-radius:0;box-shadow:none;border:1px solid var(--line)}
[data-skin="club"] .itile:hover{border-color:var(--ink)}
[data-skin="club"] .ipill{border-radius:0;border:1px solid var(--track);background:transparent}

/* de prijskolom naast een module: lijn links, geen doos */
[data-skin="club"] .pricebox{background:transparent;border:0;border-left:1px solid var(--ink);
  border-radius:0;box-shadow:none;padding:0 0 0 clamp(18px,2.4vw,30px)}
[data-skin="club"] .pricebox .big b{font-size:32px;letter-spacing:-.04em}
[data-skin="club"] .ex{color:var(--muted)}

/* de eind-CTA: effen zwart, geen verloop */
[data-skin="club"] .final{background:#0b0b0b;border-radius:0}
[data-skin="club"] .final::before{content:none}
[data-skin="club"] .final h2{color:#fff}
[data-skin="club"] .final p{color:#b9b5ae}
[data-skin="club"] .final .btn--pri{background:#f5f3f0;color:#0b0b0b;border-color:#f5f3f0}
[data-skin="club"] .final .btn--pri:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
[data-skin="club"] .final .btn--lite{color:#fff;border-color:rgba(255,255,255,.45)}
[data-skin="club"] .final .btn--lite:hover{background:#fff;color:#0b0b0b}

/* ══ CLUB, STAP 9 van 9: de formulieren ════════════════════════════════════
   /start/ en /demo/. Een formulier is het enige op de site waar een kader wél
   iets doet: het zegt waar het invullen begint en ophoudt. Dus geen doos weg,
   maar wel een doos zonder schaduw en zonder afronding.

   De velden zelf krijgen een onderlijn in plaats van een omlijnd vakje. Dat is
   rustiger op een pagina die verder uit lijnen bestaat, en het maakt de focus-
   staat duidelijker: de lijn wordt dik en zwart in plaats van dat er een tweede
   rand omheen komt.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-skin="club"] .form{background:var(--surface);border:1px solid var(--line);
  border-radius:0;box-shadow:none;padding:clamp(22px,3vw,34px)}
[data-skin="club"] .field span{font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;color:var(--muted);margin-bottom:8px}
[data-skin="club"] .field input,[data-skin="club"] .field textarea,
[data-skin="club"] .field select{border-radius:0;border:0;border-bottom:1px solid var(--track);
  background:transparent;padding:10px 0;min-height:44px}
[data-skin="club"] .field input:focus,[data-skin="club"] .field textarea:focus,
[data-skin="club"] .field select:focus{outline:0;border-bottom:2px solid var(--ink);
  background:transparent}
[data-skin="club"] .okpanel{border-radius:0;box-shadow:none;border:1px solid var(--line)}
[data-skin="club"] .okpanel .ok-ic{background:var(--ink);color:var(--bg)}

/* ══════════════════════════════════════════════════════════════════════════
   MERKGIDS 2026-08-18  ·  officiële kleuren van Loyal2Sports
   Vervangt het palet dat de site tot nu toe gebruikte (#0d4f5c + #84dff1) door
   de kleuren uit de merkgids. Dit geldt voor het STANDAARD-uiterlijk; de skins
   redactie/affiche/club hebben een eigen tokenblok met hogere specificiteit en
   blijven dus ongemoeid.

     #06292f  diep teal   drager: knoppen, links, donkere vlakken
     #22cbad  mint        accent: ALLEEN op donker of als vulling met donkere tekst
     #7d9595  grijsgroen  lijnen en UI
     #d9d9d9  lichtgrijs  randen
     #000000 / #ffffff

   TWEE DINGEN UIT DE GIDS ZIJN AANGEPAST, MET REDEN:

   1. De knop in de gids loopt met een verloop van diep teal naar vól mint, met
      witte tekst erop. Doorgerekend haalt wit op #22cbad maar 2,1:1 waar 4,5
      het minimum is; op het laatste stuk van die knop is de tekst dus niet te
      lezen. Het verloop stopt daarom op 45 procent (#137268, 5,8:1). Dezelfde
      kleurbeweging, wel leesbaar.

   2. #7d9595 als lopende tekst op wit haalt 3,2:1. Voor lijnen en iconen is dat
      prima en daar gebruiken we hem ook, maar bijschriften krijgen een donkerder
      trap van dezelfde tint (#55686a, 5,6:1).
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --brand:#06292f; --brand-hi:#0b3f48;
  --glow:#22cbad;  --glow-soft:rgba(34,203,173,.18);
  --focus:#0e5a55;
  --ink-surface:#06292f;
  --muted:#55686a; --muted-2:#6b8385;
  --line:rgba(6,41,47,.12); --track:#d9d9d9; --tint-line:rgba(6,41,47,.12);
  --header-bg:rgba(247,250,252,.88);
}
:root[data-theme="dark"]{
  --brand:#22cbad; --brand-hi:#4fdcc3;
  --glow:#22cbad;  --glow-soft:rgba(34,203,173,.16);
  --on-brand:#06292f;
  --ink-surface:#04191d;
  --muted:#8fa5a5; --muted-2:#7d9595;
  --line:rgba(217,217,217,.16); --track:rgba(217,217,217,.22);
}

/* Het antwoordblok buiten de paginakop: gecentreerde sectie, maar de alinea
   zelf links uitgelijnd, want een blok van vier regels centreren leest niet. */
.section--mid .answer{max-width:62ch;margin-left:auto;margin-right:auto;text-align:left}

/* Restjes van het oude accentblauw (#84dff1) die in gewone regels bleven staan,
   niet in de tokenlaag, en dus niet meeliepen met het merkpalet. Op de eind-CTA
   waren dat de gloed onder de kop en de alinea eronder. Nu mint en merkgrijs. */
.final::before{background:radial-gradient(50% 60% at 50% 100%,rgba(34,203,173,.28),transparent 70%)}
.final p{color:#cfe3e0}
.storycard::before{background:radial-gradient(55% 60% at 50% 0%,rgba(34,203,173,.16),transparent 70%)}
.story::after{background:radial-gradient(circle,rgba(34,203,173,.20),transparent 68%)}
.tl li::before{box-shadow:0 0 0 4px rgba(34,203,173,.16)}

/* ── de vergelijking op een telefoon ──
   De tabel stond op min-width:620px in een baan die zijwaarts schuift. Op een
   telefoon zie je dan de eerste twee kolommen en moet je vegen om de derde te
   vinden, en dat is uitgerekend de kolom met het antwoord. Onder 760px wordt
   elke rij daarom een kaartje: taak als kopje, daaronder Nu en daaronder Met
   Loyal2Sports, allebei met hun kolomnaam ervoor (owner-vraag 2026-08-31). */
@media(max-width:760px){
  .vs table{min-width:0}
  .vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .vs tr{display:block;padding:4px 0}
  .vs tbody tr+tr{border-top:1px solid var(--line)}
  .vs td,.vs tbody tr:last-child td{display:block;border-bottom:0;padding:9px 16px}
  .vs td:first-child{width:auto;padding-top:16px;font-size:15.6px;font-weight:700}
  .vs td.old,.vs td.new{position:relative;padding-left:16px;border-radius:12px;margin:0 12px}
  .vs td.old::before,.vs td.new::before{content:attr(data-l);display:block;
    font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
    margin-bottom:4px;opacity:.75}
  .vs td.new{margin-bottom:10px}
}

/* De link naar de rolpagina's: een link, geen knop. Hij mag niet concurreren met
   het bewijs eronder, dus geen vulling en geen rand. */
.meerlink{margin-top:clamp(14px,1.8vw,20px);font-size:14.6px;font-weight:620}
.meerlink a{display:inline-flex;align-items:center;gap:7px;color:var(--brand);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(6,41,47,.28)}
.meerlink a:hover{text-decoration-color:currentColor}

/* De vergelijkingstabel en de bewijslinks staan in een GECENTREERDE sectie. De
   tabel zelf moet links uitgelijnd blijven (een tabel lees je niet gecentreerd),
   maar het blok eromheen wel gecentreerd, met dezelfde maat als het antwoordblok. */
.vs-mid{max-width:920px;margin-left:auto;margin-right:auto;text-align:left;
  margin-top:clamp(22px,2.6vw,32px)}
.ilist-mid{justify-content:center;margin-top:clamp(16px,2vw,22px)}

/* Het geruststellingspaneel naast het formulier. .story is al een donkere kaart,
   maar de kicker daarin stond op --muted en dat is op #06292f niet te lezen. */
.sidecard{position:sticky;top:96px}
.sidecard .kicker{color:#9db3b2}
.sidecard h3{margin-bottom:4px}
.sidecard .tl{margin-top:16px}
.sidecard .tl li{color:#9db3b2}
.sidecard .tl li b{color:#fff;font-weight:700}
.sidecard .tl li:last-child{border-left-color:transparent;padding-bottom:0}
.sidecard .fine{margin-top:14px;font-size:12.8px;color:#7d9595}
@media(max-width:960px){.sidecard{position:static}}

/* ══ MERKRONDE STAP 3: HET CHROOM IN MERKKLEUR ══
   De merkgids is een DONKER merk: elk vlak in de gids is #06292f met mint als
   accent. De site was het omgekeerde, wit met groene accenten, en las daardoor
   als een nette SaaS-site die toevallig groen is.

   Niet de hele site donker: een lange leespagina in diep teal vermoeit en kost
   aanvragen. Wel het CHROOM, de randen van elke pagina: bovenbalk, hero en de
   logostrip bovenaan, voettekst en eind-CTA onderaan. Zo opent en sluit elke
   pagina in het merk en is het wit alleen nog het werkblad ertussenin.
   Owner-akkoord 2026-08-31.

   Alle kleurparen hieronder zijn nagemeten op #06292f:
     #ffffff 15,4:1 · #cfdedd 11,4:1 · #9db3b2 7,0:1 · #22cbad 7,5:1 · #7d9595 4,8:1 */

/* ── bovenbalk ── */
header.site{background:rgba(6,41,47,.93);border-bottom:1px solid rgba(255,255,255,.10)}
header.site .brand{color:#fff}
/* Altijd het witte logo, ongeacht het thema: deze balk is nu altijd donker. */
header.site .brand .merk--kleur{display:none}
header.site .brand .merk--wit{display:block}
.navlink{color:#cfdedd}
.navlink:hover,.navlink[aria-expanded="true"]{background:rgba(255,255,255,.10);color:#fff}
.navlink.is-active{background:rgba(34,203,173,.16);color:#22cbad}
.themesw,.burger{background:transparent;border-color:rgba(255,255,255,.26);color:#cfdedd}
.themesw:hover,.burger:hover{background:rgba(255,255,255,.10);border-color:#fff;color:#fff}
/* .btn--sec heeft een WITTE achtergrond; alleen de tekstkleur lichter maken gaf
   wit op wit en dus een onleesbare knop (owner-melding 2026-08-31). Op een donker
   vlak hoort hij een omlijnde knop te zijn: geen vulling, lichte rand. */
header.site .btn--sec,.hero .btn--sec,.mhero .btn--sec{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none}
header.site .btn--sec:hover,.hero .btn--sec:hover,.mhero .btn--sec:hover{
  background:rgba(255,255,255,.10);border-color:#fff;color:#fff}
/* Het uitklapmenu op mobiel hangt aan diezelfde balk en moet dus mee. */
@media(max-width:1140px){
  body.nav-open .navlinks{background:#06292f;border-bottom-color:rgba(255,255,255,.12)}
  body.nav-open .navlinks .navlink{border-top-color:rgba(255,255,255,.10)}
}

/* ── hero ── */
.hero{background:#06292f;color:#cfdedd}
/* ::before (gloed) en ::after (sfeerfoto) stonden op z-index:-1 en zouden nu
   ACHTER de eigen achtergrond van de hero vallen, dus onzichtbaar zijn. */
.hero::before{z-index:0;background:radial-gradient(60% 60% at 50% 0%,rgba(34,203,173,.18),transparent 70%)}
.hero::after{z-index:0;opacity:.3}
@media(prefers-color-scheme:dark){.hero::after{opacity:.3}}
:root[data-theme="light"] .hero::after{opacity:.3}
.hero > .wrap{position:relative;z-index:1}
.hero h1{color:#fff}
.hero .lead{color:#cfdedd}
/* De eyebrow stond op var(--brand), en dat is nu de achtergrondkleur zelf. */
.hero .eyebrow{color:#22cbad}
/* ── logostrip: hoort bij de hero, dus dezelfde donkere band ── */
.proof{background:#082f36;border-top-color:rgba(255,255,255,.08);
  border-bottom-color:rgba(255,255,255,.08)}
/* #7d9595 uit de gids haalt op deze band 4,49:1 en dat is net onder AA voor een
   label van 12,4px. Een tint lichter en het staat op 6,5:1. */
.proof .lbl{color:#9db3b2}
.proof b{color:#cfdedd}
/* Clublogo's zijn donkere wapenschilden; op een donkere band verdwijnen ze.
   Daarom hetzelfde witte plaatje eronder als in de donkere modus. */
.proof .cl img{background:#fff;border-radius:9px;padding:5px 8px}

/* ── paginakop van de detailpagina's: kruimelpad plus mhero ──
   Anders opent elke module-, integratie- en rolpagina wit onder een donkere balk
   en houdt alleen de homepage het merk vast (owner-verzoek 2026-08-31). */
.crumbwrap,.mhero{background:#06292f}
.crumbs{color:#9db3b2}
.crumbs a{color:#cfdedd}
.crumbs a:hover{color:#22cbad}
.crumbs .cur{color:#fff}
.mhero h1{color:#fff}
/* Het antwoordblok is hier geen witte kaart meer maar een streep in mint, zodat
   het op beide varianten van de kop hetzelfde oogt. */
.mhero .answer{background:transparent;box-shadow:none;border-left-color:#22cbad;color:#cfdedd}
.mhero .answer b{color:#fff}
.mhero-col{border-top-color:rgba(255,255,255,.14)}
.mhero-col .answer::before{background:#22cbad}
.mhero .srcline{color:#9db3b2}
.mhero .srcline a{color:#22cbad}
/* De prijskaart staat IN die donkere kop. Als wit blok botste hij daar hard
   tegenaan, dus een glazen kaart op het merkvlak in plaats van een wit blok
   (owner-verzoek 2026-08-31). De knop erin blijft mint, dat is het enige punt
   waar de aandacht heen moet. */
.mhero .pricebox{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
  box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mhero .pricebox .kicker{color:#9db3b2}
.mhero .pricebox .big b{color:#fff}
.mhero .pricebox .big span,.mhero .pricebox .ex,.mhero .pricebox .fine{color:#9db3b2}
.mhero .pricebox li{color:#cfdedd}
.mhero .pricebox li svg{color:#22cbad}
.mhero .pricebox .fine a{color:#22cbad}
.mhero .pricebox .calcrow{background:rgba(255,255,255,.06);color:#cfdedd}
.mhero .pricebox .calcrow b,.mhero .pricebox .calcrow .out b{color:#fff}

/* ══ MERKRONDE: STIPPEN, PAYOFF EN DE MINT-KNOP ══
   Drie dingen uit de merkgids die nog nergens op de site stonden. Owner 2026-08-31.

   1. HET STIPPENPATROON. In de gids loopt langs elke rand een halftone-raster in
      een lichtere teal. Het is het meest eigen element dat het merk heeft en het
      ontbrak volledig. Het is een CSS-patroon, geen afbeelding: nul bytes extra
      en het schaalt op elk scherm. Alleen op de vlakken die al diep teal zijn,
      met een masker zodat het naar het midden toe uitdooft en de tekst nooit
      hindert. */
/* ::after en niet ::before, want .final gebruikt ::before al voor zijn gloed.
   Eén element heeft maar één ::before; die had ik daarmee stilletjes overschreven. */
.stip{position:relative;overflow:hidden}
.stip > *{position:relative;z-index:1}
.stip::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(#22cbad 1.3px,transparent 1.4px);
  background-size:13px 13px;opacity:.17;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%,#000 0%,transparent 62%);
  mask-image:radial-gradient(120% 100% at 100% 0%,#000 0%,transparent 62%)}
/* De voettekst krijgt de stippen linksonder, zodat het patroon de pagina afsluit
   op de tegenoverliggende hoek van de eind-CTA. */
footer.site{position:relative;overflow:hidden}
footer.site > *{position:relative;z-index:1}
footer.site::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(#22cbad 1.3px,transparent 1.4px);
  background-size:13px 13px;opacity:.13;
  -webkit-mask-image:radial-gradient(110% 90% at 0% 100%,#000 0%,transparent 58%);
  mask-image:radial-gradient(110% 90% at 0% 100%,#000 0%,transparent 58%)}

/* 2. DE PAYOFF. Wijd gespatieerd onder het beeldmerk, precies zoals in de gids.
      Kleur #7d9595 is het grijs uit het palet zelf; op #06292f haalt dat 4,6:1. */
/* Geen payoff onder het logo: die uit de merkgids klopt niet meer en er komt
   voorlopig niets voor in de plaats (owner-besluit 2026-08-31). Het logo blijft
   staan met de omschrijving eronder. */
.fbrand .brand img{height:38px;width:auto}

/* 3. DE KNOP UIT DE GIDS: mint-dominant met een lichte rand, niet diep teal.
      De gids zet er wit op, maar wit op mint haalt 2,1:1 en is dus onleesbaar.
      Diep teal op mint haalt 9,2:1 aan de lichte kant en 5,2:1 aan de donkere,
      dus dit volgt de gids én is leesbaar. Het pijltje wordt het papieren
      vliegtuigje dat in de gids op elke knop staat. */
.btn--pri{background:linear-gradient(100deg,#2ee0be 0%,#22cbad 45%,#17a892 100%);
  color:#06292f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),0 8px 22px rgba(6,41,47,.22)}
.btn--pri:hover{background:linear-gradient(100deg,#3ae9c8 0%,#28d6b7 45%,#1cb99d 100%);
  color:#06292f}
.btn--pri svg{color:#06292f}

/* ══ LETTERTYPE: POPPINS, ZELF GEHOST ══
   De CSP staat geen enkele externe host toe, dus Google Fonts insluiten kan niet
   en dat is maar goed ook: een fontverzoek naar een derde partij is een verzoek
   met het IP-adres van je bezoeker erin, nog vóór de cookiemelding.

   Daarom drie zelf-gehoste bestanden. Ontbreken ze, dan mislukt het laden stil
   en valt de tekst terug op de systeemstack, precies zoals nu. De site blijft
   dus altijd werken; er verandert alleen iets zodra de woff2's er staan.

   font-display:swap = tekst meteen leesbaar in de terugvalletter, daarna
   omwisselen. Nooit een onzichtbare pagina wachtend op een lettertype.
   local() eerst: heeft de bezoeker Poppins al op zijn machine, dan downloadt hij
   niets. Owner-verzoek 2026-08-31. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:local("Poppins Regular"),local("Poppins-Regular"),url("/assets/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:local("Poppins SemiBold"),local("Poppins-SemiBold"),url("/assets/fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:local("Poppins Bold"),local("Poppins-Bold"),url("/assets/fonts/poppins-700.woff2") format("woff2")}

:root{--sans:"Poppins","Inter var",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
/* Poppins is geometrisch en loopt breder dan de systeemletter. De koppen stonden
   op -.026em, wat bij Poppins te strak wordt; iets ruimer leest hij beter.
   Ook is 750 geen bestaand Poppins-gewicht: dat wordt 700, anders synthetiseert
   de browser vet en dat oogt smerig. */
h1,h2,h3,h4{letter-spacing:-.018em}
h1,h2,h3,h4,.brand,.mark,.total b,.pricebox .big b,.stat b,.motor-bar b,
.ob b,.story .sig i,.quote .who i{font-weight:700}

/* ══ PROEFPORTAAL (sessie 2) ══
   Mockup 08 is leidend: donkere zijbalk in merkkleur, kaartvoorbeeld rechts,
   sloten zichtbaar. Comfort-UX 16/48: knoppen minstens 44px, invoer 16px op
   mobiel via de bestaande formulierstijlen. */
.pf-kop{background:#06292f;color:#cfdedd;padding:24px 0;position:relative;overflow:hidden}
.pf-kop::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#22cbad 1.3px,transparent 1.4px);background-size:13px 13px;opacity:.13;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%,#000,transparent 60%);
  mask-image:radial-gradient(120% 100% at 100% 0%,#000,transparent 60%)}
.pf-kop .wrap{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.pf-kop h1{color:#fff;font-size:clamp(20px,2.6vw,26px);margin-top:4px}
.pf-kop .kicker{color:#22cbad}
.pf-badge{font-size:11.5px;font-weight:700;color:#b45309;background:#fef3c7;border-radius:999px;padding:6px 13px}
.pf-grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:start}
.pf-zijbalk{background:#06292f;border-radius:16px;padding:11px;position:sticky;top:14px;display:flex;flex-direction:column}
.pf-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 13px;
  border-radius:11px;color:#cfdedd;font-size:13.5px;font-weight:600;text-decoration:none;min-height:44px}
.pf-item:hover{background:rgba(255,255,255,.1)}
.pf-item.aan{background:var(--glow);color:#06292f}
.pf-item.pf-slot{opacity:.62}
.pf-mini{font-size:9.5px;font-weight:800;letter-spacing:.07em;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.14)}
.pf-item.aan .pf-mini{background:rgba(6,41,47,.15)}
.pf-activeer{margin-top:8px;border-top:1px solid rgba(255,255,255,.14);border-radius:0 0 11px 11px;
  padding-top:14px;color:#22cbad;font-weight:700}
.tag-mint{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--glow-soft);color:#0b5a4b}
.pf-uit{margin-top:8px;border-top:1px solid rgba(255,255,255,.14);padding-top:8px}
.pf-uit button{font:inherit;font-size:13px;font-weight:600;color:#9db3b2;background:none;border:0;cursor:pointer;padding:10px 13px;min-height:44px;width:100%;text-align:left;border-radius:11px}
.pf-uit button:hover{background:rgba(255,255,255,.1);color:#fff}
.paneel-los{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--sh-s)}
.pf-lijstkop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pf-rij{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.pf-rij:first-of-type{border-top:0}
.pf-sub{display:block;font-size:12.8px;color:var(--muted)}
.pf-acties{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pf-acties form{display:flex;gap:8px}
.btn-mini{font-size:12.8px;padding:9px 14px;min-height:44px}
.pf-weg{color:#b91c1c;border-color:rgba(185,28,28,.4)}
.pf-duo{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.pf-kaart{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative}
.pf-beeld{height:110px;background:linear-gradient(120deg,#06292f,#0e5a55 70%);display:grid;place-items:center;
  color:#22cbad;font-weight:800;font-size:18px;letter-spacing:-.01em;position:relative;overflow:hidden}
/* Beeld als echt <img> (CSP blokkeert inline background-image); vult de kop volledig. */
.pf-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-beeld img[hidden]{display:none}
.pf-heeft-beeld{height:150px}
/* wizard/portaal: kleine gereedschappen (CSP: geen inline styles) */
.pf-terug{display:inline-block;margin:0 0 14px;font-weight:700;font-size:14px;color:inherit;text-decoration:none}
.pf-terug:hover{text-decoration:underline;text-underline-offset:4px}
.pf-deelrij{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pf-mono{font-family:ui-monospace,monospace;font-size:12.5px}
.pf-mt8{margin-top:8px}
.pf-mt10{margin-top:10px}
.pf-mt12{margin-top:12px}
.pf-mt14{margin-top:14px}
.pf-mt16{margin-top:16px}
.pf-mt18{margin-top:18px}
.pf-mt20{margin-top:20px}
.pf-mid{text-align:center}
.pf-vol{width:100%}
.pf-smal{max-width:640px}
.pf-emoji{font-size:34px}
.pf-leadmid{max-width:46ch;margin:8px auto 0}
.pf-kop2{margin:10px 0 6px}
.pf-kickerblok{display:block;margin-top:18px}
.pf-sectiekrap{padding-top:26px}
/* statuschip bij de pakkettitel: in één blik zien wat online staat */
.pf-status{display:inline-block;margin-left:8px;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:2.5px 10px;border-radius:999px;background:#eef1f1;color:#55686a;vertical-align:2px}
.pf-status--aan{background:#d1fae5;color:#065f46}
.pf-mini--ok{background:#d1fae5;color:#065f46}
.pf-mini--warn{background:#fef3c7;color:#92400e}
/* conversiepaneel in Sponsoren (was inline en dus CSP-dood) */
.pf-conversie{background:#06292f;color:#cfdedd;border:0;margin-bottom:18px}
.pf-conversie h2{color:#fff;font-size:19px;margin:9px 0 6px}
.pf-conversie p{font-size:13px;color:#9db3b2;margin:0 0 12px}
.pf-conversie .tag-mint{background:rgba(34,203,173,.2);color:#22cbad}
/* actieknoppen: het formulier doet niet mee in de lay-out, de knoppen wel */
.pf-acties .pf-actieform{display:contents}
/* mobiel: knoppen als rustig grid met volle breedte (65+-toets) */
@media (max-width:720px){
  .pf-lijstkop{display:block}
  .pf-lijstkop .pf-acties{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px}
  .pf-lijstkop .pf-acties .btn{width:100%;justify-content:center;min-height:48px;min-width:0}
  .pf-lijstkop .pf-a-nieuw{order:-1;min-height:52px;font-size:14px}
  .pf-prow{display:block;padding:16px 0}
  .pf-prow .pf-pinfo b{font-size:16.5px}
  .pf-prow .pf-acties{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%;margin-top:12px}
  .pf-prow .pf-acties .btn{width:100%;justify-content:center;min-height:48px;padding:9px 8px;min-width:0}
  .pf-prow .pf-a-deelprod{grid-column:1/-1;min-height:52px;font-size:14px}
  .pf-deelrij .btn{width:100%;justify-content:center;min-height:48px}
}
.pf-kbody{padding:15px 17px 17px}
.pf-kbody h3{font-size:16.5px}
.pf-kprijs{font-size:21px;font-weight:800;margin:5px 0 2px}
.pf-kprijs small{font-size:12px;font-weight:600;color:var(--muted)}
.pf-kbullets{margin:9px 0 2px;padding:0;list-style:none;font-size:13px;color:var(--ink-2)}
.pf-kbullets li{padding-left:19px;position:relative;margin:3px 0}
.pf-kbullets li::before{content:"✓";position:absolute;left:0;color:#0b8a72;font-weight:800}
.pf-wm{position:absolute;top:10px;right:10px;font-size:9.5px;font-weight:800;letter-spacing:.13em;
  color:#b45309;background:#fef3c7;border:1px solid #f5c518;border-radius:7px;padding:3px 8px}
.pf-lane{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;margin-top:8px;font-size:13.4px;text-decoration:none;color:inherit;min-height:52px}
.pf-lane.aan{border-color:var(--glow);background:var(--glow-soft)}
.pf-lane.pf-slot{opacity:.75;background:#fafafa}
.pf-lane.pf-slot:hover{border-color:#f5c518}
.pf-lane .pf-mini{background:#fef3c7;color:#92400e}
.pf-schakel{width:34px;height:20px;border-radius:999px;background:var(--brand);position:relative;flex:none}
.pf-schakel::after{content:"";position:absolute;top:2px;left:16px;width:16px;height:16px;border-radius:50%;background:#fff}
.pf-upload{display:block;border:2px dashed var(--line);border-radius:13px;padding:18px;text-align:center;
  color:var(--muted);font-size:13.5px;cursor:pointer;margin-top:4px}
.pf-upload:hover{border-color:var(--glow)}
.pf-ok{background:#e7f7f1;border-color:#9ee2cd}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* gecentreerde lead in een gecentreerde sectie (CSP: geen inline styles) */
.lead--mid{max-width:56ch;margin-left:auto;margin-right:auto;text-align:center}

/* ── header: Mijn sponsorgids valt net iets op tussen de gewone links ── */
.navlink--proef{color:#22cbad;font-weight:700}
.navlink--proef:hover{color:#fff}

/* ── de proefknop onder de hero-knoppen: eigen blok, mint rand, twee regels ── */
.hero-proefknop{display:block;margin-top:16px;padding:14px 18px;border-radius:16px;
  border:1.5px solid rgba(34,203,173,.55);background:rgba(34,203,173,.10);
  text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.hero-proefknop b{display:block;color:#22cbad;font-size:16px;line-height:1.3}
.hero-proefknop span{display:block;margin-top:3px;color:#cfe6e2;font-size:13px;font-weight:500}
.hero-proefknop:hover{background:rgba(34,203,173,.18);border-color:#22cbad;transform:translateY(-1px)}
.hero-proefknop:hover b{color:#fff}

/* ── entree: de echte demo-catalogus als bewijsbeeld ── */
.pf-entreebeeld{margin:0;max-width:760px;margin-inline:auto}
.pf-entreebeeld img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);
  box-shadow:0 18px 48px rgba(6,41,47,.16)}
.pf-entreebeeld figcaption{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}

/* ── de glimp: een echt scherm in de slot-teaser ── */
.pf-glimp{margin:18px 0 4px}
.pf-glimp img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(6,41,47,.14)}
.pf-glimp figcaption{font-size:12px;color:var(--muted);margin-top:8px}

/* ── hulp: uitklapbare mini-handleidingen (75-toets: grote klikdoelen) ── */
.pf-hulp details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-top:9px}
.pf-hulp summary{font-weight:700;cursor:pointer;font-size:14.5px;min-height:32px;display:flex;align-items:center}
.pf-hulp p{font-size:13.6px;color:var(--ink-2);margin-top:8px;line-height:1.6}

/* ── de publieke pakketpagina: het formulier krijgt de ruimte ──
   De kaart is het uithangbord, het formulier is het werk; dus kaart op een
   vaste, rustige maat en de rest voor de invoer (owner-melding 2026-09-01). */
.pf-publiek{grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:start}
.pf-publiek .paneel-los{max-width:none}

/* ── mobiel: de app-tabbar ──
   Zelfde patroon als de echte omgeving: vaste balk onderin met de hoofditems
   en helemaal rechts Meer; de zijbalk verdwijnt, de marketing-rail ook
   (owner-eis 2026-09-01). <details> maakt het Meer-menu JS-vrij. */
.pf-tabbar{display:none}
.pf-portaal .rail{display:none}
@media(max-width:880px){
  .pf-grid{grid-template-columns:1fr}
  .pf-zijbalk{display:none}
  .pf-duo,.pf-publiek{grid-template-columns:1fr}
  .pf-tabbar{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;
    z-index:120;background:#06292f;border-top:1px solid rgba(255,255,255,.12);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .pf-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;border-radius:12px;color:#cfdedd;text-decoration:none;font-size:10.5px;
    font-weight:700;letter-spacing:.02em;list-style:none;cursor:pointer}
  .pf-tab .i{width:20px;height:20px}
  .pf-tab{position:relative}
  .pf-tabtel{position:absolute;top:4px;right:calc(50% - 22px);min-width:16px;height:16px;
    padding:0 4px;border-radius:999px;background:#22cbad;color:#06292f;font-style:normal;
    font-size:10px;font-weight:800;line-height:16px;text-align:center}
  .pf-tab.aan{background:var(--glow);color:#06292f}
  .pf-tab-act{color:#22cbad}
  .pf-meer{position:relative}
  .pf-meer summary{list-style:none}
  .pf-meer summary::-webkit-details-marker{display:none}
  .pf-meer[open] summary{background:rgba(255,255,255,.12);border-radius:12px}
  .pf-meerlijst{position:absolute;right:0;bottom:calc(100% + 10px);min-width:225px;
    background:#0c3b44;border:1px solid rgba(255,255,255,.14);border-radius:14px;
    box-shadow:0 -10px 40px rgba(0,0,0,.35);padding:8px;display:flex;flex-direction:column}
  .pf-meerlijst a,.pf-meerlijst button{display:block;width:100%;text-align:left;font:inherit;
    font-size:14.5px;font-weight:600;color:#cfdedd;text-decoration:none;background:none;border:0;
    padding:12px 14px;border-radius:10px;min-height:44px;cursor:pointer}
  .pf-meerlijst a:hover,.pf-meerlijst button:hover{background:rgba(255,255,255,.1)}
  /* inhoud en voettekst niet achter de balk laten verdwijnen */
  .pf-portaal .pf-grid{padding-bottom:74px}
  .pf-portaal footer.site{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* De basisregel .formactions .btn{width:100%} was gemaakt voor het demo-formulier
   met precies één knop. Met twee knoppen (Terug + Opslaan) werden ze allebei
   paginabreed en plakten ze op elkaar (owner-melding 2026-09-01). Nu: een rij
   met ruimte; één knop vult nog steeds de breedte, twee delen hem netjes. */
.formactions{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.formactions .btn{width:auto;flex:1 1 auto;min-width:150px;justify-content:center}
.pf-onder{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}

/* ══ PROEF: PUBLIEKE GIDS, PAKKETPAGINA EN EMBED (sessie 3) ══ */
.pf-geelbalk{background:#fef3c7;border-bottom:1px solid #f5c518;padding:9px 0;
  font-size:12.5px;font-weight:600;color:#92400e}
.pf-geelbalk a{color:#92400e;text-decoration:underline}
.pf-gids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
  gap:16px;margin-top:clamp(14px,2vw,22px)}
.pf-kaart.pf-klik{display:block;text-decoration:none;color:inherit;transition:border-color .16s,transform .16s}
.pf-kaart.pf-klik:hover{border-color:var(--glow);transform:translateY(-2px)}
.pf-embed{margin:0;padding:14px;background:#fff}
.pf-embed .pf-gids{margin-top:0}
.pf-embed-voet{margin-top:14px;font-size:12px;color:#55686a;text-align:center}
.pf-embed-voet a{color:#0b5a4b}
.pf-embed-leeg{font-size:14.5px;color:#3c4c54;text-align:center;padding:26px 10px}

/* ══ PROEFOMGEVING ══
   Statusmeldingen op de entree: rustig geel vlak, mensentaal, geen rood tenzij
   het echt fout is (75-jarige-toets, spec §15). */
.proef-melding{background:#fff8e6;border:1px solid #f5d576;border-radius:12px;
  padding:13px 17px;font-size:14.6px;margin-bottom:18px}

/* ══ PRIVACYVERKLARING ══
   Kaarten in plaats van een muur tekst: per verwerking wat, waarvoor en op welke
   grond. Zo is het te scannen zonder dat er iets wegvalt. */
.pgrid{display:grid;gap:clamp(14px,1.8vw,20px);margin-top:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pgrid--kort{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}
.pcard{padding:clamp(16px,2vw,22px);border:1px solid var(--line);border-radius:15px;
  background:var(--surface)}
.pcard h3{font-size:16px;margin-bottom:10px;letter-spacing:-.01em}
.pcard p{font-size:14.2px;line-height:1.62;color:var(--ink-2);margin:0 0 9px}
.pcard p:last-child{margin-bottom:0}
.plabel{display:inline-block;min-width:78px;font-size:10.6px;font-weight:750;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pcard code,.vs code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--raise);padding:2px 7px;border-radius:7px;white-space:nowrap}

/* De kleine regel onder de cookieknoppen: geruststelling, geen kleine lettertjes.
   Kleur = --muted (5,87:1 op wit), niet --muted-2, want die haalt op 12px geen AA. */
.cc-fine{margin:12px 0 0;font-size:12.4px;line-height:1.55;color:var(--muted)}

/* De merkknop: pil met het verloop uit de gids, afgekapt waar wit leesbaar blijft.
   Het verloop staat in ÉÉN variabele, want het zit inmiddels op drie plekken
   (knop, de bar van de clubmotorkaart en de snelrail). Zonder die variabele
   lopen die drie na de eerste tint-wijziging gegarandeerd uit elkaar. */
:root{--grad-brand:linear-gradient(100deg,#06292f 0%,#0e5a55 55%,#137268 100%);
  --grad-brand-v:linear-gradient(160deg,#06292f 0%,#0e5a55 55%,#137268 100%);
  --grad-brand-sh:0 8px 22px rgba(6,41,47,.26)}
.btn--pri{background:var(--grad-brand);
  color:#fff;box-shadow:var(--grad-brand-sh)}
.btn--pri:hover{background:linear-gradient(100deg,#0b3f48 0%,#137268 55%,#18876f 100%)}

/* Het mint mag vullen zolang de tekst erop donker is (7,5:1). */
.sc-btn .ring{background:var(--brand);color:#fff}
.fstep:first-child .fstep-node{background:var(--brand);border-color:var(--brand);color:#fff}

/* Het logo als het er is; het tekstmerk zolang het ontbreekt. */
.brand .merk{height:30px;width:auto;display:block}
footer.site .brand .merk{height:28px}

/* ══ DONKERE MODUS OP HET DIEPE MERKGROEN ══
   De donkere modus draaide op een neutraal blauwzwart (#0d1117). Dat is niet het
   merk. De pagina is nu #06292f, de donkerste kleur uit de gids, en de rest van
   de ladder is daarvan afgeleid: kaarten een trap lichter zodat ze van de pagina
   loskomen, en de diepe panelen (voettekst, verhaalband) juist een trap DONKERDER
   dan de pagina. Zonder dat laatste vallen paneel en pagina samen, want beide
   zouden dan #06292f zijn. Owner-verzoek 2026-08-18.

   Doorgerekend op #06292f: body 13,2:1 · gedempt 7,0:1 · mint 7,5:1. */
:root[data-theme="dark"]{
  --bg:#06292f; --bg-2:#082f36; --surface:#0c3b44; --raise:#0e434c;
  --ink:#e6f0ef; --ink-2:#cfdedd; --muted:#9db3b2; --muted-2:#86a09f;
  --line:rgba(230,240,239,.14); --track:rgba(230,240,239,.2);
  --tint-line:rgba(230,240,239,.14);
  --ink-surface:#04191d; --on-ink:#e6f0ef;
  --header-bg:rgba(6,41,47,.9);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#06292f; --bg-2:#082f36; --surface:#0c3b44; --raise:#0e434c;
    --ink:#e6f0ef; --ink-2:#cfdedd; --muted:#9db3b2; --muted-2:#86a09f;
    --line:rgba(230,240,239,.14); --track:rgba(230,240,239,.2);
    --tint-line:rgba(230,240,239,.14);
    --ink-surface:#04191d; --on-ink:#e6f0ef;
    --header-bg:rgba(6,41,47,.9);
    --brand:#22cbad; --brand-hi:#4fdcc3; --on-brand:#06292f;
  }
}

/* ══ HET MERKLOGO, LICHT EN DONKER ══
   Beide varianten staan in de HTML; CSS kiest. Zie l2s_site_merk() voor waarom
   het niet met <picture> of een src-wissel gaat. */
.brand .merk{height:30px;width:auto;display:block}
.brand .merk--wit{display:none}
footer.site .brand .merk{height:28px}
/* De voettekst is altijd donker, dus daar altijd de witte variant. */
footer.site .brand .merk--kleur{display:none}
footer.site .brand .merk--wit{display:block}
/* In de donkere modus is de kop ook donker. */
:root[data-theme="dark"] header.site .brand .merk--kleur{display:none}
:root[data-theme="dark"] header.site .brand .merk--wit{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) header.site .brand .merk--kleur{display:none}
  :root:not([data-theme="light"]) header.site .brand .merk--wit{display:block}
}

/* ══ USE-CASE-SLIDER ══
   Een scroll-snap-baan. Swipen en met de pijltjes scrollen werkt uit zichzelf,
   ook zonder JavaScript; de knoppen erboven zijn gewone ankers naar de dia's, dus
   die werken dan ook. site.js maakt er soepel scrollen van en zet de actieve knop.

   De baan is focusbaar (tabindex=0) omdat een scrollbaar gebied anders niet met
   het toetsenbord te bedienen is. */
.uc{margin-top:clamp(18px,2.4vw,28px)}
.uc-tabs{display:flex;gap:8px;flex-wrap:wrap}
/* In een gecentreerde sectie staan de twee knoppen naast elkaar in het midden. */
.section--mid .uc-tabs{justify-content:center;margin-top:clamp(18px,2.2vw,26px)}
/* Het uiterlijk van de knop hangt af van het vlak waarop hij staat: op het donkere
   vlak van de use cases is het een pil in merkstijl, elders is het gewoon een
   knop met dezelfde open-en-dicht-werking. De MECHANIEK (.uc-tab + .uc-panel)
   is gedeeld, het uiterlijk niet. */
.section--ink .uc-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#cfdedd;font-weight:700;
  font-size:14px;text-decoration:none;transition:background .16s,border-color .16s,color .16s}
.section--ink .uc-tab:hover{border-color:#fff;color:#fff}
.uc-tab .chev{transition:transform .18s}
/* De open knop is het merkmint met donkere letters, zodat je in één oogopslag
   ziet welk voorbeeld je leest. De chevron draait om: dezelfde taal als de
   uitklapsecties elders op de site. */
.section--ink .uc-tab.is-on{background:var(--glow);border-color:var(--glow);color:var(--ink-surface)}
/* Als gewone knop: open is een merkrand, niet een mint vlak. */
.btn.uc-tab.is-on{border-color:var(--brand);color:var(--brand)}
.uc-tab.is-on .chev{transform:rotate(180deg)}
/* Standaard dicht. Zonder JavaScript opent :target het paneel; met JavaScript
   zet site.js .is-open en klap je met dezelfde knop weer dicht. */
.uc-panel{display:none;margin-top:clamp(18px,2.4vw,26px)}
.uc-panel:target,.uc-panel.is-open{display:block;animation:l2s-uc-in .22s ease-out}
@keyframes l2s-uc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.uc-panel:target,.uc-panel.is-open{animation:none}
  .uc-tab .chev{transition:none}}
.uc-kop{font-size:clamp(17px,2vw,21px);color:#fff;margin-bottom:clamp(16px,2vw,22px);
  font-weight:750;letter-spacing:-.02em}

/* ══════════════════════════════════════════════════════════════════════════
   MODULEKLEUREN TERUG NAAR HET MERK
   De zes modules hadden elk een eigen pasteltint: groen, blauw, oranje, geel,
   paars en roze. Geen daarvan staat in de merkgids, en zes hues naast elkaar
   maken van de rekenmodule een lappendeken. Owner-melding 2026-08-18.

   WAAROM NIET ZES MERKTINTEN. Zes onderscheidbare kleuren maken uit een palet
   van twee is een tegenspraak: zet je ze allemaal op de teal-mint-as, dan liggen
   ze zo dicht bij elkaar dat je ze tóch niet uit elkaar houdt. Dan kun je beter
   erkennen dat kleur hier geen informatie draagt. De module is al te herkennen
   aan zijn ICOON en zijn NAAM; de tint deed niets behalve versieren.

   Wat kleur nu wél zegt: aan of uit. De schakelaar en de rand van een actieve
   module staan in het diepe merkgroen, de rest is neutraal. Dat is het enige
   verschil dat de bezoeker moet zien.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --m-sponsor:#dff4ef; --m-sponsor-ink:#06292f;
  --m-leden:#dff4ef;   --m-leden-ink:#06292f;
  --m-comm:#dff4ef;    --m-comm-ink:#06292f;
  --m-site:#dff4ef;    --m-site-ink:#06292f;
  --m-vrijw:#dff4ef;   --m-vrijw-ink:#06292f;
  --m-event:#dff4ef;   --m-event-ink:#06292f;
  --page:#dff4ef;      --page-ink:#06292f;
}
:root[data-theme="dark"]{
  --m-sponsor:rgba(34,203,173,.16); --m-sponsor-ink:#22cbad;
  --m-leden:rgba(34,203,173,.16);   --m-leden-ink:#22cbad;
  --m-comm:rgba(34,203,173,.16);    --m-comm-ink:#22cbad;
  --m-site:rgba(34,203,173,.16);    --m-site-ink:#22cbad;
  --m-vrijw:rgba(34,203,173,.16);   --m-vrijw-ink:#22cbad;
  --m-event:rgba(34,203,173,.16);   --m-event-ink:#22cbad;
  --page:rgba(34,203,173,.16);      --page-ink:#22cbad;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --m-sponsor:rgba(34,203,173,.16); --m-sponsor-ink:#22cbad;
    --m-leden:rgba(34,203,173,.16);   --m-leden-ink:#22cbad;
    --m-comm:rgba(34,203,173,.16);    --m-comm-ink:#22cbad;
    --m-site:rgba(34,203,173,.16);    --m-site-ink:#22cbad;
    --m-vrijw:rgba(34,203,173,.16);   --m-vrijw-ink:#22cbad;
    --m-event:rgba(34,203,173,.16);   --m-event-ink:#22cbad;
    --page:rgba(34,203,173,.16);      --page-ink:#22cbad;
  }
}

/* De rekenmodule: aan is merkgroen, uit is neutraal. Verder geen kleur. */
.mod{border-color:var(--line)}
.mod[aria-pressed="true"]{border-color:var(--brand);box-shadow:none}
.mod[aria-pressed="true"] .sw{background:var(--brand)}
.mod h3{color:var(--ink)}
.mod .price{color:var(--brand)}
.mod .free{background:var(--m-comm);color:var(--brand)}
.line i{background:var(--brand)}

/* De clubmotorkaart in de merkstijl: het label als mint-chip, het bedrag in het
   diepe groen, en de bar als merkvlak in plaats van een grijs blok. */
.motor{border-color:var(--line)}
.motor-tag{background:var(--m-comm);color:var(--brand)}
/* De bar was een licht mintvlak en de knop ernaast een diep verloop; dat las
   als twee verschillende merken op één kaart. Nu hetzelfde verloop als de knop,
   met wit erop. De kicker en de eenheid staan op #e6f0ef: 4,97:1 op de lichtste
   kant van het verloop, dus AA ook waar het verloop het lichtst is (owner 2026-08-30). */
.motor-bar{background:var(--grad-brand);box-shadow:var(--grad-brand-sh)}
.motor-bar .kicker{color:#e6f0ef}
.motor-bar b{color:#fff}
.motor-bar b small{color:#e6f0ef}
.mrow-ic{background:var(--m-comm);color:var(--brand)}
.mrow--uit .mrow-ic{background:var(--raise);color:var(--muted-2)}
.total b{color:var(--brand)}
.save{background:var(--m-comm);color:var(--brand)}

/* ══ DE LAATSTE VREEMDE KLEUREN OMGEZET ══
   In de basis-CSS staan tekstkleuren voor donkere vlakken die uit het oude palet
   komen: blauwgrijzen (#dfeaf1, #cfe0ea, #a9bccb, #9db2c2, #8fa6b6, #93a8b8) en
   twee groenen die niet van dit merk zijn (#4ade80, #16a34a). Ze staan hard in
   de regels, niet in de tokenlaag, dus ze veranderden niet mee met het palet.

   Ze gaan naar de grijs-as van het merk, met dezelfde trappen als de donkere
   modus. Doorgerekend op #06292f: licht 13,2:1 · gedempt 7,0:1 · zacht 5,5:1.
   De vinkjes worden mint (7,5:1 op donker). Op een LICHTE ondergrond haalt mint
   maar 2,1:1, dus daar wordt het diep teal; een icoon dat iets betekent heeft
   3:1 nodig en dit haalt 15,4:1. */
.story,.ctacard,.proofcard,.proofcard blockquote{color:#e6f0ef}
.checks li,.ctacard li,.pbar{color:#d6e6e3}
.section--ink .lead,.story p,.ctacard p,.step p,.proofcard .who,.stat span{color:#9db3b2}
.story .sig,.modal-in .sig,footer.site,.colofon p{color:#86a09f}
.dot{background:#22cbad}
.checks li svg,.ctacard li svg{color:#22cbad}
.hero-note svg,.vs td.new svg{color:var(--brand)}
.final{background:linear-gradient(120deg,#06292f 0%,#0e5a55 60%,#137268 100%)}
.final .btn--pri{background:#fff;color:#06292f}
.final .btn--pri:hover{background:#22cbad;color:#06292f}

/* ── ontdek: poolmeter, beheer-rijen, vinkveld (bouwkaart S2) ── */
.od-pool{display:flex;gap:7px;margin:12px 0 4px}
.od-pool i{width:34px;height:10px;border-radius:5px;background:var(--glow,#22cbad);font-style:normal}
.od-pool i.op{background:#d9d9d9}
.od-rij{border-top:1px dashed var(--line);padding-top:4px;margin-top:4px}
.od-rij:first-of-type{border-top:0}
.od-vink{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500}
.od-vink input{width:20px;height:20px;margin-top:2px;flex:none}

/* ── ontdek S6: lobby-rollenblok + instapbord ─────────────────────────── */
.od-lobbyrij{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 0;border-top:1px solid var(--lijn,rgba(6,41,47,.13));flex-wrap:wrap}
.od-lobbyrij:first-of-type{border-top:0}
.od-lobbywie{display:flex;flex-direction:column;gap:2px;min-width:220px}
.od-wissel{display:flex;gap:8px;align-items:center;margin:0}
.od-wissellabel{margin:0}
.od-wissellabel select{min-width:150px;min-height:44px}
.od-wisselknop{min-height:44px}
.pf-badge{font-size:11px;font-weight:700;color:#065f46;background:#d1fae5;border-radius:999px;padding:3px 10px;margin-left:6px}
.od-startknop{font-size:18px;padding:16px 34px}
.od-bordrij{display:flex;align-items:center;gap:18px;padding:14px 0;
  border-top:1px solid var(--lijn,rgba(6,41,47,.13));flex-wrap:wrap}
.od-bordrij:first-of-type{border-top:0}
.od-bordwie{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px}
.od-qr{width:128px;height:128px;border-radius:12px;border:1px solid rgba(6,41,47,.13);background:#fff;flex:none}
.od-qr-leeg{display:flex;align-items:center;justify-content:center;text-align:center;padding:10px}
.od-vinkstatus{font-weight:700;color:#8a9a99;min-width:140px;text-align:right}
.od-vinkstatus.is-binnen{color:#065f46}
.od-bordacties{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.od-bordacties form{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ══ INVOERVELDEN IN DONKERE MODUS ══════════════════════════════════════════
   De basisregel zette bij focus een HARDE witte achtergrond (background:#fff)
   terwijl de tekstkleur uit de tokens komt. In donkere modus typte je dus wit
   op wit: het veld leek leeg terwijl je aan het typen was. Gemeld 11-09 op
   /ontdek/inloggen/. Nu komt ook de focus-achtergrond uit een token, dus in de
   lichte modus verandert er niets (--surface is daar wit) en in de donkere
   modus blijft de tekst leesbaar. Placeholder krijgt een eigen, rustige kleur
   omdat 'erven' hem in beide modi te bleek maakte. */
.field input:focus,
.field textarea:focus,
.field select:focus{background:var(--surface);color:var(--ink)}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-2);opacity:.72}

/* ══ MELDINGSBALKEN IN DONKERE MODUS ════════════════════════════════════════
   Deze balken zetten wél een lichte achtergrond maar géén tekstkleur, dus in
   donkere modus kwam de lichte token-tekst op een licht vlak te staan: precies
   de meldingen die de host na élke stap ziet ('Deelnemerslijst opgeslagen',
   'Bevestigd!', 'Reset aangevraagd'). Een vaste donkere inkt hoort bij een
   vaste lichte achtergrond - die twee horen altijd als paar gezet te worden.
   Gemeld 11-09 samen met het witte invoerveld. */
.proef-melding{color:#5a4300}
.proef-melding.pf-ok{color:#0b4a36}
.pf-ok{background:#e7f7f1;border-color:#9ee2cd;color:#0b4a36}
.pf-lane.pf-slot{background:#fafafa;color:#1f2937}
.pf-embed{background:#fff;color:#0d1520}