/* Anmeldeseiten (Anmelden, Passwort aendern): nur das Besondere der Seiten. Tokens, Schriften und Basiskomponenten
   (.btn, .input, .field, .alert) stehen in design.css, das davor eingebunden wird. */
.auth { display: flex; flex-wrap: wrap; min-height: 100vh; min-height: 100dvh; }
.auth-main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; padding: 28px 56px 40px; background: var(--bg); }
.auth-center { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.auth-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; animation: fadeUp .55s var(--ease) both; }
.auth-form h1, .auth-head h1 { font-size: 30px; line-height: 1.2; }
.auth-head .muted, .auth-form > div > .muted { margin-top: 6px; }
.auth-stack { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; animation: fadeUp .55s var(--ease) both; }
.auth-stack .auth-form { animation: none; max-width: none; }
.auth-single .auth-main { flex-basis: 100%; align-items: stretch; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); box-shadow: var(--glow); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.brand-logo .ic { width: 20px; height: 20px; stroke-width: 2; }
.brand-name { font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.02em; line-height: 1.1; }
.brand-name small { display: block; font-family: 'Inter Variable', 'Inter', sans-serif; font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0; color: var(--muted); }


.auth-form .btn-primary { width: 100%; }
.no-account { margin-top: 0; }


/* Seitenteil mit Heldenbild (fest dunkel, in beiden Designs gleich) */
.hero { flex: 1 1 560px; min-width: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 56px; background: #0C1B3A; color: #E8EEF9; }
.hero-text { max-width: 460px; position: relative; z-index: 1; }
.hero-text .eyebrow { color: #A3B1CC; }
.hero h2 { font-size: 38px; line-height: 1.15; margin-top: 10px; color: #E8EEF9; }
.hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-floor { fill: #10244C; stroke: #5E9BFF; stroke-width: 3; stroke-linejoin: round; }
.hero-grid { stroke: #1F3157; stroke-width: 1; }
.hero-face { stroke: rgba(0, 0, 0, .4); stroke-width: 1; stroke-linejoin: round; }
.hero-float { animation: float 6s ease-in-out infinite; }
.hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(94, 155, 255, .12); border: 1px solid rgba(141, 184, 255, .32); color: #E8EEF9; }

/* Gestapelt (schmaler als etwa 1080 px): Bild im Fluss zwischen Text und Chips, damit nichts überdeckt wird */
@media (max-width: 1100px) {
  .hero { gap: 24px; justify-content: flex-start; }
  .hero-svg { position: relative; inset: auto; width: 100%; height: clamp(260px, 50vw, 420px); }
}
@media (max-width: 720px) {
  .auth-main { padding: 20px 20px 32px; }
  .hero { padding: 32px 20px; }
  .hero h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-form, .auth-stack, .hero-float { animation: none; }
}