:root { --bg:#f6f6f4; --karte:#fff; --text:#1d1d1b; --grau:#6b6b68; --linie:#e3e3df; --akzent:#0b3d2e;
        --rot:#b3261e; --gelb:#b7791f; --gruen:#2e7d32; --blind:#5f6b7a; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 -apple-system, "Segoe UI", Arial, sans-serif; }
header { background:var(--akzent); color:#fff; display:flex; gap:20px; align-items:center; padding:10px 20px; flex-wrap:wrap; }
header .marke { font-weight:700; letter-spacing:.3px; margin-right:12px; }
header a { color:#dfeee8; text-decoration:none; padding:4px 2px; }
header a.aktiv, header a:hover { color:#fff; border-bottom:2px solid #fff; }
header form { margin-left:auto; } header button { background:none; border:1px solid #ffffff66; color:#fff; border-radius:4px; padding:3px 10px; cursor:pointer; }
main { padding:20px; max-width:1500px; margin:0 auto; }
h1 { font-size:20px; margin:0 0 14px; } h2 { font-size:15px; margin:22px 0 8px; }
.hinweis { background:#fff8e1; border:1px solid #f0d98c; border-radius:6px; padding:10px 14px; margin:0 0 16px; }
.hinweis.sperre { background:#eef3f8; border-color:#c5d3e2; }
.leiste { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px; color:var(--grau); }
.leiste b { color:var(--text); }
table { border-collapse:collapse; width:100%; background:var(--karte); border:1px solid var(--linie); border-radius:6px; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--linie); vertical-align:top; }
th { font-size:12px; color:var(--grau); font-weight:600; background:#fafaf8; position:sticky; top:0; }
tr:last-child td { border-bottom:0; }
.scroll { overflow-x:auto; }
.ampel { display:grid; grid-template-columns: 150px repeat(7, 1fr); gap:6px; margin-bottom:8px; }
.ampel .kopf { font-size:12px; color:var(--grau); padding:4px 6px; }
.feld { border-radius:6px; padding:10px; color:#fff; min-height:64px; text-decoration:none; display:block; }
.feld small { display:block; opacity:.9; font-size:11px; margin-top:3px; }
.feld.gruen { background:var(--gruen); } .feld.gelb { background:var(--gelb); } .feld.rot { background:var(--rot); } .feld.blind { background:var(--blind); }
.feld .zahl { font-size:20px; font-weight:700; }
.marke-b { font-weight:700; padding:10px 6px; }
.pille { display:inline-block; border-radius:10px; padding:1px 8px; font-size:12px; color:#fff; white-space:nowrap; }
.pille.alarm, .pille.rot { background:var(--rot); } .pille.vorwarnung, .pille.gelb { background:var(--gelb); } .pille.gruen { background:var(--gruen); }
.pille.blind, .pille.grau { background:var(--blind); } .pille.simulation { background:#7b6fb0; } .pille.test { background:#1976a8; } .pille.echt { background:var(--rot); }
form.filter { display:flex; gap:10px; flex-wrap:wrap; align-items:end; background:var(--karte); border:1px solid var(--linie); border-radius:6px; padding:10px 12px; margin-bottom:14px; }
form.filter label { display:flex; flex-direction:column; font-size:12px; color:var(--grau); gap:3px; }
select, input[type=text], input[type=date], input[type=password] { padding:5px 7px; border:1px solid #cfcfca; border-radius:4px; font:inherit; background:#fff; }
button, .knopf { background:var(--akzent); color:#fff; border:0; border-radius:4px; padding:6px 12px; cursor:pointer; font:inherit; text-decoration:none; display:inline-block; }
button.klein { padding:2px 8px; font-size:12px; } button.leise, .knopf.leise { background:#fff; color:var(--akzent); border:1px solid var(--akzent); }
details summary { cursor:pointer; color:var(--akzent); font-size:12px; }
.quittung { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; } .quittung input[type=text] { width:170px; font-size:12px; }
.grau { color:var(--grau); } .klein { font-size:12px; } .mono { font-family: ui-monospace, Menlo, monospace; font-size:12px; }
.zwei { display:grid; grid-template-columns: 1fr 1fr; gap:20px; } @media (max-width:1000px) { .zwei { grid-template-columns:1fr; } .ampel { grid-template-columns: 90px repeat(7, 1fr); } }
.strahl { list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--linie); }
.strahl li { position:relative; padding:4px 0 10px 14px; } .strahl li::before { content:""; position:absolute; left:-21px; top:9px; width:10px; height:10px; border-radius:50%; background:var(--akzent); }
.strahl li.offen::before { background:#fff; border:2px solid #bbb; } .strahl li.offen { color:var(--grau); }
iframe.vorschau { width:100%; height:720px; border:1px solid var(--linie); border-radius:6px; background:#fff; }
.anmelden { max-width:340px; margin:12vh auto; background:var(--karte); border:1px solid var(--linie); border-radius:8px; padding:26px; }
.anmelden label { display:block; margin:12px 0 4px; font-size:12px; color:var(--grau); } .anmelden input { width:100%; } .anmelden button { margin-top:18px; width:100%; }
pre { white-space:pre-wrap; margin:0; font:12px/1.4 ui-monospace, Menlo, monospace; }
/* Block F: Einstellungen, Reparatur */
form.einstellung { background:var(--karte); border:1px solid var(--linie); border-radius:6px; padding:12px 14px; margin-bottom:10px; }
form.einstellung fieldset { border:0; border-top:1px solid var(--linie); margin:0 0 6px; padding:10px 0; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
form.einstellung legend { font-weight:600; font-size:13px; padding-right:8px; } form.einstellung label { font-size:13px; } label.haken { white-space:nowrap; }
input[type=time] { padding:4px 6px; border:1px solid #cfcfca; border-radius:4px; font:inherit; background:#fff; }
table.schmal { width:auto; } table.vergleich tr.geaendert td { background:#fff8e1; } table.vergleich .wert { font-weight:600; white-space:pre-wrap; }
tr.unklar td { background:#fdecea; } form.freigabe { margin:10px 0 18px; }