/* ==========================================
   SOUND RADIO - BASIS
   ========================================== */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
width: 100%;
min-height: 100%;
}

body {
width: 100%;
min-height: 100vh;
background-color: #07152d;
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}

/* ==========================================
   HEADER
   ========================================== */

#site-header {
width: 100%;
min-height: 105px;
padding: 16px 19% 0 21%;
position: relative;
z-index: 10;
}

/* ==========================================
   SCHUIN NAVIGATIEMENU
   ========================================== */

#hoofdmenu {
width: 94%;
height: 84px;
display: flex;
align-items: stretch;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}

.menu-item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #f0f4fc 100%);
color: #071632;
text-decoration: none;
border-right: 1px solid #b9cce8;
transform: skewX(-28deg);
transition: background 0.2s ease, color 0.2s ease;
}

.menu-item:first-child {
border-radius: 10px 0 0 10px;
}

.menu-item:last-child {
border-radius: 0 10px 10px 0;
border-right: 0;
}

/* ==========================================
   INHOUD MENU CENTREREN
   ========================================== */

.menu-item > span {
transform: skewX(28deg);
width: 100%;
text-align: center;
}

/* ==========================================
   ACTIEVE PAGINA
   ========================================== */

.menu-item.actief {
background: linear-gradient(135deg, #00d5ff 0%, #0062ff 85%);
color: #ffffff;
box-shadow: inset 0 0 0 2px rgba(0,220,255,0.55);
}

/* ==========================================
   HOVER - VOLLEDIG BLAUW
   ========================================== */

.menu-item:hover {
background: linear-gradient(135deg, #00cfff 0%, #0062ff 85%);
color: #ffffff;
}

.menu-item.actief:hover {
background: linear-gradient(135deg, #00cfff 0%, #0055ed 100%);
color: #ffffff;
}

/* ==========================================
   MENU ICONEN
   ========================================== */

.menu-icoon {
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: inherit;
}

.menu-icoon svg {
width: 30px;
height: 30px;
display: block;
flex-shrink: 0;
}

/* ==========================================
   MENU LETTERTYPE
   ========================================== */

.menu-tekst {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.3px;
line-height: 1.1;
text-align: center;
white-space: nowrap;
color: inherit;
}

/* ==========================================
   STUDIO - RESPONSIEVE LAGEN
   ========================================== */

#studio-scene {
position: relative;
width: 100%;
aspect-ratio: 1792 / 1024;
overflow: hidden;
pointer-events: none;
}

#studio-achtergrond {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}

/* ==========================================
   WISSELBARE DJ
   ========================================== */

#studio-dj {
position: absolute;
top: 5%;
left: 25%;
width: 48%;
z-index: 2;
pointer-events: none;
}

#studio-dj img {
display: block;
width: 100%;
height: auto;
}

/* ==========================================
   MENGTAFEL VOOR DE DJ
   ========================================== */

#studio-voorgrond {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 3;
pointer-events: none;
}

/* ==========================================
   ORIGINELE MICROFOON VOOR DE DJ
   ========================================== */

#studio-microfoon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 4;
pointer-events: none;
}

/* ==========================================
   TABLET
   ========================================== */

@media screen and (max-width: 1100px) {

#site-header {
padding: 15px 3% 0 23%;
}

#hoofdmenu {
height: 72px;
}

.menu-icoon {
width: 100%;
height: 23px;
}

.menu-icoon svg {
width: 23px;
height: 23px;
}

.menu-tekst {
font-size: 11px;
}

}

/* ==========================================
   MOBIEL
   ========================================== */

@media screen and (max-width: 700px) {

#site-header {
padding: 110px 12px 0;
}

#hoofdmenu {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
filter: none;
}

.menu-item {
min-height: 58px;
transform: none;
border: 1px solid #dbe5f5;
border-radius: 8px;
gap: 3px;
}

.menu-item:first-child,
.menu-item:last-child {
border-radius: 8px;
}

.menu-item > span {
transform: none;
width: 100%;
text-align: center;
}

.menu-icoon {
width: 100%;
height: 22px;
}

.menu-icoon svg {
width: 22px;
height: 22px;
}

.menu-tekst {
width: 100%;
font-size: 11px;
}

}


/* ==========================================
   DJ FOTO - VRIJSTAAND OF FOTOKADER
   ========================================== */

#studio-dj.dj-vrijstaand {
top: 12%;
left: 34%;
width: 32%;
aspect-ratio: auto;
overflow: visible;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}

#studio-dj.dj-vrijstaand img {
width: 100%;
height: auto;
object-fit: contain;
}

#studio-dj.dj-fotokader {
top: 16%;
left: 35%;
width: 30%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #101d32;
border: 3px solid #00cfff;
border-radius: 18px;
box-shadow: 0 0 25px rgba(0,207,255,0.45);
}

#studio-dj.dj-fotokader img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
}

#studio-dj.dj-halloween {
top: 12%;
left: 32%;
width: 36%;
}


/* ==========================================
   SOUND RADIO - ZIJPANELEN
   ========================================== */

#radio-zijpanelen {
position: absolute;
top: 145px;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 1.2%;
gap: 20px;
z-index: 6;
pointer-events: none;
}

.radio-zijkant {
width: 23%;
max-width: 350px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: auto;
}

.radio-paneel {
width: 100%;
background: rgba(255,255,255,0.96);
border: 1px solid rgba(205,221,247,0.9);
border-radius: 8px;
box-shadow: 0 5px 18px rgba(0,0,0,0.28);
overflow: hidden;
color: #071632;
}

.radio-paneel-kop {
min-height: 32px;
padding: 6px 10px;
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(180deg,#ffffff,#eaf2ff);
font-size: 12px;
font-weight: 800;
color: #091b40;
}

.radio-paneel-icoon {
width: 23px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,#00d5ff,#0055ff);
border-radius: 6px;
color: #ffffff;
font-size: 17px;
}

/* ==========================================
   LINKS - NU OP DE RADIO
   ========================================== */

.radio-nu-inhoud {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
}

.radio-albumhoes {
width: 72px;
height: 72px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,#07152d,#004dff,#f00092);
border-radius: 5px;
font-size: 32px;
color: #ffffff;
}

.radio-nummer-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 11px;
}

.radio-nummer-info strong {
font-size: 13px;
}

.radio-nummer-info > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.radio-voortgang {
width: 100%;
height: 6px;
background: #dfe8f7;
border-radius: 10px;
overflow: hidden;
}

.radio-voortgang span {
display: block;
width: 35%;
height: 100%;
background: linear-gradient(90deg,#00cfff,#005aff);
}

.radio-tijden {
display: flex;
justify-content: space-between;
color: #536583;
font-size: 10px;
}

/* ==========================================
   LINKS - LAATST GEDRAAID
   ========================================== */

.radio-geschiedenis {
padding: 5px 8px 8px;
}

.radio-track {
min-height: 38px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #e4ebf5;
font-size: 11px;
}

.radio-track:last-child {
border-bottom: 0;
}

.radio-track-tijd {
width: 38px;
flex-shrink: 0;
color: #52627d;
}

.radio-track-hoes {
width: 29px;
height: 29px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,#101c42,#007bff);
border-radius: 4px;
color: #ffffff;
font-size: 17px;
}

.radio-track-naam {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* ==========================================
   RECHTS - DJ VAN NU
   ========================================== */

.radio-dj-inhoud {
display: flex;
align-items: center;
gap: 10px;
padding: 9px;
}

.radio-dj-avatar {
width: 65px;
height: 65px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,#006aff,#07152d);
border: 3px solid #e5efff;
border-radius: 50%;
color: #ffffff;
font-size: 18px;
font-weight: 800;
}

.radio-dj-gegevens {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
}

.radio-dj-gegevens strong {
font-size: 14px;
}

.radio-dj-gegevens > span:not(.radio-onair) {
font-size: 11px;
color: #52627d;
}

.radio-onair {
padding: 4px 12px;
background: linear-gradient(90deg,#ff0055,#e50035);
border-radius: 5px;
color: #ffffff;
font-size: 10px;
font-weight: 800;
}

/* ==========================================
   RECHTS - VERZOEK AANVRAGEN
   ========================================== */

.radio-verzoek-formulier {
padding: 7px;
display: flex;
flex-direction: column;
gap: 5px;
}

.radio-verzoek-formulier input {
width: 100%;
height: 29px;
padding: 0 9px;
border: 1px solid #e2eaf6;
border-radius: 4px;
background: #f7faff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
outline: none;
}

.radio-verzoek-formulier input:focus {
border-color: #007bff;
}

.radio-verzoek-formulier button {
height: 30px;
border: 0;
border-radius: 5px;
background: linear-gradient(90deg,#ff0066,#e50045);
color: #ffffff;
font-size: 11px;
font-weight: 800;
}

.radio-verzoek-formulier button:disabled {
opacity: 1;
cursor: default;
}

/* ==========================================
   RECHTS - POLL VAN DE WEEK
   ========================================== */

.radio-poll {
padding: 8px;
}

.radio-poll > strong {
display: block;
margin-bottom: 8px;
font-size: 12px;
}

.radio-poll-opties {
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 4px;
}

.radio-poll-opties > div {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}

.radio-poll-opties > div span {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,#072252,#007bff);
border-radius: 5px;
color: #ffffff;
font-size: 22px;
}

.radio-poll-opties small {
font-size: 8px;
line-height: 1.2;
overflow-wrap: anywhere;
}

.radio-poll-knoppen {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
margin-top: 10px;
}

.radio-poll-knoppen button {
min-height: 28px;
border: 0;
border-radius: 5px;
background: linear-gradient(90deg,#008cff,#004dff);
color: #ffffff;
font-size: 9px;
font-weight: 800;
}

.radio-poll-knoppen button:last-child {
background: #eaf1ff;
color: #071632;
}

.radio-poll-knoppen button:disabled {
opacity: 1;
cursor: default;
}

/* ==========================================
   KLEINERE DESKTOPSCHERMEN
   ========================================== */

@media screen and (min-width: 1101px) and (max-width: 1450px) {

.radio-zijkant {
width: 24%;
}

.radio-paneel-kop {
font-size: 10px;
}

.radio-albumhoes {
width: 55px;
height: 55px;
}

.radio-dj-avatar {
width: 52px;
height: 52px;
}

.radio-poll-opties small {
font-size: 7px;
}

}

/* ==========================================
   TABLET EN MOBIEL
   ========================================== */

@media screen and (max-width: 1100px) {

#radio-zijpanelen {
position: relative;
top: auto;
left: auto;
padding: 15px;
gap: 12px;
background: #07152d;
}

.radio-zijkant {
width: calc(50% - 6px);
max-width: none;
}

}

@media screen and (max-width: 700px) {

#radio-zijpanelen {
flex-direction: column;
padding: 12px;
}

.radio-zijkant {
width: 100%;
}

.radio-paneel-kop {
font-size: 12px;
}

.radio-poll-opties small {
font-size: 9px;
}

}
/* ==========================================
   ZIJPANELEN - VERFIJNDE DESKTOPWEERGAVE
   Alleen de vijf vakken; studio en menu blijven intact.
   ========================================== */

@media screen and (min-width: 1101px) {

/* Menu gecentreerd, met gespiegeld donker vlak aan beide kanten. */
#site-header {
padding: 16px 25% 0;
}

#hoofdmenu {
width: 100%;
}

/* Bovenkant zijpanelen gelijk aan bovenkant menu. */
#radio-zijpanelen {
top: 16px;
padding: 0 1.3%;
gap: 16px;
}

.radio-zijkant {
width: 23%;
max-width: 370px;
gap: 9px;
}

.radio-paneel-kop {
min-height: 35px;
font-size: 12px;
padding: 7px 10px;
}

.radio-paneel-icoon {
width: 24px;
height: 24px;
}

.radio-nu-inhoud {
padding: 11px;
gap: 10px;
}

.radio-albumhoes {
width: clamp(55px, 6.5vw, 82px);
height: clamp(55px, 6.5vw, 82px);
}

.radio-nummer-info {
font-size: 12px;
}

.radio-nummer-info strong {
font-size: 13px;
}

.radio-track {
min-height: 42px;
font-size: 11px;
}

.radio-track-hoes {
width: 32px;
height: 32px;
}

.radio-dj-inhoud {
padding: 10px;
}

.radio-dj-avatar {
width: clamp(52px, 6vw, 76px);
height: clamp(52px, 6vw, 76px);
}

.radio-dj-gegevens strong {
font-size: 14px;
}

.radio-verzoek-formulier {
padding: 9px;
gap: 6px;
}

.radio-verzoek-formulier input {
height: 32px;
font-size: 12px;
}

.radio-verzoek-formulier button {
height: 33px;
}

.radio-poll {
padding: 9px;
}

.radio-poll-opties > div span {
height: 44px;
}

.radio-poll-opties small {
font-size: 9px;
}

.radio-poll-knoppen button {
min-height: 30px;
font-size: 10px;
}

}

/* Compacte panelen op kleinere desktops: DJ blijft vrij. */
@media screen and (min-width: 1101px) and (max-width: 1450px) {

.radio-paneel-kop {
font-size: 11px;
}

.radio-poll-opties small {
font-size: 8px;
}

.radio-nummer-info strong {
font-size: 12px;
}

}

/* ==========================================
   RECHTS - ORIGINELE DJ PROFIELFOTO
   ========================================== */

.radio-rechts .radio-dj-avatar {
overflow: hidden;
padding: 0;
}

.radio-rechts .radio-dj-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

/* ==========================================
   RECHTS - DJ FOTO VIERKANT 150 X 150
   ========================================== */

.radio-rechts .radio-dj-avatar {
width: 150px;
height: 150px;
min-width: 150px;
flex-shrink: 0;
padding: 0;
border: 0;
border-radius: 0;
overflow: hidden;
background: transparent;
}

.radio-rechts .radio-dj-avatar img {
display: block;
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 0;
}

/* ==========================================
   DJ VAN NU - LIVE STATUS
   ========================================== */

.radio-rechts .radio-onair {
background: #007bff;
color: #ffffff;
}

.radio-rechts .radio-onair.is-live {
background: #ed0046;
color: #ffffff;
}

/* ==========================================
   DJ STATUS IN KOP RECHTERVAK
   ========================================== */

#dj-kop-status {
color: #007bff;
font-weight: 800;
}

#dj-kop-status.is-live {
color: #ed0046;
}

/* ==========================================
   DJ VAN NU - GROTERE LEESBARE TEKST
   ========================================== */

#dj-persoonlijke-tekst {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
font-size: 14px;
line-height: 1.6;
color: #263653;
}

#dj-persoonlijke-tekst .dj-tekst-regel {
display: block;
}

.radio-rechts .radio-dj-gegevens strong {
font-size: 17px;
line-height: 1.4;
}

/* ==========================================
   LAATST GEDRAAID - 10 NUMMERS
   ========================================== */

.radio-links .radio-geschiedenis {
display: flex;
flex-direction: column;
gap: 3px;
}

.radio-links .radio-track {
display: flex;
align-items: center;
min-height: 26px;
gap: 6px;
}

.radio-links .radio-track-tijd {
font-size: 11px;
flex-shrink: 0;
}

.radio-links .radio-track-naam {
font-size: 12px;
line-height: 1.4;
min-width: 0;
}

.radio-links .radio-track-hoes {
flex-shrink: 0;
}

/* ==========================================
   LAATST GEDRAAID - GROTERE WEERGAVE
   ========================================== */

.radio-links .radio-geschiedenis {
display: flex;
flex-direction: column;
gap: 4px;
}

.radio-links .radio-track {
display: flex;
align-items: center;
min-height: 30px;
gap: 6px;
}

.radio-links .radio-track-tijd {
font-size: 12px;
flex-shrink: 0;
}

.radio-links .radio-track-naam {
font-size: 13px;
line-height: 1.4;
min-width: 0;
}

.radio-links .radio-track-hoes {
flex-shrink: 0;
}

/* ==========================================
   LAATST GEDRAAID - HOOGTE CORRECTIE
   ========================================== */

.radio-links .radio-geschiedenis {
min-height: 230px;
}

.radio-links .radio-track {
min-height: 22px;
}

/* ==========================================
   LAATST GEDRAAID - RUIMER EN LEESBAARDER
   ========================================== */

.radio-links .radio-geschiedenis {
display: flex;
flex-direction: column;
gap: 0;
}

.radio-links .radio-track {
display: flex;
align-items: center;
min-height: 25px;
padding: 5px 3px;
gap: 6px;
box-sizing: border-box;
}

.radio-links .radio-track-tijd {
font-size: 12px;
flex-shrink: 0;
}

.radio-links .radio-track-naam {
font-size: 13px;
line-height: 1.4;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.radio-links .radio-track-hoes {
flex-shrink: 0;
}
/* ==========================================
   SOUND RADIO - AUTO DJ CENTOVACAST VERZOEK
   ========================================== */

#radio-auto-verzoek[hidden] {
display: none;
}

#radio-auto-verzoek .radio-verzoek-formulier {
padding: 12px;
gap: 7px;
}

#radio-auto-verzoek .radio-verzoek-uitleg {
font-size: 12px;
line-height: 1.5;
color: #52627d;
margin-bottom: 5px;
}

#radio-auto-verzoek .radio-verzoek-formulier label {
display: block;
font-size: 12px;
font-weight: 700;
color: #102a52;
}

#radio-auto-verzoek .radio-verzoek-formulier input {
width: 100%;
height: 34px;
font-size: 12px;
}

#radio-auto-verzoek .radio-verzoek-formulier button[data-type="submit"] {
width: 100%;
min-height: 36px;
height: auto;
margin-top: 6px;
background: linear-gradient(90deg,#ff0066,#e50045);
color: #ffffff;
font-size: 12px;
font-weight: 800;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease;
}

#radio-auto-verzoek .radio-verzoek-formulier button[data-type="submit"]:hover {
background: #00b84a;
box-shadow: 0 0 12px rgba(0,184,74,0.45);
}

#radio-auto-verzoek [data-type="result"] {
font-size: 12px;
line-height: 1.5;
overflow-wrap: anywhere;
}

#radio-auto-verzoek [data-type="result"]:empty {
display: none;
}



/* ==========================================
   SOUND RADIO - PLAYER, TEGELS EN FOOTER
   ========================================== */
.sound-merk { display: none; }
.sound-social { display: none; }
#sound-onderkant {
position: relative;
width: 100%;
z-index: 8;
padding: 0 1.3% 6px;
}
.sound-player {
display: flex;
align-items: center;
gap: 12px;
min-height: 84px;
padding: 10px 16px;
border-radius: 12px 12px 0 0;
background: linear-gradient(115deg,#fff,#e8f1ff);
color: #091b40;
box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.sound-play {
width: 56px;
height: 56px;
flex-shrink: 0;
border: 0;
border-radius: 50%;
background: linear-gradient(135deg,#00d5ff,#0062ff);
color: white;
font-size: 26px;
cursor: pointer;
}
.sound-player-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.sound-player-info strong { font-size: 17px; }
#sound-player-track { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sound-player-status { font-size: 10px; color: #47618b; }
.sound-volume { display: flex; flex-direction: column; gap: 3px; font-size: 10px; }
.sound-volume input { width: 82px; accent-color: #007bff; }
.sound-listeners { min-width: 48px; display: flex; flex-direction: column; text-align: center; font-weight: bold; font-size: 15px; }
.sound-listeners small { font-size: 9px; }
.sound-stream-info {
min-height: 24px;
display: flex;
align-items: center;
justify-content: space-around;
gap: 6px;
background: #e9f1ff;
color: #153c79;
font-size: 10px;
font-weight: bold;
}
.sound-tegels {
display: grid;
grid-template-columns: 1fr 1fr 1.28fr 1fr 1fr;
gap: 7px;
}
.sound-tegel {
min-width: 0;
min-height: 108px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 5px;
padding: 9px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.25);
color: #fff;
box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.sound-tegel-titel { font-size: 11px; font-weight: 800; }
.sound-tegel p { font-size: 10px; line-height: 1.35; }
.sound-tegel > a {
display: block;
width: 100%;
padding: 7px 3px;
border-radius: 4px;
background: #008fff;
color: white;
font-size: 9px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.sound-chat { background: linear-gradient(115deg,#004ca9,#062366 65%,#10124b); }
.sound-programma { background: linear-gradient(115deg,#b94300,#6c1600 65%,#2d0c00); }
.sound-programma > a { background: #ff7900; }
.sound-team { background: linear-gradient(115deg,#9500ce,#490076 65%,#230044); }
.sound-team > a { background: #9c00ff; }
.sound-fotos { background: linear-gradient(115deg,#006fbe,#00417f 65%,#001e50); }
.sound-tunein { background: linear-gradient(115deg,#fff,#dceaff); color: #091b40; }
.sound-apparaten { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; }
.sound-apparaten a,
.sound-apparaten button {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
padding: 3px 0;
border: 0;
background: transparent;
color: #09254d;
font-size: 9px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.sound-apparaten .apparaat-icoon { font-size: 21px; }
#sound-footer {
min-height: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
padding: 6px;
background: #061a3b;
color: #dce9ff;
font-size: 10px;
}
#sound-footer a { color: inherit; text-decoration: none; }

/* ==========================================
   SOUND RADIO - DESKTOP LAYOUT
   Studio is decorative background. Panels determine
   document height; player overlays central studio area.
   Tiles and footer always follow in normal document flow.
   ========================================== */
#sound-main {
position: relative;
isolation: isolate;
min-height: 0;
}
#studio-scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
aspect-ratio: 1792 / 1024;
z-index: 0;
}
#radio-zijpanelen {
position: relative;
top: auto;
left: auto;
min-height: calc(34vw + 115px);
padding: 20px 1.3% 0;
z-index: 6;
}
#sound-onderkant {
position: static;
width: 100%;
margin: 0;
padding: 8px 1.3% 6px;
transform: none;
}
.sound-player {
position: absolute;
top: 34vw;
left: 25%;
width: 50%;
margin: 0;
z-index: 7;
}
.sound-stream-info {
position: absolute;
top: calc(34vw + 84px);
left: 25%;
width: 50%;
margin: 0;
z-index: 7;
}
.sound-tegels {
position: relative;
margin: 0;
z-index: 8;
}
#sound-footer {
position: relative;
width: 100%;
margin: 0;
z-index: 8;
}
@media screen and (min-width: 1101px) {
#site-header {
padding: 16px 23% 0;
}
#hoofdmenu {
width: 100%;
}
.sound-merk {
position: absolute;
left: 2%;
top: 14px;
display: flex;
align-items: center;
gap: 9px;
color: #00cfff;
font-size: clamp(15px,1.5vw,25px);
font-weight: 900;
text-decoration: none;
white-space: nowrap;
}
.sound-merk b {
color: #ff4168;
}
.sound-merk-icoon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 12px;
background: linear-gradient(135deg,#00bfff,#1b1b88 65%,#e90069);
color: #fff;
font-size: 22px;
}
.sound-social {
position: absolute;
right: 2%;
top: 18px;
display: flex;
gap: 8px;
}
.sound-social a {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: #007bff;
color: #fff;
font-size: 19px;
font-weight: 900;
text-decoration: none;
}
.sound-social a:nth-child(2) {
background: #e90082;
}
.sound-social a:nth-child(3) {
background: #e90018;
}
.sound-social a:nth-child(4) {
background: #151515;
}
}
@media screen and (max-width: 1100px) {
#studio-scene {
position: relative;
}
#radio-zijpanelen {
position: relative;
min-height: 0;
padding: 15px;
}
#sound-onderkant {
position: relative;
padding: 12px;
}
.sound-player,
.sound-stream-info {
position: static;
width: 100%;
margin: 0;
}
.sound-player {
flex-wrap: wrap;
}
.sound-tegels {
grid-template-columns: repeat(2,minmax(0,1fr));
margin-top: 10px;
}
}
@media screen and (max-width: 700px) {
.sound-tegels {
grid-template-columns: 1fr;
}
}

/* ==========================================
   SOUND RADIO - DEFINITIEVE DESKTOP UITLIJNING
   Studio/logo in achtergrond zichtbaar houden.
   Geen negatieve marges of JS-positionering.
   ========================================== */
@media screen and (min-width: 1101px) {
#site-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
min-height: 0;
padding: 0;
z-index: 20;
}
#hoofdmenu {
position: absolute;
top: 65px;
left: 23%;
width: 54%;
height: 84px;
}
.sound-merk {
display: none !important;
}
.sound-social {
display: flex;
position: absolute;
top: 69px;
right: 1.3%;
z-index: 21;
}
#sound-main {
position: relative;
margin-top: 16px;
}
#studio-scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
aspect-ratio: 1792 / 1024;
}
#radio-zijpanelen {
position: relative;
top: auto;
left: auto;
min-height: calc(29vw + 108px);
padding: 90px 1.3% 0;
margin: 0;
}
.sound-player {
position: absolute;
top: 29vw;
left: 25%;
width: 50%;
margin: 0;
}
.sound-stream-info {
position: absolute;
top: calc(29vw + 84px);
left: 25%;
width: 50%;
margin: 0;
}
#sound-onderkant {
position: static;
margin: 0;
transform: none;
padding: 8px 1.3% 6px;
}
.sound-tegels {
position: relative;
margin: 0;
}
#sound-footer {
font-size: 14px;
min-height: 44px;
padding: 10px 16px;
flex-wrap: wrap;
line-height: 1.35;
}
}
@media screen and (max-width: 1100px) {
.sound-merk {
display: none !important;
}
#sound-footer {
font-size: 14px;
min-height: 44px;
line-height: 1.4;
flex-wrap: wrap;
}
}

/* ==========================================
   ALLEEN TWEE CORRECTIES - DESKTOP
   Linker muziekvakken lager, speler onder mengtafel.
   Menu, rechterpanelen, tegels en footer ongewijzigd.
   ========================================== */
@media screen and (min-width: 1101px) {
.radio-links {
margin-top: 85px;
}
#radio-zijpanelen {
min-height: calc(29vw + 215px);
}
.sound-player {
top: calc(29vw + 105px);
}
.sound-stream-info {
top: calc(29vw + 189px);
}
}

/* ==========================================
   EXTRA VERLAGEN - ALLEEN DESKTOP
   Linkerpanelen 55px verder naar beneden.
   Speler 65px verder naar beneden.
   Onderste vijf tegels schuiven mee.
   ========================================== */
@media screen and (min-width: 1101px) {
.radio-links {
margin-top: 140px;
}
#radio-zijpanelen {
min-height: calc(29vw + 280px);
}
.sound-player {
top: calc(29vw + 170px);
}
.sound-stream-info {
top: calc(29vw + 254px);
}
}
/* ==========================================
   SOUND RADIO - DRIE VAKKEN ONDERAAN (DESKTOP)
   Menu/social iets hoger; alle andere studio-elementen blijven staan.
   ========================================== */
@media screen and (min-width: 1101px) {
#hoofdmenu {
top: 40px;
}
.sound-social {
top: 44px;
}
#radio-zijpanelen {
min-height: 0;
}
#sound-onderkant {
position: static;
margin: 0;
padding: 0;
}
.sound-tegels {
position: absolute;
left: 1.3%;
width: 74.1%;
top: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1.8fr 1fr;
gap: 8px;
z-index: 8;
}
.sound-tegel {
min-height: 108px;
}
#sound-footer {
position: relative;
width: 100%;
margin: 0;
}
}
@media screen and (max-width: 1100px) {
.sound-tegels {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}
@media screen and (max-width: 700px) {
.sound-tegels {
grid-template-columns: 1fr;
}
}

/* ==========================================
   LAATSTE AFWERKING DESKTOP - 21 OKTOBER 2026
   Bovenkant, menu, social, studio en rechterkolom intact.
   ========================================== */
@media screen and (min-width: 1101px) {
.sound-player {
top: calc(29vw + 183px);
left: 21%;
width: 58%;
}
.sound-stream-info {
top: calc(29vw + 267px);
left: 21%;
width: 58%;
}
.sound-tegels {
left: 1.3%;
width: 77.4%;
grid-template-columns: 1fr 1.85fr 1fr;
gap: 8px;
}
.radio-links .radio-geschiedenis {
min-height: 0;
}
}

/* ==========================================
   GROTE RADIOSPELER - ALLEEN DESKTOP
   Samenhangende speler en infobalk, vier afgeronde buitenhoeken.
   Andere websiteonderdelen blijven ongemoeid.
   ========================================== */
@media screen and (min-width: 1101px) {
.sound-player {
box-sizing: border-box;
top: calc(29vw + 167px);
left: 21%;
width: 58%;
height: 112px;
min-height: 112px;
padding: 18px 20px;
border-radius: 14px 14px 0 0;
box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.sound-stream-info {
box-sizing: border-box;
top: calc(29vw + 279px);
left: 21%;
width: 58%;
height: 26px;
min-height: 26px;
border-radius: 0 0 14px 14px;
overflow: hidden;
}
}

/* Alleen de grote radiospeler 30px hoger; breedte en alle andere onderdelen gelijk. */
@media screen and (min-width: 1101px) {
.sound-player {
height: 142px;
min-height: 142px;
}
.sound-stream-info {
top: calc(29vw + 309px);
}
}

/* Alleen radiospeler: 10px lager en 8px hoger, breedte ongewijzigd. */
@media screen and (min-width: 1101px) {
.sound-player {
top: calc(29vw + 177px);
height: 150px;
min-height: 150px;
}
.sound-stream-info {
top: calc(29vw + 327px);
}
}

/* Speler onderaan uitlijnen met LAATST GEDRAAID - desktop. */
@media screen and (min-width: 1101px) {
.sound-player {
height: 158px;
min-height: 158px;
}
.sound-stream-info {
top: calc(29vw + 335px);
}
}
/* ==========================================
   GROTE SPELER - GROTERE TEKST EN BETERE VULLING
   Alleen speler; overige website blijft intact.
   ========================================== */
.sound-player {
gap: 20px;
}
.sound-play {
width: 68px;
height: 68px;
font-size: 32px;
}
.sound-player-info {
gap: 8px;
}
.sound-player-info strong {
font-size: 24px;
line-height: 1.15;
}
#sound-player-track {
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
#sound-player-status {
font-size: 14px;
line-height: 1.3;
}
.sound-volume {
min-width: 145px;
gap: 12px;
font-size: 15px;
font-weight: 700;
}
.sound-volume input {
width: 145px;
height: 20px;
cursor: pointer;
}
.sound-stream-info {
font-size: 14px;
letter-spacing: 0.1px;
}
.sound-stream-info span {
flex: 1;
min-width: 0;
text-align: center;
}
@media screen and (min-width: 1101px) {
.sound-player {
padding: 20px 26px;
}
.sound-stream-info {
height: 36px;
min-height: 36px;
}
}
@media screen and (max-width: 700px) {
.sound-player {
gap: 10px;
padding: 12px;
}
.sound-play {
width: 52px;
height: 52px;
font-size: 24px;
}
.sound-player-info strong {
font-size: 18px;
}
#sound-player-track {
font-size: 13px;
}
#sound-player-status {
font-size: 11px;
}
.sound-volume {
min-width: 75px;
font-size: 11px;
gap: 4px;
}
.sound-volume input {
width: 75px;
}
.sound-stream-info {
font-size: 11px;
}
}

