/* Login, Passwort vergessen, Passwort setzen – Figma „30 Dashboard“ Login A (überarbeitet) */
@font-face { font-family: 'Jakarta'; src: url('/assets/jakarta.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
:root {
  --bg: #fff8f6; --glow1: rgba(247, 89, 77, .16); --glow2: rgba(247, 37, 133, .14); --ekg: rgba(247, 37, 133, .16);
  --card: #fff; --card-rand: rgba(247, 37, 133, .55); --text: #14213d; --muted: #5b6478; --line: #ede7e5;
  --feld: #fbf9f8; --feld-rand: #e9e2df; --chip-bg: #fde8ee; --chip: #e8336a; --link: #e8336a; --fehler: #c81e4b; --ok: #187a4a;
  color-scheme: light;
}
@media all {
  :root[data-theme="dark"] {
    --bg: #111a30; --glow1: rgba(247, 89, 77, .14); --glow2: rgba(247, 37, 133, .18); --ekg: rgba(247, 37, 133, .22);
    --card: #1a2440; --card-rand: rgba(247, 37, 133, .6); --text: #f4f6fb; --muted: #aab3c6; --line: #2a3554;
    --feld: #111a30; --feld-rand: #2c3758; --chip-bg: rgba(247, 37, 133, .14); --chip: #ff6fa8; --link: #ff6fa8; --fehler: #ff8aa8; --ok: #6fe0a8;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; font-family: 'Jakarta', system-ui, sans-serif; color: var(--text); background: var(--bg);
  background-image: radial-gradient(60% 50% at 15% 10%, var(--glow1), transparent 70%), radial-gradient(55% 55% at 90% 95%, var(--glow2), transparent 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 16px; min-height: 100vh; position: relative; overflow-x: hidden;
}
.ekg { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ekg path { fill: none; stroke: var(--ekg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.logo { position: relative; z-index: 1; height: 44px; width: auto; }
.logo.dunkel { display: none; }
:root[data-theme="dark"] .logo.hell { display: none; } :root[data-theme="dark"] .logo.dunkel { display: block; }
.karte { position: relative; z-index: 1; width: 100%; max-width: 445px; background: var(--card); border: 1.5px solid var(--card-rand); border-radius: 24px; padding: 40px 40px 32px; box-shadow: 0 30px 80px rgba(247, 37, 133, .12); display: flex; flex-direction: column; gap: 20px; }
.chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--chip-bg); color: var(--chip); font-size: 12px; font-weight: 700; }
.kopf { display: flex; flex-direction: column; gap: 10px; }
h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.kopf p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
form { display: flex; flex-direction: column; gap: 20px; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld .zeile { display: flex; justify-content: space-between; align-items: baseline; }
label, .zeile span { font-size: 14px; font-weight: 700; }
.zeile a { font-size: 14px; font-weight: 700; color: var(--link); text-decoration: none; }
.zeile a:hover { text-decoration: underline; }
.eingabe { position: relative; display: flex; align-items: center; }
.eingabe > svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
input { width: 100%; height: 52px; padding: 0 48px 0 46px; border-radius: 12px; border: 1px solid var(--feld-rand); background: var(--feld); color: var(--text); font: inherit; font-size: 15px; font-weight: 500; transition: border-color .2s, box-shadow .2s; }
input:focus { outline: none; border-color: #f72585; box-shadow: 0 0 0 3px rgba(247, 37, 133, .16); }
.eingabe:focus-within > svg { color: #f72585; }
.auge { position: absolute; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: pointer; }
.auge:hover { color: var(--text); }
.auge svg { width: 20px; height: 20px; }
.knopf { height: 54px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #f7594d, #f72585); color: #fff; font: inherit; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 14px 30px rgba(247, 37, 133, .28); transition: transform .15s, box-shadow .2s, opacity .2s; }
.knopf:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(247, 37, 133, .34); }
.knopf:disabled { opacity: .6; cursor: default; transform: none; }
.knopf svg { width: 18px; height: 18px; }
.meldung { margin: -6px 0 0; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--fehler); }
.meldung.ok { color: var(--ok); }
.meldung:empty { display: none; }
.ts { min-height: 65px; }
.fuss { display: flex; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }
.fuss svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.fuss a { color: var(--link); font-weight: 700; text-decoration: none; }
.unten { position: relative; z-index: 1; margin: 0; font-size: 13px; color: var(--muted); }
.unten a { color: inherit; }
[hidden] { display: none !important; }
@media (max-width: 520px) {
  body { justify-content: flex-start; padding-top: 40px; gap: 22px; }
  .karte { padding: 28px 22px 24px; border-radius: 20px; gap: 18px; }
  h1 { font-size: 26px; }
  .logo { height: 38px; }
}
.unten-link { margin: -4px 0 0; }
.zurueck { font-size: 14px; font-weight: 700; color: var(--link); text-decoration: none; }
.zurueck:hover { text-decoration: underline; }
.hinweis { margin: -8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }