/* Fractieportaal.nl — één stylesheet: de letter (eigen server), de basisonderdelen uit
   ds/fractieportaal/components/bundle.css, en de sitelaag uit het ontwerp (site.css).
   Waarden zoals in de overdracht van 18 oktober 2026; niet met de hand bijwerken in
   het midden, maar in de laag waar ze vandaan komen. */

@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400 600;font-display:swap;
  src:url(/letter/familjen-grotesk-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400 600;font-display:swap;
  src:url(/letter/familjen-grotesk-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/letter/familjen-grotesk-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/letter/familjen-grotesk-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ===== Basisonderdelen (bundle.css) ===== */
/* Fractieportaal — component styles, lifted from fractieportaal.nl. Values come from tokens.css. */
*,::before,::after{box-sizing:border-box}
body{margin:0;background:var(--bandvlak);color:var(--sterk);font:17px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
b,strong{color:var(--sterk)}

/* Type helpers */
.inscr{font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.02;font-weight:600;text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
.inscr-s{font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.06;font-weight:600;text-transform:uppercase;text-wrap:balance}
.lede{font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.55;color:var(--wit-zacht);max-width:56ch}
.fine{font-size:.86rem;line-height:1.5;color:var(--wit-flauw);max-width:52ch}
h3{font-size:1.06rem;line-height:1.3;font-weight:600}

/* Oogje — eyebrow */
.oogje{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--accent);margin-bottom:15px}
.oogje::after{content:"";height:1px;flex:1 1 0%;background:linear-gradient(to right,rgba(224,172,123,.5),transparent)}
[data-theme="steen"] .oogje::after{background:linear-gradient(to right,rgba(37,82,116,.4),transparent)}

/* Glas */
.glas{background:var(--glas);-webkit-backdrop-filter:var(--blur-glas);backdrop-filter:var(--blur-glas);border:1px solid var(--glas-rand);border-radius:var(--radius-glas);box-shadow:var(--schaduw-glas)}
.hero-kaart{max-width:650px;padding:clamp(26px,3.4vw,40px)}
.hero-kaart .inscr{margin-bottom:16px}
.hero-kaart .lede{max-width:44ch;margin-bottom:26px}
.hero-bewijs{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:.83rem;color:var(--wit-flauw)}
[data-theme="steen"] .hero-bewijs{border-top-color:var(--lijn)}
.hero-bewijs b{color:var(--sterk);font-weight:600}

/* Kop — header */
.kop-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 9px 9px 20px;border-radius:var(--radius-pil);background:var(--glas);border:1px solid var(--glas-rand);-webkit-backdrop-filter:var(--blur-glas);backdrop-filter:var(--blur-glas);box-shadow:var(--schaduw-glas)}
[data-theme="steen"] .kop-in{box-shadow:var(--schaduw-kop-licht);color:var(--steen-inkt)}
.merk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.merk img{width:28px;height:28px;display:block}
.menu{display:flex;align-items:center;gap:4px}
.menu a{text-decoration:none;font-size:.93rem;color:var(--wit-zacht);padding:9px 14px;border-radius:var(--radius-pil)}
.menu a:hover{color:var(--sterk);background:rgba(255,255,255,.1)}
[data-theme="steen"] .menu a:hover{background:rgba(38,31,23,.07)}
.menu a.pil{color:var(--knop-inkt);padding:9px 14px}

/* Pil — buttons */
.acties{display:flex;flex-wrap:wrap;gap:11px}
.pil{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font:inherit;font-weight:600;font-size:.98rem;padding:13px 24px;border-radius:var(--radius-pil);border:0;cursor:pointer;transition:background .18s,transform .16s}
.pil-wit{background:var(--knop-vlak);color:var(--knop-inkt)}
.pil-wit:hover{background:var(--knop-vlak-op);transform:translateY(-1px)}
.pil-glas{background:var(--glas);border:1px solid var(--glas-rand);color:var(--sterk);-webkit-backdrop-filter:var(--blur-pil);backdrop-filter:var(--blur-pil)}
.pil-glas:hover{background:var(--glas-op)}
[data-theme="steen"] .pil-glas{background:transparent;border-color:rgba(38,31,23,.22);color:var(--steen-inkt);-webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme="steen"] .pil-glas:hover{background:rgba(38,31,23,.06)}
.pil-s{font-size:.9rem;padding:10px 18px}

/* Zweef — floating stat */
.zweef{width:300px;padding:18px 20px 16px}
.zweef-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.76rem;color:var(--wit-flauw);margin-bottom:12px}
.zweef-cijfer{font-size:clamp(1.9rem,3vw,2.5rem);line-height:1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zweef-bij{font-size:.82rem;color:var(--wit-zacht);margin-top:4px}
.lijn{height:42px;margin:14px 0 2px;width:100%;display:block}
.lijn path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.lijn circle{fill:var(--sterk)}

/* Kaart */
.kaart{background:var(--vlak);border:1px solid var(--lijn-zacht);border-radius:var(--radius-kaart);box-shadow:var(--schaduw-kaart-licht)}

/* El — data card */
.el{background:var(--vlak);border:1px solid var(--lijn-zacht);border-radius:var(--radius-el);overflow:hidden;font-size:.86rem;line-height:1.4;font-variant-numeric:tabular-nums;box-shadow:var(--schaduw-kaart-licht)}
.el-kop{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:12px 15px;border-bottom:1px solid var(--lijn-zacht);background:rgba(6,14,22,.3)}
[data-theme="steen"] .el-kop{background:var(--vlak-op)}
.el-kop b{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.el-kop span{font-size:.77rem;color:var(--wit-flauw)}
.el-rij{display:flex;align-items:center;gap:10px;padding:9px 15px}
.el-rij+.el-rij{border-top:1px solid var(--lijn-zacht)}
.el-rij .nr{width:1.5em;flex:0 0 auto;font-size:.77rem;color:var(--wit-flauw)}
.el-rij .wat{flex:1 1 0%;min-width:0}
.el-rij .wat i{display:block;font-style:normal;font-size:.77rem;color:var(--wit-flauw);margin-top:1px}
.el-rij .zetels{font-size:.8rem;color:var(--wit-flauw);flex:0 0 auto}
.el-voet{padding:10px 15px;border-top:1px solid var(--lijn-zacht);font-size:.77rem;color:var(--wit-flauw)}
.el-stil{color:var(--wit-flauw)}

/* Stand — status tags */
.stand{display:inline-block;font-size:.67rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-stand);white-space:nowrap;flex:0 0 auto}
.ja{background:var(--ja-vlak);color:var(--ja-inkt)}
.nee{background:var(--nee-vlak);color:var(--nee-inkt)}
.nvt{background:var(--nvt-vlak);color:var(--wit-flauw)}
.bezig{background:var(--bezig-vlak);color:var(--accent)}

/* Stembalk — vote bar */
.el-balk{display:flex;height:5px;border-radius:99px;overflow:hidden;background:var(--stem-baan);margin:2px 0 9px}
[data-theme="steen"] .el-balk{background:var(--steen-lijn-zacht)}
.el-balk i{display:block;height:100%}
.el-balk .v{background:var(--stem-voor)}
.el-balk .o{background:rgba(255,255,255,.16)}
[data-theme="steen"] .el-balk .o{background:var(--steen-lijn)}
.el-balk .t{background:var(--stem-tegen)}

/* Meter — majority gauge */
.meter{display:grid;justify-items:center;padding:16px 15px 4px}
.meter svg{width:min(240px,100%);height:auto;display:block}
.meter-baan{fill:none;stroke:var(--stem-baan);stroke-width:13;stroke-linecap:round}
[data-theme="steen"] .meter-baan{stroke:var(--steen-lijn-zacht)}
.meter-vol{fill:none;stroke:var(--stem-voor);stroke-width:13;stroke-linecap:round}
.meter-drempel{stroke:var(--wit-flauw);stroke-width:1.5;stroke-dasharray:3,3}
.meter-cijfer{font-size:clamp(2rem,4vw,2.5rem);line-height:1;font-weight:600;letter-spacing:-.03em;margin-top:-34px;font-variant-numeric:tabular-nums}
.meter-bij{font-size:.78rem;color:var(--wit-flauw);margin-top:3px}
.meter-zin{padding:0 15px 13px;font-size:.84rem;color:var(--ja-inkt);text-align:center}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:.91rem;padding:8px 15px 8px 12px;border-radius:var(--radius-pil);background:var(--vlak);border:1px solid var(--lijn-zacht);color:var(--wit-zacht)}
.chip svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* Vinkjes — checklist */
.vinkjes{display:grid;gap:9px;margin:0 0 14px;padding:0;list-style:none}
.vinkjes li{position:relative;padding-left:22px;font-size:.95rem;color:var(--wit-zacht)}
.vinkjes li::before{content:"";position:absolute;left:1px;top:.5em;width:10px;height:5px;border-left:1.7px solid var(--accent);border-bottom:1.7px solid var(--accent);transform:rotate(-45deg)}
.vinkjes li.uit{color:var(--wit-flauw)}
.vinkjes li.uit::before{left:1px;top:.68em;width:10px;height:0;border-left:0;border-bottom:1.7px solid;transform:none;opacity:.7}

/* Stappen — timeline */
.stappen{display:grid;grid-template-columns:repeat(5,1fr)}
.stap{position:relative;padding:26px 20px 28px 0}
.stap::before{content:"";position:absolute;left:0;top:0;right:0;height:1px;background:var(--lijn)}
.stap::after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.stap:last-child::after{box-shadow:0 0 0 4px rgba(224,172,123,.22)}
[data-theme="steen"] .stap:last-child::after{box-shadow:0 0 0 4px rgba(37,82,116,.18)}
.stap h3{margin-bottom:7px}
.stap p:last-child{font-size:.92rem;color:var(--wit-zacht)}
@media (max-width:1040px){.stappen{grid-template-columns:1fr}.stap{padding:20px 0 22px 24px}.stap::before{inset:0 auto 0 0;width:1px;height:auto}.stap::after{left:-3px;top:24px}}

/* Vergelijk — two-column comparison table */
.qa{padding:clamp(18px,2.2vw,26px)}
.qa table{width:100%;border-collapse:collapse;text-align:left}
.qa th,.qa td{padding:12px 4px;vertical-align:top;font-size:.93rem;font-weight:400}
.qa thead th{font-size:.78rem;font-weight:600;color:var(--accent);padding-bottom:9px;border-bottom:1px solid rgba(224,172,123,.34)}
[data-theme="steen"] .qa thead th{border-bottom-color:rgba(37,82,116,.3)}
.qa tbody tr+tr th,.qa tbody tr+tr td{border-top:1px solid var(--lijn-zacht)}
.qa tbody th{padding-right:20px;width:47%}
.qa tbody td{color:var(--wit-zacht)}
.qa-bij{font-size:.85rem;color:var(--wit-flauw);margin-top:15px;padding-top:13px;border-top:1px solid var(--lijn-zacht)}

/* Vragen — FAQ accordion */
.vragen{border-top:1px solid var(--lijn)}
.vragen details{border-bottom:1px solid var(--lijn)}
.vragen summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;padding:18px 2px;font-size:1.01rem;font-weight:600}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"";width:10px;height:10px;flex:0 0 auto;border-right:1.7px solid var(--accent);border-bottom:1.7px solid var(--accent);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.vragen details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.vragen details p{padding:0 2px 21px;font-size:.95rem;color:var(--wit-zacht);max-width:72ch}

/* ===== Sitelaag (site.css) ===== */
/* Fractieportaal.nl — sitelaag bovenop ds/fractieportaal/components/bundle.css.
   Tokens uit ds/fractieportaal/tokens.json, als CSS-variabelen. */
:root{
  --diep:#0A1722;--diep-2:#1C394F;--lucht:#45759A;--lucht-op:#87A0C1;--warm:#B8815E;--warm-fel:#E0AC7B;--wit:#F4F7F9;
  --steen:#F2EFEB;--steen-vlak:#FFFFFF;--steen-lijn:#DDD7D0;--steen-lijn-zacht:#E7E2DC;--steen-inkt:#261F17;--steen-zacht:#4A4238;--steen-flauw:#675D51;--steen-accent:#255274;
  --bandvlak:var(--diep);--sterk:var(--wit);--wit-zacht:rgba(244,247,249,.78);--wit-flauw:rgba(244,247,249,.58);--accent:var(--warm-fel);
  --vlak:rgba(255,255,255,.05);--vlak-op:rgba(255,255,255,.09);--lijn:rgba(255,255,255,.12);--lijn-zacht:rgba(255,255,255,.08);
  --glas:rgba(255,255,255,.10);--glas-op:rgba(255,255,255,.16);--glas-rand:rgba(255,255,255,.22);
  --knop-vlak:var(--wit);--knop-inkt:var(--diep);--knop-vlak-op:#FFFFFF;
  --ja-vlak:rgba(124,186,148,.2);--ja-inkt:rgb(159,205,175);--nee-vlak:rgba(214,118,106,.22);--nee-inkt:rgb(238,154,146);
  --nvt-vlak:rgba(255,255,255,.08);--bezig-vlak:rgba(224,172,123,.18);
  --stem-voor:rgb(109,168,134);--stem-tegen:rgb(196,112,95);--stem-baan:rgba(255,255,255,.12);
  --font-sans:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --radius-stand:6px;--radius-el:16px;--radius-kaart:18px;--radius-glas:20px;--radius-pil:999px;
  --schaduw-glas:inset 0 1px 0 rgba(255,255,255,.3),0 30px 70px -30px rgba(0,8,16,.85);
  --schaduw-kaart-licht:none;--schaduw-kop-licht:inset 0 1px 0 rgba(255,255,255,.7),0 18px 40px -24px rgba(38,31,23,.4);
  --blur-glas:blur(30px) saturate(1.5);--blur-pil:blur(20px);
}
[data-theme="steen"]{
  --bandvlak:var(--steen);--sterk:var(--steen-inkt);--wit-zacht:var(--steen-zacht);--wit-flauw:var(--steen-flauw);--accent:var(--steen-accent);
  --vlak:var(--steen-vlak);--vlak-op:#F8F6F4;--lijn:var(--steen-lijn);--lijn-zacht:var(--steen-lijn-zacht);
  --glas:rgba(255,255,255,.55);--glas-op:rgba(255,255,255,.7);--glas-rand:rgba(38,31,23,.14);
  --knop-vlak:var(--diep);--knop-inkt:var(--steen-vlak);--knop-vlak-op:#06111A;
  --ja-vlak:rgba(109,168,134,.18);--ja-inkt:#2F6B47;--nee-vlak:rgba(196,112,95,.16);--nee-inkt:#9A3B30;
  --nvt-vlak:rgba(38,31,23,.06);--bezig-vlak:rgba(37,82,116,.12);--schaduw-kaart-licht:0 1px 2px rgba(38,31,23,.05);
}

