/*
 *	de feed
 *
 *	Samengesteld uit het prototype (fl27/src/index.html) door
 *	dezelfde volgorde aan te houden als bouw.py:
 *
 *	  1. de <style>-blokken van de pagina zelf, met de
 *	     FL27-DEEL-markers uitgeklapt naar src/deel/*.css
 *	  2. daarna fl27-palet.css en fl27.css als gedeelde laag
 *
 *	Die volgorde is niet vrijblijvend. De gedeelde laag gebruikt
 *	190 keer !important om de pagina-CSS te overrulen; staat hij
 *	ervóór, dan wint de verkeerde.
 *
 *	Waarom per pagina en niet één bestand voor alles: de pagina-CSS van
 *	de feed en die van het artikel definiëren dezelfde klassen met
 *	andere waarden. Samenvoegen levert precies de botsingen op waar die
 *	!important's ooit voor zijn gemaakt.
 *
 *	NIET MET DE HAND WIJZIGEN — pas fl27/src aan en genereer opnieuw.
 */

/* ═══ FL27 PALET — hierbuiten valt niets, behalve externe content ═══ */

/* ================================================================
   FESTILEAKS · 2027 — één-bestand app-prototype
   Merk: 3-druppel-logo · klassieke gradient · druppel-duo accenten
   ================================================================ */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;
  background:var(--bg)}
body{font-family:Archivo,system-ui,sans-serif;color:var(--ink);font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased;background:var(--bg)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
img{display:block}
:focus-visible{outline:2.5px solid var(--e-blue);outline-offset:2px;border-radius:4px}
.card:active, .pcard:active{transform:scale(.992)}
.card, .pcard{transition:transform .12s ease,box-shadow .15s ease}
/* ---------- desktop ---------- */
@media(min-width:760px){

.view{padding:20px 26px calc(30px + env(safe-area-inset-bottom))}
.view>.inner{max-width:760px}
.pcard.big{min-height:340px}
.pcard.big h3{font-size:25px}
.hdr .in-w, .hdr{padding-left:22px;padding-right:22px}

}
@media(min-width:1000px){
#v0 .inner{max-width:820px}
#v2 .inner{max-width:780px}
#v1 .inner{max-width:1020px; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
#v1 .inner>.fhero, #v1 .inner>.sts{grid-column:1/-1}
#v1 .sts{grid-template-columns:repeat(4,1fr)}
#v3 .inner{max-width:860px}
#v4 .inner{max-width:900px; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
#v4 .inner>.phero, #v4 .inner>.pstats{grid-column:1/-1}
#v4 .pstats{grid-template-columns:repeat(4,1fr)}
.bgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.art h1{font-size:30px}
.body p{font-size:16.5px}
}
@keyframes kpop{
0%{transform:scale(1)}

40%{transform:scale(1.35)}

100%{transform:scale(1)}
}
.kudo.done svg{animation:kpop .35s ease}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* ---------- app-frame ---------- */
.hdr{position:fixed; top:0; left:0; right:0; z-index:40; height:var(--hd);
  display:flex; align-items:center; gap:10px; padding:0 14px;
  padding-top:env(safe-area-inset-top);
  background:var(--hdbg); -webkit-backdrop-filter:var(--glas-waas); backdrop-filter:var(--glas-waas);
  border-bottom:1px solid var(--line)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-2.5px;height:2.5px;background:var(--grad)}
.wordmark{display:inline-flex;align-items:center;display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.4px}
.logo{width:31px;height:31px;flex-shrink:0;filter:drop-shadow(0 1px 3px rgba(32,31,40,.16))}
.hdr .sp{flex:1}
.munten{display:flex;align-items:center;gap:6px;background:var(--gold-bg);border:1px solid var(--goud-100);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:800;color:var(--t-goud)}
.coin{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 32%,var(--goud-400),var(--goud-500));box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.bs{background:var(--card);color:var(--ink);border:1.5px solid var(--line)!important;border:none;border-radius:999px;padding:7px 14px;font-weight:800;font-size:13px}
/* iconen */
.mi{width:15px;height:15px;flex-shrink:0}
.ci{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.bi{width:13px;height:13px;flex-shrink:0}
/* ---------- menu ---------- */
.menu{position:fixed; left:0; right:0; z-index:39;
  top:calc(var(--hd) + env(safe-area-inset-top)); height:var(--mn);
  background:var(--hdbg); -webkit-backdrop-filter:var(--glas-waas); backdrop-filter:var(--glas-waas);
  border-bottom:1px solid var(--line)}
.menu .min{height:100%; max-width:1100px; margin:0 auto; padding:0 12px;
  display:flex; align-items:center; gap:7px; overflow-x:auto; scrollbar-width:none;
  scroll-padding-inline:12px}
.mtab{scroll-margin-inline:12px}
.menu .min::-webkit-scrollbar{display:none}
.mtab{display:inline-flex;align-items:center;gap:6px}
.mtab{flex-shrink:0;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:800;color:var(--ink2);transition:all .13s}
.mplus{flex-shrink:0; margin-left:auto; width:34px; height:34px; border-radius:50%; border:none;
  background:var(--grad27); color:var(--grijs-0); font-size:19px; font-weight:600;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh)}
/* ---------- bouwstenen ---------- */
.card{background:var(--card);border:none;border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:16px 17px}
.h6{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;color:var(--ink3)}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;border-radius:999px;padding:5px 12px;background:var(--card);border:1.5px solid var(--line);color:var(--ink2)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink3);flex-shrink:0}
.b-pick{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.b-pick::before{background:var(--grad27)}
.b-ai::before{background:var(--e-blue)}
.b-comm::before{background:var(--pink)}
.b-forum::before{background:var(--a-paars)}
.b-trend::before{background:var(--e-red)}
.b-guide::before{background:var(--gold)}
.rank{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;color:var(--t-goud);background:var(--gold-bg);border-radius:999px;padding:2px 7px}
.btn{transition:transform .12s}
.btn:active{transform:scale(.97)}
.kudo{display:inline-flex;align-items:center;gap:6px;border:none;background:none;font-size:14.5px;font-weight:800;color:var(--ink2);padding:5px 8px;border-radius:9px}
.kudo:hover{background:var(--tint)}
.kudo.done{color:var(--e-red)}
.kudo svg path{fill:currentColor}
.rowline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.when{font-size:12px;color:var(--ink3);margin-left:auto;font-weight:600}
/* horizontale scrollers */
.hscroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:3px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start;flex-shrink:0}
/* pins */
.pin{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 11px 5px 5px;font-weight:800;font-size:13px;box-shadow:var(--sh)}
.pin .ava{width:24px;height:24px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;color:var(--grijs-0);font-size:10px;font-weight:800}
.cd{font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 7px;background:var(--tintb);color:var(--t-blauw)}
.cd.done{background:var(--p-groen);color:var(--t-groen)}
.cd.now{background:var(--grad27);color:var(--grijs-0)}
/* live-ticker */
.tick{display:flex;align-items:center;gap:10px;background:var(--card);border:none;border-left:3px solid var(--e-red);color:var(--ink);border-radius:14px;padding:11px 15px 11px 13px;font-size:13.5px;font-weight:700;box-shadow:var(--sh)}
.tick .dotlive{width:9px;height:9px}
.tick b{color:var(--e-red)}
.dotlive{width:8px;height:8px;border-radius:50%;background:var(--rood-500);flex-shrink:0;animation:pulse 1.6s ease infinite}
@keyframes pulse{
0%, 100%{box-shadow:0 0 0 0 rgba(255,90,90,.5)}

55%{box-shadow:0 0 0 6px rgba(255,90,90,0)}
}
.tick a{margin-left:auto;flex-shrink:0;font-weight:800;font-size:11.5px;background:rgba(255,255,255,.14);border-radius:999px;padding:4px 10px}
.tickbtn{display:inline-flex;align-items:center;gap:5px}
.tickbtn{margin-left:auto;flex-shrink:0;border:none;font-weight:800;font-size:12px;background:var(--grad27);color:var(--grijs-0);border-radius:999px;padding:6px 13px}
.tickbtn.ok{background:var(--paper);color:var(--goud-100)}
/* ads */
.adA{position:relative;display:flex;align-items:center;gap:12px;border-radius:13px;overflow:hidden;background:linear-gradient(100deg,var(--grijs-800),var(--blauw-700) 55%,var(--blauw-700));color:var(--grijs-0);padding:10px 13px}
.adA .plug{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--blauw-200),var(--blauw-600) 58%,var(--blauw-700));flex-shrink:0}
.adA b{font-size:14px}
.adA span{font-size:11.5px;opacity:.85;display:block}
.adA .cta{margin-left:auto;background:var(--card);color:var(--grijs-800);font-weight:800;font-size:11.5px;border-radius:999px;padding:6px 11px;flex-shrink:0;white-space:nowrap}
.adlbl{position:absolute;top:3px;right:8px;font-size:8.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;opacity:.55}
.adW{position:relative;border-radius:var(--rl);overflow:hidden;background:var(--grad);color:var(--grijs-0);padding:18px;display:flex;flex-direction:column;gap:5px}
.adW strong{font-size:17px;font-weight:800;line-height:1.3;letter-spacing:-.2px}
.adW p{font-size:12.5px;opacity:.94}
.adW a{align-self:flex-start;margin-top:7px;background:var(--card);color:var(--pink-d);font-weight:800;font-size:12.5px;border-radius:999px;padding:7px 14px}
/* hero & mini's */
.hero{position:relative;border-radius:var(--rl);overflow:hidden;min-height:225px;display:flex;align-items:flex-end;color:var(--grijs-0);box-shadow:var(--shl);background:linear-gradient(160deg,var(--grijs-700),var(--rood-700) 55%,var(--afg-rood1))}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,22,0) 30%,rgba(20,14,22,.38) 60%,rgba(20,14,22,.8))}
.hero .tx{position:relative;padding:15px 16px}
.hero h3{font-size:19px;line-height:1.25;letter-spacing:-.3px;font-weight:800;margin-top:8px}
.hero .m{font-size:12px;opacity:.85;margin-top:6px}
.mini{display:flex;gap:11px;align-items:center;padding:12px 13px}
.mini h4{font-size:14px;font-weight:800;line-height:1.3;margin-top:4px}
.mini .th{width:56px;height:48px;border-radius:10px;flex-shrink:0;background:var(--gradsoft)}
/* gold / checkin */
.gold{background:var(--gold-bg);border:1px solid rgba(201,146,26,.35);border-radius:var(--rl);padding:17px;position:relative;overflow:hidden}
.gold .munt{position:absolute;right:-24px;top:-24px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--goud-100),var(--afg-goud1));opacity:.55;box-shadow:inset 0 0 0 7px rgba(255,255,255,.3)}
.gold h3{color:var(--t-goud);font-size:16.5px;margin:0 0 6px}
.gold p{font-size:13.5px;opacity:.94;margin:4px 0 11px;max-width:420px}
.gold a{display:inline-block;background:var(--card);color:var(--t-goud);font-weight:800;font-size:13px;border-radius:999px;padding:7px 15px}
.chk{border:1.5px solid var(--pink);border-radius:var(--rl);padding:14px 15px;background:var(--card);box-shadow:var(--sh)}
.chk.done{border-color:var(--green);background:var(--card)}
.chk h3{font-size:16px;font-weight:800}
.chk p{font-size:13.5px;color:var(--ink2);margin:3px 0 10px}
.chk .btn{width:100%}
/* feed */
.fh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:2px}
.fh h2{font-size:24px;font-weight:800;letter-spacing:-.5px;margin-right:auto}
.pers{font-size:11.5px;color:var(--ink3);font-weight:600;width:100%;margin-top:-4px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px}
.cdot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.chip{flex-shrink:0;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800;color:var(--ink2);transition:all .13s}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.post h3{font-size:19px;line-height:1.3;letter-spacing:-.35px;font-weight:800;margin:9px 0 6px}
.post p{font-size:15px;color:var(--ink2);line-height:1.55}
.post .foot{display:flex;align-items:center;gap:14px;margin-top:13px;padding-top:11px;border-top:1px solid var(--paper);font-size:12.5px;font-weight:600;color:var(--ink3)}
.post .foot .kudo{background:var(--paper);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--ink2)}
.post .foot .kudo.done{background:var(--bg);color:var(--e-red)}
.post .foot .kudo svg{opacity:.75}
.post .foot .kudo.done svg{opacity:1}
.ava{width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--grijs-0);font-weight:800;font-size:11px;background:var(--grad);flex-shrink:0}
.ava.ring{box-shadow:0 0 0 2px var(--grijs-0),0 0 0 4px var(--gold)}
.nm{font-weight:800;font-size:13.5px}
.wchip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;background:var(--gold-bg);color:var(--t-goud);border-radius:999px;padding:2.5px 9px}
/* poll */
.opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:9px;border:1.5px solid var(--line);border-radius:15px;padding:14px 16px;margin-top:9px;font-size:15px;font-weight:700;background:var(--card);overflow:hidden;width:100%;text-align:left;transition:border-color .13s}
.opt .bar{position:absolute;inset:0;width:0;background:linear-gradient(90deg,rgba(220,46,46,.08),rgba(40,160,220,.15));transition:width .5s ease}
.opt span{position:relative}
.opt .pct{color:var(--e-blue);font-weight:800;opacity:0}
.poll.voted .opt .pct{opacity:1}
.note{font-size:13px;color:var(--ink3);margin-top:10px}
.note b{color:var(--gold)}
/* strips */
.it{border:1px solid var(--line);border-radius:11px;padding:7px 12px;background:var(--paper);font-size:12px;line-height:1.35}
.it b{display:block;font-size:12.5px;color:var(--ink)}
.it span{color:var(--ink3)}
.pl{width:132px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.pl .cov{height:62px;display:flex;align-items:flex-end;padding:7px;color:var(--grijs-0);font-weight:800;font-size:11.5px;line-height:1.25}
.pl .n{padding:6px 9px 8px;font-size:11px;font-weight:800;color:var(--ink2);display:flex;align-items:center;gap:5px}
.sdot{width:12px;height:12px;border-radius:50%;background:var(--goud-100);flex-shrink:0}
/* nieuws-lijst */
.nl a{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--paper);font-size:13.5px;line-height:1.4}
.nl .rowline a{display:inline-flex;border-top:0;padding:0}
.nl a:first-child{border-top:none}
.nl .t{flex-shrink:0;width:40px;color:var(--ink3);font-size:11px;font-weight:800;line-height:1.3}
.nl .t small{display:block;font-weight:600}
.nl b{font-weight:700}
/* forum-sync (dark familie) */
.fsync{background:var(--card);border:none;border-left:3px solid var(--a-paars);color:var(--ink);border-radius:var(--rl);padding:16px 17px;box-shadow:var(--sh)}
.fsync h3{font-size:16px;font-weight:800}
.fsync>p{font-size:13px;color:var(--ink2);margin:4px 0 8px}
.fsync .th{display:flex;gap:9px;padding:9px 0;border-top:1px solid var(--paper)}
.fsync .th p{font-size:13px}
.fsync .th .m{font-size:11px;color:var(--ink3);margin-top:2px}
.fsync .cta{display:inline-block;margin-top:10px;background:var(--ink);color:var(--bg);font-weight:800;font-size:12.5px;border-radius:999px;padding:8px 15px}
.stat{background:var(--card);border:none;border-left:3px solid var(--a-paars);color:var(--ink);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.stat .nums{display:flex;gap:16px;margin-top:7px}
.stat b{display:block;font-size:17px}
.stat span{font-size:10.5px;color:var(--t-paars);font-weight:700}
/* festival-view */
.fhero{position:relative;border-radius:var(--rl);overflow:hidden;color:var(--grijs-0);background:var(--grad);padding:18px 16px;box-shadow:var(--shl)}
.fhero .live{display:inline-flex;align-items:center;gap:6px;background:rgba(20,16,24,.35);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:800;margin-bottom:7px}
.fhero h1{font-size:26px;letter-spacing:-.5px;font-weight:800;line-height:1.08}
.fhero .sub{font-size:13px;opacity:.94;margin-top:4px}
.fhero .acts{display:flex;gap:8px;margin-top:13px}
.fhero .acts .btn{flex:1;text-align:center}
.sts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.st{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;box-shadow:var(--sh)}
.st b{display:block;font-size:18px;letter-spacing:-.3px}
.st span{font-size:11px;color:var(--ink3);font-weight:700}
.st .stars{color:var(--gold);font-size:12px;letter-spacing:1px}
.day{font-size:12px;font-weight:800;color:var(--pink-d);margin:9px 0 6px}
.act{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:800;background:var(--card);transition:all .12s}
.act.fav{border-color:var(--e-red);color:var(--e-red);background:var(--bg)}
.act .h{opacity:.4;font-size:11px}
.act.fav .h{opacity:1}
.g{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--paper);font-size:13.5px;font-weight:800}
.g:first-of-type{border-top:none}
.g .ic{width:30px;height:30px;border-radius:9px;background:var(--tintb);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.rv{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--paper)}
.rv:first-of-type{border-top:none}
.rv .sc{width:34px;height:34px;border-radius:10px;background:var(--grad);color:var(--grijs-0);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rv b{font-size:13.5px}
.rv p{font-size:12.5px;color:var(--ink2);line-height:1.45}
.rv .m{font-size:11px;color:var(--ink3);margin-top:1px}
/* artikel-view */
.crumb{font-size:12px;font-weight:800;color:var(--ink3)}
.crumb a{color:var(--e-blue)}
.art h1{font-size:24px;line-height:1.2;letter-spacing:-.6px;font-weight:800;margin:8px 0 10px}
.byline{display:flex;align-items:center;gap:9px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:12px}
.byline .who b{display:block;font-size:13.5px}
.byline .who span{font-size:11.5px;color:var(--ink3)}
.byline .share{margin-left:auto;display:flex;gap:6px}
.byline .share button{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:800}
.heroimg{border-radius:var(--rl);overflow:hidden;min-height:210px;background:linear-gradient(160deg,var(--grijs-700),var(--rood-700) 55%,var(--afg-rood1))}
.cap{font-size:11.5px;color:var(--ink3);margin:6px 0 12px}
.body p{font-size:15.5px;line-height:1.65;color:var(--read);margin-bottom:13px}
.body p.lead{font-size:16.5px;font-weight:700;color:var(--ink)}
.pull{border-left:4px solid var(--e-red);background:var(--tint);border-radius:0 12px 12px 0;padding:13px 16px;font-size:16px;font-weight:800;line-height:1.45;margin:14px 0;letter-spacing:-.2px}
.kbar{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;box-shadow:var(--sh);margin:13px 0;flex-wrap:wrap}
.kbar .cnt{font-size:12px;font-weight:800;color:var(--ink3)}
/* guide-view */
.prod{position:relative;display:flex;gap:12px;padding:14px;align-items:center}
.prod .ph{width:62px;height:62px;border-radius:13px;background:var(--gradsoft);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.prod .inf{flex:1;min-width:0}
.prod h3{font-size:15px;font-weight:800;letter-spacing:-.2px}
.prod .stars{color:var(--gold);font-size:12px;font-weight:800}
.prod .stars span{color:var(--ink3);font-weight:700;font-size:11px}
.prod p{font-size:12.5px;color:var(--ink2);margin-top:3px}
.prod .buy{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.prod .pr{font-size:16px;font-weight:800;letter-spacing:-.3px}
.prod .aff{background:var(--ink);color:var(--bg);font-weight:800;font-size:11.5px;border-radius:999px;padding:7px 13px}
.prod .al{font-size:9px;color:var(--ink3);font-weight:800}
.no1{position:absolute;top:-9px;left:13px;background:var(--gold);color:var(--grijs-0);font-size:9.5px;font-weight:800;border-radius:999px;padding:2px 9px;letter-spacing:.5px}
.tip{border:1.5px solid var(--pink);background:var(--tint);border-radius:var(--r);padding:12px 14px;font-size:13px}
/* profiel-view */
.phero{border-radius:var(--rl);background:var(--card);box-shadow:var(--sh);padding:24px 18px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.bigava{width:86px;height:86px;border-radius:50%;background:var(--grad);color:var(--grijs-0);font-size:27px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--grijs-0),0 0 0 6.5px var(--gold);margin-bottom:10px}
.phero h1{font-size:21px;letter-spacing:-.4px;font-weight:800}
.phero .sub{font-size:13px;color:var(--ink2);margin-top:2px}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pstats .s{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:9px 6px;text-align:center;box-shadow:var(--sh)}
.pstats b{display:block;font-size:16px;letter-spacing:-.3px}
.pstats span{font-size:9.5px;color:var(--ink3);font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bdg{border:1.5px solid var(--line);border-radius:13px;padding:10px 6px;text-align:center;background:var(--card)}
.bdg .ic{width:36px;height:36px;margin:0 auto 5px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:16px}
.bdg b{display:block;font-size:10.5px;line-height:1.25}
.bdg span{font-size:9px;color:var(--ink3);font-weight:700}
.lvl{display:inline-block;margin-top:4px;font-size:8.5px;font-weight:800;background:var(--gold-bg);color:var(--gold);border-radius:999px;padding:1.5px 7px}
.bdg.lock{opacity:.45;border-style:dashed}
.bdg.lock .ic{background:var(--paper)}
.arow{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--paper)}
.arow:first-of-type{border-top:none}
.arow .yr{width:38px;font-size:10.5px;font-weight:800;color:var(--ink3);flex-shrink:0}
.arow b{font-size:13.5px}
.arow .note{font-size:11.5px;color:var(--ink2)}
.arow .sc{margin-left:auto;width:32px;height:32px;border-radius:9px;background:var(--grad);color:var(--grijs-0);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brow{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--paper)}
.brow:first-of-type{border-top:none}
.brow b{font-size:14px;line-height:1.35}
.brow .note{font-size:12px;color:var(--ink2);margin-top:1px}
.bsc{width:38px;height:38px;border-radius:11px;background:var(--grad27);color:var(--grijs-0);font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pbar{height:9px;border-radius:999px;background:var(--paper);overflow:hidden;margin:8px 0 5px}
.pbar i{display:block;height:100%;width:62%;background:var(--grad27);border-radius:999px}
.pl2{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;color:var(--ink3)}
/* footer-kaart */
.sitefoot{background:var(--card);color:var(--ink2);border-radius:22px 22px 0 0;position:relative;margin-top:8px;padding:22px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -2px 14px rgba(27,26,33,.05)}
.sitefoot::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;background:var(--grad)}
.sitefoot .cols{display:grid;grid-template-columns:1fr 1fr;gap:13px;font-size:12.5px}
.sitefoot h5{color:var(--ink3);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;font-weight:800;margin-bottom:6px}
.sitefoot a{display:block;padding:2px 0}
.sitefoot .base{margin-top:13px;padding-top:10px;border-top:1px solid var(--line);font-size:10.5px;text-align:center;color:var(--ink3)}
.sitefoot .base b{color:var(--ink)}
.pimg{border-radius:14px;min-height:150px;margin:10px 0 4px;background:linear-gradient(150deg,var(--grijs-800),var(--blauw-700) 60%,var(--rood-700));background-size:cover;background-position:center}
.scene{position:absolute;inset:0;width:100%;height:100%}
.liveimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene .bok{opacity:.5}
.spons{border:1px solid var(--line);background:linear-gradient(135deg,var(--grijs-50),var(--grijs-50))}
/* beurs-periodes + maandrapport */
.ptabs{display:flex;gap:5px}
.ptab{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:800;color:var(--ink2)}
.ptab.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chstatus{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink3);margin-top:7px}
.chstatus .cd2{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s ease infinite}
.mrap{border:1px solid var(--line)}
.mrap .mh{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mrap .mic{width:38px;height:38px;border-radius:12px;background:var(--grad27);color:var(--grijs-0);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.mtab2{width:100%;border-collapse:collapse;font-size:13px}
.mtab2 td{padding:7px 0;border-top:1px solid var(--paper)}
.mtab2 tr:first-child td{border-top:none}
.mtab2 .mv{text-align:right;font-weight:800}
.mv.groen{color:var(--green)}
.mv.rood{color:var(--e-red)}
/* ticketalert */
.alertbtn{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:800;color:var(--ink2);flex-shrink:0;transition:all .15s}
.alertbtn.rond{width:27px;height:27px;padding:0;justify-content:center;border-radius:50%}
.alertbtn.aan{border-color:var(--gold);background:var(--gold-bg);color:var(--t-goud)}
.alertcard{border:1px solid var(--goud-100);background:linear-gradient(135deg,var(--grijs-25),var(--grijs-50))}
.alertcard .bel{width:38px;height:38px;border-radius:12px;background:radial-gradient(circle at 35% 32%,var(--goud-400),var(--goud-500));display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.35)}
.alrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--paper)}
.alrow:first-of-type{border-top:none}
.alrow .ic2{width:34px;height:34px;border-radius:10px;background:var(--gold-bg);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.alrow b{font-size:13.5px;display:block}
.alrow span{font-size:11.5px;color:var(--ink3);font-weight:600}
.alrow .sw{margin-left:auto}
/* ticketbeurs */
.legend{display:flex;gap:14px;margin:2px 0 10px}
.lg{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink2)}
.lg i{width:14px;height:3.5px;border-radius:2px;display:inline-block}
.chartwrap{border:1px solid var(--line);border-radius:14px;padding:13px 14px 10px;margin-bottom:10px}
.chartkop{display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px;margin-bottom:7px}
.chartkop b{font-size:14.5px}
.chart{width:100%;height:110px;display:block}
.chartas{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--ink3);margin-top:4px}
.chartprijs{display:flex;gap:7px;align-items:center;font-size:13px;font-weight:800;margin-top:6px}
.chartprijs span{color:var(--ink3)}
.beurs .bh{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.beurs .bh .h6{color:var(--ink2)}
.beurs .bh .when{font-size:11.5px}
.brow2{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--paper)}
.brow2:first-of-type{border-top:none}
.brow2 .fn{flex:1;min-width:0}
.brow2 .fn b{font-size:14.5px;display:block}
.brow2 .fn span{font-size:11.5px;color:var(--ink3);font-weight:600}
.brow2 .pr{font-size:15px;font-weight:800;letter-spacing:-.3px;text-align:right}
.brow2 .dd{font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 9px;flex-shrink:0}
.dd.dn{background:var(--p-groen);color:var(--t-groen)}
.dd.up{background:var(--p-rood);color:var(--t-rood)}
.spark{flex-shrink:0;opacity:.9}
.beurs .note{margin-top:9px}
.beurs .tip2{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:var(--p-groen);color:var(--t-groen);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:800}
/* welkomstkaart (compact) */
.welc2{display:flex;align-items:center;gap:10px;padding:12px 15px}
.welc2 b{font-size:13.5px}
.welc2 span{font-size:12.5px;color:var(--ink2)}
.welc2 div{flex:1;min-width:0;line-height:1.35}
.btn.sm{flex-shrink:0}
.wx{border:none;background:none;font-size:20px;color:var(--ink3);padding:2px 4px;flex-shrink:0}
.welc{padding:19px 18px}
.welc h3{font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:1.3}
.welc p{font-size:14.5px;color:var(--ink2);line-height:1.55;margin:7px 0 13px}
.welc .row2{display:flex;gap:9px}
.welc .row2 .btn{flex:1;text-align:center}
/* sectiekop: dot + uppercase */
.sect{display:flex;align-items:center;gap:8px;margin:4px 0 -2px}
.sect .sd{width:22px;height:5px;border-radius:3px;background:var(--grad);display:inline-block}
.sect .sd svg{display:none}
.sect b{font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:800;color:var(--ink)}
/* uitgelicht: gradient-eiland met slider */
.uitwrap{background:transparent;border-radius:0;padding:0;box-shadow:none}
.uitwrap .usect{display:flex;align-items:center;gap:9px;padding:0;margin-bottom:10px}
.uitwrap .usect .ud{width:22px;height:5px;border-radius:3px;background:var(--grad)}
.uitwrap .usect .ud i{display:none}
.uitwrap .usect b{font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:800;color:var(--ink)}
.uslide{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 -14px;padding:0 14px}
.uslide::-webkit-scrollbar{display:none}
.ucard{position:relative;flex:0 0 82%;scroll-snap-align:center;min-height:0;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:15px 15px 14px;color:var(--grijs-0);background:var(--grijs-700);box-shadow:var(--sh)}
.ucard .uveil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,15,24,0) 32%,rgba(22,15,24,.42) 62%,rgba(22,15,24,.82))}
.ucard .upill, .ucard h3, .ucard .um{position:relative}
.ucard .scene, .ucard .uveil{position:absolute;inset:0}
.upill{align-self:flex-start;display:inline-flex;align-items:center;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:999px;padding:4px 13px;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:9px}
.ucard h3{font-size:20px;line-height:1.24;letter-spacing:-.4px;font-weight:800}
.ucard .um{font-size:12px;opacity:.82;margin-top:6px;font-weight:600}
@media(min-width:760px){
.ucard{flex-basis:56%;min-height:265px}
}
@media(min-width:1000px){
.ucard{flex-basis:44%;min-height:290px}
.ucard h3{font-size:23px}
}
/* uitgelicht: v2-compositie */
.featured2{display:flex;flex-direction:column;gap:11px}
.featured2 .pcard.big{min-height:255px}
.fminis{display:flex;flex-direction:column;gap:11px}
.fmini{display:flex;gap:12px;padding:11px;align-items:center}
.fth{position:relative;overflow:hidden;width:96px;height:76px;border-radius:13px;flex-shrink:0}
.ftx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.ftx b{font-size:14.5px;line-height:1.3;font-weight:800;letter-spacing:-.15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ftx .fm{font-size:11.5px;color:var(--ink3);font-weight:600}
@media(min-width:760px){
.featured2{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.featured2 .pcard.big{min-height:330px;grid-row:span 1}
.fminis{gap:12px}
.fmini{flex:1}
.fth{width:84px;height:100%;min-height:84px}
}
/* uitgelicht: slider */
.uitslide{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 -14px;padding:2px 14px 6px}
.uitslide::-webkit-scrollbar{display:none}
.uitslide .pcard{flex:0 0 84%;scroll-snap-align:center;min-height:250px}
.uitslide .pcard.big{min-height:250px}
.uitslide .pcard.big h3{font-size:20px}
@media(min-width:760px){
.uitslide{margin:0;padding:2px 0 6px}
.uitslide .pcard{flex-basis:56%}
}
@media(min-width:1000px){
.uitslide .pcard{flex-basis:46%;min-height:290px}
}
/* uitgelicht: fotokaarten */
.uit{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){
.uit{grid-template-columns:1fr 1fr}
}
.pcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:190px;display:flex;align-items:flex-end;color:var(--grijs-0);box-shadow:var(--shl)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,22,0) 30%,rgba(20,14,22,.38) 60%,rgba(20,14,22,.8))}
.pcard .tx{position:relative;padding:15px 16px;width:100%}
.pcard .opill{display:inline-flex;align-items:center;gap:7px;background:rgba(18,18,24,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 13px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:9px}
.pcard .opill i{width:7px;height:7px;border-radius:50%;background:var(--card)}
.pcard h3{font-size:17px;line-height:1.25;letter-spacing:-.3px;font-weight:800}
.pcard.big{min-height:265px}
.pcard.big h3{font-size:21px;letter-spacing:-.4px}
.pcard .m{font-size:12.5px;opacity:.9;margin-top:7px;font-weight:600}
.pcard.tyler{background:linear-gradient(155deg,var(--grijs-900),var(--grijs-700) 55%,var(--grijs-600))}
.pcard.wilde{background:linear-gradient(155deg,var(--grijs-700),var(--goud-700) 55%,var(--goud-100))}
/* festival-filter dropdown */
.fdrop{position:relative}
.fmenu{position:absolute;top:calc(100% + 7px);left:0;z-index:30;background:var(--card);border-radius:16px;box-shadow:var(--shl);padding:7px;min-width:200px;display:none}
.fmenu.show{display:block}
.fmenu button{display:block;width:100%;text-align:left;border:none;background:none;padding:10px 13px;border-radius:11px;font-size:14.5px;font-weight:700;color:var(--ink2)}
.fmenu button.on{background:var(--paper);color:var(--ink);font-weight:800}
.fmenu button:active{background:var(--paper)}
/* sheet */
.ovl{position:fixed;inset:0;z-index:100;background:rgba(28,25,34,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease}
.ovl.show{opacity:1;pointer-events:auto}
.ovl .sheet{transform:translateY(26px);transition:transform .28s cubic-bezier(.3,1.2,.4,1)}
.ovl.show .sheet{transform:none}
.sheet{background:var(--card);border-radius:24px 24px 0 0;width:100%;max-width:480px;padding:20px 18px calc(18px + env(safe-area-inset-bottom))}
.sheet h3{font-size:18px;font-weight:800}
.sheet .sub{font-size:13px;color:var(--ink2);margin:3px 0 13px}
.pt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pt button{border:1.5px solid var(--line);background:var(--card);border-radius:13px;padding:13px 6px;font-size:13px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:5px}
.pt button:active{border-color:var(--e-red);background:var(--tint)}
.mnote{display:flex;align-items:center;gap:7px;margin-top:11px;background:var(--gold-bg);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:800;color:var(--goud-700)}
.sheet .acts{display:flex;justify-content:flex-end;gap:9px;margin-top:13px}
/* ---------- site-frame: mobile-first, per device ontworpen ---------- */
body{padding-top:calc(var(--hd) + var(--mn) + env(safe-area-inset-top))}
.page{padding:14px 14px 0}
.page .inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.mtab.on{pointer-events:none}
.rail, .hoofdkolom{display:flex;flex-direction:column;gap:12px;min-width:0}
.dnav, .dzoek{display:none}
@media(min-width:760px){
.page{padding:22px 26px 0}
.page .inner{max-width:760px}
}
@media(min-width:1000px){
/* desktop-chrome: pillenbalk weg, navigatie + zoeken in de header */
.menu{display:none}
:root{--hd:calc(64px + env(safe-area-inset-top,0px))}
body{padding-top:calc(var(--hd) + env(safe-area-inset-top))}
.hdr .hin{max-width:1220px;gap:16px}
.dnav{display:flex;gap:2px;margin-left:8px}
.dnav a{padding:9px 13px;border-radius:999px;font-weight:800;font-size:13.5px;color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.dnav a:hover{background:var(--paper)}

.dnav .mi{width:14px;height:14px}
.dzoek{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:999px;padding:9px 16px;font-size:13px;color:var(--ink3);font-weight:600;min-width:200px;margin-left:auto;cursor:text}
.hdr .sp{display:none}
.hacts{margin-left:0}
.page{padding:26px 30px 0}
/* FEED: magazine-grid — hero over volle breedte, hoofdkolom + sticky rail */
body[data-p=feed] .inner{max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
body[data-p=feed] .inner>.fullw, body[data-p=feed] .inner>.tick, body[data-p=feed] .inner>.uitwrap, body[data-p=feed] .inner>.sitefoot{grid-column:1/-1}
body[data-p=feed] .rail{position:sticky;top:calc(var(--hd) + 20px);gap:14px}
.uslide{display:grid;grid-template-columns:1.6fr 1fr;grid-auto-rows:1fr;gap:14px;overflow:visible;margin:0;padding:0}
.uslide .ucard{flex:none;min-height:0}
.uslide .ucard:first-child{grid-row:1/3;min-height:380px}
.uslide .ucard:first-child h3{font-size:24px}
.uslide .ucard:nth-child(n+4){display:none}
.chart{height:150px}
/* ARTIKEL: leesbaan + contextrail (forum-live + lees ook) */
body[data-p=artikel] .inner{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
body[data-p=artikel] .inner>.sitefoot{grid-column:1/-1}
body[data-p=artikel] .rail{position:sticky;top:calc(var(--hd) + 20px)}
.art h1{font-size:31px}
.body p{font-size:16.5px}
/* FESTIVAL */
body[data-p=festival] .inner{max-width:1040px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
body[data-p=festival] .inner>.fhero, body[data-p=festival] .inner>.sts, body[data-p=festival] .inner>.sitefoot{grid-column:1/-1}
body[data-p=festival] .sts{grid-template-columns:repeat(4,1fr)}
/* GUIDE */
body[data-p=guide] .inner{max-width:880px}
.bgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
/* PROFIEL */
body[data-p=profiel] .inner{max-width:940px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
body[data-p=profiel] .inner>.phero, body[data-p=profiel] .inner>.pstats, body[data-p=profiel] .inner>.sitefoot{grid-column:1/-1}
body[data-p=profiel] .pstats{grid-template-columns:repeat(4,1fr)}
}
/* schaduwen geperfectioneerd */
@media(min-width:1000px){

body[data-p=guide] .inner, body[data-p=profiel] .inner{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
body[data-p=guide] .inner>.sitefoot, body[data-p=profiel] .inner>.sitefoot{grid-column:1/-1}
body[data-p=guide] .rail, body[data-p=profiel] .rail{position:sticky;top:calc(var(--hd) + 20px);display:flex;flex-direction:column;gap:12px}
body[data-p=guide] .hoofdkolom, body[data-p=profiel] .hoofdkolom{display:flex;flex-direction:column;gap:12px;min-width:0}

}
html, body{overflow-x:clip}
:root{--sh:0 1px 2px rgba(27,26,33,.04),0 5px 18px rgba(27,26,33,.05);--shl:0 2px 6px rgba(27,26,33,.06),0 14px 34px rgba(27,26,33,.10)}
/* CTA-hiërarchie: primair=inkt · hero=grad27 · secundair=ghost · promo=lijn-rood */
.btn{display:inline-flex;align-items:center;justify-content:center}
.ctarij{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.ctarij .btn{margin-top:0}
@media(max-width:430px){
.ctarij .btn{flex:1 1 auto}
}
/* stapel: gradient-plaat achter fotoblok (signatuur) */
.stapel{position:relative}
.stapel .fw{position:relative;padding:12px 14px 0 0}
.stapel .fw::before{content:"";position:absolute;inset:0 0 14px 14px;background:var(--grad);border-radius:26px;transform:rotate(-2.5deg)}
.stapel .foto{position:relative;border-radius:24px;overflow:hidden;min-height:225px;background:var(--grijs-700);box-shadow:var(--sh)}
.stapel .foto .scene, .stapel .foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stapel .foto .wkv{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,15,24,0) 45%,rgba(22,15,24,.35))}
.stapel .kaartje{position:relative;background:var(--card);border-radius:20px;box-shadow:var(--shl);padding:18px 19px 17px;margin:-62px 14px 0 16px}
.stapel .kaartje h3{font-size:16.5px;letter-spacing:-.25px;line-height:1.35}
.stapel .kaartje p{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.55}
.stapel .kaartje .btn{margin-top:13px}
@media(min-width:760px){
.stapel .foto{min-height:250px}
.stapel .kaartje{margin:-70px 22px 0 24px}
}
/* wiki-bewerkingslaag */
.wikibar{display:flex;align-items:center;gap:10px;background:var(--card);border-left:3px solid var(--a-paars);border-radius:var(--r);padding:11px 15px;box-shadow:var(--sh);font-size:12.5px;color:var(--ink2)}
.wikibar .wi{width:30px;height:30px;border-radius:10px;background:var(--p-paars);color:var(--t-paars);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wikibar b{color:var(--ink)}
.editbtn{display:inline-flex;align-items:center;gap:5px;margin-left:auto;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:800;color:var(--ink2);flex-shrink:0;cursor:pointer}
.editbtn.aan{border-color:var(--gold);background:var(--gold-bg);color:var(--t-goud)}
.editbtn .bi{width:12px;height:12px}
.stap{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--paper)}
.stap:first-of-type{border-top:none}
.stap .nr{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stap b{font-size:13.5px;display:block}
.stap span{font-size:12px;color:var(--ink3);font-weight:600}
/* ===== NACHTMODUS (volgt het apparaat) ===== */
@media (prefers-color-scheme: dark){

.tick b{color:var(--rood-400)}
.zoekbalk{box-shadow:var(--sh)}
.stap .nr{background:var(--ink);color:var(--bg)}
.editbtn{color:var(--ink2)}
img{filter:brightness(.94)}

}
body, .card, .sitefoot, .tick, .zoekbalk{transition:background-color .25s ease,color .25s ease}
@media (prefers-color-scheme: dark){
.stap .nr{background:var(--ink);color:var(--bg)}
.badge.b-pick{color:var(--bg)}
.rank{color:var(--t-goud)}
.editbtn{color:var(--ink2)}
.editbtn.aan{color:var(--t-goud)}
.fdrop button{color:var(--ink)}
.alertbtn{border-color:var(--line);color:var(--ink2)}
}
@media (prefers-color-scheme: dark){

}
@media (prefers-color-scheme: dark){
.pm .rank, .meta .rank, .page .rank, body .rank{color:var(--t-goud)}
}
@media (prefers-color-scheme: dark){
span.rank, .rank{color:var(--t-goud)!important}
}




.opt.gekozen{border-color:var(--e-red)}
.hdr{padding-top:env(safe-area-inset-top,0px)}
/* functionele blokken: paper-vlak, haarlijn, geen schaduw — content = witte kaart met schaduw */
.rail>.card, .fx{background:var(--paper);box-shadow:none;border:1px solid var(--line)}
.rail>.card{padding:14px 15px}
.fx{padding:14px 15px}
@media (prefers-color-scheme: dark){
.rail>.card, .fx{background:var(--paper)}
}
.hscroll{padding-top:5px;padding-bottom:5px}
.gold{color:var(--ink)}
.gold h3{color:var(--t-goud);margin:0 0 6px}
.gold p{color:var(--ink2);font-size:12.5px}
@media (prefers-color-scheme: dark){
}
/* logo: nacht → merkfallback */
/* menu: geen gradientvulling — inkt-pill met merkstip */
.mtab{display:inline-flex;align-items:center}


/* desktop: dieper doek + iets krachtiger schaduw (alleen dagmodus) */

/* stapel-plaat: vaste ademruimte naar buurblokken */
.fw{margin-top:18px;margin-bottom:18px}
@media(min-width:1000px){
.fw{margin-top:28px;margin-bottom:28px}
}
@media (prefers-color-scheme: dark){

.bs{background:var(--card);color:var(--ink)}
}
.kudo{cursor:pointer;transition:transform .14s ease,background .15s,color .15s}
.kudo svg{fill:currentColor}
.kudo.aan{background:var(--p-rood)!important;color:var(--t-rood)!important;border-color:transparent}
.kudomin{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:5px 9px;margin-left:5px;cursor:pointer;color:var(--ink3);transition:background .15s,color .15s,transform .14s;vertical-align:middle}
.kudomin svg{fill:currentColor;display:block}
.kudomin.aan{background:var(--tintb);color:var(--t-blauw);border-color:transparent}
@media (prefers-color-scheme: dark){
}
.kudopaar{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card);vertical-align:middle}
.kudopaar button{border:0;background:none;font:inherit;cursor:pointer;color:var(--ink3);padding:5px 10px;display:inline-flex;align-items:center;transition:background .15s,color .15s}
.kudopaar button svg{fill:currentColor;display:block}
.kp-score{font-weight:800;font-size:12px;color:var(--ink2);align-self:center;min-width:22px;text-align:center;padding:0 2px}
.kp-plus.aan{background:var(--p-rood);color:var(--t-rood)}
.kp-min.aan{background:var(--tintb);color:var(--t-blauw)}
.kp-score.pos{color:var(--t-rood)}
.kp-score.neg{color:var(--t-blauw)}
.kudogroep{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card);vertical-align:middle}
.kudogroep .kudo{border:0!important;border-radius:0!important;margin:0!important;background:transparent!important;padding:5px 10px}
.kudogroep .kudomin{border:0!important;border-radius:0!important;margin:0!important;background:transparent!important;border-left:1.5px solid var(--line)!important;padding:5px 9px}
.kudogroep .kudo.aan{background:var(--p-rood)!important;color:var(--t-rood)!important}
.kudogroep .kudomin.aan{background:var(--tintb)!important;color:var(--t-blauw)!important}
.nbel{position:relative}
.nbadge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;border-radius:8px;background:var(--rood-500);color:var(--grijs-0);font-size:9.5px;font-weight:800;font-style:normal;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--card)}
.npaneel{display:none;position:fixed;top:calc(var(--hd) + 8px);right:12px;width:min(370px,calc(100vw - 24px));background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shl,0 14px 40px rgba(23,20,35,.16));z-index:60;overflow:hidden}
.npaneel.open{display:block}
.nkop{display:flex;justify-content:space-between;align-items:center;padding:13px 15px 9px}
.nkop b{font-size:14px}
.nlees{border:0;background:none;font:inherit;font-size:11.5px;font-weight:800;color:var(--t-paars);cursor:pointer}
.nitem{display:flex;gap:10px;padding:11px 15px;border-top:1px solid var(--line);text-decoration:none;color:inherit;font-size:12.5px;line-height:1.45}
.nitem:hover{background:var(--paper)}
.nitem em{display:block;font-style:normal;font-size:10.5px;color:var(--ink3);font-weight:700;margin-top:2px}
.nitem.gelezen{opacity:.55}
.nstip{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
/* statusbalkzone draagt de headerkleur — site loopt door onder tijd/batterij */
/* bel: altijd zichtbaar, als rond headerknopje */
.nbel{display:inline-flex!important;width:40px;height:40px;min-width:40px;padding:0!important;border-radius:50%;background:var(--card);border:1px solid var(--line);align-items:center;justify-content:center;margin-left:0!important;cursor:pointer;color:var(--ink2)}
/* plus in het menu — grad27 is exclusief voor plus/check-in */
.mtab.plus, .dnav a.plus{background:var(--grad27);color:var(--grijs-0);font-weight:900;padding:8px 15px;border-color:transparent}
.plusitem{display:flex;gap:10px;align-items:center;padding:12px 15px;border-top:1px solid var(--line);text-decoration:none;color:inherit;font-size:13px;font-weight:700}
.plusitem:hover{background:var(--paper)}
.plusitem .pm2{font-size:10.5px;color:var(--t-goud);font-weight:800;margin-left:auto}

/* ——— rustpunt-ronde ——— */
.fab{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:55;box-shadow:0 8px 24px rgba(23,20,35,.22);transition:transform .15s ease}
.fab:active{transform:scale(.94)}
#plusPaneel{top:auto;bottom:calc(82px + env(safe-area-inset-bottom,0px));right:12px;left:auto}
/* statusbalkzone = headerkleur, doek hoort bij de pagina zelf */
html, body{background:var(--card)}
main{background:var(--bg);min-height:100vh}
@media (prefers-color-scheme: dark){
html, body{background:var(--bg)}
}
/* voelbaar app-niveau */
*{-webkit-tap-highlight-color:transparent}
::selection{background:rgba(201,40,47,.16)}
.btn:active, .chip:active, .mtab:active, .dzoek:active, .nbel:active{transform:scale(.965)}
.btn, .chip, .mtab, .card{transition:transform .13s ease,box-shadow .18s ease,background .15s ease,border-color .15s ease}
:focus-visible{outline:2.5px solid var(--rood-500);outline-offset:2px;border-radius:6px}
html{scroll-behavior:smooth}
.s-ico{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.s-ico svg{width:19px;height:19px}
.s-reden{font-size:10.5px;color:var(--ink3);font-weight:700;margin:9px 0 0;padding-top:8px;border-top:1px solid var(--line)}
.s-reden a{color:var(--ink3)}
.chip.uitstand{opacity:.5}
/* —— subtieler topmenu —— */
.menu{background:rgba(253,253,254,.9);backdrop-filter:var(--glas-waas);-webkit-backdrop-filter:var(--glas-waas)}
@media (prefers-color-scheme: dark){
.menu{background:rgba(19,18,24,.9)}
}
.mtab{padding:6px 13px;font-size:13px}
.menu .min{padding-top:7px;padding-bottom:7px}
.dnav a{padding:6.5px 14px;font-size:13.5px}
/* Profiel in de header */
.bs.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* muntenpaneel */
.munten{cursor:pointer}
.mv-r{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0}
.mv-r b{color:var(--t-goud);font-weight:800;white-space:nowrap}
.mv-r b.kan{color:var(--ink)}
/* —— avatar met diepte —— */
.logo3d{display:inline-block;text-decoration:none;perspective:300px}
.logo3d .wm-img, .logo3d .wm-fb svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 3px 4px rgba(23,20,35,.22)) drop-shadow(0 9px 18px rgba(23,20,35,.18));transition:transform .28s cubic-bezier(.2,.9,.3,1.4),filter .28s ease;animation:logozweef 5.5s ease-in-out infinite;transform-style:preserve-3d}
.logo3d:hover .wm-img, .logo3d:hover .wm-fb svg{transform:rotateY(14deg) rotateX(7deg) scale(1.08);filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 5px 7px rgba(23,20,35,.26)) drop-shadow(0 14px 26px rgba(201,40,47,.20))}
@keyframes logozweef{
0%, 100%{transform:translateY(0) rotateY(0)}

50%{transform:translateY(-1.5px) rotateY(-5deg)}
}
@media (prefers-color-scheme: dark){
.logo3d .wm-img, .logo3d .wm-fb svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.14)) drop-shadow(0 3px 5px rgba(0,0,0,.5)) drop-shadow(0 10px 20px rgba(0,0,0,.45))}
}
@media (prefers-reduced-motion: reduce){
.logo3d .wm-img, .logo3d .wm-fb svg{animation:none}
}
/* welkom compact */
#welk{padding:13px 16px}
#welk h1, #welk .welkkop{font-size:14.5px;margin:2px 0 4px}
#welk p{font-size:12px;margin:0}
#welk .h6{font-size:9.5px}
.welksluit{position:absolute;top:9px;right:11px;border:0;background:var(--paper);width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:800;color:var(--ink3);cursor:pointer}
/* ticker-rotator */
.tick{cursor:pointer}
#tickRot{transition:opacity .35s ease}
/* —— header als glas, beide modi —— */

@media (prefers-color-scheme: dark){
.hdr{background:var(--glas)!important}
}
/* festivalpills klikbaar */
.pin{cursor:pointer}
.pin:active{transform:scale(.96)}
/* ticker: geen layout-sprong bij rotatie */
.tick{position:relative;padding-right:142px;display:flex;align-items:center}
.tickbtn{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
/* beeldvariatie: zelfde bronfoto, andere tint per positie */
[data-livephoto]:nth-of-type(3n) img, [data-ft]:nth-of-type(3n) [data-echt]{filter:hue-rotate(14deg) saturate(1.06)}
[data-livephoto]:nth-of-type(3n+2) img, [data-ft]:nth-of-type(3n+2) [data-echt]{filter:hue-rotate(-12deg) brightness(1.04)}
.tick{height:48px;min-height:0}
#tickRot{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ═ verloop-glas: boven massief (=statuszone), onder transparant ═ */
.hdr{background:linear-gradient(180deg,var(--grijs-0) 0%,var(--grijs-0) 30%,rgba(253,253,254,.70) 100%)!important;backdrop-filter:var(--glas-waas)!important;-webkit-backdrop-filter:var(--glas-waas)!important}
@media (prefers-color-scheme: dark){
.hdr{background:linear-gradient(180deg,var(--grijs-950) 0%,var(--grijs-950) 30%,rgba(19,18,24,.70) 100%)!important}
}
/* gesponsorde kaart: leesbaar in beide modi */
.spons{color:var(--grijs-800)}
.spons h3, .spons p{color:var(--grijs-800)}
.spons .h6{color:var(--blauw-700)}
@media (prefers-color-scheme: dark){
.spons{background:linear-gradient(135deg,var(--grijs-800),var(--grijs-900));border-color:var(--blauw-700);color:var(--grijs-100)}
.spons h3, .spons p{color:var(--grijs-100)}
.spons .h6{color:var(--blauw-200)}
}
/* rail-scroll-fix: sticky maar nooit afgekapt */
@media (min-width:1000px){
.rail{max-height:calc(100vh - var(--hd) - 34px);overflow-y:auto;scrollbar-width:thin;padding-right:2px}
}
.bwol{display:none;position:fixed;inset:0;background:rgba(20,14,22,.45);z-index:80;align-items:flex-end;justify-content:center}
.bwol.open{display:flex}
.bw{background:var(--card);border-radius:22px 22px 0 0;width:min(560px,100vw);max-height:86vh;overflow-y:auto;box-shadow:0 -12px 40px rgba(0,0,0,.25);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
@media(min-width:700px){
.bwol{align-items:center}
.bw{border-radius:22px}
}
.bwstap{padding:2px 17px 10px}
.bwtype{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:15px;padding:12px 14px;font:inherit;cursor:pointer;margin-bottom:8px;font-size:19px}
.bwtype:hover{background:var(--paper)}
.bwtype span{flex:1;min-width:0}
.bwtype b{display:block;font-size:13.5px}
.bwtype i{font-style:normal;font-size:11px;color:var(--ink3);font-weight:700}
.bwtype em{font-style:normal;font-size:11px;font-weight:800;color:var(--fl-goud)}
.bwin{width:100%;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 13px;font:inherit;font-size:13px;color:var(--ink);margin-bottom:9px;box-sizing:border-box}
textarea.bwin{min-height:110px;resize:vertical}
.bwterug{border:0;background:none;font:inherit;font-size:11.5px;font-weight:800;color:var(--ink3);cursor:pointer;padding:0;margin-bottom:10px}
.bwrij{display:flex;gap:8px;align-items:center;padding:7px 4px;border-top:1px solid var(--line);font-size:12.5px}
.bwrij b[contenteditable]{flex:1;padding:2px 5px;border-radius:7px;outline:none}
.bwrij b[contenteditable]:focus{background:var(--paper);box-shadow:0 0 0 2px #E11D4844}
.bwrij span[contenteditable]{width:74px;padding:2px 5px;border-radius:7px;outline:none;color:var(--ink3);font-weight:700}
.bwrij button{border:0;background:none;color:var(--ink3);cursor:pointer;font-weight:800;font-size:14px}
.bwfotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:4px 0 10px}
.bwfotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:11px;border:1px solid var(--line)}
/* layout-optimalisatie */
.inner>.sitefoot{grid-column:1/-1}
@media(min-width:1000px){
body main .inner:not(:has(.rail)){grid-template-columns:1fr}
}
/* railpin-model: sticky in binnenwrapper, rail-kolom strekt mee — overlap onmogelijk */
body main .inner>.rail{position:static;align-self:stretch;max-height:none;overflow:visible;top:auto}
.railpin{display:flex;flex-direction:column;gap:14px}
@media(min-width:1000px){
.railpin{position:sticky;top:calc(var(--hd) + 20px);max-height:calc(100vh - var(--hd) - 34px);overflow-y:auto}
}
/* footer-wrapper altijd gridbreed als hij in het grid genest raakt */
body main .inner>.inner{grid-column:1/-1;max-width:none;width:100%}
/* design-unificatie: één chip/tab-taal site-breed */
body main .chip{border:1.5px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:700;background:var(--card);color:var(--ink2)}
body main .chip.on, body main .chips .chip.on{border-color:var(--fl-rood);color:var(--fl-rood);background:color-mix(in srgb,var(--fl-rood) 7%,var(--card))}
.chips{gap:6px}


/* ── gedeelde laag ── */
/* ── Archivo, zelf gehost ─────────────────────────────────────────
   Drie gewichten, onderverzameld tot de tekens die wij gebruiken:
   Latijn, Latin-1, diakrieten, en-dash, echt minteken, euro, pijlen.
   Samen 48 KB.

   Archivo bleef, maar wordt kalmer gezet. Het probleem zat niet in de
   letter maar in de instelling: 800 met -1,2px tracking op de titel en
   800 met -0,6px op elke kaartkop. Vier kaarten onder elkaar met een
   vette, samengeknepen kop leest als vier keer schreeuwen. Nu 32/800
   met -0,6 en 20/600 met -0,1. Zie de schaal onderaan fl27.css.

   Waarom zelf hosten: de regressietest kan het lettertype zo zien. Via
   Google laadde het niet in de testomgeving, en dan meet je niets.
   Scheelt bovendien een verzoek naar een derde partij en een DNS-
   lookup vóór de eerste letter verschijnt.                          */
@font-face{ font-family:Archivo; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/Archivo-400.woff2") format("woff2") }
@font-face{ font-family:Archivo; font-style:normal; font-weight:600;
  font-display:swap; src:url("../fonts/Archivo-600.woff2") format("woff2") }
@font-face{ font-family:Archivo; font-style:normal; font-weight:800;
  font-display:swap; src:url("../fonts/Archivo-800.woff2") format("woff2") }

/* ═══════════════════════════════════════════════════════════════════
   FESTILEAKS — HET PALET
   Eén bron voor alle kleur op de hele site, in beide weergaven.

   De basis blijft wat Festileaks is: de druppel, rood, blauw, grijs.
   Wat verandert is de discipline. Hiervoor stonden er 107 losse
   hexkleuren in de stylesheet — 17 blauwen, 8 roden, 7 paarsen, 64
   grijstinten. Elk scherm koos zijn eigen tint. Daardoor lijken de
   achievements, de rangbalk en de feed op drie verschillende sites.

   Nu is er één schaal per familie. Wil je een kleur die er niet in
   staat, dan hoort die er niet — dat is het punt van een palet.

   SEMANTIEK — deze afspraken zijn ouder dan dit bestand en blijven:
     rood    "dit kun je doen"      knoppen, acties, actieve staat
     blauw   "dit is gemeten"       cijfers, data, verificatie
     goud    "dit heb je verdiend"  munten, rangen, achievements
     grijs   de rest

   Goud wordt nooit rood. Verdiend is iets anders dan klikbaar.

   PAARS is geen eigen kleur meer. Het was een vierde familie met zeven
   varianten; nu is het het mengpunt van rood en blauw en bestaat het
   alleen binnen een verloop. Dat is ook wat het altijd al betekende:
   de overgang tussen doen en gemeten.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── ROOD ── merk en actie ─────────────────────────────────────── */
  --rood-50:  #FFF1F4;
  --rood-100: #FFDCE4;
  --rood-200: #FBB6C6;
  --rood-400: #F2456F;
  --rood-500: #E11D48;   /* de merkkleur — deze verandert niet */
  --rood-600: #C2143A;
  --rood-700: #940E2C;

  /* ── BLAUW ── data en verificatie ──────────────────────────────── */
  --blauw-50:  #ECF9FF;
  --blauw-100: #CFF0FF;
  --blauw-200: #94DEFF;
  --blauw-400: #29BFFF;
  --blauw-500: #00B4FF;  /* het merkblauw — deze verandert niet */
  --blauw-600: #0090CC;
  --blauw-700: #036391;

  /* ── GOUD ── verdiend ──────────────────────────────────────────── */
  --goud-50:  #FDF6E7;
  --goud-100: #F7E7C0;
  --goud-400: #DCA92C;
  --goud-500: #C9921A;   /* rang, munten, achievements */
  --goud-600: #A2740F;
  --goud-700: #75530A;

  /* ── GRIJS ── één neutrale schaal met een lichte blauwzweem, zodat
       het naast het merkblauw niet vuil oogt ─────────────────────── */
  --grijs-0:   #FFFFFF;
  --grijs-25:  #FAFBFD;
  --grijs-50:  #F4F6FA;
  --grijs-100: #E9ECF3;
  --grijs-200: #D8DDE8;
  --grijs-300: #BCC3D2;
  --grijs-400: #8F98AC;
  --grijs-500: #6B7488;
  --grijs-600: #4E5566;
  --grijs-700: #363C4A;
  --grijs-800: #232733;
  --grijs-900: #171A23;
  --grijs-950: #0F1219;

  /* ── VERLOPEN ── rood naar blauw, altijd dezelfde richting ─────── */
  --verloop-merk:  linear-gradient(135deg, var(--rood-500), var(--blauw-500));
  --verloop-zacht: linear-gradient(135deg, var(--rood-400), var(--blauw-400));
  --verloop-goud:  linear-gradient(135deg, var(--goud-400), var(--goud-600));

  /* ── RUIMTE ── één schaal, geen losse getallen meer ────────────── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;

  /* ── RONDING ─────────────────────────────────────────────────── */
  --rond-s: 8px;  --rond-m: 12px;  --rond-l: 16px;  --rond-xl: 22px;
  --rond-vol: 999px;

  /* ── BEWEGING ── één curve, drie snelheden ───────────────────── */
  --curve: cubic-bezier(.22,.61,.36,1);
  --snel-1: 120ms;  --snel-2: 220ms;  --snel-3: 380ms;
}

/* ── LICHTE WEERGAVE ─────────────────────────────────────────────── */
:root, [data-thema="licht"] {
  --bg:        var(--grijs-100);
  --card:      var(--grijs-0);
  --paper:     var(--grijs-100);
  --line:      var(--grijs-200);
  --line-zacht:var(--grijs-100);

  --ink:       var(--grijs-900);
  --ink2:      var(--grijs-600);
  --ink3:      var(--grijs-600);

  --fl-rood:   var(--rood-500);
  --fl-rood-op:var(--rood-50);
  --fl-blauw:  var(--blauw-600);
  --fl-blauw-op:var(--blauw-50);
  --fl-goud:   var(--goud-600);
  --fl-goud-op:var(--goud-50);

  /* glas: op licht een witte waas met een fijne rand */
  --glas:       rgba(255,255,255,.80);
  --glas-rand:  rgba(255,255,255,.9);
  --glas-waas:  saturate(150%) blur(18px);

  --sh-1: 0 1px 2px rgba(23,26,35,.05);
  --sh-2: 0 2px 8px rgba(23,26,35,.07);
  --sh-3: 0 8px 24px rgba(23,26,35,.09);
  --sh-4: 0 18px 44px rgba(23,26,35,.13);
  --sh-rood: 0 6px 18px rgba(225,29,72,.24);
}

/* ── DONKERE WEERGAVE ────────────────────────────────────────────── */
[data-thema="donker"] {
  --bg:        var(--grijs-950);
  --card:      var(--grijs-900);
  --paper:     var(--grijs-800);
  --line:      rgba(255,255,255,.10);
  --line-zacht:rgba(255,255,255,.06);

  --ink:       #F2F4F9;
  --ink2:      var(--grijs-300);
  --ink3:      var(--grijs-400);

  --fl-rood:   var(--rood-400);
  --fl-rood-op:rgba(242,69,111,.14);
  --fl-blauw:  var(--blauw-400);
  --fl-blauw-op:rgba(41,191,255,.13);
  --fl-goud:   var(--goud-400);
  --fl-goud-op:rgba(220,169,44,.14);

  /* glas: op donker een donkere waas, niet een lichte — anders
     verschijnt er een grijze mist over het beeld */
  --glas:      rgba(23,26,35,.68);
  --glas-rand: rgba(255,255,255,.08);
  --glas-waas: saturate(140%) blur(20px);

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 10px rgba(0,0,0,.45);
  --sh-3: 0 10px 28px rgba(0,0,0,.5);
  --sh-4: 0 20px 50px rgba(0,0,0,.58);
  --sh-rood: 0 6px 20px rgba(225,29,72,.34);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --bg:        var(--grijs-950);
    --card:      var(--grijs-900);
    --paper:     var(--grijs-800);
    --line:      rgba(255,255,255,.10);
    --line-zacht:rgba(255,255,255,.06);
    --ink:       #F2F4F9;
    --ink2:      var(--grijs-300);
    --ink3:      var(--grijs-400);
    --fl-rood:   var(--rood-400);
    --fl-rood-op:rgba(242,69,111,.14);
    --fl-blauw:  var(--blauw-400);
    --fl-blauw-op:rgba(41,191,255,.13);
    --fl-goud:   var(--goud-400);
    --fl-goud-op:rgba(220,169,44,.14);
    --glas:      rgba(23,26,35,.68);
    --glas-rand: rgba(255,255,255,.08);
    --glas-waas: saturate(140%) blur(20px);
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 2px 10px rgba(0,0,0,.45);
    --sh-3: 0 10px 28px rgba(0,0,0,.5);
    --sh-4: 0 20px 50px rgba(0,0,0,.58);
    --sh-rood: 0 6px 20px rgba(225,29,72,.34);
  }
}

/* ═══ GLAS ═══════════════════════════════════════════════════════════
   Eén klasse voor alles wat over de inhoud heen zweeft: de kopbalk,
   de onderbalk, overlays. Niet als versiering maar omdat je dan ziet
   dat er iets ónder doorloopt — dat is wat een zwevende balk moet
   vertellen.                                                          */
.glas{
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-waas);
  backdrop-filter: var(--glas-waas);
  border: 1px solid var(--glas-rand);
}
@supports not (backdrop-filter: blur(1px)){
  .glas{ background: var(--card); }
}

/* ═══ BEWEGING ═══════════════════════════════════════════════════════
   Alles wat reageert op aanraking gebruikt dezelfde curve en dezelfde
   drie snelheden. Verschillende timings per component is precies wat
   een site onaf laat voelen.                                          */
.klikbaar,button,a.btn,.chip,.artchip,.rkeus,.rolknop{
  transition: background var(--snel-1) var(--curve),
              border-color var(--snel-1) var(--curve),
              color var(--snel-1) var(--curve),
              box-shadow var(--snel-2) var(--curve),
              transform var(--snel-1) var(--curve);
}
button:active,a.btn:active{ transform: translateY(1px); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ═══ OUDE NAMEN ═════════════════════════════════════════════════════
   De stylesheet is jarenlang gegroeid en gebruikt namen als --t-groen
   voor iets dat blauw is, en --p-paars voor een vlak dat nu blauw is.
   Die namen staan op honderden plekken. In plaats van ze allemaal te
   herschrijven — met het risico dat er één blijft hangen — wijzen ze
   hier naar het palet. Eén bron, oude namen als doorgeefluik.

   Nieuwe code gebruikt de palet-tokens rechtstreeks.                  */
:root, [data-thema="licht"] {
  --fl-cyaan:    var(--blauw-600);
  --fl-lavendel: var(--blauw-500);
  --fl-blauw:    var(--blauw-600);
  --fl-paars:    var(--blauw-500);

  --t-rood:  var(--rood-600);   --p-rood:  var(--rood-50);
  --t-groen: var(--blauw-700);  --p-groen: var(--blauw-50);
  --t-blauw: var(--blauw-700);
  --t-paars: var(--blauw-700);  --p-paars: var(--blauw-50);
  --a-paars: var(--blauw-600);
  --t-goud:  var(--goud-700);   --gold-bg: var(--goud-50);

  --tint:  var(--rood-50);
  --tintb: var(--blauw-50);
  --tintr: color-mix(in srgb, var(--rood-500) 11%, transparent);

  --afg-blauw1: var(--blauw-500);
  --afg-paars2: var(--blauw-400);
  --n-grijs2:   var(--grijs-400);

  --schaduw-sm:    var(--sh-1);
  --schaduw-md:    var(--sh-2);
  --schaduw-gloed: var(--sh-rood);

  --grad-primair: var(--verloop-merk);
}

[data-thema="donker"] {
  --fl-cyaan:    var(--blauw-400);
  --fl-lavendel: var(--blauw-400);
  --fl-blauw:    var(--blauw-400);
  --fl-paars:    var(--blauw-400);

  --t-rood:  var(--rood-200);   --p-rood:  rgba(242,69,111,.14);
  --t-groen: var(--blauw-200);  --p-groen: rgba(41,191,255,.13);
  --t-blauw: var(--blauw-200);
  --t-paars: var(--blauw-200);  --p-paars: rgba(41,191,255,.13);
  --a-paars: var(--blauw-400);
  --t-goud:  var(--goud-400);   --gold-bg: rgba(220,169,44,.14);

  --tint:  rgba(242,69,111,.13);
  --tintb: rgba(41,191,255,.12);
  --tintr: color-mix(in srgb, var(--rood-400) 16%, transparent);

  --afg-blauw1: var(--blauw-400);
  --afg-paars2: var(--blauw-200);
  --n-grijs2:   var(--grijs-500);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --fl-cyaan: var(--blauw-400);  --fl-lavendel: var(--blauw-400);
    --fl-blauw: var(--blauw-400);  --fl-paars:    var(--blauw-400);
    --t-rood: var(--rood-200);     --p-rood:  rgba(242,69,111,.14);
    --t-groen: var(--blauw-200);   --p-groen: rgba(41,191,255,.13);
    --t-blauw: var(--blauw-200);
    --t-paars: var(--blauw-200);   --p-paars: rgba(41,191,255,.13);
    --a-paars: var(--blauw-400);
    --t-goud: var(--goud-400);     --gold-bg: rgba(220,169,44,.14);
    --tint:  rgba(242,69,111,.13);
    --tintb: rgba(41,191,255,.12);
    --tintr: color-mix(in srgb, var(--rood-400) 16%, transparent);
    --afg-blauw1: var(--blauw-400); --afg-paars2: var(--blauw-200);
    --n-grijs2: var(--grijs-500);
  }
}

/* De duotoon-verlopen op beeldvlakken: dezelfde as als het merkverloop,
   zodat een foto met een tint er niet uitziet als een andere huisstijl. */
:root{
  --duo-rood:   linear-gradient(150deg, var(--rood-700), var(--rood-500) 55%, var(--rood-400));
  --duo-blauw:  linear-gradient(150deg, var(--blauw-700), var(--blauw-600) 55%, var(--blauw-400));
  --duo-paars:  linear-gradient(150deg, var(--rood-600), var(--blauw-600) 78%);
  --duo-goud:   linear-gradient(150deg, var(--goud-700), var(--goud-500) 55%, var(--goud-400));
  --duo-groen:  linear-gradient(150deg, var(--blauw-700), var(--blauw-500) 60%, var(--blauw-200));
  --duo-oranje: linear-gradient(150deg, var(--goud-700), var(--goud-500) 58%, var(--goud-400));
  --duo-geel:   linear-gradient(150deg, var(--goud-600), var(--goud-400) 60%, var(--goud-100));
  --duo-inkt:   linear-gradient(150deg, var(--grijs-950), var(--grijs-700));
}

/* ═══ HERSTELDE TOKENS ═══════════════════════════════════════════════
   Bij het doorvoeren van het palet heb ik 179 per-pagina :root-blokken
   verwijderd omdat ze het palet overschreven. In diezelfde blokken
   stonden echter ook niet-kleur-tokens: --rl en --r (border-radius),
   --grad en --grad27 (de merkverlopen) en een reeks losse kleuren. Die
   verdwenen mee.

   Gevolg: 19 tokens werden nog wél gebruikt maar bestonden niet meer —
   --grad 471 keer, --e-red 451, --rl 272. Al die declaraties waren
   ongeldig en vielen terug op de standaardwaarde. Zichtbaar aan onder
   meer de hero op de artikelpagina, die zijn verloop kwijt was.

   Ze staan hier terug, maar nu afgeleid van het palet in plaats van als
   losse waarden. Nieuwe code gebruikt de palet-tokens rechtstreeks.    */
:root{
  /* maatvoering */
  --rl: var(--rond-xl);          /* was 22px */
  --r:  var(--rond-l);           /* was 20px */

  /* losse kleuren die als merkkleur werden gebruikt */
  --e-red:   var(--rood-500);    /* was #DC2E2E */
  --e-blue:  var(--blauw-500);
  --gold:    var(--goud-500);
  --pink:    var(--rood-400);    /* was #FF5C87 */
  --pink-d:  var(--rood-500);
  --green:   var(--blauw-600);   /* groen bestaat niet in het palet */
  --n-inkt2: var(--grijs-800);

  /* aflopers in verlopen */
  --afg-rood1:  var(--rood-500);
  --afg-goud1:  var(--goud-400);
  --afg-paars1: var(--blauw-400);   /* paars is blauw geworden */

  /* de merkverlopen: dezelfde as als --verloop-merk, rood naar blauw */
  --grad:     linear-gradient(135deg, var(--rood-400) 0%, var(--blauw-400) 100%);
  --grad27:   linear-gradient(100deg, var(--rood-500) 0%, var(--blauw-500) 100%);
  --gradsoft: linear-gradient(135deg,
                color-mix(in srgb, var(--rood-500) 8%, transparent),
                color-mix(in srgb, var(--blauw-500) 8%, transparent));
}

/* ═══ LEESBAARHEID ═══════════════════════════════════════════════════
   De audit mat elke tekstregel tegen WCAG AA: 4,5 voor gewone tekst,
   3,0 voor grote of vette tekst. De gevallen hieronder zakten daar
   doorheen omdat er een merkkleur als tekstkleur werd gebruikt.

   Merkkleuren zijn gekozen om op te vallen op een vlak, niet om als
   letters gelezen te worden. #00B4FF haalt op wit maar 2,34. Twee
   treden dieper leest hetzelfde blauw als 7,4 — nog steeds herkenbaar
   Festileaks-blauw, maar dan ook echt leesbaar.

   Deze sectie staat na de compatibiliteitslaag omdat de oude namen
   elkaar daar op sommige plekken nog overschrijven. Opruimen van die
   laag is werk voor later; dit is de bovenste, meetbare waarheid.     */

:root, [data-thema="licht"]{
  --e-blue:      var(--blauw-700);
  --fl-blauw:    var(--blauw-700);
  --fl-cyaan:    var(--blauw-700);
  --fl-lavendel: var(--blauw-700);
  --t-blauw:     var(--blauw-700);
  --t-groen:     var(--blauw-700);
  --t-paars:     var(--blauw-700);
  --t-goud:      var(--goud-700);
  --ink3:        var(--grijs-600);
}

/* In de donkere weergave is het omgekeerde waar: daar moet de tekst
   juist lichter dan de merkkleur, anders verdwijnt hij in het vlak. */
[data-thema="donker"]{
  --e-blue:      var(--blauw-200);
  --fl-blauw:    var(--blauw-400);
  --fl-cyaan:    var(--blauw-400);
  --fl-lavendel: var(--blauw-400);
  --t-blauw:     var(--blauw-200);
  --t-groen:     var(--blauw-200);
  --t-paars:     var(--blauw-200);
  --t-goud:      var(--goud-400);
  --ink3:        var(--grijs-400);
}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="licht"]){
    --e-blue: var(--blauw-200);   --fl-blauw: var(--blauw-400);
    --fl-cyaan: var(--blauw-400); --fl-lavendel: var(--blauw-400);
    --t-blauw: var(--blauw-200);  --t-groen: var(--blauw-200);
    --t-paars: var(--blauw-200);  --t-goud: var(--goud-400);
    --ink3: var(--grijs-400);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FL27 v2 — de tokenlaag van de nieuwe huisstijl
   Bron: docs/design_handoff_fl27_v2/README.md
   ═══════════════════════════════════════════════════════════════════

   Stap 1 van vier. Hier staan alleen de waarden; er is nog geen enkele
   pagina die ze gebruikt. Dat is expres: zo kan de rest in stappen
   overgaan zonder dat er tussendoor iets half verbouwd is.

   WAAROM DE PREFIX --v2-
   De rolnamen uit het ontwerp — bg, card, paper, lijn, ink, ink2,
   ink3 — bestaan alle zeven al in FL27, met andere waarden. Ze hier
   overschrijven zou elke pagina in één klap veranderen, en de opdracht
   is uitdrukkelijk om nog geen pagina aan te raken. Dus krijgen ze een
   eigen ruimte. Bij stap 3 en 4 gaan de componenten er één voor één
   naartoe; als de oude namen nergens meer worden gebruikt, vervalt de
   prefix in één hernoemronde.

   WIT EN NACHT
   Het ontwerp zegt: wit is leidend, nacht staat er gelijkwaardig
   naast, één set namen en twee sets waarden. Dat laatste staat er nu.
   Het eerste nog niet: FL27 opent op dit moment in nacht, en de
   schakelaar gebruikt `data-thema` met `licht`/`donker` en de
   localStorage-sleutel `flThema`. Het ontwerp vraagt om
   `fl27v2-weergave` met `wit`/`nacht`.

   Die twee dingen — welke weergave standaard is, en hoe de sleutel
   heet — zijn zichtbare gedragswijzigingen en horen dus niet in de
   tokenstap. De v2-waarden hangen daarom voorlopig aan de bestaande
   schakelaar: licht krijgt wit, donker krijgt nacht. Werkt vandaag,
   en de omzetting is later één plek.
   ─────────────────────────────────────────────────────────────────── */

/* ── kleur ── wit is leidend, dus dit is de basiswaarde ───────────── */
:root, [data-thema="licht"]{
  --v2-bg:          #F4F6FA;   /* paginavlak */
  --v2-card:        #FFFFFF;   /* kaarten, balken */
  --v2-paper:       #F4F6FA;   /* vlak binnen een kaart, advertentiekop */
  --v2-lijn:        #E9ECF3;   /* randen, scheidingslijnen */
  --v2-lijn-sterk:  #D8DDE8;   /* nullijn in meetbalken, secundaire knoprand */
  --v2-ink:         #171A23;   /* koppen en waarden */
  --v2-ink2:        #4E5566;   /* broodtekst */
  --v2-ink3:        #6B7488;   /* labels en metadata */

  --v2-rood:        #E11D48;   /* dit kun je doen */
  --v2-blauw:       #00B4FF;   /* dit is gemeten — als vlak */
  --v2-blauw-tekst: #036391;   /* gemeten getallen in tekst, contrast op wit */
  --v2-goud:        #C9921A;   /* dit heb je verdiend */
  --v2-goud-diep:   #75530A;   /* onderkant van het gouden verloop */
  --v2-goud-rand:   #F7E7C0;   /* rand om verdiend-blokken */

  /* Merkverloop. Uitsluitend als zacht vlak achter een merkmoment:
     festivalhero, awards, wrapped. Niet op knoppen, niet op chips,
     niet op avatars. */
  --v2-verloop-merk: linear-gradient(135deg,
                       rgba(225,29,72,.09), rgba(0,180,255,.09));
  /* Het gouden verloop is wél gevuld: verdiend mag glanzen. */
  --v2-verloop-goud: linear-gradient(180deg,
                       var(--v2-goud-diep), var(--v2-goud));
}

/* ── kleur ── nacht ──────────────────────────────────────────────── */
[data-thema="donker"]{
  --v2-bg:          #0F1219;
  --v2-card:        #171A23;
  --v2-paper:       #232733;
  --v2-lijn:        rgba(255,255,255,.10);
  --v2-lijn-sterk:  rgba(255,255,255,.18);
  --v2-ink:         #F2F4F9;
  --v2-ink2:        #BCC3D2;
  --v2-ink3:        #8F98AC;

  --v2-rood:        #F2456F;
  --v2-blauw:       #29BFFF;
  /* In nacht is er geen contrastprobleem, dus vlak en tekst delen
     dezelfde waarde. */
  --v2-blauw-tekst: #29BFFF;
  --v2-goud:        #DCA92C;
  --v2-goud-diep:   #A2740F;
  --v2-goud-rand:   rgba(220,169,44,.34);

  --v2-verloop-merk: linear-gradient(135deg,
                       rgba(242,69,111,.16), rgba(41,191,255,.14));
}

/* Volgt het apparaat zolang de bezoeker zelf niets heeft gekozen. */
@media (prefers-color-scheme: dark){
  :root:not([data-thema="licht"]){
    --v2-bg:          #0F1219;
    --v2-card:        #171A23;
    --v2-paper:       #232733;
    --v2-lijn:        rgba(255,255,255,.10);
    --v2-lijn-sterk:  rgba(255,255,255,.18);
    --v2-ink:         #F2F4F9;
    --v2-ink2:        #BCC3D2;
    --v2-ink3:        #8F98AC;

    --v2-rood:        #F2456F;
    --v2-blauw:       #29BFFF;
    --v2-blauw-tekst: #29BFFF;
    --v2-goud:        #DCA92C;
    --v2-goud-diep:   #A2740F;
    --v2-goud-rand:   rgba(220,169,44,.34);

    --v2-verloop-merk: linear-gradient(135deg,
                         rgba(242,69,111,.16), rgba(41,191,255,.14));
  }
}

/* ── ruimte, ronding, diepte, beweging, raster ────────────────────
   Deze veranderen niet mee met de weergave, dus één blok.          */
:root{
  /* Zes stappen. FL27 had er acht; de twee grootste vervallen. */
  --v2-sp-1: 4px;
  --v2-sp-2: 8px;
  --v2-sp-3: 12px;
  --v2-sp-4: 16px;
  --v2-sp-5: 24px;
  --v2-sp-6: 32px;

  /* Vaste maten die het ontwerp los benoemt, zodat een kaart niet
     per component een eigen padding kan krijgen. */
  --v2-kaart-padding:  18px;
  --v2-kaart-afstand:  16px;
  --v2-kolom-afstand:  24px;

  /* Ronding per rol, niet per maat. Rechte hoeken markeren meting,
     ronde hoeken markeren inhoud — dat onderscheid is de regel. */
  --v2-rond-kaart: 16px;   /* kaart, hero, artikelblok */
  --v2-rond-foto:  12px;   /* foto in een kaart */
  --v2-rond-data:   4px;   /* tabel, meetblok, schema, advertentie */
  --v2-rond-pil:  999px;   /* knop, chip, badge, saldo */

  /* Twee treden, en die worden zelden gebruikt. Kaarten hebben géén
     schaduw: een haarlijn van 1px doet het scheiden. */
  --v2-sh-rij:     0 1px 2px rgba(23,26,35,.05);
  --v2-sh-overlay: 0 10px 28px rgba(0,0,0,.5);

  --v2-curve:  cubic-bezier(.22,.61,.36,1);
  --v2-snel-1: 120ms;   /* staatswisseling */
  --v2-snel-2: 220ms;   /* kleine overgang */
  --v2-snel-3: 380ms;   /* eenmalige entree van een kolom */

  --v2-leeskolom:  760px;
  --v2-inhoud:    1120px;
  --v2-rail:       328px;
  --v2-breek-s:    760px;
  --v2-breek-m:   1000px;

  --v2-raakvlak:      44px;
  --v2-focus-dikte:  2.5px;
  --v2-focus-offset:   2px;
}

/* Beweging is een voorkeur, geen versiering. */
@media (prefers-reduced-motion: reduce){
  :root{ --v2-snel-1: 0ms; --v2-snel-2: 0ms; --v2-snel-3: 0ms }
}

/* ═══════════════════════════════════════════════════════════════
   FESTILEAKS FL27 — gedeelde ontwerplaag
   Eén bestand, geladen als laatste op élke pagina.
   Hierin: paletsluiting, beeldsysteem, lege staten, kruimelpad, railbeleid en breedtebeleid. Pagina-eigen CSS blijft inline.
   ═══════════════════════════════════════════════════════════════ */
/* ── 1. PALET: gaten dichten en drift terugdraaien ───────────── */
:root{/* ontbrekende duotonen — acts.html verwees hiernaar zonder dat ze bestonden */
  --duo-oranje:linear-gradient(150deg,var(--grijs-800),var(--goud-600) 60%,var(--goud-400));/* semantische lagen */
  --foto-doek:var(--grijs-800);--skelet1:rgba(139,145,153,.13);--skelet2:rgba(139,145,153,.24);--rail-b:328px;--lees-max:760px;--breed-max:1120px}
@media (prefers-color-scheme: dark){

:root{--skelet1:rgba(255,255,255,.06);--skelet2:rgba(255,255,255,.12)}

}
/* ── 2. BEELDSYSTEEM ─────────────────────────────────────────────
   Elk beeldslot is een .flfoto: een afgewerkt duotoon-vlak dat er
   ook zónder foto uitziet als een keuze. Laadt de echte foto, dan
   vervaagt die eroverheen. Mislukt het, dan blijft het vlak staan —
   nooit meer een gebroken-afbeeldingicoon.                        */
.flfoto{display:block;position:relative;overflow:hidden;isolation:isolate;background:var(--duo-inkt);background-image:var(--tone,var(--duo-inkt));border-radius:14px}
.flfoto::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 90% at var(--spx,18%) var(--spy,-10%),rgba(255,255,255,.28),transparent 58%),
    radial-gradient(100% 80% at 108% 112%,rgba(0,0,0,.42),transparent 56%)}
.flfoto::after{content:'';position:absolute;inset:-40%;z-index:2;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23g)'/></svg>")}
/* monogram — grote, halfdoorzichtige merkletter als bewuste vulling */
.flfoto .mono{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  font-family:Archivo,system-ui,sans-serif;font-weight:800;letter-spacing:-.05em;
  font-size:clamp(28px,42cqw,84px);line-height:1;
  color:rgba(255,255,255,.19);text-shadow:0 2px 18px rgba(0,0,0,.28);
  user-select:none;container-type:inline-size}
.flfoto{container-type:inline-size}
/* de echte foto */
.flfoto>img{position:absolute;inset:0;z-index:4;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease}
.flfoto>img.geladen{opacity:1}
.flfoto>img.stuk{display:none}
/* leesbaarheidssluier voor tekst óp beeld */
.flfoto .sluier{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(to top,rgba(12,10,18,.82) 0%,rgba(12,10,18,.32) 42%,transparent 72%)}
.flfoto .opdruk{position:absolute;z-index:6;left:0;right:0;bottom:0;padding:13px 14px;color:var(--grijs-0)}
/* verhoudingen */
.flfoto.r-vier{aspect-ratio:4/3}
.flfoto.r-breed{aspect-ratio:16/9}
.flfoto.r-vierkant{aspect-ratio:1/1}
.flfoto.r-portret{aspect-ratio:3/4}
.flfoto.r-band{aspect-ratio:21/9}
/* bestaande beeldslots meenemen in hetzelfde systeem */
body main .pimg, body main .foto, body .pcard>img, body main [data-livephoto]{background-image:var(--tone,var(--duo-inkt))}
body img[data-echt]{transition:opacity .45s ease}
body img[data-echt].stuk, body img.liveimg.stuk{display:none}
/* ── 3. SKELET & LEGE STATEN ─────────────────────────────────────
   Eén taal voor "komt eraan" en "is er niet".                     */
@keyframes flpuls{

0%,100%{opacity:1}50%{opacity:.55}

}
.skelet{background:linear-gradient(100deg,var(--skelet1) 30%,var(--skelet2) 50%,var(--skelet1) 70%);
  background-size:220% 100%;border-radius:8px;animation:flschuif 1.5s linear infinite}
@keyframes flschuif{

from{background-position:120% 0}

to{background-position:-120% 0}

}
.skelet.regel{height:11px;margin:7px 0}
.skelet.regel.kort{width:52%}
.skelet.blok{height:130px;border-radius:14px}
@media (prefers-reduced-motion:reduce){

.skelet{animation:none}

}
body main .leeg, body main .zk-leeg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-align:center;padding:34px 22px;border-radius:16px;
  border:1.5px dashed var(--line);background:var(--paper)}
body main .leeg .leegmerk{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--duo-inkt);color:rgba(255,255,255,.75);font-size:19px;flex:none}
body main .leeg b{font-size:14px;font-weight:800;color:var(--ink)}
body main .leeg p{margin:0;font-size:12.5px;color:var(--ink2);max-width:38ch;line-height:1.5}
body main .leeg .btn{margin-top:4px}
/* ── 4. KRUIMELPAD — één component, overal gelijk ───────────────── */
body main .kruim{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;
  font-size:11.5px;font-weight:700;color:var(--ink3);
  margin:0 0 14px;padding:0;line-height:1.6}
body main .kruim a{color:var(--ink3);text-decoration:none;border-radius:5px;padding:1px 3px}
body main .kruim a:hover{color:var(--fl-rood);background:var(--paper)}
body main .kruim .sep{opacity:.5;padding:0 4px;font-weight:600}
body main .kruim .nu, body main .kruim>span:last-child{color:var(--ink2)}
body main .kruim .nu{font-weight:800}
@media(max-width:560px){

body main .kruim{font-size:11px;margin-bottom:11px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;white-space:nowrap;-webkit-overflow-scrolling:touch}
body main .kruim::-webkit-scrollbar{display:none}

}
/* ── 5. BREEDTE- EN RAILBELEID ──────────────────────────────────── */
/* Rail: kolom staat statisch, .railpin plakt. (adoptie-agency-fix) */
/* de railkolom moet zo hoog zijn als de rij, anders heeft het sticky
   binnenblok geen ruimte om te reizen en scrollt de sidebar gewoon weg */
body main .inner>.rail{position:static;align-self:stretch;max-height:none;overflow:visible;top:auto}
body main .rail>.railpin{position:sticky;top:calc(var(--hd,58px) + 20px);
  max-height:none;overflow:visible;display:flex;flex-direction:column;gap:12px}
/* één sticky-gedrag op de hele site, gelijk aan nieuws.html */
body main .inner>.inner{grid-column:1/-1}
/* pagina's zónder rail lopen door tot de volle breedte */
@media(min-width:1000px){

body[data-rail="nee"] main .inner{grid-template-columns:minmax(0,1fr)!important;max-width:var(--breed-max)}
body[data-rail="nee"] main .hoofdkolom{max-width:none}
/* leespagina's: zelfde kolombreedte als de rest, anders loopt de footer
     niet meer in de rooilijn. Regellengte regelen we op tekstniveau. */
body[data-rail="lees"] main .inner{grid-template-columns:minmax(0,1fr)!important;max-width:var(--breed-max)}
body[data-rail="lees"] main .hoofdkolom>.card>p,
  body[data-rail="lees"] main .hoofdkolom>.card>ul{max-width:72ch}

}
/* ── 6. CONSISTENTIE-CORRECTIES ─────────────────────────────────── */
/* chips: één taal, geen tweede knopstijl ernaast */
body main .chip{transition:border-color .15s,background .15s,color .15s}
/* kop boven een sectie */
body main .h6{font-size:10.5px;font-weight:800;letter-spacing:1.15px;text-transform:uppercase}
/* ── 7. ACTS: fototegels in plaats van letterrondjes ────────────── */
body main .ackaart{padding:0;overflow:hidden;border-radius:16px;display:flex;flex-direction:column}
body main .ackaart .acfoto{aspect-ratio:5/4;border-radius:0;flex:none}
body main .ackaart .acbody{gap:0}
body main .ackaart b{font-size:13.5px}
body main .ackaart em{font-style:normal;font-size:9.5px;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;display:block;margin-top:2px}
body main .ackaart i{font-style:normal;font-size:10.5px;color:var(--ink3);font-weight:700;display:block;margin-top:6px}
body main .ackaart:hover{border-color:var(--fl-rood)}
body main .ackaart .acfoto>img{transition:opacity .45s ease,transform .5s ease}
body main .akart{padding:0;overflow:hidden;display:flex;flex-direction:column}
body main .akart .acfoto{border-radius:0;flex:none}
body main .akart b{font-size:12.5px}
body main .akart i{font-size:10px;margin-top:3px}
/* gerelateerde artiesten in de rail: portretjes */
body main .relacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
body main .relact{text-decoration:none;color:inherit;display:block}
body main .relact .flfoto{aspect-ratio:1/1;border-radius:12px}
body main .relact b{display:block;font-size:10.5px;font-weight:800;margin-top:6px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
body main .relact:hover b{color:var(--fl-rood)}
/* artiest-hero */
body main .artfoto{width:104px;height:104px;flex:none;border-radius:20px;box-shadow:var(--sh)}
body main .artfoto .mono{font-size:34px}
@media(max-width:560px){

body main .artfoto{width:76px;height:76px;border-radius:16px}
body main .artfoto .mono{font-size:26px}

}
/* ── 8. LOGO-VAL: geen gebroken beeld in de kop ─────────────────── */
body .wm-img.stuk{display:none}
body .wm-img.stuk+.wm-fb{display:inline-flex}
body main .fdkaart .fdtop{display:flex;align-items:center;gap:5px}
body main .fdvink{width:14px;height:14px;border-radius:50%;background:var(--fl-lichtblauw);color:var(--grijs-0);
  font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
body main .fdcijfer{display:flex;align-items:baseline;gap:6px;margin-top:7px}
body main .fdcijfer b{font-size:19px;font-weight:800;line-height:1;color:var(--ink)}
body main .fdcijfer span{font-size:10px;font-weight:700;color:var(--ink3)}
body main .fdkaart i{margin-top:6px}
body main .fdrij{display:flex;align-items:center;gap:9px;padding:7px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line)}
body main .fdrij:last-child{border-bottom:0}
body main .fdrij .fdpos{font-size:11px;font-weight:800;color:var(--ink3);width:12px;flex:none}
body main .fdrij .flfoto{width:34px;height:34px;border-radius:10px;flex:none}
body main .fdrij .flfoto .mono{font-size:12px}
body main .fdrt{flex:1;min-width:0}
body main .fdrt b{display:block;font-size:12.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body main .fdrt em{font-style:normal;font-size:10px;font-weight:700;color:var(--ink3)}
body main .fdrc{font-size:14px;font-weight:800;color:var(--t-groen)}
body main .fdrij:hover .fdrt b{color:var(--fl-rood)}
body main .prijsrij{display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
body main .prijsrij:last-of-type{border-bottom:0}
body main .prijsrij b{font-weight:800}
body main .fdhero{position:relative;border-radius:18px;overflow:hidden;margin-bottom:14px}
body main .fdhero .flfoto{aspect-ratio:21/9}
@media(max-width:560px){

body main .fdhero .flfoto{aspect-ratio:16/9}

}
body main .fdkop{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:4px}
body main .fdgroot{font-size:38px;font-weight:800;line-height:1;color:var(--ink)}
body main .fdgroot small{font-size:13px;font-weight:800;color:var(--ink3)}
body main .fdsub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}
@media(max-width:560px){

body main .fdsub{grid-template-columns:repeat(2,minmax(0,1fr))}

}
body main .fdsubv{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:9px 10px}
body main .fdsubv em{font-style:normal;display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
body main .fdsubv b{display:block;font-size:16px;font-weight:800;margin-top:2px}
body main .fdbalk{height:5px;border-radius:3px;background:var(--line);margin-top:5px;overflow:hidden}
body main .fdbalk i{height:100%;border-radius:3px;background:var(--fl-groen)}
body main .gerecht{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
body main .gerecht:last-child{border-bottom:0}
body main .gerecht .flfoto{width:46px;height:46px;border-radius:12px;flex:none}
body main .gerecht .flfoto .mono{font-size:14px}
body main .gerecht .gtx{flex:1;min-width:0}
body main .gerecht .gtx b{display:block;font-size:13px;font-weight:800}
body main .gerecht .gtx span{font-size:10.5px;font-weight:700;color:var(--ink3)}
body main .gerecht .gpr{font-size:13px;font-weight:800;white-space:nowrap}
body main .rev{padding:13px 0;border-bottom:1px solid var(--line)}
body main .rev:last-child{border-bottom:0}
body main .revkop{display:flex;align-items:center;gap:9px}
body main .revkop .flfoto{width:32px;height:32px;border-radius:10px;flex:none}
body main .revkop .flfoto .mono{font-size:11px}
body main .revnaam{flex:1;min-width:0}
body main .revnaam b{display:block;font-size:12.5px;font-weight:800}
body main .revnaam span{font-size:10px;font-weight:700;color:var(--ink3)}
body main .revcijfer{font-size:16px;font-weight:800;flex:none}
body main .revgeverifieerd{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;
  color:var(--t-groen);background:var(--p-groen);border-radius:999px;padding:2px 7px;margin-left:5px}
body main .rev p{font-size:13px;line-height:1.6;margin:9px 0 0}
body main .revfotos{display:flex;gap:7px;margin-top:9px}
body main .revfotos .flfoto{width:74px;height:74px;border-radius:11px;flex:none}
body main .revfotos .flfoto .mono{font-size:0}
body main .revantwoord{margin:10px 0 0 41px;padding:10px 12px;border-radius:12px;background:var(--paper);
  border-left:3px solid var(--fl-lichtblauw)}
body main .revantwoord b{font-size:11.5px;font-weight:800;display:flex;align-items:center;gap:5px}
body main .revantwoord p{font-size:12px;margin:5px 0 0;color:var(--ink2)}
/* ── 10. GEDEELDE RIJEN — waren alleen op sommige pagina's gedefinieerd ── */
body main .fdbalk{display:block}
body main .fdbalk i{display:block}
body main .trow{display:flex;align-items:center;gap:10px;padding:10px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line)}
body main .trow:last-child{border-bottom:0}
body main .trow .tx2{flex:1;min-width:0;display:block}
body main .trow .tx2 b{display:block;font-size:13px;font-weight:800;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body main .trow .tx2 .tm{display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:3px;
  white-space:normal}
body main .trow .tr{font-size:10.5px;font-weight:800;color:var(--ink3);white-space:nowrap;flex:none}
body main .trow:hover .tx2 b{color:var(--fl-rood)}
body main .rail .trow .tx2 b{white-space:normal}
body main .schakelrij{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line)}
body main .schakelrij:last-child{border-bottom:0}
body main .schakelrij b{display:block;font-size:13px;font-weight:800}
body main .schakelrij em{font-style:normal;display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:2px}
body main .schakelrij input{width:20px;height:20px;accent-color:var(--fl-rood);flex:none}
/* ── 11. FESTIVALRAPPORT ──────────────────────────────────────────
   Zelfde interactie als het bestaande rapport op festileaks.com:
   vijfpunts gezichtsschaal per categorie + rapportcijfer-slider.
   Vier fasen op één kaart via data-fase.                            */
body main .rapportkaart{border:1.5px solid var(--line)}
body main .rapportkaart .rapfase{display:none}
body main .rapportkaart[data-fase="voor"] .rapfase-voor, body main .rapportkaart[data-fase="open"] .rapfase-open, body main .rapportkaart[data-fase="gestemd"] .rapfase-gestemd, body main .rapportkaart[data-fase="vast"] .rapfase-vast{display:block}
body main .rapportkaart h3{margin:9px 0 6px;font-size:19px;font-weight:800;line-height:1.25}
body main .rapportkaart p{font-size:13px;color:var(--ink2);margin:0 0 13px;line-height:1.55}
body main .rapstatus{border:1px solid var(--line);white-space:nowrap;flex:none}
body main .rapstatus.rapopen{color:var(--t-groen);border-color:var(--t-groen);background:var(--p-groen)}
body main .rapportkaart .rapst-dicht{display:none}
body main .rapportkaart[data-fase="vast"] .rapst-open{display:none}
body main .rapportkaart[data-fase="vast"] .rapst-dicht{display:inline-block}
/* sponsorregel van de Awards — als partner gemarkeerd, niet als sier */
body main .rapsponsor{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border-radius:13px;background:var(--paper);border:1px solid var(--line);margin:0 0 15px}
body main .rapsponsor span{font-size:11.5px;color:var(--ink2);line-height:1.5;flex:1;min-width:180px}
body main .rapsplogo{font-size:11px;font-weight:800;color:var(--ink);text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
body main .rapsplogo:hover{border-color:var(--fl-rood)}
/* categorierij met gezichtsschaal */
body main .raprij{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:12px;
  padding:7px 0}
body main .raplabel{align-items:center;gap:5px}
body main .rapinfo{width:15px;height:15px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  font-style:normal;font-size:9.5px;font-weight:800;color:var(--ink3);
  display:inline-flex;align-items:center;justify-content:center;cursor:help;flex:none}
body main .rapinfo:hover, body main .rapinfo:focus{border-color:var(--fl-rood);color:var(--fl-rood);outline:0}
body main .rapschaal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px}
body main .rapg{border:0;background:none;border-radius:999px;padding:6px 0 5px;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:1px;transition:background .14s}
body main .rapg .rapgi{font-size:20px;line-height:1.15;filter:grayscale(.55) opacity(.62);transition:filter .14s,transform .14s}
body main .rapg em{font-style:normal;font-size:9px;font-weight:800;color:var(--ink3);
  height:0;overflow:hidden;transition:height .14s}
body main .rapg:hover .rapgi{filter:none;transform:translateY(-1px)}
body main .rapg.aan{background:var(--card);box-shadow:0 1px 3px rgba(23,20,35,.13)}
body main .rapg.aan .rapgi{filter:none}
body main .rapg.aan em{height:12px;color:var(--ink2)}
/* rapportcijfer */
body main .rapcijferrij{margin-top:6px;padding-top:13px;border-top:1px solid var(--line)}
body main .rapslider{display:flex;align-items:center;gap:13px}
body main .rapslider input[type=range]{flex:1;min-width:0;height:6px;-webkit-appearance:none;appearance:none;
  background:var(--line);border-radius:4px;outline:0;cursor:pointer}
body main .rapslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--fl-rood);
  border:3px solid var(--card);box-shadow:0 1px 4px rgba(23,20,35,.28);cursor:grab}
body main .rapslider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--fl-rood);
  border:3px solid var(--card);box-shadow:0 1px 4px rgba(23,20,35,.28);cursor:grab}
body main .rapslider b{font-size:22px;font-weight:800;min-width:44px;text-align:right}
body main .rapknop{width:100%;margin-top:15px}
body main .rapklein{font-size:10.5px!important;font-weight:700;color:var(--ink3)!important;
  margin:11px 0 0!important;line-height:1.5}
/* na het stemmen */
body main .rapmijn{display:flex;gap:30px;margin-bottom:14px}
body main .rapeind em{font-style:normal;display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
body main .rapeind b{display:block;font-size:28px;font-weight:800;line-height:1.1}
body main .rapbalkrij{display:grid;grid-template-columns:118px minmax(0,1fr) 32px;align-items:center;gap:10px;padding:5px 0}
body main .rapbalkrij>span:first-child{font-size:11.5px;font-weight:800;color:var(--ink2)}
body main .rapbalkrij b{font-size:12px;font-weight:800;text-align:right}
body main .rapbalk{position:relative;height:7px;border-radius:4px;background:var(--line)}
body main .rapbalk i{display:block;height:100%;border-radius:4px;background:var(--fl-groen)}
body main .rapbalk u{position:absolute;top:-3px;width:2px;height:13px;background:var(--fl-rood);
  border-radius:1px;transform:translateX(-1px)}
body main .rapzegel{display:flex;align-items:center;gap:16px;padding:14px 15px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);margin-bottom:13px}
body main .rapeindgroot{font-size:44px;font-weight:800;line-height:1;color:var(--ink)}
body main .rapzegel b{display:block;font-size:13.5px;font-weight:800}
body main .rapzegel em{font-style:normal;display:block;font-size:11px;font-weight:700;color:var(--ink3);margin-top:3px;line-height:1.5}
body main .rapedities{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
body main .rapedrij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:9px}
body main .raped{text-decoration:none;color:inherit;text-align:center;padding:9px 6px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line)}
body main .raped em{font-style:normal;display:block;font-size:9.5px;font-weight:800;color:var(--ink3)}
body main .raped b{display:block;font-size:18px;font-weight:800;margin:2px 0 1px}
body main .raped span{display:block;font-size:9.5px;font-weight:700;color:var(--ink3)}
body main .raped:hover{border-color:var(--fl-rood)}
body main .rapportkaart[data-fase="vast"] .rapg{pointer-events:none}
@media(max-width:620px){

body main .raprij{grid-template-columns:1fr;gap:6px;padding:9px 0}
body main .raplabel{font-size:12px}
body main .rapg .rapgi{font-size:22px}
body main .rapbalkrij{grid-template-columns:96px minmax(0,1fr) 30px;gap:8px}
body main .rapedrij{grid-template-columns:repeat(2,minmax(0,1fr))}
body main .rapmijn{gap:22px}
body main .rapportkaart h3{font-size:17px}

}
/* ── 12. PARTNERCONTENT — strak, tekst voorop ─────────────────────
   Geen logoblok, geen knop: alleen een bronregel, de kop en één
   discrete verwijzing. Onderscheidend van eigen werk door de
   haarlijn links en de bronvermelding, niet door kleurgeweld.      */
body main .partnerkaart{border-left:2px solid var(--n-grijs2)}
body main .pkkop{display:flex;align-items:center;gap:7px;margin-bottom:8px}
body main .pkmerk{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  background:none;width:auto;height:auto;border-radius:0;display:inline}
body main .pktx{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
body main .pktx b{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
body main .pktx em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3)}
body main .pkbron{display:none}
body main .partnerkaart h3{margin:0 0 6px;font-size:16px;font-weight:800;line-height:1.32}
body main .partnerkaart h3 a{color:inherit;text-decoration:none}
body main .partnerkaart h3 a:hover{color:var(--fl-rood)}
body main .partnerkaart>p{font-size:13px;color:var(--ink2);margin:0;line-height:1.55}
body main .pkvoet{font-size:10.5px!important;font-weight:700;color:var(--ink3)!important;
  margin:11px 0 0!important;padding-top:0!important;border-top:0!important}
body main .pkvoet a{color:var(--ink3);text-decoration:underline}
/* ── 13. FESTIVALPAGINA ───────────────────────────────────────────
   Hoofdkolom draagt de reden van het bezoek, de rail het omliggende.
   De ankerbalk maakt lengte onschadelijk: springen in plaats van scrollen. */
body[data-pagina="festival"] main .sts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:560px){

body[data-pagina="festival"] main .sts{grid-template-columns:repeat(2,minmax(0,1fr))}

}
body main .fanker{position:sticky;top:var(--hd,58px);z-index:20;margin:0 0 14px;padding:9px 0;background:var(--bg)}
body main .fanker a:hover, body main .fanker a.hier{border-color:var(--fl-rood);color:var(--fl-rood)}
/* zware blokken op mobiel eerst dichtvouwen */
body main .inklap{position:relative}
body main .inklap>.inklapknop{display:none}
@media(max-width:620px){

body main .inklap.dicht>.inklapinhoud{max-height:210px;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,var(--grijs-950) 55%,transparent);
    mask-image:linear-gradient(to bottom,var(--grijs-950) 55%,transparent)}
body main .inklap>.inklapknop{display:block;width:100%;margin-top:11px;font:inherit;font-size:12.5px;font-weight:800;
    color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;
    padding:9px 0;cursor:pointer}
body main .inklap>.inklapknop:hover{border-color:var(--fl-rood)}

}
/* railgrid onafhankelijk van de basisvariant van de pagina */
@media(min-width:1000px){

body[data-rail="ja"] main .inner:has(>.rail){max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
/* geen rail aanwezig? dan ook geen lege kolom reserveren */
body[data-rail="ja"] main .inner:not(:has(>.rail)){display:block;max-width:1120px}
body[data-rail="ja"] main .inner>.inner,
  body[data-rail="ja"] main .inner>.sitefoot{grid-column:1/-1}
body[data-rail="ja"] main .hoofdkolom{display:flex;flex-direction:column;gap:12px;min-width:0}

}
/* ── 14. FOOTER — overal dezelfde ademruimte ──────────────────────── */
body main .sitefoot{padding:30px 26px 24px}
body main .sitefoot .cols{gap:26px 34px}
body main .sitefoot h5{margin:0 0 11px}
body main .sitefoot .base{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:620px){

body main .sitefoot{margin-top:20px;padding:24px 18px 20px;border-radius:16px}
body main .sitefoot .cols{gap:20px 22px}

}
/* ── 15. FORUM ────────────────────────────────────────────────────
   Structuur van forum.festileaks.com, taal van FL27.             */
body main .fsub{display:flex;gap:5px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
body main .fsub::-webkit-scrollbar{display:none}
body main .fsub a{flex:none;font-size:12px;font-weight:800;text-decoration:none;color:var(--ink2);
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px}
body main .fsub a:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
body main .fsub a.hier{background:var(--fl-rood);border-color:var(--fl-rood);color:var(--grijs-0)}
body main .fgroep{margin-top:12px}
body main .fnodes{margin-top:4px}
body main .fnode{display:grid;grid-template-columns:34px minmax(0,1fr) 190px;align-items:center;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
body main .fnode:last-child{border-bottom:0}
body main .fnicoon{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line);color:var(--afg-paars2);flex:none}
body main .fnode:hover .fnicoon{color:var(--fl-rood);border-color:var(--fl-rood)}
body main .fntx{min-width:0}
body main .fntx b{display:block;font-size:13.5px;font-weight:800;line-height:1.35}
body main .fntx em{font-style:normal;display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:3px}
body main .fnode:hover .fntx b{color:var(--fl-rood)}
body main .fnlaatst{display:flex;align-items:center;gap:8px;min-width:0}
body main .fnlt{min-width:0}
body main .fnlt b{display:block;font-size:11.5px;font-weight:800;color:var(--ink2);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body main .fnlt em{font-style:normal;display:block;font-size:10px;font-weight:700;color:var(--ink3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){

body main .fnode{grid-template-columns:34px minmax(0,1fr);row-gap:8px}
body main .fnlaatst{grid-column:2;padding-left:0}

}
body main .flava{width:28px;height:28px;border-radius:9px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:800;color:var(--grijs-0);background:var(--duo-inkt)}
body main .flava.groot{width:44px;height:44px;border-radius:14px;font-size:14px}
body main .fnode:nth-child(5n+1) .flava{background:var(--duo-rood)}
body main .fnode:nth-child(5n+2) .flava{background:var(--duo-blauw)}
body main .fnode:nth-child(5n+3) .flava{background:var(--duo-paars)}
body main .fnode:nth-child(5n+4) .flava{background:var(--duo-groen)}
body main .fnode:nth-child(5n+5) .flava{background:var(--duo-goud)}
body main .trow:nth-child(5n+1) .flava{background:var(--duo-blauw)}
body main .trow:nth-child(5n+2) .flava{background:var(--duo-paars)}
body main .trow:nth-child(5n+3) .flava{background:var(--duo-groen)}
body main .trow:nth-child(5n+4) .flava{background:var(--duo-goud)}
body main .trow:nth-child(5n+5) .flava{background:var(--duo-rood)}
body main .fonline{font-size:11.5px;line-height:1.6;color:var(--ink2);margin:8px 0 6px}
body main .fonline a{color:var(--fl-rood);font-weight:800;text-decoration:none}
body main .fklein{font-size:11px;font-weight:700;color:var(--ink3);line-height:1.55;margin:0}
body main .fstatrij{display:flex;justify-content:space-between;align-items:center;font-size:12px;
  padding:7px 0;border-bottom:1px solid var(--line)}
body main .fstatrij:last-child{border-bottom:0}
body main .fstatrij b{font-weight:800}
body main .fstatrij span{color:var(--ink3);font-weight:700}
body main .fledenrij{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin-top:11px}
@media(max-width:620px){

body main .fledenrij{grid-template-columns:repeat(3,minmax(0,1fr))}

}
body main .flid{text-decoration:none;color:inherit;text-align:center}
body main .flid .flava{margin:0 auto}
body main .flid b{display:block;font-size:11px;font-weight:800;margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body main .flid em{font-style:normal;display:block;font-size:9.5px;font-weight:700;color:var(--ink3)}
body main .flid:hover b{color:var(--fl-rood)}
/* meer lucht tussen forumberichten */
body[data-pagina="forum"] main .hoofdkolom{gap:14px}
body main .hoofdkolom > article.card{margin-bottom:2px}
body main #cPosts > article{margin-bottom:14px}
body main #cPosts > article:last-child{margin-bottom:0}
body main .clr, body main .csec{padding:13px 0}
body main .awr{padding:13px 0;border-bottom:1px solid var(--line)}
body main .awr:last-child{border-bottom:0}
/* ── 16. ACTS — dichter raster, naam op het beeld ─────────────────── */
body main .acgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
body main .acrij{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
body main .ackaart, body main .akart{padding:0;overflow:hidden;border-radius:15px;display:flex;
  flex-direction:column;background:var(--card);border:1.5px solid var(--line);cursor:pointer;
  text-decoration:none;color:inherit;min-width:0;max-width:none}
body main .ackaart .acfoto, body main .akart .acfoto{aspect-ratio:16/10;border-radius:0;flex:none}
body main .akart .acfoto{aspect-ratio:1/1}
body main .acfoto .mono{font-size:clamp(20px,26cqw,44px);color:rgba(255,255,255,.13)}
body main .acnaam{position:absolute;z-index:6;left:0;right:0;bottom:0;padding:22px 11px 9px;color:var(--grijs-0);
  font-size:13px;font-weight:800;line-height:1.25;
  background:linear-gradient(to top,rgba(10,8,16,.9),rgba(10,8,16,.5) 46%,transparent);
  text-shadow:0 1px 6px rgba(0,0,0,.5)}
body main .akart .acnaam{font-size:11.5px;padding:18px 9px 8px}
body main .ackaart .acbody{padding:9px 11px 11px;display:flex;flex-direction:column;flex:1;min-width:0}
body main .akart .acbody{padding:8px 10px 10px}
body main .ackaart em, body main .akart em{font-style:normal;font-size:9.5px;font-weight:800;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.06em}
body main .ackaart i, body main .akart i{font-style:normal;font-size:10.5px;color:var(--ink3);font-weight:700;
  margin-top:4px;line-height:1.4;flex:1}
body main .actijd{color:var(--fl-rood);font-weight:800}
body main .ackaart .volg{margin-top:9px;width:100%;font-size:11.5px;padding:7px 0;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;cursor:pointer}
body main .ackaart .volg:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
body main .ackaart .volg.aan{background:var(--fl-rood);border-color:var(--fl-rood);color:var(--grijs-0)}
body main .ackaart:hover, body main .akart:hover{border-color:var(--fl-rood)}
body main .ackaart:hover .acfoto>img{transform:scale(1.04)}
body main .acfoto>img{transition:opacity .45s ease,transform .5s ease}
body main .acbalk2{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
body main .actel{font-size:11px;font-weight:800;color:var(--ink3);white-space:nowrap}
body main .acletters{display:flex;padding-bottom:2px}
body main .acl{font:inherit;font-size:11px;font-weight:800;color:var(--ink3);cursor:pointer;background:none;border:0;border-radius:8px;min-width:24px;padding:5px 6px}
body main .acl:hover{background:var(--paper);color:var(--ink)}
body main .acl.on{background:var(--fl-rood);color:var(--grijs-0)}
/* zoekvelden overal gelijk */
body main .zoekwrap{margin-top:12px}
body main .zoekwrap input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);
  background:var(--card);border-radius:13px;padding:12px 15px;font:inherit;font-size:13.5px;
  color:var(--ink);outline:0}
body main .zoekwrap input:focus{border-color:var(--fl-rood)}
body main .zoekwrap input::placeholder{color:var(--ink3)}
/* ── 17. PROFIEL & LEDENPROFIEL — één opbouw ──────────────────────── */
body main .fprofstat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:11px}
@media(max-width:560px){

body main .fprofstat{grid-template-columns:repeat(2,minmax(0,1fr))}

}
body main .fprofstat>span{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 11px}
body main .fprofstat b{display:block;font-size:17px;font-weight:800;line-height:1.2}
body main .fprofstat em{font-style:normal;display:block;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3);margin-top:2px}
body main .kaartstat{margin:12px 0}
body main .lidkop{display:flex;gap:15px;align-items:center}
body main .lidfoto{width:76px;height:76px;border-radius:22px;flex:none}
body main .lidfoto .mono{font-size:26px}
body main .lidtx{flex:1}
body main .lidtx h1{margin:0;font-size:22px;font-weight:800}
body main .lidtx p{margin:3px 0 0;font-size:11.5px;font-weight:700;color:var(--ink3)}
@media(max-width:560px){

body main .lidfoto{width:60px;height:60px;border-radius:18px}
body main .lidfoto .mono{font-size:20px}
body main .lidtx h1{font-size:19px}

}
body main .fbron{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  border-radius:999px;padding:3px 8px;flex:none;align-self:flex-start;margin-top:2px}
/* sommige pagina's zetten de rail buiten <main>; vang die ook af */
body .rail{max-height:none;overflow:visible;align-self:stretch}
body .rail>.railpin{max-height:none;overflow:visible;position:sticky;top:calc(var(--hd,58px) + 20px)}
/* [hidden] moet altijd winnen van display:flex */
body main .leeg[hidden], body main [hidden]{display:none!important}
/* chips in de rail mogen afbreken */
body main .rail .chips{flex-wrap:wrap}
body main .rail .chips .chip{max-width:100%}
/* ── 18. PROFIEL — kop, cijfers en indelingsknop ─────────────────── */
/* geneste <b> mag geen eigen regel pakken */
body main .trow .tx2 b b, body main .trow .tx2 b strong{display:inline;font-weight:800}
body main .trow .tx2>b{display:block}
body main .pkop-sticky{position:static;background:none;box-shadow:none;padding:0;display:flex;
  flex-direction:column;gap:12px}
body main .phero{position:relative;overflow:hidden;border-radius:20px;padding:78px 24px 22px;
  background:var(--card);box-shadow:var(--sh);text-align:center}
body main .phero::before{content:'';position:absolute;inset:0 0 auto 0;height:104px;z-index:0;background:var(--duo-paars)}
body main .phero::after{content:'';position:absolute;inset:0 0 auto 0;height:104px;z-index:1;pointer-events:none;
  background:radial-gradient(130% 90% at 22% -20%,rgba(255,255,255,.3),transparent 60%)}
body main .phero>*{position:relative;z-index:2}
body main .phero .bigava{display:flex;align-items:center;justify-content:center;width:88px;height:88px;margin:0 auto 11px;
  border-radius:50%;background:var(--duo-blauw);color:var(--grijs-0);font-size:28px;font-weight:800;
  border:4px solid var(--card);box-shadow:0 4px 16px rgba(23,20,35,.22)}
body main .phero h1{margin:0;font-size:24px;font-weight:800}
body main .phero .rank{display:inline-block;margin-top:7px}
body main .phero .sub{margin-top:8px;font-size:12px;font-weight:700;color:var(--ink3)}
body main .pstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
body main .pstats .s{background:var(--card);box-shadow:var(--sh);border-radius:14px;padding:13px 12px;text-align:center}
body main .pstats .s b{display:block;font-size:19px;font-weight:800;line-height:1.15}
body main .pstats .s span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);margin-top:3px}
@media(max-width:620px){

body main .phero{padding:64px 18px 20px;border-radius:18px}
body main .phero::before, body main .phero::after{height:88px}
body main .phero .bigava{width:72px;height:72px;font-size:23px}
body main .phero h1{font-size:21px}
body main .pstats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}

}
/* voortgangsbalk mag niet buiten zijn kaart vallen */
body main .rail .card [style*="linear-gradient"][style*="width"]{max-width:100%}
body main .rail .card>div[style*="height"]{max-width:100%;box-sizing:border-box}
body main .ordeknop{align-self:flex-start;width:auto!important;background:var(--card)!important;color:var(--ink2)!important;
  border:1.5px solid var(--line)!important;border-radius:999px;font-size:11.5px;font-weight:800;
  padding:7px 14px!important;margin:0 0 2px}
body main .ordeknop:hover{border-color:var(--fl-rood)!important;color:var(--fl-rood)!important}
/* activiteitenstroom */
body main #forumKaart .chips{margin-bottom:6px}
body main #forumKaart .fbron{margin-top:1px}
/* ── 19. ONTDEKNAVIGATIE (home-rail) ─────────────────────────────── */
body main .ontdeknav{padding:15px 14px 14px}
body main .ondgroep{border-bottom:1px solid var(--line)}
body main .ondgroep:last-of-type{border-bottom:0}
body main .ondkop{display:flex;align-items:center;gap:9px;width:100%;padding:10px 2px;border:0;background:none;
  font:inherit;font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;text-align:left}
body main .ondkop .ondi{font-size:14px;width:18px;text-align:center;flex:none}
body main .ondkop em{font-style:normal;margin-left:auto;font-size:10.5px;font-weight:800;color:var(--ink3)}
body main .ondpijl{width:7px;height:7px;flex:none;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease}
body main .ondgroep[data-open] .ondpijl{transform:rotate(225deg) translate(-2px,-2px)}
body main .ondkop:hover{color:var(--fl-rood)}
body main .ondkop:hover .ondpijl{border-color:var(--fl-rood)}
body main .ondlijst{display:none;padding:0 0 9px 27px}
body main .ondgroep[data-open] .ondlijst{display:block}
body main .ondlijst a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;text-decoration:none;
  font-size:12.5px;font-weight:700;color:var(--ink2)}
body main .ondlijst a em{font-style:normal;margin-left:auto;font-size:10px;font-weight:800;color:var(--ink3)}
body main .ondlijst a:hover{background:var(--paper);color:var(--fl-rood)}
body main .ondjouw{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
/* ── 20. PROFIEL: rangkleur, compacte activiteit, klein dagboek ──── */
/* De band in de profielkop draagt de rang: elke rang zijn eigen duotoon.
   Zo zie je aan de kleur meteen met wie je te maken hebt.            */
body main .phero[data-rang="gold"]::before{background:var(--duo-goud)}
body main .phero[data-rang="kenner"]::before{background:var(--duo-paars)}
body main .phero[data-rang="lid"]::before{background:var(--duo-blauw)}
body main .phero[data-rang="redactie"]::before{background:var(--duo-rood)}
body main .herochips{justify-content:center;margin-top:12px}
body main #forumKaart .trow{padding:9px 0}
body main #forumKaart .trow .tx2>b{font-size:12.5px;line-height:1.4}
body main #forumKaart .trow .tm{font-size:10px}
body main .actmeer{width:100%;margin-top:10px;font:inherit;font-size:12px;font-weight:800;color:var(--ink2);
  background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:8px 0;cursor:pointer}
body main .actmeer:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
body main .dagboek .inklapknop{display:block}
body main .dagboek.dicht .inklapinhoud{max-height:168px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,var(--grijs-950) 62%,transparent);
  mask-image:linear-gradient(to bottom,var(--grijs-950) 62%,transparent)}
body main .dagboekvoet{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
body main .dagboekvoet>span{font-size:11.5px;font-weight:700;color:var(--ink3);flex:1;min-width:140px}
body main .dagboekvoet .inklapknop{display:block!important;width:auto!important;margin:0!important;
  font-size:11.5px;padding:7px 13px!important}
/* ── 21. UITLIJNING ACTIVITEITENRIJEN ─────────────────────────────
   Vaste kolombreedte voor het herkomstlabel, zodat alle koppen op
   dezelfde x beginnen ongeacht of er FORUM of SITE staat.          */
body main #forumKaart .trow{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:start;gap:12px}
body main #forumKaart .fbron{width:58px;box-sizing:border-box;text-align:center;margin:2px 0 0;padding:3px 0;align-self:start}
body main #forumKaart .trow .tx2{padding-top:0}
@media(max-width:560px){

body main #forumKaart .trow{grid-template-columns:48px minmax(0,1fr);gap:10px}
body main #forumKaart .fbron{width:48px;font-size:8.5px}

}
/* chips in dezelfde rij even hoog en even diep */
body main #forumKaart .chips{align-items:center}
body main #forumKaart .chips .chip{border-width:1.5px;padding:7px 15px;line-height:1.2;font-size:12.5px}
/* ── 22. FESTIVALLOGO'S ───────────────────────────────────────────
   Een festival mag zijn eigen merk voeren. Het logo staat op een
   neutrale plaat zodat elk logo — donker, licht, kleurrijk — leesbaar
   blijft en de site niet uit elkaar valt. Is er geen logo, dan valt
   het terug op de duotoon met monogram: nooit een gat.            */
body main .flogo{display:block;position:relative;overflow:hidden;flex:none;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(23,20,35,.06)}
body main .flogo>img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain;
  opacity:0;transition:opacity .35s ease}
body main .flogo>img.geladen{opacity:1}
body main .flogo>img.stuk{display:none}
/* terugval: duotoon met monogram, in dezelfde vorm */
body main .flogo:not(:has(img.geladen)){background-image:var(--tone,var(--duo-inkt));border-color:transparent}
body main .flogo .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;letter-spacing:-.03em;color:rgba(255,255,255,.9);
  font-size:clamp(11px,38cqw,26px)}
body main .flogo:has(img.geladen) .mono{display:none}
body main .flogo{container-type:inline-size}
body main .flogo.xs{width:28px;height:28px;border-radius:9px}
body main .flogo.s{width:38px;height:38px;border-radius:11px}
body main .flogo.m{width:52px;height:52px;border-radius:14px}
body main .flogo.l{width:72px;height:72px;border-radius:18px}
body main .flogo.xl{width:96px;height:96px;border-radius:22px}
@media(max-width:560px){

body main .flogo.xl{width:72px;height:72px;border-radius:18px}

}
/* logo in de festivalkop */
body main .fherokop{display:flex;align-items:center;gap:15px;margin-bottom:11px}
body main .fherokop .flogo{box-shadow:0 3px 14px rgba(10,8,16,.28)}
body main .fherotx{min-width:0;flex:1}
body main .fherotx h1{margin:0}
/* oproep om een ontbrekend logo aan te leveren */
body main .logovraag{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  color:var(--ink3);margin-top:9px}
body main .logovraag a{color:var(--fl-rood);font-weight:800;text-decoration:none}
/* ── 23. MERK ─────────────────────────────────────────────────────
   Het glanzende drie-druppelmerk is de standaard in de kop; de
   bitmap is alleen nog terugval voor omgevingen zonder SVG.        */
body .wm-fb{align-items:center}
body .wm-fb .logo{width:36px;height:36px;display:block}
@media(max-width:560px){

body .wm-fb .logo{width:32px;height:32px}

}
/* ── 24. BLOKKENSCHEMA — podiumkolom dekt af ──────────────────────
   De podiumnamen stonden op een verloop dat halverwege doorzichtig
   werd, waardoor blokken er zichtbaar achter doorschoven.          */
body main .sch-podium{background:var(--card)!important;z-index:6;padding-right:10px;
  /* dekt ook de 16px goot links van de scrollcontainer af */
  box-shadow:-24px 0 0 var(--card)}
body main .sch-podium::after{content:'';position:absolute;left:100%;top:0;bottom:0;width:16px;pointer-events:none;
  background:linear-gradient(90deg,var(--card),rgba(255,255,255,0))}
@media (prefers-color-scheme: dark){

body main .sch-podium::after{background:linear-gradient(90deg,var(--card),rgba(0,0,0,0))}

}
body main .sch-tijden{position:relative;z-index:5}
body main .sch-tijden::before{content:'';position:absolute;left:calc(-1 * var(--podw) - 24px);top:0;bottom:0;
  width:calc(var(--podw) + 24px);background:var(--card);z-index:1}
/* ── 25. FESTIVALLOGO OP GEKLEURDE ACHTERGROND ────────────────────
   Op een duotoonvlak mag het logo nooit met de achtergrond vechten.
   Daar staat het op een neutrale, licht doorschijnende plaat met een
   dunne rand — het festival houdt zijn merk, wij houden de rust.   */
body main .fhero .flogo, body main .flogo[data-op="kleur"]{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(10,8,16,.22)}
body main .fhero .flogo:not(:has(img.geladen)), body main .flogo[data-op="kleur"]:not(:has(img.geladen)){background:rgba(255,255,255,.94);background-image:none}
body main .fhero .flogo .mono, body main .flogo[data-op="kleur"] .mono{color:var(--ink);opacity:.82;text-shadow:none}
@media (prefers-color-scheme: dark){

body main .fhero .flogo, body main .flogo[data-op="kleur"]{background:rgba(22,20,30,.82);border-color:rgba(255,255,255,.16)}
body main .fhero .flogo .mono, body main .flogo[data-op="kleur"] .mono{color:var(--grijs-0);opacity:.9}

}
/* ── 26. FORUM — node- en topicweergave ───────────────────────────
   Zelfde bouwstenen als forum.festileaks.com: gepinde onderwerpen
   apart, paginering boven en onder, berichtnummers, gebruikerstitels, citaatblokken en reacties met namen.                              */
body main .flava.m{width:38px;height:38px;border-radius:12px;font-size:12px}
body main .fbalk{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
body main .fbalk.onder{margin-top:13px;background:none;border:0;padding:11px 0 0;border-top:1px solid var(--line)}
body main .fpag{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--ink2)}
body main .fpag b{font-size:13px}
body main .fpag span{color:var(--ink3);font-weight:700}
body main .fpknop{font:inherit;font-size:11.5px;font-weight:800;color:var(--ink2);cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px}
body main .fpknop:hover:not([disabled]){border-color:var(--fl-rood);color:var(--fl-rood)}
body main .fpknop[disabled]{opacity:.4;cursor:default}
body main .ffilters{display:flex;gap:6px;flex-wrap:wrap}
body main .thlijst{margin-top:4px}
body main .thrij{display:grid;grid-template-columns:38px minmax(0,1fr) 62px;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
body main .thrij:last-child{border-bottom:0}
body main .thtx{min-width:0}
body main .thtx b{display:block;font-size:13.5px;font-weight:800;line-height:1.35}
body main .thm{display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:3px}
body main .thtel{text-align:right}
body main .thtel b{display:block;font-size:13px;font-weight:800}
body main .thtel em{font-style:normal;display:block;font-size:9px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3)}
body main .thrij:hover .thtx b{color:var(--fl-rood)}
body main .gepindlijst .thrij{border-left:3px solid var(--fl-rood);padding-left:11px;
  margin-left:-14px;padding-right:0}
@media(max-width:560px){

body main .thrij{grid-template-columns:34px minmax(0,1fr);gap:10px}
body main .thtel{display:none}

}
body main .fpost{margin-bottom:13px}
body main .fpkop{display:flex;align-items:center;gap:11px;padding-bottom:11px;border-bottom:1px solid var(--line)}
body main .fpwie{flex:1;min-width:0}
body main .fpwie a{text-decoration:none;color:inherit}
body main .fpwie b{display:block;font-size:13.5px;font-weight:800}
body main .fpwie a:hover b{color:var(--fl-rood)}
body main .fpwie em{font-style:normal;display:block;font-size:10.5px;font-weight:700;color:var(--fl-goud);margin-top:1px}
body main .fpmeta{text-align:right;flex:none}
body main .fpmeta span{display:block;font-size:10.5px;font-weight:700;color:var(--ink3)}
body main .fpmeta a{display:block;font-size:10.5px;font-weight:800;color:var(--ink3);text-decoration:none;margin-top:2px}
body main .fpmeta a:hover{color:var(--fl-rood)}
body main .fpbody{padding:13px 0 0}
body main .fpbody p{font-size:13.5px;line-height:1.6;margin:0}
body main .fcitaat{border-left:3px solid var(--afg-paars2);background:var(--paper);
  border-radius:0 12px 12px 0;padding:10px 13px;margin:0 0 11px}
body main .fcnaam{display:block;font-size:11.5px;font-weight:800;color:var(--fl-rood);margin-bottom:6px}
body main .fcnaam i{font-style:normal;opacity:.7}
body main .fcitaat p{font-size:12.5px;color:var(--ink2)}
body main .freacties{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:11.5px;
  font-weight:700;color:var(--ink3)}
body main .freacties span{color:var(--afg-blauw1);font-weight:800}
body main .fpvoet{display:flex;gap:7px;margin-top:13px;padding-top:11px;border-top:1px solid var(--line)}
body main .fpactie{font:inherit;font-size:11.5px;font-weight:800;color:var(--ink3);cursor:pointer;
  background:none;border:0;border-radius:999px;padding:5px 10px}
body main .fpactie:hover{background:var(--paper);color:var(--fl-rood)}
body main .fantwoord{margin-top:13px}
/* ── 27. WEERGAVE — licht, donker of automatisch ──────────────────
   Standaard volgt de site het systeem. Kiest iemand zelf, dan zet
   fl27.js data-thema op <html> en winnen deze regels van de
   media query, omdat ze specifieker zijn.                          */
html
html[data-thema="licht"] img{filter:none}
html
html[data-thema="donker"] img{filter:brightness(.94)}

html[data-thema="donker"] body main .sch-podium::after{background:linear-gradient(90deg,var(--card),rgba(0,0,0,0))}
/* de schakelaar zelf */
body main .weergave{display:flex;align-items:center;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
body main .weergave>span{font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
body main .wgroep{display:flex}
body main .wknop{font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;background:none;border:0}
/* een paar regels zetten de achtergrond hard, buiten de tokens om;
   die moeten expliciet meebewegen met de gekozen weergave */
html[data-thema="donker"], html[data-thema="donker"] body{background:var(--bg)}
html[data-thema="licht"] body span.rank, html[data-thema="licht"] body .rank{color:var(--goud-700)!important}
html[data-thema="donker"] body span.rank, html[data-thema="donker"] body .rank{color:var(--goud-100)!important}
/* ── 28. ONBOARDING ───────────────────────────────────────────────
   Vijf stappen, elk met de reden erbij waarom we het vragen.
   Overslaan mag altijd; niets is verplicht.                        */
body main .obvoortgang{display:flex;align-items:center;gap:12px;margin-bottom:16px}
body main .obbalk{flex:1;border-radius:3px;overflow:hidden}
body main .obbalk i{display:block;height:100%;border-radius:3px;width:0;transition:width .3s ease}
body main .obtel{font-size:11px;font-weight:800;color:var(--ink3);white-space:nowrap}
body main .obtel b{color:var(--ink)}
body main .obkop h1{margin:0 0 7px;font-weight:800;line-height:1.2}
body main .obkop p{margin:0;max-width:56ch}
@media(max-width:560px){

body main .obkop h1{font-size:21px}

}
body main .obstap{display:none}
body main .obstap.aan{display:block;animation:obin .22s ease}
@keyframes obin{

from{opacity:0;transform:translateY(6px)}

to{opacity:1;transform:none}

}
body main .obtegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
body main .obtegel{position:relative;padding:0;overflow:hidden;cursor:pointer;text-align:left;background:var(--card);border:2px solid var(--line);font:inherit;color:inherit}
body main .obtegel .flfoto{border-radius:0}
body main .obtegel b{display:block;font-weight:800}
body main .obtegel:hover{border-color:var(--ink3)}
body main .obtegel.aan::after{content:'✓';position:absolute;top:8px;right:8px;z-index:8;
  width:22px;height:22px;border-radius:50%;background:var(--fl-rood);color:var(--grijs-0);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
body main .obtegels.fests{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
body main .obtegel.fest{display:flex;align-items:center}
body main .obtegel.fest b{padding:0;font-size:12.5px;line-height:1.3}
body main .obkeuzes{display:grid;gap:10px}
body main .obkeuze{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;align-items:start;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--card);border:2px solid var(--line)}
body main .obkeuze .obem{line-height:1}
body main .obkeuze b{display:block;font-size:14.5px;font-weight:800}
body main .obkeuze em{font-style:normal;display:block;font-size:12.5px}
body main .obkeuze:hover{border-color:var(--ink3)}
body main .obschakels{background:var(--card);border:1px solid var(--line)}
body main .obhint{font-weight:700;margin:13px 0 0}
body main .obvoet{display:flex;align-items:center;gap:9px;padding-top:16px}
body main .obvoet #obVerder{margin-left:auto}
body main .obklaar{text-align:center}
body main .obvink{display:flex;align-items:center;justify-content:center;margin:0 auto 14px;border-radius:50%;background:var(--p-groen);color:var(--t-groen);font-weight:800}
body main .obklaar h2{margin:0 0 8px;font-size:23px;font-weight:800}
body main .obklaar p{font-size:13.5px;color:var(--ink2);margin:0 auto;max-width:44ch;line-height:1.6}
body main .obmunten{display:inline-flex;align-items:center;gap:7px;margin-top:15px;padding:9px 15px;
  border-radius:999px;background:var(--gold-bg);color:var(--t-goud);font-size:13px;font-weight:800}
/* ── 29. FESTIVAL AWARDS & BADGES ─────────────────────────────────
   De awards komen uit het rapport, dus ze horen in dezelfde taal:
   cijfers voorop, herkomst erbij, geen juryretoriek.               */
body main .awrooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:11px;margin-top:14px}
body main .awkaart{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;align-items:start;
  padding:13px 14px;border-radius:15px;background:var(--paper);border:1px solid var(--line)}
body main .awicoon{font-size:20px;line-height:1.2}
body main .awtx{min-width:0}
body main .awtx em{font-style:normal;display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
body main .awtx b{display:block;font-size:15.5px;font-weight:800;margin-top:3px}
body main .awtx b a{color:inherit;text-decoration:none}
body main .awtx b a:hover{color:var(--fl-rood)}
body main .awcijfer{display:inline-block;font-size:12px;font-weight:800;color:var(--t-groen);
  background:var(--p-groen);border-radius:999px;padding:2px 9px;margin-top:5px}
body main .awgenom{display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:7px;line-height:1.5}
body main .awgen:not(:last-child)::after{content:' · '}
body main .awvoet{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}
body main .badgelijst{display:flex;flex-wrap:wrap;gap:8px}
body main .fbadge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;
  padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink2)}
body main .fbadge.goud{background:var(--gold-bg);border-color:transparent}
body main .fbadge.zilver{background:var(--paper);border-color:var(--n-grijs2);color:var(--ink2)}
body main .fbadge.groen{border-color:transparent}
body main .fbadge.blauw{border-color:transparent}
body main .fbadge.paars{border-color:transparent}
body main .fbadge.lijnbadge{text-decoration:none;border-style:dashed;color:var(--ink3)}
body main .fbadge.lijnbadge:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
body main .festbadges{margin:2px 0 14px}
/* ── 30. SUBNAVIGATIE ─────────────────────────────────────────────
   Kruimelpad en pagina-ankers in één balk die onder de header blijft
   plakken. Zo weet je altijd waar je bent én wat er nog onder staat. */
body main .subnav{background:var(--bg);border-bottom:1px solid transparent}
body main .subnav.vast{border-bottom-color:var(--line)}
body main .subnav .fanker{margin:0}
body main .subnav .kruim:last-child{margin-bottom:0}
body main .fanker{display:flex;gap:6px;overflow-x:auto;padding-bottom:1px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body main .fanker::-webkit-scrollbar{display:none}
body main .fanker a{flex:none;font-size:12px;font-weight:800;text-decoration:none;color:var(--ink2);background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;transition:border-color .14s,color .14s,background .14s}
body main .fanker a:hover{border-color:var(--ink3);color:var(--ink)}
body main .fanker a.hier{border-color:var(--fl-rood);color:var(--fl-rood);background:var(--card)}
body main .fanker::after{content:'';flex:none;width:2px}
/* ankerdoelen niet onder de balk laten vallen bij het springen */
body main .hoofdkolom>[id]{scroll-margin-top:calc(var(--hd,58px) + var(--subnav,0px) + 14px)}
@media(max-width:560px){

body main .subnav{padding:8px 0 7px;margin-bottom:11px}
body main .fanker a{font-size:11.5px;padding:6px 12px}

}
/* ── 31. WEERGAVE: de laatste !important-regels overrulen ─────────
   Header en mobiel menu worden in de donkere media query met
   !important gezet, dus die moeten hier met dezelfde kracht terug. */
html[data-thema="licht"] body .hdr{-webkit-backdrop-filter:var(--glas-waas)!important;backdrop-filter:var(--glas-waas)!important}
html[data-thema="licht"] body .menu{background:rgba(253,253,254,.92)!important}
html[data-thema="licht"] body .bs.on{background:var(--card)!important;color:var(--ink)!important;border-color:var(--grijs-900)!important}
html[data-thema="donker"] body .menu{background:rgba(19,18,24,.9)!important}
html[data-thema="donker"] body .bs.on{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--line)!important}
/* ── 32. NAVIGATIE IN ÉÉN BALK ────────────────────────────────────
   Kruimelpad en sectiekeuze waren twee regels onder elkaar; dat las
   als twee navigaties. Nu één rij: links waar je vandaan komt, daarnaast waar je binnen deze pagina heen kunt. Op smalle schermen
   klapt het pad samen tot alleen de bovenliggende sectie.          */
body main .subnav{display:flex;align-items:center;gap:12px;padding:9px 0;margin:0 0 14px}
body main .subnav .kruim{margin:0;flex:none;max-width:38%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}
body main .subnav .kruim::after{display:inline-block;width:1px;height:15px;margin-left:12px;background:var(--line);vertical-align:-3px}
body main .subnav .fanker, body main .subnav .fsub, body main .subnav .scopes, body main .subnav .chips{margin:0}
body main .subnav .scopes{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
body main .subnav .scopes::-webkit-scrollbar{display:none}
/* het pad zelf: bovenliggende sectie eerst, huidige pagina als anker */
body main .subnav .kruim a{padding:0}
body main .subnav .kruim .sep{padding:0 5px}
@media(max-width:900px){

body main .subnav{gap:9px}
body main .subnav .kruim{max-width:none;flex:none}
/* alleen de bovenliggende sectie tonen, met een terugpijl */
body main .subnav .kruim a:not(:last-of-type), body main .subnav .kruim .sep{display:none}
body main .subnav .kruim a:last-of-type{display:inline-flex;align-items:center;gap:4px;
    font-weight:800;color:var(--ink2)}
body main .subnav .kruim a:last-of-type::before{content:'‹';font-size:16px;line-height:1;
    color:var(--ink3);margin-right:1px}
body main .subnav .kruim .nu{display:none}
body main .subnav .kruim::after{margin-left:9px;height:14px}

}
@media(max-width:560px){

body main .subnav{padding:7px 0;margin-bottom:11px}

}
/* zonder pad (home) vult de sectiekeuze de hele balk */
body main .subnav:not(:has(.kruim)) .fanker{flex:1}
/* de balk blijft altijd één rij hoog; inhoud schuift horizontaal */
body main .subnav{flex-wrap:nowrap;min-height:0}
body main .subnav>*{flex-shrink:0}
body main .subnav .fanker, body main .subnav .fsub, body main .subnav .scopes, body main .subnav .chips{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body main .subnav .chips::-webkit-scrollbar, body main .subnav .fsub::-webkit-scrollbar{display:none}
body main .subnav .chips>*, body main .subnav .scopes>*{flex:none}
/* de festivaldropdown in de feedfilters mag niet uitklappen in de balk */
body main .subnav .chips .dd, body main .subnav .chips .ddmenu{display:none}
/* ── 33. SUBNAVIGATIE, definitief ─────────────────────────────────
   Het streepje bestaat alleen als er links én rechts iets staat.
   Een kruimelpad zonder bovenliggende laag staat gewoon boven de
   balk, want dan valt er niets terug te navigeren.                 */
body main .subnav .kruim::after{content:none}
body main .subnav.metpad .kruim::after{content:'';display:inline-block;width:1px;height:15px;margin-left:12px;
  background:var(--line);vertical-align:-3px}
body main .kruim-los{margin:0 0 10px}
/* alfabetindex op één rij die meeschuift */
body main .acletters{flex-wrap:nowrap;overflow-x:auto;gap:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:12px 0 2px}
body main .acletters::-webkit-scrollbar{display:none}
body main .acl{flex:none}
/* filterrijen op acts en agenda dichter op elkaar */
body main .acbalk{margin-top:12px}
body main .acbalk2{margin-top:7px}
@media(max-width:560px){

body main .acbalk2{gap:8px}
body main .actel{order:2;width:100%}

}
/* filterrijen die in de balk landen blijven één rij, ongeacht eigen stijl */
body main .subnav .chips{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden}
/* ── 34. HOOFDNAVIGATIE ONDERAAN OP MOBIEL ────────────────────────
   Een zwevende glazen pil in plaats van een dichte balk: hij ligt
   óver de inhoud in plaats van ertegenaan, en botst daardoor niet
   met de browserbalk eronder.                                      */
body .mobnav{display:none}
@media(max-width:900px){

body .mobnav{display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:10px;right:10px;z-index:60;
    bottom:calc(9px + env(safe-area-inset-bottom,0px));
    padding:7px 6px 6px;border-radius:24px;
    background:var(--glas);
    -webkit-backdrop-filter:var(--glas-waas);backdrop-filter:var(--glas-waas);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 1px 2px rgba(20,18,30,.06),0 12px 34px -10px rgba(20,18,30,.28);
    transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease}
body .mobnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
    text-decoration:none;color:var(--ink3);padding:6px 2px 4px;border-radius:14px;
    transition:color .18s ease}
body .mobnav a svg{width:21px;height:21px;transition:transform .22s cubic-bezier(.34,1.4,.5,1)}
body .mobnav a span{font-size:9.5px;font-weight:800;letter-spacing:.005em}

body .mobnav a.aan svg{transform:translateY(-1px) scale(1.06)}
body .mobnav a.aan::before{content:'';position:absolute;top:0;left:50%;width:16px;height:2.5px;border-radius:2px;
    background:var(--fl-rood);transform:translateX(-50%)}
body .mobnav a:active{transform:scale(.94)}
/* weg bij naar beneden scrollen, terug zodra je omhoog gaat */
body .mobnav.verstopt{transform:translateY(calc(100% + 16px));opacity:0;pointer-events:none}
body .menu{display:none!important}
body.heeft-mobnav{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
body.heeft-mobnav .fab{bottom:calc(92px + env(safe-area-inset-bottom,0px));
    transition:bottom .28s cubic-bezier(.4,0,.2,1)}
body.heeft-mobnav .mobnav.verstopt ~ .fab, body.heeft-mobnav.navweg .fab{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
body .hdr a.bs{display:none}
body main .subnav{top:var(--hd,58px)}

}
@media(max-width:900px) and (prefers-color-scheme:dark){

html:not([data-thema="licht"]) body .mobnav{background:var(--glas);border-color:var(--glas-rand);
    box-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -10px rgba(0,0,0,.6)}

}
@media(max-width:900px){

html[data-thema="donker"] body .mobnav{background:var(--glas);border-color:var(--glas-rand);
    box-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -10px rgba(0,0,0,.6)}
html[data-thema="licht"] body .mobnav{background:var(--glas);border-color:var(--glas-rand)}

}
/* ── 35. SORTEREN & FILTEREN ACHTER ÉÉN KNOP ──────────────────────
   De primaire keuze blijft zichtbaar; sorteren, letterindex en
   secundaire filters zitten in een paneel dat je openklapt.        */
body main .filterknop{display:none}
body main .filterdoos{display:contents}
@media(max-width:900px){

body main .filterknop{display:inline-flex;align-items:center;gap:7px;margin:11px 0 0;
    font:inherit;font-size:12.5px;font-weight:800;color:var(--ink2);cursor:pointer;
    background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:8px 15px}
body main .filterknop svg{width:15px;height:15px}
body main .filterknop.aan{border-color:var(--fl-rood);color:var(--fl-rood)}
body main .filterdoos{display:block;max-height:0;overflow:hidden;
    transition:max-height .24s ease,margin .24s ease}
body main .filterdoos.open{max-height:420px;margin-top:10px}
body main .filterdoos>*{margin-top:8px}
body main .filterdoos>*:first-child{margin-top:0}

}
/* de weggehaalde tabrij liet zijn ruimte achter onder de header */
@media(max-width:900px){

body.heeft-mobnav{--mn:0px}
body.heeft-mobnav main.page{padding-top:var(--hd,58px)}

}
/* ── 36. MOBIELE KOP: ruimte benutten in plaats van leeg laten ─────
   Nu de tabrij weg is, past het zoekveld in de header. Dat vult de
   lege bak, geeft zoeken één vaste plek en scheelt weer een tik.   */
@media(max-width:900px){

body .hdr .dzoek:not(.nbel){display:flex!important;align-items:center;gap:8px;flex:1;min-width:0;
    margin:0 4px 0 10px;padding:8px 14px;border-radius:999px;
    background:var(--paper);border:1.5px solid var(--line);
    font-size:13px;font-weight:700;color:var(--ink3);cursor:pointer;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body .hdr .mzoek{display:none!important}
body .hdr .sp{display:none}
body .hdr .logo3d{flex:none}
body .hdr .munten{flex:none}
/* het gat onder de header: die kwam van de weggehaalde tabrij */
body.heeft-mobnav main.page{padding-top:var(--boven,64px)!important}
body main .subnav{padding-top:6px;margin-bottom:12px}
/* een kruimelpad zonder bovenliggende laag zegt hetzelfde als de
     actieve tab onderin — dat laten we op mobiel weg */
body main .kruim-los{display:none}

}
/* ── 37. MOBIELE KOP: lucht tussen de onderdelen ──────────────────
   In de vorige stap werd alles tegen elkaar aan geduwd. De pil krijgt
   nu een maximum, de knoppen een vaste tussenruimte, en de rand van
   het scherm blijft vrij.                                           */
@media(max-width:900px){

body .hdr{gap:9px;padding-left:12px;padding-right:12px}
body .hdr .logo3d{flex:0 0 auto;margin-right:2px}
body .hdr .dzoek:not(.nbel){flex:1 1 auto;min-width:0;max-width:none;margin:0;
    padding:9px 15px;border-radius:999px;
    background:var(--paper);border:1px solid var(--line);
    font-size:13px;font-weight:700;color:var(--ink3)}
body .hdr .dzoek.nbel,body .hdr .munten{flex:0 0 auto}
body .hdr .munten{padding-left:11px;padding-right:13px}

}
@media(max-width:400px){

body .hdr{gap:7px;padding-left:10px;padding-right:10px}
body .hdr .dzoek:not(.nbel){font-size:12.5px;padding:8px 13px}

}
/* ── 38. SMOOTH ───────────────────────────────────────────────────
   Zachte overgangen op de elementen die van staat wisselen, en een
   contextbalk die vervaagt in plaats van hard af te snijden.        */
body main .subnav{transition:box-shadow .2s ease,background .2s ease}
body main .fanker a, body main .chip, body main .scope{transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease}
body main .fanker a:active, body main .chip:active, body main .scope:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){

body .mobnav, body main .subnav, body main .fanker a, body main .chip{transition:none}

}
/* ══════════════════════════════════════════════════════════════════
   39. FRISSER — contrast omhoog, kleur met betekenis
   ══════════════════════════════════════════════════════════════════
   Twee ingrepen. Eerst het contrast: de grijstinten lagen te dicht op
   elkaar, waardoor alles grauw werd. Daarna kleur: elke sectie krijgt
   een eigen accent, zodat je aan de kleur ziet waar je bent. Rood
   blijft van het merk en van acties — de accenten zijn navigatie.  */
/* ── contrast ─────────────────────────────────────────────────── */
:root, html

@media(prefers-color-scheme:dark){html:not([data-thema="licht"]){--ink:var(--grijs-50); --ink2:var(--grijs-300); --ink3:var(--grijs-400);
    --line:var(--grijs-700); --paper:var(--grijs-800)}
}

html
/* ── sectieaccent ─────────────────────────────────────────────── */
body{--sectie:var(--fl-rood);--sectie-zacht:var(--p-rood)}
body[data-pagina="feed"]{--sectie:var(--rood-500);--sectie-zacht:var(--p-rood)}
body[data-p="nieuws"][data-pagina="nieuws"], body[data-pagina="artikel"], body[data-pagina="guide"], body[data-pagina="rapport"], body[data-pagina="info"]{--sectie:var(--blauw-700);--sectie-zacht:var(--tintb)}
body[data-pagina="agenda"], body[data-pagina="festivals"], body[data-pagina="festival"], body[data-pagina="acts"], body[data-pagina="artiest"], body[data-pagina="schemas"], body[data-pagina="tickets"]{--sectie:var(--blauw-400);--sectie-zacht:var(--p-paars)}
body[data-pagina="forum"]{--sectie:var(--blauw-500);--sectie-zacht:var(--p-groen)}
body[data-pagina="profiel"], body[data-pagina="shop"], body[data-pagina="instellingen"], body[data-pagina="onboarding"]{--sectie:var(--goud-600);--sectie-zacht:var(--gold-bg)}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body[data-pagina="forum"]{--sectie:var(--blauw-200)}
html:not([data-thema="licht"]) body[data-pagina="agenda"], html:not([data-thema="licht"]) body[data-pagina="festivals"], html:not([data-thema="licht"]) body[data-pagina="festival"], html:not([data-thema="licht"]) body[data-pagina="acts"], html:not([data-thema="licht"]) body[data-pagina="artiest"], html:not([data-thema="licht"]) body[data-pagina="schemas"], html:not([data-thema="licht"]) body[data-pagina="tickets"]{--sectie:var(--blauw-200)}
html:not([data-thema="licht"]) body[data-pagina="nieuws"], html:not([data-thema="licht"]) body[data-pagina="artikel"], html:not([data-thema="licht"]) body[data-pagina="guide"]{--sectie:var(--blauw-400)}
html:not([data-thema="licht"]) body[data-pagina="profiel"]{--sectie:var(--goud-400)}

}
/* waar het accent landt */
body main .subnav .fanker a.hier, body main .subnav .scope.on, body main .subnav .fsub a.hier{border-color:var(--sectie)!important;color:var(--sectie)!important;
  background:var(--sectie-zacht)!important}

body main .h6::before{content:'';display:inline-block;width:14px;height:3px;border-radius:2px;
  background:var(--sectie);margin-right:9px;vertical-align:2px}
body main .subnav .h6::before, body main .kruim .h6::before{display:none}
/* ── kaarten krachtiger, minder grauw ─────────────────────────── */
body main .card{border:1px solid var(--line)}
body main .pstats .s, body main .fprofstat>span, body main .fdsubv, body main .raped{background:var(--card);border:1px solid var(--line)}
body main .pstats .s b, body main .fprofstat b{color:var(--ink);letter-spacing:-.01em}
/* ── typografie: koppen strakker en zwaarder ──────────────────── */
body main h1{letter-spacing:-.022em}
body main .pagekop h1{font-size:clamp(24px,6vw,30px)}
body main h3, body main .rapportkaart h3{letter-spacing:-.012em}
/* ── chips: duidelijker aan/uit ───────────────────────────────── */
body main .chip{border-width:1.5px}
body main .chip.on{border-color:var(--fl-rood);color:var(--fl-rood);background:var(--p-rood)}
body main .fanker a{border-width:1.5px}
/* de bestaande gradient-streepjes krijgen dezelfde sectiekleur, en mijn
   eigen streepje verdwijnt daar waar er al een staat — anders twee stijlen */
body main .dgroep .h6::before, body main .dkop .h6::before, body main .sechead .h6::before{display:none}
body main .rail .h6::before{width:12px;margin-right:8px}
/* ══════════════════════════════════════════════════════════════════
   40. KOP EN VOET
   ══════════════════════════════════════════════════════════════════
   De header liep van dekkend naar 70% doorschijnend. Wat eronder
   langsschoof kleurde daardoor door — bij een rode festivalfoto werd
   de balk roze. Nu één gelijkmatige glaslaag: overal even doorschijnend, sterke blur, dus altijd hetzelfde beeld ongeacht de inhoud.       */
body .hdr, html[data-thema="licht"] body .hdr{background:var(--glas)!important;
  -webkit-backdrop-filter:var(--glas-waas)!important;
  backdrop-filter:var(--glas-waas)!important;
  border-bottom:1px solid transparent}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body .hdr{background:var(--glas)!important}

}
/* de contextbalk eronder is dékkend — twee glaslagen op elkaar
   leest als twee ruiten en dat was precies het rommelige effect */
/* ── voet over de volle breedte, net als de kop ────────────────── */
body main .sitefoot{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);border-radius:0;box-shadow:none;border-top:1px solid var(--line);background:var(--card);margin-top:34px}
@media(max-width:620px){

body main .sitefoot{padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);
    margin-top:26px}

}
/* de gekleurde accentlijn liep mee met de kaart; die spant nu ook door */
body main .sitefoot::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,var(--fl-rood),var(--fl-paars) 50%,var(--fl-blauw))}
body main .sitefoot{position:relative}
/* ══════════════════════════════════════════════════════════════════
   41. SCHERMVULLEND OP MOBIEL
   ══════════════════════════════════════════════════════════════════
   Op een telefoon stond aan weerszijden een goot van 14 px waarin
   niets gebeurde. Kaarten lopen nu van rand tot rand, gescheiden door
   de achtergrond in plaats van door lucht eromheen. Tekst houdt zijn
   eigen binnenmarge, dus niets plakt tegen de schermrand.          */
@media(max-width:620px){

body main.page{padding-left:0!important;padding-right:0!important}
body main .inner{padding-left:0!important;padding-right:0!important;max-width:none}
/* kaarten schermbreed */
body main .hoofdkolom>.card,
  body main .hoofdkolom>article.card,
  body main .hoofdkolom>section.card,
  body main .hoofdkolom>.post,
  body main .railpin>.card,
  body main .railpin>.fx{border-radius:0;border-left:0;border-right:0;
    margin-left:0;margin-right:0;box-shadow:none;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body main .hoofdkolom>.card+.card,
  body main .hoofdkolom>article.card+article.card,
  body main .hoofdkolom>.post+.post{border-top:0;margin-top:8px}
/* alles wat géén kaart is houdt de zijmarge zelf vast */
body main .subnav,body main .pagekop,body main .kruim-los,
  body main .zoekwrap,body main .filterknop,body main .festbadges,
  body main .obkop,body main .obvoet,body main .obtegels,body main .obkeuzes,
  body main .acgrid,body main .acrij,body main .pstats,body main .fprofstat,
  body main .rowline,body main .dgroep{padding-left:14px;padding-right:14px;box-sizing:border-box}
/* horizontale rijen: eerste item lijnt uit, laatste mag doorlopen */
body main .chips,body main .scopes,body main .fanker,
  body main .fsub,body main .acletters,body main .hscroll{padding-left:14px;padding-right:14px;box-sizing:border-box;
    scroll-padding-left:14px}
body main .subnav .chips,body main .subnav .scopes,
  body main .subnav .fanker,body main .subnav .fsub{padding-left:0;padding-right:0}
body main .card .chips,body main .card .scopes,body main .card .fanker{padding-left:0;padding-right:0}
/* beeld in kaarten loopt tot de kaartrand */
body main .hoofdkolom>.card>.flfoto:first-child,
  body main .fdhero,body main .fhero{border-radius:0;margin-left:0;margin-right:0}
/* de voet spant al door; de scheidingslijn erboven ook */
body main .sitefoot{border-radius:0}

}
@media(max-width:620px){

/* raster binnen kaarten houdt de binnenmarge van de kaart aan */
body main .card .acgrid, body main .card .acrij, body main .card .pstats, body main .card .fprofstat{padding-left:0;padding-right:0}

}
/* ── 42. TOT IN DE SCHERMRANDEN ───────────────────────────────────
   De pagina loopt door onder de statusbalk en de browserbalk. De kop
   vult de ruimte boven zelf op, zodat het glas daar doorloopt in
   plaats van een harde rand achter te laten.                       */
@media(max-width:900px){

body.heeft-mobnav{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* de voet loopt door tot onder de browserbalk */
body main .sitefoot{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}

}
/* ── 43. INHOUD LOOPT DOOR ONDER DE BALKEN ────────────────────────
   Eerst hield ik onderaan 84 px vrij zodat de navigatiepil niets zou
   afdekken. Dat gaf een dode strook tussen de pil en de browserbalk.
   De pil is van glas en verdwijnt bij naar beneden scrollen, dus de
   inhoud mag er gewoon onderdoor lopen — precies zoals in een app. */
@media(max-width:900px){

body.heeft-mobnav{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
/* alleen de laatste kaart krijgt genoeg lucht om vrij te scrollen */
body main .sitefoot{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}

}
/* ── 43. ONDER DE BROWSERBALK DOOR ────────────────────────────────
   De reservering onderaan hield de pagina boven de browserbalk, met
   een strook ertussen. Die is weg: de achtergrond loopt nu door tot
   de onderrand van het scherm. De voet neemt de vrije hoogte over, zodat zijn tekst wél boven de zwevende navigatie en de browserbalk
   uitkomt.                                                          */
@media(max-width:900px){

body.heeft-mobnav{padding-bottom:0}
body main .sitefoot{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
/* laatste kaart voor de voet houdt zijn eigen lucht */
body main .hoofdkolom>*:last-child{margin-bottom:0}

}
/* ── 44. OVERLAYS HOREN NOOIT IN DE PAGINASTROOM ──────────────────
   Deze regels stonden per pagina in de inline CSS. Op artikel.html
   waren ze bij een opruimactie verdwenen, waardoor het bijdraagpaneel
   als blok van 219 px onder de footer bleef staan. Vanaf nu staan ze
   hier, dus kan dat op geen enkele pagina meer misgaan.            */
body .bwol{display:none;position:fixed;inset:0;z-index:80;
  background:rgba(20,14,22,.45);align-items:center;justify-content:center}
body .bwol.open{display:flex}
body .ovl, body .zk-ovl{position:fixed}
body .npaneel{position:fixed}
/* ── 45. RIJEN DIE HUN OPMAAK KWIJT WAREN ─────────────────────────
   Deze klassen stonden alleen in de inline CSS van artikel.html en
   verdwenen bij het opruimen van het dubbele blok. Ze horen hier, zodat elke pagina ze heeft.                                      */
body main .idr{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:11px;
  padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
body main .idr:last-of-type{border-bottom:0}
body main .idic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:16px;background:var(--duo-inkt)}
body main .idr>span:nth-child(2){min-width:0}
body main .idr b{display:block;font-size:13px;font-weight:800;line-height:1.35}
body main .idr i{font-style:normal;display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:2px}
body main .idpijl{font-size:13px;font-weight:800;color:var(--ink3);text-align:right}
body main .idr:hover b{color:var(--fl-rood)}
body main .idr:hover .idpijl{color:var(--fl-rood)}
body main .apost2{display:block;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
body main .apost2:last-child{border-bottom:0}
body main .apost2 b{display:block;font-size:13px;font-weight:800;line-height:1.4}
body main .apost2 span{display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:3px}
body main .apost2:hover b{color:var(--fl-rood)}
body .bwstap{padding:2px 17px 10px}
body .bwtype{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;cursor:pointer;
  border:1px solid var(--line);background:var(--card);border-radius:15px;padding:12px 14px;
  margin-bottom:8px;font-size:19px;color:inherit}
body .bwtype:hover{background:var(--paper)}
body .bwtype span{flex:1;min-width:0}
body .bwtype b{display:block;font-size:13.5px}
body .bwtype i{font-style:normal;font-size:11px;color:var(--ink3);font-weight:700}
body .bwtype em{font-style:normal;font-size:11px;font-weight:800;color:var(--fl-goud)}
/* ── 46. GHOST-KNOP ───────────────────────────────────────────────
   .btn.gh is bedoeld als ingetogen knop, maar kreeg de zwarte vulling
   van de basisknop mee. Op donker werd dat een donkere pil op een
   donkere achtergrond. Nu wat het hoort te zijn.                   */
/* De ghost-knop stond hier met !important. In v2 is dat de
   omlijnde variant; de regel is weg in plaats van overruled. */


/* ── 47. GLAS BOVENIN, OOK TIJDENS TERUGSCROLLEN ──────────────────
   De contextbalk was dekkend en schoof precies achter de header. Wat
   je dan door het glas zag was die balk, niet de pagina — vandaar dat
   het bovenin dicht leek en de transparantie 'wegviel' bij omhoog
   scrollen. Header en contextbalk vormen nu één doorlopende glaslaag. */
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body main .subnav.vast{background:rgba(19,18,24,.72)!important}

}
/* geen dubbele rand tussen de twee lagen */
/* ── 48. TEKST MAG NOOIT TEGEN DE SCHERMRAND ──────────────────────
   Bij het schermvullend maken kregen alleen de klassen die ik met
   naam noemde hun zijmarge terug. Blokken zonder klasse — de kop en
   de lopende tekst van een artikel — vielen buiten die lijst en
   plakten tegen de rand. Nu andersom: alles krijgt marge, en alleen
   wat écht van rand tot rand hoort loopt door.                     */
@media(max-width:620px){

body main .hoofdkolom>*,
  body main .railpin>*{padding-left:14px;padding-right:14px;box-sizing:border-box}
/* kaarten hebben hun eigen binnenmarge en houden die */
body main .hoofdkolom>.card,body main .hoofdkolom>article.card,
  body main .hoofdkolom>section.card,body main .hoofdkolom>.post,
  body main .railpin>.card,body main .railpin>.fx{padding-left:16px;padding-right:16px}
/* beeld loopt wel door tot de rand */
body main .hoofdkolom>.heroimg,
  body main .hoofdkolom>.fhero,
  body main .hoofdkolom>.hscroll{padding-left:0;padding-right:0}
body main .hoofdkolom>.heroimg img,
  body main .hoofdkolom>.heroimg .flfoto{border-radius:0}
/* bijschrift onder het beeld lijnt weer uit met de tekst */
body main .hoofdkolom>.cap{padding-top:9px}

}
/* ══════════════════════════════════════════════════════════════════
   49. GLAS ZONDER KLEURZWEEM
   ══════════════════════════════════════════════════════════════════
   saturate(1.7) versterkte de kleur van wat eronder doorschoof. Boven
   een rode festivalfoto werden de balken daardoor roze. Het glas is nu
   neutraal: sterke blur, nauwelijks verzadiging, en een hogere
   dekking zodat er wel beweging doorheen te zien is maar geen kleur. */
@media(max-width:900px){

body .mobnav{background:rgba(253,253,254,.90)!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.02)!important;
    backdrop-filter:blur(20px) saturate(1.02)!important}

}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body .hdr, html:not([data-thema="licht"]) body main .subnav.vast{background:var(--glas)!important}
html:not([data-thema="licht"]) body .mobnav{background:var(--glas)!important}

}
/* ══════════════════════════════════════════════════════════════════
   50. KOP EN RANDEN — precies zoals Facebook
   ══════════════════════════════════════════════════════════════════
   Facebook heeft geen glazen header: die is dekkend en loopt door tot
   onder de statusbalk, zodat tijd en batterij op de balkkleur staan.
   Doorschijnend is alléén de browserbalk onderaan, en daar scrolt de
   inhoud onderdoor. Zo ontstaat er nooit een kleurzweem.           */
/* de zwevende navigatie blijft wél glas — die ligt over de inhoud */
@media(max-width:900px){

body .mobnav{background:rgba(253,253,254,.86)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.04)!important;
    backdrop-filter:blur(22px) saturate(1.04)!important}

}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body .mobnav{background:var(--glas)!important}

}
/* de inhoud loopt onder de browserbalk door: geen afsluitende rand, de achtergrond van de voet loopt tot de onderrand van het scherm */
@media(max-width:900px){

body main .sitefoot{border-bottom:0;margin-bottom:0}
html,body{background:var(--hdbg,var(--grijs-0))}

}
/* ── 51. LEDENPAGINA ──────────────────────────────────────────────*/
body main .lidlijst{margin-top:6px}
body main .lidrij{display:grid;grid-template-columns:38px minmax(0,1fr) 74px 74px;align-items:center;
  gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
body main .lidrij:last-child{border-bottom:0}
body main .lidtx{min-width:0}
body main .lidtx b{display:block;font-size:13.5px;font-weight:800}
body main .lidtx em{font-style:normal;display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:2px}
body main .lidcijfers{text-align:right}
body main .lidcijfers b{display:block;font-size:13px;font-weight:800}
body main .lidcijfers i{font-style:normal;display:block;font-size:9px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3)}
body main .lidrij:hover .lidtx b{color:var(--fl-rood)}
@media(max-width:620px){

body main .lidrij{grid-template-columns:34px minmax(0,1fr) 68px;gap:10px}
body main .lidrij .lidcijfers:last-child{display:none}

}
body main .rangrij{display:flex;align-items:center;gap:9px;padding:8px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
body main .rangrij:last-child{border-bottom:0}
body main .rangrij em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink3)}
/* ── 52. PARTNERVOORDELEN ─────────────────────────────────────────*/
body main .vdlijst{display:grid;gap:11px;margin-top:10px}
body main .vdkaart{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:start;gap:13px;
  padding:14px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
body main .vdkaart .flogo{width:52px;height:52px;border-radius:15px}
body main .vdtx{min-width:0}
body main .vdsoort{font-style:normal;display:inline-block;font-size:9px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);border:1px solid var(--line);border-radius:999px;
  padding:2px 8px;background:var(--card)}
body main .vdkaart[data-soort="Oplage"] .vdsoort{color:var(--t-rood);border-color:var(--t-rood)}
body main .vdkaart[data-soort="Inruilen"] .vdsoort{color:var(--t-goud);border-color:var(--t-goud)}
body main .vdkaart[data-soort="Doorlopend"] .vdsoort{color:var(--t-groen);border-color:var(--t-groen)}
body main .vdtx b{display:block;font-size:15px;font-weight:800;margin-top:7px;line-height:1.3}
body main .vdtx p{font-size:12.5px;color:var(--ink2);margin:5px 0 0;line-height:1.55}
body main .vdmeta{display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:9px}
body main .vdactie{align-self:center;white-space:nowrap}
body main .vdmeter{display:block;height:5px;border-radius:3px;background:var(--line);margin-top:10px;overflow:hidden}
body main .vdmeter span{display:block;height:100%;border-radius:3px;background:var(--fl-rood)}
body main .vdop{display:block;font-size:10px;font-weight:800;color:var(--ink3);margin-top:4px}
@media(max-width:620px){

body main .vdkaart{grid-template-columns:44px minmax(0,1fr);gap:11px}
body main .vdkaart .flogo{width:44px;height:44px;border-radius:13px}
body main .vdactie{grid-column:1/-1;margin-top:4px}
body main .vdactie .btn{width:100%}

}
/* ── 53. KOP WEG BIJ LEZEN, TERUG BIJ OMHOOG ──────────────────────
   Zoals Facebook: naar beneden lezen maakt het scherm vrij, één
   beweging omhoog brengt alles terug. Alleen op mobiel — op desktop
   is er ruimte zat en is een verspringende kop juist storend.      */
@media(max-width:900px){

body .hdr{transition:transform .26s cubic-bezier(.4,0,.2,1);will-change:transform}
body.kopweg .hdr{transform:translateY(-101%)}
body main .subnav{transition:transform .26s cubic-bezier(.4,0,.2,1);will-change:transform}
body.kopweg main .subnav{transform:translateY(calc(-100% - var(--hd,50px) - 2px));pointer-events:none}
/* de gekleurde merklijn onder de header schuift mee */
body .hdr::after{transition:opacity .2s ease}
body.kopweg .hdr::after{opacity:0}

}
@media(prefers-reduced-motion:reduce){

body .hdr, body main .subnav, body .mobnav{transition:none}

}
/* ══════════════════════════════════════════════════════════════════
   54. RUIMTE — één maatvoering voor de hele site
   ══════════════════════════════════════════════════════════════════
   Padding en tussenruimte waren per pagina gegroeid: 14, 15, 16, 17
   en 18 px door elkaar. Eén schaal, overal dezelfde stappen.       */
:root{--sp1:6px;--sp2:10px;--sp3:14px;--sp4:18px;--sp5:24px;--sp6:32px;--kaartpad:18px;--kaartgat:14px}
@media(max-width:620px){

:root{--kaartpad:16px;--kaartgat:10px}

}
body main .card.pad, body main .fx.card.pad, body main article.card.pad, body main section.card.pad{padding:var(--kaartpad)}
body main .hoofdkolom{display:flex;flex-direction:column;gap:var(--kaartgat)}
body main .railpin{gap:var(--kaartgat)}
body main .hoofdkolom>*{margin-top:0!important;margin-bottom:0!important}
body main .railpin>*{margin-top:0!important;margin-bottom:0!important}
/* koppen binnen kaarten houden overal dezelfde afstand tot hun inhoud */
body main .card .h6{display:block;margin-bottom:var(--sp2)}
body main .card .h6+*{margin-top:0}
body main .card>p:first-of-type{margin-top:0}
body main .card>*:last-child{margin-bottom:0}
/* rijen in lijsten: één verticale maat */
body main .trow, body main .fnode, body main .thrij, body main .lidrij, body main .fdrij, body main .gerecht, body main .idr, body main .apost2{padding-top:var(--sp2);padding-bottom:var(--sp2)}
/* secties op leespagina's */
body main .pagekop{margin-bottom:var(--sp3)}
body main .pagekop h1{margin:0 0 var(--sp1)}
body main .pagekop p{margin:0}
/* ══════════════════════════════════════════════════════════════════
   55. ONBOARDING — visueel in lijn met de rest
   ══════════════════════════════════════════════════════════════════ */
body[data-pagina="onboarding"] main .hoofdkolom{gap:0}
body main .obkop{position:relative;padding:26px var(--kaartpad) 22px;margin-bottom:var(--sp4);border-radius:20px;background:var(--card);box-shadow:var(--sh);overflow:hidden}
body main .obkop::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--fl-rood),var(--fl-paars) 50%,var(--fl-blauw))}
body main .obvoortgang{margin:6px 0 18px}
body main .obbalk{height:6px;background:var(--line)}
body main .obbalk i{background:linear-gradient(90deg,var(--fl-rood),var(--fl-paars))}
body main .obkop h1{font-size:clamp(23px,6vw,31px);letter-spacing:-.025em}
body main .obkop p{font-size:14px;color:var(--ink2);line-height:1.6}
body main .obtegels{gap:var(--sp2)}
body main .obtegel{border-width:1.5px;border-radius:16px;transition:border-color .16s ease,transform .14s ease,box-shadow .18s ease}
body main .obtegel:hover{transform:translateY(-2px);box-shadow:var(--sh)}
body main .obtegel.aan{border-color:var(--fl-rood);box-shadow:0 0 0 3px var(--p-rood)}
body main .obtegel .flfoto{aspect-ratio:16/9}
body main .obtegel b{padding:var(--sp2) 12px;font-size:13.5px}
body main .obtegel.fest{padding:var(--sp2) 12px;gap:var(--sp2)}
body main .obkeuze{border-width:1.5px;border-radius:18px;padding:var(--kaartpad);transition:border-color .16s ease,transform .14s ease,box-shadow .18s ease}
body main .obkeuze:hover{transform:translateY(-2px);box-shadow:var(--sh)}
body main .obkeuze.aan{border-color:var(--fl-rood);box-shadow:0 0 0 3px var(--p-rood)}
body main .obkeuze .obem{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--paper);font-size:21px}
body main .obkeuze.aan .obem{background:var(--p-rood)}
body main .obschakels{border-radius:18px;padding:var(--sp1) var(--kaartpad)}
body main .obvoet{position:sticky;bottom:0;z-index:20;margin-top:var(--sp5);padding:var(--sp3) 0 calc(var(--sp3) + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--bg) 28%);border-top:0}
@media(max-width:900px){

body main .obvoet{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

}
body main .obvoet #obVerder{min-width:150px}
body main .obhint{display:flex;gap:8px;align-items:flex-start;margin-top:var(--sp3);padding:var(--sp2) 12px;border-radius:12px;background:var(--paper);font-size:11.5px;line-height:1.55;color:var(--ink2)}
body main .obhint::before{content:'💡';flex:none}
body main .obklaar{padding:var(--sp6) 0}
body main .obvink{width:66px;height:66px;font-size:29px;box-shadow:0 0 0 8px color-mix(in srgb,var(--p-groen) 60%,transparent)}
/* ══════════════════════════════════════════════════════════════════
   56. TOEGANKELIJKHEID ALS UITGANGSPUNT
   ══════════════════════════════════════════════════════════════════ */
/* zichtbare focus op álles wat bedienbaar is, ook als de pagina zijn
   eigen outline had uitgezet */
body a:focus-visible, body button:focus-visible, body input:focus-visible, body select:focus-visible, body textarea:focus-visible, body [tabindex]:focus-visible{outline:3px solid var(--fl-rood)!important;outline-offset:2px!important;
  border-radius:6px}
html[data-thema="donker"] body :focus-visible{outline-color:var(--rood-400)!important}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body :focus-visible{outline-color:var(--rood-400)!important}

}
/* tapdoelen halen minimaal 44 px, ook als het label kleiner is */
@media(pointer:coarse){

body main .chip,body main .scope,body main .fanker a,body main .fsub a,
  body main .acl,body main .btn.s,body .mobnav a{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
body main .acl{min-width:36px}

}
/* overslaan-naar-inhoud voor toetsenbord en schermlezer */
body .naarinhoud{position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--fl-rood);color:var(--grijs-0);font-weight:800;font-size:13px;
  padding:11px 18px;border-radius:0 0 12px 12px;text-decoration:none;
  transition:top .18s ease}
body .naarinhoud:focus{top:0}
/* ══════════════════════════════════════════════════════════════════
   57. ARTIKELTYPOGRAFIE — het verhaal draagt
   ══════════════════════════════════════════════════════════════════ */
body[data-pagina="artikel"] main .body, body[data-pagina="guide"] main .body{font-size:16.5px;line-height:1.72;color:var(--read)}
body[data-pagina="artikel"] main .body>p:first-of-type, body[data-pagina="guide"] main .body>p:first-of-type{font-size:19px;line-height:1.6;font-weight:600;color:var(--ink)}
body[data-pagina="artikel"] main .body p+p, body[data-pagina="guide"] main .body p+p{margin-top:var(--sp4)}
body[data-pagina="artikel"] main .body h2, body[data-pagina="guide"] main .body h2{font-size:22px;font-weight:800;letter-spacing:-.018em;margin:var(--sp6) 0 var(--sp2)}
body[data-pagina="artikel"] main .body blockquote, body[data-pagina="artikel"] main .body .quote{margin:var(--sp5) 0;padding:var(--sp3) var(--sp4);
  border-left:3px solid var(--fl-rood);background:var(--tint);border-radius:0 14px 14px 0;
  font-size:18px;line-height:1.55;font-weight:700}
@media(max-width:620px){

body[data-pagina="artikel"] main .body{font-size:16px}
body[data-pagina="artikel"] main .body>p:first-of-type{font-size:17.5px}
body[data-pagina="artikel"] main .body h2{font-size:20px}

}
/* ── 58. VOLGORDE NAAR CONTEXT ────────────────────────────────────
   Als de pagina zich aanpast, zeg dat dan — en laat het terugdraaien. */
body main .volgorde{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:11.5px;font-weight:700;color:var(--ink2);
  padding:var(--sp2) 12px;border-radius:12px;background:var(--sectie-zacht);
  border:1px solid var(--line);margin:0}
body main .volgorde::before{content:'↕';font-weight:800;color:var(--sectie)}
body main .volgorde-uit{font:inherit;font-size:11.5px;font-weight:800;color:var(--sectie);cursor:pointer;
  background:none;border:0;text-decoration:underline;padding:0}
/* ══════════════════════════════════════════════════════════════════
   59. GLAS — doorschijnend zonder kleurzweem
   ══════════════════════════════════════════════════════════════════
   Kop, contextbalk en onderbalk zijn weer doorschijnend, zodat de
   pagina er zichtbaar onderdoor loopt. Zonder saturate: blur alleen
   vermengt kleuren, verzadiging versterkte ze — dat was de roze waas. */
@media(max-width:900px){

body .mobnav{background:rgba(253,253,254,.70)!important;
    -webkit-backdrop-filter:blur(26px)!important;backdrop-filter:blur(26px)!important;
    border:1px solid rgba(255,255,255,.5)!important}

}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body .hdr, html:not([data-thema="licht"]) body main .subnav.vast{background:var(--glas)!important;border-bottom-color:var(--glas-rand)!important}
html:not([data-thema="licht"]) body .mobnav{background:var(--glas)!important;border-color:var(--glas-rand)!important}

}
html[data-thema="donker"] body .hdr, html[data-thema="donker"] body main .subnav.vast{background:var(--glas)!important}
html[data-thema="licht"] body .hdr, html[data-thema="licht"] body main .subnav.vast{background:var(--glas)!important}
/* ══════════════════════════════════════════════════════════════════
   60. VIBRANCY — de inhoud kleurt de balken mee
   ══════════════════════════════════════════════════════════════════
   Blur mengt, verzadiging maakt levendig. Samen pakt de balk de kleur
   op van wat eronder doorschuift: rood bij een festivalfoto, koel bij
   een blauwe. Dat is wat het vloeiend maakt. Belangrijk is dat de
   dekking gelíjkmatig is — het verloop van eerder was het probleem, niet de kleur.                                                    */
body .hdr{background:var(--glas)!important;-webkit-backdrop-filter:var(--glas-waas)!important;backdrop-filter:var(--glas-waas)!important}
body main .subnav.vast{background:var(--glas)!important;-webkit-backdrop-filter:var(--glas-waas)!important;backdrop-filter:var(--glas-waas)!important;box-shadow:0 10px 16px -18px rgba(20,18,30,.3)!important}
@media(max-width:900px){

body .mobnav{background:var(--glas)!important;
    -webkit-backdrop-filter:var(--glas-waas)!important;
    backdrop-filter:var(--glas-waas)!important;
    border:1px solid rgba(255,255,255,.45)!important}

}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body .hdr{background:var(--glas)!important}
html:not([data-thema="licht"]) body main .subnav.vast{background:var(--glas)!important}
html:not([data-thema="licht"]) body .mobnav{background:var(--glas)!important;border-color:var(--glas-rand)!important}

}
html[data-thema="donker"] body .hdr{background:var(--glas)!important}
html[data-thema="donker"] body main .subnav.vast{background:var(--glas)!important}
html[data-thema="donker"] body .mobnav{background:var(--glas)!important}
html[data-thema="licht"] body .hdr{background:var(--glas)!important}
html[data-thema="licht"] body main .subnav.vast{background:var(--glas)!important}
/* tekst blijft leesbaar op een levendige ondergrond */
body .hdr .dzoek:not(.nbel){background:var(--glas);border-color:var(--glas-rand)}
body .mobnav a span{text-shadow:0 1px 2px rgba(255,255,255,.5)}
html[data-thema="donker"] body .hdr .dzoek:not(.nbel){background:var(--glas);border-color:var(--glas-rand)}
html[data-thema="donker"] body .mobnav a span{text-shadow:0 1px 3px rgba(0,0,0,.6)}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body .hdr .dzoek:not(.nbel){background:var(--glas);border-color:var(--glas-rand)}
html:not([data-thema="licht"]) body .mobnav a span{text-shadow:0 1px 3px rgba(0,0,0,.6)}

}
/* ══════════════════════════════════════════════════════════════════
   61. ÉÉN OPPERVLAK BOVENIN
   ══════════════════════════════════════════════════════════════════
   De contextbalk had alleen glas zodra hij vastliep; daarvoor was hij
   een dekkende witte balk met een harde rand onder de header. Twee
   oppervlakken dus, waar Facebook er één heeft. De balk is nu altijd
   hetzelfde glas als de header, zonder eigen rand of schaduw — samen
   lezen ze als één doorlopend vlak van twee regels.                */
body main .subnav, body main .subnav.vast{background:var(--glas)!important;
  -webkit-backdrop-filter:var(--glas-waas)!important;
  backdrop-filter:var(--glas-waas)!important;
  box-shadow:none!important;border-bottom:0!important}
body .hdr{border-bottom:0!important}
/* één haarlijn onder het geheel, alleen als er daadwerkelijk iets
   onderdoor schuift */
body main .subnav.vast::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--glas)}
/* de subnav scrollt mee met de pagina, hij plakt niet bovenaan */
body main .subnav{position:static}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body main .subnav, html:not([data-thema="licht"]) body main .subnav.vast{background:var(--glas)!important}
html:not([data-thema="licht"]) body main .subnav.vast::after{background:var(--glas)}

}
html[data-thema="donker"] body main .subnav, html[data-thema="donker"] body main .subnav.vast{background:var(--glas)!important}
html[data-thema="licht"] body main .subnav, html[data-thema="licht"] body main .subnav.vast{background:var(--glas)!important}
/* de contextbalk plakt direct tegen de header aan, zonder tussenruimte */
@media(max-width:900px){

body main .subnav{top:var(--hd,50px);margin-top:0;padding-top:8px;padding-bottom:8px}
body.heeft-mobnav main.page{padding-top:var(--boven,64px)!important}
body main .hoofdkolom>.subnav{margin-bottom:var(--sp3)}

}
/* ══════════════════════════════════════════════════════════════════
   62. INHOUD BEGINT ONDER DE KOP, MAAR SCHUIFT ER WEL ONDERDOOR
   ══════════════════════════════════════════════════════════════════
   Ik had de bovenmarge op nul gezet om kop en contextbalk tegen
   elkaar te krijgen. Gevolg: de eerste blokken stonden meteen áchter
   de vaste header — vandaar de half verdwenen ticker. De marge is
   terug, en omdat de header vast staat schuift alles er alsnog
   onderdoor zodra je scrolt. Precies wat er onderaan ook gebeurt.  */
@media(max-width:900px){

body.heeft-mobnav main.page{padding-top:var(--boven,64px)!important}
body main .subnav{top:var(--hd,50px)}

}
/* de ticker hoort binnen de kolommarge en over de volle breedte */
@media(max-width:620px){

body main .hoofdkolom>.tickerwrap,
  body main .hoofdkolom>.ticker,
  body main .hoofdkolom>.livebar{padding-left:14px;padding-right:14px;box-sizing:border-box;
    display:flex;align-items:center;min-height:44px}

}
/* ══════════════════════════════════════════════════════════════════
   63. DRIE RIJEN, ÉÉN OPPERVLAK
   ══════════════════════════════════════════════════════════════════
   Twee fouten die het geheel braken:
   · de chiprij in de contextbalk had een eigen dekkende achtergrond, waardoor er een grijs blok achter de chips stond
   · de header stond op border-box met een vaste hoogte van 50 px, dus
     de veilige zone bovenin viel erbuiten — dat was de witte strook
   Nu draagt alleen de balk zelf een vlak, en loopt het glas door tot
   in de statusbalk.                                                 */
body main .subnav .fanker, body main .subnav .fsub, body main .subnav .scopes, body main .subnav .chips, body main .subnav .kruim{background:transparent!important;border:0!important;box-shadow:none!important}
body .hdr{box-sizing:content-box!important;height:50px!important;padding-top:env(safe-area-inset-top,0px)!important;padding-bottom:0!important}
@media(max-width:400px){

body .hdr{height:48px!important}

}
/* de chips zelf houden hun eigen vulling — die moeten leesbaar blijven */
body main .subnav .fanker a, body main .subnav .fsub a, body main .subnav .scope, body main .subnav .chip{background:var(--glas);border-color:var(--glas-rand)}
body main .subnav .fanker a.hier, body main .subnav .fsub a.hier, body main .subnav .scope.on, body main .subnav .chip.on{background:var(--glas)}
@media(prefers-color-scheme:dark){

html:not([data-thema="licht"]) body main .subnav .fanker a, html:not([data-thema="licht"]) body main .subnav .fsub a, html:not([data-thema="licht"]) body main .subnav .scope, html:not([data-thema="licht"]) body main .subnav .chip{background:var(--glas);border-color:var(--glas-rand)}

}
html[data-thema="donker"] body main .subnav .fanker a, html[data-thema="donker"] body main .subnav .fsub a, html[data-thema="donker"] body main .subnav .scope, html[data-thema="donker"] body main .subnav .chip{background:var(--glas);border-color:var(--glas-rand)}
/* ── 64. RANDEN VAN HET SCHERM ────────────────────────────────────
   Zonder theme-color laat Safari de pagina zelf door de statusbalk en
   de browserbalk heen zien. Daarvoor mag de achtergrond daar niet
   dichtgeschilderd worden: html en body blijven transparant, alleen
   de pagina-inhoud draagt een vlak.                                */
@media(max-width:900px){

html{background:var(--bg)}
body{background:transparent}
body main.page{background:var(--bg)}
/* de voet loopt door tot de onderrand, zodat er onder de browserbalk
     inhoud staat in plaats van een lege strook */
body main .sitefoot{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));
    margin-bottom:calc(-1 * env(safe-area-inset-bottom,0px))}

}
/* ══════════════════════════════════════════════════════════════════
   65. ÉÉN RITME VOOR BEWEGING
   ══════════════════════════════════════════════════════════════════
   Er liepen 24 verschillende transitie-instellingen door elkaar. Deze
   drie snelheden gelden vanaf nu voor alles wat van staat wisselt.
   Additief: bestaande regels worden niet verwijderd, alleen
   overschreven op het niveau waar het uitmaakt.                     */
:root{--snel:.14s cubic-bezier(.4,0,.2,1);/* directe reactie: hover, chip, knop */
  --mid:.24s cubic-bezier(.4,0,.2,1);/* verplaatsing: balken, panelen     */
  --traag:.32s cubic-bezier(.4,0,.2,1);/* intrede: kaarten, overlays        */
  --r1:8px;--r2:12px;--r3:16px;--r4:20px;--rmax:999px}
body main .chip, body main .scope, body main .acl, body main .fanker a, body main .fsub a, body main .btn, body main .volg, body main .fpknop, body main .filterknop, body main .obtegel, body main .obkeuze, body main .lidrij, body main .vdkaart, body main .trow, body main .fnode, body main .thrij, body main .fdrij, body main .idr{transition:background var(--snel),border-color var(--snel),color var(--snel),
             transform var(--snel),box-shadow var(--mid)}
body .hdr, body main .subnav, body .mobnav{transition:transform var(--mid)}
body main .card, body main .vdkaart{transition:box-shadow var(--mid),border-color var(--snel)}
/* aanraakfeedback: alles wat klikbaar is drukt even in */
body main .chip:active, body main .scope:active, body main .btn:active, body main .fanker a:active, body main .fsub a:active, body main .acl:active, body main .obtegel:active, body main .obkeuze:active{transform:scale(.965)}
/* ── 66. ONTBREKENDE STATEN ───────────────────────────────────────
   Rijen in lijsten hadden wel hover maar geen actieve of bezochte
   staat, en uitgeschakelde knoppen zagen er klikbaar uit.          */
body main .trow:hover, body main .fnode:hover, body main .thrij:hover, body main .lidrij:hover, body main .fdrij:hover, body main .idr:hover, body main .apost2:hover{background:var(--paper)}
body main .trow, body main .fnode, body main .thrij, body main .lidrij, body main .fdrij, body main .idr, body main .apost2{border-radius:var(--r2);padding-left:8px;padding-right:8px;
  margin-left:-8px;margin-right:-8px}
body button[disabled], body .btn[disabled], body input[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.35)}
body button[aria-busy="true"]{position:relative;color:transparent!important}
body button[aria-busy="true"]::after{content:'';position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:fldraai .7s linear infinite;color:var(--grijs-0)}
@keyframes fldraai{

to{transform:rotate(360deg)}

}
/* ── 67. VORMENSCHAAL ─────────────────────────────────────────────
   25 verschillende radius-waarden teruggebracht tot vier maten plus
   de pil. Alleen daar toegepast waar het zichtbaar afwijkt.        */
body main .card, body main .fx.card{border-radius:var(--r4)}
body main .vdkaart, body main .obkeuze, body main .awkaart, body main .fdsubv, body main .raped, body main .rapzegel, body main .leeg{border-radius:var(--r3)}
body main .flogo.s, body main .flava, body main .idic{border-radius:var(--r2)}
body main .chip, body main .scope, body main .btn, body main .fanker a, body main .fsub a, body main .fbadge, body main .fpknop{border-radius:var(--rmax)}
@media(max-width:620px){

body main .hoofdkolom>.card, body main .hoofdkolom>article.card, body main .hoofdkolom>section.card{border-radius:0}

}
/* ══════════════════════════════════════════════════════════════════
   66. AVATAR-DESIGNSYSTEEM
   ══════════════════════════════════════════════════════════════════
   Het merk is de bron: roze, cyaan en lavendel uit de druppels.
   Donker is de standaard; licht draait op hetzelfde palet.          */
:root{--avatar-roze:var(--rood-500);--avatar-roze-op:var(--rood-400);--avatar-cyaan:var(--blauw-500);--avatar-lavendel:var(--blauw-400);--neutraal-licht:var(--grijs-100);--houtskool:var(--grijs-900);--grad-primair:linear-gradient(135deg,var(--rood-500) 0%,var(--blauw-500) 100%);--grad-zacht:linear-gradient(135deg,var(--blauw-500) 0%,var(--blauw-400) 100%);--grad-gloed:linear-gradient(135deg,var(--rood-500) 0%,var(--rood-400) 40%,var(--blauw-500) 100%);--schaduw-cyaan:0 0 20px color-mix(in srgb, var(--blauw-500) 35%, transparent);--fl-blauw:var(--blauw-500);--fl-paars:var(--blauw-400);--fl-lichtblauw:var(--blauw-500);--fl-groen:var(--blauw-500);--duo-rood:linear-gradient(150deg,var(--grijs-900),var(--rood-500) 60%,var(--rood-200));--duo-blauw:linear-gradient(150deg,var(--grijs-900),var(--blauw-500) 60%,var(--blauw-200));--duo-paars:linear-gradient(150deg,var(--grijs-900),var(--blauw-400) 60%,var(--blauw-100));--duo-groen:linear-gradient(150deg,var(--grijs-900),var(--blauw-500) 55%,var(--blauw-400));--duo-goud:linear-gradient(150deg,var(--grijs-800),var(--goud-500) 60%,var(--goud-100));--duo-oranje:linear-gradient(150deg,var(--grijs-900),var(--rood-400) 60%,var(--goud-100));--duo-geel:linear-gradient(150deg,var(--grijs-900),var(--blauw-400) 55%,var(--blauw-500));--duo-inkt:linear-gradient(150deg,var(--grijs-950),var(--grijs-800) 60%,var(--grijs-600))}
/* donker is de standaard; alleen een eigen keuze voor licht wijkt af */
html:not([data-thema="licht"]){color-scheme:dark;--ink:var(--grijs-0);--ink3:var(--grijs-400);--line:var(--grijs-800);--glasdek:rgba(0,0,0,.55)}
html

html:not([data-thema="licht"]) body .mobnav{border-color:var(--glas-rand)!important}
/* het merk: gloed op donker, zachte schaduw op licht */
html:not([data-thema="licht"]) body .merkdruppels{filter:drop-shadow(0 0 6px rgba(255,45,106,.55)) drop-shadow(0 0 10px color-mix(in srgb, var(--blauw-500) 40%, transparent))}
html[data-thema="licht"] body .merkdruppels{filter:drop-shadow(0 2px 4px rgba(17,24,39,.18))}
/* knoppen */
/* navigatie */
 body main .subnav .fanker a.hier,  body main .subnav .scope.on,  body main .subnav .fsub a.hier{color:var(--avatar-roze)!important;border-color:var(--avatar-roze)!important}
body main .dnav a:hover, body main .fanker a:hover{color:var(--avatar-lavendel)}
/* kaarten */
html:not([data-thema="licht"]) body main .card{border-color:var(--grijs-800)}
/* voortgang, meters en accentlijnen in het nieuwe palet */
body main .fdbalk i, body main .rapbalk i, body main .vdmeter span, body main .obbalk i{background:var(--grad-primair)}
body main .sitefoot::before, body main .obkop::before{background:var(--grad-gloed)}
body main .fbadge.groen{background:color-mix(in srgb, var(--blauw-500) 12%, transparent);color:var(--avatar-cyaan)}
body main .fbadge.blauw{background:color-mix(in srgb, var(--blauw-500) 12%, transparent);color:var(--avatar-cyaan)}
body main .fbadge.paars{background:rgba(167,139,250,.14)}
body main .fbron.site{background:color-mix(in srgb, var(--blauw-500) 12%, transparent)}
body main .fbron.forum{background:rgba(167,139,250,.14)}
/* ══════════════════════════════════════════════════════════════════
   67. DEFINITIEF PALET + AVATAR-BESTANDEN
   ══════════════════════════════════════════════════════════════════ */
html:not([data-thema="licht"]){--hdbg:var(--grijs-950);--card:var(--grijs-950);--accent-hover:var(--rood-400)}
html
html:not([data-thema="licht"]), html:not([data-thema="licht"]) body{background:var(--bg)}
html[data-thema="licht"], html[data-thema="licht"] body{background:var(--card)}
/* knoppen */
/* Stond hier met drie keer !important om het verloop af te dwingen.
   Het verloop hoort niet op een knop, dus de regel zelf is aangepast
   in plaats van er een laag overheen te leggen. */
body .btn.g27, body main .btn.g27{background:var(--v2-rood);color:#fff;border:0}
body .btn.g27:hover, body main .btn.g27:hover{box-shadow:var(--schaduw-gloed)}
body main .btn.lijn{border:1.5px solid var(--rood-500);color:var(--rood-500);background:transparent}
body main .btn.lijn:hover{background:var(--grad-primair);color:var(--grijs-0);border-color:transparent;box-shadow:var(--schaduw-gloed)}
/* navigatie actief */
 body main .subnav .fanker a.hier,  body main .subnav .scope.on,  body main .subnav .fsub a.hier,  body main .chip.on{color:var(--rood-500)!important;border-color:var(--rood-500)!important}
/* de vulling achter de actieve tab vervalt: zie de streep hieronder */
/* ── het merk in de kop: het echte bestand, niet meer de SVG ────── */
body .wm-img{display:inline-block!important;object-fit:contain}
body .wm-fb{display:none!important}
@media(max-width:560px){

body .wm-img{width:32px;height:32px}

}
/* het aangeleverde bestand draagt zijn eigen gloed al; geen dubbele filter */
body .wm-img{filter:none!important}
html[data-thema="licht"] body .wm-img{filter:none!important}
/* het merkbestand heeft nu 13% marge in het vierkant; iets groter tonen
   zodat de druppels visueel even groot blijven als voorheen */
body .wm-img{width:46px!important;height:46px!important;margin:-5px 0}
@media(max-width:560px){

body .wm-img{width:40px!important;height:40px!important;margin:-4px 0}

}
/* de artikelpagina heeft een eigen rasterklasse (.inner.art); de
   voetwikkel daarbinnen erfde daardoor een smalle kolombreedte, waardoor de voetinhoud 388 px naar rechts stond */
body main .inner.art>.inner{grid-column:1/-1;width:100%;max-width:none}
/* ══════════════════════════════════════════════════════════════════
   68. DRIE CORRECTIES
   ══════════════════════════════════════════════════════════════════ */
/* ── a. het gat onder de kop ─────────────────────────────────────
   main begon al op de headerhoogte én kreeg daar nog eens dezelfde
   afstand als padding overheen. Nu één keer, met 12 px lucht.     */
@media(max-width:900px){

body.heeft-mobnav main.page{padding-top:var(--boven,64px)!important}
body main .inner{padding-top:0}

}
/* ── b. de festivalkop was te fel ────────────────────────────────
   Een volle duotoon naast een zwarte pagina schreeuwt. De band is nu
   gedempt en loopt onderaan weg in de achtergrond, zodat hij overgaat
   in de pagina in plaats van ertegenaan te knallen.                */
body main .fhero{position:relative;isolation:isolate}
body main .fhero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.30) 0%,rgba(10,10,10,.10) 45%,var(--bg) 100%)}
html:not([data-thema="licht"]) body main .fhero{filter:saturate(.72) brightness(.86)}
html:not([data-thema="licht"]) body main .fhero .flogo, html:not([data-thema="licht"]) body main .fhero .btn{filter:saturate(1.35) brightness(1.18)}
/* de tekst blijft leesbaar op de gedempte band */
body main .fhero h1, body main .fhero .fherometa{text-shadow:0 1px 12px rgba(0,0,0,.35)}
/* ── c. de onderbalk: strakker, rustiger, duidelijker ────────────
   Was: brede pil met gloed, dikke rand, labels op 9, 5 px. Nu een
   compacter blad, één rustige rand, grotere raakvlakken en een
   actief item dat je ziet zonder te zoeken.                        */
@media(max-width:900px){

body .mobnav{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));
    padding:5px 4px 4px;border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -12px rgba(0,0,0,.55)}
html[data-thema="licht"] body .mobnav{border-color:rgba(17,24,39,.08);
    box-shadow:0 1px 2px rgba(17,24,39,.05),0 10px 28px -14px rgba(17,24,39,.22)}
body .mobnav a{gap:4px;padding:7px 2px 5px;border-radius:14px;
    color:var(--ink3);font-weight:800}
body .mobnav a svg{width:20px;height:20px;stroke-width:1.75}
body .mobnav a span{font-size:10px;letter-spacing:.01em;text-shadow:none}
/* actief: gevuld vlak in plaats van alleen kleur — direct zichtbaar */


body .mobnav a.aan svg{stroke-width:2.1;transform:none}
body .mobnav a.aan::before{display:none}
body .mobnav a:not(.aan):active{background:rgba(255,255,255,.07)}
html[data-thema="licht"] body .mobnav a:not(.aan):active{background:rgba(17,24,39,.05)}
/* de plusknop staat los van de balk en botst er niet meer mee */
body.heeft-mobnav .fab{bottom:calc(86px + env(safe-area-inset-bottom,0px));
    width:52px;height:52px}

}
/* ══════════════════════════════════════════════════════════════════
   69. DONKERE WEERGAVE — meer verschil tussen de lagen
   ══════════════════════════════════════════════════════════════════
   Kaarten stonden op var(--grijs-950) tegen een achtergrond van var(--grijs-950): elf
   punten verschil, bijna niets. De lagen zijn nu duidelijk uit elkaar
   getrokken en de randen dragen echt mee, zodat je ziet waar een kaart
   begint zonder dat het grijs wordt.                                */
html:not([data-thema="licht"]){--bg:var(--grijs-950);/* pagina — iets koeler dan puur zwart      */
  --hdbg:var(--grijs-950);--vlak:var(--grijs-950);--paper:var(--grijs-900);/* was var(--grijs-950) — vlakken binnen kaarten     */
  --card:var(--grijs-900);/* was var(--grijs-950) — 20 punten boven de pagina  */
  --line:var(--grijs-700);/* was var(--grijs-800) — rand is nu echt zichtbaar  */
  --ink:var(--grijs-0);--ink2:var(--grijs-300);/* was var(--grijs-400) — leesbaarder                */
  --ink3:var(--grijs-400);--read:var(--grijs-100);--sh:0 1px 2px rgba(0,0,0,.55);--shl:0 2px 8px rgba(0,0,0,.6),0 18px 40px -20px rgba(0,0,0,.8)}
html:not([data-thema="licht"]), html:not([data-thema="licht"]) body{background:var(--bg)}
html:not([data-thema="licht"]) body main .card{background:var(--card);border:1px solid var(--grijs-700)}
html:not([data-thema="licht"]) body main .card:hover{border-color:var(--grijs-600);box-shadow:0 0 0 1px color-mix(in srgb, var(--rood-500) 22%, transparent),var(--shl)}
/* vlakken bínnen een kaart moeten weer van de kaart verschillen */
html:not([data-thema="licht"]) body main .vdkaart, html:not([data-thema="licht"]) body main .awkaart, html:not([data-thema="licht"]) body main .obschakels, html:not([data-thema="licht"]) body main .fdsubv, html:not([data-thema="licht"]) body main .raped, html:not([data-thema="licht"]) body main .fcitaat, html:not([data-thema="licht"]) body main .leeg{background:var(--paper);border-color:var(--grijs-700)}
html:not([data-thema="licht"]) body main .chip, html:not([data-thema="licht"]) body main .scope, html:not([data-thema="licht"]) body main .fanker a, html:not([data-thema="licht"]) body main .fsub a{background:var(--paper);border-color:var(--grijs-700);color:var(--ink2)}
html:not([data-thema="licht"]) body main .chip:hover, html:not([data-thema="licht"]) body main .scope:hover{border-color:var(--grijs-600);color:var(--grijs-0)}
/* glaslagen mee omhoog, anders vallen ze weg tegen de lichtere pagina */
html:not([data-thema="licht"]) body .hdr, html:not([data-thema="licht"]) body main .subnav{background:var(--glas)!important}
html:not([data-thema="licht"]) body .mobnav{background:var(--glas)!important;border-color:var(--glas-rand)!important}
html:not([data-thema="licht"]) body .hdr .dzoek:not(.nbel){background:var(--card);border-color:var(--grijs-700);color:var(--ink2)}
/* ══════════════════════════════════════════════════════════════════
   70. BEWEGING BIJ HET LEZEN
   ══════════════════════════════════════════════════════════════════
   Blokken komen op zodra ze in beeld schuiven: 14 px omhoog en van
   doorzichtig naar dekkend, één keer.

   Belangrijk: de standaard is zíchtbaar. Alleen wat JavaScript
   expliciet markeert wordt even verborgen. Gaat er iets mis met de
   waarnemer, dan staat de pagina er gewoon — nooit een leeg scherm
   omdat een animatie niet afging.                                   */
body main .opkomst{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),
             transform .5s cubic-bezier(.22,.61,.36,1)}
body main .opkomst.inbeeld{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){

body main .opkomst{opacity:1!important;transform:none!important;transition:none!important}

}
@media(hover:hover){

body main .hoofdkolom>.card{transition:transform var(--snel),box-shadow var(--mid),border-color var(--snel)}
body main .hoofdkolom>.card:hover{transform:translateY(-2px)}

}
/* ══════════════════════════════════════════════════════════════════
   71. GLAS IN LICHTE WEERGAVE + SCHERMVULLEND OP ELK FORMAAT
   ══════════════════════════════════════════════════════════════════ */
/* ── a. rustiger glas op licht ───────────────────────────────────
   Op een lichte pagina versterkt verzadiging elke kleur die eronder
   schuift: een gouden badge maakte de hele kop crème. Op donker mag
   het levendig blijven, want daar tilt het de balk juist op.       */
html[data-thema="licht"] body .hdr, html[data-thema="licht"] body main .subnav{background:var(--glas)!important;-webkit-backdrop-filter:var(--glas-waas)!important;backdrop-filter:var(--glas-waas)!important}
html[data-thema="licht"] body .mobnav{background:var(--glas)!important;-webkit-backdrop-filter:var(--glas-waas)!important;backdrop-filter:var(--glas-waas)!important}
/* de chips vormden een eigen witte band in de balk; nu dragen ze
   alleen een rand, zodat kop en balk één oppervlak blijven */
html[data-thema="licht"] body main .subnav .fanker a, html[data-thema="licht"] body main .subnav .fsub a, html[data-thema="licht"] body main .subnav .scope, html[data-thema="licht"] body main .subnav .chip{background:var(--glas);border-color:var(--glas-rand)}
html[data-thema="licht"] body main .subnav .fanker a.hier, html[data-thema="licht"] body main .subnav .scope.on, html[data-thema="licht"] body main .subnav .chip.on{background:var(--card)}
/* de balk zelf compacter op mobiel — hij was hoger dan de kop */
@media(max-width:620px){

body main .subnav{padding:7px 0}
body main .subnav .fanker a,body main .subnav .fsub a,
  body main .subnav .scope,body main .subnav .chip{font-size:12px;padding:7px 13px;min-height:38px}

}
/* ── b. brede schermen — teruggedraaid ───────────────────────────
   Ik heb geprobeerd de kolom mee te laten groeien op grote schermen.
   Dat leverde een uitlijnfout op: de kolom houdt een eigen maximum en
   blijft gecentreerd, terwijl de voet zich op de bredere container
   uitlijnt — op 2560 px liep dat 200 tot 300 px uit elkaar. Correct
   uitgelijnd op 1120 px is beter dan breder maar scheef.

   Wie dit alsnog wil: begin bij de max-width van .hoofdkolom in de
   inline CSS van de pagina's, niet bij .inner in deze laag. Zolang die
   twee verschillende maxima hebben, valt de full-bleed voet nooit
   samen met de kolom.                                               */
/* rasters vullen extra ruimte wel met méér kolommen — dat raakt de
   uitlijning niet, want het speelt zich binnen de kolom af */
@media(min-width:1500px){

body main .acgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
body main .awrooster{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

}
/* tablet: kaarten mogen daar ook van rand tot rand */
/* tablet: alleen de kaartvorm, geen extra padding — dat zette de voet
   16 px uit de rooilijn omdat die zich op de container uitlijnt */
@media(min-width:621px) and (max-width:820px){

body main .hoofdkolom>.card{border-radius:var(--r3)}

}
/* ══════════════════════════════════════════════════════════════════
   72. LICHTE WEERGAVE — uit het pastel
   ══════════════════════════════════════════════════════════════════
   Witte kaarten op var(--grijs-25) scheelden zeven punten; dat leest als één
   grijze vlakte. En de demping die de festivalkop op zwart rustig
   maakt, maakte hem op licht bleek. Beide zijn nu per weergave
   geregeld in plaats van voor allebei tegelijk.                     */
html[data-thema="licht"] body main .card{background:var(--card)}
/* vlakken bínnen een kaart moeten ook op licht een eigen niveau hebben */
/* de festivalkop mag op licht gewoon kleur hebben */
html[data-thema="licht"] body main .fhero::after{background:linear-gradient(180deg,rgba(15,23,42,.06) 0%,transparent 42%,var(--bg) 100%)}
/* beeldslots en duotonen op licht iets dieper, anders vervagen ze */
html[data-thema="licht"] body main .flfoto{filter:saturate(1.06) contrast(1.03)}
/* het merkstreepje en de accentlijn blijven herkenbaar op licht */
html[data-thema="licht"] body main .h6{color:var(--blauw-700)}
html[data-thema="licht"] body main .chip, html[data-thema="licht"] body main .scope{background:var(--card);border-color:var(--line);color:var(--blauw-700)}
html[data-thema="licht"] body main .chip:hover, html[data-thema="licht"] body main .scope:hover{border-color:var(--grijs-400);color:var(--ink)}
/* ══════════════════════════════════════════════════════════════════
   73. ONBOARDING — een wizard, geen gewone pagina
   ══════════════════════════════════════════════════════════════════
   Er zweefden drie dingen tegelijk overheen: de knoppenbalk, de
   plusknop en de hoofdnavigatie. Een wizard heeft één weg vooruit en
   één weg eruit. De rest gaat weg zolang je erin zit.               */
body[data-pagina="onboarding"] .fab{display:none!important}
body[data-pagina="onboarding"] .mobnav{display:none!important}
body[data-pagina="onboarding"].heeft-mobnav{padding-bottom:0}
/* de kop: geen loze ruimte boven de voortgangsbalk */
/* de knoppenbalk wordt één vaste balk over de volle breedte, met
   hetzelfde glas als de rest van de site */
body[data-pagina="onboarding"] main .obvoet{position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:10px;
  margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--glasdek,rgba(8,8,11,.72));
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  border-top:1px solid var(--line)}
html[data-thema="licht"] body[data-pagina="onboarding"] main .obvoet{background:var(--glas);border-top-color:var(--glas-rand)}
body[data-pagina="onboarding"] main .obvoet #obVerder{margin-left:auto;min-width:152px}
body[data-pagina="onboarding"] main .hoofdkolom{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
/* tegels compacter en met leesbare labels */
body[data-pagina="onboarding"] main .obtegels{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
body[data-pagina="onboarding"] main .obtegel .flfoto{aspect-ratio:5/3}
body[data-pagina="onboarding"] main .obtegel b{padding:10px 12px;font-size:13px;color:var(--ink);font-weight:800}
body[data-pagina="onboarding"] main .obtegel{background:var(--card);border-color:var(--line)}
body[data-pagina="onboarding"] main .obtegel.aan b{color:var(--fl-rood)}
@media(max-width:430px){

body[data-pagina="onboarding"] main .obtegels{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-pagina="onboarding"] main .obtegel .flfoto{aspect-ratio:16/9}
body[data-pagina="onboarding"] main .obtegel b{font-size:12.5px;padding:9px 10px}

}
/* de stap zelf krijgt lucht van de kop */
/* ══════════════════════════════════════════════════════════════════
   74. LICHT — definitie in plaats van duisternis
   ══════════════════════════════════════════════════════════════════
   De pagina nóg donkerder maken levert grijs op. Contrast komt hier
   uit de omlijning van de kaarten en het gewicht van de festivalkop.  */
html
html[data-thema="licht"], html[data-thema="licht"] body{background:var(--paper)}
html[data-thema="licht"] body main .card{border:1px solid var(--grijs-300);box-shadow:0 1px 1px rgba(15,23,42,.04),0 10px 24px -14px rgba(15,23,42,.20)}
html[data-thema="licht"] body main .card:hover{border-color:var(--grijs-400);box-shadow:0 2px 4px rgba(15,23,42,.06),0 24px 46px -20px rgba(15,23,42,.28)}
html[data-thema="licht"] body main .vdkaart, html[data-thema="licht"] body main .awkaart, html[data-thema="licht"] body main .obschakels, html[data-thema="licht"] body main .fdsubv, html[data-thema="licht"] body main .raped, html[data-thema="licht"] body main .fcitaat, html[data-thema="licht"] body main .leeg{background:var(--bg);border-color:var(--line)}
/* de festivalkop krijgt gewicht: een donkere sluier bovenin waar de
   status en de titel staan, zodat wit tekst echt wit is en de band
   niet als pastelvlek leest */
html[data-thema="licht"] body main .fhero::before{content:'';position:absolute;inset:0 0 auto 0;height:58%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,23,42,.34) 0%,rgba(15,23,42,.10) 60%,transparent 100%)}
html[data-thema="licht"] body main .fhero>*{position:relative;z-index:1}
html[data-thema="licht"] body main .fhero{filter:saturate(1.08)}
html[data-thema="licht"] body main .fhero h1, html[data-thema="licht"] body main .fhero .fherometa{text-shadow:0 2px 14px rgba(15,23,42,.45)}
/* scheidingslijnen binnen kaarten mogen ook meedoen */
html[data-thema="licht"] body main .trow, html[data-thema="licht"] body main .fnode, html[data-thema="licht"] body main .thrij, html[data-thema="licht"] body main .lidrij, html[data-thema="licht"] body main .arow, html[data-thema="licht"] body main .idr, html[data-thema="licht"] body main .apost2{border-bottom-color:var(--grijs-200)}
/* ══════════════════════════════════════════════════════════════════
   75. CONTEXTBALK, WEERGAVE EN ONBOARDING
   ══════════════════════════════════════════════════════════════════ */
/* ── a. de balk draagt pas een vlak als hij plakt ─────────────────
   Op desktop stond hij altijd op glas; dat leest als een zwevende
   witte kaart achter de knoppen. Hij hoort onzichtbaar te zijn tot
   er iets onderdoor schuift.                                       */
@media(min-width:901px){

body main .subnav{background:transparent!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    box-shadow:none!important}
body main .subnav.vast{background:var(--glasdek)!important;-webkit-backdrop-filter:blur(26px) saturate(1.5)!important;backdrop-filter:blur(26px) saturate(1.5)!important}
html[data-thema="licht"] body main .subnav.vast{background:rgba(255,255,255,.84)!important}
/* en dan mag hij ook de volle breedte pakken, niet als kaart eindigen */
body main .subnav.vast{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}

}
/* ── b. de weergaveschakelaar ─────────────────────────────────────
   Was een grijze pillengroep zonder betekenis. Nu drie standen met
   een icoon, een schuivende markering en een duidelijke actieve staat. */
body main .weergave{gap:12px}
body main .wgroep{position:relative;gap:2px;padding:4px;border-radius:var(--rmax);background:var(--paper);border:1px solid var(--line)}
body main .wknop{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--rmax);transition:color var(--snel)}
body main .wknop::before{content:'';width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain}
body main .wknop[data-thema="auto"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a9 9 0 100 18V3z'/><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a9 9 0 100 18V3z'/><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/></svg>")}
body main .wknop[data-thema="licht"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4.6'/><g stroke='black' stroke-width='2' stroke-linecap='round'><path d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4'/></g></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4.6'/><g stroke='black' stroke-width='2' stroke-linecap='round'><path d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4'/></g></svg>")}
body main .wknop[data-thema="donker"]::before{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 14.5A8.5 8.5 0 019.5 4a8.5 8.5 0 1010.5 10.5z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 14.5A8.5 8.5 0 019.5 4a8.5 8.5 0 1010.5 10.5z'/></svg>")}
body main .wknop:hover{color:var(--ink2)}
body main .wknop[aria-pressed="true"]{color:var(--grijs-0);background:var(--grad-primair);box-shadow:var(--schaduw-md)}
@media(max-width:480px){

body main .weergave{flex-direction:column;align-items:flex-start}
body main .wgroep{width:100%}
body main .wknop{flex:1;justify-content:center;padding:9px 8px;font-size:11.5px}

}
/* ── c. onboarding rustiger ───────────────────────────────────────
   De kop was een kaart met een accentlijn, de stap eronder nog eens
   een blok, en de knoppenbalk een derde vlak. Drie lagen voor één
   vraag. De kop is nu gewoon tekst op de pagina.                   */
body[data-pagina="onboarding"] main .obkop{background:none;box-shadow:none;border-radius:0}
body[data-pagina="onboarding"] main .obkop::before{display:none}
body[data-pagina="onboarding"] main .obvoortgang{margin:0 0 22px}
body[data-pagina="onboarding"] main .obbalk{height:4px;border-radius:2px}
body[data-pagina="onboarding"] main .obkop h1{font-size:clamp(24px,6.4vw,32px);margin-bottom:8px}
body[data-pagina="onboarding"] main .obkop p{max-width:52ch}
body[data-pagina="onboarding"] main .obstap{margin-top:22px}
body[data-pagina="onboarding"] main .obhint{background:none;padding:0;margin-top:18px;color:var(--ink3)}
body[data-pagina="onboarding"] main .obhint::before{opacity:.7}
/* de lichte-weergaveregel is specifieker; daarom hier met dezelfde
   prefix, anders wint het glas alsnog op desktop */
@media(min-width:901px){

html[data-thema="licht"] body main .subnav:not(.vast),
  html:not([data-thema="licht"]) body main .subnav:not(.vast){background:transparent!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    box-shadow:none!important}
html[data-thema="licht"] body main .subnav.vast{background:rgba(255,255,255,.84)!important}
html:not([data-thema="licht"]) body main .subnav.vast{background:var(--glas)!important}

}
/* ══════════════════════════════════════════════════════════════════
   76. FESTIVALGIDSEN EN WHATSAPP
   ══════════════════════════════════════════════════════════════════
   Zes vaste onderwerpen per festival. Wat er is, is een link; wat
   ontbreekt is een uitnodiging met de muntenbeloning erbij — een
   leeg vak zonder uitweg is een gemiste kans.                       */
body main .gidsrooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;margin-top:14px}
body main .gidskaart{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:12px;
  padding:13px 14px;border-radius:var(--r3);text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);font:inherit;text-align:left;cursor:pointer;
  transition:border-color var(--snel),transform var(--snel),box-shadow var(--mid)}
body main .gidskaart:hover{border-color:var(--fl-rood);transform:translateY(-2px);box-shadow:var(--sh)}
body main .gidsicoon{font-size:22px;line-height:1}
body main .gidstx{min-width:0}
body main .gidstx b{display:block;font-size:13.5px;font-weight:800}
body main .gidstx i{font-style:normal;display:block;font-size:11px;font-weight:700;
  color:var(--fl-rood);margin-top:3px}
body main .gidspijl{font-size:14px;font-weight:800;color:var(--ink3);text-align:right}
body main .gidskaart.leeg{border-style:dashed;background:none}
body main .gidskaart.leeg .gidsicoon{opacity:.45}
body main .gidskaart.leeg .gidstx i{color:var(--fl-goud)}
body main .gidskaart.leeg:hover{border-color:var(--fl-goud)}
body main .gidslijst{margin-top:6px}
body main .gidsrij{display:grid;grid-template-columns:minmax(0,1fr) auto 92px;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
body main .gidsrij:last-child{border-bottom:0}
body main .gidsrijtx b{display:block;font-size:14px;font-weight:800}
body main .gidsrijtx i{font-style:normal;display:block;font-size:10.5px;font-weight:700;
  color:var(--ink3);margin-top:2px}
body main .gidsrij:hover .gidsrijtx b{color:var(--fl-rood)}
body main .gidsdots{display:flex;gap:4px}
body main .gidsdot{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
body main .gidsdot.aan{background:var(--fl-rood)}
body main .gidsmeter{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
body main .gidsmeter i{display:block;height:100%;background:var(--grad-primair)}
@media(max-width:560px){

body main .gidsrij{grid-template-columns:minmax(0,1fr) auto;gap:10px}
body main .gidsmeter{display:none}

}
body main .warij{display:block;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
body main .warij:last-of-type{border-bottom:0}
body main .warij b{display:block;font-size:12.5px;font-weight:800}
body main .warij i{font-style:normal;display:block;font-size:10.5px;font-weight:700;color:var(--ink3);margin-top:2px}
body main .warij:hover b{color:var(--fl-rood)}
/* ══════════════════════════════════════════════════════════════════
   77. CONTEXTBALK ZONDER VLAK + EDGE-TO-EDGE
   ══════════════════════════════════════════════════════════════════
   De balk kreeg bij het plakken een vlak dat ik full-bleed maakte met
   negatieve marges. Op pagina's met een rail klopt die berekening niet
   — de kolom is smaller dan de container — en dan staat er een witte
   band half over de hero. Geen vlak meer: de chips dragen zichzelf, zoals zwevende bediening hoort.                                    */
@media(min-width:901px){

html body main .subnav,
  html body main .subnav.vast{background:transparent!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    box-shadow:none!important;
    margin-left:0!important;margin-right:0!important;
    padding-left:0!important;padding-right:0!important}
html body main .subnav.vast::after{display:none}
/* de chips zijn zelfdragend: eigen vulling, eigen schaduw */
html body main .subnav .fanker a,
  html body main .subnav .fsub a,
  html body main .subnav .scope,
  html body main .subnav .chip{background:var(--card);border-color:var(--line);
    box-shadow:0 1px 2px rgba(15,23,42,.06),0 6px 16px -10px rgba(15,23,42,.22)}
html[data-thema="donker"] body main .subnav .fanker a,
  html[data-thema="donker"] body main .subnav .scope,
  html[data-thema="donker"] body main .subnav .chip,
  html:not([data-thema="licht"]) body main .subnav .fanker a,
  html:not([data-thema="licht"]) body main .subnav .scope,
  html:not([data-thema="licht"]) body main .subnav .chip{background:var(--paper);border-color:var(--grijs-700);
    box-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px -10px rgba(0,0,0,.6)}
html body main .subnav .kruim{background:var(--card);border:1px solid var(--line);border-radius:var(--rmax);
    padding:7px 14px;box-shadow:0 1px 2px rgba(15,23,42,.06)}
html body main .subnav.metpad .kruim::after{display:none}

}
/* ── edge-to-edge op elk toestel ──────────────────────────────────
   dvh schaalt mee met de in- en uitklappende adresbalk; vh niet.    */
html, body{min-height:100dvh}
@supports not (height:100dvh){

html, body{min-height:100vh}

}
body main.page{min-height:100dvh}
/* de veilige zones links en rechts tellen ook mee op toestellen in
   liggende stand met een notch */
@media(max-width:900px){

body .hdr{padding-left:max(12px,env(safe-area-inset-left));
            padding-right:max(12px,env(safe-area-inset-right))}
body .mobnav{left:max(8px,env(safe-area-inset-left));
               right:max(8px,env(safe-area-inset-right))}
body main .hoofdkolom>*{padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right))}
body main .hoofdkolom>.card,body main .hoofdkolom>article.card,
  body main .hoofdkolom>section.card,body main .hoofdkolom>.post{padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right))}
body main .sitefoot{padding-left:max(calc(50vw - 50%),env(safe-area-inset-left));
    padding-right:max(calc(50vw - 50%),env(safe-area-inset-right))}

}
/* de themaregels zijn specifieker; daarom hier met dezelfde prefix */
@media(min-width:901px){

html[data-thema="licht"] body main .subnav,
  html[data-thema="licht"] body main .subnav.vast,
  html[data-thema="donker"] body main .subnav,
  html[data-thema="donker"] body main .subnav.vast,
  html:not([data-thema="licht"]) body main .subnav,
  html:not([data-thema="licht"]) body main .subnav.vast{background:transparent!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    box-shadow:none!important}

}
@media(min-width:901px){

html[data-thema="licht"] body main .subnav .kruim, html[data-thema="donker"] body main .subnav .kruim, html:not([data-thema="licht"]) body main .subnav .kruim{background:var(--card)!important;border:1px solid var(--line);
    border-radius:var(--rmax);padding:7px 15px;
    box-shadow:0 1px 2px rgba(15,23,42,.06),0 6px 16px -10px rgba(15,23,42,.22)}
html:not([data-thema="licht"]) body main .subnav .kruim{background:var(--paper)!important;border-color:var(--grijs-700);
    box-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px -10px rgba(0,0,0,.6)}

}
/* ── 78. FORUMBLOK COMPACTER ──────────────────────────────────────
   Vier rijen boven de vouw, de rest achter een knop. En de rijen zelf
   krappe ademruimte: dit is een aanzet tot het forum, geen forum.   */
body main .card[data-ingekort] > a, body main .card[data-ingekort] > div > a{padding-top:9px;padding-bottom:9px}
body main .meerknop{display:block;width:100%;margin-top:10px;padding:9px 14px;
  font:inherit;font-size:12px;font-weight:800;color:var(--ink2);cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rmax);
  transition:border-color var(--snel),color var(--snel)}
body main .meerknop:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
/* ══════════════════════════════════════════════════════════════════
   79. VENUE WIDGET
   ══════════════════════════════════════════════════════════════════
   Gesponsord, en dus zichtbaar anders dan eigen inhoud: eigen rand, label linksboven, bronvermelding onderaan. Nooit de kaartvorm van
   een artikel — dat onderscheid is precies waarom de rest te
   vertrouwen is.                                                     */
body main .venue{display:block;margin:var(--sp5) 0;padding:0;overflow:hidden;
  border:1.5px solid var(--line);border-radius:var(--r4);background:var(--card)}
body main .venuekop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
body main .venuetitel{font-size:13px;font-weight:800;color:var(--ink)}
body main .venuetitel::before{content:'';display:inline-block;width:14px;height:12px;margin-right:8px;vertical-align:-1px;
  background:var(--grad-primair);border-radius:2px}
body main .venueprov{font-size:11px;font-weight:700;color:var(--ink3)}
body main .venuespons{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
body main .venuerij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 16px}
body main .venuekaart{position:relative;min-width:0}
body main .venuefoto{display:block;aspect-ratio:4/3;border-radius:var(--r2);margin-bottom:10px}
body main .venuelabel{position:absolute;top:8px;left:8px;z-index:2;
  font-size:10px;font-weight:800;padding:4px 9px;border-radius:var(--rmax);
  background:var(--card);color:var(--ink2);box-shadow:0 1px 3px rgba(15,23,42,.2)}
body main .venuelabel.uit{color:var(--ink3)}
body main .venuekaart em{font-style:normal;display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fl-rood)}
body main .venuekaart b{display:block;font-size:13.5px;font-weight:800;margin-top:3px;line-height:1.3}
body main .venuekaart i{font-style:normal;display:block;font-size:11px;font-weight:700;color:var(--ink3);margin-top:3px}
body main .venueknop{margin-top:9px;width:100%;justify-content:center;text-align:center}
body main .venueknop[aria-disabled="true"]{opacity:.5;pointer-events:none}
body main .venuevoet{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 16px;border-top:1px solid var(--line);
  font-size:10.5px;font-weight:700;color:var(--ink3)}
body main .venuevoet a{color:var(--fl-rood);text-decoration:none;font-weight:800}
@media(max-width:620px){

body main .venue{border-radius:0;border-left:0;border-right:0;
    margin-left:calc(-1 * var(--kaartpad));margin-right:calc(-1 * var(--kaartpad))}
body main .venuerij{grid-template-columns:1fr;gap:14px}
body main .venuekaart{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}
body main .venuefoto{margin-bottom:0;aspect-ratio:1}
body main .venueknop{width:auto;padding:7px 14px}

}
/* ══════════════════════════════════════════════════════════════════
   81. LINE-UP RADAR
   ══════════════════════════════════════════════════════════════════
   Een ranglijst die zijn bewijs meedraagt: onder elke act staat wie het
   zei. Het gewogen cijfer staat naast het aantal leden, want die twee
   lopen bewust uiteen — daar zit de hele waarde van de meter.       */
body main .rdlijst{margin-top:12px}
body main .rdrij{display:grid;grid-template-columns:26px 46px minmax(0,1fr) 62px 96px;
  align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
body main .rdrij:last-of-type{border-bottom:0}
body main .rdnr{font-size:13px;font-weight:800;color:var(--ink3);text-align:center}
body main .rdrij.top .rdnr{color:var(--fl-rood)}
body main .rdfoto{width:46px;height:46px;border-radius:var(--r2);display:block}
body main .rdtx{min-width:0}
body main .rdtx b{display:block;font-size:14.5px;font-weight:800;line-height:1.3}
body main .rdtx em{font-style:normal;display:block;font-size:11px;font-weight:700;
  color:var(--ink3);margin-top:2px}
body main .rdwie{display:block;font-size:10.5px;color:var(--ink3);margin-top:4px;opacity:.75;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body main .rdscore{text-align:right}
body main .rdscore b{display:block;font-size:17px;font-weight:800;color:var(--fl-rood)}
body main .rdscore i{font-style:normal;display:block;font-size:9px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink3)}
body main .rdvers{justify-self:start;
  font-size:10.5px;font-weight:800;color:var(--fl-blauw);white-space:nowrap;
  padding:4px 9px;border-radius:var(--rmax);background:var(--tintb)}
body main .rdvers.leeg{background:none;padding:0;width:0;overflow:hidden}
body main .rdmee{width:100%;margin-top:14px}
@media(max-width:620px){

body main .rdrij{grid-template-columns:22px 40px minmax(0,1fr) 52px;gap:10px}
body main .rdfoto{width:40px;height:40px}
body main .rdvers{grid-column:2/-1;justify-self:start;margin-top:-4px}

}
/* trefzekerheid: wie zat er vorig seizoen goed */
body main .trefrij{display:grid;grid-template-columns:minmax(0,1fr) 90px 44px;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
body main .trefrij:last-child{border-bottom:0}
body main .trefnaam b{display:block;font-size:13px;font-weight:800}
body main .trefnaam em{font-style:normal;display:block;font-size:10px;font-weight:700;color:var(--ink3);
  text-transform:capitalize;margin-top:1px}
body main .trefmeter{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
body main .trefmeter i{display:block;height:100%;background:var(--grad-primair)}
body main .trefcijfer{font-size:12px;font-weight:800;color:var(--ink2);text-align:right}
body main .trefrij:hover .trefnaam b{color:var(--fl-rood)}
@media(max-width:620px){

body main .trefrij{grid-template-columns:minmax(0,1fr) 60px 40px;gap:9px}

}
/* ══════════════════════════════════════════════════════════════════
   82. ARTIKELPAGINA VOLGENS HET FUNCTIONEEL ONTWERP
   ══════════════════════════════════════════════════════════════════
   De volgorde van het document aangehouden: metadata en herkomst eerst, dan het beeld, de chips, de tekst, en pas daarna alles wat de lezer
   kan dóen. Reacties onderaan, want daar hoort de discussie.        */
/* ── 1. kop en metadata ─────────────────────────────────────────── */
body main .artkop{padding-bottom:4px}
body main .artlabels{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
body main .artcat{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grijs-0);background:var(--fl-rood);padding:5px 11px;border-radius:var(--rmax);
  text-decoration:none}
body main .artbron{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--rmax);border:1px solid var(--line);color:var(--ink2)}
body main .artbron.community{border-color:var(--fl-paars);color:var(--fl-paars)}
body main .artbron.charlie{border-color:var(--fl-goud);color:var(--fl-goud)}
body main .artkop h1{font-size:clamp(25px,5.4vw,34px);line-height:1.16;letter-spacing:-.026em;margin:0 0 10px}
body main .artintro{font-size:16px;line-height:1.6;color:var(--ink2);font-weight:600;margin:0 0 16px;max-width:62ch}
body main .artmeta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body main .artauteur{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
body main .artauteur b{display:block;font-size:13.5px;font-weight:800}
body main .artauteur em{font-style:normal;display:block;font-size:11px;font-weight:700;color:var(--ink3);margin-top:1px}
body main .artauteur:hover b{color:var(--fl-rood)}
body main .artdatums{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--ink3)}
body main .artdatums b{font-weight:800;color:var(--ink2)}
body main .artgewijzigd{font-weight:700;opacity:.85}
body main .artreacties{display:flex;align-items:center;gap:6px;margin-left:auto;text-decoration:none;
  font-size:12.5px;font-weight:700;color:var(--ink2)}
body main .artreacties svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
body main .artreacties b{font-weight:800;color:var(--ink)}
body main .artreacties:hover{color:var(--fl-rood)}
@media(max-width:560px){

body main .artmeta{gap:11px}
body main .artreacties{margin-left:0}

}
/* chips naar de genoemde festivals en artiesten */
body main .artchips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
body main .artchip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--rmax);
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
  font-size:12.5px;font-weight:700;text-decoration:none;
  transition:border-color var(--snel),color var(--snel)}
body main .artchip:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
body main .artchip.fest{padding-left:6px}
body main .artchip .flogo{width:24px;height:24px;border-radius:50%;flex:none}
/* ── 2. wat de lezer kan doen ───────────────────────────────────── */
body main .artacties{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 4px;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body main .artknop{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--rmax);
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:border-color var(--snel),color var(--snel),background var(--snel)}
body main .artknop svg{width:16px;height:16px;fill:currentColor}
body main .artknop.bron svg{fill:none;stroke:currentColor;stroke-width:2}
body main .artknop:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
body main .artknop.aan{background:var(--fl-rood);border-color:var(--fl-rood);color:var(--grijs-0)}
body main .artknop b{font-weight:800}
/* ── 5. festivalcontext ─────────────────────────────────────────── */
body main .fcrij{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;
  gap:13px;margin:13px 0}
body main .fcrij .flogo{width:52px;height:52px;border-radius:var(--r2)}
body main .fctx b{display:block;font-size:15px;font-weight:800}
body main .fctx em{font-style:normal;display:block;font-size:11.5px;font-weight:700;color:var(--ink3);margin-top:2px}
body main .fcstatus{font-size:10.5px;font-weight:800;color:var(--fl-rood);white-space:nowrap;
  padding:5px 11px;border-radius:var(--rmax);background:var(--tintr)}
body main .fcknoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
@media(max-width:520px){

body main .fcrij{grid-template-columns:44px minmax(0,1fr);gap:11px}
body main .fcstatus{grid-column:2;justify-self:start;margin-top:-4px}
body main .fcknoppen .btn{flex:1 1 auto}

}
/* ── 6. poll ────────────────────────────────────────────────────── */
body main .pollvraag{font-size:17px;font-weight:800;margin:9px 0 13px;line-height:1.35}
body main .pollopties{display:flex;flex-direction:column;gap:8px}
body main .pollopt{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  padding:12px 15px;border-radius:var(--r2);border:1px solid var(--line);background:var(--paper);
  font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;
  transition:border-color var(--snel),background var(--snel)}
body main .pollopt:hover:not(.uitslag){border-color:var(--fl-rood);color:var(--fl-rood)}
body main .pollopt.uitslag{cursor:default;justify-content:space-between}
body main .pollopt.uitslag::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--pct,0%);z-index:0;transition:width .5s cubic-bezier(.22,.61,.36,1)}
body main .polllabel, body main .pollpct{position:relative;z-index:1}
body main .pollpct{font-weight:800;color:var(--fl-rood)}
body main .pollvoet{font-size:11.5px;color:var(--ink3);margin:11px 0 0;font-weight:700}
/* ── 7. festivalrapport ─────────────────────────────────────────── */
body main .rapstatus{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:var(--rmax);background:var(--tintr);color:var(--fl-rood)}
body main .rapstatus.gedaan{background:var(--tintb);color:var(--fl-blauw)}
body main .raplabel{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:18px 0 8px}
body main .rapschuif{display:flex;align-items:center;gap:16px;margin-bottom:14px}
body main .rapschuif input[type=range]{flex:1;accent-color:var(--fl-rood);height:6px}
body main .rapschuif b{font-size:30px;font-weight:800;color:var(--fl-rood);min-width:66px;text-align:right}
body main .raphek{margin-top:16px;padding:16px;border-radius:var(--r3);border:1px dashed var(--line);
  background:var(--paper)}
body main .raphek b{display:block;font-size:15px;font-weight:800;margin-bottom:5px}
body main .raphek p{font-size:12.5px;color:var(--ink2);line-height:1.55;margin:0 0 12px}
/* ── 3. reacties ────────────────────────────────────────────────── */
body main .reactieform{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;margin:14px 0 6px}
body main .reactieveld textarea{width:100%;box-sizing:border-box;padding:11px 13px;border-radius:var(--r2);
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font:inherit;font-size:13.5px;line-height:1.5;resize:vertical}
body main .reactieveld textarea:focus{border-color:var(--fl-rood);outline:none}
body main .reactievoet{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
body main .reactiewaarschuwing{margin:9px 0 0;padding:9px 12px;border-radius:var(--r2);font-size:12px;font-weight:700;
  background:var(--tintr);color:var(--fl-rood)}
body main .reactielijst{margin-top:16px}
body main .reactie{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;
  padding:14px 0;border-top:1px solid var(--line)}
body main .reactie.nieuw{animation:reactieIn .35s cubic-bezier(.22,.61,.36,1)}
@keyframes reactieIn{

from{opacity:0;transform:translateY(-6px)}

to{opacity:1;transform:none}

}
body main .reactie.verwijderd{opacity:.55}
body main .reactie.verwijderd p{font-style:italic;color:var(--ink3)}
body main .reactietx b{font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:7px}
body main .reactietijd{font-size:10.5px;font-weight:700;color:var(--ink3);margin-left:8px}
body main .reactietx p{font-size:13.5px;line-height:1.55;color:var(--read);margin:6px 0 0}
body main .reactieacties{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
body main .reactieknop{padding:5px 11px;border-radius:var(--rmax);border:1px solid transparent;background:none;
  font:inherit;font-size:11.5px;font-weight:700;color:var(--ink3);cursor:pointer;
  transition:color var(--snel),background var(--snel)}
body main .reactieknop:hover{background:var(--paper);color:var(--ink)}
body main .reactieknop.aan{color:var(--fl-rood)}
body main .reactieknop.mod{margin-left:auto;color:var(--ink3);opacity:.7}
body main .reactieknop.mod:hover{color:var(--fl-rood);opacity:1}
/* ── 4. auteur en gerelateerd ───────────────────────────────────── */
body main .autrij{display:grid;grid-template-columns:66px minmax(0,1fr);gap:16px;margin-top:14px}
body main .flava.xl{width:66px;height:66px;border-radius:50%;font-size:22px}
body main .auttx b{display:block;font-size:16px;font-weight:800}
body main .auttx em{font-style:normal;display:block;font-size:12px;font-weight:700;color:var(--ink3);margin-top:2px}
body main .autbadges{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 9px}
body main .auttx p{font-size:13px;line-height:1.6;color:var(--ink2);margin:0}
body main .gerlijst{margin-top:12px}
body main .gerrij{display:grid;grid-template-columns:84px minmax(0,1fr);gap:13px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
body main .gerrij:last-child{border-bottom:0}
body main .gerfoto{width:84px;height:60px;border-radius:var(--r2);display:block}
body main .gertx em{font-style:normal;display:block;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fl-rood);margin-bottom:3px}
body main .gertx b{display:block;font-size:14px;font-weight:800;line-height:1.32}
body main .gertx i{font-style:normal;display:block;font-size:11px;font-weight:700;color:var(--ink3);margin-top:4px}
body main .gerrij:hover .gertx b{color:var(--fl-rood)}
/* korte terugkoppeling op een handeling */
body .fltoast{position:fixed;left:50%;transform:translateX(-50%);z-index:200;
  bottom:calc(96px + env(safe-area-inset-bottom,0px));
  padding:11px 20px;border-radius:var(--rmax);background:var(--ink);color:var(--bg);
  font-size:13px;font-weight:800;box-shadow:var(--shl);
  animation:toastIn .25s cubic-bezier(.22,.61,.36,1)}
body .fltoast.weg{opacity:0;transition:opacity .4s}
@keyframes toastIn{

from{opacity:0;transform:translate(-50%,10px)}

to{opacity:1;transform:translate(-50%,0)}

}
@media(min-width:901px){

body .fltoast{bottom:32px}

}
body main .pollrechts{position:relative;z-index:1;display:flex;align-items:baseline;gap:10px}
body main .pollaantal{font-size:11px;font-weight:700;color:var(--ink3)}
/* de uitslagbalk moet in beide weergaven leesbaar zijn; --tintr is op
   donker te subtiel om een verhouding mee te tonen */
body main .pollopt.uitslag::before{background:color-mix(in srgb, var(--rood-500) 16%, transparent)}
html[data-thema="licht"] body main .pollopt.uitslag::before{background:color-mix(in srgb, var(--rood-500) 11%, transparent)}
body main .pollopt.mijn::before{background:var(--grad-primair);opacity:.3}
body main .pollopt.uitslag{border-color:var(--line)}
body main .pollopt.mijn{border-color:var(--fl-rood);border-width:1.5px}
/* ═══ 83. v1.1 — de negen Shoulds en de ene Could ═══════════════════ */
/* eis 1 + 2: bijgewerkt-datum en reactieteller naast de publicatiedatum */
.artgewijzigd, .artreacties{display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;color:var(--ink3);white-space:nowrap}
.artgewijzigd svg, .artreacties svg{width:13px;height:13px;fill:currentColor;flex:0 0 auto}
.artreacties{color:var(--ink3);text-decoration:none;transition:color .15s}
.artreacties:hover{color:var(--fl-rood)}
.artreacties b{color:var(--ink)}
/* eis 3: Charlie als vierde herkomst — eigen vorm, niet die van redactie, partner of gesponsord. Cyaan omdat het een gemeten/geautomatiseerde
   bron is, met een rand zodat hij niet als categorie leest. */
.artbron.charlie{display:inline-flex;align-items:center;gap:5px;
  background:color-mix(in srgb,var(--fl-cyaan) 13%,transparent);
  color:var(--fl-cyaan);border:1px solid color-mix(in srgb,var(--fl-cyaan) 34%,transparent);
  border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800;
  letter-spacing:.02em;text-transform:none}
.artbron.charlie svg{width:12px;height:12px;fill:currentColor}
/* eis 8: check-in */
.btn.checkin{display:inline-flex;align-items:center;gap:6px}
.btn.checkin svg{width:14px;height:14px;fill:currentColor}
.btn.checkin.aan{background:var(--fl-rood);border-color:var(--fl-rood);color:var(--grijs-0)}
/* eis 4: reacties uitschakelen */
.modschakel{display:inline-flex;align-items:center;gap:6px;float:right;
  background:transparent;border:1px solid var(--line);color:var(--ink3);
  border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;
  transition:border-color .15s,color .15s}
.modschakel:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
.modschakel svg{width:12px;height:12px;fill:currentColor}
.modschakel.aan{border-color:var(--fl-rood);color:var(--fl-rood);
  background:color-mix(in srgb,var(--fl-rood) 10%,transparent)}
.reactiesdicht{margin:14px 0 0;padding:16px;text-align:center;border-radius:10px;
  background:var(--paper);color:var(--ink3);font-size:14px}
/* eis 5: link naar de forumdiscussie */
.forumlink{display:flex;align-items:center;gap:11px;margin-top:14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:11px;text-decoration:none;
  transition:border-color .15s,background .15s}
.forumlink:hover{border-color:var(--fl-lavendel);
  background:color-mix(in srgb,var(--fl-lavendel) 7%,transparent)}
.forumlink .fltx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.forumlink .fltx b{font-size:14px;color:var(--ink)}
.forumlink .fltx em{font-style:normal;font-size:12px;color:var(--ink3)}
.forumlink .flpijl{width:16px;height:16px;fill:none;stroke:var(--ink3);
  stroke-width:2;flex:0 0 auto}
/* eis 6: auteur volgen */
.volgknop{margin-top:10px;align-self:flex-start}
.volgknop.aan{background:color-mix(in srgb,var(--fl-rood) 13%,transparent);
  border-color:var(--fl-rood);color:var(--fl-rood)}
/* eis 7: gerelateerde artikelen */
.gerlijst{display:grid;gap:9px;margin-top:10px}
.gerkaart{display:flex;align-items:center;gap:11px;padding:9px;border-radius:10px;
  text-decoration:none;transition:background .15s}
.gerkaart:hover{background:var(--paper)}
.gerkaart .flfoto{width:58px;height:44px;border-radius:7px;flex:0 0 auto}
.gerkaart .gertx{display:flex;flex-direction:column;gap:2px;min-width:0}
.gerkaart .gertx b{font-size:13.5px;color:var(--ink);line-height:1.35}
.gerkaart .gertx em{font-style:normal;font-size:11.5px;color:var(--ink3)}
/* ── redactiescherm: eisen 9 en 10 ─────────────────────────────────── */
.rkeuze{display:flex;gap:8px;margin:10px 0 14px;flex-wrap:wrap}
.rkeus{background:transparent;border:1px solid var(--line);color:var(--ink3);
  border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;
  transition:border-color .15s,color .15s}
.rkeus.aan{border-color:var(--fl-rood);color:var(--fl-rood)}
.rlabel{display:block;font-size:12px;font-weight:700;color:var(--ink3);
  margin-bottom:5px}
.rveld{width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;font:inherit;font-size:14px;color:var(--ink)}
.rveld:focus{outline:2px solid var(--fl-rood);outline-offset:1px;border-color:transparent}
.rlijst{display:grid;gap:7px;margin-top:11px}
.rrij{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--paper);border:1px solid transparent;border-radius:10px;
  padding:11px 13px;cursor:pointer;text-align:left;transition:border-color .15s}
.rrij:hover{border-color:var(--line)}
.rrij.aan{border-color:var(--fl-rood)}
.rrijtx{display:flex;flex-direction:column;gap:2px;min-width:0}
.rrijtx b{font-size:13.5px;color:var(--ink)}
.rrijtx em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.rkoppel{font-size:11.5px;font-weight:800;color:var(--fl-rood);flex:0 0 auto}
.rnote{margin:11px 0 0;padding:10px 12px;border-radius:9px;font-size:12.5px;
  background:color-mix(in srgb,var(--fl-rood) 10%,transparent);color:var(--ink)}
.rwaarschuwing{margin:10px 0 0;font-size:12px;color:var(--t-goud)}
.pollrij{border:1px solid var(--line);border-radius:12px;padding:13px;margin-top:11px}
.prkop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:11px}
.prtx{display:flex;flex-direction:column;gap:2px;min-width:0}
.prtx b{font-size:14px;color:var(--ink)}
.prtx em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.practies{display:flex;gap:7px;flex-wrap:wrap}
.practies .btn.aan{border-color:var(--fl-rood);color:var(--fl-rood)}
.pruitslag{display:grid;gap:7px}
.prbalk{display:grid;grid-template-columns:minmax(70px,auto) 1fr auto;align-items:center;
  gap:10px;font-size:12.5px}
.prlabel{color:var(--ink);font-weight:700}
.prmeter{height:8px;border-radius:999px;background:var(--paper);position:relative;
  overflow:hidden}
.prmeter::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--pct);
  border-radius:999px;background:color-mix(in srgb,var(--fl-cyaan) 55%,transparent)}
.prbalk.hoog .prmeter::after{background:var(--fl-rood)}
.prgetal{color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.propties{display:grid;gap:7px}
.propt{display:flex;align-items:center;gap:8px}
.propweg{background:transparent;border:1px solid var(--line);color:var(--ink3);
  border-radius:8px;width:32px;height:32px;font-size:17px;line-height:1;cursor:pointer;
  flex:0 0 auto;transition:border-color .15s,color .15s}
.propweg:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
@media(max-width:520px){

.prbalk{grid-template-columns:minmax(56px,auto) 1fr auto;gap:7px;font-size:11.5px}
.modschakel{float:none;margin-top:8px}

}
/* ═══ 84. v1.2 — profielkoppeling, rolweergave en inloggen ═════════ */
/* rolschakelaar: prototype-hulpmiddel, moet er ook als zodanig uitzien */
.rolbalk{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:16px 0 -4px;padding:9px 13px;border-radius:10px;
  border:1px dashed var(--line);background:var(--paper)}
.rolwaarschuwing{font-size:11.5px;color:var(--ink3)}
.rolgroep{display:flex;gap:6px}
.rolknop{background:transparent;border:1px solid var(--line);color:var(--ink3);
  border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700;cursor:pointer;
  transition:border-color .15s,color .15s}
.rolknop.aan{border-color:var(--fl-rood);color:var(--fl-rood)}
/* bewaarde artikelen in het profiel */
.bewaardzoek{margin:10px 0 12px}
.bewaardlijst{display:grid;gap:8px}
.bwitem{display:flex;align-items:center;gap:8px}
.bwlink{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:8px;
  border-radius:10px;text-decoration:none;transition:background .15s}
.bwlink:hover{background:var(--paper)}
.bwlink .flfoto{width:54px;height:41px;border-radius:7px;flex:0 0 auto}
.bwtx{display:flex;flex-direction:column;gap:2px;min-width:0}
.bwtx b{font-size:13.5px;color:var(--ink);line-height:1.35}
.bwtx em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.bwweg{background:transparent;border:1px solid var(--line);color:var(--ink3);
  border-radius:8px;width:30px;height:30px;font-size:16px;line-height:1;cursor:pointer;
  flex:0 0 auto;transition:border-color .15s,color .15s}
.bwweg:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
.bwleeg{margin:12px 0 0;text-align:center;color:var(--ink3);font-size:13px}
/* gevolgde auteurs */
.volglijst{display:grid;gap:9px;margin-top:10px}
.volgitem{display:flex;align-items:center;justify-content:space-between;gap:11px;
  flex-wrap:wrap}
.volglink{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.volgtx{display:flex;flex-direction:column;gap:1px;min-width:0}
.volgtx b{font-size:13.5px;color:var(--ink)}
.volgtx em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.volgtoggle.aan, .volgtoggle[aria-pressed="true"]{border-color:var(--fl-rood);color:var(--fl-rood);
  background:color-mix(in srgb,var(--fl-rood) 10%,transparent)}
/* inlogscherm */
.inlogwrap{display:flex;justify-content:center;padding:22px 0}
.inlogkaart{width:100%;max-width:400px}
.inlogtitel{font-size:24px;font-weight:800;margin:0 0 6px}
.inloguitleg{margin:0 0 18px;font-size:13.5px;color:var(--ink3)}
.inlogveld{margin-bottom:13px}
.inlogknop{width:100%;justify-content:center;margin-top:4px}
.inlogalt{width:100%;justify-content:center}
.inlogterug{margin:11px 0 0;padding:9px 12px;border-radius:9px;font-size:12.5px;
  background:color-mix(in srgb,var(--fl-rood) 10%,transparent);color:var(--ink)}
.inlogscheid{display:flex;align-items:center;gap:11px;margin:17px 0;
  color:var(--ink3);font-size:11.5px}
.inlogscheid::before, .inlogscheid::after{content:'';flex:1;height:1px;background:var(--line)}
.inlogvoet{margin-top:13px;text-align:center}
/* melding met een link erin */
.fltoast.metlink a{color:var(--grijs-0);text-decoration:underline;font-weight:700}
@media(max-width:520px){

.rolbalk{flex-direction:column;align-items:flex-start;gap:8px}
.volgitem{align-items:flex-start}

}
/* ═══ 85. Het beeldmerk ════════════════════════════════════════════
   De vector vervangt de PNG. Twee dingen die daarmee opgelost zijn:
   hij is scherp op elk formaat, en hij volgt het palet in plaats van
   zijn eigen rood en blauw mee te dragen.

   De derde druppel is een omlijning in currentColor, zodat hij in de
   lichte weergave donker is en in de donkere licht — zonder tweede
   versie van het bestand.                                             */
.logo3d .wordmark{display:inline-flex;align-items:center}
.flmerk{width:34px;height:34px;display:block;color:var(--ink);
  transition:transform var(--snel-2) var(--curve)}
.logo3d:hover .flmerk{transform:scale(1.05)}
.logo3d:active .flmerk{transform:scale(.97)}
@media(max-width:520px){

.flmerk{width:30px;height:30px}

}
/* ═══ 86. Rail op de artikelpagina ═════════════════════════════════
   Twee blokken: waar het gesprek verdergaat, en wat er verder speelt.
   Geen inhoudsopgave — die staat al als chipbalk boven het artikel.   */
.forumkort{display:block;padding:9px 0;border-bottom:1px solid var(--line-zacht);
  text-decoration:none}
.forumkort:last-of-type{border-bottom:0;padding-bottom:0}
.forumkort .fktx{display:flex;flex-direction:column;gap:2px}
.forumkort .fktx b{font-size:13.5px;color:var(--ink);line-height:1.35}
.forumkort .fktx em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.forumkort:hover .fktx b{color:var(--fl-rood)}
.trkort{display:flex;align-items:flex-start;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line-zacht);text-decoration:none}
.trkort:last-of-type{border-bottom:0;padding-bottom:0}
.trnr{flex:0 0 auto;width:19px;font-size:13px;font-weight:800;color:var(--fl-rood);
  font-variant-numeric:tabular-nums;line-height:1.4}
.trtx{font-size:13px;color:var(--ink);line-height:1.4}
.trkort:hover .trtx{color:var(--fl-rood)}
/* ═══ 87. Aanraakvlakken ═══════════════════════════════════════════
   Uit de audit kwamen 68 componenten die kleiner zijn dan 40px in een
   van beide richtingen. Op een muis werkt dat; met een duim niet — de
   kleinste waren 15×15 en 20×20 pixels.

   De vlakken worden groter zonder dat het beeld verandert: het
   klikgebied groeit met een pseudo-element dat over de knop heen ligt.
   Zo blijft een klein rond knopje er klein uitzien, maar is hij wel te
   raken. Alleen waar het beeld het toelaat groeit de knop zelf mee.   */
/* knopjes die visueel klein moeten blijven: onzichtbaar vergroot vlak */
.rapinfo, .welksluit, .bwweg, .kp-plus, .kp-min, .alertbtn.rond,
.tkbel, .propweg{position:relative}
.rapinfo::after, .welksluit::after, .bwweg::after, .kp-plus::after,
.kp-min::after, .alertbtn.rond::after, .tkbel::after, .propweg::after{content:''; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
  border-radius:50%}
/* knoppen met tekst mogen gewoon groeien tot de norm */
.ptab, .chip, .wknop, .alertbtn, .scope, .rkeus, .rolknop, .tickbtn{min-height:40px; display:inline-flex; align-items:center}
.btn.s, .btn.gh.s, .btn.g27.s{min-height:40px}
/* het beeldmerk in de kop is een aanraakdoel, geen plaatje */
.logo3d{display:inline-flex; align-items:center; min-height:44px; padding:0 4px}
/* op een fijnere aanwijzer is die ruimte niet nodig */
@media (pointer:fine){

.ptab, .chip, .wknop, .alertbtn, .scope, .rkeus, .rolknop, .tickbtn{min-height:32px}

}
/* ═══ 88. Leesbaarheid van labels en badges ════════════════════════
body main Sluitstuk van de audit. Deze componenten kleurden hun tekst met een
   merkkleur op een pastelvlak van diezelfde kleur. Dat oogt netjes maar
   levert 1, body main 8 tot 2, body main 3 contrast op — ver onder de 4, body main 5 die tekst van deze
   grootte nodig heeft. Sommige van deze labels zijn maar 8 tot 10 pixels
   hoog, body main en juist daar telt elke stap.

   De vlakken blijven zoals ze waren. Alleen de letters gaan dieper de
   schaal in, body main zodat de kleur herkenbaar blijft en de tekst leesbaar
   wordt.                                                              */
.fbadge.blauw, body main .fbadge.groen{color:var(--blauw-700)}
body main .fbadge.paars{color:var(--blauw-700)}
body main .fbadge.goud{color:var(--goud-700)}
body main .fbron.site{color:var(--blauw-700)}
body main .fbron.forum{color:var(--blauw-700)}
body main .artbron.redactie{color:var(--blauw-700);border-color:var(--blauw-700)}
body main .rdvers, body main .clt, body main .legfav{color:var(--ink2)}
body main .stars{color:var(--goud-700)}
body main .wknop{color:var(--ink2)}
body main .wknop[aria-pressed="true"], body main .wknop.on{color:var(--ink)}
body main .cta{color:var(--ink)}
body main .edchip.on{color:var(--bg)}
body main .h6{color:var(--ink2)}
[data-thema="donker"] .fbadge.blauw, [data-thema="donker"] .fbadge.groen, [data-thema="donker"] .fbadge.paars, [data-thema="donker"] .fbron.site, [data-thema="donker"] .fbron.forum, [data-thema="donker"] .artbron.redactie{color:var(--blauw-200)}
[data-thema="donker"] .fbadge.goud, [data-thema="donker"] .stars{color:var(--goud-400)}
[data-thema="donker"] .artbron.redactie{border-color:var(--blauw-400)}
[data-thema="donker"] .rdvers, [data-thema="donker"] .clt, [data-thema="donker"] .legfav, [data-thema="donker"] .h6{color:var(--ink2)}
[data-thema="donker"] .cta, [data-thema="donker"] .edchip.on{color:var(--ink)}
@media (prefers-color-scheme: dark){

:root:not([data-thema="licht"]) .fbadge.blauw, :root:not([data-thema="licht"]) .fbadge.groen, :root:not([data-thema="licht"]) .fbadge.paars, :root:not([data-thema="licht"]) .fbron.site, :root:not([data-thema="licht"]) .fbron.forum, :root:not([data-thema="licht"]) .artbron.redactie{color:var(--blauw-200)}
:root:not([data-thema="licht"]) .fbadge.goud, :root:not([data-thema="licht"]) .stars{color:var(--goud-400)}
:root:not([data-thema="licht"]) .cta, :root:not([data-thema="licht"]) .edchip.on{color:var(--ink)}

}
/* ═══ 89. Kop, onderbalk en achtergrond — één glaslaag ══════════════
   Gemeten vóór deze sectie: de kopbalk, de onderbalk en de pagina
   gebruikten drie verschillende tinten en drie verschillende
   waas-instellingen — blur 26px, 28px en 30px, met saturatie 1,12
   tegenover 1,9. In de donkere weergave was de kop rgba(8,8,11) terwijl
   de pagina grijs-950 is: net genoeg verschil om te zien dat er iets
   niet klopt, te weinig om te herkennen wat.

   Alles wat over de inhoud zweeft gebruikt nu dezelfde drie tokens uit
   het palet: --glas, --glas-waas en --glas-rand. Eén waarde, twee
   weergaven, geen losse getallen meer.

   De specificiteit is `body .x` omdat de per-pagina stylesheets die
   prefix ook gebruiken; met alleen `.x` verliest deze sectie.          */
body .hdr,
body .mobnav{background: var(--glas);
  -webkit-backdrop-filter: var(--glas-waas);
  backdrop-filter: var(--glas-waas)}
body .hdr{border-top: 0}
body .mobnav{border-top: 1px solid var(--glas-rand);border-bottom: 0}
/* Zonder backdrop-filter zou de balk doorzichtig worden en de tekst
   eronder doorschijnen. Dan liever een dichte kaartkleur. */
@supports not (backdrop-filter: blur(1px)){

  body .hdr, body .mobnav{ background: var(--card) }

}
/* De zoekbalk in de kop ligt óp het glas en mag dus niet nog eens
   dezelfde waas krijgen — dat maakt hem troebel. */
body .hdr .dzoek{background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid var(--glas-rand);
  -webkit-backdrop-filter: var(--glas-waas); backdrop-filter: var(--glas-waas)}
body .hdr .dzoek:hover{background: color-mix(in srgb, var(--ink) 9%, transparent)}
/* ── de mobiele zoekknop ──────────────────────────────────────────
   Deze knop hoort alleen te bestaan zolang de zoekbalk niet past. Op
   artikel.html ontbrak de regel die hem op breed scherm verbergt, omdat
   die in de per-pagina stylesheet van nieuws.html stond. Gevolg: een los
   grijs vierkantje naast de zoekbalk, precies op de plek waar je hem
   aanziet voor een knop. Deze regel staat nu gedeeld, dus voor élke
   pagina gelijk.                                                       */
body .hdr .mzoek{border: 1px solid var(--glas-rand);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: var(--rond-vol);
  width: 40px; height: 40px; font-size: 15px; cursor: pointer;
  color: var(--ink);
  display: none;                     /* standaard weg */
  align-items: center; justify-content: center}
/* De zoekbalk krimpt mee tot 360px, dus er is geen aparte mobiele
   zoekknop nodig. `.mzoek` is uit de opmaak verwijderd. */
/* ═══ 90. Vier correcties uit de praktijk ═══════════════════════════ */
/* ── de ticker onder de kop ───────────────────────────────────────
   De kopbalk zweeft boven de pagina, dus de eerste balk eronder moet
   zelf ruimte houden. Zonder dit verdwijnt "Eerstvolgend: …" half
   achter de zoekbalk. De kophoogte wordt door de gedragslaag gemeten
   en als --hd gezet; de fallback van 58px geldt tot dat gebeurd is.  */
body main .tick,
body .page > .inner > .tick{margin-top: calc(var(--hd, 58px) + var(--sp-2))}
@media (min-width: 1000px){

body main .tick,
  body .page > .inner > .tick{margin-top: var(--sp-3)}

}
/* ── de venue-widget ──────────────────────────────────────────────
   Drie kaarten onder elkaar maken de widget 822px hoog: een heel
   scherm reclame midden in een verhaal. Op smalle schermen schuift de
   rij nu horizontaal, net als de andere carrousels. Vanaf 700px is er
   ruimte voor een echte kolomindeling.                              */
body .venue{max-width: 100%; overflow: hidden}
body .venue .venuerij{display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: var(--sp-1)}
body .venue .venuerij::-webkit-scrollbar{display: none}
body .venue .venuekaart{flex: 0 0 76%;max-width: 260px;scroll-snap-align: start}
@media (min-width: 700px){

body .venue .venuerij{display: grid; grid-template-columns: repeat(3, 1fr);
    overflow: visible}
body .venue .venuekaart{flex: initial; max-width: none}

}
/* ── de feedfilters ───────────────────────────────────────────────
   Zeven chips over drie regels namen 146px in beslag — meer dan het
   eerste artikel eronder. Eén schuivende regel houdt ze bereikbaar
   zonder dat ze de aandacht opeisen. De niet-gekozen filters worden
   rustiger; alleen de actieve houdt de rode omlijning.               */
body main .hoofdkolom > .chips{flex-wrap: nowrap; overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; margin-bottom: var(--sp-3)}
body main .hoofdkolom > .chips::-webkit-scrollbar{display: none}
body main .hoofdkolom > .chips .chip{flex: 0 0 auto; scroll-snap-align: start;
  white-space: nowrap;          /* "Festival ▾" mag niet binnen de chip breken */
  border-color: transparent;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink2); font-weight: 700}
body main .hoofdkolom > .chips .chip:hover{background: color-mix(in srgb, var(--ink) 8%, transparent)}
body main .hoofdkolom > .chips .chip.on{border-color: var(--fl-rood); color: var(--fl-rood);
  background: color-mix(in srgb, var(--fl-rood) 8%, transparent)}
/* het gekleurde bolletje per categorie mag kleiner: het label zegt
   het al, de stip was een tweede signaal voor dezelfde informatie */
body main .hoofdkolom > .chips .chip .cdot{width: 6px; height: 6px; opacity: .75}
/* De kaart zelf is een kolom: beeld, wie, wat, wanneer, knop. In de
   oude opmaak dreven die delen naast elkaar omdat de kaart nooit een
   richting kreeg — zichtbaar als een titel onder het beeld met de
   datum ernaast en de knop er los onder. */
body .venue .venuekaart{display: flex;flex-direction: column;gap: 6px;padding: var(--sp-3);border: 1px solid var(--line);border-radius: var(--rond-m);background: var(--card);position: relative}
body .venue .venuekaart .venuefoto{width: 100%; aspect-ratio: 16 / 10; border-radius: var(--rond-s);
  margin-bottom: 2px}
body .venue .venuekaart em{font-style: normal; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fl-rood)}
body .venue .venuekaart b{font-size: 14px; color: var(--ink); line-height: 1.3}
body .venue .venuekaart i{font-style: normal; font-size: 12px; color: var(--ink3)}
body .venue .venuekaart .venueknop{margin-top: auto; justify-content: center}
body .venue .venuelabel{position: absolute; top: calc(var(--sp-3) + 6px); left: calc(var(--sp-3) + 6px);
  background: var(--glas); -webkit-backdrop-filter: var(--glas-waas);
  backdrop-filter: var(--glas-waas);
  border: 1px solid var(--glas-rand); border-radius: var(--rond-vol);
  padding: 3px 9px; font-size: 10.5px; font-weight: 800; color: var(--ink)}
body .venue .venuekop{display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-3)}
body .venue .venuespons{margin-left: auto}
body .venue .venuevoet{display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3); font-size: 11.5px; color: var(--ink3)}
/* ═══ 91. Kopruimte, zoekoverlay en advertentieplekken ══════════════ */
/* ── ruimte onder de zwevende kop ─────────────────────────────────
   Vorige ronde kreeg alleen `.tick` deze marge, waardoor de subnav op
   het profiel er alsnog achter verdween. Nu geldt het voor wat er ook
   als eerste in de kolom staat. `--hd` wordt door de gedragslaag
   gemeten; 58px is de terugval tot dat gebeurd is.                   */
body .page{padding-top: var(--boven, calc(var(--hd, 58px) + var(--sp-2)))}
/* ── de zoekoverlay ───────────────────────────────────────────────
   Verbergen met visibility in plaats van display, zodat het invoerveld
   focus kan krijgen op het moment van aanraken. Dat is wat iOS eist en
   het levert meteen een vloeiende overgang op.                       */
body .zk-ovl{display: flex !important;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity var(--snel-2) var(--curve),
              visibility 0s linear var(--snel-2)}
body .zk-ovl.aan{visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity var(--snel-2) var(--curve), visibility 0s}
body .zk-ovl .zk-paneel{transform: translateY(-8px) scale(.98);
  transition: transform var(--snel-2) var(--curve)}
body .zk-ovl.aan .zk-paneel{transform: none}
/* ── advertentieplekken ───────────────────────────────────────────
   Formaten uit de mediakit 2025. Het zijn markeringen, geen banners:
   ze tonen wélke plek het is en welk formaat erin past, zodat Jos ziet
   waar de tag moet komen en hoeveel ruimte die inneemt.

   Elke plek is als advertentie gelabeld. Dat is niet alleen netjes maar
   ook het derde herkomstniveau uit het ontwerp: eigen redactie, partner
   en gesponsord mogen nooit op elkaar lijken.                        */
.adplek{display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  border: 1px dashed var(--line); border-radius: var(--rond-m);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  color: var(--ink3); text-align: center; position: relative}
.adplek .adlabel{font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink3); opacity: .8}
.adplek .adformaat{font-size: 11.5px; color: var(--ink3)}
/* supertop: boven het menu, over de volle breedte */
.adplek.adsuper{width: 100%; min-height: 90px; border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0}
/* top: boven de leesbare inhoud */
.adplek.adtop{min-height: 250px; margin-bottom: var(--sp-4)}
@media (max-width: 760px){

.adplek.adsuper{min-height: 60px}
.adplek.adtop{min-height: 130px}

}
/* floating: schuift mee tot je hem wegklikt, maximaal twee keer */
.adplek.adfloat{position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--mobnav-h, 68px) + var(--sp-3));
  width: min(92vw, 520px); min-height: 90px; z-index: 60;
  background: var(--glas); -webkit-backdrop-filter: var(--glas-waas);
  backdrop-filter: var(--glas-waas);
  border: 1px solid var(--glas-rand); box-shadow: var(--sh-3)}
.adplek.adfloat[hidden]{display: none}
.adplek .adsluit{position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--glas-rand); background: var(--card);
  color: var(--ink2); font-size: 15px; line-height: 1; cursor: pointer}
.adplek .adsluit::after{content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%,-50%)}
@media (min-width: 1000px){

.adplek.adfloat{bottom: var(--sp-4)}

}
/* ── de supertop staat bóven het menu ─────────────────────────────
   De mediakit is daar expliciet over: "onze reguliere spots bevinden
   zich helemaal bovenaan de site (boven het menu)". De kopbalk zweeft,
   dus die moet eronder beginnen in plaats van eroverheen.

   De hoogte staat als variabele, zodat de kop en de kopruimte er
   allebei op rekenen. Zonder advertentie is hij nul en verandert er
   niets aan de bestaande opmaak.                                     */
:root{--adsuper-h: 60px;--lees-kolom: 1120px}
@media (min-width: 760px){

:root{--adsuper-h: 90px}

}
body .adplek.adsuper{position: fixed;top: 0;left: 0;right: 0;z-index: 60;height: var(--adsuper-h);min-height: 0;background: var(--paper)}
body:has(.adplek.adsuper) .hdr{top: var(--adsuper-h)}
body:has(.adplek.adsuper) .page{padding-top: var(--boven, calc(var(--hd, 58px) + var(--adsuper-h) + var(--sp-2)))}
/* Browsers zonder :has() krijgen de oude opmaak; de advertentie
   overlapt dan de kop niet omdat hij simpelweg meescrollt. */
@supports not selector(body:has(*)){

  body .adplek.adsuper{ position: static; height: auto; min-height: var(--adsuper-h) }

}
/* ═══ 92. Uitlijning en accenten ════════════════════════════════════ */
/* ── de kopbalk volgt de contentkolom ─────────────────────────────
   De kop liep van rand tot rand terwijl de inhoud in een kolom van
   1120px staat. Op 1440px scheelde dat 146 pixels aan weerszijden, op
   2560px al 706: het logo plakte linksboven in de hoek terwijl het
   artikel in het midden begon. Nu deelt de kop dezelfde kolom, dus het
   logo staat recht boven de eerste letter van de tekst.

   De balk zelf blijft over de volle breedte lopen — dat hoort bij een
   zwevende balk — alleen de inhoud erin wordt begrensd.              */
body .hdr{padding-left: max(var(--sp-3), calc((100vw - var(--lees-kolom, 1120px)) / 2));padding-right: max(var(--sp-3), calc((100vw - var(--lees-kolom, 1120px)) / 2))}
body .mobnav{padding-left: max(var(--sp-2), calc((100vw - var(--lees-kolom, 1120px)) / 2));padding-right: max(var(--sp-2), calc((100vw - var(--lees-kolom, 1120px)) / 2))}
/* de supertop-advertentie hangt aan dezelfde kolom */
body .adplek.adsuper{padding-left: max(var(--sp-3), calc((100vw - var(--lees-kolom, 1120px)) / 2));padding-right: max(var(--sp-3), calc((100vw - var(--lees-kolom, 1120px)) / 2))}
/* ── sectieaccenten ───────────────────────────────────────────────
   Het streepje voor een sectiekop is decoratie van 12×3 pixels, geen
   tekst. Bij de contrastronde is het meegegaan naar de diepe treden,
   waardoor het dof werd. Hier mag de merkkleur zelf: fel genoeg om als
   accent te lezen, en het is geen leesbaarheidsrisico.               */
body{--sectie: var(--fl-rood)}
body[data-pagina="artikel"], body[data-pagina="nieuws"]{--sectie: var(--rood-500)}
body[data-pagina="festival"], body[data-pagina="agenda"],
body[data-pagina="artiest"], body[data-pagina="schemas"]{--sectie: var(--blauw-500)}
body[data-pagina="profiel"], body[data-pagina="shop"],
body[data-pagina="leden"]{--sectie: var(--goud-500)}
body[data-pagina="community"], body[data-pagina="forum"]{--sectie: var(--blauw-500)}
/* ── knoppen zonder eigen kleur ───────────────────────────────────
   Een `.btn` zonder modifier vulde zich met --ink: bijna zwart op licht.
   Naast een rood omlijnde knop leest dat als de belangrijkste actie,
   terwijl het meestal om "minder tonen" of "annuleren" gaat. Rood is in
   dit palet "dit kun je doen"; zwart hoort daar niet naast te staan.  */
/* Deze regel maakte elke knop zonder eigen variant halfdoorzichtig.
   In v2 is rood de knop; de stille variant is `.w`/`.dk` en die
   heeft een rand, geen vulling. */


/* Blokken zonder hoogte tellen wél mee voor de kolomafstand: elk leeg
   flex-item krijgt de gap aan beide kanten. Op de actspagina stonden er
   vier verborgen filterblokken onder elkaar, samen goed voor 120 pixels
   leegte midden in de lijst. Een ingeklapt paneel hoort geen ruimte te
   nemen zolang het dicht is. */
body main .hoofdkolom > .filterdoos:not(.open),
body main .hoofdkolom > .filterknop{display: none}
/* ── de zoeker ────────────────────────────────────────────────────
   Stond tot 31 augustus in een per-pagina <style> op 31 pagina's
   en ontbrak op de drie artikel- en redactiepagina's. Daar opende
   de overlay wel, maar zonder inset:0 was hij 102px hoog in plaats
   van schermvullend — klikken leek niets te doen. Eén plek, dus
   kan hij niet meer ontbreken.                                  */
/* ===== sitezoeker ===== */
.zk-ovl{position:fixed;inset:0;background:rgba(19,18,24,.45);backdrop-filter:blur(3px);z-index:90;display:none;align-items:flex-start;justify-content:center;padding:11vh 14px 14px}
.zk-ovl.aan{display:flex}
.zk-paneel{width:100%;max-width:560px;background:var(--card);border-radius:18px;box-shadow:var(--shl);overflow:hidden;animation:zkin .18s ease}
@keyframes zkin{

from{transform:translateY(-8px);opacity:0}

to{transform:none;opacity:1}

}
.zk-kop{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.zk-kop input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink)}
.zk-kop input::placeholder{color:var(--ink3)}
.zk-esc{font-size:9.5px;font-weight:800;color:var(--ink3);border:1px solid var(--line);border-radius:6px;padding:3px 6px;cursor:pointer}
.zk-lijst{max-height:52vh;overflow-y:auto;padding:7px}
.zk-groep{font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);padding:9px 11px 4px}
.zk-item{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px;text-decoration:none;color:var(--ink);cursor:pointer}
.zk-item.sel, .zk-item:hover{background:var(--paper)}
.zk-stip{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.zk-item b{font-size:13px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zk-item small{font-size:10px;font-weight:800;color:var(--ink3)}
.zk-leeg{padding:22px 16px;text-align:center}
.zk-leeg p{font-size:13px;color:var(--ink2);margin:0 0 11px}
.zk-voet{display:flex;gap:12px;align-items:center;padding:9px 16px;border-top:1px solid var(--line);font-size:10px;font-weight:700;color:var(--ink3)}
.zk-chips{display:flex;gap:7px;flex-wrap:wrap;padding:4px 11px 11px}
.mzoek{border:1.5px solid var(--line);background:var(--card);border-radius:999px;width:34px;height:34px;font-size:14px;cursor:pointer;color:var(--ink)}
.dzoek{cursor:pointer}
@media(min-width:1000px){

.mzoek{display:none}

}
@media(max-width:560px){

.zk-ovl{padding:8px}
.zk-paneel{border-radius:16px}
.zk-lijst{max-height:62vh}

}
/* ── vangnet: een rail die buiten .inner belandt ──────────────────
   Gebeurde op radar en agenda door één </div> te veel. De opmaak
   is gerepareerd; deze regel zorgt dat de fout nooit meer als een
   kaart over de volle schermbreedte eindigt.                    */
body main.page > aside.rail{max-width:var(--breed-max,1120px);margin-left:auto;margin-right:auto}
/* ── de feedinstelling ────────────────────────────────────────────
   .obkeuze is een grid van twee kolommen, maar heeft drie
   kinderen: icoon, titel en omschrijving. De omschrijving viel
   daardoor naar kolom 1 — 44px breed, dus één woord per regel.
   Beide tekstdelen horen in kolom 2.                           */
body main .obkeuze{grid-template-rows:auto auto}
body main .obkeuze .obem{grid-row:1/3;align-self:start}
body main .obkeuze b{grid-column:2;grid-row:1;color:var(--ink)}
body main .obkeuze em{grid-column:2;grid-row:2;color:var(--ink2);font-weight:600;margin-top:4px;line-height:1.45}
@media(max-width:560px){

body main .obkeuze{grid-template-columns:38px minmax(0,1fr);gap:11px}
body main .obkeuze .obem{width:38px;height:38px;font-size:18px;border-radius:12px}

}
/*  De knoppenbalk staat vast onderaan. Zonder ruimte eronder schuift de
    voettekst er bij het einde van de pagina onderdoor.                 */
body[data-pagina="onboarding"] main.page{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
/* ── het merk op een gekleurd vlak ────────────────────────────────
   De werk-kaart draagt zelf het rood-blauwverloop. Het merk in de
   paletkleuren valt daar weg: de rode druppel tegen rood, de grijze
   tegen het midden van het verloop. Op een gekleurd vlak hoort het
   merk monochroom wit — de vorm blijft, de kleur komt van de kaart.
   De kleine druppel houdt zijn eigen tint, anders verliest het merk
   zijn drieledigheid.                                             */
body .adW > svg path:nth-of-type(1),
body .adW > svg path:nth-of-type(2){fill: var(--grijs-0)}
body .adW > svg path:nth-of-type(3){fill: var(--grijs-0); opacity: .66}
/* ── de feedinstelling: één rooilijn ──────────────────────────────
   Op 390px stonden er drie linkerranden onder elkaar: de kop op 0,
   de keuzelijst op 14 en de kaart zelf op 28. Twee oorzaken.

   1. De onboardingkop zette zijn horizontale ruimte op nul om de
      kaartachtergrond kwijt te raken. Daarmee verdween ook de
      paginagoot die elk ander kind van .hoofdkolom wel heeft.
   2. .obtegels en .obkeuzes dragen hun eigen goot van 14px mee.
      Dat klopte toen ze rechtstreeks in .hoofdkolom stonden; nu
      zitten ze in .obstap, dat die goot al heeft. Twee keer dus.

   Uitkomst: één goot, gezet door .hoofdkolom > *, en alles daarbinnen
   op nul. Kop, uitleg, voortgangsbalk en kaarten beginnen op dezelfde
   lijn — op elke breedte.                                          */
body[data-pagina="onboarding"] main .obkop{padding:8px 0 4px}
@media(max-width:900px){

body[data-pagina="onboarding"] main .obkop{padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right))}

}
body main .obstap .obtegels,
body main .obstap .obkeuzes,
body main .obstap .obschakels,
body main .obstap .chips{padding-left:0;padding-right:0}
/* ── de voettekst houdt dezelfde goot als de rest ─────────────────
   De footer loopt over de volle breedte en trok zijn binnenmarge uit
   `calc(50vw - 50%)`: op desktop is dat precies de kolomrand, maar
   zodra de balk zelf zo breed is als het scherm wordt die som nul.
   Op mobiel plakten de kopjes en links daardoor tegen de schermrand,
   terwijl alles erboven op 14px begint. Een ondergrens lost dat op
   zonder de desktopuitlijning aan te raken.                        */
@media(max-width:900px){

body main .sitefoot{padding-left:max(14px,calc(50vw - 50%),env(safe-area-inset-left));
    padding-right:max(14px,calc(50vw - 50%),env(safe-area-inset-right))}

}
/* ── onboarding: de vijf stappen uit het functioneel ontwerp ───────
   Stap 1 vraagt tekst, stap 2 twee keer een tegelraster, stap 4 een
   ledenlijst. Die drie vormen bestonden nog niet.                  */
body main .obveld{margin-bottom:var(--sp-4)}
body main .obveld label{display:block;font-size:12px;font-weight:800;
  letter-spacing:.02em;color:var(--ink2);margin-bottom:6px}
body main .obveld input,
body main .obzoekveld input{width:100%;box-sizing:border-box;
  border:1.5px solid var(--line);background:var(--card);border-radius:var(--r2);
  padding:12px 14px;font:inherit;font-size:15px;font-weight:600;color:var(--ink)}
body main .obveld input::placeholder,
body main .obzoekveld input::placeholder{color:var(--ink3);font-weight:600}
body main .obveld input:focus,
body main .obzoekveld input:focus{outline:0;border-color:var(--fl-rood);
  box-shadow:0 0 0 3px var(--p-rood)}
body main .obhulp{display:block;font-size:12px;color:var(--ink3);
  font-weight:600;line-height:1.5;margin-top:6px}
body main .obzoekveld{margin-bottom:var(--sp-3)}
/* stap 2 stelt twee vragen onder elkaar; ze moeten los van elkaar
   leesbaar zijn, anders lijkt het één lange lijst */
body main .obdeelvraag+.obdeelvraag{margin-top:var(--sp-6);
  padding-top:var(--sp-5);border-top:1px solid var(--line)}
body main .obdeelvraag .obhulp{margin:6px 0 12px}
/* stap 4 — vrienden */
body main .obvrienden{display:grid;gap:8px}
body main .obvriend{display:grid;grid-template-columns:38px minmax(0,1fr) auto;
  gap:11px;align-items:center;text-align:left;font:inherit;color:inherit;
  cursor:pointer;background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r3);padding:10px 13px;
  transition:border-color var(--snel-1) var(--curve)}
body main .obvriend:hover{border-color:var(--ink3)}
body main .obvriend.aan{border-color:var(--fl-rood);box-shadow:0 0 0 3px var(--p-rood)}
body main .obvtx{min-width:0}
body main .obvtx b{display:block;font-size:13.5px;font-weight:800}
body main .obvtx em{font-style:normal;display:block;font-size:11px;
  font-weight:700;color:var(--ink3);margin-top:1px}
body main .obvadd{font-size:11.5px;font-weight:800;color:var(--ink3);white-space:nowrap}
body main .obvriend.aan .obvadd{color:var(--fl-rood)}
/* stap 5 zijn links, geen keuzeknoppen: ze brengen je ergens heen */
body main a.obkeuze{text-decoration:none}
/* ── de twee muntentellers ────────────────────────────────────────
   Verdiend bepaalt de rang en daalt nooit; saldo is wat je kunt
   uitgeven. Ze staan onder elkaar zodat het verschil zichtbaar is —
   dat is precies waar de verwarring zat.                          */
body .muntrang{padding:10px 15px 12px;border-top:1px solid var(--line)}
body .muntrij{display:flex;justify-content:space-between;gap:10px;
  font-size:12.5px;padding:4px 0}
body .muntrij span{color:var(--ink3);font-weight:700}
body .muntrij b{color:var(--t-goud);font-weight:800;white-space:nowrap}
body .muntrij b.kan{color:var(--ink)}
body .muntbalk{height:5px;border-radius:99px;background:var(--line);
  margin:8px 0 7px;overflow:hidden}
body .muntbalk i{display:block;height:100%;border-radius:99px;
  background:var(--verloop-goud,var(--goud-500))}
body .muntnoot{margin:0;font-size:10.5px;font-weight:700;
  color:var(--ink3);line-height:1.5}
/* ── bronfiltering: buiten scope voor v1 ──────────────────────────
   Het functioneel ontwerp zet handmatige filtering per bron
   (Alles/Festival/Nieuws/Community/Socials/Shorts/Partners/Forum)
   expliciet buiten scope voor v1: "Dit kan later worden toegevoegd
   als gebruikers daar behoefte aan tonen."

   De sorteer- en filterbalk zelf is wél Must — die blijft staan, met
   de "afgestemd op"-regel eronder. Alleen de bronknoppen verdwijnen.

   Het is gebouwd en het werkt, dus het wordt niet weggegooid: zet
   `data-v1="ja"` op de <body> en de rij is weg. Weghalen van dat
   attribuut zet hem terug. Zo is het een scopekeuze en geen
   verbouwing.                                                     */
body[data-v1="ja"] [data-buiten-v1="bronfilter"]{display:none}
/* ── faselabel ────────────────────────────────────────────────────
   Een pagina die af is maar volgens het functioneel ontwerp niet in
   de eerste release hoort. Blauw: dit is een vaststelling, geen
   actie — rood zou suggereren dat je erop moet klikken.           */
body main .faselabel{margin:10px 0 0;padding:10px 13px;font-size:12.5px;
  line-height:1.55;color:var(--ink2);background:var(--tintb);
  border-radius:var(--r2);border-left:3px solid var(--fl-blauw)}
body main .faselabel b{color:var(--t-blauw)}
/* ── zwevende menu's ──────────────────────────────────────────────
   Het festivalmenu stond absoluut gepositioneerd in de filterrij, en
   die rij schuift horizontaal met overflow:auto. Het menu werd dus
   afgekapt door zijn eigen ouder: het opende wel, je zag het niet.
   Deze menu's hangen aan de body en worden bij hun knop gezet, dus
   ze kunnen door niets meer worden afgesneden.                    */
body .zwevendmenu{position:fixed;z-index:120;min-width:196px;max-width:min(320px,92vw);
  max-height:min(60vh,420px);overflow-y:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:var(--shl,0 14px 40px rgba(23,20,35,.18));padding:6px}
body .zwevendmenu[hidden]{display:none}
body .zwevendmenu>button{display:flex;width:100%;justify-content:space-between;
  align-items:center;gap:10px;border:0;background:none;font:inherit;font-size:13px;
  font-weight:700;color:var(--ink);text-align:left;padding:9px 11px;
  border-radius:var(--r2);cursor:pointer}
body .zwevendmenu>button:hover{background:var(--paper)}
body .zwevendmenu>button.aan{color:var(--fl-rood)}
body #fmenu.zwevendmenu{display:none}
body #fmenu.zwevendmenu.show{display:block}
/* de sorteerknop was een span zonder gedrag */
body main .sorteerknop{border:0;background:none;font:inherit;cursor:pointer;
  color:var(--ink3);font-weight:700;padding:2px 0}
body main .sorteerknop b{color:var(--ink);font-weight:800}
body main .sorteerknop:hover b{color:var(--fl-rood)}
/* "afgestemd op" is een knop: dezelfde instelling die je meldingen
   bepaalt, bereikbaar waar je de uitkomst ziet */
body main .persknop{display:block;width:100%;text-align:left;border:0;
  background:none;font:inherit;cursor:pointer;padding:2px 0}
body main .persknop b{font-weight:700;color:var(--ink2)}
/* het merkrood haalt op een lichte kaart net geen AA op 12px;
   twee treden dieper wel, en de betekenis blijft dezelfde */
body main .perswijzig{font-weight:800;color:var(--t-rood);white-space:nowrap}
body .zwevendmenu.afstem{min-width:264px}
body .afstemkop{font-size:12px;font-weight:800;padding:8px 11px 2px;color:var(--ink)}
body .afstemuit{margin:0;padding:0 11px 8px;font-size:11.5px;line-height:1.5;
  color:var(--ink3);font-weight:600;border-bottom:1px solid var(--line)}
body .afstemrij{display:flex;width:100%;justify-content:space-between;align-items:center;
  gap:10px;border:0;background:none;font:inherit;font-size:13px;font-weight:700;
  color:var(--ink);text-align:left;padding:9px 11px;border-radius:var(--r2);cursor:pointer}
body .afstemrij:hover{background:var(--paper)}
body .afstemrij i{font-style:normal;font-weight:800;color:var(--ink3)}
body .afstemrij.aan i{color:var(--fl-rood)}
/* gelezen: lager gewogen, niet verborgen — zoals het ontwerp vraagt */
body main .post.gelezen, body main article.gelezen{opacity:.72}
body main article.gelezen h3{color:var(--ink2)}
/* ── bezoeker of lid ──────────────────────────────────────────────
   Wat een uitgelogde bezoeker niet krijgt, volgens het functioneel
   ontwerp: de persoonlijke widgets (munten, notificaties, jouw
   festivals, ticketalerts) en elke knop waarmee je bijdraagt —
   stemmen, reageren, endorsen, inchecken, aanvullen.

   Dit is opmaak, geen beveiliging. In productie hoort de server deze
   onderdelen niet te renderen; dat staat ook zo in OVERDRACHT §6.  */
body[data-rol="bezoeker"] #munten,
body[data-rol="bezoeker"] .nbel,
body[data-rol="bezoeker"] .fab,
body[data-rol="bezoeker"] .mtab.plus,
body[data-rol="bezoeker"] .dnav a.plus,
body[data-rol="bezoeker"] .hscroll .pin,
body[data-rol="bezoeker"] [data-kaart="ticketalert"],
body[data-rol="bezoeker"] .alertcard,
body[data-rol="bezoeker"] .kudopaar,
body[data-rol="bezoeker"] .kudo,
body[data-rol="bezoeker"] .kudomin,
body[data-rol="bezoeker"] .obvadd,
body[data-rol="bezoeker"] [data-alleen-lid]{display:none !important}
/* stemmen, endorsen en bijdragen kan wel gezien maar niet gedaan
   worden: de knop blijft staan en legt uit waarom hij niet werkt */
body[data-rol="bezoeker"] .opt,
body[data-rol="bezoeker"] .btn.g27,
body[data-rol="bezoeker"] .volg{opacity:.55; pointer-events:none}
body[data-rol="bezoeker"] .fh .pers{display:none}
body .rolknop{margin-top:var(--sp-5);border:1.5px solid var(--line);
  background:var(--card);color:var(--ink2);font:inherit;font-size:11.5px;
  font-weight:800;border-radius:var(--rmax);padding:7px 14px;cursor:pointer}
body .rolknop:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
/* ── verversen en socialkanalen ───────────────────────────────────
   De verversknop staat in de kop van de feed, naast de sortering.
   De melding staat eronder: hij vertelt dat er niets nieuws is, en
   dat is iets anders dan een lege lijst.                          */
body main .versknop{margin-left:auto;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink2);font:inherit;font-size:12px;
  font-weight:800;border-radius:var(--rmax);padding:6px 12px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
body main .versknop:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
body main .versknop[disabled]{opacity:.6;cursor:default}
body main .versknop .verspijl{display:inline-block;font-size:14px;line-height:1}
body main .versknop.bezig .verspijl{animation:versdraai .7s linear infinite}
@keyframes versdraai{
to{transform:rotate(360deg)}
}
body main .versmelding{margin:8px 0 0;padding:9px 13px;font-size:12.5px;
  font-weight:700;color:var(--t-blauw);background:var(--tintb);
  border-radius:var(--r2);line-height:1.5}
body main .versmelding[hidden]{display:none}
body main .socialuit{margin-left:auto;border:0;background:none;font:inherit;
  font-size:11px;font-weight:800;color:var(--ink3);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
body main .socialuit:hover{color:var(--fl-rood)}
/* ── festivalfeiten die het ontwerp vraagt ────────────────────────
   Genre, eerste editie en capaciteit stonden niet op de pagina,
   terwijl ze in dezelfde Must staan als naam, datum en locatie.   */
body main .fmeta2{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  margin-top:var(--sp-3)}
body main .fmeta2 span{display:flex;flex-direction:column;gap:1px}
body main .fmeta2 i{font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;opacity:.7}
body main .fmeta2 b{font-size:13px;font-weight:800}
body main .fsocials{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
body main .fsocials a{font-size:11.5px;font-weight:800;text-decoration:none;
  padding:5px 11px;border-radius:var(--rmax);
  border:1.5px solid rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.14)}
body main .fsocials a:hover{background:rgba(255,255,255,.26)}
/* ── gemiddelden per beoordelingscategorie ────────────────────────
   Het rapport heeft zes categorieën maar toonde alleen het eindcijfer.
   De balk is blauw: dit is gemeten, niet iets wat je kunt doen.    */
body main .catlijst{display:grid;gap:9px;margin-top:11px}
body main .catrij{display:grid;grid-template-columns:minmax(96px,124px) minmax(0,1fr) 34px;
  gap:11px;align-items:center}
body main .catrij span{font-size:12px;font-weight:700;color:var(--ink2)}
body main .catrij i{display:block;height:6px;border-radius:99px;background:var(--line)}
body main .catrij i::before{content:'';display:block;height:100%;width:var(--v,0%);
  border-radius:99px;background:var(--fl-blauw)}
body main .catrij b{font-size:13px;font-weight:800;text-align:right;color:var(--t-blauw)}
/* redactiereviews staan los van de ledenreviews: herkomst mag nooit
   vervagen, dat is het derde niveau uit het ontwerp */
body main .rdlijstje{display:grid;gap:2px;margin-top:10px}
body main .rdlijstje a{display:block;padding:9px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line)}
body main .rdlijstje a:last-child{border-bottom:0}
body main .rdlijstje b{display:block;font-size:13px;font-weight:800;line-height:1.35}
body main .rdlijstje i{font-style:normal;display:block;font-size:11px;font-weight:700;
  color:var(--ink3);margin-top:2px}
body main .rdlijstje a:hover b{color:var(--fl-rood)}
/* kudo's en reageren op andermans review */
body main .rvacties{display:flex;align-items:center;gap:8px;margin-top:7px}
body main .rvreageer{border:0;background:none;font:inherit;font-size:11.5px;
  font-weight:800;color:var(--ink3);cursor:pointer;padding:4px 2px}
body main .rvreageer:hover{color:var(--fl-rood)}
body main .rvantwoord{margin-top:8px;display:grid;gap:7px;justify-items:start}
body main .rvantwoord textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--line);
  background:var(--card);border-radius:var(--r2);padding:9px 11px;font:inherit;
  font-size:13px;color:var(--ink);resize:vertical}
body main .rvantwoord textarea:focus{outline:0;border-color:var(--fl-rood)}
body main .rvgeplaatst{margin:0;font-size:12px;font-weight:700;color:var(--t-blauw)}
/* gerelateerde festivals */
body main .verwantlijst{display:grid;gap:2px}
body main .verwantrij{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;
  gap:10px;align-items:center;padding:8px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line)}
body main .verwantrij:last-child{border-bottom:0}
body main .verwanttx{min-width:0}
body main .verwanttx b{display:block;font-size:13px;font-weight:800}
body main .verwanttx i{font-style:normal;display:block;font-size:10.5px;
  font-weight:700;color:var(--ink3);margin-top:1px}
body main .verwantpijl{color:var(--ink3);font-weight:800}
body main .verwantrij:hover b{color:var(--fl-rood)}
/* ── het eigen profiel ────────────────────────────────────────────
   Bezochte festivals op aantal bezoeken, uitklapbaar naar de edities
   die je bezocht en de reviews die je schreef. Het aantal staat in
   goud: dat is iets wat je hebt opgebouwd, niet iets wat je kunt
   aanklikken.                                                      */
body main .bezlijst{display:grid;gap:2px;margin-top:11px}
body main .bez{border-bottom:1px solid var(--line)}
body main .bez:last-child{border-bottom:0}
body main .bezkop{display:grid;grid-template-columns:34px minmax(0,1fr) auto 16px;
  gap:11px;align-items:center;width:100%;border:0;background:none;font:inherit;
  text-align:left;color:inherit;padding:10px 0;cursor:pointer}
body main .beztx{min-width:0}
body main .beztx b{display:block;font-size:13.5px;font-weight:800}
body main .beztx i{font-style:normal;display:block;font-size:10.5px;font-weight:700;
  color:var(--ink3);margin-top:1px}
body main .bezaantal{font-size:15px;font-weight:800;color:var(--t-goud)}
body main .bezpijl{color:var(--ink3);font-size:11px;transition:transform var(--snel-1) var(--curve)}
body main .bezkop.open .bezpijl{transform:rotate(180deg)}
body main .bezkop:hover .beztx b{color:var(--fl-rood)}
body main .bezuit{padding:2px 0 12px 45px;display:grid;gap:2px}
body main .bezuit[hidden]{display:none}
body main .bezed{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:8px 0;text-decoration:none;color:inherit;font-size:12.5px}
body main .bezed b{font-weight:800;color:var(--ink2)}
body main .bezed span{color:var(--ink3);font-weight:600;line-height:1.45}
body main .bezcijfer{font-style:normal;font-size:13px;font-weight:800;color:var(--t-blauw)}
body main .bezed.leeg span{font-style:italic}
body main .bezreview{border:1.5px solid var(--line);background:var(--card);
  font:inherit;font-size:11px;font-weight:800;color:var(--ink2);
  border-radius:var(--rmax);padding:5px 11px;cursor:pointer;white-space:nowrap}
body main .bezreview:hover{border-color:var(--fl-rood);color:var(--fl-rood)}
body main .bezvoet{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;margin-top:13px;padding-top:12px;
  border-top:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink3)}
/* reviewconcepten */
body main .conceptlijst{display:grid;gap:2px;margin-top:10px}
body main .conceptrij{display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:9px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line)}
body main .conceptrij:last-child{border-bottom:0}
body main .conceptx b{display:block;font-size:13px;font-weight:800}
body main .conceptx i{font-style:normal;display:block;font-size:10.5px;
  font-weight:700;color:var(--ink3);margin-top:1px}
body main .conceptmerk{font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);border:1px solid var(--line);
  border-radius:var(--rmax);padding:3px 8px;white-space:nowrap}
/* sorteren staat links van het bronfilter, met een streepje ertussen:
   het zijn twee verschillende dingen */
body main .chipscheiding{display:inline-block;width:1px;align-self:stretch;
  background:var(--line);margin:2px 3px}
body main .bwvelden[hidden]{display:none}
body main #bewerkUit[hidden]{display:none}
body main .pstats .s a{text-decoration:none;color:inherit;display:block}
body main .pstats .s a:hover b{color:var(--fl-rood)}
/* ── alerts per festival ──────────────────────────────────────────
   Drie soorten per festival: nieuws, tickets en schema. Dit is
   dezelfde instelling die de feedvolgorde bepaalt.                */
body main .alerttabel{display:grid;gap:2px}
body main .alertkop,body main .alertrij{display:grid;
  grid-template-columns:minmax(0,1fr) 62px 62px 62px;gap:6px;align-items:center}
body main .alertkop i{font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);text-align:center}
body main .alertrij{padding:9px 0;border-top:1px solid var(--line);cursor:pointer}
body main .alertrij span{font-size:13px;font-weight:700}
body main .alertrij input{justify-self:center;width:18px;height:18px;accent-color:var(--fl-rood)}
/* ── de plattegrond ───────────────────────────────────────────────
   Schematisch, geen kaartmateriaal: het gaat om waar dingen ten
   opzichte van elkaar liggen. De officiële kaart staat in de gids. */
body main .plattegrond{position:relative;margin-top:11px;aspect-ratio:16/9;
  border-radius:var(--r3);border:1px solid var(--line);overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--fl-blauw) 9%,transparent), transparent 55%),
    radial-gradient(circle at 72% 68%, color-mix(in srgb,var(--fl-rood) 8%,transparent), transparent 55%),
    var(--paper)}
body main .plattegrond .pg{position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);font-size:10.5px;font-weight:800;white-space:nowrap;
  padding:5px 10px;border-radius:var(--rmax);background:var(--card);
  border:1.5px solid var(--line);color:var(--ink2)}
body main .plattegrond .pg-hoofd{border-color:var(--fl-rood);color:var(--t-rood)}
body main .plattegrond .pg-entree{border-color:var(--fl-blauw);color:var(--t-blauw)}
/* de discovery-kaart is een uitnodiging, geen bericht */
body main .ontdekkaart h3{margin:6px 0 4px;font-size:16px;line-height:1.3}
body main .ontdekkaart p{margin:0;font-size:13px;color:var(--ink2);line-height:1.5}
/* de dagcap en 'eenmalig' horen bij de actie, niet bij het bedrag */
body .mv-r .mvcap{font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);
  border:1px solid var(--line);border-radius:var(--rmax);
  padding:1px 6px;margin-left:5px;white-space:nowrap}
body #muntPaneel{max-height:min(76vh,620px);overflow-y:auto}
/* De feedkop is de titel van de pagina. Het welkomstblok verschijnt
   alleen voor uitgelogde bezoekers; daarmee kan het niet de enige h1
   zijn, want dan heeft de pagina er voor een lid geen. */
body main .fh h1{font-size:clamp(19px,3.4vw,23px);font-weight:800;
  letter-spacing:-.02em;margin:0}
/* ── het hamburgermenu uit het functioneel ontwerp ────────────────
   Boy vraagt er als Must om; de build had een vaste onderbalk. Nu
   staan ze allebei klaar en kiest de <body>:

       data-mobnav="balk"        de onderbalk
       data-mobnav="hamburger"   het voorstel uit het document

   Boven 1000px verandert er niets: daar staat de navigatie in de
   kopbalk en heeft geen van beide varianten betekenis.            */
body[data-mobnav="hamburger"] .mobnav{display:none !important}
body[data-mobnav="hamburger"].heeft-mobnav main.page{padding-bottom:var(--sp-8)}
body[data-mobnav="balk"] .hbknop,
body[data-mobnav="balk"] .hbwol{display:none !important}
body .hbknop{display:none}
@media(max-width:999px){

body[data-mobnav="hamburger"] .hbknop{display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:38px;height:38px;flex:0 0 38px;padding:0 9px;box-sizing:border-box;
    border:1px solid var(--line);border-radius:var(--rmax);
    background:var(--card);cursor:pointer;margin-right:2px}
body[data-mobnav="hamburger"] .hbknop span{display:block;height:2px;border-radius:2px;background:var(--ink);
    transition:transform var(--snel-2) var(--curve),opacity var(--snel-1) var(--curve)}
body[data-mobnav="hamburger"] .hbknop.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body[data-mobnav="hamburger"] .hbknop.open span:nth-child(2){opacity:0}
body[data-mobnav="hamburger"] .hbknop.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* de hoofdtabs in de kopbalk zijn overbodig zodra alles in het
     menu zit — anders staat dezelfde navigatie er twee keer */
body[data-mobnav="hamburger"] .menu{display:none}

}
body .hbwol{position:fixed;inset:0;z-index:130;background:rgba(19,18,24,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body .hbwol[hidden]{display:none}
body .hbpaneel{position:absolute;inset:0 0 0 auto;width:min(340px,88vw);
  background:var(--card);box-shadow:var(--shl,0 14px 40px rgba(23,20,35,.2));
  overflow-y:auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px
    calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:var(--sp-4);
  animation:hbin var(--snel-2) var(--curve)}
@keyframes hbin{
from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}
}
body.hbopen{overflow:hidden}
/* de zoekbalk staat bovenaan, zoals het ontwerp vraagt */
body .hbzoek{display:flex;align-items:center;gap:9px;width:100%;
  border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r2);
  padding:11px 13px;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink3);cursor:pointer;text-align:left}
body .hbzoek svg{width:16px;height:16px;flex:0 0 16px}
body .hbzoek:hover{border-color:var(--fl-rood)}
/* daarna de topnavigatie, uitgeklapt */
body .hbtabs{display:grid;gap:2px}
body .hbtab{display:block;padding:11px 12px;border-radius:var(--r2);
  text-decoration:none;color:var(--ink);font-size:15px;font-weight:800}
body .hbtab:hover{background:var(--paper)}
body .hbtab.aan{background:var(--rood-500);color:var(--grijs-0)}
/* dan de footer-secties, samengevouwen onder dezelfde drie kopjes */
body .hbsecties{display:grid;gap:2px;border-top:1px solid var(--line);padding-top:var(--sp-3)}
body .hbsectiekop{display:flex;justify-content:space-between;align-items:center;
  width:100%;border:0;background:none;font:inherit;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  padding:11px 12px;border-radius:var(--r2);cursor:pointer;text-align:left}
body .hbsectiekop:hover{background:var(--paper)}
body .hbsectiekop i{font-style:normal;font-size:11px;
  transition:transform var(--snel-1) var(--curve)}
body .hbsectiekop.open i{transform:rotate(180deg)}
body .hbsectielinks{display:grid;gap:1px;padding:0 0 8px}
body .hbsectielinks[hidden]{display:none}
body .hbsectielinks a{display:block;padding:8px 12px 8px 22px;text-decoration:none;
  color:var(--ink2);font-size:13.5px;font-weight:700;border-radius:var(--r2)}
body .hbsectielinks a:hover{background:var(--paper);color:var(--fl-rood)}
/* en onderaan de weergave-instelling */
body .hbweergave{margin-top:auto;border-top:1px solid var(--line);padding-top:var(--sp-3)}
body .hbweergave>span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:8px;padding-left:12px}
body .hbwgroep{display:flex;gap:6px;flex-wrap:wrap;padding-left:12px}
body .hbw{border:1.5px solid var(--line);background:var(--card);font:inherit;
  font-size:12px;font-weight:800;color:var(--ink2);border-radius:var(--rmax);
  padding:7px 13px;cursor:pointer}
body .hbw:hover,body .hbw.aan{border-color:var(--fl-rood);color:var(--fl-rood)}
/* ── --hd bestaat nu op elke breedte ──────────────────────────────
   `--hd` was alleen gedefinieerd binnen @media(min-width:1000px).
   Daaronder was `calc(var(--hd) + 8px)` dus een ongeldige waarde, en
   een ongeldige waarde valt terug op `auto`. Gevolg: het munten- en
   notificatiepaneel stonden op mobiel niet onder de kopbalk maar
   onderaan het document, op ruim 10.000 pixels. Ze openden wel — je
   zag ze alleen nooit, en dus leek de knop kapot.

   Dit is dezelfde `--hd`-val als eerder bij de subnav en de rail,
   alleen andersom: daar werd de waarde verkeerd gelezen, hier bestond
   hij niet. Vandaar zowel een basiswaarde hier als een meting in de
   gedragslaag: de kop zelf opmeten blijft de enige echte bron.     */
:root{--hd: calc(50px + env(safe-area-inset-top, 0px))}
/* de overlaypanelen hangen aan de ónderrand van de kop, niet aan zijn
   hoogte: boven de kop kan een advertentie staan die meescrollt. */
body .npaneel{top: calc(var(--kop-onder, var(--hd, 50px)) + 8px)}
body #plusPaneel{top: auto}
/* ══ Product — fase 2 ═════════════════════════════════════════════
   Bewust licht: naam, categorie-tag, foto, korte omschrijving. Geen
   specblad, geen prijstabel. De waarde zit in het oordeel van de
   community, dus dat staat bovenaan en niet onderaan.             */
body main .prodgrid{display:grid;gap:var(--sp-3);margin-top:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
body main .prodkaart{display:grid;grid-template-columns:74px minmax(0,1fr);gap:13px;
  padding:13px;border:1.5px solid var(--line);border-radius:var(--r3);
  background:var(--card);text-decoration:none;color:inherit;
  transition:border-color var(--snel-1) var(--curve),transform var(--snel-1) var(--curve)}
body main .prodkaart:hover{border-color:var(--fl-rood);transform:translateY(-2px)}
body main .prodfoto{width:74px;height:74px;border-radius:var(--r2)}
body main .prodtx{min-width:0;display:flex;flex-direction:column;gap:2px}
body main .prodtag{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
body main .prodtx b{font-size:14px;font-weight:800;line-height:1.25}
body main .prodtx i{font-style:normal;font-size:12px;color:var(--ink2);line-height:1.45}
body main .prodvoet{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:5px}
body main .prodster{font-size:11px;color:var(--fl-goud);letter-spacing:.5px}
body main .prodster b{font-size:12px;color:var(--t-goud)}
body main .prodster small{font-size:10.5px;color:var(--ink3);font-weight:700;letter-spacing:0}
body main .prodend{font-size:10.5px;font-weight:800;color:var(--ink3)}
body main .prodend.aan{color:var(--t-blauw)}
/* de detailpagina */
body main .pdkop{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--sp-3);
  align-items:start}
body main .pdfoto{width:96px;height:96px;border-radius:var(--r3)}
body main .pdtx h1{font-size:clamp(20px,3.6vw,26px);margin:4px 0 6px;line-height:1.2}
body main .pdtx p{margin:0;font-size:14px;color:var(--ink2);line-height:1.55}
body main .pdtag{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}
/* de aggregatierating staat prominent, met de verdeling erbij */
body main .pdrating{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5);
  align-items:center;margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid var(--line)}
body main .pdcijfer{text-align:center}
body main .pdcijfer b{display:block;font-size:34px;font-weight:800;color:var(--t-goud);line-height:1}
body main .pdcijfer span{display:block;font-size:13px;color:var(--fl-goud);letter-spacing:1px;margin-top:3px}
body main .pdcijfer i{font-style:normal;display:block;font-size:10.5px;font-weight:700;
  color:var(--ink3);margin-top:3px}
body main .pdverdeling{display:grid;gap:4px;min-width:0}
body main .pdvrij{display:grid;grid-template-columns:12px minmax(0,1fr) 34px;gap:8px;align-items:center}
body main .pdvrij span{font-size:10.5px;font-weight:800;color:var(--ink3)}
body main .pdvrij i{display:block;height:5px;border-radius:99px;background:var(--line)}
body main .pdvrij i::before{content:'';display:block;height:100%;width:var(--v,0%);
  border-radius:99px;background:var(--fl-goud)}
body main .pdvrij small{font-size:10px;font-weight:700;color:var(--ink3);text-align:right}
@media(max-width:560px){
body main .pdrating{grid-template-columns:1fr;gap:var(--sp-3)}
body main .pdkop{grid-template-columns:72px minmax(0,1fr)}
body main .pdfoto{width:72px;height:72px}
}
/* het koopblok: knoppen, geen prijstabel */
body main .pdlinks{display:grid;gap:8px}
body main .pdlink{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r2);
  background:var(--card);text-decoration:none;color:inherit}
body main .pdlink:hover{border-color:var(--fl-rood)}
body main .pdlink b{display:block;font-size:13.5px;font-weight:800}
body main .pdlink i{font-style:normal;display:block;font-size:10.5px;font-weight:700;
  color:var(--ink3);margin-top:1px}
body main .pdlinkpijl{font-size:12px;font-weight:800;color:var(--fl-rood);white-space:nowrap}
/* de toelichting van wie het tipte: hierdoor is een vers product
   nooit helemaal leeg */
body main .pdtiprij{margin-top:9px}
body main .pdtipwie{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
body main .pdtipwie b{display:block;font-size:13px;font-weight:800}
body main .pdtipwie em{font-style:normal;display:block;font-size:10.5px;font-weight:700;color:var(--ink3)}
body main .pdtiptekst{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ink)}
body main .pdbehulp{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--t-goud);margin-left:5px}
/* link plakken */
/* eigen overlay: de hamburger-overlay wordt door de mobnav-keuze
   uitgeschakeld, en dat mag een modal niet raken */
body .modalwol{position:fixed;inset:0;z-index:140;background:rgba(19,18,24,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body .prodwol .prodmodal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(460px,92vw);max-height:88vh;overflow-y:auto;background:var(--card);
  border-radius:var(--r4,20px);box-shadow:var(--shl,0 14px 40px rgba(23,20,35,.22));
  padding:var(--sp-5)}
body .prodmodal h2{margin:0 0 6px;font-size:19px;line-height:1.25}
body .prodsluit{position:absolute;top:10px;right:12px;border:0;background:none;
  font-size:22px;line-height:1;color:var(--ink3);cursor:pointer}
body .prodvangst{margin:4px 0 12px;padding:11px 13px;background:var(--paper);
  border-radius:var(--r2);display:grid;gap:5px}
body .prodvangst[hidden]{display:none}
body .vangstrij{display:flex;justify-content:space-between;gap:10px;font-size:12px}
body .vangstrij span{color:var(--ink3);font-weight:700}
body .vangstrij b{font-weight:800;text-align:right}
body .vangstmerk{margin:7px 0 0;font-size:11.5px;line-height:1.5;color:var(--t-blauw);font-weight:700}
body .prodmodal textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--line);
  background:var(--card);border-radius:var(--r2);padding:10px 12px;font:inherit;
  font-size:14px;color:var(--ink);resize:vertical}
body .prodmodal textarea:focus{outline:0;border-color:var(--fl-rood)}
/* ══ de drie widgets uit fase 2 ═══════════════════════════════════ */
body main .mtvraag+.mtvraag{margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid var(--line)}
body main .mtvraag .chips{margin-top:10px}
body main .vgkiezers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-4)}
body main .vgkiezers .obveld{margin:0}
body main .vgkiezers span{display:block;font-size:12px;font-weight:800;
  color:var(--ink2);margin-bottom:6px}
body main .vgkiezers select{width:100%;box-sizing:border-box;border:1.5px solid var(--line);
  background:var(--card);border-radius:var(--r2);padding:11px 13px;font:inherit;
  font-size:14px;font-weight:700;color:var(--ink)}
body main .vgkiezers select:focus{outline:0;border-color:var(--fl-rood)}
body main .vgtel{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--ink2)}
body main .vgtel b{color:var(--t-blauw);font-weight:800;font-size:15px}
body main .vggrid{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
body main .vgacts{display:grid;gap:1px;margin-top:9px}
body main .vgacts a{display:block;padding:7px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line)}
body main .vgacts a:last-child{border-bottom:0}
body main .vgacts b{display:block;font-size:13px;font-weight:800}
body main .vgacts i{font-style:normal;display:block;font-size:10.5px;font-weight:700;
  color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
body main .vgacts a:hover b{color:var(--fl-rood)}
body main .wrgrid{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
body main .wrkaart{padding:var(--sp-4);border-radius:var(--r3);background:var(--card);
  border:1.5px solid var(--line);display:flex;flex-direction:column;gap:2px}
body main .wrkaart.groot{grid-column:1/-1;background:var(--grad27);color:var(--grijs-0);
  border-color:transparent}
body main .wricoon{font-size:22px;line-height:1;margin-bottom:6px}
body main .wrkaart b{font-size:30px;font-weight:800;line-height:1.05;color:var(--t-goud)}
body main .wrkaart.groot b{font-size:24px;color:var(--grijs-0)}
body main .wrlabel{font-size:13px;font-weight:800;color:var(--ink)}
body main .wrkaart.groot .wrlabel{color:var(--grijs-0)}
body main .wrkaart i{font-style:normal;font-size:11.5px;font-weight:700;
  color:var(--ink3);line-height:1.45;margin-top:3px}
body main .wrkaart.groot i{color:rgba(255,255,255,.82)}
/* ── aanraakvlakken in de voettekst ───────────────────────────────
   De footerlinks waren 23px hoog: te klein om op een telefoon te
   raken zonder mis te tikken, en er staan er inmiddels elf onder
   Ontdek. Op aanraakschermen worden ze 40px zonder dat de kolom
   langer oogt — de tekst zelf verandert niet.                     */
@media(max-width:900px){

body main .sitefoot .cols a{min-height:40px;display:flex;align-items:center}
body main .sitefoot .cols>div{margin-bottom:var(--sp-3)}

}
/* de losse links in de voettekst mogen ook met een muis wat ruimer */
body main .sitefoot .cols a{padding:3px 0}
/* ── aanraakvlakken: de nieuwe knoppen doen mee ───────────────────
   De bestaande regel hierboven laat knoppen met tekst groeien tot
   40px op een aanraakscherm en 32px met een muis. De knoppen die er
   deze ronde bij zijn gekomen stonden daar nog niet in, en die van
   het forum en de artiestpagina waren nooit meegenomen.           */
body main .fpactie, body main .editbtn, body main .sorteerknop,
body main .socialuit, body main .rvreageer, body main .bezreview,
body main .versknop, body main .persknop, body main .bezkop,
body main .afstemrij, body main .alertrij, body main .hbtab,
body main .prodkaart, body main .pdlink{min-height:40px}
body main .fpactie, body main .editbtn, body main .sorteerknop,
body main .socialuit, body main .rvreageer, body main .bezreview{display:inline-flex; align-items:center}
@media(pointer:fine){

body main .fpactie, body main .editbtn, body main .sorteerknop,
  body main .socialuit, body main .rvreageer, body main .bezreview,
  body main .versknop, body main .persknop{min-height:32px}

}
/* het zoekveld en de selects horen bij dezelfde norm */
body main .obzoekveld input, body main .obveld input,
body main .vgkiezers select, body main .zoekwrap input{min-height:44px}
/* databeheer: twee knoppen die iets onomkeerbaars doen, dus met
   ruimte ertussen en een tweede klik voor de definitieve */
body main .datarij{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
body main .dataweg{border-color:var(--fl-rood);color:var(--t-rood)}
body main .dataweg[data-bevestig]{background:var(--p-rood)}
/* zoekvelden zonder eigen klasse horen bij dezelfde norm; een
   schuifregelaar is een uitzondering — die is dun van vorm maar het
   greepje eromheen is groot genoeg */
body main input[type="text"]:not([type="range"]),
body main input[type="search"],
body main input[type="url"],
body main input[type="email"]{min-height:44px;box-sizing:border-box}
body main input[type="range"]{min-height:0}

/* ═══ FL27 v2 · stap 2 — typografie ═══════════════════════════════
   Bron: docs/design_handoff_fl27_v2/README.md

   Archivo in drie gewichten, zeven maten, en cijfers die niet
   verspringen. De zeven maten staan hier als utilities klaar; de
   componenten verhuizen er in stap 3 één voor één naartoe.

   WAAROM UTILITIES EN GEEN ZOEK-EN-VERVANG
   De dertig oude maten staan niet alleen in dit bestand maar ook in
   335 KB per-pagina-CSS. Ze in één keer vervangen zou betekenen dat
   je dertig verschillende beslissingen tegelijk neemt zonder te
   kunnen zien welke waar landt. Met utilities kan elk component in
   stap 3 apart over, met `vergelijk.py` ertussen.
   ─────────────────────────────────────────────────────────────── */

/* Cijfers tabulair, op body-niveau, zoals het ontwerp voorschrijft.
   Rapportcijfers, aantallen stemmen, muntensaldo's en de radarlijst
   staan overal in kolommen; zonder dit springen ze bij elke wisseling
   van cijfer. */
body{ font-variant-numeric: tabular-nums }

/* Uitzondering: waar tekst en cijfers door elkaar lopen in een
   lopende zin is proportioneel prettiger. */
body main .body, body main .lead{ font-variant-numeric: normal }

/* ── de zeven maten ──────────────────────────────────────────────
   Meer dan deze zeven komt er niet bij. Staat een maat er niet
   tussen, dan is de vraag welke rol het element heeft — niet welke
   pixelwaarde erbij past. */
body .t-titel{ font-size:32px; font-weight:800; letter-spacing:-.6px;
               line-height:1.08; color:var(--v2-ink) }
body .t-kop{   font-size:20px; font-weight:600; letter-spacing:-.1px;
               line-height:1.2;  color:var(--v2-ink) }
body .t-label{ font-size:10px; font-weight:600; letter-spacing:1.3px;
               line-height:1.2;  text-transform:uppercase }
body .t-body{  font-size:17px; font-weight:400; line-height:1.62;
               color:var(--v2-ink2) }
body .t-bij{   font-size:14px; font-weight:400; line-height:1.5;
               color:var(--v2-ink3) }
body .t-meta{  font-size:12px; font-weight:600; line-height:1.4;
               color:var(--v2-ink3) }
body .t-cijfer{font-size:28px; font-weight:800; letter-spacing:-1.1px;
               line-height:1;    color:var(--v2-blauw-tekst) }

/* Leesregel maximaal 34em, ongeveer 66 tekens. Langer wordt moeilijk
   terugvinden waar de volgende regel begint. */
body .t-body{ max-width:34em }
body .t-lees{ max-width:var(--v2-leeskolom) }

/* Gewicht 800 hoort alleen bij paginatitel, kaartkop en cijfer. Deze
   hulpklasse maakt dat afdwingbaar zonder overal !important. */
body .t-normaal{ font-weight:400 }
body .t-nadruk{  font-weight:600 }

/* ═══ FL27 v2 · stap 3 — de zes componenten ═══════════════════════
   Bron: docs/design_handoff_fl27_v2/README.md

   Kaart, knop, chip en label, meetbalk, verdiend-blok en de
   advertentiemarkering. Deze zes komen op elke pagina terug; als ze
   kloppen, klopt het grootste deel van de site.

   Elke regel staat op `body main .x` of hoger. Dat is genoeg om de
   per-pagina-CSS (`.x`, specificiteit 0,1,0) te verslaan zonder
   `!important` — dat blijft de afspraak.

   Waar een oude waarde verdwijnt staat erbij waarom, want anders is
   over drie maanden niet meer te zien of iets een keuze was of een
   ongeluk.
   ─────────────────────────────────────────────────────────────── */

/* ── 1. KAART ────────────────────────────────────────────────────
   Geen schaduw meer. Een haarlijn van 1px doet het scheiden; vijf
   schaduwtreden waren er vier te veel. Ronding 16px, padding 18px,
   onderlinge afstand 16px — één maat, niet per component. */
body main .card,
body main article.card,
body main section.card{
  background:var(--v2-card);
  border:1px solid var(--v2-lijn);
  border-radius:var(--v2-rond-kaart);
  box-shadow:none;
}
body main .card.pad,
body main article.card.pad,
body main section.card.pad{ padding:var(--v2-kaart-padding) }
body main .hoofdkolom > .card,
body main .hoofdkolom > article.card,
body main .railpin > .card{ margin-bottom:var(--v2-kaart-afstand) }

/* Een foto binnen een kaart is inhoud, dus ronder dan data. */
body main .card .foto,
body main .card .flfoto{ border-radius:var(--v2-rond-foto) }

/* Data is recht: tabel, meetblok, schema, advertentie. Rechte hoeken
   markeren meting, ronde hoeken markeren inhoud — dat onderscheid is
   de regel, niet de smaak. */
body main .meetblok,
body main .catlijst,
body main .rdlijst,
body main .plattegrond,
body main .alerttabel,
body main .conceptlijst{ border-radius:var(--v2-rond-data) }

/* ── 2. KNOP ─────────────────────────────────────────────────────
   Rood is de knop. Minimaal 44px hoog, want daaronder mis je hem op
   een telefoon. Gewicht 600 in plaats van 800: een knop hoeft niet
   te schreeuwen om een knop te zijn. */
body main .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--v2-raakvlak);
  padding:0 20px;
  border:1.5px solid transparent;
  border-radius:var(--v2-rond-pil);
  font-size:17px; font-weight:600; line-height:1;
  background:var(--v2-rood); color:#fff;
  transition:background var(--v2-snel-1) var(--v2-curve),
             color      var(--v2-snel-1) var(--v2-curve);
}
body main .btn.s{ min-height:36px; padding:0 15px; font-size:14px }
body main .btn.lijn,
body main .btn.gh{
  background:transparent; border-color:var(--v2-rood); color:var(--v2-rood);
}
/* De stille variant: wel aanraakbaar, geen aandacht vragend. Voor
   "meer laden" en dat soort dingen. */
body main .btn.w,
body main .btn.dk{
  background:transparent; border-color:var(--v2-lijn-sterk); color:var(--v2-ink2);
}
/* Het merkverloop hoort achter een merkmoment, niet op een knop.
   `.g27` was het gradiëntknopje; die wordt gewoon rood. Het verloop
   zit als `background-image`, dus dat moet er apart af — anders ligt
   het over de effen kleur heen. */
body main .btn.g27{
  background-color:var(--v2-rood); background-image:none;
  color:#fff; border-color:transparent;
}

/* ── 3. CHIP EN LABEL ────────────────────────────────────────────
   Vorm scheidt rol. Een pil kun je aanraken; een streep is een
   mededeling. Daarom heeft de chip geen rand meer — actief is een
   gevuld vlak, inactief is niets. Dat scheelt ook een rij randjes
   die op mobiel als hekwerk oogde. */
body main .chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:34px; padding:0 15px;
  border:0; background:transparent;
  border-radius:var(--v2-rond-pil);
  font-size:14px; font-weight:600; color:var(--v2-ink3);
  transition:background var(--v2-snel-1) var(--v2-curve),
             color      var(--v2-snel-1) var(--v2-curve);
}
body main .chip.on,
body main .chip.aan{ background:var(--v2-ink); color:var(--v2-bg); border-color:transparent }
body main .chip:hover{ color:var(--v2-ink) }

/* Het sectielabel is een streep plus tekst, geen pil. 10px in plaats
   van 11, gewicht 600 in plaats van 800 — een label hoeft niet net zo
   zwaar te zijn als een kop. */
body main .h6{
  font-size:10px; font-weight:600; letter-spacing:1.3px; line-height:1.2;
  text-transform:uppercase; color:var(--v2-ink3);
}
/* Het label had al een streepje, als `::before` van 12px in blauw.
   Dat wordt de streep uit het ontwerp: 3px breed, links, in de kleur
   van de bron. Er komt er dus géén tweede bij — een label met twee
   markeringen leest als een fout. */
body main .h6::before{
  width:3px; height:1em; margin-right:9px; border-radius:0;
  background:var(--v2-ink2); vertical-align:-.15em;
}
body main .rail .h6::before,
body main .h6.meting::before{ background:var(--v2-blauw) }
body main .h6.community::before{ background:var(--v2-rood) }
body main .badge{
  min-height:28px; padding:0 12px;
  border:0; border-radius:var(--v2-rond-pil);
  font-size:10px; font-weight:600; letter-spacing:1.3px;
  background:var(--v2-paper); color:var(--v2-ink3);
}

/* ── 4. MEETBALK ─────────────────────────────────────────────────
   Blauw, recht, en altijd met de waarde ernaast. Blauw is nooit een
   knop en een knop is nooit blauw; dat is precies waarom dit werkt
   zonder uitleg. */
body main .catrij i,
body main .muntbalk,
body main .pdvrij i,
body main .rdbar{
  height:6px; border-radius:2px; background:var(--v2-lijn-sterk);
}
body main .catrij i::before,
body main .muntbalk i,
body main .pdvrij i::before{ border-radius:2px; background:var(--v2-blauw) }
body main .catrij b,
body main .pdcijfer b,
body main .bezcijfer{ color:var(--v2-blauw-tekst) }

/* ── 5. VERDIEND ─────────────────────────────────────────────────
   Het enige dat goud krijgt. Gouden rand om het blok, gevulde pil
   voor het saldo en de rang. Nooit rood, nooit blauw — anders
   verdwijnt het verschil tussen wat je verdiende en wat er gemeten
   is. */
body main .muntrang,
body main .card.verdiend,
body main #bucketKaart{ border-color:var(--v2-goud-rand) }
body main .muntrij b,
body main .bezaantal,
body main .pdcijfer b.goud{ color:var(--v2-goud) }
body main .muntbalk i{
  background:linear-gradient(180deg,var(--v2-goud-diep),var(--v2-goud));
}
body main .pil-goud{
  display:inline-flex; align-items:center; min-height:34px; padding:0 16px;
  border-radius:var(--v2-rond-pil);
  background:linear-gradient(180deg,var(--v2-goud-diep),var(--v2-goud));
  color:#fff; font-size:17px; font-weight:800;
}

/* ── 6. ADVERTENTIEMARKERING ─────────────────────────────────────
   Neutraal, en nooit goud. Goud blijft voorbehouden aan verdiend;
   een advertentie is niet iets wat de lezer heeft verdiend. Het
   label mag wel duidelijk zijn — dat is een eis, geen concessie. */
body main .adplek{
  border:1px solid var(--v2-lijn);
  border-radius:var(--v2-rond-kaart);
  background:var(--v2-card);
}
body main .adplek .adlabel{
  font-size:10px; font-weight:600; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--v2-ink3);
  background:var(--v2-paper);
}
body main .adplek .adformaat{ font-size:12px; font-weight:600; color:var(--v2-ink3) }

/* ═══ FL27 v2 · stap 4a — de feed ═════════════════════════════════
   Bron: docs/design_handoff_fl27_v2/README.md, hoofdstuk "1. Feed"

   Wat hier verandert is de kaart zelf: het bronlabel wordt een streep
   in plaats van een pil, de kop gaat naar 22px, de tekst naar 17px op
   maximaal 34em, en de voet krijgt een bovenlijn met "Lezen" rechts.
   ─────────────────────────────────────────────────────────────── */

/* ── de titelrij ─────────────────────────────────────────────────
   Paginatitel en de personalisatieregel naast elkaar, niet onder
   elkaar: de regel hoort bij de titel, niet bij de feed. */
body main .fh{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--v2-sp-2) var(--v2-sp-3);
  margin-bottom:var(--v2-sp-3);
}
body main .fh h1{
  font-size:32px; font-weight:800; letter-spacing:-.6px;
  line-height:1.08; color:var(--v2-ink); margin:0;
}
body main .fh .persknop{ width:auto; flex:1 1 auto }
body main .fh .persknop b{ font-weight:600; color:var(--v2-ink2) }

/* ── het bronlabel: een streep, geen pil ─────────────────────────
   Een pil suggereert dat je erop kunt drukken. Een bronlabel is een
   mededeling, dus het krijgt de vorm van een mededeling: drie pixels
   kleur, negen pixels ruimte, en de tekst zelf. De kleur zegt waar
   het vandaan komt — redactie grijs, community rood, meting blauw,
   extern grijs. */
body main .post .badge,
body main .post .artcat,
body main .post .artbron{
  min-height:0; padding:0 0 0 9px;
  background:none; border:0; border-radius:0;
  border-left:3px solid var(--v2-ink2);
  font-size:10px; font-weight:600; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--v2-ink3);
}
body main .post .badge.b-com,
body main .post .badge.b-lid{ border-left-color:var(--v2-rood); color:var(--v2-rood) }
body main .post .badge.b-meting,
body main .post .badge.b-rapport{ border-left-color:var(--v2-blauw); color:var(--v2-blauw-tekst) }
body main .post .badge.b-ai,
body main .post .badge.b-partner,
body main .post .badge.b-social{ border-left-color:var(--v2-ink3); color:var(--v2-ink3) }

/* De tijd staat rechts, in metadata-maat. */
body main .post .rowline .when{
  margin-left:auto; font-size:12px; font-weight:600; color:var(--v2-ink3);
}

/* ── kop en tekst ────────────────────────────────────────────────
   22px kop, 17px tekst, maximaal 34em breed. Langer wordt moeilijk
   terugvinden waar de volgende regel begint. */
body main .post h3,
body main .post h3 a{
  font-size:20px; font-weight:600; letter-spacing:-.1px;
  line-height:1.2; color:var(--v2-ink); text-decoration:none;
}
body main .post h3{ margin:var(--v2-sp-2) 0 var(--v2-sp-1) }
body main .post h3 a:hover{ color:var(--v2-rood) }
body main .post > p{
  font-size:17px; font-weight:400; line-height:1.62;
  color:var(--v2-ink2); max-width:34em; margin:0;
}

/* ── de voet ─────────────────────────────────────────────────────
   Een bovenlijn scheidt de acties van de tekst. Kudo's zijn blauw
   wanneer gegeven: het is een telling, geen actie. "Lezen" is rood,
   want dát is de actie. */
body main .post .foot{
  display:flex; align-items:center; gap:var(--v2-sp-4);
  margin-top:var(--v2-sp-3); padding-top:var(--v2-sp-3);
  border-top:1px solid var(--v2-lijn);
  font-size:12px; font-weight:600; color:var(--v2-ink3);
}
body main .post .foot .kudo{ color:var(--v2-ink3) }
body main .post .foot .kudo.aan,
body main .post .foot .kudopaar .kp-score.pos{ color:var(--v2-blauw-tekst) }
body main .post .foot .kudo.aan svg{ fill:var(--v2-blauw) }
body main .post .foot .lezen{
  margin-left:auto; font-size:14px; font-weight:600;
  color:var(--v2-rood); text-decoration:none;
}
body main .post .foot .lezen:hover{ text-decoration:underline }

/* ── meer laden ──────────────────────────────────────────────────
   Doorladen mag, maar na drie ladingen hoort deze knop te
   verschijnen, anders is de voettekst onbereikbaar. */
body main .meerknop{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:var(--v2-raakvlak);
  border:1px solid var(--v2-lijn-sterk); border-radius:var(--v2-rond-pil);
  background:var(--v2-card); color:var(--v2-ink2);
  font-size:14px; font-weight:600; cursor:pointer;
}
body main .meerknop:hover{ border-color:var(--v2-rood); color:var(--v2-rood) }

/* ── de schaal kalmer gezet ──────────────────────────────────────
   Het ontwerpdocument gaf 34/800 met -1,2px voor de titel en 22/800
   met -0,6px voor de kaartkop. Op een feed staan vier kaartkoppen
   onder elkaar, en vet plus samengeknepen leest dan als vier keer
   schreeuwen. Vandaar 32/800 met -0,6 en 20/600 met -0,1.

   Dit is een bewuste afwijking van het document, na vergelijking van
   vier varianten naast elkaar. De letter is daarbij van Archivo naar
   Archivo gegaan: ronder en opener, en hij verdraagt beter dat er
   veel korte koppen naast elkaar staan.                            */

/* ═══ FL27 v2 · stap 4b — feedfilters en kopbalk ══════════════════
   Bron: README §1

   De filters worden tekstknoppen: actief is een gevuld vlak, de rest
   is alleen tekst. De gekleurde stipjes vervallen — de bron staat al
   in het label van de kaart, en twee keer dezelfde informatie op
   twee manieren is één keer te veel.

   LET OP — openstaande scopevraag
   Het ontwerpdocument vraagt vijf bronfilters (Alles, Redactie,
   Community, Metingen, Extern). Boy zet handmatige filtering per bron
   expliciet buiten scope voor v1. De opmaak staat er nu; de rij zelf
   blijft achter `data-buiten-v1="bronfilter"`, zodat één attribuut op
   de <body> beslist wie er gelijk krijgt.
   ─────────────────────────────────────────────────────────────── */
body main .fh + .chips,
body main .feedfilters{ display:flex; flex-wrap:wrap; gap:var(--v2-sp-1);
  margin-bottom:var(--v2-sp-4) }
body main .fh + .chips .chip{ padding:7px 15px; min-height:0 }
/* de stip vóór een filter vervalt */
body main .fh + .chips .chip .dot,
body main .fh + .chips .chip::before{ display:none }

/* ── de kopbalk op 57px ──────────────────────────────────────── */
body .hdr{ min-height:57px; background:var(--v2-card);
  border-bottom:1px solid var(--v2-lijn); box-shadow:none }
/* De horizontale padding is weg, want een tab is geen pil meer —
   dus moet de ruimte ertussen uit een gap komen, anders plakken de
   woorden aan elkaar. */
body .hdr .dnav{ gap:18px }
body .hdr .dnav a{ font-size:17px; font-weight:600; color:var(--v2-ink3);
  border-radius:0; background:none; background-image:none;
  padding:18px 0 16px; border-bottom:2px solid transparent }
body .hdr .dnav a.on,
body .hdr .dnav a.on:hover{ font-weight:800; color:var(--v2-ink);
  background:none; background-image:none;
  border-bottom-color:var(--v2-rood) }

/* ═══ FL27 v2 · stap 4c — festivalpagina ══════════════════════════
   Bron: README §2                                                  */

/* De hero is een merkmoment: het zachte verloop mag hier, en alleen
   hier plus awards en wrapped. Niet op knoppen, niet op chips. */
body main .fhero{
  background-color:var(--v2-card);
  background-image:var(--v2-verloop-merk);
  border:1px solid var(--v2-lijn); border-radius:var(--v2-rond-kaart);
  padding:26px 24px; box-shadow:none;
}
body main .fhero h1{ font-size:34px; font-weight:800; letter-spacing:-.9px;
  line-height:1.1; color:var(--v2-ink) }
body main .fhero .sub,
body main .fhero .fmeta2 b{ font-size:12px; font-weight:600; color:var(--v2-ink3) }

/* ── de afwijkingsbalk: het centrale meetpatroon ────────────────
   Nullijn op de helft. Naar rechts is boven het gemiddelde van 7,9,
   naar links eronder. Breedte = 50 × min(|cijfer − 7,9|, 1,5) / 1,5
   procent, dus alles buiten ±1,5 kapt af op de volle helft.

   Waarom niet gewoon een balk van links: een cijfer van 7,4 is niet
   "74% goed", het is een half punt onder het gemiddelde. Een balk
   vanaf nul zegt dat eerste, en dat is niet waar. */
body main .catlijst,
body main .meetblok{
  border:1px solid var(--v2-lijn); border-radius:var(--v2-rond-data);
  padding:14px 15px; display:grid; gap:9px;
}
body main .catrij{
  grid-template-columns:150px minmax(0,1fr) 48px 44px; gap:12px; align-items:center;
}
body main .catrij span{ font-size:14px; font-weight:600; color:var(--v2-ink2) }
body main .catrij i{
  position:relative; height:16px; background:none; border-radius:0;
}
body main .catrij i::after{
  content:''; position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:var(--v2-lijn-sterk);
}
body main .catrij i::before{
  content:''; position:absolute; top:5px; height:6px; border-radius:2px;
  background:var(--v2-blauw); width:var(--afw,0%);
  left:var(--v-links,50%); right:var(--v-rechts,auto);
}
body main .catrij b{ font-size:14px; font-weight:800; color:var(--v2-blauw-tekst);
  text-align:right }

/* ── jouw zaterdag: een lijst, geen raster ─────────────────────
   Het raster is mooi maar je leest het op een terrein, in het donker,
   met één hand. Dan wil je weten wat er nú komt en of het botst —
   niet twaalf podia tegelijk. Het raster blijft als tweede weergave. */
body main .dagrij{
  display:grid; grid-template-columns:104px minmax(0,1fr) auto;
  gap:var(--v2-sp-3); align-items:baseline;
  padding:11px 0; border-top:1px solid var(--v2-lijn);
}
body main .dagrij .tijd{ font-size:14px; font-weight:800; color:var(--v2-ink) }
body main .dagrij .naam{ font-size:17px; font-weight:600; color:var(--v2-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
body main .dagrij .podium{ font-size:12px; font-weight:600; color:var(--v2-ink3) }
body main .dagrij .botst{
  padding-left:9px; border-left:3px solid var(--v2-rood);
  font-size:10px; font-weight:600; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--v2-rood);
}

/* ═══ FL27 v2 · stap 4d — artikelpagina ═══════════════════════════
   Bron: README §3                                                  */
body main .art,
body main .post.artikel{ padding:26px 24px }
body main .art h1{ font-size:34px; font-weight:800; letter-spacing:-.9px;
  line-height:1.12; color:var(--v2-ink); max-width:20em }
body main .artmeta{ font-size:12px; font-weight:600; color:var(--v2-ink3) }
body main .art .lead,
body main .body > p:first-child{ font-size:17px; font-weight:600; color:var(--v2-ink) }
body main .body p{ font-size:17px; font-weight:400; line-height:1.62;
  color:var(--v2-ink2); max-width:34em }
/* De foto krijgt een neutrale plaat: geen kleurvlak dat met de
   inhoud concurreert. */
body main .art .foto{ background:var(--v2-paper); border-radius:var(--v2-rond-foto) }
body main .art .fotobij{ font-size:14px; color:var(--v2-ink3) }
/* Een citaat is geen meting, maar het krijgt wel de blauwe streep:
   het is iets dat gezegd is, niet iets wat je kunt doen. */
body main .body blockquote,
body main .citaat{
  margin:var(--v2-sp-4) 0; padding-left:var(--v2-sp-3);
  border-left:3px solid var(--v2-blauw);
  font-size:22px; font-weight:600; line-height:1.35;
  color:var(--v2-ink); max-width:26em;
}

/* de kop van het festivalrapport: hoofdcijfer met het gemiddelde ernaast */
body main .rapkop{ display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--v2-sp-3); margin:var(--v2-sp-2) 0 var(--v2-sp-3) }
body main .rapkop span{ font-size:12px; font-weight:600; color:var(--v2-ink3) }
body main .catrij .abs{ font-size:12px; font-weight:600; color:var(--v2-ink3);
  text-align:right }

/* ── de actieve tab is geen rood blok ────────────────────────────
   In de kopbalk is "waar je bent" een rode onderstreping van 2px.
   In de onderbalk en de pillenrij stond het nog als gevuld rood
   vlak, en dat is een ander signaal: een gevulde pil ziet eruit als
   iets wat je kunt indrukken, terwijl dit juist de pagina is waar je
   al bent. Bovendien botst een rood blok met de rode knoppen
   eronder — rood is voor doen, niet voor plaats.

   Dus: dezelfde streep, alleen aan de kant waar hij past. Boven de
   tab in de onderbalk, onder de tab in de pillenrij.              */
body .mobnav .mtab.on,
body .menu .mtab.on,
body main .mtab.on{font-weight:800}
body .mobnav .mtab{ position:relative }
body .mobnav .mtab.on::after{content:'';position:absolute;left:22%;right:22%;top:0;height:2px;border-radius:0 0 2px 2px}
body .menu .mtab.on,
body main .menu .mtab.on{border-bottom:2px solid var(--v2-rood);border-radius:0}
body .mobnav .mtab{ color:var(--v2-ink3); font-weight:600 }

/* ── de actieve tab in de onderbalk ──────────────────────────────
   Was een gevulde pil met het merkverloop. Dat leest als een knop die
   je kunt indrukken, terwijl het juist de pagina is waar je al bent —
   en het botst met de rode knoppen erboven, want rood is voor doen.
   Nu dezelfde markering als in de kopbalk: een streep van 2px, alleen
   aan de bovenkant omdat de balk onderaan staat.                   */
body .mobnav a{ position:relative; color:var(--v2-ink3); font-weight:600 }
/* De tekst zelf blijft inkt, niet rood: rood is voor doen, en
   'waar je bent' is geen actie. Alleen de streep is rood. */
body .mobnav a.aan{ color:var(--v2-ink); font-weight:800; background:none }
body .mobnav a.aan svg{ color:var(--v2-ink) }
body .mobnav a.aan::after{
  content:''; position:absolute; left:24%; right:24%; top:0;
  height:2px; border-radius:0 0 2px 2px; background:var(--v2-rood);
}

/* ═══ brug: themaklassen naar prototype-vormgeving ══════════════════
 *
 *	De sjablonen spugen prototype-markup uit, maar niet overal: waar ze
 *	een helper uit lib/ gebruiken — fl27_advertentie(), fl27_tijd(),
 *	fl27_tegel(), de rail, het uitschuifpaneel — komen de klassenamen
 *	van het thema mee. Die kent deze stylesheet niet, en dan staat er
 *	kale HTML.
 *
 *	Dit blok vertaalt die klassen naar de vorm die het prototype ervoor
 *	gebruikt. Het is een brug, geen ontwerp: elke regel hier verdwijnt
 *	zodra de bijbehorende helper zelf prototype-klassen uitspuugt.
 *
 *	Waarom niet meteen die helpers aanpassen: het raakt acht functies in
 *	lib/, en daar zit de datalaag. Eerst zien of het klopt, dan pas de
 *	bron veranderen.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── tijd ──────────────────────────────────────────────────────────
   fl27_tijd() geeft een <time class="fl-time">. Het prototype zet die
   tekst in een .when: rechts uitgelijnd, klein, gedempt. */
body main .fl-time{ font-size:12px; color:var(--ink3); font-weight:600 }
body main .rowline .fl-time{ margin-left:auto }

/* ── dag- en dagdeelbalken ─────────────────────────────────────────
   Scheiden de feed in "vandaag", "gisteren", "ochtend". Ze zijn geen
   kaart maar een markering ertussen, dus geen vlak en geen rand — een
   regel met ruimte eromheen. */
body main .daybar{
  display:flex; align-items:baseline; gap:10px;
  margin:var(--sp5,22px) 0 var(--sp3,12px);
  font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ink);
}
body main .daybar:first-child{ margin-top:var(--sp2,8px) }
body main .daybar .cnt{
  font-size:11px; font-weight:700; color:var(--ink3); letter-spacing:0;
}
body main .blockbar{
  margin:var(--sp3,12px) 0 var(--sp2,8px);
  font-size:10.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink3);
}

/* ── bronetiketten ─────────────────────────────────────────────────
   De kaart gebruikt .badge met een suffix per bron. Het prototype kent
   b-ai en b-comm al; deze vier ontbraken. */
body main .badge.b-red{  color:var(--t-rood) }
body main .badge.b-comm{ color:var(--t-rood) }
body main .badge.b-soc{  color:var(--ink3) }
body main .badge.b-ext{  color:var(--ink3) }

/* ── beeld in een feedkaart ────────────────────────────────────────
   Het prototype zet de foto ónder de tekst, met dezelfde ronding als
   een foto binnen een kaart. */
body main .kbeeld{
  display:block; margin-top:var(--sp3,12px);
  border-radius:var(--r2,12px); overflow:hidden; line-height:0;
}
body main .kbeeld img{ width:100%; height:auto; display:block }
body main .insluiting{ margin-top:var(--sp3,12px); border-radius:var(--r2,12px); overflow:hidden }
body main .insluiting iframe{ width:100%; border:0; display:block }

/* ── advertentieplekken ────────────────────────────────────────────
   fl27_advertentie() geeft .ad met een maatklasse; het prototype heeft
   .adplek met .adlabel en .adformaat. Zelfde vorm, andere naam. */
body main .ad{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; border:1px dashed var(--line); border-radius:var(--r2,12px);
  background:var(--paper); color:var(--ink3);
  margin:var(--sp4,16px) 0; padding:14px;
}
body main .ad-rect{ min-height:250px }
body main .ad-feed{ min-height:250px }
body main .ad .lbl,
body main .ad-label{
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}

/* ── de rail ───────────────────────────────────────────────────────
   .sidebox is de kaart, .side-h de kop, .newsitem een nieuwsregel en
   .frij/.ffrow/.ftop de festival- en forumrijen. Ze krijgen de vorm
   van .card.pad en .nl uit het prototype. */
body main .sidebox{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r3,16px); padding:14px; margin-bottom:var(--sp3,12px);
}
body main .side-h{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:8px;
}
body main .side-h h3{
  font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3); margin:0;
}
body main .newsitem,
body main .frij,
body main .ffrow{
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-top:1px solid var(--paper);
  text-decoration:none; color:inherit;
}
body main .newsitem:first-of-type,
body main .frij:first-of-type,
body main .ffrow:first-of-type{ border-top:0 }
body main .newsitem .t,
body main .frij .t{
  flex-shrink:0; width:40px; color:var(--ink3);
  font-size:11px; font-weight:700; line-height:1.25;
}
body main .newsitem b,
body main .ftx b{ font-size:12.5px; font-weight:700; line-height:1.35; color:var(--ink) }
body main .ftx i,
body main .frij i{
  font-style:normal; display:block; font-size:11px;
  font-weight:600; color:var(--ink3); margin-top:1px;
}
body main .newsitem:hover b,
body main .frij:hover b{ color:var(--fl-rood) }
body main .ftop{ display:flex; align-items:center; gap:8px; margin-bottom:8px }

/* ── nu online ─────────────────────────────────────────────────────
   .ou is de lijst, .oa één lid. Vorm van een chip. */
body main .ou{ display:flex; flex-wrap:wrap; gap:6px }
body main .oa{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px 4px 4px; border-radius:999px;
  background:var(--paper); font-size:11.5px; font-weight:700;
  color:var(--ink2); text-decoration:none;
}
body main .oa:hover{ color:var(--fl-rood) }

/* ── de gekleurde stip vóór een filterchip ─────────────────────────
   Vervalt: de bron staat al in het etiket op de kaart, en dezelfde
   informatie twee keer op twee manieren is één keer te veel. */
body main .fdot2{ display:none }

/* ── bladeren ──────────────────────────────────────────────────────
   the_posts_pagination() geeft .nav-links met .page-numbers. */
body main .blader{ margin:var(--sp5,22px) 0 }
body main .blader .nav-links{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center }
body main .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; min-height:38px; padding:0 12px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink2);
  font-size:13px; font-weight:700; text-decoration:none;
}
body main .page-numbers.current{ background:var(--ink); color:var(--bg); border-color:transparent }
body main .page-numbers:hover{ border-color:var(--fl-rood); color:var(--fl-rood) }
body main .page-numbers.dots{ border-color:transparent; background:none }

/* ── voorbeelddata ─────────────────────────────────────────────────
   Waar een bron ontbreekt toont het thema een voorbeeld met een pil
   erbij. Dat onderscheid moet zichtbaar blijven — anders lijkt het
   echt. */
body main .is-voorbeeld{ opacity:.72 }
body main .fl-vb{
  display:inline-flex; align-items:center; padding:2px 8px;
  border:1px solid var(--line); border-radius:999px;
  font-size:9.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink3);
}

/* ── kleine hulpklassen ────────────────────────────────────────────
   .fl-sr verbergt tekst voor het oog maar niet voor een schermlezer.
   .fl-skip is de sprong naar de inhoud, zichtbaar zodra hij focus krijgt. */
.fl-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.fl-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--card); color:var(--ink); padding:10px 16px;
  border-radius:0 0 12px 0; font-weight:700;
}
.fl-skip:focus{ left:0 }

/* ── brug, deel 2: de chrome ────────────────────────────────────────
   De kopbalkknoppen, het uitschuifpaneel, de balk onderaan en de
   voettekst komen uit het thema en dragen dus themaklassen. Het
   prototype heeft voor elk een tegenhanger; hieronder krijgen ze die
   vorm.                                                             */

/* knoppen in de kopbalk: rond, alleen een icoon */
body .iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 38px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink2); cursor:pointer;
}
body .iconbtn:hover{ border-color:var(--fl-rood); color:var(--fl-rood) }
@media(min-width:1000px){ body .btn-menu, body .btn-zoek{ display:none } }

/* ── uitschuifpaneel ───────────────────────────────────────────── */
body .scrim{
  position:fixed; inset:0; z-index:130; background:rgba(19,18,24,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
body .scrim[hidden]{ display:none }
body .drawer{
  position:fixed; inset:0 0 0 auto; z-index:140;
  width:min(340px,88vw); background:var(--card);
  box-shadow:var(--sh-4,0 18px 44px rgba(23,26,35,.2));
  overflow-y:auto; display:flex; flex-direction:column; gap:14px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px
          calc(20px + env(safe-area-inset-bottom,0px));
}
body .drawer[hidden]{ display:none }
body .dhead{ display:flex; align-items:center; gap:10px }
body .dhead .brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit }
body .dhead .name{ font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--ink) }
body .dhead .iconbtn{ margin-left:auto }

body .dtabs{ display:grid; gap:2px }
body .dtab{
  display:block; padding:11px 12px; border-radius:12px;
  text-decoration:none; color:var(--ink); font-size:15px; font-weight:800;
}
body .dtab:hover{ background:var(--paper) }
body .dtab.on{ background:var(--fl-rood); color:#fff }

body .dsecties{ display:grid; gap:2px; border-top:1px solid var(--line); padding-top:12px }
body .dsectie summary{
  display:flex; justify-content:space-between; align-items:center;
  list-style:none; cursor:pointer; padding:11px 12px; border-radius:12px;
  font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3);
}
body .dsectie summary::-webkit-details-marker{ display:none }
body .dsectie summary::after{ content:"\25BE"; font-size:11px; transition:transform .12s }
body .dsectie[open] summary::after{ transform:rotate(180deg) }
body .dsectie summary:hover{ background:var(--paper) }
body .dlinks{ display:grid; gap:1px; padding:0 0 8px }
body .dlinks a{
  display:flex; align-items:center; min-height:44px;
  padding:9px 12px 9px 22px; border-radius:12px; text-decoration:none;
  color:var(--ink2); font-size:13.5px; font-weight:700;
}
body .dlinks a:hover{ background:var(--paper); color:var(--fl-rood) }

/* ── weergaveschakelaar ────────────────────────────────────────── */
body .weergave{ margin-top:auto; border-top:1px solid var(--line); padding-top:12px }
body .weergave--footer{ margin-top:14px; border-top:0; padding-top:0;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap }
body .weergave-kop{
  display:block; font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:8px;
}
body .weergave--footer .weergave-kop{ margin-bottom:0 }
body .weergave-groep{ display:flex; gap:4px; flex-wrap:wrap }
body .weergave-knop{
  min-height:34px; padding:0 14px; border:0; background:transparent;
  border-radius:999px; font:inherit; font-size:13px; font-weight:700;
  color:var(--ink3); cursor:pointer;
}
body .weergave-knop:hover{ color:var(--ink) }
body .weergave-knop.on{ background:var(--ink); color:var(--bg) }

/* ── balk onderaan op mobiel ───────────────────────────────────── */
body .botnav{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media(min-width:1000px){ body .botnav{ display:none } }
body .botnav-inner{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  align-items:center; max-width:560px; margin:0 auto;
}
body .bn{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:9px 0 7px; text-decoration:none;
  color:var(--ink3); font-size:10.5px; font-weight:700;
}
body .bn.on{ color:var(--ink); font-weight:800 }
body .bn.on::after{
  content:''; position:absolute; left:24%; right:24%; top:0;
  height:2px; border-radius:0 0 2px 2px; background:var(--fl-rood);
}
body .bn-plus{ color:var(--fl-rood) }

/* ── forumrijen in de rail ─────────────────────────────────────── */
body main .topic{ display:flex; gap:9px; padding:8px 0; border-top:1px solid var(--paper);
  text-decoration:none; color:inherit }
body main .topic:first-of-type{ border-top:0 }
body main .topic .tm2,
body main .topic .msg{ font-size:11px; font-weight:600; color:var(--ink3) }
body main .topic .nt{ font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.35 }
body main .topic:hover .nt{ color:var(--fl-rood) }
body main .ta{ display:flex; align-items:center; gap:8px }
body main .online{ display:flex; flex-wrap:wrap; gap:6px }
body main .online-more{ font-size:11px; font-weight:700; color:var(--ink3) }

/* ── voettekst ─────────────────────────────────────────────────── */
body .fgrid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
body .footbrand-kolom{ display:grid; gap:10px }
body .footbrand{ display:flex; align-items:center; gap:9px }
body .logo--voet{ height:26px; width:auto }
body .footsoc{ display:flex; flex-wrap:wrap; gap:8px }
body .gidsen{ display:flex; flex-wrap:wrap; gap:6px }

/* ── sorteermenu en festivalkiezer ─────────────────────────────── */
body main .sorteer{ position:relative; margin-left:auto }
body main .sorteer summary{ list-style:none; cursor:pointer }
body main .sorteer summary::-webkit-details-marker{ display:none }
body main .sorteermenu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40;
  min-width:190px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--sh-3,0 8px 24px rgba(23,26,35,.14));
  padding:5px; display:grid; gap:1px;
}
body main .sorteermenu a{
  display:block; padding:9px 11px; border-radius:10px;
  text-decoration:none; color:var(--ink2); font-size:13px; font-weight:700;
}
body main .sorteermenu a:hover{ background:var(--paper); color:var(--ink) }
body main .sorteermenu a[aria-current]{ background:var(--ink); color:var(--bg) }

body main .festpick{ position:relative }
body main .festchip{ cursor:pointer }
body main .pickmenu{
  position:absolute; left:0; top:calc(100% + 6px); z-index:40;
  width:min(260px,80vw); background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--sh-3,0 8px 24px rgba(23,26,35,.14));
  padding:8px; display:grid; gap:6px;
}
body main .pickzoek{
  width:100%; box-sizing:border-box; border:1px solid var(--line);
  border-radius:10px; padding:8px 10px; font:inherit; font-size:13px;
  background:var(--paper); color:var(--ink);
}
body main .picklijst{ display:grid; gap:1px; max-height:220px; overflow-y:auto }
body main .picklijst a{
  display:block; padding:8px 10px; border-radius:10px;
  text-decoration:none; color:var(--ink2); font-size:13px; font-weight:700;
}
body main .picklijst a:hover{ background:var(--paper); color:var(--ink) }
body main .picklbl{ font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3); padding:2px 10px }
body main .pickleeg{ padding:8px 10px; font-size:12.5px; color:var(--ink3) }

/* ── eyebrow ───────────────────────────────────────────────────── */
body main .eyebrow{
  display:flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3); margin:0 0 8px;
}

/* De schakelaar in het uitschuifpaneel deelt de vorm van .weergave;
   deze variant zet hem onderaan met een scheidingslijn erboven. */
body .weergave--drawer{ margin-top:auto; border-top:1px solid var(--line); padding-top:12px }