void-genesis/dev/lobby-frontend/src/css/auth.css

/*
 * Hier liegen alle Styles für den Anmelde- und Registrierungsprozess.
 * Das umfasst das Formular, die eingabefelder, buttons, Checkboxen und die Hilfslinks
 */

#register-form {
    pointer-events: auto; 
    width: 500px; 
    height: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}

.input-group label {
    display: none; 
}

.input-group input {
    position: absolute;
    width: 300px;  
    height: 50px;  
    left: 115px;   
    box-sizing: border-box; 
    padding: 10px 15px; 
    background: transparent;
    border: none; 
    outline: none; 
    color: var(--color-text-main); 
    font-size: 16px;
    font-family: inherit; 
    transition: text-shadow 0.2s ease;
}

#username { top: 135px; }
#email { top: 200px; }
#password { top: 265px; }

.input-group input::placeholder {
    color: var(--color-text-placeholder);
}

.input-group input:focus {
    text-shadow: 0 0 8px var(--color-cyan-dark); 
    background: transparent; 
    box-shadow: none;
}

#btn-register {
    position: absolute;
    width: 370px;  
    height: 55px;  
    left: 65px;    
    top: 390px;    
    background: transparent; 
    border: none;
    color: var(--color-text-main); 
    font-size: 18px;
    font-weight: bold;
    font-family: inherit;
    letter-spacing: 2px; 
    cursor: pointer;
    transition: all 0.2s ease;
}

#btn-register:hover {
    background: transparent;
    color: var(--color-text-main);
    text-shadow: 0 0 15px var(--color-text-main), 0 0 30px var(--color-green-bright); 
}

.tab-btn {
    position: absolute;
    height: 40px;
    width: 180px; 
    top: 60px;    
    background: transparent;
    border: none;
    color: var(--color-text-inactive); 
    font-size: 14px;
    font-family: inherit;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    transition: color 0.2s ease;
}

#tab-login { left: 65px; }
#tab-register { left: 255px; }

.tab-btn.active {
    color: var(--color-text-main);
    text-shadow: 0 0 8px var(--color-cyan-bright);
}

.tab-btn:hover:not(.active) {
    color: var(--color-text-main);
}

.checkbox-group {
    position: absolute;
    left: 115px; 
    display: flex;
    align-items: center;
    gap: 10px;
}

#group-remember { top: 300px; }
#group-agb { top: 325px; }

.checkbox-group label {
    color: var(--color-text-main);
    font-size: 14px;
    cursor: pointer;
}

.checkbox-group a {
    color: var(--color-cyan-bright);
    text-decoration: none; /* Unterstrich entfernen für einen cleaneren Look */
    transition: text-shadow 0.2s ease, color 0.2s ease;
}

.checkbox-group a:hover {
    color: var(--color-text-main);
    text-shadow: 0 0 8px var(--color-cyan-bright);
}

.checkbox-group input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-cyan-dark);
    background: var(--color-checkbox-bg);
    cursor: pointer;
    position: relative;
}

.checkbox-group input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    color: var(--color-cyan-bright);
    font-size: 14px;
    top: -2px;
    left: 2px;
}

#otp-instruction {
    display: none; 
    position: absolute; 
    top: 120px; 
    left: 65px; 
    width: 370px; 
    text-align: center; 
    color: var(--color-text-main); 
    font-size: 15px; 
    margin: 0;
}

#msg-box {
    position: absolute;
    top: 350px; 
    left: 65px;
    width: 370px;
    height: 30px;
    color: var(--color-error); 
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

#resend-otp-link {
    position: absolute;
    top: 250px; 
    left: 65px;
    width: 370px;
    text-align: center;
    color: var(--color-text-inactive);
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

#resend-otp-link:hover, #forgot-password-link:hover, #back-link:hover {
    color: var(--color-cyan-bright);
    text-shadow: 0 0 8px var(--color-cyan-bright);
}

#forgot-password-link {
    position: absolute;
    top: 255px; 
    left: 120px;
    color: var(--color-text-inactive);
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

#discord-link {
    position: absolute;
    left: 640px;
    top: 380px;
    width: 280px;
    height: 85px; 
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}

#back-link {
    position: absolute;
    top: 70px; 
    left: 65px;
    color: var(--color-text-inactive);
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}



#dev-warning-banner {
    position: absolute;
    top: 35px; /* Leichter Abstand zum oberen Bildschirmrand */
    left: 50%;
    transform: translateX(-50%); /* Zentriert das Banner horizontal */
    
    /* Optik: Roter, halbtransparenter Hintergrund mit rotem Rahmen */
    background: rgba(255, 68, 68, 0.3); 
    border: 1px solid var(--color-error);
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.8); /* Sanfter roter Glow */
    
    color: var(--color-text-main);
    padding: 12px 25px;
    font-size: 14px;
    font-family: var(--font-main);
    text-align: center;
    letter-spacing: 1px;
    
    /* Z-Index hoch ansetzen, damit es garantiert über allem anderen liegt */
    z-index: 100;
    pointer-events: auto; /* Erlaubt das Markieren des Textes mit der Maus */
}

/* ----------------------------------------------------------------------
 * Hervorhebung des Warn-Icons innerhalb des Banners
 * ---------------------------------------------------------------------- */
#dev-warning-banner .warning-icon {
    color: var(--color-error);
    font-size: 16px;
    margin-right: 5px;
    text-shadow: 0 0 8px var(--color-error);
}

#dev-warning-banner strong {
    color: var(--color-error);
}