/* Login-Schirm der internen Portale (shared/login/). Kopie, NICHT hier editieren.
   Braucht brand/tokens.css. Aufbau (die Klassen sind der Vertrag):
     .center > form.login > img, h1, label, input, p.error, button
   Selbsttragend: die Regeln unter .login stechen die Grundstile der einzelnen Portale
   (button {}, input {}, .error {}) aus, damit der Schirm ueberall gleich aussieht. */
.center { min-height: 80vh; display: grid; place-items: center; padding: 24px 16px; }

.login { width: min(340px, 100%); display: grid; gap: 10px; margin: 0; padding: 16px; background: #fff; border: 1px solid var(--neutral-100); border-radius: 12px; }
.login img { justify-self: start; }
/* Portalname in Grossbuchstaben wie in der Kopfleiste (ADMIN, SALES, TODO) */
.login h1 { font-family: var(--font-headline); font-weight: 800; font-size: 26px; color: var(--navy-900); margin: 4px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.login label { font-size: 13px; color: var(--neutral-600); }
.login input { font: inherit; width: 100%; padding: 7px 10px; border: 1px solid var(--neutral-200); border-radius: 8px; background: #fff; color: inherit; }
.login button { font: inherit; font-weight: 600; cursor: pointer; padding: 7px 10px; border: 1px solid var(--navy-800); border-radius: 8px; background: var(--navy-800); color: #fff; }
.login button[disabled] { opacity: .6; cursor: default; }
.login .error { margin: 0; padding: 8px 12px; border-radius: 8px; color: #9B1C1C; background: #FDECEC; }
.login :focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }