:root{--geel:#fec700;--zwart:#000;--ink:#050703;--wit:#fff;--grijs:#f3f3f1;--grijs2:#e4e4e0;--blauw:#036bc5;--tekst:#1a1a1a;--r:20px;
--fk:'Montserrat',system-ui,sans-serif;--fb:'Roboto',system-ui,sans-serif;--tab:68px}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:var(--fb);color:var(--tekst);background:var(--grijs);max-width:900px;margin:0 auto;min-height:100vh;padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
h1,h2,h3{font-family:var(--fk);font-weight:800;color:var(--ink);margin:0 0 .4em;line-height:1.1}
h1{font-size:2rem;font-weight:900}h2{font-size:1.35rem}h3{font-size:1.02rem;font-weight:700}
a{color:var(--blauw)}button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blauw);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#000;color:#fff;padding:8px;z-index:99}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--geel)}
.logo-btn{background:none;border:0;padding:0}.logo-btn img{height:38px;display:block}
.role-pill{margin-left:auto;background:#000;color:var(--geel);font:800 .75rem var(--fk);text-transform:uppercase;letter-spacing:.06em;padding:6px 12px;border-radius:99px}
.icon-btn{background:#000;color:#fff;border:0;width:36px;height:36px;border-radius:50%;font-size:1rem}
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:900px;height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#000;display:grid;grid-template-columns:repeat(4,1fr);z-index:20}
.tabbar button{background:none;border:0;color:#bbb;font:700 .72rem var(--fk);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tabbar button span{font-size:1.3rem;line-height:1}
.tabbar button[aria-current=page]{color:var(--geel)}
.tabbar button[aria-current=page] span{background:var(--geel);color:#000;border-radius:12px;padding:2px 14px}
/* hero met brushstroke */
.hero{background:var(--geel);padding:22px 20px 46px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-2px;height:34px;background:var(--grijs);clip-path:polygon(0 60%,8% 40%,20% 55%,33% 30%,47% 52%,60% 28%,74% 50%,88% 32%,100% 48%,100% 100%,0 100%)}
.hero .kicker{font:800 .78rem var(--fk);text-transform:uppercase;letter-spacing:.1em;color:#000;opacity:.75}
.hero p{margin:.2em 0 0;font-size:1rem;max-width:34ch}
.brush{display:inline;background:linear-gradient(transparent 55%,var(--geel) 55%,var(--geel) 92%,transparent 92%);padding:0 .15em}
.brush-b{background:linear-gradient(104deg,transparent 2%,#000 3%,#000 97%,transparent 98%);color:var(--geel);padding:.05em .35em;border-radius:4px 10px 6px 12px;display:inline-block;transform:rotate(-1.5deg)}
.wrap{padding:6px 16px 24px}
.section-t{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 10px}
.section-t a,.section-t button{font:700 .85rem var(--fk);color:var(--blauw);background:none;border:0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}h1{font-size:2.5rem}}
.tile{background:#fff;border:0;border-radius:var(--r);padding:16px 14px;text-align:left;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 1px 0 var(--grijs2);text-decoration:none;color:inherit;position:relative;transition:transform .12s}
.tile:active{transform:scale(.97)}
.tile .ic{width:42px;height:42px;border-radius:14px;background:var(--geel);display:grid;place-items:center;font-size:1.3rem}
.tile.dark{background:#000;color:#fff}.tile.dark h3{color:#fff}.tile.dark .ic{background:var(--geel)}
.tile.blue .ic{background:var(--blauw);color:#fff}
.tile h3{margin:10px 0 0}.tile small{color:#666}.tile.dark small{color:#ccc}
.ext::after{content:"↗";position:absolute;top:12px;right:14px;font-weight:700}
.card{background:#fff;border-radius:var(--r);padding:16px;margin-bottom:12px}
.card.yellow{background:var(--geel)}.card.black{background:#000;color:#fff}.card.black h2,.card.black h3{color:#fff}
.badge{display:inline-block;font:800 .68rem var(--fk);text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:99px;background:var(--blauw);color:#fff}
.badge.y{background:var(--geel);color:#000}.badge.k{background:#000;color:var(--geel)}
.agenda-item{display:flex;gap:14px;align-items:center;background:#fff;border-radius:var(--r);padding:12px;margin-bottom:10px}
.date{flex:0 0 58px;height:62px;border-radius:14px;background:#000;color:var(--geel);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--fk);font-weight:900;line-height:1}
.date b{font-size:1.5rem}.date i{font-style:normal;font-size:.7rem;text-transform:uppercase;color:#fff;margin-top:3px}
.agenda-item p{margin:.15em 0 0;color:#555;font-size:.9rem}
.news{background:#fff;border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.news .ph{height:150px;position:relative;background:#222;filter:grayscale(1);overflow:hidden}
.news .ph svg{width:100%;height:100%;display:block}
.news .tint{position:absolute;inset:0;mix-blend-mode:multiply}
.news .body{padding:14px 16px}
.news .body p{margin:.3em 0 0;color:#444}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:99px;padding:14px 22px;font:800 .95rem var(--fk);text-decoration:none;background:var(--geel);color:#000}
.btn.black{background:#000;color:var(--geel)}.btn.ghost{background:transparent;border:2px solid #000;color:#000}
.btn.block{width:100%}
/* welkom */
.welcome{min-height:100vh;background:var(--geel);display:flex;flex-direction:column;padding:28px 22px calc(24px + env(safe-area-inset-bottom));position:relative;overflow:hidden}
.welcome .logo{width:min(220px,60%)}
.welcome .stroke{position:absolute;right:-60px;top:120px;width:260px;height:90px;background:#000;border-radius:60% 40% 55% 45%/60% 50% 50% 40%;transform:rotate(-14deg);opacity:.95}
.welcome .stroke2{position:absolute;left:-40px;top:250px;width:150px;height:26px;background:#fff;border-radius:40px 10px 30px 8px;transform:rotate(8deg)}
.welcome h1{font-size:2.6rem;margin-top:auto;position:relative}
.welcome .jc{width:min(260px,70%);margin:6px 0 18px;position:relative}
.roles{display:grid;gap:10px;position:relative}
.role{display:flex;align-items:center;gap:14px;background:#000;color:#fff;border:0;border-radius:var(--r);padding:16px;text-align:left}
.role .ic{width:46px;height:46px;border-radius:50%;background:var(--geel);color:#000;display:grid;place-items:center;font-size:1.4rem;flex:none}
.role b{font:800 1.1rem var(--fk);display:block}.role small{color:#ccc}
.role .arr{margin-left:auto;color:var(--geel);font-size:1.3rem}
.role.light{background:#fff;color:#000}.role.light small{color:#555}.role.light .arr{color:#000}
.small-links{display:flex;gap:16px;justify-content:center;margin-top:14px;font-size:.85rem}
.small-links a,.small-links button{color:#000;font-weight:500;background:none;border:0;text-decoration:underline}
/* forms */
label{display:block;font:700 .85rem var(--fk);margin:14px 0 6px}
input,select,textarea{width:100%;font:inherit;padding:12px 14px;border:2px solid var(--grijs2);border-radius:14px;background:#fff}
input:focus,select:focus,textarea:focus{border-color:#000;outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid #000;background:#fff;border-radius:99px;padding:8px 14px;font:700 .85rem var(--fk)}
.chip[aria-pressed=true]{background:#000;color:var(--geel)}
.list{background:#fff;border-radius:var(--r);overflow:hidden}
.list button,.list a{display:flex;width:100%;align-items:center;gap:12px;padding:15px 16px;border:0;border-bottom:1px solid var(--grijs);background:none;text-align:left;color:inherit;text-decoration:none;font-size:1rem}
.list .arr{margin-left:auto;color:#999}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden}
td,th{padding:10px 14px;border-bottom:1px solid var(--grijs);text-align:left}th{font-family:var(--fk);background:#000;color:var(--geel);font-size:.85rem}
.back{background:none;border:0;font:700 .9rem var(--fk);padding:0;margin-bottom:8px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + 16px);transform:translateX(-50%) translateY(20px);background:#000;color:#fff;padding:12px 18px;border-radius:99px;opacity:0;transition:.25s;pointer-events:none;z-index:50;font-size:.9rem;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}
.install{display:flex;align-items:center;gap:8px;background:#000;color:#fff;padding:10px 16px;font-size:.88rem}
.install button{background:var(--geel);border:0;border-radius:99px;padding:6px 12px;font:800 .8rem var(--fk)}
.install .x{background:none;color:#fff;margin-left:auto}
.install #installBtn{margin-left:auto}
.notice{display:flex;gap:12px;align-items:flex-start;background:#fff;border-left:6px solid var(--blauw);border-radius:14px;padding:12px 14px;margin:14px 0}
.muted{color:#666;font-size:.88rem}
.disclaimer{font-size:.75rem;color:#777;text-align:center;margin:20px 0 0}
[hidden]{display:none!important}main:focus{outline:none}
a.agenda-item{text-decoration:none;color:inherit}
.news .more{display:inline-block;margin-top:10px;font:700 .85rem var(--fk);color:var(--blauw);text-decoration:none}
.src{font-size:.78rem;color:#666;margin:10px 0 0}.src a{color:var(--blauw)}
.card.todo{border:2px dashed #000;background:#fffbe6}
table caption{font:800 .9rem var(--fk);text-align:left;padding:14px 14px 8px;background:#fff}
table{margin-bottom:12px}tr.pz{background:#fff6cc}