/* =================================================================================================
   LAGER  ·  views/lager.php  ·  Lager_Mockup.html, Teil B und Teil D (Feinschliff 19.09.2026)

   Diese Datei bedient BEIDE Rahmen und wird deshalb an zwei sehr verschiedenen Stellen geladen:
   im schlanken Rahmen als einziges Stylesheet (body.lg), im Cockpit zusätzlich zu app.css
   (.lg-cockpit). Darum stehen die Farben auf `body.lg` und nicht auf `:root`: Im Cockpit soll
   diese Datei nichts umdefinieren, was app.css schon gesetzt hat. Die Namen und Werte sind
   dieselben, damit die beiden Rahmen nicht verschieden aussehen.

   AUFBAU (Bauplan Feinschliff, Strang A): erst die TOKEN (eine Skala für Schrift, Abstand,
   Radius, Trefferhöhe und die vier Töne), dann die BAUSTEINE (Knopf, Pille, Zähler, Platz,
   Kasten, Zeile, Karte, Etikett, Feld, Klappe, Kacheln, Ampel, Bühne, Haupt, Segment), die alle
   Ansichten teilen, dann der Rahmen (Kopfzeile, Reiterleiste, Cockpit), und erst danach die
   Reste je Ansicht. Wer eine Ansicht baut, greift zu den Bausteinen; eigene Klassen gibt es
   nur noch für das, was es sonst nirgends gibt (Leitstand-Tabellen, Kalender, Plätze-Tabelle).

   Mobil zuerst, und das ist hier kein Grundsatz, sondern die Lage: Die Seite wird im Dezember
   an der Rampe bedient, im Stehen, oft mit Handschuhen. Trefferflächen deshalb mindestens
   48 px, die Reiterleiste unten in der Daumenzone, nichts Wichtiges am oberen Rand.
   ================================================================================================= */

/* =================================================================================================
   1. TOKEN  (Vertrag Strang A; im Cockpit-Rahmen spiegeln sie die Werte aus app.css)
   ================================================================================================= */
body.lg,.lg-cockpit{
  /* Schrift: sechs Stufen statt 37 Einzelwerte. xs = Kleingedrucktes und Etiketten, sm = Zeilen
     und Kästen, md = Namen und Knöpfe, lg = Kartenkopf, xl = Betrag und Zähler, 2xl = der Platz. */
  --lg-fs-xs:.75rem;--lg-fs-sm:.875rem;--lg-fs-md:1rem;--lg-fs-lg:1.35rem;--lg-fs-xl:1.75rem;--lg-fs-2xl:2.75rem;
  /* Abstand: 4/8/12/16/24/32, wie --s1 bis --s6 in app.css. */
  --lg-s1:4px;--lg-s2:8px;--lg-s3:12px;--lg-s4:16px;--lg-s5:24px;--lg-s6:32px;
  /* Radius: klein (Platz, Pille-Ecken), normal (Knopf, Karte, Kasten), groß (Bühne), Pille. */
  --lg-r-sm:8px;--lg-r:12px;--lg-r-lg:16px;--lg-r-pill:999px;
  /* Trefferhöhen: tap = jedes Bedienelement am Telefon, big = der eine Hauptknopf und die
     Listenzeile, nav = die Reiterleiste unten, desk = kleine Knöpfe im Cockpit. */
  --lg-h-tap:48px;--lg-h-big:56px;--lg-h-nav:64px;--lg-h-desk:40px;
  /* Die Kopfzeile am Telefon; die Bühne rechnet mit ihr, um den Bildschirm zu füllen. */
  --lg-h-kopf:58px;
  /* Die vier Töne, je Fläche (Tint), Rand (die Farbe selbst) und Text (Ink). Die Ink-Werte sind
     die aus app.css (--warn-ink, --bad-ink, --info-ink), damit ein warnender Satz in beiden
     Rahmen gleich aussieht. --lg-ok-on ist der dunkle Text AUF der grünen Fläche (6,4:1). */
  --lg-ok:#28c07a;--lg-ok-tint:rgba(40,192,122,.12);--lg-ok-ink:#8fecc0;--lg-ok-on:#06301c;
  --lg-warn:#ffb020;--lg-warn-tint:rgba(255,176,32,.12);--lg-warn-ink:#f0c46a;
  /* „im Zulauf“ (U21): Gelb wie der Schalter im Shop, vom Orange des Packhinweises abgesetzt. */
  --lg-zl:#e6c200;--lg-zl-tint:rgba(255,214,10,.08);--lg-zl-ink:#ffe680;
  --lg-bad:#ef4444;--lg-bad-tint:rgba(239,68,68,.12);--lg-bad-ink:#ffb0a6;
  --lg-info:#6ea8fe;--lg-info-tint:rgba(110,168,254,.12);--lg-info-ink:#9cc0ff;
  /* DER PLATZ IST BLAU (Mockup Teil B, .place), nicht bernsteinfarben wie eine Warnung. */
  --lg-place:#7ea6ff;--lg-place-tint:rgba(126,166,255,.14);--lg-place-ink:#bcd2ff;
  /* Die Hausfarbe: nur der aktive Reiter, das Plus einer Klappe und die Balken des Leitstands.
     Kein Knopf trägt sie mehr, sonst hieße Rot nichts. Die Tint-Fläche ist die Füllung des
     aktiven Reiters und des aktiven Segments: Text in --ink darauf statt Weiß auf Rot, das
     hielt nur 3,1:1 (Design-Prüfung 20.09.2026, Befund 1). */
  --lg-brand:#ff5a3c;--lg-brand-tint:rgba(255,90,60,.14);
  /* Feldränder: eine Stufe kräftiger als --line2, damit ein Eingabefeld sich von einer Karte
     unterscheidet (app.css --hair). */
  --lg-hair-strong:#4a5170;
  /* SCHRIFTGEWICHT (Vertrag): 800 nur Zahlen und Platz, 700 Namen und Knöpfe, 400 der Rest.
     Begründete Ausnahmen mit 800: der Kartenkopf (.lg-karte h2) und der Titel der Bühne, denn
     beide werden aus einem Meter Abstand gelesen. Im Cockpit-Rahmen kommt 600 als
     COCKPIT-GEWICHT dazu (app.css: .tabbar, .pagehead .sub, table.srcs td.nm); am Telefon
     gibt es kein 600. */
}
/* Am Telefon ist der große Platz eine Stufe kleiner (Vertrag: 2,75 rem, Handy 2,25): Ein
   Freitext-Platz („hinter Regal C unten links") muss auch auf 320 px in den Kasten passen. */
@media (max-width:480px){
  body.lg{--lg-fs-2xl:2.25rem}
}
/* IM COCKPIT-RAHMEN SPIEGELN DIE TOKEN DIE SKALA VON app.css (Design-Prüfung, Befund 5): Eine
   Lager-Tabelle neben dem Preis-Radar soll dieselbe Schrift haben, nicht die des Telefons. Die
   sechs Stufen liegen auf --fs-xs/sm/md und, weil die Cockpit-Skala oben enger ist, auf
   --fs-2xl/3xl/4xl (1.35/1.7/2.4 rem); die Radien auf --radius (14) und --radius-sm (9). Die
   Handy-Werte darüber gelten nur für body.lg. */
.lg-cockpit{
  --lg-fs-xs:var(--fs-xs);--lg-fs-sm:var(--fs-sm);--lg-fs-md:var(--fs-md);
  --lg-fs-lg:var(--fs-2xl);--lg-fs-xl:var(--fs-3xl);--lg-fs-2xl:var(--fs-4xl);
  --lg-r:var(--radius);--lg-r-sm:var(--radius-sm);
}

body.lg{
  --bg:#0f1220;--card:#1a1f35;--card2:#222842;--ink:#eef1f7;--mut:#98a0c0;--faint:#8a93b2;
  --acc:#ff5a3c;--acc2:#ffb020;--ok:#28c07a;--danger:#ef4444;
  /* Die Trennlinien am Telefon eine Stufe kräftiger als im Cockpit (--line 1,27:1 auf der Karte
     war im Dezemberlicht an der Rampe nicht zu sehen; Design-Prüfung, Befund 10): --line auf
     1,6:1, --line2 auf die Feldrand-Stufe. Das Cockpit behält seine Werte aus app.css. */
  --line:#34406a;--line2:var(--lg-hair-strong);
  --focus:0 0 0 3px rgba(255,176,32,.5);
  margin:0;font-family:system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.45;-webkit-font-smoothing:antialiased;
  /* Die Leiste unten liegt fest; ohne diesen Abstand verschwindet das Ende der Liste darunter.
     Der sichere Bereich ist der Streifen über der Wischleiste neuerer Telefone. */
  padding-bottom:calc(var(--lg-h-nav) + var(--lg-s3) + env(safe-area-inset-bottom));
}
body.lg *{box-sizing:border-box}
/* Textlinks sind bernsteinfarben; Bausteine, die Links sind (Knopf, Zeile, Pille, Reiter), tragen
   ihre eigene Farbe. Die Regel steht hier, weil `body.lg a` sonst jede Zeile der Packliste
   einfärbt. */
body.lg a{color:var(--acc2)}
body.lg a.lg-knopf,body.lg a.lg-zeile,body.lg a.lg-pille,body.lg a.lg-kachel,body.lg .lg-tr-name{color:var(--ink)}
body.lg a.lg-pille,body.lg .lg-segment>a{color:var(--mut)}
body.lg .lg-segment>a.an,body.lg .lg-segment>a.aktiv-still{color:var(--ink)}
body.lg .lg-buehne a{color:var(--mut)}
body.lg a.lg-pille.ok{color:var(--lg-ok-ink)} body.lg a.lg-pille.warn{color:var(--lg-warn-ink)}
body.lg a.lg-knopf.pri{color:var(--lg-ok-on)} body.lg a.lg-knopf.gefahr,body.lg a.lg-knopf.dunkel{color:#fff}
body.lg :focus-visible{outline:none;box-shadow:var(--focus)}

/* =================================================================================================
   2. BAUSTEINE  (Vertrag Strang A; die Stränge B, C und D bauen ihre Ansichten daraus)
   ================================================================================================= */

/* --- .lg-knopf: der stille Knopf. Fläche --card2, Rand --line2, 48 px, Radius 12. -------------
   ROT HEISST WIEDER ETWAS: Der Standardknopf ist still. Gefüllt ist nur noch der eine Hauptknopf
   je Bildschirm (.pri, grün) und die Rücknahme (.gefahr, rot). „Suchen", „Speichern",
   „Abbrechen", „Teilweise" sind still. */
.lg-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--lg-s2);
  min-height:var(--lg-h-tap);padding:0 var(--lg-s4);border-radius:var(--lg-r);
  border:1px solid var(--line2);background:var(--card2);color:var(--ink);
  font:inherit;font-size:var(--lg-fs-sm);font-weight:700;line-height:1.2;cursor:pointer;
  text-decoration:none;text-align:center;-webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s,color .15s,filter .15s,transform .15s}
.lg-knopf:hover{border-color:var(--lg-hair-strong);color:var(--ink)}
.lg-knopf:active{transform:translateY(1px);filter:brightness(.92)}
.lg-knopf:disabled,.lg-knopf[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;filter:none}
/* Der Hauptknopf: grün, 56 px, volle Breite, höchstens EINER je Bildschirm. Er ist der eine,
   der etwas aus dem Haus schickt (Haken, Übergeben, Zubuchen). */
.lg-knopf.pri{width:100%;min-height:var(--lg-h-big);font-size:var(--lg-fs-md);
  background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on)}
.lg-knopf.pri:hover{border-color:var(--lg-ok);color:var(--lg-ok-on)}
/* Rot nur für zurücknehmen und Rücknahme. Dunkler als --lg-bad, damit Weiß darauf hält (6,5:1);
   Rand gleich Fläche, ein Rot je Knopf (Befund 20). */
.lg-knopf.gefahr{background:#b91c1c;border-color:#b91c1c;color:#fff}
.lg-knopf.gefahr:hover{border-color:#b91c1c;color:#fff}
/* 40 px: die kleinen Knöpfe des Cockpits (Tabellenzeilen, Plätze-Liste). AM TELEFON GIBT ES
   KEINE KLEINEN KNÖPFE: Dieselbe Ansicht („war da", „ändern") wird dort mit Handschuhen bedient,
   also 48 px, egal welche Klasse der Knopf trägt (Design-Prüfung, Befund 4). */
.lg-knopf.klein{min-height:var(--lg-h-desk);padding:0 var(--lg-s3);font-size:var(--lg-fs-xs)}
body.lg .lg-knopf.klein{min-height:var(--lg-h-tap)}
/* Der Knopf der Bühne („Nächstes Körbchen"): dunkel im Cockpit-Rahmen, grün am Telefon (siehe .lg-buehne). */
.lg-knopf.dunkel{width:100%;min-height:var(--lg-h-big);font-size:var(--lg-fs-md);
  background:var(--lg-ok-on);border-color:var(--lg-ok-on);color:#fff}
.lg-knopf.dunkel:hover{border-color:var(--lg-ok-on);color:#fff}

/* --- .lg-pille: das Kennzeichen (12 px, 700, 3px 8px, Tint + Rand). ------------------------------
   Ersetzt die alten Marken der Packliste und des Leitstands sowie die Zähler der Unterreiter. Ohne Ton ist sie neutral
   (F3, § 20, „übergeben"), mit Ton sagt sie etwas (nachpacken, 2× Schmidt, bezahlt). */
.lg-pille{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--lg-r-pill);
  border:1px solid var(--line2);background:var(--card2);color:var(--mut);
  font-size:var(--lg-fs-xs);font-weight:700;line-height:1.35;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;text-decoration:none}
.lg-pille.ok{background:var(--lg-ok-tint);border-color:var(--lg-ok);color:var(--lg-ok-ink)}
.lg-pille.warn{background:var(--lg-warn-tint);border-color:var(--lg-warn);color:var(--lg-warn-ink)}
.lg-pille.bad{background:var(--lg-bad-tint);border-color:var(--lg-bad);color:var(--lg-bad-ink)}
.lg-pille.info{background:var(--lg-info-tint);border-color:var(--lg-info);color:var(--lg-info-ink)}
/* Die Hausfarbe als Pille: der Zustand „zu packen" im Reiter Körbchen (Arbeit, die ansteht). */
.lg-pille.hot{background:var(--lg-brand-tint);border-color:var(--lg-brand);color:var(--ink)}
/* F3 und § 20 sind Kennzeichen, keine Bewertung: in Textfarbe, ohne Ton. */
.lg-pille.f3,.lg-pille.p20{color:var(--ink)}
/* „in Arbeit · Lars" (Mockup A4): blau wie eine Auskunft, mit einem kleinen Punkt davor, damit sie
   sich von den Kennzeichen abhebt, ohne rot oder gelb zu sein. */
.lg-pille.arbeit{background:var(--lg-info-tint);border-color:var(--lg-info);color:var(--lg-info-ink)}
.lg-pille.arbeit::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--lg-info-ink);flex:none}

/* --- .lg-zahl: der blaue Zähler, 28 px Quadrat. Wie viele Packzettel in die Hand gehören. ------ */
.lg-zahl{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;padding:0 6px;border-radius:var(--lg-r-sm);
  background:var(--lg-info-tint);border:1px solid var(--lg-info);color:var(--lg-info-ink);
  font-weight:800;font-size:var(--lg-fs-sm);line-height:1;font-variant-numeric:tabular-nums}

/* --- .lg-platz: der Platz, BLAU, Radius 8. .xl ist die große Fassung der Übergabe. -------------
   Ersetzt die vier alten Platz-Klassen von Packliste, Karte, Übergabe und Fertig-Bildschirm. 800, weil der Platz eine Zahl
   ist, die aus einem Meter Abstand gelesen wird. */
.lg-platz{display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;
  padding:4px 10px;border-radius:var(--lg-r-sm);
  background:var(--lg-place-tint);border:1px solid var(--lg-place);color:var(--lg-place-ink);
  font-weight:800;font-size:var(--lg-fs-md);line-height:1.25;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;max-width:100%;word-break:break-word;text-align:center}
.lg-platz.xl{font-size:var(--lg-fs-2xl);padding:8px 20px;border-radius:var(--lg-r-lg);line-height:1.1}
/* „kein Platz": gestrichelt, gedämpft, kein Blau. Eine Auskunft, kein Platz. */
.lg-platz.leer{background:none;border-style:dashed;border-color:var(--line2);color:var(--mut);font-weight:700}
.lg-platz.xl.leer{font-size:var(--lg-fs-lg)}

/* --- .lg-kasten: der Meldekasten (12px 16px, Radius 12, .875 rem). ----------------------------
   Ersetzt alle Meldekästen: Flash, Dublette, Nachbestellung, Ungewiss, Shop-Fehler, „in Arbeit",
   „neu laden", die gelbe Zurückstellung, den grünen Übergeben-Kasten. Ton über Fläche, Rand und
   Textfarbe; .still ist die sachliche Auskunft ohne Farbe („Nicht in der Arbeitsliste"). */
.lg-kasten{margin:0 0 var(--lg-s3);padding:var(--lg-s3) var(--lg-s4);border-radius:var(--lg-r);
  font-size:var(--lg-fs-sm);line-height:1.5;
  background:var(--card2);border:1px solid var(--line2);color:var(--ink)}
.lg-kasten.still{color:var(--mut)}
.lg-kasten.still b{color:var(--ink)}
.lg-kasten.ok{background:var(--lg-ok-tint);border-color:var(--lg-ok);color:var(--lg-ok-ink)}
.lg-kasten.warn{background:var(--lg-warn-tint);border-color:var(--lg-warn);color:var(--lg-warn-ink)}
.lg-kasten.bad{background:var(--lg-bad-tint);border-color:var(--lg-bad);color:var(--lg-bad-ink)}
.lg-kasten.info{background:var(--lg-info-tint);border-color:var(--lg-info);color:var(--lg-info-ink)}
.lg-kasten p{margin:0}
.lg-kasten p+p,.lg-kasten form,.lg-kasten ul{margin-top:var(--lg-s2)}
.lg-kasten b{word-break:break-word}
.lg-kasten a{color:inherit;font-weight:700}
.lg-kasten:empty{display:none}

/* --- .lg-zeile: die Listenzeile (12 px innen, 8 px Abstand, Tap-Ziel 56 px). ------------------
   Eine Zeile je Kunde, je Treffer, je Termin. Als <a> ist die ganze Zeile der Link; als <div>
   oder <label> (Haken) dieselbe Fläche. Links der Zähler oder die Pille, in der Mitte Name und
   Zweitzeile, rechts höchstens Platz und zwei Pillen. */
.lg-zeile{display:flex;align-items:center;gap:var(--lg-s3);min-height:var(--lg-h-big);
  margin:0 0 var(--lg-s2);padding:var(--lg-s3);border-radius:var(--lg-r);
  background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;
  font-size:var(--lg-fs-sm);line-height:1.35}
a.lg-zeile:hover,label.lg-zeile:hover{background:var(--card2)}
.lg-zeile>b{font-size:var(--lg-fs-md);font-weight:700}
.lg-zeile .lg-mitte{flex:1;min-width:0}
.lg-zeile .lg-mitte b{display:block;font-size:var(--lg-fs-md);font-weight:700;line-height:1.25;word-break:break-word}
/* Nur die Zweitzeile (das direkte Kind), nicht jeder Span im Namen: „Steht auf <Platz>" trägt einen
   .lg-platz IM <b>, der sonst klein, gedämpft und als Block dastünde. */
.lg-zeile .lg-mitte>span{display:block;margin-top:2px;color:var(--mut);font-size:var(--lg-fs-xs);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-zeile .lg-rechts{flex:0 0 auto;display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:48%}
.lg-zeile.aus{opacity:.6}
/* Eine Zeile mit Ton (Mockup „Handy · Packliste": die Zeile eines Namensgleichen trägt den gelben
   Rand, die eines Nachzupackenden den roten). Der Ton sitzt am Rand, nicht im Text, denn mit
   Handschuhen verdeckt der Daumen den Text. */
.lg-zeile.warn{border-color:var(--lg-warn)}
.lg-zeile.bad{border-color:var(--lg-bad)}
/* „Steht auf D5 · unten links": die Zeile mit dem Platz vorn und „entfernen" hinten. Das Formular
   des Knopfs liegt in der Zeile; ohne diese Regel bekäme es die Ränder eines Karten-Formulars.
   Ein Knopf neben Text oder Feld in einer Zeile ist schmal (12 px innen), nicht klein. */
.lg-zeile>form{margin:0;display:contents}
.lg-zeile .lg-knopf{padding:0 var(--lg-s3)}

/* --- .lg-karte: die Karte (16 px innen, Radius 12); Rand nach Ton (.warn, .bad). ----------------
   Der Kartenkopf (views/_lager_kopf.php): Name lg/800, Zeile gedämpft, rechts der Zähler. Die
   Textfarbe steht ausdrücklich: app.css kennt ein nacktes `.warn{color:var(--acc2)}`, und ohne
   diese Zeile wäre im Cockpit-Rahmen der ganze Kopf einer gelb gerandeten Karte bernsteinfarben
   (gesehen 20.09.2026 bei „Zwei Schmidt"). Der Ton sitzt am Rand, nicht im Text. */
.lg-karte{padding:var(--lg-s4);border-radius:var(--lg-r);background:var(--card);border:1px solid var(--line);
  margin:0 0 var(--lg-s3);color:var(--ink)}
.lg-karte.warn{border-color:var(--lg-warn)}
.lg-karte.bad{border-color:var(--lg-bad)}
.lg-karte.ok{border-color:var(--lg-ok)}
/* 800 als Ausnahme: der Name auf dem Kartenkopf wird aus einem Meter Abstand gelesen. */
.lg-karte h2,.lg-karte .lg-name{margin:0;font-size:var(--lg-fs-lg);font-weight:800;line-height:1.2;word-break:break-word}
.lg-karte .lg-klein{margin:var(--lg-s1) 0 0;color:var(--mut);font-size:var(--lg-fs-xs);line-height:1.45}
.lg-karte .lg-klein b{color:var(--ink)}
.lg-karte .lg-marken{margin:var(--lg-s2) 0 0;display:flex;gap:5px;flex-wrap:wrap}
.lg-karte .lg-marken:empty{display:none}
.lg-karte .lg-kopfzeile{display:flex;justify-content:space-between;gap:var(--lg-s2);align-items:flex-start}
.lg-karte .lg-kopfzeile>div{flex:1;min-width:0}

/* --- .lg-etikett: die Beschriftung eines Abschnitts (.75 rem, 700, Versalien, --mut). ---------- */
.lg-etikett{margin:var(--lg-s5) 0 var(--lg-s2);font-size:var(--lg-fs-xs);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.lg-etikett:first-child{margin-top:0}

/* --- .lg-feld: das Eingabefeld (48 px, Rand --lg-hair-strong); .gross 56 px und größere Schrift.
   Auf input, select und textarea. Das Etikett dazu ist ein <label> mit .lg-etikett. */
.lg-feld{display:block;width:100%;min-height:var(--lg-h-tap);padding:0 var(--lg-s3);
  background:var(--card2);border:1px solid var(--lg-hair-strong);border-radius:var(--lg-r);
  color:var(--ink);font:inherit;font-size:var(--lg-fs-md);line-height:1.3}
.lg-feld::placeholder{color:var(--faint)}
.lg-feld:focus-visible{outline:none;box-shadow:var(--focus);border-color:var(--acc2)}
.lg-feld.gross{min-height:var(--lg-h-big);font-size:var(--lg-fs-lg);font-weight:700}
textarea.lg-feld{min-height:76px;padding:var(--lg-s2) var(--lg-s3);line-height:1.45;resize:vertical}
select.lg-feld{padding-right:var(--lg-s5)}
input[type="date"].lg-feld{padding:0 var(--lg-s2)}

/* --- .lg-chev: der Klapp-Pfeil, ein gezeichneter Winkel (Mathias 15.10.2026: „der Pfeil ist so komisch
   klein"; das Zeichen ▸ ist in jeder Schrift winzig). Zu zeigt er nach rechts, offen nach unten. Derselbe
   Winkel steckt als ::after in .lg-klappe und .lg-ub2-best; offen heißt dort [open], in der Körbchen-
   Tabelle tr.offen. Kein padding daran: Es vergrößert den Rahmen und verzieht den Winkel. */
.lg-chev,.lg-klappe>summary::after,.lg-ub2-best>summary::after{content:"";display:inline-block;flex:none;box-sizing:border-box;
  width:10px;height:10px;margin:0 5px 0 3px;border:solid currentColor;border-width:0 2.5px 2.5px 0;border-radius:1px;
  transform:rotate(-45deg);transition:transform .15s;vertical-align:.1em}
.lg-klappe[open]>summary::after,.lg-ub2-best[open]>summary::after,.lg-chev.auf,.lg-chev.unten,tr.offen .lg-chev{transform:translateY(-2px) rotate(45deg)}
/* --- .lg-klappe: ein <details>, dessen Summary eine Zeile mit „▸" rechts ist. --------------------
   Für alles, was zugeklappt beginnen darf: Bestellungen, Notiz, Bisher, Warnungen mit Liste.
   Aufgeklappt bekommt der Inhalt denselben Innenabstand wie eine Karte. */
.lg-klappe{margin:0 0 var(--lg-s2);background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r)}
.lg-klappe>summary{display:flex;align-items:center;gap:var(--lg-s3);min-height:var(--lg-h-big);
  padding:var(--lg-s3);cursor:pointer;list-style:none;font-size:var(--lg-fs-sm);line-height:1.35;color:var(--mut)}
.lg-klappe>summary b{color:var(--ink)}
.lg-klappe>summary::-webkit-details-marker{display:none}
.lg-klappe>summary::after{margin-left:auto;color:var(--mut)}
.lg-klappe[open]>summary{border-bottom:1px solid var(--line)}
.lg-klappe>summary:focus-visible{outline:none;box-shadow:inset var(--focus)}
/* Der zweizeilige Klappenkopf der Bestellungen (views/lager_karte.php Abschnitt 5, lager_uebergabe.php):
   oben „Bestellung 17208" in --ink, darunter „15 Positionen · vom 17.09. · auf Zahlung wartend"
   klein und gedämpft, rechts die Pillen F3 / § 20 vor dem Pfeil. Dieselbe Form wie .lg-zeile .lg-mitte. */
.lg-klappe>summary .lg-mitte{flex:1;min-width:0}
.lg-klappe>summary .lg-mitte b{display:block;font-size:var(--lg-fs-md);font-weight:700;line-height:1.25}
.lg-klappe>summary .lg-mitte>span{display:block;margin-top:2px;color:var(--mut);font-size:var(--lg-fs-xs);line-height:1.4}
.lg-klappe>summary .lg-pille{flex:none}
.lg-klappe>*:not(summary){margin:0;padding:var(--lg-s3) var(--lg-s4) var(--lg-s4)}
.lg-klappe>ul,.lg-klappe>ol{list-style:none}
/* Eine Klappe, die zugleich ein Kasten mit Ton ist („3 weitere Schmidt ▸"): der Ton kommt vom
   Kasten, die Klapp-Mechanik von hier. */
.lg-klappe.lg-kasten{padding:0}
.lg-klappe.lg-kasten>summary{color:inherit;min-height:var(--lg-h-tap)}
.lg-klappe.lg-kasten>summary::after{color:inherit}
.lg-klappe.lg-kasten[open]>summary{border-bottom-color:currentColor}
/* Die Klappe mit Plus (Einrichten: „+ Serie anlegen", aufgeklappt „–"): das Plus in der Hausfarbe
   (Vertrag: Klappen-Plus), der Titel in Textfarbe, kein Pfeil rechts. Im Cockpit-Rahmen ist die
   Summary 48 statt 56 px hoch, wie jeder Knopf dort. */
.lg-klappe.plus>summary{color:var(--ink);font-weight:700}
.lg-klappe.plus>summary::before{content:"+";display:inline-block;width:1.1em;color:var(--lg-brand);font-weight:700;flex:none}
.lg-klappe.plus[open]>summary::before{content:"\2013"}
.lg-klappe.plus>summary::after{content:none}
.lg-cockpit .lg-klappe>summary{min-height:var(--lg-h-tap)}

/* --- .lg-kacheln + .lg-kachel: die Kachelmatrix (Grid 4 Spalten, Lücke 6 px). ------------------
   Für die Platzwahl (Strang B) und den Lagerort (Strang D): Regale als Kacheln, darunter die
   Fächer. Jede Kachel ist ein <label> mit einem Radio darin; .an ist die gewählte, .belegt trägt
   den Namen als Zweitzeile, disabled ist gesperrt. Ein Tipp statt vier Dropdown-Tipps. */
.lg-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 var(--lg-s2)}
.lg-kacheln.drei{grid-template-columns:repeat(3,1fr)}
.lg-kachel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:var(--lg-h-tap);padding:4px;margin:0;border-radius:var(--lg-r);
  background:var(--card2);border:1px solid var(--line2);color:var(--ink);
  font-size:var(--lg-fs-sm);font-weight:700;line-height:1.2;text-align:center;cursor:pointer;
  font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;user-select:none}
.lg-kachel input{position:absolute;opacity:0;width:0;height:0;margin:0}
.lg-kachel:hover{border-color:var(--lg-hair-strong)}
.lg-kachel.an,.lg-kachel:has(input:checked){background:var(--lg-place-tint);border-color:var(--lg-place);color:var(--lg-place-ink)}
.lg-kachel:has(input:focus-visible){box-shadow:var(--focus)}
/* Vertrag: Name als Zweitzeile, gedämpft. Belegt und „zuletzt" sind leise (400), das Fach selbst
   bleibt 700. */
.lg-kachel.belegt{font-weight:400;color:var(--mut)}
.lg-kachel.belegt small,.lg-kachel small{display:block;font-size:var(--lg-fs-xs);font-weight:400;color:var(--mut);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-kachel.belegt b{display:block;color:var(--ink);font-size:var(--lg-fs-sm)}
.lg-kachel[disabled],.lg-kachel:has(input:disabled){opacity:.4;cursor:default}
.lg-kachel.zuletzt{font-weight:400;color:var(--mut)}
.lg-kachel.zuletzt b{display:block;color:var(--ink);font-size:var(--lg-fs-sm)}

/* --- .lg-ampel: die Zahlungslage in zwei Wörtern (Strang C). ----------------------------------
   Titel md/700, Grund sm gedämpft, Betrag xl/800 links davor. Ton über Fläche und Rand. Unten
   Luft: Beim lesenden Betreiber folgen direkt die Bestellungs-Klappen (Mathias, 20.09.2026). */
.lg-ampel{display:flex;align-items:center;gap:var(--lg-s3);margin:var(--lg-s3) 0 var(--lg-s4);padding:var(--lg-s3);
  border-radius:var(--lg-r);background:var(--card2);border:1px solid var(--line2);color:var(--ink)}
.lg-ampel.ok{background:var(--lg-ok-tint);border-color:var(--lg-ok)}
.lg-ampel.warn{background:var(--lg-warn-tint);border-color:var(--lg-warn)}
.lg-ampel.bad{background:var(--lg-bad-tint);border-color:var(--lg-bad)}
.lg-ampel>div{min-width:0}
.lg-ampel b{display:block;font-size:var(--lg-fs-md);font-weight:700;line-height:1.25}
.lg-ampel span{display:block;font-size:var(--lg-fs-sm);color:var(--mut);line-height:1.4}
.lg-ampel .lg-betrag{flex:none;font-size:var(--lg-fs-xl);font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.lg-ampel.warn .lg-betrag{color:var(--lg-warn-ink)}
.lg-ampel.bad .lg-betrag{color:var(--lg-bad-ink)}

/* --- .lg-buehne: der Fertig-Bildschirm, seit 21.09.2026 als KARTE (Lager_Mockup_Fertig.html, Vorschlag A).
   Vorher war die ganze Fläche grün, alles klebte oben, der Text lief bis an die Ränder, die untere
   Hälfte blieb leer (Mathias: „sieht kaputt aus"). Jetzt: Der Grund bleibt dunkel wie der Rest der
   Seite, die Quittung ist EINE grün gerahmte Karte in der Mitte (.lg-bu-karte) mit Haken im Kreis,
   dem Wort in Versalien, Uhrzeit · Name, dem Kundennamen, dem Platz als grüner Kachel (die einzige
   große grüne Fläche: ein Vertipper springt weiter ins Auge), einer Quittung je Bestellung und den
   Chips zur Mail. Der Fuß (Textlink, Knopf) klebt unten. Im Cockpit ist die Karte 760 px breit. */
.lg-buehne{display:flex;flex-direction:column;align-items:stretch;gap:var(--lg-s4);
  padding:var(--lg-s3) 0 0;min-height:60vh}
body.lg .lg-buehne{min-height:calc(100vh - var(--lg-h-kopf) - var(--lg-h-nav) - var(--lg-s4) * 2 - env(safe-area-inset-bottom))}
/* Die Karte, mittig in der freien Höhe (margin:auto 0 innerhalb der Spalte). */
.lg-bu-karte{margin:auto 0;background:var(--card);border:1px solid var(--lg-ok);border-radius:var(--lg-r-lg);
  padding:var(--lg-s5) var(--lg-s4) var(--lg-s4);text-align:center;
  box-shadow:0 0 0 4px var(--lg-ok-tint),0 18px 50px rgba(0,0,0,.45)}
.lg-bu-karte.warn{border-color:var(--lg-warn);box-shadow:0 0 0 4px var(--lg-warn-tint),0 18px 50px rgba(0,0,0,.45)}
/* Der Haken im Kreis. */
.lg-bu-haken{width:46px;height:46px;border-radius:50%;background:var(--lg-ok);color:var(--lg-ok-on);
  margin:0 auto var(--lg-s2);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:900;line-height:1}
.lg-bu-karte.warn .lg-bu-haken{background:var(--lg-warn);color:#3f2a00}
/* Das Wort („Übergeben", „Abholbereit", „Gebucht") in Versalien, darunter Uhrzeit · Name, dann der Kundenname. */
.lg-buehne h2{margin:0;font-size:var(--lg-fs-lg);font-weight:800;line-height:1.25;color:var(--ink);word-break:break-word;text-wrap:balance}
.lg-bu-was{font-size:var(--lg-fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--lg-ok-ink);font-weight:800}
.lg-bu-karte.warn .lg-bu-was{color:var(--lg-warn-ink)}
.lg-buehne p{margin:0;font-size:var(--lg-fs-sm);line-height:1.5;color:var(--mut)}
.lg-buehne .lg-bu-wer{font-size:var(--lg-fs-xs);margin:0 0 var(--lg-s1)}
.lg-buehne a{color:var(--mut);text-decoration:underline;font-size:var(--lg-fs-sm)}
body.lg .lg-buehne a.lg-knopf.dunkel,.lg-buehne a.lg-knopf.dunkel{color:var(--lg-ok-on);text-decoration:none}
/* Der Platz als grüne Kachel, 3 rem: die eine Größe außerhalb der Skala, der Vertrag nennt sie. */
.lg-buehne .lg-platz,.lg-buehne .lg-platz.xl{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on);
  font-size:3rem;font-weight:900;padding:4px 24px;border-radius:var(--lg-r-lg);line-height:1.05;margin:var(--lg-s3) auto 2px;letter-spacing:-.02em}
.lg-bu-karte.warn .lg-platz{background:var(--lg-warn);border-color:var(--lg-warn);color:#3f2a00}
.lg-buehne .lg-platz.leer,.lg-buehne .lg-platz.xl.leer{background:none;border:2px dashed var(--line2);color:var(--mut);
  font-size:var(--lg-fs-md);font-weight:700;padding:12px 20px}
/* Die Quittung: eine Zeile je Bestellung unter einem Strich, Nummer fett links, Stand ruhig, die
   Rechnung rechts als grünes Wort (rückt bei Platznot in die zweite Zeile). */
.lg-buehne ul.lg-bu-zeilen{list-style:none;margin:var(--lg-s4) calc(var(--lg-s4) * -1) 0;padding:0;
  border-top:1px solid var(--line);text-align:left;font-size:var(--lg-fs-sm);line-height:1.4}
.lg-buehne ul.lg-bu-zeilen li{display:flex;flex-wrap:wrap;gap:2px var(--lg-s3);align-items:baseline;
  padding:var(--lg-s2) var(--lg-s4);border-bottom:1px solid var(--line)}
.lg-buehne ul.lg-bu-zeilen li b{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.lg-buehne ul.lg-bu-zeilen li span{color:var(--mut);flex:0 1 auto;min-width:0}
.lg-buehne ul.lg-bu-zeilen li em{font-style:normal;color:var(--lg-ok-ink);font-weight:700;margin-left:auto;font-size:var(--lg-fs-xs);white-space:nowrap}
.lg-buehne ul.lg-bu-zeilen li a{font-size:inherit;color:var(--ink)}
/* Die Chips zur Mail und zur Rechnung, unter der Quittung. */
.lg-bu-chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:var(--lg-s3)}
/* Ein Hinweis (Teilübergabe, keine Mail, wartende Körbchen) ist ein Kasten IN der Karte, links ausgerichtet. */
.lg-bu-karte .lg-kasten{margin:var(--lg-s3) 0 0;text-align:left}
/* Der Fuß der Bühne: klebt unten, Textlink über dem grünen Knopf. */
.lg-buehne .lg-fuss{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:var(--lg-s2);align-items:center}
.lg-buehne .lg-fuss>a:not(.lg-knopf){min-height:var(--lg-h-tap);display:inline-flex;align-items:center}
.lg-buehne .lg-knopf.dunkel{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on)}
.lg-buehne .lg-knopf.dunkel:hover{border-color:var(--lg-ok);color:var(--lg-ok-on);filter:brightness(1.06)}
/* --- .lg-haupt: der Container des Hauptknopfs, klebt unten über der Reiterleiste. ---------------
   position:sticky, damit der Haken erreichbar bleibt, während die Karte scrollt. Der Verlauf
   darunter verhindert, dass die Liste unter dem Knopf durchscheint. Im Cockpit steht er im
   Fluss. Der Kleintext darunter ist EINE Zeile („2 Bestellungen · Abholmail geht raus"). */
.lg-haupt{position:sticky;bottom:calc(var(--lg-h-nav) + env(safe-area-inset-bottom));z-index:4;
  margin:var(--lg-s4) calc(var(--lg-s4) * -1) 0;padding:var(--lg-s3) var(--lg-s4);
  background:linear-gradient(180deg,rgba(15,18,32,0) 0,var(--bg) 28%)}
.lg-haupt p,.lg-haupt .lg-klein{margin:var(--lg-s2) 0 0;text-align:center;font-size:var(--lg-fs-xs);color:var(--mut);line-height:1.5}
.lg-haupt .lg-klein b{color:var(--ink)}
.lg-cockpit .lg-haupt{position:static;margin:var(--lg-s4) 0 0;padding:0;background:none}

/* --- .lg-segment: die Unterreiter-Leiste als Segment (aktiv mit --lg-brand-Tint). --------------
   „Zu packen · 53 | Fertig · 4", „nach Name | nach Platz". Links, keine Skript-Umschalter. Die
   Zahl im Segment ist eine .lg-pille. Der aktive Eintrag ist eine Tint-Fläche mit Rand in der
   Hausfarbe und Text in --ink (12:1); die Pille darin bleibt, wie sie ist. Weiß auf vollem Rot
   hielt 3,1:1, die Pille darin 2,6:1. Auch die Tagesliste der Termine (views/lager_termine.php)
   trägt seit dem Fix-Durchgang dieses Segment statt der alten Klasse .lg-pk-unter. */
.lg-segment{display:flex;gap:2px;padding:2px;margin:0 0 var(--lg-s3);
  border:1px solid var(--line2);border-radius:var(--lg-r);background:var(--card)}
.lg-segment>a,.lg-segment>span,.lg-segment>button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;min-height:calc(var(--lg-h-tap) - 4px);padding:0 var(--lg-s3);
  border:0;border-radius:var(--lg-r-sm);background:none;color:var(--mut);
  font:inherit;font-size:var(--lg-fs-sm);font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
.lg-segment>a:hover{color:var(--ink)}
.lg-segment>.an{background:var(--lg-brand-tint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--lg-brand)}
/* DREI EINTRÄGE MIT ZAHL in einer Telefonbreite (Packliste: Zu packen · Fertig · Unbezahlt,
   Mathias 20.09.2026: „passt nicht in die Zeile"): enger gesetzt, eine Schriftstufe kleiner,
   die Pille schmaler. Drei mal „Wort + dreistellige Zahl" müssen in 360 px passen, deshalb
   auch das kurze Wort „Unbezahlt" in views/lager_packen.php. Im Cockpit gilt das nicht, dort ist
   das Segment inline und breit genug. */
.lg-koerper .lg-segment.drei>a{padding:0 var(--lg-s1);gap:4px;font-size:var(--lg-fs-xs)}
.lg-koerper .lg-segment.drei>a .lg-pille{padding:2px 6px}
/* Der STILLE aktive Eintrag (Sortierung im Betreiber-Packen, Strang X): nur Text in --ink und
   ein Unterstrich, keine Füllung. Ein Segment je Leiste darf laut sein, nicht zwei. */
.lg-segment>.aktiv-still,.lg-segment[data-still]>.an{background:transparent;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
/* Ein Knopf, den nur der Browser sieht: der erste Submit im Haken-Formular ist „Nur Platz merken",
   damit Enter im Zusatz- oder Kistenfeld nie den Haken „Fertig gepackt" auslöst (Code-Review 20.09.).
   Off-screen statt display:none, weil ein unsichtbarer Knopf sonst nicht der Default-Knopf wäre. */
.lg-versteckt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Die Zeile unter den Heute-Kacheln („Termine heute: Morgen · Woche"): eine Ergänzung zur Kachel,
   deshalb klein und ohne eigenen Kasten. */
.lg-cockpit p.lg-klein[data-kachel-mehr]{margin:var(--lg-s2) 0 0}
.lg-cockpit .lg-segment{display:inline-flex}
.lg-cockpit .lg-segment>a,.lg-cockpit .lg-segment>span,.lg-cockpit .lg-segment>button{flex:0 1 auto;min-height:calc(var(--lg-h-desk) - 4px)}

/* Gemeinsames Kleingedrucktes außerhalb von Karte und Bühne. */
.lg-klein{color:var(--mut);font-size:var(--lg-fs-xs);line-height:1.45}
.lg-hinweis{margin:0;max-width:66ch}
/* Der stille Zweitknopf („Nur Platz merken", „Speichern") und die Rücknahme: eine Zeile Abstand
   nach oben, sonst nichts. */
.lg-kt-still{margin:var(--lg-s3) 0 0}

/* DRUCKGEFÜHL (Design-Prüfung, Befund 8): Alles, was am Telefon angetippt wird und kein Knopf ist
   (Zeile, Kachel, Klappen-Summary, Segment, Reiter, Namensmenü, Termin-Kachel), sackt beim Drücken
   ein Pixel ab und wird eine Spur dunkler, mit weichem Übergang. Der Knopf hat das schon oben. */
a.lg-zeile,label.lg-zeile,.lg-kachel,.lg-klappe>summary,.lg-segment>a,.lg-segment>button,
.lg-reiter .lg-reiter-ziel,.lg-wer,.lg-tr-kachel button,.lg-ht-kacheln>a{
  transition:background .15s,border-color .15s,color .15s,filter .15s,transform .15s,box-shadow .15s}
a.lg-zeile:active,label.lg-zeile:active,.lg-kachel:active,.lg-klappe>summary:active,.lg-segment>a:active,
.lg-segment>button:active,.lg-reiter .lg-reiter-ziel:active,.lg-wer:active,.lg-tr-kachel button:active,
.lg-ht-kacheln>a:active{transform:translateY(1px);filter:brightness(.92)}

/* `hidden` muss gewinnen: Bausteine, die display setzen (Kacheln als Grid, Knöpfe und Segmente
   als inline-flex, Etiketten), würden das Attribut sonst überstimmen. So kann der Server einen
   Scan-Knopf versteckt liefern und das Skript den „Suchen"-Knopf verstecken. */
.lg-kacheln[hidden],.lg-knopf[hidden],.lg-etikett[hidden],.lg-platzwahl [hidden],.lg-eb-je .lg-mitte [hidden]{display:none}
.lg-ab [hidden]{display:none!important}

/* =================================================================================================
   3. DER RAHMEN: Kopfzeile, Reiterleiste, Körper, Cockpit
   ================================================================================================= */

/* --- Kopfzeile: links der Reitername, rechts wer arbeitet (Mockup Teil D, .topbar) -------------- */
.lg-kopf{display:flex;align-items:center;gap:var(--lg-s3);padding:var(--lg-s2) var(--lg-s4);min-height:var(--lg-h-kopf);
  background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
/* Der Reitername in Textfarbe, nicht rot: Rot ist der aktive Reiter unten, nicht die Überschrift. */
.lg-marke{font-weight:700;font-size:var(--lg-fs-md);color:var(--ink);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Der Name als Menü: „Sabine ⌄", darin der Abmelden-Knopf. Kein Dauer-Abmelden-Knopf mehr, denn
   er war der zweitgrößte Knopf jeder Seite und tat das Seltenste. <details> ohne Skript. */
.lg-wer-menue{position:relative;margin:0}
.lg-wer{display:inline-flex;align-items:center;gap:6px;min-height:var(--lg-h-tap);padding:0 var(--lg-s2);
  border-radius:var(--lg-r-sm);font-size:var(--lg-fs-sm);font-weight:700;color:var(--mut);white-space:nowrap;
  cursor:pointer;list-style:none}
.lg-wer::-webkit-details-marker{display:none}
.lg-wer:hover,.lg-wer-menue[open] .lg-wer{color:var(--ink);background:var(--card2)}
.lg-wer .lg-chev{color:var(--mut)}
.lg-wer-menue[open] .lg-chev.unten{transform:translateY(2px) rotate(-135deg)}
.lg-wer-liste{position:absolute;right:0;top:calc(100% + 4px);min-width:180px;padding:var(--lg-s2);
  background:var(--card2);border:1px solid var(--line2);border-radius:var(--lg-r);
  box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:6}
.lg-wer-liste .lg-klein{display:block;padding:0 var(--lg-s2) var(--lg-s2)}
/* `.lg-ab` heißt auch der Reiter Abholung; die Abmelden-Regel hängt deshalb an der Liste. */
.lg-wer-liste .lg-ab{margin:0}
.lg-wer-liste .lg-knopf{width:100%}
.lg-punkt{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}

.lg-koerper{padding:var(--lg-s4);max-width:720px;margin:0 auto}

/* --- Der Platzhalter eines Reiters ---------------------------------------------------------- */
.lg-leer{background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);padding:var(--lg-s5) var(--lg-s4)}
.lg-leer h2,.lg-leer h3{margin:0 0 var(--lg-s2);font-size:var(--lg-fs-md)}
.lg-leer h2:last-child,.lg-leer h3:last-child{margin-bottom:0}
.lg-leer p{margin:0;color:var(--mut);font-size:var(--lg-fs-sm);line-height:1.55}
.lg-leer p+p{margin-top:var(--lg-s2)}

/* --- Reiterleiste: dieselben Ziele, zwei Orte ------------------------------------------------ */
.lg-reiter{display:flex}
/* Zwei Klassen, obwohl eine reichte: `body.lg a` weiter oben färbt jeden Link bernsteinfarben
   und ist genauer als `.lg-reiter-ziel` allein. Im Mockup ist der ruhende Reiter gedämpft, und
   nur der offene trägt die Hausfarbe. */
.lg-reiter .lg-reiter-ziel{display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:700;color:var(--mut)}
.lg-reiter .lg-reiter-ziel:hover{color:var(--ink)}

/* Unten (Telefon): feste Leiste, gleich breite Felder, Symbol über der Beschriftung (.75 rem/700).
   Der aktive Reiter: Beschriftung in --ink (12:1) auf der Tint-Fläche, nur das Symbol trägt die
   Hausfarbe (Design-Prüfung, Befund 7; Rot als Textfarbe auf dem Tint hielt 4,45:1). Die Badge
   am Reiter „Packen" ist eine .lg-pille.bad mit der Zahl der offenen Körbchen. */
.lg-reiter-unten{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--card);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.lg-reiter-unten .lg-reiter-ziel{position:relative;flex:1;flex-direction:column;gap:2px;min-height:var(--lg-h-nav);
  font-size:var(--lg-fs-xs);padding:var(--lg-s2) var(--lg-s1)}
.lg-reiter-unten .lg-ikon{width:24px;height:24px;display:block}
.lg-reiter-unten .lg-reiter-ziel .lg-zurueck{font-size:var(--lg-fs-lg);font-weight:700;line-height:24px;height:24px}
.lg-reiter-unten .lg-reiter-ziel.an{color:var(--ink);background:var(--lg-brand-tint)}
.lg-reiter-unten .lg-reiter-ziel.an .lg-ikon{color:var(--lg-brand)}
.lg-reiter-unten .lg-reiter-ziel .lg-pille{position:absolute;top:6px;left:calc(50% + 6px);padding:1px 6px;min-width:20px;
  justify-content:center;font-size:var(--lg-fs-xs);line-height:1.3}

/* Oben (Cockpit): die Reiter auf den Maßen von .tabbar in app.css (gap 2, md/600 als
   Cockpit-Gewicht, 11px 15px, 2 px Unterstrich), damit Lager aussieht wie Preis-Radar oder
   Lieferungen. md ist im Cockpit-Rahmen --fs-md, also die .9 rem der .tabbar. */
.lg-reiter-oben{gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 var(--lg-s4)}
.lg-reiter-oben .lg-reiter-ziel{min-height:var(--lg-h-tap);padding:11px 15px;font-size:var(--lg-fs-md);font-weight:600;gap:7px;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.lg-reiter-oben .lg-reiter-ziel.an{color:var(--ink);border-bottom-color:var(--acc)}
.lg-reiter-oben .lg-pille{padding:1px 6px;font-size:var(--lg-fs-xs)}
.lg-cockpit .pagehead .lg-punkt{display:inline-block;vertical-align:middle;flex:none}

/* Im Cockpit-Rahmen laufen Listen und Karten nicht über die ganze Breite (1.300 px Handy-Karte):
   760 px für alles, was am Telefon gebaut ist. Heute, Leitstand, Plätze und die Betreiber-Tafeln
   bleiben breit. */
.lg-cockpit .lg-pk,.lg-cockpit .lg-kt,.lg-cockpit .lg-ub,.lg-cockpit .lg-ab,.lg-cockpit .lg-fertig,
.lg-cockpit .lg-eb,.lg-cockpit .lg-ei>form,.lg-cockpit .lg-ei>[data-lager-artikeltreffer],
.lg-cockpit .lg-ei>.lg-etikett,.lg-cockpit .lg-ei>.lg-ab-liste,.lg-cockpit .lg-ei>.lg-leer,
.lg-cockpit .lg-ei>.lg-scan,.lg-cockpit .lg-ei>.lg-klappe,.lg-cockpit .lg-ei>.lg-kasten,
.lg-cockpit>.lg-kasten,.lg-cockpit>.lg-leer{max-width:760px}

/* Ab Tablettbreite darf der schlanke Rahmen atmen; die Leiste bleibt trotzdem unten, weil auch
   ein Tablet im Lager in der Hand gehalten wird. */
@media (min-width:700px){
  .lg-koerper{padding:var(--lg-s5)}
  .lg-haupt{margin-left:calc(var(--lg-s5) * -1);margin-right:calc(var(--lg-s5) * -1);padding-left:var(--lg-s5);padding-right:var(--lg-s5)}
}

/* =================================================================================================
   4. RESTE JE ANSICHT (Klassen ohne Baustein; Werte auf der Skala)
   ================================================================================================= */

/* --- Die Überschrift eines Reiters im Cockpit (views/lager_*.php, nur $lagBetreib) ------------
   Am Telefon trägt die Kopfzeile den Reiternamen, dort gibt es die zweite Überschrift nicht. */
.lg-pk-kopf h2,.lg-pl-kopf h2{margin:0 0 var(--lg-s1);font-size:var(--lg-fs-md);display:flex;align-items:baseline;gap:var(--lg-s3);flex-wrap:wrap}
.lg-pl-sub{margin:0 0 var(--lg-s4);color:var(--mut);font-size:var(--lg-fs-sm);max-width:66ch;line-height:1.55}

/* --- Reiter „Plätze" (views/lager_plaetze.php) -----------------------------------------------
   Die Plätze sieht nur der Betreiber, also immer im Cockpit-Rahmen. Die Regeln stehen trotzdem
   hier und nicht in app.css: Sie gehören zu dieser einen Seite, und wer sie sucht, sucht sie
   beim Lager. */
/* Die drei Klappen („Serie anlegen", „Einzelnen Platz anlegen", „Reihenfolge ändern") sind
   .lg-klappe.plus (Abschnitt 2); eigen ist nur der Zusatz in der Summary. */
.lg-pl-opt{font-weight:400;color:var(--mut);font-size:var(--lg-fs-xs)}

form.lg-pl-form{background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);padding:var(--lg-s4);margin:0 0 var(--lg-s4)}
/* In der Klappe ist das Formular kein Kasten im Kasten: Rand und Grund kommen von der Klappe. */
.lg-klappe>form.lg-pl-form{background:none;border:0;border-radius:0}
.lg-pl-form h3{margin:0 0 var(--lg-s3);font-size:var(--lg-fs-md)}
.lg-pl-reihe{display:flex;gap:var(--lg-s3);flex-wrap:wrap}
.lg-pl-reihe>label{flex:1 1 180px;min-width:0}
.lg-pl-reihe>label.lg-pl-schmal{flex:0 1 110px}
.lg-pl-form label{display:block;font-size:var(--lg-fs-xs);font-weight:700;color:var(--mut);margin:0 0 var(--lg-s3)}
.lg-pl-form .lg-feld{margin-top:5px}
.lg-pl-hilfe{margin:2px 0 var(--lg-s3);color:var(--mut);font-size:var(--lg-fs-xs);line-height:1.5;max-width:66ch}
.lg-pl-knoepfe{display:flex;gap:var(--lg-s2);flex-wrap:wrap;align-items:center}

.lg-pl-liste{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--lg-r);overflow:hidden}
.lg-pl-zeile{display:flex;align-items:center;gap:var(--lg-s3);padding:9px 13px;min-height:var(--lg-h-tap);border-top:1px solid var(--line)}
.lg-pl-liste>li:first-child{border-top:none}
.lg-pl-zeile.aus{opacity:.55}
.lg-pl-code{flex:0 0 auto;min-width:3.2em;font-weight:800;font-size:var(--lg-fs-md);color:var(--lg-place-ink)}
.lg-pl-mitte{flex:1;min-width:0;display:flex;gap:9px;flex-wrap:wrap;align-items:baseline;font-size:var(--lg-fs-sm)}
.lg-pl-frei{color:var(--mut)}
.lg-pl-belegt{color:var(--ok);font-weight:700}
.lg-pl-gesperrt{color:var(--acc2);font-weight:700}
.lg-pl-hinweis{color:var(--faint)}
.lg-pl-tun{flex:0 0 auto;display:flex;gap:6px;align-items:center}
.lg-pl-mini{margin:0}

.lg-pl-sort{display:flex;flex-wrap:wrap;gap:var(--lg-s2);margin:0 0 var(--lg-s4)}
.lg-pl-sort label{display:flex;align-items:center;gap:7px;margin:0;background:var(--card2);
  border:1px solid var(--line2);border-radius:var(--lg-r-sm);padding:5px 9px}
.lg-pl-sort label span{font-weight:800;color:var(--lg-place-ink);font-size:var(--lg-fs-sm)}
.lg-pl-sort .lg-feld{width:64px;margin:0;min-height:var(--lg-h-desk);text-align:center;padding:0 var(--lg-s2)}

@media (max-width:560px){
  .lg-pl-zeile{flex-wrap:wrap}
  .lg-pl-tun{width:100%;justify-content:flex-end}
}

/* --- Reiter „Zu packen" (views/lager_packen.php, Mockup Teil B Tag 2) -------------------------
   Eine Zeile je KUNDE, seit dem Feinschliff der Baustein .lg-zeile (Ton am Rand: .warn, .bad,
   siehe Abschnitt 2). Hier bleibt nur das Suchformular, das auch Abholung und Eingang benutzen,
   die Unterreiter-Leiste der Tagesliste und der Limit-Hinweis. */
.lg-pk-suche{display:flex;gap:var(--lg-s2);flex-wrap:wrap;margin:0 0 var(--lg-s3)}
.lg-pk-suchfeld{flex:1 1 180px;min-width:0;margin:0}
.lg-pk-nurlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Die Liste: Packliste und Tagesliste der Termine. Die Zeilen darin sind .lg-zeile (Abschnitt 2). */
.lg-pk-liste{list-style:none;margin:0;padding:0}
.lg-pk-hilfe{margin:var(--lg-s3) 2px 0;color:var(--mut);font-size:var(--lg-fs-xs);line-height:1.5;max-width:66ch}

/* --- Die Kundenkarte (views/lager_karte.php und lager_uebergabe.php, Mockup Teil B Tag 2) ------
   Ein Körbchen, ein Kunde, eine Karte. Kopf, Klappen, Kästen und Haken sind Bausteine
   (views/_lager_kopf.php, .lg-klappe, .lg-kasten, .lg-haupt). Hier steht, was die Karte sonst
   noch hat: der Live-Kasten, der Verlauf, die Positionsliste. Das Kleingedruckte ist .lg-klein. */
/* Oben auf der Karte: der Kasten für die Live-Hinweise. Leer nimmt er keinen Platz. */
.lg-kt-live:empty{display:none}
.lg-kt-live{margin:0 0 var(--lg-s3)}
.lg-kt-live .lg-kasten{margin:0}
.lg-kt-live .lg-kasten+.lg-kasten{margin-top:var(--lg-s2)}
.lg-kt-live .lg-kasten.info::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--lg-info-ink);margin-right:var(--lg-s2);vertical-align:1px}
.lg-kt-live .lg-kasten.bad{font-weight:700}
.lg-kt-live .lg-kasten.bad a{margin-left:6px;white-space:nowrap;color:#fff}

/* Der Verlauf „Bisher": eine Zeile je Eintrag, Satz oben, Wer und Wann als Kleingedrucktes. */
.lg-kt-verlauf{list-style:none;margin:0;padding:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--lg-r);overflow:hidden}
.lg-kt-verlauf>li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  padding:9px 13px;border-top:1px solid var(--line)}
.lg-kt-verlauf>li:first-child{border-top:none}
.lg-kt-verlauf>li b{font-size:var(--lg-fs-sm);font-weight:700;word-break:break-word}
/* Die Bestellzeile im grünen Übergeben-Kasten: Nummer vorn, Status und Mailstand daneben. */
.lg-kt-nr{flex:0 0 auto;font-weight:700;font-size:var(--lg-fs-sm);color:var(--mut);min-width:4.2em}
.lg-kt-bmitte{flex:1;min-width:0}
.lg-kt-bmitte b{display:block;font-size:var(--lg-fs-sm);font-weight:700;word-break:break-word}
.lg-kt-bmitte .lg-klein{display:block;margin-top:2px}
/* Die Positionsliste je Bestellung in der Klappe (Artikel als Notnagel, siehe views/lager_karte.php):
   Menge, Name, rechts der Lagerort des Artikels. */
.lg-kt-artikel{list-style:none;margin:0;padding:2px 13px 10px;background:var(--card2)}
.lg-kt-artikel>li{display:flex;align-items:baseline;gap:var(--lg-s3);padding:6px 0;border-top:1px solid var(--line)}
.lg-kt-artikel>li:first-child{border-top:none}
.lg-kt-menge{flex:0 0 auto;font-weight:800;font-size:var(--lg-fs-sm);color:var(--acc2);
  min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.lg-kt-artname{flex:1;min-width:0;font-size:var(--lg-fs-sm);line-height:1.4}
/* Die Artikelnummer IMMER unter dem Namen (Mathias, 20.09.2026: „Liste etwas unaufgeräumt"):
   inline sprang sie mal ans Zeilenende, mal in die zweite Zeile, mal brach sie selbst um. */
.lg-kt-artname .lg-klein{display:block;margin:2px 0 0}
/* Der Lagerort des Artikels ist ein .lg-platz (Baustein), in der Liste eine Stufe kleiner. */
.lg-kt-artikel .lg-platz{font-size:var(--lg-fs-xs);padding:2px 8px;align-self:center}
/* Erweiterte Artikelinfo (Schalter lager.artikelinfo, 04.10.2026; Mockup Koerbchen_Artikelinfo_Mockup.html).
   Mit Bild steht die Zeile mittig statt auf der Grundlinie: das Bild ist höher als zwei Textzeilen. */
.lg-kt-artikel.mit-bild>li,.lg-kt-pos.mit-bild .lg-kt-pos-form{align-items:center}
/* Vorschaubild aus dem Shop (thumbnail_images), 48 px am Telefon, 40 px im Cockpit. Weiße Fläche,
   weil die Produktbilder freigestellt auf Weiß sind; contain, damit nichts abgeschnitten wird. */
.lg-kt-bild{flex:0 0 auto;width:48px;height:48px;border-radius:var(--lg-r-sm);background:#fff;
  border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.lg-kt-bild img{width:100%;height:100%;object-fit:contain;display:block}
.lg-cockpit .lg-kt-bild{width:40px;height:40px}
/* Bildchen mit großer Fassung: ein Link, der das Bild groß zeigt (lager.js [BILD], Jens 04.10.2026). */
a.lg-kt-bild.zoom{cursor:zoom-in;text-decoration:none}
a.lg-kt-bild.zoom:hover,a.lg-kt-bild.zoom:focus-visible{border-color:var(--ink);outline:none}
/* Das Overlay: dunkler Grund, das Bild auf Weiß (freigestellte Produktbilder), darunter der Name.
   Ein Tipp irgendwohin schließt, Escape ebenso. */
.lg-zoom{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(15,18,24,.82);cursor:zoom-out}
.lg-zoom.an{display:flex}
.lg-zoom figure{margin:0;max-width:min(92vw,640px);display:flex;flex-direction:column;align-items:center;gap:10px}
.lg-zoom img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;
  background:#fff;border-radius:var(--lg-r-sm);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.lg-zoom figcaption{color:#fff;font-weight:700;font-size:var(--lg-fs-md);text-align:center;line-height:1.3}
.lg-zoom .lg-zoom-zu{position:absolute;top:10px;right:12px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;font-size:28px;line-height:44px;cursor:pointer}
body.lg-zoom-offen{overflow:hidden}
/* Kein Bild im Shop (oder Datei fehlt): gestrichelt wie .lg-platz.leer, damit die Spalte nicht springt. */
.lg-kt-bild.leer{background:none;border:1px dashed var(--line2);color:var(--mut);font-size:.6rem;font-weight:700;text-align:center;line-height:1.1}
/* Die bestellte Menge eine Stufe größer, ab 2 Stück gerahmt. */
.lg-kt-artikel.mit-bild .lg-kt-menge{font-size:var(--lg-fs-md);min-width:2.4em}
.lg-kt-pos.mit-bild .lg-kt-menge{min-width:3.4em}   /* „✓ 2ד: ohne Rahmen wie im Mockup, Namen bündig */
.lg-cockpit .lg-kt-artikel.mit-bild+.lg-kb-mehr>summary{padding-left:calc(40px + 2.4 * var(--lg-fs-md) + 2 * var(--lg-s3))}
.lg-kt-menge.mehr{padding:1px 6px;border:1px solid var(--lg-warn);border-radius:var(--lg-r-sm);background:var(--lg-warn-tint)}
/* Zweitzeile „Art.-Nr. · je 7,99 €": der Preis in Textfarbe, damit er als Erkennungsmerkmal taugt. */
.lg-kt-preis{color:var(--ink);font-weight:700;white-space:nowrap}

/* --- „Es fehlt etwas" (Bauplan 9.9, Mockup Lager_Mockup_Fehlt.html, 20.09.2026) --------------------
   Der gelbe Kasten oben ist der Arbeitsplatz: je fehlende Position eine Zeile (Menge × Name, rechts EIN
   Knopf „✓ da") und darunter das Grundfeld in voller Breite (Eingabetaste speichert, Design-Review M2/M3).
   Die Klappe „Was ist im Körbchen?" darunter: je Zeile ✓/✕ mit Menge, Name mit Nummer, rechts der kleine
   Knopf „fehlt"; fehlende Zeilen ohne Knopf (abgehakt wird oben). Trennlinien in der Warnfarbe, denn
   Schwarz mit 8 % ist auf dem dunklen Grund unsichtbar (Design-Review L4). */
.lg-kt-fehlt>.lg-klein{display:block;margin-top:2px}
.lg-kt-fehlt-liste{list-style:none;margin:var(--lg-s2) 0;padding:0}
.lg-kt-fehlt-liste>li{padding:8px 0;border-top:1px solid rgba(255,176,32,.25)}
.lg-kt-fehlt-liste>li:first-child{border-top:none}
.lg-kt-fehlt-liste>li>b{display:block;font-size:var(--lg-fs-sm)}
.lg-kt-fehlt-liste>li>.lg-klein{display:block;margin-top:1px}
.lg-kt-fehlt-form{display:block}
.lg-kt-fehlt-zeile{display:flex;align-items:center;gap:var(--lg-s3)}
.lg-kt-fehlt-was{flex:1;min-width:0}
.lg-kt-fehlt-was b{display:block;font-size:var(--lg-fs-sm);word-break:break-word}
.lg-kt-fehlt-was .lg-klein{display:block;margin-top:1px}
.lg-kt-fehlt-zeile .lg-knopf.klein{flex:0 0 auto;min-width:4.2em}
.lg-kt-fehlt-form .lg-feld{margin-top:6px;min-height:var(--lg-h-desk);font-size:var(--lg-fs-xs)}
body.lg .lg-kt-fehlt-form .lg-feld{min-height:var(--lg-h-tap)}
.lg-kt-fehlt>p{margin:var(--lg-s2) 0 0}
.lg-kt-pos>li{padding:0}
.lg-kt-pos-form{display:flex;align-items:center;gap:var(--lg-s3);width:100%;padding:8px 0}
.lg-kt-pos>li.fehlt .lg-kt-menge{color:var(--lg-bad-ink)}
.lg-kt-pos>li.fehlt .lg-kt-artname{color:var(--lg-warn-ink)}
.lg-kt-pos>li.drin .lg-kt-menge{color:var(--lg-ok-ink)}
.lg-kt-pos .lg-kt-menge{min-width:3.4em;white-space:nowrap}
.lg-kt-pos .lg-knopf.klein{flex:0 0 auto;min-width:4.2em}
.lg-kt-korb>summary .lg-pille{margin-left:auto}

/* Das Formular des Hakens „Fertig gepackt" (form[data-lager-haken] ist zugleich der Anker des Skripts
   gegen den zweiten Klick, assets/lager.js). Unten Luft: Der stille Knopf „Nur Platz merken" stand
   sonst direkt auf der ersten Bestellungs-Klappe (Mathias, 20.09.2026). */
.lg-kt form[data-lager-haken]{margin-bottom:var(--lg-s5)}
.lg-kt-haken{margin:var(--lg-s5) 0 0;text-align:center}
.lg-kt-haken+.lg-kasten{margin-top:var(--lg-s4)}

/* --- Der Fertig-Bildschirm: die Bühne (.lg-buehne, Abschnitt 2) trägt zusätzlich .lg-fertig (Übergabe) / .lg-ef (Eingang). */

/* =================================================================================================
   ABHOLUNG  ·  views/lager_abholung.php, lager_uebergabe.php, lager_uebergeben_fertig.php
   Der Reiter „Abholung": das Suchfeld oben (dieselbe Optik wie die Packsuche), darunter der
   Scan-Knopf und die Treffer. Die Übergabekarte kehrt die Gewichtung der Packkarte um: DER PLATZ
   IST DAS GRÖSSTE. Nur, was kein Baustein hergibt; die Bausteine stehen in Abschnitt 2.
   ================================================================================================= */

/* Der Scan-Knopf ist .lg-scan (Abschnitt EINGANG), derselbe für QR an der Theke und EAN an der Rampe. */
/* Der Platzhalter im großen Feld: der Satz muss auf 320 px lesbar bleiben, also klein und leicht;
   was getippt wird, bleibt groß. Klein wird das FELD, solange es leer ist, nicht nur ::placeholder:
   Eine kleinere Schrift allein im Platzhalter sitzt auf der Grundlinie der großen und rutscht unter
   die Mitte. Die Höhe hält min-height, das Feld springt beim ersten Buchstaben nicht. */
.lg-ab-suche .lg-feld.gross:placeholder-shown{font-size:var(--lg-fs-sm);font-weight:400}
/* Die Terminzeile: „Heute · 3 Termine, nächster 14:15 Behrens", das Wort vorn fett in der Zeile,
   nicht als eigene Zeile darüber (der Baustein stellt ein <b> in .lg-mitte sonst als Block). */
.lg-ab-termine{margin-top:var(--lg-s1)}
.lg-ab-termine .lg-mitte b{display:inline;font-size:inherit}
.lg-ab-termine .lg-rechts b{font-size:var(--lg-fs-sm);white-space:nowrap}
/* Leer: nur die eine Frage, groß und gedämpft. Kein Erklärkasten. */
.lg-ab-leer{margin:var(--lg-s6) 0 0;text-align:center;font-size:var(--lg-fs-lg);font-weight:700;color:var(--mut)}

/* Die Trefferliste: eine .lg-zeile je Kunde (Baustein), ohne den blauen Zähler, denn hier zählt
   nicht, wie viele Zettel zu holen sind, sondern wer da ist und wo es liegt. Die Liste selbst: */
.lg-ab-liste{list-style:none;margin:0;padding:0}

/* DER PLATZ, das Größte auf der Übergabekarte: .lg-platz.xl, daneben die Kisten und wer wann. */
.lg-ub-platz{display:flex;align-items:center;gap:var(--lg-s4);margin:var(--lg-s3) 0}
.lg-ub-platz-neben{min-width:0}
.lg-ub-kisten{font-weight:800;font-size:var(--lg-fs-md)}

/* --- Die Übergabekarte: Formular, Rückfrage-Zeilen, die Nebenwege als Klappen ------------------ */
.lg-ub-form{margin:var(--lg-s3) 0 0}
/* Ein Haken als Zeile (Baustein .lg-zeile als <label>): das Kästchen groß, die ganze Zeile die
   Trefferfläche; angehakt färbt sich der Rand grün. In „Teilweise" dieselbe Zeile je Bestellung. */
.lg-ub-form .lg-ub-haken{cursor:pointer;font-weight:700;font-size:var(--lg-fs-sm)}
.lg-ub-form .lg-ub-haken input{width:24px;height:24px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--ok);background:none;border:0}
.lg-ub-form .lg-ub-haken:has(input:checked){border-color:var(--lg-ok)}
.lg-ub-form .lg-ub-haken:has(input:focus-visible){box-shadow:var(--focus)}
.lg-ub-form .lg-ub-haken>span{min-width:0;word-break:break-word}
.lg-ub-form .lg-ub-haken .lg-mitte span{white-space:normal;font-weight:400}
.lg-ub-form .lg-ub-haken.aus{cursor:default}
/* Die Zahlart-Kacheln: der Text darf umbrechen („war schon bezahlt" auf 320 px). */
.lg-ub-form .lg-kachel{white-space:normal;font-size:var(--lg-fs-sm)}
/* Etikett und Feld in einer Klappe („Was fehlt?", „Grund"). */
.lg-ub-form .lg-ub-feld{display:block;margin:var(--lg-s3) 0;font-size:var(--lg-fs-xs);font-weight:700;color:var(--mut)}
.lg-ub-form .lg-ub-feld .lg-feld{margin-top:5px}
.lg-ub-form .lg-hinweis{margin:0 0 var(--lg-s3)}
.lg-ub-form>.lg-knopf{width:100%;margin-top:var(--lg-s2)}
/* Die Nebenwege: zwei stille Knöpfe in EINER Reihe, jeder die Summary seiner Klappe. Aufgeklappt
   nimmt die Klappe die ganze Breite, der andere Knopf rückt darunter; die Felder stehen in einer
   Karte unter dem Knopf. Ohne Skript öffnet `&teilweise=1` bzw. `&zurueckstellen=1` dieselbe Klappe. */
.lg-ub-neben{display:flex;gap:var(--lg-s2);flex-wrap:wrap;margin:var(--lg-s3) 0 var(--lg-s4)}
.lg-ub-neben>details{flex:1 1 0;min-width:0}
.lg-ub-neben>details[open]{flex-basis:100%}
.lg-ub-klappe>summary{display:flex;width:100%;list-style:none}
.lg-ub-klappe>summary::-webkit-details-marker{display:none}
.lg-ub-klappe[open]>summary{border-color:var(--lg-hair-strong)}
.lg-ub-klappe>form{margin:var(--lg-s2) 0 0;padding:var(--lg-s4);background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r)}
.lg-cockpit .lg-ub-form,.lg-cockpit .lg-ub-neben{max-width:560px}

/* Übergeben: der grüne Kasten (.lg-kasten.ok) mit dem Stand der Abschlussmail je Bestellung. */
.lg-ub-post{list-style:none;margin:0;padding:0}
.lg-ub-post li{display:flex;gap:var(--lg-s3);align-items:flex-start;padding:7px 0;border-top:1px solid var(--line);color:var(--ink)}
.lg-ub-post li b{font-size:var(--lg-fs-sm)}
.lg-ub-post .lg-klein{display:block;margin-top:2px}

/* --- Der Leitstand (views/lager_leitstand.php, Mockup A6) --------------------------------------
   Nur im Cockpit-Rahmen, deshalb hängt jede Regel an .lg-cockpit: Das Telefon bekommt den Block
   gar nicht, und sollte er dort je auftauchen, darf er nichts einfärben. Die Kacheln sind die
   `.facts` des Mockups (ein Raster mit 1 px Fugen, die Farbe sitzt auf der Zahl), die Balken sind
   reines CSS mit einer Höhe in Prozent. Alles ist für einen GROSSEN Bildschirm in der Halle
   gedacht und muss trotzdem auf dem Tablet stehen: das Raster bricht bei 900 px auf eine Spalte. */
.lg-cockpit .lg-ls{background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);
  padding:var(--lg-s4);margin:0 0 var(--lg-s5)}
