/*
 *	vergelijker — de eigen opmaak van deze pagina, uit final1/vergelijker.html.
 *
 *	Laadt vóór fl27-final1-gedeeld.css. Letterlijk overgenomen; alleen
 *	het lettertypepad is aangepast.
 *
 *	NIET MET DE HAND WIJZIGEN — haal dit opnieuw uit de build.
 */

/* ═══ 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:'Manrope',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}
.mtab.on{background:var(--grad27);border-color:transparent;color:var(--grijs-0)}
.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{border:none;border-radius:999px;padding:10px 18px;font-weight:800;font-size:14px;color:var(--bg);background:var(--ink);transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.g{background:var(--ink)}
.btn.g27{background:var(--grad27)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.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{position:relative;overflow:hidden;border-radius:var(--rl);padding:17px 18px;color:var(--grijs-0);background:linear-gradient(120deg,var(--afg-goud1),var(--goud-500) 55%,var(--goud-600));box-shadow:var(--shl)}
.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{font-size:18px;font-weight:800}
.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;font-size:13px;padding:10px 8px}
.fhero .btn.w{background:var(--card);color:var(--pink-d)}
.fhero .btn.dk{background:rgba(20,16,24,.35)}
.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{padding:7px 14px;font-size:12.5px;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 a.on{background:var(--ink);color:var(--bg);pointer-events:none}
.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>.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)}

}
/* ===== 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)}
.btn{color:var(--bg)}
.btn.gh{color:var(--ink2)}
.btn.lijn{color:var(--rood-200);border-color:var(--rood-500)}
.editbtn{color:var(--ink2)}
img{filter:brightness(.94)}

}
body, .card, .sitefoot, .tick, .zoekbalk{transition:background-color .25s ease,color .25s ease}


/* 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{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.btn.s{font-size:12.5px;padding:9px 16px;min-height:36px}
.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}

}
.btn.lijn{background:var(--card);border:1.5px solid var(--e-red);color:var(--e-red)}
.btn.lijn:hover{background:var(--p-rood)}
/* 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;font-size:12.5px;padding:9px 17px}
@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}
/* nieuws & agenda */
.nhero{display:flex;flex-direction:column;gap:11px}
.nhero .pcard{min-height:0}
.nhero .nh1{min-height:235px}
.nhero .nh2{min-height:120px;padding:13px 14px}
@media(min-width:760px){

.nhero{display:grid;grid-template-columns:1.55fr 1fr;grid-auto-rows:1fr;gap:13px}
.nhero .nh1{grid-row:1/3;min-height:330px}
.nhero .nh2{min-height:0}

}
.nth{position:relative;overflow:hidden;width:68px;height:52px;border-radius:11px;flex-shrink:0}
.pagekop h1{font-size:24px;letter-spacing:-.5px}
.pagekop p{font-size:13.5px;color:var(--ink2);margin-top:4px}
.dgroep{font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink3);margin-top:6px;display:flex;align-items:center;gap:9px}
.dgroep::before{content:"";width:22px;height:5px;border-radius:3px;background:var(--grad)}
.nrow{display:flex;gap:12px;padding:12px 15px;align-items:flex-start}
.nrow .tijd{font-size:11px;font-weight:800;color:var(--ink3);min-width:40px;padding-top:2px}
.nrow .tx{flex:1;min-width:0}
.nrow h3{font-size:15px;line-height:1.35;letter-spacing:-.2px}
.nrow .nm2{font-size:11.5px;color:var(--ink3);font-weight:600;margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.arow{display:flex;gap:13px;padding:13px 15px;align-items:center}
.dblok{width:52px;flex-shrink:0;text-align:center;background:var(--paper);border-radius:13px;padding:8px 4px}
.dblok b{display:block;font-size:15px;letter-spacing:-.3px}
.dblok span{font-size:9.5px;font-weight:800;text-transform:uppercase;color:var(--ink3)}
.arow .tx{flex:1;min-width:0}
.arow h3{font-size:15.5px;letter-spacing:-.2px}
.arow .pl{font-size:12px;color:var(--ink3);font-weight:600;margin-top:2px}
.arow .acts2{display:flex;gap:7px;align-items:center;flex-shrink:0}
.tkstatus{font-size:10.5px;font-weight:800;border-radius:999px;padding:4px 11px}
.tk-uit{background:var(--p-rood);color:var(--t-rood)}
.tk-bijna{background:var(--gold-bg);color:var(--t-goud)}
.tk-ok{background:var(--p-groen);color:var(--t-groen)}
@media(max-width:560px){

.arow .acts2 .alertbtn span{display:none}

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

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

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

.chip.on, .mtab.on, .ptab.on, .dnav a.on{color:var(--bg)}
.btn{color:var(--bg)}
.btn.gh{background:var(--paper);color:var(--ink)}
.btn.dk{background:var(--paper);color:var(--ink)}
.btn.w{background:var(--paper);color:var(--rood-700)}
.btn.lijn{background:var(--card);color:var(--rood-200);border-color:var(--rood-500)}
.btn.g27{color:var(--grijs-0)}
.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){

.menu .mtab.on, .mtab.on{background:var(--ink);color:var(--bg)}
.btn:not(.gh):not(.lijn):not(.w):not(.g27):not(.dk):not(.ghost){background:var(--ink)}
.fhero .btn.w, .page .btn.w, .btn.w{background:var(--paper);color:var(--rood-700)}
.card .rank, .pm .rank, span.rank{color:var(--t-goud)}

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

.btn.ghost{background:var(--paper);color:var(--ink)}
.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}

}


