:root { --grund: #f3f6f8; --flaeche: #fff; --tinte: #1f2f3d; --leise: #5d6e7d; --linie: #dde5eb; --rot: #d40e47; --blau: #009dc8; }
@media (prefers-color-scheme: dark) { :root { --grund: #0f1820; --flaeche: #16222d; --tinte: #e6edf2; --leise: #9aabb9; --linie: #2a3a48; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--grund); color: var(--tinte); font: 16px/1.5 "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
.nur-dunkel { display: none; }
@media (prefers-color-scheme: dark) { .nur-hell { display: none; } .nur-dunkel { display: block; } }
.tor { width: min(380px, 100%); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 34px 30px 30px; text-align: center;
  box-shadow: 0 1px 2px rgb(31 47 61 / .06), 0 12px 32px rgb(31 47 61 / .1); }
.logo { width: 112px; height: 112px; margin: 0 auto 6px; }
h1 { margin: 0; font: 700 24px "Montserrat", "Segoe UI", sans-serif; letter-spacing: -.01em; }
p { margin: 4px 0 24px; color: var(--leise); font-size: 14.5px; }
form { display: grid; gap: 10px; text-align: left; }
label { font: 600 11px "Montserrat", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
input { height: 48px; border-radius: 10px; border: 1px solid var(--linie); background: var(--grund); color: inherit; padding: 0 14px; font: inherit; }
input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgb(0 157 200 / .25); }
button { height: 48px; border: 0; border-radius: 10px; background: var(--rot); color: #fff; font: 700 15px "Montserrat", sans-serif; cursor: pointer; margin-top: 6px; }
button:hover { background: #b80b3c; }
button:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
#m { color: var(--rot); font-weight: 600; font-size: 14px; }