/* ============================================
   THEME: BMFM – Beatmusik-FM
   Vibe: Deep Space, Cosmic Glow, Electric Blue
   ============================================ */

/* 1. Variablen (Neon-Blau auf Space-Schwarz) */
body.station-bmfm {
    --accent:         #0077ff;  /* Kräftiges Electric Blue / Neon-Blau */
    --accent-hover:   #3399ff;  /* Hellere Blaustufe für Hover */
    --accent-glow:    rgba(0, 119, 255, 0.6);
    
    --bg-gradient-1:  #010205;  /* Tiefstes Weltraum-Schwarz */
    --bg-gradient-2:  #050a17;  /* Sehr dunkles Mitternachtsblau */

    --text-primary:   #f8f9fa;  /* Strahlendes Weiß */
    --text-secondary: #a0a5b5;  /* Helles Blaugrau für Nebentexte */
    --text-heading:   #ffffff;

    --card-bg:        rgba(10, 12, 18, 0.85); /* Sehr dunkler, leicht bläulicher Hintergrund */
    --card-border:    #0077ff;  /* Blauer Rahmen passend zum Thema */
}

/* 2. Hintergrund (Weltraum mit Sternen und einem leichten kosmischen Glow) */
body.station-bmfm {
    background-color: var(--bg-gradient-1);
    /* Ein feines Punktemuster für Sterne und ein riesiger radialer Glow für den "Lichtbogen"-Effekt */
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.15) 0%, transparent 40%), 
        radial-gradient(circle at 50% -20%, rgba(0, 119, 255, 0.2) 0%, transparent 60%),
        radial-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px;
    background-position: center, center, 0 0;
    background-attachment: fixed;
}

/* 3. Player-Card (Dunkel mit feinem leuchtenden Rahmen) */
.station-bmfm .player-card {
    border: 1px solid var(--card-border);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(0, 119, 255, 0.3); /* Leichter blauer Glow außen */
    border-radius: 8px; /* Leicht abgerundet */
}

/* 4. Brand-Name (Der Typo-Style von "Dein Sound...") */
.station-bmfm .brand {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-glow);
    font-weight: 700;
}

/* 5. Buttons (Sattes Blau mit weißer Schrift) */
.station-bmfm .station-btn {
    background-color: transparent;
    border: 1px solid var(--accent);
    color: var(--text-primary);
    transition: all 0.3s ease;
    border-radius: 6px;
    background: linear-gradient(to bottom, rgba(0, 119, 255, 0.1), transparent);
}
.station-bmfm .station-btn:hover {
    background-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Aktiver Button */
.station-bmfm .station-btn.active {
    background-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 0 15px var(--accent-glow);
    border-color: var(--accent);
}

/* 6. Links */
.station-bmfm a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
}
.station-bmfm a:hover {
    color: #ffffff;
    text-shadow: 0 0 8px var(--accent-glow);
}


/* 8. Volume-Slider */
.station-bmfm #volumeSlider {
    accent-color: var(--accent);
}
.station-bmfm #volumeSlider::-webkit-slider-thumb {
    background-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    border: 1px solid #fff;
}
.station-bmfm #volumeSlider::-moz-range-thumb {
    background-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    border: 1px solid #fff;
}

/* 9. Album-Cover */
.station-bmfm .cover-image {
    border: 1px solid var(--accent);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 119, 255, 0.2);
    border-radius: 6px;
}