/* ══════════════════════════════════════════════════════════════
   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%);
}

*, *::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(--ink);
  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(--ink);
}

.login-card {
  width: 100%; max-width: 380px;
  background: var(--white); 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);
}

.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(--border); border-radius: 8px;
  font-size: .9rem; font-family: inherit; color: var(--ink);
  background: var(--base);
  transition: border-color 140ms, box-shadow 140ms;
}
.login-input::placeholder { color: var(--muted); }
.login-input:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(22,100,180,.12);
  background: var(--white);
}

.login-btn {
  width: 100%; height: 44px; margin-top: 6px;
  background: var(--ink); color: var(--on-ink);
  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: #1a2f45; }
.login-btn:active { opacity: .85; }

.login-demo-hint {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 18px; padding: 10px 12px;
  background: #f0f6ff; border-radius: 7px;
  font-size: .75rem; color: var(--sky); 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-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: #fff2f2;
  border: 1px solid rgba(184, 36, 36, .12);
  color: #a12a2a;
  font-size: .76rem;
  line-height: 1.45;
}