/* =====================================================================
   Keladam WWS — Oberflaeche
   ---------------------------------------------------------------------
   Farben aus den Keladam's Kebab Brand Guidelines (HEX verbindlich):
     Markengruen #00683B  Kopfzeile, Hauptknoepfe, aktiv, "in Ordnung"
     Gelb        #FBB03B  Warnung: wird knapp, unter Meldebestand
     Rot         #AD3A3A  Kritisch: leer, Fehlmenge, ueberfaellig
     Schwarz     #1E1E1E  Text
     Hintergrund #ECEBE4  Grundflaeche (gebrochenes Weiss der Marke)
   Die drei Markenfarben sind zugleich das Ampelsystem der App.
   Gebaut fuer Daumen: grosse Trefferflaechen, hoher Kontrast,
   lesbar in einem Kuehlcontainer mit nassen Haenden.
   ===================================================================== */
:root {
  --bg:        #ECEBE4;   /* Grundflaeche */
  --bg-2:      #FFFFFF;   /* Karten */
  --bg-3:      #F4F3EE;   /* eingelassene Flaechen */
  --line:      #D8D6CC;
  --text:      #1E1E1E;
  --text-2:    #5A5A54;
  --text-3:    #8B8B84;
  --gruen:     #00683B;   /* Markengruen */
  --gruen-hell:#E0EFE7;
  --gelb:      #FBB03B;
  --gelb-hell: #FEF0DA;
  --rot:       #AD3A3A;
  --rot-hell:  #F5E4E4;
  --radius:    12px;
  --tap:       48px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior-y: none;
}
input, select, button, textarea { font: inherit; color: inherit; }

/* ---------- Layout ---------- */
#app { display: flex; flex-direction: column; min-height: 100%; }
header.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--gruen); color: #fff;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.topbar .marke { font-weight: 800; letter-spacing: .3px; font-size: 15px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar .marke img.figur { height: 38px; width: auto; display: block; flex: 0 0 auto; }
/* Schriftzug darf schrumpfen, aber nie unter 88px — sonst wird er auf schmalen
   Handys zum unkenntlichen Strich (Ferdi, 24.08. abends, Logistiker-Handy). */
