/* =========================================================================
   Seiten-CSS: Passwort ändern und weitere Konto-Seiten (password.ejs) sowie
   die Fehlerseite (error.ejs). Die Anmeldeseite nutzt .auth-* aus layout.css.
   Nur seitenspezifische Ergänzungen. Zuerst das Vokabular aus DESIGN.md
   verwenden (Komponenten, .stack/.cluster/.grid). Ausschließlich Tokens
   (var(--…)) verwenden, keine Hex-Werte, keine Redefinition von Basis-
   Klassen (.btn, .card, .table, .badge, .muted, .pagination …).
   Selektoren mit einer Seitenklasse präfixen, z. B. .page-auth …
   ========================================================================= */

/* --- Konto-Seiten (password.ejs): Formular-Karte + Seitenspalte (.split) -- */
.page-account .account-email {
    overflow-wrap: anywhere;
}

.page-account .account-divider {
    height: 1px;
    background: var(--color-border-subtle);
}

.page-account .account-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-account .account-rules > li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

.page-account .account-rules .icon {
    flex-shrink: 0;
    margin-top: 3px;
    /* neutral: die Regeln sind Anforderungen, keine erfüllten Prüfungen */
    color: var(--gray-400);
}

/* --- Fehlerseite (error.ejs): freundlicher Leerzustand, mittig ---------- */
.page-error .page-body {
    align-items: center;
    justify-content: center;
    padding-block: clamp(24px, 8vh, 96px);
}

.page-error .error-card {
    width: 100%;
    max-width: 560px;
    box-shadow: var(--shadow-sm);
}

.page-error .error-state {
    padding: 40px 28px 36px;
}

.page-error .error-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: var(--radius-2xl);
}

/* Ton des Icons: .empty-state-icon.tone-* ; „Fehler 404“: .eyebrow (components.css) */

.page-error .error-title {
    margin-top: 2px;
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tighter);
    line-height: 1.25;
}

.page-error .error-text {
    margin-top: 4px;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

.page-error .error-actions {
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 639.98px) {
    .page-error .error-state {
        padding: 32px 20px 28px;
    }

    .page-error .error-title {
        font-size: var(--text-2xl);
    }
}

/* --- Anmeldeseite: Hinweis auf den Anbieter (DigiRift) unter der Karte ---- */
.auth-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    margin-top: var(--space-6);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.auth-provider-logo {
    display: block;
    width: auto;
    height: 22px;
}