:root {
  --bg: #0A1220;
  --surface: rgba(17, 26, 40, .9);
  --line: #1F2733;
  --line-2: #263040;
  --line-3: #34405A;
  --text: #E6EAF0;
  --muted: #9AA4B2;
  --accent: #4CC2FF;
  --accent-ink: #06121A;
  --bad: #F47067;
  --bad-text: #F7A39C;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: linear-gradient(165deg, #0A1220 0%, #0B1830 50%, #0A1322 100%) fixed var(--bg); min-height: 100%; }
html, body { margin: 0; color: var(--text); }
body { min-height: 100vh; font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; display: grid; place-items: center; padding: 24px 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.bg span { position: absolute; border-radius: 50%; will-change: transform; }
.bg-a { width: 110vmax; height: 110vmax; top: -55vmax; left: -40vmax; background: radial-gradient(closest-side, rgba(30, 86, 168, .40), rgba(30, 86, 168, 0)); animation: drift-a 38s ease-in-out infinite alternate; }
.bg-b { width: 120vmax; height: 120vmax; bottom: -66vmax; right: -50vmax; background: radial-gradient(closest-side, rgba(14, 70, 130, .46), rgba(14, 70, 130, 0)); animation: drift-b 46s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(14vw, 22vh, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-12vw, -22vh, 0) scale(1.12); } }

.wrap { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; animation: rein .5s var(--ease-out) both; }
@keyframes rein { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.brand { display: flex; align-items: center; gap: 12px; justify-content: center; }
.brand { padding: 8px 0 4px; }
/* Logo: Zeichen in der Akzentfarbe, Schriftzug in Textfarbe; die Balken gleiten beim Laden versetzt herein */
.logo { display: block; height: 44px; width: auto; overflow: visible; }
.logo .zeichen { fill: var(--accent); }
.logo .wort { fill: var(--text); }
.logo .balken { animation: balken .7s var(--ease-out) both; }
.logo .balken:nth-child(2) { animation-delay: .08s; }
.logo .balken:nth-child(3) { animation-delay: .16s; }
@keyframes balken { from { opacity: 0; transform: translateX(-60px); } }

.card { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--surface); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.card.wackeln { animation: wackeln .4s var(--ease-out); }
@keyframes wackeln { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
h1 { margin: 0; font-family: "Space Grotesk", Inter, sans-serif; font-size: 28px; letter-spacing: -0.02em; }
.lead { margin: -6px 0 4px; color: var(--muted); font-size: 14px; }

.feld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #C9D1DC; }
.feld input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-3); border-radius: 12px; background: #0D1219; color: var(--text); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.feld input:hover { border-color: #4A5872; }
.feld input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76, 194, 255, .2); }
.feld input[aria-invalid="true"] { border-color: var(--bad); }
.hilfe { color: var(--muted); font-size: 12px; }
.pw { position: relative; display: block; }
.pw input { padding-right: 84px; }
.zeigen { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: background .2s, color .2s; }
.zeigen:hover { background: #1A212B; color: var(--text); }

.fehler { margin: 0; min-height: 1.5em; color: var(--bad-text); font-size: 14px; }
.btn { position: relative; min-height: 52px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; transition: transform .25s var(--ease-spring), box-shadow .25s, opacity .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(76, 194, 255, .25); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
.btn[aria-busy="true"] .btn-text::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: drehen .8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.fuss { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }

@media (max-width: 480px) { .card { padding: 22px 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }