/*
Theme Name: Hidden Garden
Theme URI: https://hiddengarden.nl/
Author: Digital Rebelz
Description: Eigen licht thema voor Hidden Garden (Festival en Indoor). Geen paginabouwer, geen jQuery.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hiddengarden
*/
:root{--bg:#050309;--vlak:#0b0816;--tegel:#140f24;--mint:#EDFDFA;--lila:#9a6cff;--amber:#f2b33d;--grijs:#b9b4c9;--zacht:#8d88a3;--lijn:#2a2340;--accent:var(--lila);--kop:"BigNoodle",Impact,"Arial Narrow",sans-serif}
.thema-festival{--accent:var(--amber)}
.thema-indoor{--accent:var(--lila)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--mint);font:16px/1.6 Arial,Helvetica,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--mint)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--mint);color:#000;padding:8px 12px;z-index:50}
.skip:focus{left:8px}
.kop{font-family:var(--kop);font-weight:normal;letter-spacing:.01em;line-height:.95;margin:0 0 14px;text-transform:uppercase}
h2.kop{font-size:clamp(32px,7vw,48px)}
.kop-groot{font-size:clamp(48px,12vw,104px)}
.kop a{text-decoration:none}
.datum{font-family:var(--kop);font-size:clamp(20px,4.5vw,26px);color:var(--grijs);margin:0 0 8px;letter-spacing:.03em;text-transform:uppercase}
.sub{font-family:var(--kop);font-size:clamp(24px,5.5vw,36px);color:var(--accent);margin:0 0 14px;text-transform:uppercase}
.lead{font-family:var(--kop);font-size:26px;line-height:1.2;letter-spacing:.02em;margin:0 0 14px}
.grijs{color:var(--grijs)}
.zacht{font-size:13px;line-height:1.6;color:var(--zacht)}
.smal{max-width:760px;margin:0 auto;padding:0 16px}
.breed{max-width:1180px;margin:0 auto;padding:0 16px}
.blok{margin:44px 0}
.kaart{background:var(--vlak);border:1px solid var(--lijn);padding:24px 18px;margin:28px 0}
.inhoud{padding-bottom:40px}
.inhoud h2{font-family:var(--kop);font-weight:normal;font-size:32px;text-transform:uppercase;margin:32px 0 8px}

/* Knoppen: altijd minstens 44 px hoog */
.knop{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:18px;padding:14px 16px;background:var(--mint);color:#0b0b0b;border:0;font:normal 22px/1.25 var(--kop);letter-spacing:.05em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;border-radius:0}
.knop:hover{background:#fff}
.knop-ticket{background:var(--accent);color:#0b0614}
.knop-ticket:hover{background:var(--mint)}
.knop-rand{background:transparent;color:var(--mint);border:2px solid var(--mint)}
.knop-rand:hover{background:var(--mint);color:#0b0614}
.knop-wit{background:#fff;color:#0b0614}
.knop-klein{display:inline-flex;width:auto;min-height:44px;margin:0;padding:8px 14px;font-size:14px}
.meer{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--grijs)}

/* Bovenbalk */
.balk{position:sticky;top:0;z-index:30;background:rgba(5,3,9,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.balk-in{max-width:1280px;margin:0 auto;padding:6px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:60px}
.logo{display:flex;align-items:center;min-height:44px}
.logo img{height:34px;width:auto}
.taal{margin-left:auto;display:flex;border:1px solid var(--lijn)}
.taal a{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;font:normal 19px var(--kop);letter-spacing:.05em;text-decoration:none;color:var(--grijs)}
.taal abbr{text-decoration:none}
.taal a[aria-current]{background:var(--mint);color:var(--bg)}
.knop-tickets{background:var(--lila);color:#0b0614}
.menuknop{background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative;padding:0;flex:none}
.menuknop-streep,.menuknop-streep::before,.menuknop-streep::after{position:absolute;left:10px;width:24px;height:2px;background:var(--mint);content:"";transition:transform .2s}
.menuknop-streep{top:21px}.menuknop-streep::before{top:-7px;left:0}.menuknop-streep::after{top:7px;left:0}
.menuknop[aria-expanded=true] .menuknop-streep{background:transparent}
.menuknop[aria-expanded=true] .menuknop-streep::before{transform:translateY(7px) rotate(45deg)}
.menuknop[aria-expanded=true] .menuknop-streep::after{transform:translateY(-7px) rotate(-45deg)}
.menu{display:none;width:100%;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;padding-bottom:16px}
.menu.open{display:block}
.menu-lijst{list-style:none;margin:0;padding:4px 0 8px}
.menu-lijst>li>a,.menu-uitklap{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:8px 0;font-family:var(--kop);font-size:30px;line-height:1;text-transform:uppercase;text-decoration:none;color:var(--mint);background:none;border:0;border-bottom:1px solid var(--lijn);cursor:pointer;text-align:left}
.menu-lijst a[aria-current]{color:var(--lila)}
.pijl{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 8px 6px;transition:transform .2s}
.menu-events.open .pijl{transform:rotate(-135deg);margin-bottom:0}
.events-paneel{display:none}
.menu-events.open .events-paneel{display:block}
.events-in{display:grid;gap:22px;padding:18px 0 10px}
.ev-titel{display:inline-block;font-family:var(--kop);font-size:32px;line-height:1;text-transform:uppercase;text-decoration:none;color:var(--mint);border-bottom:4px solid var(--accent);padding-bottom:4px}
.ev-meta{margin:10px 0 0;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--grijs)}
.ev-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ev-knoppen .knop{margin-top:12px}
.sociaal{list-style:none;padding:0;margin:8px 0;display:flex;flex-wrap:wrap;gap:4px}
.sociaal a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--mint)}
.sociaal a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sociaal a:hover{color:var(--lila)}
.sociaal-menu{margin-top:12px}

/* Startpagina: twee evenementen */
.duo{display:grid;grid-template-columns:1fr}
.duo-vak{position:relative;min-height:68vh;min-height:68svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--vlak);border-bottom:1px solid var(--lijn)}
.duo-beeld,.held-beeld{position:absolute;inset:0}
.duo-beeld img,.held-beeld img{width:100%;height:100%;object-fit:cover}
.duo-vak::after,.held::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,9,.15) 0%,rgba(5,3,9,.35) 35%,rgba(5,3,9,.82) 68%,var(--bg) 100%)}
.thema-indoor .duo-beeld img,.thema-indoor .held-beeld img{object-position:50% 40%}
.thema-festival .duo-beeld img,.thema-festival .held-beeld img{object-position:50% 45%}
/* Staand scherm: festivalfoto 2026 iets naar rechts, zodat dj-booth, discoballen en publiek in beeld zijn */
@media (orientation:portrait){.thema-festival .duo-beeld img,.thema-festival .held-beeld img{object-position:62% 50%}}
.duo-in{position:relative;z-index:1;width:100%;padding:24px 16px 28px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.duo-in .kop-groot{font-size:clamp(44px,12vw,96px)}
.held-video{position:absolute;inset:0;overflow:hidden}
.held-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.held-video video.aan{opacity:1}
.held-merk{margin:0 0 14px;width:62vw;max-width:300px}
.held-merk-sub{display:block;font-family:var(--kop);font-size:clamp(28px,8vw,44px);letter-spacing:.42em;line-height:1;text-align:center;color:#fff;margin-top:6px;padding-left:.42em;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.held-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
@media (min-width:1080px){.held-merk{max-width:360px}}
.namen{font-family:var(--kop);font-size:clamp(24px,6vw,40px);text-transform:uppercase;margin:0 0 4px;color:var(--accent)}
.aftel{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--grijs);margin:6px 0 0}
.tekstblok{padding-top:40px;padding-bottom:8px}
.tegels-links{display:grid;grid-template-columns:1fr;gap:10px;margin:24px auto 56px}
.tegel-link{display:block;padding:20px 18px;background:var(--tegel);border-top:3px solid var(--lila);text-decoration:none}
.tegel-link .kop{display:block;font-size:34px;margin:0 0 4px}

/* Collage met parallax */
.sfeer{overflow:hidden;padding:24px 0 8px}
.collage{position:relative;max-width:1180px;margin:0 auto;aspect-ratio:4/5}
.collage .c{position:absolute;margin:0;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.55);will-change:transform;background:var(--tegel)}
.collage .c img{width:100%;height:100%;object-fit:cover}
.collage-band{position:absolute;left:-10%;right:-10%;top:42%;height:22%;background:var(--accent);opacity:.9;transform:rotate(-8deg);will-change:transform}
.collage .c1{left:4%;top:2%;width:62%;aspect-ratio:3/2;z-index:2}
.collage .c2{right:3%;top:30%;width:56%;aspect-ratio:4/5;z-index:3}
.collage .c3{left:8%;top:62%;width:52%;aspect-ratio:3/2;z-index:4}
.collage .c4,.collage .c5,.collage .c6{display:none}

/* Video: lichte gevel met miniatuur */
.video{position:relative;aspect-ratio:16/9;background:var(--tegel);border:1px solid var(--lijn);overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-start{position:absolute;inset:0;width:100%;padding:0;background:#000;border:0;color:var(--mint);cursor:pointer}
.video-start img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .2s}
.video-start:hover img{opacity:.95}
.video-speel{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;background:rgba(5,3,9,.75);border:2px solid var(--mint)}
.video-speel::after{content:"";position:absolute;left:29px;top:22px;border-left:20px solid var(--mint);border-top:14px solid transparent;border-bottom:14px solid transparent}
.video-tekst{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.8));font:normal 20px/1.3 var(--kop);letter-spacing:.05em;text-transform:uppercase;text-align:left}
.video-tekst small{font-weight:normal;text-transform:none;letter-spacing:0;color:var(--grijs)}
.videoraster{display:grid;grid-template-columns:1fr;gap:16px}