.lg-cockpit .lg-ls-pillen{display:flex;gap:var(--lg-s2);align-items:center;flex-wrap:wrap}
/* Kopf, Kacheln, die zwei Kästen und der Leersatz sind die Familie .lg-ht-* (Abschnitt HEUTE,
   eine Optik für Heute, Leitstand und Eingangs-Tafel); hier nur die Balken und ihre Überschrift. */
.lg-cockpit .lg-ls-h3{margin:var(--lg-s5) 0 0;font-size:var(--lg-fs-md)}

/* Die Balken: ein Feld je Stunde, die Höhe steht im Element, die Beschriftung hängt darunter, die
   Zahl steht darüber. Der Rahmen hält unten Platz für die Beschriftung frei, damit sie nicht in
   den nächsten Block läuft. Die Randbalken („früher", „später") sind gedämpft, denn sie fassen
   mehrere Stunden zusammen und sollen nicht wie eine aussehen. */
.lg-cockpit .lg-ls-balken{display:flex;align-items:flex-end;gap:6px;height:130px;margin:var(--lg-s4) 0 var(--lg-s5)}
.lg-cockpit .lg-ls-balken>div{flex:1;min-width:0;background:linear-gradient(180deg,var(--lg-brand),var(--lg-brand-tint));
  border-radius:var(--lg-r-sm) var(--lg-r-sm) 0 0;position:relative}
