:root {
  --violet: #7c3aed;
  --violet-soft: #f5f3ff;
  --ink: #18181b;
  --mute: #71717a;
  --line: #e4e4e7;
  --bg: #fafafa;
  --card: #ffffff;
  --red: #dc2626;
  --amber: #d97706;
  --green: #059669;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(24, 24, 27, .05), 0 8px 24px -12px rgba(24, 24, 27, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 32px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
header strong { font-size: 16px; letter-spacing: -.01em; }
header nav { display: flex; gap: 22px; flex-wrap: wrap; }
header nav a { color: var(--mute); text-decoration: none; font-size: 14px; }
header nav a:hover { color: var(--violet); }

main { max-width: 1240px; margin: 0 auto; padding: 36px 32px 80px; }

h1 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 24px; }
h2 { font-size: 19px; letter-spacing: -.01em; margin: 40px 0 14px; font-weight: 600; }
h2:first-child { margin-top: 0; }
h3 { font-size: 15px; margin: 32px 0 10px; font-weight: 600; }

a { color: var(--violet); }

.quiet { color: var(--mute); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.alarmtext { color: var(--red); font-weight: 600; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); color: var(--mute); font-size: 13px;
}
.kpi .n { display: block; font-size: 30px; font-weight: 600; color: var(--ink);
          letter-spacing: -.03em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.kpi.alarm { border-color: #fecaca; background: #fef2f2; }
.kpi.alarm .n { color: var(--red); }

table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
th, td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-size: 12px; font-weight: 600; color: var(--mute); text-transform: uppercase;
     letter-spacing: .04em; background: #fcfcfd; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--violet-soft); }

.b { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px;
     border-radius: 5px; letter-spacing: .02em; }
.b-kev { background: #fee2e2; color: #991b1b; }
.b-hi  { background: #ffedd5; color: #9a3412; }
.b-md  { background: #fef3c7; color: #92400e; }
.b-lo  { background: #f4f4f5; color: var(--mute); }

.st { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 5px;
      background: #f4f4f5; color: var(--mute); }
.st-neu { background: #ede9fe; color: #5b21b6; font-weight: 600; }
.st-gemeldet { background: #dbeafe; color: #1e40af; }
.st-quittiert { background: #fef3c7; color: #92400e; }
.st-akzeptiert { background: #f4f4f5; color: var(--mute); }
.st-behoben, .st-aktiv { background: #d1fae5; color: #065f46; }

.c { font-size: 12px; }
.c-ok { color: var(--green); }
.c-wa { color: var(--amber); }

.facts { display: grid; grid-template-columns: 180px 1fr; gap: 0; margin: 20px 0;
         background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
         overflow: hidden; box-shadow: var(--shadow); }
.facts dt { padding: 10px 16px; color: var(--mute); font-size: 13px; background: #fcfcfd;
            border-bottom: 1px solid var(--line); }
.facts dd { padding: 10px 16px; margin: 0; border-bottom: 1px solid var(--line); }

pre.cmd {
  background: #18181b; color: #e4e4e7; padding: 20px 22px; border-radius: var(--radius);
  overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.7; margin: 0 0 24px;
}

form.status, form.inline { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  display: grid; gap: 16px; max-width: 620px; margin-top: 16px; }
form.inline { grid-template-columns: 1fr auto; align-items: end; }

label { display: grid; gap: 6px; font-size: 13px; color: var(--mute); }
input, select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--ink); width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: var(--violet); }

button {
  font: inherit; font-weight: 500; padding: 9px 18px; border: 0; border-radius: 7px;
  background: var(--violet); color: #fff; cursor: pointer;
}
button:hover { background: #6d28d9; }
button.small { padding: 5px 11px; font-size: 13px; background: #f4f4f5; color: var(--ink);
               border: 1px solid var(--line); }
button.small:hover { background: #e4e4e7; }

.filters { display: flex; gap: 18px; margin: 0 0 14px; font-size: 14px; }

.err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
       padding: 12px 16px; border-radius: var(--radius); margin: 0 0 20px; }
.hint { background: var(--violet-soft); border: 1px solid #ddd6fe; color: #5b21b6;
        padding: 12px 16px; border-radius: var(--radius); }
.empty { color: var(--mute); background: var(--card); border: 1px dashed var(--line);
         border-radius: var(--radius); padding: 34px; text-align: center; }

main.login { max-width: 380px; margin: 14vh auto; padding: 0 24px; }
main.login form { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); display: grid; gap: 18px; }

@media (max-width: 760px) {
  header, main { padding-left: 18px; padding-right: 18px; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; background: var(--card); border-bottom: 0; }
  table { display: block; overflow-x: auto; }
  form.inline { grid-template-columns: 1fr; }
}