/* ---------- Login-Seite ----------
   Eigene Datei, weil die Login-Seite ein klar abgegrenzter Feature-Bereich
   ist (siehe DESIGN.md). Nutzt ausschließlich Tokens aus base.css :root -
   kein neues Hex-Literal. Überschreibt bewusst nur Layout/Branding von
   #login-backdrop/.login-box, das restliche Formular (Labels, Inputs,
   Button) erbt unverändert die globalen Regeln aus base.css/design.css. */

.login-backdrop{
  align-items:center;
  background:
    radial-gradient(circle at 20% 15%, var(--accent-bg) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, var(--accent-bg) 0%, transparent 40%),
    var(--accent-dark);
}

.login-box{
  max-width:400px;
  padding:var(--space-5) var(--space-5) 32px;
  box-shadow:var(--shadow-md);
}

.login-box h2{
  /* Ersetzt durch .login-brand - kein doppelter Titel im Markup nötig. */
  display:none;
}

.login-brand{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-5);
}

.login-brand .mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  flex-shrink:0;
}

.login-brand-text h1{
  font-size:var(--text-24);
  font-weight:700;
  margin:0;
  letter-spacing:0.02em;
}

.login-brand-text p{
  color:var(--text-muted);
  font-size:var(--text-15);
  margin:2px 0 0;
}

#login-form{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}

.login-submit{
  width:100%;
  justify-content:center;
}

@media (max-width:420px){
  .login-box{
    padding:var(--space-4) var(--space-4) var(--space-3);
  }
}