/* ============================================
   THEME: SBFM – Sunrise / Acid Yellow
   ============================================ */

/* 1. Variablen */
body.station-sbfm {
    --accent:         #bef264;   /* Lime-300 */
    --accent-hover:   #d9f99d;   /* Lime-200 */
    --accent-glow:    rgba(190, 242, 100, 0.45);

    --bg-gradient-1:  #0f0a05;
    --bg-gradient-2:  #1a1505;

    --text-primary:   #f5f5f4;
    --text-secondary: #fcd34d;   /* warmes Gelb für Subtexte */
    --text-heading:   #ffffff;

    --card-bg:        rgba(20, 15, 5, 0.95);
    --card-border:    rgba(190, 242, 100, 0.35);
}

/* 2. Body-Hintergrund (warme Sonnenaufgang-Darkness) */
body.station-sbfm {
    background: linear-gradient(
        180deg,
        #0a0802 0%,
        #1a1505 40%,
        #2d2608 80%,
        #3d340a 100%
    );
}

/* 3. Ambiente Glow (unten links, warm) */
body.station-sbfm::before {
    content: "";
    position: fixed;
    bottom: -15%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(
        circle,
        rgba(251, 191, 36, 0.10) 0%,
        rgba(190, 242, 100, 0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: sbfm-pulse 10s ease-in-out infinite;
}

@keyframes sbfm-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 0.9; transform: scale(1.15); }
}

/* 4. Headlines / Brand */
.station-sbfm h1, .station-sbfm .h1,
.station-sbfm h2, .station-sbfm .h2,
.station-sbfm h3, .station-sbfm .h3,
.station-sbfm .brand-name {
    font-family: "Orbitron", "Montserrat", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-heading);
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.25),
                 0 2px 4px rgba(0,0,0,0.8);
}

.station-sbfm .brand-name {
    background: linear-gradient(135deg, #fcd34d, #bef264, #a3e635);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 8px rgba(190, 242, 100, 0.35));
}

/* 5. Buttons */
.station-sbfm .btn-primary,
.station-sbfm .btn-play {
    background: linear-gradient(135deg, #2d2608, #3d340a, #1a1505);
    border-color: var(--accent);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.station-sbfm .btn-primary:hover,
.station-sbfm .btn-play:hover {
    background: linear-gradient(135deg, #3d340a, #bef264, #3d340a);
    border-color: var(--accent-hover);
    color: #000000;
    box-shadow: 0 0 25px var(--accent-glow);
}

.station-sbfm .btn-secondary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
    color: #000;
}

.station-sbfm .btn-secondary:hover {
    background: linear-gradient(135deg, #fbbf24, #b45309);
    color: #000;
}

/* 6. Links */
.station-sbfm a {
    color: #fcd34d;
}
.station-sbfm a:hover {
    color: #ffffff;
}

/* 7. Komponenten-Farben */
.station-sbfm .player-footer {
    color: var(--text-secondary);
}

.station-sbfm .track-artist {
    color: var(--text-secondary);
}

.station-sbfm .status-dot.live {
    background-color: #f59e0b;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Volume */
.station-sbfm #volumeSlider::-webkit-slider-thumb {
    background-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}
.station-sbfm #volumeSlider::-moz-range-thumb {
    background-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Cover leicht wärmer */
.station-sbfm .cover-image {
    filter: contrast(1.05) saturate(1.2) sepia(0.2);
}

/* 8. Station-Switcher */
.station-sbfm .station-btn.btn-outline-light {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-color: #000;
}