:root {
  --grund: #f4f5f7;
  --flaeche: #ffffff;
  --rand: #dcdfe5;
  --text: #1b2330;
  --leise: #5f6b7c;
  --akzent: #0b5cad;
  --akzent-text: #ffffff;
  --gut: #1f8a4c;
  --schlecht: #c0362c;
  --warn-grund: #fff4d6;
  --warn-text: #6b4e00;
  --spur: #e6e9ee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12161c;
    --flaeche: #1b212a;
    --rand: #303946;
    --text: #e7ebf1;
    --leise: #9aa6b6;
    --akzent: #5aa7f2;
    --akzent-text: #0b1420;
    --gut: #4fc37f;
    --schlecht: #f0786d;
    --warn-grund: #3b3113;
    --warn-text: #f3d98a;
    --spur: #2a323e;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 15px/1.5 system-ui, "Segoe UI", sans-serif;
}
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
p { margin: .5rem 0; }
.leise { color: var(--leise); }
.fehler { color: var(--schlecht); min-height: 1.2em; margin: .4rem 0; }
.fehler:empty { display: none; }
.hinweis:empty { display: none; }
.platz { flex: 1; }

.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 1.1rem;
}

/* Bedienelemente */
input, textarea, button { font: inherit; color: inherit; }
label { display: block; font-weight: 600; margin: .8rem 0 .3rem; }
label input { display: block; width: 100%; margin-top: .3rem; font-weight: 400; }
input, textarea {
  background: var(--grund); border: 1px solid var(--rand); border-radius: 7px; padding: .55rem .65rem;
}
textarea { width: 100%; resize: vertical; font-family: ui-monospace, Consolas, monospace; }
input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
button { cursor: pointer; border-radius: 7px; border: 1px solid var(--rand); background: var(--flaeche); padding: .45rem .8rem; }
button:disabled { opacity: .5; cursor: default; }
button.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; padding: .6rem 1.1rem; }
button.schlicht { background: none; }
button.link { border: 0; padding: 0; background: none; color: var(--akzent); text-decoration: underline; }
button.gefahr { color: var(--schlecht); }
a.knopf {
  display: inline-block; text-decoration: none; color: inherit; border: 1px solid var(--rand);
  border-radius: 7px; padding: .45rem .8rem; background: var(--flaeche);
}
a.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.anmeldung .karte { width: min(360px, 100%); }
.anmeldung button { width: 100%; margin-top: 1rem; }

/* Kopf */
.kopf {
  display: flex; align-items: center; gap: .8rem; padding: .7rem 1.2rem;
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
.marke { background: var(--warn-grund); color: var(--warn-text); border-radius: 99px; padding: .1rem .6rem; font-size: .85rem; }

/* Mitte: eine Spalte mit zwei Reitern */
.mitte { max-width: 620px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.reiter { display: flex; gap: .3rem; border-bottom: 1px solid var(--rand); margin-bottom: 1rem; }
.reiter button {
  border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
  padding: .6rem 1rem; font-weight: 600; color: var(--leise);
}
.reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--akzent); }

.zustand:empty { display: none; }
.zustand .band {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem;
  background: var(--warn-grund); color: var(--warn-text); border-radius: 8px; padding: .7rem .9rem;
}

#seite-neu label { margin-top: 0; }
.ablage {
  margin-top: .6rem; border: 1px dashed var(--rand); border-radius: 7px; padding: .7rem;
  color: var(--leise); font-size: .92rem;
}
.ablage.aktiv { border-color: var(--akzent); color: var(--text); }
#einreihen { margin-top: .5rem; width: 100%; }

/* Status */
.auftrag { margin-bottom: 1rem; }
.auftrag .zeile { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.auftrag .nr { font-weight: 700; font-size: 1.1rem; }
.status { font-size: .85rem; border-radius: 99px; padding: .05rem .6rem; border: 1px solid var(--rand); white-space: nowrap; }
.status.laeuft { border-color: var(--akzent); color: var(--akzent); }
.status.fertig { border-color: var(--gut); color: var(--gut); }
.status.mangel, .status.abgebrochen { border-color: var(--schlecht); color: var(--schlecht); }

.zahlen { display: flex; gap: 1.2rem; align-items: baseline; margin-top: .9rem; flex-wrap: wrap; }
.zahlen b { font-size: 1.5rem; margin-right: .2rem; }
.zahlen .schlecht { color: var(--schlecht); }
.balken { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--spur); margin: .5rem 0; }
.balken .ok { background: var(--gut); }
.balken .fehl { background: var(--schlecht); }
.lage { margin: .6rem 0 .9rem; }

.standorte-rahmen { max-height: 320px; overflow-y: auto; border: 1px solid var(--rand); border-radius: 7px; margin-bottom: .9rem; }
table.standorte { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.standorte td { padding: .3rem .6rem; border-top: 1px solid var(--rand); }
table.standorte tr:first-child td { border-top: 0; }
table.standorte td:first-child { font-family: ui-monospace, Consolas, monospace; white-space: nowrap; width: 9rem; }
table.standorte td:last-child { color: var(--leise); }
table.standorte .p-ok td:last-child { color: var(--gut); }
table.standorte .p-fehler td:last-child { color: var(--schlecht); }
table.standorte .p-laeuft td { color: var(--text); font-weight: 600; }
.leer { color: var(--leise); padding: 2rem 1rem; text-align: center; border: 1px dashed var(--rand); border-radius: 10px; }

.knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }