body {
    width: 100%;
    display: flex;
    align-items: center; /* Zentriert den Inhalt vertikal */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    min-height: 100vh; /* Stellt sicher, dass der Body die volle Höhe des Viewports einnimmt */
    margin: 0; /* Entfernt Standardmargen */
    background-color: #ffffff; /* Setzt die Hintergrundfarbe */
    font-family: inter, ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, Helvetica, "Apple Color Emoji", Arial, "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 300;
}

#login-container {
    width: 100%; /* Nimmt die volle Breite des Bildschirms ein, bis zu einem Maximum */
    max-width: 350px; /* Maximale Breite für größere Geräte */
    padding: 20px; /* Gibt Innenabstand, ändern nach Bedarf */
    box-sizing: border-box; /* Beinhaltet Padding und Border in der Breite */
}


#loginForm {
    padding: 20px;
    background: whitesmoke;
    border-radius: 25px; /* Große abgerundete Ecken für das gesamte Formular */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* Leichter Schatten für einen "schwebenden" Effekt */
    width: 100%; /* Nutzt die gesamte Breite des Containers */
    max-width: 400px; /* Maximale Breite des Formulars */
    box-sizing: border-box; /* Box-Modell-Anpassung, um Padding und Border inklusive der Breite zu machen */
    font-family: inherit
}

#caps-lock-warning {
    display: none; /* Standardmäßig verstecken */
    color: #ad3400; /* Warnung in Rot anzeigen */
    margin-top: 15px; /* Abstand nach oben */
    text-align: center; /* Zentriert den Text */
    font-family: inherit;
}

#loginForm input[type="text"],
#loginForm input[type="password"] {
    width: 100%;
    padding: 10px 15px; /* Mehr Padding für eine größere Input-Box */
    margin-bottom: -2px; /* Abstand zwischen den Input-Feldern */
    border: 2px solid #59762C; /* Grünlicher Rand passend zum Beispiel */
    border-radius: 20px; /* Abgerundete Ecken für die Input-Felder */
    outline: none; /* Entfernt den Standard-Fokus-Rahmen */
    box-sizing: border-box;
    font-size: 15px; /* Größere Schriftart für bessere Lesbarkeit */
    font-family: inherit; /* Erbt die Schriftart vom Elternelement */
}

#loginForm input::placeholder {
    color: #8a8a8a; /* Farbe des Platzhalters */
}

#loginForm button {
    width: 100%;
    padding: 10px 0;
    margin-top: 12.5px;
    background-color: #59762C;
    color: white;
    border: none;
    border-radius: 20px; /* Abgerundete Ecken für den Button */
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s; /* Animation für den Hover-Effekt */
    font-family: inherit;
}

#loginForm button:hover {
    background-color: #668c2d;
}

.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Hoch genug, um über anderen Elementen zu sein */
    background-color: #f0fae7;
    width: 125px;
    height: 125px;
    border-radius: 60% 40% 30% 70%/60% 30% 60% 40%; /* Unregelmäßige Form */
}

.loading-indicator div {
    width: 8px;
    height: 8px;
    margin: 0 3px;
    background-color: #a6ba91;
    border-radius: 50%;
    opacity: 0.7;
    animation: loading-animation 1.4s infinite ease-in-out both;
}

.loading-indicator div:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-indicator div:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes loading-animation {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

#footer {
    position: fixed;
    bottom: 10px;
    width: 90%;
    text-align: center;
    z-index: 1000;
    font-family: inherit;
    font-size: 10px;
    color: #474747; /* Farbe der Schrift */
}