/* ============================================================
   LOGIN – nur was es auf dieser Seite gibt.
   Einstieg mit Analyse-Raster, Wortmarke gross, rechts die Tafel mit
   Reitern und einer Limetten-Aktion (docs/DESIGN.md §13).
   Reiter, Felder, Buttons, Tafel: Css/vora-ui.css.
   ============================================================ */

/* Seite ohne Kopfzeile: Inhalt vertikal mittig, aber nie abgeschnitten */
.login-main {
    display: grid;
    align-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding-block: var(--vr-space-7);
}

/* .vora-intro ohne .vora-intro-facts wäre einspaltig: hier zwei Spalten */
.vora-intro.login {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    padding-bottom: 0;
}

/* Der Einstieg ist vertikal zentriert: das Raster läuft deshalb vom
   oberen Seitenrand bis zum Ende von <main> und blendet oben und unten
   weich aus, statt mit einer harten Kante mitten im Bild zu beginnen. */
.vora-intro.login::before {
    top: -100vh;
    bottom: calc(-1 * var(--vr-space-7));
    -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 70%, #000 85%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 50%, #000 70%, #000 85%, transparent 100%);
}

.login-intro {
    gap: var(--vr-space-5);
}

.login-intro .vora-wordmark {
    margin-bottom: var(--vr-space-4);
}

.login-title {
    max-width: 13ch;
}

.login-card {
    justify-self: end;
    width: 100%;
    max-width: 26rem;
    display: grid;
    gap: var(--vr-space-5);
    padding: var(--vr-space-6) var(--vr-space-5) var(--vr-space-5);
}

.auth-tab {
    flex: none;
}

/* Fehler- und Hinweiszeile.
   Das Script setzt die Farbe als Inline-Stil (rot #ff7b80, grün
   #42e88c, alte Palette). Hier auf die Tokens umgelenkt, ohne das
   Script zu ändern: Standard ist Fehler, die grüne Meldung
   („E-Mail zum Zurücksetzen wurde gesendet.“) ist Erfolg.
   Sauberer wäre eine Klasse statt style.color im Script (offen). */
.auth-error {
    justify-self: stretch;
    color: var(--vr-color-danger-text) !important;
    font-size: var(--vr-step--1);
    font-weight: var(--vr-weight-strong);
    line-height: var(--vr-leading-ui);
}

.auth-error:not(:empty) {
    padding: var(--vr-space-3) var(--vr-space-4);
    background: var(--vr-color-danger-bg);
    box-shadow: inset var(--vr-rule-mark) 0 0 var(--vr-color-danger);
    animation: vr-reveal var(--vr-dur-slow) var(--vr-ease-out);
}

.auth-error[style*="66, 232, 140"],
.auth-error[style*="42e88c" i] {
    color: var(--vr-color-success) !important;
    background: var(--vr-color-success-bg);
    box-shadow: inset var(--vr-rule-mark) 0 0 var(--vr-color-success);
}

/* Leer: die Zeile ist 0 hoch, aber das Grid setzt davor und danach je
   einen Abstand. Den zweiten nimmt der folgende Button zurück. */
.auth-error:empty + * {
    margin-top: calc(-1 * var(--vr-space-5));
}

/* „Passwort vergessen?“: leiser Textlink, gross genug zum Tippen */
.auth-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-top: calc(-1 * var(--vr-space-3));
    color: var(--vr-color-text-muted);
    font-size: var(--vr-step--1);
}

.auth-link:hover {
    color: var(--vr-color-text-strong);
}

@media (max-width: 52rem) {
    .login-main {
        align-content: start;
        padding-top: var(--vr-space-6);
    }

    .vora-intro.login {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--vr-space-6);
    }

    .login-intro {
        gap: var(--vr-space-3);
    }

    .login-title {
        max-width: 18ch;
        font-size: var(--vr-step-3);
    }

    .login-intro .vora-intro-lead {
        font-size: var(--vr-step-0);
    }

    .login-card {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 30rem) {
    .login-card {
        padding: var(--vr-space-5) var(--vr-space-4) var(--vr-space-4);
    }
}