/* Login (/login aller Marken, Anmelden auf connect.*) im Look von FocusRoom (leaderlogic-portal: .login-page, .login-card):
   Zeichen der Marke über einer zentrierten Karte, in der Karte die Begrüßung (loginRahmen in src/ui/seite.js).
   Farben nur über die Tokens der Marke bzw. des Produkts, damit hell und dunkel stimmen. Felder wie in kern.css. */

.login-seite { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse 90% 60% at 70% -10%, color-mix(in srgb, var(--akzent) 9%, transparent) 0%, transparent 60%), var(--bg); }
.login-wrap { width: min(460px, 100%); }
.login-marke { display: flex; justify-content: center; margin-bottom: 22px; font-family: var(--serif); font-size: 28px; line-height: 1.05; color: var(--text); }
.login-marke .marke-logo { height: 40px; max-width: 240px; object-position: center; }
.login-karte { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(32px, 5vw, 52px);
  display: flex; flex-direction: column; gap: 24px; box-shadow: 0 1px 2px rgba(11, 15, 26, .04), 0 18px 48px rgba(11, 15, 26, .06); }
.login-karte h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 36px); line-height: 1.15; letter-spacing: -0.01em; }
.login-zeile { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.login-karte h1 + .login-zeile { margin-top: -14px; }
/* Button in der Akzentfarbe, volle Breite */
.login-karte .knopf { width: 100%; background: var(--akzent); color: var(--akzent-text); }
.login-karte .knopf:hover { opacity: .9; }
.login-karte .hinweis { font-size: 14px; }
.login-karte .hinweis a { color: var(--text); }

@media (max-width: 640px) {
  .login-seite { place-items: start center; padding: 48px 16px 32px; }
  .login-karte { border-radius: 20px; }
}