:root{--bg:#0B1220;--panel:#111A2E;--panel2:#16223B;--line:#22304D;--tx:#E8ECF5;--mut:#9AA8C2;--gold:#E7B64A;--red:#E5484D;--r:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--tx);font:16px/1.6 var(--font),system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;
background:linear-gradient(rgba(var(--bg-rgb),var(--dim)),rgba(var(--bg-rgb),var(--dim2))),var(--bgimg) center/cover fixed var(--bg)}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}ul{margin:0;padding:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@keyframes marq{to{transform:translateX(-50%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes eq{0%,100%{height:18%}50%{height:100%}}@keyframes pulse{50%{opacity:.3;transform:scale(1.5)}}
.flagline{height:4px;background:linear-gradient(90deg,#AE1C28 0 33.3%,#fff 33.3% 66.6%,#21468B 66.6%)}
/* header */
.nb{position:sticky;top:0;z-index:50;background:rgba(var(--bg-rgb),.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nbin{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}.brand b{color:var(--gold);font-weight:800}
.nav{display:flex;gap:4px;margin:0 auto}
.nav a{padding:8px 11px;border-radius:8px;color:var(--mut);font-weight:500;font-size:14.5px;position:relative;white-space:nowrap;transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--tx)}
.nav a[aria-current]::after{content:"";position:absolute;left:11px;right:11px;bottom:-13px;height:2px;background:var(--gold)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--tx);font-size:20px;border-radius:8px;padding:4px 10px;cursor:pointer}
.ticker{background:var(--panel);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;font-size:12px;letter-spacing:.22em;color:var(--gold);padding:7px 0}
.ticker-in{display:inline-block;animation:marq 60s linear infinite}
/* knoppen */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;cursor:pointer;font:600 15px var(--font),system-ui,sans-serif;padding:11px 22px;border-radius:var(--btn-r);background:var(--gold);color:var(--on-gold);transition:background .2s,transform .2s;white-space:nowrap}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--tx);border-color:var(--line)}.btn-ghost:hover{background:var(--panel2)}
.btn-play::before{content:"\25B6";font-size:11px}.btn-play.is-on::before{content:"\275A\275A";font-size:10px;letter-spacing:-2px}
.btn-live{background:var(--red);color:#fff}.btn-live:hover{background:#f0595e}
/* hero + deck */
.hero{position:relative;height:clamp(240px,42vw,var(--hero-max));overflow:hidden;border-bottom:1px solid var(--line);background:#1a0f08}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% var(--hero-pos)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(11,18,32,.92))}
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:-46px;position:relative;z-index:3}
.chip{background:rgba(var(--bg-rgb),.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--gold);padding:7px 16px;border-radius:999px;font-weight:600;font-size:14px}
.deck{display:flex;align-items:center;gap:24px;padding:18px 24px 18px 18px;margin-top:20px;background:rgba(var(--panel-rgb),.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.4);position:relative;z-index:3}
.rec{width:108px;height:108px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);animation:spin 10s linear infinite;animation-play-state:paused;flex:none}
.is-playing .rec{animation-play-state:running}.rec.art-real{border-radius:12px;animation:none}
.deck-txt{flex:1;min-width:0}.badge{display:inline-block;font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--gold);margin-bottom:2px}
.deck-title{margin:0;font-size:28px;line-height:1.2;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-artist{font-size:18px;color:var(--tx)}.deck-meta{color:var(--mut);font-size:14px;margin-top:4px}.deck-meta span+span{margin-left:6px}
.eq{display:flex;gap:4px;align-items:flex-end;height:36px}.eq i{display:block;width:5px;border-radius:2px;background:var(--gold);height:18%;animation:eq 1s ease-in-out infinite;animation-play-state:paused}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.45s}.eq i:nth-child(4){animation-delay:.1s}.eq i:nth-child(5){animation-delay:.6s}
.is-playing .eq i{animation-play-state:running}
.intro{max-width:760px;margin:36px auto 0;text-align:center;font-size:19px;color:var(--mut)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
/* secties */
.sec{margin-top:64px}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:14px}
.eyebrow{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:4px}
.sec-h h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.01em}.more{color:var(--mut);font-size:14px;transition:color .2s}.more:hover{color:var(--gold)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}.pad{padding:24px}
.bn-i{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.bn-i img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s}.bn-i:hover img{transform:scale(1.04)}
.rows{list-style:none}.rows li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.rows li:last-child{border:0}
.rows img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--panel2);flex:none}
.rows .t{font-weight:600}.s,.rows .s{color:var(--mut);font-size:14px}.rows .when{min-width:128px;color:var(--gold);font-weight:600;font-size:14px}
.now-tag{background:var(--red);color:#fff;font-size:11px;padding:2px 8px;border-radius:99px;margin-left:8px;letter-spacing:.08em}
.next{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--mut);font-size:14px}.next b{color:var(--tx);font-weight:600}
.djc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.djc img,.ph-empty{width:100%;aspect-ratio:4/5;object-fit:cover}.ph-empty{background:var(--panel2)}
.djc .in{padding:14px 16px}.djc h3{margin:0;font-size:18px}.djc p{margin:2px 0 0;color:var(--mut);font-size:14px}
.ncard{display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s,transform .2s}.ncard:hover{border-color:#3a4f78;transform:translateY(-3px)}
.nimg img{width:100%;aspect-ratio:16/9;object-fit:cover}.nbody{padding:18px}.nbody time{color:var(--gold);font-size:13px;font-weight:600}
.nbody h3{margin:6px 0 8px;font-size:19px;line-height:1.3}.nbody p{margin:0;color:var(--mut);font-size:15px}
.artist{display:grid;grid-template-columns:320px 1fr;overflow:hidden}.artist img{width:100%;height:100%;object-fit:cover}.artist .in{padding:32px}.artist h3{margin:0 0 8px;font-size:28px}.artist p{color:var(--mut);margin:0}
.vote{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:28px 32px;border-left:4px solid var(--gold)}
.vote h2{margin:0 0 4px;font-size:26px}.vote p{margin:0;color:var(--mut)}.btns{display:flex;gap:10px;flex-wrap:wrap}
.pagehead{padding:56px 0 8px}.pagehead h1{margin:0 0 6px;font-size:42px;letter-spacing:-.01em}.pagehead p{color:var(--mut);margin:0}
.article{max-width:760px}.article img{border-radius:var(--r);margin:22px 0}.article p{font-size:17px;line-height:1.75;color:#cfd7e8}
.field{width:100%;padding:13px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font:16px var(--font),system-ui,sans-serif}.field:focus{outline:2px solid var(--gold);outline-offset:1px}
.req-msg{min-height:22px;margin:12px 0 4px;font-size:14px;color:var(--gold)}.req-msg.err{color:#ff8a8f}
.req-item{justify-content:space-between}.req-item .btn{padding:8px 16px;font-size:14px}
/* footer + dock */
.ft{margin-top:72px;background:rgba(var(--bg-rgb),.92);border-top:1px solid var(--line);padding:48px 0 110px;color:var(--mut);font-size:15px}
.ftg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}.ft h4{color:var(--tx);margin:0 0 12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.ft a{display:block;padding:3px 0;transition:color .2s}.ft a:hover{color:var(--gold)}.ft p{margin:0}.fine{border-top:1px solid var(--line);margin-top:32px;padding-top:18px;font-size:13px}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(var(--bg-rgb),.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.dockin{display:flex;align-items:center;gap:16px;height:68px}.dock img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none}
.dock .tx{flex:1;min-width:0}.dock .tx b,.dock .tx span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock .tx span{color:var(--mut);font-size:13px}
/* responsive */
@media(max-width:960px){.g3{grid-template-columns:1fr 1fr}.g4{grid-template-columns:1fr 1fr}.cols{grid-template-columns:1fr}.ftg{grid-template-columns:1fr 1fr}.artist{grid-template-columns:1fr}}
@media(max-width:760px){.menu-btn{display:block;margin-left:auto}.btn-live{display:none}.nbin{gap:12px}
.nav{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;background:rgba(var(--bg-rgb),.97);padding:10px 24px 16px;border-bottom:1px solid var(--line);margin:0}.nav.open{display:flex}.nav a[aria-current]::after{display:none}
.g3,.g4{grid-template-columns:1fr}.deck{flex-wrap:wrap}.rec{width:84px;height:84px}.deck-title{font-size:22px;white-space:normal}.eq{display:none}.pagehead h1{font-size:32px}.sec-h h2{font-size:24px}.ftg{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* uitbreidingen: tekst, formulieren, galerij, hitlijst, gastenboek */
.prose{font-size:17px;line-height:1.8;color:#cfd7e8}.prose h2{font-size:26px;margin:1.6em 0 .4em;color:var(--tx)}.prose h3{font-size:20px;margin:1.4em 0 .3em;color:var(--tx)}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}.prose img{border-radius:var(--r);margin:18px 0}.prose blockquote{margin:1.2em 0;padding:4px 18px;border-left:3px solid var(--gold);color:var(--mut)}
.prose ul,.prose ol{padding-left:1.4em}.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.form label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px;color:var(--mut)}.form label:first-child{margin-top:0}.form .btn{margin-top:18px}textarea.field{resize:vertical;min-height:120px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;border:1px solid;font-size:15px}.alert.ok{background:rgba(61,195,123,.12);border-color:rgba(61,195,123,.4);color:#9be7bd}.alert.err{background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.4);color:#ffb4b8}
.gb{margin-bottom:14px}.gb-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.gb-h time{color:var(--mut);font-size:13px}.gb p{margin:8px 0 0;color:#cfd7e8}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}.pager a{padding:6px 12px;border-radius:8px;border:1px solid var(--line);color:var(--mut)}.pager a.on,.pager a:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.chartgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}.chartgrid.one{grid-template-columns:1fr}.crow{display:flex;gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.cpos{min-width:44px;font-size:26px;font-weight:800;color:var(--gold);text-align:center}.crow .t{font-weight:600}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.gal a{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line)}.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}.gal a:hover img{transform:scale(1.06)}
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,8,15,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px}.lb img{max-width:94vw;max-height:80vh;border-radius:8px}
.lb p{color:var(--mut);margin:12px 0 0;min-height:24px}.lb button{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:28px;width:48px;height:48px;border-radius:50%;cursor:pointer}.lb .x{top:18px;right:18px}.lb .pv{left:18px}.lb .nx{right:18px}
@media(max-width:760px){.chartgrid{grid-template-columns:1fr}}

.share{color:var(--mut);margin-top:28px;font-size:15px}.share a{color:var(--gold)}
.chat{overflow:hidden}.chat-log{height:min(60vh,520px);overflow-y:auto;padding:12px 18px}
.cm{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}.cm b{color:var(--gold);flex:none;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm span{flex:1;word-break:break-word}.cm time{color:var(--mut);font-size:12px}
.chat-form{display:grid;grid-template-columns:180px 1fr auto;gap:10px;padding:14px 18px;border-top:1px solid var(--line);background:var(--panel2)}
body.embed{background:#0B1220}.embed .deck{margin:0;border-radius:0;border:0;box-shadow:none;min-height:100vh;padding:14px 18px}
@media(max-width:760px){.chat-form{grid-template-columns:1fr}}

.brand-logo{height:34px;width:auto;max-width:180px;object-fit:contain}.soc{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}.soc a{display:inline;padding:0;color:var(--tx)}
.split{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.split.rev img{order:2}.split img{width:100%;height:100%;object-fit:cover;min-height:240px}.split .in{padding:32px;align-self:center}.split h3{margin:0 0 10px;font-size:26px}
.bblock{border-radius:var(--r);overflow:hidden;min-height:260px;display:flex;align-items:flex-end;background-size:cover;background-position:center;border:1px solid var(--line)}.bblock .in{padding:32px;max-width:640px}.bblock h3{margin:0 0 8px;font-size:30px;color:#fff}.bblock p{margin:0 0 16px;color:#e8ecf5}
@media(max-width:760px){.split{grid-template-columns:1fr}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--on-gold);padding:8px 14px;border-radius:8px;z-index:300;font-weight:600}.skip:focus{left:8px}
.crumbs{padding-top:18px;font-size:14px;color:var(--mut)}.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}.crumbs a:hover{color:var(--gold)}.crumbs+.wrap .pagehead,.crumbs~.wrap .pagehead{padding-top:20px}

/* ===== DJ live in het menu ===== */
.djlive{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border:1px solid var(--line);border-radius:999px;background:rgba(var(--panel-rgb),.75);white-space:nowrap;flex:none;transition:border-color .2s}.djlive:hover{border-color:var(--gold)}
.djlive[hidden]{display:none}
.djlive .av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--gold);flex:none;box-shadow:0 0 0 2px var(--red)}
.djlive .av img{width:100%;height:100%;object-fit:cover}.djlive .av i{font-style:normal}
.djlive .tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}.djlive small{font-size:10px;letter-spacing:.14em;color:var(--red);font-weight:700}.djlive b{font-size:14px;max-width:140px;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.nb-extra{display:none}

/* ===== menu in een zijbalk (links of rechts) op brede schermen ===== */
@media(min-width:961px){
 body.nav-left,body.nav-right{padding-top:4px}
 body.nav-left{padding-left:var(--sw)}body.nav-right{padding-right:var(--sw)}
 .nav-left .flagline,.nav-right .flagline{position:fixed;top:0;left:0;right:0;z-index:90}
 .nav-left .nb,.nav-right .nb{position:fixed;top:4px;bottom:0;width:var(--sw);overflow-y:auto;border-bottom:0;z-index:70;background:rgba(var(--bg-rgb),.92)}
 .nav-left .nb{left:0;border-right:1px solid var(--line)}.nav-right .nb{right:0;border-left:1px solid var(--line)}
 .nav-left .nbin,.nav-right .nbin{flex-direction:column;align-items:stretch;height:auto;min-height:100%;max-width:none;margin:0;padding:22px 18px;gap:18px}
 .nav-left .nav,.nav-right .nav{flex-direction:column;margin:0;gap:2px;position:static;display:flex;order:2}
 .nav-left .nav a,.nav-right .nav a{padding:11px 14px;font-size:15.5px;white-space:normal;border-radius:10px}
 .nav-left .nav a[aria-current],.nav-right .nav a[aria-current]{background:rgba(var(--panel-rgb),.95);color:var(--tx);box-shadow:inset 3px 0 0 var(--gold)}
 .nav-left .nav a[aria-current]::after,.nav-right .nav a[aria-current]::after{display:none}
 .nav-left .menu-btn,.nav-right .menu-btn{display:none}
 .nav-left .brand,.nav-right .brand{order:0}
 .nav-left .djlive,.nav-right .djlive{order:1;padding:10px;border-radius:14px}
 .nav-left .djlive .av,.nav-right .djlive .av{width:56px;height:56px}.nav-left .djlive b,.nav-right .djlive b{max-width:150px;font-size:16px}
 .nav-left .btn-live,.nav-right .btn-live{order:4;justify-content:center}
 .nb-extra{display:block;order:5;margin-top:auto;font-size:13px;color:var(--mut)}.nb-extra a{display:inline-block;margin:0 12px 6px 0;color:var(--tx)}.nb-extra a:hover{color:var(--gold)}
 .nav-left .dock{left:var(--sw)}.nav-right .dock{right:var(--sw)}
}

/* ===== responsive: tablet en mobiel ===== */
img{height:auto}
body{overflow-wrap:break-word}
.pagehead h1{font-size:clamp(28px,5.2vw,42px)}.sec-h h2{font-size:clamp(22px,3.6vw,30px)}.deck-title{font-size:clamp(20px,3.6vw,28px)}.vote h2{font-size:clamp(20px,3.4vw,26px)}
.ftg{grid-template-columns:1.6fr repeat(var(--fc,3),1fr)}
@media(max-width:1100px){.wrap{padding:0 20px}}
@media(max-width:960px){
 .menu-btn{display:block;margin-left:auto;min-width:44px;min-height:44px}
 .nbin{gap:12px}
 .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:rgba(var(--bg-rgb),.98);padding:8px 20px 16px;border-bottom:1px solid var(--line);margin:0;max-height:calc(100vh - 90px);overflow-y:auto;gap:0}
 .nav.open{display:flex}.nav a{padding:13px 8px;font-size:16px;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.nav a:last-child{border-bottom:0}.nav a[aria-current]::after{display:none}.nav a[aria-current]{color:var(--gold)}
 .nb-extra{display:none}
 .hero{height:clamp(220px,50vw,420px)}
 .g3,.g4{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}.ftg{grid-template-columns:1fr 1fr}.artist{grid-template-columns:1fr}
 .deck{padding:16px;gap:16px}.chips{margin-top:-36px}.sec{margin-top:48px}.pagehead{padding-top:36px}
 .dock .eq,.deck .eq{display:none}.rows .when{min-width:104px}.djlive b{max-width:100px}
 .chat-form{grid-template-columns:150px 1fr auto}
}
@media(max-width:760px){
 .wrap{padding:0 16px}
 .g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr;gap:14px}.ftg{grid-template-columns:1fr;gap:24px}
 .hero{height:clamp(190px,56vw,300px)}.chips{margin-top:-26px;gap:8px}.chip{padding:5px 12px;font-size:13px}
 .deck{flex-wrap:wrap;align-items:center}.deck-txt{flex:1 1 55%}.deck .btn-play{width:100%;justify-content:center}.rec{width:76px;height:76px}
 .intro{font-size:17px;margin-top:26px}.sec{margin-top:40px}.sec-h{flex-wrap:wrap;gap:6px}
 .rows li{flex-wrap:wrap;gap:8px}.rows .when{min-width:0;width:100%}
 .btn{padding:12px 20px;min-height:44px}.btn-live{display:none}
 .dock .dockin{gap:10px;height:62px}.dock .btn{padding:9px 16px}
 .ft{padding-bottom:96px}.artist .in,.split .in{padding:22px}.vote{padding:22px}.vote .btns{width:100%}
 .gal{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
 .crow{gap:10px}.cpos{min-width:34px;font-size:22px}
 .djlive{padding:3px}.djlive .tx{display:none}
 .chat-form{grid-template-columns:1fr}.chat-log{height:min(52vh,420px)}
 .pagehead{padding-top:28px}
}
@media(max-width:420px){.btns .btn{flex:1 1 100%;justify-content:center}.brand{font-size:18px}.brand-logo{height:28px}.deck-meta{font-size:13px}.nbody{padding:14px}}
@supports(padding:max(0px)){.dock{padding-bottom:env(safe-area-inset-bottom)}.ft{padding-bottom:max(110px,calc(env(safe-area-inset-bottom) + 96px))}}
@media(hover:none){.ncard:hover{transform:none}.bn-i:hover img,.gal a:hover img,.djc:hover img{transform:none}.cr:hover{transform:none}}

.chat-send{display:flex;gap:8px}.chat-send .btn{padding:11px 16px}
.emo-picker{display:flex;flex-wrap:wrap;gap:2px;padding:10px 14px;border-top:1px solid var(--line);background:var(--panel2)}.emo-picker[hidden]{display:none}
.emo-picker button{background:none;border:0;font-size:25px;line-height:1;cursor:pointer;padding:7px;border-radius:8px;min-width:44px;min-height:44px}.emo-picker button:hover{background:var(--panel)}
.cm span{font-size:16px}

.chat-log{height:min(72vh,calc(var(--cl,20) * 2.15rem));min-height:220px}
@media(max-width:760px){.chat-log{height:min(58vh,calc(var(--cl,20) * 2.3rem))}}
/* ---------- 3.1: chat-DJ, gedraaid-archief, DJ-profiel, programma, poll, verzoeken ---------- */
.cm-dj{background:rgba(var(--panel-rgb),.6);box-shadow:inset 3px 0 0 var(--gold);padding-left:10px}
.djb{display:inline-block;font-style:normal;font-size:10px;letter-spacing:.1em;background:var(--gold);color:var(--on-gold);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:2px}
.nowline{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:14px 20px}.nowline .badge{margin:0}
.played-filter{display:flex;flex-direction:column;gap:12px}.played-filter .btn{margin-top:0}
.daychips{display:flex;gap:8px;flex-wrap:wrap}.daychips .chip{background:var(--panel);color:var(--tx);font-weight:500;-webkit-backdrop-filter:none;backdrop-filter:none}
.daychips .chip.on,.daychips .chip:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.row2{display:flex;gap:10px;flex-wrap:wrap}.row2 .field{flex:1;min-width:150px;min-height:0;width:auto}
.rows.played .when{min-width:64px}.rows .dsep{display:block;padding:14px 0 6px;color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
a.djc{display:block;color:inherit;position:relative;transition:transform .15s,border-color .15s}a.djc:hover{transform:translateY(-3px);border-color:var(--gold)}
.live-tag{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;padding:4px 10px;border-radius:99px;box-shadow:0 0 0 3px rgba(229,72,77,.25)}
.djprofile{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:32px;align-items:start;margin-top:28px}
.djp-photo{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}.djp-photo img,.djp-photo .ph-empty{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.djp-photo .ph-empty{display:grid;place-items:center}.djp-photo .ph-empty span{font-size:96px;font-weight:800;color:var(--gold);opacity:.6}
.djp-main h1{margin:0 0 10px;font-size:clamp(32px,5vw,48px);line-height:1.05}
.djp-now{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:0 0 16px}
.djp-links a{border:1px solid var(--line);border-radius:999px;padding:6px 14px!important}.djp-links a:hover{border-color:var(--gold);color:var(--gold)}
.djp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rows li.is-now{background:rgba(var(--panel-rgb),.4);box-shadow:inset 3px 0 0 var(--red);padding-left:12px;margin:0 -12px;padding-right:12px}
.rows .s a{color:var(--mut);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}.rows .s a:hover{color:var(--gold)}
.card.today{border-color:var(--gold)}
.poll h3{margin:0 0 14px;font-size:20px}.poll .s{margin:12px 0 0}
.poll-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin:0 0 8px;cursor:pointer;background:var(--panel2);font-weight:500}
.poll-opt:hover{border-color:var(--gold)}.poll-opt input{accent-color:var(--gold);width:18px;height:18px;margin:0;flex:none}
.poll-form .btn{margin-top:8px}.poll-msg{display:inline-block;margin-left:12px}
.poll-res{list-style:none;margin:0;padding:0}.poll-res li{margin:0 0 12px}.pr-l{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}.pr-l b{color:var(--gold)}
.pr-b{height:10px;border-radius:99px;background:var(--panel2);overflow:hidden}.pr-b i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .6s ease}
.req-closed{max-width:640px;border-color:var(--gold)}
.req-queue{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}.req-queue ul{margin:6px 0 0;padding-left:18px;color:var(--mut);font-size:14px}.req-queue li{margin:3px 0}
@media(max-width:760px){.djprofile{grid-template-columns:1fr;gap:20px}.djp-photo{max-width:320px}}
.req-nonstop{max-width:680px;margin:20px auto 0;text-align:center;padding:36px 28px}.req-nonstop h2{margin:4px 0 10px;font-size:clamp(22px,3vw,30px)}
.req-nonstop .s{max-width:520px;margin:0 auto}.req-next{margin:18px auto 0;padding:10px 16px;border:1px solid var(--line);border-radius:999px;display:inline-block;background:var(--panel2)}
.req-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 0}
/* smalle kolommen (artikel, pagina, zoeken, formulieren) in het midden */
.article{margin-left:auto;margin-right:auto}
main form.form[style*="max-width"],.req-form-card,.req-closed{margin-left:auto!important;margin-right:auto!important}
/* ---------- 3.1: sticky speler ---------- */
.dock{background:rgba(var(--panel-rgb),.92);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.25)}
.dock::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.dock.is-live::before{background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.9}
.dockin{height:76px;gap:18px}
.dk-art{position:relative;flex:none;width:54px;height:54px}
.dock .dk-art img{width:54px;height:54px;border-radius:10px;object-fit:cover;display:block;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.dock.is-live .dk-art img{border-radius:50%;box-shadow:0 0 0 2px var(--red),0 4px 14px rgba(0,0,0,.35)}
.dk-live{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);background:var(--red);color:#fff;font-size:9px;font-weight:800;letter-spacing:.12em;padding:1px 6px;border-radius:5px;line-height:14px}
.dk-live[hidden]{display:none}
.dk-tx{flex:1;min-width:0;line-height:1.25}
.dk-tx small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-tx small b{color:var(--red)}
.dk-tx>b,.dk-tx>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dk-tx>b{font-size:16px}.dk-tx>span{color:var(--mut);font-size:14px}
.vu{display:flex;flex-direction:column;gap:4px;flex:none}
.vu-row{display:flex;align-items:center;gap:6px}.vu-row em{font-style:normal;font-size:9px;font-weight:700;color:var(--mut);width:8px}
.vu-row span{display:flex;gap:2px}.vu-row i{display:block;width:6px;height:7px;border-radius:1.5px;background:rgba(var(--panel-rgb),1);box-shadow:inset 0 0 0 1px var(--line);transition:background .06s}
.vu-row i.on{background:#3dc37b;box-shadow:none}.vu-row i.y.on{background:#e7c84a}.vu-row i.r.on{background:var(--red)}
.dk-meta{display:flex;align-items:center;gap:16px;flex:none;color:var(--mut);font-size:14px}
.dk-lis{display:inline-flex;align-items:center;gap:5px}.dk-lis b{color:var(--tx)}
.dk-vol{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer}
.dk-vol input{-webkit-appearance:none;appearance:none;width:84px;height:4px;border-radius:9px;background:linear-gradient(90deg,var(--gold) var(--v,90%),var(--line) var(--v,90%));outline:none;margin:0}
.dk-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--tx);border:0;cursor:pointer}
.dk-vol input::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--tx);border:0;cursor:pointer}
.dk-req{color:var(--tx);border:1px solid var(--line);border-radius:var(--btn-r);padding:7px 14px;font-weight:600;font-size:14px;white-space:nowrap}.dk-req:hover{border-color:var(--gold);color:var(--gold)}
.dock .dk-play{width:auto;margin:0;min-width:118px;justify-content:center}
.dock.is-live .dk-play{background:var(--red);color:#fff}
@media(max-width:1100px){.dk-vol{display:none}}
@media(max-width:900px){.vu,.dk-req{display:none}}
@media(max-width:600px){.dockin{height:66px;gap:12px}.dk-art,.dock .dk-art img{width:46px;height:46px}.dk-meta{display:none}.dk-tx>b{font-size:15px}.dock .dk-play{min-width:0;padding:10px 16px}}
@media(max-width:1500px){body.nav-top .nb-extra,body:not(.nav-left):not(.nav-right) .nb-extra{display:none}}
/* ---------- 3.1: chat (kleuren instelbaar in Beheer > Chatbox) ---------- */
.chat{background:var(--ch-bg,var(--panel));color:var(--ch-tx,var(--tx));font-size:var(--ch-fs,15px)}
.chat .cm b{color:var(--ch-name,var(--gold))}.chat .cm time{color:var(--ch-time,var(--mut))}
.chat .cm span{font-size:var(--ch-fs,15px);color:var(--ch-tx,var(--tx))}
.djb.rb-dj{background:var(--ch-dj,var(--red));color:#fff}.djb.rb-admin{background:var(--ch-admin,#3d8bfd);color:#fff}
.cm-dj{box-shadow:inset 3px 0 0 var(--ch-dj,var(--red))}.cm-admin{box-shadow:inset 3px 0 0 var(--ch-admin,#3d8bfd);background:rgba(var(--panel-rgb),.6);padding-left:10px}
.chat.compact .chat-log{padding:8px 14px}
.chat.compact .cm{gap:8px;padding:3px 6px;border-bottom:0;border-radius:6px;line-height:1.4}
.chat.compact .cm:hover{background:rgba(255,255,255,.035)}
.chat.compact .cm b{max-width:130px;font-size:calc(var(--ch-fs,15px) - 1px)}
.chat.compact .cm time{font-size:11px;opacity:.8;margin-left:auto;flex:none}
.chat.compact .cm-dj,.chat.compact .cm-admin{padding-left:9px}
.chat.compact .chat-log{height:min(52vh,calc(var(--cl,20) * 1.75rem));min-height:180px}
.chat.compact .chat-form{padding:10px 14px;gap:8px}.chat.compact .chat-form .field{padding:10px 14px;font-size:15px}
.chat.compact .chat-send .btn{padding:9px 14px}
.chat-form.as-staff{grid-template-columns:1fr auto}
.chat-pass{grid-column:1/-1}.chat-pass[hidden]{display:none}
.chat-staff{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 14px;font-size:13px;color:var(--mut);border-top:1px solid var(--line);background:var(--panel2)}
.chat-staff[hidden]{display:none}.chat-staff b{color:var(--tx)}.chat-staff em{font-style:normal;font-size:10px;letter-spacing:.08em;font-weight:700;background:var(--ch-dj,var(--red));color:#fff;border-radius:4px;padding:1px 5px;margin-left:4px}
.chat-staff button{background:none;border:0;color:var(--mut);text-decoration:underline;cursor:pointer;font:inherit}
.chat-err{padding:0 14px 8px;margin:0;min-height:0}.chat-err:empty{display:none}
.chat-form{align-items:start}.chat-send{flex-wrap:nowrap;flex:none}.chat-send .btn{flex:none;margin:0}.chat .chat-form .field{min-height:0}
/* paginawissel zonder herladen */
html.vfm-loading #main{opacity:.55;transition:opacity .15s .1s}
html.vfm-loading::before{content:"";position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;background:linear-gradient(90deg,transparent,var(--gold),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:vfmload 1s linear infinite}
@keyframes vfmload{from{background-position:-50% 0}to{background-position:150% 0}}
#main h1:focus{outline:none}
/* ---------- 3.1: bannerkop (Uiterlijk > Indeling) ---------- */
.hdr-banner .nb{position:static;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.bn-top{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(var(--bg-rgb),.2))}
.bn-top .wrap{display:flex;justify-content:center;padding-top:22px;padding-bottom:18px}
.bn-logo{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.bn-logo img{display:block;max-width:100%;max-height:var(--banner-h,170px);width:auto;height:auto}
.bn-mark svg,.bn-mark .brand-logo{width:auto;height:64px;max-width:none}
.bn-name{font-weight:800;font-size:clamp(30px,5vw,54px);letter-spacing:.05em;text-transform:uppercase;line-height:1}.bn-name b{color:var(--gold)}
.bn-logo small{letter-spacing:.3em;text-transform:uppercase;color:var(--mut);font-size:13px}
.bn-bar{position:sticky;top:0;z-index:50;background:rgba(var(--bg-rgb),.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hdr-banner .nbin{height:58px}
.hdr-banner .nav{margin:0 auto 0 0}
.hdr-banner .nav a{text-transform:uppercase;font-weight:800;letter-spacing:.04em;font-size:14.5px;color:var(--tx);border-radius:0;padding:0 16px;height:58px;display:flex;align-items:center}
.hdr-banner .nav a:hover{background:rgba(var(--panel-rgb),.8)}
.hdr-banner .nav a[aria-current]{background:rgba(var(--panel-rgb),1)}.hdr-banner .nav a[aria-current]::after{left:0;right:0;bottom:0;height:3px}
.hdr-banner .djlive{order:3}
@media(max-width:760px){.hdr-banner .nav{top:58px;margin:0}.hdr-banner .nav a{height:auto;padding:12px 8px}.bn-mark svg{height:44px}.bn-top .wrap{padding-top:14px;padding-bottom:12px}}

/* ---------- 3.1: indeling met zijbalk ---------- */
.lay{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start;padding-top:24px}
.aside-left .lay{grid-template-columns:330px minmax(0,1fr)}.aside-left .lay-side{order:-1}
.lay-main .wrap{max-width:none;padding-left:0;padding-right:0}
.lay-main .hero{border-radius:var(--r);border:1px solid var(--line)}
.lay-main>.crumbs,.lay-main .crumbs{padding-left:0;padding-right:0}
.lay-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:76px}
.hdr-banner .lay-side{top:72px}
.as-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.as-h{margin:0 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.as-np{padding:14px}
.as-cover{position:relative;border-radius:calc(var(--r) - 4px);overflow:hidden;aspect-ratio:1/1;background:var(--panel2)}
.as-cover img{width:100%;height:100%;object-fit:cover;display:block}
.as-tag{position:absolute;left:10px;top:10px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.6);color:#fff;padding:3px 8px;border-radius:6px}
.as-np.is-live .as-tag{background:var(--red)}.as-np.is-live .as-cover{box-shadow:0 0 0 2px var(--red)}
.as-np-tx{padding:12px 2px 10px}.as-np-tx>b{display:block;font-size:18px;line-height:1.2}.as-np-tx>span{display:block;color:var(--mut)}.as-np-tx small{display:block;margin-top:6px;color:var(--mut);font-size:13px}.as-np-tx small b{color:var(--tx)}
.as-play,.as-btn{width:100%;justify-content:center}
.as-dj{display:flex;align-items:center;gap:12px}.as-dj img,.as-dj i{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--red);flex:none;display:grid;place-items:center;background:var(--panel2);font-style:normal;font-weight:800;color:var(--gold)}
.as-dj b{display:block}.as-dj small{color:var(--mut)}
.as-next{margin:0;line-height:1.5}.as-next b{color:var(--gold)}.as-next span{color:var(--mut)}
.as-p{margin:0 0 12px;color:var(--mut);font-size:14px}
.as-list{list-style:none;margin:0;padding:0}.as-list li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.as-list li:last-child{border:0}
.as-list .w{color:var(--gold);font-weight:600;white-space:nowrap;min-width:84px}.as-list small{color:var(--mut)}
.as-more{display:inline-block;margin-top:8px;font-size:13px;color:var(--gold)}
.as-btns{display:flex;flex-direction:column;gap:8px}
.as-soc{display:flex;flex-wrap:wrap;gap:8px}.as-soc a{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:14px}.as-soc a:hover{border-color:var(--gold);color:var(--gold)}
.as-poll .poll{padding:16px 18px}.as-poll .poll h3{font-size:16px}
.lay-main .g4{grid-template-columns:repeat(3,1fr)}.lay-main .g3{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.lay{grid-template-columns:minmax(0,1fr) 290px}.aside-left .lay{grid-template-columns:290px minmax(0,1fr)}}
@media(max-width:960px){.lay,.aside-left .lay{grid-template-columns:1fr}.lay-side{position:static}.aside-left .lay-side{order:0}.lay-main .g4{grid-template-columns:1fr 1fr}.as-np{display:grid;grid-template-columns:110px 1fr;gap:4px 14px;align-items:center}.as-np .as-play{grid-column:1/-1}}
.lay-side{position:static}
/* instelbare breedte (Uiterlijk > Indeling) */
.wrap{max-width:var(--wrap,1440px)}
.lay-side .as-box,.lay-side .poll{min-width:0}
.lay-sidebar .hero{border-bottom:1px solid var(--line)}
.lay-sidebar .hero+.wrap .chips{margin-bottom:6px}
.rec.dj-photo{animation:none;border-radius:50%;border-color:var(--red);box-shadow:0 0 0 4px rgba(229,72,77,.25)}
/* lange titels laten scrollen in de speler */
.mq{text-overflow:clip!important;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.mq .mq-in{display:inline-block;padding-right:12px;animation:mqs var(--mqd,8s) ease-in-out infinite alternate}
.mq:hover .mq-in{animation-play-state:paused}
@keyframes mqs{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(var(--mq,0))}}
.deck-title.mq,.deck-artist.mq{white-space:nowrap;overflow:hidden}
.as-np-tx>b,.as-np-tx>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:960px){.lay,.aside-left .lay{grid-template-columns:minmax(0,1fr)}}
.lay-main,.lay-side,.dk-tx,.as-np-tx{min-width:0}
/* pagina's in de verzoeklijst (AzuraCast) */
.req-pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.req-pager:empty{display:none}
.req-pager button{min-width:38px;height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font:600 14px var(--font),system-ui,sans-serif;cursor:pointer}
.req-pager button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.req-pager button.on{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.req-pager button:disabled{opacity:.4;cursor:default}
.req-pager span{color:var(--mut);padding:0 2px}.req-pager small{margin-left:auto;color:var(--mut);font-size:13px}
#req-list.loading{opacity:.5;transition:opacity .15s}
@media(max-width:560px){.req-pager small{width:100%;margin:4px 0 0}}
.req-pager button.on,.req-pager button.on:hover{background:var(--gold);color:var(--on-gold)!important;border-color:var(--gold)}
/* eigen smilies */
.cm .smi{height:1.6em;width:auto;max-width:72px;vertical-align:middle;margin:0 1px}
.emo-picker .emo-cus img{height:30px;width:auto;max-width:56px;display:block}
.emo-picker .emo-cus{display:inline-flex;align-items:center;justify-content:center}
/* header op de andere pagina's */
.hero.hero-sub{height:clamp(120px,24vw,var(--hero-sub,300px))}
.hero-sub+.crumbs,.hero-sub~.wrap .pagehead{margin-top:0}
.cm span .smi{display:inline-block;height:1.7em;vertical-align:-.45em}
/* melding als de browser automatisch afspelen tegenhoudt */
.dk-hint{position:absolute;left:50%;top:-46px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--on-gold);border:0;border-radius:999px;padding:9px 18px;font:700 14px var(--font),system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:hintb 1.6s ease-in-out infinite;white-space:nowrap}
.dk-hint[hidden]{display:none}
@keyframes hintb{50%{transform:translateX(-50%) translateY(-4px)}}
.dock{position:fixed}
/* chat-moderatie */
.cm{position:relative}
.cm-mod{display:none;gap:2px;flex:none;align-items:center;flex-wrap:wrap}
.cm:hover .cm-mod,.cm:focus-within .cm-mod{display:inline-flex}
@media(hover:none){.cm-mod{display:inline-flex}}
.cm-mod button{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--tx);border-radius:6px;font-size:13px;line-height:1;padding:4px 6px;cursor:pointer}
.cm-mod button:hover{border-color:var(--gold)}
.cm-menu{display:inline-flex;gap:4px;align-items:center;margin-left:4px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.cm-menu input{width:min(260px,40vw);padding:4px 8px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--tx);font:13px var(--font),system-ui,sans-serif}
.chat-warn{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 14px;background:rgba(231,182,74,.14);border-bottom:1px solid var(--gold);color:var(--tx);font-size:14px}
.chat-warn[hidden]{display:none}.chat-warn b{color:var(--gold);flex:none}.chat-warn button{margin-left:auto;background:none;border:0;color:var(--mut);font-size:18px;cursor:pointer;line-height:1}
.chat-err.ok{color:#9be7bd}
/* foto bij programma-items */
.rows li .sh-img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--line)}
.rows li.is-now .sh-img{box-shadow:0 0 0 2px var(--red)}
.as-list .as-shimg{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}.as-list li{align-items:center}
@media(max-width:760px){.rows li .sh-img{width:40px;height:40px}}
@media(max-width:560px){.rows li:has(.sh-img){display:grid;grid-template-columns:40px 1fr;gap:2px 12px;align-items:center}.rows li:has(.sh-img) .sh-img{grid-row:1/3}.rows li:has(.sh-img) .when{width:auto}}
.sh-ph{display:grid;place-items:center;background:var(--panel2);color:var(--gold);font-weight:800;font-size:18px}
/* DJ-foto in de chat */
.cm .cm-av{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;align-self:center;box-shadow:0 0 0 2px var(--ch-dj,var(--red))}
.chat:not(.compact) .cm .cm-av{width:28px;height:28px}
/* moderatie-venster */
.chat-modbtn{background:var(--panel);border:1px solid var(--line);color:var(--tx);border-radius:7px;padding:3px 10px;font:600 12px var(--font),system-ui,sans-serif;cursor:pointer;text-decoration:none!important}
.chat-modbtn:hover{border-color:var(--gold)}
.chat-modpop{margin:10px 14px;border:1px solid var(--gold);border-radius:12px;background:var(--panel2);box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden}
.mp-h{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}.mp-h button{background:none;border:0;color:var(--mut);font-size:20px;cursor:pointer;line-height:1}
.mp-b{padding:10px 14px;font-size:14px;color:var(--mut);max-height:260px;overflow:auto}
.mp-grid{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr) auto;gap:6px 14px;align-items:center;color:var(--tx)}
.mp-grid>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mp-th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.mp-grid button{background:var(--gold);color:var(--on-gold);border:0;border-radius:7px;padding:5px 10px;font:700 12px var(--font),system-ui,sans-serif;cursor:pointer}
.mp-tip{margin:0;padding:8px 14px 12px;font-size:12px;color:var(--mut)}
.chat-staff .chat-modbtn{margin-left:auto;margin-right:8px}
/* Chatpagina: volle breedte en een hoger venster */
.chat-page .chat-log{height:min(70vh,calc(var(--cl,20) * 2.6rem));min-height:340px}
.chat-page .chat.compact .chat-log{height:min(70vh,calc(var(--cl,20) * 2.2rem))}
/* moderatie-popup zweeft over het chatvenster, rechtsboven */
.chat{position:relative}
.chat-modpop{position:absolute;top:auto;bottom:112px;right:14px;margin:0;width:min(440px,calc(100% - 28px));max-height:min(60vh,calc(100% - 130px));overflow:auto;z-index:6}
/* #spelerlog */
#vfm-plog{position:fixed;left:12px;right:12px;top:12px;max-width:760px;margin:0 auto;max-height:70vh;overflow:auto;z-index:9999;background:#0b0f19;color:#e8ecf4;border:1px solid var(--gold);border-radius:12px;padding:12px 14px;font:13px/1.45 ui-monospace,Consolas,monospace;box-shadow:0 20px 50px rgba(0,0,0,.5)}
#vfm-plog button{font:inherit;margin-left:8px;background:none;border:1px solid rgba(255,255,255,.25);color:inherit;border-radius:6px;padding:2px 8px;cursor:pointer}
#vfm-plog pre{white-space:pre-wrap;margin:10px 0 0}
/* eigen tekst/HTML in de zijbalk */
.as-html{font-size:14px;line-height:1.5;color:var(--mut);overflow-wrap:anywhere}
.as-html>:first-child{margin-top:0}.as-html>:last-child{margin-bottom:0}
.as-html a{color:var(--gold)}.as-html img,.as-html iframe{max-width:100%;height:auto;border-radius:8px}
.as-np .as-html{margin:10px 0 0}.as-np>.as-html:first-child{margin:0 0 10px}
.as-np .as-np-tx+.as-html{margin:0 0 10px}
/* Chat-opmaak uit het beheer: doorzichtigheid, rand, balk, velden, knop, lettertype, om-en-om, vervaging, naamkleuren */
.chat{border-radius:var(--ch-radius,var(--r));border-width:var(--ch-bw,1px);border-color:var(--ch-border,var(--line));font-family:var(--ch-font,inherit)}
.chat .chat-log,.chat .chat-form .field,.chat .btn{font-family:var(--ch-font,inherit)}
.chat .cm{border-bottom-color:var(--ch-border,var(--line))}
.chat .chat-form,.chat .chat-staff{background:var(--ch-bar,var(--panel2));border-top-color:var(--ch-border,var(--line))}
.chat .chat-form .field{background:var(--ch-field,var(--bg));color:var(--ch-fieldtx,var(--tx));border-color:var(--ch-border,var(--line))}
.chat .chat-form .field::placeholder{color:var(--ch-fieldtx,var(--mut));opacity:.6}
.chat .chat-send .btn:not(.sec){background:var(--ch-btn,var(--gold));color:var(--ch-btntx,#111);border-color:var(--ch-btn,var(--gold))}
.chat .cm-dj,.chat .cm-admin{background:var(--ch-djrow,rgba(var(--panel-rgb),.6))}
.chat.zebra .cm:nth-child(even){background:var(--ch-zebra,rgba(255,255,255,.045))}
.chat.zebra .cm-dj:nth-child(even),.chat.zebra .cm-admin:nth-child(even){background:var(--ch-djrow,rgba(var(--panel-rgb),.6))}
.chat.blur{-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.chat.boldmsg .cm span{font-weight:600}
.chat .chat-modpop{border-radius:min(12px,var(--ch-radius,12px))}
/* welkomsttekst uit de teksteditor */
.intro-rich>:first-child{margin-top:0}.intro-rich>:last-child{margin-bottom:0}
.intro-rich p{margin:0 0 .7em}.intro-rich a{color:var(--gold)}.intro-rich img{max-width:100%;height:auto;border-radius:10px}
.intro-rich h2,.intro-rich h3{color:var(--tx);margin:.4em 0 .3em}
.intro-rich ul,.intro-rich ol{display:inline-block;text-align:left;margin:0 0 .7em}
/* header op andere pagina's precies zoals op de homepage */
.hero.hero-sub.hero-same{height:clamp(240px,42vw,var(--hero-max))}
.chat-rem{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);margin:-2px 0 0;cursor:pointer}.chat-rem[hidden]{display:none}.chat-rem input{accent-color:var(--gold);width:16px;height:16px}.chat-rem span{opacity:.75}

/* ---------- menu klapt vanzelf in zodra het niet meer op een regel past (tablet, lange menu's) ---------- */
body.nav-collapsed .menu-btn{display:block;margin-left:auto;min-width:44px;min-height:44px}
body.nav-collapsed .nbin{gap:12px}
body.nav-collapsed .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:rgba(var(--bg-rgb),.98);padding:8px 20px 16px;border-bottom:1px solid var(--line);margin:0;max-height:calc(100vh - 90px);overflow-y:auto;gap:0;z-index:60}
body.nav-collapsed .nav.open{display:flex}
body.nav-collapsed .nav a{padding:13px 8px;font-size:16px;min-height:44px;height:auto;display:flex;align-items:center;border-bottom:1px solid var(--line)}
body.nav-collapsed .nav a:last-child{border-bottom:0}body.nav-collapsed .nav a[aria-current]::after{display:none}body.nav-collapsed .nav a[aria-current]{color:var(--gold)}
body.nav-collapsed .nb-extra{display:none}

/* ---------- mobiel en tablet: zijbalk zonder dubbele blokken ---------- */
@media(max-width:960px){
 .lay-side{gap:14px;margin-top:8px}
 /* speler, poll, stemmen en socials staan al onderaan/in de pagina: in de zijbalk niet nog een keer */
 .lay-side .aw-np,.lay-side .aw-vote,.lay-side .aw-social{display:none}
 .lay-home .lay-side .aw-poll,.lay-home .lay-side .aw-sched,.lay-home .lay-side .aw-hist{display:none}
 .lay-side:not(:has(.aw:not(.aw-np):not(.aw-vote):not(.aw-social))){display:none}
}
@media(min-width:600px) and (max-width:960px){
 .lay-side{display:grid!important;grid-template-columns:1fr 1fr;align-items:start}
}
.djc .ph-empty{display:grid;place-items:center}.djc .ph-empty span{font-size:clamp(40px,8vw,72px);font-weight:800;color:var(--gold);opacity:.55}
@media(max-width:760px){
 .lay-main .g3,.lay-main .g4.g4-1{grid-template-columns:1fr}
 .lay-main .g4{grid-template-columns:1fr 1fr;gap:12px}
 .djc img,.djc .ph-empty{aspect-ratio:1/1}.djc .in{padding:10px 12px}.djc h3{font-size:16px}.djc p{font-size:13px}
 .chat-send{width:100%}.chat-send .btn:not(.sec){flex:1}
 .chat .chat-form{gap:8px}
}
@media(min-width:761px) and (max-width:960px){.lay-main .g3{grid-template-columns:1fr 1fr}}
body.nav-collapsed .btn-live{margin-left:auto}body.nav-collapsed .btn-live~.menu-btn{margin-left:0}
@media(min-width:761px) and (max-width:960px){.btn-live{margin-left:auto}.btn-live~.menu-btn{margin-left:0}}
.g3:has(> .bn-i){grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media(min-width:600px) and (max-width:960px){.g4,.lay-main .g4{grid-template-columns:repeat(3,1fr)}}
.chat.compact .cm-dj,.chat.compact .cm-admin{border-radius:0 6px 6px 0}
@media(max-width:760px){
 .chat-page .chat-log{height:min(55vh,calc(var(--cl,20) * 2.2rem));min-height:240px}
 .hero.hero-sub.hero-same{height:clamp(170px,48vw,300px)}
 .hdr-banner .nbin{height:52px}.hdr-banner .bn-top .wrap{padding-top:12px;padding-bottom:10px}
 .hdr-banner .nav{top:52px}
}
/* geen blok in de zijbalk dat hetzelfde toont als de pagina zelf */
.lay-p-verzoekjes .aw-req,.lay-p-programma .aw-sched,.lay-p-gedraaid .aw-hist{display:none}
.req-pager{flex-wrap:wrap;row-gap:8px}
/* ---------- 3.2: pushmeldingen ---------- */
.dk-bell{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--mut);cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s}
.dk-bell:hover{color:var(--gold);border-color:var(--gold)}.dk-bell.on{color:var(--on-gold);background:var(--gold);border-color:var(--gold)}
.nb-bell{margin-right:4px}
.push-pop{position:fixed;z-index:200;background:var(--panel);color:var(--tx);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.45);padding:16px;font-size:14px;max-height:70vh;overflow:auto}
.push-pop b{display:block;font-size:16px;margin-bottom:4px}.push-pop p{margin:0 0 10px;color:var(--mut);line-height:1.45}
.push-pop .pp-r{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer;font-weight:600}
.pp-djs{display:grid;gap:4px;margin:4px 0 6px 4px;max-height:220px;overflow:auto}
.pp-dj{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:8px;cursor:pointer}.pp-dj:hover{background:rgba(255,255,255,.05)}
.pp-dj .av{width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--panel2);display:grid;place-items:center;font-weight:700;color:var(--gold);flex:none}.pp-dj .av img{width:100%;height:100%;object-fit:cover}
.pp-act{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.push-pop .btn.sm{padding:8px 14px;font-size:14px}
.pp-msg{margin-top:8px;color:var(--gold);font-size:13px;min-height:1em}
.pp-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);color:var(--tx);padding:10px 16px;border-radius:10px;z-index:210;max-width:90vw}
.push-dj{display:inline-flex;align-items:center;gap:6px}.push-dj.on{border-color:var(--gold);color:var(--gold)}
@media(max-width:600px){.dk-bell{width:36px;height:36px}}
/* ---------- 3.2: seizoensthema's ---------- */
.season-bar{background:var(--panel);background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 22%,var(--panel)),var(--panel));border-bottom:1px solid var(--line);font-size:14.5px;font-weight:600}
.season-bar .wrap{display:flex;align-items:center;gap:10px;min-height:40px;padding-top:6px;padding-bottom:6px}
.season-bar .se{font-size:20px;line-height:1}.season-bar .sp{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.1em;background:var(--gold);color:var(--on-gold);padding:2px 8px;border-radius:99px}
.season-bar .sx{margin-left:auto;background:none;border:0;color:var(--mut);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}.season-bar .sx:hover{color:var(--tx)}
.season-fx{position:fixed;inset:0;pointer-events:none;z-index:45}
.dk-bell[hidden],.push-dj[hidden]{display:none!important}
/* 3.2.3: captcha */
.captcha{margin:4px 0 14px}.captcha label{display:block}.cap-hint{color:var(--mut);font-weight:400;font-size:.9em}.captcha .cap-in{max-width:120px}
.sub-chips .chips{margin-bottom:6px}
/* ---------- 3.2.4: socials met pictogrammen of eigen afbeeldingen ---------- */
@media(min-width:1501px){body:not(.nav-left):not(.nav-right) .nb-extra{display:flex;align-items:center;gap:12px;margin:0 0 0 6px}body:not(.nav-left):not(.nav-right) .nb-extra a{margin:0}}
@media(min-width:1101px){body:not(.nav-left):not(.nav-right):not(.nav-collapsed) .nb-extra.soc-icons{display:flex;align-items:center;gap:10px;margin:0 0 0 6px}body:not(.nav-left):not(.nav-right) .nb-extra.soc-icons a{margin:0}}
.nb-extra .socl{color:var(--tx)}.nb-extra .socl:hover{color:var(--gold)}
.soc .socl{color:var(--tx)}.soc.soc-icons{gap:10px}.soc .socl:hover{color:var(--gold)}
.as-soc.soc-icons a{padding:6px;border-radius:50%}.as-soc .socl{gap:6px}
.soc-c{margin:0 0 10px}.soc-c .socl{color:var(--gold);font-weight:600}
.btn-img{position:relative}