body.login { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }

.login-top { display: flex; justify-content: flex-end; padding: 18px 20px; }

.stage {
  flex: 1; position: relative; display: grid; place-items: center;
  min-height: 560px; --size: min(360px, 78vw); --shift: calc(var(--size) * .58);
}

/* Logo-Knopf */
.logo-btn {
  position: absolute; width: var(--size); height: var(--size); border-radius: 50%;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  transition: transform .75s cubic-bezier(.6,.05,.2,1), filter .4s;
  filter: drop-shadow(0 0 28px rgba(214,164,78,.22)) drop-shadow(0 0 60px rgba(63,169,255,.10));
  outline: none;
}
.logo-btn img { width: 100%; height: 100%; display: block; border-radius: 50%; user-select: none; -webkit-user-drag: none; }
.logo-btn:hover { filter: drop-shadow(0 0 34px rgba(214,164,78,.38)) drop-shadow(0 0 70px rgba(63,169,255,.18)); }
.logo-btn:focus-visible { box-shadow: 0 0 0 3px var(--blue); }
.logo-btn::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(214,164,78,.35); animation: pulse 3.2s ease-out infinite; pointer-events: none;
}
.stage.open .logo-btn::after { animation: none; opacity: 0; }
@keyframes pulse { 0% { transform: scale(.98); opacity: .7; } 100% { transform: scale(1.12); opacity: 0; } }

.hint {
  position: absolute; top: calc(50% + var(--size) / 2 + 22px); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); transition: opacity .4s;
}
.stage.open .hint { opacity: 0; pointer-events: none; }

/* Rundes Login-Feld */
.login-disc {
  position: absolute; width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; padding: 3px;
  background: var(--ring);
  box-shadow: 0 0 40px rgba(214,164,78,.18), 0 0 80px rgba(63,169,255,.08);
  opacity: 0; transform: translateX(0) scale(.6); pointer-events: none;
  transition: transform .75s cubic-bezier(.6,.05,.2,1), opacity .5s .15s;
}
.login-disc .inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--panel-3), var(--panel) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 14%; text-align: center;
}
.stage.open .logo-btn { transform: translateX(calc(var(--shift) * -1)) scale(.92); }
.stage.open .login-disc { opacity: 1; transform: translateX(var(--shift)) scale(1); pointer-events: auto; }

.login-disc h1 {
  margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-2);
}
.login-disc .sub { margin: 0 0 16px; font-size: 12px; color: var(--muted); }
.login-disc form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.field {
  width: 100%; height: 40px; padding: 0 16px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--input-bg); outline: none; text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214,164,78,.15); }
.field.code { letter-spacing: .5em; font-size: 20px; height: 48px; padding-left: calc(16px + .5em); font-variant-numeric: tabular-nums; }
.btn-primary {
  height: 40px; border-radius: 20px; border: 0; cursor: pointer; font-weight: 600; letter-spacing: .08em;
  background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #1a1206;
  transition: filter .2s, transform .1s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: wait; }
.link-btn { background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; margin-top: 2px; }
.link-btn:hover { color: var(--text); }
.error { min-height: 18px; font-size: 12px; color: var(--neg); margin-top: 4px; }
.step[hidden] { display: none; }

.login-foot { text-align: center; padding: 18px; }

@media (max-width: 760px) {
  .stage { --size: min(300px, 80vw); min-height: 720px; }
  .stage.open .logo-btn { transform: translateY(calc(var(--size) * -.62)) scale(.55); }
  .stage.open .login-disc { transform: translateY(calc(var(--size) * .3)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-btn, .login-disc { transition: none; }
  .logo-btn::after { animation: none; }
}