:root { --bg: #07060f; --karte: #120f24; --rand: #2a2350; --text: #ece9ff; --leise: #9a93c4; --cyan: #00f0ff; --magenta: #ff3fbf; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 30% 10%, #1b1040 0, var(--bg) 60%); color: var(--text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { width: min(380px, calc(100% - 32px)); }
.logo { font: 800 30px/1 "Bahnschrift", system-ui, sans-serif; letter-spacing: .04em; color: var(--cyan); text-shadow: 0 0 18px #00f0ff88; text-align: center; margin-bottom: 22px; }
.logo span { color: var(--magenta); text-shadow: 0 0 18px #ff3fbf88; }
.logo small { display: block; font-size: 13px; letter-spacing: .5em; color: var(--leise); text-shadow: none; margin-top: 8px; }
form { background: var(--karte); border: 1px solid var(--rand); border-radius: 16px; padding: 22px; display: grid; gap: 14px; box-shadow: 0 10px 40px #0008; }
label { display: grid; gap: 6px; font-size: 14px; color: var(--leise); }
input { font: inherit; color: var(--text); background: #0b0918; border: 1px solid var(--rand); border-radius: 10px; padding: 12px; }
input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.merken { display: flex; align-items: center; gap: 10px; }
.merken input { width: 20px; height: 20px; }
button { font: 700 16px system-ui, sans-serif; padding: 13px; border: 0; border-radius: 10px; background: linear-gradient(90deg, var(--cyan), var(--magenta)); color: #07060f; cursor: pointer; }
.fehler { color: #ff6b8a; margin: 0; min-height: 1.2em; font-size: 14px; }