.lg-cockpit .lg-ls-balken>div.rand{background:linear-gradient(180deg,var(--line2),var(--line))}
.lg-cockpit .lg-ls-balken>div span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;
  font-size:var(--lg-fs-xs);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-cockpit .lg-ls-balken>div i{position:absolute;top:-18px;left:0;right:0;text-align:center;font-style:normal;
  font-size:var(--lg-fs-xs);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* Die Tabellen in den Kästen sind .lg-tabelle (Abschnitt BETREIBER, ein Maß für alle); hier nur,
   was sie dort eigen haben: die erste Spalte („Wer", Uhrzeit) bricht nicht um, das Kleingedruckte
   unter dem Namen steht als eigene Zeile. */
.lg-cockpit .lg-ht-kasten .lg-tabelle{margin-top:var(--lg-s3)}
.lg-cockpit .lg-ht-kasten .lg-tabelle td:first-child{white-space:nowrap}
.lg-cockpit .lg-tabelle .lg-klein{display:block;margin-top:2px}

/* =================================================================================================
   [STRANG LIVE] Live-Polling: der pulsierende Punkt, „In Arbeit bei", der Hinweis „neu laden"
   ================================================================================================= */

/* Der Punkt in der Kopfzeile (und im Kopf des Leitstands) pulsiert, solange die Antworten des
   Endpunkts kommen (assets/lager.js setzt `live`). Ohne Skript steht er still und grün, wie
   bisher: Er sagt dann nur „angemeldet". Hakt die Verbindung zweimal in Folge, nimmt das Skript
   `live` wieder weg und hängt ein title „Verbindung hakt" an; der Punkt wird bernsteinfarben.
   Wer Bewegung abgeschaltet hat (prefers-reduced-motion), bekommt keinen Puls, nur die Farbe.
   Die Hinweise auf der Karte („In Arbeit bei Lars", „neu laden") sind .lg-kasten.info und
   .lg-kasten.bad im Kasten .lg-kt-live weiter oben. */
@keyframes lg-puls{0%,100%{box-shadow:0 0 0 0 rgba(40,192,122,.55)}50%{box-shadow:0 0 0 5px rgba(40,192,122,0)}}
.lg-punkt.live{animation:lg-puls 2s ease-in-out infinite}
.lg-punkt.hakt{background:var(--acc2);animation:none}
@media (prefers-reduced-motion:reduce){.lg-punkt.live{animation:none}}

/* =================================================================================================
   [STRANG HEUTE] Reiter „Heute" (views/lager_heute.php, Mockup A1)
   ================================================================================================= */
/* Nur im Cockpit-Rahmen, wie der Leitstand: Das Telefon bekommt den Reiter nicht. EINE FAMILIE
   FÜR DIE TAFELN (Design-Prüfung, Abschnitt Doppelt): Heute, Leitstand, Eingangs-Tafel und der
   Wand-Teil teilen Kopf (.lg-ht-kopf), Kacheln (.lg-ht-kacheln, die `.facts` des Mockups, als
   Links oder als Kästchen), die zwei Kästen (.lg-ht-zwei, .lg-ht-kasten) mit den `.rowc`-Zeilen
   (Pille oder Kreis links, Name und ein Satz rechts) und den Leersatz (.lg-ht-nichts). Die alte
   Familie .lg-ls-* gibt es dafür nicht mehr. Bei 900 px bricht das Raster auf eine Spalte. */
.lg-cockpit .lg-ht{background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);
  padding:var(--lg-s4);margin:0 0 var(--lg-s5)}
.lg-cockpit .lg-ht-kopf{display:flex;justify-content:space-between;align-items:center;gap:var(--lg-s3);flex-wrap:wrap}
.lg-cockpit .lg-ht-kopf h2{margin:0;font-size:var(--lg-fs-md);display:flex;align-items:baseline;gap:var(--lg-s3);flex-wrap:wrap}

/* Die Kacheln: Zahl groß, Beschriftung darunter; grün heißt geschafft, rot heißt offen, gelb heißt
   „da fehlt etwas" (ohne Platz). Als <a> führt jede Zahl dorthin, wo sie herkommt. */
.lg-cockpit .lg-ht-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--lg-r);overflow:hidden;margin:var(--lg-s4) 0 0}
.lg-cockpit .lg-ht-kacheln>a,.lg-cockpit .lg-ht-kacheln>div{display:block;background:var(--card2);padding:15px;color:var(--ink);text-decoration:none}
.lg-cockpit .lg-ht-kacheln>a:hover{background:var(--card);color:var(--ink)}
.lg-cockpit .lg-ht-kacheln b{display:block;font-size:var(--lg-fs-xl);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.lg-cockpit .lg-ht-kacheln span{display:block;font-size:var(--lg-fs-xs);color:var(--mut);margin-top:5px;line-height:1.35}
.lg-cockpit .lg-ht-kacheln>.hot b{color:var(--acc)}
.lg-cockpit .lg-ht-kacheln>.warn b{color:var(--acc2)}
.lg-cockpit .lg-ht-kacheln>.good b{color:var(--ok)}

/* Die zwei Kästen und ihre Zeilen: links die Pille (dieselbe wie in der Packliste), rechts der
   Kreis mit der Initiale; dazwischen bleibt nichts frei. */
.lg-cockpit .lg-ht-zwei{display:grid;grid-template-columns:1fr 1fr;gap:var(--lg-s4);margin:var(--lg-s4) 0 0;align-items:start}
.lg-cockpit .lg-ht-kasten{background:var(--card2);border:1px solid var(--line);border-radius:var(--lg-r);padding:var(--lg-s4)}
.lg-cockpit .lg-ht-kasten h3{margin:0 0 var(--lg-s1);font-size:var(--lg-fs-md)}
/* Der Leersatz, im Kasten wie unter einer Überschrift: „Heute noch keine Übergabe." */
.lg-cockpit .lg-ht-nichts{margin:var(--lg-s3) 0 0;color:var(--mut);font-size:var(--lg-fs-sm)}
.lg-cockpit .lg-ht-nichts a{color:var(--ink);font-weight:600}
.lg-cockpit .lg-ht-zeile{display:flex;align-items:center;gap:var(--lg-s3);padding:var(--lg-s3) 0;border-bottom:1px solid var(--line);font-size:var(--lg-fs-sm)}
.lg-cockpit .lg-ht-zeile:last-child{border-bottom:0;padding-bottom:0}
.lg-cockpit .lg-ht-zeile .lg-pille{flex:none;max-width:40%;white-space:nowrap}
.lg-cockpit .lg-ht-avatar{width:30px;height:30px;border-radius:50%;background:var(--card);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:var(--lg-fs-xs);font-weight:700;flex:none}
.lg-cockpit .lg-ht-nm{flex:1;min-width:0;font-weight:600;line-height:1.3}
.lg-cockpit .lg-ht-nm a{color:var(--ink);text-decoration:none}
.lg-cockpit .lg-ht-nm a:hover{color:var(--acc2);text-decoration:underline}
.lg-cockpit .lg-ht-nm span{display:block;font-size:var(--lg-fs-xs);color:var(--mut);font-weight:400;margin-top:2px;line-height:1.4}
.lg-cockpit .lg-ht-nm span a{color:var(--mut)}
@media (max-width:900px){
  .lg-cockpit .lg-ht-zwei{grid-template-columns:1fr}
}

/* =================================================================================================
   [STRANG PLAETZE] Reiter „Plätze", die Bereichszeile (views/lager_plaetze.php, Mockup A3)
   ================================================================================================= */
/* Die Tabelle „Bereich · Plätze · Belegt · ändern" aus dem Mockup, nur dass jede Zeile ein
   <details> ist und aufgeklappt die Einzelplatzliste zeigt. Dieselben vier Spalten in der Kopfzeile
   und in jeder <summary>, damit die Zeilen untereinander fluchten wie in einer echten Tabelle. */
.lg-pl-tabelle{margin:var(--lg-s4) 0 0}
.lg-pl-tabkopf,.lg-pl-bereich>summary{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) minmax(0,1.2fr) auto;
  gap:var(--lg-s3);align-items:center;padding:0 13px}
.lg-pl-tabkopf{padding-bottom:6px;font-size:var(--lg-fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--mut)}
.lg-pl-bereich{background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);margin:0 0 var(--lg-s2);overflow:hidden}
.lg-pl-bereich>summary{cursor:pointer;min-height:var(--lg-h-tap);padding-top:6px;padding-bottom:6px;list-style:none;font-size:var(--lg-fs-sm)}
.lg-pl-bereich>summary::-webkit-details-marker{display:none}
.lg-pl-bereich>summary:hover{background:var(--card2)}
.lg-pl-bereich>summary:focus-visible{outline:none;box-shadow:inset var(--focus)}
.lg-pl-bereich>summary>b{font-size:var(--lg-fs-sm);overflow-wrap:anywhere}
.lg-pl-spanne{font-weight:700;color:var(--lg-place-ink);overflow-wrap:anywhere}
.lg-pl-stand{color:var(--mut);font-size:var(--lg-fs-sm)}
.lg-pl-stand .lg-pl-gesperrt,.lg-pl-stand .lg-pl-hinweis{font-size:inherit}
/* „ändern" zu, „schließen" auf: zwei Beschriftungen, per Zustand nur eine sichtbar, ohne Skript. */
.lg-pl-bereich>summary .lg-pl-tun{justify-self:end}
.lg-pl-bereich>summary .lg-pl-zu,.lg-pl-bereich[open]>summary .lg-pl-auf{display:none}
.lg-pl-bereich[open]>summary .lg-pl-zu{display:inline-flex}
.lg-pl-bereich[open]>summary{border-bottom:1px solid var(--line);background:var(--card2)}
/* Die Einzelplatzliste steht IM Kasten: ohne eigenen Rand und ohne eigene Rundung, sonst gäbe es
   einen Kasten im Kasten. Der gerade geänderte Platz ist mit einem Streifen markiert. */
.lg-pl-bereich>.lg-pl-liste{border:none;border-radius:0;background:transparent}
.lg-pl-bereich>.lg-pl-liste>li:first-child{border-top:none}
.lg-pl-zeile.jetzt{box-shadow:inset 3px 0 0 var(--lg-brand)}
@media (max-width:560px){
  /* Schmal: Bereich und Knopf in der ersten Reihe, Spanne und Stand darunter; die Kopfzeile
     hätte dann keine Spalten mehr, unter denen etwas steht, und fällt weg. */
  .lg-pl-tabkopf{display:none}
  .lg-pl-bereich>summary{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding-top:9px;padding-bottom:9px}
  .lg-pl-bereich>summary>b{grid-column:1}
  .lg-pl-bereich>summary .lg-pl-tun{grid-column:2;grid-row:1 / span 2;width:auto}
  .lg-pl-spanne,.lg-pl-stand{grid-column:1}
}

/* =================================================================================================
   [STRANG KALENDER] Tagesliste und Verfügbarkeit (views/lager_termine.php, Mockup A4)
   ================================================================================================= */

/* Der Block steht über Leitstand und Suche und teilt sich Unterreiter, Pillen und Platz mit der
   Packliste. Eigene Klassen nur für das, was es sonst nicht gibt: die Zeitleiste, die Wochenzeilen,
   das Regel-Formular und die Monatskacheln. */
.lg-tr{margin:0 0 var(--lg-s5)}
.lg-tr-hinweis{margin:6px 2px 0;color:var(--mut);font-size:var(--lg-fs-sm);line-height:1.5}
.lg-tr-faint{color:var(--faint)}
.lg-tr-klein{display:block;font-size:var(--lg-fs-xs);color:var(--mut);line-height:1.4}
/* Die Notiz als Zweitzeile der Termin-Zeile: bernsteinfarben, gegen die Regel für die Zweitzeile
   (.lg-zeile .lg-mitte>span) ausdrücklich. */
.lg-tr-notiz,.lg-zeile .lg-mitte>.lg-tr-notiz{color:var(--acc2)}
.lg-tr-name{color:var(--ink);font-weight:700;text-decoration:none}
.lg-tr-name:hover{color:var(--acc2);text-decoration:underline}

/* Der Satz über der Liste („Heute sind 9 Termine gebucht, und 12 Fenster sind noch frei.") */
.lg-tr-lbl{margin-top:var(--lg-s3)}
.lg-tr-satz{margin:0 2px var(--lg-s3)}

/* DIE TAGESLISTE DES LAGER-KONTOS: die Kartenliste des Mockups Tag 3, nach dem Muster der
   Packliste. Keine Tabelle, keine Mindestbreite: Auf 360 px scrollt nichts waagerecht. Jede Karte
   trägt eine .lg-zeile (Baustein: Mitte mit Name und Zweitzeile, rechts die Pillen) und darunter
   die Knöpfe; Rand und Grund kommen von der Karte, die Zeile darin ist nackt. „nächster" trägt
   die blaue Kante, „war da" wird blass wie eine fertige Packzeile. */
.lg-tr-liste{margin:0 0 6px}
.lg-tr-karte{margin:0 0 var(--lg-s2);background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);
  border-left:4px solid transparent;overflow:hidden}
.lg-tr-karte.naechster{border-left-color:var(--lg-info)}
.lg-tr-karte.da{opacity:.62}
.lg-tr-karte.nicht{border-left-color:var(--line2)}
.lg-tr-karte>.lg-zeile{margin:0;border:0;border-radius:0;background:none}
.lg-tr-karte .lg-mitte b{font-variant-numeric:tabular-nums}
.lg-tr-aktionen{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:0 var(--lg-s3) 9px var(--lg-s3)}
.lg-tr-aktionen .lg-tr-inline{margin:0}

/* DIE TAGESLISTE DES BETREIBERS: die Tabelle des Mockups A4, OHNE feste Mindestbreite; die Spalten
   dürfen umbrechen, damit auf einem schmalen Fenster nicht die Spalte „Stand" verschwindet. */
.lg-tr-huelle{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);padding:0 var(--lg-s1) var(--lg-s1)}
/* Die Tabelle selbst ist .lg-tabelle (Abschnitt BETREIBER); eigen ist nur die Farbe der Uhrzeit. */
.lg-tabelle tr.naechster td:first-child b{color:var(--lg-info-ink)}
.lg-tabelle tr.da td:first-child b{color:var(--ok)}
.lg-tr-stand .lg-pille{vertical-align:middle}
.lg-tr-inline{display:inline-block;margin:0 0 0 6px}
.lg-tr-leise{background:none;border:0;color:var(--mut);font:inherit;font-size:var(--lg-fs-xs);cursor:pointer;min-height:var(--lg-h-tap);padding:0 var(--lg-s2);text-decoration:underline}
.lg-tr-leise:hover{color:var(--ink)}

/* Die EINE Frei-Zeile des Betreibers: „12 Fenster frei" und daneben „von Hand eintragen", ein
   aufklappbares Formular mit Fensterwahl, ohne Skript. */
.lg-tr-freizeile{display:flex;gap:var(--lg-s4);align-items:flex-start;flex-wrap:wrap;margin:var(--lg-s2) 0 0;padding:var(--lg-s3);
  background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r)}
.lg-tr-eintragen{flex:1 1 auto;text-align:right}
.lg-tr-eintragen[open]{text-align:left}
.lg-tr-eintragen>summary{list-style:none;cursor:pointer;display:inline-block}
.lg-tr-eintragen>summary::-webkit-details-marker{display:none}
.lg-tr-eintragen-form{display:flex;gap:var(--lg-s2);flex-wrap:wrap;align-items:flex-end;margin-top:var(--lg-s2);justify-content:flex-end}
.lg-tr-eintragen-form label{font-size:var(--lg-fs-xs);font-weight:700;color:var(--mut)}
.lg-tr-eintragen-form .lg-feld{margin-top:3px;min-height:var(--lg-h-desk);padding:0 9px;font-size:var(--lg-fs-sm);width:130px}

/* Die Woche: eine .lg-zeile je Tag, jede ein Link auf ihren Tag; der Tag vorn in fester Breite. */
.lg-tr-woche{list-style:none;margin:0;padding:0}
.lg-tr-woche .lg-zeile>b{min-width:5.5em}
.lg-tr-woche .lg-zeile>span:not(.lg-pille){color:var(--mut);font-size:var(--lg-fs-sm)}
.lg-tr-frei{margin-left:auto;color:var(--ok)!important}

/* Verfügbarkeit: links das Formular, rechts die Monate. */
.lg-tr-verf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--lg-s4);align-items:start}
.lg-tr-plan{border-collapse:collapse;margin:0 0 6px}
.lg-tr-plan th{text-align:left;font-size:var(--lg-fs-sm);font-weight:700;color:var(--mut);padding:0 var(--lg-s3) var(--lg-s2) 0;white-space:nowrap}
.lg-tr-plan td{padding:0 6px var(--lg-s2) 0;vertical-align:middle}
.lg-tr-plan td.lg-tr-bis{color:var(--mut);font-size:var(--lg-fs-sm)}
.lg-tr-plan .lg-feld{width:78px;margin:0;min-height:var(--lg-h-desk);padding:0 var(--lg-s2);text-align:center}
.lg-pl-form .lg-tr-zu{display:inline-flex;align-items:center;gap:6px;font-size:var(--lg-fs-xs);color:var(--mut);margin:0;white-space:nowrap}
.lg-pl-form .lg-tr-zu input{width:auto;min-height:0;margin:0}
.lg-tr-regeln h3{margin:var(--lg-s4) 0 var(--lg-s2)}
.lg-tr-regeln h3:first-of-type{margin-top:0}
.lg-tr-einheit{display:flex;align-items:center;gap:6px}
.lg-tr-einheit .lg-feld{width:80px;margin:0}
.lg-tr-einheit i{font-style:normal;color:var(--mut);font-size:var(--lg-fs-sm);padding-top:5px}

.lg-tr-monat{background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);padding:var(--lg-s4);margin:0 0 var(--lg-s4)}
.lg-tr-monat h3{margin:0 0 var(--lg-s3);font-size:var(--lg-fs-md)}
.lg-tr-monat h3 span{font-weight:400;color:var(--mut);font-size:var(--lg-fs-xs);margin-left:var(--lg-s2)}
.lg-tr-kacheln{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--lg-s1)}
.lg-tr-wt{text-align:center;font-size:var(--lg-fs-xs);color:var(--mut);font-weight:700;letter-spacing:.04em;padding-bottom:2px}
.lg-tr-kachel{margin:0}
.lg-tr-kachel button{width:100%;min-height:var(--lg-h-desk);padding:6px 0;border-radius:var(--lg-r-sm);border:1px solid var(--line);
  background:var(--card2);color:var(--ink);font:inherit;font-size:var(--lg-fs-xs);font-weight:700;cursor:pointer;position:relative}
.lg-tr-kachel button:hover{border-color:var(--lg-brand)}
.lg-tr-kachel button i{position:absolute;right:4px;top:3px;font-style:normal;font-size:var(--lg-fs-xs);font-weight:800;
  color:var(--acc2);line-height:1}
.lg-tr-kachel.blass button{opacity:.35}
.lg-tr-kachel.zu button{background:var(--lg-bad-tint);border-color:var(--lg-bad);opacity:1}
.lg-tr-kachel.heute button{border-color:var(--lg-brand)}
.lg-tr-kachel.vorbei button{opacity:.2;cursor:default}
.lg-tr-sperre{margin-top:6px}
.lg-tr-blaettern{display:flex;gap:6px;justify-content:flex-end;margin:0 0 var(--lg-s3)}
@media (max-width:900px){
  .lg-tr-verf{grid-template-columns:1fr}
}

/* =================================================================================================
   EINGANG  ·  views/lager_eingang*.php, views/_lager_platzwahl.php (Mockup Teil B Tag 1 und A4)
   Trefferzeilen und „zuletzt gebucht" sind .lg-zeile, die Buchen-Karte ist .lg-karte, die Platzwahl
   sind .lg-kacheln. Eigenes gibt es nur, wo der Wareneingang etwas anderes zeigt: der breite
   Scan-Knopf unter dem Feld, das große Kartons-Feld, die Zeile „je Karton 12 · ändern", die
   Historie des Betreibers mit durchgestrichenen Rücknahmen.
   ================================================================================================= */
