* { box-sizing: border-box; }

body {
    margin: 0;
    background: #102638;
    color: #d9f1ff;
    font-family: Arial, Helvetica, sans-serif;
}

/* ============================================================
   Header der Reggaebox – Navigation als deutliche Buttons
   ============================================================ */

.site-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    background: linear-gradient(to bottom, #0b2744, #061426) !important;
    border-bottom: 3px solid #85c5e9 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
}

.site-header .site-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    margin: 0 10px 0 0 !important;
    padding: 9px 18px !important;
    border: 2px solid #a9d9f1 !important;
    border-radius: 10px !important;
    color: #eaf8ff !important;
    background: linear-gradient(to bottom, #244c70, #102d49) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 3px 7px rgba(0,0,0,.38) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(18px, 2vw, 26px) !important;
    font-weight: bold !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.site-header .site-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-header .site-nav > a,
.site-header .site-nav > details > summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    border: 1px solid #a9d9f1 !important;
    border-radius: 8px !important;
    color: #d4f0ff !important;
    background: linear-gradient(to bottom, #183a5b, #0b2238) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 2px 5px rgba(0,0,0,.35) !important;
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.site-header .site-nav > a:hover,
.site-header .site-nav > a:focus-visible,
.site-header .site-nav > details > summary:hover,
.site-header .site-nav > details > summary:focus-visible {
    color: #ffffff !important;
    background: linear-gradient(to bottom, #315f86, #173a5b) !important;
    border-color: #b1e7ff !important;
    transform: translateY(-1px);
    outline: none !important;
}

.site-header .site-nav details {
    position: relative !important;
    margin: 0 !important;
}

.site-header .site-nav details > summary {
    list-style: none !important;
}

.site-header .site-nav details > summary::-webkit-details-marker {
    display: none !important;
}

.site-header .site-nav-menu {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    z-index: 1000 !important;
    min-width: 235px !important;
    padding: 7px !important;
    border: 1px solid #85c5e9 !important;
    border-radius: 9px !important;
    background: #071426 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.55) !important;
}

.site-header .site-nav-menu a {
    display: block !important;
    margin: 3px 0 !important;
    padding: 9px 11px !important;
    border-radius: 6px !important;
    color: #d4f0ff !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

.site-header .site-nav-menu a:hover,
.site-header .site-nav-menu a:focus-visible {
    color: #ffffff !important;
    background: rgba(130,205,245,.22) !important;
    outline: none !important;
}

.page {
    width: min(1536px, 100%);
    margin: 0 auto;
}

.stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1536 / 1024;
    overflow: hidden;
    background: #000;
}

.box-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    pointer-events: none;
}

.song-list {
    position: absolute;
    left: 11.4%;
    top: 42.0%;
    width: 15.0%;
    height: 43.0%;
    z-index: 20;
    display: grid;
    grid-template-rows: repeat(10, 1fr);
    gap: .55%;
}

.song-button {
    width: 100%;
    min-height: 0;
    padding: 0 4%;
    border: 1px solid #4b80a4;
    border-radius: 7px;
    background: linear-gradient(#edfaff, #a1d6f2 58%, #528cba);
    color: #12374d;
    font-size: clamp(8px, 1.05vw, 17px);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.song-button.active {
    color: #ffffff;
    background: linear-gradient(#258eb8, #135276);
    border-color: #b1eaff;
    box-shadow: 0 0 10px rgba(80,185,245,.8);
}

.song-button.empty {
    opacity: .42;
    cursor: default;
}

.display-mask {
    position: absolute;
    left: 30.4%;
    top: 67.0%;
    width: 27.2%;
    height: 18.5%;
    z-index: 5;
    border-radius: 8px;
    background: rgba(2,2,2,.84);
    pointer-events: none;
}

.title-display {
    position: absolute;
    left: 32.2%;
    top: 71.8%;
    width: 23.6%;
    height: 4.7%;
    z-index: 21;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1%;
    color: #c7efff;
    font: 700 clamp(10px,1.45vw,23px) Georgia, serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.time-display {
    position: absolute;
    left: 49.8%;
    top: 77.5%;
    width: 6.0%;
    z-index: 21;
    color: #d5f4ff;
    font-size: clamp(7px,.78vw,13px);
    font-weight: 700;
    text-align: right;
    pointer-events: none;
}

.progress {
    position: absolute;
    left: 32.0%;
    top: 81.2%;
    width: 24.0%;
    height: 3%;
    z-index: 22;
    accent-color: #78c8f0;
    cursor: pointer;
}

.control {
    position: absolute;
    z-index: 25;
    border: 1px solid #4b80a4;
    border-radius: 8px;
    background: linear-gradient(#edfaff, #a1d6f2 58%, #528cba);
    color: #14364e;
    font-size: clamp(7px,.9vw,15px);
    font-weight: 800;
    cursor: pointer;
}

#playAll { left: 61.2%; top: 67.4%; width: 5.8%; height: 9.5%; }
#pause   { left: 68.1%; top: 67.4%; width: 5.8%; height: 9.5%; }
#stop    { left: 75.0%; top: 67.4%; width: 5.8%; height: 9.5%; }
#prev    { left: 63.0%; top: 78.4%; width: 6.1%; height: 7.2%; }
#next    { left: 71.1%; top: 78.4%; width: 6.1%; height: 7.2%; }

.volume {
    position: absolute;
    left: 81.3%;
    top: 75.3%;
    width: 8.0%;
    height: 10.5%;
    z-index: 25;
    opacity: .01;
    cursor: pointer;
}

#audioPlayer {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}

.status {
    padding: 12px;
    text-align: center;
    background: #132e43;
    border-top: 1px solid #497b99;
}

.back-row {
    padding: 14px;
    text-align: center;
}

.back-row a {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #75b8db;
    border-radius: 8px;
    color: #dcf4ff;
    text-decoration: none;
    background: #21445f;
}

@media (max-width: 900px) {
    .site-header {
        padding: 12px 8px !important;
        gap: 8px !important;
    }

    .site-header .site-title {
        width: 100% !important;
        margin: 0 !important;
    }

    .site-header .site-nav {
        width: 100% !important;
    }

    .site-header .site-nav > a,
    .site-header .site-nav > details > summary {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
}

@media (max-width: 620px) {
    .site-header .site-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .site-header .site-nav > a,
    .site-header .site-nav > details,
    .site-header .site-nav > details > summary {
        width: 100% !important;
    }

    .site-header .site-nav-menu {
        left: 0 !important;
        right: auto !important;
    }
}

/* Gleiche Positionen wie bei der Bluesbox; echte Bedienelemente über dem Bild. */
.song-button.empty { opacity: 1; color: #34556d; }
.display-mask {left:30%;top:71.3%;width:28%;height:14.2%;background:#061b2c;border-radius:8px;}
.title-display {top:73%;height:5%;font-size:clamp(9px,1.45vw,23px);}
.time-display {top:79%;}
.progress {top:82%;height:2.8%;}
.control:disabled {cursor:default;}
.control:focus-visible,.song-button:focus-visible {outline:3px solid white;outline-offset:2px;}
.progress:focus-visible {outline:2px solid #c7efff;outline-offset:2px;}
.volume {opacity:0;touch-action:none;}
.volume:focus-visible {opacity:.85;outline:2px solid white;}
.volume-readout {position:absolute;left:81.3%;top:86.1%;width:8%;z-index:25;text-align:center;color:#163e59;font-size:clamp(7px,.8vw,13px);font-weight:bold;pointer-events:none;}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(max-width:620px){.song-button{font-size:clamp(5px,1.3vw,8px);padding:0 2%;border-radius:3px}.control{font-size:clamp(4px,1.05vw,7px);padding:0;border-radius:3px}.title-display{font-size:clamp(6px,1.5vw,10px)}.time-display{font-size:clamp(4px,.9vw,7px)}.status{font-size:12px}.display-mask{border-radius:3px}.progress{margin:0}.volume-readout{font-size:clamp(5px,1vw,7px)}}
/* Die Bildtasten selbst bleiben sichtbar; transparente Klickflächen liegen exakt darüber. */
.song-list {left:10.94%;top:41.90%;width:15.17%;height:42.58%;gap:.9%;}
.song-button,.song-button.empty {background:transparent;border:0;box-shadow:none;color:#153c55;padding:0 6%;}
.song-button.active {background:rgba(22,113,165,.85);color:white;box-shadow:inset 0 0 0 2px #c9f2ff;}
.control {background:transparent;border:0;box-shadow:none;color:transparent;}
#playAll {left:61.52%;top:67.67%;width:5.6%;height:8.3%;}
#pause {left:68.03%;top:67.67%;width:5.6%;height:8.3%;}
#stop {left:74.22%;top:67.67%;width:5.6%;height:8.3%;}
#prev {left:63.47%;top:78.12%;width:5.53%;height:6.54%;}
#next {left:71.74%;top:78.12%;width:5.6%;height:6.54%;}
.control:not(:disabled):hover {background:rgba(220,245,255,.16);box-shadow:0 0 12px #b6eaff99;}
.volume-readout {display:none;}