body {
  min-height: 100dvh;
  background: var(--bg-body);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0;
}

.bg-aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Fallback */
  background-color: var(--bg-body);
  /* Radials mit steileren, fein abgestuften Alpha-Stopps */
  background-image: radial-gradient(58% 72% at 12% 22%, color-mix(in srgb, var(--primary) 80%, transparent 20%) 0%, transparent 70%), radial-gradient(52% 56% at 88% 28%, color-mix(in srgb, var(--secondary) 80%, transparent 20%) 0%, transparent 76%), radial-gradient(64% 66% at 50% 78%, color-mix(in srgb, var(--primary) 80%, transparent 20%) 0%, transparent 60%);
  background-repeat: no-repeat;
  /* kleineres Background-Sizing = steilere Gradienten → weniger Banding */
  background-size: 120% 120%, 120% 120%, 120% 120%;
  background-position: 0% 0%, 100% 0%, 50% 100%;
  animation: aurora-move 22s ease-in-out infinite alternate;
  filter: saturate(1.03) blur(0.5px); /* mini-Blur hilft auch */
}

/* superfeines Dither – im selben Selektor, kein neuer Klassenname */
.bg-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.03; /* extrem gering! */
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0 1px, transparent 1px 2px);
  background-size: 3px 100%, 100% 3px;
}

@keyframes aurora-move {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
  50% {
    background-position: 18% 12%, 82% 18%, 46% 72%;
  }
  100% {
    background-position: 10% 20%, 90% 30%, 55% 90%;
  }
}
.bg-grid {
  position: fixed;
  inset: 0;
  background: linear-gradient(to right, color-mix(in oklab, var(--bg-body) 80%, white 20%) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(to bottom, color-mix(in oklab, var(--bg-body) 80%, white 20%) 1px, transparent 1px) 0 0/24px 24px, radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--primary) 12%, transparent) 0 60%, transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--bg-body) 90%, var(--secondary) 10%), var(--bg-body));
  opacity: 0.9;
}

.bg-dots {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 1px 1px, color-mix(in oklab, white 12%, var(--bg-body) 88%) 1px, transparent 1px) 0 0/14px 14px, radial-gradient(100% 60% at 100% 0%, color-mix(in oklab, var(--secondary) 22%, transparent) 0 60%, transparent 80%) 0 0/100% 100% no-repeat, linear-gradient(180deg, var(--bg-body), color-mix(in oklab, var(--bg-body) 75%, black 25%));
  mask: linear-gradient(#000, transparent);
}

.login {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  padding: 2rem;
  border-radius: 24px;
  background: color-mix(in oklab, var(--bg-body) 35%, transparent 65%);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
  box-shadow: 0 10px 30px color-mix(in oklab, black 50%, transparent), inset 0 1px 0 color-mix(in oklab, white 40%, transparent);
}
.login h1 {
  margin: 0 0 1rem;
  font: 700 1.375rem/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  letter-spacing: 0.2px;
}
.login .field {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.login .field:last-child {
  margin-bottom: 0;
}
.login .field label {
  font-size: 0.875rem;
  opacity: 0.8;
}

/*# sourceMappingURL=login.css.map */