:root {
  color-scheme: dark;
  --grund:#0a0e13; --flaeche:#121922; --flaeche2:#172029; --rand:#243141;
  --text:#e7eef6; --leise:#8ea0b3; --leiser:#5f7285;
  --akzent:#4c9aff; --gut:#3ddc97; --warn:#ffb454; --schlecht:#ff6b6b;
  --r:10px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--grund);color:var(--text);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--akzent);text-decoration:none} a:hover{text-decoration:underline}

.huelle{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
nav{background:var(--flaeche);border-right:1px solid var(--rand);padding:20px 14px;
  display:flex;flex-direction:column;gap:4px}
.marke{font-size:20px;font-weight:650;letter-spacing:-.02em;padding:0 10px 4px}
.marke span{color:var(--akzent)}
.marke small{display:block;font-size:11px;font-weight:400;color:var(--leiser);
  letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
nav button{display:block;width:100%;text-align:left;padding:9px 11px;border:0;
  border-radius:8px;background:transparent;color:var(--leise);cursor:pointer;
  font:inherit}
nav button:hover{background:var(--flaeche2);color:var(--text)}
nav button.aktiv{background:color-mix(in oklab,var(--akzent) 18%,transparent);
  color:var(--text);font-weight:550}
nav .abstand{margin-top:auto}
.wer{padding:10px;border-top:1px solid var(--rand);margin-top:12px;font-size:12px}
.wer b{display:block;color:var(--text);font-weight:550}
.wer span{color:var(--leiser)}

main{padding:26px 30px;overflow:auto}
h2{margin:0 0 4px;font-size:21px;font-weight:600;letter-spacing:-.01em}
.unter{color:var(--leise);margin:0 0 22px;font-size:13px}

.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:12px;margin-bottom:26px}
.kachel{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);
  padding:15px}
.kachel .zahl{font-size:26px;font-weight:640;letter-spacing:-.02em}
.kachel .titel{color:var(--leise);font-size:12px;margin-top:2px}
.kachel.warnt .zahl{color:var(--warn)}

table{width:100%;border-collapse:collapse;background:var(--flaeche);
  border:1px solid var(--rand);border-radius:var(--r);overflow:hidden}
th{text-align:left;padding:10px 13px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--leiser);
  background:var(--flaeche2);border-bottom:1px solid var(--rand)}
td{padding:11px 13px;border-bottom:1px solid color-mix(in oklab,var(--rand) 55%,transparent)}
tr:last-child td{border-bottom:0}
tr:hover td{background:color-mix(in oklab,var(--flaeche2) 60%,transparent)}
.leer{padding:30px;text-align:center;color:var(--leiser)}

.marke-chip{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;
  font-weight:550;background:var(--flaeche2);color:var(--leise);
  border:1px solid var(--rand);margin-right:4px}
.marke-chip.sys{background:color-mix(in oklab,var(--akzent) 20%,transparent);
  color:#cfe3ff;border-color:transparent}
.marke-chip.gut{background:color-mix(in oklab,var(--gut) 16%,transparent);color:var(--gut);border-color:transparent}
.marke-chip.schlecht{background:color-mix(in oklab,var(--schlecht) 16%,transparent);
  color:var(--schlecht);border-color:transparent}

.leiste{display:flex;gap:9px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
input[type=text],input[type=email],select{padding:8px 11px;background:var(--flaeche);
  border:1px solid var(--rand);border-radius:8px;color:var(--text);font:inherit}
input:focus,select:focus{outline:none;border-color:var(--akzent)}
.knopf{padding:8px 14px;border:1px solid var(--rand);border-radius:8px;
  background:var(--flaeche);color:var(--text);cursor:pointer;font:inherit}
.knopf:hover{background:var(--flaeche2)}
.knopf.wichtig{background:var(--akzent);color:#06121f;border-color:transparent;font-weight:600}
.knopf.gefahr{color:var(--schlecht)}
.knopf.klein{padding:4px 9px;font-size:12px}

dialog{background:var(--flaeche);color:var(--text);border:1px solid var(--rand);
  border-radius:var(--r);padding:24px;max-width:460px;width:calc(100% - 40px)}
dialog::backdrop{background:rgba(0,0,0,.62)}
dialog h3{margin:0 0 14px;font-size:17px}
dialog label{display:block;font-size:12px;color:var(--leise);margin:12px 0 5px}
dialog input,dialog select{width:100%}
.dialogfuss{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}
.geheim{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;
  background:var(--grund);border:1px dashed var(--akzent);border-radius:8px;
  padding:12px;margin-top:8px;word-break:break-all;text-align:center}

.meldung{padding:11px 13px;border-radius:8px;margin-bottom:14px;font-size:13px;display:none}
.meldung.zeig{display:block}
.meldung.fehler{background:color-mix(in oklab,var(--schlecht) 12%,transparent);
  color:#ffc9c9;border:1px solid color-mix(in oklab,var(--schlecht) 35%,transparent)}
.meldung.gut{background:color-mix(in oklab,var(--gut) 12%,transparent);
  color:#b6f2d8;border:1px solid color-mix(in oklab,var(--gut) 32%,transparent)}
.leise{color:var(--leise)} .klein{font-size:12px}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  background:var(--flaeche2);padding:1px 5px;border-radius:4px}
@media(max-width:820px){.huelle{grid-template-columns:1fr}nav{flex-direction:row;
  overflow:auto;border-right:0;border-bottom:1px solid var(--rand)}nav .abstand,.wer{display:none}}

.rechts{text-align:right;white-space:nowrap}
.nowrap{white-space:nowrap}
.mt4{margin-top:4px}
.mt28{margin-top:28px;font-size:17px}

/* --- Aufnahme, Attribute, Postausgang ---------------------------------- */
/* Kopfzeile: Titel links, Handlung rechts. Die bestehende .leiste stellt
   Knoepfe nebeneinander; hier soll der Titel danebenstehen. */
.kopfzeile{display:flex;gap:12px;align-items:baseline;justify-content:space-between;
           flex-wrap:wrap;margin-bottom:6px}
.kopfzeile h2,.kopfzeile h3{margin:0}
.block{border:1px solid var(--rand);border-radius:10px;padding:14px 16px;margin:14px 0}
.block table{margin-top:8px}
/* Ein Attribut in der Vormerkung: Bezeichnung, Vorgabe, Haken. */
.attrzeile{border-top:1px solid var(--rand);padding-top:10px;margin-top:10px}
.attrzeile label{margin-top:0}
.haken{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--leise);
       margin-top:7px;cursor:pointer}
.haken input{width:auto;margin:0}

/* Die Wortmarke im Kopf. Vorher stand dort ein Schriftzug aus HTML — das
   liest sich gleich, ist aber nicht dieselbe Marke wie ueberall sonst. */
.marke__bild{display:block;height:24px;width:auto;margin-bottom:2px}