/* Hintergrundfarbe für den gesamten Body */
body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a; /* Sehr dunkles Grau/Schwarz */
    color: #ffffff; /* Weiß für Text */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* Container der Login-Box */
.login-container {
    background-color: #333333; /* Dunkles Grau für die Box */
    padding: 30px; /* Mehr Padding für größere Box */
    border-radius: 10px; /* Etwas mehr Abrundung */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Schatten für 3D-Effekt */
    width: 400px; /* Breite der Card */
    text-align: center; /* Zentriert den Text in der Box */
    box-sizing: border-box; /* Berücksichtigt Padding und Border in der Breite */
}

/* Überschrift für den Login-Bereich */
h2 {
    color: #e60000; /* Kräftiges Rot für die Überschrift */
    margin-bottom: 25px; /* Mehr Abstand unter der Überschrift */
    font-size: 24px; /* Größere Schriftart */
}

/* Label für Benutzername und Passwort */
label {
    color: #ffffff; /* Weiß für die Labels */
    display: block; /* Block-Element für Labels, damit sie über den Eingabefeldern erscheinen */
    text-align: left; /* Links ausgerichtet */
    margin-bottom: 5px; /* Abstand zum Eingabefeld */
    font-size: 14px; /* Kleinere Schriftgröße */
    margin: 10px 20px; /* Abstand links und rechts, um mit den Eingabefeldern übereinzustimmen */
}

/* Eingabefelder (Text und Passwort) */
input[type="text"], input[type="password"] {
    width: calc(100% - 40px); /* 100% Breite minus Padding von 20px links und rechts */
    padding: 12px; /* Größeres Padding für Eingabefelder */
    margin: 10px auto; /* Automatischer Abstand links und rechts, zentriert innerhalb der Card */
    border: 1px solid #555555; /* Grauer Rand */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    background-color: #1a1a1a; /* Dunkler Hintergrund für Eingabefelder */
    color: #ffffff; /* Weißer Text */
    font-size: 16px; /* Größere Schriftgröße */
    text-align: center; /* Text in den Eingabefeldern zentrieren */
    box-sizing: border-box; /* Berücksichtigt Padding und Border in der Breite */
}

/* Eingabefelder bei Fokus */
input[type="text"]:focus, input[type="password"]:focus {
    border-color: #e60000; /* Roter Rahmen bei Fokus */
    outline: none; /* Kein blaues Outline bei Fokus */
}

/* Login-Button */
button {
    background-color: #e60000; /* Kräftiges Rot für den Button */
    color: white; /* Weißer Text */
    padding: 12px; /* Größeres Padding für den Button */
    border: none;
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer;
    width: calc(100% - 40px); /* Gleiche Breite wie die Eingabefelder */
    font-size: 16px; /* Größere Schrift */
    margin-top: 20px; /* Abstand nach oben */
    box-sizing: border-box; /* Berücksichtigt Padding und Border in der Breite */
}

/* Hover-Effekt für den Login-Button */
button:hover {
    background-color: #b30000; /* Dunkleres Rot beim Hover */
}

/* Fehlermeldung */
#errorMessage {
    color: #e60000; /* Roter Text für Fehlermeldungen */
    font-size: 14px; /* Etwas größere Schrift für Fehlermeldungen */
    margin-top: 15px; /* Abstand oberhalb der Fehlermeldung */
}

/* Medienabfragen für kleinere Bildschirme */
@media (max-width: 500px) {
    .login-container {
        width: 90%; /* Kleinere Breite bei kleineren Bildschirmen */
        padding: 20px; /* Weniger Padding */
    }

    h2 {
        font-size: 20px; /* Kleinere Schriftgröße für die Überschrift */
    }

    button {
        font-size: 14px; /* Kleinere Schriftgröße für den Button */
    }

    input[type="text"], input[type="password"] {
        font-size: 14px; /* Kleinere Eingabefelder */
    }
}