/* ===========================================================================
   Anmeldeseite
   =========================================================================== */

.auth {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--space-5) var(--space-4);
}

.auth__inner {
  width: 100%;
  max-width: var(--width-form);
}

.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  text-align: center;
}

.auth__logo {
  width: 72px;
  height: auto;
}

.auth__wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xl);
  line-height: 1;
}

/* Schritte werden ein- und ausgeblendet, nicht neu geladen — die Karte
   behält dadurch ihre Position und der Fokus bleibt planbar. */
.step[hidden] { display: none; }

.step__head {
  margin-bottom: var(--space-6);
  text-align: center;
}

.step__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.step__lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.step__lead strong {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.auth__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.auth__foot {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Einblenden beim Schrittwechsel. Kurz und dezent — es soll den Wechsel
   nachvollziehbar machen, nicht auffallen. */
@media (prefers-reduced-motion: no-preference) {
  .step:not([hidden]) {
    animation: step-in var(--duration-normal) var(--ease) both;
  }
  @keyframes step-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}