/* Twee warme banden naast diep en steen, voor ritme: omber (warm donker) en terra (terracotta, donkere inkt). */
[data-theme="omber"]{
  --bandvlak:#1E1510;--sterk:#F7EFE7;--wit-zacht:rgba(247,239,231,.8);--wit-flauw:rgba(247,239,231,.62);--accent:#E0AC7B;
  --vlak:rgba(255,236,218,.05);--vlak-op:rgba(255,236,218,.09);--lijn:rgba(255,236,218,.13);--lijn-zacht:rgba(255,236,218,.08);
  --bezig-vlak:rgba(224,172,123,.18);--nvt-vlak:rgba(255,236,218,.08);
}
[data-theme="terra"]{
  --bandvlak:#C98F68;--sterk:#1A0F08;--wit-zacht:rgba(26,15,8,.92);--wit-flauw:rgba(26,15,8,.86);--accent:#0A1722;
  --vlak:rgba(255,255,255,.2);--vlak-op:rgba(255,255,255,.3);--lijn:rgba(26,15,8,.2);--lijn-zacht:rgba(26,15,8,.13);
  --glas:rgba(255,255,255,.25);--glas-op:rgba(255,255,255,.35);--glas-rand:rgba(26,15,8,.18);
  --knop-vlak:#0A1722;--knop-inkt:#F4F7F9;--knop-vlak-op:#06111A;
  --ja-vlak:rgba(47,107,71,.18);--ja-inkt:#1F4F33;--nee-vlak:rgba(154,59,48,.16);--nee-inkt:#7A2A20;
  --nvt-vlak:rgba(26,15,8,.08);--bezig-vlak:rgba(10,23,34,.12);--schaduw-kaart-licht:none;
}
[data-theme="terra"] .oogje::after,[data-theme="terra"] .kopblok-mid .oogje::before{background:linear-gradient(to right,rgba(10,23,34,.45),transparent)}
[data-theme="terra"] .el-kop{background:rgba(255,255,255,.18)}
[data-theme="terra"] .pil-glas{background:transparent;border-color:rgba(26,15,8,.35);color:#1A0F08;backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="terra"] .cijfer-groot small{color:#0A1722}

/* Warme hoofdknop: voor de ene actie per pagina die moet opvallen */
.pil-warm,.site a.pil-warm{background:#E0AC7B;color:#0A1722}
.pil-warm:hover{background:#EBBD90;transform:translateY(-1px)}

/* Home-hero: het doek vol in beeld, de kop eroverheen */
.home-hero{position:relative;overflow:hidden;background:var(--diep);min-height:clamp(760px,100vh,980px);display:flex;align-items:flex-end;padding:150px 0 clamp(56px,7vw,96px)}
.home-doek{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 28%}
.home-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0A1722 0%,rgba(10,23,34,.9) 30%,rgba(10,23,34,.2) 64%,rgba(10,23,34,.5) 100%);pointer-events:none}
.home-ring{position:absolute;left:50%;top:-6%;width:min(980px,110vw);height:auto;transform:translateX(-38%);z-index:1;pointer-events:none;opacity:.8}
.home-hero .wrap{position:relative;z-index:2;width:100%}
.home-hero .inscr-xl{font-size:clamp(2.8rem,8.6vw,7.8rem);line-height:.9;max-width:12ch;margin:6px 0 30px;text-shadow:0 2px 30px rgba(10,23,34,.5)}
.home-hero-rij{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.home-hero-tekst{flex:1 1 420px;max-width:560px}
.home-hero-kaarten{display:flex;flex-wrap:wrap;gap:14px}
.home-hero-kaarten .zweef{width:250px}
.home-hero .onderschrift{z-index:2}

/* Kansen-oculus met de telling in plaats van een doek */
.oog-vlak{position:absolute;inset:6%;border-radius:50%;background:#C98F68;color:#1A0F08;display:grid;place-items:center;text-align:center;overflow:hidden}
.oog-vlak .meter-baan{stroke:rgba(10,23,34,.16)}
.oog-vlak .meter-vol{stroke:#0A1722}
.oog-vlak .meter-drempel{stroke:rgba(26,15,8,.6)}
.oog-cijfer{font-size:clamp(4rem,9vw,7.5rem);line-height:.85;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin-top:-10%}
.oog-bij{font-size:clamp(.85rem,1.3vw,1.05rem);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:10px}

/* Pagina */
.site{background:var(--diep);color:var(--wit);font:17px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100%}
.site a{color:inherit}
.site a.pil-wit{color:var(--knop-inkt)}
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(20px,5vw,40px)}
.band{position:relative;padding-block:clamp(62px,8vw,108px);background:var(--bandvlak);color:var(--sterk)}
.band-op{background:var(--diep-2)}
.kopblok{max-width:62ch;margin-bottom:clamp(36px,5vw,56px)}
.kopblok .inscr-s{margin-bottom:16px}
.kopblok-mid{margin-inline:auto;text-align:center}
.kopblok-mid .oogje::before{content:"";height:1px;flex:1 1 0%;background:linear-gradient(to left,rgba(224,172,123,.5),transparent)}
[data-theme="steen"] .kopblok-mid .oogje::before{background:linear-gradient(to left,rgba(37,82,116,.4),transparent)}
.kopblok-mid .lede{margin-inline:auto}

/* Grote inscriptie: de hero mag harder dan de sectiekoppen */
.inscr-xl{font-size:clamp(2.6rem,7.4vw,6.6rem);line-height:.94;font-weight:600;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance;margin:0}
.inscr-xl em{font-style:italic;font-weight:500;color:var(--accent);text-transform:none;letter-spacing:-.01em}
.romein{font-size:.8rem;letter-spacing:.32em;color:var(--accent);font-weight:600;text-transform:uppercase}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--diep);padding-top:130px;padding-bottom:clamp(56px,7vw,96px)}
.hero-doek{position:absolute;inset:0;pointer-events:none}
.hero-doek svg{position:absolute;right:-14%;top:-4%;width:min(1180px,118%);height:auto}
.hero-in{position:relative;display:grid;gap:clamp(28px,4vw,44px)}
.hero-rij{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.hero-kaart{flex:1 1 440px}
.zweef{flex:0 0 auto}
.onderschrift{position:absolute;right:clamp(20px,5vw,40px);bottom:18px;font-size:.76rem;color:var(--wit-flauw);max-width:46ch;text-align:right}

/* Subpagina-hero */
.sub-hero{position:relative;overflow:hidden;background:var(--diep);padding-top:150px;padding-bottom:clamp(52px,6vw,84px);border-bottom:1px solid var(--lijn-zacht)}
.sub-hero svg.boog{position:absolute;right:-180px;top:-60px;width:820px;height:auto;pointer-events:none}
.sub-hero .inscr-xl{font-size:clamp(2.3rem,5.8vw,5rem);max-width:15ch;margin:18px 0 22px}
.sub-hero .lede{max-width:58ch}

/* Cijferband */
.cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.cijfer-cel{padding:26px 22px 24px 0}
.cijfer-cel+.cijfer-cel{padding-left:22px;border-left:1px solid var(--lijn)}
.cijfer-groot{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cijfer-groot small{font-size:.45em;letter-spacing:0;font-weight:500;color:var(--accent);margin-left:4px}
.cijfer-bij{font-size:.88rem;color:var(--wit-zacht);margin-top:8px;max-width:24ch}
@media (max-width:820px){.cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}.cijfer-cel:nth-child(3){padding-left:0;border-left:0}.cijfer-cel:nth-child(n+3){border-top:1px solid var(--lijn)}}

/* Verloop: zo loopt een raadsvergadering */
.verloop{border-top:1px solid var(--lijn)}
.verloop-rij{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.25fr);gap:clamp(18px,3vw,40px);padding:30px 0;border-bottom:1px solid var(--lijn)}
.verloop-wanneer{display:flex;gap:16px;align-items:baseline}
.verloop-nr{font-size:.8rem;letter-spacing:.2em;color:var(--accent);font-weight:600;min-width:2.4em}
.verloop-wanneer h3{font-size:clamp(1.25rem,2vw,1.6rem);text-transform:uppercase;line-height:1.08;font-weight:600}
.verloop-wanneer p{font-size:.86rem;color:var(--wit-flauw);margin-top:6px}
.verloop-nu{font-size:.95rem;color:var(--wit-flauw)}
.verloop-wel{font-size:1rem;color:var(--sterk)}
.verloop .stand{margin-bottom:9px}
@media (max-width:900px){.verloop-rij{grid-template-columns:1fr;gap:12px}}

/* Tegels naar subpagina's */
.tegels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.tegel{grid-column:span 6;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,3vw,32px);text-decoration:none;background:var(--vlak);border:1px solid var(--lijn-zacht);border-radius:var(--radius-kaart);transition:background .2s,border-color .2s}
.tegel:hover{background:var(--vlak-op);border-color:var(--lijn)}
.tegel-breed{grid-column:span 7}.tegel-smal{grid-column:span 5}
.tegel-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tegel h3{font-size:clamp(1.4rem,2.3vw,1.9rem);text-transform:uppercase;line-height:1.04;font-weight:600}
.tegel p{color:var(--wit-zacht);font-size:.98rem;max-width:46ch}
.tegel-pijl{font-size:.9rem;font-weight:600;color:var(--accent);margin-top:auto}
@media (max-width:900px){.tegel,.tegel-breed,.tegel-smal{grid-column:span 12}}

/* Twee kolommen met beeld */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.duo + .duo{margin-top:clamp(64px,8vw,112px)}
.duo-om .duo-tekst{order:2}
.duo-tekst h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;text-transform:uppercase;font-weight:600;margin-bottom:16px;text-wrap:balance}
.duo-tekst p{color:var(--wit-zacht);max-width:48ch}
.duo-tekst p + p{margin-top:12px}
@media (max-width:900px){.duo{grid-template-columns:1fr}.duo-om .duo-tekst{order:0}}

/* Kolommen */
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:900px){.drie,.twee,.vier{grid-template-columns:1fr}}
.kaart-in{padding:clamp(20px,2.6vw,28px)}
.kaart-in h3{margin:14px 0 8px}
.kaart-in p{font-size:.95rem;color:var(--wit-zacht)}
.ikoon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bezig-vlak)}
.ikoon svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Koppelingen */
.koppel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px 24px;align-items:center;padding:16px 0;border-top:1px solid var(--lijn-zacht)}
.koppel:last-child{border-bottom:1px solid var(--lijn-zacht)}
.koppel dt{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);font-weight:600}
@media (max-width:700px){.koppel{grid-template-columns:1fr;gap:8px}}

/* Oproep */
.oproep{position:relative;overflow:hidden;background:var(--diep);padding-block:clamp(80px,10vw,140px)}
.oproep svg.boog{position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:1300px;max-width:none;height:auto;pointer-events:none}
.oproep-in{position:relative;max-width:760px;margin:0 auto;text-align:center;padding:clamp(28px,4vw,48px)}
.oproep-in .inscr-xl{font-size:clamp(2.2rem,5vw,4.2rem);margin:14px 0 18px}
.oproep-in .lede{margin:0 auto 26px}
.oproep-in .acties{justify-content:center}

/* Motie-editor mock */
.editor{padding:0}
.editor-blad{padding:clamp(20px,3vw,32px);font-size:.95rem;color:var(--wit-zacht);display:grid;gap:12px}
.editor-blad h4{margin:0;font-size:1.05rem;color:var(--sterk)}
.editor-blad b{color:var(--sterk);font-weight:600}
.cursor{display:inline-block;padding:1px 7px;border-radius:5px;background:var(--warm);color:var(--diep);font-size:.72rem;font-weight:600;margin-left:6px;vertical-align:1px}
.typ{border-right:2px solid var(--warm);padding-right:2px}
.editor-voet{display:flex;flex-wrap:wrap;gap:8px;padding:13px 15px;border-top:1px solid var(--lijn-zacht);background:rgba(6,14,22,.3)}

/* Stappenlijst (AI) */
.reeks{list-style:none;margin:0;padding:0;counter-reset:r;display:grid;gap:0}
.reeks li{counter-increment:r;display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:20px 0;border-top:1px solid var(--lijn)}
.reeks li:last-child{border-bottom:1px solid var(--lijn)}
.reeks li::before{content:counter(r,upper-roman);font-size:.85rem;letter-spacing:.14em;font-weight:600;color:var(--accent);padding-top:3px}
.reeks b{display:block;font-size:1.06rem;margin-bottom:3px}
.reeks span{color:var(--wit-zacht);font-size:.95rem}