.lg-ei .lg-etikett{margin-top:var(--lg-s4)}
.lg-ei .lg-leer p{margin:0}
.lg-ei-suche{margin-bottom:var(--lg-s3)}
/* .lg-scan, der Scan-Knopf unter dem Suchfeld (Eingang: EAN, Abholung: QR): still, blauer Rand,
   56 px, volle Breite (Mockup Teil D, Abholung „Nachher"). Der schnellste Weg an der Theke soll
   der sichtbarste sein. `hidden` gilt, bis das Skript Kamera und Leser bestätigt (assets/lager.js).
   Eine Klasse statt .lg-ei-scanknopf und .lg-ab-scan (Design-Prüfung, Abschnitt Doppelt). */
.lg-scan{display:flex;width:100%;min-height:var(--lg-h-big);margin:0 0 var(--lg-s3);
  border-color:var(--lg-place);color:var(--ink);font-size:var(--lg-fs-md)}
.lg-scan:hover{border-color:var(--lg-place-ink);color:var(--ink)}
.lg-scan .lg-scan-ikon{color:var(--lg-place-ink)}
.lg-scan-ikon{flex:0 0 auto;display:block}
/* Die Kamera als Vorhang über der Seite (Eingang: EAN, Abholung: QR): Video, ein Satz, „Abbrechen". */
.lg-ei-kamera{position:fixed;inset:0;z-index:50;background:rgba(15,18,32,.96);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--lg-s3);padding:var(--lg-s4)}
.lg-ei-kamera video{width:100%;max-width:520px;max-height:60vh;border-radius:var(--lg-r);background:#000;object-fit:cover}
.lg-ei-kamera p{margin:0;color:var(--mut);font-size:var(--lg-fs-sm);text-align:center}
/* Die Klappe „Zuletzt gebucht": Zeilen in der Klappe ohne den Karten-Innenabstand. */
.lg-ei-heute>div{padding:var(--lg-s2)}
.lg-ei-heute .lg-zeile:last-child{margin-bottom:0}
.lg-ei-heute .lg-klein{margin:var(--lg-s2)}

/* Die Buchen-Karte: das Kartons-Feld ist das Eine, groß und allein (2xl, 800, mittig). */
.lg-eb .lg-karte{margin-bottom:var(--lg-s3)}
.lg-eb label.lg-etikett{display:block}
.lg-eb-form{margin-top:var(--lg-s3)}
.lg-eb-kartons{min-height:72px;font-size:var(--lg-fs-2xl);font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
/* „je Karton 12 · ändern": eine Zeile; das Feld darin schmal, die Zahl als Text, wenn das Skript es zuklappt. */
.lg-eb-je{margin-top:var(--lg-s2)}
.lg-eb-je .lg-mitte{display:flex;align-items:center;gap:var(--lg-s3);font-size:var(--lg-fs-md);color:var(--mut)}
.lg-eb-je .lg-mitte b{display:inline;font-size:var(--lg-fs-lg);font-weight:800;color:var(--ink)}
.lg-eb-je .lg-mitte .lg-feld{width:6em;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.lg-eb-hinweis{margin:calc(var(--lg-s1) * -1) 0 var(--lg-s3) var(--lg-s1)}
/* „Reserve abzweigen": Bestand und Reserve nebeneinander. */
.lg-eb-davon{display:flex;gap:var(--lg-s3)}
.lg-eb-davon label{flex:1;min-width:0}
.lg-eb-davon .lg-etikett{display:block;margin:0 0 var(--lg-s1)}
.lg-eb-davon .lg-feld{font-weight:800;font-variant-numeric:tabular-nums}

/* Die Platzwahl (views/_lager_platzwahl.php, Packkarte UND Eingang): Etiketten enger, darunter die
   Zeile mit Zusatz (breit) und Kisten (schmal), mit dem Etikett über dem Feld. */
.lg-platzwahl .lg-etikett{margin-top:var(--lg-s3)}
.lg-platzwahl .lg-etikett:first-child{margin-top:0}
.lg-pw-zeile{display:flex;gap:var(--lg-s2);margin:var(--lg-s3) 0 0}
.lg-pw-zeile>label{flex:1 1 auto;min-width:0;margin:0}
.lg-pw-zeile>label.schmal{flex:0 0 96px}
.lg-pw-zeile .lg-etikett{display:block;margin:0 0 var(--lg-s1)}

/* Die Betreiber-Tafel (Mockup A4), nur im Cockpit-Rahmen: Kacheln und Historie im Leitstand-Kasten.
   Zurückgenommene Zeilen sind gedämpft, die Zahlen durchgestrichen (das macht das <s> im Markup). */
.lg-cockpit .lg-ei-tafel{margin:var(--lg-s5) 0 0}
.lg-cockpit .lg-ei-zeitraum{margin-left:var(--lg-s3);font-size:var(--lg-fs-xs);font-weight:600;color:var(--mut)}
.lg-cockpit .lg-ei-zeitraum a,.lg-cockpit .lg-ei-zeitraum b{margin-right:var(--lg-s2)}
.lg-cockpit .lg-ei-zeitraum a{color:var(--mut);text-decoration:none}
.lg-cockpit .lg-ei-zeitraum a:hover{color:var(--acc2);text-decoration:underline}
.lg-cockpit .lg-ei-zeitraum b{color:var(--ink)}
.lg-cockpit .lg-ei-scroll{overflow-x:auto}
.lg-cockpit .lg-ei-hist tr.zurueck td{color:var(--mut)}
.lg-cockpit .lg-ei-hist tr.zurueck td a{color:var(--mut)}
.lg-cockpit .lg-ei-hist td.lg-ei-tun{text-align:right;white-space:nowrap}
.lg-cockpit .lg-ei-hist td.lg-ei-tun form{display:inline}
/* Am Telefon gibt es die Tafel nicht; sollte sie je dort landen, bleibt sie lesbar. */
body.lg .lg-ei-tafel{margin-top:var(--lg-s5)}

/* =================================================================================================
   WAND  ·  views/lager_anzeige.php (Mockup Teil D „Die Wand · Leitstand ohne Sitzung", Strang M2)
   Ein Bildschirm in der Halle, aus zwei Metern gelesen: Zahlen 3 rem, nichts unter 1 rem, dunkler
   Grund (die Token von body.lg). Die Schriftgrößen stehen hier als Zahlen und nicht auf der
   Skala: Die Wand ist kein Telefon, ihre Untergrenze ist 1 rem, und die Skala hat dafür keine
   Stufe (begründete Ausnahme, Design-Prüfung Befund 13). Kein Knopf, kein Link, keine Reiterleiste; body.lg-wand nimmt den
   Abstand für die Leiste unten wieder weg. Die Höhe der Balken ist eine Klasse in Fünferschritten
   (h0 bis h100), weil die CSP der Seite kein style-Attribut erlaubt.
   ================================================================================================= */
body.lg-wand{padding:0;min-height:100vh;font-size:1rem}
.lg-wand-seite{padding:26px 30px 30px;max-width:1500px;margin:0 auto}
.lg-wand-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:var(--lg-s4);flex-wrap:wrap}
.lg-wand-kopf h1{margin:0;font-size:1.6rem;font-weight:700;letter-spacing:-.01em}
.lg-wand-stand{display:flex;align-items:center;gap:10px;font-size:1.1rem;color:var(--mut);font-variant-numeric:tabular-nums}
.lg-wand-stand .lg-punkt{width:12px;height:12px}
.lg-wand-stand time{font-weight:700;color:var(--ink)}
.lg-wand-fehler{margin-top:var(--lg-s4);font-size:1rem}
/* Die Kacheln: die `.facts` des Mockups, Zahl 3 rem, Beschriftung 1 rem, Unterzeile 1 rem gedämpft. */
.lg-wand-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:var(--lg-s4);
  background:var(--card2);border:1px solid var(--line);border-radius:var(--lg-r);overflow:hidden}
/* Trennlinien am Kind, nicht als Lücke im Raster: Eine leere Zelle in der zweiten Reihe (schmaler
   Bildschirm, fünf Kacheln) soll nicht als dunkler Klotz dastehen. */
.lg-wand-kacheln>div{padding:20px 22px;box-shadow:1px 1px 0 0 var(--line)}
.lg-wand-kacheln b{display:block;font-size:3rem;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.lg-wand-kacheln span{display:block;font-size:1rem;color:var(--mut);margin-top:6px;line-height:1.35}
.lg-wand-kacheln small{display:block;font-size:1rem;color:var(--faint);margin-top:2px}
.lg-wand-kacheln>div.hot b{color:var(--acc)}
.lg-wand-kacheln>div.warn b{color:var(--acc2)}
.lg-wand-kacheln>div.good b{color:var(--ok)}
/* Zwei Kästen: Balken links (breiter), Leute rechts. */
.lg-wand-zwei{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--lg-s4);margin-top:18px;align-items:start}
.lg-wand-kasten{background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);padding:var(--lg-s5)}
.lg-wand-kasten h2{margin:0;font-size:1.1rem;font-weight:700}
.lg-wand-leer{margin:var(--lg-s4) 0 0;color:var(--mut);font-size:1rem}
/* Die Balken: wie im Leitstand, nur höher; die Zahl steht über dem Balken, die Stunde darunter. */
.lg-wand-balken{display:flex;align-items:flex-end;gap:8px;height:190px;margin:34px 0 30px}
.lg-wand-balken>div{flex:1;min-width:0;background:linear-gradient(180deg,var(--lg-brand),var(--lg-brand-tint));
  border-radius:var(--lg-r-sm) var(--lg-r-sm) 0 0;position:relative;min-height:0}
.lg-wand-balken>div.rand{background:linear-gradient(180deg,var(--line2),var(--line));flex:1.6}
.lg-wand-balken>div span{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:1rem;color:var(--mut);white-space:nowrap}
.lg-wand-balken>div i{position:absolute;top:-26px;left:0;right:0;text-align:center;font-style:normal;font-size:1rem;font-weight:700;color:var(--ink)}
.lg-wand-balken>div.h0{height:0}.lg-wand-balken>div.h5{height:5%}.lg-wand-balken>div.h10{height:10%}
.lg-wand-balken>div.h15{height:15%}.lg-wand-balken>div.h20{height:20%}.lg-wand-balken>div.h25{height:25%}
.lg-wand-balken>div.h30{height:30%}.lg-wand-balken>div.h35{height:35%}.lg-wand-balken>div.h40{height:40%}
.lg-wand-balken>div.h45{height:45%}.lg-wand-balken>div.h50{height:50%}.lg-wand-balken>div.h55{height:55%}
.lg-wand-balken>div.h60{height:60%}.lg-wand-balken>div.h65{height:65%}.lg-wand-balken>div.h70{height:70%}
.lg-wand-balken>div.h75{height:75%}.lg-wand-balken>div.h80{height:80%}.lg-wand-balken>div.h85{height:85%}
.lg-wand-balken>div.h90{height:90%}.lg-wand-balken>div.h95{height:95%}.lg-wand-balken>div.h100{height:100%}
/* Wer ist dran: Kreis mit Initiale, Name, ein Satz. Wer aktiv ist, trägt den grünen Rand. */
.lg-wand-leute{margin-top:var(--lg-s3)}
.lg-wand-person{display:flex;align-items:center;gap:var(--lg-s3);padding:var(--lg-s3) 0;border-bottom:1px solid var(--line);font-size:1rem}
.lg-wand-person:last-child{border-bottom:0}
.lg-wand-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--card2);border:2px solid var(--line2);font-weight:700;font-size:1rem;color:var(--ink)}
.lg-wand-person.aktiv .lg-wand-avatar{border-color:var(--ok)}
.lg-wand-person>div{min-width:0}
.lg-wand-person b{display:block;font-size:1.1rem}
.lg-wand-person span{display:block;font-size:1rem;color:var(--mut);margin-top:2px}
/* Was Aufmerksamkeit braucht: eine Zeile; rot mit Tint, sobald etwas dasteht. */
.lg-wand-blick{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:var(--lg-s4) var(--lg-s5);
  background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);font-size:1rem}
.lg-wand-blick b{font-size:1rem;flex:none}
.lg-wand-blick span{color:var(--mut)}
.lg-wand-blick.bad{border-color:var(--lg-bad);background:var(--lg-bad-tint)}
.lg-wand-blick.bad span{color:var(--lg-bad-ink);font-weight:700}
/* „Anzeige beendet": eine ruhige Mitte, sonst nichts. */
.lg-wand-beendet{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--lg-s5);gap:var(--lg-s3)}
.lg-wand-beendet h1{margin:0;font-size:2rem;font-weight:700}
.lg-wand-beendet p{margin:0;color:var(--mut);font-size:1.1rem;max-width:36em}
@media (max-width:900px){
  .lg-wand-seite{padding:var(--lg-s4)}
  .lg-wand-zwei{grid-template-columns:1fr}
  .lg-wand-kacheln{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .lg-wand-kacheln b{font-size:2.5rem}
}
/* Der geöffnete Teil „Wand" im Reiter Einrichten des Betreibers (views/_lager_wand_teil.php): ein
   Leitstand-Kasten mit dem Link zum Kopieren (readonly, volle Breite), „Link öffnen" daneben, die
   zwei Formulare darunter. Nur im Cockpit-Rahmen. */
.lg-cockpit .lg-wand-teil{margin-top:var(--lg-s4);max-width:760px}
.lg-cockpit .lg-wand-teil-satz{margin:var(--lg-s3) 0 0;font-size:var(--lg-fs-sm);color:var(--mut);line-height:1.55}
.lg-cockpit .lg-wand-teil-satz b{color:var(--ink)}
.lg-cockpit .lg-wand-teil .lg-kasten{margin-top:var(--lg-s3)}
.lg-cockpit .lg-wand-teil-link{display:flex;gap:var(--lg-s2);align-items:end;flex-wrap:wrap;margin-top:var(--lg-s4)}
.lg-cockpit .lg-wand-teil-link .lg-etikett{flex:1 0 100%;margin:0 0 calc(var(--lg-s2) * -1)}
.lg-cockpit .lg-wand-teil-link .lg-feld{flex:1 1 320px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--lg-fs-sm)}
.lg-cockpit .lg-wand-teil-tun{display:flex;gap:var(--lg-s2);flex-wrap:wrap;margin-top:var(--lg-s3)}
.lg-cockpit .lg-wand-teil-form{margin:0}
.lg-cockpit .lg-wand-teil-stand{margin:var(--lg-s3) 0 0}

/* =================================================================================================
   BETREIBER (Cockpit-Rahmen)  ·  Feinschliff Strang M, Mockup Teil D „Mirko · die Entscheidung"
   Der Betreiber liest: Seitenkopf mit Werkzeuglinks, Tabellen auf dem Maß von table.srcs (app.css),
   Kacheln wie „Heute", ein Segment für Modus und Sortierung. Alles hängt an .lg-cockpit; die
   Handy-Regeln oben bleiben unberührt, denn das Telefon bekommt nichts davon.
   ================================================================================================= */

/* --- Der Seitenkopf: links „Lager" mit Pulspunkt und Stand, rechts Zugänge und Einstellungen ---- */
.lg-cockpit .lg-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lg-s3);flex-wrap:wrap}
.lg-cockpit .lg-pagehead .pagehead{margin-bottom:var(--lg-s3)}
.lg-cockpit .lg-pagehead .sub{display:inline-flex;align-items:center;gap:6px}
/* Die zwei Links sind .lg-knopf.klein (Befund 18: keine vierte Knopfform). */
.lg-cockpit .lg-werkzeuge{display:flex;gap:var(--lg-s2);align-items:center;padding-top:6px}

/* --- „Heute": der Blick-Kasten in voller Breite VOR den Kacheln, die Werkzeuge -------------------
   Der Kasten ist ein .lg-kasten.warn mit den Zeilen des Heute-Kastens darin (Pille, Name, Satz);
   die Kacheln bekommen eine gefärbte Unterzeile (<i>, „1 ohne Platz"). Die Werkzeuge sind eine
   Liste: Link, dahinter ein Satz in Kleinschrift. */
.lg-cockpit .lg-ht-blick{margin:0 0 var(--lg-s4);padding:var(--lg-s3) var(--lg-s4)}
.lg-cockpit .lg-ht-blick h3{margin:0 0 var(--lg-s1);font-size:var(--lg-fs-md);display:flex;align-items:center;gap:var(--lg-s2)}
.lg-cockpit .lg-ht-blick .lg-ht-zeile{border-bottom-color:var(--line)}
.lg-cockpit .lg-ht-blick .lg-ht-nm,.lg-cockpit .lg-ht-blick .lg-ht-nm a{color:var(--ink)}
.lg-cockpit .lg-ht-kacheln i{font-style:normal;font-weight:700}
.lg-cockpit .lg-ht-kacheln i.lg-ht-warn{color:var(--acc2)}
.lg-cockpit .lg-ht-kacheln i.lg-ht-bad{color:var(--acc)}
/* Die Werkzeuge als drei Kacheln (Mathias, 20.09.2026: „mehr als stumpfer Text"): Symbol oben in
   der Hausfarbe, Name fett, ein Satz klein. Link, Formular-Knopf und Link tragen dieselbe Klasse
   .lg-ht-werk, damit der Knopf der Saisonruhe aussieht wie seine Nachbarn; die Pille „an/aus" sitzt
   oben rechts. Bei 900 px (eine Spalte für die zwei Kästen) bleiben die Kacheln nebeneinander,
   erst darunter stapeln sie sich. */
.lg-cockpit .lg-ht-werkzeuge{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lg-s2);margin:var(--lg-s3) 0 0}
.lg-cockpit .lg-ht-werkzeuge form{display:contents}
.lg-cockpit .lg-ht-werk,.lg-cockpit .lg-ht-werkzeuge form>button{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--lg-s2);min-height:100%;padding:var(--lg-s3);border:1px solid var(--line2);border-radius:var(--lg-r);
  background:var(--card);color:var(--ink);text-decoration:none;text-align:left;font:inherit;cursor:pointer;line-height:1.35}
