/* StreamBudget Radio CMS — publieke site. Kleuren komen uit het thema (variabelen in de kop). */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tekst);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.55;padding-bottom:84px}
a{color:var(--accent)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--kopfont);line-height:1.15;margin:0 0 12px}
h2{font-size:1.3rem}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--op-accent);padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
.breed{max-width:1200px;margin:0 auto;padding:0 20px}
.smal{max-width:820px;margin:0 auto;padding:0 20px}
.zacht{color:var(--zacht)}
.klein{font-size:.85rem}
.groei{flex:1 1 auto;min-width:0}
.rij{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.blok{margin-top:26px}
.kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:18px;padding:22px}
.raster2,.raster3,.raster4{display:grid;gap:20px}
.raster2{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster3{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster4{grid-template-columns:repeat(4,minmax(0,1fr))}
.raster1{display:grid;gap:20px}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--op-accent);border:0;border-radius:999px;padding:12px 22px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;min-height:44px}
.knop.rand{background:transparent;color:var(--tekst);border:1px solid var(--lijn)}
.knop.groen{background:#1f9d55;color:#fff;border-radius:12px}
.knop:disabled{opacity:.5;cursor:default}
.pil{font-size:.72rem;background:var(--accent);color:var(--op-accent);padding:2px 9px;border-radius:999px;vertical-align:middle;font-family:Inter,sans-serif}
.melding{background:var(--kaart);border:1px solid var(--accent);padding:12px 16px;border-radius:12px}
.verborgen{position:absolute;left:-9999px}

/* kop */
.kop{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--lijn)}
.kop-rij{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;color:var(--tekst);text-decoration:none;font-family:var(--kopfont);font-weight:800;font-size:1.25rem;text-transform:uppercase;letter-spacing:.5px}
.logo img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.menu{display:flex;flex-wrap:wrap;gap:4px 20px;margin-left:auto}
.menu a{color:var(--zacht);text-decoration:none;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--tekst);border-color:var(--accent)}
.socials{display:flex;gap:8px}
.soc{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--kaart);border:1px solid var(--lijn);color:var(--tekst);text-decoration:none;font-weight:800;font-size:.8rem}
.menu-knop{display:none;margin-left:auto;background:transparent;border:1px solid var(--lijn);border-radius:10px;width:46px;height:46px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.menu-knop span{display:block;width:20px;height:2px;background:var(--tekst)}
.ticker{overflow:hidden;border-top:1px solid var(--lijn);white-space:nowrap}
.ticker-rij{display:inline-block;padding:8px 0;animation:loop 40s linear infinite;color:var(--accent);font-weight:700;font-size:.78rem;letter-spacing:2.5px}
.ticker-rij span{margin-right:28px}
@keyframes loop{to{transform:translateX(-50%)}}

/* held */
.held{position:relative;overflow:hidden;border-bottom:1px solid var(--lijn);background:radial-gradient(circle at 25% 30%,color-mix(in srgb,var(--accent) 22%,var(--bg)) 0%,var(--bg) 70%)}
.balken{position:absolute;inset:auto 0 0 0;height:75%;display:flex;align-items:flex-end;gap:5px;padding:0 6px;opacity:.45}
.balken i{flex:1;height:var(--h);background:linear-gradient(to top,var(--accent),color-mix(in srgb,var(--accent) 40%,transparent));border-radius:2px 2px 0 0;animation:dans 2.4s ease-in-out infinite alternate}
.balken i:nth-child(3n){animation-delay:-.8s}.balken i:nth-child(3n+1){animation-delay:-1.6s}
@keyframes dans{to{transform:scaleY(.6);transform-origin:bottom}}
.held-in{position:relative;text-align:center;padding:96px 20px 64px}
.held h1{font-size:clamp(2.4rem,7vw,5.4rem);font-weight:800;text-transform:uppercase;letter-spacing:1px;text-shadow:0 5px 0 rgba(0,0,0,.35);margin:0}
.slogan{font-size:clamp(1.05rem,2.2vw,1.5rem);color:color-mix(in srgb,var(--accent) 45%,var(--tekst));margin:8px 0 0}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.chips span{background:color-mix(in srgb,var(--bg) 85%,transparent);border:1px solid var(--lijn);color:var(--accent);font-weight:700;font-size:.8rem;letter-spacing:1.5px;padding:9px 16px;border-radius:999px}
.welkom{text-align:center;margin-top:30px}
.welkom p{max-width:760px;margin:0 auto;font-size:1.15rem;color:var(--zacht)}

/* blokken */
.nu{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.nu-hoes{width:200px;height:200px;border-radius:18px;overflow:hidden;flex-shrink:0;background:color-mix(in srgb,var(--accent) 25%,var(--kaart))}
.nu-hoes img{width:100%;height:100%;object-fit:cover}
.hoes-leeg{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:4rem;color:var(--accent)}
.nu-info{flex:1 1 320px;display:flex;flex-direction:column;gap:8px}
.label{font-size:.8rem;font-weight:700;letter-spacing:1.6px;color:var(--accent)}
.label.live{color:#ff5252}
.nu-titel{font-size:clamp(1.6rem,3.5vw,2.6rem);margin:0}
.lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lijst li{display:flex;align-items:center;gap:12px}
.mini-hoes{width:44px;height:44px;border-radius:9px;overflow:hidden;flex-shrink:0;background:color-mix(in srgb,var(--accent) 18%,var(--kaart))}
.mini-hoes.rond{border-radius:50%}
.mini-hoes img{width:100%;height:100%;object-fit:cover}
.tijd{font-size:.85rem;color:var(--zacht);width:52px;flex-shrink:0}
.tijd-k{font-size:.8rem;color:var(--accent);font-weight:600}
.nu-blok{background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:10px;padding:6px 8px;margin:0 -8px}
.hit .nr{width:22px;color:var(--accent);font-family:var(--kopfont)}
.meer{display:inline-block;margin-top:14px;font-size:.9rem;font-weight:600;text-decoration:none}
.chatblok{display:flex;flex-wrap:wrap;gap:20px}
.sectie{font-size:1.7rem}
.dj{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.dj-foto{width:100px;height:100px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--accent) 30%,var(--kaart));display:flex;align-items:center;justify-content:center;font-family:var(--kopfont);font-size:2rem;font-weight:800;color:var(--accent)}
.dj-foto img{width:100%;height:100%;object-fit:cover}
.nieuws{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--tekst);padding:0;overflow:hidden}
.nieuws img{width:100%;height:170px;object-fit:cover}
.nieuws>span,.nieuws>b{padding:0 18px}
.nieuws>b{font-size:1.05rem}
.nieuws>span:last-child{padding-bottom:18px}
.nieuws>span:first-child{padding-top:18px}
.vandaag{border-color:var(--accent)}
.paginatitel{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:30px}
.tekst p,.tekst li{font-size:1.05rem}
.groot-beeld{border-radius:16px;margin:16px 0;width:100%;max-height:460px;object-fit:cover}
.vz-frame{width:100%;height:600px;border:0;border-radius:12px;background:transparent;display:block}
.chat-frame{width:100%;height:calc(100vh - 220px);min-height:520px;border:1px solid var(--lijn);border-radius:16px}
.formulier{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.formulier label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.92rem}
.formulier input,.formulier textarea,.formulier-rij input{font:inherit;background:var(--bg);color:var(--tekst);border:1px solid var(--lijn);border-radius:10px;padding:11px 13px}
.formulier-rij{margin:16px 0}
.formulier-rij label{display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.gb p{margin:6px 0 0}
.gb{margin-top:12px}

/* voet en speler */
.voet{border-top:1px solid var(--lijn);margin-top:50px;padding:30px 0}
.voet-rij{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;color:var(--zacht);font-size:.95rem}
.voet-rij b{color:var(--tekst);font-family:var(--kopfont);font-size:1.1rem}
.voet-r{text-align:right}
.speler{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,#000);border-top:1px solid var(--lijn);display:flex;align-items:center;gap:16px;padding:10px 20px;backdrop-filter:blur(8px)}
.sp-hoes{width:54px;height:54px;border-radius:12px;overflow:hidden;flex-shrink:0;background:color-mix(in srgb,var(--accent) 22%,var(--kaart));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.sp-noot{color:var(--accent);font-size:1.6rem;font-weight:700}
.sp-artiest{font-size:.84rem;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-label.live{color:var(--live)}.sp-label.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-right:6px;vertical-align:1px;animation:spPuls 1.4s infinite}
@keyframes spPuls{50%{opacity:.3}}
.sp-eq{display:none;align-items:flex-end;gap:3px;height:22px}
.speelt .sp-eq{display:flex}
.sp-eq i{width:4px;background:var(--accent);border-radius:2px;animation:spEq 1s ease-in-out infinite}
.sp-eq i:nth-child(2){animation-delay:.2s}.sp-eq i:nth-child(3){animation-delay:.4s}.sp-eq i:nth-child(4){animation-delay:.1s}
@keyframes spEq{0%,100%{height:5px}50%{height:22px}}
.sp-vol{display:flex;align-items:center;gap:6px;font-size:.9rem}
.sp-vol input{width:90px;accent-color:var(--accent)}
.sp-hoes img{width:100%;height:100%;object-fit:cover}
.sp-tekst{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.sp-tekst b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-label{font-size:.72rem;font-weight:700;letter-spacing:1.6px;color:var(--zacht)}
.sp-luist{font-size:.85rem;color:var(--zacht)}

@media (max-width:900px){
  .raster3,.raster4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-knop{display:flex}
  .menu{display:none;position:absolute;left:0;right:0;top:68px;background:var(--bg);border-bottom:1px solid var(--lijn);flex-direction:column;padding:10px 20px;gap:0}
  .menu.open{display:flex}
  .menu a{padding:12px 0;border-bottom:1px solid var(--lijn)}
  .socials{display:none}
}
@media (max-width:600px){
  .raster2,.raster3,.raster4{grid-template-columns:minmax(0,1fr)}
  .nu-hoes{width:100%;height:auto;aspect-ratio:1}
  .sp-luist,.sp-vz,.sp-vol,.sp-eq{display:none!important}
  .voet-r{text-align:left}
  .held-in{padding:64px 16px 48px}
}
@media (prefers-reduced-motion:reduce){.ticker-rij,.balken i,.sp-eq i{animation:none}}
@media (max-width:900px){.sp-vol{display:none}}

/* vormen uit het thema */
.kaart{border-radius:var(--r,18px)}
.knop{border-radius:var(--knop,999px)}
.knop.groen{border-radius:min(var(--knop,12px),12px)}
.label.live{color:var(--live,#ff5252)}

/* seizoensthema's */
.seizoen{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.seizoen i{position:absolute;top:-40px;left:var(--x);font-style:normal;font-size:calc(18px * var(--s));color:#fff;opacity:.85;animation:val var(--d) linear var(--w) infinite}
@keyframes val{to{transform:translate(30px,110vh) rotate(360deg)}}
.seizoen-kerst .seizoen i{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.6)}
.seizoen-valentijn .seizoen i{color:#ff4f8b}
.seizoen-halloween .seizoen i{color:#ff7518}
.seizoen-zomer .seizoen i{color:#ffb020}
.seizoen-oudnieuw .seizoen i,.seizoen-koningsdag .seizoen i,.seizoen-carnaval .seizoen i{width:9px;height:16px;border-radius:2px}
.seizoen-oudnieuw .seizoen i:nth-child(3n){background:#f0c419}.seizoen-oudnieuw .seizoen i:nth-child(3n+1){background:#ff4f8b}.seizoen-oudnieuw .seizoen i:nth-child(3n+2){background:#3ee0d0}
.seizoen-koningsdag .seizoen i{background:#ff7a1a}.seizoen-koningsdag .seizoen i:nth-child(2n){background:#fff}.seizoen-koningsdag .seizoen i:nth-child(5n){background:#1e5bd8}
.seizoen-carnaval .seizoen i:nth-child(3n){background:#e8447a}.seizoen-carnaval .seizoen i:nth-child(3n+1){background:#3fbf6a}.seizoen-carnaval .seizoen i:nth-child(3n+2){background:#f0c419}
@media (prefers-reduced-motion:reduce){.seizoen{display:none}}

/* uitbreidingen */
.luist-rij{display:flex;gap:22px;flex-wrap:wrap}
.luist-rij div{display:flex;flex-direction:column}
.luist-rij b{font-family:var(--kopfont);font-size:1.8rem;color:var(--accent)}
.luist-nu{font-size:2.6rem!important}
.klok{display:flex;gap:10px;margin-top:10px}
.klok span{flex:1;display:flex;flex-direction:column;align-items:center;background:var(--bg);border:1px solid var(--lijn);border-radius:12px;padding:10px 4px;font-size:.75rem;color:var(--zacht)}
.klok b{font-family:var(--kopfont);font-size:1.7rem;color:var(--tekst)}
.groot-tekst{font-size:1.3rem}
.agenda-k{display:flex;gap:14px;align-items:flex-start}
.datum-blok{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;padding:8px;border-radius:12px;background:var(--accent);color:var(--op-accent);font-size:.8rem;text-transform:uppercase;font-weight:700}
.datum-blok b{font-size:1.6rem;line-height:1}
.felic p{margin:0 0 10px}
.doelbalk{height:12px;border-radius:999px;background:var(--bg);border:1px solid var(--lijn);overflow:hidden;margin:10px 0 4px;flex-basis:100%}
.doelbalk i{display:block;height:100%;background:var(--accent);border-radius:999px}
.stand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
.keuze{flex-direction:row!important;align-items:center;gap:10px!important;font-weight:500!important}
.balk{position:fixed;left:0;right:0;bottom:72px;z-index:29;display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--accent) 16%,var(--bg));border-top:1px solid var(--lijn);padding:6px 12px}
.balk-loop{flex:1;overflow:hidden;white-space:nowrap}
.balk-rij{display:inline-block;animation:loop 45s linear infinite;font-size:.9rem}
.balk-rij span{margin-right:40px}
.balk-knop{min-height:34px;padding:6px 14px;font-size:.82rem}
body:has(.balk){padding-bottom:124px}
.balk-venster{border:1px solid var(--lijn);border-radius:18px;background:var(--kaart);color:var(--tekst);padding:22px;width:min(440px,92vw)}
.balk-venster::backdrop{background:rgba(0,0,0,.55)}
.balk-venster input{font:inherit;background:var(--bg);color:var(--tekst);border:1px solid var(--lijn);border-radius:10px;padding:11px 13px}
@media (max-width:600px){.balk{bottom:72px}.balk-knop{padding:6px 10px}}
@media (prefers-reduced-motion:reduce){.balk-rij{animation:none}}
.ticker{display:flex;align-items:center}
.ticker-loop{flex:1;overflow:hidden;white-space:nowrap}
.ticker-rij b{color:var(--tekst)}
.ticker-knop{flex-shrink:0;margin:4px 10px;background:var(--accent);color:var(--op-accent);border:0;border-radius:var(--knop,999px);padding:5px 12px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;min-height:30px}
/* stem op ons-kaart (net als in de chat) */
.stem-kaart{display:block;text-decoration:none;color:inherit;transition:transform .15s}
.stem-kaart:hover{transform:translateY(-2px)}
.stem-label{display:block;font-weight:800;letter-spacing:1.5px;font-size:.78rem;color:var(--accent);margin-bottom:10px}
.stem-svg{display:block;width:100%;height:auto;border-radius:18px}
.stem-svg text{font-family:inherit}
.stem-rand{animation:stemGloed 2.4s ease-in-out infinite}
@keyframes stemGloed{0%,100%{opacity:.75}50%{opacity:1}}
.stem-duim{transform-origin:66px 96px;animation:stemDuim 2.4s ease-in-out infinite}
@keyframes stemDuim{0%,100%{transform:scale(1) rotate(0)}12%{transform:scale(1.08) rotate(-8deg)}24%{transform:scale(1) rotate(0)}}
.stem-sterren{animation:stemGloed 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.stem-rand,.stem-duim,.stem-sterren{animation:none}}
@media (max-width:700px){.sp-stem{display:none}}
/* neon gloed (Thema en kleuren > Neon gloed); --gloed is de gloedkleur */
@property --gh{syntax:'<angle>';inherits:true;initial-value:0deg}
.gloed-regen{--gloed:hsl(var(--gh) 100% 60%);animation:gloedRegen 12s linear infinite}
@keyframes gloedRegen{to{--gh:360deg}}
.gloed-zacht .kaart{box-shadow:0 0 0 1px color-mix(in srgb,var(--gloed) 26%,transparent),0 10px 30px -16px color-mix(in srgb,var(--gloed) 75%,transparent)}
.gloed-zacht .kaart:hover{border-color:color-mix(in srgb,var(--gloed) 60%,var(--lijn))}
.gloed-sterk .kaart{border-color:color-mix(in srgb,var(--gloed) 60%,var(--lijn));box-shadow:0 0 0 1px color-mix(in srgb,var(--gloed) 40%,transparent),0 0 22px -6px color-mix(in srgb,var(--gloed) 80%,transparent),inset 0 0 26px -18px var(--gloed);transition:box-shadow .2s,border-color .2s,transform .2s}
.gloed-sterk .kaart:hover{border-color:var(--gloed);box-shadow:0 0 0 1px var(--gloed),0 0 30px -4px var(--gloed),inset 0 0 30px -16px var(--gloed)}
.gloed-sterk .knop:not(.rand){box-shadow:0 0 18px -4px var(--gloed)}
.gloed-sterk .knop.rand{border-color:color-mix(in srgb,var(--gloed) 65%,transparent);box-shadow:0 0 12px -6px var(--gloed)}
.gloed-sterk h1,.gloed-sterk .held h1,.gloed-sterk .paginatitel{text-shadow:0 0 18px color-mix(in srgb,var(--gloed) 60%,transparent)}
.gloed-sterk .kop,.gloed-sterk .speler{box-shadow:0 0 24px -8px var(--gloed)}
.gloed-sterk .kop{border-bottom-color:color-mix(in srgb,var(--gloed) 55%,transparent)}
.gloed-sterk .speler{border-top-color:color-mix(in srgb,var(--gloed) 55%,transparent)}
.gloed-sterk .ticker{border-color:color-mix(in srgb,var(--gloed) 55%,transparent);box-shadow:0 0 16px -6px var(--gloed)}
.gloed-sterk .sp-hoes{box-shadow:0 0 16px -2px var(--gloed)}
.gloed-sterk .nu-hoes img,.gloed-sterk .single img{box-shadow:0 0 18px -6px var(--gloed)}
@media (prefers-reduced-motion:reduce){.gloed-sterk .kaart{transition:none}.gloed-regen{animation:none}}
/* thema met gekleurde vlakken (Paars en oranje) */
.met-vlak .held{background:linear-gradient(135deg,var(--vlak),color-mix(in srgb,var(--vlak) 55%,#000))!important;color:#fff}
.met-vlak .held h1,.met-vlak .held p{color:#fff}
.met-vlak .nu.kaart{background:linear-gradient(135deg,var(--vlak),color-mix(in srgb,var(--vlak) 60%,#000));color:#fff;border:0}
.met-vlak .nu.kaart .zacht,.met-vlak .nu.kaart .label{color:#f3e6ff}
.met-vlak .nu.kaart .knop.rand{color:#fff;border-color:rgba(255,255,255,.5)}
/* nieuwe singles (Lucky Joe Magazine) */
.rij-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.singles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;margin-top:14px}
.single{display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s}
.single:hover{transform:translateY(-3px)}
.single img,.single-leeg{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:color-mix(in srgb,var(--accent) 15%,var(--kaart))}
.single-leeg{display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--accent)}
.single-tekst{display:flex;flex-direction:column;gap:6px;padding:14px 16px 18px}
.single-tekst b{font-family:var(--kopfont);line-height:1.25}
.single-tekst small{color:var(--accent);font-weight:700;font-size:.74rem}
.single-tekst span{color:var(--zacht);font-size:.84rem;line-height:1.45}
/* submenu's */
.menu-groep{position:relative;display:flex;align-items:center;gap:2px}
.sub-knop{background:transparent;border:0;color:var(--zacht);font:inherit;font-size:.95rem;cursor:pointer;padding:6px 2px}
.sub-knop.groep{padding:6px 0;border-bottom:2px solid transparent}
.sub-knop.groep.actief,.sub-knop:hover{color:var(--tekst)}
.sub-knop.groep.actief{border-color:var(--accent)}
.submenu{display:none;position:absolute;top:100%;left:-14px;min-width:200px;background:var(--kaart);border:1px solid var(--lijn);border-radius:12px;padding:8px;flex-direction:column;z-index:40;box-shadow:0 16px 40px -18px rgba(0,0,0,.6)}
.submenu a{padding:9px 12px;border-radius:8px;border:0!important}
.submenu a:hover,.submenu a[aria-current]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--tekst)}
@media (hover:hover) and (min-width:901px){.menu-groep:hover .submenu{display:flex}}
.menu-groep:focus-within .submenu,.menu-groep.open .submenu{display:flex}
@media (max-width:900px){
  .menu-groep{flex-wrap:wrap;border-bottom:1px solid var(--lijn)}
  .menu-groep>a,.sub-knop.groep{flex:1;border-bottom:0!important;padding:12px 0;text-align:left}
  .sub-knop{padding:12px 8px}
  .submenu{position:static;display:flex;width:100%;min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 8px 14px}
  .submenu a{padding:9px 0;border-bottom:0}
}
.singles-rij{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.singles-rij{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(180px,42%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.singles-rij .single{scroll-snap-align:start}}
/* zendernaam bovenaan (Uiterlijk > Indeling) */
.held h1.titel-verloop{background:linear-gradient(100deg,var(--accent) 0%,var(--gloed) 25%,#fff 50%,var(--accent) 75%,var(--gloed) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent);text-shadow:none;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--gloed) 55%,transparent)) drop-shadow(0 6px 0 rgba(0,0,0,.35));animation:titelSchuif 10s ease-in-out infinite alternate}
@keyframes titelSchuif{to{background-position:100% 0}}
.held h1.titel-neon{color:#fff;text-shadow:0 0 4px #fff,0 0 10px var(--gloed),0 0 22px var(--gloed),0 0 44px var(--gloed),0 0 80px color-mix(in srgb,var(--gloed) 70%,transparent);animation:titelKnipper 7s infinite}
@keyframes titelKnipper{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.55}}
.held h1.titel-neonrand{color:transparent;-webkit-text-stroke:2px var(--gloed);text-shadow:0 0 14px var(--gloed),0 0 34px color-mix(in srgb,var(--gloed) 60%,transparent);filter:drop-shadow(0 0 6px var(--gloed))}
.held h1.titel-regenboog{background:linear-gradient(90deg,#ff3b5c,#ff8a1f,#ffe94a,#39ff88,#2fb8ff,#b46bff,#ff2fb0,#ff3b5c);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(255,255,255,.18)) drop-shadow(0 6px 0 rgba(0,0,0,.35));animation:titelRegen 8s linear infinite}
@keyframes titelRegen{to{background-position:300% 0}}
.held h1.titel-chroom{background:linear-gradient(180deg,#ffffff 0%,#d9dde4 38%,#7b8494 50%,#e9ecf1 62%,#9aa3b2 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)) drop-shadow(0 0 16px color-mix(in srgb,var(--gloed) 45%,transparent));position:relative}
.held h1.titel-chroom::after{content:attr(data-tekst);position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:titelGlans 5s ease-in-out infinite;pointer-events:none}
@keyframes titelGlans{0%{background-position:150% 0}60%,100%{background-position:-100% 0}}
.held h1.titel-retro{color:var(--tekst);text-shadow:3px 3px 0 var(--accent),6px 6px 0 var(--gloed),9px 9px 0 rgba(0,0,0,.35);letter-spacing:2px}
.held h1.titel-gewoon{text-shadow:0 5px 0 rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.held h1[class^="titel-"],.held h1.titel-chroom::after{animation:none}}
/* On Air-kaart */
.oa-kaart{padding:0;overflow:hidden}
.onair{display:flex;flex-direction:column;height:100%}
.oa-beeld{position:relative;aspect-ratio:1;background:color-mix(in srgb,var(--accent) 18%,var(--kaart));overflow:hidden}
.oa-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.oa-kaart:hover .oa-beeld img{transform:scale(1.04)}
.oa-beeld::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,var(--kaart),transparent);pointer-events:none}
.oa-leeg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4rem;color:var(--accent)}
.oa-lint{position:absolute;top:16px;right:-38px;transform:rotate(45deg);background:var(--live);color:#fff;padding:6px 46px;font-size:.74rem;letter-spacing:2px;font-weight:800;box-shadow:0 4px 14px -4px rgba(0,0,0,.6);z-index:2;display:flex;align-items:center;gap:7px}
.oa-lint i{width:8px;height:8px;border-radius:50%;background:#fff;animation:spPuls 1.2s infinite}
.oa-tijd{position:absolute;left:14px;bottom:14px;z-index:2;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(6px);border:1px solid var(--lijn);border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:700}
.oa-tekst{padding:16px 20px 20px;text-align:center;display:flex;flex-direction:column;gap:6px}
.oa-tekst h3{margin:0;font-family:var(--kopfont);font-size:1.35rem;line-height:1.2}
.oa-tekst p{margin:0;color:var(--zacht);font-size:.92rem}
.oa-tekst .oa-dj{color:var(--accent);font-weight:700}
.oa-tekst .oa-nr{font-size:.84rem}
.oa-tekst .oa-volgende{margin-top:6px;padding-top:10px;border-top:1px solid var(--lijn);font-size:.84rem}
.oa-tekst .oa-volgende b{color:var(--tekst)}
.is-live .oa-lint{animation:oaPuls 2s infinite}
@keyframes oaPuls{50%{box-shadow:0 0 22px 2px var(--live)}}
@media (prefers-reduced-motion:reduce){.oa-lint,.oa-lint i{animation:none}}
.oa-kaart:not(.oa-los) .oa-beeld{aspect-ratio:auto;height:clamp(220px,24vw,320px)}
/* compacter: alles een maatje kleiner, zodat er meer op het scherm past */
body{font-size:15px}
h2{font-size:1.15rem}
.blok{margin-top:20px}
.kaart{padding:18px}
.raster2,.raster3,.raster4{gap:16px}
.kop-rij{min-height:60px}
.held-in{padding:52px 20px 38px}
.held h1{font-size:clamp(2rem,5.2vw,4rem)}
.slogan{font-size:clamp(1rem,1.8vw,1.25rem)}
.chips{margin-top:16px;gap:8px}
.chips span{padding:7px 13px;font-size:.74rem}
.welkom{margin-top:20px}
.welkom p{font-size:1rem}
.nu{gap:22px}
.nu-hoes{width:150px;height:150px;border-radius:14px}
.nu-titel{font-size:clamp(1.4rem,2.6vw,2rem)}
.lijst{gap:9px}
.lijst li{gap:10px;font-size:.92rem;line-height:1.35}
.mini-hoes{width:38px;height:38px;border-radius:8px}
.oa-kaart:not(.oa-los) .oa-beeld{height:clamp(180px,17vw,240px)}
.oa-tekst{padding:12px 16px 16px;gap:4px}
.oa-tekst h3{font-size:1.15rem}
.oa-tekst p{font-size:.86rem}
.knop{padding:10px 18px}
.paginatitel{font-size:clamp(1.6rem,3.4vw,2.4rem)}
@media (max-width:600px){.nu-hoes{width:100%;height:auto}}
.kaart.oa-kaart,.kaart.single{padding:0}
/* luisteraars: tegels */
.luist-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.luist-kop h2{margin:0}
.luist-live{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:1.5px;color:var(--live)}
.luist-live i{width:8px;height:8px;border-radius:50%;background:var(--live);animation:spPuls 1.4s infinite}
.luist-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lt{background:color-mix(in srgb,var(--bg) 55%,var(--kaart));border:1px solid var(--lijn);border-radius:calc(var(--r,18px) - 6px);padding:12px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.lt-ic{font-size:1.1rem;line-height:1}
.lt b{font-family:var(--kopfont);font-size:1.7rem;line-height:1.15;color:var(--tekst)}
.lt.hoofd{border-color:color-mix(in srgb,var(--accent) 55%,var(--lijn));background:color-mix(in srgb,var(--accent) 12%,var(--kaart))}
.lt.hoofd b{color:var(--accent);font-size:2rem}
.lt small{color:var(--zacht);font-size:.74rem;line-height:1.3}
.luist-balk{height:6px;border-radius:999px;background:var(--lijn);overflow:hidden;margin-top:14px}
.luist-balk i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--gloed,var(--accent)))}
.luist-onder{margin:6px 0 0;text-align:center}
.blok>.raster1>.luist,.breed>.luist{max-width:none}
/* berichten in de lopende balk: anders dan de vaste teksten */
.tk-bericht{font-style:normal;text-transform:none;letter-spacing:.2px;font-weight:600;font-size:.82rem;color:var(--tekst);background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:3px 12px}
.tk-bericht b{color:var(--accent);margin-right:2px}
/* emoticons in het berichtvenster */
.emoji-rij{display:flex;flex-wrap:wrap;gap:4px;margin-top:-4px}
.emoji{background:var(--bg);border:1px solid var(--lijn);border-radius:8px;font-size:1.15rem;line-height:1;padding:6px;cursor:pointer;min-width:36px;min-height:36px}
.emoji:hover,.emoji:focus-visible{border-color:var(--accent);transform:scale(1.08)}
.ticker-rij .tk-bericht span{margin-right:2px}
/* eigen verzoekformulier en "op verzoek" */
.vz-form{display:flex;flex-direction:column;gap:12px}
.vz-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.88rem}
.vz-form label small{font-weight:400;color:var(--zacht)}
.vz-form input,.vz-form textarea{font:inherit;background:var(--bg);color:var(--tekst);border:1px solid var(--lijn);border-radius:12px;padding:11px 13px;resize:vertical}
.vz-form input:focus,.vz-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.vz-twee{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vz-live{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--zacht)}
.vz-live i,.vz-status i{width:9px;height:9px;border-radius:50%;background:var(--live);animation:spPuls 1.4s infinite;display:inline-block}
.vz-form .knop{align-self:flex-start}
.vz-uit{margin:0;font-weight:600;min-height:1.2em}.vz-uit.ok{color:#3fd68a}.vz-uit.fout{color:#ff6b6b}
.vz-dicht{text-align:center;padding:18px 10px}.vz-dicht h3{margin:6px 0}.vz-icoon{font-size:2.4rem}
.vz-status{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--zacht)}
.vz-status:not(.open) i{background:var(--zacht);animation:none}
.vz-status.open{color:#3fd68a}.vz-status.open i{background:#3fd68a}
.vz-ic{display:flex;align-items:center;justify-content:center;font-size:1rem}
.tk-dj{background:color-mix(in srgb,var(--live) 18%,transparent);border-color:color-mix(in srgb,var(--live) 45%,transparent)}
@media (max-width:600px){.vz-twee{grid-template-columns:1fr}}
.kaart.boven,.blok .boven{margin-top:16px}
/* modern hoofdmenu: knoppen in een capsule, actieve pagina gekleurd */
@media (min-width:901px){
  .menu{gap:2px;align-items:center;background:color-mix(in srgb,var(--kaart) 80%,transparent);border:1px solid var(--lijn);border-radius:14px;padding:4px}
  .menu>a,.menu-groep>a,.sub-knop.groep{padding:8px 13px;border-radius:10px;border-bottom:0!important;font-weight:500;font-size:.9rem;color:var(--zacht);transition:background .15s,color .15s}
  .menu>a:hover,.menu-groep>a:hover,.sub-knop.groep:hover{background:color-mix(in srgb,var(--tekst) 6%,transparent);color:var(--tekst)}
  .menu>a[aria-current],.menu-groep>a[aria-current],.sub-knop.groep.actief{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent));color:var(--op-accent);font-weight:700;box-shadow:0 4px 16px -6px var(--accent)}
  .menu-groep{gap:0}.menu-groep>.sub-knop:not(.groep){padding:8px 6px 8px 0}
  .submenu{top:calc(100% + 6px)}
  .menu-dj{display:none}
}
.gloed-sterk .menu{box-shadow:0 0 18px -10px var(--gloed)}
/* DJ-studio knop bovenin */
.kop-dj{display:flex;align-items:center;gap:6px;height:38px;padding:0 13px 0 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--lijn));background:color-mix(in srgb,var(--accent) 12%,var(--kaart));color:var(--tekst);text-decoration:none;font-weight:800;font-size:.78rem;letter-spacing:1px;transition:transform .15s,box-shadow .15s}
.kop-dj svg{color:var(--accent)}
.kop-dj:hover{transform:translateY(-1px);box-shadow:0 0 16px -4px var(--accent)}
/* DJ-studio knop onderaan */
.voet-dj{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:9px 16px 9px 12px;border-radius:14px;border:1px solid var(--lijn);background:var(--kaart);color:var(--tekst);text-decoration:none;text-align:left;transition:border-color .15s,box-shadow .15s}
.voet-dj svg{color:var(--accent);flex-shrink:0}
.voet-dj span{display:flex;flex-direction:column;line-height:1.25}
.voet-dj b{font-size:.88rem}.voet-dj small{font-size:.74rem;color:var(--zacht)}
.voet-dj:hover{border-color:var(--accent);box-shadow:0 0 18px -8px var(--accent)}
@media (max-width:900px){
  .kop-dj{display:none}
  .menu-dj{display:flex;align-items:center;gap:8px;color:var(--accent)!important;font-weight:700}
  .menu>a[aria-current]{color:var(--accent);font-weight:700}
}
@media (max-width:900px){.menu{top:100%;max-height:calc(100vh - 160px);overflow-y:auto;box-shadow:0 20px 40px -20px #000}}
/* DJ-knop bovenaan: rond icoon, net als de social-knoppen */
.kop-dj{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;border:1px solid var(--lijn);background:var(--kaart);font-size:0;letter-spacing:0;position:relative}
.kop-dj svg{color:var(--zacht);transition:color .15s}
.kop-dj:hover{border-color:var(--accent);box-shadow:0 0 14px -4px var(--accent);transform:none}
.kop-dj:hover svg{color:var(--accent)}
.kop-dj::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;white-space:nowrap;background:var(--kaart);border:1px solid var(--lijn);color:var(--tekst);font-size:.74rem;font-weight:600;padding:5px 9px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
.kop-dj:hover::after,.kop-dj:focus-visible::after{opacity:1}
/* DJ-knop bovenaan: smal, koptelefoon + "Inloggen voor DJ's" */
.kop-dj{width:auto;height:36px;padding:0 13px 0 10px;gap:7px;border-radius:12px;font-size:.8rem;font-weight:700;letter-spacing:0;white-space:nowrap;color:var(--tekst)}
.kop-dj svg{color:var(--accent);width:17px;height:17px}
.kop-dj::after{display:none}
.kop-dj:hover svg{color:var(--accent)}
/* ===== speler: stijlen (Uiterlijk > Speler) ===== */
.speler .sp-play{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 65%,#fff),var(--accent));color:var(--op-accent);border-radius:12px;box-shadow:0 6px 20px -8px var(--accent)}
.speler .sp-play.groen{background:#1f9d55;color:#fff;box-shadow:0 6px 20px -8px #1f9d55}
.speler.zonder-vol .sp-vol,.speler.zonder-luist .sp-luist,.speler.zonder-vz .sp-vz:not(.sp-stem){display:none!important}
/* zwevend en neon: afgeronde speler boven de onderkant */
.sp-zwevend,.sp-neon{left:50%;right:auto;bottom:14px;transform:translateX(-50%);width:min(980px,calc(100% - 24px));border:1px solid var(--lijn);border-radius:22px;padding:8px 10px 8px 8px;gap:14px;
  background:color-mix(in srgb,var(--kaart) 82%,transparent);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 22px 50px -22px rgba(0,0,0,.85),0 0 0 1px color-mix(in srgb,var(--tekst) 4%,transparent) inset}
.sp-zwevend .sp-hoes,.sp-neon .sp-hoes,.sp-compact .sp-hoes{width:56px;height:56px;border-radius:15px}
.sp-zwevend .sp-play,.sp-neon .sp-play,.sp-compact .sp-play{width:52px;height:52px;padding:0;border-radius:50%;font-size:1.1rem;flex-shrink:0}
.sp-zwevend #sp-tekst,.sp-neon #sp-tekst,.sp-compact #sp-tekst{display:none}
.sp-zwevend .sp-vz,.sp-neon .sp-vz{padding:9px 16px;border-radius:999px;font-size:.88rem}
.sp-zwevend .sp-vol input,.sp-neon .sp-vol input{width:84px}
body.speler-zwevend,body.speler-neon{padding-bottom:104px}
.gloed-sterk .sp-zwevend{border-color:color-mix(in srgb,var(--gloed) 50%,var(--lijn));box-shadow:0 22px 50px -22px rgba(0,0,0,.85),0 0 26px -10px var(--gloed)}
/* neon: gloeiende rand die door de kleuren loopt */
@property --sp-h{syntax:'<angle>';inherits:false;initial-value:0deg}
.sp-neonrand{isolation:isolate}
.sp-neonrand:not(.sp-balk){border-color:transparent}
.sp-neonrand::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--sp-h),var(--accent),var(--gloed),color-mix(in srgb,var(--accent) 40%,#fff),var(--gloed),var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spRand 6s linear infinite}
.sp-neonrand::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;box-shadow:0 0 34px -8px var(--gloed),0 0 60px -20px var(--accent)}
@keyframes spRand{to{--sp-h:360deg}}
.sp-neonrand .sp-play{box-shadow:0 0 22px -2px var(--accent)}
.sp-balk.sp-neonrand::before{inset:-2px 0 auto 0;height:2px;padding:0;border-radius:0;-webkit-mask:none;mask:none;background:linear-gradient(90deg,var(--accent),var(--gloed),var(--accent),var(--gloed));background-size:300% 100%;animation:spLijn 6s linear infinite}
@keyframes spLijn{to{background-position:300% 0}}
/* compact: klein kaartje rechtsonder */
.sp-compact{left:auto;right:16px;bottom:16px;width:min(380px,calc(100% - 24px));border:1px solid var(--lijn);border-radius:20px;padding:8px 8px 8px 8px;gap:12px;
  background:color-mix(in srgb,var(--kaart) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 44px -20px rgba(0,0,0,.85)}
.sp-compact .sp-vol,.sp-compact .sp-luist,.sp-compact .sp-vz,.sp-compact .sp-eq{display:none!important}
.sp-compact .sp-tekst b{font-size:.92rem}
body.speler-compact{padding-bottom:20px}
/* klassieke balk: wat strakker */
.sp-balk .sp-hoes{border-radius:12px}
@media (max-width:700px){
  .sp-zwevend,.sp-neon{bottom:8px;width:calc(100% - 16px);gap:10px;padding:6px 8px 6px 6px}
  .sp-zwevend .sp-hoes,.sp-neon .sp-hoes{width:48px;height:48px;border-radius:12px}
  .sp-zwevend .sp-play,.sp-neon .sp-play{width:48px;height:48px}
  .sp-compact{right:8px;bottom:8px;width:calc(100% - 16px)}
}
@media (prefers-reduced-motion:reduce){.sp-neonrand::before{animation:none}}
/* overige pagina's ook compacter */
.paginatitel{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-bottom:6px}
main h1:not(.held h1){font-size:clamp(1.35rem,2.4vw,1.85rem)}
.blok{margin-top:18px}
.kaart h2{font-size:1.08rem}
.dj-foto{width:92px;height:92px}
/* kopbalk: menu op één regel, ook met veel pagina's */
.kop .breed{max-width:1380px}
.logo{white-space:nowrap}
@media (min-width:901px){
  .menu{flex-wrap:nowrap;margin-left:auto;min-width:0}
  .menu>a,.menu-groep>a,.sub-knop.groep{padding:7px 11px;font-size:.86rem;white-space:nowrap}
}
@media (min-width:901px) and (max-width:1280px){
  .kop-dj span{display:none}.kop-dj{width:36px;padding:0;justify-content:center}
  .menu>a,.menu-groep>a,.sub-knop.groep{padding:7px 8px;font-size:.82rem}
  .kop-rij{gap:12px}
}
/* automatisch starten wacht op een klik: afspeelknop pulseert */
.wacht-op-klik .sp-play{animation:spKlik 1.6s ease-in-out infinite}
@keyframes spKlik{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 25%,transparent),0 0 24px var(--accent)}}
@media (prefers-reduced-motion:reduce){.wacht-op-klik .sp-play{animation:none}}
/* neon-rand: rustiger gloed */
.sp-neonrand::after{box-shadow:0 0 14px -6px var(--gloed),0 0 26px -16px var(--accent)}
.sp-balk.sp-neonrand::after{box-shadow:0 -4px 12px -10px var(--gloed)}
.sp-neonrand .sp-play{box-shadow:0 0 12px -4px var(--accent)}
.sp-balk.sp-neonrand::before{height:1.5px;inset:-1.5px 0 auto 0}
/* neon-lijn op de balk: even dun als de randen van de kaarten */
.sp-balk.sp-neonrand{border-top-color:transparent!important;box-shadow:none!important}
.sp-balk.sp-neonrand::before{height:1px;inset:-1px 0 auto 0;opacity:.85}
.sp-balk.sp-neonrand::after{box-shadow:none}
.sp-neonrand:not(.sp-balk)::before{inset:-1px;padding:1px}
.sp-label{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ---------- contactpagina (1.8.0) ---------- */
.ct-kop{text-align:center;max-width:680px;margin:0 auto 26px}
.ct-kop .paginatitel{margin-top:14px}
.ct-kop p{font-size:1.02rem;margin:0}
.ct-pil{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);margin-top:22px}
.ct-pil svg{width:15px;height:15px}
.ct-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}
.ct-raster.zonder-form{grid-template-columns:1fr;max-width:640px;margin:0 auto}
.ct-tegels{display:flex;flex-direction:column;gap:12px}
.ct-tegel{display:flex;align-items:center;gap:14px;padding:14px 16px!important;text-decoration:none;color:var(--tekst);transition:transform .18s,border-color .18s,box-shadow .18s}
.ct-tegel:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 28px -12px color-mix(in srgb,var(--accent) 60%,transparent)}
.ct-tegel .groei{display:flex;flex-direction:column;min-width:0}
.ct-tegel .groei .klein{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}
.ct-whatsapp .ct-ic{color:#25d366;background:rgba(37,211,102,.14)}
.ct-facebook .ct-ic{color:#4c8dff;background:rgba(76,141,255,.14)}
.ct-instagram .ct-ic{color:#ff5fa2;background:rgba(255,95,162,.14)}
.ct-tiktok .ct-ic{color:#25f4ee;background:rgba(37,244,238,.12)}
.ct-pijl{color:var(--zacht);font-size:1.1rem;transition:transform .18s,color .18s}
.ct-tegel:hover .ct-pijl{transform:translateX(3px);color:var(--accent)}
.ct-form{display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.ct-form h2{margin:0 0 4px}
.ct-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.88rem}
.ct-form input,.ct-form textarea,.ct-form select{font:inherit;background:var(--bg);color:var(--tekst);border:1px solid var(--lijn);border-radius:12px;padding:11px 13px;resize:vertical}
.ct-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--zacht) 50%),linear-gradient(135deg,var(--zacht) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.ct-form input:focus,.ct-form textarea:focus,.ct-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.ct-form .ct-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-voet{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ct-voet svg{width:17px;height:17px}
.ct-form .vz-uit:empty{display:none}
.ct-form.verstuurd .ct-velden{display:none}
@media (max-width:820px){.ct-raster{grid-template-columns:1fr}.ct-form{order:-1}}

/* ---------- non-stop verzoekpagina (1.9.4) ---------- */
.ns-zoek{position:relative;max-width:520px;margin:18px auto 8px}
.ns-zoek input{width:100%;padding:12px 16px 12px 44px;border-radius:999px;border:1px solid var(--lijn);background:var(--kaart);color:var(--tekst);font:inherit}
.ns-zoek input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.ns-zoek svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--zacht)}
.ns-tel{text-align:center;margin:0 0 16px}
.ns-raster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.ns-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:800px){.ns-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:540px){.ns-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.ns-nr{padding:11px!important;display:flex;flex-direction:column;gap:9px;transition:transform .15s,border-color .15s}
.ns-nr:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 60%,var(--lijn))}
.ns-hoes{aspect-ratio:1;border-radius:calc(var(--r) * .6);overflow:hidden;background:color-mix(in srgb,var(--lijn) 70%,#000);display:grid;place-items:center;position:relative}
.ns-hoes span{color:var(--zacht);font-size:2rem}
.ns-hoes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ns-wat{flex:1;min-height:2.7em}.ns-wat b{font-size:.9rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ns-wat span{display:block;color:var(--zacht);font-size:.78rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ns-knop{width:100%;padding:8px 10px!important;font-size:.85rem!important}
.ns-knop.ns-ok{background:#22c55e!important;border-color:#22c55e!important;color:#fff!important}
.ns-meer{display:block;margin:20px auto 0}
.ns-leeg{text-align:center;padding:30px 0}
#ns-toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:min(92vw,460px);padding:12px 18px;border-radius:14px;background:#111;color:#fff;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:.25s;text-align:center;z-index:60}
#ns-toast.toon{opacity:1;transform:translate(-50%,0)}#ns-toast.goed{background:#16803c}#ns-toast.fout{background:#a3282f}
/* non-stop: compacter + pagina's (1.9.5) */
.ns-raster{max-width:820px;margin:0 auto;gap:10px}
.ns-nr{padding:8px!important;gap:6px;border-radius:calc(var(--r) * .7)!important}
.ns-hoes{border-radius:calc(var(--r) * .45)}
.ns-hoes span{font-size:1.4rem}
.ns-wat{min-height:2.4em}.ns-wat b{font-size:.8rem}.ns-wat span{font-size:.72rem;margin-top:1px}
.ns-knop{padding:5px 8px!important;font-size:.76rem!important;min-height:0!important}
.ns-zoek{max-width:460px}.ns-zoek input{padding:9px 14px 9px 40px;font-size:.9rem}
.ns-blad{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:18px 0 0}
.ns-blad button{min-width:36px;height:36px;padding:0 10px;border-radius:999px;border:1px solid var(--lijn);background:var(--kaart);color:var(--tekst);font:inherit;font-weight:600;cursor:pointer}
.ns-blad button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.ns-blad button[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--op-accent,#fff)}
.ns-blad button:disabled{opacity:.35;cursor:default}
.ns-blad span{align-self:center;color:var(--zacht);padding:0 2px}
@media (max-width:540px){.ns-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ns-knop{font-size:.7rem!important}}
/* speler: knoppen nooit op twee regels, lange titels worden afgekapt (1.10.1) */
.speler .sp-vz,.speler .sp-stem{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
.speler .sp-info,.speler .sp-tekst{min-width:0;flex:1 1 auto}
.speler #sp-titel,.speler .sp-label,.speler #sp-artiest{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:700px){.speler .sp-stem{display:none}}
/* lichtkrant voor lange titels in de speler (1.10.2) */
.speler .loopt{text-overflow:clip!important;mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 18px),transparent)}
.speler .loopt .sp-lk{display:inline-flex;gap:48px;animation:sp-lichtkrant var(--lt-duur,14s) linear 2s infinite;will-change:transform}
.speler .loopt:hover .sp-lk{animation-play-state:paused}
@keyframes sp-lichtkrant{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 24px))}}
@media (prefers-reduced-motion:reduce){.speler .loopt .sp-lk{animation:none}}
.speler .loopt .sp-lk{display:inline-flex!important;flex-direction:row!important;width:max-content}
.speler .loopt .sp-lk>span{display:inline-block!important;flex:none;white-space:nowrap}
.speler .sp-luist{white-space:nowrap}