/*
 * Anmeldung und Fehlerseiten ohne Navigation (docs/DESIGN.md Abschnitt 7): zentrierte Karte
 * (höchstens 420 px) mit Wortmarke, stärkeres warmes Hintergrundlicht.
 */

.auth {
  background:
    radial-gradient(90% 55% at 50% 100%, rgba(240, 174, 102, 0.12) 0%, rgba(240, 174, 102, 0) 70%),
    radial-gradient(130% 75% at 50% 100%, rgba(42, 33, 27, 1) 0%, rgba(42, 33, 27, 0.7) 45%, rgba(15, 15, 18, 0) 85%),
    var(--bg-canvas);
  background-attachment: fixed;
}

.auth__main {
  display: grid;
  flex: 1 0 auto;
  place-items: center;
  padding: var(--space-8) var(--page-gutter) var(--space-4);
}

.auth__card {
  gap: var(--space-6);
  width: 100%;
  max-width: 420px;
  padding: var(--space-8) var(--space-7) var(--space-7);
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(240, 174, 102, 0.08), transparent 70%),
    var(--gradient-card);
}

.auth__card::after {
  content: "";
  position: absolute;
  right: 15%;
  bottom: -1px;
  left: 15%;
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 174, 102, 0), rgba(240, 174, 102, 0.7) 50%, rgba(240, 174, 102, 0));
}

.auth__brand {
  justify-self: center;
  font-size: 1.1875rem;
}

.auth__brand .logo {
  width: 32px;
  height: 32px;
}

.auth__intro {
  display: grid;
  gap: var(--space-2);
  text-align: center;
}

.auth__card .form {
  gap: var(--space-5);
}

.auth__card .btn--block + .btn--block {
  margin-top: calc(var(--space-3) * -1);
}

@media (width < 480px) {
  .auth__card {
    padding: var(--space-7) var(--space-5) var(--space-6);
  }
}