/* ══════════════════════════════════════════════════════════════
   LOGIN.CSS – Mitgliederbereich LSF Wesel-Rheinhausen
   ══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --_ink-h: 213; --_ink-s: 40%; --_ink-l: 12%;
  --_sky-h: 214; --_sky-s: 68%; --_sky-l: 41%;

  --ink:    hsl(var(--_ink-h) var(--_ink-s) var(--_ink-l));
  --base:   hsl(40 18% 96%);
  --white:  hsl(0 0% 100%);
  --border: hsl(var(--_ink-h) var(--_ink-s) var(--_ink-l) / .10);
  --muted:  hsl(205 17% 61%);
  --mid:    hsl(205 14% 36%);
  --sky:    hsl(var(--_sky-h) var(--_sky-s) var(--_sky-l));

  --on-ink: hsl(40 18% 96%);
  --page-bg: var(--ink);
  --card-bg: var(--white);
  --input-bg: var(--base);
  --input-border: var(--border);
  --placeholder: hsl(205 18% 68%);
  --primary-bg: var(--ink);
  --primary-bg-hover: #1a2f45;
  --primary-fg: var(--on-ink);
  --hint-bg: #f0f6ff;
  --hint-fg: var(--sky);
  --error-bg: #fff2f2;
  --error-border: rgba(184, 36, 36, .12);
  --error-fg: #a12a2a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: hsl(40 18% 93%);
    --base: hsl(213 28% 12%);
    --white: hsl(213 28% 16%);
    --border: hsl(213 28% 82% / .24);
    --muted: hsl(205 17% 68%);
    --mid: hsl(205 16% 76%);
    --sky: hsl(var(--_sky-h) var(--_sky-s) 66%);
    --on-ink: hsl(213 28% 10%);
    --page-bg: hsl(213 40% 10%);
    --card-bg: hsl(213 28% 17%);
    --input-bg: hsl(213 26% 12%);
    --input-border: hsl(213 24% 74% / .24);
    --placeholder: hsl(205 15% 58%);
    --primary-bg: hsl(214 68% 58%);
    --primary-bg-hover: hsl(214 68% 64%);
    --primary-fg: hsl(213 28% 10%);
    --hint-bg: hsl(214 42% 18%);
    --hint-fg: hsl(214 68% 74%);
    --error-bg: color-mix(in srgb, #7f1d1d 24%, var(--card-bg));
    --error-border: rgba(248, 113, 113, .24);
    --error-fg: #fca5a5;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: hsl(40 18% 93%);
  --base: hsl(213 28% 12%);
  --white: hsl(213 28% 16%);
  --border: hsl(213 28% 82% / .24);
  --muted: hsl(205 17% 68%);
  --mid: hsl(205 16% 76%);
  --sky: hsl(var(--_sky-h) var(--_sky-s) 66%);
  --on-ink: hsl(213 28% 10%);
  --page-bg: hsl(213 40% 10%);
  --card-bg: hsl(213 28% 17%);
  --input-bg: hsl(213 26% 12%);
  --input-border: hsl(213 24% 74% / .24);
  --placeholder: hsl(205 15% 58%);
  --primary-bg: hsl(214 68% 58%);
  --primary-bg-hover: hsl(214 68% 64%);
  --primary-fg: hsl(213 28% 10%);
  --hint-bg: hsl(214 42% 18%);
  --hint-fg: hsl(214 68% 74%);
  --error-bg: color-mix(in srgb, #7f1d1d 24%, var(--card-bg));
  --error-border: rgba(248, 113, 113, .24);
  --error-fg: #fca5a5;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--page-bg);
  min-height: 100vh;
}

.login-root {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(ellipse 80% 60% at 30% 100%, rgba(22,100,180,.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(21,122,91,.12) 0%, transparent 70%),
    var(--page-bg);
}

.login-card {
  width: 100%; max-width: 380px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  padding: 40px 36px 32px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-card {
    box-shadow:
      0 28px 90px rgba(0,0,0,.48),
      0 0 0 1px rgba(255,255,255,.04),
      0 18px 60px rgba(37,99,235,.08);
  }
}

:root[data-theme="dark"] .login-card {
  box-shadow:
    0 28px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.04),
    0 18px 60px rgba(37,99,235,.08);
}

.login-logo {
  width: 44px; height: 44px; margin: 0 auto 18px;
  color: var(--ink); opacity: .6;
}
.login-logo svg { width: 100%; height: 100%; }

.login-brand {
  text-align: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}

.login-title {
  text-align: center;
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: 8px;
}

.login-sub {
  text-align: center;
  font-size: .8rem; color: var(--mid); line-height: 1.5;
  margin-bottom: 28px;
}

.login-field { margin-bottom: 14px; }

.login-label {
  display: block;
  font-size: .75rem; font-weight: 700; color: var(--mid);
  margin-bottom: 5px; letter-spacing: .02em;
}

.login-input {
  width: 100%; height: 42px;
  padding: 0 13px;
  border: 1.5px solid var(--input-border); border-radius: 8px;
  font-size: .9rem; font-family: inherit; color: var(--ink);
  background: var(--input-bg);
  transition: border-color 140ms, box-shadow 140ms;
}
.login-input::placeholder { color: var(--placeholder); }
.login-input:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(22,100,180,.12);
  background: var(--card-bg);
}

.login-btn {
  width: 100%; height: 44px; margin-top: 6px;
  background: var(--primary-bg); color: var(--primary-fg);
  border: none; border-radius: 8px;
  font-size: .9rem; font-weight: 700; font-family: inherit;
  cursor: pointer; letter-spacing: -.01em;
  transition: background 140ms, opacity 140ms;
}
.login-btn:hover { background: var(--primary-bg-hover); }
.login-btn:active { opacity: .85; }

.login-demo-hint {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 18px; padding: 10px 12px;
  background: var(--hint-bg); border-radius: 7px;
  font-size: .75rem; color: var(--hint-fg); line-height: 1.45;
}
.login-demo-hint svg {
  width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round;
}

.login-demo-users {
  list-style: none;
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
}

.login-demo-user-form {
  margin: 0;
}

.login-demo-user {
  display: grid;
  width: 100%;
  gap: .12rem;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--sky) 24%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--card-bg) 78%, var(--input-bg));
  color: var(--hint-fg);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: background 140ms, border-color 140ms, transform 140ms;
}

.login-demo-user:hover,
.login-demo-user:focus-visible {
  background: color-mix(in srgb, var(--card-bg) 82%, var(--sky) 18%);
  border-color: color-mix(in srgb, var(--sky) 58%, var(--border));
  outline: none;
  transform: translateY(-1px);
}

.login-demo-user__name {
  font-weight: 800;
}

.login-demo-user__meta {
  color: var(--mid);
  font-size: .7rem;
}

.login-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 0;
  font-size: .88rem; font-weight: 600; color: var(--mid);
}
.login-spin {
  width: 22px; height: 22px;
  animation: login-spin .8s linear infinite;
  color: var(--sky);
}
@keyframes login-spin { to { transform: rotate(360deg); } }

.login-back {
  margin-top: 22px; text-align: center;
}
.login-back a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; color: var(--muted); text-decoration: none;
  transition: color 120ms;
}
.login-back a:hover { color: var(--ink); }
.login-back a svg {
  width: 12px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}


.login-error {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-fg);
  font-size: .76rem;
  line-height: 1.45;
}