/* default login css */

/*intro css */
#login_logo { height:100px; width:600px;}
#intro_top { width:100%; height:100%; z-index:1; position:relative; background:#292929 url('https://treffpunkt.magic-hit-radio.de/chat_bild.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center; background-attachment:fixed; }
#login_wrap { width:100%; height:100%; }
#login_all { width:1200px; max-width:900%; border-radius:20px; display:block; margin:0 auto; color:#0EFFFF; }
.login_not_member { text-align:center; padding-top:5px; }
#intro_lang { position:absolute; top:10px; right:20px; width:40px; height:40px; }

/* section css */
.section { width:100%; height:auto; margin:0 auto; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}






.img_chat{
	cursor:pointer;
transition: transform 0.7s;
background-image: url('https://chat.magicexpressradio.de/img/blue1.png');
border: 3px solid transparent;
border-image: rgb(9,89,0);
border-image: radial-gradient(circle farthest-corner at center, #38BFFF 0%, #00041C 100%);
border-image-slice: 1;
	
        cursor:pointer;
	display:inline-block;
	cursor:pointer;
	color:#8EE5EE;
        text-shadow:3px 3px 3px #000000;
	font-family: Georgia;
	font-size:18px;
	font-weight:bold;
	padding:0px 0px;
        float: center;
	margin-left: auto;
        margin-right: auto;

}

.img_chat:hover {
 transform: rotate(360deg);
background-image: url('https://chat.magicexpressradio.de/img/blue1.png');

border: 3px solid transparent;
border-image: rgb(9,89,0);
border-image: radial-gradient(circle farthest-corner at center, #38BFFF 0%, #00041C 100%);
border-image-slice: 1;
        cursor:pointer;
	display:inline-block;
	cursor:pointer;
	color:#8EE5EE;
        text-shadow:3px 3px 3px #000000;
	font-family: Georgia;
	font-size:18px;
	font-weight:bold;
	padding:0px 0px;
        float: center;
	margin-left: auto;
        margin-right: auto;



}




.grusslogin 
{
      
 background: #020617 !important;
    color: #7fdcff !important;
    border: 2px solid #0a84ff !important;
    border-radius: 10px !important;

    padding: 6px 12px;

    font-family: 'Orbitron', Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;

    text-shadow: 0 0 4px #0a84ff;
    box-shadow: 0 0 5px #0a84ff;

    display: inline-block;

    width: fit-content;
}


.login2
{

        box-shadow: 3px 3px 20px #38BFFF; width: 800px;
        background: #00000aa; 
        border: 3px solid transparent;
        border-image: rgb(9,89,0);
        border-image: radial-gradient(circle farthest-corner at center, #38BFFF 0%, #00041C 100%);
        border-image-slice: 1;

        cursor:pointer;
	display:inline-block;
	cursor:pointer;
	color:#8EE5EE;
        text-shadow:3px 3px 3px #000000;
	font-family: Verdana;
	font-size:16px;
	font-weight:bold;
	padding:0px 0px;
        float: center;
	margin-left: auto;
        margin-right: auto;
        box-shadow: 3px 3px 20px #38BFFF;

}

.chatnews
{

        box-shadow: 3px 3px 20px #38BFFF; width: 800px;
        
        border: 3px solid transparent;
        border-image: rgb(9,89,0);
        border-image: radial-gradient(circle farthest-corner at center, #38BFFF 0%, #00041C 100%);
        border-image-slice: 1;

        cursor:pointer;
	display:inline-block;
	cursor:pointer;
	color:#8EE5EE;
        text-shadow:3px 3px 3px #000000;
	font-family: Verdana;
	font-size:16px;
	font-weight:bold;
	padding:0px 0px;
        float: center;
	margin-left: auto;
        margin-right: auto;
        box-shadow: 3px 3px 20px #38BFFF;

}






.user
{

           background: #020617 !important;
    color: #7fdcff !important;

    border: 2px solid #0a84ff !important;
    border-radius: 14px !important;

    padding: 10px 20px;

    font-family: 'Orbitron', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;

    text-shadow: 0 0 6px #0a84ff;

    box-shadow:
        0 0 5px #0a84ff,
        0 0 15px #0a84ff;

        display:inline-block;
	cursor:pointer;
	margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;

}



.img_chat2{
	    background: #020617 !important;
    color: #7fdcff !important;

    border: 2px solid #0a84ff !important;
    border-radius: 14px !important;

    padding: 10px 20px;

    font-family: 'Orbitron', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;

    text-shadow: 0 0 6px #0a84ff;

    box-shadow:
        0 0 5px #0a84ff,
        0 0 15px #0a84ff;

}


.img_modifiziert{
 transition: transform 1s;


}


.img_modifiziert:hover {

transform: scale(1.5);








}

/* =========================
   ?? FINAL NEON BUTTONS
========================= */

.intro_login_btn,
.intro_guest_btn,
.large_button_rounded {

    background: #020617 !important;
    color: #7fdcff !important;

    border: 2px solid #0a84ff !important;
    border-radius: 14px !important;

    padding: 10px 20px;

    font-family: 'Orbitron', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;

    text-shadow: 0 0 6px #0a84ff;

    box-shadow:
        0 0 5px #0a84ff,
        0 0 15px #0a84ff;

    transition: 0.3s;
}

.intro_login_btn:hover,
.intro_guest_btn:hover,
.large_button_rounded:hover {

    background: #031026 !important;

    box-shadow:
        0 0 10px #0a84ff,
        0 0 25px #0a84ff,
        0 0 50px #003cff;

    transform: translateY(-2px);
}

/* ? Glow Animation bleibt */
@keyframes neonPulse {
    0% { box-shadow: 0 0 5px #0a84ff; }
    50% { box-shadow: 0 0 20px #0a84ff; }
    100% { box-shadow: 0 0 5px #0a84ff; }
}

.intro_login_btn,
.intro_guest_btn,
.large_button_rounded {
    animation: neonPulse 3s infinite ease-in-out;
}

/* ? KEINE Icon-Animation mehr */
.intro_login_btn::before,
.intro_guest_btn::before,
.large_button_rounded::before {
    display: inline-block;
    margin-right: 6px;
}

/* Icons bleiben statisch */
.intro_login_btn::before { content: ""; }
.intro_guest_btn::before { content: ""; }
.large_button_rounded::before { content: ""; }

/* ?? Buttons nebeneinander */
.centered_element.vpad15 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}