:root { --bg:#f4f3ef; --card:#fff; --text:#1b1b19; --muted:#6b6a65; --border:#e2dfd7; --blue:#1d5fa3; --blue-bg:#e6effa;
  --green:#1b7a57; --green-bg:#e2f3eb; --amber:#8a5a00; --amber-bg:#fcf1d8; --red:#a52c2c; --red-bg:#fbe9e9; --leiste:#1b1b19; }
@media (prefers-color-scheme: dark) { :root { --bg:#141412; --card:#1e1e1b; --text:#ecebe6; --muted:#a3a19a; --border:#34332e;
  --blue:#82b5ea; --blue-bg:#1a2a3b; --green:#6fd0a8; --green-bg:#16302a; --amber:#f0c060; --amber-bg:#372d13; --red:#f09393;
  --red-bg:#3a1d1d; --leiste:#0c0c0b; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--blue); }
.leiste { background:var(--leiste); color:#fff; display:flex; align-items:center; gap:6px 18px; flex-wrap:wrap; padding:8px 16px; }
.leiste .marke { color:#fff; text-decoration:none; font-weight:700; white-space:nowrap; }
.leiste nav { display:flex; flex-wrap:wrap; gap:2px; flex:1; }
.leiste nav a { color:#d9d7d0; text-decoration:none; padding:5px 10px; border-radius:7px; font-size:14px; }
.leiste nav a:hover { background:#ffffff1a; color:#fff; }
.leiste nav a.an { background:#ffffff26; color:#fff; font-weight:600; }
.leiste form { margin:0; }
.leiste button { background:transparent; color:#d9d7d0; border-color:#ffffff40; }
main { max-width:1180px; margin:0 auto; padding:20px 16px 60px; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:17px; margin:0 0 10px; } h3 { font-size:15px; margin:14px 0 6px; }
.unter { color:var(--muted); font-size:13.5px; margin:0 0 16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:14px; overflow-x:auto; }
.raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; margin-bottom:14px; }
.raster .card { margin:0; }
.kachel .gross { font-size:26px; font-weight:700; line-height:1.2; }
.kachel a.mehr { font-size:13px; }
.klein, .leise { font-size:12.5px; color:var(--muted); }
table { border-collapse:collapse; width:100%; font-size:13.5px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12.5px; white-space:nowrap; }
tr:last-child td { border-bottom:0; }
.b { display:inline-block; font-size:11.5px; font-weight:650; padding:1px 9px; border-radius:999px; white-space:nowrap; }
.ok { background:var(--green-bg); color:var(--green); } .warn { background:var(--amber-bg); color:var(--amber); }
.bad { background:var(--red-bg); color:var(--red); } .neutral { background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.alarm { display:flex; gap:10px; align-items:baseline; padding:8px 12px; border-radius:9px; margin-bottom:6px; }
.alarm.rot { background:var(--red-bg); color:var(--red); } .alarm.gelb { background:var(--amber-bg); color:var(--amber); }
.alarm b { white-space:nowrap; } .alarm a { color:inherit; margin-left:auto; white-space:nowrap; }
.m { padding:10px 14px; border-radius:10px; margin-bottom:14px; }
.m.gut { background:var(--green-bg); color:var(--green); } .m.schlecht { background:var(--red-bg); color:var(--red); }
form { margin:0; }
label { display:block; margin:6px 0; }
input[type=text], input[type=password], input[type=number], input[type=file], select, textarea {
  font:inherit; padding:7px 9px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text);
  width:100%; max-width:440px; display:block; margin-top:3px; }
input[type=number] { max-width:120px; }
textarea { min-height:70px; max-width:640px; }
input[type=radio], input[type=checkbox] { width:auto; margin:0 6px 0 0; }
button { font:inherit; font-size:14px; padding:7px 14px; border-radius:8px; border:1px solid var(--border); background:var(--card);
  color:var(--text); cursor:pointer; }
button.haupt { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
button.gefahr { color:var(--red); } button.klein { padding:4px 10px; font-size:13px; }
.zeile { display:flex; gap:8px 12px; flex-wrap:wrap; align-items:center; }
.auswahl { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:2px 14px; margin:4px 0 10px 24px; }
.auswahl label { margin:2px 0; font-size:13.5px; }
.felder { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:4px 18px; }
details summary { cursor:pointer; color:var(--blue); font-size:14px; margin:6px 0; }
details.alt > summary { display:inline-block; color:var(--text); padding:7px 14px; border:1px solid var(--border); border-radius:8px; background:var(--card); }
.vorschau { border:1px solid var(--border); border-radius:12px; padding:14px 18px; max-width:680px; background:var(--card); }
.vorschau .text { font-size:15px; line-height:1.6; }
.vorschau img, .vorschau video { display:block; max-width:100%; max-height:340px; border-radius:10px; margin:8px 0; border:1px solid var(--border); }
.werte { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:6px 16px; }
.werte div { border-bottom:1px dashed var(--border); padding:4px 0; display:flex; justify-content:space-between; gap:8px; font-size:13.5px; }
.werte div span:first-child { color:var(--muted); }
meter { width:100%; height:10px; }
code { font-size:12.5px; background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:1px 5px; word-break:break-all; }
.anmelden { max-width:380px; margin:8vh auto 0; }
.anmelden input { max-width:none; }
.anmelden input[name=code] { letter-spacing:4px; font-size:20px; }
.raster > div > .card + .card { margin-top:14px; }
details form + form { margin-top:10px; }
@media (max-width:640px) {
  .raster { grid-template-columns:1fr; } th, td { padding:5px 4px; } .alarm { flex-wrap:wrap; } .alarm a { margin-left:0; }
  .leiste { justify-content:space-between; padding:8px 12px; }
  .leiste nav { order:3; flex:0 0 100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
  .leiste nav a { white-space:nowrap; }
}