/* HKM Maschinenterminal — Tablet in der Halle, Knöpfe für Arbeitshandschuhe (RV-5).
 *
 * Farben AUSSCHLIESSLICH als Variable aus /ui/tokens.css (HKM-CI: #1275bb / #004e70 /
 * #0d1418 / Poppins). Grün/Gelb/Rot stehen nur für Zustand, Blau nur für Handlung.
 *
 * Maßgabe: Ein Tablet quer in der Halle, bedient mit Handschuhen, oft schräg von der Seite
 * und bei Hallenlicht. Deshalb: Zielflächen ab 64 px (nicht 44), Schrift ab 16 px, harte
 * Kontraste, keine Hover-abhängige Information, kein Scrollen innerhalb einer Karte.
 * Hochkant funktioniert es auch — die Karten stapeln dann einspaltig.
 */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--schrift, "Poppins", system-ui, sans-serif);
  background: var(--nacht, #0d1418);
  color: var(--text, #16232c);
  font-size: 16px;
}

.versteckt { display: none !important; }

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

body > header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--hk-dunkelblau, #004e70);
  color: #fff;
  position: sticky; top: 0; z-index: 10;
  box-shadow: var(--schatten-2);
}
body > header .logo-bild { height: 30px; display: block; }
body > header .titel { font-size: 18px; font-weight: 700; letter-spacing: .01em; }
body > header .netz { margin-left: auto; font-size: 20px; line-height: 1; }
body > header .netz.online { color: var(--gruen, #2e9e5b); }
body > header .netz.offline { color: var(--rot, #d9534f); }
body > header .queue {
  font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--gelb-flaeche, #fbf1d9); color: var(--gelb-text, #96690a);
}
body > header button.klein {
  font: inherit; font-size: 15px; font-weight: 600;
  min-height: 44px; padding: 8px 14px; border-radius: var(--radius, 10px);
  border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff;
  cursor: pointer;
}

#home-schwebt { display: none; }

main { padding: 16px; max-width: 1600px; margin: 0 auto; }

h1 {
  font-size: 26px; font-weight: 700; letter-spacing: var(--titel-spationierung, -0.015em);
  color: var(--text, #16232c); margin: 4px 0 12px;
}
.satz { color: var(--text-gedimmt, #64737e); font-size: 16px; line-height: 1.5; margin: 0 0 16px; }

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

#ansicht-login { max-width: 420px; margin: 24px auto; }
.kuerzel-eingabe {
  width: 100%; font: inherit; font-size: 22px; font-weight: 600; text-align: center;
  min-height: 64px; padding: 12px; margin-bottom: 12px;
  border: 2px solid var(--rand-stark, #c9d5e0); border-radius: var(--radius, 10px);
  background: var(--flaeche, #fff); color: var(--text, #16232c);
  text-transform: uppercase;
}
.pin-anzeige {
  font-size: 34px; letter-spacing: .3em; text-align: center; color: var(--text, #16232c);
  min-height: 52px; margin-bottom: 12px;
}

/* Ziffernblock: 3 Spalten, jede Taste mindestens 72 px hoch. */
.ziffern { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ziffern button {
  font: inherit; font-size: 26px; font-weight: 700;
  min-height: 72px; border-radius: var(--radius, 10px);
  border: 1px solid var(--rand-stark, #c9d5e0);
  background: var(--flaeche, #fff); color: var(--text, #16232c);
  cursor: pointer;
}
.ziffern button:active { background: var(--flaeche-hell, #eff5fb); }

/* ---------- Maschinenauswahl ---------- */

.maschinen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.maschinenkachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; font: inherit; cursor: pointer;
  min-height: 132px; padding: 16px;
  border: 1px solid var(--rand, #e2e9f0); border-radius: var(--radius-gross, 16px);
  background: var(--flaeche, #fff); color: var(--text, #16232c);
  box-shadow: var(--karten-schatten);
}
.maschinenkachel:active { background: var(--flaeche-hell, #eff5fb); }
.mk-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--hk-hellgrau, #d0d0d0); }
.maschinenkachel[data-zustand="laeuft"] .mk-punkt { background: var(--gruen, #2e9e5b); }
.maschinenkachel[data-zustand="geplant"] .mk-punkt { background: var(--hk-blau, #1275bb); }
.maschinenkachel[data-zustand="rueckstand"] .mk-punkt { background: var(--gelb, #d99a00); }
.maschinenkachel[data-zustand="steht"] .mk-punkt { background: var(--rot, #d9534f); }
.mk-name { font-size: 22px; font-weight: 700; }
.mk-sub { font-size: 13px; color: var(--text-gedimmt, #64737e); }
.mk-zahl { font-size: 15px; font-weight: 600; color: var(--akzent-nr, #004e70); margin-top: auto; }
.mk-warn {
  font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--gelb-flaeche, #fbf1d9); color: var(--gelb-text, #96690a);
}

/* ---------- Der Bildschirm einer Maschine ---------- */

.maschinenkopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.maschinen-sub { color: var(--text-gedimmt, #64737e); font-size: 15px; }

.gaenge { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }

.gang {
  border: 1px solid var(--rand, #e2e9f0); border-radius: var(--radius-gross, 16px);
  background: var(--flaeche, #fff);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--karten-schatten);
  border-left: 6px solid var(--hk-hellgrau, #d0d0d0);
}
.gang[data-zustand="laeuft"] { border-left-color: var(--gruen, #2e9e5b); }
.gang[data-zustand="geplant"] { border-left-color: var(--hk-blau, #1275bb); }
.gang[data-zustand="rueckstand"] { border-left-color: var(--gelb, #d99a00); }
.gang[data-zustand="steht"] { border-left-color: var(--rot, #d9534f); }

.gang-kopf { display: flex; flex-direction: column; gap: 6px; }
.gang-titel { display: flex; flex-direction: column; }
.gang-teil { font-size: 21px; font-weight: 700; line-height: 1.2; }
.gang-op { font-size: 17px; font-weight: 600; color: var(--akzent-nr, #004e70); }
.gang-marken { display: flex; flex-wrap: wrap; gap: 6px; }
.marke {
  font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--flaeche-hell, #eff5fb); color: var(--akzent-nr, #004e70);
}
.marke.palette { background: var(--badge-bg, #e2eff9); color: var(--badge-text, #004e70); }
.marke.laeuft { background: var(--gruen-flaeche, #e3f4ea); color: var(--gruen-text, #237a45); }

.gang-zeilen { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.gang-zeile { color: var(--text-gedimmt, #64737e); }
.gang-zeile.stueck { font-size: 18px; font-weight: 700; color: var(--text, #16232c); }

/* Die einmaligen Einzelschritte (0253). Offen = gelb, weil es ein Zustand ist. */
.teilschritte {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: var(--radius, 10px);
  background: var(--gelb-flaeche, #fbf1d9);
}
.teilschritte.fertig { background: var(--gruen-flaeche, #e3f4ea); }
.teil-satz { font-size: 14px; font-weight: 600; color: var(--gelb-text, #96690a); }
.teilschritte.fertig .teil-satz { color: var(--gruen-text, #237a45); }

.gang-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }

/* Ein Knopf ist mindestens 64 px hoch — mit Handschuh trifft man 44 px nicht. */
button.gross {
  font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  min-height: 64px; padding: 10px 12px;
  border-radius: var(--radius, 10px); border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
button.gross small { font-size: 13px; font-weight: 600; opacity: .85; }
button.gross:active { filter: brightness(.93); }
button.gross.blau { background: var(--hk-blau, #1275bb); color: #fff; }
button.gross.gruen { background: var(--gruen, #2e9e5b); color: #fff; }
button.gross.rot { background: var(--rot, #d9534f); color: #fff; }
button.gross.grau {
  background: var(--flaeche-hell, #eff5fb); color: var(--text, #16232c);
  border-color: var(--rand-stark, #c9d5e0);
}
/* Rüsten ist kein Zustand und keine Handlung am Teil — es ist die Vorbereitung. Eigener
   Ton (Gelb der Vorbereitung), damit es nicht mit den Stückzahl-Knöpfen verschwimmt. */
button.gross.ruesten { background: var(--gelb, #d99a00); color: #fff; }
button.gross.erledigt {
  background: var(--flaeche, #fff); color: var(--gruen-text, #237a45);
  border-color: var(--gruen, #2e9e5b);
}

/* ---------- Stückzahl-Eingabe ---------- */

#ansicht-menge { max-width: 460px; margin: 0 auto; }
.menge-anzeige {
  font-size: 52px; font-weight: 700; text-align: center; color: var(--text, #16232c);
  min-height: 74px; margin-bottom: 12px;
}
.menge-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

/* ---------- Meldung ---------- */

#toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(140%);
  max-width: min(92vw, 620px); padding: 14px 20px; border-radius: var(--radius, 10px);
  font-size: 16px; font-weight: 600; line-height: 1.4;
  background: var(--hk-nacht, #0d1418); color: #fff;
  box-shadow: var(--schatten-3); transition: transform var(--schnell, 140ms); z-index: 50;
}
#toast.sichtbar { transform: translateX(-50%) translateY(0); }
#toast.gut { background: var(--gruen, #2e9e5b); }
#toast.warn { background: var(--gelb, #d99a00); }
#toast.fehler { background: var(--rot, #d9534f); }

/* Hochkant oder kleines Tablet: eine Spalte, sonst bleibt alles gleich groß. */
@media (max-width: 720px) {
  .gaenge, .maschinen { grid-template-columns: 1fr; }
  main { padding: 12px; }
}