/* Anmeldung, Passwort festlegen und „Seite nicht gefunden“ im Team-Portal (Paket 7).
 * Einbinden nach /css/style.css und /css/bausteine.css. Gilt für Seiten mit body.login-page.
 * Gemeinsam für Team und MAPP-Institut, deshalb ohne Anrede in den Texten.
 * Farben nur über die --dp-Variablen aus bausteine.css, keine eigenen dp-Klassen. */

/* Fehlertöne zu --dp-danger (bausteine.css hat dafür keine Fläche) */
body.login-page { background: var(--dp-bg); color: var(--dp-ink); --an-fehler-bg: #FBEDEB; --an-fehler-linie: #F0C8C3; --an-fehler-text: #8E2A24; }

.login-page .login-header { background: rgba(246, 245, 241, .92); }
/* Keine Großbuchstaben-Überzeile (docs/gestaltung.md) */
.login-page .portal-label { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; color: var(--dp-ink-3); }

.login-page .login-main { padding-left: 16px; padding-right: 16px; }
.login-page .login-card {
  border-radius: var(--dp-r-l); border: 1px solid var(--dp-line);
  box-shadow: 0 8px 32px rgba(27, 42, 48, .06);
}
.login-page .login-card-header h1 { font: 700 1.5rem/1.25 var(--dp-f-head); letter-spacing: -0.02em; color: var(--dp-ink); }
.login-page .login-card-header p { color: var(--dp-ink-2); line-height: 1.5; }

/* Felder: Titel in normaler Schrift, 44 px hoch, 16 px Schrift (kein Zoom am iPhone) */
.login-page .login-card label { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 600; color: var(--dp-ink); }
.login-page .login-card input {
  min-height: 44px; font-size: 1rem;
  background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-r-s); color: var(--dp-ink);
}
.login-page .login-card input::placeholder { color: var(--dp-ink-3); }
.login-page .login-card input:focus { background: var(--dp-surface); border-color: var(--dp-brand); box-shadow: none; }
.login-page .login-card input:focus-visible { outline: var(--dp-fokus); outline-offset: 2px; }
.login-page .login-card input[aria-invalid="true"] { border-color: var(--dp-danger); box-shadow: 0 0 0 1px var(--dp-danger); }

/* Meldung am Feld: Symbol plus Text, rot, mit aria-describedby am Feld verbunden */
.an-feldfehler { display: flex; align-items: flex-start; gap: 6px; margin: .4rem 0 0; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--dp-danger); }
.an-feldfehler[hidden] { display: none; }
.an-feldfehler svg { flex: none; margin-top: 2px; }
.an-hinweis { font-size: .8rem; line-height: 1.45; color: var(--dp-ink-3); margin-top: .35rem; }

/* Meldung, die beide Felder betrifft (falsches Passwort, keine Verbindung), steht direkt über dem Knopf */
.login-page .error-msg { background: var(--an-fehler-bg); border: 1px solid var(--an-fehler-linie); color: var(--an-fehler-text); line-height: 1.45; }

/* Hauptknopf: Petrol statt Blau, 48 px */
.login-page .login-card .btn-primary {
  min-height: 48px; font: 600 1rem var(--dp-f-head);
  background: var(--dp-brand); color: #fff; box-shadow: none; border-radius: var(--dp-r-s);
}
.login-page .login-card .btn-primary:hover { background: var(--dp-brand-strong); opacity: 1; }
.login-page .login-card .btn-primary:focus-visible { outline: var(--dp-fokus); outline-offset: 2px; }
.login-page .login-card .btn-primary[aria-busy="true"] { opacity: .75; cursor: progress; }
.login-page .login-card .btn-primary > svg { vertical-align: -3px; }

.login-page .login-card a:not(.dp-knopf) { color: var(--dp-brand-strong); font-weight: 600; }
.login-page .login-card a:focus-visible { outline: var(--dp-fokus); outline-offset: 2px; border-radius: 2px; }

.login-page .login-footer { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .8rem; color: var(--dp-ink-3); border-top-color: var(--dp-line-soft); }

/* Fußzeile: lesbarer Kontrast (vorher #9ca3af, 2,5 : 1), Links 44 px hoch */
.login-page .page-footer { color: var(--dp-ink-3); flex-wrap: wrap; gap: .25rem 1.5rem; }
.login-page .footer-links { flex-wrap: wrap; gap: 0 1.5rem; }
.login-page .footer-links a { color: var(--dp-ink-2); display: inline-flex; align-items: center; min-height: 44px; }
.login-page .footer-links a:hover { color: var(--dp-brand); }
.login-page .footer-links a:focus-visible { outline: var(--dp-fokus); outline-offset: 2px; }

/* Aufklapphilfe „Passwort vergessen?“ */
.an-hilfe { margin-top: 1rem; text-align: center; }
.an-hilfe-knopf {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem;
  cursor: pointer; color: var(--dp-brand-strong); font-size: .9rem; font-weight: 600; border-radius: 4px;
}
.an-hilfe-knopf:hover { text-decoration: underline; }
.an-hilfe-knopf:focus-visible { outline: var(--dp-fokus); outline-offset: 2px; }
.an-hilfe-text {
  margin-top: .4rem; text-align: left; background: var(--dp-surface-2); border: 1px solid var(--dp-line);
  border-radius: var(--dp-r-m); padding: .75rem .9rem; font-size: .875rem; line-height: 1.5; color: var(--dp-ink-2);
}
.an-partner { margin-top: .6rem; font-size: .85rem; line-height: 1.45; color: var(--dp-ink-3); }

/* Zwei Wege nebeneinander (404), am Handy untereinander */
.an-wege { display: flex; flex-direction: column; gap: .6rem; }
.an-wege .dp-knopf { height: auto; min-height: 48px; font-size: 1rem; white-space: normal; text-align: center; }

@media (max-width: 480px) {
  .login-page .login-card { padding: 1.5rem 1.25rem; }
  .login-page .page-footer { flex-direction: column; align-items: flex-start; padding: 1rem 16px; }
}
.an-mitte { text-align: center; margin-top: 1rem; }