/* Nur das Gerüst der Anmeldeseite — Formen und Tokens kommen aus `style.css`. */

.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--abstand-5);
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(241,32,74,.16), transparent 60%),
    var(--farbe-grund);
}

.login-karte {
  width: 100%;
  max-width: 420px;
  padding: var(--abstand-6);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}

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

.hero-logo {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  font-weight: 800; font-size: 20px;
  color: #fff;
  background: var(--farbe-akzent);
  border-radius: var(--radius-klein);
}

.login-marke-text { display: flex; align-items: center; gap: var(--abstand-2); font-weight: 700; font-size: var(--groesse-gross); }

.login-titel { margin-bottom: var(--abstand-2); }
.login-hinweis { margin-bottom: var(--abstand-5); color: var(--farbe-text-leise); font-size: var(--groesse); }

.login-karte .knopf { width: 100%; margin-top: var(--abstand-2); }
.login-fuss { margin-top: var(--abstand-5); font-size: var(--groesse-klein); color: var(--farbe-text-still); text-align: center; }