/* ============================================
   RADIO EXTASY - Pink/Purple Theme
   ============================================ */

.station-re {
    /* Akzent-Farben (Pink) */
    --accent:        #e91e8c;
    --accent-hover:  #ff4db8;
    --accent-glow:   rgba(233, 30, 140, 0.5);
    
    /* Sekundär (Violett) */
    --accent-2:      #7c3aed;
    --accent-2-hover:#9d5ff5;
    
    /* Hintergrund-Gradient (tiefes Lila/Schwarz) */
    --bg-gradient-1: #14051e;
    --bg-gradient-2: #2d0a4e;
    
    /* Text */
    --text-primary:  #f8f0ff;
    --text-muted:    #d4aacc;
    --text-heading:  #ff80d5;
    
    /* Card */
    --card-bg:       rgba(20, 5, 30, 0.92);
    --card-border:   rgba(233, 30, 140, 0.4);
}

/* ---------- Hintergrund-Bild ---------- */
body.station-re {
    background: 
        linear-gradient(135deg, var(--bg-gradient-1), var(--bg-gradient-2)),
        url("https://radioextasy.de/wp-content/uploads/2026/04/1807a034-13ef-4da4-85c7-8fe4c730784a.jpeg") center center / cover no-repeat fixed;
    background-blend-mode: overlay;
}

/* ---------- Player-Card ---------- */
.station-re .player-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.9),
                0 0 30px var(--accent-glow);
}

/* ---------- Buttons ---------- */
.station-re .btn-primary,
.station-re .play-btn {
    background: linear-gradient(135deg, #e91e8c, #7c3aed);
    border-color: var(--accent);
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}

.station-re .btn-primary:hover,
.station-re .play-btn:hover {
    background: linear-gradient(135deg, #ff4db8, #9d5ff5);
    border-color: var(--accent-hover);
    box-shadow: 0 0 20px var(--accent-glow);
}

.station-re .btn-secondary {
    background: linear-gradient(135deg, var(--accent-2), #5b21b6);
    border-color: var(--accent-2);
    color: #fff;
}

.station-re .btn-secondary:hover {
    background: linear-gradient(135deg, var(--accent-2-hover), #6d28d9);
}

/* ---------- Überschriften ---------- */
.station-re h1, .station-re .h1,
.station-re h2, .station-re .h2,
.station-re h3, .station-re .h3,
.station-re .brand {
    font-family: "Oswald", "Roboto Condensed", system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-heading);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}

/* ---------- Text ---------- */
.station-re {
    color: var(--text-primary);
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.station-re .text-muted {
    color: var(--text-muted) !important;
}

/* ---------- Badges ---------- */
.station-re .badge-light-auto { color: #000 !important; }
.station-re .badge-dark-auto  { color: #fff !important; }

/* ---------- Album-Cover Glow ---------- */
.station-re .cover-image.playing {
    box-shadow: 0 0 40px var(--accent-glow),
                0 0 80px var(--accent-glow);
}

/* ---------- Volume Slider ---------- */
.station-re input[type="range"]::-webkit-slider-thumb {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

.station-re input[type="range"]::-moz-range-thumb {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* ---------- Status Dot (LIVE) ---------- */
.station-re .status-dot.live {
    background: var(--accent-2);
    box-shadow: 0 0 8px var(--accent-2);
}