/* Prompt */
.prompt{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 22px;border-radius:var(--radius-pil);font-size:1.02rem}
.prompt span{flex:1 1 auto}
.prompt i{width:38px;height:38px;border-radius:50%;background:var(--wit);flex:0 0 auto;display:grid;place-items:center}
.prompt i svg{width:16px;height:16px;fill:none;stroke:var(--diep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Matrix */
.matrix{overflow-x:auto}
.matrix table{border-collapse:separate;border-spacing:3px;font-size:.78rem;font-variant-numeric:tabular-nums;margin:12px auto}
.matrix th{font-weight:600;color:var(--wit-flauw);padding:4px 6px;font-size:.7rem;letter-spacing:.05em}
.matrix td{width:44px;height:34px;text-align:center;border-radius:6px;color:var(--sterk)}
.m9{background:rgba(224,172,123,.62);color:#1b1208}.m8{background:rgba(224,172,123,.46)}.m7{background:rgba(224,172,123,.32)}.m6{background:rgba(224,172,123,.2)}.m5{background:rgba(224,172,123,.12)}.m2{background:rgba(255,255,255,.04);color:var(--wit-flauw)}.mx{color:var(--wit-flauw)}.mz{color:var(--wit-flauw);font-style:italic;background:rgba(255,255,255,.04)}

/* Debat */
.beurt{padding:13px 15px}
.beurt+.beurt{border-top:1px solid var(--lijn-zacht)}
.beurt-kop{display:flex;gap:10px;align-items:baseline;font-size:.8rem;color:var(--wit-flauw);margin-bottom:5px}
.beurt-kop b{color:var(--sterk);font-size:.86rem}
.beurt p{font-size:.88rem;color:var(--wit-zacht);font-style:italic}

/* Kanalen */
.kanalen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kanaal{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;background:var(--vlak);border:1px solid var(--lijn-zacht);font-size:.95rem}
.kanaal svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
@media (max-width:700px){.kanalen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Deelbeeld */
.deelbeeld{aspect-ratio:1/1;border-radius:14px;overflow:hidden;position:relative;background:var(--diep-2);display:flex;flex-direction:column;justify-content:space-between;padding:26px;color:var(--wit)}
.deelbeeld::before{content:"";position:absolute;right:-30%;top:-25%;width:80%;height:70%;border-radius:50%;background:var(--warm);opacity:.55;filter:blur(40px)}
.deelbeeld > *{position:relative}
.deelbeeld-uitslag{font-size:clamp(2.6rem,6vw,4.4rem);line-height:.9;font-weight:600;text-transform:uppercase;letter-spacing:-.02em}

/* Tijdlijn van de nacht */
.nacht{position:relative;height:72px;border-top:1px solid var(--lijn);margin-top:28px}
.nacht-uur{position:absolute;top:8px;font-size:.74rem;color:var(--wit-flauw);transform:translateX(-50%)}
.nacht-stip{position:absolute;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--accent);transform:translateX(-50%);box-shadow:0 0 0 5px rgba(224,172,123,.2)}

/* Prijzen */
.pakketten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.pakket{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,32px)}
.pakket-uit{background:var(--diep);color:var(--wit);border-color:transparent;position:relative}
.pakket h3{font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em}
.prijs{font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.prijs small{font-size:.36em;font-weight:500;letter-spacing:0;color:var(--wit-flauw);margin-left:6px}
.pakket .pil{margin-top:auto}
.teller{display:inline-flex;align-items:center;gap:6px;padding:6px;border-radius:var(--radius-pil);background:var(--vlak);border:1px solid var(--lijn)}
.teller button{width:44px;height:44px;border-radius:50%;border:1px solid var(--lijn);background:transparent;color:var(--sterk);font:inherit;font-size:1.3rem;cursor:pointer}
.teller button:hover{background:var(--vlak-op)}
.teller output{min-width:3.4em;text-align:center;font-weight:600;font-size:1.3rem;font-variant-numeric:tabular-nums}
@media (max-width:900px){.pakketten{grid-template-columns:1fr}}
.tabel{overflow-x:auto}
.tabel table{width:100%;min-width:620px;border-collapse:collapse;font-size:.93rem}
.tabel th,.tabel td{padding:12px 10px;text-align:left;border-top:1px solid var(--lijn-zacht);font-weight:400}
.tabel thead th{font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);border-top:0}
.tabel td{text-align:center;color:var(--accent);font-weight:600;width:14%}
.tabel td.nee-cel{color:var(--wit-flauw);font-weight:400}
.tabel tr.groep th{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--wit-flauw);padding-top:24px}

/* Formulier */
.veld{display:grid;gap:6px}
.veld label{font-size:.82rem;color:var(--wit-zacht);font-weight:600}
.veld input{font:inherit;font-size:1rem;padding:13px 16px;border-radius:12px;border:1px solid var(--glas-rand);background:rgba(255,255,255,.06);color:var(--sterk);min-height:48px}
.veld input::placeholder{color:var(--wit-flauw)}
.formulier{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:end;text-align:left}
@media (max-width:900px){.formulier{grid-template-columns:1fr}}

/* Kop als dc-import */
.kop-plek{position:sticky;top:14px;z-index:50;height:0;overflow:visible}
.kop-plek > *{transform:translateY(0)}
.kop-wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(12px,3vw,24px)}
.menu a.actief{color:var(--sterk);background:rgba(255,255,255,.1)}
.menu a{padding-inline:12px}
@media (max-width:1100px){.kop-in{flex-wrap:wrap;border-radius:26px;padding:9px}.kop-in .merk{padding-left:10px}.menu{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}.menu a{white-space:nowrap}.menu .pil{display:none}.kop-inlog{display:inline-flex}}
@media (min-width:1101px){.kop-inlog{display:none}}

/* Voet */
.voet{background:#06111A;color:var(--wit);padding:clamp(48px,6vw,80px) 0 32px;font-size:.92rem}
.voet-rij{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.voet h4{margin:0 0 12px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.voet ul a{text-decoration:none;color:var(--wit-zacht)}
.voet ul a:hover{color:var(--wit)}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--lijn-zacht);color:var(--wit-flauw);font-size:.82rem}
@media (max-width:820px){.voet-rij{grid-template-columns:1fr 1fr}}

@media (max-width:640px){.acties .pil{width:100%}}

/* ===== Subpagina-heroes: elk een eigen vorm ===== */
.onderschrift-doek{font-size:.76rem;color:var(--wit-flauw);max-width:52ch}

/* A — volle breedte, glaskaart op het doek (Het portaal) */
.doek-vol{position:relative;overflow:hidden;background:var(--diep);min-height:clamp(640px,86vh,880px);display:flex;align-items:flex-end;padding:140px 0 clamp(40px,5vw,64px)}
.doek-vol > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.doek-vol::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,23,34,.92) 0%,rgba(10,23,34,.35) 38%,rgba(10,23,34,0) 60%),linear-gradient(to right,rgba(10,23,34,.55),rgba(10,23,34,0) 55%)}
.doek-vol .wrap{position:relative;z-index:1;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.doek-vol .hero-kaart{max-width:600px}
.doek-vol .hero-kaart .inscr-xl{font-size:clamp(2.2rem,5vw,4.2rem);margin:12px 0 16px}

/* B — tekst links, doek in een ovaal oculus rechts (Stemmen & kansen) */
.doek-oog{position:relative;overflow:hidden;background:var(--diep);padding:140px 0 clamp(56px,7vw,96px)}
.doek-oog .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.doek-oog .inscr-xl{font-size:clamp(2.3rem,5.4vw,4.8rem);margin:18px 0 22px}
.oog-lijst{position:relative;aspect-ratio:1.18/1}
.oog-lijst img{position:absolute;inset:6%;width:88%;height:88%;object-fit:cover;border-radius:50%;object-position:55% 40%}
.oog-lijst svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.oog-lijst .glas{position:absolute;left:-6%;bottom:2%;padding:16px 18px;width:min(280px,70%)}
@media (max-width:900px){.doek-oog .wrap{grid-template-columns:1fr}.oog-lijst .glas{left:4%}}

/* C — doek als donkere band, tekst onderaan, data-kaart erover (Veiligheid) */
.doek-band{position:relative;overflow:hidden;background:var(--diep);padding:150px 0 0}
.doek-band .doek-beeld{position:relative;margin-top:clamp(28px,4vw,48px);height:clamp(380px,46vw,620px)}
.doek-band .doek-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 30%}
.doek-band .doek-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,23,34,1) 0%,rgba(10,23,34,0) 22%,rgba(10,23,34,0) 70%,rgba(10,23,34,1) 100%)}
.doek-band .doek-beeld .wrap{position:relative;z-index:1;height:100%;display:flex;align-items:flex-end;justify-content:flex-end;padding-bottom:32px}
.doek-band .glas.el{background:var(--glas);border-color:var(--glas-rand);backdrop-filter:var(--blur-glas);-webkit-backdrop-filter:var(--blur-glas);width:min(400px,100%)}
.doek-band .inscr-xl{font-size:clamp(2.3rem,5.8vw,5rem);max-width:16ch;margin:18px 0 22px}
.doek-band-kop{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 56px;align-items:end}
@media (max-width:900px){.doek-band-kop{grid-template-columns:1fr}}

/* D — gecentreerd rond één invoerveld (Je eigen AI) */
.hero-midden{position:relative;overflow:hidden;background:var(--diep);padding:160px 0 clamp(64px,8vw,110px);text-align:center}
.hero-midden svg.ring{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:1400px;max-width:none;height:auto;pointer-events:none}
.hero-midden .wrap{position:relative}
.hero-midden .inscr-xl{font-size:clamp(2.4rem,6vw,5.2rem);max-width:16ch;margin:18px auto 22px}
.hero-midden .lede{margin:0 auto}
.hero-midden .chips{justify-content:center}
.stroom{display:grid;gap:6px;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:var(--wit-flauw);padding:16px 22px;border-top:1px solid var(--lijn-zacht)}
.stroom b{color:var(--accent);font-weight:400;margin-right:8px}

/* E — sterrenbeeld van kanalen (Delen) */
.sb{position:relative;width:560px;height:580px;max-width:100%;flex:0 1 560px}
.sb-node{position:absolute;width:96px;display:flex;flex-direction:column;align-items:center;gap:9px}
.sb-schijf{width:80px;height:80px;border-radius:50%;display:grid;place-items:center}
.sb-schijf svg{width:28px;height:28px;fill:none;stroke:var(--wit);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sb-naam{font-size:.82rem;color:var(--wit-zacht);white-space:nowrap}
.sb-ster{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--wit);opacity:.5}
.sb-gloed{position:absolute;border-radius:999px;filter:blur(90px);pointer-events:none}
@media (max-width:760px){.sb{height:auto;width:100%;flex:1 1 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 8px}.sb-node{position:static !important;width:auto}.sb-lijnen,.sb-kern,.sb-ster,.sb-gloed{display:none}}
.chat-vraag{align-self:flex-end;max-width:86%;background:var(--vlak-op);border:1px solid var(--lijn-zacht);border-radius:14px 14px 4px 14px;padding:10px 13px;font-size:.9rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}

/* F — prijs als hoofdfiguur (Prijzen) */
.hero-prijs{position:relative;overflow:hidden;background:var(--diep);padding:150px 0 clamp(56px,7vw,96px)}
.hero-prijs .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
.hero-prijs .inscr-xl{font-size:clamp(2.2rem,5vw,4.4rem);margin:18px 0 22px}
.reuzencijfer{font-size:clamp(5.5rem,15vw,13rem);line-height:.82;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--wit)}
.reuzencijfer sup{font-size:.32em;vertical-align:top;letter-spacing:0;color:var(--accent);margin-right:.08em;position:relative;top:.25em}
@media (max-width:900px){.hero-prijs .wrap{grid-template-columns:1fr}}

