/* Scan-Helfer (28.09.2026, Umbau 08.10.2026: Umlagerung in drei Schritten) - nur bei APP_SCANNER.
   Handschuh-tauglich: große Flächen, eine Spalte; die Nummer steht groß. Eigene Klassen (sh-),
   weil ohnelabel.css nur mit APP_OHNELABEL geladen wird. */

/* ---------------------------------------------------------------- Schritte */
.sh-schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
}
.sh-schritt {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.4rem;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-surface-line);
  background: var(--color-bg-deep, transparent);
  color: var(--color-text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sh-schritt:disabled { cursor: default; opacity: 0.55; }
.sh-schritt-nr {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-weight: 700;
}
.sh-schritt-name { font-size: 0.8rem; }
.sh-schritt-wert {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-schritt.sh-dran { border: 2px solid var(--color-accent-bright); color: var(--color-text); }
.sh-schritt.sh-dran .sh-schritt-nr { background: var(--color-accent-bright); color: var(--color-bg); border-color: transparent; }
.sh-schritt.sh-fertig .sh-schritt-nr { background: #4ade80; color: #0b1a10; border-color: transparent; }
.sh-frage { margin: 0 0 0.6rem; font-size: 1.25rem; font-weight: 700; }

/* ---------------------------------------------------------------- Kamera */
.sh-kamera {
  position: relative;
  margin: 0 0 0.6rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--color-surface-line);
}
.sh-video {
  display: block;
  width: 100%;
  height: min(42vh, 320px);
  object-fit: cover;
}
/* Die rote Linie zeigt das Band, das gelesen wird (mittlere Hälfte). */
.sh-linie {
  position: absolute;
  left: 6%; right: 6%;
  top: 50%;
  height: 2px;
  background: #ff4d4d;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 12px rgba(255, 77, 77, 0.8);
  pointer-events: none;
}
.sh-knopf-reihe { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.sh-knopf-reihe > * { flex: 1; min-height: 56px; }
.sh-foto { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sh-datei { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.sh-meldung {
  min-height: 1.3em;
  margin: 0.3rem 0 0.6rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.sh-meldung.ok { color: #4ade80; font-weight: 600; }
.sh-meldung.warnung { color: #f5b14c; font-weight: 600; }
.sh-meldung.fehler { color: #fca5a5; }

/* ---------------------------------------------------------------- Feld */
.sh-beschriftung { display: block; margin: 0.2rem 0 0.3rem; font-weight: 600; font-size: 0.9rem; }
.sh-feld-reihe { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.sh-nummer {
  flex: 1;
  min-width: 0;
  min-height: 58px;
  padding: 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  border: 1px solid var(--color-surface-line);
  background: var(--color-bg);
  color: var(--color-text);
}
.sh-nummer:focus { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; }
.sh-abc { flex: none; min-width: 64px; min-height: 58px; }
.sh-weiter { flex: 2 !important; font-size: 1.1rem; }

/* ---------------------------------------------------------------- Menge + Ziffernfeld */
.sh-menge-reihe { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.sh-menge {
  min-width: 6rem;
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
}
.sh-menge-einheit { color: var(--color-text-muted); }
.sh-wie-eben {
  margin-left: auto;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.sh-tasten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.6rem 0 0.7rem;
}
.sh-taste {
  min-height: 62px;
  font-size: 1.7rem;
  font-family: var(--font-mono);
  border-radius: var(--radius);
  border: 1px solid var(--color-surface-line);
  background: var(--color-surface, rgba(255, 255, 255, 0.04));
  color: var(--color-text);
  touch-action: manipulation;          /* kein Doppeltipp-Zoom beim schnellen Tippen */
  -webkit-tap-highlight-color: transparent;
}
.sh-taste:active { background: var(--color-accent); color: var(--color-bg); }
.sh-taste:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.sh-taste-leise { font-size: 1.1rem; color: var(--color-text-muted); }
.sh-fertig { min-height: 66px; font-size: 1.2rem; }
.sh-fertig:disabled { opacity: 0.45; }

.sh-quittung {
  margin: 0.2rem 0 0.8rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid #4ade80;
  background: rgba(74, 222, 128, 0.12);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Zwischenspeicher + Liste */
.sh-ausgang { display: grid; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.sh-ausgang:empty { display: none; }
.sh-ausgang-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.65rem 0.8rem;
  border-radius: var(--radius); border: 1px solid var(--color-surface-line); background: var(--color-bg-deep); }
.sh-ausgang-wartet { border: 2px solid var(--color-accent-bright); }
.sh-ausgang-meta { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }
.sh-ausgang-kopf .sh-ausgang-knopf { margin-left: auto; }
.sh-ausgang-knopf { min-height: 44px; padding: 0 0.85rem; border-radius: var(--radius); border: 1px solid var(--color-accent);
  background: var(--color-accent); color: var(--color-bg); font: inherit; font-weight: 600; cursor: pointer; }
.sh-ausgang-knopf:disabled { opacity: 0.5; cursor: default; }
.sh-ausgang-leise { background: transparent; color: var(--color-text-muted); border-color: var(--color-surface-line); }

.sh-unter { margin: 0.4rem 0 0.4rem; font-size: 1rem; }
.sh-leer { color: var(--color-text-dim); font-size: 0.9rem; }
.sh-vorgang { display: flex; align-items: center; gap: 0.6rem; min-height: 52px; }
.sh-vorgang-text { flex: 1; min-width: 0; }
.sh-vorgang-kopf { font-family: var(--font-mono); font-size: 0.92rem; overflow-wrap: anywhere; }
.sh-vorgang-stand { font-size: 0.8rem; color: var(--color-text-muted); }
.sh-vorgang-tat { display: flex; gap: 0.35rem; flex: none; }
/* Ampel: grau = im Handy, gelb = unterwegs, grün = in CargoSoft gebucht, rot = hängt */
.sh-ampel { flex: none; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.35); }
.sh-ampel-grau { background: #8b93a1; }
.sh-ampel-gelb { background: #f5c542; }
.sh-ampel-gruen { background: #4ade80; }
.sh-ampel-rot { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25); }

.sh-cargosoft {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin: 1rem 0 1.2rem;
}