/* Login-Seite (Redesign Praxis, S1-Muster) — extern statt <style>-Block, weil
   die CSP style-src 'self' OHNE 'unsafe-inline' faehrt (#222). Bewusst ohne
   Theme-Boot: Login ist hell (Mockup S1); Tokens hier lokal, da die Seite vor
   der Anmeldung keine App-Bundles laedt. */
:root {
  color-scheme: light;
  --canvas: #F5F2EC;
  --surface: #FCFAF6;
  --surface-2: #FFFFFF;
  --line: #E4DED2;
  --ink: #22251F;
  --ink-3: #776D5B;
  --green: #3C5D4B;
  --green-700: #2E4A3B;
  --gold: #C9A96E;
  --red: #A8443A;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Newsreader", Georgia, serif;
  --ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: var(--canvas); font-family: var(--ui); color: var(--ink); }
.login { width: min(400px, calc(100vw - 32px)); border: 1px solid var(--line);
  background: var(--surface); border-radius: 18px; padding: 40px 38px; text-align: center;
  box-shadow: 0 10px 30px -18px rgba(34, 37, 31, .25); }
.login-logo { font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: .06em;
  background: var(--ink); color: var(--canvas); width: 52px; height: 52px;
  display: inline-grid; place-items: center; border-radius: 14px; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-top: 22px; }
h1 { margin: 6px 0 4px; font-family: var(--serif); font-size: 28px; font-weight: 500; }
p { margin: 0 0 22px; color: var(--ink-3); font-size: 14px; line-height: 1.45; }
label { display: block; text-align: left; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; }
input { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); padding: 0 15px; font: inherit; font-size: 15px; color: var(--ink);
  transition: border-color .12s ease-out, background .12s ease-out, box-shadow .12s ease-out; }
input:focus { outline: none; border-color: var(--green); background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, .28); }
button { width: 100%; height: 48px; margin-top: 18px; border: 1px solid var(--green);
  border-radius: 12px; background: var(--green); color: var(--canvas); font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .12s ease-out, border-color .12s ease-out; }
button:hover { background: var(--green-700); border-color: var(--green-700); }
button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--gold); }
button:disabled { opacity: .65; cursor: wait; }
.status { min-height: 20px; margin-top: 12px; font-size: 13px; color: var(--red); }
.login-hint { margin-top: 18px; font-size: 12px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }