/*
 * Login -- die einzige Seite ohne Anwendungshuelle und das Erste, was man
 * von Yamis sieht. HALLE (22.10.2026): das Tor. Das Zeichen aus dem Logo
 * steht im grossen Runenkranz, darunter die Wortmarke mit dem Glut-A, dann
 * die Karte. Licht kommt kuehl von oben und glimmt warm von unten (die
 * Buehne aus base.css); das Zeichen selbst leuchtet leicht nach.
 */
/* Keine Huelle: statt Leiste + Hauptbereich eine zentrierte Saeule. */
/* Der Runenkranz ist breiter als ein Telefon: abschneiden, nicht scrollen. */
html, body { overflow-x: clip; }
body {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh; padding: 32px 20px;
}

.login-tor { position: relative; width: 100%; max-width: 420px; text-align: center; }
.login-kranz {
  position: absolute; left: 50%; top: -150px; width: 760px; max-width: none; height: auto;
  translate: -50% 0; opacity: .2; pointer-events: none;
}
:root[data-theme="light"] .login-kranz { opacity: .45; filter: brightness(.45) saturate(1.4); }
.login-zeichen {
  position: relative; display: block; width: 150px; height: 150px; margin: 0 auto 22px;
  filter: drop-shadow(0 0 40px rgba(var(--color-ember-rgb), .25)) drop-shadow(0 0 80px rgba(var(--color-accent-rgb), .15));
}
.login-wortmarke { position: relative; font-size: 30px; letter-spacing: .42em; padding-left: .42em; margin: 0; }
.login-gruss { position: relative; margin: 18px 0 38px; color: var(--color-text-muted); font-size: 15px; }

.login-card {
  position: relative; z-index: 1; text-align: left;
  padding: 30px; border-radius: var(--radius-panel);
  background: var(--halle-tafel), var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--edge), var(--deep);
  backdrop-filter: blur(14px);
}

.login-card label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--color-text-muted); }

.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%; height: 46px; padding: 0 14px; margin-bottom: 18px;
  font: 400 15px var(--font-ui); color: var(--color-text);
  background: var(--halle-feld); border: 1px solid var(--color-border); border-radius: 11px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] .login-card input[type="text"],
:root[data-theme="light"] .login-card input[type="password"] { box-shadow: inset 0 1px 2px rgba(20, 45, 80, .06); }
.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
  outline: none; border-color: rgba(var(--color-accent-rgb), .55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 4px rgba(var(--color-accent-rgb), .1);
}

/* Geschliffene Glut wie im Logo. */
.login-card button[type="submit"] {
  width: 100%; height: 48px; margin-top: 4px; cursor: pointer;
  font: 600 15px var(--font-ui); letter-spacing: .01em; color: #1B1204;
  background: var(--glut-knopf); border: 1px solid rgba(255, 226, 160, .55); border-radius: 11px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 8px 28px -8px rgba(var(--color-ember-rgb), .55), inset 0 -2px 0 rgba(120, 60, 0, .35);
}
.login-card button[type="submit"]:hover { filter: brightness(1.06); }

.login-card label.remember-row {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px; cursor: pointer;
  font-size: 13.5px; font-weight: 400; color: var(--color-text-muted);
}
.remember-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--color-ember); cursor: pointer; }

.error-msg {
  margin-bottom: 18px; padding: 10px 12px; font-size: 13.5px; color: var(--color-danger);
  background: var(--color-danger-bg); border: 1px solid rgba(var(--color-danger-rgb), .3); border-radius: 11px;
}

.login-fuss { position: relative; margin-top: 26px; font-size: 13px; color: var(--color-text-faint); }
/* Impressum und Datenschutz (nur oeffentliche Instanz, Rechtliches_Page). */
.rechtliches-links { position: relative; margin-top: 10px; font-size: 13px; color: var(--color-text-faint); }
.rechtliches-links a { color: var(--color-text-faint); }

@media (max-width: 480px) {
  .login-card { padding: 24px 20px; }
  .login-zeichen { width: 112px; height: 112px; }
  .login-wortmarke { font-size: 24px; }
  .login-kranz { width: 560px; top: -110px; }
}