/* login.css - Verbessertes Styling für das Anmeldeformular */

/* Allgemeine Styles für den Login-Container */
.login-container {
    background-color: #ffffff; /* Weißer Hintergrund für den Kasten */
    padding: 40px; /* Innenabstand */
    border-radius: 12px; /* Stärker abgerundete Ecken */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* Deutlicherer, moderner Schatten */
    max-width: 450px; /* Maximale Breite des Kastens */
    margin: 60px auto; /* Zentriert den Kasten horizontal, größerer vertikaler Abstand */
    text-align: center; /* Text im Kasten zentrieren */
    position: relative; /* Für spätere Effekte (optional) */
    overflow: hidden; /* Sicherstellen, dass Schatten/Abrundungen korrekt sind */
}

.login-container h2 {
    color: #333; /* Dunklerer Text für Überschrift */
    margin-bottom: 30px; /* Abstand zur Form */
    font-size: 2.2em; /* Etwas größere Überschrift */
    font-weight: 600; /* Halbfett */
    letter-spacing: -0.5px; /* Leichter Buchstabenzwischenraum */
}

/* Formular-Elemente */
.login-container form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Größerer Abstand zwischen Feldern */
}

.login-container label {
    text-align: left;
    font-weight: 600; /* Halbfett */
    color: #444;
    margin-bottom: 5px;
    font-size: 0.95em; /* Etwas kleiner als Standard */
}

.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    padding: 15px; /* Mehr Polsterung für größere Eingabefelder */
    border: 1px solid #e0e0e0; /* Hellerer, feinerer Rand */
    border-radius: 8px; /* Abgerundet */
    font-size: 1.1em; /* Größere Schrift im Eingabefeld */
    color: #333;
    background-color: #f9f9f9; /* Leichter Hintergrund */
    box-sizing: border-box;
    transition: all 0.3s ease; /* Sanfte Übergänge für Fokus */
}

.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus {
    border-color: #4CAF50; /* Grüner Rand beim Fokus */
    outline: none; /* Standard-Outline entfernen */
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3); /* Leuchtender Schatten beim Fokus */
    background-color: #ffffff; /* Hintergrund weiß beim Fokus */
}

/* Button-Stile */
.login-container button[type="submit"] {
    background-color: #4CAF50; /* Grüner Button */
    color: white;
    padding: 15px 25px; /* Mehr Polsterung für den Button */
    border: none;
    border-radius: 8px; /* Abgerundet */
    font-size: 1.2em; /* Größere Schrift im Button */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Übergänge für Hover/Active */
    margin-top: 25px; /* Abstand zur letzten Eingabe */
    letter-spacing: 0.5px;
}

.login-container button[type="submit"]:hover {
    background-color: #45a049; /* Dunkleres Grün beim Hover */
    transform: translateY(-2px); /* Leichter "Lift"-Effekt */
}

.login-container button[type="submit"]:active {
    background-color: #3e8e41; /* Noch dunkler beim Klicken */
    transform: translateY(0); /* Zurücksetzen beim Klicken */
}

/* Fehlermeldungs-Stile */
.error-message {
    color: #dc3545; /* Rot für Fehlermeldungen */
    background-color: #fff0f0; /* Sehr heller roter Hintergrund */
    border: 1px solid #f5c6cb;
    padding: 12px;
    border-radius: 8px;
    margin-top: 25px;
    font-size: 0.95em;
    font-weight: 500;
    text-align: center;
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 600px) {
    .login-container {
        margin: 30px 15px; /* Weniger Rand an den Seiten */
        padding: 25px; /* Etwas weniger Polsterung */
    }
    .login-container h2 {
        font-size: 1.8em;
    }
    .login-container button[type="submit"] {
        font-size: 1.1em;
        padding: 12px 20px;
    }
}