@charset "utf-8";

/* --- BASIS-EINSTELLUNGEN --- */
body { 
    margin: 0; 
    padding: 0; 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    background: transparent;
}

/* --- HINTERGRUND UND SPEZIAL-EFFEKTE FÜR DEN NAMEN --- */
body#onair_body { 
    font-family: Arial, sans-serif; 
    font-size: 17px !important; 
    color: #ffffff !important; 
    text-align: center; 
    background: transparent;
    overflow: hidden;
    position: relative;
    
    -webkit-animation: NameLeuchten 3s infinite alternate !important;
    animation: NameLeuchten 3s infinite alternate !important;
    
    /* Gesamte Anzeige wieder ein gutes Stück größer skaliert (0.85) */
    -webkit-transform: scale(0.85) !important;
    -moz-transform: scale(0.85) !important;
    -o-transform: scale(0.85) !important;
    -ms-transform: scale(0.85) !important;
    transform: scale(0.85) !important;
    
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    transition-duration: 0.5s;
    margin: 0px -10px !important;
}

/* --- DER ROTIERENDE ECKIGE RAHMEN (NUR IM HINTERGRUND) --- */
body#onair_body::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    
    /* Perfekte Zentrierung und Größe um das Bild herum */
    left: 50% !important;
    top: 10px !important; 
    margin-left: -71px !important; /* Exakt zentriert für die 142px Breite */
    width: 142px !important;  
    height: 142px !important; 
    
    /* Leicht abgerundete Ecken für ein edles Viereck */
    border-radius: 8px !important; 
    
    /* Hauchdünner 2px Rahmen */
    border: 2px solid transparent !important;
    
    /* Der rotierende Multicolor-Neonverlauf (6 Farben) */
    background: conic-gradient(#00f2fe, #7f00ff, #ff007f, #ff0000, #ffea00, #00ff66, #00f2fe) border-box !important;
    
    /* CSS-Maske sorgt dafür, dass NUR der dünne eckige Außenrand sichtbar bleibt */
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: destination-out !important;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    
    /* Startet die echte, unaufhörliche Drehung des eckigen Rahmens */
    -webkit-animation: EckigeRahmenDrehung 2s linear infinite !important;
    animation: EckigeRahmenDrehung 2s linear infinite !important;
    
    z-index: 1 !important;
}

/* --- DAS MODERATORENBILD (VIERECKIG & BLEIBT STABIL STEHEN) --- */
img#onair_bildIMG, body#onair_body img { 
    width: 135px !important;  /* Wieder ein schönes Stück größer gestellt */
    height: 135px !important; 
    object-fit: cover !important; 
    display: block !important;
    margin: 13px auto 8px auto !important; /* Genau auf den Hintergrund-Rahmen ausgerichtet */
    position: relative !important;
    z-index: 2 !important; /* Liegt stabil über dem drehenden Rahmen */
    
    border: none !important;
    border-radius: 6px !important; /* Passt sich optisch dem viereckigen Rahmen an */
    background-color: #121214 !important; 
    
    /* Blockiert jegliche Drehung für das Bild selbst */
    transform: none !important;
    -webkit-transform: none !important;
    
    /* Leuchteffekt nach außen */
    box-shadow: 0px 0px 15px rgba(0, 242, 254, 0.4) !important;
}

/* --- ANIMATION: NUR DER ECKIGE RAHMEN DREHT SICH --- */
@keyframes EckigeRahmenDrehung {
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes EckigeRahmenDrehung {
    100% { -webkit-transform: rotate(360deg); }
}

/* --- ANIMATION: PULSIERENDER NAME --- */
@keyframes NameLeuchten {
    0% {
        color: #00f2fe !important;
        text-shadow: 0 0 10px #00f2fe, 0 0 20px #7f00ff !important;
    }
    100% {
        color: #ff007f !important;
        text-shadow: 0 0 10px #ff007f, 0 0 20px #ff0000 !important;
    }
}
@-webkit-keyframes NameLeuchten {
    0% {
        color: #00f2fe !important;
        text-shadow: 0 0 10px #00f2fe, 0 0 20px #7f00ff !important;
    }
    100% {
        color: #ff007f !important;
        text-shadow: 0 0 10px #ff007f, 0 0 20px #ff0000 !important;
    }
}

/* --- RESTLICHE ELEMENTE --- */
div#content { min-height: 230px; padding: 5px; background: transparent; }
table.content tr:nth-child(even), table.content tr:nth-child(odd) { background: transparent; }
div.clear { clear: both; }