/* ===== Demovideo met hoofdstukken (Home) ===== */
.video-rij{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:980px){.video-rij{grid-template-columns:1fr}}
.video{--glas:rgba(255,255,255,.12);--glas-op:rgba(255,255,255,.2);--glas-rand:rgba(255,255,255,.22);--accent:#E0AC7B;--wit-flauw:rgba(244,247,249,.62);--sterk:#F4F7F9;position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0A1722;border:0;padding:0;cursor:pointer;container-type:inline-size;font:inherit;color:#F4F7F9;text-align:left;box-shadow:0 40px 80px -40px rgba(10,23,34,.7)}
.video-ring{position:absolute;left:-18%;bottom:-62%;width:80%;height:auto;pointer-events:none}
.video-gloed{position:absolute;right:8%;top:6%;width:44%;height:60%;border-radius:50%;background:var(--warm);opacity:.4;filter:blur(60px)}
.video-doek{position:absolute;right:5%;top:11%;width:42%;height:68%;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.18)}
.video-doek img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;display:block}
.video-tekst{position:absolute;left:6%;top:11%;width:44%;display:flex;flex-direction:column;align-items:flex-start;gap:2.6cqw}
.video-merk{display:flex;align-items:center;gap:1cqw;font-weight:600;font-size:1.5cqw;letter-spacing:.09em;text-transform:uppercase}
.video-merk img{width:2.6cqw;height:2.6cqw}
.video-label{font-size:1.2cqw;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:.5cqw 1.1cqw;border-radius:999px;background:rgba(224,172,123,.2);color:#E0AC7B}
.video-titel{font-size:5cqw;line-height:.96;font-weight:600;text-transform:uppercase;text-wrap:balance}
.video-titel em{font-style:italic;font-weight:500;text-transform:none;color:#E0AC7B}
.video-onder{font-size:1.5cqw;color:rgba(244,247,249,.72)}
.video-play{position:absolute;left:50%;top:50%;width:10cqw;height:10cqw;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;transition:background .2s,transform .2s}
.video:hover .video-play{background:var(--glas-op);transform:translate(-50%,-50%) scale(1.04)}
.video-play svg{width:34%;height:34%;fill:#F4F7F9;display:block}
.video-balk{position:absolute;left:1.6%;right:1.6%;bottom:2.6%;display:flex;align-items:center;gap:1.8cqw;padding:1.1cqw 2cqw;border-radius:999px;background:rgba(10,23,34,.78);font-size:clamp(.66rem,1.35cqw,.9rem);font-variant-numeric:tabular-nums}
.video-balk svg{width:1.8cqw;height:1.8cqw;min-width:10px;min-height:10px;fill:#F4F7F9}
.video-spoor{position:relative;flex:1 1 auto;height:3px;border-radius:2px;background:rgba(255,255,255,.22)}
.video-spoor b{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:#E0AC7B;transition:width .3s}
.video-spoor i{position:absolute;top:50%;width:.9cqw;height:.9cqw;min-width:7px;min-height:7px;border-radius:50%;background:#0A1722;border:1.5px solid #F4F7F9;transform:translate(-50%,-50%)}
.video-cc{border:1.5px solid #F4F7F9;border-radius:4px;padding:0 .4em;font-size:.8em;font-weight:600}
.hoofdstukken{display:grid;gap:8px}
.hfst{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--lijn-zacht);background:var(--vlak);box-shadow:var(--schaduw-kaart-licht);text-align:left;font:inherit;color:var(--sterk);cursor:pointer;min-height:44px;transition:background .2s,border-color .2s}
.hfst:hover{background:var(--vlak-op)}
.hfst-aan{border-color:var(--accent)}
.hfst-nr{font-size:.78rem;letter-spacing:.16em;font-weight:600;color:var(--accent)}
.hfst-titel{font-weight:600;font-size:1rem}
.hfst-titel small{display:block;font-weight:400;font-size:.8rem;color:var(--wit-flauw);margin-top:1px}
.hfst-tijd{font-size:.8rem;color:var(--wit-flauw);font-variant-numeric:tabular-nums}
.hfst-uitleg{grid-column:2/4;display:grid;gap:8px;margin-top:8px;font-size:.9rem}
.hfst-uitleg .wel{color:var(--wit-zacht)}
.hfst-uitleg .nu{color:var(--wit-flauw)}

/* ===== Stroomschema: bronnen → portaal → resultaat (Home) ===== */
.stroomschema{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px) minmax(0,1fr);align-items:start}
.ss-kol{display:flex;flex-direction:column;gap:12px;min-width:0}
.ss-kop{height:22px;margin:0 0 2px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wit-flauw);font-weight:600}
.ss-item{position:relative;height:76px;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--vlak);border:1px solid var(--lijn-zacht);border-radius:14px;text-decoration:none;color:inherit;transition:background .2s,border-color .2s}
a.ss-item:hover{background:var(--vlak-op);border-color:var(--lijn)}
.ss-ikoon{width:40px;height:40px;border-radius:10px;background:var(--bezig-vlak);display:grid;place-items:center;flex:0 0 auto}
.ss-ikoon svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ss-tekst{min-width:0}
.ss-tekst b{display:block;font-size:.98rem;font-weight:600;color:var(--sterk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-tekst span{display:block;font-size:.82rem;color:var(--wit-flauw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ss-tekst em{font-style:normal;color:var(--accent);font-weight:600}
.ss-uit::before{content:"";position:absolute;left:-11px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left:7px solid var(--accent)}
.ss-mid{position:relative;height:604px;margin-top:36px}
.ss-mid > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ss-lijn{fill:none;stroke:rgba(224,172,123,.5);stroke-width:1.3;stroke-dasharray:2 6;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:ss-stroom 1.8s linear infinite}
@keyframes ss-stroom{to{stroke-dashoffset:-32}}
@media (prefers-reduced-motion:reduce){.ss-lijn{animation:none}}
.ss-kern{position:absolute;left:50%;top:50%;width:196px;height:196px;margin:-98px 0 0 -98px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.ss-kern img{width:38px;height:38px}
.ss-ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.ss-voet{text-align:center;margin-top:28px;font-size:.86rem;color:var(--wit-flauw)}
@media (max-width:960px){
.stroomschema{grid-template-columns:1fr;gap:20px}
.ss-mid{height:240px;margin:0}
.ss-mid > svg{display:none}
.ss-item{height:auto;min-height:68px;padding:12px 16px}
.ss-tekst b,.ss-tekst span{white-space:normal}
.ss-uit::before{display:none}
}

/* ===== Oproep op het doek (Home, proef) ===== */
.oproep-doek{min-height:clamp(560px,72vh,780px);display:flex;align-items:center}
.oproep-beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;z-index:0}
.oproep-doek::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(10,23,34,.3) 0%,rgba(10,23,34,.88) 78%);pointer-events:none}
.oproep-doek .boog{z-index:2}
.oproep-doek .wrap{position:relative;z-index:3;width:100%}
.oproep-doek .oproep-in.glas{background:rgba(10,23,34,.42)}
.zweeftag{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(10,23,34,.58);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:.84rem;color:#F4F7F9;white-space:nowrap;box-shadow:0 18px 40px -20px rgba(0,8,16,.8)}
.zweeftag b{font-variant-numeric:tabular-nums}
@media (max-width:980px){.zweeftag{display:none}}

/* ===== Leven: kleine bewegingen die de site laten ademen =====
   Prijzen (herkend aan .hero-prijs) blijft rustig: daar alleen wat er al was. */
.levend-stip{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--stem-voor);margin-right:7px;vertical-align:1px}

/* Hover: kaarten komen iets naar je toe */
.site:not(:has(.hero-prijs)) :is(.kaart,.el){transition:transform .25s ease,border-color .25s ease}
.site:not(:has(.hero-prijs)) :is(.kaart,.el):hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.tegel{transition:background .2s,border-color .2s,transform .25s ease}
.tegel:hover{transform:translateY(-4px)}
.tegel-pijl{transition:transform .25s ease}
.tegel:hover .tegel-pijl{transform:translateX(6px)}
.ikoon,.ss-ikoon{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.kaart:hover .ikoon,.ss-item:hover .ss-ikoon{transform:rotate(-8deg) scale(1.1)}
.site:not(:has(.hero-prijs)) .chip{transition:border-color .2s,transform .2s}
.site:not(:has(.hero-prijs)) .chip:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-1px)}
.reeks li{transition:padding-left .25s ease}
.reeks li:hover{padding-left:8px}
.matrix td{transition:transform .15s ease}
.matrix td:hover{transform:scale(1.18)}
.meter-vol{transition:stroke-dasharray .5s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:no-preference){
  /* De doeken ademen langzaam */
  .home-doek,.doek-vol > img,.oproep-beeld,.doek-beeld img{animation:kenburns 34s ease-in-out infinite alternate}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07) translate(-1%,-1%)}}

  /* De stippelringen van het plafond draaien heel traag */
  .home-ring circle:nth-child(2),.oproep .boog circle:nth-child(2),.video-ring circle:nth-child(2),.oog-lijst svg ellipse:nth-child(2),.hero-midden .ring ellipse:nth-child(2){transform-box:fill-box;transform-origin:center;animation:draai 120s linear infinite}
  @keyframes draai{to{transform:rotate(360deg)}}
  .ss-ring:first-of-type{animation:draai-mid 70s linear infinite}
  @keyframes draai-mid{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

  /* Zwevende kaarten en tags */
  .home-hero-kaarten .zweef,.oog-lijst .glas,.zweeftag,.sb-node{animation:zweef 7s ease-in-out infinite}
  .home-hero-kaarten .zweef:nth-child(2){animation-delay:-3.5s}
  .sb-node:nth-of-type(2n){animation-delay:-2.5s}
  .sb-node:nth-of-type(3n){animation-delay:-5s}
  @keyframes zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

  /* De lijn tekent zichzelf, het eindpunt klopt */
  .lijn path{stroke-dasharray:420;stroke-dashoffset:420;animation:teken 2.4s .4s ease-out forwards}
  @keyframes teken{to{stroke-dashoffset:0}}
  .lijn circle{transform-box:fill-box;transform-origin:center;animation:klop 2.2s ease-in-out infinite}
  @keyframes klop{0%,100%{transform:scale(1)}50%{transform:scale(1.55)}}

  /* Meters lopen vol, stembalken schuiven open */
  .meter-vol{animation:meter-in 1.6s .3s cubic-bezier(.2,.8,.2,1) backwards}
  @keyframes meter-in{from{stroke-dasharray:0 100}}
  .el-balk{animation:onthul 1.3s .25s cubic-bezier(.2,.8,.2,1) backwards}
  @keyframes onthul{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

  /* Live-signalen */
  .levend-stip{animation:ping 2s ease-out infinite}
  @keyframes ping{0%{box-shadow:0 0 0 0 rgba(109,168,134,.65)}100%{box-shadow:0 0 0 9px rgba(109,168,134,0)}}
  .nacht-stip{animation:ping-warm 2.4s ease-out infinite}
  @keyframes ping-warm{0%{box-shadow:0 0 0 0 rgba(224,172,123,.6)}100%{box-shadow:0 0 0 12px rgba(224,172,123,0)}}
  .video-play::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(244,247,249,.55);animation:halo 2.4s ease-out infinite;pointer-events:none}
  @keyframes halo{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.4);opacity:0}}

  /* Iemand typt */
  .typ{animation:caret 1s steps(1) infinite}
  @keyframes caret{50%{border-right-color:transparent}}
  .cursor{display:inline-block;animation:zweef 3s ease-in-out infinite}

  /* Het midden van het schema ademt */
  .ss-kern{animation:adem 5s ease-in-out infinite}
  @keyframes adem{0%,100%{box-shadow:var(--schaduw-glas),0 0 0 0 rgba(224,172,123,0)}50%{box-shadow:var(--schaduw-glas),0 0 70px 8px rgba(224,172,123,.28)}}

  /* Kanalen: de stippellijnen stromen net als bij de bronnen */
  .sb-lijnen g:first-of-type line{animation:ss-stroom 1.8s linear infinite}

  /* AI: de stappen lichten één voor één op */
  @keyframes regel{0%{opacity:.25}10%{opacity:1}85%{opacity:1}100%{opacity:.25}}

  /* Bij het scrollen komen blokken zacht omhoog (waar de browser dat kan) */
  @supports (animation-timeline: view()){
    .site:not(:has(.hero-prijs)) :is(.kopblok,.tegel,.ss-item,.hfst,.duo > *,.drie > *,.twee > *,.verloop-rij,.reeks li,.cijfer-cel){animation:op linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes op{from{opacity:0;transform:translateY(26px)}}
  }
}

/* ===== Diepte in de blauwe banden: lucht, sterren en een plafondring ===== */
.site:not(:has(.hero-prijs)) .band:not([data-theme]){overflow:hidden;overflow:clip;isolation:isolate}
.site:not(:has(.hero-prijs)) .band:not([data-theme])::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 60% at 88% 0%,rgba(69,117,154,.32),transparent 70%),
    radial-gradient(ellipse 45% 50% at 0% 100%,rgba(135,160,193,.14),transparent 70%),
    radial-gradient(1.2px 1.2px at 7% 22%,rgba(244,247,249,.55),transparent 60%),
    radial-gradient(1px 1px at 23% 64%,rgba(244,247,249,.4),transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 12%,rgba(244,247,249,.45),transparent 60%),
    radial-gradient(1px 1px at 58% 80%,rgba(244,247,249,.35),transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 38%,rgba(244,247,249,.5),transparent 60%),
    radial-gradient(1px 1px at 92% 70%,rgba(244,247,249,.4),transparent 60%);}
.site:not(:has(.hero-prijs)) .band-op:not([data-theme])::before{background:
    radial-gradient(ellipse 50% 60% at 10% 0%,rgba(135,160,193,.22),transparent 70%),
    radial-gradient(ellipse 50% 55% at 100% 100%,rgba(224,172,123,.08),transparent 70%),
    radial-gradient(1.2px 1.2px at 14% 70%,rgba(244,247,249,.45),transparent 60%),
    radial-gradient(1px 1px at 36% 20%,rgba(244,247,249,.35),transparent 60%),
    radial-gradient(1.2px 1.2px at 67% 58%,rgba(244,247,249,.4),transparent 60%),
    radial-gradient(1px 1px at 88% 16%,rgba(244,247,249,.45),transparent 60%);}
.site:not(:has(.hero-prijs)) .band:not([data-theme])::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:720px;height:720px;right:-260px;top:-300px;border-radius:50%;border:1.5px dashed rgba(224,172,123,.14);box-shadow:0 0 0 40px rgba(224,172,123,.025),inset 0 0 0 70px rgba(224,172,123,.02)}
.site:not(:has(.hero-prijs)) .band-op:not([data-theme])::after{right:auto;left:-300px;top:auto;bottom:-340px}
.site:not(:has(.hero-prijs)) .band:not([data-theme]) :is(.kaart,.el,.tegel){background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}

