/* Schriften: IBM Plex (SIL Open Font License, siehe fonts/LIZENZ-IBM-Plex-OFL.txt), selbst gehostet */
@font-face{font-family:"Plex";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plex";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plex";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plex";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Cond";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Cond";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2")}
:root{--bg:#F2F5FA;--card:#fff;--ink:#0F172A;--muted:#64748B;--blue:#2F55D4;--blue-d:#2347B8;--line:#E3E8F0;--field:#fff;--field-line:#CBD5E1;--ok-bg:#E6ECFC;--ok-fg:#2347B8;--bad-bg:#FEE2E2;--bad-fg:#991B1B}
html[data-theme="dark"]{--bg:#0D1424;--card:#172036;--ink:#E8ECF4;--muted:#9AA7BC;--blue:#3F63E0;--blue-d:#5473E8;--line:#26324A;--field:#0F1830;--field-line:#2F3C58;--ok-bg:rgba(108,141,255,.16);--ok-fg:#B4C5FF;--bad-bg:rgba(239,68,68,.18);--bad-fg:#FCA5A5;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg)}
body.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;margin:0;background:var(--bg);color:var(--ink);font-family:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif}
.login-card{width:100%;max-width:420px;background:var(--card);border-radius:10px;padding:28px 24px 26px}
.login-logo{display:block;height:44px;width:auto;margin:0 auto 20px}
.login-logo.d{display:none}
html[data-theme="dark"] .login-logo.l{display:none}
html[data-theme="dark"] .login-logo.d{display:block}
.login-card h1{margin:0 0 8px;text-align:center;font-size:26px;line-height:1.2;font-weight:600;color:var(--ink)}
.login-sub{margin:0 auto 20px;max-width:320px;text-align:center;font-size:15.5px;line-height:1.5;color:var(--muted)}
.login-card .notice,.login-card .error{margin:0 0 14px;font-size:15px;line-height:1.45;border-radius:12px;padding:12px 14px;border:0}
.login-card .notice{background:var(--ok-bg);color:var(--ok-fg)}
.login-card .error{background:var(--bad-bg);color:var(--bad-fg)}
.field{position:relative;margin-bottom:12px}
.field svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none}
.login-card .field input{width:100%;height:52px;margin:0;padding:0 16px 0 50px;font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:12px;outline:none}
.login-card .field input::placeholder{color:var(--muted)}
.login-card .field input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,85,212,.2)}
.login-card .login-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin:18px 0 0;font:inherit;font-size:16.5px;font-weight:600;color:#fff;border:0;border-radius:10px;cursor:pointer;background:var(--blue)}
.login-btn svg{width:20px;height:20px}
.login-btn:hover{background:var(--blue-d)}
.login-btn:focus-visible{outline:3px solid rgba(47,85,212,.4);outline-offset:2px}
.login-foot{margin:22px 0 0;text-align:center;font-size:14.5px;line-height:1.6;color:var(--muted)}
.login-foot a{color:var(--blue);text-decoration:none;font-weight:500}
html[data-theme="dark"] .login-foot a{color:#8FA9FF}
@media(max-width:420px){.login-card{padding:24px 18px 22px}.login-card h1{font-size:24px}}

/* Design "Schachttafel": im hellen Modus dunkler Grund wie die Kopfleiste, weiße Karte darauf */
html[data-theme="light"]{--bg:#0E1A2E}
html[data-theme="light"] .login-foot{color:#AEB9CC}
html[data-theme="light"] .login-foot a{color:#FFB400}
.login-card h1{font-family:"Plex Cond","Plex",system-ui,sans-serif;font-weight:700;font-size:28px}

/* ---------- Login: Aurora (weiche, langsam driftende Farbflächen), Karte mit Leuchten ----------
   Die Bewegung läuft über --hg-t (theme-init.js) an derselben Stelle weiter wie auf den übrigen Seiten. */
body.login::before{content:"";position:fixed;left:-30%;top:-15%;width:160%;height:130%;z-index:0;pointer-events:none;will-change:transform;
    background:radial-gradient(34% 40% at 22% 24%,rgba(63,99,224,.55),transparent 70%),radial-gradient(30% 38% at 80% 58%,rgba(110,90,230,.38),transparent 70%),radial-gradient(28% 30% at 40% 95%,rgba(255,180,0,.14),transparent 70%);
    animation:lg-drift 60s ease-in-out infinite alternate;animation-delay:var(--hg-t,0s)}
@keyframes lg-drift{to{transform:translate(8%,6%) scale(1.1)}}
.login-card,.login-foot{position:relative;z-index:2}
.login-card{border-radius:20px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 80px rgba(20,40,140,.55),0 0 90px rgba(63,99,224,.28)}
.login-logo{filter:drop-shadow(0 0 14px rgba(63,99,224,.45))}
@media (prefers-reduced-motion:reduce){body.login::before{animation:none}}