/* ==========================================
   GROTE SPELER - COMPACTERE HOOGTE DESKTOP
   Grotere letters blijven behouden.
   ========================================== */
@media screen and (min-width: 1101px) {
.sound-player {
height: 140px;
min-height: 140px;
padding: 14px 26px;
}
.sound-stream-info {
top: calc(29vw + 317px);
height: 26px;
min-height: 26px;
}
}

/* ==========================================
   GROTE SPELER - ONDERKANT GELIJK MET LAATST GEDRAAID
   Alleen desktop, bestaande tekstgroottes behouden.
   ========================================== */
@media screen and (min-width: 1101px) {
.sound-player {
height: 162px;
min-height: 162px;
}
.sound-stream-info {
top: calc(29vw + 339px);
}
}

/* ==========================================
   SOUND RADIO - ON AIR LICHTBORD
   ========================================== */

#studio-onair {
position: absolute;
top: 12%;
left: 62%;
width: 12%;
height: auto;
z-index: 2;
pointer-events: none;
background: transparent;
border: 0;
box-shadow: none;
transform: none;
}

#studio-onair img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}

/* ==========================================
   SOUND RADIO - ON AIR AFBEELDING
   ========================================== */

#studio-onair {
position: absolute;
top: 12%;
left: 61%;
width: 12%;
height: auto;
z-index: 2;
pointer-events: none;
background-color: #000000;
border: none;
border-radius: 0;
box-shadow: none;
transform: none;
overflow: visible;
}

#studio-onair img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
border: none;
box-shadow: none;
filter: none;
}


/* ==========================================
   SOUND RADIO - SOCIAL MEDIA AFBEELDINGEN
   ========================================== */

.sound-social {
gap: 8px;
}

.sound-social a,
.sound-social a:nth-child(2),
.sound-social a:nth-child(3),
.sound-social a:nth-child(4) {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
text-decoration: none;
}

.sound-social a img {
display: block;
width: 55px;
height: 55px;
object-fit: contain;
transition: transform 0.2s ease;
}

.sound-social a:hover img {
transform: scale(1.12);
}

/* ==========================================
   SOUND RADIO - MENU POPUPS EN RADIOKEUZE
   ========================================== */
.sound-menu-modal[hidden],
.sound-radio-keuze[hidden] {
display: none !important;
}
.sound-menu-modal {
position: fixed;
inset: 0;
z-index: 99998;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.75);
padding: 15px;
}
.sound-menu-modal-inhoud {
width: min(1100px, 100%);
height: min(820px, 100%);
max-width: 100%;
max-height: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 15px 60px rgba(0,0,0,.5);
}
.sound-menu-modal-kop {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
background: #eaf2ff;
color: #071632;
font-size: 17px;
}
.sound-menu-sluiten {
border: 0;
background: transparent;
font-size: 25px;
cursor: pointer;
}
.sound-menu-modal iframe {
flex: 1;
min-height: 0;
width: 100%;
border: 0;
}
.sound-radio-keuze {
position: fixed;
z-index: 99997;
width: 245px;
max-height: min(490px,75vh);
overflow-y: auto;
padding: 10px;
border: 1px solid #42b9ff;
border-radius: 10px;
background: #081b38;
box-shadow: 0 10px 35px rgba(0,0,0,.65);
}
.sound-radio-keuze strong {
display: block;
padding: 9px 8px;
color: #ffffff;
font-size: 14px;
}
.radio-keuze-item {
display: block;
width: 100%;
padding: 10px;
margin: 2px 0;
border: 0;
border-radius: 5px;
background: transparent;
color: #ffffff;
text-align: left;
font-size: 13px;
cursor: pointer;
}
.radio-keuze-item:hover,
.radio-keuze-item:focus-visible {
background: #087aff;
}

/* ==========================================
   SOUND RADIO - CORRECTIE 22 OKTOBER 2026
   Alleen LAATST GEDRAAID en TUNEIN
   ========================================== */

/* Grotere hoesjes, met compacte rijen voor tien nummers. */
.radio-links .radio-track {
min-height: 40px;
padding: 1px 3px;
gap: 6px;
}

.radio-links .radio-track-hoes {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
overflow: hidden;
}

.radio-links .radio-track-hoes img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

.radio-links .radio-track-tijd {
width: 38px;
}

/* Officiele TuneIn-embed en vijf CentovaCast-afbeeldingslinks. */
.sound-tunein {
gap: 3px;
padding: 7px 9px;
}

.sound-tunein p {
margin: 0;
}

.sound-tunein-speler {
width: 100%;
height: 78px;
display: block;
border: 0;
border-radius: 5px;
background: #ffffff;
}

.sound-centova-links {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
gap: 6px;
}

.sound-centova-links a {
min-width: 0;
min-height: 28px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}

.sound-centova-links img {
max-width: 100%;
max-height: 28px;
width: auto;
height: auto;
object-fit: contain;
}

@media screen and (min-width: 1101px) {
.sound-tegel.sound-tunein {
min-height: 165px;
}

/* Extra ruimte voor de hogere TuneIn-tegel, zodat de footer vrij blijft. */
#sound-onderkant {
min-height: 170px;
}
}

@media screen and (max-width: 700px) {
.sound-tunein-speler {
height: 100px;
}
}

/* ==========================================
   ONDERKANT DESKTOP - EEN ENKELE POSITIONERING
   DJ Team / TuneIn / DJ Gezocht direct onder speler.
   Footer direct onder de drie vakken.
   ========================================== */
@media screen and (min-width: 1101px) {
#sound-main {
position: relative;
}
#radio-zijpanelen {
min-height: 0;
}
#sound-onderkant {
position: static;
min-height: 0;
height: 0;
padding: 0;
margin: 0;
}
.sound-tegels {
position: absolute;
left: 1.3%;
width: 77.4%;
top: calc(29vw + 375px);
grid-template-columns: 1fr 1.85fr 1fr;
gap: 8px;
margin: 0;
}
.sound-tegel {
min-height: 165px;
}
#sound-footer {
position: absolute;
left: 0;
top: calc(29vw + 550px);
width: 100%;
margin: 0;
}
.radio-links .radio-track {
min-height: 47px;
padding: 2px 3px;
}
.radio-links .radio-track-hoes {
width: 43px;
height: 43px;
min-width: 43px;
min-height: 43px;
}
.radio-links .radio-track-hoes img {
width: 100%;
height: 100%;
object-fit: cover;
}
}

/* Laatste afwerking: grotere hoezen en footer direct onder de drie tegels. */
@media screen and (min-width: 1101px) {
.radio-links .radio-geschiedenis {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.radio-links .radio-track {
min-height: 53px;
padding: 1px 3px;
gap: 6px;
}
.radio-links .radio-track-hoes {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
}
.radio-links .radio-track-hoes img {
width: 100%;
height: 100%;
object-fit: cover;
}
#sound-footer {
min-height: 28px;
padding: 4px 8px;
box-sizing: border-box;
}
}


/* ==========================================
   DJ TEAM & DJ GEZOCHT - PREMIUM AFWERKING
   Alleen deze twee vakken; overige CSS intact.
   ========================================== */

.sound-tegel.sound-programma,
.sound-tegel.sound-team {
position: relative;
isolation: isolate;
overflow: hidden;
justify-content: space-between;
gap: 7px;
padding: 12px;
border: 1px solid rgba(255,255,255,0.38);
border-radius: 9px;
color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 5px 15px rgba(0,0,0,0.35);
}

/* De afbeeldingen blijven rechts scherp zichtbaar. */
.sound-tegel.sound-programma {
background-color: #07142e;
background-image: linear-gradient(90deg,rgba(5,12,30,0.98) 0%,rgba(5,12,30,0.96) 26%,rgba(5,12,30,0.63) 54%,rgba(5,12,30,0.06) 100%),url('/afbeeldingen/team.png');
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
}

