/* login.css - Externes Stylesheet für dein Login-Formular */

/* Grundlegende Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body-Stil für zentriertes Layout */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #000;       /* Schwarz vom Quiz-Design */
    font-family: 'Veotec', sans-serif; /* Font aus quiz.css */
    color: #fff;
}

/* Login-Container */
.login {
    background-color: rgba(255, 255, 255, 0.05); /* Leicht transparenter Hintergrund */
    border: 2px solid #fab900;    /* Akzentfarbe Gelb */
    border-radius: 12px;
    padding: 2rem;
    width: 360px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    text-align: center;
}

/* Überschrift */
.login h2 {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: #fab900;              /* Gelber Akzent */
    text-transform: uppercase;
}

/* Fehlermeldung */
.login .error {
    color: #ff5252;              /* auffälliges Rot für Errors */
    margin-bottom: 1rem;
    font-family: 'Veotec-Medium';
}

/* Eingabefelder */
.login input[type="text"],
.login input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #444;
    border-radius: 6px;
    background-color: #111;
    color: #fff;
    font-size: 1rem;
}

/* Fokus-Effekt auf Input */
.login input:focus {
    outline: none;
    border-color: #fab900;
    box-shadow: 0 0 8px #fab900;
}

/* Submit-Button */
.login button {
    width: 100%;
    padding: 0.75rem;
    background-color: #fab900;   /* Gelb vom Quiz */
    color: #000;
    border: none;
    border-radius: 6px;
    font-family: 'Veotec-Medium';
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover-Effekt für Button */
.login button:hover {
    background-color: #ffc700;   /* etwas helleres Gelb */
    transform: scale(1.02);
}