/* --- LAFAMILIA RADIO - OPTIMIERTES GLOBAL STYLESHEET --- */


:root {

    --bg-dark: #050a12;

    --card-bg: rgba(255, 255, 255, 0.03);

    --border: rgba(255, 255, 255, 0.1);

    --glass-blur: blur(20px);

    --accent: #00aaff;

    --accent-glow: rgba(0, 170, 255, 0.4);

    --gold: #d4af37;

    --gold-glow: rgba(212, 175, 55, 0.3);

    --live: #39ff14;

    --offline: #ff3131;

    --dim: #8b949e;

}


* { box-sizing: border-box; }


body {

    background-color: var(--bg-dark) !important;

    background: radial-gradient(circle at 50% -20%, #101a2d 0%, #050a12 85%) fixed !important;

    color: #ffffff;

    margin: 0;

    padding: 0;

    font-family: 'Inter', 'Segoe UI', sans-serif;

    overflow-x: hidden;

    min-height: 100vh;

}


/* --- NAVIGATION & PLAYER (navigation.php) --- */

.site-header { 

    padding: 25px 0; 

    background: radial-gradient(circle at 10% 50%, var(--accent-glow) 0%, #0a0f18 65%); 

    border-bottom: 1px solid var(--border);

    transition: background 0.5s ease;

}


.header-content { max-width: 1350px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }

.logo-img { height: 130px; filter: drop-shadow(0 0 15px var(--accent)); transition: 0.4s ease; }

.header-player-area { display: flex; flex-direction: column; gap: 10px; width: 620px; }


.on-air-module { 

    background: rgba(0,0,0,0.85); 

    border: 2px solid var(--accent); 

    box-shadow: 0 0 25px var(--accent-glow); 

    border-radius: 12px; 

    padding: 15px; 

    transition: all 0.5s ease;

}


.oa-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.oa-live { font-size: 10px; font-weight: 900; color: #ff3131; display: flex; align-items: center; gap: 6px; }

.oa-pulse { width: 8px; height: 8px; background: #ff3131; border-radius: 50%; box-shadow: 0 0 8px #ff3131; animation: pulse-red 1.5s infinite; }

@keyframes pulse-red { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }


.oa-tag { background: var(--accent); color: #000; font-weight: 900; padding: 3px 10px; border-radius: 4px; font-size: 10px; text-transform: uppercase; box-shadow: 0 0 10px var(--accent-glow); transition: 0.5s; }


/* Wunschbox Button Styling */

.wunsch-top-btn {

    background: transparent;

    border: 1px solid var(--accent);

    color: #fff;

    padding: 4px 12px;

    border-radius: 5px;

    font-size: 11px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;

}

.wunsch-top-btn:hover {

    background: var(--accent);

    color: #000;

    box-shadow: 0 0 15px var(--accent);

}


.oa-main { display: flex; gap: 20px; align-items: center; }


/* DJ Avatar & Rotierender Kreis */

.oa-avatar-container { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.oa-avatar-img { width: 75%; height: 75%; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); z-index: 2; position: relative; background: #000; }

.rotating-border { 

    position: absolute; 

    width: 100%; height: 100%; 

    border-radius: 50%; 

    border: 3px solid transparent; 

    border-top: 3px solid var(--accent); 

    border-right: 3px solid var(--accent); 

    z-index: 1; 

    animation: rotate-clock 2s linear infinite; 

}

@keyframes rotate-clock { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* Play Button Glow */

.oa-play-btn { 

    background: var(--accent); 

    border: none; 

    width: 45px; height: 45px; 

    border-radius: 50%; 

    cursor: pointer; 

    color: #000; 

    font-size: 20px; 

    transition: 0.3s; 

    box-shadow: 0 0 15px var(--accent-glow);

}

.oa-play-btn:hover { transform: scale(1.1); box-shadow: 0 0 20px var(--accent); }


.oa-info { flex: 1; min-width: 0; }

.oa-dj { font-size: 18px; color: #fff; font-weight: 800; text-transform: uppercase; text-shadow: 0 0 10px var(--accent-glow); }

.oa-show { color: var(--accent); font-size: 11px; font-weight: 700; margin-bottom: 6px; opacity: 0.8; }

.oa-song-wrap { border-left: 3px solid var(--accent); background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 0 5px 5px 0; overflow: hidden; }

.oa-track { font-size: 12px; color: #fff; font-weight: bold; }


/* Dynamische Kanal Buttons */

.header-channels { display: flex; gap: 5px; margin-top: 15px; }

.chan-btn { 

    flex: 1; 

    background: rgba(0,0,0,0.6); 

    padding: 8px 2px; 

    border-radius: 6px; 

    font-size: 9px; 

    cursor: pointer; 

    font-weight: 800; 

    transition: 0.3s; 

    border: 1px solid; /* Farbe wird inline über PHP gesetzt */

    display: flex; 

    justify-content: center;

    align-items: center;

}

.chan-btn.active { 

    background: var(--accent) !important; 

    color: #000 !important; 

    border-color: #fff !important;

    box-shadow: 0 0 15px var(--accent-glow);

}


/* --- NAVIGATION --- */

.site-nav { background: #080d15; border-bottom: 2px solid var(--accent); position: sticky; top: 0; z-index: 999; transition: 0.5s; }

.nav-links { display: flex; justify-content: center; align-items: center; }

.nav-links a { color: #fff; text-decoration: none; padding: 15px 25px; font-size: 12px; font-weight: bold; text-transform: uppercase; transition: 0.3s; border-top: 3px solid transparent; }

.nav-links a:hover { background: rgba(255,255,255,0.05); color: var(--accent); }


/* --- GRID LAYOUT --- */

.main-content { 

    max-width: 1600px; 

    margin: 40px auto; 

    padding: 0 20px 120px; 

    display: grid; 

    grid-template-columns: 300px 1fr 300px; 

    gap: 25px; 

}


.glass-box {

    background: var(--card-bg);

    backdrop-filter: var(--glass-blur);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 25px;

    box-shadow: 0 10px 40px rgba(0,0,0,0.6);

    margin-bottom: 25px;

}


/* --- RESPONSIVE --- */

@media (max-width: 1150px) { 

    .main-content { grid-template-columns: 1fr; } 

    .header-content { flex-direction: column; gap: 20px; }

    .header-player-area { width: 100%; }

} 

        html, body { background-color: #050a12 !important; margin: 0; padding: 0; color: #fff; font-family: 'Inter', sans-serif; }
        
        /* Grid verkleinert für mehr Items pro Zeile */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 15px;
            margin-top: 30px;
        }
        
        .dj-card {
            text-align: center;
            padding: 15px 10px;
            transition: transform 0.3s ease;
        }
        .dj-card:hover { transform: translateY(-5px); }
        
        /* Bilder von 110px auf 80px verkleinert */
        .avatar-wrapper {
            position: relative;
            width: 80px;
            height: 80px;
            margin: 0 auto 10px;
            border-radius: 50%;
            padding: 4px;
            border: 2px solid var(--accent);
            box-shadow: 0 0 10px var(--accent-glow);
        }
        
        .dj-avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            background: #000;
        }

        .role-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 9px;
            font-weight: 900;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .dj-name {
            color: #fff; 
            display: block; 
            font-size: 15px; /* Schrift etwas kleiner für die kompakte Optik */
            font-weight: 900; 
            margin-bottom: 3px;
        }

        .role-0 { background: #ff3131; color: #fff; } /* Management */
        .role-1 { background: #00aaff; color: #fff; } /* Technik */
        .role-2 { background: #39ff14; color: #000; } /* Moderator */
        .role-3 { background: #ffaa00; color: #000; } /* DJ */