.sound-tegel.sound-team {
background-color: #21043e;
background-image: linear-gradient(90deg,rgba(22,0,44,0.98) 0%,rgba(22,0,44,0.97) 28%,rgba(22,0,44,0.67) 56%,rgba(22,0,44,0.08) 100%),url('/afbeeldingen/gezocht.png');
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
}

.sound-tegel.sound-programma .sound-tegel-titel,
.sound-tegel.sound-team .sound-tegel-titel {
position: relative;
z-index: 1;
font-size: 16px;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.35px;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 2px 6px rgba(0,0,0,0.95);
}

.sound-tegel.sound-programma p,
.sound-tegel.sound-team p {
position: relative;
z-index: 1;
max-width: 68%;
margin: 0;
font-size: 14px;
font-weight: 750;
line-height: 1.3;
white-space: normal;
overflow-wrap: break-word;
color: #ffffff;
text-shadow: 0 1px 3px #000000, 0 2px 7px #000000;
}

.sound-tegel.sound-programma > a,
.sound-tegel.sound-team > a {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 33px;
padding: 7px 9px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
color: #ffffff;
font-size: 12px;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 9px rgba(0,0,0,0.35);
transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.sound-tegel.sound-programma > a {
background: linear-gradient(180deg,#ffa52c,#f36a00);
}

.sound-tegel.sound-team > a {
background: linear-gradient(180deg,#c044ff,#7900e8);
}

.sound-tegel.sound-programma > a:hover,
.sound-tegel.sound-team > a:hover {
filter: brightness(1.13);
box-shadow: 0 4px 13px rgba(0,0,0,0.48);
}

.sound-tegel.sound-programma > a:focus-visible,
.sound-tegel.sound-team > a:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}

/* Op smalle schermen voldoende ruimte voor tekst behouden. */
@media screen and (max-width: 700px) {
.sound-tegel.sound-programma p,
.sound-tegel.sound-team p {
max-width: 72%;
font-size: 13px;
}
}

/* ==========================================
   TUNEIN - SCHERPE ICONEN EN RUIMERE EMBED
   Alleen de inhoud, geen verplaatsing van de vakken.
   ========================================== */

.sound-tegel.sound-tunein {
justify-content: center;
align-items: stretch;
gap: 3px;
padding: 6px 8px;
overflow: hidden;
}

/* De externe TuneIn-player krijgt intern meer ruimte.
   Door de schaal past hij toch in dezelfde beschikbare hoogte. */
.sound-tegel.sound-tunein .sound-tunein-speler {
display: block;
width: 125%;
height: 105px;
min-height: 105px;
flex: 0 0 auto;
margin-bottom: -21px;
border: 0;
border-radius: 4px;
background: #ffffff;
transform: scale(0.8);
transform-origin: top left;
}

.sound-tegel.sound-tunein .sound-centova-links {
display: grid;
width: 100%;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 4px;
align-items: center;
}

.sound-tegel.sound-tunein .sound-centova-links a {
display: flex;
min-width: 0;
height: 32px;
min-height: 32px;
padding: 0 2px;
align-items: center;
justify-content: center;
overflow: hidden;
}

.sound-tegel.sound-tunein .sound-centova-links img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 27px;
object-fit: contain;
image-rendering: auto;
}

.sound-tegel.sound-tunein .sound-centova-links a:focus-visible {
outline: 2px solid #007bff;
outline-offset: -2px;
border-radius: 4px;
}

@media screen and (max-width: 700px) {
.sound-tegel.sound-tunein .sound-tunein-speler {
width: 125%;
height: 125px;
min-height: 125px;
margin-bottom: -25px;
}
}

/* ==========================================
   SOUND RADIO - TUNEIN ICOONTJES DEFINITIEF
   KLEINER EN NETJES VERSPREID
   ========================================== */

.sound-tegel.sound-tunein .sound-centova-links {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-evenly;
gap: 20px;
margin: 0 auto;
padding: 5px 12px;
}

.sound-tegel.sound-tunein .sound-centova-links a {
width: 30px;
height: 30px;
min-width: 0;
min-height: 30px;
flex: 0 0 30px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}

.sound-tegel.sound-tunein .sound-centova-links a img {
width: 26px;
height: 26px;
max-width: 100%;
max-height: 26px;
object-fit: contain;
display: block;
}

/* ==========================================
   SOUND RADIO - FOOTER LINKS HOVER
   APPELGROEN
   ========================================== */

#sound-footer a {
color: #ffffff;
text-decoration: none;
transition: color 0.25s ease, text-shadow 0.25s ease;
}

#sound-footer a:hover {
color: #7fff00;
text-shadow: 0 0 8px rgba(127,255,0,0.65);
}

#sound-footer a:focus-visible {
color: #7fff00;
outline: 2px solid #7fff00;
outline-offset: 3px;
}

/* ==========================================
   SOUND RADIO - EXTRA RUIMTE ONDER FOOTER
   ========================================== */

#sound-footer {
padding-bottom: 20px;
background: #07152d;
}

/* ==========================================
   SOUND RADIO - DJ TEAM POPUP PAGINA
   Alleen djteam.php, homepage blijft intact.
   ========================================== */
