/* =================================================================================================
   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. Die Packliste trägt seit U44 (29.10.2026, „zu bunt") nur
   noch den roten Rand; gelb und die Hausfarbe (.vr) gelten dort nicht mehr, an der Abholung schon. */
.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 .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-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)}
.lg-cockpit .lg-ht-kacheln>.lg-ls-kropp{box-shadow:inset 3px 0 0 var(--lg-au,#3ec7e0)}
.lg-cockpit .lg-ht-kacheln>.lg-ls-kropp b a{color:var(--lg-au-ink,#9be6f3);text-decoration:none}
.lg-cockpit .lg-ht-kacheln>.lg-ls-kropp span a{color:inherit;text-decoration:none}
.lg-cockpit .lg-ht-kacheln>.lg-ls-kropp i.lg-ht-werk-geholt{color:var(--ok-ink,#8fecc0)}
.lg-cockpit .lg-ht-kacheln>.lg-ls-kropp i.lg-ht-werk-gedruckt{color:var(--warn-ink,#ffcf6b)}

/* 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-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-tabelle tr.naechster td:first-child b{color:var(--lg-info-ink)}
.lg-tabelle tr.da td:first-child b{color:var(--ok)}

/* Das Formular „von Hand eintragen" am Tag der Terminübersicht (views/_lager_termine_kommende.php). */
.lg-tr-eintragen-form{display:flex;gap:var(--lg-s2);flex-wrap:wrap;align-items:flex-end;margin-top:var(--lg-s2)}
.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}
/* Zwei Zeilen, wenn der Knopf mehr liest als den Kunden (Etiketten an): „Kunde, Päckchen oder Fach“ leise darunter. */
.lg-scan-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left}
.lg-scan-text small{font-size:var(--lg-fs-sm,.8rem);font-weight:500;color:var(--mut)}
/* 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)}
.lg-cockpit .lg-ht-werk-au .lg-ikon{color:var(--lg-au,var(--lg-brand))}
.lg-cockpit .lg-ht-werk-au a{color:inherit;text-decoration:none}
.lg-cockpit .lg-ht-werk-ziel::after{content:"";position:absolute;inset:0;border-radius:inherit}
.lg-cockpit .lg-ht-werk-au:focus-within{box-shadow:var(--focus)}
.lg-cockpit .lg-ht-werk-druck{position:relative;z-index:1;text-decoration:underline!important}
/* Kropp-Fuhre (U50): „Drucken" ist ein Formular (es bucht die Fuhre) und sieht aus wie der Link vorher; die
   Kachelregel `.lg-ht-werkzeuge form>button` (Saisonruhe) darf es nicht zur Kachel machen. */
.lg-cockpit .lg-ht-werk-druckform{display:inline}
.lg-cockpit .lg-ht-werkzeuge .lg-ht-werk-druckform>button.lg-ht-werk-druck,.lg-cockpit .lg-ls .lg-ht-werk-druckform>button.lg-ht-werk-druck{display:inline;min-height:0;padding:0;border:0;border-radius:0;
  background:none;color:inherit;font:inherit;line-height:inherit;cursor:pointer;position:relative;z-index:1;text-decoration:underline}
.lg-cockpit .lg-ht-werkzeuge span.lg-ht-werk-geholt,.lg-cockpit .lg-ls .lg-ht-werk-geholt{color:var(--ok-ink,#8fecc0)}
/* Gedruckt, noch nicht geholt (Mirko 01.11.2026): Warnton, bis „Ist geholt“ gedrückt ist. */
.lg-cockpit .lg-ht-werkzeuge span.lg-ht-werk-gedruckt,.lg-cockpit .lg-ls .lg-ht-werk-gedruckt{color:var(--warn-ink,#ffcf6b)}
/* Mit „Aus Kropp holen“ sind es vier Kacheln: zwei mal zwei statt drei plus eine. */
.lg-cockpit .lg-ht-werkzeuge:has(>:nth-child(4)){grid-template-columns:repeat(2,1fr)}
@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}
/* 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)}
/* Das Wort „Filter" nur beim Überfahren (Körbchen entschlacken, 27.10.2026): Der rote Strich zeigt den
   aktiven Filter, fünfmal dasselbe Wort war Rauschen. */
.lg-cockpit .lg-kb-kacheln>a::after{opacity:0;transition:opacity .12s}
.lg-cockpit .lg-kb-kacheln>a:hover::after,.lg-cockpit .lg-kb-kacheln>a:focus-visible::after{opacity:1}
.lg-cockpit .lg-kb-kacheln b{font-size:var(--lg-fs-lg)}
/* 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}
/* =================================================================================================
   [KOERBCHEN] DIE RUHIGE TABELLE UND DIE ERHÖHTE KARTE (Körbchen entschlacken, entschieden 27.10.2026;
   03-archiv/koerbchen-entschlacken/Koerbchen_Entschlackt_Mockup.html, Ausprägung A1)

   Die Liste hat vier Spalten (Kunde · Platz · Stand · seit) und den Pfeil, jede Zeile ein Raster statt
   einer Tabellenzeile, damit Zeile und Inhalt EIN Block sein können. Rot trägt nur noch echte Arbeit
   (.arbeit: nachpacken, Shop hängt) als Kante; Vorrang ist eine Gruppe mit neutraler Überschrift.
   Die offene Zeile hebt sich als hellere, erhöhte Karte mit feinem Rahmen und weichem Schatten heraus,
   ohne Akzentfarbe; rechts eine leicht abgedunkelte Seitenspalte. Farben: Bernstein = fehlt/Achtung,
   Cyan = Außenlager, Blau = Platz/Auskunft, Grün = gepackt/bezahlt, Violett = Bundle, grau = leise.
   ================================================================================================= */
.lg-cockpit .lg-kb-liste{width:100%}
.lg-cockpit .lg-kb-lkopf,.lg-cockpit .lg-kb-zeile{display:grid;grid-template-columns:minmax(0,1fr) 108px 230px 92px 28px;gap:0 14px;align-items:center}
.lg-cockpit .lg-kb-lkopf{font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:800;padding:0 10px 8px;border-bottom:1px solid var(--line)}
.lg-cockpit .lg-kb-gruppe{display:flex;gap:8px;align-items:center;padding:16px 10px 6px;border-bottom:1px solid var(--line);
  font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:var(--ink)}
.lg-cockpit .lg-kb-gruppe .lg-kb-vr{color:var(--mut);font-size:.7rem}
.lg-cockpit .lg-kb-gruppe em{font-style:normal;color:var(--faint);font-weight:600;text-transform:none;letter-spacing:0;font-size:.74rem}
.lg-cockpit .lg-kb-zeile{padding:10px;border-bottom:1px solid rgba(42,48,80,.6);cursor:pointer;position:relative}
.lg-cockpit .lg-kb-zeile:hover{background:rgba(255,255,255,.025)}
.lg-cockpit .lg-kb-block.arbeit>.lg-kb-zeile{box-shadow:inset 3px 0 0 var(--lg-bad)}
.lg-cockpit .lg-kb-zeile.aus{opacity:.78}
.lg-cockpit .lg-kb-nm a{color:var(--ink);text-decoration:none}
.lg-cockpit .lg-kb-nm b{font-weight:700}
.lg-cockpit .lg-kb-liste a:focus:not(:focus-visible){outline:0;box-shadow:none}
.lg-cockpit .lg-kb-unter{display:block;font-size:.74rem;color:var(--mut)}
.lg-cockpit .lg-kb-vrz{color:var(--mut);font-size:.66rem;margin-right:6px;vertical-align:1px}
.lg-cockpit .lg-kb-hinweise{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
/* Die Pillen der Liste und der Karte: klein, Versalien, wie im Mockup. F3 und § 20 leise (nur Umriss), der
   Packhinweis als Bernstein-Umriss, der Weg blau wie eine Auskunft (gemischt bleibt Bernstein). */
.lg-cockpit .lg-kb-liste .lg-pille{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;line-height:1.5;gap:0}
.lg-cockpit .lg-kb-liste .lg-pille.f3,.lg-cockpit .lg-kb-liste .lg-pille.p20{background:none;border-color:var(--line2);color:var(--mut)}
.lg-cockpit .lg-kb-liste .lg-pille.hw{background:none;border-color:rgba(255,176,32,.45);color:var(--lg-warn-ink)}
.lg-cockpit .lg-kb-liste .lg-pille.vs,.lg-cockpit .lg-kb-liste .lg-pille.ef{background:var(--lg-info-tint);border-color:rgba(126,166,255,.45);border-style:solid;color:var(--lg-place-ink)}
.lg-cockpit .lg-kb-liste .lg-pille.warn{border-color:rgba(255,176,32,.45)}
/* Platz: das Kürzel, „+1" bei einem zweiten, darunter die Kisten; „kein Platz" Bernstein gestrichelt. */
.lg-cockpit .lg-kb-pl .lg-platz{border-radius:8px;padding:2px 9px;font-size:.85rem;border-color:rgba(126,166,255,.45)}
.lg-cockpit .lg-kb-pl .lg-platz.kein{border-style:dashed;background:var(--lg-warn-tint);border-color:rgba(255,176,32,.45);color:var(--lg-warn-ink);font-size:.7rem}
.lg-cockpit .lg-kb-pl small{display:block;font-size:.7rem;color:var(--mut);margin-top:2px}
.lg-cockpit .lg-kb-leer{color:var(--faint)}
/* Stand: Balken und „noch N von M", darunter der grüne Punkt „jana packt gerade". */
.lg-cockpit .lg-kb-stand .lg-balken{height:6px;max-width:170px;margin:0 0 5px}
.lg-cockpit .lg-kb-stand>b{font-weight:800;font-variant-numeric:tabular-nums}
.lg-cockpit .lg-kb-zus{font-size:.76rem;color:var(--mut)}
/* Ein Glied des Stands („noch 5 von 64", „2 aus Kropp", „3 offen") bricht nie in sich um, nur am „·". */
.lg-cockpit .lg-kb-gl{white-space:nowrap}
.lg-cockpit .lg-kb-zus .lg-kb-gl b{font-weight:800;font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums}
.lg-cockpit .lg-kb-satz{display:block}
.lg-cockpit .lg-kb-fehlt{color:var(--lg-warn-ink);font-weight:700}
.lg-cockpit .lg-kb-kropp{color:var(--lg-au-ink);font-weight:700}
.lg-cockpit .lg-kb-still{color:var(--faint);font-size:.82rem}
.lg-cockpit .lg-kb-stand .lg-kb-zu{margin:0 6px 4px 0}
.lg-cockpit .lg-kb-live{display:block;font-size:.72rem;color:var(--lg-ok-ink);margin-top:2px}
.lg-cockpit .lg-kb-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lg-ok);margin-right:5px;vertical-align:1px;animation:lg-kb-puls 1.6s infinite}
@keyframes lg-kb-puls{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.lg-cockpit .lg-kb-live::before{animation:none}}
.lg-cockpit .lg-kb-seit{color:var(--mut);font-size:.84rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.lg-cockpit .lg-kb-pfeil{text-align:right}
.lg-cockpit .lg-kb-pfeil a{color:var(--mut);text-decoration:none}
.lg-cockpit .lg-kb-zeile.offen .lg-chev{transform:translateY(-2px) rotate(45deg)}
.lg-cockpit .lg-kb-zeile.offen .lg-kb-pfeil a{color:var(--ink)}

/* DIE OFFENE ZEILE (A1): Zeile und Inhalt als eine erhöhte Karte, etwas breiter als die Listenzeilen.
   Der Balken der Zeile ruht, er steht groß oben im Inhalt. Rot nur, wenn echte Arbeit ansteht. */
.lg-cockpit .lg-kb-block.offen{position:relative;z-index:1;margin:8px -8px 10px;background:#1c2240;border:1px solid rgba(255,255,255,.08);border-radius:14px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.lg-cockpit .lg-kb-block.offen.arbeit{box-shadow:inset 3px 0 0 var(--lg-bad),0 18px 40px -12px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.25)}
.lg-cockpit .lg-kb-block.offen>.lg-kb-zeile{padding:14px 18px;border-bottom:0;box-shadow:none}
.lg-cockpit .lg-kb-block.offen>.lg-kb-zeile:hover{background:rgba(255,255,255,.02)}
.lg-cockpit .lg-kb-block.offen>.lg-kb-zeile .lg-kb-stand .lg-balken{display:none}
.lg-cockpit .lg-kb-detail{border-top:1px solid rgba(255,255,255,.06);cursor:default}
.lg-cockpit .lg-kb-laedt{padding:18px 22px;color:var(--mut);font-size:var(--lg-fs-sm)}

/* Der Inhalt: oben die Aussage, die Achtung-Leiste, dann zwei Spalten. */
.lg-cockpit .lg-kb-det{display:block;color:var(--ink)}
.lg-cockpit .lg-kb-det>.lg-kasten{margin:18px 22px}
.lg-cockpit .lg-kb-aussage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:end;padding:18px 22px 16px}
.lg-cockpit .lg-kb-aussage h4{margin:0;font-size:1.22rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.lg-cockpit .lg-kb-am{color:var(--lg-warn-ink)}
.lg-cockpit .lg-kb-au{color:var(--lg-au-ink)}
.lg-cockpit .lg-kb-meta{font-size:.76rem;color:var(--mut);text-align:right;white-space:nowrap}
.lg-cockpit .lg-kb-meta b{display:block;color:var(--ink);font-weight:600;font-size:.82rem}
.lg-cockpit .lg-kb-gross{grid-column:1/-1;display:flex;align-items:center;gap:12px}
.lg-cockpit .lg-kb-gross .lg-balken{flex:1;height:8px;background:rgba(255,255,255,.07)}
.lg-cockpit .lg-kb-gross span{font-size:.8rem;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.lg-cockpit .lg-kb-reihe{grid-column:1/-1;font-size:.76rem;color:var(--mut)}
/* Die Achtung-Leiste: was Herausgabe oder Packen blockiert, nach Gewicht, nur wenn etwas da ist. */
.lg-cockpit .lg-kb-achtung{list-style:none;margin:0;padding:0 22px 14px;display:grid;gap:6px}
.lg-cockpit .lg-kb-aussage+.lg-kb-achtung{margin-top:-2px}
.lg-cockpit .lg-kb-det>.lg-kb-achtung:first-child{padding-top:18px}
.lg-cockpit .lg-kb-achtung li{display:grid;grid-template-columns:10px auto minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;font-size:.84rem;padding:7px 12px;
  border-radius:9px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05)}
.lg-cockpit .lg-kb-achtung li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lg-warn);transform:translateY(-1px)}
.lg-cockpit .lg-kb-achtung li.rot::before{background:var(--lg-bad)}
.lg-cockpit .lg-kb-achtung li.rot{border-color:rgba(239,68,68,.28)}
.lg-cockpit .lg-kb-achtung li b{font-weight:700}
/* Titel und Satz in EINER Zeile, der Satz rechtsbündig (Mockup); der Knopf dahinter. */
.lg-cockpit .lg-kb-achtung li>b{grid-column:2}
.lg-cockpit .lg-kb-achtung li>span{color:var(--mut);grid-column:3;text-align:right}
.lg-cockpit .lg-kb-achtung li>form{grid-column:4;align-self:center;margin:0}
.lg-cockpit .lg-kb-det-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);border-top:1px solid rgba(255,255,255,.05)}
.lg-cockpit .lg-kb-det-links,.lg-cockpit .lg-kb-det-rechts{padding:18px 22px 20px;min-width:0}
.lg-cockpit .lg-kb-det-rechts{background:rgba(0,0,0,.12)}
.lg-cockpit .lg-kb-etikett{display:flex;justify-content:space-between;align-items:baseline;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:800;margin:0 0 8px;color:var(--mut)}
.lg-cockpit .lg-kb-etikett em{font-style:normal;letter-spacing:0;text-transform:none;font-weight:500;color:var(--faint);font-size:.74rem}
.lg-cockpit .lg-kb-etikett.zwei{margin-top:24px}
.lg-cockpit .lg-kb-det .lg-pille{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;line-height:1.5;gap:0}
.lg-cockpit .lg-kb-det .lg-pille.f3,.lg-cockpit .lg-kb-det .lg-pille.p20{background:none;border-color:var(--line2);color:var(--mut)}

/* Das Positionsraster, gleich für „Noch offen", „Entfällt" und die Bestellungen: Statuspille (64 px, alle
   gleich breit) · Bild (38 px) · Menge · Artikel · rechts leise. */
.lg-cockpit .lg-kb-pos{list-style:none;margin:0;padding:0}
.lg-cockpit .lg-kb-pos>li,.lg-cockpit .lg-kb-entf-zeile{display:grid;grid-template-columns:64px 38px 34px minmax(0,1fr) auto;gap:0 12px;align-items:center;font-size:.86rem}
.lg-cockpit .lg-kb-pos>li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.lg-cockpit .lg-kb-pos>li:last-child{border-bottom:0}
.lg-cockpit .lg-kb-mg{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.lg-cockpit .lg-kb-art{min-width:0}
.lg-cockpit .lg-kb-art small{display:block;color:var(--faint);font-size:.72rem;margin-top:1px}
.lg-cockpit .lg-kb-re{font-size:.72rem;color:var(--faint);text-align:right;white-space:nowrap}
.lg-cockpit .lg-kb-ortp{display:inline-block;margin-right:6px;font-size:.66rem;padding:1px 6px;border-radius:6px;background:var(--lg-info-tint);
  border:1px solid rgba(126,166,255,.4);color:var(--lg-place-ink);font-weight:700;white-space:nowrap;
  max-width:9em;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}   /* ein langer Lagerort quetscht den Namen nicht; voll im Tooltip */
.lg-cockpit .lg-kb-det .lg-kt-bild{width:38px;height:38px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}
.lg-cockpit .lg-kb-det .lg-kt-bild.leer.ruhig{background:rgba(255,255,255,.04)}
.lg-cockpit .lg-kb-pos.klein>li{padding:5px 0;font-size:.8rem}
.lg-cockpit .lg-kb-pos.klein .lg-kt-bild{width:36px;height:36px}
.lg-cockpit .lg-kb-pos.klein>li.k .lg-kb-art,.lg-cockpit .lg-kb-pos.klein>li.k .lg-kb-mg{color:var(--mut);font-weight:500}
.lg-cockpit .lg-kb-pos>li.mit .lg-kb-art,.lg-cockpit .lg-kb-pos>li.mit .lg-kb-mg{color:var(--faint)}
.lg-cockpit .lg-kb-pos .lg-kb-name{text-decoration:line-through;text-decoration-color:var(--line2)}
.lg-cockpit .lg-kb-pos>li.lg-teil{box-shadow:inset 2px 0 0 var(--lg-set)}
.lg-cockpit .lg-kb-pos>li.lg-setkopf{display:flex;gap:8px;color:var(--lg-set);font-size:.78rem;padding:7px 0 3px;border-bottom:0}
.lg-cockpit .lg-kb-pos>li.lg-setkopf b{color:var(--lg-set-ink);font-weight:700}
.lg-cockpit .lg-kb-pos>li.lg-setkopf small{color:var(--faint)}
.lg-cockpit .lg-kb-st{display:inline-block;box-sizing:border-box;width:64px;padding:1px 0;font-size:.56rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;text-align:center;border-radius:20px;border:1px solid var(--line2);color:var(--faint);line-height:1.5}
.lg-cockpit .lg-kb-st.f{background:var(--lg-warn-tint);border-color:rgba(255,176,32,.45);color:var(--lg-warn-ink)}
.lg-cockpit .lg-kb-st.au{background:var(--lg-au-tint);border-color:rgba(62,199,224,.5);color:var(--lg-au-ink)}
.lg-cockpit .lg-kb-st.entf{background:rgba(255,138,61,.1);border-color:rgba(255,138,61,.5);color:#ffc49a}
.lg-cockpit .lg-kb-st.k,.lg-cockpit .lg-kb-st.leer{border:0;color:var(--faint);font-size:.8rem;letter-spacing:0}
/* „wartet" an der Theke: gepackt, beim Kunden noch nicht angekommen; leiser Umriss wie „offen", in Platz-Blau. */
.lg-cockpit .lg-kb-st.w{border-color:rgba(126,166,255,.45);color:var(--lg-place-ink)}
.lg-cockpit .lg-kb-notiz{display:block;margin-top:2px;font-size:.74rem;color:var(--lg-warn-ink);line-height:1.4}

/* Entfällt: eine eigene kleine Gruppe mit dem Knopf, weil Mirko hier handelt. */
.lg-cockpit .lg-kb-entf{margin-top:6px;border:1px solid rgba(255,138,61,.3);border-radius:10px;padding:10px 12px;background:rgba(255,138,61,.04)}
.lg-cockpit .lg-kb-entf-zeile+.lg-kb-entf-zeile{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,138,61,.18)}
.lg-cockpit .lg-kb-entf-zeile form{margin:0}
.lg-cockpit .lg-kb-lage{grid-column:4/6;font-size:.76rem;margin-top:6px;color:var(--mut)}
.lg-cockpit .lg-kb-lage.rot{color:var(--lg-bad-ink)}

/* Die Bestellungen: eingeklappt als gleich hohe Zeilen in einem Rahmen; der Packhinweis auch zu sichtbar. */
.lg-cockpit .lg-kb-bestl{border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden}
.lg-cockpit .lg-kb-best{border-bottom:1px solid rgba(255,255,255,.05)}
.lg-cockpit .lg-kb-best:last-child{border-bottom:0}
.lg-cockpit .lg-kb-best>summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:76px 74px minmax(0,1fr) auto 112px 14px;gap:0 10px;
  align-items:center;min-height:40px;padding:0 12px;font-size:.82rem}
.lg-cockpit .lg-kb-best>summary::-webkit-details-marker{display:none}
.lg-cockpit .lg-kb-best>summary:hover{background:rgba(255,255,255,.025)}
.lg-cockpit .lg-kb-best>summary:focus-visible{outline:none;box-shadow:inset var(--focus)}
.lg-cockpit .lg-kb-best>summary.mit-hw{padding-top:8px;padding-bottom:8px;row-gap:6px}
.lg-cockpit .lg-kb-nr{font-weight:700;font-variant-numeric:tabular-nums}
.lg-cockpit .lg-kb-w{color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.lg-cockpit .lg-kb-w+.lg-kb-w{white-space:normal;line-height:1.25}   /* „noch keine Rechnung" nicht kürzen */
.lg-cockpit .lg-kb-w>span{white-space:nowrap}                         /* die Rechnungsnummer bricht nie am Bindestrich */
.lg-cockpit .lg-kb-kz{white-space:nowrap}
.lg-cockpit .lg-kb-rest{justify-self:end}
.lg-cockpit .lg-kb-best>summary .lg-chev{color:var(--faint);width:8px;height:8px;border-width:0 2px 2px 0;margin:0}
.lg-cockpit .lg-kb-best[open]>summary .lg-chev{transform:translateY(-2px) rotate(45deg)}
.lg-cockpit .lg-kb-hwzeile{grid-column:1/-1;display:flex;gap:8px;align-items:baseline;font-size:.78rem;color:var(--ink);padding:5px 9px;border-radius:7px;
  border:1px solid rgba(255,176,32,.45);background:var(--lg-warn-tint)}
.lg-cockpit .lg-kb-hwzeile i{font-style:normal;font-weight:800;color:var(--lg-warn-ink)}
.lg-cockpit .lg-kb-hwzeile small{color:var(--mut);margin-left:auto;white-space:nowrap}
.lg-cockpit .lg-kb-best.storno>summary{color:var(--faint)}
.lg-cockpit .lg-kb-best.storno .lg-kb-nr{text-decoration:line-through;color:var(--faint)}
.lg-cockpit .lg-kb-innen{padding:4px 12px 10px;background:rgba(0,0,0,.12);max-height:340px;overflow:auto}
.lg-cockpit .lg-kb-innen .lg-kb-hw-neu,.lg-cockpit .lg-kb-innen .lg-kb-hw-aendern{margin:6px 0 0;padding:0;border:0}
.lg-cockpit .lg-kb-innen .lg-kb-hw-neu>summary,.lg-cockpit .lg-kb-innen .lg-kb-hw-aendern>summary{font-size:.74rem;color:var(--mut)}
.lg-cockpit .lg-kb-innen .lg-kb-hw-neu>summary:hover,.lg-cockpit .lg-kb-innen .lg-kb-hw-aendern>summary:hover{color:var(--ink)}

/* Rechte Spalte: der Platz groß, dann das Raster Beschriftung | Wert. */
.lg-cockpit .lg-kb-platz{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;margin:0 0 16px}
.lg-cockpit .lg-kb-platz .lg-platz.gross{min-width:76px;height:64px;padding:0 14px;border-radius:12px;font-size:2rem;font-weight:800;color:#d6e3ff;
  background:rgba(126,166,255,.1);border:1px solid rgba(126,166,255,.45);letter-spacing:.01em;line-height:1}
.lg-cockpit .lg-kb-platz .lg-platz.gross.leer{font-size:.9rem;color:var(--mut);background:none;border:1px dashed var(--line2)}
.lg-cockpit .lg-kb-platz-text b{display:block;font-size:.95rem}
.lg-cockpit .lg-kb-platz-text span{display:block;font-size:.74rem;color:var(--faint)}
.lg-cockpit .lg-kb-fakten{display:grid;grid-template-columns:76px minmax(0,1fr);margin:0;font-size:.84rem}
.lg-cockpit .lg-kb-fakten dt,.lg-cockpit .lg-kb-fakten dd{padding:9px 0;border-top:1px solid rgba(255,255,255,.05);margin:0}
.lg-cockpit .lg-kb-fakten dt{color:var(--faint);font-size:.76rem;padding-top:11px}
.lg-cockpit .lg-kb-fakten dd{color:var(--ink);min-width:0}
.lg-cockpit .lg-kb-fakten dd small{display:block;font-size:.74rem;color:var(--faint);margin-top:1px}
.lg-cockpit .lg-kb-fakten dd form{margin:7px 0 0}
.lg-cockpit .lg-kb-betrag{margin-left:4px;font-weight:800;font-variant-numeric:tabular-nums}
.lg-cockpit .lg-kb-tip{border-bottom:1px dotted var(--faint)}
/* Leise grau wie im Mockup: Bernstein heißt in der Karte nur „fehlt". */
.lg-cockpit .lg-kb-zl>span{border-bottom:1px dotted var(--faint);color:var(--faint)}
/* Die Knöpfe der Karte sind leise: Rahmen, kein Ton; was sie tun, sagt der Tooltip. */
.lg-cockpit .lg-kb-det .lg-knopf.klein{min-height:0;padding:3px 10px;border-radius:8px;border:1px solid var(--line2);background:none;
  color:var(--mut);font-size:.72rem;font-weight:600}
.lg-cockpit .lg-kb-det .lg-knopf.klein:hover{color:var(--ink);border-color:var(--mut)}
.lg-cockpit .lg-kb-eingriffe{margin-top:4px}
/* Vorziehen oben in der rechten Spalte (02.11.2026): ein richtiger Knopf statt „vorziehen“ in der Faktenzeile. */
.lg-cockpit .lg-kb-vz{margin:0 0 16px}
.lg-cockpit .lg-kb-det .lg-knopf.lg-kb-vz-knopf{width:100%;min-height:42px;border-radius:10px;border:1px solid var(--ink);
  background:none;color:var(--ink);font-weight:700;font-size:.95rem;letter-spacing:.01em}
.lg-cockpit .lg-kb-det .lg-knopf.lg-kb-vz-knopf:hover{background:rgba(255,255,255,.06)}
.lg-cockpit .lg-kb-vz.an{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
  border:1px solid var(--line2);border-radius:10px;background:var(--card2)}
.lg-cockpit .lg-kb-vz-stand{font-weight:700;color:var(--ink)}
.lg-cockpit .lg-kb-vz-stand small{display:block;font-weight:400;color:var(--mut);font-size:.78rem;margin-top:2px}
/* Der Verlauf: eingeklappt unten rechts, Art-Pillen leise. */
.lg-cockpit .lg-kb-verlauf-mehr{margin-top:14px;border-top:1px solid rgba(255,255,255,.05)}
.lg-cockpit .lg-kb-verlauf-mehr>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:11px 0 4px;font-size:.8rem;color:var(--mut)}
.lg-cockpit .lg-kb-verlauf-mehr>summary::-webkit-details-marker{display:none}
.lg-cockpit .lg-kb-verlauf-mehr>summary b{color:var(--ink);font-weight:600}
.lg-cockpit .lg-kb-verlauf-mehr[open]>summary .lg-chev{transform:translateY(-2px) rotate(45deg)}
.lg-cockpit .lg-kb-verlauf{list-style:none;margin:6px 0 0;padding:0}
.lg-cockpit .lg-kb-verlauf>li{display:grid;align-items:start;grid-template-columns:118px minmax(0,1fr);gap:2px 10px;font-size:.76rem;color:var(--mut);
  padding:6px 0;border-top:1px solid rgba(255,255,255,.04)}
.lg-cockpit .lg-kb-verlauf>li .lg-pille{justify-self:start;margin-top:1px;white-space:nowrap;max-width:100%}
/* Vorziehen ist eine Entscheidung, kein Problem: die Verlaufs-Pille „Vorrang" neutral statt in der Hausfarbe. */
.lg-cockpit .lg-kb-verlauf .lg-pille.vr{background:none;border-color:var(--line2);color:var(--mut)}
.lg-cockpit .lg-kb-verlauf>li b{color:var(--ink);font-weight:500}
.lg-cockpit .lg-kb-verlauf>li small,.lg-cockpit .lg-kb-verlauf>li q{grid-column:2;color:var(--faint);font-size:.7rem}
.lg-cockpit .lg-kb-verlauf>li q.lg-kb-zitat{color:var(--ink)}

/* Ohne Artikelbild (Schalter lager.artikelbild aus): die Bildspalte entfällt, das Raster bleibt. */
.lg-cockpit .lg-kb-det.ohne-bild .lg-kb-pos>li,.lg-cockpit .lg-kb-det.ohne-bild .lg-kb-entf-zeile{grid-template-columns:64px 34px minmax(0,1fr) auto}
.lg-cockpit .lg-kb-det.ohne-bild .lg-kb-lage{grid-column:3/5}

/* Schmal: Kunde | Platz | Pfeil, darunter der Stand und klein „seit"; die Karte einspaltig. Die
   Kacheln ohne leeres Feld (2 + 3, ganz schmal 2 + 2 + 1 breit). */
@media (max-width:900px){
  .lg-cockpit .lg-kb-kacheln{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lg-cockpit .lg-kb-kacheln>a{grid-column:span 2}
  .lg-cockpit .lg-kb-kacheln>a:nth-child(-n+2){grid-column:span 3}
}
@media (max-width:720px){
  .lg-cockpit .lg-kb-lkopf{display:none}
  .lg-cockpit .lg-kb-zeile{grid-template-columns:minmax(0,1fr) auto 24px;row-gap:6px}
  .lg-cockpit .lg-kb-zeile .lg-kb-nm{grid-column:1;grid-row:1}
  .lg-cockpit .lg-kb-zeile .lg-kb-pl{grid-column:2;grid-row:1}
  .lg-cockpit .lg-kb-zeile .lg-kb-pfeil{grid-column:3;grid-row:1}
  .lg-cockpit .lg-kb-zeile .lg-kb-stand{grid-column:1/-1;grid-row:2}
  .lg-cockpit .lg-kb-zeile .lg-kb-seit{grid-column:1/-1;grid-row:3;font-size:.72rem;color:var(--faint)}
  .lg-cockpit .lg-kb-zeile .lg-kb-seit:not(:empty)::before{content:"seit "}
  .lg-cockpit .lg-kb-zeile .lg-kb-seit:empty{display:none}
  .lg-cockpit .lg-kb-block.offen{margin:8px 0 10px}
  .lg-cockpit .lg-kb-det-grid,.lg-cockpit .lg-kb-aussage{grid-template-columns:1fr}
  .lg-cockpit .lg-kb-meta{text-align:left}
}
@media (max-width:560px){
  .lg-cockpit .lg-kb-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg-cockpit .lg-kb-kacheln>a,.lg-cockpit .lg-kb-kacheln>a:nth-child(-n+2){grid-column:auto}
  .lg-cockpit .lg-kb-kacheln>a:last-child{grid-column:1/-1}
  .lg-cockpit .lg-kb-leiste input[name="q"]{text-overflow:ellipsis}
  .lg-cockpit .lg-kb-leiste input[name="q"]::placeholder{font-size:.78rem}
  .lg-cockpit .lg-kb-aussage,.lg-cockpit .lg-kb-det-links,.lg-cockpit .lg-kb-det-rechts{padding-left:14px;padding-right:14px}
  .lg-cockpit .lg-kb-achtung{padding-left:14px;padding-right:14px}
  .lg-cockpit .lg-kb-achtung li{grid-template-columns:10px minmax(0,1fr)}
  .lg-cockpit .lg-kb-achtung li>span{grid-column:2;text-align:left}
  .lg-cockpit .lg-kb-achtung li>form{grid-column:2;grid-row:auto}
  /* Pille · Bild · Menge · Name bleiben in einer Reihe; die rechte Marke rückt unter den Namen. */
  .lg-cockpit .lg-kb-pos>li,.lg-cockpit .lg-kb-entf-zeile{grid-template-columns:56px 36px auto minmax(0,1fr);gap:2px 8px}
  .lg-cockpit .lg-kb-st{width:56px}
  .lg-cockpit .lg-kb-pos .lg-kb-re,.lg-cockpit .lg-kb-entf-zeile form{grid-column:4;text-align:left;white-space:normal}
  .lg-cockpit .lg-kb-lage{grid-column:1/-1}
  .lg-cockpit .lg-kb-det.ohne-bild .lg-kb-pos>li,.lg-cockpit .lg-kb-det.ohne-bild .lg-kb-entf-zeile{grid-template-columns:56px auto minmax(0,1fr)}
  .lg-cockpit .lg-kb-det.ohne-bild .lg-kb-pos .lg-kb-re,.lg-cockpit .lg-kb-det.ohne-bild .lg-kb-entf-zeile form{grid-column:3}
  .lg-cockpit .lg-kb-best>summary{grid-template-columns:auto minmax(0,1fr) auto 10px}
  .lg-cockpit .lg-kb-best>summary .lg-kb-w+.lg-kb-w,.lg-cockpit .lg-kb-best>summary .lg-kb-kz{display:none}
  .lg-cockpit .lg-kb-hwzeile{flex-wrap:wrap}
  .lg-cockpit .lg-kb-hwzeile small{margin-left:0;white-space:normal}
}
/* 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-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)}
/* --- „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}
/* --- Packhinweis (U20, Mirko 13.10.2026, 03-archiv/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-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").
   Klebt er (.klebt, setzt lager.js), wird er schmal (Mathias 01.11.2026): oben Name und Platz, darunter
   Zähler und Pillen in einer Zeile, der Balken als dünne Kante unten, „Zuletzt" fällt weg. */
.lg-pa-stand{--pa-x:var(--lg-s4);position:sticky;top:var(--lg-h-kopf);z-index:3;background:var(--bg);
  margin:var(--lg-s2) calc(var(--pa-x) * -1) var(--lg-s1);padding:var(--lg-s2) var(--pa-x) 10px;border-bottom:1px solid var(--line)}
@media (min-width:700px){ .lg-pa-stand{--pa-x:var(--lg-s5)} }
.lg-pa-anker{display:block;height:0}
.lg-pa-wer{display:none;align-items:center;gap:var(--lg-s2);margin:0;font-size:13px;line-height:20px;min-width:0}
.lg-pa-wer b{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lg-pa-wo{flex:none;margin-left:auto;padding:0 8px;border-radius:var(--lg-r-pill);background:var(--card2);
  color:var(--ink);font-weight:800;font-size:12px;line-height:20px;letter-spacing:.02em}
.lg-pa-wo::before{content:"Steht in ";font-weight:500;letter-spacing:0;color:var(--mut)}
.lg-pa-stand-zeile{display:flex;align-items:baseline;gap:6px 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);white-space:nowrap}
.lg-pa-pillen{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-left:auto;align-self:center}
.lg-pa-pillen:not(:has(.lg-pille:not([hidden]))){display:none}
.lg-pa-pillen .lg-pille b{font-weight:800;font-variant-numeric:tabular-nums}
.lg-pa-balken{display:flex;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 i + i{box-shadow:inset 2px 0 0 var(--bg)}
.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}

.lg-pa-stand.klebt{padding:12px var(--pa-x) 0;border-bottom:0;box-shadow:0 10px 18px -14px rgba(0,0,0,.75)}
.lg-pa-stand.klebt .lg-pa-wer{display:flex;margin-bottom:2px}
.lg-pa-stand.klebt .lg-pa-stand-zeile{gap:4px 6px}
.lg-pa-stand.klebt .lg-pa-stand-zahl{font-size:1.25rem}
.lg-pa-stand.klebt .lg-pa-stand-text{font-size:13px}
.lg-pa-stand.klebt .lg-pa-pillen .lg-pille{font-size:11px;line-height:18px;padding-top:0;padding-bottom:0}
.lg-pa-stand.klebt .lg-pa-balken{height:3px;margin:6px calc(var(--pa-x) * -1) 0;border-radius:0}
.lg-pa-stand.klebt .lg-pa-zuletzt-z{display:none}

/* --- Die Liste: je Hersteller ein Kopf, darunter die Zeilen in EINER Karte (U29 bis U31). */
.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-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, vier Flächen (Mathias 23.10.2026): Bild links (groß zeigen), die Mitte reagiert NICHT,
   der Kreis hakt ab, rechts ⋯. Beim Scrollen kippte sonst der Haken, wenn der Finger auf der Zeile lag. */
.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:none;display:flex;align-items:center;justify-content:center;width:56px;margin:0}
.lg-pz-tap{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 4px 10px 12px;min-height:76px;margin:0;
  color:var(--ink);cursor:default;-webkit-user-select:none;user-select:none}
/* Der Kreis: Die Spalte bleibt 56 px breit, abhaken tut aber NUR der runde Kreis selbst (40 px, Mirko
   29.10.2026: beim Scrollen hakte der Daumen über die ganze Spalte versehentlich ab). Die Ecken eines
   runden Knopfs zählen im Browser nicht als Treffer. */
.lg-pz-kreis{flex:none;width:56px;min-height:56px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;
  background:none;border:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
span.lg-pz-kreis{cursor:default}
.lg-pz-form .lg-pz-kreis{width:40px;height:40px;min-height:0;border-radius:50%}
.lg-pz-form .lg-pz-haken{width:40px;height:40px}
.lg-pz-kreis:active .lg-pz-haken{transform:scale(.9)}
.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{filter:brightness(.92)}
/* Die Bestellungen an der Zeile (#17195 · 2 ✓), farbig je Stand, wenn es mehrere sind. */
.lg-pz-unter .lg-pille.nr{font-variant-numeric:tabular-nums;color:var(--ink);background:none;padding:2px 7px}
.lg-pz-unter .lg-pille.nr.ok{color:var(--lg-ok-ink);background:var(--lg-ok-tint)}
.lg-pz-unter .lg-pille.nr.bad{color:var(--lg-bad-ink);background:var(--lg-bad-tint)}
.lg-pz-unter .lg-pille.nr.or{color:var(--lg-or-ink);background:var(--lg-or-tint)}
/* 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.ganz .lg-pz-text{opacity:.75}
.lg-pz.entf.ganz .lg-pz-name{text-decoration:line-through;text-decoration-color:rgba(239,68,68,.6)}
/* Teil im Korb, Teil „kommt nicht": grüner Kreis, orange Kante, bleibt oben. */
.lg-pz.korb.entf-teil .lg-pz-haken{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on);font-size:1.1rem}
.lg-pz.korb.entf-teil .lg-pz-text{opacity:.75}
/* Teilweise im Korb (eine von mehreren Bestellungen): der Kreis füllt sich anteilig. */
.lg-pz.teil .lg-pz-haken{border-color:var(--lg-ok);background:conic-gradient(var(--lg-ok) var(--p),transparent 0)}
.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 Wandern: Zeile (oder der ganze Hersteller) klappt weich zu, dann steht sie unten in „Im Korb". */
.lg-pz.geht,.lg-pa-gr.geht{overflow:hidden;opacity:0;transition:height .38s ease,opacity .26s ease,margin .38s ease;border-top-color:transparent}
.lg-pa-gr.geht{margin-top:0}
/* „Im Korb (n)": unten, eingeklappt, mit Zwischenköpfen je Hersteller. */
.lg-pa-imkorb{margin:16px 0 0;border-color:var(--lg-ok)}
.lg-pa-imkorb>summary{color:var(--lg-ok-ink);font-weight:700}
.lg-pa-imkorb>summary b{color:var(--lg-ok-ink);font-size:var(--lg-fs-md)}
.lg-pa-imkorb>summary i{font-style:normal;flex:none;width:28px;height:28px;border-radius:50%;background:var(--lg-ok);color:var(--lg-ok-on);
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-right:var(--lg-s2)}
.lg-pa-imkorb>summary.blitz{animation:lg-imkorb-puls .6s ease}
@keyframes lg-imkorb-puls{40%{background:rgba(40,192,122,.22)}}
.lg-pa-imkorb>.lg-pa-zeilen{border:0;border-top:1px solid var(--lg-ok);border-radius:0 0 var(--lg-r) var(--lg-r)}
.lg-pa-zw{padding:8px 12px 4px;font-size:var(--lg-fs-xs);font-weight:800;color:var(--mut);letter-spacing:.04em;border-top:1px solid var(--line);list-style:none}
.lg-pa-zw:first-child{border-top:0}
/* Das Blatt bei mehreren Bestellungen: je Bestellung eine Zeile mit ✓ und ✕. */
.lg-bz-liste{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--lg-r);overflow:hidden}
.lg-bz{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-top:1px solid var(--line);flex-wrap:wrap}
.lg-bz:first-child{border-top:0}
.lg-bz.fehlt{background:var(--lg-bad-tint)} .lg-bz.entf{background:var(--lg-or-tint)} .lg-bz.korb{background:rgba(40,192,122,.06)}
.lg-bz-text{flex:1;min-width:0;line-height:1.25}
.lg-bz-text b{font-size:var(--lg-fs-md);font-variant-numeric:tabular-nums}
.lg-bz-text small{display:block;color:var(--mut);font-size:var(--lg-fs-xs);font-weight:600}
.lg-bz-menge{font-weight:800;color:var(--acc2);margin-right:6px}
.lg-bz-wahl{flex:none;display:flex;gap:6px}
.lg-bz-wahl button{width:52px;height:48px;border-radius:var(--lg-r);border:1px solid var(--line2);background:var(--card2);color:var(--ink);
  font-weight:800;font-size:1.15rem;cursor:pointer}
.lg-bz-wahl .b-korb.an{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on)}
.lg-bz-wahl .b-fehlt.an{background:var(--lg-bad);border-color:var(--lg-bad);color:#fff}
.lg-bz-unten{flex-basis:100%;display:flex;justify-content:flex-end}

/* --- 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}
/* „Doch nicht fertig“ mit Info-Zeichen (02.11.2026): darunter eine Klappe „i · Was heißt das?“, ohne Skript. */
.lg-pa-zurueck>.lg-knopf{min-width:220px}
.lg-pa-info{margin:10px auto 0;max-width:420px;text-align:left}
.lg-pa-info>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:var(--lg-h-tap,44px);
  color:var(--lg-info-ink);font-size:var(--lg-fs-sm,.9rem)}
.lg-pa-info>summary::-webkit-details-marker{display:none}
.lg-pa-info{text-align:center}
.lg-pa-i{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--lg-info);background:var(--lg-info-tint);font:italic 700 .9rem/1 Georgia,serif}
.lg-pa-info[open] .lg-pa-i{background:var(--lg-info);color:#0b1220}
.lg-pa-info-text{text-align:left;margin:2px 0 0;padding:10px 12px;border-radius:10px;
  background:var(--lg-info-tint);border:1px solid var(--lg-info);color:var(--ink);font-size:var(--lg-fs-sm,.9rem);line-height:1.45}
.lg-pa-info-text p{margin:0 0 6px}
.lg-pa-info-text p:last-child{margin: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}
/* touch-action: Der Editor braucht am Hallenplan `none` (Regale ziehen), hier ist die Karte nur ein Bild; sonst
   bleibt die Seite stehen, wenn der Finger auf der Karte liegt (Mathias 30.10.2026). */
.lg-ub2-karte svg.hp{display:block;width:100%;height:auto;background:#0b0e1a;border-radius:var(--lg-r-sm);border:1px solid var(--line);touch-action:auto}
/* 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}

/* 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, 03-archiv/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)}

/* 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}
/* „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)}

/* =================================================================================================
   „🚚 AUS KROPP" (U34, Mirko 24.10.2026; 03-archiv/kropp-liste/): eine Zeile, deren Ware im Außenlager
   liegt und geholt wird. Blau statt rot (fehlt) und statt orange (kommt nicht, schon vergeben): die Ware
   ist da, sie ist nur unterwegs. Packkarte, Blatt, Packliste und die Liste „Aus Kropp holen".
   ================================================================================================= */
body.lg,.lg-cockpit{--lg-au:#3ec7e0;--lg-au-tint:rgba(62,199,224,.14);--lg-au-ink:#9be6f3;--lg-au-on:#03242b}
.lg-pille.au{background:var(--lg-au-tint);border-color:var(--lg-au);color:var(--lg-au-ink)}
.lg-pz-unter .lg-pille.nr.au{color:var(--lg-au-ink);background:var(--lg-au-tint);border-color:var(--lg-au)}
.lg-pz.fehlt.aussen{background:var(--lg-au-tint);box-shadow:inset 3px 0 0 var(--lg-au)}
.lg-pz.fehlt.aussen .lg-pz-haken{border-color:var(--lg-au);background:var(--lg-au);color:var(--lg-au-on);font-size:1rem}
.lg-pz.fehlt.aussen .lg-pz-notiz{color:var(--lg-au-ink)}
/* Nach Zustand (Mirko 01.11.2026), wie die Pille: rot noch in Kropp, gelb unterwegs, grün da. Der Kreis bleibt
   HOHL mit dem LKW: Hohl heißt noch zu tun, gefüllt ist „im Korb" (grün, ✓) oder „fehlt" (rot, ✕). */
.lg-pz.fehlt.aussen.au-kropp{background:var(--lg-bad-tint);box-shadow:inset 3px 0 0 var(--lg-bad)}
.lg-pz.fehlt.aussen.au-kropp .lg-pz-haken{border-color:var(--lg-bad);background:transparent;color:var(--lg-bad-ink)}
.lg-pz.fehlt.aussen.au-kropp .lg-pz-notiz{color:var(--lg-bad-ink)}
.lg-pz.fehlt.aussen.au-unterwegs{background:var(--lg-warn-tint);box-shadow:inset 3px 0 0 var(--lg-warn)}
.lg-pz.fehlt.aussen.au-unterwegs .lg-pz-haken{border-color:var(--lg-warn);background:transparent;color:var(--lg-warn-ink)}
.lg-pz.fehlt.aussen.au-unterwegs .lg-pz-notiz{color:var(--lg-warn-ink)}
.lg-pz.fehlt.aussen.au-da{background:var(--lg-ok-tint);box-shadow:inset 3px 0 0 var(--lg-ok)}
.lg-pz.fehlt.aussen.au-da .lg-pz-haken{border-color:var(--lg-ok);background:transparent;color:var(--lg-ok-ink)}
.lg-pz.fehlt.aussen.au-da .lg-pz-notiz{color:var(--lg-ok-ink)}
.lg-pa-balken .k.kropp{background:repeating-linear-gradient(-45deg,var(--lg-bad) 0 4px,rgba(239,68,68,.55) 4px 8px)}
.lg-pa-balken .k.unterwegs{background:var(--lg-warn)} .lg-pa-balken .k.da{background:rgba(40,192,122,.5)}
/* Drei Wahlen im Blatt: etwas kleiner, damit „🚚 Aus Kropp" auf 360 px in seine Spalte passt. */
.lg-blatt-segment.drei{grid-template-columns:1fr 1.15fr 1fr;gap:6px}
.lg-blatt-segment.drei button{font-size:var(--lg-fs-sm);padding:0 4px;line-height:1.2}
.lg-blatt-segment .s-aussen.an{background:var(--lg-au);border-color:var(--lg-au);color:var(--lg-au-on)}
.lg-b-aussen{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:6px 6px 6px 12px;border-radius:var(--lg-r);
  background:var(--lg-au-tint);border:1px solid var(--lg-au)}
.lg-b-aussen>span:first-child{flex:1;font-weight:700;font-size:var(--lg-fs-sm)}
.lg-b-aussen small{color:var(--lg-au-ink);font-weight:700;font-size:var(--lg-fs-xs);min-width:3.2em}
.lg-bz.aussen{background:var(--lg-au-tint)}
/* Kropp-Fuhre (U50): „Nicht da" im Blatt, und der Zusatz an der Kropp-Pille („· geholt", „· für Krüger reserviert"). */
.lg-b-nichtda{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--lg-h-touch,44px);margin:10px 0 0;padding:6px 12px;
  border-radius:var(--lg-r);border:1px solid var(--lg-warn);background:var(--lg-warn-tint);color:var(--lg-warn-ink);font:inherit;font-weight:700;font-size:var(--lg-fs-sm)}
.lg-b-nichtda .lg-lkw{width:16px;height:16px}
.lg-pz-au-zus{font-weight:700}
.lg-bz-wahl .b-aussen.an{background:var(--lg-au);border-color:var(--lg-au);color:var(--lg-au-on)}
.lg-bz-unten.lg-b-aussen{margin:0;justify-content:flex-start}
/* Packliste: der Streifen über dem Segment und die blaue Zweitzeile. */
body.lg a.lg-pk-aussen,.lg-pk-aussen{display:flex;align-items:center;gap:12px;min-height:var(--lg-h-big);padding:10px 14px;margin:0 0 12px;border-radius:var(--lg-r);
  background:var(--lg-au-tint);border:1px solid var(--lg-au);color:var(--ink);text-decoration:none}
.lg-pk-aussen::after{content:"\203A";margin-left:auto;font-size:1.5rem;line-height:1;color:var(--lg-au-ink)}
.lg-pk-aussen-sym{font-size:1.4rem;line-height:1}
.lg-pk-aussen-txt{min-width:0;line-height:1.3}
.lg-pk-aussen-txt b{display:block}
.lg-pk-aussen-txt small{color:var(--lg-au-ink);font-size:var(--lg-fs-xs);font-weight:700}
/* Die Liste „Aus Kropp holen" am Telefon. */
.lg-au-zurueck{margin:0 0 8px;font-size:var(--lg-fs-sm)}
.lg-au-zurueck a{color:var(--mut);text-decoration:none;font-weight:700}
.lg-au-kopf{margin:0 0 12px}
.lg-au-kopf h2{margin:2px 0 0;font-size:var(--lg-fs-xl);line-height:1.1}
.lg-au-kopf p{margin:6px 0 0;color:var(--mut);font-size:var(--lg-fs-sm)}
.lg-au-knoepfe{margin:0 0 6px}
.lg-au-knoepfe .lg-knopf{width:100%;white-space:normal;text-align:center}
.lg-au-netz{margin:0 0 4px}
.lg-au-hg{margin:14px 2px 6px;font-size:var(--lg-fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.lg-au-liste{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--lg-r);overflow:hidden;background:var(--card)}
.lg-au-liste li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--line)}
.lg-au-liste li:first-child{border-top:0}
.lg-au-menge{flex:none;min-width:48px;text-align:right;font-size:var(--lg-fs-lg);font-weight:800;font-variant-numeric:tabular-nums;color:var(--lg-au-ink)}
.lg-au-bild{flex:none;width:44px;height:44px;border-radius:var(--lg-r-sm);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lg-au-bild img{width:100%;height:100%;object-fit:contain}
.lg-au-bild.leer{background:var(--card2);color:var(--mut);font-size:.6rem;text-align:center;line-height:1.1}
.lg-au-text{flex:1;min-width:0}
.lg-au-text b{display:block;font-size:var(--lg-fs-sm);line-height:1.3}
.lg-au-text small{color:var(--mut);font-size:var(--lg-fs-xs)}
/* Kropp-Fuhre (U50): zwei Teile, Kunden unter dem Artikel, der Bereich „Geholt" violett wie im Mockup. */
.lg-au-text small{display:block}
.lg-au-text small.lg-au-kunde{color:var(--lg-au-ink);font-weight:700}
/* Der Name als Weg zur Packkarte (Mirko 01.11.2026): eine ganze Zeile hoch, damit der Daumen sie trifft. */
.lg-au-text a.lg-au-kunde{display:block;color:var(--lg-au-ink);font-weight:700;font-size:var(--lg-fs-xs);padding:.3em 0;text-decoration:underline;text-underline-offset:.18em}
.lg-au-text a.lg-au-kunde span{text-decoration:none;display:inline-block;margin-left:.15em}
.lg-au-text small.lg-au-uebrig{color:var(--lg-warn-ink);font-weight:700}
.lg-au-teil{margin:18px 2px 4px;font-size:var(--lg-fs-md);display:flex;align-items:baseline;gap:8px}
.lg-au-teil span{font-size:var(--lg-fs-xs);color:var(--mut);font-weight:700}
/* Gedruckt, noch nicht geholt (Mirko 01.11.2026): Warnton wie auf „Heute“, bis „Ist geholt“ gedrückt ist. */
.lg-au-gedruckt{margin-top:14px;padding:4px 10px 10px;border:1px dashed var(--warn-ink,#ffcf6b);border-radius:var(--lg-r);background:rgba(255,176,32,.05)}
.lg-au-gedruckt .lg-au-teil{color:var(--warn-ink,#ffcf6b);margin-top:10px}
.lg-au-gedruckt .lg-au-menge{color:var(--warn-ink,#ffcf6b)}
.lg-au-gedruckt>.lg-klein{margin:0 2px 8px}
/* Da = grün, unterwegs = gelb, noch in Kropp = rot (Mirko 01.11.2026: „geholt in grün, das steht ja vor uns"). */
.lg-au-geholt{margin-top:14px;padding:4px 10px 10px;border:1px solid var(--lg-ok);border-radius:var(--lg-r);background:var(--lg-ok-tint)}
.lg-au-geholt .lg-au-teil{color:var(--lg-ok-ink);margin-top:10px}
.lg-au-geholt .lg-au-menge{color:var(--lg-ok-ink)}
.lg-au-teil.lg-au-noch{color:var(--lg-bad-ink)}
.lg-pk-aussen-txt .lg-au-k{color:var(--lg-bad-ink)} .lg-pk-aussen-txt .lg-au-u{color:var(--lg-warn-ink)} .lg-pk-aussen-txt .lg-au-d{color:var(--lg-ok-ink)}
.lg-pille.au.kropp{background:var(--lg-bad-tint);border-color:var(--lg-bad);color:var(--lg-bad-ink)}
.lg-pille.au.unterwegs{background:var(--lg-warn-tint);border-color:var(--lg-warn);color:var(--lg-warn-ink)}
.lg-pille.au.da{background:var(--lg-ok-tint);border-color:var(--lg-ok);color:var(--lg-ok-ink)}
.lg-au-geholt>.lg-klein{margin:0 2px 8px}
.lg-au-links{display:flex;flex-wrap:wrap;gap:16px;margin:10px 2px 0;font-size:var(--lg-fs-sm)}
.lg-au-links a{color:var(--lg-info-ink,#9cc0ff);font-weight:700}
.lg-au-liste li{flex-wrap:wrap}
.lg-au-korr{display:flex;align-items:flex-end;gap:8px;width:100%;margin:6px 0 0 60px}
.lg-au-korr label{display:flex;flex-direction:column;gap:2px;font-size:var(--lg-fs-xs);color:var(--mut);font-weight:700}
.lg-au-korr .lg-feld{width:84px}
@media (max-width:480px){.lg-au-korr{margin-left:0}}

/* =================================================================================================
   DIE KÖRBCHEN-KARTE (U35, Mirko 24.10.2026; 03-archiv/koerbchen-karte/): beim Packen und an der Theke nur
   ein Regalbereich in voller Breite, hochkant scrollen statt seitlich; darüber die Reiter (wie .hp-reiter).
   ================================================================================================= */
.lg-vk .lg-vk-reiter{flex:none;margin:0;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line2);overflow-x:auto}
.lg-vk .lg-vk-reiter button{flex:1 0 auto;min-width:48px;padding:9px 6px;font-size:.78rem;white-space:nowrap}
.lg-vk .lg-vk-hw{flex:none;margin:0;padding:6px 16px;border-bottom:1px solid var(--line2);color:var(--lg-warn-ink);font-weight:700}
.lg-vk-flaeche.bereich{overflow:hidden auto;padding:8px}
.lg-vk-flaeche.bereich svg.hp{touch-action:pan-y}
/* Das Lastwagen-Zeichen für „aus Kropp" (Lager::LKW, statt des Emojis). */
.lg-lkw{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lg-pk-aussen-sym .lg-lkw{width:26px;height:26px;color:var(--lg-au-ink)}
.lg-pz.fehlt.aussen .lg-pz-haken .lg-lkw{width:18px;height:18px}
/* Streifen mit Filter daneben (Mathias 24.10.2026): links zur Liste, rechts „nur diese Körbchen". */
.lg-pk-aussen-zeile{display:flex;gap:8px;margin:0 0 12px}
/* body.lg davor: sonst gewinnt der Abstand von body.lg a.lg-pk-aussen, und der Filter wächst um 12px. */
body.lg .lg-pk-aussen-zeile a.lg-pk-aussen,.lg-pk-aussen-zeile .lg-pk-aussen{flex:1;min-width:0;margin:0}
body.lg a.lg-pk-aussen-filter,.lg-pk-aussen-filter{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:6px 10px;
  border-radius:var(--lg-r);border:1px solid var(--lg-au);background:var(--card);color:var(--lg-au-ink);text-decoration:none;line-height:1.1}
.lg-pk-aussen-filter b{font-size:var(--lg-fs-lg)}
.lg-pk-aussen-filter small{font-size:var(--lg-fs-xs);font-weight:700}
body.lg a.lg-pk-aussen-filter.an,.lg-pk-aussen-filter.an{background:var(--lg-au);color:var(--lg-au-on)}
.lg-pk-aussen-hinweis{margin:0 0 12px}

/* =================================================================================================
   VERSAND IM LAGER (U34, 25.10.2026; 03-archiv/versand-im-lager/Mockup_Versand_im_Lager.html): die Pillen
   „Versand“ (Spedition) und „Eigene Fahrt“ (Rostock, gestrichelt), die Trenner der Packliste, auf der
   Packkarte „Sendung abstellen“ (fester Platz „Versand“, Packstücke), die Packstücke auf der Bühne.
   ================================================================================================= */
.lg-pille.vs{background:var(--lg-brand-tint);border-color:var(--lg-brand);color:var(--ink)}
.lg-pille.ef{background:var(--lg-brand-tint);border:1px dashed var(--lg-brand);color:var(--ink)}
.lg-pk-trenner{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:14px 2px 6px;font-size:var(--lg-fs-xs);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.lg-pk-trenner:first-child{margin-top:2px}
.lg-pk-trenner[hidden]{display:none}
.lg-vp-ns{width:88px;flex:none}
.lg-pk-trenner b{color:var(--ink)}
.lg-pk-trenner span{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:700;color:var(--ink);background:var(--lg-brand-tint);
  border:1px solid var(--lg-brand);border-radius:var(--lg-r-pill);padding:2px 8px}
.lg-vp-fest{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 12px;border-radius:var(--lg-r);border:2px solid var(--lg-place);background:var(--lg-place-tint)}
.lg-vp-fest .lg-platz{flex:none;font-size:var(--lg-fs-lg);padding:4px 12px}
.lg-vp-txt{flex:1;min-width:0;line-height:1.25}
.lg-vp-txt b{display:block;font-size:var(--lg-fs-md)}
.lg-vp-txt small{display:block;color:var(--mut);font-size:var(--lg-fs-xs);font-weight:600}
.lg-vp-txt small.muss{color:var(--lg-warn-ink)}
.lg-vp-stk{display:flex;align-items:center;gap:10px;margin:8px 0 0;padding:8px 8px 8px 12px;border-radius:var(--lg-r);border:1px solid var(--line2);background:var(--card2)}
.lg-vp-stk.fehlt{border:2px solid var(--lg-bad);background:var(--lg-bad-tint)}
.lg-vp-stepper{background:var(--bg)}
.lg-vp-stepper button{width:44px}
.lg-vp-stepper span{min-width:44px}
.lg-vp-stepper span b{font-size:var(--lg-fs-lg);font-variant-numeric:tabular-nums}
.lg-vp-stepper span b.leer{color:var(--faint)}
.lg-vp-pflicht{margin:8px 0 0;color:var(--lg-bad-ink);font-weight:700}
.lg-bu-ort{margin:0}
.lg-bu-stk{font-size:var(--lg-fs-lg);font-weight:800;margin-top:var(--lg-s2)}
.lg-bu-stk small{display:block;font-size:var(--lg-fs-xs);color:var(--mut);font-weight:700}
.lg-bu-danach{margin:var(--lg-s3) 0 0}

/* =================================================================================================
   BUNDLES (U38, 27.10.2026; Mockup 01-aktiv/bundle-packliste/Mockup_Bundle_Packliste.html, Variante A).
   Violett, weil keine andere Pille die Farbe trägt: Packkarte (Pille an der Zeile, Kasten über dem Stand),
   Körbchen-Zeile des Betreibers und Theke (Überschrift „1× Bundle …“, Teile eingerückt mit violetter Kante).
   Labels und Pillen mit margin:0 (die globale label-Regel versetzt sie sonst, Memory „Label-Abstand").
   ================================================================================================= */
body.lg,.lg-cockpit{--lg-set:#b48cff;--lg-set-tint:rgba(180,140,255,.14);--lg-set-ink:#d9c6ff;--lg-set-on:#1b1030}
/* Mit .lg-pz-unter davor: `.lg-pz-unter .lg-pille.nr` setzt Fläche und Schrift zurück und schlug sonst die
   violette Grundform (Review 27.10.2026). Die Zustandsfarben danach mit derselben Stärke. */
.lg-pille.set,.lg-pz-unter .lg-pille.nr.set{margin:0;background:var(--lg-set-tint);border-color:var(--lg-set);color:var(--lg-set-ink)}
/* Im Zustand die Farbe des Zustands, die violette Kante bleibt: So ist die Pille nach dem Haken noch als Bundle zu erkennen. */
.lg-pz-unter .lg-pille.nr.set.ok{background:var(--lg-ok-tint);color:var(--lg-ok-ink)}
.lg-pz-unter .lg-pille.nr.set.bad{background:var(--lg-bad-tint);color:var(--lg-bad-ink)}
.lg-pz-unter .lg-pille.nr.set.or{background:var(--lg-or-tint);color:var(--lg-or-ink)}
.lg-pz-unter .lg-pille.nr.set.au{background:var(--lg-au-tint);color:var(--lg-au-ink)}
.lg-pille.set::before{content:"";flex:none;width:12px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M12 8v13M3 12h18M12 8c-2-4-6-4-6-1.5S12 8 12 8zm0 0c2-4 6-4 6-1.5S12 8 12 8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M12 8v13M3 12h18M12 8c-2-4-6-4-6-1.5S12 8 12 8zm0 0c2-4 6-4 6-1.5S12 8 12 8z'/%3E%3C/svg%3E") center/contain no-repeat}
.lg-geschenk{display:block;width:100%;height:100%}

/* Der Kasten über dem Stand der Packkarte: Inhalt zum Nachsehen, ohne Knöpfe. */
.lg-setkasten{margin:0 0 var(--lg-s3);border:1px solid var(--lg-set);background:var(--lg-set-tint);border-radius:var(--lg-r)}
.lg-setkasten>summary{display:flex;align-items:center;gap:10px;min-height:var(--lg-h-big);padding:10px 12px;cursor:pointer;list-style:none;
  font-size:var(--lg-fs-sm);line-height:1.35}
.lg-setkasten>summary::-webkit-details-marker{display:none}
.lg-setkasten>summary::after{content:"\25B8";margin-left:auto;padding-left:8px;color:var(--lg-set-ink)}
.lg-setkasten[open]>summary::after{content:"\25BE"}
.lg-set-ic{flex:none;width:34px;height:34px;padding:7px;border-radius:10px;background:var(--lg-set);color:var(--lg-set-on)}
.lg-set-kopf{flex:1;min-width:0}
.lg-set-kopf b{display:block;color:var(--lg-set-ink);font-size:var(--lg-fs-md);font-weight:700}
.lg-set-kopf small{display:block;color:var(--mut);font-size:var(--lg-fs-xs)}
.lg-setkasten ul{list-style:none;margin:0;padding:4px 12px 12px;border-top:1px solid rgba(180,140,255,.35)}
.lg-setkasten li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:var(--lg-fs-sm);border-top:1px solid rgba(180,140,255,.18)}
.lg-setkasten li:first-child{border-top:0}
.lg-set-st{flex:none;width:20px;text-align:center;font-weight:800}
.lg-set-menge{flex:none;font-weight:800;color:var(--acc2);font-variant-numeric:tabular-nums}
.lg-set-name{flex:1;min-width:0}
.lg-set-h{flex:none;color:var(--mut);font-size:var(--lg-fs-xs);font-weight:700}
.lg-setkasten li.korb .lg-set-st{color:var(--lg-ok)}
.lg-setkasten li.korb .lg-set-name{text-decoration:line-through;text-decoration-color:var(--lg-ok);color:var(--mut)}
.lg-setkasten li.fehlt .lg-set-st{color:var(--lg-bad)}
.lg-setkasten li.entf .lg-set-st{color:var(--lg-or)}
.lg-setkasten li.entf .lg-set-name{text-decoration:line-through;text-decoration-color:var(--lg-or);color:var(--mut)}
.lg-setkasten li.aussen .lg-set-st{color:var(--lg-au)}
.lg-set-st .lg-lkw{width:16px;height:16px;vertical-align:middle}

/* Listen nach Bestellung (Körbchen-Zeile, Theke): Überschrift und eingerückte Teile. */
.lg-setkopf{display:flex;align-items:center;gap:8px;padding:6px 0;color:var(--lg-set-ink);font-size:var(--lg-fs-sm)}
.lg-setkopf .lg-set-ic{width:24px;height:24px;padding:4px;border-radius:7px}
.lg-setkopf b{font-weight:700}
.lg-setkopf small{color:var(--mut);font-size:var(--lg-fs-xs)}
.lg-kt-artikel>li.lg-teil{box-shadow:inset 3px 0 0 var(--lg-set);padding-left:14px}
.lg-ub2-ua.lg-teil{box-shadow:inset 3px 0 0 var(--lg-set);padding-left:22px}
.lg-kt-artikel>li.lg-setkopf{align-items:center}
.lg-kt-artikel>li.lg-setkopf+li{border-top:0}
.lg-ub2-ua.lg-setkopf{padding:8px 10px;background:var(--lg-set-tint)}
.lg-ub2-ua.lg-teil.fehlt{box-shadow:inset 3px 0 0 var(--lg-bad)}
.lg-ub2-ua.lg-teil.entf{box-shadow:inset 3px 0 0 var(--lg-or)}

/* --- Etiketten drucken (29.10.2026, views/_lager_etikett_knopf.php): „− 3 +  [3 Etiketten drucken]" im Kasten
   „Körbchen abstellen", bei Versand unter den Packstücken und an der Theke als „Etikett nachdrucken". Der
   Knopf ist still (kein zweiter Hauptknopf neben „Fertig gepackt"), das Druckersymbol sagt, was passiert. */
.lg-etk{display:flex;gap:var(--lg-s2);margin:var(--lg-s2) 0 0}
.lg-etk .lg-etk-knopf{flex:1;min-width:0;padding:0 var(--lg-s3);white-space:nowrap}
/* Der Zähler schmaler als der Körbchen-Stepper (ohne Wort darunter), damit „50 Etiketten drucken" in einer
   Zeile steht; unter 380 px fällt das Druckersymbol weg (Samsung mit 360 px). */
.lg-etk .lg-stepper button{width:36px}
.lg-etk .lg-stepper span{min-width:34px}
@media (max-width:380px){.lg-etk-knopf svg{display:none}}
.lg-etk-knopf svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =================================================================================================
   [ABHAKEN JE KONTO · WO WAR ICH] (U42/U43/U44, Mirko und Mathias 29.10.2026; Bauplan
   03-archiv/fehlhaken-packkarte/BAUPLAN.md, Mockups dort und in 03-archiv/packliste-letzter-kunde/)

   Beim Scrollen hakten Daumen versehentlich ab. Jedes Konto wählt im Namensmenü, wie es abhakt:
   „Kreis links" (der Kreis vor dem Bild, aus der Daumenbahn) oder „Doppeltipp" (der erste Tipp macht
   den Kreis gelb, erst der zweite grün). Dazu in der Packliste „Zuletzt bei dir" und die Zeile, aus
   der man kommt.
   ================================================================================================= */

/* Das Namensmenü trägt die Wahl über „Abmelden": zwei gleich breite Knöpfe, der gewählte hell. */
.lg-wer-liste{min-width:240px}
.lg-wer-wahl{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--lg-s2);padding:var(--lg-s2);
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.lg-wer-titel{font-size:var(--lg-fs-xs);font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.lg-wer-seg{display:flex;gap:2px;padding:2px;border-radius:var(--lg-r-sm);background:var(--card);border:1px solid var(--line)}
.lg-wer-seg button{flex:1 1 0;min-height:40px;padding:0 var(--lg-s2);border:0;border-radius:calc(var(--lg-r-sm) - 2px);
  background:none;color:var(--mut);font:inherit;font-size:var(--lg-fs-sm);font-weight:700;cursor:pointer;white-space:nowrap}
.lg-wer-seg button.an{background:var(--lg-brand-tint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--lg-brand)}
/* Mehrere Einstellungen untereinander (30.10.2026): ein Strich dazwischen, nicht zwei. */
.lg-wer-wahl+.lg-wer-wahl{border-top:0;margin-top:calc(-1 * var(--lg-s2))}

/* KREIS LINKS: der Kreis vor dem Bild, oben wie in „Im Korb". Die Spalte bleibt 56 px; nur der runde
   Kreis hakt ab (.lg-pz-form .lg-pz-kreis). Zum Bildschirmrand bleibt der Rand der Karte, die
   Zurück-Geste von Android beginnt am Rand und nicht auf dem Kreis. */
.lg-pa-links .lg-pz>.lg-pz-form,.lg-pa-links .lg-pz>span.lg-pz-kreis{order:-1;width:60px;padding-left:4px}
.lg-pa-links .lg-pz-bild{padding-left:0}

/* DOPPELTIPP (wie im Mockup): nach dem ersten Tipp ein gelber Kreisrand, der einmal wackelt und dann
   pulsiert, dazu die Pille „nochmal tippen". Die Zeile selbst bleibt, wie sie ist. Auch an einer Zeile
   „aus Kropp" (blau, .lg-pz.fehlt.aussen hat mehr Gewicht) oder „fehlt" wird der Kreis gelb. */
.lg-pz.scharf .lg-pz-haken,.lg-pz.fehlt.scharf .lg-pz-haken,.lg-pz.fehlt.aussen.scharf .lg-pz-haken{
  border-color:var(--lg-warn);background:transparent;color:var(--lg-warn);
  animation:lg-pz-wackel .35s ease,lg-pz-scharf .8s ease-in-out .35s infinite}
@keyframes lg-pz-wackel{20%{transform:translateX(-4px) rotate(-8deg)}50%{transform:translateX(4px) rotate(8deg)}80%{transform:translateX(-2px)}}
@keyframes lg-pz-scharf{50%{box-shadow:0 0 0 7px rgba(255,176,32,.25)}}
.lg-pille.lg-pz-nochmal{background:var(--lg-warn-tint);border-color:var(--lg-warn);color:var(--lg-warn-ink)}
@media (prefers-reduced-motion:reduce){.lg-pz.scharf .lg-pz-haken,.lg-pz.fehlt.scharf .lg-pz-haken,.lg-pz.fehlt.aussen.scharf .lg-pz-haken{animation:none}}

/* „ZULETZT BEI DIR" über dem Segment der Packliste: gelb gerahmt, höchstens drei Zeilen, die jüngste
   eingerahmt. Jede Zeile ist ein Link auf die Karte. */
.lg-pk-beidir{margin:0 0 var(--lg-s3);padding:var(--lg-s2) var(--lg-s3) var(--lg-s3);border:1px solid var(--lg-warn);
  border-radius:var(--lg-r);background:var(--card)}
.lg-pk-beidir-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:var(--lg-s2);margin-bottom:var(--lg-s2);font-size:var(--lg-fs-sm)}
.lg-pk-beidir-kopf b{color:var(--lg-warn-ink)}
.lg-pk-beidir-kopf small{color:var(--mut);font-size:var(--lg-fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-pk-beidir ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lg-pk-bd{display:flex;align-items:center;gap:var(--lg-s3);min-height:var(--lg-h-tap);padding:6px var(--lg-s3);
  border-radius:var(--lg-r-sm);background:var(--card2);color:var(--ink);text-decoration:none}
.lg-pk-bd.erst{box-shadow:inset 0 0 0 1px var(--lg-warn)}
.lg-pk-bd-text{flex:1;min-width:0}
.lg-pk-bd-text b{display:block;font-size:var(--lg-fs-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-pk-bd-text small{display:block;color:var(--mut);font-size:var(--lg-fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* DIE ZEILE, AUS DER MAN KOMMT: gelber Rahmen (die Pille „zuletzt" ist seit 30.10.2026 weg, der Rahmen
   reicht); zurück aus der Karte blinkt sie einmal. */
.lg-zeile.hier{border-color:var(--lg-warn);box-shadow:0 0 0 1px var(--lg-warn);background:linear-gradient(90deg,var(--lg-warn-tint),transparent 80%),var(--card)}
.lg-zeile.hier.bad{border-color:var(--lg-bad);box-shadow:0 0 0 1px var(--lg-bad)}
.lg-zeile.hier.bad.blitz{animation:none}
.lg-zeile.hier.blitz{animation:lg-hier-blitz 1.2s ease-out}
@keyframes lg-hier-blitz{0%,30%{box-shadow:0 0 0 1px var(--lg-warn),0 0 0 8px rgba(255,176,32,.35)}100%{box-shadow:0 0 0 1px var(--lg-warn),0 0 0 0 rgba(255,176,32,0)}}
@media (prefers-reduced-motion:reduce){.lg-zeile.hier.blitz{animation:none}}
.lg-pk-liste li[data-lager-hier]{scroll-margin-top:calc(var(--lg-h-kopf, 56px) + 24px)}

/* --- DIE ZEILE DER PACKLISTE (U46, Mathias 30.10.2026, 01-aktiv/packliste-uebersicht/, Vorschlag A; die
   Zustandswörter „Fehlt"/„Kropp" seit U45): vorne der Fortschritt „31/36" mit Balken, unter dem Namen eine
   Wortzeile statt Pillen rechts, rechts nur der Platz. Die Wortzeile bricht ZWISCHEN den Wörtern um und nie
   mitten darin; abgeschnitten wird nichts. */
.lg-pk-fort{flex:none;width:60px;display:flex;flex-direction:column;align-items:center;gap:4px}
.lg-pk-fort b{font-size:var(--lg-fs-sm);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em;line-height:1.2}
.lg-pk-fort b small{font-size:var(--lg-fs-xs);font-weight:700;color:var(--mut)}
.lg-pk-fort.voll b{color:var(--lg-ok-ink)}
.lg-pk-fort.leer b{color:var(--mut)}
.lg-pk-balken{display:flex;width:100%;height:5px;border-radius:3px;background:var(--card2);overflow:hidden}
.lg-pk-balken i{display:block;height:100%}
.lg-pk-balken .g{background:var(--lg-ok)}
.lg-pk-balken .r{background:var(--lg-bad)}
.lg-pk-balken .b{background:var(--lg-au)}
.lg-zeile .lg-mitte>span.lg-pk-merk{display:flex;flex-wrap:wrap;column-gap:10px;row-gap:2px;margin-top:3px;
  white-space:normal;overflow:visible;text-overflow:clip;font-weight:700}
.lg-zeile .lg-mitte>span.lg-pk-merk:empty{display:none}
.lg-pk-merk .w{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:var(--mut)}
.lg-pk-merk .w.vr,.lg-pk-merk .w.vs,.lg-pk-merk .w.ef{color:var(--lg-brand-ink,#ffb3a3)}
.lg-pk-merk .w.vr::before,.lg-pk-merk .w.vs::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--lg-brand)}
.lg-pk-merk .w.ef::before{content:"";width:6px;height:6px;border-radius:2px;border:1px dashed var(--lg-brand)}
.lg-pk-merk .w.bad{color:var(--lg-bad-ink)}
.lg-pk-merk .w.hw,.lg-pk-merk .w.warn{color:var(--lg-warn-ink)}
.lg-pk-merk .w.f3,.lg-pk-merk .w.p20{color:var(--ink)}
.lg-pk-merk .w.ok{color:var(--lg-ok-ink)}
.lg-pk-merk .w.f{color:var(--lg-bad-ink)}
.lg-pk-merk .w.k{color:var(--lg-au-ink)}
.lg-pk-merk .w.arbeit{color:var(--lg-info-ink)}
.lg-pk-merk .w.arbeit::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lg-info)}
.lg-pk-merk .lg-lkw{width:13px;height:13px;vertical-align:0}

/* --- DER KOPF DER PACKKARTE (U48, Mathias 30.10.2026, 01-aktiv/packkarte-kopf/, Vorschlag A): unter dem Namen
   die Kennzeichen als farbige Kacheln (Weg, F3, § 20, abholbereit), darunter die Bestellungen als Chips mit
   Nummer und Datum; unbezahlt gelb, nach dem Packen dazugekommen rot („neu"). Ort, „N Positionen" und die
   Zahl der Bestellungen gibt es dort nicht mehr. Die Übergabekarte behält Zeile und Pillen. */
.lg-kenn{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.lg-kennz{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--lg-r-sm);border:1px solid var(--line2);
  background:var(--card2);color:var(--ink);font-size:var(--lg-fs-sm);font-weight:800;line-height:1.2}
.lg-kennz.f3{background:var(--lg-brand-tint);border-color:var(--lg-brand);color:var(--lg-brand-ink,#ffb3a3)}
.lg-kennz.p20{background:var(--lg-warn-tint);border-color:var(--lg-warn);color:var(--lg-warn-ink)}
.lg-kennz.vs{background:var(--lg-brand-tint);border-color:var(--lg-brand)}
.lg-kennz.ef{background:var(--lg-brand-tint);border:1px dashed var(--lg-brand)}
.lg-kennz.warn{background:var(--lg-warn-tint);border-color:var(--lg-warn);color:var(--lg-warn-ink)}
.lg-kennz.ok{background:var(--lg-ok-tint);border-color:var(--lg-ok);color:var(--lg-ok-ink)}
/* Die Übergabe kennt auch Rot („F3 · keine Erlaubnis“, „abgelaufen“), seit ihr Kopf Kacheln trägt (30.10.2026). */
.lg-kennz.bad{background:var(--lg-bad-tint);border-color:var(--lg-bad);color:var(--lg-bad-ink)}
.lg-best-titel{margin:12px 0 6px;font-size:var(--lg-fs-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--mut)}
.lg-best-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.lg-best-chip{display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px;border-radius:var(--lg-r-sm);background:var(--card2);
  border:1px solid var(--line);font-size:var(--lg-fs-sm);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.lg-best-chip small{color:var(--mut);font-weight:600;font-size:var(--lg-fs-xs)}
.lg-best-chip.unb{border-color:var(--lg-warn);background:var(--lg-warn-tint)}
.lg-best-chip.unb small{color:var(--lg-warn-ink)}
.lg-best-chip.neu{border-color:var(--lg-bad);background:var(--lg-bad-tint)}
.lg-best-chip.neu small{color:var(--lg-bad-ink)}

/* --- PÄCKCHEN PRÜFEN UND HIERHIN STELLEN (Etiketten E2/E3, 30.10.2026, assets/scan.js): der Knopf an der Übergabe
   und in der Fach-Ansicht, und das Ergebnis als eigener Bildschirm wie im Mockup (Seite für Mirko, Version 9):
   oben „← Behrendsen", groß grün oder rot, eine Zeile, wo seine Körbchen stehen, „Nächstes Päckchen scannen". */
.lg-ub2-pp{margin:10px 0 4px}
.lg-ub2-pp:has(>button[hidden]){display:none}
.lg-ub2-pp .lg-klein{margin:6px 4px 0}
/* Nur „Päckchen prüfen“ im Kasten und keine Kamera: dann kein leerer Kasten „Vor dem Übergeben“. */
.lg-ub2-fragen.nur-pp:has(.lg-pp-knopf[hidden]){display:none}
.lg-pp-knopf{width:100%;gap:var(--lg-s2)}
/* „optional“ leise im Knopf (Mathias 30.10.2026): sagt dasselbe wie früher der Satz darunter, ohne eigene Zeile. */
.lg-ub2-pp .lg-pp-knopf{flex-direction:column;gap:4px;padding-top:8px;padding-bottom:8px}
.lg-pp-oben{display:inline-flex;align-items:center;gap:var(--lg-s2)}
.lg-pp-opt{padding:1px 8px;border-radius:var(--lg-r-pill);border:1px solid var(--line2);color:var(--mut);font-size:var(--lg-fs-xs);font-weight:600}
.lg-pp-knopf svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg-pp{position:fixed;inset:0;z-index:51;display:flex;flex-direction:column;gap:var(--lg-s3);padding:var(--lg-s3) var(--lg-s4) var(--lg-s4);
  background:var(--bg,#0f1220);color:var(--ink);overflow-y:auto}
.lg-pp-kopf{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--lg-s2);min-height:44px;font-size:var(--lg-fs-sm)}
.lg-pp-kopf b{font-weight:800}
.lg-pp-zur{justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--mut);font:inherit;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.lg-pp-ampel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px var(--lg-s3);border-radius:var(--lg-r);
  border:2px solid var(--line);text-align:center}
.lg-pp-ampel b{font-size:1.6rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.lg-pp-ampel span{font-size:var(--lg-fs-sm)}
.lg-pp-ampel.gut{background:var(--lg-ok-tint);border-color:var(--lg-ok);color:var(--lg-ok-ink)}
.lg-pp-ampel.schlecht{background:var(--lg-bad-tint);border-color:var(--lg-bad);color:var(--lg-bad-ink)}
.lg-pp-zeile{margin:0;padding:var(--lg-s3);border-radius:var(--lg-r);background:var(--card);border:1px solid var(--line);text-align:center}
.lg-pp .lg-knopf{width:100%}
.lg-pp .lg-pp-leise{border-color:transparent;background:none;color:var(--mut)}

/* --- „WAS STEHT HIER?" (Etiketten E3, views/lager_fach.php): Fach groß, darunter die Kunden wie in der Suche. */
.lg-fach-zur{margin:0 0 var(--lg-s2);font-size:var(--lg-fs-sm)}
.lg-fach-zur a,body.lg .lg-fach-zur a{color:var(--mut);text-decoration:none}
.lg-fach-titel{margin:0 0 var(--lg-s3);font-size:var(--lg-fs-2xl);font-weight:800;letter-spacing:-.02em}
.lg-fach .lg-karte .lg-etikett{margin-top:0}
.lg-fach-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lg-s2)}
.lg-fach-liste .lg-zeile{margin:0}
.lg-fach-leer{margin:var(--lg-s2) 0 0}
.lg-fach-hin{margin:var(--lg-s3) 0 0}
/* „Fach scannen" über der Kachel, solange kein Fach gewählt ist; danach steht die Kachel allein. */
.lg-pa-scan{margin:0 0 var(--lg-s2)}
.lg-pa-scan:has(>button[hidden]),[data-pa-korb]:not([data-code=""]) .lg-pa-scan{display:none}
.lg-pa-auch{margin:var(--lg-s2) 0 0}

/* --- FACHSCHILDER DRUCKEN (Etiketten E3, views/lager_einrichten.php): drei Wege, darunter nur, was zur Wahl gehört. */
.lg-fs .lg-etikett{margin-top:0}
.lg-fs-wahl{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--lg-s3);max-width:420px}
.lg-fs-wahl label{display:flex;align-items:center;gap:var(--lg-s2);min-height:44px;padding:0 var(--lg-s3);border:1px solid var(--line);
  border-radius:var(--lg-r-sm);background:var(--card2);cursor:pointer;font-weight:700}
.lg-fs-wahl label small{margin-left:auto;color:var(--mut);font-weight:600}
/* Im Cockpit-Rahmen ziehen die Feldstile jedes input auf volle Breite: der Kreis bleibt ein Kreis. */
.lg-fs-wahl input{flex:none;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--lg-brand)}
.lg-fs-wahl span{white-space:nowrap}
.lg-fs-wahl label:has(input:checked){border-color:var(--lg-brand);box-shadow:inset 0 0 0 1px var(--lg-brand)}
.lg-fs-kacheln{display:none;flex-wrap:wrap;gap:6px;margin:0 0 var(--lg-s3)}
.lg-fs:has(input[name="wahl"][value="bereich"]:checked) .lg-fs-bereiche,
.lg-fs:has(input[name="wahl"][value="einzeln"]:checked) .lg-fs-faecher{display:flex}
.lg-fs label{margin:0;font-size:var(--lg-fs-sm);color:var(--ink)}
.lg-fs-kacheln label{position:relative;display:inline-flex;cursor:pointer}
.lg-fs-kacheln input{position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;margin:0;padding:0;opacity:0;pointer-events:none}
.lg-fs-kacheln span{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 12px;border-radius:var(--lg-r-sm);
  border:1px solid var(--line);background:var(--card2);font-weight:700;font-variant-numeric:tabular-nums}
.lg-fs-kacheln span small{color:var(--mut);font-weight:600}
.lg-fs-kacheln input:checked+span{border-color:var(--lg-brand);background:var(--lg-brand-tint)}
.lg-fs-kacheln input:focus-visible+span{outline:2px solid var(--lg-brand);outline-offset:2px}
.lg-fs-los{width:100%;max-width:420px}
.lg-fs .lg-klein{margin:var(--lg-s2) 0 0}

/* --- Das Etikett in der aufgeklappten Körbchen-Zeile (Mathias 30.10.2026): die kleine Vorschau des Zettels, wie
   er gedruckt wurde (weiß wie Papier, QR links), darunter Druckstand und „− 2 +  [2 Etiketten drucken]". */
.lg-cockpit .lg-kb-etk{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}
.lg-cockpit .lg-kb-etk-zettel{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin:8px 0 6px;padding:8px 12px 8px 8px;
  border-radius:6px;background:#fff;color:#111;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.lg-cockpit .lg-kb-etk-qr{flex:none;width:64px;height:64px}
.lg-cockpit .lg-kb-etk-qr svg{display:block;width:64px;height:64px}
.lg-cockpit .lg-kb-etk-text{min-width:0;font-family:Arial,Helvetica,sans-serif;line-height:1.15}
.lg-cockpit .lg-kb-etk-text b{display:block;font-size:1.15rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-cockpit .lg-kb-etk-text span{display:block;font-size:.78rem}
.lg-cockpit .lg-kb-etk-text small{display:block;margin-top:4px;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.lg-cockpit .lg-kb-etk-stand{margin:0 0 4px;color:var(--faint);font-size:.74rem}
.lg-cockpit .lg-kb-etk .lg-etk{margin-top:6px}

/* --- DIE KACHEL „BEREIT?" an der Theke (Mathias 30.10.2026, 03-archiv/abholung-zustaende/Mockup_Abholung_Zustaende.html):
   gepackt und bezahlt = eine grüne Kachel „Alles bereit", sonst zwei Hälften, links Packen, rechts Zahlung. */
.lg-ub2-bereit{margin:var(--lg-s3) 0 var(--lg-s4);border-radius:var(--lg-r);border:1px solid var(--line2);overflow:hidden}
.lg-ub2-bereit.alles{display:flex;align-items:center;gap:var(--lg-s3);padding:var(--lg-s3);background:var(--lg-ok-tint);border-color:var(--lg-ok)}
.lg-ub2-bereit-haken{flex:none;width:40px;height:40px;border-radius:50%;background:var(--lg-ok);color:var(--lg-ok-on);display:grid;place-items:center;font-size:1.25rem;font-weight:900}
.lg-ub2-bereit.alles>div{min-width:0}
.lg-ub2-bereit.alles b{display:block;font-size:var(--lg-fs-lg);line-height:1.2}
.lg-ub2-bereit.alles>div span{display:block;margin-top:2px;font-size:var(--lg-fs-sm);color:var(--lg-ok-ink);line-height:1.35}
.lg-ub2-bereit.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lg-ub2-halb{min-width:0;padding:10px 12px;border-left:1px solid var(--line2);background:var(--card)}
.lg-ub2-halb:first-child{border-left:0}
.lg-ub2-halb-k{display:block;font-size:var(--lg-fs-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--mut)}
.lg-ub2-halb b{display:block;margin-top:2px;font-size:var(--lg-fs-md);font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.lg-ub2-halb b.lg-betrag{font-size:var(--lg-fs-xl);letter-spacing:-.02em}
.lg-ub2-halb-u{display:block;margin-top:3px;font-size:var(--lg-fs-xs);color:var(--mut);line-height:1.35;overflow-wrap:anywhere}
.lg-ub2-halb .lg-balken{display:block;height:6px;margin-top:7px}
.lg-ub2-halb.ok{background:var(--lg-ok-tint)}.lg-ub2-halb.ok b{color:var(--lg-ok-ink)}
.lg-ub2-halb.warn{background:var(--lg-warn-tint)}.lg-ub2-halb.warn b{color:var(--lg-warn-ink)}
.lg-ub2-halb.warn .lg-balken>i{background:var(--lg-warn)}
.lg-ub2-halb.bad{background:var(--lg-bad-tint)}.lg-ub2-halb.bad b{color:var(--lg-bad-ink)}
.lg-ub2-bereit-unter{grid-column:1/-1;padding:0 12px 10px;background:var(--lg-warn-tint)}
.lg-ub2-bereit-unter .lg-ub2-abzug span{display:block}
.lg-ub2-bereit-unter .lg-ub2-abzug span:first-child{color:var(--mut);font-weight:600}
/* „Jetzt packen": der saubere Weg, blau wie der Platz. */
.lg-ub2 .lg-knopf.lg-ub2-jetzt{display:flex;width:100%;min-height:var(--lg-h-big);margin:12px 0 0;text-decoration:none;font-size:var(--lg-fs-md);
  background:none;border-color:var(--lg-place);color:var(--lg-place-ink)}
/* Übergeben, wenn nicht fertig gepackt ist: gelb statt grün, der Tipp fragt nach. */
.lg-knopf.gelb{width:100%;min-height:var(--lg-h-big);font-size:var(--lg-fs-md);background:var(--lg-warn);border-color:var(--lg-warn);color:#2a1a00}
.lg-knopf.gelb:hover{border-color:var(--lg-warn);color:#2a1a00}
.lg-ub2-fuss .lg-knopf.gelb:disabled{background:var(--card2);border-color:var(--line2);color:var(--mut);cursor:default}
.lg-ub2-ug-hinweis{margin:6px 0 0;text-align:center;color:var(--lg-warn-ink)}
.lg-ub2-ug-satz{margin:0 0 10px;color:var(--lg-warn-ink)}
.lg-ub2-blatt textarea.lg-feld{width:100%;min-height:56px;resize:vertical;font:inherit}
.lg-ub2-blatt .lg-blatt-fuss .lg-knopf.gelb{width:auto;flex:1.4}
/* F3 ohne Erlaubnis: rot am Haken, der Satz darunter (bis 30.10.2026 ein roter Kasten mitten in der Karte). */
.lg-ub2-frage.rot{border-color:var(--lg-bad);background:var(--lg-bad-tint)}
.lg-ub2-frage-warum{margin:-2px 4px 8px 52px;font-weight:500;font-size:var(--lg-fs-xs);color:var(--lg-bad-ink);line-height:1.4}
.lg-ub2-frage-warum b{font-weight:700}
/* Teilweise: was nicht im Korb liegt, gelb gerahmt, solange es abgewählt ist; der Kommentar darunter. */
.lg-ub2-tb-art.offen:not(:has(input:checked)){border-color:var(--lg-warn);background:var(--lg-warn-tint)}
.lg-ub2-tb-ug{margin:10px 0 0;padding:10px 12px;border-radius:var(--lg-r);border:1px solid var(--lg-warn);background:var(--lg-warn-tint)}
.lg-ub2-tb-ug label{display:block;margin:0 0 6px;font-weight:700;font-size:var(--lg-fs-sm)}
.lg-ub2-tb-ug[hidden]{display:none}
/* Der Pflichtsatz im Blatt „Noch nicht fertig gepackt" springt nicht: Sein Platz bleibt frei, sonst rutschten die
   Schnellwörter beim Ein- und Ausblenden unter dem Finger weg (Browser-Durchgang 30.10.2026). */
#lg-ub2-ungepackt .lg-blatt-pflicht[hidden]{display:block;visibility:hidden}
/* Packkarte von der Theke aus („Jetzt packen"): der Rückweg zur Abholmail als eigener Link darunter. */
.lg-pa-theke a{display:block;margin-top:6px;color:inherit;font-weight:700}
/* „Zur Betreiberansicht" über „Abmelden" (01.11.2026): zwei Knöpfe, etwas Luft dazwischen. */
.lg-wer-liste .lg-ab + .lg-ab{margin-top:var(--lg-s2)}

/* --- Die Übersicht der Abholtermine oben im Reiter „Kalender" (01.11.2026) -----------------------
   views/_lager_termine_kommende.php nach 03-archiv/kalender-termine/Kalender_Mockup.html (zweite
   Fassung): Wochenstreifen, je Tag ein Datumsblock und eine Zeitleiste, die Farbe des Punkts ist
   die Ampel. Die Karte darf NICHT abschneiden (.lg-er-karte hat overflow:hidden): Die Abo-Klappe
   und das Menü „⋯" ragen über ihren Rand. */
.lg-cockpit .lg-er-karte.lg-tk{overflow:visible}
.lg-cockpit .lg-tk>.lg-er-kopf{flex-wrap:wrap;border-radius:var(--lg-r) var(--lg-r) 0 0}
.lg-cockpit .lg-tk>.lg-er-kopf .lg-knopf .icon{width:15px;height:15px}
.lg-cockpit .lg-tk .lg-er-inhalt{padding:var(--lg-s4)}

/* Die Abo-Klappe: ein Knopf, der einen Kasten unter sich aufklappt. */
.lg-tk-abo{position:relative}
.lg-tk-abo>summary{list-style:none}
.lg-tk-abo>summary::-webkit-details-marker{display:none}
.lg-tk-abo[open]>summary{border-color:var(--lg-info);color:var(--ink)}
.lg-tk-abo-inhalt{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(540px,calc(100vw - 32px));
  background:var(--card);border:1px solid var(--lg-info);border-radius:var(--lg-r);padding:var(--lg-s3) var(--lg-s4);
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.lg-tk-abo-kopf{display:flex;align-items:center;gap:var(--lg-s2);margin:0 0 var(--lg-s2)}
.lg-tk-abo-kopf b{flex:1}
.lg-tk-abo-adresse{display:flex;gap:var(--lg-s2);margin:0 0 var(--lg-s2)}
.lg-tk-abo-adresse .lg-feld{flex:1;min-width:0;min-height:var(--lg-h-desk);font-family:ui-monospace,Menlo,monospace;font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-tk-abo-wie{list-style:none;margin:0 0 var(--lg-s2);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lg-s2)}
.lg-tk-abo-wie li{font-size:var(--lg-fs-xs);color:var(--mut);background:var(--card2);border:1px solid var(--line);border-radius:var(--lg-r-sm);padding:7px 9px}
.lg-tk-abo-wie b{display:block;color:var(--ink)}
@media (max-width:640px){.lg-tk-abo-wie{grid-template-columns:1fr}}
.lg-tk-abo-knoepfe{display:flex;align-items:center;gap:var(--lg-s2);flex-wrap:wrap}
.lg-tk-leise{background:none;border:0;padding:4px 6px;font:inherit;font-size:var(--lg-fs-xs);font-weight:600;color:var(--mut);cursor:pointer}
.lg-tk-leise.gefahr{color:var(--lg-bad-ink)}

/* Der Wochenstreifen: sieben Kacheln, ein Klick führt an den Tag. */
.lg-tk-streifen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 var(--lg-s3)}
@media (max-width:700px){.lg-tk-streifen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lg-tk-wtag{display:block;padding:7px 9px 8px;background:var(--card2);border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}
.lg-tk-wtag:hover{border-color:var(--lg-hair-strong);color:var(--ink)}
.lg-tk-wt{display:flex;justify-content:space-between;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.lg-tk-wn{display:block;font-size:1.15rem;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-tk-wn small{font-size:.66rem;font-weight:600;color:var(--mut);margin-left:3px}
.lg-tk-wf{display:block;font-size:.66rem;color:var(--faint)}
.lg-tk-wtag.heute{border-color:var(--lg-brand);background:var(--lg-brand-tint)}
.lg-tk-wtag.heute .lg-tk-wt{color:var(--lg-brand)}
.lg-tk-wtag.zu{background:none;border-style:dashed}
.lg-tk-wtag.zu .lg-tk-wn,.lg-tk-wtag.leer .lg-tk-wn{color:var(--faint)}
.lg-tk-wtag.leer{background:none}

/* Kommende · Vergangene und die Legende der Punktfarben. */
.lg-tk-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lg-s3);margin:0 0 var(--lg-s2)}
.lg-tk-leiste .lg-segment{margin:0}
.lg-tk-legende{display:flex;gap:var(--lg-s3);margin-left:auto;font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-tk-legende span{display:inline-flex;align-items:center;gap:5px}
.lg-tk-legende i{width:9px;height:9px;border-radius:50%;background:var(--faint)}
.lg-tk-legende i.ok{background:var(--lg-ok)}.lg-tk-legende i.warn{background:var(--lg-warn)}.lg-tk-legende i.bad{background:var(--lg-bad)}

/* Ein Tag: links der Datumsblock (bleibt beim Scrollen stehen), rechts die Zeitleiste. */
.lg-tk-tag{display:grid;grid-template-columns:86px minmax(0,1fr);gap:var(--lg-s4);padding:var(--lg-s3) 0;border-top:1px solid var(--line);scroll-margin-top:80px}
/* Der erste Tag direkt unter der Leiste trägt keine Linie (:first-of-type träfe die Leiste). */
.lg-tk-leiste+.lg-tk-tag,.lg-tk-leiste+.lg-tr-hinweis+.lg-tk-tag{border-top:0}
/* top: unter der klebenden Kopfleiste des Cockpits (.appbar, 56 px), sonst verschwände der Block darunter. */
.lg-tk-datum{align-self:start;position:sticky;top:68px;text-align:center;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:8px 4px 9px}
.lg-tk-dw{display:block;font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.lg-tk-dn{display:block;font-size:1.9rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lg-tk-dm{display:block;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.lg-tk-dwort{display:inline-block;margin-top:5px;padding:2px 7px;border-radius:var(--lg-r-pill);font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--lg-brand);color:#fff}
.lg-tk-dwort.leise{background:var(--line2);color:var(--ink)}
.lg-tk-dwort.zu{background:var(--lg-bad-tint);color:var(--lg-bad-ink)}
.lg-tk-tag.heute .lg-tk-datum{border-color:var(--lg-brand)}
.lg-tk-tag.zu .lg-tk-datum{background:none;border-style:dashed}
.lg-tk-tag.zu .lg-tk-dn{color:var(--faint)}
.lg-tk-zu{margin:22px 0 0;color:var(--faint);font-size:var(--lg-fs-sm)}
.lg-tk-tagkopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--lg-s3);margin:2px 0 var(--lg-s2);font-size:var(--lg-fs-xs);color:var(--mut)}
.lg-tk-tagkopf b{color:var(--ink);font-size:var(--lg-fs-sm)}
.lg-tk-eintragen{margin-left:auto}
.lg-tk-eintragen>summary{list-style:none;cursor:pointer;color:var(--mut);font-weight:600}
.lg-tk-eintragen>summary::-webkit-details-marker{display:none}
.lg-tk-eintragen>summary:hover{color:var(--ink)}
.lg-tk-eintragen[open]{flex-basis:100%;margin-left:0}

/* Die Zeitleiste: eine senkrechte Linie, ein Punkt je Termin in der Farbe der Ampel. */
.lg-tk-zeit{position:relative;padding-left:20px}
.lg-tk-zeit::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.lg-tk-t{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;gap:var(--lg-s3);align-items:center;
  padding:9px 8px 9px 12px;margin:0 0 6px;background:var(--card2);border:1px solid transparent;border-radius:11px}
.lg-tk-t::before{content:"";position:absolute;left:-20px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px var(--card)}
/* amp-… statt ok/warn/bad: app.css färbt `.warn` als Text, die Uhrzeit wurde sonst orange. */
.lg-tk-t.amp-ok::before{background:var(--lg-ok)}.lg-tk-t.amp-warn::before{background:var(--lg-warn)}.lg-tk-t.amp-bad::before{background:var(--lg-bad)}
.lg-tk-t.naechster{background:var(--lg-info-tint);border-color:var(--lg-info)}
.lg-tk-t.naechster .lg-tk-uhr{color:var(--lg-info-ink)}
.lg-tk-t.da{opacity:.6}
.lg-tk-uhr{font-size:1.02rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.lg-tk-uhr small{display:block;font-size:.64rem;font-weight:600;color:var(--faint)}
.lg-tk-t.naechster .lg-tk-uhr small{color:var(--lg-info-ink)}
.lg-tk-wer .lg-tr-name{font-weight:800}
.lg-tk-k{display:block;font-size:var(--lg-fs-xs);color:var(--mut);margin-top:1px}
.lg-tk-zus{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:5px}
.lg-tk-notiz{font-size:var(--lg-fs-xs);color:var(--lg-warn-ink)}
.lg-tk-notiz::before{content:"✎ ";opacity:.7}
.lg-tk-wo{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.lg-tk-platz.lg-platz{min-width:42px;font-size:var(--lg-fs-sm)}
.lg-tk-platz.leer{display:inline-block;padding:3px 8px;border:1px dashed var(--line2);border-radius:var(--lg-r-sm);font-size:.66rem;font-weight:700;color:var(--faint);white-space:nowrap}
.lg-tk-erledigt{position:relative;margin:0 0 6px;padding:4px 12px 6px;font-size:var(--lg-fs-xs);color:var(--faint)}
.lg-tk-erledigt::before{content:"✓";position:absolute;left:-21px;top:3px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--card);border:2px solid var(--lg-ok);color:var(--lg-ok);font-size:.55rem;font-weight:800}
.lg-tk-erledigt b{color:var(--mut)}
.lg-tk-erledigt a{color:var(--mut)}

/* Das Menü „⋯" je Termin. */
.lg-tk-menue{position:relative}
.lg-tk-menue>summary{list-style:none;cursor:pointer;padding:2px 9px;border-radius:7px;color:var(--faint);font-weight:800;font-size:1.05rem;line-height:1.4}
.lg-tk-menue>summary::-webkit-details-marker{display:none}
.lg-tk-menue>summary:hover,.lg-tk-menue[open]>summary{background:var(--line);color:var(--ink)}
.lg-tk-menue-inhalt{position:absolute;right:0;top:calc(100% + 4px);z-index:15;min-width:210px;padding:5px;
  background:var(--card);border:1px solid var(--line2);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lg-tk-menue-inhalt a,.lg-tk-menue-inhalt button{display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:7px;
  background:none;font:inherit;font-size:var(--lg-fs-sm);color:var(--ink);text-decoration:none;cursor:pointer}
.lg-tk-menue-inhalt a:hover,.lg-tk-menue-inhalt button:hover{background:var(--card2);color:var(--ink)}
.lg-tk-menue-inhalt form{margin:4px 0 0;padding:4px 0 0;border-top:1px solid var(--line)}
.lg-tk-menue-inhalt button.gefahr{color:var(--lg-bad-ink)}

@media (max-width:720px){
  /* Die Abo-Klappe hängt sich am Handy an die Karte statt an den Knopf, der umgebrochen links stehen kann. */
  .lg-cockpit .lg-er-karte.lg-tk{position:relative}
  .lg-tk-abo{position:static}
  .lg-tk-abo-inhalt{left:var(--lg-s3);right:var(--lg-s3);width:auto;top:auto;margin-top:8px}
  .lg-tk-tag{grid-template-columns:1fr;gap:var(--lg-s2)}
  .lg-tk-datum{position:static;display:flex;align-items:baseline;gap:8px;text-align:left;padding:6px 10px}
  .lg-tk-dn{font-size:1.2rem}
  .lg-tk-dwort{margin:0 0 0 auto}
  /* Die Terminzeile: Uhrzeit · Name · „⋯" oben, der Platz unter dem Namen. */
  .lg-tk-t{grid-template-columns:52px minmax(0,1fr) auto;align-items:start;padding:9px 6px 9px 10px}
  .lg-tk-uhr{padding-top:1px}
  .lg-tk-menue{grid-column:3;grid-row:1}
  .lg-tk-wo{grid-column:2;grid-row:2;justify-content:flex-start}
  /* Der Wochenstreifen als wischbare Leiste: sieben gleich breite Kacheln statt vier gequetschter Spalten. */
  .lg-tk-streifen{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    margin:0 calc(-1 * var(--lg-s4)) var(--lg-s3);padding:0 var(--lg-s4) 4px;scrollbar-width:none}
  .lg-tk-streifen::-webkit-scrollbar{display:none}
  .lg-tk-wtag{flex:0 0 84px;scroll-snap-align:start}
  .lg-tk-wt{gap:4px}
  .lg-tk-legende{margin-left:0;width:100%;justify-content:flex-start}
}

/* --- DIE KALENDER-SEITE AM HANDY (01.11.2026, Mathias: „die ganze Kalender-Seite mobile optimieren") ---
   Beide Karten (Termine und Einrichtung): der Kopf bricht in Zeilen um statt den Satz zu einer
   Wortsäule zu quetschen, und nichts darf breiter werden als der Bildschirm. Die Karte schneidet ab
   (overflow:hidden), deshalb muss jeder Inhalt selbst schmal genug sein, vor allem der Wochenplan. */
@media (max-width:720px){
  .lg-cockpit .lg-er-kopf{flex-wrap:wrap;row-gap:6px;padding:var(--lg-s3)}
  .lg-cockpit .lg-er-kopf .lg-er-satz{order:1;flex:1 1 100%;line-height:1.4}
  .lg-cockpit .lg-er-kopf .lg-er-zahl.lg-er-wort{white-space:normal;flex:1 1 100%;order:-1}
  .lg-cockpit .lg-tk>.lg-er-kopf>.lg-knopf,.lg-cockpit .lg-tk>.lg-er-kopf>.lg-tk-abo{order:2}
  .lg-cockpit .lg-er-inhalt,.lg-cockpit .lg-tk .lg-er-inhalt{padding:var(--lg-s3)}
  .lg-cockpit .lg-tk-streifen{margin-left:calc(-1 * var(--lg-s3));margin-right:calc(-1 * var(--lg-s3));padding-left:var(--lg-s3);padding-right:var(--lg-s3)}
  /* Die Regelzeilen: Beschriftung oben, Wert darunter, statt den Wert über den Rand zu schieben. */
  .lg-cockpit .lg-tr-regel{flex-wrap:wrap;row-gap:2px}
  .lg-cockpit .lg-tr-regel>b{text-align:left;flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
  .lg-cockpit .lg-tr-klappe>form{padding:var(--lg-s3)}
  /* Der Wochenplan: je Tag eine Zeile als Raster (Tag · von · bis · bis · zu), keine Tabelle mit fester Breite. */
  .lg-tr-plan,.lg-tr-plan tbody{display:block;width:100%}
  .lg-tr-plan tr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;column-gap:6px;row-gap:4px;align-items:center;margin:0 0 var(--lg-s2)}
  .lg-tr-plan th{grid-column:1 / -1;padding:0}
  .lg-tr-plan td{padding:0}
  .lg-tr-plan .lg-feld{width:100%}
  /* Zeitfenster und Buchbar: je drei Felder als gleich breites Raster, die Felder auf einer Linie,
     auch wenn eine Beschriftung („Kunden je Fenster") zweizeilig wird. */
  .lg-tr-regeln .lg-pl-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lg-s2);align-items:end}
  .lg-tr-regeln .lg-pl-reihe>label.lg-pl-schmal{min-width:0}
  .lg-tr-einheit .lg-feld{width:100%;min-width:0}
  .lg-cockpit .lg-tr-monatkopf{flex-wrap:wrap}
}

/* --- „abholbereit“ prominenter (Mathias 02.11.2026, 03-archiv/abholbereit-prominent/) -------------
   Der einzige GEFÜLLTE Zustand: sattes Grün mit Haken, sonst gleich groß wie jede andere Pille.
   Rot bleibt Arbeit; Grün heißt „fertig, der Kunde kann kommen“. Vier Stellen: Pille in der
   Körbchen-Tabelle (Suche UND eigener Filter), grüner Strich an der Zeile, Wort in der Packliste mit
   grünem Rand der Zeile, Kachel „abholbereit“ in Vollgrün. */
.lg-pille.bereit{background:var(--lg-ok);border-color:var(--lg-ok);color:var(--lg-ok-on)}
.lg-pille.bereit::before{content:"\2713";margin-right:3px}
.lg-cockpit .lg-kb-zeile.bereit{box-shadow:inset 3px 0 0 var(--lg-ok)}
.lg-pk-merk .w.bereit{background:var(--lg-ok);color:var(--lg-ok-on);border-radius:var(--lg-r-pill);padding:0 7px;font-weight:800}
.lg-pk-merk .w.bereit::before{content:"\2713"}
.lg-zeile.bereit{border-color:var(--lg-ok);background:linear-gradient(90deg,var(--lg-ok-tint),transparent 60%),var(--card)}
.lg-cockpit .lg-kb-kacheln>a.voll,.lg-cockpit .lg-kb-kacheln>a.voll:hover{background:var(--lg-ok);color:var(--lg-ok-on)}
.lg-cockpit .lg-kb-kacheln>a.voll:hover{filter:brightness(1.06)}
.lg-cockpit .lg-kb-kacheln>.voll b,.lg-cockpit .lg-kb-kacheln>.voll span,.lg-cockpit .lg-kb-kacheln>.voll i,
.lg-cockpit .lg-kb-kacheln>a.voll::after{color:var(--lg-ok-on)}
.lg-cockpit .lg-kb-kacheln>.voll b::before{content:"\2713\00a0";font-size:.8em}
.lg-zeile.bereit.hier{border-color:var(--lg-warn);box-shadow:0 0 0 1px var(--lg-warn)}


/* ===================================================================================================
   PACKLEISTUNG (Reiter „Packleistung", nur Betreiber; 01.11.2026, Mockup 02-vorgemerkt/packleistung/).
   Gezeichnet von assets/lager-leistung.js. Farben der Personen kommen inline aus dem Skript (feste Farbe
   je Konto); hier nur das Gerüst in den Cockpit-Tokens.
   =================================================================================================== */
.pl{--pl-flaeche:#141830;--pl-blass:var(--faint,#6b7392);--pl-gelb:#f0c46a}
.pl h3{margin:0 0 2px;font-size:1rem}
.pl-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.pl-kopf h2{margin:0;font-size:1.35rem}
.pl-privat{font-size:.7rem;font-weight:700;color:var(--mut);border:1px solid var(--line2);border-radius:20px;padding:2px 9px}
.pl-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line2);border-radius:10px;background:var(--card);margin-left:auto;flex-wrap:wrap;align-items:center;position:relative}
.pl-seg a,.pl-seg summary{padding:6px 12px;font-size:.78rem;font-weight:700;color:var(--mut);border-radius:8px;text-decoration:none;cursor:pointer;list-style:none}
.pl-seg summary::-webkit-details-marker{display:none}
.pl-seg a.an,.pl-seg summary.an{color:var(--ink);background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2)}
.pl-frei{position:relative}
.pl-frei-form{position:absolute;right:0;top:calc(100% + 6px);z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;font-size:.8rem;color:var(--mut);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.pl input[type=date]{padding:4px 8px;border:1px solid var(--line2);border-radius:8px;background:var(--pl-flaeche);color:var(--ink);font:inherit;color-scheme:dark;margin-left:4px}
.pl-sub{color:var(--mut);font-size:.84rem;margin:0 0 12px}
.pl-leer{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;color:var(--mut)}
.pl-leer h3{color:var(--ink)}
.pl-wenig{display:flex;gap:10px;align-items:flex-start;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.35);border-radius:12px;padding:10px 14px;font-size:.84rem;color:#e9dcc0;margin:0 0 14px}
.pl-wenig b{color:var(--pl-gelb)}
.pl-blass{color:var(--pl-blass)}
.pl-punkt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}

.pl-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0 0 16px}
.pl-karte{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.pl-wer{display:flex;align-items:center;gap:2px;font-weight:800;font-size:1.05rem;margin:0 0 10px}
.pl-wer .pl-punkt{width:10px;height:10px}
.pl-wer small{font-weight:500;color:var(--mut);font-size:.76rem;margin-left:auto}
.pl-hero{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pl-hero b{font-size:2.1rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pl-hero span,.pl-stk{color:var(--mut);font-size:.82rem}
.pl-kz{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:12px 0 0;font-size:.8rem;color:var(--mut)}
.pl-kz b{display:block;color:var(--ink);font-size:1.05rem;font-variant-numeric:tabular-nums}
.pl-kz em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--pl-blass);border:1px solid var(--line2);border-radius:20px;padding:0 5px;margin-left:5px;vertical-align:2px;cursor:help}
.pl-anteil{margin:12px 0 0}
.pl-anteil-lbl{display:flex;justify-content:space-between;font-size:.74rem;color:var(--mut);margin:0 0 4px}
.pl-anteil-lbl b{color:var(--ink)}
.pl-bar{display:flex;gap:2px;height:10px}
.pl-bar span{border-radius:3px}
.pl-l-sonst,.pl-legende i.pl-l-sonst{background:#98a0c0;opacity:.55}
.pl-legende i.pl-l-pack{background:var(--ink)}
.pl-legende i.pl-l-kropp{background:var(--ink);opacity:.5}
.pl-schraffur{background:repeating-linear-gradient(45deg,#4a5170 0 3px,transparent 3px 7px)!important;box-shadow:inset 0 0 0 1px #4a5170}

.pl-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 16px}
.pl-hint{color:var(--mut);font-size:.8rem;margin:0 0 12px}
.pl-hint b{color:var(--ink)}
.pl-zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pl-zwei>.pl-panel{margin:0 0 16px}
@media (max-width:860px){.pl-zwei{grid-template-columns:1fr}}
.pl-legende{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--mut);margin:0 0 10px}
.pl-legende span{display:inline-flex;align-items:center;gap:6px}
.pl-legende i{width:12px;height:10px;border-radius:2px;display:inline-block}

.pl-hbar{display:grid;grid-template-columns:72px 1fr 48px;align-items:center;gap:10px;margin:0 0 10px;font-size:.84rem}
.pl-nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-spur{height:22px;display:flex;align-items:center}
.pl-spur span{height:100%;border-radius:0 4px 4px 0}
.pl-spur small{color:var(--pl-blass)}
.pl-stapel{gap:2px}
.pl-stapel span{border-radius:0}
.pl-stapel span:last-child{border-radius:0 4px 4px 0}
.pl-wert{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.pl svg .pl-gitter{stroke:var(--line)}
.pl svg .pl-achs{font-size:10px;fill:var(--pl-blass)}
.pl svg .pl-endlbl{font-size:11px;font-weight:700;fill:var(--ink)}
.pl svg .pl-ring{stroke:var(--card);stroke-width:2}

.pl-ki{border-color:rgba(126,166,255,.4);background:linear-gradient(180deg,rgba(126,166,255,.06),transparent 120px),var(--card)}
.pl-kileiste{display:flex;flex-direction:column;gap:12px;margin:0 0 14px}
.pl-kizeile{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:start}
.pl-kilbl{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--pl-blass);padding-top:7px}
.pl-kihint{font-size:.76rem;color:var(--mut);margin:6px 0 0}
.pl-kidatum{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 0;font-size:.8rem;color:var(--mut)}
.pl-kiknopf{padding:8px 16px;border-radius:10px;border:0;background:#7ea6ff;color:#0b0e1a;font-weight:800;font-size:.84rem;cursor:pointer}
.pl-kiknopf:disabled{opacity:.5;cursor:wait}
.pl-kitext{background:var(--pl-flaeche);border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-size:.9rem;line-height:1.6}
.pl-kitext p{margin:0 0 10px}
.pl-kitext b{color:var(--ink)}
.pl-kifuss{font-size:.74rem;color:var(--pl-blass);border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.pl-link{all:unset;cursor:pointer;color:#7ea6ff}
.pl-fehler{color:#ffb0a6}

.pl-tage{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;align-items:center}
.pl-tage button{padding:5px 11px;border:1px solid var(--line2);border-radius:20px;font-size:.78rem;color:var(--mut);background:none;cursor:pointer;font-family:inherit}
.pl-tage button.an{color:var(--ink);background:var(--card2);border-color:#7ea6ff}
.pl-tage button:disabled{opacity:.35;cursor:default}
.pl-tage button:focus-visible,.pl-kiknopf:focus-visible,.pl-seg a:focus-visible{outline:2px solid #7ea6ff}
.pl-tfilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px}
.pl-tfilter .pl-tage{margin:0}
.pl-rechts{margin-left:auto!important}
.pl-tabwrap{overflow-x:auto}
table.pl-kw,table.pl-tab{width:100%;border-collapse:collapse;font-size:.8rem}
table.pl-kw th,table.pl-tab th{text-align:right;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pl-blass);padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.pl-kw td,table.pl-tab td{padding:7px 8px;border-bottom:1px solid rgba(42,48,80,.6);text-align:right;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
table.pl-kw th:first-child,table.pl-kw td:first-child,table.pl-tab th:nth-child(-n+3),table.pl-tab td:nth-child(-n+3){text-align:left}
table.pl-tab td:nth-child(-n+3){color:var(--ink)}
table.pl-tab{min-width:960px}
table.pl-kw td b,table.pl-tab td b{color:var(--ink)}
.pl-zeit{display:inline-flex;gap:4px;align-items:center}
.pl-zeit small{color:var(--pl-blass);font-size:.7rem}
.pl-zeit input{box-sizing:border-box;width:58px;padding:3px 5px;border:1px solid var(--line2);border-radius:6px;background:var(--pl-flaeche);color:var(--pl-blass);font:inherit;font-variant-numeric:tabular-nums;text-align:center}
.pl-zeit input.pz{width:46px}
.pl-zeit input:focus{border-color:#7ea6ff;color:var(--ink);outline:none}
tr.manuell .pl-zeit input{color:var(--ink);border-color:#6b7392;background:var(--card2)}
.pl-marke{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:20px;border:1px solid var(--line2);color:var(--pl-blass);white-space:nowrap;cursor:help}
.pl-marke.an{color:var(--ink);border-color:#98a0c0}
.pl-marke.pruefen{color:var(--pl-gelb);border-color:rgba(255,176,32,.5)}
.pl-ok{border:1px solid rgba(40,192,122,.5);border-radius:6px;background:none;cursor:pointer;color:#8fecc0;font-size:.75rem;padding:0 5px;margin-left:2px}
.pl-reset{border:0;background:none;cursor:pointer;color:#7ea6ff;font-size:.85rem;padding:0 2px}
.pl-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;font-size:.78rem;color:var(--mut)}
.pl-pager .pl-tage{margin:0}
.pl-meldung{min-height:1.2em;margin:4px 0 6px;font-size:.8rem;color:#8fecc0}
.pl-meldung.pl-fehler{color:#ffb0a6}

.pl-klapp{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:0 0 16px}
.pl-klapp>summary{cursor:pointer;padding:14px 16px;font-weight:800;list-style:none;display:flex;gap:10px;align-items:baseline}
.pl-klapp>summary::-webkit-details-marker{display:none}
.pl-klapp>summary::before{content:"▸";color:var(--mut);transition:transform .15s}
.pl-klapp[open]>summary::before{transform:rotate(90deg)}
.pl-klapp>summary span{font-weight:500;color:var(--mut);font-size:.82rem}
.pl-klapp-in{padding:0 16px 16px}
.pl-bzeile{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;margin:0 0 6px}
.pl-bspur{position:relative;height:38px;background:var(--pl-flaeche);border-radius:8px;overflow:hidden}
.pl-luecke{position:absolute;top:0;bottom:0;border-left:1px dashed #4a5170;border-right:1px dashed #4a5170}
.pl-luecke.kurz{background:repeating-linear-gradient(45deg,rgba(74,81,112,.55) 0 3px,transparent 3px 7px)}
.pl-luecke em{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-style:normal;font-size:.62rem;color:var(--ink);white-space:nowrap;text-shadow:0 0 3px #000}
.pl-t{position:absolute;top:8px;width:3px;height:14px;border-radius:2px;margin-left:-1px}
.pl-t.kropp{top:24px;height:8px;opacity:.55}
.pl-t.sonst{top:24px;height:8px;background:#98a0c0!important;opacity:.6}
.pl-t.blick{top:30px;height:4px;width:2px;background:#98a0c0!important;opacity:.4}
.pl-anw{position:absolute;top:2px;bottom:2px;border:1px solid rgba(152,160,192,.35);border-radius:6px;pointer-events:none}
.pl-anw.manuell{border:1.5px solid var(--ink)}
.pl-achse{display:grid;grid-template-columns:72px 1fr;gap:10px}
.pl-achse div{position:relative;height:18px;font-size:.66rem;color:var(--pl-blass)}
.pl-achse span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.pl-leerzeile{color:var(--pl-blass);font-size:.78rem;padding:10px 0 0 6px}
.pl-legende i.pl-lg-haken{width:3px;height:12px;background:var(--ink)}
.pl-legende i.pl-lg-unten{width:3px;height:7px;background:var(--ink);opacity:.5}
.pl-legende i.pl-lg-blick{width:2px;height:4px;background:#98a0c0;opacity:.5}
.pl-legende i.pl-lg-anw{border:1px solid rgba(152,160,192,.5)}
.pl-legende i.pl-lg-anw.an{border:1.5px solid var(--ink)}

.pl-notiz{background:var(--card2);border:1px solid var(--line2);border-radius:var(--radius);padding:14px 16px;margin:0 0 16px}
.pl-notiz p{margin:0 0 8px;font-size:.88rem}
.pl-notiz-titel{display:block;margin:0 0 8px}
.pl-knopf{float:right;font-size:.76rem;font-weight:700;color:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:4px 10px;background:none;cursor:pointer}
.pl-lesehilfe{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;font-size:.82rem;color:var(--mut);margin:0 0 16px}
.pl-lesehilfe b{color:var(--ink)}
.pl-lesehilfe ul{margin:6px 0 0;padding-left:18px}
.pl-tip{position:fixed;pointer-events:none;background:#0b0e1a;border:1px solid var(--line2);border-radius:8px;padding:6px 9px;font-size:.76rem;color:var(--ink);display:none;z-index:50;max-width:300px;box-shadow:0 6px 18px rgba(0,0,0,.5);line-height:1.4}