/* Anmelde- und Verwaltungsseiten - gleiche Farbwelt wie der Dienstplan. */
:root{
  color-scheme:light dark;
  --bg:#eef1f4; --surface:#ffffff; --surface-2:#f6f8fa;
  --line:#ccd5dd; --line-soft:#e0e6ec;
  --ink:#131c24; --ink-2:#48596a; --ink-3:#6c7d8c;
  --accent:#0d6a8a; --accent-ink:#ffffff; --accent-soft:#dcedf4;
  --luecke-bg:#fbe0e0; --luecke-ink:#8f1d1d; --luecke-line:#eda8a8;
  --ok-bg:#dff0e2; --ok-ink:#1b5b30; --ok-line:#a4d4b1;
  --shadow:0 1px 2px rgba(19,28,36,.06), 0 4px 14px rgba(19,28,36,.05);
  --radius:10px;
  --sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cond:"Barlow Condensed","Barlow",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){ :root{
  --bg:#0f151b; --surface:#18212a; --surface-2:#1e2831;
  --line:#35454f; --line-soft:#26323c;
  --ink:#e8eff5; --ink-2:#a8bac8; --ink-3:#8496a4;
  --accent:#55b7d8; --accent-ink:#04222c; --accent-soft:#12323e;
  --luecke-bg:#4d1f1f; --luecke-ink:#f4b3b3; --luecke-line:#6d2b2b;
  --ok-bg:#14361f; --ok-ink:#96d3a9; --ok-line:#215134;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
}}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.5;
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
body.weit{display:block; align-items:stretch}

.karte{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  width:100%; max-width:420px; padding:28px;
}
.karte.breit{max-width:920px; margin:0 auto}

h1{font-family:var(--cond); font-weight:700; font-size:26px; letter-spacing:.2px;
   margin:0 0 2px}
.sub{color:var(--ink-3); font-size:14px; margin:0 0 22px}

label{display:block; font-size:13px; font-weight:600; color:var(--ink-2);
      margin:14px 0 5px; letter-spacing:.2px}
input[type=text],input[type=password]{
  width:100%; padding:10px 12px; font:inherit; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; outline:none;
}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

.btn{
  display:inline-block; margin-top:20px; width:100%;
  padding:11px 16px; font:inherit; font-weight:600;
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:8px; cursor:pointer;
}
.btn:hover{filter:brightness(1.07)}
.btn.klein{width:auto; margin:0; padding:7px 12px; font-size:14px}
.btn.stumm{background:transparent; color:var(--ink-2); border-color:var(--line)}

.hinweis{font-size:13px; color:var(--ink-3); margin-top:18px}
.fehler{
  background:var(--luecke-bg); color:var(--luecke-ink);
  border:1px solid var(--luecke-line); border-radius:8px;
  padding:10px 12px; font-size:14px; margin-bottom:4px;
}
.melde{
  background:var(--ok-bg); color:var(--ok-ink);
  border:1px solid var(--ok-line); border-radius:8px;
  padding:10px 12px; font-size:14px; margin-bottom:16px;
  font-family:var(--mono); word-break:break-all;
}

table{width:100%; border-collapse:collapse; margin-top:18px; font-size:14px}
th{font-family:var(--cond); font-size:13px; text-transform:uppercase;
   letter-spacing:.6px; color:var(--ink-3); text-align:left;
   padding:8px 10px; border-bottom:1px solid var(--line)}
td{padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tr:last-child td{border-bottom:none}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px;
     font-weight:600; background:var(--accent-soft); color:var(--accent)}
.grau{color:var(--ink-3)}
.zeile{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.kopf{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
a{color:var(--accent)}
form.inline{display:inline}

.melde .pw{font-weight:700;letter-spacing:.5px}