body.djteam-pagina {
background: radial-gradient(ellipse at top,#163f79 0%,#081a38 45%,#050d20 100%);
color: #f5f9ff;
font-family: Arial, Helvetica, sans-serif;
}
.djteam-header {
max-width: 1160px;
margin: 0 auto;
padding: 30px 24px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
}
.djteam-header-inhoud {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
}
.djteam-logo {
display: block;
width: 170px;
max-width: 60%;
height: auto;
object-fit: contain;
}
.djteam-header h1 {
font-size: clamp(28px,4vw,44px);
margin: 0;
}
.djteam-lijst {
max-width: 1160px;
margin: 0 auto;
padding: 0 24px 35px;
display: flex;
flex-direction: column;
gap: 22px;
}
.djteam-profiel {
display: grid;
grid-template-columns: 245px minmax(0,1fr);
overflow: hidden;
border: 1px solid #2a80d6;
border-radius: 16px;
background: linear-gradient(120deg,#0b2b58,#0b1836 70%);
box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.djteam-foto {
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 38%,#287ac0,#0b244e 72%);
}
.djteam-foto img {
width: 100%;
height: 100%;
max-height: 440px;
object-fit: contain;
object-position: center center;
}
.djteam-inhoud {
min-width: 0;
padding: 23px 26px 26px;
}
.djteam-inhoud h2 {
font-size: 28px;
margin: 0 0 15px;
color: #ffffff;
}
.djteam-inhoud h3 {
font-size: 16px;
margin: 18px 0 9px;
color: #67dfff;
}
.djteam-gegevens {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.djteam-gegevens > div {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(35,106,180,.25);
font-size: 12px;
}
.djteam-gegevens span {
color: #d6e6fc;
}
.djteam-inhoud p {
font-size: 14px;
line-height: 1.65;
margin-bottom: 10px;
color: #e2edfb;
}
.djteam-inhoud a {
color: #79eaff;
}
.djteam-shows {
margin-top: 28px;
}
.djteam-show {
display: grid;
grid-template-columns: 105px 135px minmax(0,1fr);
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(135,189,255,.18);
font-size: 13px;
}
.djteam-show b {
color: #9feeff;
}
.djteam-shows small {
display: block;
margin-top: 9px;
color: #bed8f5;
}
.djteam-footer {
text-align: center;
color: #afc8e8;
font-size: 12px;
padding: 8px 16px 26px;
}
@media screen and (max-width: 720px) {
.djteam-header {
padding: 20px 14px;
}
.djteam-lijst {
padding: 0 12px 25px;
}
.djteam-profiel {
grid-template-columns: 1fr;
}
.djteam-foto {
min-height: 220px;
height: 260px;
}
.djteam-inhoud {
padding: 18px;
}
.djteam-show {
grid-template-columns: 1fr;
gap: 4px;
}
}

/* ==========================================
   SOUND RADIO - LINKS.PHP (ONTWERP 2)
   Alleen voor body.sound-links-pagina
   ========================================== */
body.sound-links-pagina {
margin: 0;
min-height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
background: radial-gradient(ellipse at 50% 5%, #113b74 0%, #06162d 45%, #02050e 100%);
}
.sound-links-pagina * {
box-sizing: border-box;
}
.sound-links-omhulsel {
position: relative;
isolation: isolate;
width: min(1120px, 96%);
margin: 0 auto;
padding: 40px 14px 24px;
}
.sound-links-omhulsel::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
background: linear-gradient(133deg, transparent 9%, rgba(0, 186, 255, .6) 9.2%, transparent 9.7%, transparent 86%, rgba(57, 84, 255, .4) 86.2%, transparent 86.7%);
opacity: .55;
}
.sound-links-kop {
text-align: center;
margin-bottom: 32px;
}
.sound-links-label {
display: block;
font-size: 14px;
font-weight: 800;
letter-spacing: 3px;
}
.sound-links-kop h1 {
margin: 8px 0 10px;
font-size: clamp(29px, 4vw, 49px);
line-height: 1.1;
color: #baf6ff;
text-shadow: 0 2px 0 #0063b4, 0 0 25px rgba(0, 170, 255, .55);
}
.sound-links-kop p {
margin: 0;
font-size: 18px;
color: #edf7ff;
}
.sound-links-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.sound-links-kaart {
min-width: 0;
min-height: 470px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 23px 18px 20px;
border: 1px solid var(--kaart-rand);
border-radius: 19px;
background: linear-gradient(155deg, var(--kaart-boven), var(--kaart-onder));
box-shadow: inset 0 1px 18px rgba(255,255,255,.06), 0 12px 25px rgba(0,0,0,.3);
}
.sound-links-coop {
--kaart-rand: #009dff;
--kaart-boven: #062b58;
--kaart-onder: #031126;
--knop-boven: #00bfff;
--knop-onder: #0051bd;
}
.sound-links-klets {
--kaart-rand: #58d900;
--kaart-boven: #063b1b;
--kaart-onder: #03170c;
--knop-boven: #67e600;
--knop-onder: #267900;
}
.sound-links-verzoek {
--kaart-rand: #ff3939;
--kaart-boven: #580a0b;
--kaart-onder: #210405;
--knop-boven: #ff5151;
--knop-onder: #b80000;
}
.sound-links-logo {
height: 180px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.sound-links-logo img {
max-width: 100%;
max-height: 175px;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 8px 12px rgba(0,0,0,.28));
}
.sound-links-kaart h2 {
margin: 9px 0 12px;
font-size: 25px;
line-height: 1.2;
color: #fff;
}
.sound-links-kaart p {
margin: 0 0 22px;
font-size: 16px;
line-height: 1.5;
color: #f0f5ff;
}
.sound-links-kaart a {
margin-top: auto;
width: 100%;
max-width: 290px;
padding: 13px 9px;
border-radius: 24px;
background: linear-gradient(180deg, var(--knop-boven), var(--knop-onder));
box-shadow: 0 4px 12px rgba(0,0,0,.4);
color: #fff;
font-size: 15px;
font-weight: 800;
text-decoration: none;
transition: filter .2s, transform .2s;
}
.sound-links-kaart a:hover,
.sound-links-kaart a:focus-visible {
filter: brightness(1.2);
transform: translateY(-2px);
}
.sound-links-voet {
margin-top: 28px;
text-align: center;
font-size: 13px;
color: #a4bdd7;
}
@media (max-width: 750px) {
.sound-links-grid {
grid-template-columns: 1fr;
max-width: 450px;
margin: 0 auto;
}
.sound-links-kaart {
min-height: 390px;
}
.sound-links-omhulsel {
padding-top: 25px;
}
}

/* ============================================
   SOUND RADIO - DJ GEZOCHT POPUP
   Alleen van toepassing op body.gezocht-pagina
   ============================================ */
body.gezocht-pagina {
margin: 0;
min-height: 100vh;
background: radial-gradient(ellipse at 50% -15%,#17448e 0%,#0b1d45 38%,#070e23 80%);
color: #edf4ff;
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
line-height: 1.6;
}
.gezocht-pagina * {
box-sizing: border-box;
}
.gezocht-container {
max-width: 1160px;
margin: 0 auto;
padding: 30px 24px 20px;
}
.gezocht-header {
position: relative;
text-align: center;
padding: 24px 30px 42px;
border: 1px solid rgba(90,171,255,.34);
border-radius: 22px;
background: linear-gradient(145deg,rgba(18,65,137,.88),rgba(8,17,46,.94));
box-shadow: 0 15px 55px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
}
.gezocht-logo {
display: block;
width: 190px;
max-width: 65%;
height: auto;
max-height: 110px;
object-fit: contain;
margin: 0 auto 12px;
}
.gezocht-label {
color: #7dd6ff;
font-size: 12px;
font-weight: 800;
letter-spacing: 3px;
}
.gezocht-pagina h1 {
font-size: clamp(32px,5vw,52px);
line-height: 1.15;
margin: 10px 0 16px;
color: #fff;
}
.gezocht-header p {
max-width: 730px;
margin: 0 auto 25px;
font-size: 18px;
color: #d8e8ff;
}
.gezocht-knop {
display: inline-block;
background: linear-gradient(120deg,#ff9e2b,#f05b0c);
color: #fff !important;
font-weight: 800;
text-decoration: none;
padding: 13px 26px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(241,104,15,.3);
transition: transform .2s,filter .2s;
}
.gezocht-knop:hover {
transform: translateY(-2px);
filter: brightness(1.12);
}
.gezocht-intro {
text-align: center;
max-width: 850px;
margin: 36px auto;
}
.gezocht-pagina h2 {
font-size: 23px;
line-height: 1.3;
color: #fff;
margin: 0 0 15px;
}
.gezocht-intro p {
color: #d6e4ff;
margin: 0;
}
.gezocht-kaarten {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 18px;
margin: 28px 0 36px;
}
.gezocht-kaart {
background: linear-gradient(145deg,#153772,#0b1b3c);
border: 1px solid rgba(89,170,255,.32);
border-radius: 17px;
padding: 25px 24px;
box-shadow: 0 10px 26px rgba(0,0,0,.2);
}
.gezocht-kaart:nth-child(2) {
background: linear-gradient(145deg,#233674,#111737);
}
.gezocht-kaart:nth-child(3) {
background: linear-gradient(145deg,#124e67,#0b203c);
}
.gezocht-kaart ul {
margin: 0;
padding-left: 21px;
}
.gezocht-kaart li {
margin-bottom: 9px;
color: #e0ebff;
}
.gezocht-extra {
color: #8fe1ff;
font-weight: 700;
margin-bottom: 0;
}
.gezocht-roosterblok {
background: rgba(10,23,55,.93);
border: 1px solid rgba(93,162,242,.3);
border-radius: 18px;
padding: 25px;
}
.gezocht-roosterkop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 17px;
}
.gezocht-roosterkop p {
margin: 0;
color: #cadcf6;
}
.gezocht-legenda {
display: flex;
gap: 16px;
flex-wrap: wrap;
white-space: normal;
}
.gezocht-legenda span {
display: flex;
align-items: center;
gap: 6px;
}
.gezocht-legenda i {
display: inline-block;
width: 13px;
height: 13px;
border-radius: 4px;
}
.gezocht-legenda .gezocht-bezet {
background: #b8324c;
}
.gezocht-legenda .gezocht-vrij {
background: #198754;
}
.gezocht-legenda .gezocht-overleg {
background: #f5c542;
}
.gezocht-legenda .gezocht-gereserveerd {
background: #2674d9;
}
.gezocht-tabelscroll {
overflow-x: auto;
}
.gezocht-tabel {
width: 100%;
min-width: 690px;
border-collapse: separate;
border-spacing: 3px;
text-align: center;
font-size: 14px;
}
.gezocht-tabel th,
.gezocht-tabel td {
padding: 9px 7px;
border-radius: 5px;
}
.gezocht-tabel thead th {
background: #24559c;
color: #fff;
}
.gezocht-tabel tbody th {
background: #182c50;
color: #fff;
font-weight: 700;
}
/* Vier handmatig te kiezen roosterstatussen */
.gezocht-tabel td.bezet {
background: #b8324c;
color: #ffffff;
}
.gezocht-tabel td.vrij {
background: #198754;
color: #ffffff;
}
.gezocht-tabel td.overleg {
background: #f5c542;
color: #332600;
}
.gezocht-tabel td.gereserveerd {
background: #2674d9;
color: #ffffff;
}
.gezocht-roosternoot {
color: #b5c9e7;
font-size: 13px;
margin: 14px 0 0;
}
.gezocht-onderaan {
text-align: center;
padding: 35px 20px 20px;
}
.gezocht-onderaan p {
max-width: 680px;
margin: 0 auto 22px;
color: #d9e7fa;
}
.gezocht-footer {
text-align: center;
color: #a4b7d6;
font-size: 13px;
padding: 18px 0 4px;
}
@media (max-width: 850px) {
.gezocht-kaarten {
grid-template-columns: 1fr;
}
.gezocht-roosterkop {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 550px) {
.gezocht-container {
padding: 12px;
}
.gezocht-header {
padding: 22px 16px 28px;
}
.gezocht-header p {
font-size: 16px;
}
.gezocht-roosterblok {
padding: 15px 10px;
}
}

/* VAN / TOT */
.gezocht-tabel thead th {
background: #ed861c;
color: #0000ff;
}

/* TIJDEN */
.gezocht-tabel tbody th {
background: #cccccc;
color: #000000;
}

/* ============================================
   DJ GEZOCHT - GELIJKE KOLOMBREEDTES
   ============================================ */

.gezocht-tabel {
width: 100%;
table-layout: fixed;
}

.gezocht-tabel th,
.gezocht-tabel td {
width: auto;
text-align: center;
white-space: nowrap;
}

/* VAN EN TOT - GELIJKE BREEDTE */
.gezocht-tabel th:nth-child(1),
.gezocht-tabel td:nth-child(1),
.gezocht-tabel th:nth-child(2),
.gezocht-tabel td:nth-child(2) {
width: 9%;
}

/* ALLE DAGEN - GELIJKE BREEDTE */
.gezocht-tabel th:nth-child(n+3),
.gezocht-tabel td:nth-child(n+3) {
width: 11.714%;
}

/* ==========================================
   AANVULLENDE STIJLEN INDEX (voorheen in index.php)
   ========================================== */
/* Alleen de inhoud van de twee LINKER muziekvakken */
.radio-links .radio-nu-inhoud {
min-width: 0;
}
.radio-links .radio-albumhoes {
overflow: hidden;
}
.radio-links .radio-albumhoes img,
.radio-links .radio-track-hoes img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.radio-links .radio-nummer-info {
min-width: 0;
}
.radio-links .radio-nummer-info strong {
display: block;
min-width: 0;
}
.radio-links .radio-nummer-info > span {
display: block;
min-width: 0;
overflow-wrap: anywhere;
}
.radio-links .radio-voortgang {
display: none;
}
.radio-links .radio-tijden {
display: none;
}
.radio-links .radio-track-hoes {
overflow: hidden;
}
.radio-links .radio-track-naam {
flex: 1;
}
/* Alleen het verzoekvak tijdens een live-DJ; hoogte blijft behouden. */
#radio-auto-verzoek {
position: relative;
}
#radio-auto-verzoek.is-dj-live .radio-verzoek-formulier {
visibility: hidden;
pointer-events: none;
}
#radio-auto-verzoek .radio-live-melding {
display: none;
position: absolute;
top: 30px;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 16px 14px;
background: linear-gradient(160deg, #f7fbff 0%, #e6f1ff 52%, #f5f7ff 100%);
color: #102a52;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
}
#radio-auto-verzoek.is-dj-live .radio-live-melding {
display: flex;
}
#radio-auto-verzoek .radio-live-melding::before {
content: "🎙️";
display: flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
font-size: 34px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 5px 20px rgba(0,70,150,.12);
}
#radio-auto-verzoek .radio-live-melding strong {
display: block;
font-size: 17px;
line-height: 1.3;
}
#radio-auto-verzoek .radio-live-melding p {
margin: 0;
font-size: 13px;
line-height: 1.6;
max-width: 260px;
}
#radio-auto-verzoek .radio-live-melding button {
display: block;
width: 100%;
max-width: 260px;
margin-top: 8px;
padding: 13px 12px;
background: linear-gradient(90deg,#ff0066,#e50045);
border: 0;
border-radius: 8px;
color: #ffffff;
font: inherit;
font-weight: 700;
cursor: pointer;
}
#radio-auto-verzoek .radio-live-melding button:hover {
filter: brightness(1.08);
}

/* ==========================================
   SOUND RADIO - MOBIEL UITKLAPMENU
   ALLEEN MOBIEL - DESKTOP BLIJFT INTACT
   ========================================== */

#mobiel-menu-knop {
display: none;
}

@media screen and (max-width: 700px) {

#site-header {
padding: 15px 12px 0;
}

#mobiel-menu-knop {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 55px;
padding: 0 20px;
border: 1px solid #00d5ff;
border-radius: 10px;
background: linear-gradient(135deg,#00cfff,#0062ff);
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 800;
cursor: pointer;
}

#mobiel-menu-knop span {
font-size: 15px;
}

#hoofdmenu {
display: none;
width: 100%;
height: auto;
margin-top: 8px;
grid-template-columns: 1fr;
gap: 5px;
filter: none;
}

#hoofdmenu.mobiel-open {
display: grid;
}

#hoofdmenu .menu-item {
min-height: 50px;
flex-direction: row;
justify-content: flex-start;
gap: 15px;
padding: 10px 18px;
border-radius: 7px;
transform: none;
}

#hoofdmenu .menu-item > span {
transform: none;
width: auto;
}

#hoofdmenu .menu-icoon {
width: 28px;
height: 28px;
flex-shrink: 0;
}

#hoofdmenu .menu-icoon svg {
width: 24px;
height: 24px;
}

#hoofdmenu .menu-tekst {
width: auto;
font-size: 15px;
text-align: left;
}

}

/* ==========================================
   DJ GEZOCHT - MOBIEL ROOSTER
   DESKTOP BLIJFT ONGEWIJZIGD
   ========================================== */

.gezocht-dagkeuze {
display: none;
}

@media screen and (max-width: 700px) {

.gezocht-tabelscroll {
width: 100%;
overflow-x: hidden;
}

.gezocht-tabel {
width: 100%;
min-width: 0;
table-layout: fixed;
}

.gezocht-tabel th,
.gezocht-tabel td {
font-size: 13px;
padding: 10px 5px;
white-space: normal;
overflow-wrap: anywhere;
}

.gezocht-tabel tr > :nth-child(1),
.gezocht-tabel tr > :nth-child(2) {
width: 25%;
}

.gezocht-tabel tr > :nth-child(n+3) {
width: 50%;
}

/* ==========================================
   MOBIELE DAGKEUZE
   ========================================== */

.gezocht-dagkeuze {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 3px;
margin: 12px 0;
}

.gezocht-dagkeuze button {
min-width: 0;
padding: 11px 0;
border: 1px solid #2874db;
border-radius: 5px;
background: #102c59;
color: #ffffff;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}

.gezocht-dagkeuze button.actief {
background: #ff7900;
border-color: #ff7900;
color: #ffffff;
}

}

.sound-seo-titel {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}