/* --- Login Page Styles --- */

/* Body der Login-Seite zentriert den Inhalt */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Mindestens volle Höhe des Viewports */
    background-color: #eef2f7; /* Ein etwas anderer Hintergrund */
    padding: 20px; /* Padding beibehalten, falls Container schmaler als Seite */
    box-sizing: border-box; /* Padding in die Höhe/Breite einbeziehen */
}

/* Wrapper für Flexbox-Zentrierung (optional, aber nützlich) */
.login-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Der Hauptcontainer für das Login-Formular */
.login-container {
    background-color: #ffffff;
    padding: 40px 50px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 100%; /* Nimmt verfügbare Breite im Wrapper */
    max-width: 600px; /* Maximale Breite des Containers */
    text-align: center; /* Zentriert den Titel h2 */
    border: 1px solid #ddd;
}

.login-container h2 {
    margin-bottom: 30px;
    color: #333;
    font-weight: 600; /* Etwas fetter */
}

/* Styling für die Formular-Felder */
.login-form .field {
    margin-bottom: 20px;
    text-align: left; /* Labels und Inputs linksbündig */
}

/* Labels über den Feldern */
.login-form label {
    display: block; /* Eigene Zeile */
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

/* Generelles Input-Styling für die Login-Seite */
.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%; /* Volle Breite des Containers */
    padding: 12px 15px; /* Mehr Innenabstand */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box; /* Padding/Border in Breite einrechnen */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Effekt beim Fokussieren eines Feldes */
.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    border-color: #007BFF;
    outline: none; /* Standard-Outline entfernen */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); /* Leichter Glow-Effekt */
}

/* Spezifisches Styling für das "Remember Me"-Feld */
.login-form .remember-me-field {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    text-align: left;
    margin-bottom: 25px; /* Mehr Abstand zum Button */
}

.login-form .remember-me-field input[type="checkbox"] {
    margin-right: 10px;
    /* Standard Input-Styling zurücksetzen */
    width: auto;
    height: auto;
    /* Optional: Größere Checkbox */
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.login-form .remember-me-field label {
    margin-bottom: 0; /* Kein Abstand nach unten */
    font-weight: normal; /* Normales Gewicht */
    display: inline-block; /* Neben der Checkbox bleiben */
    color: #555;
    cursor: pointer;
}

/* Styling für den Submit-Button */
.login-form .submit-button {
    width: 100%;
    padding: 12px 20px; /* Gute Größe */
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(45deg, #007BFF, #0056b3); /* Blauer Gradient */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
    margin-top: 10px; /* Kleiner Abstand nach oben */
}

.login-form .submit-button:hover {
    background: linear-gradient(45deg, #0056b3, #004085); /* Dunklerer Gradient */
    transform: translateY(-2px); /* Leichter Hebe-Effekt */
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
}

/* Styling für Flash Messages (Fehler/Erfolg) */
.flashes {
    list-style: none;
    padding: 0;
    margin: 0 auto 20px auto; /* Zentriert, Abstand nach unten */
    width: 100%; /* Volle Breite des Containers */
    max-width: 420px; /* Maximal wie der Container */
    position: absolute; /* Oben positionieren */
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* Über anderen Elementen */
}

.flash {
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    text-align: center;
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Farben für verschiedene Flash-Nachrichten-Typen */
.flash.success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.flash.danger, .flash.error { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.flash.info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
.flash.warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }


/* Styling für Fehlermeldungen direkt unter Feldern (falls WTForms sie ausgibt) */
.login-form .errors {
    list-style: none;
    padding: 5px 0 0 0;
    margin: 0;
    font-size: 13px;
    color: #dc3545; /* Rote Farbe für Fehler */
}
.login-form .errors li {
    margin: 0;
}

/* --- Styling für den Datenschutzhinweis auf der Login-Seite --- */

.login-container .privacy-notice {
    margin-top: 30px; /* Abstand zum Formular */
    padding-top: 20px; /* Abstand zur optionalen Trennlinie */
    border-top: 1px solid #eee; /* Optionale Trennlinie oben */
    text-align: left; /* Text linksbündig */
    font-size: 13px; /* Kleinere Schriftgröße */
    color: #666; /* Etwas hellere Textfarbe */
    line-height: 1.6; /* Guter Zeilenabstand für Lesbarkeit */
}

.login-container .privacy-notice strong {
    color: #444; /* Hervorhebungen etwas dunkler */
}

.login-container .privacy-notice ul {
    list-style-position: inside; /* Punkte innerhalb des Textblocks */
    padding-left: 0; /* Standard-Padding entfernen */
    margin-top: 5px;
    margin-bottom: 10px;
}

.login-container .privacy-notice li {
    margin-bottom: 5px; /* Kleiner Abstand zwischen Listenelementen */
}

.login-container .privacy-notice p {
    margin-bottom: 10px; /* Abstand zwischen Absätzen */
}