/* ============================================
   THEME: 1C71 – Electric Pop / Neon Purple
   ============================================ */

/* 1. Variablen (überschreiben Basis) */
body.station-1c71 {
    --accent:         #d946ef;  /* Fuchsia 500 */
    --accent-hover:   #f0abfc;  /* Fuchsia 200 */
    --accent-glow:    rgba(217, 70, 239, 0.6);
    --accent-2:       #8b5cf6;  /* Violet 500 */
    --accent-2-hover: #a78bfa;  /* Violet 400 */

    --bg-gradient-1:  #050108;
    --bg-gradient-2:  #2e1065;

    --text-primary:   #fae8ff;
    --text-secondary: #e9d5ff;
    --text-heading:   #ffffff;

    --card-bg:        rgba(18, 4, 28, 0.92);
    --card-border:    rgba(217, 70, 239, 0.45);
}

/* 2. Animierter Mesh-Hintergrund (pop-extravagant) */
body.station-1c71 {
    background: linear-gradient(
        -45deg,
        #000000,
        #120118,
        #2e1065,
        #1a0b2e,
        #000000
    );
    background-size: 400% 400%;
    animation: 1c71-aurora 12s ease infinite;
}

@keyframes 1c71-aurora {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 3. Ambiente Glow-Overlays */
body.station-1c71::before {
    content: "";
    position: fixed;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(
        ellipse at center,
        rgba(217, 70, 239, 0.25) 0%,
        rgba(139, 92, 246, 0.08) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: 1c71-breathe 6s ease-in-out infinite;
}

@keyframes 1c71-breathe {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.15); }
}

/* Zusätzliches unteres Neon-Band */
body.station-1c71::after {
    content: "";
    position: fixed;
    bottom: -10%;
    left: -20%;
    width: 140vw;
    height: 300px;
    background: radial-gradient(
        ellipse at center,
        rgba(217, 70, 239, 0.12) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

/* 4. Headlines / Brand (extravagant & breit) */
.station-1c71 h1, .station-1c71 .h1,
.station-1c71 h2, .station-1c71 .h2,
.station-1c71 h3, .station-1c71 .h3,
.station-1c71 .brand-name {
    font-family: "Orbitron", "Montserrat", "Archivo Black", system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-heading);
    text-shadow:
        0 0 10px rgba(217, 70, 239, 0.4),
        0 0 30px rgba(139, 92, 246, 0.3),
        0 2px 4px rgba(0,0,0,0.9);
}

/* Holografischer Brand-Name (animierter Text-Gradient) */
.station-1c71 .brand-name {
    background: linear-gradient(
        90deg,
        #c084fc,
        #d946ef,
        #f472b6,
        #c084fc
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 12px rgba(217, 70, 239, 0.5));
    animation: 1c71-shimmer 4s linear infinite;
}

@keyframes 1c71-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* 5. Buttons – Neon / Glassmorphism-Style */
.station-1c71 .btn-primary,
.station-1c71 .btn-play {
    background: linear-gradient(135deg, #4c1d95, #7c3aed, #2e1065);
    border-color: var(--accent);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.2);
    transition: all 0.2s ease;
}

.station-1c71 .btn-primary:hover,
.station-1c71 .btn-play:hover {
    background: linear-gradient(135deg, #7c3aed, #d946ef, #7c3aed);
    border-color: var(--accent-hover);
    color: #000000;
    box-shadow: 0 0 35px var(--accent-glow);
    text-shadow: none;
}

.station-1c71 .btn-secondary {
    background: linear-gradient(135deg, #ec4899, #be185d);
    border-color: #ec4899;
    color: #fff;
}

.station-1c71 .btn-secondary:hover {
    background: linear-gradient(135deg, #f472b6, #9d174d);
    border-color: #f472b6;
}

/* 6. Links */
.station-1c71 a {
    color: #e879f9;
    transition: color 0.2s;
}
.station-1c71 a:hover {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(217, 70, 239, 0.6);
}

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

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

.station-1c71 .track-title {
    text-shadow: 0 0 8px rgba(217, 70, 239, 0.25);
}

.station-1c71 .status-dot.live {
    background-color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
    animation: 1c71-pulse-dot 2s ease-in-out infinite;
}

@keyframes 1c71-pulse-dot {
    0%, 100% { box-shadow: 0 0 10px var(--accent-glow); }
    50%      { box-shadow: 0 0 20px var(--accent-glow), 0 0 40px rgba(217,70,239,0.3); }
}

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

/* 8. Cover – Neon-Glow & Pop-Sättigung */
.station-1c71 .cover-wrapper {
    box-shadow: 0 0 25px rgba(217, 70, 239, 0.25);
}

.station-1c71 .cover-image {
    filter: contrast(1.1) saturate(1.4) brightness(1.05);
}

/* 9. Station-Switcher Buttons */
.station-1c71 .station-btn.btn-outline-light {
    --bs-btn-color: var(--accent-2);
    --bs-btn-border-color: var(--accent-2);
    --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;
}

/* 10. Marquee leichter Glow */
.station-1c71 .marquee-content {
    text-shadow: 0 0 6px rgba(217, 70, 239, 0.3);
}