/* Humboldt & Sauer - Betriebsleitstand
   Dunkle Werkstattflaeche, ein Akzent (Bernstein), Zahlen tragen die Seite.
   ASCII-only. Fuer 1920x1080 Beamer gebaut, faellt schmal sauber zusammen. */

:root {
  --grund:      #12151a;
  --flaeche:    #191d24;
  --flaeche-2:  #1f242c;
  --linie:      #2a313b;
  --linie-hell: #3a434f;
  --text:       #e4e8ee;
  --text-2:     #9aa5b3;
  --text-3:     #6d7987;
  --akzent:     #e39a3c;
  --akzent-satt:#f0ab52;
  --gut:        #57a773;
  --warn:       #d4703a;
  --stopp:      #c4564e;
  --r: 3px;
}

* { box-sizing: border-box; }

/* Ueberschreibt Klassenregeln wie .tor{display:flex} - sonst bleibt das Tor offen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; }

.zahl,
.zust-wert,
.kachel-zahl,
.gruppe-wert,
.lauf-log { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ------------------------------ Knoepfe ------------------------------ */

.knopf {
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--linie-hell);
  border-radius: var(--r);
  padding: 8px 14px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.knopf:hover:not(:disabled) { background: #262d37; border-color: #4a5563; }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf--haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #1a1206;
  font-weight: 600;
}
.knopf--haupt:hover:not(:disabled) { background: var(--akzent-satt); border-color: var(--akzent-satt); }
.knopf--klein { padding: 5px 11px; font-size: 12.5px; }
.knopf--aktiv { border-color: var(--akzent); color: var(--akzent-satt); }

/* ------------------------------ Anmeldung ---------------------------- */