.lg-cockpit .lg-ht-werk:hover,.lg-cockpit .lg-ht-werkzeuge form>button:hover{border-color:var(--lg-hair-strong);color:var(--ink)}
.lg-cockpit .lg-ht-werkzeuge form>button:focus-visible{outline:none;box-shadow:var(--focus)}
.lg-cockpit .lg-ht-werkzeuge .lg-ikon{width:24px;height:24px;color:var(--lg-brand)}
.lg-cockpit .lg-ht-werkzeuge form.an>button{background:var(--lg-ok-tint);border-color:var(--lg-ok)}
.lg-cockpit .lg-ht-werkzeuge form.an .lg-ikon{color:var(--lg-ok)}
.lg-cockpit .lg-ht-werkzeuge b{font-size:var(--lg-fs-sm);font-weight:700}
.lg-cockpit .lg-ht-werkzeuge span:not(.lg-pille){font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-cockpit .lg-ht-werk-stand{position:absolute;top:var(--lg-s3);right:var(--lg-s3)}
@media (max-width:560px){.lg-cockpit .lg-ht-werkzeuge{grid-template-columns:1fr}}
/* Die Pille der Aktion in „Zuletzt eingetragen" (LagerHeute::art): feste Mindestbreite, damit die
   Namen dahinter fluchten. */
.lg-cockpit .lg-ht-art{min-width:8.5em;justify-content:center}
/* Die Tagesliste der Termine auf „Heute" (seit 20.09.2026): ein eigener Kasten unter den Kacheln. */
.lg-cockpit .lg-ht-termine{margin:var(--lg-s4) 0 0;padding:var(--lg-s3) var(--lg-s4) var(--lg-s4);background:var(--card2);border:1px solid var(--line);border-radius:var(--lg-r)}
.lg-cockpit .lg-ht-termine .lg-tr{margin:0}
.lg-cockpit .lg-ht-termine .lg-pk-kopf h2{font-size:var(--lg-fs-md);margin:0 0 var(--lg-s2)}
/* Der Leitstand als Teil von „Heute": kein Kasten im Kasten, kein doppelter Abstand. */
.lg-cockpit .lg-ht>.lg-ls{border:0;padding:0;margin:0 0 var(--lg-s4)}

/* --- Die Betreiber-Reiter Packen und Abholung: volle Breite, Kachelzeile, Leiste, Tabelle -------- */
/* Lesend heißt breit: Die 760 px des Handy-Rahmens gelten für die Tabellen nicht. */
.lg-cockpit .lg-betreib{max-width:none}
/* Die Kachelzeile sind die Heute-Kacheln (lg-ht-kacheln), nur ohne Abstand nach oben und mit
   festen vier Spalten, damit sie unter jeder Breite dieselbe Zeile bleiben. */
.lg-cockpit .lg-bt-kacheln{margin:0 0 var(--lg-s4);grid-template-columns:repeat(4,minmax(0,1fr))}
.lg-cockpit .lg-bt-kacheln>a{padding:12px 15px}
.lg-cockpit .lg-bt-kacheln b{font-size:var(--lg-fs-lg)}
/* Die Leiste: Suchfeld (wächst), Segment Modus, Segment Sortierung; bricht schmal um. */
.lg-cockpit .lg-bt-leiste{display:flex;gap:var(--lg-s3);align-items:center;flex-wrap:wrap;margin:0 0 var(--lg-s4)}
.lg-cockpit .lg-bt-leiste .lg-segment{margin:0}
.lg-cockpit .lg-bt-suche{display:flex;gap:var(--lg-s2);align-items:center;flex:1 1 280px;min-width:0;margin:0}
.lg-cockpit .lg-bt-suche label{flex:1;min-width:0;margin:0}
.lg-cockpit .lg-bt-suche .lg-feld{min-height:var(--lg-h-desk);margin:0}
.lg-cockpit .lg-bt-suche .lg-knopf{flex:none}
.lg-cockpit .lg-bt-suche.gross .lg-feld{min-height:var(--lg-h-tap);font-size:var(--lg-fs-md)}
/* Steht die Suche allein über der Leiste (Abholung des Betreibers), braucht sie Luft nach unten;
   in der Leiste (Packen) hebt die Leiste den Abstand selbst auf (Mirko, 20.09.2026: „die Felder kleben"). */
.lg-cockpit form.lg-bt-suche.gross{margin:0 0 var(--lg-s4)}
.lg-cockpit .lg-bt-leiste .lg-bt-suche{margin:0}
/* Der Notliste-Knopf ganz rechts in der Leiste. */
.lg-cockpit .lg-bt-leiste .lg-bt-rechts{margin-left:auto}
/* EINE TABELLE FÜR ALLE LESENDEN ANSICHTEN (Design-Prüfung, Befund 6): Packliste, Abholung,
   Leitstand, Termine, Eingangs-Historie tragen .lg-tabelle. Das Maß ist das von table.srcs
   (app.css): Zeilen sm, Kopf xs in Versalien, 7px 10px, Hairlines, die Zeile hebt sich beim
   Überfahren. Der Ton sitzt am linken Rand (nachzupacken rot, Namensgleiche gelb), der Name ist
   der Link auf die Karte. Was eine Ansicht darüber hinaus braucht, hängt an ihrer Klasse
   (.lg-bt-kunde, .lg-ht-kasten, tr.naechster). */
.lg-cockpit .lg-bt-scroll{overflow-x:auto}
.lg-cockpit .lg-bt-scroll .lg-tabelle{margin-bottom:var(--lg-s2)}
.lg-cockpit .lg-tabelle{width:100%;border-collapse:collapse;font-size:var(--lg-fs-sm);margin:0}
.lg-cockpit .lg-tabelle th{text-align:left;font-size:var(--lg-fs-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);font-weight:700;padding:6px 10px;white-space:nowrap}
.lg-cockpit .lg-tabelle td{padding:7px 10px;border-top:1px solid rgba(255,255,255,.05);color:var(--mut);vertical-align:top;
  font-variant-numeric:tabular-nums}
.lg-cockpit .lg-tabelle tbody tr:hover td{background:rgba(255,255,255,.03)}
.lg-cockpit .lg-tabelle tr.warn td:first-child{box-shadow:inset 3px 0 0 var(--lg-warn)}
.lg-cockpit .lg-tabelle tr.bad td:first-child{box-shadow:inset 3px 0 0 var(--lg-bad)}
.lg-cockpit .lg-tabelle tr.aus td{opacity:.6}
.lg-cockpit .lg-tabelle tr.aktiv td{color:var(--ink)}
.lg-cockpit .lg-tabelle a{color:var(--ink);text-decoration:none}
.lg-cockpit .lg-tabelle a:hover{color:var(--acc2);text-decoration:underline}
.lg-cockpit .lg-tabelle .lg-punkt{display:inline-block;vertical-align:middle;margin-right:2px}
.lg-cockpit .lg-tabelle td.lg-bt-kunde b{font-weight:700;color:var(--ink)}
.lg-cockpit .lg-tabelle .lg-bt-klein{display:block;font-size:var(--lg-fs-xs);color:var(--faint);margin-top:2px}
.lg-cockpit .lg-tabelle td.lg-bt-nummern{white-space:nowrap}
.lg-cockpit .lg-tabelle td.lg-bt-nummern .lg-zahl{width:22px;height:22px;font-size:var(--lg-fs-xs);vertical-align:middle}
.lg-cockpit .lg-tabelle td.lg-bt-seit{white-space:nowrap}
.lg-cockpit .lg-tabelle .lg-platz{font-size:var(--lg-fs-sm);padding:2px 8px}
.lg-cockpit .lg-tabelle .lg-pille{white-space:nowrap}
.lg-cockpit .lg-bt-hinweis{margin:var(--lg-s2) 0 0;font-size:var(--lg-fs-xs);color:var(--mut)}
/* Die Segmente in der Leiste auf Cockpit-Maß (40 px), die Einträge so breit wie ihr Text. */
.lg-cockpit .lg-bt-leiste .lg-segment>a,.lg-cockpit .lg-bt-leiste .lg-segment>span{flex:0 0 auto;min-height:calc(var(--lg-h-desk) - 4px);
  font-size:var(--lg-fs-xs);padding:0 var(--lg-s3)}
@media (max-width:720px){
  .lg-cockpit .lg-bt-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =================================================================================================
   [KOERBCHEN] Der Reiter „Körbchen" des Betreibers (views/lager_koerbchen.php, Lager_Mockup_Mirko.html)
   ================================================================================================= */
/* Die fünf Zahlen sind der Filter: dieselben Kacheln wie auf Heute, fünf feste Spalten, die
   angeklickte trägt unten den roten Strich und rechts oben das Wort „Filter" in der Hausfarbe. */
.lg-cockpit .lg-kb-kacheln{margin:0 0 var(--lg-s4);grid-template-columns:repeat(5,minmax(0,1fr))}
.lg-cockpit .lg-kb-kacheln>a{position:relative;padding:12px 15px}
.lg-cockpit .lg-kb-kacheln>a::after{content:"Filter";position:absolute;right:12px;top:11px;font-size:var(--lg-fs-xs);
  letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.lg-cockpit .lg-kb-kacheln>a.an{background:var(--card);box-shadow:inset 0 -3px 0 var(--lg-brand)}
.lg-cockpit .lg-kb-kacheln>a.an::after{color:var(--lg-brand)}
.lg-cockpit .lg-kb-kacheln b{font-size:var(--lg-fs-lg)}
@media (max-width:900px){.lg-cockpit .lg-kb-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.lg-cockpit .lg-kb-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Der Hinweis „steht nicht in diesem Filter" (der Link aus Heute führte hierher). */
.lg-cockpit .lg-kb-fremd{margin:0 0 var(--lg-s3)}
/* Die Sofortsuche ([KOERBCHEN-SUCHE] in lager.js) tauscht den Inhalt aus; solange die Antwort
   unterwegs ist, wird der alte nur leicht blass, kein Springen, kein Spinner. */
.lg-cockpit [data-kb-inhalt].lg-kb-wartet{opacity:.55;transition:opacity .15s ease .1s}
/* Die Tabelle: das eine Maß (.lg-tabelle), dazu die Zeile, die aufgeht. Die offene Zeile trägt
   die Hausfarbe an der Kante (ein Ton, der schon da war, weicht ihr nicht: er steht in der Pille)
   und verliert die Linie zur Detailzeile darunter. Der Pfeil rechts ist der zweite Griff. */
.lg-cockpit .lg-kb-tabelle td.lg-kb-pfeil,.lg-cockpit .lg-kb-tabelle th.lg-kb-pfeil{width:28px;text-align:right;padding-right:8px}
.lg-cockpit .lg-kb-tabelle td.lg-kb-pfeil a{color:var(--faint);font-size:var(--lg-fs-md);text-decoration:none}
.lg-cockpit .lg-kb-tabelle tr.lg-kb-zeile td{cursor:pointer}
.lg-cockpit .lg-kb-tabelle tr.lg-kb-zeile.offen td{background:rgba(255,90,60,.05);color:var(--ink);border-bottom:0}
.lg-cockpit .lg-kb-tabelle tr.lg-kb-zeile.offen td:first-child{box-shadow:inset 3px 0 0 var(--lg-brand)}
.lg-cockpit .lg-kb-tabelle tr.lg-kb-zeile.offen td.lg-kb-pfeil a{color:var(--lg-brand)}
.lg-cockpit .lg-kb-tabelle tr.lg-kb-zeile.aus.offen td{opacity:1}
.lg-cockpit .lg-kb-tabelle td.lg-kb-zustand .lg-bt-klein{color:var(--mut)}
/* RUHIGER (Koerbchen_Mockup_Ruhe.html, 20.09.2026): eine Pille je Spalte „Zustand", nie ein Umbruch;
   die Hinweise als kleine Pillen unter dem Namen; kein Fokusring nach dem Klick (nur per Tastatur);
   die gelbe Kante gibt es nicht mehr (die Zeile trägt nur noch `bad` und `offen`). */
.lg-cockpit .lg-kb-tabelle td.lg-kb-zustand{white-space:nowrap}
.lg-cockpit .lg-kb-tabelle .lg-kb-hinweise{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.lg-cockpit .lg-kb-tabelle .lg-kb-hinweise .lg-pille{font-size:.66rem;padding:1px 7px}
.lg-cockpit .lg-kb-tabelle a:focus:not(:focus-visible){outline:0;box-shadow:none}
.lg-cockpit .lg-kb-tabelle .lg-bt-klein-inline{font-size:var(--lg-fs-xs);color:var(--faint);margin-left:4px}
.lg-cockpit .lg-kb-tabelle .lg-kb-leer{color:var(--faint)}
.lg-cockpit .lg-kb-tabelle td.lg-bt-nummern s{color:var(--faint)}
.lg-cockpit .lg-kb-tabelle tr.lg-kb-detail td{padding:0 10px 16px;background:rgba(255,90,60,.05);border-top:0;cursor:default}
.lg-cockpit .lg-kb-tabelle tr.lg-kb-detail td:first-child{box-shadow:inset 3px 0 0 var(--lg-brand)}
.lg-cockpit .lg-kb-tabelle tr.lg-kb-detail:hover td{background:rgba(255,90,60,.05)}
.lg-cockpit .lg-kb-tabelle tr.lg-kb-detail td .lg-kb-laedt{padding:var(--lg-s3) 0;color:var(--mut);font-size:var(--lg-fs-sm)}
/* Die aufgeklappte Zeile: zwei Spalten in einer Karte, links die Bestellungen (breiter), rechts
   Platz, Zahlung, Notiz, Verlauf, Eingriffe. Unter 900 px eine Spalte. */
.lg-cockpit .lg-kb-det{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--lg-s4);
  background:var(--card);border:1px solid var(--line2);border-radius:var(--lg-r);padding:var(--lg-s3) var(--lg-s4) var(--lg-s4);color:var(--ink)}
@media (max-width:900px){.lg-cockpit .lg-kb-det{grid-template-columns:1fr}}
.lg-cockpit .lg-kb-det .lg-etikett{margin:0 0 var(--lg-s2)}
.lg-cockpit .lg-kb-det .lg-klappe{margin:0 0 var(--lg-s2)}
.lg-cockpit .lg-kb-det .lg-klappe>summary{min-height:var(--lg-h-tap)}
.lg-cockpit .lg-kb-det .lg-kt-artikel{padding-bottom:6px}
/* „… 11 weitere" unter den ersten sechs Positionen: eine stille Zeile im selben Kasten. */
.lg-cockpit .lg-kb-mehr{background:var(--card2);padding:0 13px 8px}
.lg-cockpit .lg-kb-mehr>summary{cursor:pointer;list-style:none;font-size:var(--lg-fs-xs);color:var(--mut);padding:4px 0 6px 2.6em}
.lg-cockpit .lg-kb-mehr>summary::-webkit-details-marker{display:none}
.lg-cockpit .lg-kb-mehr[open]>summary{display:none}
.lg-cockpit .lg-kb-mehr>ul{padding-top:0}
.lg-cockpit .lg-kb-mehr>ul>li:first-child{border-top:1px solid var(--line)}
.lg-cockpit .lg-kb-platz{display:flex;align-items:center;gap:var(--lg-s3);margin:0 0 var(--lg-s3)}
.lg-cockpit .lg-kb-platz .lg-platz.gross{font-size:var(--lg-fs-xl);padding:6px 16px;border-radius:var(--lg-r);line-height:1.1;flex:none}
.lg-cockpit .lg-kb-platz .lg-platz.gross.leer{font-size:var(--lg-fs-md)}
.lg-cockpit .lg-kb-platz-text b{display:block;font-size:var(--lg-fs-md)}
.lg-cockpit .lg-kb-platz-text span{display:block;font-size:var(--lg-fs-xs);color:var(--mut);line-height:1.4}
.lg-cockpit .lg-kb-det .lg-ampel{margin:0 0 var(--lg-s3)}
/* Zahlung und Bestellungen als Zeilen „Beschriftung links, Wert rechts" mit einer Pille; Mengen weiß. */
.lg-cockpit .lg-kb-kv{display:flex;justify-content:space-between;align-items:center;gap:var(--lg-s3);padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--lg-fs-sm)}
.lg-cockpit .lg-kb-kv>span{color:var(--mut);flex:none}
.lg-cockpit .lg-kb-kv>b{text-align:right;font-weight:700}
.lg-cockpit .lg-kb-kv .lg-pille{vertical-align:middle;margin-right:2px}
.lg-cockpit .lg-kb-kv .lg-kb-betrag{font-size:var(--lg-fs-md);font-weight:800;letter-spacing:-.01em}
.lg-cockpit .lg-kb-kv+.lg-kb-kv{border-bottom:0}
.lg-cockpit .lg-kb-kv+.lg-kasten,.lg-cockpit .lg-kb-kv+.lg-etikett{margin-top:var(--lg-s3)}
.lg-cockpit .lg-kb-det .lg-kt-menge{color:var(--ink)}
.lg-cockpit .lg-kb-det .lg-kasten{margin:0 0 var(--lg-s2)}
.lg-cockpit .lg-kb-verlauf-kopf{margin-top:var(--lg-s3)}
.lg-cockpit .lg-kb-verlauf-kopf .lg-klein{font-weight:400;text-transform:none;letter-spacing:0;margin-left:6px}
.lg-cockpit .lg-kb-verlauf{border:0;background:none;border-radius:0}
.lg-cockpit .lg-kb-verlauf>li{flex-direction:row;align-items:center;gap:var(--lg-s2);padding:6px 0}
.lg-cockpit .lg-kb-verlauf>li b{flex:1;min-width:0;font-weight:600}
.lg-cockpit .lg-kb-verlauf>li .lg-klein{flex:none;white-space:nowrap}
.lg-cockpit .lg-kb-verlauf .lg-ht-art{min-width:7.5em;justify-content:center}
.lg-cockpit .lg-kb-verlauf-mehr{margin-top:var(--lg-s2)}
.lg-cockpit .lg-kb-verlauf-mehr>summary{min-height:var(--lg-h-desk);font-size:var(--lg-fs-xs)}
.lg-cockpit .lg-kb-verlauf-mehr>ul{padding:var(--lg-s2) var(--lg-s3)}
/* Die Eingriffe: unten, mit Linie darüber; Knopf und Erklärsatz in einer Zeile. */
.lg-cockpit .lg-kb-eingriffe{margin-top:var(--lg-s3);padding-top:var(--lg-s3);border-top:1px solid var(--line)}
.lg-cockpit .lg-kb-eingriffe form{display:flex;align-items:center;gap:var(--lg-s3);flex-wrap:wrap}
.lg-cockpit .lg-kb-eingriffe .lg-hinweis{flex:1 1 200px;margin:0}
.lg-cockpit .lg-kb-eingriffe>p{margin:0}
/* Der Titel der Trefferliste in der Leiste („3 Treffer zu „Schmidt““). */
.lg-cockpit .lg-bt-titel{font-size:var(--lg-fs-sm);font-weight:700;color:var(--ink)}
/* --- Die Karte zum Nachschauen: Rückweg oben, „Eingriffe" unten ---------------------------------- */
.lg-cockpit .lg-bt-zurueck{margin:0 0 var(--lg-s3);font-size:var(--lg-fs-sm);font-weight:600}
.lg-cockpit .lg-bt-zurueck a{color:var(--mut);text-decoration:none}
.lg-cockpit .lg-bt-zurueck a:hover{color:var(--acc2);text-decoration:underline}
.lg-cockpit .lg-bt-eingriffe{margin:var(--lg-s5) 0 0;padding:var(--lg-s4) 0 0;border-top:1px solid var(--line)}
.lg-cockpit .lg-bt-eingriffe .lg-etikett{margin:0 0 var(--lg-s2)}
.lg-cockpit .lg-bt-eingriffe form{margin:0}
.lg-cockpit .lg-bt-eingriffe .lg-klein{margin:var(--lg-s2) 0 0;color:var(--mut);font-size:var(--lg-fs-xs);line-height:1.5}

/* --- „Einrichten": EINE Seite, drei Karten (Lager_Mockup_Mirko.html, 20.09.2026) -------------------
   Oben die Sprungmarken (Pillen, die scrollen), darunter Plätze, Kalender, Wand als Karten mit
   derselben Kopfzeile: Zahl oder Wort groß, Name, Kurzsatz, rechts die Pille. Der Inhalt jeder
   Karte ist die Teil-View von vorher, ohne eigenen Kopf. */
.lg-cockpit .lg-er-marken{display:flex;gap:var(--lg-s2);flex-wrap:wrap;margin:0 0 var(--lg-s4)}
.lg-cockpit .lg-er-marken>a{display:inline-flex;align-items:center;gap:6px;min-height:var(--lg-h-desk);padding:0 var(--lg-s3);
  border:1px solid var(--line2);border-radius:var(--lg-r-pill);background:var(--card);color:var(--mut);font-size:var(--lg-fs-sm);text-decoration:none}
.lg-cockpit .lg-er-marken>a b{color:var(--ink)}
.lg-cockpit .lg-er-marken>a:hover{border-color:var(--lg-hair-strong);color:var(--ink)}
.lg-cockpit .lg-er-karte{background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r);margin:0 0 var(--lg-s4);overflow:hidden;scroll-margin-top:80px}
.lg-cockpit .lg-er-kopf{display:flex;align-items:center;gap:var(--lg-s3);padding:var(--lg-s3) var(--lg-s4);background:var(--card2);border-bottom:1px solid var(--line)}
.lg-cockpit .lg-er-kopf h2{margin:0;font-size:var(--lg-fs-md);font-weight:700}
.lg-cockpit .lg-er-zahl{font-size:var(--lg-fs-lg);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.lg-cockpit .lg-er-zahl.good{color:var(--ok)}
.lg-cockpit .lg-er-satz{flex:1;min-width:0;color:var(--mut);font-size:var(--lg-fs-sm)}
.lg-cockpit .lg-er-kopf .lg-pille{flex:none}
.lg-cockpit .lg-er-inhalt{padding:var(--lg-s3) var(--lg-s4) var(--lg-s4)}
.lg-cockpit .lg-er-inhalt>.lg-pl,.lg-cockpit .lg-er-inhalt>.lg-tr{margin-top:0}
.lg-cockpit .lg-er-aus{margin:0;color:var(--mut);font-size:var(--lg-fs-sm)}
.lg-cockpit .lg-er-aus a{color:var(--ink);font-weight:600}
/* Die Wand-Karte rendert ihren Kopf selbst (views/_lager_wand_teil.php); ihr Inhalt ohne den alten Kastenrahmen. */
.lg-cockpit .lg-er-karte .lg-wand-teil{margin:0;max-width:none;background:none;border:0;border-radius:0}
/* Der Kartenkopf des Kalenders trägt vorn ein Wort statt einer Zahl („Mo–Fr 13–17 · Sa 10–14"). */
.lg-cockpit .lg-er-zahl.lg-er-wort{font-size:var(--lg-fs-md);white-space:nowrap}

/* --- Die Karte „Kalender" (Lager_Mockup_Mirko.html, nachgezogen 20.09.2026) ------------------------
   Links das gelbe Etikett REGELN und drei Felder (Beschriftung klein links, Wert fett rechts, jedes
   ein flacher Kasten), darunter der kleine Knopf „Regeln ändern" (eine <summary>, die wie ein Knopf
   aussieht und das Formular darunter aufklappt). Rechts die gelbe Zeile „SEPTEMBER 2026 · ANTIPPEN
   SPERRT", daneben leise „‹ früher · später ›", darunter der Monat als flache Kacheln. */
.lg-cockpit .lg-tr-gelb{color:var(--acc2);font-size:.66rem;letter-spacing:.08em;margin:0 0 var(--lg-s2)}
.lg-cockpit .lg-tr-regeln-spalte .lg-etikett{margin-top:0}
.lg-cockpit .lg-tr-regel{display:flex;justify-content:space-between;align-items:center;gap:var(--lg-s3);margin:0 0 6px;padding:8px 11px;
  background:var(--card2);border:1px solid var(--line2);border-radius:9px;font-size:var(--lg-fs-sm)}
.lg-cockpit .lg-tr-regel>span{flex:none;color:var(--faint,var(--mut));font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.lg-cockpit .lg-tr-regel>b{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.lg-cockpit .lg-tr-klappe{margin:0;background:none;border:0}
.lg-cockpit .lg-tr-klappe>summary{display:inline-flex;list-style:none;cursor:pointer;margin-top:var(--lg-s2)}
.lg-cockpit .lg-tr-klappe>summary::-webkit-details-marker{display:none}
.lg-cockpit .lg-tr-klappe[open]>summary{border-color:var(--lg-brand)}
.lg-cockpit .lg-tr-klappe>form{margin:var(--lg-s3) 0 0;padding:var(--lg-s3) var(--lg-s4) var(--lg-s4);background:var(--card);border:1px solid var(--line);border-radius:var(--lg-r)}
.lg-cockpit .lg-tr-regeln-klappe>form.lg-tr-regeln{margin:var(--lg-s3) 0 0}
.lg-cockpit .lg-tr-monatkopf{display:flex;justify-content:space-between;align-items:baseline;gap:var(--lg-s3)}
.lg-cockpit .lg-tr-monatkopf h3{margin:0}
.lg-cockpit .lg-tr-blaettern{display:flex;gap:6px;margin:0;font-size:var(--lg-fs-xs);color:var(--faint,var(--mut))}
.lg-cockpit .lg-tr-blaettern a{color:var(--faint,var(--mut));text-decoration:none}
.lg-cockpit .lg-tr-blaettern a:hover{color:var(--ink);text-decoration:underline}
.lg-cockpit .lg-tr-monat{background:none;border:0;padding:0;margin:var(--lg-s2) 0 var(--lg-s3)}
.lg-cockpit .lg-tr-kacheln{gap:4px}
.lg-cockpit .lg-tr-wt{font-size:.6rem;text-transform:uppercase;color:var(--faint,var(--mut))}
.lg-cockpit .lg-tr-kachel button{min-height:0;padding:7px 0;border:0;border-radius:6px;background:var(--card2);font-size:var(--lg-fs-xs);font-weight:600}
.lg-cockpit .lg-tr-kachel button:hover{box-shadow:inset 0 0 0 1px var(--lg-hair-strong)}
.lg-cockpit .lg-tr-kachel.blass button{opacity:1;background:none;color:var(--faint,var(--mut))}
.lg-cockpit .lg-tr-kachel.heute button{box-shadow:inset 0 0 0 1px var(--lg-brand)}
.lg-cockpit .lg-tr-kachel.zu button{background:rgba(239,68,68,.16);color:#ffb2ac;text-decoration:line-through}
.lg-cockpit .lg-tr-kachel.vorbei button{opacity:.35}
.lg-cockpit .lg-tr-kachel.wartet button{opacity:.5}
.lg-cockpit .lg-tr-monate [data-tr-meldung]{margin:0 0 var(--lg-s2)}
/* Was das Skript ([SPERREN]) ein- und ausblendet (Meldungen, „N gesperrt", „gesperrt" in der Zeile). */
.lg-cockpit .lg-er-karte [hidden]{display:none!important}
.lg-cockpit .lg-er-inhalt>[data-pl-meldung]{margin:0 0 var(--lg-s3)}
.lg-cockpit .lg-tr-sperre{margin-top:0}

/* [VORSCHAU] „So sieht es der Kunde" (lager.js): die Kachel über „Regeln ändern" (ganze Kachel =
   Link), und der Rahmen ohne Mail-Kopf im Fenster (die
   Fensterstile .nlv… stehen in app.css). Hier stand bis 29.09.2026 eine verwaiste `}` darüber,
   die still die jeweils erste Regel dahinter verschluckte. */
.lg-cockpit .lg-tr-vs{display:flex;align-items:center;gap:var(--lg-s3);margin:12px 0 10px;padding:12px 14px;
  border:1px solid var(--lg-brand);border-radius:var(--lg-r);background:var(--lg-brand-tint);color:inherit;text-decoration:none;
  transition:background .15s,transform .15s}
.lg-cockpit .lg-tr-vs:hover{background:rgba(255,90,60,.22);transform:translateY(-1px)}
.lg-cockpit .lg-tr-vs:focus-visible{outline:2px solid var(--lg-brand);outline-offset:2px}
.lg-cockpit .lg-tr-vs-auge{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--lg-brand);color:#fff}
.lg-cockpit .lg-tr-vs-auge .icon{width:20px;height:20px}
.lg-cockpit .lg-tr-vs-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lg-cockpit .lg-tr-vs-text>b{font-weight:800}
.lg-cockpit .lg-tr-vs-unter{color:var(--faint,var(--mut));font-size:.8rem}
.lg-cockpit .lg-tr-vs-los{flex:none;font-weight:800;font-size:.85rem;color:var(--lg-brand);white-space:nowrap}
@media(max-width:560px){.lg-cockpit .lg-tr-vs{flex-wrap:wrap}.lg-cockpit .lg-tr-vs-los{width:100%;text-align:right}}
.nlv-rahmen.lg-tr-vs-rahmen{border-top:1px solid #d9dde4;border-radius:10px;overflow:hidden}
.nlv-rahmen.lg-tr-vs-rahmen.handy{margin-top:0}

/* =================================================================================================
   TEILWEISE GEPACKT · „kommt nicht" · Nachricht an den Kunden (Mockup „Teilweise gepackt",
   29.09.2026; views/lager_karte.php, lager_uebergabe.php, lager_koerbchen*.php, lager_packen.php).
   Orange ist der eine neue Ton: „angefangen, noch nicht fertig" (der Knopf, der Kasten, die
   Pille). Gelb bleibt „fehlt, wartet", Grün „fertig", Rot „Arbeit, die drängt".
   ================================================================================================= */
body.lg,.lg-cockpit{--lg-or:#ff9a2e;--lg-or-tint:rgba(255,154,46,.14);--lg-or-ink:#ffc98f;--lg-or-on:#2b1600}
/* Umgeblendet vom Skript ([PACKLISTE] in lager.js): `hidden` muss gegen display:flex der Blöcke gewinnen. */
.lg-kt [hidden]{display:none!important}
.lg-knopf.or{width:100%;min-height:var(--lg-h-big);font-size:var(--lg-fs-md);
  background:var(--lg-or);border-color:var(--lg-or);color:var(--lg-or-on)}
.lg-knopf.or:hover{border-color:var(--lg-or);color:var(--lg-or-on)}
.lg-pille.or{background:var(--lg-or-tint);border-color:var(--lg-or);color:var(--lg-or-ink)}
.lg-kasten.or{background:var(--lg-or-tint);border-color:var(--lg-or);color:var(--lg-or-ink)}
.lg-kasten.or .lg-kt-fehlt-liste>li{border-top-color:rgba(255,154,46,.3)}
.lg-kasten.or .lg-kt-fehlt-liste>li:first-child{border-top:none}
.lg-kt-entf>b{display:block}
.lg-kt-entf .lg-kt-fehlt-was b{text-decoration:line-through;text-decoration-color:rgba(239,68,68,.7)}
.lg-kt-entf-stand{color:var(--ink)}
.lg-kt-entf-stand.lg-kt-entf-bad{color:var(--bad-ink);font-weight:600}
.lg-kt-entf>p.lg-kt-entf-tun{margin:var(--lg-s2) 0 0}
.lg-kt-fehlt-knoepfe{display:flex;gap:6px;flex:0 0 auto}
.lg-kt-fehlt-zeile .lg-knopf.klein.lg-kt-nein,.lg-kt-bgr-kopf .lg-knopf.klein.lg-kt-nein{border-color:rgba(239,68,68,.55);color:var(--lg-bad-ink)}
.lg-kt-fehlt-zeile .lg-knopf.klein.lg-kt-da{border-color:rgba(40,192,122,.55);color:var(--lg-ok-ink)}
/* „Was ist im Körbchen?" nach Bestellung: ein Kopf je Bestellung, rechts „alle fehlen". */
.lg-kt-bgr+.lg-kt-bgr{border-top:1px solid var(--line)}
.lg-kt-bgr-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--lg-s3);padding:8px 13px 2px;background:var(--card2)}
.lg-kt-bgr-kopf .lg-klein{margin-left:6px}
.lg-kt-pos>li.entf .lg-kt-menge{color:var(--lg-or-ink)}
.lg-kt-pos>li.entf .lg-kt-artname{color:var(--lg-or-ink);text-decoration:line-through;text-decoration-color:rgba(239,68,68,.6)}
/* Während ein Tipp unterwegs ist (fetch): leiser, aber nicht weg. */
form.lg-laedt{opacity:.55}
/* Die Nachricht an den Kunden, über dem grünen Haken. */
.lg-kt-nachricht{margin:var(--lg-s4) 0 0;padding:var(--lg-s3);border:1px solid var(--lg-hair-strong);border-radius:var(--lg-r);background:var(--card)}
.lg-kt-nachricht label{display:flex;justify-content:space-between;gap:var(--lg-s2);font-size:var(--lg-fs-sm);color:var(--acc2)}
.lg-kt-nachricht label span{color:var(--mut);font-size:var(--lg-fs-xs)}
.lg-kt-nachricht textarea{display:block;width:100%;margin-top:6px;min-height:7.5em;font:inherit;font-size:var(--lg-fs-sm);line-height:1.45;resize:vertical}
.lg-kt-nachricht>p{margin:6px 0 0}
/* Im Cockpit: die Unterzeile der Kachel „zu packen" („davon 6 teilweise gepackt"), der Knopf
   „erledigt" unter „Braucht einen Blick", der entfallene Posten in der aufgeklappten Zeile und
   die Nachricht an den Kunden im Verlauf, im Wortlaut. */
.lg-cockpit .lg-ht-kacheln i.lg-ht-or{color:var(--lg-or-ink)}
.lg-cockpit .lg-ht-erledigt{margin-left:auto;flex:none}
.lg-cockpit .lg-kb-entf-zeile{display:flex;align-items:center;gap:var(--lg-s3)}
.lg-cockpit .lg-kb-entf-zeile form{flex:none}
.lg-cockpit .lg-kb-zitat{display:block;margin:6px 0 2px;padding:7px 10px;border-left:3px solid var(--lg-warn);
  background:var(--lg-warn-tint);border-radius:0 8px 8px 0;font-size:var(--lg-fs-xs);color:var(--ink);quotes:"„" "“"}
/* „ganzes Regal löschen" (12.10.2026): eine leise Zeile am Ende des Regals, rechts. */
.lg-pl-zeile.lg-pl-alle{justify-content:flex-end}
/* --- Packreihenfolge (Mirko 12.10.2026, 03-archiv/packreihenfolge/): „Vorrang" in der Hausfarbe.
   Von Hand vorgezogen steht ganz oben, in der Packliste am Telefon wie in Mirkos Tabelle; Kante
   und Pille tragen die Hausfarbe, damit sie sich von Rot (nachpacken) abheben. */
.lg-pille.vr{background:var(--lg-brand-tint);border-color:var(--lg-brand);color:var(--ink)}
.lg-zeile.vr{border-color:var(--lg-brand)}
.lg-cockpit .lg-tabelle tr.vr td:first-child{box-shadow:inset 3px 0 0 var(--lg-brand)}
.lg-kb-vorrang{border:1px solid var(--line2);border-radius:10px;background:var(--card2);padding:10px 12px;margin:10px 0 12px}
.lg-kb-vorrang-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lg-kb-vorrang-zeile form{margin:0 0 0 auto}
.lg-kb-vorrang p{margin:6px 0 0}
/* --- „Ware noch nicht da" (U21, 14.10.2026, 03-archiv/zulauf-signal/Zulauf_fuer_Mirko.html): gelb,
   EINE zugeklappte Zeile auf der Karte, ein Satz im Kasten „Packreihenfolge". Nur ein Hinweis. */
.lg-kasten.zl{background:var(--lg-zl-tint);border-color:var(--lg-zl);color:var(--lg-zl-ink)}
.lg-kt-zl ul li{color:var(--ink)}
.lg-kt-zl ul li+li{border-top:1px solid rgba(255,214,10,.18)}
.lg-kt-zl ul li{padding:4px 0}
.lg-kb-vorrang p.lg-kb-zl{margin:8px 0 0;color:var(--lg-zl-ink);font-size:var(--lg-fs-xs)}
/* --- Packhinweis (U20, Mirko 13.10.2026, 01-aktiv/packhinweis/Packhinweis_Mockup.html): Mirkos
   Zeile an einer Bestellung. Orange (Ton warn), damit er sich von Vorrang (Hausfarbe) und
   nachpacken (rot) abhebt; nach dem Haken still (.lg-kasten.still, Pille ohne Ton). */
.lg-pille.hw{background:var(--lg-warn-tint);border-color:var(--lg-warn);color:var(--lg-warn-ink)}
.lg-kasten.hw{border:2px solid var(--lg-warn);background:var(--lg-warn-tint);color:var(--ink)}
.lg-kt-hw .lg-etikett{display:block;margin:0 0 4px;color:var(--lg-warn-ink);letter-spacing:.06em;text-transform:uppercase}
.lg-kasten.still.lg-kt-hw .lg-etikett{color:var(--mut)}
.lg-kt-hw b{display:block;font-size:var(--lg-fs-md)}
.lg-kt-hw small{display:block;margin-top:3px;color:var(--mut);font-size:var(--lg-fs-xs)}
.lg-kb-hw{display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap;margin:8px 0 0;padding:8px 11px;
  background:var(--lg-warn-tint);border-top:1px solid var(--lg-warn);border-radius:0 0 8px 8px;font-size:var(--lg-fs-xs)}
.lg-kb-hw-ic{flex:none;color:var(--lg-warn-ink);font-weight:800}
.lg-kb-hw-text{flex:1;min-width:12em}
.lg-kb-hw-text b{display:block;color:var(--ink)}
.lg-kb-hw-aendern{margin-left:auto}
.lg-kb-hw-aendern[open]{flex-basis:100%;margin-left:0}
.lg-kb-hw-aendern>summary,.lg-kb-hw-neu>summary{cursor:pointer;color:var(--mut);font-size:var(--lg-fs-xs);list-style:none}
.lg-kb-hw-aendern>summary::-webkit-details-marker,.lg-kb-hw-neu>summary::-webkit-details-marker{display:none}
.lg-kb-hw-neu{margin:8px 0 0;padding:6px 11px;border-top:1px dashed var(--line2)}
.lg-kb-hw-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 2px}
.lg-kb-hw-form input[type=text]{flex:1;min-width:12em;padding:7px 9px;border:1px solid var(--lg-warn);border-radius:8px;
  background:var(--card2);color:var(--ink);font:inherit;font-size:var(--lg-fs-sm,.85rem)}

/* =================================================================================================
   PACKEN PAPIERLOS (U24, Mirko und Wiebke 14.10.2026; 03-archiv/packen-papierlos/Mockup_Packen.html)
   Die Packkarte (views/lager_karte.php): oben kurz „✓ gespeichert", der Stand klebt unter der
   Kopfzeile, die Liste je Bestellung mit drei Tippflächen je Zeile, der Körbchen-Bereich, unten
   „Weiter hier" oder der Haken; dazu das Blatt von unten und die Karte bildschirmfüllend. Die
   Namensgleiche (.lg-ng), das Blatt (.lg-blatt), der Schalter (.lg-schalter) und das − / + (.lg-stepper)
   teilt sich die Packkarte mit der Übergabe.
   ================================================================================================= */
/* „✓ gespeichert" in der Kopfzeile: unsichtbar, bis das Skript etwas gespeichert hat. */
.lg-gesp{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--lg-r-pill);flex:none;
  background:var(--lg-ok-tint);border:1px solid var(--lg-ok);color:var(--lg-ok-ink);font-size:var(--lg-fs-xs);font-weight:700;
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.lg-gesp.an{opacity:1;transform:none}
.lg-gesp.fehler{background:var(--lg-bad-tint);border-color:var(--lg-bad);color:var(--lg-bad-ink)}

/* --- Der Stand: klebt beim Scrollen unter der Kopfzeile („5 von 12 im Korb", Balken, „Zuletzt"). */
.lg-pa-stand{position:sticky;top:var(--lg-h-kopf);z-index:3;background:var(--bg);margin:var(--lg-s2) calc(var(--lg-s4) * -1) var(--lg-s1);
  padding:var(--lg-s2) var(--lg-s4) 10px;border-bottom:1px solid var(--line)}
.lg-pa-stand-zeile{display:flex;align-items:baseline;gap:var(--lg-s2);flex-wrap:wrap}
.lg-pa-stand-zahl{font-size:var(--lg-fs-xl);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.lg-pa-stand-text{font-weight:700;color:var(--mut)}
.lg-pa-stand-zeile .lg-pille{align-self:center}
.lg-pa-stand-zeile .lg-pille:first-of-type{margin-left:auto}
.lg-pa-balken{display:flex;gap:2px;height:8px;margin:var(--lg-s2) 0 0;border-radius:var(--lg-r-pill);overflow:hidden;background:var(--card2)}
.lg-pa-balken i{display:block;height:100%;transition:width .2s}
.lg-pa-balken .g{background:var(--lg-ok)} .lg-pa-balken .r{background:var(--lg-bad)}
.lg-pa-stand .lg-klein{margin:6px 0 0}
@media (min-width:700px){ .lg-pa-stand{margin-left:calc(var(--lg-s5) * -1);margin-right:calc(var(--lg-s5) * -1);padding-left:var(--lg-s5);padding-right:var(--lg-s5)} }

/* --- Die Liste: je Bestellung ein Gruppenkopf, darunter die Zeilen in EINER Karte. */
.lg-pa-gr{margin:14px 0 0;scroll-margin-top:calc(var(--lg-h-kopf) + 110px)}
.lg-pa-grkopf{display:flex;align-items:center;gap:var(--lg-s2);flex-wrap:wrap;padding:0 2px 6px;font-size:var(--lg-fs-sm)}
.lg-pa-grtext{flex:1;min-width:0}
.lg-pa-grtext b{display:block}
.lg-pa-grtext span{display:block;font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-pa-alle{margin:0}
.lg-pa-alle button{background:none;border:0;color:var(--mut);font:inherit;font-weight:700;font-size:var(--lg-fs-xs);min-height:36px;padding:0 4px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lg-pa-zeilen{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--lg-r);background:var(--card);overflow:hidden}
/* Eine Zeile, drei Tippflächen (Entscheidung 2): Bild links, die Mitte ist der Haken, rechts ⋯. */
.lg-pz{display:flex;align-items:stretch;border-top:1px solid var(--line);position:relative;transition:background .2s;
  scroll-margin-top:calc(var(--lg-h-kopf) + 110px)}
.lg-pz:first-child{border-top:0}
.lg-pz-bild{flex:none;width:72px;padding:10px 0 10px 12px;margin:0;background:none;border:0;cursor:zoom-in;display:flex;align-items:center}
.lg-pz-bild>span{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--lg-r-sm);
  background:#fff;border:1px solid var(--line);overflow:hidden}
.lg-pz-bild img{display:block;width:100%;height:100%;object-fit:contain}
.lg-pz-bild>span.leer{background:none;border:1px dashed var(--line2);color:var(--mut);font-size:.6rem;font-weight:700;text-align:center;line-height:1.1}
.lg-pz-form{flex:1;min-width:0;display:flex;margin:0}
.lg-pz-tap{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 8px 10px 12px;min-height:76px;margin:0;
  background:none;border:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
span.lg-pz-tap{cursor:default}
.lg-pz-text{flex:1;min-width:0}
.lg-pz-name{display:block;font-weight:700;font-size:var(--lg-fs-md);line-height:1.25;word-break:break-word}
.lg-pz-menge{display:inline-block;margin-right:4px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--acc2)}
.lg-pz-menge.mehr{padding:0 6px;border:1px solid var(--lg-warn);border-radius:var(--lg-r-sm);background:var(--lg-warn-tint);font-size:1.05rem}
.lg-pz-unter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-pz-unter .lg-platz{font-size:var(--lg-fs-xs);padding:2px 8px}
.lg-pz-notiz{display:block;margin-top:4px;font-size:var(--lg-fs-xs);color:var(--lg-warn-ink);font-weight:700;line-height:1.35;word-break:break-word}
.lg-pz-stand{display:block;margin-top:3px;font-size:var(--lg-fs-xs);color:var(--lg-or-ink);font-weight:700}
.lg-pz-haken{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.1rem;color:transparent;transition:background .2s,border-color .2s,color .2s}
.lg-pz-mehr{flex:none;width:48px;margin:0;border:0;border-left:1px solid var(--line);background:none;color:var(--mut);
  font-size:1.4rem;font-weight:800;letter-spacing:1px;cursor:pointer}
.lg-pz-mehr:active,.lg-pz-tap:active{filter:brightness(.92)}
/* Im Korb: grün abgehakt, der Rest tritt zurück. */
.lg-pz.korb{background:rgba(40,192,122,.06)}
.lg-pz.korb .lg-pz-text,.lg-pz.korb .lg-pz-bild>span{opacity:.5}
.lg-pz.korb .lg-pz-haken{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on)}
/* Fehlt: rote Kante, rotes Kreuz, die Notiz rot. */
.lg-pz.fehlt{background:var(--lg-bad-tint);box-shadow:inset 3px 0 0 var(--lg-bad)}
.lg-pz.fehlt .lg-pz-haken{border-color:var(--lg-bad);background:var(--lg-bad);color:#fff}
.lg-pz.fehlt .lg-pz-notiz{color:var(--lg-bad-ink)}
/* Kommt nicht: orange Kante, durchgestrichen, zählt als entschieden. */
.lg-pz.entf{background:var(--lg-or-tint);box-shadow:inset 3px 0 0 var(--lg-or)}
.lg-pz.entf .lg-pz-text{opacity:.75}
.lg-pz.entf .lg-pz-name{text-decoration:line-through;text-decoration-color:rgba(239,68,68,.6)}
.lg-pz.entf .lg-pz-haken{border-color:var(--lg-or);color:var(--lg-or);font-size:.8rem}
/* Weiter hier: die erste offene Zeile, hell umrandet; bewusst nicht rot oder orange (Entscheidung 6). */
.lg-pz.weiter{background:var(--card2)}
/* Der Rahmen als eigene Ebene über der Zeile: ein Inset-Schatten wird an den runden Ecken der Liste
   angeschnitten und vom Trennstrich vor ⋯ durchkreuzt. Erste/letzte Zeile folgen der Rundung der Liste. */
.lg-pz.weiter::after{content:"";position:absolute;inset:0;border:2px solid var(--ink);pointer-events:none;z-index:1}
.lg-pz.weiter:first-child::after{border-top-left-radius:calc(var(--lg-r) - 1px);border-top-right-radius:calc(var(--lg-r) - 1px)}
.lg-pz.weiter:last-child::after{border-bottom-left-radius:calc(var(--lg-r) - 1px);border-bottom-right-radius:calc(var(--lg-r) - 1px)}
.lg-pz.weiter .lg-pz-haken{border-color:var(--ink)}
.lg-pz.blitz{animation:lg-pz-blitz .9s ease 2}
@keyframes lg-pz-blitz{50%{background:rgba(238,241,247,.2)}}
.lg-pz.laedt .lg-pz-haken{animation:lg-pz-puls .8s ease-in-out infinite}
@keyframes lg-pz-puls{50%{opacity:.4}}

/* --- Das Körbchen: immer unter der Liste, kompakt (Entscheidung 10). */
.lg-pa-korb{margin:16px 0 8px;padding:12px;border-radius:var(--lg-r);background:var(--card);border:1px solid var(--line);
  scroll-margin-top:calc(var(--lg-h-kopf) + 110px)}
.lg-pa-korb-kopf{display:flex;align-items:center;gap:var(--lg-s2);margin:0 0 var(--lg-s2)}
.lg-pa-korb-kopf .lg-etikett{margin:0;flex:1}
.lg-pa-korb-weg{background:none;border:0;color:var(--mut);font:inherit;font-weight:700;font-size:var(--lg-fs-xs);min-height:32px;padding:0 2px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lg-pa-korb-zeile{display:flex;gap:var(--lg-s2)}
.lg-pa-platz{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:64px;margin:0;padding:8px 12px;border-radius:var(--lg-r);
  border:2px solid var(--lg-place);background:var(--lg-place-tint);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.lg-pa-platz:active{filter:brightness(.92)}
.lg-pa-platz svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--lg-place-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg-pa-platz .lg-platz{flex:none;font-size:var(--lg-fs-xl);padding:4px 12px;min-width:64px}
.lg-pa-platz-txt{flex:1;min-width:0;line-height:1.25}
.lg-pa-platz-txt b{display:block;font-size:var(--lg-fs-md)}
.lg-pa-platz-txt small{display:block;color:var(--mut);font-size:var(--lg-fs-xs);font-weight:600}
.lg-pa-platz-txt .lg-pa-hw{color:var(--lg-warn-ink);font-weight:700}
.lg-pa-aendern{flex:none;color:var(--lg-place-ink);font-size:var(--lg-fs-xs);font-weight:700}
.lg-pa-zuletzt{flex:none;width:72px;min-height:64px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:var(--lg-r);border:1px solid var(--line2);background:var(--card2);color:var(--mut);font:inherit;font-size:var(--lg-fs-xs);font-weight:700;
  line-height:1.15;cursor:pointer}
.lg-pa-zuletzt b{font-size:var(--lg-fs-lg);color:var(--ink)}
.lg-pa-korb-zeile2{display:flex;gap:var(--lg-s2);margin:var(--lg-s2) 0 0}
.lg-pa-korb-zeile2 .lg-feld{flex:1;min-width:0}
/* − 1 Körbchen +: mit Handschuh zu treffen, die Zahl in der Mitte. */
.lg-stepper{flex:none;display:flex;align-items:center;border:1px solid var(--line2);border-radius:var(--lg-r);background:var(--card2);overflow:hidden}
.lg-stepper button{width:40px;min-height:var(--lg-h-tap);margin:0;border:0;background:none;color:var(--ink);font:inherit;font-size:1.2rem;font-weight:800;cursor:pointer}
.lg-stepper button:disabled{color:var(--line2);cursor:default}
.lg-stepper span{min-width:52px;text-align:center;font-size:var(--lg-fs-xs);color:var(--mut);font-weight:700;line-height:1.1}
.lg-stepper span b{display:block;font-size:var(--lg-fs-md);color:var(--ink)}
/* Die Nachricht an den Kunden mit dem Schalter oben rechts (aus = Mirko informiert selbst). */
.lg-pa-nachricht{margin:10px 0 0;padding:10px 12px;border-radius:var(--lg-r);border:1px solid var(--lg-or);background:var(--lg-or-tint)}
.lg-pa-nachricht.aus{border-color:var(--line2);background:var(--card2)}
.lg-pa-n-kopf{display:flex;align-items:center;gap:10px;cursor:pointer}
.lg-pa-n-kopf b{flex:1;font-size:var(--lg-fs-sm)}
.lg-pa-n-kopf b small{display:block;font-weight:600;color:var(--mut);font-size:var(--lg-fs-xs)}
.lg-pa-nachricht .lg-feld{margin-top:var(--lg-s2);min-height:104px;font-size:var(--lg-fs-sm)}
.lg-pa-nachricht p{margin:6px 0 0}
/* Der Schalter: 52 × 32, mit Handschuh zu treffen. */
.lg-schalter{flex:none;position:relative;width:52px;height:32px;margin:0;padding:0;border:0;border-radius:var(--lg-r-pill);background:var(--line2);
  cursor:pointer;transition:background .15s}
.lg-schalter::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;
  transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.lg-schalter[aria-checked="true"]{background:var(--lg-ok)}
.lg-schalter[aria-checked="true"]::after{transform:translateX(20px)}
.lg-pa-klappen{margin:16px 0 0}
.lg-pa-selbst{margin:6px 0 0}
.lg-pa-zurueck{margin:16px 0 0;text-align:center}
.lg-pa-zurueck .lg-klein{margin:6px 0 0}

/* --- Unten fest: „Weiter hier" oder der Haken (.lg-haupt klebt über der Reiterleiste). */
.lg-pa-fuss:not(:has(>:not([hidden]))){display:none}
.lg-pa-fuss form{margin:0}
.lg-pa-weiter{width:100%;min-height:var(--lg-h-big);display:flex;align-items:center;gap:10px;margin:0;padding:0 14px;border-radius:var(--lg-r);
  border:1px solid var(--ink);background:var(--card2);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.lg-pa-weiter>span:first-child{flex:1;min-width:0}
.lg-pa-weiter small{display:block;font-size:var(--lg-fs-xs);color:var(--mut);font-weight:700}
.lg-pa-weiter b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-pa-weiter .lg-platz{flex:none}
.lg-pa-weiter i{font-style:normal;font-size:1.3rem;font-weight:800}

/* --- DAS BLATT VON UNTEN (⋯): Fehlt, Notiz, „kommt gar nicht"; an der Theke Teilweise und Zurückstellen. */
.lg-schleier{position:fixed;inset:0;z-index:30;background:rgba(6,8,16,.66)}
.lg-blatt{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:88vh;overflow-y:auto;background:var(--card);border-top:1px solid var(--line2);
  border-radius:20px 20px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);
  transition:transform .22s ease;box-shadow:0 -12px 40px rgba(0,0,0,.6)}
.lg-blatt.an{transform:none}
@media (min-width:700px){ .lg-blatt{left:50%;right:auto;width:560px;margin-left:-280px} }
body.lg-blatt-offen{overflow:hidden}
.lg-blatt-griff{width:40px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 12px}
.lg-blatt-kopf{display:flex;gap:12px;align-items:center}
.lg-blatt-bild{flex:none;width:56px;height:56px;border-radius:var(--lg-r-sm);background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lg-blatt-bild img{width:100%;height:100%;object-fit:contain;display:block}
.lg-blatt-bild.leer{background:none;border:1px dashed var(--line2);color:var(--mut);font-size:.6rem;font-weight:700;text-align:center;line-height:1.1}
.lg-blatt-kopf b{display:block;font-size:var(--lg-fs-md);line-height:1.25}
.lg-blatt h3{margin:0 0 4px;font-size:var(--lg-fs-lg)}
.lg-blatt label{display:block;margin:14px 0 6px;font-weight:700;font-size:var(--lg-fs-sm)}
.lg-blatt textarea.lg-feld{min-height:72px;resize:none;font-size:var(--lg-fs-md)}
.lg-blatt-segment{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0}
.lg-blatt-segment button{min-height:var(--lg-h-big);margin:0;border-radius:var(--lg-r);border:1px solid var(--line2);background:var(--card2);color:var(--ink);
  font:inherit;font-weight:800;font-size:var(--lg-fs-md);cursor:pointer}
/* Untereinander und mit Farbrand (das Blatt „alle …"): zwei große Wahlen, keine vorgewählt. */
.lg-blatt-segment.untereinander{grid-template-columns:1fr}
.lg-blatt-segment.untereinander .s-korb{border-color:var(--lg-ok)}
.lg-blatt-segment.untereinander .s-fehlt{border-color:var(--lg-bad)}
.lg-blatt-segment .s-korb.an{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on)}
.lg-blatt-segment .s-fehlt.an{background:var(--lg-bad);border-color:var(--lg-bad);color:#fff}
.lg-schnell{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.lg-schnell button{min-height:40px;margin:0;padding:0 12px;border-radius:var(--lg-r-pill);border:1px solid var(--line2);background:var(--card2);color:var(--mut);
  font:inherit;font-weight:700;font-size:var(--lg-fs-xs);cursor:pointer}
.lg-blatt-pflicht{margin:8px 0 0;color:var(--lg-bad-ink);font-weight:700}
.lg-blatt-fuss{display:flex;gap:8px;margin-top:14px;align-items:center}
.lg-blatt-fuss .lg-knopf{flex:1}
.lg-blatt-entf{background:none;border:0;color:var(--lg-or-ink);font:inherit;font-weight:700;font-size:var(--lg-fs-xs);min-height:44px;padding:0 4px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lg-blatt .lg-kasten.or{margin:14px 0 0}

/* --- Bild groß mit der Karte (Mockup e): das Overlay .lg-zoom, darunter Menge, Lagerort und die Karte. */
.lg-zoom.mit-karte{align-items:flex-start;overflow-y:auto}
.lg-zoom.mit-karte img{max-height:34vh}
.lg-zoom figcaption .lg-platz{margin-top:8px;font-size:var(--lg-fs-md);padding:4px 10px}
.lg-zoom .lg-zoom-karte{width:100%;max-width:420px}
.lg-zoom .lg-zoom-karte svg.hp{display:block;width:100%;height:auto;max-height:42vh;background:#0b0e1a;border-radius:var(--lg-r-sm);border:1px solid var(--line)}
.lg-zoom .lg-zoom-zurueck{width:100%;max-width:420px}

/* --- DIE KARTE BILDSCHIRMFÜLLEND (Entscheidung 8, wie .lo-karte der Artikelseite): Titel und ✕, die
   Karte füllt die HÖHE (Fächer gut 60 × 40 px statt 33 × 22) und wird zur Seite gewischt, unten das
   gewählte Fach und „Übernehmen". Ohne Hallenplan stehen dort die Kacheln der Plätze. */
.lg-vk{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:#11152a}
.lg-vk-kopf{flex:none;position:relative;display:flex;flex-direction:column;gap:2px;padding:16px 64px 12px 16px;border-bottom:1px solid var(--line2)}
.lg-vk-kopf b{font-size:var(--lg-fs-lg);line-height:1.2}
.lg-vk-kopf span{font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-vk-zu{position:absolute;top:12px;right:12px;width:44px;height:44px;margin:0;border-radius:10px;border:1px solid var(--line2);background:var(--card2);
  color:var(--mut);font-size:1.5rem;font-weight:700;line-height:1;cursor:pointer}
.lg-vk-flaeche{flex:1;min-height:0;overflow:auto hidden;-webkit-overflow-scrolling:touch;padding:8px 0}
.lg-vk-flaeche svg.hp{display:block;height:100%;width:auto;max-width:none;touch-action:pan-x}
.lg-vk-kacheln{flex:none;max-height:32vh;overflow-y:auto;padding:8px 16px;border-top:1px solid var(--line2)}
.lg-vk.ohne-karte .lg-vk-kacheln{flex:1;max-height:none;border-top:0}
.lg-vk-kacheln .lg-etikett{margin-top:4px}
.lg-vk-fuss{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--card);
  border-top:1px solid var(--line2);box-shadow:0 -10px 24px rgba(0,0,0,.45)}
.lg-vk-wahl{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-size:var(--lg-fs-sm);color:var(--mut)}
.lg-vk-wahl .lg-platz{flex:none;white-space:nowrap;font-size:var(--lg-fs-lg);padding:4px 12px}
.lg-vk-status{flex:none;margin:0;padding:10px 16px 0;border-top:1px solid var(--line2);background:var(--card);font-size:var(--lg-fs-sm);line-height:1.35;
  box-shadow:0 -10px 24px rgba(0,0,0,.45)}
.lg-vk-status:not([hidden])+.lg-vk-fuss{border-top:0;box-shadow:none}
.lg-vk-status b{display:block;color:var(--ink);font-weight:700}
.lg-vk-status.warn b{color:var(--lg-warn-ink)}
.lg-vk-status small{display:block;margin-top:2px;font-size:var(--lg-fs-xs);color:var(--lg-warn-ink);font-weight:700}
.lg-vk-fuss .lg-knopf.pri{flex:none;width:auto;min-height:var(--lg-h-big);padding:0 20px}
.lg-vk-fuss .lg-knopf.pri:disabled{background:var(--card2);border-color:var(--line2);color:var(--mut);cursor:default}
body.lg-vk-offen{overflow:hidden}

/* --- NAMENSGLEICHE, offen statt Klappe (Packen und Abholung): dieser Kunde grün, der andere gelb. */
.lg-ng{margin:0 0 12px;padding:10px 12px;border-radius:var(--lg-r);border:2px solid var(--lg-warn);background:var(--lg-warn-tint)}
.lg-ng-kopf b{display:block;color:var(--lg-warn-ink)}
.lg-ng-kopf span{display:block;margin:0 0 6px;font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-ng-zeile{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,176,32,.3)}
.lg-ng-zeile i{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800}
.lg-ng-zeile.dieser i{background:var(--lg-ok);color:var(--lg-ok-on)}
.lg-ng-zeile.anderer i{background:var(--lg-warn);color:#3f2a00}
.lg-ng-zeile>div{flex:1;min-width:0}
.lg-ng-zeile b{display:block;font-size:var(--lg-fs-sm)}
.lg-ng-zeile.anderer b{color:var(--lg-warn-ink)}
.lg-ng-zeile small{display:block;font-size:var(--lg-fs-xs);color:var(--mut)}

/* =================================================================================================
   ABHOLUNG ANGEGLICHEN (U24, 14.10.2026; 03-archiv/packen-papierlos/Mockup_Abholung.html)
   Die Übergabekarte (views/lager_uebergabe.php): Ampel mit Abzug, Platz als Held mit der Karte und
   dem Weg, Bestellungen als Karten mit der Nummer als Marke, die Artikel eingerückt und dunkler, die
   Rückfragen als Kacheln und Zeilen, das Blatt „Teilweise" je Artikel. Blatt (.lg-blatt), Schleier,
   Schnellwörter und Vollbildkarte (.lg-vk) kommen aus dem Abschnitt PACKEN PAPIERLOS darüber.
   ================================================================================================= */
/* Der Abzug an der Bar-Summe: „218,00 € laut Shop / − 16,99 € 1× … (kommt nicht)". */
.lg-ampel.lg-ub2-mitabzug{flex-wrap:wrap}
.lg-ub2-abzug{flex-basis:100%;margin:2px 0 0;padding:8px 0 0;border-top:1px dashed rgba(255,176,32,.5);font-size:var(--lg-fs-xs);
  color:var(--lg-warn-ink);font-weight:700;line-height:1.45}
.lg-ampel .lg-ub2-abzug span{display:block;font-size:inherit;color:inherit;line-height:inherit}
.lg-ampel .lg-ub2-abzug span:first-child{color:var(--mut);font-weight:600}
.lg-ub2-or-satz{margin:6px 0 0;color:inherit}
.lg-ub2-weiss{margin:8px 0 0}
.lg-ub2-inline{display:inline!important;font-size:inherit!important}

/* Der Platz als Held: groß, daneben Körbchen, wer, wann und der Fachhinweis; darunter die Karte. */
.lg-ub2-platz{margin:0 0 var(--lg-s3);padding:var(--lg-s3);border-radius:var(--lg-r);background:var(--card);border:2px solid var(--lg-place)}
.lg-ub2-platz.frei{border-color:var(--line)}
.lg-ub2-platz-zeile{display:flex;align-items:center;gap:14px}
.lg-ub2-platz-zeile>div{min-width:0}
.lg-ub2-platz-zeile .lg-platz{font-size:2.4rem;padding:8px 18px;border-radius:var(--lg-r);min-width:96px;justify-content:center}
.lg-ub2-platz-zeile .lg-platz.leer{font-size:var(--lg-fs-lg);background:none;border:2px dashed var(--line2);color:var(--mut)}
.lg-ub2-platz-zeile b{display:block;font-size:var(--lg-fs-lg);line-height:1.2}
.lg-ub2-platz-zeile small{display:block;color:var(--mut);font-size:var(--lg-fs-xs)}
.lg-ub2-hw{display:block;margin-top:2px;color:var(--lg-warn-ink);font-size:var(--lg-fs-xs);font-weight:700}
.lg-ub2-hw[hidden]{display:none}
.lg-ub2-karte{display:block;width:100%;margin:10px 0 0;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.lg-ub2-karte svg.hp{display:block;width:100%;height:auto;background:#0b0e1a;border-radius:var(--lg-r-sm);border:1px solid var(--line)}
/* Liegt das Fach nicht auf der Karte, zeichnet hallenplan.js nichts: dann auch kein leerer Kasten. */
.lg-ub2-karte:has(svg.hp:empty){display:none}
.lg-ub2-karte>span{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--lg-r-pill);
  background:rgba(26,31,53,.94);border:1px solid var(--line2);color:var(--ink);font-size:var(--lg-fs-xs);font-weight:700}
.lg-ub2-karte>span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Die große Karte: ein Tipp öffnet, ein Tipp schließt; keine Knöpfe, also auch kein Platz für ✕. */
.lg-ub2-vk{cursor:zoom-out}
.lg-ub2-vk .lg-vk-kopf{padding-right:16px}
.lg-ub2-vk[hidden]{display:none}

/* BESTELLUNGEN heben sich von den ARTIKELN ab: Karte mit der Nummer als dunkler Marke vorn und
   kräftigem Kopf; die Artikel eingerückt, kleiner und auf dunklerem Grund darin. */
.lg-ub2-etikett{display:flex;align-items:baseline;gap:8px;margin:18px 0 8px}
.lg-ub2-etikett .lg-etikett{margin:0;flex:1}
.lg-ub2-etikett button{background:none;border:0;color:var(--mut);font:inherit;font-weight:700;font-size:var(--lg-fs-xs);min-height:32px;margin:0;padding:0 2px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lg-ub2-etikett button[hidden]{display:none}
.lg-ub2-best{margin:0 0 12px;border:1px solid var(--line2);border-radius:var(--lg-r-lg);background:var(--card2);overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.lg-ub2-best>summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px;cursor:pointer;list-style:none}
.lg-ub2-best>summary::-webkit-details-marker{display:none}
.lg-ub2-best>summary::after{color:var(--mut)}
.lg-ub2-nr{flex:none;display:flex;align-items:center;justify-content:center;min-width:56px;height:40px;padding:0 8px;border-radius:var(--lg-r-sm);
  background:var(--bg);border:1px solid var(--line2);font-weight:800;font-size:var(--lg-fs-md);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lg-ub2-btext{flex:1;min-width:0}
.lg-ub2-btext>b{display:block;font-size:var(--lg-fs-md)}
.lg-ub2-btext>span{display:block;font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-ub2-btext>.lg-ub2-pillen{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.lg-ub2-artikel{list-style:none;margin:0 8px 8px;padding:0;border-radius:var(--lg-r);background:var(--bg);border:1px solid var(--line)}
.lg-ub2-ua{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--line)}
.lg-ub2-ua:first-child{border-top:0}
.lg-ub2-ua.fehlt{background:var(--lg-bad-tint);box-shadow:inset 3px 0 0 var(--lg-bad)}
.lg-ub2-ua.fehlt .lg-pz-notiz{color:var(--lg-bad-ink)}
.lg-ub2-ua.entf{background:var(--lg-or-tint);box-shadow:inset 3px 0 0 var(--lg-or)}
.lg-ub2-ua.entf .lg-pz-notiz{color:var(--lg-or-ink)}
.lg-ub2-ua.mitgegeben{opacity:.5}
.lg-ub2-bild{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);
  border-radius:6px;background:#fff;overflow:hidden;cursor:zoom-in}
.lg-ub2-bild img{display:block;width:100%;height:100%;object-fit:contain}
.lg-ub2-bild.leer{background:none;border-style:dashed;color:var(--mut);font-size:.55rem;font-weight:700;text-align:center;line-height:1.1;cursor:default}
.lg-ub2-uatext{flex:1;min-width:0}
.lg-ub2-uaname{display:block;font-weight:600;font-size:var(--lg-fs-sm);line-height:1.3;word-break:break-word}
.lg-ub2-uaunter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-ub2-uaunter:empty{display:none}
.lg-ub2-grau{font-weight:700}
.lg-ub2-gepackt{font-size:var(--lg-fs-xs);color:var(--lg-ok-ink);font-weight:700}
.lg-ub2-leer{margin:0 12px 12px}

/* RÜCKFRAGEN über dem Knopf: Zahlart als drei Kacheln, die Haken als Zeilen. Echte Felder (ohne
   Skript geht das Formular), sichtbar ist nur die Fläche; der Stand kommt über :has(:checked). */
.lg-ub2-fragen{margin:16px 0 0;padding:12px;border-radius:var(--lg-r);background:var(--card);border:1px solid var(--line)}
.lg-ub2-fragen .lg-etikett{display:block;margin:0 0 8px}
.lg-ub2-kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 10px}
.lg-ub2-kachel{position:relative;display:flex;align-items:center;justify-content:center;min-height:var(--lg-h-tap);padding:4px;border-radius:var(--lg-r);
  border:1px solid var(--line2);background:var(--card2);color:var(--ink);font-weight:700;font-size:var(--lg-fs-sm);line-height:1.2;text-align:center;cursor:pointer}
.lg-ub2-kachel input,.lg-ub2-frage input,.lg-ub2-tb-art input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.lg-ub2-kachel:has(input:checked){background:var(--lg-place-tint);border-color:var(--lg-place);color:var(--lg-place-ink)}
.lg-ub2-kachel:has(input:focus-visible),.lg-ub2-frage:has(input:focus-visible),.lg-ub2-tb-art:has(input:focus-visible){box-shadow:var(--focus)}
.lg-ub2-frage{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:var(--lg-h-big);margin:0 0 6px;padding:8px 12px;border-radius:var(--lg-r);
  border:1px solid var(--line2);background:var(--card2);color:var(--ink);font-weight:700;font-size:var(--lg-fs-sm);cursor:pointer}
.lg-ub2-frage i{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:800;color:transparent}
.lg-ub2-frage:has(input:checked){border-color:var(--lg-ok)}
.lg-ub2-frage:has(input:checked) i{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on)}
.lg-ub2-neben{display:flex;gap:8px;margin:12px 0 0}
.lg-ub2-neben .lg-knopf{flex:1;background:none;border-color:var(--line2);color:var(--mut)}

/* Der Knopf unten fest (.lg-haupt): grau, solange etwas offen ist, und darunter WAS. */
.lg-ub2-fuss{margin-top:var(--lg-s4)}
.lg-ub2-fuss .lg-knopf.pri:disabled{background:var(--card2);border-color:var(--line2);color:var(--mut);cursor:default}
.lg-ub2-fuss a.lg-knopf.or{display:flex;width:100%;min-height:var(--lg-h-big);font-size:var(--lg-fs-md);text-decoration:none}
.lg-ub2-offen{margin:6px 0 0;text-align:center;font-size:var(--lg-fs-xs);color:var(--lg-warn-ink)!important;font-weight:700}
.lg-ub2-offen[hidden]{display:none}

/* Die Blätter „Teilweise" (je Artikel) und „Zurückstellen". */
.lg-ub2-blatt[hidden]{display:none}
.lg-ub2-blatt-satz{margin:0 0 6px}
.lg-ub2-tb-liste{max-height:52vh;overflow-y:auto;margin:6px -4px 0;padding:0 4px}
.lg-ub2-tb-best{margin:10px 0 0}
.lg-ub2-tb-kopf{display:flex;align-items:baseline;gap:8px;margin:0 0 4px}
.lg-ub2-tb-kopf b{font-size:var(--lg-fs-md)}
.lg-ub2-tb-kopf span{font-size:var(--lg-fs-xs);font-weight:700}
.lg-ub2-tb-kopf .ok,.lg-ub2-tb-summe .ok{color:var(--lg-ok-ink)}
.lg-ub2-tb-kopf .rest,.lg-ub2-tb-summe .rest{color:var(--lg-warn-ink)}
.lg-ub2-tb-summe{margin:10px 0 0;font-size:var(--lg-fs-xs);font-weight:700;text-align:center}
.lg-ub2-tb-summe:empty{display:none}
.lg-ub2-tb-art{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:4px 0 0;padding:6px 10px;border-radius:var(--lg-r);
  border:1px solid var(--line2);background:var(--card2);color:var(--ink);text-align:left;cursor:pointer}
.lg-ub2-tb-art i{flex:none;width:26px;height:26px;border-radius:6px;border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:800;color:transparent}
.lg-ub2-tb-art:has(input:checked){border-color:var(--lg-ok)}
.lg-ub2-tb-art:has(input:checked) i{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on)}
.lg-ub2-tb-art.fehlt:not(:has(input:checked)){border-color:var(--lg-bad);background:var(--lg-bad-tint)}
.lg-ub2-tb-bild{flex:none;width:36px;height:36px;border-radius:6px;background:#fff;overflow:hidden}
.lg-ub2-tb-bild img{display:block;width:100%;height:100%;object-fit:contain}
.lg-ub2-tb-txt{flex:1;min-width:0}
.lg-ub2-tb-txt b{display:block;font-size:var(--lg-fs-sm);font-weight:600;word-break:break-word}
.lg-ub2-tb-txt small{display:block;font-size:var(--lg-fs-xs);color:var(--lg-bad-ink);font-weight:700}
.lg-ub2-blatt .lg-blatt-fuss a.lg-knopf{text-decoration:none}
.lg-ub2-blatt input.lg-feld{margin-top:6px}

/* Die Bühne bei einer echten Teilübergabe: Der Platz bleibt belegt und steht gelb, nicht grün. */
.lg-bu-karte.warn .lg-platz.xl{background:var(--lg-warn);border-color:var(--lg-warn);color:#3f2a00}

/* =================================================================================================
   LEITSTAND-ABGLEICH (U26/U27, 15.10.2026, 01-aktiv/leitstand-abgleich/Mockup_Leitstand.html)
   ================================================================================================= */

/* Der Balken „7 von 12 im Korb": auf den Karten „Gerade im Lager" und im Kasten „Beim Packen". */
.lg-balken{height:8px;border-radius:var(--lg-r-pill);background:var(--line);overflow:hidden}
.lg-balken>i{display:block;height:100%;background:var(--lg-ok);border-radius:var(--lg-r-pill)}

/* Körbchen-Zeile: der Stand je Artikel (✓ ✗ ⊘, leer offen), wie auf der Packkarte. */
.lg-cockpit .lg-kb-st{flex:none;width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;align-self:center;border:1px dashed var(--line2);color:var(--mut)}
.lg-cockpit .lg-kb-st.korb{background:var(--lg-ok-tint);border:1px solid var(--lg-ok);color:var(--lg-ok-ink)}
.lg-cockpit .lg-kb-st.fehlt{background:var(--lg-bad-tint);border:1px solid var(--lg-bad);color:var(--lg-bad-ink)}
.lg-cockpit .lg-kb-st.entf{background:var(--lg-or-tint);border:1px solid var(--lg-or);color:var(--lg-or-ink)}
.lg-cockpit .lg-kb-st.mit{background:var(--card);border:1px solid var(--line2);color:var(--mut)}
.lg-cockpit .lg-kt-artname .lg-kb-unter{display:block;margin:2px 0 0}
/* Die Notiz an der Zeile, auch an grünen („Ersatz eingepackt"): gelb, unter dem Artikel. */
.lg-cockpit .lg-kb-notiz{display:block;margin-top:3px;font-size:var(--lg-fs-xs);color:var(--lg-warn-ink);line-height:1.4}
/* Schon mitgegeben: grau und durchgestrichen, wie an der Theke. */
.lg-cockpit .lg-kb-grau .lg-kt-menge,.lg-cockpit .lg-kb-grau .lg-kt-artname{color:var(--mut)}
.lg-cockpit .lg-kb-grau .lg-kb-name{text-decoration:line-through;text-decoration-color:var(--line2)}

/* Die Kästen „Beim Packen" (grün) und „An der Theke" (blau) oben rechts in der Körbchen-Zeile. */
.lg-cockpit .lg-kb-stand{background:var(--card2);border:1px solid var(--lg-ok);border-radius:var(--lg-r);
  padding:var(--lg-s3) var(--lg-s4);margin:0 0 var(--lg-s3)}
.lg-cockpit .lg-kb-stand.rest{border-color:var(--lg-info)}
.lg-cockpit .lg-kb-stand-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:var(--lg-s2);flex-wrap:wrap;margin:0 0 6px}
.lg-cockpit .lg-kb-stand-kopf b{font-size:var(--lg-fs-md)}
.lg-cockpit .lg-kb-stand-zahlen{display:flex;gap:var(--lg-s2);flex-wrap:wrap;margin:8px 0 0}
.lg-cockpit .lg-kb-stand>p{margin:8px 0 0}

/* „Gerade im Lager" (U27): eine Karte je Mitarbeiter. Klein unter dem Blick-Kasten an normalen Tagen,
   groß (.gross) oben im Leitstand an den Verkaufstagen. */
.lg-gl{margin:0 0 var(--lg-s4)}
.lg-gl-kopf{display:flex;align-items:baseline;gap:var(--lg-s2);margin:0 0 var(--lg-s2)}
.lg-gl-kopf h3{margin:0;font-size:var(--lg-fs-md)}
.lg-gl-leer{margin:0;color:var(--mut);font-size:var(--lg-fs-sm)}
.lg-gl-leute{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--lg-s3)}
.lg-gl-person{background:var(--card2);border:1px solid var(--line2);border-radius:var(--lg-r);padding:var(--lg-s3) var(--lg-s4);
  display:flex;flex-direction:column;gap:6px;min-width:0}
.lg-gl-person.aktiv{border-color:var(--lg-ok);box-shadow:inset 3px 0 0 var(--lg-ok)}
.lg-gl-person.ruhig{opacity:.72}
.lg-gl-pkopf{display:flex;align-items:center;gap:var(--lg-s2)}
.lg-gl-avatar{width:34px;height:34px;border-radius:50%;background:var(--lg-brand-tint);border:1px solid var(--lg-brand);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.lg-gl-person.ruhig .lg-gl-avatar{background:var(--card);border-color:var(--line2);color:var(--mut)}
.lg-gl-name{font-weight:800;font-size:var(--lg-fs-md);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-gl-person .lg-punkt.ruhe{background:var(--line2)}
.lg-gl-tut{font-weight:700;font-size:var(--lg-fs-md);overflow-wrap:anywhere}
.lg-gl-pillen{display:flex;gap:var(--lg-s2);flex-wrap:wrap}
.lg-gl.gross .lg-gl-leute{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.lg-gl.gross .lg-gl-name{font-size:var(--lg-fs-lg)}
.lg-gl.gross .lg-gl-tut{font-size:var(--lg-fs-lg)}
.lg-gl.gross .lg-gl-avatar{width:42px;height:42px;font-size:1.1rem}
/* Im Leitstand steht „Gerade im Lager" direkt unter der Kopfzeile („Donnerstag, 15.10. · Ausgabe läuft"). */
.lg-ls .lg-gl{margin-top:var(--lg-s4)}