/* ===== Halfrond: de raad als zetels ===== */
.halfrond{position:relative;width:100%;aspect-ratio:2/1.1}
.zetel{position:absolute;width:3.4%;aspect-ratio:1/1;border-radius:50%;transform:translate(-50%,-50%);background:rgba(244,247,249,.14);transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.zetel-eigen{background:#E0AC7B;box-shadow:0 0 14px rgba(224,172,123,.5)}
.zetel-voor{background:rgb(109,168,134);transform:translate(-50%,-50%) scale(1.14);box-shadow:0 0 14px rgba(109,168,134,.6)}
.halfrond-midden{position:absolute;left:50%;bottom:0;transform:translateX(-50%);text-align:center;width:40%}
.halfrond-cijfer{font-size:clamp(2rem,3.6vw,3.1rem);line-height:.95;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.halfrond-cijfer small{font-size:.32em;letter-spacing:0;color:var(--wit-flauw);font-weight:500}
.halfrond-oordeel{display:inline-block;margin-top:6px;font-size:.66rem;white-space:nowrap;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:6px;transition:background .3s,color .3s}
.oordeel-ja{background:var(--ja-vlak);color:var(--ja-inkt)}
.oordeel-nee{background:var(--nee-vlak);color:var(--nee-inkt)}
.oordeel-bezig{background:var(--nvt-vlak);color:var(--wit-flauw)}
.partij-chip{transition:background .25s,border-color .25s,color .25s}
.partij-aan{color:#F4F7F9;border-color:rgba(109,168,134,.7);background:rgba(124,186,148,.2)}
.partij-eigen{color:#F4F7F9;border-color:rgba(224,172,123,.7);background:rgba(224,172,123,.18)}

/* ===== Matrix met een uitgelicht paar ===== */
.m-aan{outline:2px solid #F4F7F9;outline-offset:1px;transform:scale(1.15)}
.matrix-zin{padding:10px 15px 0;font-size:.86rem;color:var(--wit-zacht);min-height:2.6em}

/* ===== Slots die verschijnen (getypte regels, tips, chatberichten) ===== */
.slot{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.slot.te-zien{opacity:1;transform:none}
.caret::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:#E0AC7B;animation:caret-blink 1s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}

/* ===== Borden ===== */
.bord{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px}
.bord-kol{background:rgba(6,14,22,.35);border:1px solid var(--lijn-zacht);border-radius:16px;padding:12px;min-height:360px;display:flex;flex-direction:column;gap:10px}
.bord-kop{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600;padding:2px 4px 4px}
.bord-kop span{color:var(--wit-flauw);font-variant-numeric:tabular-nums}
.bord-kaart{display:grid;gap:8px;background:rgba(255,255,255,.07);border:1px solid var(--lijn-zacht);border-radius:12px;padding:12px;font-size:.9rem;transition:border-color .3s,box-shadow .3s}
.bord-kaart b{font-weight:600;color:var(--sterk);font-size:.92rem}
.bord-kaart.net{border-color:#E0AC7B;box-shadow:0 0 0 3px rgba(224,172,123,.18);animation:plof .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes plof{from{transform:scale(.92)}}
.bord-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.75rem;color:var(--wit-flauw)}
.avatar{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:.64rem;font-weight:700;color:#0A1722;flex:0 0 auto}
.av-1{background:#87A0C1}.av-2{background:#E0AC7B}.av-3{background:rgb(159,205,175)}.av-4{background:#F4F7F9}.av-5{background:#C9B8E8}
.avatars{display:flex}.avatars .avatar{margin-left:-6px;border:2px solid #0A1722}.avatars .avatar:first-child{margin-left:0}
.melding{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-size:.88rem}

/* ===== Chat ===== */
.chat{display:grid;gap:10px;padding:16px}
.bericht{display:flex;gap:10px;align-items:flex-end;max-width:88%}
.bericht p{background:rgba(255,255,255,.08);border:1px solid var(--lijn-zacht);border-radius:14px 14px 14px 4px;padding:9px 12px;font-size:.9rem;color:var(--wit-zacht)}
.bericht.ik{margin-left:auto;flex-direction:row-reverse}
.bericht.ik p{background:rgba(224,172,123,.16);border-color:rgba(224,172,123,.3);border-radius:14px 14px 4px 14px;color:var(--sterk)}

/* ===== Live meeluisteren ===== */
.live{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:980px){.live{grid-template-columns:1fr}}
.live-scherm{border-radius:18px;overflow:hidden;background:#06111A;border:1px solid var(--lijn)}
.live-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--lijn-zacht);font-size:.82rem;color:var(--wit-flauw)}
.live-tag{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:700;letter-spacing:.1em;color:rgb(238,154,146)}
.live-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:rgb(238,154,146);animation:ping-rood 1.6s ease-out infinite}
@keyframes ping-rood{0%{box-shadow:0 0 0 0 rgba(238,154,146,.6)}100%{box-shadow:0 0 0 9px rgba(238,154,146,0)}}
.golf{display:flex;gap:3px;align-items:center;height:44px;padding:0 16px}
.golf i{flex:1 1 0;max-width:5px;border-radius:2px;background:#87A0C1;height:30%;animation:golf 1.1s ease-in-out infinite}
.golf i:nth-child(3n){animation-delay:-.3s}.golf i:nth-child(3n+1){animation-delay:-.6s}.golf i:nth-child(4n){animation-delay:-.85s;animation-duration:.9s}.golf i:nth-child(5n){animation-duration:1.4s}
@keyframes golf{0%,100%{height:18%}50%{height:95%}}
.transcript{display:grid;gap:10px;padding:14px 16px 18px;min-height:260px}
.regel{font-size:.9rem;color:var(--wit-zacht)}
.regel b{display:block;font-size:.76rem;color:var(--wit-flauw);font-weight:600;margin-bottom:2px}
.regel mark{background:rgba(238,154,146,.18);color:#F4F7F9;border-radius:4px;padding:0 3px}
.regel mark.feit{background:rgba(224,172,123,.22)}
.tips{display:grid;gap:10px}
.tip{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--lijn-zacht);display:grid;gap:6px}
.tip p{font-size:.9rem;color:var(--wit-zacht)}
.tip small{font-size:.76rem;color:var(--wit-flauw)}

/* ===== Minerva ===== */
.minerva{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.minerva{grid-template-columns:1fr}}
.woord{display:flex;align-items:center;gap:12px;padding:8px 0}
.woord + .woord{border-top:1px solid var(--lijn-zacht)}
.woord span{flex:1 1 auto;font-size:.95rem}
.woord b{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.woord i{display:block;height:4px;border-radius:2px;background:#E0AC7B;transition:width .4s ease}
.woord-balk{width:90px;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.video-tip{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0}
.video-tip + .video-tip{border-top:1px solid var(--lijn-zacht)}
.video-duim{aspect-ratio:16/9;border-radius:8px;background:linear-gradient(135deg,#1C394F,#0A1722);display:grid;place-items:center;border:1px solid var(--lijn-zacht)}
.video-duim svg{width:18px;height:18px;fill:#F4F7F9}

/* ===== Gedeeld / afgeschermd ===== */
.scheiding{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:0;align-items:stretch}
@media (max-width:900px){.scheiding{grid-template-columns:1fr}.scheiding-slot{padding:14px 0}}
.scheiding-slot{display:grid;place-items:center}
.slot-rond{width:84px;height:84px;border-radius:50%;display:grid;place-items:center}
.slot-rond svg{width:30px;height:30px;fill:none;stroke:#F4F7F9;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rechten{overflow-x:auto}
.rechten table{width:100%;min-width:640px;border-collapse:collapse;font-size:.9rem}
.rechten th,.rechten td{padding:11px 10px;border-top:1px solid var(--lijn-zacht);text-align:center;font-weight:400}
.rechten thead th{border-top:0;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);font-weight:600}
.rechten tbody th{text-align:left;color:var(--sterk)}
.rechten td{color:var(--accent);font-weight:600}
.rechten td.nee-cel{color:var(--wit-flauw);font-weight:400}
.logfeed .el-rij{transition:background .5s}
.logfeed .el-rij.net{background:rgba(224,172,123,.12)}

@media (prefers-reduced-motion:no-preference){
  .site:not(:has(.hero-prijs)) .band:not([data-theme])::after{animation:draai-band 160s linear infinite}
  @keyframes draai-band{to{transform:rotate(360deg)}}
}
@media (prefers-reduced-motion:reduce){.golf i,.live-tag::before,.caret::after{animation:none}}
.regel mark.geen{background:transparent;color:inherit;padding:0}
.woord .woord-balk{flex:0 0 90px}
.chip-aan{color:#F4F7F9;border-color:rgba(224,172,123,.6);background:rgba(224,172,123,.14)}

/* Banden laten overlopen: gloed en ring vervagen naar de randen, geen harde naden */
.site:not(:has(.hero-prijs)) .band:not([data-theme])::before{inset:-1px 0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%)}
.site:not(:has(.hero-prijs)) .band:not([data-theme])::after{display:none}
.site:not(:has(.hero-prijs)) .band-op:not([data-theme]){background:linear-gradient(to bottom,#0A1722 0,#1C394F 160px,#1C394F calc(100% - 160px),#0A1722 100%)}

/* ===== Slider: gemeenten waar het portaal al draait ===== */
.gebruik{position:relative;background:#0A1722;padding:6px 0 clamp(36px,4vw,52px)}
.gebruik-in{display:flex;align-items:center;gap:28px}
.gebruik-label{flex:0 0 auto;max-width:13ch;margin:0;font-size:.76rem;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:#E0AC7B;font-weight:600}
.gebruik-baan{flex:1 1 auto;min-width:0;overflow:hidden;padding:14px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.gebruik-spoor{display:flex;width:max-content}
.gemeente{display:inline-flex;align-items:center;gap:12px;padding:0 34px;font-size:clamp(1.25rem,2.3vw,1.8rem);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#F4F7F9;white-space:nowrap}
.gemeente svg{width:22px;height:22px;fill:none;stroke:#E0AC7B;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.gebruik-in{flex-direction:column;align-items:flex-start;gap:12px}.gebruik-label{max-width:none}.gebruik-baan{width:100%}}
@media (prefers-reduced-motion:no-preference){
  .gebruik-spoor{animation:schuif 40s linear infinite}
  .gebruik-baan:hover .gebruik-spoor{animation-play-state:paused}
  @keyframes schuif{to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){.gebruik-spoor{flex-wrap:wrap;width:auto}.gemeente[aria-hidden="true"]{display:none}}

@media (max-width:900px){.duo-tekst[style*="sticky"]{position:static !important}}

/* Video: hoofdstukken als strook onder de video, uitleg in één paneel eronder */
.video-rij{grid-template-columns:1fr;max-width:1000px;margin:0 auto;gap:14px}
.hoofdstukken{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.hfst{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px}
.hfst-titel{font-size:.92rem;line-height:1.25}
.hfst-paneel{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px 22px}
.hfst-paneel p{margin-top:8px;font-size:.95rem}
.hfst-paneel .nu{color:var(--wit-flauw)}
.hfst-paneel .wel{color:var(--sterk)}
@media (max-width:760px){.hoofdstukken{grid-template-columns:1fr 1fr}.hfst-paneel{grid-template-columns:1fr}}

/* Gemeentelogo's in de slider (wit) */
.gemeente-logo{display:inline-flex;align-items:center;padding:0 40px;height:56px;opacity:.88;transition:opacity .2s}
.gemeente-logo:hover{opacity:1}
.gemeente-logo img{display:block;width:auto}
.gebruik-spoor{align-items:center}
.gl-purmerend img{height:50px}.gl-edam img{height:52px}.gl-zaanstad img{height:30px}.gl-lelystad img{height:46px}
@media (prefers-reduced-motion:reduce){.gemeente-logo[aria-hidden="true"]{display:none}}
[data-theme="steen"] .editor-voet{background:var(--vlak-op)}
.bord-kol{min-height:250px}

/* ===== Reviewfixes ===== */
.stroom{font-family:inherit;font-size:.88rem}
.prijs small{white-space:nowrap}
.veld input[type=number]{-moz-appearance:textfield;appearance:textfield}
.veld input[type=number]::-webkit-inner-spin-button,.veld input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.veld input{outline-offset:2px}
.formulier-smal{grid-template-columns:repeat(2,minmax(0,1fr));text-align:left;margin-top:8px}
.formulier-smal .veld-breed{grid-column:1/-1}
@media (max-width:640px){.formulier-smal{grid-template-columns:1fr}}
/* Functiekaarten op de homepage */
.functies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.functies{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.functies{grid-template-columns:1fr}}
.functie{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:18px;text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border:1px solid var(--lijn-zacht);transition:transform .25s ease,border-color .25s}
.functie:hover{transform:translateY(-3px);border-color:rgba(224,172,123,.4)}
.functie-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.functie b{font-size:1.12rem;line-height:1.25;font-weight:600;color:var(--sterk)}
.functie > span:not(.functie-kop):not(.tegel-pijl){font-size:.92rem;color:var(--wit-zacht)}
.functie .tegel-pijl{margin-top:auto;padding-top:6px}
.functie:hover .tegel-pijl{transform:translateX(6px)}
.functie:hover .ss-ikoon{transform:rotate(-8deg) scale(1.1)}
/* Alles wat het portaal doet: kolommen zonder lege onderkanten */
.alles-band .drie{display:block;columns:3 300px;column-gap:18px}
.alles-band .drie > *{break-inside:avoid;margin-bottom:18px;display:block}
/* Telefoon: banner-kaarten even breed, menu met fade-hint */
@media (max-width:760px){.home-hero-kaarten{width:100%}.home-hero-kaarten .zweef{flex:1 1 0;width:auto;min-width:0}}
@media (max-width:1100px){.menu{-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent);padding-right:24px}}
@media (prefers-reduced-motion:reduce){.gebruik-spoor{justify-content:center;width:100%}.gemeente-logo{padding:10px 24px}}
/* Oproep: zwevende labels alleen waar ruimte is */
@media (max-width:1280px){.zweeftag{display:none}}
/* Minder decoratie: alleen de banner- en bronnenringen blijven draaien */
.hero-midden .ring,.video-ring{display:none}
@media (prefers-reduced-motion:no-preference){.oproep .boog circle:nth-child(2){animation:none}}

/* ===== Kop met uitklapmenu Functies ===== */
.uitklap{position:relative}
.menu .uitklap-knop{display:inline-flex;align-items:center;gap:6px}
.uitklap-pijl{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.uitklap:hover .uitklap-pijl,.uitklap:focus-within .uitklap-pijl{transform:rotate(180deg)}
.uitklap-paneel{position:absolute;top:calc(100% + 14px);left:-24px;width:580px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;border-radius:20px;background:rgba(10,23,34,.96);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px -30px rgba(0,8,16,.9);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.uitklap-paneel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.uitklap:hover .uitklap-paneel,.uitklap:focus-within .uitklap-paneel{opacity:1;visibility:visible;transform:none}
.menu .uitklap-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;color:#F4F7F9;white-space:normal}
.uitklap-item b{display:block;font-size:.95rem;font-weight:600;color:#F4F7F9}
.uitklap-item small{display:block;font-size:.8rem;line-height:1.35;color:rgba(244,247,249,.62);margin-top:2px}
.menu .uitklap-item:hover,.menu .uitklap-item.actief{background:rgba(255,255,255,.08)}
.uitklap-item:hover .ss-ikoon{transform:rotate(-8deg) scale(1.08)}
.menu-plat{display:none}
.menu a.pil{margin-left:6px}
@media (max-width:1100px){.uitklap{display:none}.menu .menu-plat{display:inline-block}.kop-tekstlink{order:9}}
@media (max-width:480px){.kop-in .merk{font-size:.8rem;letter-spacing:.06em;gap:8px}.kop-in .merk img{width:24px;height:24px}.kop-in .kop-inlog{padding:8px 14px;font-size:.84rem}}
@media (max-width:600px){.home-hero-kaarten .zweef-kop span:last-child{display:none}.home-hero-kaarten .zweef{padding:14px 14px 12px}}

/* Gebruik — één tekstregel in plaats van gemeentelogo's */
.gebruik-regel{margin:0;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);text-align:center;font-size:.8rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#E0AC7B;font-weight:600;text-wrap:balance}

/* Pakketkeuze in het proefformulier */
.pakketkeuze{grid-column:1/-1;display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.pk-label{align-self:center;font-size:.82rem;color:var(--wit-zacht);font-weight:600;padding-right:6px}
.pk{display:grid;gap:2px;text-align:left;padding:11px 14px;border-radius:12px;border:1px solid var(--glas-rand);background:rgba(255,255,255,.05);color:var(--sterk);font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.pk b{font-weight:600;font-size:.98rem}
.pk small{font-size:.76rem;color:var(--wit-flauw)}
.pk:hover{background:rgba(255,255,255,.09)}
.pk-aan{border-color:#E0AC7B;background:rgba(224,172,123,.12);box-shadow:inset 0 0 0 1px #E0AC7B}
@media (max-width:900px){.pakketkeuze{grid-template-columns:1fr 1fr 1fr}.pk-label{grid-column:1/-1}}
@media (max-width:520px){.pakketkeuze{grid-template-columns:1fr}}

/* Raadsweek — hoofdstukken zonder video (de video valt later in .rw-podium) */
.raadsweek{display:grid;gap:14px;max-width:1000px;margin:0 auto}
.rw-podium{--accent:#E0AC7B;--sterk:#F4F7F9;--wit-zacht:rgba(244,247,249,.82);--wit-flauw:rgba(244,247,249,.6);position:relative;display:flex;flex-direction:column;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,#1C394F 0,#0A1722 62%);color:var(--sterk);padding:clamp(22px,3.4vw,40px);box-shadow:0 30px 60px -30px rgba(10,23,34,.55)}
.rw-podium .video-gloed{right:-4%;top:-10%;width:46%;height:70%;opacity:.28}
.rw-doek{position:absolute;right:-6%;top:-8%;width:44%;height:116%;opacity:.16;-webkit-mask-image:linear-gradient(to left,#000 20%,transparent 95%);mask-image:linear-gradient(to left,#000 20%,transparent 95%);pointer-events:none}
.rw-doek img{width:100%;height:100%;object-fit:cover;display:block}
.rw-in{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.rw-a{animation:rw-a .55s cubic-bezier(.2,.7,.2,1) both}.rw-b{animation:rw-b .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes rw-a{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rw-b{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rw-kop{display:flex;justify-content:space-between;gap:12px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.rw-nr{color:var(--accent)}.rw-wanneer{color:var(--wit-flauw)}
.rw-titel{margin:0;font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.05;font-weight:600;letter-spacing:-.02em;max-width:18ch}
.rw-duo{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,28px)}
.rw-duo > div{padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rw-duo p{margin:10px 0 0;font-size:.98rem;line-height:1.45}
.rw-nu p{color:var(--wit-flauw)}
.rw-wel{border-color:rgba(224,172,123,.45)!important;background:linear-gradient(180deg,rgba(224,172,123,.12),rgba(255,255,255,.04))!important}
.rw-wel p{color:var(--sterk)}
.rw-voet{position:relative;display:flex;align-items:center;gap:14px;margin-top:clamp(14px,2vw,22px)}
.rw-pijl{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--sterk);cursor:pointer;transition:background .2s}
.rw-pijl:hover{background:rgba(255,255,255,.16)}
.rw-pijl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rw-spoor{flex:1 1 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rw-stuk{height:4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.rw-stuk b{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}
.rw-klaar b{width:100%}
.rw-loopt b{animation:rw-loop 8s linear both}
@keyframes rw-loop{from{width:0}to{width:100%}}
#verloop .hoofdstukken .hfst{cursor:pointer}
@media (max-width:760px){.rw-podium{aspect-ratio:auto}.rw-duo{grid-template-columns:1fr}.rw-doek{opacity:.1}}
@media (prefers-reduced-motion:reduce){.rw-a,.rw-b{animation:none}.rw-loopt b{animation:none;width:100%}}
.formulier .veld{min-width:0}.formulier .veld input{width:100%;min-width:0;box-sizing:border-box}
@media (max-width:760px){#verloop .hoofdstukken{display:none}}
.gebruik .gemeente{font-size:clamp(1.05rem,1.8vw,1.4rem);color:rgba(244,247,249,.9);padding:6px 34px}
.gebruik-label{max-width:16ch}
/* Kwartaalbord: vaste hoogte, zodat de pagina eronder niet meeverspringt als kaarten verschuiven */
.hero-bord .bord-kol{height:486px;min-height:0;overflow:hidden}
@media (max-width:760px){.hero-bord .bord-kol{height:556px}}
/* Logo's van fracties die het al gebruiken */
.fractie-logo{display:inline-flex;align-items:center;justify-content:center;padding:0 44px;height:64px;opacity:.9;transition:opacity .2s}
.fractie-logo:hover{opacity:1}
.fractie-logo img{display:block;width:auto}
.fl-aov img{height:56px}.fl-vvdp img{height:50px}.fl-pb21 img{height:54px}.fl-vvde img{height:54px}
@media (max-width:760px){.gebruik-label{max-width:none}}
@media (max-width:760px){.fractie-logo{padding:0 28px;height:52px}.fl-aov img{height:40px}.fl-vvdp img{height:36px}.fl-pb21 img{height:40px}.fl-vvde img{height:38px}}
@media (prefers-reduced-motion:reduce){.fractie-logo[aria-hidden="true"]{display:none}}

/* ===== Naad: van site naar portaal (inloggen, uitnodiging, randpagina's) ===== */
.naad{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#0A1722;color:#F4F7F9;font-family:'Familjen Grotesk',-apple-system,sans-serif}
.naad-doek{position:relative;overflow:hidden;min-height:100%}
.naad-doek > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 38%}
.naad-doek::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,23,34,.9) 0,rgba(10,23,34,.2) 58%,rgba(10,23,34,.5) 100%)}
.naad-doek-in{position:relative;z-index:1;height:100%;min-height:inherit;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:30px clamp(22px,4vw,56px) clamp(28px,4vw,52px)}
.naad-merk,.site a.naad-merk{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1.06rem;color:#F4F7F9;text-decoration:none}
.naad-merk img{width:30px;height:30px;display:block}
.naad-paneel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:96px clamp(20px,5vw,72px) 56px;position:relative;background:radial-gradient(90% 70% at 100% 0%,#1C394F 0,#0A1722 70%)}
.naad-boven{position:absolute;top:30px;right:clamp(20px,5vw,72px);display:flex;gap:22px;font-size:.92rem}
.naad-boven a{color:rgba(244,247,249,.75);text-decoration:none}
.naad-boven a:hover{color:#F4F7F9;text-decoration:underline;text-underline-offset:3px}
.naad-glas{background:rgba(10,23,34,.42);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:22px 24px;max-width:440px;box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.naad-oog{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#E0AC7B;margin:0 0 12px}
.naad-kaart{background:#fff;color:#15212D;border-radius:22px;padding:clamp(24px,3vw,36px);width:100%;max-width:440px;box-sizing:border-box;box-shadow:0 30px 70px -34px rgba(0,0,0,.7)}
.naad-kaart.breed{max-width:520px}
.naad-kaart h1,.naad-kaart h2{margin:0 0 6px;font-size:1.5rem;line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#15212D}
.naad-kaart .uitleg{margin:0 0 22px;color:#4A5A68;font-size:.97rem}
.nv{display:grid;gap:7px;margin-bottom:16px;min-width:0}
.nv label{font-size:.9rem;font-weight:600;color:#15212D;display:flex;justify-content:space-between;gap:10px}
.nv label a,.n-link,.site .n-link{font-weight:500;color:#255274;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font:inherit;font-size:.9rem;cursor:pointer}
.nv input{font:inherit;font-size:1rem;color:#15212D;background:#F4F7F9;border:1px solid #D3DCE4;border-radius:12px;padding:12px 14px;min-height:48px;width:100%;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background .2s}
.nv input::placeholder{color:#7D8B97}
.nv input:focus{outline:none;border-color:#45759A;background:#fff;box-shadow:0 0 0 3px rgba(69,117,154,.22)}
.nv .vast{min-height:48px;display:flex;align-items:center;padding:0 14px;border-radius:12px;background:#EEF2F5;color:#4A5A68;font-weight:500}
.nv-hulp{font-size:.84rem;color:#6B7B89;margin:0}
.nk,.site .nk{appearance:none;font:inherit;font-weight:600;font-size:1rem;display:flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;background:#1C394F;color:#F4F7F9;text-decoration:none;transition:background .2s,transform .2s}
.nk:hover{background:#255274;transform:translateY(-1px)}
.nk:focus-visible,.nk-twee:focus-visible,.n-link:focus-visible{outline:3px solid #E0AC7B;outline-offset:2px}
.nk svg,.nk-twee svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nk-twee,.site .nk-twee{appearance:none;font:inherit;font-weight:600;font-size:1rem;display:flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;cursor:pointer;background:#fff;color:#15212D;border:1px solid #D3DCE4;text-decoration:none;transition:border-color .2s,background .2s}
.nk-twee:hover{border-color:#45759A;background:#F4F7F9}
.n-scheid{display:flex;align-items:center;gap:12px;color:#6B7B89;font-size:.84rem;margin:18px 0}
.n-scheid::before,.n-scheid::after{content:"";flex:1;height:1px;background:#DFE6EC}
.n-fout{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#F7E5E0;color:#8A3B2C;font-size:.92rem}
.n-voet{margin:20px 0 0;padding-top:18px;border-top:1px solid #DFE6EC;font-size:.9rem;color:#4A5A68;display:grid;gap:6px}
.n-stap{animation:n-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes n-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.n-rond{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#E5EDF5;color:#255274;margin-bottom:18px}
.n-rond svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.n-code input{text-align:center;font-size:1.6rem;letter-spacing:.5em;font-weight:600;padding-left:calc(14px + .5em);font-variant-numeric:tabular-nums}
.n-balk{height:6px;border-radius:3px;background:#E5EDF5;overflow:hidden;margin:6px 0 18px}
.n-balk span{display:block;height:100%;background:#45759A;border-radius:3px;transition:width .2s linear}
.n-stapper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 24px}
.n-stapper span{display:block;font-size:.78rem;color:#6B7B89}
.n-stapper span::before{content:"";display:block;height:4px;border-radius:2px;background:#DFE6EC;margin-bottom:8px;transition:background .3s}
.n-stapper .gedaan::before,.n-stapper .nu::before{background:#1C394F}
.n-stapper .nu{color:#15212D;font-weight:600}
.n-sterk{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:2px}
.n-sterk i{height:4px;border-radius:2px;background:#DFE6EC;transition:background .25s}
.n-sterk.s1 i:nth-child(-n+1){background:#C4705F}
.n-sterk.s2 i:nth-child(-n+2){background:#B8815E}
.n-sterk.s3 i:nth-child(-n+3){background:#6DA886}
.n-sterk.s4 i{background:#3F7F5A}
.n-schakel{appearance:none;font:inherit;color:inherit;text-align:left;width:100%;background:#F4F7F9;border:1px solid #DFE6EC;border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:14px;align-items:center;cursor:pointer;margin-bottom:16px}
.n-schakel b{display:block;font-size:.95rem}
.n-schakel small{display:block;color:#6B7B89;font-size:.85rem}
.n-schakel .knopje{width:44px;height:26px;border-radius:13px;background:#C9D3DC;position:relative;transition:background .2s}
.n-schakel .knopje::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.n-schakel.aan .knopje{background:#1C394F}
.n-schakel.aan .knopje::after{transform:translateX(18px)}
.n-nacht{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.n-nacht li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:9px 0;color:rgba(244,247,249,.55);transition:color .4s}
.n-nacht li i{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(244,247,249,.4);margin:6px 0 0 5px;transition:all .4s}
.n-nacht li.aan{color:#F4F7F9}
.n-nacht li.aan i{background:#E0AC7B;border-color:#E0AC7B;box-shadow:0 0 0 5px rgba(224,172,123,.18)}
.n-nacht li.aan .lijntje{display:block}
.n-nacht .lijntje{display:none;height:2px;border-radius:1px;background:rgba(224,172,123,.25);margin-top:8px;overflow:hidden}
.n-nacht .lijntje::after{content:"";display:block;height:100%;width:100%;background:#E0AC7B;transform-origin:left;animation:n-lijn 3.2s linear both}
@keyframes n-lijn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:900px){.naad{grid-template-columns:1fr}.naad-doek{min-height:420px}.naad-paneel{padding-top:40px}.naad-boven{position:static;margin-bottom:24px;align-self:flex-end}}
@media (prefers-reduced-motion:reduce){.n-stap,.mini-rij,.n-nacht .lijntje::after{animation:none}}

/* Mini-portaal: een voorproefje in de app-stijl */
.mini-app{background:#EFF2F6;border:1px solid #DFE6EC;border-radius:16px;padding:12px;display:grid;gap:8px;color:#15212D;font-variant-numeric:tabular-nums;margin:4px 0 22px}
.mini-kop{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 4px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#45759A}
.mini-rij{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #DFE6EC;border-radius:12px;padding:9px 12px;animation:n-in .5s cubic-bezier(.2,.7,.2,1) both}
.mini-rij:nth-child(3){animation-delay:.12s}.mini-rij:nth-child(4){animation-delay:.24s}.mini-rij:nth-child(5){animation-delay:.36s}
.mini-dt{width:40px;height:42px;flex:none;border-radius:10px;background:#F4F7F9;border:1px solid #DFE6EC;display:grid;align-content:center;justify-items:center;gap:3px;line-height:1}
.mini-dt b{font-size:15px;font-weight:700}
.mini-dt small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#6B7B89}
.mini-t{flex:1;min-width:0}
.mini-t b{display:block;font-size:.88rem;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-t span{display:block;font-size:.78rem;color:#6B7B89;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}
.mini-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mc-voor{background:#E4F0E8;color:#3F7F5A}.mc-let{background:#F5EADB;color:#8A5E24}.mc-neutraal{background:#E8EEF3;color:#4A5A68}.mc-tegen{background:#F7E5E0;color:#A94C38}

/* Randpagina's */
.rand{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(110% 110% at 85% 0%,#1C394F 0,#0A1722 62%);color:#F4F7F9;font-family:'Familjen Grotesk',-apple-system,sans-serif;display:flex;flex-direction:column}
.rand-doek{position:absolute;right:-6%;top:0;width:52%;height:100%;opacity:.26;-webkit-mask-image:linear-gradient(to left,#000 30%,transparent 95%);mask-image:linear-gradient(to left,#000 30%,transparent 95%);pointer-events:none}
.rand-doek img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block}
.rand-kop{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px clamp(20px,5vw,56px)}
.rand-kop nav{display:flex;gap:22px;font-size:.92rem}
.rand-kop nav a{color:rgba(244,247,249,.75);text-decoration:none}
.rand-kop nav a:hover{color:#F4F7F9;text-decoration:underline;text-underline-offset:3px}
.rand-in{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;max-width:1160px;width:100%;margin:0 auto;box-sizing:border-box;padding:24px clamp(20px,5vw,40px) 72px}
.rand-in .inscr-xl{font-size:clamp(2.4rem,5.6vw,4.8rem);margin:16px 0 20px}
.rand-in .lede{margin:0 0 28px;max-width:52ch;color:rgba(244,247,249,.82)}
.rand-knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rand-cijfer{font-size:clamp(7rem,16vw,13rem);line-height:.8;font-weight:600;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(224,172,123,.7);font-variant-numeric:tabular-nums;text-align:center;user-select:none}
.rand-lijst{list-style:none;margin:0;padding:0;display:grid}
.rand-lijst li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.95rem}
.rand-lijst li:first-child{border-top:0}
.rs{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.rs::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.rs-voor{background:rgba(109,168,134,.18);color:#9ED0B2}.rs-let{background:rgba(224,172,123,.18);color:#EBC198}
.rand-bezig{height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:16px}
.rand-bezig::after{content:"";display:block;height:100%;width:34%;background:#E0AC7B;border-radius:2px;animation:rand-bezig 2.4s ease-in-out infinite}
@keyframes rand-bezig{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.rand-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.rand-chips a{font-size:.88rem;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#F4F7F9;text-decoration:none;transition:border-color .2s,background .2s}
.rand-chips a:hover{border-color:#E0AC7B;background:rgba(224,172,123,.08)}
.fk{display:grid;gap:10px}
.fk-kaart{appearance:none;font:inherit;color:#F4F7F9;text-align:left;cursor:pointer;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:background .2s,border-color .2s,transform .2s}
.fk-kaart:hover{background:rgba(255,255,255,.1);border-color:rgba(224,172,123,.5);transform:translateY(-1px)}
.fk-kaart.gekozen{border-color:#E0AC7B;background:rgba(224,172,123,.12)}
.fk-kaart .ini{width:46px;height:46px;border-radius:12px;background:#F4F7F9;color:#1C394F;display:grid;place-items:center;font-weight:700;font-size:.95rem}
.fk-kaart b{display:block;font-size:1.02rem}
.fk-kaart small{display:block;color:rgba(244,247,249,.66);font-size:.86rem}
.fk-onthoud{appearance:none;font:inherit;color:rgba(244,247,249,.8);background:none;border:0;padding:0;cursor:pointer;display:flex;gap:10px;align-items:center;margin-top:14px;font-size:.9rem}
.fk-onthoud .vakje{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(244,247,249,.5);display:grid;place-items:center}
.fk-onthoud.aan .vakje{background:#E0AC7B;border-color:#E0AC7B}
.fk-onthoud .vakje svg{width:12px;height:12px;fill:none;stroke:#0A1722;stroke-width:3;opacity:0}
.fk-onthoud.aan .vakje svg{opacity:1}
@media (max-width:860px){.rand-in{grid-template-columns:1fr}.rand-cijfer{text-align:left}.rand-doek{width:100%;opacity:.12}}
@media (prefers-reduced-motion:reduce){.rand-bezig::after{animation:none;width:60%}}
.naad-kaart b,.naad-kaart strong,.mini-app b,.nv b{color:#15212D}
.vraag-kaart b,.vraag-kaart strong{color:#15212D}
.cat b{color:#261F17}

/* ===== Telefoon: kop met menuknop ===== */
.kop-wrap{position:relative}
.kop-knop,.kop-mob{display:none}
@media (max-width:860px){
  .kop-in{flex-wrap:nowrap;padding:7px 7px 7px 16px;border-radius:999px;gap:10px}
  .kop-in .merk{margin-right:auto;padding-left:0}
  .kop-in .menu{display:none}
  .kop-in .kop-inlog{display:none}
  .kop-knop{display:grid;place-content:center;gap:4px;flex:none;width:42px;height:42px;padding:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);transition:background .2s}
  .kop-knop span{display:block;width:16px;height:1.8px;border-radius:2px;background:#F4F7F9;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s}
  .kop-knop.open{background:rgba(255,255,255,.18)}
  .kop-knop.open span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
  .kop-knop.open span:nth-child(2){opacity:0;transform:scaleX(.3)}
  .kop-knop.open span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
  .kop-knop:focus-visible{outline:3px solid #E0AC7B;outline-offset:2px}
  .kop-mob{display:block;position:absolute;left:clamp(12px,3vw,24px);right:clamp(12px,3vw,24px);top:calc(100% + 10px);z-index:60;border-radius:24px;background:rgba(8,19,29,.94);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -30px rgba(0,6,12,.95);max-height:min(calc(100dvh - 100px),720px);overflow:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s}
  .kop-mob.open{opacity:1;visibility:visible;transform:none}
  .km-in{padding:8px 12px 14px;display:grid;gap:10px}
  .km-label{padding:4px 10px 0;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#E0AC7B}
  .km-functies-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1)}
  .km-functies-wrap.open{grid-template-rows:1fr}
  .km-functies-wrap > .km-functies{overflow:hidden;min-height:0}
  .km-functies{display:grid;gap:2px}
  .km-uitklap{width:100%;appearance:none;background:none;border:0;font:inherit;cursor:pointer;text-align:left}
  .km-uitklap svg{transition:transform .25s ease}
  .km-uitklap.open svg{transform:rotate(180deg)}
  .km-uitklap.actief{color:#E0AC7B}
  .km-functie{padding:9px 10px}
  .km-functies-wrap .km-functies{grid-template-columns:1fr 1fr;gap:4px;padding:2px 0 6px}
  .km-functies-wrap .km-functie{gap:10px;padding:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
  .km-functies-wrap .km-functie small{display:none}
  .km-functies-wrap .km-functie b{font-size:.92rem}
  .km-functie .ss-ikoon{width:34px;height:34px}
  .km-functie{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;text-decoration:none;color:#F4F7F9;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),background .2s}
  .km-functies-wrap.open .km-functie{opacity:1;transform:none;transition-delay:calc(var(--i) * 30ms + 40ms)}
  .km-functie.actief,.km-functie:active{background:rgba(255,255,255,.08)}
  .km-functie .ss-ikoon{flex:none}
  .km-functie b{display:block;font-size:.98rem;font-weight:600;color:#F4F7F9}
  .km-functie small{display:block;font-size:.8rem;line-height:1.35;color:rgba(244,247,249,.62);margin-top:1px}
  .km-links{display:grid;border-top:1px solid rgba(255,255,255,.1);padding-top:6px}
  .km-in > .km-uitklap{margin-bottom:-6px}
  .km-link{display:flex;align-items:center;justify-content:space-between;padding:13px 10px;color:#F4F7F9;text-decoration:none;font-size:1rem;font-weight:500;border-radius:12px}
  .km-link.actief{color:#E0AC7B}
  .km-link svg{width:16px;height:16px;fill:none;stroke:rgba(244,247,249,.5);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .km-acties{display:grid;gap:8px;padding:2px}
  .km-acties .pil{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.kop-mob,.km-functie,.kop-knop span{transition:none}}

/* ===== Telefoon: voet ===== */
@media (max-width:560px){
  .voet-rij{grid-template-columns:minmax(0,1fr) auto;gap:28px 24px}
  .voet-rij > :first-child{grid-column:1/-1;max-width:none !important}
  .voet-rij > :last-child{grid-column:1/-1}
  .voet-rij > :last-child ul{grid-template-columns:1fr 1fr;column-gap:24px}
  .voet ul a[href^="mailto"]{overflow-wrap:anywhere}
  .voet-onder{flex-direction:column;gap:6px;margin-top:36px}
}

/* ===== Telefoon: korte kolomkoppen in tabellen ===== */
.rl-kort{display:none}
@media (max-width:600px){
  .rl-lang{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rl-kort{display:inline}
  .site .rechten table{min-width:0;table-layout:fixed;font-size:.86rem}
  .site .rechten thead th:first-child,.site .rechten tbody th{width:46%}
  .site .rechten th,.site .rechten td{padding:10px 4px}
  .site .rechten tbody th{padding-left:12px}
  .site .rechten thead th{font-size:.62rem;letter-spacing:.04em}
  .site #vergelijk .tabel{padding:4px 8px 12px !important}
  .site #vergelijk .tabel table{min-width:0;table-layout:fixed;font-size:.86rem}
  .site #vergelijk .tabel thead th:first-child{width:52%}
  .site #vergelijk .tabel th,.site #vergelijk .tabel td{padding:10px 4px}
  .site #vergelijk .tabel thead th{font-size:.62rem;letter-spacing:.04em}
  .site #vergelijk .tabel td{width:auto}
}

/* ===== Telefoon: getoonde schermen schalen in plaats van samenpersen ===== */
@media (max-width:640px){
  .site .scherm-groot .scherm{width:700px;zoom:.5;aspect-ratio:auto}
  .site .scherm-groot{max-width:none;display:flex;justify-content:center}
  .site .scherm-groot .zweeftag{display:none}
}
@media (min-width:400px) and (max-width:640px){.site .scherm-groot .scherm{zoom:.54}}

/* ===== Telefoon: kanaalster op Delen blijft een ster ===== */
@media (max-width:760px){
  .site .sb{display:block;width:560px;height:580px;flex:none;max-width:none;zoom:.6;margin-inline:auto}
  .site .sb-node{position:absolute !important;width:96px}
  .site .sb-lijnen{display:block}
  .site .sb-ster{display:block}
  .site .sb-naam{font-size:1rem}
}
@media (max-width:374px){.site .sb{zoom:.54}}

/* ===== Telefoon: bord op Samenwerken veegt per kolom ===== */
@media (max-width:760px){
  .site .hero-bord .bord{grid-template-columns:repeat(4,82%);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
  .site .hero-bord .bord::-webkit-scrollbar{display:none}
  .site .hero-bord .bord-kol{height:470px;scroll-snap-align:start}
  .site .hero-bord .bord-schil{padding:12px}
  .site .hero-bord .bord-balk .melding{width:100%}
}

/* ===== Telefoon: Minerva-kop onder elkaar ===== */
@media (max-width:600px){
  .site .minerva-kop{grid-template-columns:1fr;gap:18px}
  .site .minerva-teken{width:80px;height:80px}
}

/* ===== Telefoon: inloggen en uitnodiging, formulier eerst in beeld ===== */
@media (max-width:600px){
  .site.naad{min-height:0}
  .site .naad-doek{min-height:0}
  .site .naad-doek > img{object-position:60% 30%}
  .site .naad-doek::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(to bottom,transparent,#0A1722);pointer-events:none}
  .site .naad-doek-in{padding:18px 18px 20px;gap:16px}
  .site .naad-glas:has(.n-nacht){display:none}
  .site .naad-glas{padding:14px 16px;border-radius:16px;max-width:none}
  .site .naad-glas .vs,.site .naad-glas .uit-noot{display:none}
  .site .naad-paneel{padding:6px 14px 40px}
  .site .naad-boven{align-self:stretch;justify-content:flex-end;margin-bottom:14px;font-size:.88rem}
  .site .naad-kaart{padding:22px 20px;border-radius:20px}
}

/* ===== Telefoon: juridisch, inhoud als veegbalk ===== */
@media (max-width:600px){
  .site .inhoud-nav{position:sticky;top:78px;z-index:5;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px;border-radius:999px;margin-inline:-6px;box-shadow:0 10px 24px -18px rgba(38,31,23,.5)}
  .site .inhoud-nav::-webkit-scrollbar{display:none}
  .site .inhoud-nav .romein{display:none}
  .site .inhoud-nav a{display:inline-flex;flex:none;gap:6px;white-space:nowrap;padding:8px 12px;border-radius:999px;font-size:.84rem;background:#F2EFEB}
  .site .art{scroll-margin-top:140px}
}

/* ===== Telefoon: over ons ===== */
@media (max-width:600px){.site .portret-foto{aspect-ratio:4/3}}
@media (max-width:600px){.site .minerva-teken{margin:8px 0 0 8px}}
@media (max-width:760px){.site .hero-bord .bord-kol{height:420px}}
@media (max-width:600px){.site .naad-glas .uit-van{border-bottom:0;margin-bottom:0;padding-bottom:0}}

/* ===== Telefoon: stroomschema met pijlen in en uit het portaal ===== */
.ss-pijl{display:none}
@media (max-width:960px){
  .ss-mid{height:380px;margin:-6px 0 18px}
  .ss-pijl{display:block;position:absolute;left:50%;width:2px;height:52px;margin-left:-1px;z-index:2;background:repeating-linear-gradient(to bottom,rgba(224,172,123,.75) 0 3px,transparent 3px 9px);background-size:2px 9px;animation:ss-druppel .9s linear infinite}
  .ss-pijl::after{content:"";position:absolute;left:50%;bottom:-2px;width:9px;height:9px;margin-left:-5px;border-right:2px solid #E0AC7B;border-bottom:2px solid #E0AC7B;transform:rotate(45deg)}
  .ss-pijl-in{top:-8px}
  .ss-pijl-uit{bottom:-12px}
}
@keyframes ss-druppel{to{background-position:0 9px}}
@media (prefers-reduced-motion:reduce){.ss-pijl{animation:none}}

/* ===== Telefoon: beeld boven de titel (Delen, 404) ===== */
@media (max-width:760px){
  .site .sb{order:-1;margin-top:-20px;margin-bottom:-12px}
}
@media (max-width:860px){
  .site .rand-cijfer{order:-1;font-size:clamp(6rem,30vw,8rem);margin:8px 0 -8px}
}

/* Afwijking van het ontwerp (18 oktober 2026): het paneel van 'Functies' hing links uitgelijnd
   aan de knop en stak op een scherm van 1440 breed 29px rechts buiten beeld — open was
   'Samenwerken' afgekapt, en dicht kon de hele pagina een stukje opzij scrollen. Rechts
   uitgelijnd aan de knop past het op elke breedte waarop dit menu verschijnt. */
.uitklap-paneel{left:auto;right:-24px}

/* ===== Kop op een lichte band (19 oktober 2026, op verzoek van de eigenaar) =====
   Zoals op de oude site: boven een lichte band keert het glas om — lichte vulling, donkere tekst,
   donker logo — en boven blauw weer terug. site.js (kopOpLicht) zet .op-licht op .kop-plek. De
   kleuren zijn die van de steenband zelf (--steen-*), zodat het past bij wat eronder ligt.
   Het uitklappaneel van Functies blijft donker: dat heeft zijn eigen vlak. */
.kop-in,.kop-in .merk img,.menu a,.kop-knop,.kop-knop span{transition:background .25s,color .25s,border-color .25s,filter .25s}
.kop-plek.op-licht .kop-in{background:rgba(255,255,255,.55);border-color:rgba(38,31,23,.14);box-shadow:var(--schaduw-kop-licht);color:var(--steen-inkt)}
.kop-plek.op-licht .kop-in .merk{color:var(--steen-inkt)}
.kop-plek.op-licht .kop-in .merk img{filter:brightness(0) saturate(100%) opacity(.86)}
.kop-plek.op-licht .menu > a,.kop-plek.op-licht .menu .uitklap-knop{color:var(--steen-zacht)}
.kop-plek.op-licht .menu > a:hover,.kop-plek.op-licht .menu .uitklap-knop:hover,.kop-plek.op-licht .menu > a.actief,.kop-plek.op-licht .menu .uitklap-knop.actief{color:var(--steen-inkt);background:rgba(38,31,23,.07)}
.kop-plek.op-licht .kop-in a.pil-wit{background:var(--diep);color:var(--steen-vlak)}
.kop-plek.op-licht .kop-in a.pil-wit:hover{background:#06111A;color:var(--steen-vlak)}
.kop-plek.op-licht .kop-knop{background:rgba(38,31,23,.06);border-color:rgba(38,31,23,.18)}
.kop-plek.op-licht .kop-knop span{background:var(--steen-inkt)}
@media (prefers-reduced-motion:reduce){.kop-in,.kop-in .merk img,.menu a,.kop-knop,.kop-knop span{transition:none}}

/* Wat verborgen is, is verborgen (19 oktober 2026). Het attribuut hidden verloor het van elke
   klasse met een eigen display: het lege zoekvak op /help/ (display:grid) stond als lege balk
   onder het zoekveld, en na het aanmelden bleef de rij met stappen staan. */
[hidden]{display:none !important}

/* Uit home-blok-zo-werkt-het.html (22 oktober 2026): vervangt het schema #bronnen. */
/* ===== Home: portaal verzamelt, AI denkt mee ===== */
.pb{display:grid;grid-template-columns:270px 64px minmax(0,1fr) 72px minmax(0,1fr);grid-template-areas:". . ai ai ai" ". . op . neer" "b in v . k";column-gap:0;margin-top:40px;position:relative}
.pb-bronnen{grid-area:b}
.pb-pijl-in{grid-area:in}
.pb-verzamel{grid-area:v}
.pb-klaar{grid-area:k}
.pb-ai{grid-area:ai;justify-self:center;width:min(560px,100%)}
.pb-op{grid-area:op}
.pb-neer{grid-area:neer}
.pb-frame{grid-row:3;grid-column:3 / 6;margin:-14px -14px;border-radius:24px;border:1px dashed rgba(224,172,123,.35);background:rgba(255,255,255,.025);position:relative;z-index:0}
.pb-frame span{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);padding:2px 12px;border-radius:999px;background:#0E2131;border:1px solid rgba(224,172,123,.35);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#E0AC7B;white-space:nowrap}
.pb-verzamel,.pb-klaar{position:relative;z-index:1}
.pb-kop{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--wit-flauw)}
.pb-kop i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;letter-spacing:0;background:#E0AC7B;color:#0A1722}
.pb-lijst{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pb-lijst li,.pb-lijst li a{display:flex;gap:11px;align-items:center}
.pb-lijst li{padding:8px 10px;border-radius:12px;background:var(--vlak);border:1px solid var(--lijn-zacht)}
.pb-uit li{padding:0}
.site .pb-uit li a{width:100%;padding:8px 10px;border-radius:12px;text-decoration:none;color:inherit;transition:background .2s}
.site .pb-uit li a:hover{background:var(--vlak-op)}
.pb-lijst .ss-ikoon{width:34px;height:34px;border-radius:9px}
.pb-lijst .ss-ikoon svg{width:17px;height:17px}
.pb-t{min-width:0}
.pb-t b{display:block;font-size:.9rem;font-weight:600;color:var(--sterk);line-height:1.25}
.pb-t span{display:block;font-size:.76rem;color:var(--wit-flauw);line-height:1.35}
.pb-t em{font-style:normal;color:var(--accent);font-weight:600}
.pb-pijl-in{display:grid;align-content:center;justify-items:center;gap:6px;padding-top:30px}
.pb-pijl-in svg{width:52px;height:24px;fill:none;stroke:#E0AC7B;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pb-pijl-in span,.pb-op span,.pb-neer span{font-size:.72rem;color:#E0AC7B;font-weight:600;white-space:nowrap}
.pb-stroom{stroke-dasharray:3 6;animation:ss-stroom 1.4s linear infinite}
.pb-verzamel{padding:4px 2px}
.pb-merk{display:flex;gap:14px;align-items:center;padding:16px;border-radius:16px;background:linear-gradient(135deg,#1C394F,#132A3B);border:1px solid rgba(255,255,255,.12);margin-bottom:12px}
.pb-merk img{width:44px;height:44px;flex:none}
.pb-merk b{display:block;font-size:1.05rem;color:#F4F7F9}
.pb-merk span span{display:block;font-size:.84rem;color:rgba(244,247,249,.7)}
.pb-feiten{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pb-feiten li{position:relative;padding-left:22px;font-size:.92rem;color:var(--wit-zacht)}
.pb-feiten li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:5px;border-left:1.7px solid #E0AC7B;border-bottom:1.7px solid #E0AC7B;transform:rotate(-45deg)}
.pb-op,.pb-neer{display:flex;align-items:center;justify-content:center;gap:8px;height:84px}
.pb-op svg,.pb-neer svg{width:24px;height:70px;fill:none;stroke:#E0AC7B;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pb-ai-in{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 16px;align-items:center;padding:18px 20px;border-radius:18px;background:#F5F3EF;color:#1B2733;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pb-ai-in p{margin:0;font-size:.95rem;color:#3A4651;line-height:1.5}
.pb-ai-in .chips{grid-column:2}
.pb-ai-in .chip{background:#E8EEF3;border-color:#D7E0E8;color:#255274;font-size:.8rem;padding:4px 12px}
.pb-ai .pb-kop{justify-content:center}
.pb-ikoon{grid-row:1 / span 2;width:52px;height:52px;border-radius:14px;background:#255274;display:grid;place-items:center}
.pb-ikoon svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1060px){
  .pb{display:flex;flex-direction:column;gap:0}
  .pb-frame{display:none}
  .pb-bronnen{order:1}.pb-pijl-in{order:2}.pb-verzamel{order:3}.pb-op{order:4}.pb-ai{order:5}.pb-neer{order:6}.pb-klaar{order:7}
  .pb-pijl-in{padding:14px 0;flex-direction:row;display:flex;justify-content:center;gap:8px}
  .pb-pijl-in svg{transform:rotate(90deg);width:40px}
  .pb-op svg{transform:rotate(180deg)}
  .pb-op,.pb-neer{height:76px}
  .pb-ai{width:100%}
  .pb-ai .pb-kop{justify-content:flex-start}
  .pb-verzamel,.pb-klaar{padding:16px;border-radius:18px;border:1px dashed rgba(224,172,123,.35);background:rgba(255,255,255,.025)}
  .pb-klaar .pb-kop::after,.pb-verzamel .pb-kop::after{content:"in het portaal";margin-left:auto;font-size:.66rem;letter-spacing:.12em;color:#E0AC7B}
}
@media (max-width:520px){.pb-ai-in{grid-template-columns:44px minmax(0,1fr)}.pb-ikoon{width:44px;height:44px}.pb-ai-in .chips{grid-column:1 / -1}}
@media (prefers-reduced-motion:reduce){.pb-stroom{animation:none}}
.pb{margin-bottom:36px}
.pb-verzamel{display:grid;align-content:start}
.pb-laden{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;padding:14px;border-radius:14px;background:rgba(6,14,22,.35);border:1px solid var(--lijn-zacht)}
.pb-laden span{font-size:.78rem;padding:4px 10px;border-radius:999px;background:rgba(224,172,123,.1);color:#E9C9A4;border:1px solid rgba(224,172,123,.22)}

/* Home-schema als tijdlijn van links naar rechts (computer) */
@media (min-width:1061px){
  .pb{grid-template-columns:minmax(0,1.12fr) 54px minmax(0,1fr) 54px minmax(0,.86fr) 54px minmax(0,1.12fr);grid-template-areas:"b in v op ai neer k";align-items:start}
  .pb-frame{display:none}
  .pb-verzamel,.pb-klaar{position:relative;padding:14px 14px 22px;border-radius:18px;border:1px dashed rgba(224,172,123,.4);background:rgba(255,255,255,.03)}
  .pb-verzamel::after,.pb-klaar::after{content:"in het portaal";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);padding:2px 12px;border-radius:999px;background:#0E2131;border:1px solid rgba(224,172,123,.4);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#E0AC7B;white-space:nowrap}
  .pb-pijl-in,.pb-op,.pb-neer{align-self:center;height:auto;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px}
  .pb-pijl-in svg{width:44px}
  .pb-op svg{transform:rotate(90deg);width:24px;height:44px}
  .pb-neer svg{transform:rotate(-90deg);width:24px;height:44px}
  .pb-ai{align-self:center;width:auto}
  .pb-ai .pb-kop{justify-content:flex-start}
  .pb-ai-in{grid-template-columns:1fr;gap:12px;padding:18px}
  .pb-ikoon{grid-row:auto}
  .pb-ai-in .chips{grid-column:auto}
  .pb-merk{padding:12px;gap:10px}
  .pb-merk img{width:34px;height:34px}
  .pb-merk b{font-size:.95rem}
  .pb-merk span span{font-size:.78rem}
  .pb-feiten li{font-size:.84rem}
  .pb-laden{margin-top:14px;padding:10px}
  .pb-laden span{font-size:.72rem;padding:3px 8px}
  .pb-t span{font-size:.74rem}
}
@media (min-width:1061px){
  .pb{width:min(1320px,calc(100vw - 64px));margin-left:50%;translate:-50% 0;grid-template-columns:minmax(0,1.12fr) 70px minmax(0,1fr) 70px minmax(0,.86fr) 70px minmax(0,1.12fr)}
  .pb-bronnen{padding-top:15px}
  .pb-verzamel .pb-laden{display:none}
  .pb-pijl-in span,.pb-op span,.pb-neer span{font-size:.7rem}
}