.is-login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--soft), #ffffff 55%, #e8f4fb);
    /* Garantiert, dass der gesamte Viewport genutzt wird */
    display: flex;
    flex-direction: column;
}

.is-login-page .app-main {
    /* Nutzt den restlichen Platz und zentriert den Inhalt perfekt horizontal & vertikal */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-page {
    width: min(100%, 28rem);
    /* Verhindert das "Kleben" am oberen Rand bei kleinen Bildschirmen */
    margin: auto 0; 
}

.login-box {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(16, 42, 67, 0.12);
    padding: 2.5rem; /* Etwas mehr Atemraum für die Box */
    
    /* Layout für die inneren Elemente */
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Gleichmäßiger Abstand zwischen allen Blöcken */
}

.login-box h1 {
    margin: 0 0 0.25rem;
    color: var(--blue);
}

.login-hint {
    margin: 0;
    color: var(--muted);
}

/* Neue, saubere Anordnung der Eingabebereiche */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Konstanter Abstand zwischen Label und Input */
    text-align: left;
}

.login-box label {
    margin: 0;
    font-weight: 700;
}

.login-box input[type="text"],
.login-box input[type="password"] {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    padding: 0.8rem 0.9rem;
    font: inherit;
    color: var(--text);
    box-sizing: border-box; /* Verhindert, dass Padding das Input-Feld sprengt */
}

.login-box input:focus {
    outline: 3px solid rgba(14, 104, 177, 0.18);
    border-color: var(--blue2);
}

.form-actions {
    margin-top: 0.5rem; /* Kleiner Extra-Abstand vor dem Button */
}

.login-box button {
    width: 100%;
    border: 0;
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--blue);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.login-box button:hover,
.login-box button:focus-visible {
    background: var(--blue2);
}

.login-error {
    margin: 0;
    border: 1px solid rgba(180, 35, 24, 0.25);
    background: rgba(180, 35, 24, 0.08);
    color: var(--danger);
    border-radius: 0.65rem;
    padding: 0.75rem 0.9rem;
}