.radio-taakbalkknop { order:100; flex:0 0 46px; width:46px; height:42px; margin-left:auto; padding:0; box-sizing:border-box; display:grid; place-items:center; border:2px solid; border-color:#fff #777 #777 #fff; border-radius:5px; background:linear-gradient(#f3f3f3,#c6c6c6); cursor:pointer; }
.radio-taakbalkknop img { display:block; width:38px; height:38px; object-fit:contain; }
.radio-taakbalkknop[aria-pressed="true"] { border-color:#666 #fff #fff #666; background:#b8cbd2; box-shadow:inset 2px 2px 4px #0005; }
.radio-taakbalkknop[aria-pressed="true"] img { transform:translate(1px,1px); }
.windows-taakbalk { box-sizing:border-box; padding-right:max(6px,env(safe-area-inset-right)); padding-bottom:env(safe-area-inset-bottom); height:calc(var(--taakbalk-hoogte) + env(safe-area-inset-bottom)); }
.radio-paneel { position:fixed; z-index:10001; right:max(8px,env(safe-area-inset-right)); bottom:calc(var(--taakbalk-hoogte) + env(safe-area-inset-bottom) + 8px); width:min(300px,calc(100vw - 16px)); aspect-ratio:358/531; max-height:calc(100dvh - var(--taakbalk-hoogte) - env(safe-area-inset-bottom) - 16px); border-radius:18% / 12%; overflow:hidden; isolation:isolate; color:#fff3c7; font:15px "Segoe UI",sans-serif; filter:drop-shadow(0 4px 10px #0006); }
.radio-paneel[hidden] { display:none!important; }
.radio-achtergrond { position:absolute; left:-15.08%; top:-4.71%; width:132.4%; height:111.49%; object-fit:fill; z-index:-1; }
.radio-inhoud { position:absolute; left:13%; right:13%; top:10%; bottom:26%; overflow:auto; scrollbar-width:thin; border-radius:12px; background:#123b4be8; padding:10px; box-sizing:border-box; }
.radio-inhoud h2 { margin:0 0 6px; font-size:21px; text-align:center; color:#fff3c7; }
.radio-zenders { margin:0; padding:0; border:0; min-width:0; }
.radio-zenders legend { font-size:12px; margin-bottom:4px; }
.radio-zenders label { display:flex; align-items:center; gap:8px; min-height:36px; cursor:pointer; border-radius:6px; padding:0 5px; }
.radio-zenders label:has(input:checked) { background:#fff1b825; color:#fff6d9; }
.radio-zenders input { margin:0; width:17px; height:17px; accent-color:#f7dd83; flex-shrink:0; }
.radio-volume { display:flex; gap:6px; align-items:center; justify-content:space-between; font-size:12px; margin-top:7px; }
#radio-status { font-size:11px; line-height:1.3; margin:6px 0 0; color:#fff3c7; }
.radio-paneel button:focus-visible,.radio-paneel input:focus-visible,.radio-taakbalkknop:focus-visible { outline:3px solid #f3d877; outline-offset:2px; }

.radio-knoppen { position:absolute; left:10%; right:10%; bottom:8%; display:flex; gap:4px; align-items:center; }
.radio-bediening { flex:1; min-width:0; aspect-ratio:229/214; display:grid; place-items:center; border:0; padding:0; background:transparent url('/windowsafbeelding.php?bestand=RadioKnop.png&v=1') center / contain no-repeat; cursor:pointer; border-radius:25%; }
.radio-bediening svg { width:44%; height:44%; fill:none; stroke:#fff0b9; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 2px #f3da7970); pointer-events:none; }
.radio-startsymbool,.radio-stopsymbool { fill:#fff0b9; stroke-width:1; }
.radio-stopsymbool,.radio-stilsymbool { display:none; }
.radio-spelen[data-speelt="true"] .radio-startsymbool { display:none; }
.radio-spelen[data-speelt="true"] .radio-stopsymbool { display:block; }
#radio-stil[aria-pressed="true"] .radio-geluidsymbool { display:none; }
#radio-stil[aria-pressed="true"] .radio-stilsymbool { display:block; }
.radio-bediening:hover { filter:brightness(1.12); }
.radio-bediening:active { transform:translateY(1px); filter:brightness(.85); }
#radio-stil[aria-pressed="true"] { filter:brightness(.85); }

/* Alleen de opmaak wisselt: het bestaande audio-element blijft intact. */
.radio-neutraal .radio-paneel {
    display:flex; flex-direction:column; width:min(300px,calc(100vw - 16px));
    aspect-ratio:auto; box-sizing:border-box; border:1px solid #777;
    border-radius:8px; background:#ededed; color:#222;
    filter:none; box-shadow:0 4px 14px #0005;
}
.radio-neutraal .radio-achtergrond { display:none; }
.radio-neutraal .radio-inhoud {
    position:static; flex:1 1 auto; min-height:0; overflow:auto;
    border-radius:0; background:transparent; padding:0 12px 12px;
}
.radio-neutraal .radio-inhoud h2 {
    margin:0 -12px 12px; padding:9px 12px; text-align:left;
    font-size:16px; color:#222; border-bottom:1px solid #888;
    background:linear-gradient(#f5f5f5 0%,#ddd 45%,#bcbcbc 100%);
    box-shadow:inset 0 1px #fff;
}
.radio-neutraal .radio-zenders legend { color:#444; font-size:13px; }
.radio-neutraal .radio-zenders label { min-height:40px; border-radius:4px; }
.radio-neutraal .radio-zenders label:has(input:checked) { background:#d5e0e8; color:#182b3a; }
.radio-neutraal .radio-zenders input { accent-color:#385b76; }
.radio-neutraal #radio-status { color:#444; font-size:12px; }
.radio-neutraal .radio-volume { font-size:13px; }
.radio-neutraal .radio-knoppen {
    position:static; flex:0 0 auto; padding:10px 12px; gap:8px;
    border-top:1px solid #aaa; background:linear-gradient(#eee,#d4d4d4 45%,#b5b5b5);
}
.radio-neutraal .radio-bediening {
    aspect-ratio:auto; min-height:44px; border:1px solid;
    border-color:#fff #777 #777 #fff; border-radius:4px;
    background:linear-gradient(#fafafa,#d2d2d2); box-shadow:0 1px 2px #0002;
}
.radio-neutraal .radio-bediening svg { width:24px; height:24px; stroke:#333; filter:none; }
.radio-neutraal .radio-startsymbool,.radio-neutraal .radio-stopsymbool { fill:#333; }
.radio-neutraal .radio-bediening:hover { background:#e4edf3; filter:none; }
.radio-neutraal #radio-stil[aria-pressed="true"],
.radio-neutraal .radio-spelen[data-speelt="true"] { background:#c4d4df; box-shadow:inset 1px 1px 3px #0003; filter:none; }
.radio-neutraal .radio-paneel button:focus-visible,
.radio-neutraal .radio-paneel input:focus-visible { outline:3px solid #356b94; outline-offset:2px; }