/* ── de schil ─────────────────────────────────────────────────────
   Kopbalk, menu, notificatiepaneel, plus-paneel en de zwevende
   plus-knop, de bijdragen-modal, het muntenpaneel, het logo, de
   ticker, de rail en de chips.

   Stond woordelijk in zes bestanden (laat-01 t/m laat-06), samen goed
   voor 18 pagina's. Van de circa 140 regels per bestand waren dit er
   111 — identiek, en in alle zes in dezelfde volgorde.

   Uitgesplitst na een controle die telt of een (context, selector,
   eigenschap) in beide helften voorkomt. Dat was nul keer het geval,
   dus geen enkele verplaatste regel kan met een overgeslagen regel om
   dezelfde eigenschap concurreren. `vergelijk.py` bevestigde het:
   0px over 156 beelden.                                            */
.opt.gekozen{border-color:var(--e-red)}
.hdr{padding-top:env(safe-area-inset-top,0px)}
.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}
.mtab{display:inline-flex;align-items:center}
.mtab.on, .menu .mtab.on{background:var(--rood-500)!important;color:var(--grijs-0)!important;border-color:var(--rood-500)}
.dnav a.on{background:var(--rood-500);color:var(--grijs-0)}
.fw{margin-top:18px;margin-bottom:18px}
@media(min-width:1000px){

.fw{margin-top:28px;margin-bottom:28px}

}
.fx .btn:not(.g27):not(.lijn):not(.gh), .rail>.card .btn:not(.g27):not(.lijn):not(.gh){background:var(--card)!important;color:var(--ink)!important;border:1.5px solid var(--line)}
.fx .btn:hover, .rail>.card .btn:hover{border-color:var(--rood-500)}
@media (prefers-color-scheme: dark){

.mtab.on, .menu .mtab.on, .dnav a.on{background:var(--rood-400)!important;color:var(--grijs-0)!important}
.bs{background:var(--card);color:var(--ink)}

}
.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){

.btn:not(.gh):not(.lijn):not(.w):not(.g27):not(.dk):not(.ghost){background:var(--ink)!important;color:var(--bg)!important}
.fx .btn:not(.g27):not(.lijn), .rail>.card .btn:not(.g27):not(.lijn){background:var(--card)!important;color:var(--ink)!important;border:1.5px solid var(--line)!important}
.btn.gh, .btn.ghost{background:var(--paper)!important;color:var(--ink)!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}
.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)}
.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}
.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}
html, body{background:var(--card)}
main{background:var(--bg);min-height:100vh}
@media (prefers-color-scheme: dark){

html, body{background:var(--bg)}

}
*{-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}
.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}
.bs.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.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)}
.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}

}
#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}
.tick{cursor:pointer}
#tickRot{transition:opacity .35s ease}
@media (prefers-color-scheme: dark){

.hdr{background:var(--glas)!important}

}
.pin{cursor:pointer}
.pin:active{transform:scale(.96)}
.tick{position:relative;min-height:46px;padding-right:142px;display:flex;align-items:center}
.tickbtn{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
[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)}
.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}

}
@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)}
.inner>.sitefoot{grid-column:1/-1}
@media(min-width:1000px){

body main .inner:not(:has(.rail)){grid-template-columns:1fr}

}
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}

}
body main .inner>.inner{grid-column:1/-1;max-width:none;width:100%}
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}


/* ── eigen opmaak van gidsen, inloggen, nieuws ────────────────────────
   Wat er ná de schil overblijft: 21 regels die alleen deze
   pagina's nodig hebben. De gedeelde 111 staan in schil.css.  */
.pcard{flex-direction:column;align-items:flex-start}
.pcard h3{width:100%}
.pcard .pm{width:100%;margin-top:4px}
.nhero .pcard{justify-content:flex-end;min-height:170px}
.nhero .pcard.big{min-height:330px}
.pcard .veil{background:linear-gradient(transparent 30%,rgba(18,14,22,.55) 70%,rgba(18,14,22,.82))}
.pcard h3{text-shadow:0 1px 10px rgba(10,8,14,.45)}
.pcard .pm{opacity:.92}
@media (max-width:999px){

.nh1{aspect-ratio:4/3;min-height:0;max-height:390px}
.nhero .pcard:not(.nh1){aspect-ratio:16/8.5;min-height:0}

}
.nh1 h3{font-size:19px;line-height:1.24;letter-spacing:-.3px;margin:6px 0 3px}
.nhero .pcard:not(.nh1) h3{font-size:15px;line-height:1.28;margin:5px 0 2px}
.nhero .pcard{padding:14px 15px}
.nhero .badge{font-size:9px;padding:3.5px 9px}
.nhero .pcard .veil{background:linear-gradient(180deg,rgba(20,14,22,0) 42%,rgba(20,14,22,.30) 68%,rgba(20,14,22,.78))}
.nhero .pcard small, .nhero .pcard .meta{font-size:11px;opacity:.85}
.fltool{flex:0 0 auto;min-width:168px;max-width:196px;border:1.5px solid var(--line);border-radius:15px;padding:12px;background:var(--card);text-decoration:none;color:inherit;display:block}
.fltool .ftic{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:8px}
.fltool b{font-size:13px;display:block}
.fltool i{font-style:normal;font-size:10.5px;color:var(--ink3);font-weight:700;display:block;margin-top:2px;white-space:normal}
.fltool:hover{border-color:var(--ink3)}
.zoekwrap input{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:11px 14px;font:inherit;font-size:13.5px;background:var(--card);color:inherit}