/* Anmeldung und Passwort festlegen: animierter Hintergrund (static/js/login-bg.js), Karte im Glas-Stil */
:root {
  color-scheme: light;
  --bg-a: #eef6e9; --bg-b: #dcefe3; --bg-c: #f4f7ef;
  --glass: rgba(255,255,255,.72); --glass-line: rgba(255,255,255,.8);
  --text: #1a211d; --muted: #5f6a64; --field: rgba(255,255,255,.85); --line: #d3d8d4;
  --blob-1: rgba(120,200,60,.38); --blob-2: rgba(38,166,154,.28); --blob-3: rgba(255,200,87,.24);
  --green: #6cc04a; --error-bg: #fde9e7; --error: #9b2a22; --ok-bg: #e4f3dc; --ok: #2f7a1c;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg-a: #0a120d; --bg-b: #0d1c15; --bg-c: #0b1410;
  --glass: rgba(20,28,24,.62); --glass-line: rgba(255,255,255,.1);
  --text: #e7ece9; --muted: #9aa5a0; --field: rgba(10,16,13,.6); --line: #3a4640;
  --blob-1: rgba(108,192,74,.26); --blob-2: rgba(30,140,130,.22); --blob-3: rgba(190,140,40,.12);
  --error-bg: #3c1e1b; --error: #f2a8a1; --ok-bg: #243b1c; --ok: #a6e486;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--text);
  background: linear-gradient(135deg, var(--bg-a), var(--bg-b) 55%, var(--bg-c)); overflow: hidden; -webkit-font-smoothing: antialiased; }
#login-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; }
.blob { position: fixed; border-radius: 50%; filter: blur(70px); z-index: 0; will-change: transform; }
.blob.a { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: var(--blob-1); animation: drift-a 19s ease-in-out infinite alternate; }
.blob.b { width: 40vw; height: 40vw; right: -8vw; top: 12vh; background: var(--blob-2); animation: drift-b 23s ease-in-out infinite alternate; }
.blob.c { width: 34vw; height: 34vw; left: 26vw; bottom: -16vw; background: var(--blob-3); animation: drift-c 27s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(16vw, 12vh) scale(1.2); } }
@keyframes drift-b { to { transform: translate(-14vw, 18vh) scale(.85); } }
@keyframes drift-c { to { transform: translate(12vw, -16vh) scale(1.15); } }

.login-wrap { position: relative; z-index: 2; min-height: 100%; display: grid; place-items: center; padding: 16px; overflow: auto; }
.login-card { width: 372px; max-width: 100%; padding: 32px 30px 28px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 22px;
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 24px 70px rgba(10,30,18,.28); animation: enter .6s cubic-bezier(.2,.8,.3,1); }
@keyframes enter { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.logo { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #8bd65f, #4f9e33); color: #fff; display: grid; place-items: center; margin-bottom: 16px; box-shadow: 0 8px 22px rgba(108,192,74,.45); }
h1 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.muted { color: var(--muted); margin: 0 0 20px; }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.field input { width: 100%; padding: 10px 12px; font: inherit; color: inherit; background: var(--field); border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.field input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(108,192,74,.25); }
.btn { display: flex; width: 100%; justify-content: center; margin-top: 6px; padding: 11px; border: 0; border-radius: 10px; font: inherit; font-weight: 600; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #78c83c, #56a838); box-shadow: 0 6px 18px rgba(108,192,74,.4); transition: transform .08s, box-shadow .15s, filter .15s; }
.btn:hover { filter: brightness(1.06); box-shadow: 0 8px 24px rgba(108,192,74,.55); }
.btn:active { transform: translateY(1px); }
.messages { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13px; }
.messages li { padding: 9px 12px; border-radius: 9px; margin-bottom: 6px; background: var(--ok-bg); color: var(--ok); }
.messages li.error { background: var(--error-bg); color: var(--error); }
.theme-toggle { position: fixed; z-index: 3; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--text); cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(10px); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun { display: none; }
:root[data-theme=dark] .theme-toggle .sun { display: block; }
:root[data-theme=dark] .theme-toggle .moon { display: none; }
@media (prefers-reduced-motion: reduce) { .blob, .login-card { animation: none; } }