.dl-streambox-wrapper {
    max-width: 1050px;
    margin: 20px auto;
    background: #212112;
    border: 2px solid var(--dwb-border, #eeee68);
    border-radius: 10px;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 205px 1fr 205px;
    gap: 16px;
    color: #ffffd1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    align-items: start;
}

.dl-sb-left, .dl-sb-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dl-sb-frame {
    border: 1px solid #eeee68;
    border-radius: 10px;
    background: #19190b;
    padding: 4px;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dl-sb-album-cover {
    border-radius: 10px !important;
}

.dl-sb-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.dl-sb-credit {
    margin-top: 8px;
    border: 1px solid #eeee68;
    border-radius: 10px;
    padding: 5px 12px;
    font-size: 12px;
    color: #c9c99c;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dl-sb-credit i { color: #ffff4d; font-size: 13px; }

.dl-sb-center {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dl-sb-row {
    border: 1px solid #eeee68;
    border-radius: 10px;
    background: rgba(0,0,0,0.22);
    padding: 11px 14px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .25s ease, border-color .25s ease;
}

.dl-sb-label { color: #d1d1a9; white-space: nowrap; }
.dl-sb-streamer { color: #ffff4d; font-weight: 700; }
.dl-sb-artist, .dl-sb-title { color: #fff; font-weight: 700; }

.dl-sb-playlist-row {
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
}

.dl-sb-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 2px solid;
    text-decoration: none !important;
    font-size: 1.2rem;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    background: rgba(0,0,0,0.35);
}

.dl-sb-circle:hover {
    transform: scale(1.3);
    filter: brightness(2);
    box-shadow: 0px 0px 12px currentColor;
}

.dl-sb-pls  { border-color: #39ff14; color: #39ff14; }
.dl-sb-m3u  { border-color: #ff3366; color: #ff3366; }
.dl-sb-asx  { border-color: #33ccff; color: #33ccff; }
.dl-sb-xspf { border-color: #cc66ff; color: #cc66ff; }
.dl-sb-ram  { border-color: #ffcc00; color: #ffcc00; }
.dl-sb-play-popup { border-color: #00d4ff; color: #00d4ff; }

.dl-sb-flash .dl-sb-row {
    background: rgba(238, 238, 104,0.25);
    border-color: #d9d99b;
}

@media (max-width: 800px) {
    .dl-streambox-wrapper { grid-template-columns: 1fr; }
    .dl-sb-frame { max-width: 220px; margin: 0 auto; }
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #212112;
    border: 2px solid #ffff4d;
    clip: auto !important;
    clip-path: none;
    color: #ffffd1;
    display: block;
    font-size: 14px;
    height: auto;
    left: 5px;
    padding: 8px 12px;
    top: 5px;
    width: auto;
    z-index: 100000;
    border-radius: 6px;
}


/* Tastatur-Fokus für alle Kreis-Links */
.dl-sb-circle:focus-visible,
.dl-sb-audio-btn:focus-visible,
.dl-sb-volume:focus-visible {
    outline: 3px solid #ffff4d;
    outline-offset: 3px;
    border-radius: 10px;
}

/* Optional: gleicher Hover-Effekt auch auf Fokus */
.dl-sb-circle:focus-visible {
    transform: scale(1.3);
    filter: brightness(2);
    box-shadow: 0px 0px 12px currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .dl-sb-circle,
    .dl-sb-row {
        transition: none !important;
    }
    .dl-sb-circle:hover,
    .dl-sb-circle:focus-visible {
        transform: none;
        filter: none;
    }
    /* Flash-Animation abschwächen */
    .dl-sb-flash .dl-sb-row {
        transition: none;
        background: rgba(238,238,104,0.15);
    }
}