/* Tafel des Leitstands: hell und dunkel, ab 700 px drei Spalten, darunter eine. */
:root { --grund:#f6f7f9; --flaeche:#fff; --text:#1d2228; --leise:#5c6670; --rand:#d9dde2; --akzent:#1565c0;
        --lebt:#2e7d32; --lauf:#1565c0; --still:#c62828; --wartet:#f9a825; --ruht:#757575; --frei:#607d8b; }
@media (prefers-color-scheme: dark) {
  :root { --grund:#14171b; --flaeche:#1d2126; --text:#e6e9ec; --leise:#9aa4ad; --rand:#323840; --akzent:#64b5f6; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--grund); color:var(--text); font:14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 16px; background:var(--flaeche); border-bottom:1px solid var(--rand); }
header h1 { font-size:18px; margin:0 8px 0 0; }
header nav { margin-left:auto; display:flex; gap:12px; align-items:center; }
a { color:var(--akzent); }
main { padding:12px 16px; max-width:1400px; margin:0 auto; }
.spalten { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
@media (max-width:700px) { .spalten { grid-template-columns:1fr; } }
.spalte h2, .post h2 { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--leise); margin:4px 0 8px; }
.karte { background:var(--flaeche); border:1px solid var(--rand); border-radius:8px; padding:8px 10px; margin:0 0 8px; overflow-wrap:anywhere; }
.karte small { color:var(--leise); display:block; margin-top:4px; }
.frage { margin:4px 0; font-style:italic; }
.abz { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11.5px; font-weight:600; color:#fff; }
.abz.lebt { background:var(--lebt); } .abz.lauf { background:var(--lauf); } .abz.still { background:var(--still); }
.abz.wartet { background:var(--wartet); color:#000; } .abz.ruht { background:var(--ruht); } .abz.frei { background:var(--frei); }
.leer { color:var(--leise); }
.post { margin-top:16px; }
.post form, .neu-form { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.post input[name=text] { flex:1; min-width:180px; }
.msg { border-left:3px solid var(--rand); padding:3px 8px; margin:4px 0; overflow-wrap:anywhere; }
.msg time { color:var(--leise); }
input, select, button { font:inherit; padding:5px 8px; border:1px solid var(--rand); border-radius:6px; background:var(--flaeche); color:var(--text); }
button { cursor:pointer; background:var(--akzent); color:#fff; border-color:var(--akzent); }
button.leise { background:transparent; color:var(--akzent); }
.anmeldung { max-width:360px; margin:12vh auto; }
.anmeldung form { display:flex; flex-direction:column; gap:10px; }
.fehler { color:var(--still); }
.verwaltung table { border-collapse:collapse; width:100%; }
.verwaltung td, .verwaltung th { border-bottom:1px solid var(--rand); padding:6px; text-align:left; vertical-align:top; }
.verwaltung h2 { font-size:16px; margin:22px 0 8px; }
.verwaltung .knoepfe { white-space:nowrap; } .verwaltung .knoepfe form { display:inline-block; margin-left:4px; }
.verwaltung label { display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--leise); }
.schluessel-form > button, details form > button { margin-top:8px; }
button.gefahr { background:transparent; color:var(--still); border-color:var(--still); }
.hinweis { background:var(--flaeche); border-left:3px solid var(--wartet); padding:6px 10px; }
.verwaltung .leise, .projekte small { color:var(--leise); }
.rechte { background:var(--flaeche); border:1px solid var(--rand); border-radius:8px; padding:8px; margin-top:8px; max-height:420px; overflow:auto; }
.rechte-kopf { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
.rechte-kopf .filter { flex:1; min-width:160px; } .rechte-kopf span { color:var(--leise); font-size:12.5px; }
.rechte th { position:sticky; top:0; background:var(--flaeche); font-weight:600; font-size:12.5px; }
.rechte td + td, .rechte th + th { text-align:center; width:12%; }
.rechte td { padding:3px 6px; } .rechte tr:hover td { background:var(--grund); }
.rechte input[type=radio] { width:16px; height:16px; cursor:pointer; }
.gesperrt { opacity:.55; }
.neu { background:var(--flaeche); border:2px solid var(--wartet); padding:10px; border-radius:8px; }
.neu code { font-size:15px; user-select:all; overflow-wrap:anywhere; }
details { margin-top:6px; } details summary { cursor:pointer; color:var(--akzent); font-size:12.5px; }
form.befehl { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; } form.befehl input[name=text] { flex:1; min-width:140px; }

/* Bauaufträge */
.bau { margin-top: 1.5rem; }
.bau .karte pre { white-space: pre-wrap; max-height: 20rem; overflow: auto; font-size: .8rem; }
.bau form.befehl { margin-bottom: .75rem; }