/* bigal: Anmeldeseite. Dieselbe Welt wie die Galerie, nur eine Karte darauf.
   Tokens, Glas, Schriften und Knöpfe kommen aus galerie.css. */

.anmeldung {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px;
}

/* Der Leuchttisch ist an, aber leer: ein weicher Kegel hinter der Karte. */
.anmeldung::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(46% 38% at 50% 44%, color-mix(in oklab, var(--farbe) 14%, transparent), transparent 72%);
}

.anmelde-karte {
  width: min(100%, 384px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px 26px;
  background: var(--farbe-glas-dicht);
  animation: anmelde-auftritt 720ms var(--ease-aus) both;
}
@keyframes anmelde-auftritt {
  from { opacity: 0; translate: 0 12px; scale: 0.985; filter: blur(5px); }
}

.anmelde-kopf {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 4px;
}
.anmelde-marke {
  font-weight: 800;
  font-stretch: 82%;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.anmelde-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--farbe-text-2);
}

.anmelde-fehler {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-innen);
  background: rgba(255, 92, 77, 0.12);
  border: 1px solid rgba(255, 92, 77, 0.3);
  color: #ffb4ad;
  font-size: 13px;
  animation: anmelde-ruck 420ms var(--ease-feder);
}
@keyframes anmelde-ruck {
  0%, 100% { translate: 0 0; }
  25% { translate: -4px 0; }
  60% { translate: 3px 0; }
}

.anmelde-knopf {
  width: 100%;
  margin-top: 6px;
}