.tor {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grund);
  z-index: 50;
}
.tor-karte {
  width: 340px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 30px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tor-marke { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.tor-marke-kurz {
  font-size: 26px; font-weight: 700; letter-spacing: .01em; color: var(--akzent);
}
.tor-marke-lang { font-size: 13px; color: var(--text-2); }
.tor-feld { display: flex; flex-direction: column; gap: 6px; }
.tor-feld span { font-size: 12.5px; color: var(--text-2); }
.tor-fehler {
  margin: 0; font-size: 13px; color: var(--stopp);
  border-left: 2px solid var(--stopp); padding-left: 9px;
}
.tor-fuss { margin: 6px 0 0; font-size: 11.5px; color: var(--text-3); }

input[type="password"], input[type="text"], input[type="date"], select {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: #10141a;
  border: 1px solid var(--linie-hell);
  border-radius: var(--r);
  padding: 8px 10px;
  width: 100%;
}
input:focus, select:focus, .knopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}
select { appearance: none; }

/* -------------------------------- Kopf ------------------------------- */

.kopf {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}
.kopf-marke { display: flex; align-items: baseline; gap: 12px; }
.kopf-marke-kurz { font-size: 19px; font-weight: 700; color: var(--akzent); }
.kopf-marke-lang { font-size: 13.5px; color: var(--text-2); }
.kopf-lage { display: flex; align-items: center; gap: 9px; }
.kopf-lage-text { font-size: 13.5px; color: var(--text-2); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.kopf-zeit { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.puls {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-3);
  flex: 0 0 auto;
}
.puls[data-zustand="laeuft"]    { background: var(--gut);  box-shadow: 0 0 0 3px rgba(87,167,115,.16); }
.puls[data-zustand="ruht"]      { background: var(--akzent); }
.puls[data-zustand="stoerung"]  { background: var(--stopp); box-shadow: 0 0 0 3px rgba(196,86,78,.16); }
.puls[data-zustand="unbekannt"] { background: var(--text-3); }

/* ----------------------------- Meldungen ----------------------------- */

.meldungen { display: flex; flex-direction: column; }
.meldung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 28px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--linie);
  background: #221a10;
  color: #f0d4ab;
}
.meldung--fehler { background: #241413; color: #f3c3bf; }
.meldung--gut    { background: #14201a; color: #bfe0cb; }
.meldung-art { font-weight: 600; flex: 0 0 auto; }
.meldung-text { flex: 1 1 auto; }
.meldung-zu {
  background: none; border: 0; color: inherit; opacity: .6;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}
.meldung-zu:hover { opacity: 1; }

/* ------------------------- 1. Zustandsleiste ------------------------- */

.zustand {
  display: grid;
  grid-template-columns: 1.15fr 1.35fr 1fr 1fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}
.zust-block {
  padding: 16px 24px 15px;
  border-right: 1px solid var(--linie);
  min-width: 0;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.zust-block:last-child { border-right: 0; }
.zust-marke {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: .015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zust-wert {
  font-size: 31px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zust-wert--text { font-size: 24px; }
.zust-wert .einheit { font-size: 16px; font-weight: 500; color: var(--text-2); margin-left: 5px; }
.gruppe-wert .einheit { font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 4px; }
.zust-zusatz {
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 18px;
}

/* -------------------------------- Raster ----------------------------- */

.raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 0;
  align-items: start;
}
.spalte-haupt { padding: 22px 28px 40px; min-width: 0; }
.spalte-seite {
  padding: 22px 24px 40px;
  border-left: 1px solid var(--linie);
  background: #161a20;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-height: calc(100vh - 175px);
}

.abschnitt-kopf {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 9px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--linie);
}
.abschnitt-kopf h2 { font-size: 15px; letter-spacing: .005em; }
.abschnitt-hinweis {
  font-size: 12.5px; color: var(--text-3); margin-left: auto; text-align: right;
}

/* ----------------------- 2. Kennzahlen-Kacheln ----------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.kachel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  border-left: 3px solid var(--akzent);
  padding: 15px 17px 16px;
  min-height: 186px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kachel--offen { border-left-color: var(--linie-hell); background: #171a20; }
.kachel--fehlt { border-left-color: var(--linie-hell); background: #171a20; }

.kachel-kopf { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; min-height: 36px; }
.kachel-id {
  font-size: 12px; font-weight: 700; color: var(--akzent);
  flex: 0 0 auto; letter-spacing: .02em;
}
.kachel--offen .kachel-id, .kachel--fehlt .kachel-id { color: var(--text-3); }
.kachel-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  line-height: 1.3; min-width: 0;
}
.kachel-wert { margin: 0 0 12px; min-height: 52px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.kachel-zahl {
  font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
}
.kachel-einheit { font-size: 16px; font-weight: 500; color: var(--text-2); }
.kachel-offen-text {
  font-size: 15px; font-weight: 600; color: var(--text-2);
  border-left: 2px solid var(--warn); padding-left: 10px; line-height: 1.3;
}
.kachel-text {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
}
.kachel-grund {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.45;
}
.kachel-grund b { color: var(--warn); font-weight: 600; }

/* ------------------------- Tabellengruppen --------------------------- */

.tabellen-detail { margin-top: 32px; }
.gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 10px;
}
.gruppe {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gruppe-name {
  font-size: 12px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gruppe-wert { font-size: 19px; font-weight: 600; }

/* ---------------------------- 3. Steuerung --------------------------- */

.tafel { display: flex; flex-direction: column; }
.tafel-hinweis {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #f0d4ab;
  border-left: 2px solid var(--warn);
  padding-left: 10px;
  line-height: 1.45;
}

.formular { display: flex; flex-direction: column; gap: 12px; }
.feld { display: flex; flex-direction: column; gap: 5px; }
.feld > span { font-size: 12px; color: var(--text-3); }
.feld--eng { margin-top: 12px; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.lauf-anzeige {
  margin-top: 14px;
  border-top: 1px solid var(--linie);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lauf-zeile { display: flex; align-items: center; gap: 10px; }
.lauf-id { font-size: 12.5px; color: var(--text-3); }
.marke {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 2px;
  background: var(--flaeche-2); color: var(--text-2);
  border: 1px solid var(--linie-hell);
  margin-left: auto;
}
.marke[data-status="laeuft"]  { color: var(--akzent-satt); border-color: var(--akzent); }
.marke[data-status="fertig"]  { color: var(--gut); border-color: #35563f; }
.marke[data-status="fehler"]  { color: var(--stopp); border-color: #5e3330; }

.balken { height: 5px; background: #10141a; border-radius: 3px; overflow: hidden; }
.balken-fuellung {
  height: 100%; width: 0;
  background: var(--akzent);
  transition: width .35s ease;
}
.lauf-phase { margin: 0; font-size: 12.5px; color: var(--text-2); min-height: 18px; }
.lauf-log {
  margin: 0;
  max-height: 132px;
  overflow-y: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-3);
  background: #10141a;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.stoer-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stoer-knopf {
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--linie-hell);
  border-left: 2px solid var(--stopp);
  border-radius: var(--r);
  padding: 9px 11px;
  cursor: pointer;
  line-height: 1.3;
  transition: background .12s ease;
}
.stoer-knopf:hover:not(:disabled) { background: #2b2124; }
.stoer-knopf:disabled { opacity: .5; cursor: default; }
.stoer-knopf small { display: block; color: var(--text-3); font-size: 11px; margin-top: 2px; }

.schalter-zeile { display: flex; align-items: center; gap: 12px; }
.schalter-lage { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.schalter-zeile .knopf { margin-left: auto; min-width: 92px; }

/* ---------------------------- 4. Werkzeuge --------------------------- */

.werkzeuge { display: flex; flex-direction: column; gap: 18px; }
.werkzeug-titel {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  margin-bottom: 7px;
}
.werkzeug-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.werkzeug-liste li a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 8px 10px;
  border-radius: var(--r);
  border: 1px solid transparent;
}
.werkzeug-liste li a:hover { background: var(--flaeche-2); border-color: var(--linie-hell); }
.werkzeug-name { font-size: 13.5px; font-weight: 500; color: var(--text); }
.werkzeug-zweck { display: block; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.werkzeug-leer { font-size: 12.5px; color: var(--text-3); padding: 4px 0; }

/* ------------------------------ Schmaler ----------------------------- */

@media (max-width: 1600px) {
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zustand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zust-block { border-bottom: 1px solid var(--linie); }
}
@media (max-width: 1180px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .spalte-seite {
    border-left: 0;
    border-top: 1px solid var(--linie);
    min-height: 0;
  }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zustand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zustand > .zust-block:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .zust-wert { font-size: 26px; }
}
@media (max-width: 720px) {
  .kopf { flex-wrap: wrap; gap: 12px 18px; padding: 12px 16px; }
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .zustand { grid-template-columns: minmax(0, 1fr); }
  .zust-block { min-height: 0; padding: 12px 16px; border-right: 0; }
  .spalte-haupt, .spalte-seite { padding: 18px 16px 32px; }
  .meldung { padding: 9px 16px; }
  .kachel { min-height: 0; }
  .kachel-wert { min-height: 0; margin: 8px 0 10px; }
}