/* ============================================
   THEME: 1c71 (Lila / Violet Pop-Style)
   ============================================ */

/* 1. Variablen */
body.station-1c71 {
    --accent:         #ac81fa;
    --accent-hover:   #d4b8fd;
    --accent-glow:    rgba(172, 129, 250, 0.6);
    --accent-2:       #9333ea;
    --accent-2-hover: #c084fc;

    --bg-gradient-1:  #04010a;
    --bg-gradient-2:  #1a0a2e;

    --text-primary:   #f5f0ff;
    --text-secondary: #d8b4fe;
    --text-heading:   #ffffff;

    --card-bg:        rgba(10, 5, 26, 0.92);
    --card-border:    rgba(172, 129, 250, 0.45);
}

/* 2. Animierter Mesh-Hintergrund + Bild unten */
body.station-1c71 {
    background-color: #04010a;
    background-image:
        /* Gradient-Maske: oben transparent → unten sichtbar */
        linear-gradient(
            to bottom,
            #04010a 0%,
            #04010a 15%,
            transparent 45%,
            transparent 100%
        ),
        /* Das eigentliche Bokeh-Bild */
        url('https://wp.lb3.eu/wp-content/uploads/2025/12/bg-new-30.png');
    background-size:
        100% 100%,
        cover;
    background-position:
        top center,
        center center;
    background-repeat:
        no-repeat,
        no-repeat;
    background-attachment:
        scroll,
        fixed;
    animation: none; /* Bild statt Aurora-Animation */
}

/* 2b. Subtile Farb-Overlay über das Bild (Violet-Tönung) */
body.station-1c71::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        /* Oberer Aurora-Glow */
        radial-gradient(
            ellipse 80% 50% at 50% -10%,
            rgba(172, 129, 250, 0.18) 0%,
            transparent 70%
        ),
        /* Allgemeine Violet-Tönung */
        linear-gradient(
            180deg,
            rgba(4, 1, 10, 0.55) 0%,
            rgba(26, 10, 46, 0.25) 40%,
            rgba(4, 1, 10, 0.15) 100%
        );
    pointer-events: none;
    z-index: 0;
    animation: 1c71-breathe 6s ease-in-out infinite;
}

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

/* 2c. 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(172, 129, 250, 0.10) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

/* 4. Headlines / Brand */
.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(172, 129, 250, 0.4),
        0 0 30px rgba(147, 51, 234, 0.3),
        0 2px 4px rgba(0,0,0,0.9);
}

/* Animierter Brand-Name Gradient */
.station-1c71 .brand-name {
    background: linear-gradient(
        90deg,
        #d4b8fd,
        #ac81fa,
        #7c3aed,
        #d4b8fd
    );
    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(172, 129, 250, 0.5));
    animation: 1c71-shimmer 4s linear infinite;
}

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

/* 5. Buttons */
.station-1c71 .btn-primary,
.station-1c71 .btn-play {
    background: linear-gradient(135deg, #3b0764, #7c3aed, #1e0533);
    border-color: var(--accent);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    box-shadow: 0 0 15px rgba(172, 129, 250, 0.2);
    transition: all 0.2s ease;
}

.station-1c71 .btn-primary:hover,
.station-1c71 .btn-play:hover {
    background: linear-gradient(135deg, #7c3aed, #ac81fa, #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, #6d28d9, #4c1d95);
    border-color: #7c3aed;
    color: #fff;
}

.station-1c71 .btn-secondary:hover {
    background: linear-gradient(135deg, #8b5cf6, #5b21b6);
    border-color: #8b5cf6;
}

/* 6. Links */
.station-1c71 a {
    color: #d4b8fd;
    transition: color 0.2s;
}
.station-1c71 a:hover {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(172, 129, 250, 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(172, 129, 250, 0.25);
}

/* 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 */
.station-1c71 .cover-wrapper {
    box-shadow: 0 0 25px rgba(172, 129, 250, 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(--text-primary);
    --bs-btn-border-color: #333333;
    --bs-btn-hover-bg: #1a0a2e;
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-color: #000000;
    border-radius: 4px;
}

.station-1c71 .station-btn.btn-outline-light.active {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #000000 !important;
    box-shadow: 0 0 20px var(--accent-glow);
}

/* 10. Marquee Glow */
.station-1c71 .marquee-content {
    text-shadow: 0 0 6px rgba(172, 129, 250, 0.3);
}