/* ═══════════════════════════════════════════════════════════════════════
   Auth-Seiten (Login, Passwort-Zurücksetzen) — gemeinsames Premium-Design.
   Nur Layout/Optik/Bewegung. Keine Auth-Logik hier — die Formulare senden
   weiterhin an dieselben Endpunkte, s. inline <script> je Seite.
   Nutzt ausschliesslich Tokens aus tokens.css, keine Rohwerte für Farbe/
   Abstand/Radius (Ausnahme: der Kartenradius ist bewusst grösser als
   --r-lg, s. Kommentar bei .login).
   ═══════════════════════════════════════════════════════════════════════ */

body {
  /* column: unter der Karte steht noch die Impressum/Datenschutz-Zeile */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4);
  min-height: 100dvh;
  overflow-y: auto; overflow-x: hidden;
  position: relative;
  padding:
    max(var(--s5), env(safe-area-inset-top))
    max(var(--s5), env(safe-area-inset-right))
    max(var(--s5), env(safe-area-inset-bottom))
    max(var(--s5), env(safe-area-inset-left));
  background:
    linear-gradient(180deg, rgba(92, 141, 46, .16), transparent 45%),
    radial-gradient(900px 520px at 4% 112%, rgba(148, 163, 184, .05), transparent 60%),
    var(--bg0);
}

/* Der grosse grüne Schimmer oben — eigene Ebene statt Teil des body-
   Hintergrunds, mit fester Pixelgrösse statt prozentualer/vw-Breite (sonst
   wird sie auf breiten/hochauflösenden Schirmen riesig). Bewusst STATISCH,
   kein Pulsieren/Bewegen mehr — auf Wunsch entfernt. */
body::after {
  content: '';
  position: fixed;
  top: -10%; left: 50%;
  width: 1900px; height: 820px;
  margin-left: -950px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(1600px 820px at 50% 0%, rgba(92, 141, 46, .42), transparent 68%);
}

/* Dezentes Koordinaten-/Tracking-Raster als Hintergrund-Textur — bewusst
   KEIN GPS-Pin-Icon, kein Kartenmotiv: nur ein leises Punktraster, das an
   Vermessung/Tracking erinnert, ohne von der Karte abzulenken. Eigene
   Ebene statt Teil des body-Hintergrunds, damit sie sich per Maske zu den
   Rändern hin ausblenden lässt, ohne die Grundfarbe mit zu maskieren. */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(148, 163, 184, .5) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 38%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 65% 60% at 50% 38%, #000 0%, transparent 72%);
  opacity: .16;
}

.login {
  position: relative; z-index: 1;
  width: 100%; max-width: 408px;
  padding: var(--s8) var(--s7);
  display: flex; flex-direction: column; gap: var(--s5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 44%),
    var(--bg1);
  border: 1px solid var(--border);
  /* Etwas grosszügiger als --r-lg (16px) — auf einer eigenständigen,
     fullscreen komponierten Seite darf die Karte selbst das ruhigste,
     "weichste" Element sein; im übrigen Interface bleibt --r-lg Standard. */
  border-radius: 22px;
  box-shadow: var(--e3), inset 0 1px 0 rgba(255, 255, 255, .045);
  animation: authIn 420ms cubic-bezier(.2, .8, .2, 1) both;
}

/* ── Eintritt: dezent gestaffelt, rein transform/opacity ─────────────── */
@keyframes authIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes authRise { from { opacity: 0; transform: translateY(8px); } }
.login__brand { animation: authRise 420ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: 60ms; }
.login__head  { animation: authRise 420ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: 110ms; }
.step.is-active .field       { animation: authRise 420ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: 150ms; }
.step.is-active .field + .field { animation-delay: 190ms; }
.step.is-active .login__err.is-visible { animation: authRise 260ms cubic-bezier(.2, .8, .2, 1) both; }
.step.is-active .btn--primary { animation: authRise 420ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: 230ms; }

@media (prefers-reduced-motion: reduce) {
  .login, .login__brand, .login__head, .field, .login__err, .btn--primary {
    animation: none !important;
  }
}

/* ── Marke: kompakte Zeile statt zentriertem Turm — die grosse Aussage
   übernimmt die Überschrift darunter, die Marke bleibt ruhige Signatur. ── */
.login__brand {
  display: flex; align-items: center; gap: var(--s3);
}
.login__brand svg, .login__brand img { flex: none; border-radius: 10px; }
.login__wordmark {
  font-size: var(--fs-md); font-weight: 800; letter-spacing: -.2px;
  color: var(--text-dim);
}
.login__wordmark span { color: var(--accent); }
.login__wordmark small {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
  margin-left: 3px; letter-spacing: .3px;
}

/* ── Kopf je Schritt: eigene, grosse Überschrift + ruhiger Subtext ───── */
.login__head { display: flex; flex-direction: column; gap: 6px; }
.login__head h1 {
  font-size: clamp(24px, 3.6vw, var(--fs-2xl));
  font-weight: 700; letter-spacing: -.4px; line-height: 1.15;
  color: var(--text);
}
.login__head p {
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5;
}

/* ── Formfelder: grosszügiger, ruhiger Fokusring ──────────────────────── */
.login .field { gap: 7px; }
.login .field > label {
  font-size: var(--fs-xs); font-weight: 700; text-transform: none;
  letter-spacing: 0; color: var(--text-dim);
}
.login .input,
.login .field input {
  min-height: 52px;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-size: var(--fs-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.login .field input:hover:not(:focus) { border-color: var(--border-strong); }
.login .field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.login .field input:disabled { opacity: .55; cursor: not-allowed; }

/* Passwortfeld mit Sichtbarkeits-Umschalter */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { padding-right: 48px; }
.pw-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.pw-toggle:hover { color: var(--text-dim); background: var(--bg3); }
.pw-toggle svg { pointer-events: none; }

#code {
  text-align: center; letter-spacing: .35em; font-size: var(--fs-lg); font-weight: 700;
}

/* ── Primärknopf: fühlbare, sparsame Mikro-Interaktion ────────────────── */
.login .btn--primary {
  min-height: 52px; font-size: var(--fs-md);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.login .btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--e2); }
.login .btn--primary:active:not(:disabled) { transform: translateY(0); }
.login .btn--primary .spinner {
  width: 16px; height: 16px; border-width: 2.5px;
  border-top-color: var(--accent-ink);
}
@media (prefers-reduced-motion: reduce) {
  .login .btn--primary .spinner { animation: none; }
}

/* ── Fehler: ruhig, mit Symbol, direkt über der Handlung — kein Alert,
   kein Toast. Das Symbol liegt als generierter Inhalt vor dem Text, damit
   `el.textContent = msg` im JS weiterhin unverändert funktioniert. ────── */
.login__err {
  display: none; align-items: flex-start; gap: 9px;
  background: var(--err-dim);
  border: 1px solid rgba(248, 113, 113, .3);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  color: var(--err);
  font-size: var(--fs-sm); line-height: 1.4;
}
.login__err.is-visible { display: flex; }
.login__err::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L2 20h20L12 3z'/%3E%3Cpath d='M12 10v4M12 17.5v.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.login__ok {
  background: var(--ok-dim); border: 1px solid var(--ok); border-radius: var(--r-md);
  padding: var(--s4); color: var(--text); font-size: var(--fs-sm); text-align: center;
}
.pw-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

.login__note {
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; text-align: center;
}
.login__link {
  background: none; border: none; padding: 4px;
  color: var(--accent); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast);
}
.login__link:hover:not(:disabled) { color: var(--accent-strong); text-decoration: underline; }
.login__link:disabled { color: var(--text-muted); cursor: default; }
.login__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }

/* Impressum/Datenschutz — Pflichtangaben, auch ohne Anmeldung erreichbar */
.auth-legal {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.auth-legal a {
  color: var(--text-dim); text-decoration: none;
  padding: 4px; border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.auth-legal a:hover { color: var(--accent); text-decoration: underline; }

.step { display: none; flex-direction: column; gap: var(--s4); }
.step.is-active { display: flex; }

/* ── Mobil: dieselbe Ruhe, aber die Bühne tritt zurück — die Karte soll
   auf kleinen Schirmen tragen, nicht der Hintergrund. ───────────────── */
@media (max-width: 640px) {
  body {
    background:
      linear-gradient(180deg, rgba(92, 141, 46, .14), transparent 40%),
      var(--bg0);
  }
  body::after { background: radial-gradient(1000px 560px at 50% 0%, rgba(92, 141, 46, .36), transparent 70%); }
  body::before { opacity: .09; background-size: 24px 24px; }
  .login { padding: var(--s6) var(--s5); border-radius: var(--r-lg); gap: var(--s4); }
  .login__head h1 { font-size: 22px; }
}

@media (max-width: 380px) {
  .login { max-width: 100%; }
}