Ablauf-Warnungen + Packungen-Spalte + Farbcodierung

- Backend: ProductOut.expired_count (Anzahl abgelaufener Chargen je Produkt).
- Einlagern: Inline-Warnung pro Charge, wenn MHD in der Vergangenheit liegt.
- Produkte-Liste: Badge "N abgelaufen"; neue Spalte "Packungen" (Bestand/Packungsgroesse,
  bei Stueck-Produkten = Bestand).
- Produktdetail: abgelaufene Chargen rot, Warnfrist gelb (Warnfrist aus Settings),
  Warnbanner bei abgelaufenem Bestand.
- Uebersicht: alle Ablaufzeilen gelb, abgelaufene rot; deutlicher Warnbanner.
- units.js: daysUntil/isExpired/expiryRowClass/amountText.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/pages/Products.jsx

@@ -60,6 +60,7 @@ export default function Products() {
                 <th>Marke</th>
                 <th>Einheit</th>
                 <th className="num">Bestand</th>
+                <th className="num">Packungen</th>
                 <th className="num">Mindest</th>
                 <th></th>
               </tr>
@@ -74,20 +75,32 @@ export default function Products() {
                         ? <img className="thumb" src={p.image_url} alt="" />
                         : <span className="thumb thumb-fallback"><Icon name="box" size={16} /></span>}
                     </td>
-                    <td className="strong">{p.name}</td>
+                    <td className="strong">
+                      {p.name}
+                      {p.expired_count > 0 && (
+                        <span className="badge danger" style={{ marginLeft: 6 }}>
+                          <Icon name="alert" size={12} />{p.expired_count} abgelaufen
+                        </span>
+                      )}
+                    </td>
                     <td className="muted">{p.brand || "–"}</td>
                     <td>{unitShort(p.base_unit)}{p.package_size ? ` · Pkg ${fmt(p.package_size)}` : ""}</td>
                     <td className="num">
                       {fmt(p.stock)} {unitShort(p.base_unit)}
                       {low && <span className="badge warn" style={{ marginLeft: 6 }}>niedrig</span>}
                     </td>
+                    <td className="num">
+                      {p.package_size
+                        ? `${fmt(p.stock / p.package_size)} Pkg`
+                        : `${fmt(p.stock)} ${unitShort(p.base_unit)}`}
+                    </td>
                     <td className="num muted">{p.min_stock != null ? fmt(p.min_stock) : "–"}</td>
                     <td className="num"><Link to={`/products/${p.id}`}>Details</Link></td>
                   </tr>
                 );
               })}
               {products.length === 0 && (
-                <tr><td colSpan={7} className="empty">Keine Produkte gefunden.</td></tr>
+                <tr><td colSpan={8} className="empty">Keine Produkte gefunden.</td></tr>
               )}
             </tbody>
           </table>