/* TradeHub · Verpackungen (PPWR)
   ⚠️ Bewusst SEHR schlank. Die Maske benutzt die vorhandenen Bausteine der Bestellmaske
   (ordCSec/ordCHead/oct/ordCBody/ordSwitch/filebox.filepick/seg/ordFiles/mBtn). Hier steht
   nur, was es dort noch nicht gibt.

   ⚠️ Erster Anlauf (v4.424) hatte eigene Schalter (.packSwitch/.packTrack), eigene Steine
   (.packChip) und ein nacktes `.filebox` ohne `filepick` — dadurch überlappten die
   Schalterbeschriftungen und das native „Dateien auswählen" stand sichtbar in der Bühne.
   Peter: *„das sieht ja richtig billig aus … orientiere dich an Bestellungen."* Nicht
   wieder eigene Nachbauten anlegen. */

#viewPackaging{ display:flex; flex-direction:column; width:100%; }

/* ── Filter & Liste ──────────────────────────────────────────────────────────
   Das polierte Filter-/Listen-Styling der App ist auf #viewOrders/#viewSuppliers/
   #viewCustomers gescoped (index.html) — eine neue Ansicht erbt es NICHT.
   Deshalb hier für #viewPackaging gespiegelt: gleiche Rasterbreite, gleiche
   Versal-Etiketten, gleiche Feldhöhe, blaue Überschrift. */
#viewPackaging .grid.g8{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
/* Etiketten 1:1 wie `#viewOrders .g8 label` (index.html) - Gewicht 700, nicht 600. */
#viewPackaging .grid.g8 label{
  font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--sbFaint);
}
#viewPackaging .grid.g8 .ctl{ height:36px; }

/* WARNUNG: Filterkarte und Listenkarte haben UNTERSCHIEDLICHE Ueberschriften.
   Peter, 11.08.2026: *„bei Filter und Suche war der Text immer blau - guck mal, ob die
   Schriftgroesse auch die gleiche ist."* Gemessen: Filter = 11 px VERSALIEN mit Sperrung,
   Liste = 14 px normal. Beides hier gespiegelt, Werte aus index.html uebernommen. */
#viewPackaging .card.pad:not(.listCard) .secHd{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sbBright); margin-bottom:10px; min-height:27px;
}
/* ⚠️ Listen-Ueberschriften sind seit v4.119 App-BLAU (Peters Wunsch, wie Modal-Titel und
   Speichern-Knopf). Die Regel in index.html zaehlt die Ansichten einzeln auf —
   #viewPackaging stand nicht darin, deshalb war „Verpackungen" dunkel statt blau. */
#viewPackaging .listCard .secHd{
  font-size:14px; font-weight:700; color:#2a87c8;
  text-transform:none; letter-spacing:-.01em; margin:0;
}

/* ══ Die Listen-Karte randlos (v4.811) ═════════════════════════════════════════════
   ⚠️⚠️ WIEDER DIESELBE FALLE: `padding:0` auf der Listen-Karte steht in index.html für
      #viewOrders, #viewSuppliers, #viewCustomers, #viewCustoms, #viewCompliance und
      #viewReports — je Ansicht einzeln aufgezählt. #viewPackaging fehlte, also griff die
      allgemeine Regel `.pad{padding:14px}`. Gemessen am 15.09.2026 bei 1060 px Fensterhöhe:
      Der Fuß der Verpackungen endete bei 1025 px, der von Bestellungen und Zolldokumenten
      bei 1039 px — genau die 14 px Innenabstand. Peter hat es an Lindas Kopf gesehen.
   ⚠️ `margin:0!important` ist nötig: Die Kopfzeile trägt `margin-bottom:8px` direkt am
      Element, und eine gewöhnliche Regel käme dagegen nicht an (dasselbe Mittel wie bei
      #viewCustoms .listCard > .secHd). */
#viewPackaging .listCard{ padding:0; overflow:hidden; }
#viewPackaging .listCard > .ordListHd{
  padding:12px 18px; border-bottom:1px solid var(--sbLineSoft); margin:0!important;
}
#viewPackaging .listCard .table{ border-radius:0; }

@media (min-width:981px){
  #viewPackaging{ flex:1; min-width:0; overflow:hidden; }
  #viewPackaging .listCard{ flex:1; min-height:0; overflow:hidden; }
  #viewPackaging .listCard .table{ flex:1; min-height:0; overflow:auto; }
}
@media (max-width:900px){
  #viewPackaging .grid.g8{ grid-template-columns:1fr 1fr; }
}

#viewPackaging .packEmpty{
  padding:22px 16px; border:1px dashed var(--bd); border-radius:14px;
  color:var(--mut); text-align:center; margin-bottom:10px;
}
#viewPackaging .packEmpty b{ color:var(--txt); display:block; margin-bottom:4px; }

