:root{--blau:#072E41;--grau:#556F7B;--bg:#f4f6f7;--karte:#fff;--rand:#d5dde1;--text:#072E41}
@media (prefers-color-scheme:dark){:root{--bg:#0e1a21;--karte:#152730;--rand:#2a3d47;--text:#e6edf0}}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);display:grid;min-height:100vh;place-items:center}
.karte{background:var(--karte);border:1px solid var(--rand);border-radius:8px;padding:28px 32px;width:min(340px,calc(100vw - 32px));box-sizing:border-box}
h1{font-size:19px;margin:0 0 4px}.sub{color:var(--grau);font-size:13px;margin:0 0 18px}label{display:block;font-size:13px;margin:12px 0 4px}
input{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--rand);border-radius:4px;font-size:15px;background:var(--karte);color:var(--text)}
button{margin-top:18px;width:100%;padding:10px;background:var(--blau);color:#fff;border:0;border-radius:4px;font-size:15px;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid #0585AF;outline-offset:2px}
.fehler{background:#fdecee;color:#8a1020;border:1px solid #f3b8c0;padding:8px 10px;border-radius:4px;font-size:13px;margin-top:12px}