.topbar .marke img.schriftzug { height: 20px; width: auto; display: block; flex: 0 1 auto; min-width: 88px; max-width: 40vw; object-fit: contain; object-position: left; }
.topbar .marke .zusatz { color: var(--gelb); text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.35); }
.topbar .spacer { flex: 1; }
/* Wird es eng, kuerzt sich stattdessen der Benutzername mit "…" */
.topbar .user { font-size: 12px; color: rgba(255,255,255,.75); text-align: right; line-height: 1.25;
  min-width: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .user b { display: block; color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
/* Schmale Handys (Ferdi, 24.08. abends, Logistiker-Handy): vorher ueberlappten
   Uhr und Schriftzug. Jetzt zwei Zeilen: oben Logo + Uhr, darunter Benutzer +
   Abmelden; das gelbe Woertchen "Lager" weicht. */
@media (max-width: 560px) {
  .topbar .marke .zusatz { display: none; }
  header.topbar { flex-wrap: wrap; row-gap: 6px; }
  .topbar .spacer { display: none; }
  .topbar .marke { flex: 1 1 auto; }
  .topbar .marke img.schriftzug { max-width: 34vw; }
  .topbar .user { flex: 1 1 auto; max-width: none; }
}
.topbar button.ghost { color: #fff; border-color: rgba(255,255,255,.35); }

nav.tabs {
  position: sticky; top: var(--topbar-h, 56px); z-index: 25;
  display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs a {
  flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; text-decoration: none;
  color: var(--text-2); background: var(--bg-3); font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
nav.tabs a.aktiv { background: var(--gruen); color: #fff; }

main { flex: 1; padding: 14px; padding-bottom: 90px; max-width: 1100px; width: 100%; margin: 0 auto; }

/* ---------- Bausteine ---------- */
h1 { font-size: 20px; margin: 4px 0 14px; letter-spacing: -.2px; }
h2 { font-size: 14px; margin: 22px 0 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: .6px; }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
/* overflow:clip statt hidden — hidden wuerde einen eigenen Scrollbereich
   erzeugen und die klebenden Gruppenueberschriften verschieben. */
.card.pad0 { padding: 0; overflow: clip; }

/* Uhr in der Kopfleiste (Ferdi, 24.08.2026): Uhrzeit gross, Datum klein darunter.
   Datum in hellem Weiss — dunkles Grau war auf dem Markengruen unlesbar (Ferdi, 24.08. abends). */
.topbar .uhr { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25;
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: 6px; }
.topbar .uhr b { font-size: 14px; }
.topbar .uhr span { font-size: 11px; color: rgba(255,255,255,.85); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--bg-2); border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: var(--radius); padding: 14px; }
.kpi .wert { font-size: 26px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.kpi .label { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.kpi.gut  { border-left-color: var(--gruen); background: var(--gruen-hell); }
.kpi.warn { border-left-color: var(--gelb);  background: var(--gelb-hell); }
.kpi.rot  { border-left-color: var(--rot);   background: var(--rot-hell); }
/* Kacheln sind seit 22.08.2026 Links auf ihre Seite (Pfeil rechts = antippbar) */
a.kpi { display: block; position: relative; color: inherit; text-decoration: none; padding-right: 32px; }
.kpi.tippbar { cursor: pointer; }
.kpi.tippbar:active { transform: scale(.985); }
.kpi .pfeil { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 26px; opacity: .55; line-height: 1; }

button, .btn {
  min-height: var(--tap); padding: 0 18px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg-3); font-weight: 650; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  color: var(--text);
}
button:active, .btn:active { transform: scale(.985); }
/* Doppeltipp-Schutz (Pruefbericht H-02): waehrend gebucht wird, ist jeder Knopf gesperrt */
body.buchung-laeuft button, body.buchung-laeuft .btn, body.buchung-laeuft a.kpi, body.buchung-laeuft .zeile.tippbar { pointer-events: none; }
body.buchung-laeuft button, body.buchung-laeuft .btn { opacity: .55; }
button.primary, .btn.primary { background: var(--gruen); border-color: var(--gruen); color: #fff; }
button.gruen { background: var(--gruen); border-color: var(--gruen); color: #fff; }
button.warn { background: var(--gelb); border-color: var(--gelb); color: var(--text); }
button.orange, .btn.orange { background: #E07B1A; border-color: #E07B1A; color: #fff; font-weight: 600; }
button.schwarz, .btn.schwarz { background: #1E1E1E; border-color: #1E1E1E; color: #fff; font-weight: 700; }   /* "Produziert …" (Ferdi, 22.08.2026) */
.zeile.problem { background: var(--rot-hell); }
/* Zielwahl im Eingang: zwei grosse Knoepfe in Lagerfarbe — das gewaehlte Lager ist nicht zu uebersehen */
.zielwahl { display: flex; gap: 8px; margin-top: 4px; }
.zielwahl button.ziel { flex: 1; min-height: 56px; font-size: 16px; font-weight: 700; border: 2px solid var(--line);
  background: var(--bg-3); color: var(--text-2); border-radius: 12px; }
.zielwahl button.ziel.aktiv { color: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.zielwahl button.ziel.aktiv.zl    { background: var(--gruen); border-color: var(--gruen); }
.zielwahl button.ziel.aktiv.manu  { background: #E07B1A; border-color: #E07B1A; }
.zielwahl button.ziel.aktiv.store { background: #3A6EA5; border-color: #3A6EA5; }
/* Bestandskasten in Lagerfarbe (Suchtreffer in Eingang/Transport) */
.bestandchip.lager-zl    { border-color: var(--gruen); background: var(--gruen-hell); }
.bestandchip.lager-manu  { border-color: #E07B1A; background: #FDEBD8; }
.bestandchip.lager-store { border-color: #3A6EA5; background: #E4EDF5; }
.bestandchip.leer { border-color: var(--line); background: var(--bg-3); }
.bestandchip.leer .zahl { color: var(--text-2); font-weight: 600; }
.pill.zl    { background: var(--gruen); color: #fff; }
.pill.manu  { background: #E07B1A; color: #fff; }
.pill.store { background: #3A6EA5; color: #fff; }
button .pill { margin-left: 4px; font-size: 13px; vertical-align: middle; }
/* Anlieferung: grosse Lager-Kaesten und Ampel je Zeile (gruen komplett, orange teilweise, rot fehlt) */
.lager.gross .lager-kopf { padding: 18px 18px; }
.lager.gross .lager-kopf h2 { font-size: 27px; font-weight: 800; letter-spacing: .2px; }
.lager.gross .lager-kopf .lager-info { font-size: 13.5px; margin-top: 4px; }
.zaehlzeile.teil  { background: #FDEBD8; }
.zaehlzeile.fehlt { background: var(--rot-hell); }
input.fehlt { border-color: var(--rot); background: var(--rot-hell); }   /* Pflichtfeld leer (Max) */
.bestandchip.gruen { border-color: var(--gruen); background: var(--gruen-hell); }
/* Einkauf (Ferdi, 22.08.2026): Bestellmenge als Kasten, links beschriftete Felder Lager/Bestand/Melde/Max */
.bestandchip.bestell { border: 2px solid #1E1E1E; background: var(--bg-2); min-width: 96px; }
.bestandchip.bestell .label { color: var(--text); font-weight: 700; }
/* Bestell-Kasten in Lieferantenfarbe (Ferdi, 22.08.2026, zweite Fassung): nur der Kopf "bestellen" voll in der
   Farbe, darunter eine leicht getoente, fast weisse Flaeche mit dunkler Schrift. Farbe aus dem Stamm kommt als
   --lf/--lf-hell per Inline-Stil, sonst ueber die Namensklassen lf-*. */
.bestandchip.bestell.farbig { --lf: #1E1E1E; --lf-hell: #1E1E1E14; padding: 0; border: 2px solid var(--lf); background: var(--lf-hell); overflow: hidden; align-items: stretch; }
.bestandchip.bestell.farbig .label { display: block; background: var(--lf); color: #fff; padding: 4px 9px; max-width: none; text-align: right; }
.bestandchip.bestell.farbig .zahl { color: var(--text); padding: 5px 9px 0; text-align: right; }
.bestandchip.bestell.farbig .basis { color: var(--text-2); padding: 0 9px 5px; text-align: right; }
.bestandchip.bestell.lf-metro { --lf: #2F6FD0; --lf-hell: #2F6FD01F; }
.bestandchip.bestell.lf-gazi { --lf: #AD3A3A; --lf-hell: #AD3A3A1F; }
.bestandchip.bestell.lf-morgenstern { --lf: #E07B1A; --lf-hell: #E07B1A1F; }
.bestandchip.bestell.lf-kaercher { --lf: #00683B; --lf-hell: #00683B1F; }
.bestandchip.bestell.lf-edeka { --lf: #7B4FB0; --lf-hell: #7B4FB01F; }
.bestandchip.bestell.lf-ohne { --lf: #D6408F; --lf-hell: #D6408F1F; }
.bestandchip.bestell.lf-sonst { --lf: #5B8C6A; --lf-hell: #5B8C6A1F; }
.fakten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; align-items: center; }
.fakt { border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; font-size: 13px; background: var(--bg-3); line-height: 1.25; }
.fakt .fl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); }
.bestandchip.teil  { border-color: #E07B1A; background: #FDEBD8; }
.bestandchip.teil .zahl { color: #8A4B00; }
.bestandchip .label { max-width: 150px; text-align: right; line-height: 1.2; }
/* Anlieferung: Feld "Grund" (Kurzform des morgens angegebenen Grunds) */
.grundchip { display: inline-flex; flex-direction: column; align-items: flex-end; padding: 4px 9px; border-radius: 9px;
  border: 1px dashed #E07B1A; background: #FFF7F0; color: #8A4B00; flex: 0 0 auto; }
.grundchip .label { font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }
.grundchip .wert { font-size: 13px; font-weight: 700; line-height: 1.2; }
button.ghost { background: transparent; }
button.klein { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.btnzeile { display: flex; gap: 8px; flex-wrap: wrap; }

input[type=text], input[type=number], input[type=password], input[type=date], input[type=email], select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gruen); box-shadow: 0 0 0 2px var(--gruen-hell); }
label.feld { display: block; margin-bottom: 10px; }
label.feld > span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.leer { text-align: center; color: var(--text-3); padding: 36px 16px; }
.hinweis { background: var(--gruen-hell); border-left: 3px solid var(--gruen); padding: 10px 12px; border-radius: 8px; font-size: 13.5px; color: var(--text-2); margin-bottom: 12px; }

/* ---------- Listen ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.zeile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.zeile:last-child { border-bottom: none; }
.zeile .haupt { flex: 1; min-width: 0; }
.zeile .titel { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.zeile .rechts { text-align: right; font-variant-numeric: tabular-nums; }
.zeile .zahl { font-size: 17px; font-weight: 750; }

.gruppenkopf {
  padding: 8px 14px; background: var(--bg-3); font-size: 11.5px; font-weight: 750;
  letter-spacing: .8px; text-transform: uppercase; color: var(--text-2);
  position: sticky; top: var(--kopf-h, 110px); z-index: 10; border-bottom: 1px solid var(--line);
}

/* ---------- Zaehlen ----------
   Schmale Geraete: Artikelname bekommt eine eigene Zeile, Eingabe darunter
   rechtsbuendig. Ab Tablet-Breite passt alles nebeneinander. */
.zaehlzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.zaehlzeile:last-child { border-bottom: none; }
.zaehlzeile.fertig { background: var(--gruen-hell); }
.zaehlzeile .haupt { flex: 1 1 100%; min-width: 0; }
.zaehlzeile .haupt .titel { white-space: normal; font-weight: 650; }
.zaehlzeile .stepper, .zaehlzeile .rechts { margin-left: auto; }
/* Inventur: − Feld + und Einheit stehen in jeder Zeile an derselben Stelle (feste Spaltenbreiten) */
.zaehlzeile .stepper { flex: 0 0 auto; }
.zaehlzeile select.einheit, .zaehlzeile .einheittext { width: 112px; min-width: 112px; max-width: 112px; flex: 0 0 112px; }
.zaehlzeile .einheittext { text-align: center; }
.zaehlzeile .rechts { text-align: right; font-variant-numeric: tabular-nums; }
.zaehlzeile .rechts .zahl { font-size: 17px; font-weight: 750; }
.zaehlzeile .rechts .sub { font-size: 12px; color: var(--text-2); }
.zaehlzeile .sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.zaehlzeile input[type=number] { width: 92px; min-height: 46px; text-align: center;
  font-size: 18px; font-weight: 700; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.zaehlzeile input[type=number]::-webkit-outer-spin-button,
.zaehlzeile input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zaehlzeile select { width: auto; min-width: 86px; min-height: 46px; padding: 0 8px; font-size: 13px; }
.zaehlzeile .einheittext { min-width: 46px; text-align: center; color: var(--text-2); font-size: 13px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { min-height: 46px; width: 46px; padding: 0; font-size: 22px; font-weight: 700; }
.stepper button.ok { background: var(--gruen); border-color: var(--gruen); color: #fff; }
@media (min-width: 560px) {
  .zaehlzeile .haupt { flex: 1 1 auto; }
}

/* Bereichsauswahl innerhalb einer Zaehlung */
.bereiche { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; }
.bereiche::-webkit-scrollbar { display: none; }
.bereiche button { min-height: 40px; padding: 0 14px; font-size: 13px; border-radius: 999px; flex: 0 0 auto; }
.bereiche button.aktiv { background: var(--gruen); border-color: var(--gruen); color: #fff; }

/* ---------- Status (Ampel = Markenfarben) ---------- */
.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.pill.grau  { background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line); }
.pill.gruen { background: var(--gruen); color: #fff; }
.pill.gelb  { background: var(--gelb); color: var(--text); }
.pill.rot   { background: var(--rot); color: #fff; }
.pill.blau  { background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line); }

.balken { height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; margin-top: 6px; border: 1px solid var(--line); }
.balken i { display: block; height: 100%; background: var(--gruen); }
.balken i.warn { background: var(--gelb); }
.balken i.rot { background: var(--rot); }

/* ---------- Fusszeile mit Aktion ---------- */
.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
.aktionsleiste button { flex: 1; }

/* ---------- Anmeldung ---------- */
.login { max-width: 400px; margin: 8vh auto; padding: 26px 22px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; }
.login-wrap { padding: 0 16px; }
.login .logo { text-align: center; font-size: 22px; font-weight: 850; margin-bottom: 4px; letter-spacing: .5px; color: var(--gruen); }
.login .logo img { max-height: 150px; max-width: 70%; display: block; margin: 0 auto 12px; }
.login .logo span { color: var(--gelb); }
.login .sub { text-align: center; color: var(--text-2); font-size: 13px; margin-bottom: 22px; }
.geraetewahl { display: flex; gap: 8px; margin: 4px 0 14px; }
.geraetewahl button { flex: 1; min-height: 42px; font-size: 13px; }
.geraetewahl button.aktiv { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.fehler { background: var(--rot-hell); color: var(--rot);
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; margin-bottom: 12px; }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%);
  background: var(--text); color: #fff;
  padding: 12px 18px; border-radius: 999px; z-index: 100; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .18s;
  max-width: calc(100vw - 40px); text-align: center; }
#toast.an { opacity: 1; }
#toast.fehler { background: var(--rot); }

/* ---------- Modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(30,30,30,.55); z-index: 90;
  display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--bg-2); border-radius: 16px 16px 0 0; width: 100%; max-width: 640px;
  max-height: 88vh; overflow-y: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) {
  .modal-bg { align-items: center; }
  .modal { border-radius: 16px; }
}
.modal h3 { margin: 0 0 14px; font-size: 17px; }

table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tab th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-2); padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.tab td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
table.tab td.num { text-align: right; font-variant-numeric: tabular-nums; }
.scrollx { overflow-x: auto; }
.mono { font-variant-numeric: tabular-nums; }
.dim { color: var(--text-2); }
.klein { font-size: 12px; }

/* ---------- Lagerbestand: ein aufklappbarer Kasten je Lager ----------
   Zentrallager gruen, Manufaktur orange, Store hellblau — damit man auf
   einen Blick sieht, in welchem Lager man gerade ist. */
.lager { border: 2px solid var(--line); border-radius: 14px; margin-bottom: 14px; overflow: clip; background: var(--bg-2); }
.lager-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
  user-select: none; min-height: 64px; }
.lager-kopf h2 { margin: 0; font-size: 19px; letter-spacing: 0; text-transform: none; color: inherit; }
.lager-kopf .lager-info { font-size: 12.5px; opacity: .85; margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lager-kopf .pfeil { margin-left: auto; font-size: 22px; transition: transform .18s; opacity: .7; }
.lager.offen > .lager-kopf .pfeil { transform: rotate(90deg); }
.lager-inhalt { display: none; border-top: 1px solid var(--line); }
.lager.offen > .lager-inhalt { display: block; }   /* nur der eigene Inhalt — Kaesten koennen ineinander liegen */
.lager-inhalt > .lager { margin: 10px; }

/* Produktion (Ferdi, 22.08.2026): Produktzeile mit auffaelligem "Bis Max fehlen", Lagerkarten mit Kopf in
   Lagerfarbe (Manufaktur orange, Store dunkelblau, Zentrallager gruen, Schrift weiss), Bestand gross, Max/Mindest klar */
.produkt { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.produkt:last-child { border-bottom: 0; }
/* Ampel-Hintergrund der Produktzeile (Ferdi, 22.08.2026): leer und unter Mindest je ca. 10 % dunkler als die
   hellen Standardtoene, "passt" leicht durchscheinend gruen */
.produkt.fehlt { background: #EDD0D0; }
.produkt.teil  { background: #F9E1B8; }
.produkt.gut   { background: rgba(0, 104, 59, .10); }
.produkt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.produkt-name { font-size: 17px; font-weight: 800; }
.fehltfeld { padding: 7px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--bg-3); color: var(--text-2); }
.fehltfeld b { font-size: 17px; }
.fehltfeld.warn { background: #E07B1A; color: #fff; }
.fehltfeld.rot  { background: var(--rot); color: #fff; }
.fehltfeld.gut  { background: var(--gruen); color: #fff; }
.produkt-lager { display: flex; flex-wrap: wrap; gap: 10px; }
.lagerkarte { flex: 1 1 150px; max-width: 230px; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.lagerkarte .lk-kopf { padding: 6px 10px; font-weight: 800; font-size: 13px; color: #fff; letter-spacing: .3px; }
.lagerkarte.manu  { border-color: #E07B1A; } .lagerkarte.manu  .lk-kopf { background: #E07B1A; }
.lagerkarte.store { border-color: #1F4E8C; } .lagerkarte.store .lk-kopf { background: #1F4E8C; }
.lagerkarte.zl    { border-color: var(--gruen); } .lagerkarte.zl .lk-kopf { background: var(--gruen); }
.lk-ist { padding: 8px 10px 6px; display: flex; flex-direction: column; }
.lk-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); display: block; }
.lk-zahl { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lk-ist.rot .lk-zahl  { color: var(--rot); }
.lk-ist.warn .lk-zahl { color: #B35C00; }
.lk-klein { font-size: 11px; color: var(--text-2); }
.lk-soll { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 10px 10px; border-top: 1px dashed var(--line); font-size: 14px; }
.pill.store { background: #1F4E8C; color: #fff; }
/* Warengruppen in der Produktion (Ferdi, 22.08.2026, zweite Fassung): schwarzer Kopf mit weisser Schrift,
   schwarzer Rahmen, ca. 1,5 cm Abstand zwischen den Gruppen; der Kopf bleibt beim Scrollen oben kleben
   (overflow: clip erlaubt sticky) — Gruppen verschwimmen nicht, ohne bunt zu sein */
.lager.wg { margin-top: 56px; margin-bottom: 56px; border: 3px solid #1E1E1E; }
.lager.wg:first-of-type { margin-top: 28px; }
.lager.wg > .lager-kopf { position: sticky; top: var(--kopf-h, 110px); z-index: 8; background: #1E1E1E; color: #fff; }
.lager.wg > .lager-kopf h2, .lager.wg > .lager-kopf .lager-info { color: #fff; }
.lager.wg > .lager-kopf .pfeil { opacity: .95; }
.lager.zl    { border-color: var(--gruen); }
.lager.zl    .lager-kopf { background: var(--gruen-hell); color: var(--gruen); }
.lager.manu  { border-color: #E07B1A; }
.lager.manu  .lager-kopf { background: #FDEBD8; color: #8A4B00; }
.lager.store { border-color: #3A6EA5; }
.lager.store .lager-kopf { background: #E4EDF5; color: #24466B; }
.lager .zeile.tippbar { cursor: pointer; }
.lager .zeile.tippbar:active { background: var(--bg-3); }
.ampel { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: var(--gruen); }
.ampel.warn { background: var(--gelb); }
.ampel.rot { background: var(--rot); }

/* ---------- Bestandskasten rechts in der Zeile (Ampelfarbe, gross, eindeutig) ---------- */
.bestandchip { display: inline-flex; flex-direction: column; align-items: flex-end; padding: 4px 9px 4px;
  border-radius: 9px; border: 2px solid var(--gruen); background: var(--gruen-hell); min-width: 84px; flex: 0 0 auto; }
.bestandchip .label { font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-2); }
.bestandchip .zahl { font-size: 16.5px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--text); }
.bestandchip .basis { font-size: 10.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bestandchip.warn { border-color: var(--gelb); background: var(--gelb-hell); }
.bestandchip.rot  { border-color: var(--rot);  background: var(--rot-hell); }
.bestandchip.rot .zahl { color: var(--rot); }
.zeile .sub .soll { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line); }

/* Kaesten im Einkauf: je Lieferant bzw. je Status */
.lager.lieferant { border-color: #5B8C6A; }
.lager.lieferant .lager-kopf { background: #EEF5F0; color: #2F5E3F; }
/* Lieferantenfarben (Ferdi, 21.08.2026) — Kaesten und Pillen */
.lager.lf-metro       { border-color: #2F6FD0; } .lager.lf-metro .lager-kopf       { background: #E4EDFA; color: #1B4A96; }
.lager.lf-gazi        { border-color: var(--rot); } .lager.lf-gazi .lager-kopf     { background: var(--rot-hell); color: #8A1F1F; }
.lager.lf-morgenstern { border-color: #E07B1A; } .lager.lf-morgenstern .lager-kopf { background: #FDEBD8; color: #8A4B00; }
.lager.lf-kaercher    { border-color: var(--gruen); } .lager.lf-kaercher .lager-kopf { background: var(--gruen-hell); color: var(--gruen); }
.lager.lf-edeka       { border-color: #7B4FB0; } .lager.lf-edeka .lager-kopf       { background: #EFE7F8; color: #4E2E7A; }
.lager.lf-ohne        { border-color: #D6408F; } .lager.lf-ohne .lager-kopf        { background: #FBE3EF; color: #8E1F5B; }
.lager.lf-sonst       { border-color: #5B8C6A; } .lager.lf-sonst .lager-kopf       { background: #EEF5F0; color: #2F5E3F; }
.pill.lf-metro { background: #2F6FD0; color: #fff; }   .pill.lf-gazi { background: var(--rot); color: #fff; }
.pill.lf-morgenstern { background: #E07B1A; color: #fff; } .pill.lf-kaercher { background: var(--gruen); color: #fff; }
.pill.lf-edeka { background: #7B4FB0; color: #fff; }   .pill.lf-ohne { background: #D6408F; color: #fff; }
.pill.lf-sonst { background: #5B8C6A; color: #fff; }
/* Farbpalette im Lieferanten-Formular, Farbpunkt in der Lieferantenliste */
.farbpalette { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.farbpalette .farbe { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line); }
.farbpalette .farbe.aktiv { border-color: var(--text); box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px var(--line); transform: scale(1.08); }
.farbpalette .farbe.keine { background: var(--bg-3); color: var(--text-2); font-size: 18px; font-weight: 700; }
.farbpunkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.lager.gelb { border-color: var(--gelb); }
.lager.gelb .lager-kopf { background: var(--gelb-hell); color: #7A4E00; }
.lager.grau { border-color: var(--line); }
.lager.grau .lager-kopf { background: var(--bg-3); color: var(--text); }
.lager.ohne { border-color: var(--rot); }
.lager.ohne .lager-kopf { background: var(--rot-hell); color: var(--rot); }
.lager-kopf .kopfaktion { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Violett = Teillieferung: ein Teil ist da, der Rest steht noch aus */
.pill.lila { background: #6B4E9B; color: #fff; }
.lager.lila { border-color: #6B4E9B; }
.lager.lila .lager-kopf { background: #EFE9F7; color: #4A2F7A; }

/* ---------- Belege (Lieferscheine, Kassenbons) ---------- */
.belege-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.beleg { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-3); text-decoration: none; color: inherit; display: block; }
.beleg img { width: 100%; height: 110px; object-fit: cover; display: block; background: #fff; }
.beleg .pdf, .beleg .aus { height: 110px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; padding: 8px; color: var(--text-2); }
.beleg .pdf { font-weight: 700; font-size: 15px; color: var(--gruen); }
.beleg .info { font-size: 11px; color: var(--text-2); padding: 6px 8px; line-height: 1.3; }
.beleg .info button { min-height: 26px; padding: 0 8px; font-size: 11px; border-radius: 6px; margin-top: 4px; }
label.btn input[type=file] { display: none; }