/* ── Ampel ───────────────────────────────────────────────────────────────── */
.packPill{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.packPill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.packPill.ok{   background:#eaf7ef; color:#12813d; }
.packPill.warn{ background:#fdf3e3; color:#a15c06; }
.packPill.bad{  background:#fdecec; color:#c02b2b; }
.packPill.neu{  background:#eef1f5; color:#5a6472; }
html[data-theme=dark] .packPill.ok{   background:rgba(22,163,74,.16);   color:#5ad98a; }
html[data-theme=dark] .packPill.warn{ background:rgba(217,119,6,.16);   color:#f0b45e; }
html[data-theme=dark] .packPill.bad{  background:rgba(239,68,68,.16);   color:#f58a8a; }
html[data-theme=dark] .packPill.neu{  background:rgba(148,163,184,.16); color:#c2cad6; }

/* ── Maske ───────────────────────────────────────────────────────────────── */
/* ⚠️ SCHWERSTER BEFUND von Kontrolletti (11.08.2026): Hier stand NUR die Breite.
   Damit fiel die Maske auf die allgemeine `.dlg`-Basisregel zurueck
   (`padding:18px; max-height:92vh; overflow:auto`) — und der GANZE Dialog scrollte statt
   nur der Inhaltsspalte. Gemessene Folge: Beim Herunterscrollen wanderte das Schliessen-
   Kreuz auf top:-186 px aus dem Bild, die Sprung-Navigation wurde auf 899 px gestreckt,
   und die Fusszeile mit Speichern hing nicht fest. Der Scrollstand blieb sogar ueber
   Schliessen/Oeffnen hinweg haengen.
   Jede Geschwister-Maske (#mOrder, #mCustoms, …) definiert dieses Geruest einzeln —
   es wird NICHT vererbt. Werte von `#mOrder .dlg.narrow` uebernommen. */
#mPack .dlg.packDlg{
  width:min(1320px,95vw); max-width:none; padding:0;
  display:flex; flex-direction:column;
  height:clamp(620px,90vh,920px); overflow:hidden; border-radius:16px;
}

.packHidden{ display:none !important; }

/* Eine beschriftete Zeile unter dem Feldraster (Stufe, Werkstoff, Schalter). */
.packRow{ margin-top:16px; }
.packRow > label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:#8a909c; margin-bottom:7px;
}
html[data-theme=dark] .packRow > label{ color:var(--mut); }

/* Segment-Leiste darf umbrechen — acht Werkstoffe passen sonst nicht nebeneinander. */
#mPack .seg.packSeg{ display:flex; flex-wrap:wrap; gap:4px; width:fit-content; max-width:100%; }
#mPack .seg.packSeg button{ white-space:nowrap; }

/* Schalter mit Erklärzeile darunter, zweispaltig. */
.packFlags{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center;
}
.packFlags > label.ordSwitch{ justify-self:start; }
.packFlags > .hint{ margin:0; }
@media (max-width:760px){
  .packFlags{ grid-template-columns:1fr; }
  .packFlags > .hint{ margin-bottom:8px; }
}

/* ── Hinweiskästen ───────────────────────────────────────────────────────────
   ⚠️ Bis v4.430 waren das Balken mit `border-left:3px` und einer eckigen linken Kante
   (`border-radius:0 10px 10px 0`). Peter, 11.08.2026: *„wieder diese hässliche
   hervorgehobene Linie in der Kachel links … das wirkt immer noch richtig billig."*
   Jetzt: rundum gerundete Karte, weich getönter Grund, feiner Rahmen in der Signalfarbe
   und ein kleines rundes Zeichen vor der Überschrift statt der Leiste.
   Nicht zum Balken zurückbauen. */
.packNote,.packHint,.packHinweise,#mOrder .ordPackWarn,#viewPackaging .packReadStatus{
  border-radius:14px; padding:13px 15px; font-size:13px;
  border:1px solid transparent; line-height:1.5;
}
/* Blau — sachlicher Hinweis */
.packNote,#viewPackaging .packReadStatus{
  background:#f6fafd; border-color:rgba(42,135,200,.22); color:#31435a; margin-bottom:16px;
}
html[data-theme=dark] .packNote,html[data-theme=dark] #viewPackaging .packReadStatus{
  background:rgba(42,135,200,.09); border-color:rgba(42,135,200,.26); color:#c8d6e4;
}
/* Bernstein — etwas fehlt noch */
.packHint,.packHinweise,#mOrder .ordPackWarn{
  background:#fdfaf3; border-color:rgba(217,119,6,.24); color:#7a4d06;
}
html[data-theme=dark] .packHint,html[data-theme=dark] .packHinweise,
html[data-theme=dark] #mOrder .ordPackWarn{
  background:rgba(217,119,6,.09); border-color:rgba(217,119,6,.26); color:#e8bf80;
}
.packHint{ margin-top:12px; }

/* Nachweis-Zeile — sitzt in .ordFiles, aber breiter als ein Datei-Chip. */
.packDocRow{
  display:flex; align-items:center; gap:12px; padding:10px 12px; width:100%;
  border:1px solid var(--bd); border-radius:12px; font-size:13.5px; background:var(--card);
}
.packDocRow + .packDocRow{ margin-top:8px; }
.packDocIco{
  width:34px; height:34px; border-radius:9px; background:#eef5fb; color:#14395d;
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700;
  flex:0 0 auto; letter-spacing:.02em;
}
html[data-theme=dark] .packDocIco{ background:rgba(42,135,200,.18); color:#7ec2ee; }
.packDocMain{ flex:1; min-width:0; }
.packDocMain .n{ font-weight:600; display:flex; align-items:center; gap:8px; min-width:0; }
.packDocMain .n .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* Unterschrift als schaltbare Pille in der Namenszeile (v4.765). Vorher ein Schalter zwischen
   Auswahl und Knöpfen, der die Konformitätserklärung aus der Flucht der anderen Zeilen drückte. */
.packPill.packDocSigned{ border:0; font:inherit; font-size:11.5px; font-weight:600; line-height:1.3; cursor:pointer; flex:0 0 auto; }
.packPill.packDocSigned:hover{ filter:brightness(.96); }
.packPill.packDocSigned:focus-visible{ outline:2px solid #2a87c8; outline-offset:2px; }
html[data-theme=dark] .packPill.packDocSigned:hover{ filter:brightness(1.15); }
.packDocMain .m{ font-size:12px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.packDocRow select.packDocType{ height:34px; max-width:200px; flex:0 0 auto; }
.packDocAct{ display:flex; gap:6px; flex:0 0 auto; align-items:center; }

/* Bestellungs-Suche */
.packOrdPick{ position:relative; margin-bottom:14px; }
.packOrdResults{
  display:none; position:absolute; z-index:20; left:0; right:0; top:100%; margin-top:4px;
  background:var(--card); border:1px solid var(--bd); border-radius:12px;
  /* 320 statt 260 px: mit bis zu vier Gruppenkoepfen waren sonst nur ~3 Vorschlaege
     zu sehen (im Bild nachgezaehlt, 19.08.2026). */
  max-height:320px;
  overflow:auto; box-shadow:0 12px 30px rgba(16,24,40,.15);
}
.packOrdResults.on{ display:block; }
/* Nach oben aufklappen, wenn unter dem Feld kein Platz mehr ist — Abschnitt 08 ist
   der letzte der Bestellmaske, darunter gibt es keinen Scrollweg. (19.08.2026) */
.packOrdResults.auf{ top:auto; bottom:100%; margin-top:0; margin-bottom:4px;
                     box-shadow:0 -12px 30px rgba(16,24,40,.15); }
.packOrdOpt{ padding:10px 12px; cursor:pointer; font-size:13.5px; border-bottom:1px solid var(--bd); }
.packOrdOpt:last-child{ border-bottom:0; }
.packOrdOpt:hover,.packOrdOpt.sel{ background:rgba(42,135,200,.09); }
.packOrdOpt .sub{ font-size:12px; color:var(--mut); }
/* Gruppenkopf in der Zuordnungsliste — „Für diesen Kunden" zuerst (19.08.2026). */
.packOrdGrp{ padding:7px 12px 5px; font-size:11.5px; font-weight:700; letter-spacing:.04em;
             text-transform:uppercase; color:var(--mut); background:var(--bg2,#f5f7fa);
             border-bottom:1px solid var(--bd); }
.packOrdGrp:first-child{ border-top:0; }
.packOrdZ{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius:9px;
           font-size:11px; font-weight:700; background:rgba(42,135,200,.14); color:#2a87c8; }

.packLinkRow{
  display:flex; align-items:center; gap:10px; padding:10px 12px; width:100%;
  border:1px solid var(--bd); border-radius:12px; font-size:13.5px; background:var(--card);
}
.packLinkRow + .packLinkRow{ margin-top:8px; }
.packLinkRow .sku{ font-weight:600; }
.packLinkRow .rev{
  font-size:11.5px; color:var(--mut); background:rgba(127,127,127,.12);
  border-radius:6px; padding:2px 7px; font-weight:600; flex:0 0 auto;
}
.packLinkRow .when{ margin-left:auto; color:var(--mut); font-size:12.5px; white-space:nowrap; }
.packLinkRow .rm{
  border:0; background:transparent; color:var(--mut); cursor:pointer; font-size:16px;
  line-height:1; padding:4px 6px; border-radius:7px; flex:0 0 auto;
}
.packLinkRow .rm:hover{ background:rgba(127,127,127,.12); color:var(--txt); }
.packLinkRow.pflicht{ border-color:#e7b96a; }

/* Fassungen */
.packRevList{ margin-top:16px; }
.packRevRow{
  display:flex; align-items:center; gap:12px; font-size:13.5px; padding:10px 0;
  border-bottom:1px solid var(--bd);
}
.packRevRow:last-child{ border-bottom:0; }
.packRevNo{ font-weight:700; font-variant-numeric:tabular-nums; color:#2a87c8; min-width:26px; }
.packRevRow .when{ margin-left:auto; color:var(--mut); font-size:12.5px; white-space:nowrap; }
.packRevRow.alt{ opacity:.6; }
/* Überholte Nachweise: gedämpft, aber lesbar. ⚠️ .62 (wie .compAttRow.alt) drückt die
   Metazeile im DUNKLEN Modus auf Kontrast 3.26 — unter der Schwelle. Bei .8 sind es
   gemessen: dunkel 9.25 / 4.50 / 6.23, hell 9.44 / 4.53 / 7.56 (Name / Meta /
   Überschrift, mit Alpha gegen den echten Kartengrund gerechnet). Den Zustand trägt
   ohnehin der Durchstrich und die Überschrift, nicht die Blasse. */
.packDocRow.alt{ opacity:.8; }
.packDocRow.alt .n{ text-decoration:line-through; text-decoration-thickness:1px; }
.packDocAltHead{ margin:16px 0 8px; font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--mut); }

@media (max-width:920px){
  .packDocRow{ flex-wrap:wrap; }
  .packDocRow select.packDocType{ max-width:none; width:100%; }
}


/* ── Abschnitt „08 Verpackung" in der BESTELLMASKE ───────────────────────────
   Reine Anzeige. Die .packPill-Ampel wird mitbenutzt, damit ein Stand hier genauso
   aussieht wie in der Verpackungsliste. */
#mOrder .ordPackRow{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--bd); border-radius:12px; font-size:13.5px; background:var(--card);
}
#mOrder .ordPackRow + .ordPackRow{ margin-top:8px; }
#mOrder .ordPackCode{ font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto; }
#mOrder .ordPackName{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mut); }
#mOrder .ordPackRow .rev{
  font-size:11.5px; color:var(--mut); background:rgba(127,127,127,.12);
  border-radius:6px; padding:2px 7px; font-weight:600; flex:0 0 auto;
}
#mOrder .ordPackFoot{ display:flex; justify-content:flex-end; margin-top:12px; }
/* ⚠️ Hier stand bis v4.431 eine ZWEITE Regel mit `border-left:3px` und eckiger Kante.
   Sie hat die neue Sammelregel weiter oben ueberschrieben (gleiches Gewicht, spaeter im
   Blatt) — der Warnkasten in der Bestellmaske sah deshalb noch alt aus, obwohl im Modul
   sonst alles umgestellt war. Aussehen kommt jetzt AUSSCHLIESSLICH von dort. */

/* Angebot, wenn der Treffer NICHT eindeutig ist: anbieten statt setzen. */
#mOrder .ordPackTipp{ margin-top:12px; }
#mOrder .ordPackTipp > b{
  display:block; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--sbFaint); margin-bottom:8px;
}
#mOrder .ordPackTippListe{ display:flex; flex-direction:column; gap:6px; }
#mOrder .ordPackTippBtn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  padding:9px 12px; border:1px solid var(--bd); border-radius:12px; background:var(--card);
  font-size:13.5px; color:var(--txt); transition:border-color .14s ease, background .14s ease;
}
#mOrder .ordPackTippBtn:hover{ border-color:#2a87c8; background:rgba(42,135,200,.06); }
#mOrder .ordPackTippBtn .c{ font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto; }
#mOrder .ordPackTippBtn .n{ flex:1; min-width:0; color:var(--mut);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#mOrder .ordPackTippBtn .z{
  flex:0 0 auto; font-size:11.5px; font-weight:600; color:var(--mut);
  background:rgba(127,127,127,.12); border-radius:6px; padding:2px 7px;
}

#mOrder .ordPackPick{ position:relative; margin-bottom:14px; }
#mOrder .ordPackRow .rm{
  border:0; background:transparent; color:var(--mut); cursor:pointer; font-size:16px;
  line-height:1; padding:4px 6px; border-radius:7px; flex:0 0 auto;
}
#mOrder .ordPackRow .rm:hover{ background:rgba(127,127,127,.12); color:var(--txt); }


/* ── KI-Auslesung ────────────────────────────────────────────────────────────
   Der Vorschlag ist bewusst eine LESE-Ansicht mit Herkunftsangabe je Akte: Peter soll
   sehen, aus welcher Datei ein Wert stammt, bevor er ihn uebernimmt.

   ⚠️ GLEICHE FALLE WIE BEI FILTER UND LISTE (siehe Kopf dieser Datei): Die ganze
   Upload-Buehne (`.filebox.filepick` mit Kreis-Zeichen, gestricheltem Rand, ordOver-
   Hervorhebung) ist in index.html auf `.dlg.mform .filebox` und `#mCalc .filebox`
   gescoped. Eine Buehne auf einer SEITE erbt davon NICHTS — sie fiel auf die nackte
   Grundregel `.filebox{border:1px solid;padding:8px 10px}` plus `.filepick{display:flex;
   align-items:center}` zurueck. Ergebnis: ein schmaler Balken statt einer Buehne, das
   Etikett „Keine Datei ausgewaehlt" stand als 140-px-Feld daneben, und beim Ziehen gab es
   KEINE Rueckmeldung, weil auch `.ordOver` nur im Dialog gestylt ist.
   Peter, 11.08.2026: *„es wird mir nicht angezeigt, wohin man die konkret ziehen soll …
   normalerweise wird da immer so ein Feld vormarkiert."*
   Deshalb steht die Buehne hier vollstaendig. Werte aus `.dlg.mform .filebox` uebernommen. */
/* ── Ablegen auf der GANZEN Fläche (v4.746) ───────────────────────────
   Peter am 04.09.2026: der Knopf gehört in die Kopfleiste, die Ablagefläche soll
   keinen Platz kosten. Sie erscheint deshalb erst, wenn wirklich Dateien über dem
   Fenster hängen — dann aber über dem ganzen Fenster.
   ⚠️ Kein farbiger Rahmen (Peters Regel): die Fläche meldet sich über den
      abgedunkelten Grund und einen Schimmer, nicht über eine bunte Kante.
   ⚠️ z-index unter 200 — dort liegen die Dialoge, und über einem offenen Dialog
      darf diese Fläche nie liegen (js/packaging.js prüft es zusätzlich). */
.packDropAll{
  position:fixed; inset:0; z-index:150; display:none;
  align-items:center; justify-content:center; padding:28px;
  background:rgba(244,245,246,.84);
}
html[data-theme=dark] .packDropAll{ background:rgba(10,26,43,.86); }
@supports (backdrop-filter:blur(2px)){ .packDropAll{ backdrop-filter:blur(2px); } }
.packDropAll.bereit{ display:flex; }
.packDropAllBox{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:34px 44px; max-width:520px; text-align:center; border-radius:18px;
  background:var(--card);
  box-shadow:0 0 0 1px var(--bd), 0 0 52px rgba(42,135,200,.30),
             0 26px 60px -26px rgba(0,0,0,.55);
}
.packDropAllIc{ color:#2a87c8; line-height:0; }
html[data-theme=dark] .packDropAllIc{ color:#63b8ea; }
.packDropAllBox b{ font-size:16.5px; font-weight:600; color:var(--txt); }
.packDropAllBox i{ font-size:13px; font-style:normal; color:var(--mut); }

/* ── Fortschritt beim Einlesen ───────────────────────────────
   Peter, 11.08.2026: *„vielleicht kannst du da auch einen prozentualen Balken zeigen,
   dass man sieht, wann der fertig ist … einfach moderner."*
   ⚠️ Ehrlich bleiben: Vorbereiten und Übertragen sind ECHT gemessen. Das Lesen
   selbst meldet keinen Fortschritt — der Balken schätzt dort nur und läuft nie über
   95 %. Deshalb steht die verstrichene Zeit daneben.
   ⚠️ Seit v4.746 in einer EIGENEN Karte, die nur während des Lesens dasteht. */
.packReadLauf[hidden]{ display:none; }
.packProg{ display:flex; flex-direction:column; gap:11px; width:100%; }
.packProgKopf{ display:flex; align-items:baseline; gap:10px; }
.packProgPhase{ font-size:13.5px; font-weight:600; color:var(--txt); }
.packProgZeit{ margin-left:auto; font-size:12px; color:var(--mut); font-variant-numeric:tabular-nums; }
.packProgPct{
  font-size:12.5px; font-weight:700; color:#2a87c8; font-variant-numeric:tabular-nums;
}
.packProgBahn{
  height:6px; border-radius:99px; background:rgba(127,127,127,.16); overflow:hidden; position:relative;
}
.packProgBalken{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,#2a87c8,#5eb3e6);
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
/* Schimmer, solange gelesen wird — zeigt „es laeuft noch", ohne Prozente zu erfinden. */
.packProgBalken.schimmert::after{
  content:""; position:absolute; inset:0; border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:packSchimmer 1.4s linear infinite;
}
@keyframes packSchimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
.packProgDateien{ display:flex; flex-wrap:wrap; gap:6px; }
.packProgDatei{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font-size:11.5px; color:var(--mut); background:rgba(127,127,127,.09);
  border-radius:99px; padding:3px 10px 3px 8px;
}
.packProgDatei span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.packProgDatei::before{
  content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:#2a87c8; opacity:.55;
}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="an"]) .packProgBalken{ transition:none; }
  html:not([data-motion="an"]) .packProgBalken.schimmert::after{ animation:none; }
}

/* Die Statuszeile meldet seit v4.431 NUR noch Fehler — der Verlauf steht in der Bühne. */
#viewPackaging .packReadStatus{ margin-top:12px; }
#viewPackaging .packReadStatus.fehler{
  background:#fdf5f5; border-color:rgba(239,68,68,.28); color:#8a2b2b;
}
html[data-theme=dark] #viewPackaging .packReadStatus.fehler{
  background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); color:#f2a3a3;
}

#mPackRead .dlg.packReadDlg{
  width:min(1080px,95vw); max-width:none; padding:0;
  display:flex; flex-direction:column;
  height:clamp(560px,86vh,880px); overflow:hidden; border-radius:16px;
}
#mPackRead .packReadBody{ flex:1; min-height:0; overflow:auto; padding:18px 24px; }

.packVorschlag{
  border:1px solid var(--bd); border-radius:14px; padding:16px; background:var(--card);
}
.packVorschlag + .packVorschlag{ margin-top:14px; }
.packVorschlagKopf{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.packVorschlagKopf .code{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.packVorschlagKopf .name{ font-size:14px; color:var(--mut); flex:1; min-width:0; }
.packVorschlagQuelle{ font-size:12px; color:var(--mut); margin-bottom:12px; }
.packFelder{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px 18px; }
.packFeld{ min-width:0; }
.packFeld .k{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#8a909c; margin-bottom:2px;
}
html[data-theme=dark] .packFeld .k{ color:var(--mut); }
.packFeld .w{ font-size:13.5px; overflow-wrap:anywhere; }
.packFeld .w.leer{ color:#b6bcc6; }
.packFeld.unsicher .w{ background:#fdf3e3; border-radius:5px; padding:1px 5px; }
html[data-theme=dark] .packFeld.unsicher .w{ background:rgba(217,119,6,.18); }
.packVorschlagDocs{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.packVorschlagDocs .d{
  display:flex; align-items:center; gap:9px; font-size:13px;
  border:1px solid var(--bd); border-radius:9px; padding:7px 10px;
}
.packVorschlagDocs .d .art{
  font-size:10.5px; font-weight:700; letter-spacing:.02em; color:#14395d;
  background:#eef5fb; border-radius:5px; padding:2px 6px; flex:0 0 auto;
}
html[data-theme=dark] .packVorschlagDocs .d .art{ background:rgba(42,135,200,.18); color:#7ec2ee; }
.packHinweise{ margin-top:16px; }
/* Überschrift mit rundem Zeichen — ersetzt die frühere Balkenkante (siehe oben). */
.packHinweise > b{
  display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700;
  letter-spacing:-.01em; margin-bottom:2px;
}
.packHinweise > b::before{
  content:"i"; flex:0 0 auto; width:19px; height:19px; border-radius:50%;
  background:rgba(217,119,6,.16); color:#b4740c;
  font-size:12px; font-weight:700; font-style:italic; font-family:Georgia,serif;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
html[data-theme=dark] .packHinweise > b::before{ background:rgba(217,119,6,.22); color:#f0b45e; }
.packHinweise ul{ margin:8px 0 0; padding-left:19px; }
.packHinweise li + li{ margin-top:5px; }


/* ── Mengenmeldung (v4.766) ──────────────────────────────────────────────────
   Peter, 06.09.2026: eigener Knopf „Mengenmeldung" bei den Verpackungen; Optik wie die
   CBAM-Übersicht, die er nach seinem Mockup freigegeben hat. Deshalb werden die
   CBAM-Klassen (cbKopf, cbKpi, cbCard, cbKartenKopf, cbSeg, cbBtnS/P …) hier MITBENUTZT —
   Absicht, keine Falle: ändert sich die CBAM-Optik, zieht die Meldung mit.
   ⚠️ cbam.css hängt die Farbmarken (--cb…) an #viewCbam. Ohne den Block hier wären sie in
      der Verpackungs-Ansicht leer — transparente Kacheln, schwarze Schrift im Dunkeln. */
#viewPackaging .pmSeite{--cbBlau:#2a87c8;--cbBlauD:#185fa5;
  --cbGrund:#f4f5f6;--cbKarte:#fff;--cbKarte2:#f6f8fb;--cbLinie:#e5e7eb;--cbLinie2:#eef0f3;
  --cbInk:#111827;--cbMut:#5f6b76;--cbSoft:#4b5563;--cbDatum:#1b6ea8;
  --cbGruen:#16a34a;--cbGruenT:#e6f6ee;--cbGruenI:#0f8a4f;--cbBlauT:#e9f2fb;--cbBlauI:#1b6ea8;
  --cbAmberT:#fdf1dc;--cbAmberI:#b45309;--cbPillB:#e9f2fb;--cbPillBt:#185fa5;--cbPillA:#fef3c7;--cbPillAt:#b45309;
  --cbPillG:#f1f5f9;--cbPillGt:#334155;--cbSpur:#e5e7eb;--cbMarker:#4b5563;
  --cbSchatten:0 1px 2px rgba(17,24,39,.04),0 8px 24px -18px rgba(17,24,39,.25)}
html[data-theme=dark] #viewPackaging .pmSeite{--cbBlau:#63b8ea;--cbBlauD:#2a87c8;
  --cbGrund:var(--sbPage,#0a1a2b);--cbKarte:var(--sbCard,#0f2338);--cbKarte2:#152a44;--cbLinie:var(--sbLine,rgba(255,255,255,.10));--cbLinie2:var(--sbLineSoft,rgba(255,255,255,.06));
  --cbInk:var(--sbInk,#e9eff7);--cbMut:#8fa4bd;--cbSoft:#c3d0de;--cbDatum:#7cc0ee;
  --cbGruen:#3fbf7f;--cbGruenT:rgba(78,207,146,.16);--cbGruenI:#4ecf92;--cbBlauT:rgba(77,163,232,.18);--cbBlauI:#5db0f0;
  --cbAmberT:rgba(245,158,11,.16);--cbAmberI:#f2ab63;--cbPillB:rgba(77,163,232,.16);--cbPillBt:#8cc7f3;--cbPillA:rgba(245,158,11,.18);--cbPillAt:#f2c27a;
  --cbPillG:rgba(255,255,255,.08);--cbPillGt:#c3d0de;--cbSpur:rgba(255,255,255,.10);--cbMarker:#c3d0de;
  --cbSchatten:0 1px 2px rgba(0,0,0,.25),0 10px 30px -20px rgba(0,0,0,.6)}

/* Ist die Meldung offen, weichen Filter, Lesefortschritt und Liste — die Fenster bleiben. */
#viewPackaging.pmOffen > section.card{ display:none; }
/* Wie die CBAM-Übersicht: die Seite selbst scrollt nur, wenn der Bildschirm zu niedrig ist —
   sonst füllen die beiden Karten die Höhe, und nur die Herleitung scrollt innen
   (Peter, 06.09.2026: „die Felder sollen den Bildschirm abfüllen … die gesamte Seite scrollt, total blöd"). */
#viewPackaging .pmSeite{ display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:2px 2px 14px; color:var(--cbInk); }
#viewPackaging .pmSeite[hidden]{ display:none; }
#viewPackaging .pmSeite > *{ flex-shrink:0; }
#viewPackaging .pmSeite > .pmZwei{ flex:1 1 auto; min-height:392px; }
/* Die graue Kachel (Transportverpackung) gibt es bei CBAM nicht. */
.pmSeite .cbKpi.grau .cbKreis{ background:var(--cbPillG); color:var(--cbPillGt); }
.pmSeite .cbKpi .t{ overflow-wrap:anywhere; }
.pmKopf{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.pmKopf > div:first-child{ flex:1; min-width:0; }
.pmKopf .cbKrumen a{ color:var(--cbDatum); text-decoration:none; font-weight:600; }
.pmKopf .cbKrumen a:hover{ text-decoration:underline; }
.pmWerk{ display:flex; gap:10px; align-items:center; margin-top:6px; }
.pmWerk .cbBtnS svg{ width:18px; height:18px; }
.pmZwei{ display:grid; grid-template-columns:minmax(0,8fr) minmax(380px,4fr); gap:16px; align-items:stretch; }
.pmCard{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.pmTabWrap{ flex:0 0 auto; }
.pmTabWrap.pmHerlWrap{ flex:1 1 auto; min-height:84px; overflow:auto; }
/* Herleitung: feste Spaltenanteile (colgroup im JS), Text wird abgeschnitten statt die Tabelle zu verbreitern —
   nowrap-Texte der Unterzeilen hatten die Tabelle über die Karte hinausgeschoben (06.09.2026). */
.pmTab.pmHerl{ table-layout:fixed; }
.pmTab.pmHerl td,.pmTab.pmHerl th{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmHerlWrap .pmTab thead th{ position:sticky; top:0; z-index:1; background:var(--cbKarte); }
.pmHinweis{ flex:0 0 auto; border-top:1px solid var(--cbLinie2); padding:10px 20px 12px; }
.pmMeldung .pmInfo{ margin-top:auto; }
.pmSeite .cbKartenTitel.klein{ font-size:15px; }
.pmKopf2{ padding-top:12px; padding-bottom:8px; }
#pmFrakTab td{ padding-top:7px; padding-bottom:7px; }
#pmFrakTab th{ padding-top:7px; padding-bottom:7px; }
.pmTabWrap{ overflow-x:auto; }
.pmTab{ width:100%; border-collapse:collapse; font-size:13.5px; color:var(--cbInk); }
.pmTab th{ text-align:left; font-weight:500; color:var(--cbMut); font-size:12.5px; padding:8px 20px; border-top:1px solid var(--cbLinie); border-bottom:1px solid var(--cbLinie2); white-space:nowrap; }
.pmTab td{ padding:10px 20px; border-bottom:1px solid var(--cbLinie2); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--cbInk); }
/* Erste Spalte nimmt den Rest, der Text wird abgeschnitten — die Zahlen behalten ihren Platz. */
.pmTab td:first-child,.pmTab th:first-child{ width:100%; max-width:0; overflow:hidden; text-overflow:ellipsis; }
.pmTab .r{ text-align:right; }
/* Herleitung: mit `max-width:0` fiel die erste Spalte auf 40 px, weil Pillen und Werkstofftext
   ihren Platz zuerst nahmen (gemessen 06.09.2026). Deshalb Mindestbreite vorn, Kürzung hinten. */
.pmTab.pmHerl td:first-child,.pmTab.pmHerl th:first-child{ width:auto; max-width:none; }
.pmTab.pmHerl td{ padding-left:14px; padding-right:14px; }
.pmTab.pmHerl th{ padding-left:14px; padding-right:14px; }
.pmTab.pmHerl td:first-child,.pmTab.pmHerl th:first-child{ padding-left:20px; }
.pmTab.pmHerl td:last-child,.pmTab.pmHerl th:last-child{ padding-right:20px; }
.pmTab td.b{ font-weight:600; }
.pmTab .mut{ color:var(--cbMut); font-weight:400; font-size:12.5px; }
.pmTab tr.sum td{ font-weight:800; border-top:1px solid var(--cbLinie); background:var(--cbKarte2); }
.pmTab tr.pmHz{ cursor:pointer; }
.pmTab tr.pmHz:hover td{ background:var(--cbKarte2); }
.pmTab tr.pmHz:focus-visible{ outline:2px solid var(--cbBlau); outline-offset:-2px; }
.pmTab tr.pmHz .pf{ display:inline-block; width:16px; height:16px; vertical-align:-3px; color:var(--cbMut); transition:transform .15s; margin-right:6px; }
.pmTab tr.pmHz .pf svg{ width:16px; height:16px; }
.pmTab tr.pmHz.auf .pf{ transform:rotate(90deg); }
.pmTab tr.pmHz.auf td{ background:var(--cbKarte2); border-bottom-color:transparent; }
/* Aufgeklappte Bestellungen (v4.768): echte Zeilen in DENSELBEN Spalten wie die Verpackung —
   Bestellung unter Verpackung, Kunde unter Stufe, Termin unter Werkstoff, Stück unter Stück, kg unter Menge.
   Vorher ein eigenes Raster in einer Sammelzelle: Peter, 06.09.2026: „einfach nicht ordentlich formatiert". */
.pmTab tr.pmHo td{ padding:7px 20px; background:var(--cbKarte2); border-bottom:1px solid var(--cbLinie2); font-size:12.5px; color:var(--cbSoft); }
.pmTab tr.pmHo td:first-child{ padding-left:44px; color:var(--cbInk); font-weight:500; }
.pmTab tr.pmHo td .k{ color:var(--cbMut); }
.pmTab tr.pmHo.pmLetzte td{ border-bottom:1px solid var(--cbLinie); }
@keyframes pmEin{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
.pmTab tr.pmHo.pmNeu td{ animation:pmEin .22s ease both; }
/* Pillen wie in der CBAM-Liste; als Knopf, wo sie einen Vermerk schalten */
.pmPille{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; border:0; font-family:inherit; cursor:default; }
.pmPille::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pmPille.b{ background:var(--cbPillB); color:var(--cbPillBt); }
.pmPille.a{ background:var(--cbPillA); color:var(--cbPillAt); }
.pmPille.g{ background:var(--cbPillG); color:var(--cbPillGt); }
.pmPille.ok{ background:var(--cbGruenT); color:var(--cbGruenI); }
.pmPille.r{ background:#fee2e2; color:#b91c1c; }
html[data-theme=dark] .pmPille.r{ background:rgba(239,68,68,.16); color:#ff8a8a; }
button.pmPille{ cursor:pointer; }
button.pmPille:hover{ filter:brightness(.96); }
html[data-theme=dark] button.pmPille:hover{ filter:brightness(1.15); }
button.pmPille:focus-visible{ outline:2px solid var(--cbBlau); outline-offset:2px; }
.pmHinweis,.pmInfo{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--cbMut); line-height:1.55; padding:12px 20px 16px; }
.pmInfo{ padding-top:0; padding-bottom:12px; }
.pmHinweis svg,.pmInfo svg{ width:17px; height:17px; flex:0 0 auto; margin-top:1px; }
.pmFelder{ display:grid; gap:10px; padding:0 20px 12px; }
.pmFeld label{ display:block; font-size:11.5px; font-weight:600; color:var(--cbMut); letter-spacing:.02em; margin-bottom:5px; text-transform:uppercase; }
.pmWert{ height:34px; border:1px solid var(--cbLinie); border-radius:9px; background:var(--cbKarte2); padding:0 12px; display:flex; align-items:center; font-size:14px; color:var(--cbInk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pmFristen{ display:grid; gap:6px; padding:0 20px 12px; }
.pmFrist{ display:grid; grid-template-columns:104px 78px minmax(0,1fr); align-items:center; gap:10px; padding:6px 12px; border:1px solid var(--cbLinie); border-radius:10px; background:var(--cbKarte2); font-size:13px; }
.pmFrist .d{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--cbInk); }
.pmFrist .w{ font-weight:600; font-size:12.5px; line-height:1.25; min-width:0; color:var(--cbInk); overflow-wrap:anywhere; }
.pmFrist .w small{ display:block; color:var(--cbMut); font-weight:400; font-size:12px; margin-top:1px; }
.pmKnoepfe{ display:grid; gap:6px; padding:0 20px 14px; }
.pmKnoepfe .cbBtnP,.pmKnoepfe .cbBtnS{ justify-content:center; width:100%; height:34px; }
.pmKnoepfe .cbBtnP svg,.pmKnoepfe .cbBtnS svg{ width:18px; height:18px; }
.pmSeite .cbBtnS.pmKlein{ height:32px; font-size:13px; padding:0 11px; }
/* Stück je verknüpfter Bestellung in der Akte (leer = Bestellmenge) */
.packLinkStk{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; font-size:12px; color:var(--mut); margin-left:auto; }
.packLinkStk input.ctl{ width:84px; height:30px; padding:0 8px; font-size:13px; text-align:right; }
.packLinkRow .when{ margin-left:0; }
/* Kopfleisten-Knopf grün — so stand er in Peters freigegebenem Mockup */
/* ⚠️ Gewicht: index.html färbt Kopfknöpfe mit `#appShell header .btn.s:not(.p):not(.d)` (1 ID, 4 Klassen).
   Ohne die beiden :not() hier blieb der Knopf weiß (gemessen 06.09.2026). */
#appShell header .btn.s.packMeldBtn:not(.p):not(.d){ background:#15803d; border-color:#15803d; color:#fff; }
#appShell header .btn.s.packMeldBtn:hover:not(.p):not(.d){ background:#166534; border-color:#166534; color:#fff; }
html[data-theme=dark] #appShell header .btn.s.packMeldBtn:not(.p):not(.d){ background:#16a34a; border-color:#16a34a; color:#fff; }
html[data-theme=dark] #appShell header .btn.s.packMeldBtn:hover:not(.p):not(.d){ background:#15803d; border-color:#15803d; color:#fff; }
/* Fenster: Angaben zur Meldung, Bestellungen ohne Akte — Gerüst wie die anderen Masken */
#mPackMeldSet .dlg.pmSetDlg{ width:min(680px,95vw); max-width:none; padding:0; display:flex; flex-direction:column; overflow:hidden; border-radius:16px; }
.pmSetBody{ padding:6px 24px 18px; }
#mPackMeldOhne .dlg.pmOhneDlg{ width:min(900px,95vw); max-width:none; padding:0; display:flex; flex-direction:column; height:clamp(420px,80vh,760px); overflow:hidden; border-radius:16px; }
.pmOhneBody{ flex:1; min-height:0; overflow:auto; padding:12px 24px; }
.pmOhneZeile{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 130px 90px 20px; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--bd); border-radius:12px; background:var(--card); cursor:pointer; font-size:13.5px; }
.pmOhneZeile + .pmOhneZeile{ margin-top:8px; }
.pmOhneZeile:hover{ border-color:#2a87c8; background:rgba(42,135,200,.06); }
.pmOhneZeile:focus-visible{ outline:2px solid #2a87c8; outline-offset:2px; }
.pmOhneZeile .n{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmOhneZeile .k{ color:var(--mut); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmOhneZeile .r{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pmOhneZeile .pf{ color:var(--mut); }
.pmOhneZeile .pf svg{ width:18px; height:18px; }
@media (max-width:1180px){ .pmZwei{ grid-template-columns:1fr; } }
@media (max-width:1440px){ .pmTab th,.pmTab td{ padding:9px 14px; }
  .pmTab.pmHerl td:first-child,.pmTab.pmHerl th:first-child{ padding-left:16px; }
  .pmTab.pmHerl td,.pmTab.pmHerl th{ padding-left:10px; padding-right:10px; }
  .pmTab.pmHerl td:last-child,.pmTab.pmHerl th:last-child{ padding-right:16px; }
  /* Fristen-Zeilen in der schmaleren rechten Karte: engere Spalten, kleinere Pille */
  .pmFrist{ grid-template-columns:92px 70px minmax(0,1fr); gap:8px; padding:8px 10px; }
  .pmFrist .pmPille{ font-size:11px; padding:0 7px; }
  .pmFrist .d{ font-size:12.5px; } }
@media (max-width:900px){ .pmOhneZeile{ grid-template-columns:minmax(0,1fr) 90px 20px; } .pmOhneZeile .k{ display:none; } }
@media (prefers-reduced-motion:reduce){ html:not([data-motion="an"]) .pmTab tr.pmHz .pf{ transition:none; } html:not([data-motion="an"]) .pmTab tr.pmHo.pmNeu td{ animation:none; } }