/* Sets per artiest */
.sets{grid-column:1/-1;margin-top:6px}
.sets summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--lila);color:var(--mint);font:normal 19px var(--kop);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;list-style:none}
.sets summary::-webkit-details-marker{display:none}
.sets[open] summary{background:var(--lila);color:#0b0614}
.sets-lijst{display:grid;grid-template-columns:1fr;gap:14px;padding:14px 0 4px}
.set .zacht{margin:6px 0 0}
.podcast .knop{margin-top:0}

/* Ons verhaal */
.tijdlijn{list-style:none;margin:24px auto 24px;padding-left:16px;padding-right:16px}
.tijd-item{position:relative;padding:0 0 36px 24px;border-left:2px solid var(--lijn)}
.tijd-item::before{content:"";position:absolute;left:-8px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.tijd-jaar{font-family:var(--kop);font-size:clamp(40px,10vw,64px);line-height:1;color:var(--accent);margin:0 0 6px}
.tijd-item h2.kop{font-size:clamp(26px,6vw,36px)}
.tijd-fotos{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tijd-fotos img{width:100%;aspect-ratio:1;object-fit:cover}

/* Kop van een omgeving of pagina */
.held{position:relative;min-height:70vh;min-height:70svh;display:flex;align-items:flex-end;overflow:hidden}
.held-in{position:relative;z-index:1;width:100%;max-width:760px;margin:0 auto;padding:40px 16px 28px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.paginakop{padding:48px 0 8px;border-bottom:1px solid var(--lijn);margin-bottom:8px}
.paginakop .knop{margin-top:12px}

/* Line-up en info */
.lineup{list-style:none;margin:0;padding:0}
.lineup li{display:grid;grid-template-columns:1fr;padding:12px 0;border-bottom:1px solid var(--lijn)}
.lineup .tijd{font-size:13px;letter-spacing:2px;color:var(--accent)}
.lineup .act{font-family:var(--kop);font-size:clamp(30px,7vw,44px);text-transform:uppercase;line-height:1}
.info dl{display:grid;grid-template-columns:96px 1fr;row-gap:10px;margin:0}
.info dt{font-size:12px;font-weight:bold;letter-spacing:2px;color:var(--accent);padding-top:3px;text-transform:uppercase}
.info dd{margin:0}

/* Veelgestelde vragen */
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{cursor:pointer;list-style:none;min-height:44px;padding:14px 36px 14px 0;position:relative;font-weight:bold;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:26px;color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-antwoord{padding:0 0 16px;color:var(--grijs)}
.faq-antwoord p{margin:0}
.aanvullen{display:inline-block;background:#ffcf4a;color:#111;font-size:13px;font-weight:bold;padding:2px 8px}
.bron{font-size:12px;color:var(--zacht)}

/* Terugblik-lijst */
.edities{list-style:none;margin:0;padding:0}
.edities a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;min-height:44px;padding:12px 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.edities .kop{font-size:26px;margin:0;min-width:0}
.edities .grijs{font-size:14px;white-space:nowrap}

/* Wall of Fame */
.wall-bediening{position:sticky;top:61px;z-index:5;background:var(--bg);padding:14px 0;display:grid;gap:10px}
.wall input[type=search]{width:100%;padding:14px;background:var(--vlak);border:1px solid var(--lijn);color:var(--mint);font:inherit;border-radius:0;-webkit-appearance:none}
.wissel{display:flex}
.wissel button{flex:1;min-height:44px;padding:10px 12px;background:transparent;border:1px solid var(--lijn);color:var(--grijs);font:normal 19px var(--kop);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.wissel button[aria-selected=true]{background:var(--lila);border-color:var(--lila);color:#0b0614}
.jaar{margin:28px 0}
.jaartal{font-size:clamp(56px,14vw,96px);color:var(--lila);margin:0 0 6px}
.wall-editie h3{font-size:24px;letter-spacing:.04em;text-transform:uppercase;margin:16px 0 8px}
.wall-editie h3 a{text-decoration:none;border-bottom:1px solid var(--lila)}
.namenlijst{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.namenlijst li{background:var(--tegel);padding:6px 10px;font-size:15px}
.namenlijst.groot li{font-family:var(--kop);font-size:24px;text-transform:uppercase;padding:6px 12px}
.az-lijst{list-style:none;margin:0;padding:0}
.az-lijst li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.az-naam{font-family:var(--kop);font-size:28px;text-transform:uppercase;line-height:1}
.az-keer{color:var(--lila);font-weight:bold;white-space:nowrap}
.az-data{grid-column:1/-1;font-size:13px;color:var(--grijs)}
.az-regel{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px;color:var(--grijs)}
.az-jaren{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.az-ic{display:inline-block;width:18px;text-align:center;font-size:15px}
.az-festival .az-ic{color:#f2b84b}.az-indoor .az-ic{color:var(--lila)}
.az-soort{color:var(--mint);font-weight:bold}
.az-data a{color:var(--mint);display:inline-block;padding:6px 0}
.az-lijst li[id]{scroll-margin-top:96px}
.az-lijst li:target{background:rgba(154,108,255,.12);box-shadow:-12px 0 0 rgba(154,108,255,.12),12px 0 0 rgba(154,108,255,.12)}
.kruis-anker{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;color:var(--lila);font-weight:bold;letter-spacing:.04em}
.az-data .kruis-anker{display:inline;min-height:0;padding:6px 0}
.naam-link{color:var(--mint);font-weight:bold;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;padding:4px 0}
.sets-mini{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid currentColor;padding:2px 6px;margin:0 2px;vertical-align:2px;line-height:1.2}
.duo-intro{max-width:34em;margin:0 0 14px;color:var(--mint);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.ticketfasen{margin:28px 0 8px}
.fasen{list-style:none;margin:12px 0 6px;padding:0;display:grid;gap:10px}
.fase{border:1px solid var(--lijn);background:var(--vlak);padding:12px 14px}
.fase-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0}
.fase-naam{font-family:var(--kop);font-size:26px;text-transform:uppercase;line-height:1}
.fase-label{font-weight:bold;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;white-space:nowrap}
.fase-uitverkocht{opacity:.75}
.fase-uitverkocht .fase-naam{text-decoration:line-through;text-decoration-thickness:2px}
.fase-uitverkocht .fase-label{background:#3a3150;color:var(--mint)}
.fase-te_koop{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fase-te_koop .fase-label{background:var(--accent);color:#0b0614}
.fase-binnenkort .fase-label{border:1px solid var(--zacht);color:var(--grijs)}
.fase-meter{height:14px;background:#231c36;margin:12px 0 6px;overflow:hidden}
.fase-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#c9a8ff);transition:width 1.2s ease}
.fase-pct{margin:0;font-weight:bold}
@media (prefers-reduced-motion:reduce){.fase-meter span{transition:none}}
@media (min-width:760px){.fasen{grid-template-columns:repeat(2,1fr)}}
.kruislink{width:auto;display:inline-flex;margin-top:8px}

/* Foto's en video's */
.editie-raster{list-style:none;margin:16px 0 56px;padding:0;display:grid;grid-template-columns:1fr;gap:18px}
.editie-raster a{display:block;text-decoration:none}
.editie-beeld{display:block;aspect-ratio:3/2;background:var(--tegel);overflow:hidden;margin-bottom:10px;border-top:3px solid var(--accent)}
.editie-beeld img{width:100%;height:100%;object-fit:cover}
.geen-beeld{display:flex;height:100%;align-items:center;justify-content:center;font-family:var(--kop);font-size:28px;color:var(--zacht);text-transform:uppercase}
.editie-raster .kop{display:block;font-size:30px;margin:0}
.editie-raster .grijs{font-size:14px}
.video{position:relative;aspect-ratio:16/9;background:var(--tegel);border:1px solid var(--lijn)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-start{position:absolute;inset:0;width:100%;background:transparent;border:0;color:var(--mint);font:normal 23px var(--kop);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.video-leeg{display:flex;align-items:center;justify-content:center}
.video-leeg p,.video-leeg.klein{font-family:var(--kop);font-size:36px;color:var(--zacht);text-transform:uppercase;margin:0}
.fotoraster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.fotoraster a{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--tegel)}
.fotoraster img{width:100%;height:100%;object-fit:cover}
.lichtbak{border:0;padding:0;background:transparent;max-width:96vw;max-height:92vh}
.lichtbak::backdrop{background:rgba(0,0,0,.9)}
.lichtbak img{max-width:96vw;max-height:88vh;width:auto;margin:0 auto}
.lichtbak-dicht,.lichtbak-vorige,.lichtbak-volgende{position:fixed;background:rgba(0,0,0,.5);border:0;color:#fff;font-size:42px;cursor:pointer;line-height:1;width:48px;height:48px;z-index:2}
.lichtbak-dicht{top:8px;right:8px}
.lichtbak-vorige{left:4px;top:50%;margin-top:-24px}
.lichtbak-volgende{right:4px;top:50%;margin-top:-24px}

/* Tickets-keuze */
.keuze-tickets{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:40px}
.keuze-tickets .kaart{border-top:3px solid var(--accent)}

/* Formulieren */
.formulier label{display:block;font-size:12px;font-weight:bold;letter-spacing:2px;color:var(--lila);margin:16px 0 6px;text-transform:uppercase}
.formulier input[type=text],.formulier input[type=email],.formulier textarea{width:100%;padding:14px;background:var(--bg);border:1px solid var(--lijn);color:var(--mint);font:inherit;border-radius:0}
.rij{display:grid;grid-template-columns:1fr;gap:0 12px}
.formulier .vink{display:flex;gap:10px;align-items:flex-start;min-height:44px;font-size:14px;color:var(--grijs);text-transform:none;letter-spacing:0;font-weight:normal;margin:10px 0 0}
.vink input{margin-top:1px;width:22px;height:22px;accent-color:var(--lila);flex:none}
.keuze{border:0;padding:0;margin:16px 0 0;display:flex;gap:18px;flex-wrap:wrap}
.keuze legend{font-size:12px;font-weight:bold;letter-spacing:2px;color:var(--lila);text-transform:uppercase;padding:0;margin-bottom:2px;width:100%}
.fout{color:#ff6b8a;font-size:14px;margin:8px 0 0;min-height:1em}
.binnenkort{display:inline-block;background:#ffcf4a;color:#111;font:normal 17px var(--kop);letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;margin:0 0 12px}
.nieuwsbrief .knop[type=button]{opacity:.85}
.valkuil{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.melding{padding:12px 14px;margin:0 0 8px;font-size:15px}
.melding-goed{background:#12361f}.melding-test{background:#3a2f05}.melding-fout{background:#3d0f1a}

/* Voettekst */
.voet{border-top:1px solid var(--lijn);margin-top:40px;padding:8px 0 40px}
.voet-in{max-width:760px;margin:0 auto;padding:0 16px}
.voet-onder{text-align:center;padding-top:8px}
.voet-logo{height:56px;width:auto;margin:16px auto}
.voet-links{list-style:none;padding:0;margin:8px 0;display:flex;justify-content:center;flex-wrap:wrap;gap:0 18px}
.voet-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--grijs)}
.sociaal-voet{justify-content:center}
.sociaal-contact{margin:0}

/* Groter dan een kleine telefoon */
@media (min-width:560px){
	.rij{grid-template-columns:1fr 1fr}
	.editie-raster{grid-template-columns:repeat(2,1fr)}
	.fotoraster{grid-template-columns:repeat(3,1fr)}
	.lineup li{grid-template-columns:150px 1fr;align-items:baseline}
	.info dl{grid-template-columns:120px 1fr}
	.kaart{padding:28px 24px}
	.wall-bediening{grid-template-columns:1fr auto}
	.wissel button{flex:none;padding:10px 18px}
	.videoraster{grid-template-columns:repeat(2,1fr)}
	.sets-lijst{grid-template-columns:repeat(2,1fr)}
	.balk-in{padding:6px 16px;gap:12px}
}
/* Tablet staand en groter */
@media (min-width:760px){
	.duo{grid-template-columns:1fr 1fr}
	.duo-vak{min-height:72vh;min-height:72svh;border-bottom:0}
	.duo-vak+.duo-vak{border-left:1px solid var(--lijn)}
	.duo-in{padding:28px 28px 36px}
	.duo-in .kop-groot{font-size:clamp(48px,7vw,96px)}
	.tegels-links{grid-template-columns:repeat(3,1fr)}
	.keuze-tickets{grid-template-columns:1fr 1fr;gap:24px}
	.collage{aspect-ratio:16/9}
	.collage .c4,.collage .c5{display:block}
	.collage .c1{left:2%;top:4%;width:38%}
	.collage .c2{left:30%;top:22%;width:30%;aspect-ratio:4/5}
	.collage .c3{right:2%;left:auto;top:6%;width:36%}
	.collage .c4{left:6%;top:56%;width:28%;aspect-ratio:3/2;z-index:5}
	.collage .c5{right:6%;top:52%;width:34%;aspect-ratio:3/2;z-index:2}
	.collage-band{top:40%;height:20%}
	.events-in{grid-template-columns:1fr 1fr;gap:28px}
	.held-in .knop,.duo-in .knop{max-width:460px}
}
/* Desktop: menu in de balk, Events als uitklappaneel over de volle breedte */
@media (min-width:1080px){
	.menuknop{display:none}
	.balk-in{flex-wrap:nowrap}
	.menu{display:flex;align-items:center;width:auto;order:2;margin-left:24px;max-height:none;overflow:visible;padding:0}
	.menu .sociaal-menu{display:none}
	.taal{order:3;margin-left:auto}
	.knop-tickets{order:4}
	.menu-lijst{display:flex;align-items:center;padding:0}
	.menu-lijst>li{display:flex;align-items:center}
	.menu-lijst>li+li::before{content:"";width:1px;height:22px;background:rgba(237,253,250,.35)}
	.menu-lijst>li>a,.menu-uitklap{width:auto;min-height:44px;padding:6px 16px;font-size:21px;border:0;white-space:nowrap}
	.menu-uitklap .pijl{width:8px;height:8px;margin:0 0 4px 8px}
	.menu-lijst>li>a:hover,.menu-uitklap:hover{color:var(--lila)}
	.events-paneel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px}
	.events-paneel{position:absolute;left:0;right:0;top:100%;background:rgba(5,3,9,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
	.events-in{max-width:1180px;margin:0 auto;padding:32px 24px 36px;gap:48px}
	.ev-titel{font-size:44px}
	.ev-knoppen{max-width:420px}
	.collage .c6{display:block;right:30%;top:68%;width:22%;aspect-ratio:1;z-index:6}
	.fotoraster{grid-template-columns:repeat(4,1fr)}
	.editie-raster{grid-template-columns:repeat(3,1fr)}
	.videoraster{grid-template-columns:repeat(3,1fr)}
	.videoraster-2{grid-template-columns:repeat(2,1fr)}
	.duo-vak{min-height:calc(100vh - 61px)}
	.duo-in{padding:32px 40px 48px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.collage [data-laag]{transform:none!important}.collage-band{transform:rotate(-8deg)!important}}
/* Correcties na de test van 29 okt */
.smal.blok{margin:44px auto}
.wall-editie h3 a{display:inline-block;padding:12px 0 10px;line-height:1.3}
.sfeer{padding-bottom:0}
.voet-nieuwsbrief .toestemming a,.formulier .vink a{display:inline-block;padding:12px 0}
.video-sc .video-start{background:linear-gradient(135deg,#ff5500 0%,#2a1250 70%)}
.sc-merk{position:absolute;left:12px;top:10px;font:normal 19px var(--kop);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.videoraster-hg>div:first-child{grid-column:1/-1}
/* Wall of Fame: filter 'Met livesets' en dj-profiel (modal; telefoon schermvullend) */
.wall-bediening{display:grid;gap:10px;margin:0 0 20px}
.wall-bediening input[type=search]{width:100%;min-height:44px;padding:10px 12px;background:var(--vlak);border:1px solid var(--lijn);color:var(--mint);font:16px Arial,sans-serif}
.filter-sets{min-height:44px;padding:10px 14px;background:transparent;border:1px solid var(--accent);color:var(--mint);font:normal 19px var(--kop);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;text-align:left}
.filter-sets[aria-pressed=true]{background:var(--accent);color:#0b0614}
.filter-sets[aria-pressed=true] .zacht{color:#0b0614}
.wall[data-sets-aan] [data-wall-naam]:not([data-heeft-sets]){display:none}
@media (min-width:760px){.wall-bediening{grid-template-columns:1fr auto auto;align-items:stretch}}
.dj-link{color:var(--mint);font-family:var(--kop);font-weight:normal;font-size:1.35em;letter-spacing:.03em;text-decoration:underline;text-decoration-color:rgba(154,108,255,.55);text-underline-offset:3px;padding:6px 0;display:inline-block}
.dj-link:hover,.dj-link:focus-visible{text-decoration-color:var(--accent);color:#fff}
.sets-teken{color:var(--accent);font-size:14px}
.dj-modal{border:0;padding:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--vlak);color:var(--mint);overscroll-behavior:contain}
.dj-modal::backdrop{background:rgba(5,3,9,.85)}
.dj-modal[open]{display:block;overflow-y:auto}
.dj-inhoud{padding:64px 16px 32px}
.dj-dicht{position:sticky;top:0;float:right;margin:8px 8px -52px 0;width:44px;height:44px;border:1px solid var(--lijn);background:var(--bg);color:var(--mint);font-size:28px;line-height:1;cursor:pointer;z-index:2}
.dj-kop{display:flex;gap:16px;align-items:center;margin:0 0 16px}
.dj-foto,.dj-initialen{flex:0 0 auto;width:96px;height:96px;object-fit:cover;border:3px solid var(--accent)}
.dj-initialen{display:flex;align-items:center;justify-content:center;background:var(--tegel);font-family:var(--kop);font-size:40px;color:var(--accent)}
.dj-naam{font-size:clamp(30px,8vw,48px);line-height:1;margin:0 0 4px;text-transform:uppercase}
.dj-kop .zacht{margin:0}
.dj-bio{line-height:1.6;margin:0 0 6px}
.dj-credit{font-size:12px;margin:0 0 16px}
.dj-sub{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:22px 0 8px}
.dj-edities{list-style:none;margin:0;padding:0}
.dj-edities li{border-bottom:1px solid var(--lijn)}
.dj-edities a{display:block;padding:12px 0;color:var(--mint)}
.dj-sets{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.dj-sets .zacht{margin:6px 0 0;font-size:13px}
@media (min-width:760px){
.dj-modal{width:min(760px,92vw);height:auto;max-height:88vh;margin:auto;border:1px solid var(--lijn)}
.dj-inhoud{padding:56px 32px 32px}
.dj-foto,.dj-initialen{width:140px;height:140px}
.dj-sets{grid-template-columns:1fr 1fr}
}
.namenlijst .dj-link{padding:0}
.terug{margin:0 0 14px}
.terug a,.terug-onder a{display:inline-block;padding:10px 0;color:var(--mint);font:normal 19px var(--kop);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--accent)}
.editie-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:40px auto 8px}
.editie-nav a{display:flex;flex-direction:column;gap:4px;padding:14px;background:var(--tegel);color:var(--mint);text-decoration:none;font-weight:bold;min-height:44px}
.editie-nav .editie-volg{text-align:right;grid-column:2}
.editie-nav .zacht{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:normal}
.terug-onder{margin:8px auto 40px}
.tijd-item[id]{scroll-margin-top:90px}
/* Ambassadeur */
.held-kort{min-height:62vh}
.amb .lead{margin-top:24px}
.amb-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}
.amb-tegels div{background:var(--tegel);border-top:3px solid var(--accent);padding:16px 6px;text-align:center}
.amb-tegels b{display:block;font-size:clamp(20px,5vw,30px)}
.amb-tegels div>span{display:block;font-size:11px;letter-spacing:1px;color:var(--grijs);text-transform:uppercase;line-height:1.4}
.amb-form input[type=tel]{width:100%;padding:14px;background:var(--bg);border:1px solid var(--lijn);color:var(--mint);font:inherit;border-radius:0;-webkit-appearance:none}
.amb-rij{display:grid;gap:0 12px}
@media (min-width:560px){.amb-rij{grid-template-columns:1fr 1fr}}
.amb-hint{margin:6px 0 0;font-size:13px}
.amb-stappen{list-style:none;counter-reset:s;margin:0 0 28px;padding:0}
.amb-stappen li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:0 0 18px}
.amb-stappen li::before{content:counter(s);grid-row:span 2;font:normal 52px/1.1 var(--kop);color:var(--accent)}
.amb-stappen strong{display:block;font-size:17px}
.amb-linkvak{width:100%;margin-top:12px;padding:14px;background:var(--bg);border:1px solid var(--accent);color:var(--mint);font:15px Arial,sans-serif}
.amb-wa{background:#25D366;color:#06210f}
.amb-link{border-color:var(--accent)}
.amb-regels .kop{color:var(--mint);font-size:34px}
/* Artiestfoto's en speeltegels */
.dj-link.met-foto{display:inline-flex;align-items:center;gap:8px}
.dj-mini{width:28px;height:28px;object-fit:cover;flex:0 0 auto;border:1px solid var(--accent)}
.az-naam .dj-mini{width:36px;height:36px}
.dj-figuur{margin:0;flex:0 0 auto;text-align:center}
.dj-figuur .dj-credit{font-size:11px;color:var(--zacht);margin-top:4px;max-width:140px}
.dj-sub{display:block}
.dj-tegels{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dj-tegels a,.dj-tegels span{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;background:var(--tegel);border:1px solid var(--accent);color:var(--mint);font:normal 20px var(--kop);letter-spacing:.05em;text-decoration:none}
.dj-tegels a:hover,.dj-tegels a:focus-visible{background:var(--accent);color:#0b0614}
.dj-audio,.dj-video{grid-template-columns:1fr}
@media (min-width:760px){.dj-video{grid-template-columns:1fr 1fr}}
/* Social-knoppen altijd in beeld: telefoon/tablet onderbalk, desktop verticale strip rechts */
.sociaal-vast{position:fixed;left:0;right:0;bottom:0;z-index:25;margin:0;justify-content:center;gap:18px;background:rgba(5,3,9,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--lijn);padding:0 0 env(safe-area-inset-bottom)}
.sociaal-vast a{min-height:44px;min-width:44px}
.sociaal-vast svg{width:20px;height:20px}
body{padding-bottom:calc(46px + env(safe-area-inset-bottom))}
@media (min-width:1024px){
body{padding-bottom:0}
.sociaal-vast{left:auto;right:0;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:0;border:1px solid var(--lijn);border-right:0;padding:4px 0}
}
/* Festival: geen donkere laag over het beeld; alleen een smalle verloopband onder de tekst + tekstschaduw */
.held.thema-festival::after,.duo-vak.thema-festival::after{background:linear-gradient(180deg,rgba(5,3,9,0) 0%,rgba(5,3,9,0) 58%,rgba(5,3,9,.45) 78%,var(--bg) 100%)}
.thema-festival .held-in,.thema-festival .duo-in{text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 18px rgba(0,0,0,.7)}
.thema-festival .knop{text-shadow:none}
.fout.gelukt{color:#7CF2C2}

/* ---------- Spelerbalk (assets/speler.js): vast onderin, boven de social-balk op telefoon/tablet ---------- */
.sp,.sp[popover]{position:fixed;left:0;right:0;bottom:calc(46px + env(safe-area-inset-bottom));top:auto;z-index:26;margin:0;padding:0;border:0;width:auto;height:auto;max-width:none;max-height:none;overflow:visible;background:transparent;color:var(--mint);inset:auto 0 calc(46px + env(safe-area-inset-bottom)) 0}
.sp[hidden]{display:none}
.sp[popover]:not(:popover-open){display:none}
.sp-balk{background:rgba(11,8,22,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--lijn);position:relative}
.sp-rij{display:flex;align-items:center;gap:2px;padding:6px 8px 4px;max-width:1180px;margin:0 auto;min-height:58px}
.sp-ik{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:44px;padding:0;background:transparent;border:0;color:var(--mint);cursor:pointer;font:22px/1 Arial,sans-serif}
.sp-ik:hover:not(:disabled){color:var(--lila)}
.sp-ik:disabled{opacity:.35;cursor:default}
.sp-speel{width:46px;height:46px;background:var(--lila);color:#0b0614;margin:0 4px}
.sp-speel:hover:not(:disabled){background:var(--mint);color:#0b0614}
.sp-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:0 6px;line-height:1.25}
.sp-titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:normal 20px/1.3 var(--kop)}
.sp-artiest{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--kop);font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--lila)}
.sp-tijd{display:none;font-size:13px;color:var(--grijs);white-space:nowrap;font-variant-numeric:tabular-nums;padding:0 8px}
.sp-vol{display:none;width:110px;accent-color:var(--lila)}
.sp-lijstknop{position:relative}
.sp-aantal{position:absolute;top:4px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--lila);color:#0b0614;font:bold 11px/17px Arial,sans-serif}
.sp-aantal:empty{display:none}
.sp-vorige{display:none}
.sp-sluit{width:34px;font-size:26px;color:var(--zacht)}
/* Voortgang: dunne lijn bovenaan de balk, met een groter aanraakvlak */
.sp-pos{-webkit-appearance:none;appearance:none;position:absolute;left:0;right:0;top:-8px;width:100%;height:16px;margin:0;background:transparent;cursor:pointer;--sp-vul:0%}
.sp-pos::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--lila) var(--sp-vul),var(--lijn) var(--sp-vul))}
.sp-pos::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--lila) var(--sp-vul),var(--lijn) var(--sp-vul))}
.sp-pos::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--mint);border:0}
.sp-pos::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--mint);border:0}
.sp-pos:focus-visible{outline:2px solid var(--lila);outline-offset:0}
/* SoundCloud-widget: compact (20 px) en zichtbaar, met hun naamsvermelding */
.sp-sc{background:#0b0816;padding:0 8px 4px}
.sp-sc iframe{display:block;width:100%;max-width:1164px;height:20px;margin:0 auto;border:0}
/* YouTube-venster: altijd zichtbaar tijdens afspelen (min. 200x112), rechtsonder boven de balk */
.sp-video{position:absolute;right:12px;bottom:calc(100% + 10px);width:200px;background:#000;border:1px solid var(--lijn);box-shadow:0 8px 28px rgba(0,0,0,.6)}
.sp-video[hidden]{display:none}
.sp-video-kop{display:flex;align-items:center;gap:2px;padding:0 0 0 8px;background:var(--vlak);font-family:var(--kop);font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--grijs)}
.sp-video-kop span{flex:1}
.sp-video-kop button{width:36px;height:32px;background:transparent;border:0;color:var(--mint);font:bold 18px/1 Arial,sans-serif;cursor:pointer}
.sp-video-vak{position:relative;aspect-ratio:16/9;min-height:112px}
.sp-video-vak iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Afspeellijst */
.sp-paneel{position:absolute;left:0;right:0;bottom:100%;max-height:min(45vh,520px);overflow-y:auto;overscroll-behavior:contain;background:var(--vlak);border-top:1px solid var(--lila);padding:12px 12px 8px;z-index:2;box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.sp-paneel[hidden]{display:none}
.sp-paneel-kop{display:flex;align-items:center;gap:8px}
.sp-paneel-kop h2{flex:1;font-size:30px;margin:0}
.sp-tekstknop{min-height:44px;padding:0 12px;background:transparent;border:1px solid var(--lijn);color:var(--grijs);font:normal 17px var(--kop);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.sp-tekstknop[hidden]{display:none}
.sp-ol{list-style:none;margin:8px 0 0;padding:0}
.sp-ol li{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--lijn);border-left:3px solid transparent}
.sp-ol li.nu{border-left-color:var(--lila);background:var(--tegel)}
.sp-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;padding:6px 8px;background:transparent;border:0;color:var(--mint);text-align:left;cursor:pointer}
.sp-item .sp-titel{max-width:100%;font-weight:normal}
.sp-item .sp-artiest{font-size:15px;color:var(--zacht);max-width:100%}
.sp-klein{width:36px;font-size:18px}
/* Knoppen bij een set */
.sp-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.sp-k{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;background:var(--accent);color:#0b0614;border:1px solid var(--accent);font:normal 19px var(--kop);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.sp-k-rand{background:transparent;color:var(--mint)}
.sp-k:hover{background:var(--mint);border-color:var(--mint);color:#0b0614}
.sp-alles-rij{margin:0 0 16px}
.sp-alles{width:auto;display:inline-flex;margin-top:4px;background:var(--accent);color:#0b0614}
/* Ruimte onderin zodat niets onder de balk verdwijnt (ook ticketknoppen en het dj-profiel) */
body.sp-aan{padding-bottom:calc(46px + 84px + env(safe-area-inset-bottom))}
.sp-aan .dj-modal[open]{padding-bottom:calc(46px + 84px + env(safe-area-inset-bottom))}
.sp-wisselt #inhoud{opacity:.55;transition:opacity .2s}
#inhoud:focus{outline:none}
@media (min-width:560px){.sp-vorige,.sp-tijd{display:inline-flex}.sp-video{width:280px}}
@media (min-width:760px){.sp-vol{display:block}.sp-paneel{left:auto;right:12px;width:440px;border:1px solid var(--lila);border-bottom:0}.sp-video.sp-groot{width:min(560px,60vw)}}
@media (min-width:1024px){
.sp,.sp[popover]{bottom:0;inset:auto 0 0 0;padding-bottom:env(safe-area-inset-bottom)}
.sp-video{width:320px;right:60px}
body.sp-aan{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.sp-aan .dj-modal[open]{padding-bottom:0;max-height:calc(100vh - 200px);margin-top:40px}
}
@media (prefers-reduced-motion:reduce){.sp-wisselt #inhoud{transition:none}}
/* Instagram-video: staand venster (9:16), max. 400 px breed */
/* Instagram: dicht = compacte rij (Joris 30 okt: nam te veel plek in); na klikken klapt het staande venster open */
.video.video-ig{aspect-ratio:9/16;max-width:340px;width:100%;margin:0}
.video.video-ig:not(:has(iframe)){aspect-ratio:auto;max-width:none;height:56px;border-radius:6px}
.video-ig .video-start{background:linear-gradient(90deg,#833ab4 0%,#c13584 40%,#2a1250 100%)}
.video-ig .video-start .sc-merk{display:none}
.video.video-ig .video-speel{left:12px;top:50%;width:36px;height:36px;margin:-18px 0 0 0;border-width:2px}
.video.video-ig .video-speel::after{left:13px;top:9px;border-left-width:12px;border-top-width:8px;border-bottom-width:8px}
.video.video-ig .video-tekst{top:0;left:58px;right:12px;bottom:0;display:flex;align-items:center;padding:0;background:none;font-size:13px;line-height:1.25;letter-spacing:.5px;overflow:hidden}
.video-ig .video-tekst::before{content:"";flex:0 0 16px;height:16px;margin-right:10px;border:2px solid #fff;border-radius:5px;box-sizing:border-box}
.video-ig+p.zacht{margin:4px 0 0;font-size:13px}
.sp-alles .zacht{color:#0b0614;opacity:.75}
/* Compacte rij per audioset (speelt via de balk); de rij die nu speelt licht op */
.dj-sets.dj-audio{display:block;margin:0 0 20px}
.dj-sets.dj-audio .set{margin:0}
.sp-eq i{display:block;width:4px;height:40%;background:var(--lila)}
.sp-eq i:nth-child(2){height:80%;animation-delay:-.3s}
.sp-eq i:nth-child(3){height:60%;animation-delay:-.6s}
@keyframes sp-eq{0%{height:15%}100%{height:100%}}
/* Video's compacter: 1 kolom op telefoon, 2 op groter scherm, max. 360 px breed */
.dj-sets.dj-video{grid-template-columns:minmax(0,360px);gap:18px}
@media (min-width:760px){.dj-sets.dj-video{grid-template-columns:repeat(2,minmax(0,360px))}}
.dj-video .video-tekst{font-size:12px;padding:8px 10px}
.dj-video .video-speel{width:56px;height:56px;margin:-28px 0 0 -28px}
.dj-video .video-speel::after{left:22px;top:16px;border-left-width:16px;border-top-width:12px;border-bottom-width:12px}
.dj-video .sp-k{min-height:40px;padding:0 12px;font-size:12px}
.sp-alles .zacht{color:#0b0614;opacity:1;font-size:15px;font-weight:bold}
/* Mini-videovenster: precies 200x200 en zichtbaar, muziek speelt door; alleen een uitklap-icoon erboven */
.sp-video.sp-mini{width:202px}
.sp-mini .sp-video-vak{aspect-ratio:auto;height:200px;min-height:200px}
.sp-mini .sp-video-kop{position:absolute;right:-1px;bottom:100%;padding:0;background:var(--vlak);border:1px solid var(--lijn);border-bottom:0}
.sp-mini .sp-video-kop span,.sp-mini [data-sp-groter]{display:none}
@media (prefers-reduced-motion:reduce){.sp-eq i{animation:none!important}}
.sp-balk.sp-los{position:fixed;left:0;right:0;z-index:5;color:var(--mint)}
/* Rij per set/aflevering: [▶] [icoon] titel · datum [+] */
.sp-rset{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;margin:0 0 6px;background:var(--nu-b,var(--tegel));border:1px solid var(--lijn);border-left:3px solid var(--nu-r,var(--lijn))}
.sp-rspeel{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;background:var(--accent);color:#0b0614;cursor:pointer}
.sp-rspeel:hover{background:var(--mint)}
.sp-icoon{flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--grijs)}.sp-rset .sp-icoon svg{width:22px;height:22px;display:block}
.sp-icoon-sc{color:#ff7a2f}.sp-icoon-yt{color:#ff4e45}.sp-icoon-podcast{color:var(--lila)}.sp-icoon-ig{color:#e1306c}
.sp-rset-tekst{flex:1 1 auto;min-width:0;margin-left:4px;font:normal 20px/1.35 var(--kop);overflow-wrap:anywhere}
.sp-rset-tekst .zacht{font-weight:normal;margin:0;white-space:nowrap}
.sp-rvoeg{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--lijn);background:transparent;color:var(--mint);font:bold 20px/1 Arial,sans-serif;cursor:pointer}
.sp-rvoeg:hover,.sp-rvoeg:focus-visible{border-color:var(--accent);color:var(--accent)}
.sp-eq{display:var(--nu-e,none);align-items:flex-end;gap:2px;width:14px;height:13px;margin-right:6px;vertical-align:-1px}
.sp-meer{margin:0 0 8px}
.sp-meer summary{display:flex;align-items:center;min-height:44px;padding:0 8px;cursor:pointer;color:var(--lila);font:normal 19px var(--kop);letter-spacing:.05em;text-transform:uppercase}
.sp-meer[open] summary{margin-bottom:4px}
.sp-speel .sp-pauze,.sp-speel.sp-aan svg{display:none}.sp-speel.sp-aan .sp-pauze{display:block}
.sp-speelt .sp-eq i{animation:sp-eq .9s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.sp-speelt .sp-eq i{animation:none}}

/* Instagram als compacte rij (zelfde vorm als audio); open: staand venster met sluitknop */
.ig-rij{margin:0}
.ig-rij .sp-rset{border-left-color:#e1306c}
.ig-rij:has(iframe){position:relative;width:100%;max-width:340px;aspect-ratio:9/16;margin:0 0 6px;background:#000;border:1px solid var(--lijn)}
.ig-rij iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ig-dicht{position:absolute;z-index:2;top:-1px;right:-46px;width:44px;height:44px;padding:0;border:1px solid var(--lijn);background:var(--vlak);color:var(--mint);font:bold 24px/1 Arial,sans-serif;cursor:pointer}
@media (max-width:440px){.ig-dicht{right:0;top:-46px}.ig-rij:has(iframe){margin-top:46px}}

.sp-paneel li>.sp-icoon,li>.sp-icoon{flex:0 0 22px;margin-left:8px}
li>.sp-icoon svg{width:22px;height:22px;display:block}
.sp-rset-tekst .zacht{font-size:.8em}
/* Startpagina: minder sluier over het beeld (Joris 30 okt); leesbaarheid via schaduw op de tekst */
.duo-vak.thema-indoor::after{background:linear-gradient(180deg,rgba(5,3,9,0) 0%,rgba(5,3,9,.08) 45%,rgba(5,3,9,.55) 78%,var(--bg) 100%)}
.duo-in .datum,.duo-in .kop,.duo-in .namen,.duo-in .meer{text-shadow:0 2px 12px rgba(0,0,0,.7)}

/* Zon/maan-schakelaar. Maan = indoorstand (donker, standaard), zon = festivalstand (licht, zomers) */
.stand-knop{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:6px;padding:0;background:transparent;border:1px solid var(--lijn);color:var(--amber);cursor:pointer}
.stand-knop:hover,.stand-knop:focus-visible{border-color:var(--accent)}
.stand-knop .stand-maan{display:none}
:root[data-stand="zon"]{--bg:#fff7ea;--vlak:#fffdf8;--tegel:#fbefdc;--mint:#1d1430;--lila:#6a3fd4;--grijs:#4d4660;--zacht:#6c6582;--lijn:#e8d9bf;--amber:#c98a12;color-scheme:light}
:root[data-stand="zon"] .stand-knop{color:var(--lila)}
:root[data-stand="zon"] .stand-knop .stand-zon{display:none}
:root[data-stand="zon"] .stand-knop .stand-maan{display:block}
:root[data-stand="zon"] .logo img,:root[data-stand="zon"] .voet-logo{filter:invert(1) brightness(.25)}
/* Delen over foto/video houden de donkere kleuren, zodat tekst op beeld leesbaar blijft */
:root[data-stand="zon"] .duo-vak,:root[data-stand="zon"] .held,:root[data-stand="zon"] .video,:root[data-stand="zon"] .sp-video{--bg:#050309;--vlak:#0b0816;--tegel:#140f24;--mint:#EDFDFA;--lila:#9a6cff;--grijs:#b9b4c9;--zacht:#8d88a3;--lijn:#2a2340;--amber:#f2b33d;color:var(--mint)}
:root[data-stand="zon"] .duo-vak .kop a,:root[data-stand="zon"] .held .kop{color:#EDFDFA}
:where(:root[data-stand="zon"]) .knop{color:var(--bg)}
:root[data-stand="zon"] .balk{background:rgba(255,247,234,.95)}
:root[data-stand="zon"] .events-paneel{background:rgba(255,247,234,.97)}
:root[data-stand="zon"] .sociaal-vast{background:rgba(255,247,234,.95)}
:root[data-stand="zon"] .sp-balk{background:rgba(255,253,248,.97)}
:root[data-stand="zon"] .sp-sc{background:var(--vlak)}
:root[data-stand="zon"] .dj-modal::backdrop{background:rgba(60,40,10,.45)}
@media (min-width:1024px){.stand-knop{order:3}}
/* Alle koppen in de Hidden Garden-letter (niet vet: de letter heeft één gewicht) */
h1,h2,h3,h4,summary{font-family:var(--kop);font-weight:normal}
/* Foto's en video's: twee duidelijke delen, losse opmaak die nonchalant over elkaar valt */
.fv-spring{display:flex;gap:10px;margin-top:6px}
.fv-spring a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--accent);color:var(--mint);font:normal 22px var(--kop);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.fv-spring a:hover,.fv-spring a:focus-visible{background:var(--accent);color:var(--bg)}
.fv-deel{scroll-margin-top:80px}
.fv-kop{font-size:clamp(44px,9vw,84px);margin-bottom:28px}
.fv-videos{display:grid;grid-template-columns:1fr;gap:26px 0;padding:0 6px}
.fv-los{transform:rotate(calc(var(--k) * .6));transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 16px 36px rgba(0,0,0,.45);position:relative}
.fv-los:hover,.fv-los:focus-within{transform:rotate(0) scale(1.02);z-index:5}
.fv-stapels{list-style:none;margin:0 0 56px;padding:0 6px;display:grid;grid-template-columns:1fr;gap:44px 0}
.fv-stapel a{display:block;text-decoration:none;color:var(--mint)}
.fv-beelden{position:relative;display:block;aspect-ratio:3/2;margin:0 8% 22px 4%}
.fv-foto{position:absolute;inset:0;overflow:hidden;background:var(--tegel);border:5px solid var(--mint);box-shadow:0 14px 30px rgba(0,0,0,.45);transition:transform .3s ease}
.fv-foto img{width:100%;height:100%;object-fit:cover}
.fv-foto:nth-child(1){transform:translate(9%,-5%) rotate(calc(var(--k) * -2))}
.fv-foto:nth-child(2){transform:translate(-6%,4%) rotate(calc(var(--k) * 1.6))}
.fv-foto:nth-child(3){transform:rotate(var(--k))}
.fv-stapel a:hover .fv-foto:nth-child(1),.fv-stapel a:focus-visible .fv-foto:nth-child(1){transform:translate(16%,-8%) rotate(calc(var(--k) * -3))}
.fv-stapel a:hover .fv-foto:nth-child(2),.fv-stapel a:focus-visible .fv-foto:nth-child(2){transform:translate(-12%,6%) rotate(calc(var(--k) * 2.4))}
.fv-stapel .kop{display:block;font-size:30px;margin:0}
.fv-stapel .grijs{font-size:14px}
@media (min-width:600px){.fv-videos{grid-template-columns:repeat(2,1fr);gap:34px 30px}.fv-stapels{grid-template-columns:repeat(2,1fr);gap:56px 44px}.fv-videos .fv-los:nth-child(even),.fv-stapel:nth-child(even){margin-top:34px}}
@media (min-width:1024px){.fv-videos{grid-template-columns:repeat(3,1fr);gap:40px 34px}.fv-stapels{grid-template-columns:repeat(3,1fr)}.fv-videos .fv-los:nth-child(even),.fv-stapel:nth-child(even){margin-top:0}.fv-videos .fv-los:nth-child(3n+2),.fv-stapel:nth-child(3n+2){margin-top:44px}.fv-videos .fv-los:nth-child(3n),.fv-stapel:nth-child(3n){margin-top:16px}}
@media (prefers-reduced-motion:reduce){.fv-los,.fv-foto{transition:none}}
/* Aftermovie als tegel in de collage */
.collage .c-video{left:6%;top:60%;width:88%;aspect-ratio:16/9;z-index:7;background:#000}
.collage.met-video .c3{display:none}
.collage .c-video .video{position:absolute;inset:0;aspect-ratio:auto;border:0}
.collage .c-video .video-tekst{font-size:18px}
@media (min-width:760px){
	.collage.met-video .c3{display:block}
	.collage .c-video{left:31%;top:33%;width:40%}
}
/* Bioscoopstand: alles rond een spelende video dimt */
.video,.collage .c{transition:box-shadow .45s ease}
.hg-dimlaag{position:fixed;inset:0;z-index:55;background:rgba(5,3,9,.88);opacity:0;pointer-events:none;transition:opacity .45s ease}
html.hg-gedimd .hg-dimlaag{opacity:1;pointer-events:auto}
html.hg-gedimd .hg-uitgelicht{z-index:60!important}
body{transition:background-color .4s ease,color .4s ease}
@media (prefers-reduced-motion:reduce){.video,.collage .c,body{transition:none}}
/* Foto's en video's: per editie een collage */
.fv-editie{padding:36px 0 10px;border-top:1px solid var(--lijn)}
.fv-editie-kop .kop{font-size:clamp(34px,6vw,56px);margin:0}
.fv-editie-kop .kop a{color:var(--mint);text-decoration:none}
.fv-editie-kop .kop a:hover{color:var(--accent)}
.fv-editie-kop .grijs{margin:4px 0 0}
.fv-alle a{display:inline-block;padding:10px 0;color:var(--mint);font:normal 21px var(--kop);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--accent)}
/* Collage: foto's en video liggen nonchalant schuin; de video is één van de foto's */
.collage .c{transform:rotate(var(--r,0deg))}
.collage .c1{--r:-2.4deg}.collage .c2{--r:1.8deg}.collage .c3{--r:2.6deg}.collage .c4{--r:-1.7deg}.collage .c5{--r:2.9deg}.collage .c6{--r:-2.1deg}
.collage .c-video{--r:-1.3deg;border:6px solid #fff;box-shadow:0 18px 40px rgba(0,0,0,.55)}
@media (min-width:760px){.collage .c-video{left:36%;top:36%;width:30%}}
/* Introtekst van een evenement: ruimte onder het beeld (Joris 30 okt) */
.ev-intro{padding-top:14px} /* kleiner op de telefoon (Joris 2 nov: ruimte onder de ticketknop te groot) */
@media (min-width:760px){.ev-intro{padding-top:56px}}
/* Lichte stand: tekst en pijltjes op paarse knoppen licht (Joris 30 okt) */
:root[data-stand="zon"] .sp-rspeel,:root[data-stand="zon"] .sp-k,:root[data-stand="zon"] .sp-k .zacht,:root[data-stand="zon"] .sp-speel,:root[data-stand="zon"] .sp-aantal,:root[data-stand="zon"] .knop-tickets,:root[data-stand="zon"] .wissel button[aria-selected=true],:root[data-stand="zon"] .fv-spring a:hover{color:#fff}
/* Spelende rij: achtergrond past bij de stand, tekst blijft leesbaar */
:root{--nu-vlak:#1b1432}
:root[data-stand="zon"]{--nu-vlak:#ebe0ff}
/* Lichte stand: ticket- en meer-info-knoppen (Events-paneel) leesbaar */
:root[data-stand="zon"] .knop-wit{background:var(--mint);color:var(--bg)}
:root[data-stand="zon"] .knop-rand{color:var(--mint);border-color:var(--mint)}
:root[data-stand="zon"] .knop-rand:hover{background:var(--mint);color:var(--bg)}
:root[data-stand="zon"] .sp-k.sp-k-rand{color:var(--mint)}
.sp-rleeg{flex:0 0 36px;width:36px;height:36px} /* plek van de +-knop, zodat titels uitlijnen */
li[data-wall-naam]:not(:has(a)){font-family:var(--kop);font-size:1.35em;letter-spacing:.03em;text-transform:uppercase} /* naam zonder profiel ook in de HG-letter */
/* Eventfoto's van de dj in het profiel: los over elkaar, licht schuin */
.dj-eventfotos{list-style:none;margin:6px 0 22px;padding:0 6px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.dj-eventfotos li{aspect-ratio:3/2;overflow:hidden;border:4px solid var(--mint);box-shadow:0 10px 24px rgba(0,0,0,.35);transform:rotate(-1.6deg)}
.dj-eventfotos li:nth-child(even){transform:rotate(1.8deg) translateY(8px)}
.dj-eventfotos img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:760px){.dj-eventfotos{grid-template-columns:repeat(3,1fr)}}

/* Collagevideo: bij afspelen draait hij recht en wordt hij groter (Joris 30 okt) */
@property --r{syntax:'<angle>';inherits:false;initial-value:0deg}
.collage .c-video{transition:left .5s ease,top .5s ease,width .5s ease,--r .5s ease,border-width .5s ease}
.collage .c-video.hg-uitgelicht{--r:0deg;left:2%;top:18%;width:96%}
@media (min-width:760px){.collage .c-video.hg-uitgelicht{left:12%;top:8%;width:76%}}
/* Naam blijft leesbaar bij hoveren in de lichte stand */
:root[data-stand="zon"] .dj-link:hover,:root[data-stand="zon"] .dj-link:focus-visible{color:var(--lila)}

/* Dj-icoon in een albumfoto, naam bij hoveren (Joris 30 okt) */
.fotoraster li{position:relative}
.foto-tags{position:absolute;left:6px;bottom:6px;display:flex;gap:4px;pointer-events:none}
.fotoraster .foto-tag{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;aspect-ratio:auto;overflow:visible;background:rgba(10,6,20,.72);color:#fff;text-decoration:none}
.fotoraster .foto-tag:hover,.fotoraster .foto-tag:focus-visible{background:var(--lila)}
.foto-tag-naam{position:absolute;left:0;bottom:calc(100% + 4px);white-space:nowrap;font-family:var(--kop);font-size:15px;letter-spacing:.04em;line-height:1;padding:5px 8px 4px;background:rgba(10,6,20,.9);color:#fff;opacity:0;transform:translateY(3px);transition:opacity .15s,transform .15s;pointer-events:none}
.foto-tag:hover .foto-tag-naam,.foto-tag:focus-visible .foto-tag-naam,.fotoraster li:hover .foto-tag-naam{opacity:1;transform:none}

/* Getagde dj's in de grote fotoweergave: icoon plus naam altijd zichtbaar */
.lichtbak{position:fixed}
.lichtbak-tags{position:absolute;left:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px}
.lichtbak-tags:empty{display:none}
.lichtbak-tags .foto-tag{display:flex;align-items:center;gap:6px;padding:6px 10px 5px;background:rgba(10,6,20,.8);color:#fff;text-decoration:none}
.lichtbak-tags .foto-tag:hover,.lichtbak-tags .foto-tag:focus-visible{background:var(--lila)}
.lichtbak-tags .foto-tag-naam{position:static;opacity:1;transform:none;padding:0;background:none;font-size:17px}

/* Telefoon/tablet: spelerbalk vast tegen de onderrand, social-balk erboven (Joris 30 okt) */
@media (max-width:1023px){
.sp,.sp[popover]{inset:auto 0 0 0;bottom:0;padding-bottom:env(safe-area-inset-bottom);background:rgba(11,8,22,.97)}
body.sp-aan .sociaal-vast{bottom:var(--sp-h,120px);padding-bottom:0}
:root[data-stand="zon"] .sp{background:rgba(255,253,248,.97)}
}

/* Startpagina: Indoor en Festival samen precies in beeld, op elk scherm (Joris 30 okt) */
.duo{--duo-h:calc(100svh - var(--hdr,61px) - 46px - env(safe-area-inset-bottom))}
.duo-vak{min-height:0;height:calc(var(--duo-h) / 2)}
.duo-in{padding:clamp(8px,2.2svh,28px) 16px clamp(10px,2.6svh,32px)}
.duo-in .datum{font-size:clamp(11px,min(2svh,4.5vw),26px);margin:0 0 .3em}
.duo-in .kop-groot{font-size:clamp(24px,min(6.4svh,12vw),104px);line-height:.95;margin:0}
.duo-in .namen{font-size:clamp(13px,min(2.9svh,6vw),40px);margin:.15em 0 0}
.duo-in .aftel{font-size:clamp(10px,1.5svh,14px);margin:.4em 0 0}
.duo-in .knop{margin-top:clamp(6px,1.4svh,18px);min-height:0;padding:clamp(6px,1.3svh,14px) 14px;font-size:clamp(14px,min(2.4svh,5.2vw),22px)}
.duo-in .meer{min-height:0;margin-top:clamp(2px,.8svh,6px);padding:clamp(2px,.6svh,10px) 0;font-size:clamp(10px,1.5svh,14px)}
@media (min-width:760px){.duo-vak{height:var(--duo-h)}}
@media (min-width:1024px){.duo{--duo-h:calc(100svh - var(--hdr,61px))}.duo-in .kop-groot{font-size:clamp(28px,min(8svh,7vw),104px)}.duo-in .namen{font-size:clamp(14px,min(3.6svh,3vw),40px)}}
@media (max-width:759px) and (orientation:landscape){.duo{grid-template-columns:1fr 1fr}.duo-vak{height:var(--duo-h)}.duo-vak+.duo-vak{border-left:1px solid var(--lijn)}.duo-in .kop-groot{font-size:clamp(22px,min(9svh,6vw),60px)}.duo-in .namen{font-size:clamp(12px,min(4svh,3vw),26px)}.duo-in .knop{font-size:clamp(12px,min(3.6svh,2.6vw),20px)}}

/* Telefoon/tablet: compacte spelerbalk en smallere social-balk zolang de speler aan staat (Joris 30 okt) */
@media (max-width:1023px){
.sp-rij{min-height:0;padding:2px 4px 2px 6px;gap:0}
.sp-ik{width:34px;height:38px;font-size:20px}
.sp-ik svg{width:20px;height:20px}
.sp-speel{width:36px;height:36px;margin:0 4px 0 0}
.sp-info{display:flex;flex-direction:column;justify-content:center;min-width:0}
.sp-titel{font-size:16px;line-height:1.15}
.sp-artiest{font-size:13px;line-height:1.15}
.sp-sc{padding:0 6px 2px}
.sp-aantal{top:2px}
body.sp-aan .sociaal-vast a{min-height:34px}
body.sp-aan .sociaal-vast svg{width:18px;height:18px}
body.sp-aan .duo{--duo-h:calc(100svh - var(--hdr,61px) - 35px - var(--sp-h,0px))}
}

/* Tekstmaten van de startvakken schalen mee met de hoogte van het vak zelf (container query), zodat alles altijd past */
.duo-vak{container-type:size}
@supports (height:1cqh){
.duo-in{padding:clamp(6px,5cqh,32px) clamp(12px,4cqw,40px) clamp(8px,6cqh,40px)}
.duo-in .datum{font-size:clamp(10px,min(5cqh,4.4cqw),26px)}
.duo-in .kop-groot{font-size:clamp(20px,min(17cqh,11.5cqw),104px)}
.duo-in .namen{font-size:clamp(12px,min(7.5cqh,6cqw),40px)}
.duo-in .aftel{font-size:clamp(9px,3.6cqh,14px)}
.duo-in .knop{margin-top:clamp(4px,3.2cqh,18px);padding:clamp(4px,3cqh,14px) 12px;font-size:clamp(12px,min(5.8cqh,5cqw),22px)}
.duo-in .meer{margin-top:clamp(0px,1.5cqh,6px);padding:clamp(1px,1.4cqh,10px) 0;font-size:clamp(9px,3.6cqh,14px)}
}
/* Telefoon: YouTube niet in de afspeellijst (Joris 30 okt) */
@media (max-width:759px){[data-sp-voeg*='"p":"yt"']{display:none}}

/* ---------- Web-app (Joris 30 okt) ---------- */
.hg-losse-app .balk{padding-top:env(safe-area-inset-top)}
.hg-installeer{position:fixed;left:8px;right:8px;top:calc(var(--hdr,61px) + 8px);z-index:40;display:flex;align-items:center;gap:10px;padding:10px 8px 10px 12px;background:var(--vlak);border:1px solid var(--lila);box-shadow:0 12px 32px rgba(0,0,0,.5);color:var(--mint)}
.hg-installeer div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.3}
.hg-installeer strong{font-family:var(--kop);font-weight:normal;font-size:19px;letter-spacing:.03em;text-transform:uppercase}
.hg-installeer span{color:var(--grijs)}
.hg-inst-ja{min-height:40px;padding:0 12px;background:var(--lila);color:#fff;border:0;font:normal 17px/1 var(--kop);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.hg-inst-nee{width:40px;height:40px;background:transparent;border:0;color:var(--mint);font-size:26px;cursor:pointer}
/* Favoriet-hartje */
.rd-fav,.sp-fav{color:var(--grijs)}
.rd-fav svg{fill:none;stroke:currentColor;stroke-width:2}
.rd-fav[aria-pressed="true"],.sp-fav[aria-pressed="true"]{color:var(--lila)}
.rd-fav[aria-pressed="true"] svg{fill:currentColor}
.sp-fav:not([aria-pressed="true"]) svg{fill:none;stroke:currentColor;stroke-width:2}
/* Radio */
.rd-start{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rd-start .knop{width:auto;margin-top:0;flex:1 1 220px}
.rd-radio{background:var(--lila);color:#fff}
.rd-push{margin-top:12px}
.rd-push .knop{width:auto;margin-top:0;min-height:40px;font-size:18px}
.rd-push p{margin:6px 0 0;font-size:14px}
.rd-filters{position:sticky;top:var(--hdr,61px);z-index:5;background:var(--bg);padding:10px 0;display:flex;flex-direction:column;gap:8px}
.rd-zoek{width:100%;min-height:46px;padding:0 14px;background:var(--vlak);border:1px solid var(--lijn);color:var(--mint);font-size:16px}
.rd-tabs{display:flex}
.rd-tabs button{flex:1}
.rd-lijst{list-style:none;margin:0;padding:0}
.rd-rij{border-bottom:1px solid var(--lijn)}
.rd-rij[hidden]{display:none}
.rd-set{display:flex;align-items:center;gap:8px;min-height:60px;padding:6px 0}
.rd-set .sp-rset-tekst{flex:1;min-width:0;display:flex;flex-direction:column}
.rd-set .sp-rset-titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-meta{font-size:13px;color:var(--grijs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-fav,.rd-plus{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;font-size:26px;line-height:1}
.rd-plus{color:var(--mint)}
.rd-video{margin:0 0 10px}
/* Grote speler op de telefoon: tik op de titel */
.sp-inklap-groot{display:none}
@media (max-width:1023px){
.sp-info{cursor:pointer}
.sp.sp-open,.sp.sp-open[popover]{inset:0;top:0;background:var(--bg);display:flex;flex-direction:column;justify-content:flex-end}
.sp-open .sp-balk{flex:1;display:flex;flex-direction:column;justify-content:center;border-top:0;padding:calc(env(safe-area-inset-top) + 56px) 20px 20px}
.sp-open .sp-inklap-groot{display:flex;position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translateX(-50%);width:56px;height:44px;align-items:center;justify-content:center;background:transparent;border:0;color:var(--mint);cursor:pointer}
.sp-open .sp-inklap-groot svg{width:34px;height:34px}
.sp-open .sp-pos{position:relative;top:auto;order:2;margin:18px 0 4px;height:28px}
.sp-open .sp-pos::-webkit-slider-runnable-track{height:6px}
.sp-open .sp-rij{order:3;flex-wrap:wrap;justify-content:center;gap:14px 18px;min-height:0;padding:0;max-width:none}
.sp-open .sp-info{order:-3;flex:1 0 100%;align-items:center;text-align:center;padding:0;gap:6px}
.sp-open .sp-titel{white-space:normal;font-size:30px;line-height:1.1}
.sp-open .sp-artiest{font-size:22px}
.sp-open .sp-tijd{order:-2;flex:1 0 100%;display:block;text-align:center;font-size:15px}
.sp-open .sp-vorige{display:inline-flex}
.sp-open .sp-ik{width:60px;height:60px}
.sp-open .sp-ik svg{width:34px;height:34px}
.sp-open .sp-speel{width:84px;height:84px;margin:0}
.sp-open .sp-speel svg{width:44px;height:44px}
.sp-open .sp-sluit{display:none}
:root[data-stand="zon"] .sp.sp-open{background:var(--bg)}
}
.rd-radio:hover,.rd-radio:focus-visible{background:var(--mint);color:#0b0614}
.dj-meer-fotos{margin:-8px 0 22px}
.dj-meer-fotos summary{cursor:pointer;font-family:var(--kop);font-size:18px;letter-spacing:.05em;text-transform:uppercase;color:var(--lila);padding:6px 0;list-style:none}
.dj-meer-fotos summary::-webkit-details-marker{display:none}
.dj-meer-fotos[open] summary{margin-bottom:10px}
.dj-eventfotos img{width:100%;height:100%;object-fit:cover}

/* Welkomstvenster web-app: berichten aanzetten met één tik (31 okt) */
.hg-welkom{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55)}
.hg-welkom-doos{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:28px 20px calc(24px + env(safe-area-inset-bottom));background:var(--vlak);border-top:2px solid var(--lila);color:var(--mint)}
.hg-welkom-doos strong{font-family:var(--kop);font-weight:normal;font-size:28px;letter-spacing:.03em;text-transform:uppercase;line-height:1.05}
.hg-welkom-doos p{margin:0;font-size:16px;line-height:1.45;opacity:.85}
.hg-welkom-ja{width:100%;justify-content:center}
.hg-welkom-nee{background:none;border:0;color:inherit;opacity:.7;font:inherit;font-size:15px;padding:8px;text-decoration:underline;cursor:pointer}

/* Stappenplan beginscherm (iPhone, 31 okt) */
.hg-stappen ol{list-style:none;margin:4px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}
.hg-stappen li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--lijn);font-size:16px;line-height:1.35}
.hg-stappen li b{font-weight:600}
.hg-st-nr{flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--lila);color:#0b0614;font-family:var(--kop);font-size:18px}
.hg-st-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--lijn);color:#0a84ff;background:rgba(255,255,255,.06)}

/* Speelknop tijdens het laden (31 okt): zichtbaar bezig, nog geen pauzeknop */
@keyframes hg-laadt{50%{opacity:.45}}
#hg-speler [data-sp-speelknop].sp-laadt{animation:hg-laadt 1s ease-in-out infinite}
.sp-speel.sp-laadt.sp-aan svg{display:block}.sp-speel.sp-laadt.sp-aan .sp-pauze{display:none}
/* Verborgen knoppen echt verbergen (de knopstijl overschreef het hidden-kenmerk, 31 okt) */
[data-hg-push][hidden],[data-hg-installeer][hidden],[data-hg-app-menu][hidden]{display:none!important}

/* SoundCloud-speler onzichtbaar maar wel actief (Joris 31 okt: "moet de soundcloud player in beeld blijven?");
   bron en link staan als SoundCloud-icoon in onze eigen balk (.sp-bron) */
.sp-sc,:root[data-stand="zon"] .sp-sc{position:fixed!important;left:0;bottom:0;width:2px;height:2px;padding:0!important;overflow:hidden;opacity:.01;pointer-events:none;background:none}
.sp-sc iframe{width:300px;max-width:none}
.sp-bron{flex:none;display:grid;place-items:center;color:#ff5500}
.sp-bron svg{width:22px;height:22px}
/* Telefoon en tablet: geen sociale balk boven de speler (staat ook in het menu, Joris 31 okt) */
@media (max-width:1023px){
body.sp-aan .sociaal-vast{display:none}
body.sp-aan{padding-bottom:calc(var(--sp-h,84px) + env(safe-area-inset-bottom))}
body.sp-aan .duo{--duo-h:calc(100svh - var(--hdr,61px) - var(--sp-h,0px))}
}
@media (min-width:1024px){body.sp-aan .duo{--duo-h:calc(100svh - var(--hdr,61px) - var(--sp-h,0px))}}

/* Radiopagina rustiger (Joris 31 okt: "veel te druk, de buttons bovenin moeten allemaal veel kleiner") */
.rd-start{gap:8px;margin-top:10px}
.rd-start .knop{flex:0 0 auto;width:auto;min-height:38px;padding:0 14px;font-size:17px;gap:6px}
.rd-start .knop svg{width:16px;height:16px}
.rd-uitleg:empty{display:none}
.rd-uitleg{margin:8px 0 0;font-size:14px}
.rd-start .knop{min-height:34px;padding:0 12px;font-size:15px;letter-spacing:.04em}
.rd-start .knop svg{width:14px;height:14px}
.rd-kop .kop-groot{margin-bottom:0}
/* iPhone: set geladen, wacht op één tik (Joris 31 okt) */
#hg-speler [data-sp-speelknop].sp-tik{animation:hg-laadt 1s ease-in-out infinite;background:var(--accent,#9a6cff);color:#fff}
/* Rustiger op de telefoon (Joris 31 okt, keuze 'Kaal'): lijst alleen titel, dj en hartje (tik op de regel = speel);
   balk alleen afspelen, titel en het verplichte SoundCloud-icoon. Volgende, hartje, afspeellijst en sluiten in de grote speler. */
@media (max-width:759px){
	.rd-set .sp-icoon,.rd-set .sp-rspeel,.rd-set .rd-plus{display:none}
	.rd-set{cursor:pointer;gap:10px}
	.rd-set .sp-rset-tekst{padding-left:4px}
	#hg-speler:not(.sp-open) .sp-vorige,#hg-speler:not(.sp-open) .sp-volgende,#hg-speler:not(.sp-open) .sp-fav,
	#hg-speler:not(.sp-open) .sp-lijstknop,#hg-speler:not(.sp-open) .sp-sluit,#hg-speler:not(.sp-open) .sp-tijd{display:none}
	.sp-open .sp-sluit{display:inline-flex}
}
/* De titel van een regel is zelf de afspeelknop (iPhone telt een tik op gewone tekst niet als klik) */
.rd-tekst{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;background:none;border:0;padding:0;margin:0 0 0 4px;color:inherit;text-align:left;cursor:pointer}
/* Taalkeuze in het menu op telefoon en tablet (Joris 31 okt); op de computer blijft NL/EN in de balk */
.taal-menu{margin:8px 0 0;border:0;gap:8px}
.taal-menu a{flex:1;min-height:48px;padding:0 14px;border:1px solid var(--lijn)}
@media (max-width:1079px){.balk-in>.taal{display:none}.stand-knop{margin-left:auto}}
@media (min-width:1080px){.menu-taal{display:none}}
.rd-tekst{overflow:hidden}
.rd-tekst .sp-rset-titel,.rd-tekst .rd-meta{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Sluitkruisjes niet onder de klok/notch van de iPhone (Joris 31 okt: niet meer aan te tikken) */
@media (max-width:759px){
	.dj-modal{padding-top:env(safe-area-inset-top)}
	.dj-dicht{top:max(8px,env(safe-area-inset-top));margin-top:8px}
}
.lichtbak-dicht{top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right))}
.dia-teller{position:fixed;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));margin:0;text-align:center;color:#fff;font:normal 18px var(--kop);letter-spacing:.05em}
.dia img{max-width:96vw;max-height:84vh;width:auto;margin:0 auto;display:block}
/* Telefoon/tablet: socialbalk altijd onderin, met een nootje dat de spelerbalk in- en uitklapt (Joris 31 okt) */
.sp-wissel-li{display:none}
@media (max-width:1023px){
	body.sp-aan .sociaal-vast{display:flex;bottom:0;padding-bottom:env(safe-area-inset-bottom)}
	body.sp-aan .sociaal-vast a{min-height:44px}
	body.sp-aan .sociaal-vast svg{width:20px;height:20px}
	body.sp-aan .sp-wissel-li{display:block}
	.sp-wissel{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:none;color:var(--mint);cursor:pointer}
	.sp-wissel svg{width:20px;height:20px}
	body.sp-speelt .sp-wissel{color:var(--lila);animation:hg-laadt 1.6s ease-in-out infinite}
	.sp:not(.sp-open),.sp[popover]:not(.sp-open){inset:auto 0 calc(46px + env(safe-area-inset-bottom)) 0;padding-bottom:0;transition:transform .25s ease}
	body.sp-in .sp:not(.sp-open){transform:translateY(calc(100% + 46px + env(safe-area-inset-bottom)));pointer-events:none}
	body.sp-aan{padding-bottom:calc(46px + var(--sp-h,84px) + env(safe-area-inset-bottom))}
	body.sp-aan.sp-in{padding-bottom:calc(46px + env(safe-area-inset-bottom))}
	body.sp-aan .duo{--duo-h:calc(100svh - var(--hdr,61px) - 46px - env(safe-area-inset-bottom) - var(--sp-h,0px))}
	body.sp-aan.sp-in .duo{--duo-h:calc(100svh - var(--hdr,61px) - 46px - env(safe-area-inset-bottom))}
}
/* Afspeellijst in de grote speler: als blad onderin, niet buiten beeld boven de speler */
.sp-open .sp-paneel{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:70vh;z-index:5;padding-bottom:calc(8px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--lila)}
/* Afspeellijst: titels op één regel (de grote-spelerstijl gold ook hier), op de telefoon alleen × per track */
.sp-ol .sp-item{min-width:0}
.sp-ol .sp-titel,.sp-open .sp-ol .sp-titel{display:block;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-ol .sp-artiest,.sp-open .sp-ol .sp-artiest{font-size:13px}
.sp-open .sp-ol .sp-ik{width:44px;height:44px}
.sp-open .sp-ol .sp-ik svg{width:20px;height:20px}
@media (max-width:759px){.sp-ol [data-sp-omhoog],.sp-ol [data-sp-omlaag]{display:none}}
@media (max-width:759px){.sp-ol .sp-icoon{display:none}}
/* Vaste stopbalk zolang een YouTube-video op de plek speelt (telefoon) */
.yt-los{position:fixed;left:0;right:0;bottom:calc(46px + env(safe-area-inset-bottom));z-index:27;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;background:var(--vlak);border-top:1px solid var(--lila)}
.yt-los[hidden]{display:none}
.yt-los-titel{flex:1;min-width:0;padding:0;border:0;background:none;color:var(--mint);font:normal 16px/1.2 var(--kop);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.yt-los-stop{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:0;background:var(--lila);color:#0b0614;font:normal 17px var(--kop);cursor:pointer}
body.yt-los-aan{padding-bottom:calc(46px + 52px + env(safe-area-inset-bottom))}
/* Telefoon/tablet (Joris 31 okt): speler standaard verborgen. Open: speler onderin en geen socialbalk.
   Dicht: socialbalk met een bewegend nootje zolang er iets speelt. */
.sp-inklap-mini{display:none}
@media (max-width:1023px){
	body.sp-aan:not(.sp-in) .sociaal-vast{display:none}
	.sp:not(.sp-open),.sp[popover]:not(.sp-open){inset:auto 0 0 0;padding-bottom:env(safe-area-inset-bottom)}
	body.sp-in .sp:not(.sp-open){transform:translateY(calc(100% + 12px));pointer-events:none}
	#hg-speler:not(.sp-open) .sp-inklap-mini{display:inline-flex}
	body.sp-aan:not(.sp-in){padding-bottom:var(--sp-h,84px)}
	body.sp-aan.sp-in{padding-bottom:calc(46px + env(safe-area-inset-bottom))}
	body.sp-aan:not(.sp-in) .duo{--duo-h:calc(100svh - var(--hdr,61px) - var(--sp-h,0px))}
	body.sp-aan:not(.sp-in) .yt-los{bottom:var(--sp-h,84px)}
}
/* Knoppenbalk onderin op telefoon en tablet (Joris 31 okt, keuze 'Vaste knoppen + Menu'); geen hamburger bovenin.
   Speler open: de balk verdwijnt (pijltje in de speler sluit hem weer). */
.tabbalk{display:none}
@media (max-width:1079px){
	.menuknop{display:none}
	.sociaal-vast,body.sp-aan .sociaal-vast{display:none!important}
	.tabbalk{position:fixed;left:0;right:0;bottom:0;z-index:31;display:flex;align-items:stretch;padding:0 4px env(safe-area-inset-bottom);background:rgba(5,3,9,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--lijn)}
	.tabbalk>a,.tabbalk>button{flex:1 1 0;min-width:0;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;border:0;background:none;color:var(--grijs);font:normal 12px/1 var(--kop);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer}
	.tabbalk svg{width:20px;height:20px}
	.tabbalk span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
	.tabbalk [aria-current],.tabbalk [aria-expanded="true"]{color:var(--lila)}
	.tabbalk .tab-speler{display:none}
	body.sp-aan .tabbalk .tab-speler{display:flex}
	body.sp-speelt .tabbalk .tab-speler{color:var(--lila)}
	body.sp-speelt .tabbalk .tab-speler svg{animation:hg-laadt 1.6s ease-in-out infinite}
	body.sp-aan:not(.sp-in) .tabbalk{display:none}
	body.menu-open .tabbalk [data-tab="menu"]{color:var(--lila)}
	.menu{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
	:root[data-stand="zon"] .tabbalk{background:rgba(255,247,234,.96)}
}
/* Mini-speler telefoon (Joris 31 okt: SoundCloud-link te dicht tegen het pijltje, dikke duimen): grotere tikvlakken met ruimte en een scheidingslijn */
@media (max-width:1023px){
	#hg-speler:not(.sp-open) .sp-bron,#hg-speler:not(.sp-open) .sp-inklap-mini{width:46px;height:48px}
	#hg-speler:not(.sp-open) .sp-inklap-mini{margin-left:14px;border-left:1px solid var(--lijn,rgba(255,255,255,.18))}
	#hg-speler:not(.sp-open) .sp-inklap-mini svg{width:24px;height:24px}
}
/* Onderbalk (Joris 31 okt): Radio als muzieknootje (zonder muziek: naar de radiopagina), Tickets onderin; grote speler krijgt een radio-icoon.
   Menu schuift van rechts in als lade met eigen kop en kruisje, over een donker scherm, zodat het niet als een pagina oogt. */
.menu-kop,.menu-scherm{display:none}
.sp-radio{display:none}
.sp-open .sp-radio{display:inline-flex}
@media (min-width:1024px){.sp-radio{display:inline-flex}}
@media (max-width:1079px){
	.knop-tickets{display:none}
	.tabbalk .tab-speler{display:flex}
	.tabbalk .tab-tickets{color:var(--lila)}
	.tabbalk .tab-tickets svg{color:var(--lila)}
	.balk{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,3,9,.98)}
	:root[data-stand="zon"] .balk{background:rgba(255,247,234,.98)}
	.menu{display:block;position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(86vw,380px);max-height:none;margin:0;padding:env(safe-area-inset-top) 20px calc(70px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--vlak,#120b1f);border-left:3px solid var(--lila);box-shadow:-18px 0 40px rgba(0,0,0,.55);transform:translateX(105%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s}
	.menu.open{transform:none;visibility:visible;transition:transform .28s ease}
	.menu-kop{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;margin:0 -20px;padding:10px 8px 10px 20px;background:inherit;border-bottom:1px solid var(--lijn)}
	.menu-kop span{font:normal 22px/1 var(--kop);letter-spacing:.08em;text-transform:uppercase;color:var(--lila)}
	.menu-dicht{width:48px;height:48px;border:0;background:none;color:var(--mint);font:32px/1 Arial,sans-serif;cursor:pointer}
	.menu-lijst>li>a,.menu-lijst .menu-uitklap{font-size:26px}
	.menu-scherm{display:block;position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .28s ease}
	body.menu-open .menu-scherm{opacity:1;pointer-events:auto}
	body.menu-open{overflow:hidden}
	.tabbalk{z-index:41}
	:root[data-stand="zon"] .menu{background:#fff7ea}
}
@media (max-width:1079px) and (prefers-reduced-motion:reduce){.menu,.menu.open,.menu-scherm{transition:none}}
/* Lange titel in de spelerbalk loopt langzaam heen en weer (Joris 31 okt) */
.sp-titel .sp-loop{display:inline-block}
.sp-titel.sp-rolt{text-overflow:clip}
.sp-titel.sp-rolt .sp-loop{animation:hg-rol var(--rol-duur,12s) ease-in-out infinite alternate}
@keyframes hg-rol{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(var(--rol,0))}}
.sp-open .sp-titel .sp-loop,.sp-open .sp-titel.sp-rolt .sp-loop{display:inline;animation:none;transform:none}
@media (prefers-reduced-motion:reduce){.sp-titel.sp-rolt .sp-loop{animation:none}.sp-titel.sp-rolt{text-overflow:ellipsis}}
/* Telefoon/tablet (Joris 31 okt): speler bovenin naast het logo (tussen logo en zon/maan-knop), altijd zichtbaar zolang
   er iets is gestart; tik op de titel opent de grote speler. Onderbalk blijft altijd staan; Radio is daar een gewone link. */
@media (max-width:1079px){
	.sp:not(.sp-open),.sp[popover]:not(.sp-open){inset:8px 64px auto 97px;height:44px;padding:0;transform:none!important;pointer-events:auto!important;transition:none;z-index:35}
	.hg-losse-app .sp:not(.sp-open){top:calc(env(safe-area-inset-top) + 8px)}
	.sp:not(.sp-open) .sp-balk{height:44px;border:1px solid var(--lijn);background:var(--vlak,#120b1f);backdrop-filter:none;-webkit-backdrop-filter:none}
	.sp:not(.sp-open) .sp-rij{height:42px;min-height:0;padding:0 2px 0 0;gap:0}
	.sp:not(.sp-open) .sp-speel{width:42px;height:42px;margin:0 6px 0 0}
	.sp:not(.sp-open) .sp-titel{font-size:15px;line-height:1.1}
	.sp:not(.sp-open) .sp-artiest{font-size:13px;line-height:1.1}
	.sp:not(.sp-open) .sp-info{padding:0 4px 0 0}
	#hg-speler:not(.sp-open) .sp-bron{width:40px;height:42px}
	.sp:not(.sp-open) .sp-pos,.sp:not(.sp-open) .sp-vorige,.sp:not(.sp-open) .sp-volgende,.sp:not(.sp-open) .sp-fav,.sp:not(.sp-open) .sp-tijd,.sp:not(.sp-open) .sp-vol,.sp:not(.sp-open) .sp-lijstknop,#hg-speler:not(.sp-open) .sp-inklap-mini,.sp:not(.sp-open) .sp-radio,.sp:not(.sp-open) .sp-sluit,.sp:not(.sp-open) .sp-inklap-groot,.sp:not(.sp-open) .sp-paneel{display:none!important}
	body.sp-aan,body.sp-aan.sp-in,body.sp-aan:not(.sp-in){padding-bottom:calc(46px + env(safe-area-inset-bottom))}
	body.sp-aan .duo,body.sp-aan.sp-in .duo,body.sp-aan:not(.sp-in) .duo{--duo-h:calc(100svh - var(--hdr,61px) - 46px - env(safe-area-inset-bottom))}
	body.sp-aan:not(.sp-in) .tabbalk{display:flex}
	body.sp-aan:not(.sp-in) .yt-los,body.sp-aan .yt-los{bottom:calc(46px + env(safe-area-inset-bottom))}
	body.menu-open .sp:not(.sp-open){visibility:hidden}
	:root[data-stand="zon"] .sp:not(.sp-open) .sp-balk{background:#fff;border-color:#e6dcc6}
	/* Menu-lade: in- en uitschuiven met clip-path i.p.v. buiten beeld schuiven; iOS zoomde anders soms uit naar de 'bredere' pagina */
	.menu{transform:none;clip-path:inset(0 0 0 100%);transition:clip-path .28s ease,visibility 0s linear .28s}
	.menu.open{clip-path:inset(0 0 0 0);transition:clip-path .28s ease}
	/* Menu: ambassadeur en contact groot, de rest klein (Joris 31 okt); huidige pagina lila, ook Events op een eventpagina */
	.menu-klein>ul{list-style:none;margin:14px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
	.menu-klein a{display:inline-flex;align-items:center;min-height:40px;font:normal 18px/1 var(--kop);letter-spacing:.04em;text-transform:uppercase;color:var(--grijs);text-decoration:none}
	.menu-klein a[aria-current]{color:var(--lila)}
	.menu-huidig>.menu-uitklap{color:var(--lila)}
	/* Onderbalk: alleen de huidige pagina lila; Tickets niet altijd; menu open = alleen Menu lila */
	.tabbalk .tab-tickets,.tabbalk .tab-tickets svg{color:var(--grijs)}
	.tabbalk .tab-tickets[aria-current],.tabbalk .tab-tickets[aria-current] svg{color:var(--lila)}
	body.menu-open .tabbalk [aria-current]{color:var(--grijs)}
	body.menu-open .tabbalk [data-tab="menu"]{color:var(--lila)}
	body.sp-speelt .tabbalk .tab-speler:not([aria-current]){color:var(--grijs)}
}
@media (min-width:1080px){.menu-klein,.menu-mobiel{display:none}}
/* Desktop-fix (6 nov 2026): '.menu-lijst>li{display:flex}' (hoger gewicht) won van de regels hierboven, waardoor kleine links, taalkeuze en het nieuwsbriefformulier in de balk stonden. Alleen vanaf 1080 px. */
@media (min-width:1080px){.menu-lijst>li.menu-klein,.menu-lijst>li.menu-mobiel,.menu-lijst>li.menu-taal,.menu-lijst>li[hidden]{display:none}}
html,body{overflow-x:clip}
@media (max-width:1079px){
	.menu-desktop{display:none}
	#inhoud.schuif-op{animation:hg-schuif-op .38s cubic-bezier(.2,.8,.2,1)}
}
@keyframes hg-schuif-op{from{transform:translateY(60vh);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#inhoud.schuif-op{animation:none}}
.sp-bron[hidden],#hg-speler .sp-bron[hidden]{display:none!important}
/* Meldingen (nieuwe versie, app installeren) op telefoon/tablet onderin boven de knoppenbalk: bovenin zat de speler ervoor (Joris 31 okt) */
@media (max-width:1079px){.hg-installeer{top:auto;bottom:calc(46px + env(safe-area-inset-bottom) + 8px);z-index:45}}
/* Snelheid op de telefoon (Joris 31 okt: "reageert traag, vaak pas na 2x"):
   geen dubbeltik-zoom (die liet de iPhone op een tweede tik wachten en zoomde soms in), laadbalkje bij een paginawissel,
   en lange lijsten pas opmaken als ze in beeld komen. */
html{touch-action:manipulation}
body.sp-wisselt::before{content:'';position:fixed;left:0;right:0;top:env(safe-area-inset-top,0);height:3px;background:var(--lila);transform-origin:0 50%;animation:hg-laadbalk 1.5s cubic-bezier(.2,.7,.3,1) forwards;z-index:60;pointer-events:none}
@keyframes hg-laadbalk{from{transform:scaleX(.08)}to{transform:scaleX(.9)}}
.sp-wisselt #inhoud{transition-duration:.08s}
.rd-rij{content-visibility:auto;contain-intrinsic-size:auto 68px}
.dj-laadt{padding:24px 0}
/* Diavoorstelling schermvullend: de foto staat altijd in het midden, ook terwijl hij nog laadt (Joris 31 okt: "maar half getoond") */
.dia[open]{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;display:grid;place-items:center}
.dia img{max-height:calc(100dvh - 180px);object-fit:contain}
/* Artiestvenster op telefoon/tablet: echt venster, speler bovenin en onderbalk blijven zichtbaar en bedienbaar (Joris 31 okt) */
@media (max-width:1079px){
	.dj-modal.dj-los[open]{position:fixed;z-index:40;inset:calc(64px + env(safe-area-inset-top)) 10px calc(58px + env(safe-area-inset-bottom)) 10px;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0 0 12px;border:1px solid var(--lijn);box-shadow:0 18px 50px rgba(0,0,0,.55);overflow-y:auto}
	.sp-aan .dj-modal.dj-los[open]{padding-bottom:12px}
	.dj-modal.dj-los .dj-dicht{top:6px;margin-top:0;position:sticky;float:right;margin-right:6px}
	.dj-scherm{position:fixed;inset:0;z-index:39;background:rgba(5,3,9,.78)}
	:root[data-stand="zon"] .dj-scherm{background:rgba(60,40,10,.5)}
	body.dj-open{overflow:hidden}
}
/* Voetlinks staan op telefoon/tablet al in het menu (Joris 31 okt: "de footer mag weg") */
@media (max-width:1079px){.voet-links{display:none}}
/* Gekozen taal in het menu: lichte letters op het donkere vlak (Joris 31 okt) */
.menu .taal a[aria-current],.menu .taal a[aria-current]:hover{background:var(--mint);color:var(--bg)}
/* Rechtsonder: Radio, of afspelen/pauze zodra er een set geladen is; de balk bovenin houdt titel en SoundCloud-icoon (Joris 31 okt) */
.tab-ik-speel,.tab-ik-pauze,.tab-l-speel,.tab-l-pauze{display:none}
@media (max-width:1079px){
	body.sp-tabknop .tabbalk .tab-speler svg:not(.tab-ik-speel):not(.tab-ik-pauze),body.sp-tabknop .tab-l-radio{display:none}
	body.sp-tabknop:not(.sp-speelt) .tab-ik-speel,body.sp-tabknop:not(.sp-speelt) .tab-l-speel,
	body.sp-tabknop.sp-speelt .tab-ik-pauze,body.sp-tabknop.sp-speelt .tab-l-pauze{display:block}
	body.sp-tabknop .tabbalk .tab-speler,body.sp-tabknop.sp-speelt .tabbalk .tab-speler:not([aria-current]){color:var(--lila)}
	body.sp-tabknop .tabbalk .tab-speler svg{animation:none}
	body.sp-tabknop.sp-tikklaar .tabbalk .tab-speler svg{animation:hg-laadt 1s ease-in-out infinite}
	body.sp-tabknop .sp:not(.sp-open) [data-sp-speelknop]{display:none}
}
@media (max-width:1079px){body.sp-tabknop .sp:not(.sp-open) .sp-info{padding-left:12px}}
/* Komende editie in 'Hidden Garden appearances': gestippelde rand (Joris 31 okt) */
.dj-tegels .dj-komend a,.dj-tegels .dj-komend span{border-style:dashed}
/* Is rechtsonder de afspeelknop, dan staat Radio weer in het menu (Joris 31 okt) */
@media (max-width:1079px){body.sp-tabknop .menu-desktop{display:list-item}}
/* Bewegende golf in de speler bovenin: je ziet meteen dat er muziek speelt (Joris 31 okt) */
.sp-golf{display:none}
@media (max-width:1079px){
	body.sp-geladen .sp:not(.sp-open) .sp-golf{display:flex;align-items:center;gap:2px;flex:0 0 auto;height:26px;margin-left:8px}
	body.sp-geladen .sp:not(.sp-open) .sp-info{padding-left:6px}
	.sp-golf i{display:block;width:3px;height:4px;background:var(--lila);border-radius:0;transition:height .3s}
	body.sp-speelt .sp-golf i{animation:hg-golf 1s ease-in-out infinite alternate}
	body.sp-speelt .sp-golf i:nth-child(2){animation-duration:.7s;animation-delay:-.2s}
	body.sp-speelt .sp-golf i:nth-child(3){animation-duration:1.2s;animation-delay:-.5s}
	body.sp-speelt .sp-golf i:nth-child(4){animation-duration:.8s;animation-delay:-.1s}
	body.sp-speelt .sp-golf i:nth-child(5){animation-duration:1.1s;animation-delay:-.7s}
	body.sp-speelt .sp-golf i:nth-child(6){animation-duration:.9s;animation-delay:-.3s}
	body.sp-speelt .sp-golf i:nth-child(7){animation-duration:1.3s;animation-delay:-.6s}
}
@keyframes hg-golf{0%{height:4px}50%{height:18px}100%{height:26px}}
@media (prefers-reduced-motion:reduce){body.sp-speelt .sp-golf i{animation:none;height:14px}}
/* Sets in het artiestprofiel: zelfde regel als de radiolijst (Joris 31 okt) */
.dj-sets .rd-set .rd-tekst{font:normal 20px/1.25 var(--kop);margin-left:4px}
.dj-sets .rd-set .rd-meta{font-size:13px;line-height:1.4}
.dj-sets .rd-set .sp-eq{margin-right:6px}
/* Grote speler schuift van onderen in als je rechtsonder op Radio tikt (Joris 31 okt) */
.sp.sp-open.sp-schuift{animation:hg-schuif-op .35s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.sp.sp-open.sp-schuift{animation:none}}
/* Radioscherm (telefoon/tablet, radiopagina met geladen set): speler compact vast bovenin, radiolijst eronder,
   rechtsonder 'Sluiten' (Joris 31 okt) */
.tab-ik-sluit,.tab-l-sluit{display:none}
@media (max-width:1079px){
	.sp.sp-open.sp-dok,.sp.sp-open.sp-dok[popover]{inset:0 0 auto 0;height:auto;justify-content:flex-start;border-bottom:1px solid var(--lila);box-shadow:0 10px 30px rgba(0,0,0,.45)}
	.sp-open.sp-dok .sp-balk{flex:none;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px}
	.sp-dok .sp-inklap-groot,.sp-dok .sp-radio{display:none!important}
	.sp-open.sp-dok .sp-info{gap:2px}
	.sp-open.sp-dok .sp-titel{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
	.sp-open.sp-dok .sp-artiest{font-size:15px}
	.sp-open.sp-dok .sp-pos{margin:8px 0 0;height:22px}
	.sp-open.sp-dok .sp-tijd{font-size:13px}
	.sp-open.sp-dok .sp-rij{gap:4px 10px}
	.sp-open.sp-dok .sp-ik{width:46px;height:46px}
	.sp-open.sp-dok .sp-ik svg{width:26px;height:26px}
	.sp-open.sp-dok .sp-speel{width:58px;height:58px}
	.sp-open.sp-dok .sp-speel svg{width:30px;height:30px}
	body.sp-dokt header.balk{visibility:hidden}
	body.sp-dokt #inhoud{padding-top:calc(var(--sp-dok-h,260px) - 70px)}
	body.sp-dokt .tab-speler svg:not(.tab-ik-sluit),body.sp-dokt .tab-l-radio{display:none}
	body.sp-dokt .tab-ik-sluit,body.sp-dokt .tab-l-sluit{display:block}
	body.sp-dokt .tabbalk .tab-speler{color:var(--mint)}
	body.sp-dokt .tabbalk .tab-speler svg{animation:none}
}
@media (max-width:1079px){
	.sp-open.sp-dok .sp-sluit{display:none!important} /* sluiten gaat rechtsonder */
	body.sp-dokt .rd-kop .kop-groot{display:none}
	body.sp-dokt #inhoud{padding-top:calc(var(--sp-dok-h,220px) - 40px)}
}
/* Telefoon/tablet: geen voettekst meer (Joris 31 okt: logo, social links en links staan in het menu) */
@media (max-width:1079px){footer.voet{display:none}}
/* Computer: voettekst alleen nog een dunne regel met voorwaarden, privacy en copyright; geen nieuwsbrief, logo of social links (Joris 31 okt) */
@media (min-width:1080px){
	.voet{margin-top:24px;padding:6px 0 12px}
	.voet-nieuwsbrief,.voet-logo,.voet .sociaal-voet,.voet-links li:not(.voet-blijft){display:none}
	.voet-onder{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 18px;padding-top:0}
	.voet-links{margin:0}
	.voet-onder .zacht{margin:0;font-size:14px}
}
/* Radioscherm, nieuwe opzet (Joris 31 okt): speler bovenin blijft klein (golf + titel), de onderbalk wordt
   tijdbalk + vorige/afspelen/volgende/hartje/afspeellijst + Sluiten; de radiolijst staat eronder zoals op de radiopagina. */
.tsb{display:none}
@media (max-width:1079px){
	body.sp-dokt header.balk{visibility:visible}
	body.sp-dokt #inhoud{padding-top:0}
	body.sp-dokt .tabbalk{flex-wrap:wrap}
	body.sp-dokt .tabbalk>a:not(.tab-speler),body.sp-dokt .tabbalk>button{display:none}
	body.sp-dokt .tsb{display:contents}
	body.sp-dokt .tsb>button{flex:1 1 44px;min-width:0;height:50px;display:flex;align-items:center;justify-content:center;position:relative;padding:0;border:0;background:none;color:var(--mint);cursor:pointer}
	body.sp-dokt .tsb>button svg{width:26px;height:26px}
	.tsb-tijd{flex:1 0 100%;order:-1;display:flex;align-items:center;gap:10px;padding:8px 10px 2px;font:13px/1 system-ui,sans-serif;color:var(--grijs);font-variant-numeric:tabular-nums}
	.tsb-tijd input{flex:1;min-width:0;height:24px;margin:0;accent-color:var(--lila)}
	.tsb-speel{color:var(--lila)!important}
	.tsb-speel svg{width:32px!important;height:32px!important}
	.tsb-ik-pauze,body.sp-speelt .tsb-ik-speel{display:none}
	body.sp-speelt .tsb-ik-pauze{display:block}
	body.sp-tikklaar .tsb-speel svg{animation:hg-laadt 1s ease-in-out infinite}
	.tsb-fav svg{fill:none;stroke:currentColor;stroke-width:2}
	.tsb-fav[aria-pressed="true"]{color:var(--lila)!important}
	.tsb-fav[aria-pressed="true"] svg{fill:currentColor}
	[data-tsb-aantal]:not(:empty){position:absolute;top:4px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--lila);color:#0b0614;font:bold 11px/18px system-ui,sans-serif;text-align:center}
	body.sp-dokt .tabbalk>.tab-speler{height:50px;flex:1 1 44px}
	body.sp-dokt .tsb-tijd{height:32px;align-self:center}
	body.sp-dokt{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
	body.sp-dokt .sp:not(.sp-open) [data-sp-speelknop]{display:none}
	body.sp-dokt #hg-speler:not(.sp-open) .sp-paneel:not([hidden]){display:block!important;position:fixed;left:0;right:0;top:auto;bottom:calc(84px + env(safe-area-inset-bottom));max-height:60vh;overflow-y:auto;z-index:50;background:var(--bg);border-top:1px solid var(--lila);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
}

/* Radioscherm: afspeellijstkop compacter */
@media (max-width:1079px){body.sp-dokt .sp-paneel-kop h2{font-size:22px}}

/* Ticketfasen: "Nu te koop" is een knop naar de shop (Joris 31 okt) */
a.fase-koop{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-size:15px;text-decoration:none;cursor:pointer}
a.fase-koop:hover,a.fase-koop:focus-visible{filter:brightness(1.12);text-decoration:none}

/* Radioscherm: onderbalk dicht (geen doorschijnende lijst) en een zichtbare tijdlijn op iPhone */
@media (max-width:1079px){
	body.sp-dokt .tabbalk{background:var(--bg)}
	body.sp-dokt .tsb-tijd input{-webkit-appearance:none;appearance:none;background:transparent}
	body.sp-dokt .tsb-tijd input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(var(--lila),var(--lila)) 0/var(--sp-vul,0%) 100% no-repeat,var(--lijn)}
	body.sp-dokt .tsb-tijd input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--lila);border:0}
	body.sp-dokt .tsb-tijd input::-moz-range-track{height:4px;background:var(--lijn)}
	body.sp-dokt .tsb-tijd input::-moz-range-progress{height:4px;background:var(--lila)}
	body.sp-dokt .tsb-tijd input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--lila);border:0}
}

/* Gekozen taal in het menu: paars vlak met lichte letters (Joris 31 okt) */
.menu .taal a[aria-current],:root[data-stand="zon"] .menu .taal a[aria-current]{background:var(--lila);border-color:var(--lila);color:#fff}

/* Ticketpagina compact: knoptekst op één regel, beide events samen in beeld op de telefoon (Joris 31 okt) */
@media (max-width:759px){
	body:has(.keuze-tickets) .paginakop{padding:16px 0 4px;margin-bottom:0}
	.keuze-tickets{gap:14px;margin:14px 0 24px}
	.keuze-tickets .kaart{margin:0;padding:14px 16px 16px}
	.keuze-tickets .datum{margin:0 0 2px;font-size:15px}
	.keuze-tickets h2.kop{margin:0;font-size:30px;line-height:1.05}
	.keuze-tickets .grijs{margin:4px 0 12px;font-size:15px}
	.keuze-tickets .knop-ticket{display:flex;justify-content:center;gap:10px;width:100%;margin:0;padding:12px 14px;white-space:nowrap}
}

/* Nieuwsbrief in het menu (Joris 31 okt): compact formulier onder de kleine links, één kolom */
.menu-nb .nieuwsbrief{margin:18px 0 6px;padding:16px 14px 18px}
.menu-nb .nieuwsbrief .kop{font-size:24px;margin:0 0 6px}
.menu-nb .nieuwsbrief .grijs{font-size:14px;margin:0}
.menu-nb .rij{grid-template-columns:1fr}
.menu-nb .formulier label{margin:12px 0 4px}
.menu-nb .formulier input[type=email]{padding:12px;font-size:16px}
.menu-nb .knop{width:100%;justify-content:center;margin-top:10px}
.menu-nb .formulier .vink a{display:inline;padding:0}

/* Aantal favorieten in de tabbalk: in de lichte stand witte cijfers op het paars (Joris 2 nov) */
:root[data-stand="zon"] [data-tsb-aantal]:not(:empty){color:#fff!important}

/* Proef (Joris 2 nov): alleen de ticketspagina is korter dan het scherm en daar sprong de onderbalk omhoog; 2 px scrollruimte laat hem zich gedragen als op de andere pagina's */
@media (max-width:1079px){body:has(.keuze-tickets){min-height:calc(100svh + 2px)}}

/* Onderbalk op iPhone (Joris 2 nov): tijdens scrollen stond hij halverwege het scherm en sprong hij terug bij stilstand. Geen blurfilter meer en een eigen laag; zelfde aanpak als de kopbalk (die heeft op de telefoon ook geen blur). */
@media (max-width:1079px){
	.tabbalk{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,3,9,.98);transform:translateZ(0);-webkit-transform:translateZ(0)}
	:root[data-stand="zon"] .tabbalk{background:rgba(255,247,234,.98)}
}

/* Radio op iPhone (Joris 2 nov): per set eerst 'Inladen' (omlijnde knop), dan een draaiend icoontje, en zodra de set klaarstaat verschijnt de speelknop */
.rd-inlaad{display:none}
.hg-ios .rd-rij[data-p="sc"] .rd-set .sp-rspeel{display:none}
.hg-ios .rd-rij[data-p="sc"] .rd-set .rd-inlaad{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:2px solid var(--accent);color:var(--accent);cursor:pointer}
.hg-ios .rd-rij[data-p="sc"] .rd-set[data-laad="klaar"] .rd-inlaad{display:none}
.hg-ios .rd-rij[data-p="sc"] .rd-set[data-laad="klaar"] .sp-rspeel{display:inline-flex}
.hg-ios .rd-rij[data-p="sc"] .rd-set[data-laad="laadt"] .rd-inlaad{pointer-events:none;border-color:var(--lijn)}
.hg-ios .rd-rij[data-p="sc"] .rd-set[data-laad="laadt"] .rd-inlaad svg{display:none}
.hg-ios .rd-rij[data-p="sc"] .rd-set[data-laad="laadt"] .rd-inlaad::after{content:"";width:16px;height:16px;border:2px solid var(--lijn);border-top-color:var(--accent);border-radius:50%;animation:hg-draai .8s linear infinite}
@keyframes hg-draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hg-ios .rd-rij[data-p="sc"] .rd-set[data-laad="laadt"] .rd-inlaad::after{animation:none}}

/* Radio: klein dj-portret in de rij, rechte hoeken (Joris 6 nov 2026) */
.rd-foto{flex:0 0 40px;width:40px;height:40px;object-fit:cover;border-radius:0;opacity:.9}
.rd-foto-i{display:flex;align-items:center;justify-content:center;background:var(--lijn);color:var(--grijs);font:15px/1 var(--kop)}

/* Cookiebot-knop (links onder) ligt boven de onderbalk, niet erover (Joris 6 nov 2026, iPhone) */
@media (max-width:1079px){
	#CookiebotWidget{bottom:calc(env(safe-area-inset-bottom, 0px) + 56px) !important;left:8px !important}
}

/* Talent pool op de radio en aanmeldpagina (Joris 6 nov 2026) */
.rd-tabs button{padding-left:8px;padding-right:8px}
.rd-talent{margin:10px 0}
.rd-talent a{color:var(--lila);text-decoration:underline}

/* Alle invoervelden in formulieren gelijk (Joris 6 nov 2026): ook tel en url, zoals tekst en e-mail */
.formulier input[type=tel],.formulier input[type=url],.formulier input[type=number],.formulier input[type=password]{width:100%;padding:14px;background:var(--bg);border:1px solid var(--lijn);color:var(--mint);font:inherit;border-radius:0;-webkit-appearance:none;appearance:none}
.formulier input::placeholder,.formulier textarea::placeholder{color:var(--grijs);opacity:.7}
.rd-talent-link{margin:6px 0 0}
.rd-talent-link a{color:var(--lila);text-decoration:underline}

/* Cookie-knop in de huisstijl: vierkant, rechte hoeken, eigen icoon, kleuren van de site (Joris 6 nov 2026) */
#CookiebotWidget .CookiebotWidget-logo{width:40px !important;height:40px !important;padding:0 !important;display:flex !important;align-items:center;justify-content:center;background:var(--bg) !important;border:1px solid var(--lila) !important;border-radius:0 !important;box-shadow:none !important;color:var(--lila) !important;cursor:pointer}
#CookiebotWidget .CookiebotWidget-logo svg{display:none !important}
#CookiebotWidget .CookiebotWidget-logo::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27%3E%3Cpath d=%27M3 6h8M17 6h4M3 12h3M12 12h9M3 18h10M19 18h2%27/%3E%3Ccircle cx=%2714%27 cy=%276%27 r=%272.2%27 fill=%27black%27/%3E%3Ccircle cx=%279%27 cy=%2712%27 r=%272.2%27 fill=%27black%27/%3E%3Ccircle cx=%2716%27 cy=%2718%27 r=%272.2%27 fill=%27black%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.2%27%3E%3Cpath d=%27M3 6h8M17 6h4M3 12h3M12 12h9M3 18h10M19 18h2%27/%3E%3Ccircle cx=%2714%27 cy=%276%27 r=%272.2%27 fill=%27black%27/%3E%3Ccircle cx=%279%27 cy=%2712%27 r=%272.2%27 fill=%27black%27/%3E%3Ccircle cx=%2716%27 cy=%2718%27 r=%272.2%27 fill=%27black%27/%3E%3C/svg%3E") center/contain no-repeat}
#CookiebotWidget .CookiebotWidget-logo:hover,#CookiebotWidget .CookiebotWidget-logo:focus-visible{background:var(--lila) !important;color:#0b0614 !important}

/* Cookie-instellingen: op mobiel in het menu (Joris 6 nov), zwevende knop daar weg */
.menu-klein .menu-cookie{display:inline-flex;align-items:center;min-height:40px;padding:0;background:none;border:0;border-radius:0;font:normal 18px/1 var(--kop);letter-spacing:.04em;text-transform:uppercase;color:var(--grijs);cursor:pointer}
.menu-klein .menu-cookie:hover,.menu-klein .menu-cookie:focus-visible{color:var(--lila)}
@media (max-width:1079px){#CookiebotWidget{display:none !important}}

/* FAQ-vragen: BigNoodle heeft één gewicht, geen nep-vet (Joris 6 nov: slecht leesbaar) */
.faq summary{font-weight:normal !important;font-size:22px;line-height:1.15;letter-spacing:.03em}