Rollback failed charge creation

This reverts commit 2bec934732.

db/README.md

@@ -15,6 +15,11 @@
 11. `db/migrations/0015_sales_order_payments.sql`
 12. `db/migrations/0016_stock_lot_forecast_history.sql`
 13. `db/migrations/0017_manufacturer_lot_traceability.sql`
+14. `db/migrations/0018_shopify_delta_sync_state.sql`
+15. `db/migrations/0019_allow_multiple_open_stock_lots.sql`
+16. `db/migrations/0020_include_stock_adjustments_in_balance.sql`
+17. `db/migrations/0021_stock_lot_activation_selection.sql`
+18. `db/migrations/0022_backfill_stock_lot_activation_selection.sql`
 
 ## Beispielausfuehrung
 

db/migrations/0018_shopify_delta_sync_state.sql

@@ -0,0 +1,16 @@
+BEGIN;
+
+CREATE TABLE shopify_delta_sync_state (
+  process_name TEXT PRIMARY KEY,
+  last_successful_cutoff TIMESTAMP NOT NULL,
+  updated_at TIMESTAMP NOT NULL DEFAULT NOW()
+);
+
+INSERT INTO shopify_delta_sync_state (process_name, last_successful_cutoff)
+SELECT
+  'erp.import-integration.shopify_delta_order_import',
+  COALESCE(MAX(shopify_created_at), NOW())
+FROM sales_order
+WHERE shopify_order_gid IS NOT NULL;
+
+COMMIT;

db/migrations/0019_allow_multiple_open_stock_lots.sql

@@ -0,0 +1,5 @@
+BEGIN;
+
+DROP INDEX IF EXISTS uq_stock_lot_one_open_per_product;
+
+COMMIT;

db/migrations/0020_include_stock_adjustments_in_balance.sql

@@ -0,0 +1,22 @@
+BEGIN;
+
+CREATE OR REPLACE VIEW v_stock_lot_balance AS
+SELECT
+  sl.id AS stock_lot_id,
+  sl.product_id,
+  COALESCE(SUM(CASE WHEN sm.move_type = 'in' THEN sm.qty ELSE 0 END), 0) AS qty_in,
+  COALESCE(SUM(CASE WHEN sm.move_type = 'out' THEN sm.qty ELSE 0 END), 0) AS qty_out,
+  COALESCE(SUM(
+    CASE
+      WHEN sm.move_type = 'in' THEN sm.qty
+      WHEN sm.move_type = 'out' THEN -sm.qty
+      WHEN sm.move_type = 'adjustment' AND sm.to_location_id IS NOT NULL AND sm.from_location_id IS NULL THEN sm.qty
+      WHEN sm.move_type = 'adjustment' AND sm.from_location_id IS NOT NULL AND sm.to_location_id IS NULL THEN -sm.qty
+      ELSE 0
+    END
+  ), 0) AS qty_net
+FROM stock_lot sl
+LEFT JOIN stock_move sm ON sm.lot_id = sl.id
+GROUP BY sl.id, sl.product_id;
+
+COMMIT;

db/migrations/0021_stock_lot_activation_selection.sql

@@ -0,0 +1,119 @@
+BEGIN;
+
+ALTER TABLE stock_lot
+  ADD COLUMN IF NOT EXISTS next_active BOOLEAN NOT NULL DEFAULT FALSE;
+
+CREATE UNIQUE INDEX IF NOT EXISTS uq_stock_lot_one_next_active_per_product
+  ON stock_lot(product_id)
+  WHERE status = 'open' AND next_active = TRUE;
+
+CREATE OR REPLACE FUNCTION fn_auto_switch_lot_when_depleted()
+RETURNS TRIGGER
+LANGUAGE plpgsql
+AS $$
+DECLARE
+  v_product_id BIGINT;
+  v_open_lot_id BIGINT;
+  v_qualified_count INTEGER;
+  v_current_net NUMERIC;
+  v_event_key TEXT;
+BEGIN
+  SELECT product_id
+  INTO v_product_id
+  FROM stock_lot
+  WHERE id = NEW.lot_id;
+
+  IF NOT EXISTS (
+    SELECT 1 FROM stock_lot WHERE id = NEW.lot_id AND status = 'current'
+  ) THEN
+    RETURN NEW;
+  END IF;
+
+  SELECT qty_net
+  INTO v_current_net
+  FROM v_stock_lot_balance
+  WHERE stock_lot_id = NEW.lot_id;
+
+  IF COALESCE(v_current_net, 0) > 0 THEN
+    RETURN NEW;
+  END IF;
+
+  PERFORM 1
+  FROM stock_lot
+  WHERE product_id = v_product_id
+  FOR UPDATE;
+
+  IF NOT EXISTS (
+    SELECT 1 FROM stock_lot WHERE id = NEW.lot_id AND status = 'current'
+  ) THEN
+    RETURN NEW;
+  END IF;
+
+  SELECT sl.id
+  INTO v_open_lot_id
+  FROM stock_lot sl
+  INNER JOIN v_stock_lot_balance v ON v.stock_lot_id = sl.id
+  WHERE sl.product_id = v_product_id
+    AND sl.status = 'open'
+    AND sl.next_active = TRUE
+    AND NULLIF(TRIM(sl.lot_number), '') IS NOT NULL
+    AND sl.manufacturer_party_id IS NOT NULL
+    AND NULLIF(TRIM(sl.manufacturer_lot_number), '') IS NOT NULL
+    AND sl.mfg_date IS NOT NULL
+    AND sl.expiry_date IS NOT NULL
+    AND sl.purchase_date IS NOT NULL
+    AND v.qty_net > 0
+  LIMIT 1;
+
+  IF v_open_lot_id IS NULL THEN
+    SELECT COUNT(*), MIN(sl.id)
+    INTO v_qualified_count, v_open_lot_id
+    FROM stock_lot sl
+    INNER JOIN v_stock_lot_balance v ON v.stock_lot_id = sl.id
+    WHERE sl.product_id = v_product_id
+      AND sl.status = 'open'
+      AND NULLIF(TRIM(sl.lot_number), '') IS NOT NULL
+      AND sl.manufacturer_party_id IS NOT NULL
+      AND NULLIF(TRIM(sl.manufacturer_lot_number), '') IS NOT NULL
+      AND sl.mfg_date IS NOT NULL
+      AND sl.expiry_date IS NOT NULL
+      AND sl.purchase_date IS NOT NULL
+      AND v.qty_net > 0;
+
+    IF v_qualified_count <> 1 THEN
+      RETURN NEW;
+    END IF;
+
+    UPDATE stock_lot
+    SET next_active = TRUE, updated_at = NOW()
+    WHERE id = v_open_lot_id;
+  END IF;
+
+  UPDATE stock_lot
+  SET status = 'closed', updated_at = NOW()
+  WHERE id = NEW.lot_id;
+
+  UPDATE stock_lot
+  SET status = 'current', next_active = FALSE, updated_at = NOW()
+  WHERE id = v_open_lot_id;
+
+  v_event_key := format('lot.auto_switched:%s:%s', v_product_id, txid_current());
+
+  PERFORM fn_enqueue_event(
+    'lot.auto_switched',
+    v_event_key,
+    'stock_lot',
+    NEW.lot_id::TEXT,
+    jsonb_build_object(
+      'productId', v_product_id,
+      'closedLotId', NEW.lot_id,
+      'newCurrentLotId', v_open_lot_id,
+      'occurredAt', NOW()
+    )
+  );
+
+  RETURN NEW;
+END;
+$$;
+
+COMMIT;

db/migrations/0022_backfill_stock_lot_activation_selection.sql

@@ -0,0 +1,25 @@
+BEGIN;
+
+WITH qualified AS (
+  SELECT
+    sl.id,
+    sl.product_id,
+    COUNT(*) OVER (PARTITION BY sl.product_id) AS qualified_count
+  FROM stock_lot sl
+  INNER JOIN v_stock_lot_balance v ON v.stock_lot_id = sl.id
+  WHERE sl.status = 'open'
+    AND NULLIF(TRIM(sl.lot_number), '') IS NOT NULL
+    AND sl.manufacturer_party_id IS NOT NULL
+    AND NULLIF(TRIM(sl.manufacturer_lot_number), '') IS NOT NULL
+    AND sl.mfg_date IS NOT NULL
+    AND sl.expiry_date IS NOT NULL
+    AND sl.purchase_date IS NOT NULL
+    AND v.qty_net > 0
+)
+UPDATE stock_lot sl
+SET next_active = TRUE, updated_at = NOW()
+FROM qualified q
+WHERE sl.id = q.id
+  AND q.qualified_count = 1;
+
+COMMIT;

docs/modules/erp/import-integration/processes/main/erp.import-integration.shopify_delta_order_import.md

@@ -8,18 +8,19 @@ Read-only-Abgleich von Shopify-Bestellungen nach dem ERP-Stichtag und identifier
 
 ## 2. Prozess-Einbettung
 
-Manuell startbarer Initial-Deltalauf und später wiederverwendbarer Reconciliation-Prozess im Submodul `erp/import-integration`. Er ist vom Webhook-Empfang getrennt.
+Manuell startbarer Initial-Deltalauf und täglich über den zentralen ERP-Cron gestarteter Reconciliation-Prozess im Submodul `erp/import-integration`. Er ist vom Webhook-Empfang getrennt.
 
 ## 3. Input
 
 - `cutoff_timestamp`
 - optional `dry_run`
+- beim täglichen Cron der persistierte letzte erfolgreiche Wasserstand sowie der älteste noch nicht erfolgreich verarbeitete Webhook-Eingang
 
 Es werden keine vorbereiteten Shopify-Geschäftsdaten an nachgelagerte Module übergeben.
 
 ## 4. Exakter Prozessablauf
 
-1. `cutoff_timestamp` und `dry_run` validieren.
+1. `cutoff_timestamp` und `dry_run` validieren; beim Cron den kleineren Wert aus Wasserstand und ältestem offenen Webhook-Eingang verwenden und offene Webhook-Order-GIDs zusätzlich direkt zur Recovery aufnehmen.
 2. Read-only Shopify-Bestellungen mit `createdAt` nach dem Stichtag in stabiler Reihenfolge laden.
 3. Stornierte oder vollständig erstattete Bestellungen als nicht lagerwirksam klassifizieren und nur technisch protokollieren.
 4. Für jede qualifizierte Bestellung die Shopify Order-GID idempotent gegen `sales_order.shopify_order_gid` prüfen.
@@ -42,7 +43,7 @@ Write targets:
 
 ## 5. Batch, Betriebsmodell und Einbettung
 
-Der Initiallauf verarbeitet den festen Zeitraum nach dem bestehenden ERP-Stichtag seriell. Spätere Reconciliation-Läufe nutzen denselben Prozess mit einem definierten Wasserzeichen. Keine Parallelisierung.
+Der Initiallauf verarbeitet den festen Zeitraum nach dem bestehenden ERP-Stichtag seriell. Spätere tägliche Reconciliation-Läufe nutzen den persistierten Wasserstand und ziehen offene oder fehlgeschlagene Webhook-Eingänge sowohl über den Prüfbereich als auch über ihre stabile Order-GID wieder in die Verarbeitung. Ein technisches Event wird erst nach erfolgreicher Projektion als verarbeitet markiert. Der Wasserstand wird nur nach einem vollständig erfolgreichen Lauf fortgeschrieben. Keine Parallelisierung.
 
 ## 6. Output
 

docs/modules/erp/lager/processes/main/erp.lager.stock_lot_forecast_refresh.md

@@ -4,7 +4,7 @@ Status: Verbindliche Prozess-Spezifikation
 
 ## 1. Zweck
 
-Tägliche Berechnung und Speicherung des voraussichtlichen Leer-Datums jeder aktuellen Charge aktiver Produkte.
+Tägliche Berechnung und Speicherung des voraussichtlichen Leer-Datums der aktuellen Charge und – sofern vorhanden – der qualifizierten, als nächste Charge markierten offenen Charge aktiver Produkte.
 
 ## 2. Prozess-Einbettung
 
@@ -13,18 +13,18 @@ Direkt ausgeführter Lager-Prozess mit zwei Triggern: synchron nach jeder erfolg
 ## 3. Input
 
 - optional eine einzelne `product_id` bei synchronem Verkaufstrigger
-- aktive Produkte, aktuelle Chargen, physischer Chargenbestand und gültige Verkaufsallokationen aus dem eigenen Datenbestand
+- aktive Produkte, aktuelle Charge, qualifizierte als nächste Charge markierte offene Charge, physische Chargenbestände und gültige Verkaufsallokationen aus dem eigenen Datenbestand
 
 ## 4. Exakter Prozessablauf
 
 1. Bei einem Verkaufstrigger die betroffenen Produkt-IDs aus der erfolgreichen Allokation übernehmen; beim Cron-Trigger alle aktiven Produkte bestimmen.
-2. Aktive Produkte und ihre aktuelle Charge aus `product`, `stock_lot` und `v_stock_lot_balance` laden.
+2. Aktive Produkte, ihre aktuelle Charge und die qualifizierte, als nächste Charge markierte offene Charge aus `product`, `stock_lot` und `v_stock_lot_balance` laden. Für jede Charge wird nur ihr eigener positiver Nettobestand berücksichtigt.
 3. Verkaufsallokationen der letzten 365 Tage aus `sales_order_line_lot_allocation`, `sales_order_line` und `sales_order` laden.
 4. `allocated`- und `reserved`-Mengen nach Bestell- beziehungsweise OTC-Verkaufsdatum je Produkt und Kalendertag aggregieren.
 5. Stornierte Auftrags- und Positionsmengen aus der Nachfrage herausrechnen.
 6. Den gewichteten Tagesabsatz mit einer Halbwertszeit von 60 Tagen berechnen.
-7. Für jede aktuelle Charge das Leer-Datum aus physischem Bestand und gewichteter Nachfrage berechnen.
+7. Das Leer-Datum der aktuellen Charge aus ihrem physischen Bestand und der gewichteten Nachfrage berechnen. Das Leer-Datum der nächsten Charge wird mit derselben Nachfrage ab dem Leer-Datum der aktuellen Charge weitergerechnet; bei bereits leerer aktueller Charge beginnt es am aktuellen Datum.
-8. Jede erfolgreiche Berechnung in `stock_lot_forecast_history` speichern und den aktuellen Snapshot in `stock_lot` aktualisieren.
+8. Jede erfolgreiche Berechnung je Charge in `stock_lot_forecast_history` speichern und den jeweiligen Snapshot in `stock_lot` aktualisieren.
 9. Im Cron Fehler einzelner Produkte sammeln und mit den übrigen Produkten fortfahren.
 
 ## 5. Batch, Betriebsmodell und Einbettung
@@ -37,7 +37,8 @@ Ein normalisiertes JSON-Ergebnis mit Gesamtzahl, erfolgreich verarbeiteten Produ
 
 ## 7. Erfolgskriterien
 
-- Jede aktuelle Charge erhält täglich einen aktuellen Prognosesnapshot.
+- Jede aktuelle Charge erhält täglich einen Prognosesnapshot nur für ihren eigenen Bestand.
+- Eine qualifizierte, als nächste Charge markierte offene Charge erhält einen separaten Prognosesnapshot nur für ihren eigenen Bestand.
 - Verkäufe ohne Bestand über virtuelle `reserved`-Allokationen beeinflussen die Nachfrage.
 - Die vollständige Berechnungshistorie bleibt erhalten.
 - Ein einzelner Produktfehler verhindert keine weiteren Berechnungen.

docs/styleguide/components/interactive-elements.html

@@ -26,6 +26,10 @@
       <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
         Link-Button aktiv
       </button>
+
+      <button class="sg-interaction-element sg-button sg-button--warning" type="button" data-component="button" data-component-variant="warning">
+        Link Button Warning
+      </button>
     </div>
   </section>
 
@@ -843,7 +847,28 @@
   </section>
 
   <script src="../scripts/help-icon-overlays.js"></script>
+  <section id="component-file-input">
+    <p class="sg-preview-label">Component: File Input</p>
+      <div class="sg-form-preview-area">
+      <div class="sg-file-input" data-component="file-input">
+        <div class="sg-file-input__row sg-labeled-input-row">
+          <label class="sg-label" for="component-file-input-control">Datei auswählen</label>
+          <input class="sg-file-input__control" id="component-file-input-control" type="file" multiple>
+          <button class="sg-interaction-element sg-button sg-button--active sg-file-input__trigger" type="button">Dateien auswählen</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <script>
+    document.querySelectorAll('[data-component="file-input"]').forEach((fileInput) => {
+      const input = fileInput.querySelector('.sg-file-input__control');
+      const trigger = fileInput.querySelector('.sg-file-input__trigger');
+      if (input && trigger) {
+        trigger.addEventListener('click', () => input.click());
+      }
+    });
+
     document.querySelectorAll('.sg-mode-toggle:not(.sg-activation-mode-toggle)').forEach((toggle) => {
       toggle.addEventListener('click', () => {
         const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';

docs/styleguide/foundations.html

@@ -158,6 +158,8 @@
         <tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
         <tr><td>email-body-max-width</td><td>600px</td><td>Maximale Breite des Inhaltsbereichs von E-Mail-Templates innerhalb des E-Mail-Viewports.</td></tr>
         <tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
+        <tr><td>scrollable-card-width</td><td>600px</td><td>Standardbreite der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden.</td></tr>
+        <tr><td>scrollable-card-height</td><td>600px</td><td>Standardhöhe der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden.</td></tr>
         <tr><td>content-card-margin-top-desktop</td><td>100px</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
         <tr><td>content-card-margin-top-mobile</td><td>1rem</td><td>Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large.</td></tr>
         <tr><td>notification-card-width</td><td>50%</td><td>Breite der Notification Card relativ zum übergeordneten Layout.</td></tr>

docs/styleguide/index.html

@@ -43,6 +43,7 @@
         <li><a href="./patterns/portal-header.html">Portal Header</a></li>
         <li><a href="./patterns/options-row.html">Options Row</a></li>
         <li><a href="./patterns/object-card.html">Object Card</a></li>
+        <li><a href="./patterns/scrollable-card.html">Scrollable Card</a></li>
         <li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
         <li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
         <li><a href="./patterns/left-navigation.html">Left Navigation</a></li>
@@ -50,6 +51,7 @@
         <li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
         <li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
         <li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
+        <li><a href="./patterns/file-upload.html">Datei-Upload</a></li>
         <li><a href="./patterns/multiselektions-pulldown.html">Multiselektions-Pulldown</a></li>
         <li><a href="./patterns/text-layouts.html">Text Layouts</a></li>
         <li><a href="./patterns/delete-confirmation-overlay.html">Overlay Card</a></li>

docs/styleguide/patterns/file-upload.html

@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Pattern Datei-Upload</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+  <h1 class="sg-main-heading">Pattern – Datei-Upload</h1>
+  <section id="pattern-file-upload">
+    <p class="sg-preview-label">Pattern: Datei-Upload</p>
+    <form class="sg-file-upload" data-pattern="file-upload" action="#" method="post">
+      <div class="sg-file-upload__dropzone sg-labeled-input-row" data-drag-over="false">
+        <label class="sg-label" for="file-upload-input">Datei auswählen</label>
+        <input class="sg-file-input__control" id="file-upload-input" name="documents" type="file" multiple aria-describedby="file-upload-status">
+        <button class="sg-interaction-element sg-button sg-button--active sg-file-upload__trigger" type="button">Dateien auswählen</button>
+      </div>
+      <p class="sg-body sg-file-upload__status" id="file-upload-status" aria-live="polite">Noch keine Dateien ausgewählt.</p>
+      <ul class="sg-file-upload__files" aria-label="Ausgewählte Dateien"></ul>
+      <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-file-upload__submit" type="submit" disabled aria-disabled="true">Hochladen</button>
+    </form>
+  </section>
+  <script>
+    (() => {
+      const upload = document.querySelector('[data-pattern="file-upload"]');
+      if (!upload) return;
+      const input = upload.querySelector('#file-upload-input');
+      const dropzone = upload.querySelector('.sg-file-upload__dropzone');
+      const trigger = upload.querySelector('.sg-file-upload__trigger');
+      const filesList = upload.querySelector('.sg-file-upload__files');
+      const status = upload.querySelector('.sg-file-upload__status');
+      const submit = upload.querySelector('[type="submit"]');
+      let selectedFiles = [];
+      const formatSize = (bytes) => bytes < 1024 * 1024 ? `${Math.max(1, Math.round(bytes / 1024))} KB` : `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+      const render = () => {
+        filesList.innerHTML = '';
+        selectedFiles.forEach((file, index) => {
+          const item = document.createElement('li');
+          item.className = 'sg-file-upload__file';
+          const name = document.createElement('span');
+          name.className = 'sg-file-upload__file-name';
+          name.textContent = file.name;
+          const meta = document.createElement('span');
+          meta.className = 'sg-file-upload__file-meta';
+          meta.textContent = ` · ${formatSize(file.size)}`;
+          name.append(meta);
+          const remove = document.createElement('button');
+          remove.className = 'sg-interaction-element sg-button sg-button--active sg-file-upload__remove';
+          remove.type = 'button';
+          remove.textContent = 'Entfernen';
+          remove.addEventListener('click', () => { selectedFiles.splice(index, 1); render(); });
+          item.append(name, remove);
+          filesList.append(item);
+        });
+        const count = selectedFiles.length;
+        status.textContent = count === 0 ? 'Noch keine Dateien ausgewählt.' : `${count} Datei${count === 1 ? '' : 'en'} ausgewählt.`;
+        submit.disabled = count === 0;
+        submit.setAttribute('aria-disabled', String(count === 0));
+        submit.classList.toggle('sg-button--process-inactive', count === 0);
+      };
+      trigger.addEventListener('click', () => input.click());
+      input.addEventListener('change', () => { selectedFiles = [...selectedFiles, ...Array.from(input.files)]; input.value = ''; render(); });
+      ['dragenter', 'dragover'].forEach((eventName) => dropzone.addEventListener(eventName, (event) => { event.preventDefault(); dropzone.dataset.dragOver = 'true'; }));
+      ['dragleave', 'drop'].forEach((eventName) => dropzone.addEventListener(eventName, (event) => { event.preventDefault(); dropzone.dataset.dragOver = 'false'; }));
+      dropzone.addEventListener('drop', (event) => { selectedFiles = [...selectedFiles, ...Array.from(event.dataTransfer.files)]; render(); });
+      render();
+    })();
+  </script>
+</body>
+</html>

docs/styleguide/patterns/scrollable-card.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Pattern Scrollable Card</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Pattern – Scrollable Card</h1>
+
+  <section id="pattern-scrollable-card">
+    <p class="sg-preview-label">Pattern: Scrollable Card</p>
+    <p class="sg-body">Die Scrollable Card besitzt eine fixe Breite und Höhe. Header und Aktionsbereich bleiben sichtbar; ausschließlich der Inhaltsbereich ist scrollbar. Das Pattern ist unabhängig von Overlay-Patterns und kann bei Bedarf von diesen verwendet werden.</p>
+
+    <article class="sg-card sg-scrollable-card" data-pattern="scrollable-card" aria-label="Scrollable Card">
+      <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-scrollable-card__header" data-pattern-part="scrollable-card-header">
+        <div class="sg-strong">Scrollable Card</div>
+      </header>
+
+      <div class="sg-card-segment sg-card-segment--body sg-scrollable-card__content" data-pattern-part="scrollable-card-content" tabindex="0" aria-label="Scrollbarer Karteninhalt">
+        <p class="sg-body">Der Karteninhalt bleibt innerhalb der definierten Kartenhöhe. Bei längeren Inhalten entsteht hier ein eigener vertikaler Scrollbereich, während Titel und Aktionen sichtbar bleiben.</p>
+        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, turpis vel porttitor cursus, nibh justo feugiat sem, sit amet egestas lorem arcu sed augue.</p>
+        <p class="sg-body">Donec sed lorem in urna sagittis aliquet. Suspendisse potenti. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
+        <p class="sg-body">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.</p>
+        <p class="sg-body">Zusätzlicher Inhalt zur Demonstration des unabhängigen Scrollbereichs innerhalb der Card.</p>
+        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
+        <p class="sg-body">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p class="sg-body">Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.</p>
+        <p class="sg-body">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.</p>
+        <p class="sg-body">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+        <p class="sg-body">Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Vestibulum ligula porta felis euismod semper.</p>
+        <p class="sg-body">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <p class="sg-body">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod.</p>
+        <p class="sg-body">Morbi risus porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.</p>
+        <p class="sg-body">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
+        <p class="sg-body">Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p class="sg-body">Der untere Aktionsbereich bleibt auch am Ende des Scrollvorgangs an seiner Position sichtbar.</p>
+      </div>
+
+      <footer class="sg-card-segment sg-card-segment--body sg-scrollable-card__actions-segment" data-pattern-part="scrollable-card-actions">
+        <div class="sg-scrollable-card__actions">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button">Abbrechen</button>
+          <button class="sg-interaction-element sg-button sg-button--active" type="button">Speichern</button>
+        </div>
+      </footer>
+    </article>
+  </section>
+
+</body>
+</html>

docs/styleguide/semantic-tokens-patterns.html

@@ -63,6 +63,12 @@
       <tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
     </tbody></table>
 
+    <h3 class="sg-sub-heading sg-section-h3">Scrollable Card</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>layout-scrollable-card-width</td><td>dimension-scrollable-card-width</td><td>Fixe Breite der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden.</td></tr>
+      <tr><td>layout-scrollable-card-height</td><td>dimension-scrollable-card-height</td><td>Fixe Höhe der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden.</td></tr>
+    </tbody></table>
+
     <h3 class="sg-sub-heading sg-section-h3">Object Group Card</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
       <tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der einzelnen Karten im Pattern Object Group Card.</td></tr>
@@ -142,6 +148,14 @@
       <tr><td>layout-delete-confirmation-target-dim-opacity</td><td>opacity-delete-confirmation-target-dim</td><td>Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt.</td></tr>
       <tr><td>layer-delete-confirmation-overlay</td><td>dimension-layer-delete-confirmation-overlay</td><td>Z-Index-Layer des schwebenden Bestätigungsfensters.</td></tr>
     </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Datei-Upload</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>surface-file-upload-dropzone</td><td>surface-form-preview</td><td>Hintergrundfläche des auswählbaren Upload-Bereichs.</td></tr>
+      <tr><td>surface-file-upload-file-item</td><td>surface-control-default</td><td>Hintergrundfläche eines Eintrags in der Dateiliste.</td></tr>
+      <tr><td>text-file-upload-meta</td><td>text-control-disabled</td><td>Textfarbe für Dateigröße und ergänzende Dateimetadaten.</td></tr>
+      <tr><td>text-file-upload-error</td><td>color-signal-red</td><td>Textfarbe für Validierungs- und Upload-Fehlermeldungen.</td></tr>
+    </tbody></table>
   </section>
 
 </body>

docs/styleguide/styleguide.css

@@ -2,6 +2,7 @@
 @import "./styles/02-base.css";
 @import "./styles/03-typography-helpers.css";
 @import "./styles/10-components-interactive-elements.css";
+@import "./styles/47-patterns-file-upload.css";
 @import "./styles/20-patterns-portal-header.css";
 @import "./styles/21-patterns-options-row.css";
 @import "./styles/22-patterns-object-card.css";
@@ -26,3 +27,4 @@
 @import "./styles/43-components-typography.css";
 @import "./styles/44-components-public-page-components.css";
 @import "./styles/45-patterns-public-page-patterns.css";
+@import "./styles/46-patterns-scrollable-card.css";

docs/styleguide/styles/01-foundations.css

@@ -175,6 +175,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-scrollable-card-width: var(--dimension-scrollable-card-width);
+  --layout-scrollable-card-height: var(--dimension-scrollable-card-height);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
@@ -287,6 +289,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-scrollable-card-width: 600px;
+  --dimension-scrollable-card-height: 600px;
   --dimension-content-card-margin-top-desktop: 100px;
   --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;

docs/styleguide/styles/10-components-interactive-elements.css

@@ -139,6 +139,13 @@
       color: var(--text-control-default);
     }
 
+    .sg-button--warning {
+      --surface-button-warning: var(--color-signal-red);
+      --text-button-warning: var(--color-font-light);
+      background: var(--surface-button-warning);
+      color: var(--text-button-warning);
+    }
+
     .sg-button--process {
       background: var(--surface-button-process);
       color: var(--text-button-process);
@@ -1578,3 +1585,52 @@
       color: var(--text-hyperlink);
       text-decoration: none;
     }
+
+/* Component: File Input */
+.sg-file-input {
+  width: 100%;
+}
+
+.sg-file-input__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  width: 100%;
+}
+
+.sg-file-input__control {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.sg-file-input:focus-within .sg-file-input__trigger {
+  outline: 2px solid var(--text-hyperlink);
+  outline-offset: 2px;
+}
+
+.sg-file-input__trigger {
+  align-self: flex-start;
+}
+
+@media (max-width: 48rem) {
+  .sg-file-input__row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+.sg-file-input--disabled {
+  opacity: var(--disabled-opacity);
+}
+
+.sg-file-input--disabled .sg-file-input__trigger {
+  cursor: not-allowed;
+}

docs/styleguide/styles/46-patterns-scrollable-card.css

@@ -0,0 +1,34 @@
+/* ========================================================= */
+/* Patterns: Scrollable Card                                 */
+/* ========================================================= */
+
+.sg-scrollable-card {
+  display: flex;
+  flex-direction: column;
+  width: var(--layout-scrollable-card-width);
+  max-width: 100%;
+  height: var(--layout-scrollable-card-height);
+  box-sizing: border-box;
+}
+
+.sg-scrollable-card__header,
+.sg-scrollable-card__actions-segment {
+  flex: 0 0 auto;
+}
+
+.sg-scrollable-card__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sg-scrollable-card__actions {
+  display: flex;
+  gap: var(--spacing-small);
+  width: 100%;
+}
+
+.sg-scrollable-card__actions > .sg-button {
+  flex: 1 1 0;
+  min-width: 0;
+}

docs/styleguide/styles/47-patterns-file-upload.css

@@ -0,0 +1,91 @@
+/* ========================================================= */
+/* Patterns: Datei-Upload                                   */
+/* ========================================================= */
+
+.sg-file-upload {
+  --surface-file-upload-dropzone: var(--surface-form-preview);
+  --surface-file-upload-file-item: var(--surface-control-default);
+  --text-file-upload-meta: var(--text-control-disabled);
+  --text-file-upload-error: var(--color-signal-red);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  width: 100%;
+  max-width: var(--layout-input-field-max-width);
+}
+
+.sg-file-upload__status,
+.sg-file-upload__file-meta {
+  margin: var(--spacing-small) 0 0;
+}
+
+.sg-file-upload__dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  width: 100%;
+  padding: var(--spacing-large);
+  background: var(--surface-file-upload-dropzone);
+  border: 1px dashed var(--surface-button-active);
+  border-radius: var(--radius-interaction);
+}
+
+.sg-file-upload__dropzone[data-drag-over="true"] {
+  outline: 2px solid var(--text-hyperlink);
+  outline-offset: 2px;
+}
+
+.sg-file-upload__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sg-file-upload__file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  padding: var(--spacing-small) var(--spacing-large);
+  color: var(--text-control-default);
+  background: var(--surface-file-upload-file-item);
+  border-radius: var(--radius-interaction);
+}
+
+.sg-file-upload__file-name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sg-file-upload__file-meta {
+  color: var(--text-file-upload-meta);
+}
+
+.sg-file-upload__remove {
+  flex: 0 0 auto;
+}
+
+.sg-file-upload__submit {
+  align-self: flex-end;
+}
+
+.sg-file-upload__error {
+  color: var(--text-file-upload-error);
+}
+
+@media (max-width: 48rem) {
+  .sg-file-upload__dropzone {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .sg-file-upload__file {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--spacing-small);
+  }
+}

modules/erp/artikel-mapping/service.php

@@ -129,10 +129,20 @@ function sellable_item_exists(PDO $pdo, int $sellableItemId): bool
 function find_sellable_item_for_product(PDO $pdo, int $productId): ?int
 {
     $stmt = $pdo->prepare(
-        'SELECT sellable_item_id
+        'SELECT sic.sellable_item_id
-         FROM sellable_item_component
+         FROM sellable_item_component sic
-         WHERE product_id = :product_id
+         INNER JOIN sellable_item si ON si.id = sic.sellable_item_id
-         ORDER BY id
+         INNER JOIN product p ON p.id = sic.product_id
+         WHERE sic.product_id = :product_id
+           AND sic.qty_per_item = 1
+           AND si.item_code = p.sku || \'.01\'
+           AND NOT EXISTS (
+               SELECT 1
+               FROM sellable_item_component other_sic
+               WHERE other_sic.sellable_item_id = sic.sellable_item_id
+                 AND other_sic.id <> sic.id
+           )
+         ORDER BY sic.id
          LIMIT 1'
     );
     $stmt->execute([':product_id' => $productId]);

modules/erp/direktverkauf/api/otc-order.php

@@ -30,7 +30,7 @@ if (!is_array($data)) {
     json_response(400, ['ok' => false, 'error' => 'JSON object expected']);
 }
 
-$required = ['products', 'totalPrice', 'orderDate', 'payments', 'billing'];
+$required = ['products', 'orderDate', 'payments', 'billing'];
 foreach ($required as $field) {
     if (!array_key_exists($field, $data)) {
         json_response(422, ['ok' => false, 'error' => "Missing field: {$field}"]);
@@ -38,7 +38,6 @@ foreach ($required as $field) {
 }
 
 $products = $data['products'];
-$totalPrice = parse_number($data['totalPrice']);
 $orderDate = trim((string) $data['orderDate']);
 $payments = $data['payments'];
 $billing = is_array($data['billing']) ? $data['billing'] : [];
@@ -51,10 +50,6 @@ if (!is_array($payments) || count($payments) === 0) {
     json_response(422, ['ok' => false, 'error' => 'No payment methods specified']);
 }
 
-if ($totalPrice === null || $totalPrice <= 0) {
-    json_response(422, ['ok' => false, 'error' => 'Invalid total price']);
-}
-
 $orderDateTime = DateTimeImmutable::createFromFormat('!Y-m-d', $orderDate);
 $orderDateErrors = DateTimeImmutable::getLastErrors();
 if ($orderDateTime === false) {
@@ -109,10 +104,12 @@ foreach ($payments as $payment) {
     $paymentTotal = round($paymentTotal + (float) $amount, 2);
 }
 
-if (abs($paymentTotal - (float) $totalPrice) > 0.005) {
+if ($paymentTotal <= 0) {
-    json_response(422, ['ok' => false, 'error' => 'Payment amounts must equal total price']);
+    json_response(422, ['ok' => false, 'error' => 'Payment total must be greater than zero']);
 }
 
+$totalPrice = $paymentTotal;
+
 try {
     $env = expand_env_values(parse_env_file(__DIR__ . '/../../../../.env'));
     $pdo = connect_database($env);

modules/erp/import-integration/shopify-delta-run.php

@@ -33,6 +33,77 @@ function shopify_delta_start_run(PDO $pdo, string $cutoff, bool $dryRun): int
     return (int) $stmt->fetchColumn();
 }
 
+function shopify_delta_reconciliation_cutoff(PDO $pdo): string
+{
+    $stateStmt = $pdo->prepare(
+        'SELECT last_successful_cutoff
+         FROM shopify_delta_sync_state
+         WHERE process_name = :process_name'
+    );
+    $stateStmt->execute([':process_name' => 'erp.import-integration.shopify_delta_order_import']);
+    $state = $stateStmt->fetchColumn();
+    if ($state === false || trim((string) $state) === '') {
+        throw new RuntimeException('Shopify-Delta-Wasserstand fehlt');
+    }
+
+    $pendingStmt = $pdo->query(
+        "SELECT MIN(received_at)
+         FROM shopify_webhook_event
+         WHERE status IN ('received', 'processing', 'failed')
+           AND shopify_order_gid IS NOT NULL"
+    );
+    $pending = $pendingStmt->fetchColumn();
+    if ($pending === false || $pending === null) {
+        return (string) $state;
+    }
+
+    $stateDate = new DateTimeImmutable((string) $state);
+    $pendingDate = new DateTimeImmutable((string) $pending);
+    return ($pendingDate < $stateDate ? $pendingDate : $stateDate)->format(DATE_ATOM);
+}
+
+function shopify_delta_load_pending_order_gids(PDO $pdo): array
+{
+    $stmt = $pdo->query(
+        "SELECT DISTINCT shopify_order_gid
+         FROM shopify_webhook_event
+         WHERE status IN ('received', 'processing', 'failed')
+           AND shopify_order_gid IS NOT NULL
+         ORDER BY shopify_order_gid"
+    );
+    return array_values(array_filter(array_map(
+        static fn (mixed $value): string => trim((string) $value),
+        $stmt->fetchAll(PDO::FETCH_COLUMN)
+    ), static fn (string $value): bool => $value !== ''));
+}
+
+function shopify_delta_mark_order_events_processed(PDO $pdo, string $orderGid): void
+{
+    $stmt = $pdo->prepare(
+        "UPDATE shopify_webhook_event
+         SET status = 'processed', processed_at = NOW(), error_code = NULL, error_message = NULL
+         WHERE shopify_order_gid = :shopify_order_gid
+           AND status IN ('received', 'processing', 'failed')"
+    );
+    $stmt->execute([':shopify_order_gid' => $orderGid]);
+}
+
+function shopify_delta_store_watermark(PDO $pdo, string $cutoff): void
+{
+    $stmt = $pdo->prepare(
+        'UPDATE shopify_delta_sync_state
+         SET last_successful_cutoff = :cutoff, updated_at = NOW()
+         WHERE process_name = :process_name'
+    );
+    $stmt->execute([
+        ':cutoff' => $cutoff,
+        ':process_name' => 'erp.import-integration.shopify_delta_order_import',
+    ]);
+    if ($stmt->rowCount() !== 1) {
+        throw new RuntimeException('Shopify-Delta-Wasserstand konnte nicht gespeichert werden');
+    }
+}
+
 function shopify_delta_finish_run(PDO $pdo, int $runId, string $status, array $result, ?Throwable $error = null): void
 {
     $stmt = $pdo->prepare(
@@ -75,7 +146,7 @@ GQL;
     return $orders;
 }
 
-function run_shopify_delta(array $env, PDO $pdo, string $cutoff, bool $dryRun): array
+function run_shopify_delta(array $env, PDO $pdo, string $cutoff, bool $dryRun, array $recoveryOrderGids = []): array
 {
     $cutoffDate = new DateTimeImmutable($cutoff);
     $searchQuery = 'created_at:>' . $cutoffDate->format('Y-m-d');
@@ -90,14 +161,31 @@ function run_shopify_delta(array $env, PDO $pdo, string $cutoff, bool $dryRun):
         'clarification_order_gids' => [],
     ];
 
+    $ordersByGid = [];
     foreach (shopify_delta_load_orders($env, $searchQuery) as $summaryOrder) {
+        $orderGid = trim((string) ($summaryOrder['id'] ?? ''));
+        if ($orderGid !== '') {
+            $ordersByGid[$orderGid] = $summaryOrder;
+        }
+    }
+    foreach ($recoveryOrderGids as $recoveryOrderGid) {
+        if (!isset($ordersByGid[$recoveryOrderGid])) {
+            $ordersByGid[$recoveryOrderGid] = shopify_load_order_by_gid($env, $recoveryOrderGid);
+        }
+    }
+
+    $recoverySet = array_fill_keys($recoveryOrderGids, true);
+    foreach ($ordersByGid as $orderGid => $summaryOrder) {
         $createdAt = new DateTimeImmutable((string) ($summaryOrder['createdAt'] ?? ''));
-        if ($createdAt <= $cutoffDate) {
+        if (!isset($recoverySet[$orderGid]) && $createdAt <= $cutoffDate) {
             continue;
         }
         $counters['checked_orders']++;
         if (($summaryOrder['cancelledAt'] ?? null) !== null || strtoupper((string) ($summaryOrder['displayFinancialStatus'] ?? '')) === 'REFUNDED') {
             $counters['skipped_cancelled_or_refunded']++;
+            if (!$dryRun) {
+                shopify_delta_mark_order_events_processed($pdo, (string) $summaryOrder['id']);
+            }
             continue;
         }
 
@@ -121,8 +209,14 @@ function run_shopify_delta(array $env, PDO $pdo, string $cutoff, bool $dryRun):
             }
             if (($result['status'] ?? '') === 'already_imported') {
                 $counters['already_imported']++;
+                if (!$dryRun && isset($recoverySet[(string) $summaryOrder['id']])) {
+                    shopify_delta_mark_order_events_processed($pdo, (string) $summaryOrder['id']);
+                }
             } else {
                 $counters['handed_off']++;
+                if (!$dryRun) {
+                    shopify_delta_mark_order_events_processed($pdo, (string) $summaryOrder['id']);
+                }
             }
         } catch (Throwable $error) {
             $counters['status'] = 'partial_success';

modules/erp/import-integration/shopify-webhook-worker.php

@@ -132,6 +132,7 @@ function shopify_webhook_worker_run(PDO $pdo, array $env, int $limit): array
     }
 }
 
+if (PHP_SAPI === 'cli' && realpath($_SERVER['SCRIPT_FILENAME'] ?? '') === __FILE__) {
     $argvLimit = 20;
     foreach ($argv as $argument) {
         if (str_starts_with($argument, '--limit=')) {
@@ -148,3 +149,4 @@ try {
         fwrite(STDERR, $error->getMessage() . PHP_EOL);
         exit(1);
     }
+}

modules/erp/lager/api/lot.php

@@ -46,6 +46,9 @@ try {
         $manufacturerPartyId = $manufacturerPartyId === null || $manufacturerPartyId === ''
             ? null
             : (int) $manufacturerPartyId;
+        $receiptQty = isset($data['receiptQty']) && $data['receiptQty'] !== '' ? (float) $data['receiptQty'] : 0.0;
+        $adjustmentQty = isset($data['adjustmentQty']) && $data['adjustmentQty'] !== '' ? (float) $data['adjustmentQty'] : 0.0;
+        $outQty = isset($data['outQty']) && $data['outQty'] !== '' ? (float) $data['outQty'] : 0.0;
         $updatedLot = update_stock_lot_traceability(
             $pdo,
             (int) ($data['lotId'] ?? 0),
@@ -54,9 +57,119 @@ try {
             isset($data['mfgDate']) ? (string) $data['mfgDate'] : null,
             isset($data['expiryDate']) ? (string) $data['expiryDate'] : null,
             isset($data['purchaseDate']) ? (string) $data['purchaseDate'] : null,
+            (string) ($currentUser['username'] ?? $currentUser['email'] ?? 'unknown'),
+            $receiptQty,
+            $adjustmentQty,
+            $outQty
+        );
+        $productId = (int) $updatedLot['product_id'];
+        if (($updatedLot['status'] ?? '') === 'open') {
+            sync_open_lot_activation_selection($pdo, $productId);
+            $updatedLot['next_active'] = is_open_lot_selected_for_activation($pdo, (int) $updatedLot['id']);
+        } else {
+            ensure_current_lot_and_reconcile_virtual_shortage(
+                $pdo,
+                $productId,
+                (string) ($currentUser['username'] ?? $currentUser['email'] ?? 'unknown'),
+                'Verrechnung nach Pflege der aktiven Charge'
+            );
+        }
+        refresh_lager_stock_lot_forecast_for_product($pdo, $productId);
+        $forecast = get_lager_product_forecast($pdo, $productId);
+        $currentLot = get_current_lot_snapshot($pdo, $productId);
+        json_response(200, ['ok' => true, 'productId' => $productId, 'lot' => $currentLot, 'balance' => [
+            'qty_net' => $currentLot['qty_net'],
+            'qty_in' => $currentLot['qty_in'],
+            'qty_out' => $currentLot['qty_out'],
+        ], 'forecast' => $forecast]);
+    }
+
+    if ($action === 'delete_open_lot') {
+        $productId = delete_open_stock_lot(
+            $pdo,
+            (int) ($data['lotId'] ?? 0),
             (string) ($currentUser['username'] ?? $currentUser['email'] ?? 'unknown')
         );
-        json_response(200, ['ok' => true, 'lot' => $updatedLot]);
+        sync_open_lot_activation_selection($pdo, $productId);
+        ensure_current_lot_and_reconcile_virtual_shortage(
+            $pdo,
+            $productId,
+            (string) ($currentUser['username'] ?? $currentUser['email'] ?? 'unknown'),
+            'Verrechnung nach Loeschung einer offenen Charge'
+        );
+        json_response(200, ['ok' => true, 'productId' => $productId, 'currentLot' => get_current_lot_snapshot($pdo, $productId), 'availableQty' => get_lager_product_available_qty($pdo, $productId)]);
+    }
+
+    if ($action === 'prepare_lot') {
+        $productId = (int) ($data['productId'] ?? 0);
+        $lotNumber = trim((string) ($data['lotNumber'] ?? ''));
+        $lotId = (int) ($data['lotId'] ?? 0);
+        $manufacturerPartyId = $data['manufacturerPartyId'] ?? null;
+        $manufacturerPartyId = $manufacturerPartyId === null || $manufacturerPartyId === '' ? null : (int) $manufacturerPartyId;
+        $manufacturerLotNumber = trim((string) ($data['manufacturerLotNumber'] ?? ''));
+        $mfgDate = trim((string) ($data['mfgDate'] ?? ''));
+        $expiryDate = trim((string) ($data['expiryDate'] ?? ''));
+        $purchaseDate = trim((string) ($data['purchaseDate'] ?? ''));
+        $receiptQty = isset($data['receiptQty']) && $data['receiptQty'] !== '' ? (float) $data['receiptQty'] : 0.0;
+        $targetQty = isset($data['targetQty']) && $data['targetQty'] !== '' ? (float) $data['targetQty'] : null;
+        $pdo->beginTransaction();
+        if ($lotId > 0) {
+            $lotStmt = $pdo->prepare(
+                "SELECT id
+                 FROM stock_lot
+                 WHERE id = :lot_id
+                   AND product_id = :product_id
+                   AND status = 'open'"
+            );
+            $lotStmt->execute([':lot_id' => $lotId, ':product_id' => $productId]);
+            if ($lotStmt->fetchColumn() === false) {
+                throw new InvalidArgumentException('Offene Charge nicht gefunden');
+            }
+        } else {
+            $lotId = create_open_lot($pdo, $productId);
+        }
+        $preparedLot = update_stock_lot_traceability(
+            $pdo,
+            $lotId,
+            $manufacturerPartyId,
+            $manufacturerLotNumber,
+            $mfgDate,
+            $expiryDate,
+            $purchaseDate,
+            (string) ($currentUser['username'] ?? $currentUser['email'] ?? 'unknown'),
+            $receiptQty,
+            0.0,
+            0.0,
+            $lotNumber,
+            $targetQty,
+            $lotNumber === ''
+        );
+        sync_open_lot_activation_selection($pdo, $productId);
+        if (promote_open_lot_when_virtual_shortage_is_current($pdo, $productId, $lotId, (string) ($currentUser['username'] ?? $currentUser['email'] ?? 'unknown'))) {
+            $preparedLot['status'] = 'current';
+            $preparedLot['next_active'] = false;
+        } else {
+            $preparedLot['next_active'] = is_open_lot_selected_for_activation($pdo, $lotId);
+        }
+        refresh_lager_stock_lot_forecast_for_product($pdo, $productId);
+        $forecast = get_lager_product_forecast($pdo, $productId);
+        $pdo->commit();
+        json_response(200, ['ok' => true, 'productId' => $productId, 'lot' => $preparedLot, 'balance' => get_stock_lot_balance($pdo, $lotId), 'availableQty' => get_lager_product_available_qty($pdo, $productId), 'forecast' => $forecast]);
+    }
+
+    if ($action === 'select_open_lot') {
+        $productId = (int) ($data['productId'] ?? 0);
+        $lotId = (int) ($data['lotId'] ?? 0);
+        select_open_lot_for_activation($pdo, $productId, $lotId);
+        ensure_current_lot_and_reconcile_virtual_shortage(
+            $pdo,
+            $productId,
+            (string) ($currentUser['username'] ?? $currentUser['email'] ?? 'unknown'),
+            'Verrechnung nach Auswahl der naechsten aktiven Charge'
+        );
+        refresh_lager_stock_lot_forecast_for_product($pdo, $productId);
+        $currentLot = get_current_lot_snapshot($pdo, $productId);
+        json_response(200, ['ok' => true, 'productId' => $productId, 'selectedLotId' => $lotId, 'currentLot' => $currentLot, 'forecast' => get_lager_product_forecast($pdo, $productId)]);
     }
 
     json_response(422, ['ok' => false, 'error' => 'Unsupported action']);
@@ -65,5 +178,19 @@ try {
 } catch (InvalidArgumentException $error) {
     json_response(422, ['ok' => false, 'error' => $error->getMessage()]);
 } catch (Throwable $error) {
-    json_response(500, ['ok' => false, 'error' => 'Internal server error: ' . $error->getMessage()]);
+    if (isset($pdo) && $pdo->inTransaction()) {
+        $pdo->rollBack();
+    }
+    try {
+        system_write_audit_log($pdo, 'lager_api', 'lager-charge.php', 'request_failed', $currentUser['username'] ?? $currentUser['email'] ?? 'unknown', [], [], [
+            'action' => $action ?? '',
+            'product_id' => $data['productId'] ?? null,
+            'lot_id' => $data['lotId'] ?? null,
+            'exception_class' => get_class($error),
+            'exception_message' => $error->getMessage(),
+        ]);
+    } catch (Throwable) {
+        error_log('lager-charge API failure audit logging failed');
+    }
+    json_response(500, ['ok' => false, 'error' => 'Interner Serverfehler']);
 }

modules/erp/lager/forecast.php

@@ -35,10 +35,25 @@ function lager_forecast_load_current_lots(PDO $pdo): array
 {
     $stmt = $pdo->query(
         "SELECT p.id AS product_id, p.sku, sl.id AS lot_id,
-                COALESCE(v.qty_net, 0) AS physical_qty
+                COALESCE(v.qty_net, 0) AS physical_qty,
+                next_sl.id AS next_lot_id,
+                COALESCE(next_v.qty_net, 0) AS next_physical_qty
          FROM product p
          LEFT JOIN stock_lot sl ON sl.product_id = p.id AND sl.status = 'current'
          LEFT JOIN v_stock_lot_balance v ON v.stock_lot_id = sl.id
+         LEFT JOIN stock_lot next_sl
+             ON next_sl.product_id = p.id
+            AND next_sl.status = 'open'
+            AND next_sl.next_active = TRUE
+            AND NULLIF(TRIM(next_sl.lot_number), '') IS NOT NULL
+            AND next_sl.manufacturer_party_id IS NOT NULL
+            AND NULLIF(TRIM(next_sl.manufacturer_lot_number), '') IS NOT NULL
+            AND next_sl.mfg_date IS NOT NULL
+            AND next_sl.expiry_date IS NOT NULL
+            AND next_sl.purchase_date IS NOT NULL
+         LEFT JOIN v_stock_lot_balance next_v
+             ON next_v.stock_lot_id = next_sl.id
+            AND next_v.qty_net > 0
          WHERE p.status = 'active'
          ORDER BY p.id"
     );
@@ -49,10 +64,25 @@ function lager_forecast_load_current_lot(PDO $pdo, int $productId): ?array
 {
     $stmt = $pdo->prepare(
         "SELECT p.id AS product_id, p.sku, sl.id AS lot_id,
-                COALESCE(v.qty_net, 0) AS physical_qty
+                COALESCE(v.qty_net, 0) AS physical_qty,
+                next_sl.id AS next_lot_id,
+                COALESCE(next_v.qty_net, 0) AS next_physical_qty
          FROM product p
          LEFT JOIN stock_lot sl ON sl.product_id = p.id AND sl.status = 'current'
          LEFT JOIN v_stock_lot_balance v ON v.stock_lot_id = sl.id
+         LEFT JOIN stock_lot next_sl
+             ON next_sl.product_id = p.id
+            AND next_sl.status = 'open'
+            AND next_sl.next_active = TRUE
+            AND NULLIF(TRIM(next_sl.lot_number), '') IS NOT NULL
+            AND next_sl.manufacturer_party_id IS NOT NULL
+            AND NULLIF(TRIM(next_sl.manufacturer_lot_number), '') IS NOT NULL
+            AND next_sl.mfg_date IS NOT NULL
+            AND next_sl.expiry_date IS NOT NULL
+            AND next_sl.purchase_date IS NOT NULL
+         LEFT JOIN v_stock_lot_balance next_v
+             ON next_v.stock_lot_id = next_sl.id
+            AND next_v.qty_net > 0
          WHERE p.status = 'active' AND p.id = :product_id
          LIMIT 1"
     );
@@ -94,7 +124,12 @@ function lager_forecast_load_daily_sales(PDO $pdo, DateTimeImmutable $asOfDate,
     return $sales;
 }
 
-function lager_forecast_calculate(DateTimeImmutable $asOfDate, float $physicalQty, array $dailySales): array
+function lager_forecast_calculate(
+    DateTimeImmutable $asOfDate,
+    float $physicalQty,
+    array $dailySales,
+    ?DateTimeImmutable $forecastStartDate = null
+): array
 {
     $lookbackDays = 365;
     $halfLifeDays = 60;
@@ -146,8 +181,9 @@ function lager_forecast_calculate(DateTimeImmutable $asOfDate, float $physicalQt
         ? 'high'
         : ($salesDays >= 10 ? 'medium' : 'low');
     $daysUntilDepleted = (int) ceil($physicalQty / $dailyDemand);
+    $forecastStartDate ??= $asOfDate;
     return [
-        'forecast_date' => $asOfDate->modify('+' . $daysUntilDepleted . ' days')->format('Y-m-d'),
+        'forecast_date' => $forecastStartDate->modify('+' . $daysUntilDepleted . ' days')->format('Y-m-d'),
         'forecast_status' => 'forecast', 'confidence' => $confidence, 'daily_demand' => $dailyDemand,
         'sales_units' => $salesUnits, 'sales_days' => $salesDays, 'observed_span_days' => $observedSpanDays,
         'lookback_days' => $lookbackDays, 'half_life_days' => $halfLifeDays,
@@ -225,6 +261,18 @@ function refresh_lager_stock_lot_forecast_for_product(PDO $pdo, int $productId):
         $dailySales[$productId] ?? []
     );
     lager_forecast_persist($pdo, $lot, $forecast, $asOfDate);
+    if ($lot['next_lot_id'] !== null && $forecast['forecast_date'] !== null) {
+        lager_forecast_persist($pdo, [
+            'lot_id' => $lot['next_lot_id'],
+            'product_id' => $productId,
+            'physical_qty' => $lot['next_physical_qty'],
+        ], lager_forecast_calculate(
+            $asOfDate,
+            (float) $lot['next_physical_qty'],
+            $dailySales[$productId] ?? [],
+            new DateTimeImmutable($forecast['forecast_date'])
+        ), $asOfDate);
+    }
 }
 
 function run_lager_stock_lot_forecast(PDO $pdo): array
@@ -250,6 +298,18 @@ function run_lager_stock_lot_forecast(PDO $pdo): array
             try {
                 $forecast = lager_forecast_calculate($asOfDate, (float) $lot['physical_qty'], $dailySales[$productId] ?? []);
                 lager_forecast_persist($pdo, $lot, $forecast, $asOfDate);
+                if ($lot['next_lot_id'] !== null && $forecast['forecast_date'] !== null) {
+                    lager_forecast_persist($pdo, [
+                        'lot_id' => $lot['next_lot_id'],
+                        'product_id' => $productId,
+                        'physical_qty' => $lot['next_physical_qty'],
+                    ], lager_forecast_calculate(
+                        $asOfDate,
+                        (float) $lot['next_physical_qty'],
+                        $dailySales[$productId] ?? [],
+                        new DateTimeImmutable($forecast['forecast_date'])
+                    ), $asOfDate);
+                }
                 $result['processed_products']++;
             } catch (Throwable $error) {
                 $result['failed_products']++;

modules/shared/auth/ui/home.php

@@ -171,8 +171,8 @@ function auth_render_bestellungen_large_table(array $bestellungenTable): string
     $html[] = '<h2 class="sg-heading-h2 sg-card-list-page-drawer__title" data-order-drawer-title>Bestellung</h2>';
     $html[] = '<button class="sg-interaction-element sg-hyperlink" type="button" data-order-drawer-close>schliessen</button>';
     $html[] = '</div>';
-    $html[] = '<div class="sg-card-list-page-drawer__content">';
+    $html[] = '<div class="sg-card-list-page-drawer__content" data-order-drawer-cards>';
-    $html[] = '<div data-order-drawer-cards><p class="sg-body" data-order-drawer-loading>Bestelldetails werden geladen …</p></div>';
+    $html[] = '<p class="sg-body" data-order-drawer-loading>Bestelldetails werden geladen …</p>';
     $html[] = '</div>';
     $html[] = '</aside>';
 
@@ -189,6 +189,30 @@ function auth_render_bestellungen_content(array $bestellungenTable): string
 
 function auth_render_lager_table(string $title, array $rows, array $columns, string $tableKey): string
 {
+    $renderForecast = static function (?string $date, string $status, ?string $expiryDate, bool $available): array {
+        if (!$available) {
+            return ['text' => '-', 'warning' => false, 'mhdWarning' => false];
+        }
+        if ($date === null || $date === '') {
+            return ['text' => 'Keine Prognose', 'warning' => false, 'mhdWarning' => false];
+        }
+        $dateObject = new DateTimeImmutable($date);
+        $text = $dateObject->format('d.m.Y');
+        if ($status === 'depleted') {
+            return ['text' => $text . ' (BESTAND ENDE)', 'warning' => true, 'mhdWarning' => false];
+        }
+        $warning = false;
+        $mhdWarning = false;
+        if ($expiryDate !== null && $expiryDate !== '') {
+            $expiryObject = new DateTimeImmutable($expiryDate);
+            $warning = $dateObject >= $expiryObject->modify('-3 months') && $dateObject <= $expiryObject;
+            $mhdWarning = $dateObject > $expiryObject;
+            if ($warning || $mhdWarning) {
+                $text .= ' (MHD: ' . $expiryObject->format('d.m.Y') . ')';
+            }
+        }
+        return ['text' => $text, 'warning' => $warning, 'mhdWarning' => $mhdWarning];
+    };
     $html = [];
     $html[] = '<article class="sg-card sg-large-table sg-large-table--lager" data-component="large-table" data-lager-table="true" data-lager-table-key="' . auth_escape_html($tableKey) . '" role="table" aria-label="' . auth_escape_html($title) . '">';
     $html[] = '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header"><div class="sg-strong">' . auth_escape_html($title) . '</div></div>';
@@ -209,39 +233,34 @@ function auth_render_lager_table(string $title, array $rows, array $columns, str
         $value = $tableKey === 'products'
             ? (string) max(0, (int) round((float) ($row['available_qty'] ?? 0)))
             : (string) ($row['item_code'] ?? '');
-        $forecastText = '';
+        $currentForecast = ['text' => '', 'warning' => false, 'mhdWarning' => false];
-        $forecastWarning = false;
+        $nextForecast = ['text' => '-', 'warning' => false, 'mhdWarning' => false];
-        $forecastMhdWarning = false;
         if ($tableKey === 'products') {
-            $forecastStatus = (string) ($row['sellout_forecast_status'] ?? 'no_demand');
+            $currentForecast = $renderForecast(
-            $forecastDate = $row['sellout_date'] ?? null;
+                $row['sellout_date'] ?? null,
-            if ($forecastDate !== null && $forecastDate !== '') {
+                (string) ($row['sellout_forecast_status'] ?? 'no_demand'),
-                $forecastDateObject = new DateTimeImmutable((string) $forecastDate);
+                $row['expiry_date'] ?? null,
-                $forecastText = $forecastDateObject->format('d.m.Y');
+                true
-                if ($forecastStatus === 'depleted') {
+            );
-                    $forecastWarning = true;
+            $nextForecast = $renderForecast(
-                    $forecastText .= ' (CHARGE ENDE)';
+                $row['next_sellout_date'] ?? null,
-                } elseif (!empty($row['expiry_date'])) {
+                (string) ($row['next_sellout_forecast_status'] ?? 'no_demand'),
-                    $expiryDate = new DateTimeImmutable((string) $row['expiry_date']);
+                $row['next_expiry_date'] ?? null,
-                    $forecastWarning = $forecastDateObject >= $expiryDate->modify('-3 months')
+                $row['next_lot_id'] !== null
-                        && $forecastDateObject <= $expiryDate;
+            );
-                    $forecastMhdWarning = $forecastDateObject > $expiryDate;
-                    if ($forecastWarning || $forecastMhdWarning) {
-                        $forecastText .= ' (MHD: ' . $expiryDate->format('d.m.Y') . ')';
-                    }
-                }
-            } else {
-                $forecastText = 'Keine Prognose';
-            }
         }
         $nameData = ' data-lager-drawer-name="' . auth_escape_html($name) . '"';
         $valueData = ' data-lager-drawer-value="' . auth_escape_html($value) . '"';
         $typeData = ' data-lager-drawer-type="' . auth_escape_html($tableKey === 'products' ? 'Produkt' : 'Artikel') . '"';
         $detailData = '';
         if ($tableKey === 'products') {
-            $detailData = ' data-lager-drawer-forecast="' . auth_escape_html($forecastText) . '"'
+            $detailData = ' data-lager-drawer-forecast="' . auth_escape_html($currentForecast['text']) . '"'
-                . ' data-lager-drawer-forecast-warning="' . ($forecastWarning ? 'true' : 'false') . '"'
+                . ' data-lager-drawer-forecast-status="' . auth_escape_html((string) ($row['sellout_forecast_status'] ?? 'no_demand')) . '"'
-                . ' data-lager-drawer-forecast-mhd-warning="' . ($forecastMhdWarning ? 'true' : 'false') . '"'
+                . ' data-lager-drawer-forecast-warning="' . ($currentForecast['warning'] ? 'true' : 'false') . '"'
+                . ' data-lager-drawer-forecast-mhd-warning="' . ($currentForecast['mhdWarning'] ? 'true' : 'false') . '"'
+                . ' data-lager-drawer-current-qty="' . auth_escape_html(auth_format_lager_quantity((float) ($row['current_qty'] ?? 0))) . '"'
+                . ' data-lager-drawer-qty-in="' . auth_escape_html(auth_format_lager_quantity((float) ($row['qty_in'] ?? 0))) . '"'
+                . ' data-lager-drawer-virtual-shortage-qty="' . auth_escape_html(auth_format_lager_quantity((float) ($row['virtual_shortage_qty'] ?? 0))) . '"'
                 . ' data-lager-drawer-lot-id="' . auth_escape_html((string) ($row['lot_id'] ?? '')) . '"'
                 . ' data-lager-drawer-lot-number="' . auth_escape_html((string) ($row['lot_number'] ?? '')) . '"'
                 . ' data-lager-drawer-manufacturer-party-id="' . auth_escape_html((string) ($row['manufacturer_party_id'] ?? '')) . '"'
@@ -251,16 +270,29 @@ function auth_render_lager_table(string $title, array $rows, array $columns, str
                 . ' data-lager-drawer-expiry-date="' . auth_escape_html((string) ($row['expiry_date'] ?? '')) . '"'
                 . ' data-lager-drawer-purchase-date="' . auth_escape_html((string) ($row['purchase_date'] ?? '')) . '"'
                 . ' data-lager-drawer-virtual-lot-number="' . auth_escape_html((string) ($row['virtual_lot_number'] ?? '')) . '"';
+            $openLot = $row['open_lots'][0] ?? [];
+            $detailData .= ' data-lager-open-lot-id="' . auth_escape_html((string) ($openLot['lot_id'] ?? '')) . '"'
+                . ' data-lager-open-lot-number="' . auth_escape_html((string) ($openLot['lot_number'] ?? '')) . '"'
+                . ' data-lager-open-manufacturer-party-id="' . auth_escape_html((string) ($openLot['manufacturer_party_id'] ?? '')) . '"'
+                . ' data-lager-open-manufacturer-lot-number="' . auth_escape_html((string) ($openLot['manufacturer_lot_number'] ?? '')) . '"'
+                . ' data-lager-open-mfg-date="' . auth_escape_html((string) ($openLot['mfg_date'] ?? '')) . '"'
+                . ' data-lager-open-expiry-date="' . auth_escape_html((string) ($openLot['expiry_date'] ?? '')) . '"'
+                . ' data-lager-open-purchase-date="' . auth_escape_html((string) ($openLot['purchase_date'] ?? '')) . '"';
         }
 
         $html[] = '<div class="' . $rowClass . '" role="row" data-component-part="large-table-row" data-lager-row="true" data-lager-id="' . $id . '">';
         $html[] = '<div class="sg-large-table__cell" role="cell"><a class="sg-hyperlink" href="#" aria-haspopup="dialog" aria-expanded="false" data-lager-drawer-open="true"' . $nameData . $valueData . $typeData . $detailData . '>' . auth_escape_html($name) . '</a></div>';
         $html[] = '<div class="sg-large-table__cell" role="cell"><a class="sg-hyperlink" href="#" aria-haspopup="dialog" aria-expanded="false" data-lager-drawer-open="true"' . $nameData . $valueData . $typeData . $detailData . '>' . auth_escape_html($value) . '</a></div>';
         if ($tableKey === 'products') {
-            $forecastClass = $forecastWarning
+            $forecastClass = $currentForecast['warning']
                 ? ' sg-strong lager-forecast-warning'
-                : ($forecastMhdWarning ? ' sg-strong lager-forecast-mhd-warning' : '');
+                : ($currentForecast['mhdWarning'] ? ' sg-strong lager-forecast-mhd-warning' : '');
-            $html[] = '<div class="sg-large-table__cell' . $forecastClass . '" role="cell">' . auth_escape_html($forecastText) . '</div>';
+            $nextForecastClass = $nextForecast['warning']
+                ? ' sg-strong lager-forecast-warning'
+                : ($nextForecast['mhdWarning'] ? ' sg-strong lager-forecast-mhd-warning' : '');
+            $html[] = '<div class="sg-large-table__cell' . $forecastClass . '" role="cell">' . auth_escape_html($currentForecast['text']) . '</div>';
+            $html[] = '<div class="sg-large-table__cell" role="cell">' . auth_escape_html((string) max(0, (int) round((float) ($row['next_qty'] ?? 0)))) . '</div>';
+            $html[] = '<div class="sg-large-table__cell' . $nextForecastClass . '" role="cell">' . auth_escape_html($nextForecast['text']) . '</div>';
         }
         $html[] = '</div>';
     }
@@ -269,52 +301,183 @@ function auth_render_lager_table(string $title, array $rows, array $columns, str
     return implode('', $html);
 }
 
-function auth_render_lager_content(array $lagerProducts, array $lagerArtikel, array $lagerManufacturers, string $csrfToken): string
+function auth_format_lager_date(?string $value): string
+{
+    if ($value === null || $value === '') {
+        return 'Nicht hinterlegt';
+    }
+
+    return (new DateTimeImmutable($value))->format(str_contains($value, ':') ? 'd.m.Y H:i' : 'd.m.Y');
+}
+
+function auth_format_lager_quantity(float $value): string
+{
+    return fmod($value, 1.0) === 0.0
+        ? number_format($value, 0, ',', '.')
+        : number_format($value, 2, ',', '.');
+}
+
+function auth_render_lager_historical_lots(array $lagerProducts): string
+{
+    $html = [];
+    foreach ($lagerProducts as $product) {
+        $productId = (int) ($product['id'] ?? 0);
+        $html[] = '<div data-lager-historical-product="' . $productId . '" hidden><div class="sg-content-group-box" data-component="content-group-box">';
+        foreach (($product['historical_lots'] ?? []) as $lot) {
+            $qtyNet = (float) ($lot['qty_net'] ?? 0);
+            $emptyDate = $qtyNet <= 0 ? auth_format_lager_date($lot['last_out_at'] ?? null) : 'Nicht eindeutig';
+            $html[] = '<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Vergangene Charge">'
+                . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Vergangene Charge</div></div>'
+                . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">'
+                . '<p class="sg-body"><strong>Naurua-Chargennummer:</strong> ' . auth_escape_html((string) ($lot['lot_number'] ?? 'Nicht hinterlegt')) . '<br>'
+                . '<strong>Status:</strong> Abgeschlossen<br>'
+                . '<strong>Eingangsmenge:</strong> ' . auth_format_lager_quantity((float) ($lot['qty_in'] ?? 0)) . '<br>'
+                . '<strong>Verbrauchte Menge:</strong> ' . auth_format_lager_quantity((float) ($lot['qty_out'] ?? 0)) . '<br>'
+                . '<strong>Verbrauchszeitraum:</strong> ' . auth_format_lager_date($lot['first_in_at'] ?? null) . ' – ' . auth_format_lager_date($lot['last_out_at'] ?? null) . '<br>'
+                . '<strong>Aufgebraucht am:</strong> ' . $emptyDate . '<br>'
+                . '<strong>MHD:</strong> ' . auth_format_lager_date($lot['expiry_date'] ?? null) . '<br>'
+                . '<strong>Hersteller:</strong> ' . auth_escape_html((string) ($lot['manufacturer_name'] ?? 'Nicht hinterlegt')) . '<br>'
+                . '<strong>Hersteller-Chargennummer:</strong> ' . auth_escape_html((string) ($lot['manufacturer_lot_number'] ?? 'Nicht hinterlegt')) . '</p>'
+                . '</div></article>';
+        }
+        $html[] = '</div></div>';
+    }
+
+    return implode('', $html);
+}
+
+function auth_render_lager_open_lots(array $lagerProducts, string $manufacturerOptions): string
+{
+    $html = [];
+    foreach ($lagerProducts as $product) {
+        $productId = (int) ($product['id'] ?? 0);
+        $html[] = '<div data-lager-open-product="' . $productId . '" hidden><div class="sg-content-group-box" data-component="content-group-box" data-lager-open-lot-list>';
+        foreach (($product['open_lots'] ?? []) as $lot) {
+            $lotId = (int) ($lot['lot_id'] ?? 0);
+            $selectedClass = !empty($lot['next_active']) ? ' sg-lager-open-lot--next-active' : '';
+            $selectedText = !empty($lot['next_active']) ? 'Als nächste aktive Charge ausgewählt' : 'Nicht ausgewählt';
+            $isQualified = trim((string) ($lot['lot_number'] ?? '')) !== ''
+                && (int) ($lot['manufacturer_party_id'] ?? 0) > 0
+                && trim((string) ($lot['manufacturer_lot_number'] ?? '')) !== ''
+                && trim((string) ($lot['mfg_date'] ?? '')) !== ''
+                && trim((string) ($lot['expiry_date'] ?? '')) !== ''
+                && trim((string) ($lot['purchase_date'] ?? '')) !== ''
+                && (float) ($lot['qty_net'] ?? 0) > 0;
+            $selectButton = '<button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-select data-lager-open-selectable="' . ($isQualified ? 'true' : 'false') . '"' . ($isQualified && empty($lot['next_active']) ? '' : ' disabled aria-disabled="true"') . '>Als nächste aktive auswählen</button>';
+            $html[] = '<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host' . $selectedClass . '" data-pattern="overlay-card" data-dialog-open="false" data-lager-open-card-wrapper="' . $lotId . '"><article class="sg-card sg-card--content-card sg-delete-confirmation-pattern__target" data-component="content-card" data-pattern="overlay-card" aria-label="Offene Charge">'
+                . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen sg-object-card__header" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Offene Charge</div><div class="sg-component-row">' . $selectButton . '<button class="sg-interaction-element sg-button sg-button--warning" type="button" data-component="button" data-component-variant="warning" data-lager-open-delete>Löschen</button><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-edit-open>Bearbeiten</button></div></div>'
+                . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-lager-open-card="' . (int) ($lot['lot_id'] ?? 0) . '"><p class="sg-body"><strong>Auswahl:</strong> <span data-lager-open-card-next-active>' . auth_escape_html($selectedText) . '</span><br><strong>Naurua-Chargennummer:</strong> <span data-lager-open-card-lot-number>' . auth_escape_html((string) ($lot['lot_number'] ?? 'Nicht hinterlegt')) . '</span><br>'
+                . '<strong>Status:</strong> Vorbereitet<br>'
+                . '<strong>Bestand:</strong> <span data-lager-open-card-qty-net>' . auth_format_lager_quantity((float) ($lot['qty_net'] ?? 0)) . '</span><br>'
+                . '<strong>Eingangsmenge:</strong> <span data-lager-open-card-qty-in>' . auth_format_lager_quantity((float) ($lot['qty_in'] ?? 0)) . '</span><br>'
+                . '<strong>Hersteller:</strong> <span data-lager-open-card-manufacturer>' . auth_escape_html((string) ($lot['manufacturer_name'] ?? 'Nicht hinterlegt')) . '</span><br>'
+                . '<strong>Hersteller-Chargennummer:</strong> <span data-lager-open-card-manufacturer-lot>' . auth_escape_html((string) ($lot['manufacturer_lot_number'] ?? 'Nicht hinterlegt')) . '</span><br>'
+                . '<strong>Herstellungsdatum:</strong> <span data-lager-open-card-mfg-date>' . auth_format_lager_date($lot['mfg_date'] ?? null) . '</span><br>'
+                . '<strong>MHD:</strong> <span data-lager-open-card-expiry-date>' . auth_format_lager_date($lot['expiry_date'] ?? null) . '</span><br>'
+                . '<strong>Einkaufsdatum:</strong> <span data-lager-open-card-purchase-date>' . auth_format_lager_date($lot['purchase_date'] ?? null) . '</span></p></div>'
+                . '<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-lager-open-edit-form hidden><div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Offene Charge bearbeiten"><form class="sg-form-sections-card" data-lager-open-edit-form-element><div class="sg-form-sections-card__body" data-pattern-part="form-body"><h2 class="sg-strong sg-form-sections-card__title">Offene Charge bearbeiten</h2>'
+                . '<section class="sg-form-sections-card__chapter" aria-labelledby="lager-open-charge-data-' . $lotId . '"><h2 id="lager-open-charge-data-' . $lotId . '" class="sg-strong sg-form-sections-card__chapter-title">Chargendaten</h2>'
+                . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Naurua-Chargennummer</span><input class="sg-interaction-element sg-input-single-line" type="text" data-lager-open-lot-number value="' . auth_escape_html((string) ($lot['lot_number'] ?? '')) . '"></label></div>'
+                . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Hersteller</span><select class="sg-interaction-element sg-input-single-line" data-lager-open-manufacturer>' . str_replace('value="' . (int) ($lot['manufacturer_party_id'] ?? 0) . '"', 'value="' . (int) ($lot['manufacturer_party_id'] ?? 0) . '" selected', $manufacturerOptions) . '</select></label></div>'
+                . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Hersteller-Chargennummer</span><input class="sg-interaction-element sg-input-single-line" type="text" data-lager-open-manufacturer-lot value="' . auth_escape_html((string) ($lot['manufacturer_lot_number'] ?? '')) . '"></label></div>'
+                . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Herstellungsdatum</span><input class="sg-interaction-element sg-input-single-line" type="date" data-lager-open-mfg-date value="' . auth_escape_html((string) ($lot['mfg_date'] ?? '')) . '"></label></div>'
+                . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">MHD</span><input class="sg-interaction-element sg-input-single-line" type="date" data-lager-open-expiry-date value="' . auth_escape_html((string) ($lot['expiry_date'] ?? '')) . '"></label></div>'
+                . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Einkaufsdatum</span><input class="sg-interaction-element sg-input-single-line" type="date" data-lager-open-purchase-date value="' . auth_escape_html((string) ($lot['purchase_date'] ?? '')) . '"></label></div>'
+                . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Menge</span><input class="sg-interaction-element sg-input-single-line" type="number" min="0" step="1" inputmode="numeric" data-lager-open-target-qty value="' . auth_escape_html((string) ($lot['qty_net'] ?? 0)) . '"></label></div>'
+                . '</section><footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment"><div class="sg-form-sections-card__actions" data-pattern-part="form-actions"><button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button" data-lager-open-edit-close>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Speichern</button></div></footer><p class="sg-body" data-lager-open-edit-status aria-live="polite"></p></div></form></div></div></article>'
+                . '<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Leere Felder bestätigen" role="dialog" aria-modal="true" aria-labelledby="lager-open-confirmation-title-' . $lotId . '" data-lager-open-confirmation-card hidden><div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"><p class="sg-body sg-delete-confirmation-pattern__text" id="lager-open-confirmation-title-' . $lotId . '"><strong>Leere Felder speichern?</strong></p><p class="sg-body sg-delete-confirmation-pattern__text">Die folgenden Felder werden leer gespeichert:</p><div class="sg-delete-confirmation-pattern__list" data-lager-open-confirmation-empty-fields aria-label="Leer zu speichernde Felder"></div><div class="sg-delete-confirmation-pattern__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-confirmation-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process" type="button" data-lager-open-confirmation-submit>Speichern</button></div></div></article>'
+                . '<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="lager-open-delete-title-' . $lotId . '" data-overlay-dialog="delete" data-lager-open-delete-confirmation hidden><div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"><p class="sg-body sg-delete-confirmation-pattern__text" id="lager-open-delete-title-' . $lotId . '"><strong>Möchtest du diese offene Charge wirklich löschen?</strong></p><p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p><label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row"><span class="sg-label">Bestätigung</span><input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-lager-open-delete-confirmation-input></label><p class="sg-body" data-lager-open-delete-status aria-live="polite"></p><div class="sg-delete-confirmation-pattern__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-delete-confirmation-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-lager-open-delete-confirmation-submit>Löschen</button></div></div></article></div>';
+        }
+        $html[] = '</div></div>';
+    }
+
+    return implode('', $html);
+}
+
+function auth_render_lager_content(array $lagerProducts, array $lagerArtikel, array $lagerManufacturers, string $csrfToken, string $sectionTitle = 'Lager'): string
 {
     $manufacturerOptions = '<option value="">Hersteller auswählen</option>';
     foreach ($lagerManufacturers as $manufacturer) {
         $manufacturerOptions .= '<option value="' . (int) ($manufacturer['id'] ?? 0) . '">' . auth_escape_html((string) ($manufacturer['name'] ?? '')) . '</option>';
     }
 
+    $tables = $sectionTitle === 'Lager'
+        ? auth_render_lager_table('Produkte', $lagerProducts, ['Produktname', 'Lager aktuell', 'Verkauf bis aktuell', 'Lager neu', 'Verkauf bis neu'], 'products')
+        : auth_render_lager_table('Artikel', $lagerArtikel, ['Artikel-Name', 'Artikelnummer'], 'articles');
+    $openLotCardTemplate = auth_render_lager_open_lots([[
+        'id' => 0,
+        'open_lots' => [[
+            'lot_id' => 0,
+            'lot_number' => null,
+            'manufacturer_party_id' => null,
+            'manufacturer_name' => null,
+            'manufacturer_lot_number' => null,
+            'mfg_date' => null,
+            'expiry_date' => null,
+            'purchase_date' => null,
+            'qty_net' => 0,
+            'qty_in' => 0,
+            'next_active' => false,
+        ]],
+    ]], $manufacturerOptions);
+
     return '<div data-lager-content="true" data-lager-csrf-token="' . auth_escape_html($csrfToken) . '">'
-        . '<section class="sg-card-list-page" aria-label="Lager">'
+        . '<section class="sg-card-list-page" aria-label="' . auth_escape_html($sectionTitle) . '">'
-        . auth_render_lager_table('Produkte', $lagerProducts, ['Produktname', 'Anzahl im Lager', 'Verbraucht bis'], 'products')
+        . $tables
-        . auth_render_lager_table('Artikel', $lagerArtikel, ['Artikel-Name', 'Artikelnummer'], 'articles')
         . '</section>'
         . '<div class="sg-card-list-page-drawer-backdrop" aria-hidden="true" data-lager-drawer-backdrop="true" data-open="false"></div>'
         . '<aside class="sg-card-list-page-drawer" aria-label="Lager-Details" aria-hidden="true" data-lager-drawer="true" data-open="false">'
-        . '<div class="sg-card-list-page-drawer__header"><h2 class="sg-heading-h2 sg-card-list-page-drawer__title" data-lager-drawer-title>Lager-Details</h2><button class="sg-interaction-element sg-hyperlink" type="button" data-lager-drawer-close>schliessen</button></div>'
+        . '<div class="sg-card-list-page-drawer__header"><h2 class="sg-heading-h2 sg-card-list-page-drawer__title" data-lager-drawer-title>Lager-Details</h2></div>'
         . '<div class="sg-card-list-page-drawer__content">'
         . '<article class="sg-card sg-vsf-drawer-card" data-component="card" data-pattern="card" aria-label="Lager-Details">'
         . '<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-vsf-drawer-card__header"><div class="sg-strong">Lager-Details</div></header>'
-        . '<div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content"><p class="sg-body"><strong>Name:</strong> <span data-lager-drawer-name-value></span></p><p class="sg-body" data-lager-drawer-value-row><strong data-lager-drawer-value-label>Wert:</strong> <span data-lager-drawer-value-value></span></p></div>'
+        . '<div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content"><p class="sg-body"><strong>Name:</strong> <span data-lager-drawer-name-value></span></p><p class="sg-body" data-lager-drawer-value-row><strong data-lager-drawer-value-label>Wert:</strong> <span data-lager-drawer-value-value></span><br><strong>Voraussichtlich leer:</strong> <span data-lager-drawer-forecast-value>Keine Prognose</span></p></div>'
         . '</article>'
         . '<article class="sg-card sg-card--content-card" data-component="content-card" data-lager-drawer-topic="warning" aria-label="Warnungen">'
-        . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Warnungen</div></div>'
+        . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header" data-lager-drawer-warning-header><div class="sg-strong sg-text-on-dark" data-lager-drawer-warning-title>Keine Warnung</div></div>'
         . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body" data-lager-drawer-warning-value></p></div>'
         . '</article>'
-        . '<article class="sg-card sg-card--content-card" data-component="content-card" data-lager-drawer-topic="lot" aria-label="Lagercharge">'
+        . '<div class="sg-inline-controls-row" data-lager-drawer-topic="new-lot-action"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-new-lot-open>Neue Charge anlegen</button></div>'
-        . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Lagercharge</div></div>'
+        . '<article class="sg-card sg-card--content-card" data-lager-drawer-topic="new-lot-form" aria-label="Neue Charge anlegen" hidden>'
-        . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body"><strong>Naurua-Chargennummer:</strong> <span data-lager-drawer-lot-number></span><br><strong>Hersteller:</strong> <span data-lager-drawer-manufacturer-name></span><br><strong>Hersteller-Chargennummer:</strong> <span data-lager-drawer-manufacturer-lot-number></span><br><strong>Herstellungsdatum:</strong> <span data-lager-drawer-mfg-date></span><br><strong>MHD:</strong> <span data-lager-drawer-expiry-date></span><br><strong>Einkaufsdatum:</strong> <span data-lager-drawer-purchase-date></span></p><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-edit-open>Charge bearbeiten</button></div>'
+        . '<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray"><div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Neue Charge anlegen"><form class="sg-form-sections-card" data-lager-new-lot-form-element><div class="sg-form-sections-card__body" data-pattern-part="form-body"><h2 class="sg-strong sg-form-sections-card__title">Neue Charge anlegen</h2>'
-        . '<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-lager-edit-form hidden>'
+        . '<div class="sg-notifications-pattern" data-lager-new-lot-notification-wrapper hidden><article class="sg-card sg-notifications-pattern__card" data-pattern="notification-small" data-component="notification-card"><div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__text-segment--small" data-component-part="card-header"><p class="sg-body" data-lager-new-lot-notification></p></div></article></div>'
-        . '<form class="sg-form-sections-card" data-lager-edit-form-element><div class="sg-form-sections-card__body">'
+        . '<section class="sg-form-sections-card__chapter" aria-labelledby="lager-new-charge-data-title"><h2 id="lager-new-charge-data-title" class="sg-strong sg-form-sections-card__chapter-title">Chargendaten</h2>'
-        . '<div class="sg-form-sections-card__field-group"><label class="sg-label" for="lager-manufacturer">Hersteller</label><select class="sg-interaction-element sg-input-single-line" id="lager-manufacturer" data-lager-manufacturer>' . $manufacturerOptions . '</select></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Naurua-Chargennummer</span><input class="sg-interaction-element sg-input-single-line" type="text" data-lager-new-lot-number></label></div>'
-        . '<div class="sg-form-sections-card__field-group"><label class="sg-label" for="lager-manufacturer-lot">Hersteller-Chargennummer</label><input class="sg-interaction-element sg-input-single-line" type="text" id="lager-manufacturer-lot" data-lager-manufacturer-lot></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Hersteller</span><select class="sg-interaction-element sg-input-single-line" data-lager-new-manufacturer>' . $manufacturerOptions . '</select></label></div>'
-        . '<div class="sg-form-sections-card__field-group"><label class="sg-label" for="lager-mfg-date">Herstellungsdatum</label><input class="sg-interaction-element sg-input-single-line" type="date" id="lager-mfg-date" data-lager-mfg-date></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Hersteller-Chargennummer</span><input class="sg-interaction-element sg-input-single-line" type="text" data-lager-new-manufacturer-lot></label></div>'
-        . '<div class="sg-form-sections-card__field-group"><label class="sg-label" for="lager-expiry-date">MHD</label><input class="sg-interaction-element sg-input-single-line" type="date" id="lager-expiry-date" data-lager-expiry-date></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Herstellungsdatum</span><input class="sg-interaction-element sg-input-single-line" type="date" data-lager-new-mfg-date></label></div>'
-        . '<div class="sg-form-sections-card__field-group"><label class="sg-label" for="lager-purchase-date">Einkaufsdatum</label><input class="sg-interaction-element sg-input-single-line" type="date" id="lager-purchase-date" data-lager-purchase-date></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">MHD</span><input class="sg-interaction-element sg-input-single-line" type="date" data-lager-new-expiry-date></label></div>'
-        . '<div class="sg-component-row sg-basic-card__actions"><button class="sg-interaction-element sg-button sg-button--active" type="submit">Speichern</button><button class="sg-interaction-element sg-button" type="button" data-lager-edit-close>Abbrechen</button></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Einkaufsdatum</span><input class="sg-interaction-element sg-input-single-line" type="date" data-lager-new-purchase-date></label></div>'
-        . '<p class="sg-body" data-lager-edit-status aria-live="polite"></p></div></form>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Eingangsmenge</span><input class="sg-interaction-element sg-input-single-line" type="number" min="0" step="1" inputmode="numeric" data-lager-new-receipt-qty placeholder="Menge"></label></div>'
-        . '<form class="sg-form-sections-card" data-lager-manufacturer-form><div class="sg-form-sections-card__body"><h3 class="sg-strong">Neuen Hersteller anlegen</h3>'
+        . '</section><footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment"><div class="sg-form-sections-card__actions" data-pattern-part="form-actions"><button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button" data-lager-new-lot-close>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Speichern</button></div></footer><p class="sg-body" data-lager-new-lot-status aria-live="polite"></p></div></form></div></div>'
-        . '<div class="sg-form-sections-card__field-group"><label class="sg-label" for="lager-new-manufacturer-name">Name</label><input class="sg-interaction-element sg-input-single-line" type="text" id="lager-new-manufacturer-name" data-lager-new-manufacturer-name required></div>'
+        . '<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Leere Felder bestätigen" role="dialog" aria-modal="true" aria-labelledby="lager-new-confirmation-title" data-lager-new-confirmation-card hidden><div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"><p class="sg-body sg-delete-confirmation-pattern__text" id="lager-new-confirmation-title"><strong>Leere Felder speichern?</strong></p><p class="sg-body sg-delete-confirmation-pattern__text">Die folgenden Felder werden leer gespeichert:</p><div class="sg-delete-confirmation-pattern__list" data-lager-new-confirmation-empty-fields aria-label="Leer zu speichernde Felder"></div><div class="sg-delete-confirmation-pattern__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-new-confirmation-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process" type="button" data-lager-new-confirmation-submit>Speichern</button></div></div></article>'
-        . '<div class="sg-form-sections-card__field-group"><label class="sg-label" for="lager-new-manufacturer-email">E-Mail</label><input class="sg-interaction-element sg-input-single-line" type="email" id="lager-new-manufacturer-email" data-lager-new-manufacturer-email></div>'
-        . '<div class="sg-form-sections-card__field-group"><label class="sg-label" for="lager-new-manufacturer-phone">Telefon</label><input class="sg-interaction-element sg-input-single-line" type="text" id="lager-new-manufacturer-phone" data-lager-new-manufacturer-phone></div>'
-        . '<div class="sg-component-row sg-basic-card__actions"><button class="sg-interaction-element sg-button sg-button--active" type="submit">Hersteller anlegen</button></div></div></form>'
-        . '</div></article>'
         . '</article>'
+        . '<template data-lager-open-lot-template>' . $openLotCardTemplate . '</template>'
+        . '<div data-lager-drawer-topic="open-lots" aria-label="Offene Chargen">' . auth_render_lager_open_lots($lagerProducts, $manufacturerOptions) . '</div>'
+        . '<article class="sg-card sg-card--content-card" data-component="content-card" data-lager-drawer-topic="lot" aria-label="Aktive Charge">'
+        . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen sg-object-card__header" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Aktive Charge</div><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-edit-open>Bearbeiten</button></div>'
+        . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-lager-read-view><p class="sg-body"><strong>Naurua-Chargennummer:</strong> <span data-lager-drawer-lot-number></span><br><strong>Aktueller Bestand:</strong> <span data-lager-drawer-current-qty></span><br><strong>Eingangsmenge:</strong> <span data-lager-drawer-qty-in></span><br><strong>Hersteller:</strong> <span data-lager-drawer-manufacturer-name></span><br><strong>Hersteller-Chargennummer:</strong> <span data-lager-drawer-manufacturer-lot-number></span><br><strong>Herstellungsdatum:</strong> <span data-lager-drawer-mfg-date></span><br><strong>MHD:</strong> <span data-lager-drawer-expiry-date></span><br><strong>Einkaufsdatum:</strong> <span data-lager-drawer-purchase-date></span></p></div>'
+        . '<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-lager-edit-form hidden><div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Aktive Charge bearbeiten">'
+        . '<form class="sg-form-sections-card" data-lager-edit-form-element><div class="sg-form-sections-card__body" data-pattern-part="form-body"><h2 class="sg-strong sg-form-sections-card__title">Aktive Charge bearbeiten</h2>'
+        . '<section class="sg-form-sections-card__chapter" aria-labelledby="lager-charge-traceability-title"><h2 id="lager-charge-traceability-title" class="sg-strong sg-form-sections-card__chapter-title">Rückverfolgbarkeit</h2>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Naurua-Chargennummer</span><input class="sg-interaction-element sg-input-single-line sg-form-inactive-selectable" type="text" data-lager-lot-number readonly></label></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Hersteller</span><select class="sg-interaction-element sg-input-single-line" id="lager-manufacturer" data-lager-manufacturer>' . $manufacturerOptions . '</select></label></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Hersteller-Chargennummer</span><input class="sg-interaction-element sg-input-single-line" type="text" id="lager-manufacturer-lot" data-lager-manufacturer-lot></label></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Herstellungsdatum</span><input class="sg-interaction-element sg-input-single-line" type="date" id="lager-mfg-date" data-lager-mfg-date></label></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">MHD</span><input class="sg-interaction-element sg-input-single-line" type="date" id="lager-expiry-date" data-lager-expiry-date></label></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Einkaufsdatum</span><input class="sg-interaction-element sg-input-single-line" type="date" id="lager-purchase-date" data-lager-purchase-date></label></div>'
+        . '</section><section class="sg-form-sections-card__chapter" aria-labelledby="lager-charge-movements-title"><h2 id="lager-charge-movements-title" class="sg-strong sg-form-sections-card__chapter-title">Lagerbewegungen</h2>'
+        . '<p class="sg-form-sections-card__sentence">Buchungen werden zusätzlich zur Rückverfolgbarkeit als Lagerbewegung gespeichert. Positive Werte erhöhen den Bestand, negative Werte reduzieren ihn.</p>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Zugang buchen</span><input class="sg-interaction-element sg-input-single-line" type="number" min="0" step="0.01" inputmode="decimal" data-lager-receipt-qty placeholder="Menge"></label></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Bestandskorrektur (+ / −)</span><input class="sg-interaction-element sg-input-single-line" type="number" step="1" inputmode="numeric" data-lager-adjustment-qty placeholder="+ / − Menge"></label></div>'
+        . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Abgang buchen</span><input class="sg-interaction-element sg-input-single-line" type="number" min="0" step="0.01" inputmode="decimal" data-lager-out-qty placeholder="Menge"></label></div>'
+        . '</section><footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment"><div class="sg-form-sections-card__actions" data-pattern-part="form-actions"><button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button" data-lager-edit-close>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Speichern</button></div></footer><p class="sg-body" data-lager-edit-status aria-live="polite"></p></div></form>'
+        . '</div></div>'
+        . '</article>'
+        . '<div data-lager-drawer-topic="historical-lots" aria-label="Vergangene Chargen">' . auth_render_lager_historical_lots($lagerProducts) . '</div>'
         . '<article class="sg-card sg-card--content-card" data-component="content-card" data-lager-drawer-topic="virtual-lot" aria-label="Virtuelle Charge">'
         . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Virtuelle Charge</div></div>'
-        . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body" data-lager-drawer-virtual-lot-value></p></div>'
+        . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body"><span data-lager-drawer-virtual-lot-value></span><br><span data-lager-drawer-virtual-lot-qty></span></p></div>'
         . '</article>'
         . '</div>'
         . '</aside>'
@@ -335,9 +498,9 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
         $disabledAttribute = $hasSellableMapping ? '' : ' disabled aria-disabled="true"';
 
         $otcProductRows .= '<div class="sg-form-sections-card__field-group">';
-        $otcProductRows .= '<label class="sg-label" for="' . $inputId . '">' . $productName . ($productSku !== '' ? ' (' . $productSku . ')' : '') . $mappingNote . '</label>';
+        $otcProductRows .= '<label class="sg-labeled-input-row sg-otc-order-product-row"><span class="sg-label">' . $productName . ($productSku !== '' ? ' (' . $productSku . ')' : '') . $mappingNote . '</span>';
-        $otcProductRows .= '<input class="sg-interaction-element sg-input-single-line" type="number" id="' . $inputId . '" min="0" step="1" data-otc-order-product data-product-id="' . $productId . '" data-title="' . $productName . '" data-available-qty="' . $availableQty . '"' . $disabledAttribute . '>';
+        $otcProductRows .= '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="number" id="' . $inputId . '" min="0" step="1" data-otc-order-product data-product-id="' . $productId . '" data-title="' . $productName . '" data-available-qty="' . $availableQty . '"' . $disabledAttribute . '>';
-        $otcProductRows .= '<p class="sg-body sg-form-sections-card__sentence">Physischer Bestand: ' . $availableQty . '</p>';
+        $otcProductRows .= '</label>';
         $otcProductRows .= '</div>';
     }
 
@@ -360,6 +523,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
         [
             'Bestellungen' => $bestellungenContent,
             'Lager' => $lagerContent,
+            'Artikel' => auth_render_lager_content([], $lagerArtikel, $lagerManufacturers, auth_csrf_token(), 'Artikel'),
         ],
         JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
     );
@@ -440,44 +604,40 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo '</section>';
     echo '</section>';
     echo '<section class="sg-otc-order-overlay" data-otc-order-overlay data-open="false" aria-hidden="true">';
-    echo '<article class="sg-card sg-object-card sg-object-card--variable-height sg-otc-order-overlay__panel" data-pattern="object-card" aria-labelledby="otc-order-modal-title" role="dialog" aria-modal="true">';
+    echo '<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="overlay-card" data-dialog-open="false" data-otc-confirmation-stage>';
-    echo '<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">';
+    echo '<article class="sg-card sg-scrollable-card sg-delete-confirmation-pattern__target sg-otc-order-overlay__panel" data-pattern="scrollable-card" aria-labelledby="otc-order-modal-title" role="dialog" aria-modal="true">';
+    echo '<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-scrollable-card__header sg-object-card__header" data-pattern-part="scrollable-card-header">';
     echo '<h2 id="otc-order-modal-title" class="sg-strong sg-otc-order-overlay__title">Neuen OTC-Verkauf erfassen</h2>';
     echo '<button class="sg-interaction-element sg-button sg-button--active sg-otc-order-overlay__close" type="button" data-otc-order-close>Schliessen</button>';
     echo '</header>';
-    echo '<div class="sg-card-segment sg-card-segment--gray sg-object-card__content">';
+    echo '<div class="sg-card-segment sg-card-segment--gray sg-scrollable-card__content sg-object-card__content" data-pattern-part="scrollable-card-content" tabindex="0" aria-label="Scrollbarer Formularinhalt">';
     echo '<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">';
-    echo '<form class="sg-form-sections-card" action="#" method="post" data-otc-order-form aria-label="Neuen OTC-Verkauf erfassen">';
+    echo '<form id="otc-order-form" class="sg-form-sections-card" action="#" method="post" data-otc-order-form aria-label="Neuen OTC-Verkauf erfassen">';
     echo '<div class="sg-form-sections-card__body" data-pattern-part="form-body">';
     echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-products-title">';
     echo '<h2 id="otc-products-title" class="sg-strong sg-form-sections-card__chapter-title">PRODUKTE</h2>';
     echo $otcProductRows;
     echo '</section>';
-    echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-total-price-title">';
-    echo '<h2 id="otc-total-price-title" class="sg-strong sg-form-sections-card__chapter-title">Preis</h2>';
-    echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-total-price">Preis alle Flaschen brutto (CHF)</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="number" id="otc-total-price" min="0" step="0.01" data-otc-order-total-price>';
-    echo '<p class="sg-body sg-form-sections-card__sentence">Der Preis wird durch die Anzahl aller Flaschen geteilt und das Ergebnis ist der Preis jeder einzelnen Flasche.</p>';
-    echo '</div>';
-    echo '</section>';
     echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-order-date-title">';
     echo '<h2 id="otc-order-date-title" class="sg-strong sg-form-sections-card__chapter-title">Datum</h2>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-order-date">Bestelldatum</label>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Bestelldatum</span>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="date" id="otc-order-date" value="' . htmlspecialchars(date('Y-m-d'), ENT_QUOTES, 'UTF-8') . '" data-otc-order-date>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="date" id="otc-order-date" value="' . htmlspecialchars(date('Y-m-d'), ENT_QUOTES, 'UTF-8') . '" data-otc-order-date>';
+    echo '</label>';
     echo '</div>';
     echo '</section>';
     echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-payment-title">';
     echo '<h2 id="otc-payment-title" class="sg-strong sg-form-sections-card__chapter-title">Bezahlung</h2>';
     echo '<div data-otc-payment-rows>';
     echo '<div class="sg-form-sections-card__field-group" data-otc-payment-row>';
-    echo '<label class="sg-label" for="otc-payment-method-1">Bezahlart</label>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Bezahlart</span>';
-    echo '<select class="sg-interaction-element sg-input-single-line" id="otc-payment-method-1" data-otc-payment-method>';
+    echo '<select class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable sg-pulldown" id="otc-payment-method-1" data-otc-payment-method>';
     echo '<option value="twint">Twint</option><option value="card">Kreditkarte</option><option value="cash">Barzahlung</option><option value="paypal">PayPal</option><option value="bank_transfer">Überweisung</option>';
     echo '</select>';
-    echo '<label class="sg-label" for="otc-payment-amount-1">Betrag (CHF)</label>';
+    echo '</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="number" id="otc-payment-amount-1" min="0.01" step="0.01" value="0.00" data-otc-payment-amount>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Betrag (CHF)</span>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="number" id="otc-payment-amount-1" min="0.01" step="0.01" value="0.00" data-otc-payment-amount>';
+    echo '</label>';
     echo '</div>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__actions-segment">';
@@ -487,44 +647,63 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-billing-title">';
     echo '<h2 id="otc-billing-title" class="sg-strong sg-form-sections-card__chapter-title">Rechnungsadresse</h2>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-first-name">Vorname</label>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Vorname</span>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-first-name" value="Fabienne" data-otc-order-first-name>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-first-name" value="Fabienne" data-otc-order-first-name>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-last-name">Nachname</label>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Nachname</span>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-last-name" value="Föhn" data-otc-order-last-name>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-last-name" value="Föhn" data-otc-order-last-name>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-street">Strasse</label>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Strasse</span>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-street" value="Im Hochrain" data-otc-order-street>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-street" value="Im Hochrain" data-otc-order-street>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-house-number">Hausnummer</label>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Hausnummer</span>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-house-number" value="2" data-otc-order-house-number>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-house-number" value="2" data-otc-order-house-number>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-zip">PLZ</label>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">PLZ</span>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-zip" value="8102" data-otc-order-zip>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-zip" value="8102" data-otc-order-zip>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-city">Ort</label>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Ort</span>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-city" value="Oberengstringen" data-otc-order-city>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-city" value="Oberengstringen" data-otc-order-city>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
     echo '<div class="sg-body sg-otc-order-form__status hidden" data-otc-order-success>Bestellung erfolgreich erfasst! Die Bestellnummer wird automatisch generiert.</div>';
     echo '<div class="sg-body sg-otc-order-form__status sg-otc-order-form__status--error hidden" data-otc-order-error></div>';
     echo '</div>';
     echo '</div>';
-    echo '<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">';
-    echo '<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">';
-    echo '<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button" data-otc-order-close>Abbrechen</button>';
-    echo '<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true" data-otc-order-submit>Verkaufen</button>';
-    echo '</div>';
-    echo '</footer>';
     echo '</form>';
     echo '</div>';
     echo '</div>';
+    echo '<footer class="sg-card-segment sg-card-segment--body sg-scrollable-card__actions-segment" data-pattern-part="scrollable-card-actions">';
+    echo '<div class="sg-scrollable-card__actions">';
+    echo '<button class="sg-interaction-element sg-button sg-button--active" type="button" form="otc-order-form" data-otc-order-close>Abbrechen</button>';
+    echo '<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="submit" form="otc-order-form" disabled aria-disabled="true" data-otc-order-submit>Weiter</button>';
+    echo '</div>';
+    echo '</footer>';
     echo '</article>';
+    echo '<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Verkaufsbestätigung" role="dialog" aria-modal="true" aria-labelledby="otc-confirmation-title" data-otc-confirmation-card hidden>';
+    echo '<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">';
+    echo '<p class="sg-body sg-delete-confirmation-pattern__text" id="otc-confirmation-title"><strong>Verkauf bestätigen</strong></p>';
+    echo '<div class="sg-delete-confirmation-pattern__list" data-otc-confirmation-products aria-label="Produkte"></div>';
+    echo '<p class="sg-body sg-delete-confirmation-pattern__text"><strong>Gesamtzahl Flaschen: <span data-otc-confirmation-quantity>0</span></strong></p>';
+    echo '<p class="sg-body sg-delete-confirmation-pattern__text"><strong>Gesamtbetrag: CHF <span data-otc-confirmation-total>0.00</span></strong></p>';
+    echo '<div class="sg-delete-confirmation-pattern__actions">';
+    echo '<button class="sg-interaction-element sg-button sg-button--active" type="button" data-otc-confirmation-cancel>Abbrechen</button>';
+    echo '<button class="sg-interaction-element sg-button sg-button--process" type="button" data-otc-confirmation-submit>Verkaufen</button>';
+    echo '</div>';
+    echo '</div>';
+    echo '</article>';
+    echo '</div>';
     echo '</section>';
     echo '<script src="/scripts/help-icon-overlays.js"></script>';
     echo '<script>';
@@ -547,7 +726,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  if (contentTitle) { contentTitle.textContent = activeEntry; }";
     echo "  if (contentBody) { contentBody.innerHTML = portalModuleContentCards[activeEntry] || ''; }";
     echo "  if (activeEntry === 'Bestellungen') { initBestellungenBindings(); }";
-    echo "  if (activeEntry === 'Lager') { initLagerBindings(); }";
+    echo "  if (activeEntry === 'Lager' || activeEntry === 'Artikel') { initLagerBindings(); }";
     echo "  menu.innerHTML = '';";
     echo "  entries.forEach((entry, index) => {";
     echo "    const button = document.createElement('button');";
@@ -568,7 +747,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "      if (contentTitle) { contentTitle.textContent = entryName; }";
     echo "      if (contentBody) { contentBody.innerHTML = portalModuleContentCards[entryName] || ''; }";
     echo "      if (entryName === 'Bestellungen') { initBestellungenBindings(); }";
-    echo "      if (entryName === 'Lager') { initLagerBindings(); }";
+    echo "      if (entryName === 'Lager' || entryName === 'Artikel') { initLagerBindings(); }";
     echo "    });";
     echo "  });";
     echo "};";
@@ -647,7 +826,6 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  mediaQuery.addEventListener('change', syncMode);";
     echo "})();";
     echo "let bestellungenTableHandlersInstalled = false;";
-    echo "let bestellungenRealtimeSource = null;";
     echo "let lagerBindingsInstalled = false;";
     echo "function initLagerBindings() {";
     echo "  if (lagerBindingsInstalled) { return; }";
@@ -656,30 +834,13 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  lagerBindingsInstalled = true;";
     echo "  let lagerMobileDetailHost = null;";
     echo "  let lagerMobileDetailOpen = false;";
-    echo "  const escapeLagerHtml = (value) => String(value ?? '').replace(/[&<>\"']/g, (character) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' }[character] || character));";
+    echo "  const renderLagerMobileDetail = (sourceDrawer, trigger) => { const type = trigger.dataset.lagerDrawerType || 'Lager'; const name = trigger.dataset.lagerDrawerName || ''; const value = trigger.dataset.lagerDrawerValue || ''; sourceDrawer.querySelector('[data-lager-drawer-title]').textContent = type + ': ' + name; sourceDrawer.querySelector('[data-lager-drawer-name-value]').textContent = name; sourceDrawer.querySelector('[data-lager-drawer-value-label]').textContent = type === 'Produkt' ? 'Anzahl im Lager:' : 'Artikelnummer:'; sourceDrawer.querySelector('[data-lager-drawer-value-value]').textContent = value; sourceDrawer.querySelectorAll('[data-lager-drawer-topic]').forEach((card) => { card.hidden = type !== 'Produkt'; }); const newLotForm = sourceDrawer.querySelector('[data-lager-drawer-topic=\"new-lot-form\"]'); if (newLotForm) { newLotForm.hidden = true; } const newLotAction = sourceDrawer.querySelector('[data-lager-drawer-topic=\"new-lot-action\"]'); if (newLotAction) { newLotAction.hidden = false; } if (type === 'Produkt') { const warning = trigger.dataset.lagerDrawerForecastWarning === 'true' || trigger.dataset.lagerDrawerForecastMhdWarning === 'true'; const warningValue = sourceDrawer.querySelector('[data-lager-drawer-warning-value]'); if (warningValue) { warningValue.textContent = warning ? (trigger.dataset.lagerDrawerForecast || 'Keine Prognose') : 'Keine akute Warnung.'; } const warningTitle = sourceDrawer.querySelector('[data-lager-drawer-warning-title]'); if (warningTitle) { warningTitle.textContent = getLagerWarningTitle(trigger); } sourceDrawer.querySelector('[data-lager-drawer-lot-number]').textContent = trigger.dataset.lagerDrawerLotNumber || 'Nicht hinterlegt'; sourceDrawer.querySelector('[data-lager-drawer-current-qty]').textContent = trigger.dataset.lagerDrawerCurrentQty || '0'; sourceDrawer.querySelector('[data-lager-drawer-qty-in]').textContent = trigger.dataset.lagerDrawerQtyIn || '0'; sourceDrawer.querySelector('[data-lager-drawer-manufacturer-name]').textContent = trigger.dataset.lagerDrawerManufacturerName || 'Nicht hinterlegt'; sourceDrawer.querySelector('[data-lager-drawer-manufacturer-lot-number]').textContent = trigger.dataset.lagerDrawerManufacturerLotNumber || 'Nicht hinterlegt'; sourceDrawer.querySelector('[data-lager-drawer-mfg-date]').textContent = trigger.dataset.lagerDrawerMfgDate || 'Nicht hinterlegt'; sourceDrawer.querySelector('[data-lager-drawer-expiry-date]').textContent = trigger.dataset.lagerDrawerExpiryDate || 'Nicht hinterlegt'; sourceDrawer.querySelector('[data-lager-drawer-purchase-date]').textContent = trigger.dataset.lagerDrawerPurchaseDate || 'Nicht hinterlegt'; const productId = trigger.closest('[data-lager-row]')?.dataset.lagerId || ''; sourceDrawer.querySelectorAll('[data-lager-historical-product]').forEach((product) => { product.hidden = product.dataset.lagerHistoricalProduct !== productId; }); } const host = document.createElement('div'); host.className = 'sg-lager-mobile-detail-host'; host.dataset.lagerMobileDetailHost = 'true'; host.innerHTML = '<div class=\"sg-navigation-card-layout sg-mobile-detail-back-card\"><div class=\"sg-navigation-card-block\"><article class=\"sg-card\" data-component=\"card\" data-pattern=\"navigation-card\" aria-label=\"Navigation Detailansicht zurück oben\"><div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\" data-pattern-part=\"navigation-card-segment\"><div class=\"sg-navigation-card-center\"><button class=\"sg-interaction-element sg-hyperlink\" type=\"button\" data-lager-detail-back>zurück</button></div></div></article></div></div>'; const mobileDrawer = sourceDrawer; mobileDrawer.dataset.lagerMobileDrawer = 'true'; mobileDrawer.dataset.open = 'true'; mobileDrawer.setAttribute('aria-hidden', 'false'); host.appendChild(sourceDrawer); return host; };";
-    echo "  const renderLagerMobileDetail = (trigger) => {";
-    echo "    const type = trigger.dataset.lagerDrawerType || 'Lager';";
-    echo "    const name = trigger.dataset.lagerDrawerName || '';";
-    echo "    const value = trigger.dataset.lagerDrawerValue || '';";
-    echo "    const isProduct = type === 'Produkt';";
-    echo "    const forecast = trigger.dataset.lagerDrawerForecast || 'Keine Prognose';";
-    echo "    const warning = trigger.dataset.lagerDrawerForecastWarning === 'true' || trigger.dataset.lagerDrawerForecastMhdWarning === 'true';";
-    echo "    const warningText = warning ? forecast : 'Keine akute Warnung.';";
-    echo "    const lotNumber = trigger.dataset.lagerDrawerLotNumber || 'Nicht hinterlegt';";
-    echo "    const manufacturerName = trigger.dataset.lagerDrawerManufacturerName || 'Nicht hinterlegt';";
-    echo "    const manufacturerLotNumber = trigger.dataset.lagerDrawerManufacturerLotNumber || 'Nicht hinterlegt';";
-    echo "    const mfgDate = trigger.dataset.lagerDrawerMfgDate || 'Nicht hinterlegt';";
-    echo "    const expiryDate = trigger.dataset.lagerDrawerExpiryDate || 'Nicht hinterlegt';";
-    echo "    const purchaseDate = trigger.dataset.lagerDrawerPurchaseDate || 'Nicht hinterlegt';";
-    echo "    const virtualLot = trigger.dataset.lagerDrawerVirtualLotNumber || '';";
-    echo "    return ['<div class=\"sg-lager-mobile-detail-host\" data-lager-mobile-detail-host=\"true\">', '<div class=\"sg-navigation-card-layout sg-mobile-detail-back-card\">', '<div class=\"sg-navigation-card-block\">', '<article class=\"sg-card\" data-component=\"card\" data-pattern=\"navigation-card\" aria-label=\"Navigation Detailansicht zurück oben\">', '<div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\" data-pattern-part=\"navigation-card-segment\">', '<div class=\"sg-navigation-card-center\">', '<button class=\"sg-interaction-element sg-hyperlink\" type=\"button\" data-lager-detail-back>zurück</button>', '</div></div></article></div></div>', '<article class=\"sg-card sg-vsf-drawer-card\" data-component=\"card\" data-pattern=\"card\" aria-label=\"Lager-Details\">', '<header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkblue\"><div class=\"sg-strong\">' + escapeLagerHtml(type) + ': ' + escapeLagerHtml(name) + '</div></header>', '<div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\"><p class=\"sg-body\"><strong>Name:</strong> ' + escapeLagerHtml(name) + '</p><p class=\"sg-body\"><strong>' + (isProduct ? 'Anzahl im Lager:' : 'Artikelnummer:') + '</strong> ' + escapeLagerHtml(value) + '</p>' + (isProduct ? '<p class=\"sg-body\"><strong>Warnungen:</strong> ' + escapeLagerHtml(warningText) + '</p><p class=\"sg-body\"><strong>Naurua-Chargennummer:</strong> ' + escapeLagerHtml(lotNumber) + '<br><strong>Hersteller:</strong> ' + escapeLagerHtml(manufacturerName) + '<br><strong>Hersteller-Chargennummer:</strong> ' + escapeLagerHtml(manufacturerLotNumber) + '<br><strong>Herstellungsdatum:</strong> ' + escapeLagerHtml(mfgDate) + '<br><strong>MHD:</strong> ' + escapeLagerHtml(expiryDate) + '<br><strong>Einkaufsdatum:</strong> ' + escapeLagerHtml(purchaseDate) + '</p><p class=\"sg-body\"><strong>Virtuelle Charge:</strong> ' + escapeLagerHtml(virtualLot || 'Keine virtuelle Fehlbestandscharge vorhanden.') + '</p>' : '') + '</div></article></div>'].join('');";
-    echo "  };";
     echo "  const restoreLagerMobileDetail = () => {";
-    echo "    if (lagerMobileDetailHost && lagerMobileDetailHost.parentNode) { lagerMobileDetailHost.parentNode.removeChild(lagerMobileDetailHost); }";
+    echo "    if (lagerMobileDetailHost && lagerMobileDetailHost.parentNode) { const mobileDrawer = lagerMobileDetailHost.querySelector('[data-lager-mobile-drawer]'); if (mobileDrawer) { contentRoot.appendChild(mobileDrawer); mobileDrawer.removeAttribute('data-lager-mobile-drawer'); mobileDrawer.dataset.open = 'false'; mobileDrawer.setAttribute('aria-hidden', 'true'); } lagerMobileDetailHost.parentNode.removeChild(lagerMobileDetailHost); }";
     echo "    lagerMobileDetailHost = null; lagerMobileDetailOpen = false; document.body.classList.remove('sg-lager-mobile-detail-open');";
     echo "  };";
     echo "  const openLagerMobileDetail = (trigger) => {";
-    echo "    restoreLagerMobileDetail(); const host = document.createElement('div'); host.innerHTML = renderLagerMobileDetail(trigger); lagerMobileDetailHost = host.firstElementChild;";
+    echo "    restoreLagerMobileDetail(); const sourceDrawer = contentRoot.querySelector('[data-lager-drawer]'); lagerMobileDetailHost = sourceDrawer ? renderLagerMobileDetail(sourceDrawer, trigger) : null; const mobileDrawer = lagerMobileDetailHost?.querySelector('[data-lager-mobile-drawer]'); if (mobileDrawer) { const virtualLot = trigger.dataset.lagerDrawerVirtualLotNumber || ''; const virtualLotValue = mobileDrawer.querySelector('[data-lager-drawer-virtual-lot-value]'); if (virtualLotValue) { virtualLotValue.textContent = virtualLot ? 'Virtuelle Charge: ' + virtualLot : 'Keine virtuelle Fehlbestandscharge vorhanden.'; } }";
     echo "    if (lagerMobileDetailHost) { document.body.appendChild(lagerMobileDetailHost); document.body.classList.add('sg-lager-mobile-detail-open'); }";
     echo "    lagerMobileDetailOpen = true; window.history.pushState({ ...(window.history.state || {}), lagerView: 'detail' }, '', window.location.href);";
     echo "  };";
@@ -688,24 +849,56 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    if (window.history.state && window.history.state.lagerView === 'detail') { window.history.back(); return; }";
     echo "    restoreLagerMobileDetail();";
     echo "  };";
-    echo "  const getDrawer = () => contentRoot.querySelector('[data-lager-drawer]');";
+    echo "  const getDrawer = () => document.querySelector('[data-lager-mobile-drawer]') || contentRoot.querySelector('[data-lager-drawer]');";
+    echo "  document.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open][data-lager-drawer-type=\"Produkt\"]'); if (!trigger) { return; } const drawer = getDrawer(); const lotValue = drawer?.querySelector('[data-lager-drawer-virtual-lot-value]'); const qtyValue = drawer?.querySelector('[data-lager-drawer-virtual-lot-qty]'); if (lotValue) { lotValue.textContent = trigger.dataset.lagerDrawerVirtualLotNumber ? 'Virtuelle Charge: ' + trigger.dataset.lagerDrawerVirtualLotNumber : 'Keine virtuelle Fehlbestandscharge vorhanden.'; } if (qtyValue) { qtyValue.textContent = 'Bereits virtuell verkauft: ' + (trigger.dataset.lagerDrawerVirtualShortageQty || '0'); } });";
     echo "  const setDrawerState = (open) => {";
     echo "    const drawer = getDrawer(); const backdrop = contentRoot.querySelector('[data-lager-drawer-backdrop]');";
     echo "    if (!drawer || !backdrop) { return; }";
     echo "    drawer.dataset.open = String(open); drawer.setAttribute('aria-hidden', String(!open)); backdrop.dataset.open = String(open); backdrop.setAttribute('aria-hidden', String(!open)); document.body.classList.toggle('sg-card-list-page-drawer-open', open);";
     echo "  };";
+    echo "  const getLagerWarningTitle = (trigger) => trigger.dataset.lagerDrawerForecastStatus === 'depleted' ? 'Warnung: Bestand ist aufgebraucht' : (trigger.dataset.lagerDrawerForecastMhdWarning === 'true' ? 'Warnung: MHD wird vor Bestandsende erreicht' : (trigger.dataset.lagerDrawerForecastWarning === 'true' ? 'Warnung: Bestand wird innerhalb von drei Monaten aufgebraucht sein' : 'Keine Warnung'));";
     echo "  const closeDrawer = () => { setDrawerState(false); contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((trigger) => trigger.setAttribute('aria-expanded', 'false')); };";
-    echo "  contentRoot.addEventListener('click', (event) => {";
+    echo "  document.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (!trigger || trigger.dataset.lagerDrawerType !== 'Produkt') { return; } const drawer = getDrawer(); const forecast = drawer?.querySelector('[data-lager-drawer-forecast-value]'); if (forecast) { forecast.textContent = trigger.dataset.lagerDrawerForecast || 'Keine Prognose'; } });";
+    echo "  const getLagerForecastWarningText = (forecast, trigger, text) => { if (forecast?.status === 'depleted' || trigger?.dataset.lagerDrawerForecastStatus === 'depleted') { return 'Der Bestand ist aufgebraucht. Voraussichtlich leer: ' + text + '.'; } if (trigger?.dataset.lagerDrawerForecastMhdWarning === 'true') { const expiry = trigger.dataset.lagerDrawerExpiryDate ? new Date(trigger.dataset.lagerDrawerExpiryDate + 'T00:00:00').toLocaleDateString('de-CH') : 'dem MHD'; const forecastDate = forecast?.date ? new Date(forecast.date + 'T00:00:00').toLocaleDateString('de-CH') : text.replace(/\\s+\\(MHD:.*\\)$/, ''); return 'Das MHD wird am ' + expiry + ' erreicht, bevor der Bestand leer ist. Voraussichtlich leer: ' + forecastDate + '.'; } if (trigger?.dataset.lagerDrawerForecastWarning === 'true') { return 'Voraussichtlich leer: ' + text + '.'; } return 'Keine akute Warnung.'; };";
+    echo "  document.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (!trigger || trigger.dataset.lagerDrawerType !== 'Produkt') { return; } const drawer = getDrawer(); const warningValue = drawer?.querySelector('[data-lager-drawer-warning-value]'); if (warningValue) { warningValue.textContent = getLagerForecastWarningText(null, trigger, trigger.dataset.lagerDrawerForecast || 'Keine Prognose'); } });";
+    echo "  const syncLagerForecast = (forecast, productId) => { const drawer = getDrawer(); const trigger = contentRoot.querySelector('[data-lager-drawer-open][aria-expanded=\"true\"]') || contentRoot.querySelector('[data-lager-row][data-lager-id=\"' + (productId || '') + '\"] [data-lager-drawer-open]'); if (!forecast || !drawer) { return; } const forecastDate = forecast.date ? new Date(forecast.date + 'T00:00:00') : null; const expiryDate = forecast.expiryDate ? new Date(forecast.expiryDate + 'T00:00:00') : null; const mhdWarning = Boolean(forecastDate && expiryDate && forecastDate > expiryDate); const nearExpiryWarning = Boolean(forecastDate && expiryDate && forecastDate >= new Date(new Date(expiryDate).setMonth(expiryDate.getMonth() - 3)) && forecastDate <= expiryDate); const depleted = forecast.status === 'depleted'; const forecastWarning = depleted || nearExpiryWarning; const date = forecastDate ? forecastDate.toLocaleDateString('de-CH') : 'Keine Prognose'; const text = depleted ? date + ' (BESTAND ENDE)' : (nearExpiryWarning || mhdWarning ? date + ' (MHD: ' + expiryDate.toLocaleDateString('de-CH') + ')' : date); const value = drawer.querySelector('[data-lager-drawer-forecast-value]'); if (value) { value.textContent = text; } const header = drawer.querySelector('[data-lager-drawer-warning-header]'); const title = drawer.querySelector('[data-lager-drawer-warning-title]'); const warningValue = drawer.querySelector('[data-lager-drawer-warning-value]'); if (trigger) { trigger.dataset.lagerDrawerForecast = text; trigger.dataset.lagerDrawerForecastStatus = forecast.status || 'no_demand'; trigger.dataset.lagerDrawerForecastWarning = forecastWarning ? 'true' : 'false'; trigger.dataset.lagerDrawerForecastMhdWarning = mhdWarning ? 'true' : 'false'; if (header) { header.classList.toggle('sg-card-segment--darkgreen', !forecastWarning && !mhdWarning); header.classList.toggle('sg-card-segment--signal-red', forecastWarning); header.classList.toggle('sg-card-segment--signal-yellow', mhdWarning); } if (title) { title.textContent = getLagerWarningTitle(trigger); } if (warningValue) { warningValue.textContent = forecastWarning || mhdWarning ? text : 'Keine akute Warnung.'; warningValue.classList.toggle('sg-strong', forecastWarning || mhdWarning); warningValue.classList.toggle('lager-forecast-warning', forecastWarning); warningValue.classList.toggle('lager-forecast-mhd-warning', mhdWarning); } const row = trigger.closest('[data-lager-row]'); const cells = row?.querySelectorAll('[role=\"cell\"]'); const forecastCell = cells?.[cells.length - 1]; if (forecastCell && cells.length === 3) { forecastCell.textContent = text; } } };";
+    echo "  document.addEventListener('lager-save-complete', (event) => { const forecast = event.detail?.forecast; const productId = event.detail?.productId || ''; const trigger = contentRoot.querySelector('[data-lager-drawer-open][aria-expanded=\"true\"]') || contentRoot.querySelector('[data-lager-row][data-lager-id=\"' + productId + '\"] [data-lager-drawer-open]'); const drawer = getDrawer(); if (!forecast || !drawer) { return; } const date = forecast.date ? new Date(forecast.date + 'T00:00:00').toLocaleDateString('de-CH') : 'Keine Prognose'; const text = forecast.status === 'depleted' ? date + ' (BESTAND ENDE)' : date; const value = drawer.querySelector('[data-lager-drawer-forecast-value]'); if (value) { value.textContent = text; } if (trigger) { trigger.dataset.lagerDrawerForecast = text; const row = trigger.closest('[data-lager-row]'); const cells = row?.querySelectorAll('[role=\"cell\"]'); const forecastCell = cells?.[cells.length - 1]; if (forecastCell && cells.length === 3) { forecastCell.textContent = text; } } });";
+    echo "  document.addEventListener('click', (event) => {";
     echo "    const trigger = event.target.closest('[data-lager-drawer-open]');";
     echo "    if (trigger) { event.preventDefault(); if (window.matchMedia('(max-width: 767px)').matches) { openLagerMobileDetail(trigger); return; } const drawer = getDrawer(); if (!drawer) { return; } const type = trigger.dataset.lagerDrawerType || 'Lager'; const name = trigger.dataset.lagerDrawerName || ''; const value = trigger.dataset.lagerDrawerValue || ''; drawer.querySelector('[data-lager-drawer-title]').textContent = type + ': ' + name; drawer.querySelector('[data-lager-drawer-name-value]').textContent = name; const valueRow = drawer.querySelector('[data-lager-drawer-value-row]'); if (valueRow) { valueRow.hidden = false; } drawer.querySelector('[data-lager-drawer-value-label]').textContent = type === 'Produkt' ? 'Anzahl im Lager:' : 'Artikelnummer:'; drawer.querySelector('[data-lager-drawer-value-value]').textContent = value; drawer.querySelectorAll('[data-lager-drawer-topic]').forEach((card) => { card.hidden = type !== 'Produkt'; }); if (type === 'Produkt') { const forecast = trigger.dataset.lagerDrawerForecast || 'Keine Prognose'; const warning = trigger.dataset.lagerDrawerForecastWarning === 'true' || trigger.dataset.lagerDrawerForecastMhdWarning === 'true'; const warningValue = drawer.querySelector('[data-lager-drawer-warning-value]'); if (warningValue) { warningValue.textContent = warning ? forecast : 'Keine akute Warnung.'; warningValue.classList.toggle('sg-strong', warning); warningValue.classList.toggle('lager-forecast-warning', trigger.dataset.lagerDrawerForecastWarning === 'true'); warningValue.classList.toggle('lager-forecast-mhd-warning', trigger.dataset.lagerDrawerForecastMhdWarning === 'true'); } drawer.querySelector('[data-lager-drawer-lot-number]').textContent = trigger.dataset.lagerDrawerLotNumber || 'Nicht hinterlegt'; drawer.querySelector('[data-lager-drawer-manufacturer-name]').textContent = trigger.dataset.lagerDrawerManufacturerName || 'Nicht hinterlegt'; drawer.querySelector('[data-lager-drawer-manufacturer-lot-number]').textContent = trigger.dataset.lagerDrawerManufacturerLotNumber || 'Nicht hinterlegt'; drawer.querySelector('[data-lager-drawer-mfg-date]').textContent = trigger.dataset.lagerDrawerMfgDate || 'Nicht hinterlegt'; drawer.querySelector('[data-lager-drawer-expiry-date]').textContent = trigger.dataset.lagerDrawerExpiryDate || 'Nicht hinterlegt'; drawer.querySelector('[data-lager-drawer-purchase-date]').textContent = trigger.dataset.lagerDrawerPurchaseDate || 'Nicht hinterlegt'; const virtualLot = trigger.dataset.lagerDrawerVirtualLotNumber || ''; drawer.querySelector('[data-lager-drawer-virtual-lot-value]').textContent = virtualLot ? 'Virtuelle Charge: ' + virtualLot : 'Keine virtuelle Fehlbestandscharge vorhanden.'; const manufacturer = drawer.querySelector('[data-lager-manufacturer]'); if (manufacturer) { manufacturer.value = trigger.dataset.lagerDrawerManufacturerPartyId || ''; } const manufacturerLot = drawer.querySelector('[data-lager-manufacturer-lot]'); if (manufacturerLot) { manufacturerLot.value = trigger.dataset.lagerDrawerManufacturerLotNumber || ''; } const mfgDate = drawer.querySelector('[data-lager-mfg-date]'); if (mfgDate) { mfgDate.value = trigger.dataset.lagerDrawerMfgDate || ''; } const expiryDate = drawer.querySelector('[data-lager-expiry-date]'); if (expiryDate) { expiryDate.value = trigger.dataset.lagerDrawerExpiryDate || ''; } const purchaseDate = drawer.querySelector('[data-lager-purchase-date]'); if (purchaseDate) { purchaseDate.value = trigger.dataset.lagerDrawerPurchaseDate || ''; } const editForm = drawer.querySelector('[data-lager-edit-form]'); if (editForm) { editForm.hidden = true; } drawer.dataset.lagerActiveLotId = trigger.dataset.lagerDrawerLotId || ''; } setDrawerState(true); contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((button) => button.setAttribute('aria-expanded', String(button === trigger))); return; }";
     echo "    if (event.target.closest('[data-lager-drawer-close]') || event.target.closest('[data-lager-drawer-backdrop]')) { closeDrawer(); }";
     echo "  });";
-    echo "  const postLagerChange = async (payload) => { const response = await fetch('/api/lager-charge.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...payload, csrfToken: contentRoot.querySelector('[data-lager-csrf-token]')?.dataset.lagerCsrfToken || '' }) }); const result = await response.json(); if (!response.ok || result.ok !== true) { throw new Error(result.error || 'Speichern fehlgeschlagen'); } return result; };";
+    echo "  document.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (!trigger || trigger.dataset.lagerDrawerType !== 'Produkt' || window.matchMedia('(max-width: 767px)').matches) { return; } const header = contentRoot.querySelector('[data-lager-drawer-warning-header]'); const title = contentRoot.querySelector('[data-lager-drawer-warning-title]'); if (!header || !title) { return; } const forecastWarning = trigger.dataset.lagerDrawerForecastWarning === 'true'; const mhdWarning = trigger.dataset.lagerDrawerForecastMhdWarning === 'true'; title.textContent = getLagerWarningTitle(trigger); header.classList.toggle('sg-card-segment--darkgreen', !forecastWarning && !mhdWarning); header.classList.toggle('sg-card-segment--signal-red', forecastWarning); header.classList.toggle('sg-card-segment--signal-yellow', mhdWarning); });";
-    echo "  contentRoot.addEventListener('click', (event) => { const editButton = event.target.closest('[data-lager-edit-open]'); if (editButton) { const drawer = getDrawer(); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (editForm) { editForm.hidden = false; } return; } const closeButton = event.target.closest('[data-lager-edit-close]'); if (closeButton) { const drawer = getDrawer(); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (editForm) { editForm.hidden = true; } } });";
+    echo "  document.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (!trigger || trigger.dataset.lagerDrawerType !== 'Produkt' || window.matchMedia('(max-width: 767px)').matches) { return; } setLagerEditMode(false); const drawer = getDrawer(); const currentQty = drawer?.querySelector('[data-lager-drawer-current-qty]'); const qtyIn = drawer?.querySelector('[data-lager-drawer-qty-in]'); const lotNumber = drawer?.querySelector('[data-lager-lot-number]'); if (currentQty) { currentQty.textContent = trigger.dataset.lagerDrawerCurrentQty || '0'; } if (qtyIn) { qtyIn.textContent = trigger.dataset.lagerDrawerQtyIn || '0'; } if (lotNumber) { lotNumber.value = trigger.dataset.lagerDrawerLotNumber || ''; } const productId = trigger.closest('[data-lager-row]')?.dataset.lagerId || ''; contentRoot.querySelectorAll('[data-lager-historical-product]').forEach((product) => { product.hidden = product.dataset.lagerHistoricalProduct !== productId; }); });";
-    echo "  contentRoot.addEventListener('submit', async (event) => { const editForm = event.target.closest('[data-lager-edit-form-element]'); const manufacturerForm = event.target.closest('[data-lager-manufacturer-form]'); if (!editForm && !manufacturerForm) { return; } event.preventDefault(); const drawer = getDrawer(); const status = drawer?.querySelector('[data-lager-edit-status]'); if (status) { status.textContent = 'Speichern läuft …'; } try { if (manufacturerForm) { const result = await postLagerChange({ action: 'create_manufacturer', name: manufacturerForm.querySelector('[data-lager-new-manufacturer-name]')?.value || '', email: manufacturerForm.querySelector('[data-lager-new-manufacturer-email]')?.value || '', phone: manufacturerForm.querySelector('[data-lager-new-manufacturer-phone]')?.value || '' }); const select = drawer?.querySelector('[data-lager-manufacturer]'); if (select && result.manufacturer) { const option = document.createElement('option'); option.value = String(result.manufacturer.id); option.textContent = result.manufacturer.name; select.appendChild(option); select.value = String(result.manufacturer.id); } manufacturerForm.reset(); if (status) { status.textContent = 'Hersteller angelegt. Bitte Charge speichern.'; } return; } await postLagerChange({ action: 'update_lot', lotId: drawer?.dataset.lagerActiveLotId || '', manufacturerPartyId: drawer?.querySelector('[data-lager-manufacturer]')?.value || null, manufacturerLotNumber: drawer?.querySelector('[data-lager-manufacturer-lot]')?.value || '', mfgDate: drawer?.querySelector('[data-lager-mfg-date]')?.value || '', expiryDate: drawer?.querySelector('[data-lager-expiry-date]')?.value || '', purchaseDate: drawer?.querySelector('[data-lager-purchase-date]')?.value || '' }); window.location.reload(); } catch (error) { if (status) { status.textContent = error instanceof Error ? error.message : 'Speichern fehlgeschlagen'; } } });";
+    echo "  const postLagerChange = async (payload) => { const response = await fetch('/api/lager-charge.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...payload, csrfToken: contentRoot.querySelector('[data-lager-csrf-token]')?.dataset.lagerCsrfToken || '' }) }); const result = await response.json(); if (!response.ok || result.ok !== true) { throw new Error(result.error || 'Speichern fehlgeschlagen'); } syncLagerForecast(result.forecast, result.productId); const trigger = contentRoot.querySelector('[data-lager-drawer-open][aria-expanded=\"true\"]') || contentRoot.querySelector('[data-lager-row][data-lager-id=\"' + (result.productId || '') + '\"] [data-lager-drawer-open]'); const drawer = getDrawer(); const warningValue = drawer?.querySelector('[data-lager-drawer-warning-value]'); if (warningValue) { warningValue.textContent = getLagerForecastWarningText(result.forecast, trigger, trigger?.dataset.lagerDrawerForecast || 'Keine Prognose'); } return result; };";
+    echo "  document.addEventListener('click', (event) => { const editButton = event.target.closest('[data-lager-edit-open]'); if (editButton) { const drawer = getDrawer(); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (editForm) { editForm.hidden = false; } return; } const closeButton = event.target.closest('[data-lager-edit-close]'); if (closeButton) { const drawer = getDrawer(); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (editForm) { editForm.hidden = true; } } });";
+    echo "  const setLagerEditMode = (editing) => { const drawer = getDrawer(); const readView = drawer?.querySelector('[data-lager-read-view]'); const editForm = drawer?.querySelector('[data-lager-edit-form]'); if (readView) { readView.hidden = editing; } if (editForm) { editForm.hidden = !editing; } };";
+    echo "  document.addEventListener('click', (event) => { if (event.target.closest('[data-lager-edit-open]')) { setLagerEditMode(true); } if (event.target.closest('[data-lager-edit-close]')) { clearLagerMovementInputs(); setLagerEditMode(false); } });";
+    echo "  const syncLagerReadView = () => { const drawer = getDrawer(); if (!drawer) { return; } const manufacturer = drawer.querySelector('[data-lager-manufacturer]'); const values = { '[data-lager-drawer-manufacturer-name]': manufacturer?.selectedOptions?.[0]?.textContent || 'Nicht hinterlegt', '[data-lager-drawer-manufacturer-lot-number]': drawer.querySelector('[data-lager-manufacturer-lot]')?.value || 'Nicht hinterlegt', '[data-lager-drawer-mfg-date]': drawer.querySelector('[data-lager-mfg-date]')?.value || 'Nicht hinterlegt', '[data-lager-drawer-expiry-date]': drawer.querySelector('[data-lager-expiry-date]')?.value || 'Nicht hinterlegt', '[data-lager-drawer-purchase-date]': drawer.querySelector('[data-lager-purchase-date]')?.value || 'Nicht hinterlegt' }; Object.entries(values).forEach(([selector, value]) => { const target = drawer.querySelector(selector); if (target) { target.textContent = value; } }); const trigger = contentRoot.querySelector('[data-lager-drawer-open][aria-expanded=\"true\"]'); if (trigger) { trigger.dataset.lagerDrawerManufacturerName = values['[data-lager-drawer-manufacturer-name]']; trigger.dataset.lagerDrawerManufacturerLotNumber = values['[data-lager-drawer-manufacturer-lot-number]']; trigger.dataset.lagerDrawerMfgDate = values['[data-lager-drawer-mfg-date]']; trigger.dataset.lagerDrawerExpiryDate = values['[data-lager-drawer-expiry-date]']; trigger.dataset.lagerDrawerPurchaseDate = values['[data-lager-drawer-purchase-date]']; } };";
+    echo "  const syncLagerBalanceView = (balance) => { const drawer = getDrawer(); if (!drawer || !balance) { return; } const currentQty = drawer.querySelector('[data-lager-drawer-current-qty]'); const qtyIn = drawer.querySelector('[data-lager-drawer-qty-in]'); if (currentQty) { currentQty.textContent = String(balance.qty_net ?? 0); } if (qtyIn) { qtyIn.textContent = String(balance.qty_in ?? 0); } const trigger = contentRoot.querySelector('[data-lager-drawer-open][aria-expanded=\"true\"]'); if (trigger) { trigger.dataset.lagerDrawerCurrentQty = String(balance.qty_net ?? 0); trigger.dataset.lagerDrawerQtyIn = String(balance.qty_in ?? 0); } };";
+    echo "  const syncLagerActiveLotView = (lot) => { const drawer = getDrawer(); const trigger = contentRoot.querySelector('[data-lager-drawer-open][aria-expanded=\"true\"]'); if (!drawer || !lot || !trigger) { return; } const manufacturer = drawer.querySelector('[data-lager-manufacturer]'); if (manufacturer) { manufacturer.value = lot.manufacturer_party_id ?? ''; } const manufacturerName = manufacturer?.selectedOptions?.[0]?.textContent || 'Nicht hinterlegt'; const values = { '[data-lager-drawer-lot-number]': lot.lot_number || 'Nicht hinterlegt', '[data-lager-drawer-manufacturer-name]': manufacturerName, '[data-lager-drawer-manufacturer-lot-number]': lot.manufacturer_lot_number || 'Nicht hinterlegt', '[data-lager-drawer-mfg-date]': lot.mfg_date || 'Nicht hinterlegt', '[data-lager-drawer-expiry-date]': lot.expiry_date || 'Nicht hinterlegt', '[data-lager-drawer-purchase-date]': lot.purchase_date || 'Nicht hinterlegt' }; Object.entries(values).forEach(([selector, value]) => { const target = drawer.querySelector(selector); if (target) { target.textContent = value; } }); const formValues = { '[data-lager-lot-number]': lot.lot_number || '', '[data-lager-manufacturer-lot]': lot.manufacturer_lot_number || '', '[data-lager-mfg-date]': lot.mfg_date || '', '[data-lager-expiry-date]': lot.expiry_date || '', '[data-lager-purchase-date]': lot.purchase_date || '' }; Object.entries(formValues).forEach(([selector, value]) => { const input = drawer.querySelector(selector); if (input) { input.value = value; } }); trigger.dataset.lagerDrawerLotId = String(lot.id || lot.lot_id || ''); trigger.dataset.lagerDrawerLotNumber = lot.lot_number || ''; trigger.dataset.lagerDrawerManufacturerPartyId = String(lot.manufacturer_party_id ?? ''); trigger.dataset.lagerDrawerManufacturerName = manufacturerName; trigger.dataset.lagerDrawerManufacturerLotNumber = lot.manufacturer_lot_number || ''; trigger.dataset.lagerDrawerMfgDate = lot.mfg_date || ''; trigger.dataset.lagerDrawerExpiryDate = lot.expiry_date || ''; trigger.dataset.lagerDrawerPurchaseDate = lot.purchase_date || ''; drawer.dataset.lagerActiveLotId = String(lot.id || lot.lot_id || ''); };";
+    echo "  const clearLagerMovementInputs = () => { const drawer = getDrawer(); if (!drawer) { return; } drawer.querySelectorAll('[data-lager-receipt-qty], [data-lager-adjustment-qty], [data-lager-out-qty]').forEach((input) => { input.value = ''; }); };";
+    echo "  const syncLagerOpenLotCard = (lot, balance, exactCard = null) => { const drawer = getDrawer(); const lotId = lot?.id || lot?.lot_id || ''; const card = exactCard || drawer?.querySelector('[data-lager-open-card=\"' + lotId + '\"]'); if (!card) { return; } const manufacturerSelect = card.querySelector('[data-lager-open-manufacturer]') || drawer?.querySelector('[data-lager-new-manufacturer]'); const qualified = Boolean(lot?.lot_number && lot?.manufacturer_party_id && lot?.manufacturer_lot_number && lot?.mfg_date && lot?.expiry_date && lot?.purchase_date && Number(balance?.qty_net || 0) > 0); const selected = lot?.next_active === true; const values = { '[data-lager-open-card-lot-number]': lot?.lot_number || 'Nicht hinterlegt', '[data-lager-open-card-qty-net]': String(balance?.qty_net ?? 0), '[data-lager-open-card-qty-in]': String(balance?.qty_in ?? 0), '[data-lager-open-card-manufacturer]': manufacturerSelect?.selectedOptions?.[0]?.textContent || 'Nicht hinterlegt', '[data-lager-open-card-manufacturer-lot]': lot?.manufacturer_lot_number || 'Nicht hinterlegt', '[data-lager-open-card-mfg-date]': lot?.mfg_date || 'Nicht hinterlegt', '[data-lager-open-card-expiry-date]': lot?.expiry_date || 'Nicht hinterlegt', '[data-lager-open-card-purchase-date]': lot?.purchase_date || 'Nicht hinterlegt' }; Object.entries(values).forEach(([selector, value]) => { const target = card.querySelector(selector); if (target) { target.textContent = value; } }); card.classList.toggle('sg-lager-open-lot--next-active', selected); const selectedLabel = card.querySelector('[data-lager-open-card-next-active]'); if (selectedLabel) { selectedLabel.textContent = selected ? 'Als nächste aktive Charge ausgewählt' : 'Nicht ausgewählt'; } const selectButton = card.querySelector('[data-lager-open-select]'); if (selectButton) { selectButton.dataset.lagerOpenSelectable = String(qualified); selectButton.disabled = !qualified || selected; selectButton.setAttribute('aria-disabled', String(!qualified || selected)); } };";
+    echo "  const appendLagerOpenLotCard = (lot, balance) => { if (lot?.status === 'current') { syncLagerActiveLotView(lot); syncLagerBalanceView(balance); return null; } const drawer = getDrawer(); const product = drawer?.querySelector('[data-lager-open-product=\"' + (drawer?.dataset.lagerProductId || '') + '\"]'); const list = product?.querySelector('[data-lager-open-lot-list]'); const templateProduct = drawer?.querySelector('[data-lager-open-lot-template]')?.content.querySelector('[data-lager-open-product]'); const card = templateProduct?.querySelector('[data-lager-open-card-wrapper]')?.cloneNode(true); const lotId = String(lot?.id || lot?.lot_id || ''); if (!list || !card || !lotId) { return null; } card.dataset.lagerOpenCardWrapper = lotId; const readView = card.querySelector('[data-lager-open-card]'); if (readView) { readView.dataset.lagerOpenCard = lotId; } const editTitle = card.querySelector('[id^=\"lager-open-charge-data-\"]'); if (editTitle) { editTitle.id = 'lager-open-charge-data-' + lotId; editTitle.closest('section')?.setAttribute('aria-labelledby', editTitle.id); } const confirmationTitle = card.querySelector('[id^=\"lager-open-confirmation-title-\"]'); if (confirmationTitle) { confirmationTitle.id = 'lager-open-confirmation-title-' + lotId; confirmationTitle.closest('[data-lager-open-confirmation-card]')?.setAttribute('aria-labelledby', confirmationTitle.id); } const deleteTitle = card.querySelector('[id^=\"lager-open-delete-title-\"]'); if (deleteTitle) { deleteTitle.id = 'lager-open-delete-title-' + lotId; deleteTitle.closest('[data-lager-open-delete-confirmation]')?.setAttribute('aria-labelledby', deleteTitle.id); } const setValue = (selector, value) => { const input = card.querySelector(selector); if (input) { input.value = value ?? ''; } }; setValue('[data-lager-open-lot-number]', lot.lot_number); setValue('[data-lager-open-manufacturer]', lot.manufacturer_party_id); setValue('[data-lager-open-manufacturer-lot]', lot.manufacturer_lot_number); setValue('[data-lager-open-mfg-date]', lot.mfg_date); setValue('[data-lager-open-expiry-date]', lot.expiry_date); setValue('[data-lager-open-purchase-date]', lot.purchase_date); setValue('[data-lager-open-target-qty]', balance?.qty_net ?? 0); const qualified = Boolean(lot.lot_number && lot.manufacturer_party_id && lot.manufacturer_lot_number && lot.mfg_date && lot.expiry_date && lot.purchase_date && Number(balance?.qty_net || 0) > 0); const selected = lot.next_active === true; card.classList.toggle('sg-lager-open-lot--next-active', selected); const selectedLabel = card.querySelector('[data-lager-open-card-next-active]'); if (selectedLabel) { selectedLabel.textContent = selected ? 'Als nächste aktive Charge ausgewählt' : 'Nicht ausgewählt'; } const selectButton = card.querySelector('[data-lager-open-select]'); if (selectButton) { selectButton.dataset.lagerOpenSelectable = String(qualified); selectButton.disabled = !qualified || selected; selectButton.setAttribute('aria-disabled', String(!qualified || selected)); } list.append(card); syncLagerOpenLotCard(lot, balance, card); return card; };";
+    echo "  const resetLagerNewLotConfirmation = () => { const drawer = getDrawer(); const confirmation = drawer?.querySelector('[data-lager-new-confirmation-card]'); const list = drawer?.querySelector('[data-lager-new-confirmation-empty-fields]'); const form = drawer?.querySelector('[data-lager-new-lot-form-element]'); if (confirmation) { confirmation.hidden = true; } if (list) { list.replaceChildren(); } if (form) { form.dataset.confirmationAccepted = 'false'; } if (drawer) { drawer.dataset.dialogOpen = 'false'; } };";
+    echo "  const resetLagerOpenLotConfirmations = () => { const drawer = getDrawer(); drawer?.querySelectorAll('[data-lager-open-card-wrapper]').forEach((card) => { const confirmation = card.querySelector('[data-lager-open-confirmation-card]'); const list = card.querySelector('[data-lager-open-confirmation-empty-fields]'); const form = card.querySelector('[data-lager-open-edit-form-element]'); if (confirmation) { confirmation.hidden = true; } if (list) { list.replaceChildren(); } if (form) { form.dataset.confirmationAccepted = 'false'; } card.dataset.dialogOpen = 'false'; }); };";
+    echo "  document.addEventListener('click', (event) => { const trigger = event.target.closest('[data-lager-drawer-open]'); if (!trigger || trigger.dataset.lagerDrawerType !== 'Produkt' || window.matchMedia('(max-width: 767px)').matches) { return; } const drawer = getDrawer(); const productId = trigger.closest('[data-lager-row]')?.dataset.lagerId || ''; const openProduct = drawer?.querySelector('[data-lager-open-product=\"' + productId + '\"]'); drawer?.querySelectorAll('[data-lager-open-product]').forEach((product) => { product.hidden = product !== openProduct; product.querySelectorAll('[data-lager-open-edit-form]').forEach((form) => { form.hidden = true; }); product.querySelectorAll('[data-lager-open-card]').forEach((readView) => { readView.hidden = false; }); }); resetLagerNewLotConfirmation(); resetLagerOpenLotConfirmations(); const newForm = drawer?.querySelector('[data-lager-drawer-topic=\"new-lot-form\"]'); const newAction = drawer?.querySelector('[data-lager-drawer-topic=\"new-lot-action\"]'); if (newForm) { newForm.hidden = true; } if (newAction) { newAction.hidden = false; } const notificationWrapper = drawer?.querySelector('[data-lager-new-lot-notification-wrapper]'); const notification = drawer?.querySelector('[data-lager-new-lot-notification]'); const shortageQty = trigger.dataset.lagerDrawerVirtualShortageQty || '0'; const hasShortage = shortageQty !== '0' && shortageQty !== '0,00'; if (notificationWrapper) { notificationWrapper.hidden = !hasShortage; } if (notification && hasShortage) { notification.textContent = 'Für dieses Produkt bestehen virtuelle Fehlbestände in Höhe von ' + shortageQty + '. Die Eingangsmenge wird nach Aktivierung der Charge zur Nachallokation verwendet.'; } const setValue = (selector, value) => { const field = drawer?.querySelector(selector); if (field) { field.value = value || ''; } }; setValue('[data-lager-new-lot-number]', ''); setValue('[data-lager-new-manufacturer]', ''); setValue('[data-lager-new-manufacturer-lot]', ''); setValue('[data-lager-new-mfg-date]', ''); setValue('[data-lager-new-expiry-date]', ''); setValue('[data-lager-new-purchase-date]', ''); setValue('[data-lager-new-receipt-qty]', ''); if (drawer) { drawer.dataset.lagerOpenLotId = ''; drawer.dataset.lagerProductId = productId; } });";
+    echo "  document.addEventListener('click', (event) => { const openButton = event.target.closest('[data-lager-new-lot-open]'); if (openButton) { const drawer = getDrawer(); const form = drawer?.querySelector('[data-lager-drawer-topic=\"new-lot-form\"]'); const action = drawer?.querySelector('[data-lager-drawer-topic=\"new-lot-action\"]'); resetLagerNewLotConfirmation(); if (form) { form.hidden = false; } if (action) { action.hidden = true; } return; } if (event.target.closest('[data-lager-new-lot-close]')) { const drawer = getDrawer(); const form = drawer?.querySelector('[data-lager-drawer-topic=\"new-lot-form\"]'); const action = drawer?.querySelector('[data-lager-drawer-topic=\"new-lot-action\"]'); resetLagerNewLotConfirmation(); if (form) { form.hidden = true; } if (action) { action.hidden = false; } } });";
+    echo "  document.addEventListener('click', (event) => { const editButton = event.target.closest('[data-lager-open-edit-open]'); if (editButton) { const card = editButton.closest('[data-lager-open-card-wrapper]'); const form = card?.querySelector('[data-lager-open-edit-form]'); const readView = card?.querySelector('[data-lager-open-card]'); resetLagerOpenLotConfirmations(); if (form) { form.hidden = false; } if (readView) { readView.hidden = true; } return; } const closeButton = event.target.closest('[data-lager-open-edit-close]'); if (closeButton) { const card = closeButton.closest('[data-lager-open-card-wrapper]'); const form = card?.querySelector('[data-lager-open-edit-form]'); const readView = card?.querySelector('[data-lager-open-card]'); resetLagerOpenLotConfirmations(); if (form) { form.hidden = true; } if (readView) { readView.hidden = false; } } });";
+    echo "  document.addEventListener('input', (event) => { const input = event.target.closest('[data-lager-open-delete-confirmation-input]'); if (!input) { return; } const card = input.closest('[data-lager-open-card-wrapper]'); const submit = card?.querySelector('[data-lager-open-delete-confirmation-submit]'); const valid = input.value === 'DELETE'; if (submit) { submit.disabled = !valid; submit.setAttribute('aria-disabled', String(!valid)); submit.classList.toggle('sg-button--process-inactive', !valid); } });";
+    echo "  document.addEventListener('click', async (event) => { const selectButton = event.target.closest('[data-lager-open-select]'); if (!selectButton) { return; } const card = selectButton.closest('[data-lager-open-card-wrapper]'); const product = card?.closest('[data-lager-open-product]'); const drawer = getDrawer(); const productId = product?.dataset.lagerOpenProduct || drawer?.dataset.lagerProductId || ''; const lotId = card?.dataset.lagerOpenCardWrapper || ''; if (!productId || !lotId) { return; } selectButton.disabled = true; try { const result = await postLagerChange({ action: 'select_open_lot', productId, lotId }); if (result.currentLot?.id && String(result.currentLot.id) === String(lotId)) { card?.remove(); syncLagerActiveLotView(result.currentLot); syncLagerBalanceView({ qty_net: result.currentLot.qty_net, qty_in: result.currentLot.qty_in, qty_out: result.currentLot.qty_out }); return; } product.querySelectorAll('[data-lager-open-card-wrapper]').forEach((candidate) => { const selected = candidate === card; candidate.classList.toggle('sg-lager-open-lot--next-active', selected); const label = candidate.querySelector('[data-lager-open-card-next-active]'); if (label) { label.textContent = selected ? 'Als nächste aktive Charge ausgewählt' : 'Nicht ausgewählt'; } const button = candidate.querySelector('[data-lager-open-select]'); if (button) { button.disabled = selected || button.dataset.lagerOpenSelectable !== 'true'; button.setAttribute('aria-disabled', String(button.disabled)); } }); } catch (error) { const status = card?.querySelector('[data-lager-open-edit-status]'); if (status) { status.textContent = error instanceof Error ? error.message : 'Auswahl fehlgeschlagen'; } selectButton.disabled = false; selectButton.setAttribute('aria-disabled', 'false'); } });";
+    echo "  document.addEventListener('click', async (event) => { const deleteButton = event.target.closest('[data-lager-open-delete]'); if (deleteButton) { const card = deleteButton.closest('[data-lager-open-card-wrapper]'); const confirmation = card?.querySelector('[data-lager-open-delete-confirmation]'); const input = card?.querySelector('[data-lager-open-delete-confirmation-input]'); const submit = card?.querySelector('[data-lager-open-delete-confirmation-submit]'); if (input) { input.value = ''; } if (submit) { submit.disabled = true; submit.setAttribute('aria-disabled', 'true'); submit.classList.add('sg-button--process-inactive'); } if (confirmation) { confirmation.hidden = false; } if (card) { card.dataset.dialogOpen = 'true'; } return; } const cancel = event.target.closest('[data-lager-open-delete-confirmation-cancel]'); if (cancel) { const card = cancel.closest('[data-lager-open-card-wrapper]'); const confirmation = card?.querySelector('[data-lager-open-delete-confirmation]'); if (confirmation) { confirmation.hidden = true; } if (card) { card.dataset.dialogOpen = 'false'; } return; } const submit = event.target.closest('[data-lager-open-delete-confirmation-submit]'); if (!submit || submit.disabled) { return; } const card = submit.closest('[data-lager-open-card-wrapper]'); const confirmation = card?.querySelector('[data-lager-open-delete-confirmation]'); const status = card?.querySelector('[data-lager-open-delete-status]'); if (status) { status.textContent = 'Löschen läuft …'; } submit.disabled = true; try { const result = await postLagerChange({ action: 'delete_open_lot', lotId: card?.dataset.lagerOpenCardWrapper || '' }); if (result.currentLot) { syncLagerActiveLotView(result.currentLot); syncLagerBalanceView({ qty_net: result.currentLot.qty_net, qty_in: result.currentLot.qty_in, qty_out: result.currentLot.qty_out }); } const productId = card?.closest('[data-lager-open-product]')?.dataset.lagerOpenProduct || ''; contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((trigger) => { if (trigger.closest('[data-lager-row]')?.dataset.lagerId === productId) { trigger.dataset.lagerOpenLotId = ''; } }); const drawer = getDrawer(); if (drawer) { drawer.dataset.lagerOpenLotId = ''; } card?.remove(); } catch (error) { if (status) { status.textContent = error instanceof Error ? error.message : 'Löschen fehlgeschlagen'; } submit.disabled = false; } });";
+    echo "  document.addEventListener('click', (event) => { const cancel = event.target.closest('[data-lager-open-confirmation-cancel]'); if (cancel) { const card = cancel.closest('[data-lager-open-card-wrapper]'); const confirmation = card?.querySelector('[data-lager-open-confirmation-card]'); if (confirmation) { confirmation.hidden = true; } if (card) { card.dataset.dialogOpen = 'false'; } const form = card?.querySelector('[data-lager-open-edit-form-element]'); if (form) { form.dataset.confirmationAccepted = 'false'; } return; } const confirm = event.target.closest('[data-lager-open-confirmation-submit]'); if (confirm) { const card = confirm.closest('[data-lager-open-card-wrapper]'); const confirmation = card?.querySelector('[data-lager-open-confirmation-card]'); const form = card?.querySelector('[data-lager-open-edit-form-element]'); if (confirmation) { confirmation.hidden = true; } if (card) { card.dataset.dialogOpen = 'false'; } if (form) { form.dataset.confirmationAccepted = 'true'; form.requestSubmit(); } } });";
+    echo "  document.addEventListener('submit', async (event) => { const openLotForm = event.target.closest('[data-lager-open-edit-form-element]'); if (!openLotForm) { return; } event.preventDefault(); const drawer = getDrawer(); const card = openLotForm.closest('[data-lager-open-card-wrapper]'); const editSection = card?.querySelector('[data-lager-open-edit-form]'); const fields = [{ label: 'Naurua-Chargennummer', input: openLotForm.querySelector('[data-lager-open-lot-number]') }, { label: 'Hersteller', input: openLotForm.querySelector('[data-lager-open-manufacturer]') }, { label: 'Hersteller-Chargennummer', input: openLotForm.querySelector('[data-lager-open-manufacturer-lot]') }, { label: 'Herstellungsdatum', input: openLotForm.querySelector('[data-lager-open-mfg-date]') }, { label: 'MHD', input: openLotForm.querySelector('[data-lager-open-expiry-date]') }, { label: 'Einkaufsdatum', input: openLotForm.querySelector('[data-lager-open-purchase-date]') }, { label: 'Menge', input: openLotForm.querySelector('[data-lager-open-target-qty]') }]; const emptyFields = fields.filter((field) => (field.input?.value || '').trim() === ''); if (emptyFields.length > 0 && openLotForm.dataset.confirmationAccepted !== 'true') { const confirmation = card?.querySelector('[data-lager-open-confirmation-card]'); const emptyFieldsList = card?.querySelector('[data-lager-open-confirmation-empty-fields]'); if (emptyFieldsList) { emptyFieldsList.replaceChildren(...emptyFields.map((field) => { const item = document.createElement('div'); item.className = 'sg-body'; item.textContent = field.label; return item; })); } if (confirmation) { confirmation.hidden = false; } if (card) { card.dataset.dialogOpen = 'true'; } return; } openLotForm.dataset.confirmationAccepted = 'false'; const status = openLotForm.querySelector('[data-lager-open-edit-status]'); if (status) { status.textContent = 'Speichern läuft …'; } try { const targetQtyInput = openLotForm.querySelector('[data-lager-open-target-qty]'); const result = await postLagerChange({ action: 'prepare_lot', productId: drawer?.dataset.lagerProductId || '', lotId: card?.dataset.lagerOpenCardWrapper || '', lotNumber: openLotForm.querySelector('[data-lager-open-lot-number]')?.value || '', manufacturerPartyId: openLotForm.querySelector('[data-lager-open-manufacturer]')?.value || null, manufacturerLotNumber: openLotForm.querySelector('[data-lager-open-manufacturer-lot]')?.value || '', mfgDate: openLotForm.querySelector('[data-lager-open-mfg-date]')?.value || '', purchaseDate: openLotForm.querySelector('[data-lager-open-purchase-date]')?.value || '', expiryDate: openLotForm.querySelector('[data-lager-open-expiry-date]')?.value || '', targetQty: targetQtyInput?.value.trim() === '' ? '0' : targetQtyInput?.value || '' }); if (result.lot?.status === 'current') { card?.remove(); syncLagerActiveLotView(result.lot); syncLagerBalanceView(result.balance); } else { syncLagerOpenLotCard(result.lot, result.balance); } if (editSection) { editSection.hidden = true; } card?.querySelector('[data-lager-open-card]')?.removeAttribute('hidden'); if (status) { status.textContent = ''; } } catch (error) { if (status) { status.textContent = error instanceof Error ? error.message : 'Speichern fehlgeschlagen'; } } });";
+    echo "  document.addEventListener('click', (event) => { const cancel = event.target.closest('[data-lager-new-confirmation-cancel]'); if (cancel) { const drawer = getDrawer(); const confirmation = drawer?.querySelector('[data-lager-new-confirmation-card]'); if (confirmation) { confirmation.hidden = true; } if (drawer) { drawer.dataset.dialogOpen = 'false'; } const form = drawer?.querySelector('[data-lager-new-lot-form-element]'); if (form) { form.dataset.confirmationAccepted = 'false'; } return; } const confirm = event.target.closest('[data-lager-new-confirmation-submit]'); if (confirm) { const drawer = getDrawer(); const confirmation = drawer?.querySelector('[data-lager-new-confirmation-card]'); const form = drawer?.querySelector('[data-lager-new-lot-form-element]'); if (confirmation) { confirmation.hidden = true; } if (drawer) { drawer.dataset.dialogOpen = 'false'; } if (form) { form.dataset.confirmationAccepted = 'true'; form.requestSubmit(); } } });";
+    echo "  document.addEventListener('submit', async (event) => { const newLotForm = event.target.closest('[data-lager-new-lot-form-element]'); if (!newLotForm) { return; } event.preventDefault(); const drawer = getDrawer(); const fields = [{ label: 'Naurua-Chargennummer', input: drawer?.querySelector('[data-lager-new-lot-number]') }, { label: 'Hersteller', input: drawer?.querySelector('[data-lager-new-manufacturer]') }, { label: 'Hersteller-Chargennummer', input: drawer?.querySelector('[data-lager-new-manufacturer-lot]') }, { label: 'Herstellungsdatum', input: drawer?.querySelector('[data-lager-new-mfg-date]') }, { label: 'MHD', input: drawer?.querySelector('[data-lager-new-expiry-date]') }, { label: 'Einkaufsdatum', input: drawer?.querySelector('[data-lager-new-purchase-date]') }, { label: 'Eingangsmenge', input: drawer?.querySelector('[data-lager-new-receipt-qty]') }]; const emptyFields = fields.filter((field) => (field.input?.value || '').trim() === ''); if (emptyFields.length > 0 && newLotForm.dataset.confirmationAccepted !== 'true') { const confirmation = drawer?.querySelector('[data-lager-new-confirmation-card]'); const emptyFieldsList = drawer?.querySelector('[data-lager-new-confirmation-empty-fields]'); if (emptyFieldsList) { emptyFieldsList.replaceChildren(...emptyFields.map((field) => { const item = document.createElement('div'); item.className = 'sg-body'; item.textContent = field.label; return item; })); } if (confirmation) { confirmation.hidden = false; } if (drawer) { drawer.dataset.dialogOpen = 'true'; } return; } newLotForm.dataset.confirmationAccepted = 'false'; const status = drawer?.querySelector('[data-lager-new-lot-status]'); if (status) { status.textContent = 'Speichern läuft …'; } try { const result = await postLagerChange({ action: 'prepare_lot', productId: drawer?.dataset.lagerProductId || '', lotId: '', lotNumber: drawer?.querySelector('[data-lager-new-lot-number]')?.value || '', manufacturerPartyId: drawer?.querySelector('[data-lager-new-manufacturer]')?.value || null, manufacturerLotNumber: drawer?.querySelector('[data-lager-new-manufacturer-lot]')?.value || '', mfgDate: drawer?.querySelector('[data-lager-new-mfg-date]')?.value || '', expiryDate: drawer?.querySelector('[data-lager-new-expiry-date]')?.value || '', purchaseDate: drawer?.querySelector('[data-lager-new-purchase-date]')?.value || '', receiptQty: drawer?.querySelector('[data-lager-new-receipt-qty]')?.value || '' }); appendLagerOpenLotCard(result.lot, result.balance); resetLagerNewLotConfirmation(); const form = drawer?.querySelector('[data-lager-drawer-topic=\"new-lot-form\"]'); const action = drawer?.querySelector('[data-lager-drawer-topic=\"new-lot-action\"]'); if (form) { form.hidden = true; } if (action) { action.hidden = false; } if (status) { status.textContent = ''; } } catch (error) { if (status) { status.textContent = error instanceof Error ? error.message : 'Speichern fehlgeschlagen'; } } });";
+    echo "  document.addEventListener('submit', async (event) => { const editForm = event.target.closest('[data-lager-edit-form-element]'); if (!editForm) { return; } event.preventDefault(); const drawer = getDrawer(); const status = drawer?.querySelector('[data-lager-edit-status]'); if (status) { status.textContent = 'Speichern läuft …'; } try { const result = await postLagerChange({ action: 'update_lot', lotId: drawer?.dataset.lagerActiveLotId || '', manufacturerPartyId: drawer?.querySelector('[data-lager-manufacturer]')?.value || null, manufacturerLotNumber: drawer?.querySelector('[data-lager-manufacturer-lot]')?.value || '', mfgDate: drawer?.querySelector('[data-lager-mfg-date]')?.value || '', expiryDate: drawer?.querySelector('[data-lager-expiry-date]')?.value || '', purchaseDate: drawer?.querySelector('[data-lager-purchase-date]')?.value || '', receiptQty: drawer?.querySelector('[data-lager-receipt-qty]')?.value || '', adjustmentQty: drawer?.querySelector('[data-lager-adjustment-qty]')?.value || '', outQty: drawer?.querySelector('[data-lager-out-qty]')?.value || '' }); syncLagerActiveLotView(result.lot); syncLagerBalanceView(result.balance); clearLagerMovementInputs(); setLagerEditMode(false); if (status) { status.textContent = ''; } } catch (error) { if (status) { status.textContent = error instanceof Error ? error.message : 'Speichern fehlgeschlagen'; } } });";
     echo "  document.addEventListener('click', (event) => { if (event.target.closest('[data-lager-detail-back]')) { event.preventDefault(); closeLagerMobileDetail(); } });";
     echo "  document.addEventListener('keydown', (event) => { if (event.key === 'Escape') { closeDrawer(); closeLagerMobileDetail(); } });";
     echo "  window.addEventListener('popstate', (event) => { if (lagerMobileDetailOpen && (!event.state || event.state.lagerView !== 'detail')) { restoreLagerMobileDetail(); } });";
+    echo "  const syncLagerDisplayedTotal = () => { const drawer = getDrawer(); const trigger = contentRoot.querySelector('[data-lager-drawer-open][aria-expanded=\"true\"]'); if (!drawer || !trigger || trigger.dataset.lagerDrawerType !== 'Produkt') { return; } const active = Number((drawer.querySelector('[data-lager-drawer-current-qty]')?.textContent || '0').replace(',', '.')) || 0; const productId = trigger.closest('[data-lager-row]')?.dataset.lagerId || ''; const openProduct = drawer.querySelector('[data-lager-open-product=\"' + productId + '\"]'); const open = Array.from(openProduct?.querySelectorAll('[data-lager-open-card-qty-net]') || []).reduce((sum, node) => sum + (Number((node.textContent || '0').replace(',', '.')) || 0), 0); const total = active + open; const formatted = Number.isInteger(total) ? String(total) : total.toFixed(2).replace(/\.?0+$/, ''); const value = drawer.querySelector('[data-lager-drawer-value-value]'); if (value && value.textContent !== formatted) { value.textContent = formatted; } trigger.dataset.lagerDrawerValue = formatted; };";
+    echo "  const lagerTotalObserver = new MutationObserver(syncLagerDisplayedTotal);";
+    echo "  lagerTotalObserver.observe(contentRoot, { childList: true, subtree: true, characterData: true });";
     echo "}";
     echo "function initBestellungenBindings() {";
     echo "  const contentRoot = document.querySelector('[data-left-navigation-content-body]');";
@@ -745,7 +938,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  const isMobileDetailMode = () => window.matchMedia('(max-width: 767px)').matches;";
     echo "  const escapeHtml = (value) => String(value ?? '').replace(/[&<>\"']/g, (character) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' }[character] || character));";
     echo "  let bestellungenMobileDetailHost = null;";
-    echo "  let bestellungenDetailOpen = false;";
+    echo "  let bestellungenDetailOpen = false; let bestellungenOpeningMobileDetail = false;";
     echo "  const syncSearchState = () => {";
     echo "    const input = getSearchInput();";
     echo "    const wrap = getSearchWrap();";
@@ -754,47 +947,10 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    wrap.setAttribute('data-has-value', String(hasValue));";
     echo "    wrap.dataset.componentState = hasValue ? 'active' : 'inactive-selectable';";
     echo "  };";
-    echo "  const renderMobileDetail = (trigger) => {";
+  echo "  const renderMobileDetail = () => {";
-    echo "    const orderNumber = trigger.dataset.orderNumber || '';";
+  echo "    return '<div class=\"sg-bestellungen-mobile-detail-host\" data-bestellungen-mobile-detail-host=\"true\"><div class=\"sg-navigation-card-layout sg-mobile-detail-back-card\"><div class=\"sg-navigation-card-block\"><article class=\"sg-card\" data-component=\"card\" data-pattern=\"navigation-card\" aria-label=\"Navigation Detailansicht zurück oben\"><div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\" data-pattern-part=\"navigation-card-segment\"><div class=\"sg-navigation-card-center\"><button class=\"sg-interaction-element sg-hyperlink\" type=\"button\" data-bestellungen-detail-back>zurück</button></div></div></article></div></div></div>';";
-    echo "    const orderDate = trigger.dataset.orderDate || '';";
-    echo "    const total = trigger.dataset.orderTotal || '';";
-    echo "    const street = trigger.dataset.orderStreet || '';";
-    echo "    const houseNumber = trigger.dataset.orderHouseNumber || '';";
-    echo "    const zip = trigger.dataset.orderZip || '';";
-    echo "    const city = trigger.dataset.orderCity || '';";
-    echo "    const country = trigger.dataset.orderCountry || '';";
-    echo "    const formatDate = (value) => value ? new Date(value).toLocaleString('de-CH', { dateStyle: 'short', timeStyle: 'short' }) : 'Nicht vorhanden';";
-    echo "    const streetLine = [street, houseNumber].filter((part) => part && part.length > 0).join(' ').trim();";
-    echo "    const cityLine = [zip, city].filter((part) => part && part.length > 0).join(' ').trim();";
-    echo "    return [";
-    echo "      '<div class=\"sg-bestellungen-mobile-detail-host\" data-bestellungen-mobile-detail-host=\"true\">',";
-    echo "      '<div class=\"sg-navigation-card-layout sg-mobile-detail-back-card\">',";
-    echo "      '<div class=\"sg-navigation-card-block\">',";
-    echo "      '<article class=\"sg-card\" data-component=\"card\" data-pattern=\"navigation-card\" aria-label=\"Navigation Detailansicht zurück oben\">',";
-    echo "      '<div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\" data-pattern-part=\"navigation-card-segment\">',";
-    echo "      '<div class=\"sg-navigation-card-center\">',";
-    echo "      '<button class=\"sg-interaction-element sg-hyperlink\" type=\"button\" data-bestellungen-detail-back>zurück</button>',";
-    echo "      '</div>',";
-    echo "      '</div>',";
-    echo "      '</article>',";
-    echo "      '</div>',";
-    echo "      '</div>',";
-    echo "      '<div data-bestellungen-mobile-cards><article class=\"sg-card sg-vsf-drawer-card\" data-component=\"card\" data-pattern=\"card\" aria-label=\"Bestell-Details\">',";
-    echo "      '<div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\">',";
-    echo "      '<p class=\"sg-body\"><strong>Bestellnummer:</strong> <span>' + escapeHtml(orderNumber) + '</span></p>',";
-    echo "      '<p class=\"sg-body\"><strong>Bestelldatum:</strong> <span>' + escapeHtml(orderDate) + '</span></p>',";
-    echo "      '<p class=\"sg-body\"><strong>Lieferadresse:</strong></p>',";
-    echo "      '<p class=\"sg-body\">' + escapeHtml(streetLine) + '</p>',";
-    echo "      '<p class=\"sg-body\">' + escapeHtml(cityLine) + '</p>',";
-    echo "      '<p class=\"sg-body\">' + escapeHtml(country) + '</p>',";
-    echo "      '<p class=\"sg-body\"><strong>Gesamtsumme:</strong> <span>' + escapeHtml(total) + '</span></p>',";
-    echo "      '<p class=\"sg-body\">Detailinhalt wird noch definiert.</p>',";
-    echo "      '</div>',";
-    echo "      '</article></div>',";
-    echo "      '</div>'";
-    echo "    ].join('');";
   echo "  };";
-    echo "  const getDrawer = () => contentRoot.querySelector('[data-bestellungen-drawer]');";
+    echo "  const getDrawer = () => document.querySelector('[data-bestellungen-mobile-drawer]') || contentRoot.querySelector('[data-bestellungen-drawer]');";
     echo "  const getDrawerBackdrop = () => contentRoot.querySelector('[data-bestellungen-drawer-backdrop]');";
     echo "  const setDrawerState = (open) => {";
     echo "    const drawer = getDrawer();";
@@ -815,7 +971,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  const openDrawer = (trigger) => {";
     echo "    const drawer = getDrawer();";
     echo "    if (!drawer) { return; }";
-    echo "    if (isMobileDetailMode()) {";
+    echo "    if (isMobileDetailMode() && !bestellungenOpeningMobileDetail) {";
     echo "      openMobileDetail(trigger);";
     echo "      return;";
     echo "    }";
@@ -827,9 +983,9 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    const value = (label, content) => '<p class=\"sg-body\"><strong>' + escapeHtml(label) + ':</strong> ' + escapeHtml(content || 'Nicht vorhanden') + '</p>';";
     echo "    const renderCards = (order) => {";
     echo "      const c = order.customer || {}; const a = order.amounts || {}; const address = [[c.street, c.house_number].filter(Boolean).join(' '), [c.zip, c.city].filter(Boolean).join(' '), c.country_name].filter(Boolean).join('<br>');";
-    echo "      const lines = (order.lines || []).map((line) => '<div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\"><p class=\"sg-body\"><strong>' + escapeHtml(line.item_name) + '</strong> · ' + escapeHtml(line.item_code) + ' · Menge: ' + escapeHtml(String(line.qty)) + '</p>' + value('Positionsstatus', line.line_status) + value('Einzelpreis', formatAmount(line.unit_price, a.currency || 'CHF')) + value('Positionssumme', formatAmount(line.line_total, a.currency || 'CHF')) + '</div>').join('');";
+    echo "      const lines = (order.lines || []).map((line) => '<div class=\"sg-card-segment sg-card-segment--body\"><p class=\"sg-body\"><strong>' + escapeHtml(line.item_name) + '</strong> · ' + escapeHtml(line.item_code) + ' · Menge: ' + escapeHtml(String(line.qty)) + '</p>' + value('Positionsstatus', line.line_status) + value('Einzelpreis', formatAmount(line.unit_price, a.currency || 'CHF')) + value('Positionssumme', formatAmount(line.line_total, a.currency || 'CHF')) + '</div>').join('');";
     echo "      const allocations = (order.lines || []).flatMap((line) => (line.product_allocations || []).map((item) => '<div class=\"sg-body\"><strong>' + escapeHtml(item.product_name) + ':</strong> ' + escapeHtml(item.lot_number || 'Nicht zugeordnet') + ' · ' + escapeHtml(item.allocated_qty === null ? 'Nicht zugeordnet' : String(item.allocated_qty)) + ' · ' + escapeHtml(item.allocation_status || 'Nicht vorhanden') + (item.lot_status === 'virtual_shortage' ? ' · Virtuelle Fehlbestandscharge' : '') + '</div>')).join('');";
-    echo "      return '<article class=\"sg-card sg-vsf-drawer-card\" data-component=\"card\" data-pattern=\"card\" aria-label=\"Bestellübersicht\"><header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-vsf-drawer-card__header\"><div class=\"sg-strong\">Bestellübersicht</div></header><div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\">' + value('Bestellnummer', order.external_ref) + value('Bestelldatum', formatDate(order.order_date)) + value('Verkaufskanal', order.order_source) + value('Bestellstatus', order.order_status) + value('Zahlungsstatus', order.payment_status) + value('Zahlungsart', order.payment_method) + value('Versandart', order.shipping_method) + '<p class=\"sg-body\"><strong>Kunde:</strong> ' + escapeHtml([c.first_name, c.last_name].filter(Boolean).join(' ') || 'Nicht vorhanden') + '</p><p class=\"sg-body\"><strong>Lieferadresse:</strong><br>' + address + '</p>' + value('Netto', formatAmount(a.net, a.currency || 'CHF')) + value('Versand', formatAmount(a.shipping, a.currency || 'CHF')) + value('Rabatt', formatAmount(a.discount, a.currency || 'CHF')) + value('Steuer', formatAmount(a.tax, a.currency || 'CHF')) + value('Gesamtsumme', formatAmount(a.total, a.currency || 'CHF')) + '</div></article><article class=\"sg-card sg-vsf-drawer-card\" data-component=\"card\" data-pattern=\"card\" aria-label=\"Bestellte Artikel\"><header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-vsf-drawer-card__header\"><div class=\"sg-strong\">Bestellte Artikel</div></header>' + (lines || '<div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\"><p class=\"sg-body\">Keine Artikel vorhanden.</p></div>') + '</article><article class=\"sg-card sg-vsf-drawer-card\" data-component=\"card\" data-pattern=\"card\" aria-label=\"Chargenzuordnung\"><header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-vsf-drawer-card__header\"><div class=\"sg-strong\">Chargenzuordnung</div></header><div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\">' + (allocations || '<p class=\"sg-body\">Keine Chargenzuordnung vorhanden.</p>') + '</div></article>';";
+    echo "      return '<article class=\"sg-card sg-card--content-card\" data-component=\"content-card\" aria-label=\"Bestellübersicht\"><header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkgreen\" data-component-part=\"card-header\"><div class=\"sg-strong sg-text-on-dark\">Bestellübersicht</div></header><div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\">' + value('Bestellnummer', order.external_ref) + value('Bestelldatum', formatDate(order.order_date)) + value('Verkaufskanal', order.order_source) + value('Bestellstatus', order.order_status) + value('Zahlungsstatus', order.payment_status) + value('Zahlungsart', order.payment_method) + value('Versandart', order.shipping_method) + '<p class=\"sg-body\"><strong>Kunde:</strong> ' + escapeHtml([c.first_name, c.last_name].filter(Boolean).join(' ') || 'Nicht vorhanden') + '</p><p class=\"sg-body\"><strong>Lieferadresse:</strong><br>' + address + '</p>' + value('Netto', formatAmount(a.net, a.currency || 'CHF')) + value('Versand', formatAmount(a.shipping, a.currency || 'CHF')) + value('Rabatt', formatAmount(a.discount, a.currency || 'CHF')) + value('Steuer', formatAmount(a.tax, a.currency || 'CHF')) + value('Gesamtsumme', formatAmount(a.total, a.currency || 'CHF')) + '</div></article><article class=\"sg-card sg-card--content-card\" data-component=\"content-card\" aria-label=\"Bestellte Artikel\"><header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkgreen\" data-component-part=\"card-header\"><div class=\"sg-strong sg-text-on-dark\">Bestellte Artikel</div></header>' + (lines || '<div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\"><p class=\"sg-body\">Keine Artikel vorhanden.</p></div>') + '</article><article class=\"sg-card sg-card--content-card\" data-component=\"content-card\" aria-label=\"Chargenzuordnung\"><header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkgreen\" data-component-part=\"card-header\"><div class=\"sg-strong sg-text-on-dark\">Chargenzuordnung</div></header><div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\">' + (allocations || '<p class=\"sg-body\">Keine Chargenzuordnung vorhanden.</p>') + '</div></article>';";
     echo "    };";
     echo "    setDrawerState(true);";
     echo "    if (drawerTitle) { drawerTitle.textContent = trigger.dataset.orderNumber ? 'Bestellung ' + trigger.dataset.orderNumber : 'Bestellung'; }";
@@ -840,7 +996,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    });";
     echo "  };";
     echo "  const restoreBestellungenList = () => {";
-    echo "    if (bestellungenMobileDetailHost && bestellungenMobileDetailHost.parentNode) {";
+    echo "    if (bestellungenMobileDetailHost && bestellungenMobileDetailHost.parentNode) { const mobileDrawer = bestellungenMobileDetailHost.querySelector('[data-bestellungen-mobile-drawer]'); if (mobileDrawer) { contentRoot.appendChild(mobileDrawer); mobileDrawer.removeAttribute('data-bestellungen-mobile-drawer'); mobileDrawer.dataset.open = 'false'; mobileDrawer.setAttribute('aria-hidden', 'true'); } document.body.classList.remove('sg-card-list-page-drawer-open');";
     echo "      bestellungenMobileDetailHost.parentNode.removeChild(bestellungenMobileDetailHost);";
     echo "    }";
     echo "    bestellungenMobileDetailHost = null;";
@@ -850,14 +1006,13 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  };";
     echo "  const openMobileDetail = (trigger) => {";
     echo "    restoreBestellungenList();";
+    echo "    const sourceDrawer = contentRoot.querySelector('[data-bestellungen-drawer]');";
+    echo "    if (!sourceDrawer) { return; }";
     echo "    const host = document.createElement('div');";
-    echo "    host.innerHTML = renderMobileDetail(trigger);";
+    echo "    host.innerHTML = renderMobileDetail();";
     echo "    bestellungenMobileDetailHost = host.firstElementChild;";
-    echo "    if (bestellungenMobileDetailHost) {";
+    echo "    if (bestellungenMobileDetailHost) { const mobileDrawer = sourceDrawer; mobileDrawer.dataset.bestellungenMobileDrawer = 'true'; mobileDrawer.dataset.open = 'true'; mobileDrawer.setAttribute('aria-hidden', 'false'); bestellungenMobileDetailHost.appendChild(mobileDrawer); document.body.appendChild(bestellungenMobileDetailHost); document.body.classList.add('sg-bestellungen-mobile-detail-open'); }";
-    echo "      document.body.appendChild(bestellungenMobileDetailHost);";
+    echo "    bestellungenOpeningMobileDetail = true; openDrawer(trigger); bestellungenOpeningMobileDetail = false;";
-    echo "      document.body.classList.add('sg-bestellungen-mobile-detail-open');";
-    echo "    }";
-    echo "    fetch('/api/bestellungen/detail.php?id=' + encodeURIComponent(trigger.dataset.orderId || ''), { credentials: 'same-origin' }).then((response) => response.ok ? response.json() : Promise.reject(new Error('Bestelldetails konnten nicht geladen werden.'))).then((payload) => { if (!payload.ok || !bestellungenMobileDetailHost) { throw new Error('Bestelldetails konnten nicht geladen werden.'); } const order = payload.order; const cards = bestellungenMobileDetailHost.querySelector('[data-bestellungen-mobile-cards]'); const lines = (order.lines || []).map((line) => '<p class=\"sg-body\"><strong>' + escapeHtml(line.item_name) + '</strong> · ' + escapeHtml(line.item_code) + ' · Menge: ' + escapeHtml(String(line.qty)) + ' · Status: ' + escapeHtml(line.line_status) + '</p>').join(''); const allocations = (order.lines || []).flatMap((line) => (line.product_allocations || []).map((item) => '<p class=\"sg-body\"><strong>' + escapeHtml(item.product_name) + ':</strong> ' + escapeHtml(item.lot_number || 'Nicht zugeordnet') + ' · ' + escapeHtml(item.allocation_status || 'Nicht vorhanden') + '</p>')).join(''); if (cards) { cards.innerHTML = '<article class=\"sg-card sg-vsf-drawer-card\"><header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-vsf-drawer-card__header\"><div class=\"sg-strong\">Bestellübersicht</div></header><div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\"><p class=\"sg-body\"><strong>Bestellnummer:</strong> ' + escapeHtml(order.external_ref) + '</p><p class=\"sg-body\"><strong>Bestelldatum:</strong> ' + escapeHtml(formatDate(order.order_date)) + '</p><p class=\"sg-body\"><strong>Verkaufskanal:</strong> ' + escapeHtml(order.order_source) + '</p><p class=\"sg-body\"><strong>Status:</strong> ' + escapeHtml(order.order_status) + '</p></div></article><article class=\"sg-card sg-vsf-drawer-card\"><header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-vsf-drawer-card__header\"><div class=\"sg-strong\">Bestellte Artikel</div></header><div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\">' + (lines || '<p class=\"sg-body\">Keine Artikel vorhanden.</p>') + '</div></article><article class=\"sg-card sg-vsf-drawer-card\"><header class=\"sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-vsf-drawer-card__header\"><div class=\"sg-strong\">Chargenzuordnung</div></header><div class=\"sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content\">' + (allocations || '<p class=\"sg-body\">Keine Chargenzuordnung vorhanden.</p>') + '</div></article>'; } }).catch((error) => { const cards = bestellungenMobileDetailHost?.querySelector('[data-bestellungen-mobile-cards]'); if (cards) { cards.innerHTML = '<p class=\"sg-body\">' + escapeHtml(error.message) + '</p>'; } });";
     echo "    bestellungenDetailOpen = true;";
     echo "    window.history.pushState({ bestellungenView: 'detail', orderId: trigger.dataset.orderId || '' }, '', window.location.href);";
     echo "  };";
@@ -1002,35 +1157,6 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "      }";
     echo "    }";
     echo "  };";
-    echo "  const connectBestellungenRealtime = () => {";
-    echo "    if (!window.EventSource) { return null; }";
-    echo "    if (bestellungenRealtimeSource) {";
-    echo "      bestellungenRealtimeSource.close();";
-    echo "    }";
-    echo "    const source = new EventSource('/api/realtime/bestellungen.php', { withCredentials: true });";
-    echo "    source.addEventListener('bestellungen.changed', (event) => {";
-    echo "      const payload = parseJsonRealtimeEvent(event.data);";
-    echo "      if (!payload) { return; }";
-    echo "      const kind = String(payload.kind || '');";
-    echo "      const orderId = payload.orderId !== undefined && payload.orderId !== null ? String(payload.orderId) : '';";
-    echo "      if (kind === 'updated' && orderId !== '') {";
-    echo "        void reloadBestellungenRow(orderId);";
-    echo "        return;";
-    echo "      }";
-    echo "      void reloadBestellungenSection();";
-    echo "    });";
-    echo "    bestellungenRealtimeSource = source;";
-    echo "    return source;";
-    echo "  };";
-    echo "  const parseJsonRealtimeEvent = (raw) => {";
-    echo "    if (typeof raw !== 'string' || raw.trim() === '') { return null; }";
-    echo "    try {";
-    echo "      const parsed = JSON.parse(raw);";
-    echo "      return parsed && typeof parsed === 'object' ? parsed : null;";
-    echo "    } catch (error) {";
-    echo "      return null;";
-    echo "    }";
-    echo "  };";
     echo "  if (!bestellungenTableHandlersInstalled) {";
     echo "    bestellungenTableHandlersInstalled = true;";
     echo "    document.addEventListener('click', (event) => {";
@@ -1040,7 +1166,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "        closeMobileDetail();";
     echo "      }";
     echo "    });";
-    echo "    contentRoot.addEventListener('click', (event) => {";
+    echo "    document.addEventListener('click', (event) => {";
     echo "      const openTrigger = event.target.closest('[data-order-drawer-open]');";
     echo "      if (openTrigger) {";
     echo "        event.preventDefault();";
@@ -1096,14 +1222,12 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    }";
     echo "  }";
     echo "  bindTable();";
-    echo "  connectBestellungenRealtime();";
     echo "}";
     echo "(() => {";
     echo "  const overlay = document.querySelector('[data-otc-order-overlay]');";
     echo "  if (!overlay) { return; }";
     echo "  const form = overlay.querySelector('[data-otc-order-form]');";
     echo "  const productInputs = Array.from(form.querySelectorAll('[data-otc-order-product]'));";
-    echo "  const totalPriceInput = form.querySelector('[data-otc-order-total-price]');";
     echo "  const orderDateInput = form.querySelector('[data-otc-order-date]');";
     echo "  const orderDateDefaultValue = orderDateInput ? orderDateInput.value : '';";
     echo "  const paymentRows = form.querySelector('[data-otc-payment-rows]');";
@@ -1116,10 +1240,17 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  const houseNumberInput = form.querySelector('[data-otc-order-house-number]');";
     echo "  const zipInput = form.querySelector('[data-otc-order-zip]');";
     echo "  const cityInput = form.querySelector('[data-otc-order-city]');";
-    echo "  const submitBtn = form.querySelector('[data-otc-order-submit]');";
+    echo "  const submitBtn = overlay.querySelector('[data-otc-order-submit]');";
     echo "  const errorEl = form.querySelector('[data-otc-order-error]');";
     echo "  const successEl = form.querySelector('[data-otc-order-success]');";
     echo "  const successDefaultText = successEl ? successEl.textContent : '';";
+    echo "  const confirmationStage = overlay.querySelector('[data-otc-confirmation-stage]');";
+    echo "  const confirmationCard = overlay.querySelector('[data-otc-confirmation-card]');";
+    echo "  const confirmationProducts = overlay.querySelector('[data-otc-confirmation-products]');";
+    echo "  const confirmationQuantity = overlay.querySelector('[data-otc-confirmation-quantity]');";
+    echo "  const confirmationTotal = overlay.querySelector('[data-otc-confirmation-total]');";
+    echo "  const confirmationSubmit = overlay.querySelector('[data-otc-confirmation-submit]');";
+    echo "  let pendingOrderData = null;";
     echo "  const openTriggers = () => document.querySelectorAll('[data-otc-order-open]');";
     echo "  const setTriggerState = (expanded) => {";
     echo "    openTriggers().forEach((trigger) => { trigger.setAttribute('aria-expanded', String(expanded)); });";
@@ -1130,7 +1261,6 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  const clearSuccess = () => {";
     echo "    if (successEl) { successEl.textContent = successDefaultText; successEl.classList.add('hidden'); }";
     echo "  };";
-    echo "  let backdropPointerDown = false;";
     echo "  const getTodayValue = () => {";
     echo "    const now = new Date();";
     echo "    const year = now.getFullYear();";
@@ -1154,7 +1284,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "      clearSuccess();";
     echo "      ensureCurrentOrderDate();";
     echo "      requestAnimationFrame(() => {";
-    echo "        (productInputs[0] || totalPriceInput || submitBtn)?.focus();";
+    echo "        (productInputs[0] || submitBtn)?.focus();";
     echo "      });";
     echo "      return;";
     echo "    }";
@@ -1166,9 +1296,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  const updatePaymentAddButton = () => { addPaymentButton.disabled = paymentRows.querySelectorAll('[data-otc-payment-row]').length >= paymentOptionValues.length; };";
     echo "  const updateFormState = () => {";
     echo "    const totalQty = productInputs.reduce((sum, input) => sum + getInputValue(input), 0);";
-    echo "    const totalPrice = parseFloat(totalPriceInput.value || '0') || 0;";
     echo "    const isValid = totalQty > 0";
-    echo "      && totalPrice > 0";
     echo "      && !!getFieldValue(orderDateInput)";
     echo "      && paymentRows.querySelectorAll('[data-otc-payment-row]').length > 0";
     echo "      && !!getFieldValue(firstNameInput)";
@@ -1180,12 +1308,8 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    let errorMsg = '';";
     echo "    if (totalQty === 0) {";
     echo "      errorMsg = 'Mindestens ein Produkt mit Menge > 0 erforderlich.';";
-    echo "    } else if (totalPrice <= 0) {";
-    echo "      errorMsg = 'Preis muss größer als 0 sein.';";
     echo "    } else if (!getFieldValue(orderDateInput)) {";
     echo "      errorMsg = 'Bestelldatum auswählen.';";
-    echo "    } else if (getPaymentTotal() !== totalPrice) {";
-    echo "      errorMsg = 'Die Zahlungsbeträge müssen dem Gesamtbetrag entsprechen.';";
     echo "    } else if (!getFieldValue(firstNameInput) || !getFieldValue(lastNameInput) || !getFieldValue(streetInput) || !getFieldValue(houseNumberInput) || !getFieldValue(zipInput) || !getFieldValue(cityInput)) {";
     echo "      errorMsg = 'Alle Rechnungsadress-Felder ausfüllen.';";
     echo "    }";
@@ -1206,9 +1330,27 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    if (!preserveSuccess) { clearSuccess(); }";
     echo "    if (!preserveSuccess) { updateFormState(); }";
     echo "  };";
-    echo "  overlay.addEventListener('pointerdown', (event) => {";
+    echo "  const closeConfirmation = () => {";
-    echo "    backdropPointerDown = event.target === overlay;";
+    echo "    pendingOrderData = null;";
+    echo "    confirmationStage.dataset.dialogOpen = 'false';";
+    echo "    confirmationCard.hidden = true;";
+    echo "  };";
+    echo "  const openConfirmation = (orderData) => {";
+    echo "    pendingOrderData = orderData;";
+    echo "    confirmationProducts.replaceChildren();";
+    echo "    orderData.products.forEach((product) => {";
+    echo "      const input = productInputs.find((candidate) => parseInt(candidate.dataset.productId || '0', 10) === product.productId);";
+    echo "      const item = document.createElement('div');";
+    echo "      item.className = 'sg-body';";
+    echo "      item.textContent = (input?.dataset.title || 'Produkt') + ': ' + product.qty;";
+    echo "      confirmationProducts.appendChild(item);";
     echo "    });";
+    echo "    confirmationQuantity.textContent = String(orderData.products.reduce((sum, product) => sum + product.qty, 0));";
+    echo "    confirmationTotal.textContent = orderData.payments.reduce((sum, payment) => sum + payment.amount, 0).toFixed(2);";
+    echo "    confirmationStage.dataset.dialogOpen = 'true';";
+    echo "    confirmationCard.hidden = false;";
+    echo "    requestAnimationFrame(() => confirmationSubmit.focus());";
+    echo "  };";
     echo "  document.addEventListener('click', (event) => {";
     echo "    const openTrigger = event.target.closest('[data-otc-order-open]');";
     echo "    if (openTrigger) {";
@@ -1222,18 +1364,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "      toggleOverlay(false);";
     echo "    }";
     echo "  });";
-    echo "  overlay.addEventListener('click', (event) => {";
+    echo "  [orderDateInput, firstNameInput, lastNameInput, streetInput, houseNumberInput, zipInput, cityInput].forEach((input) => {";
-    echo "    if (event.target === overlay && backdropPointerDown) {";
-    echo "      toggleOverlay(false);";
-    echo "    }";
-    echo "    backdropPointerDown = false;";
-    echo "  });";
-    echo "  document.addEventListener('keydown', (event) => {";
-    echo "    if (event.key === 'Escape' && overlay.dataset.open === 'true') {";
-    echo "      toggleOverlay(false);";
-    echo "    }";
-    echo "  });";
-    echo "  [totalPriceInput, orderDateInput, firstNameInput, lastNameInput, streetInput, houseNumberInput, zipInput, cityInput].forEach((input) => {";
     echo "    if (!input) { return; }";
     echo "    input.addEventListener('input', updateFormState);";
     echo "    input.addEventListener('change', updateFormState);";
@@ -1242,7 +1373,6 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    input.addEventListener('input', updateFormState);";
     echo "    input.addEventListener('change', updateFormState);";
     echo "  });";
-    echo "  const getPaymentTotal = () => Math.round(Array.from(paymentRows.querySelectorAll('[data-otc-payment-amount]')).reduce((sum, input) => sum + (parseFloat(input.value || '0') || 0), 0) * 100) / 100;";
     echo "  const bindPaymentRow = (row) => {";
     echo "    row.querySelectorAll('select, input').forEach((input) => { input.addEventListener('input', updateFormState); input.addEventListener('change', updateFormState); });";
     echo "  };";
@@ -1254,7 +1384,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    const row = document.createElement('div');";
     echo "    row.className = 'sg-form-sections-card__field-group';";
     echo "    row.dataset.otcPaymentRow = '';";
-    echo "    row.innerHTML = '<label class=\"sg-label\" for=\"otc-payment-method-' + number + '\">Bezahlart</label><select class=\"sg-interaction-element sg-input-single-line\" id=\"otc-payment-method-' + number + '\" data-otc-payment-method>' + paymentOptions + '</select><label class=\"sg-label\" for=\"otc-payment-amount-' + number + '\">Betrag (CHF)</label><input class=\"sg-interaction-element sg-input-single-line\" type=\"number\" id=\"otc-payment-amount-' + number + '\" min=\"0.01\" step=\"0.01\" value=\"0.00\" data-otc-payment-amount>';";
+    echo "    row.innerHTML = '<label class=\"sg-labeled-input-row\"><span class=\"sg-label\">Bezahlart</span><select class=\"sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable sg-pulldown\" id=\"otc-payment-method-' + number + '\" data-otc-payment-method>' + paymentOptions + '</select></label><label class=\"sg-labeled-input-row\"><span class=\"sg-label\">Betrag (CHF)</span><input class=\"sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable\" type=\"number\" id=\"otc-payment-amount-' + number + '\" min=\"0.01\" step=\"0.01\" value=\"0.00\" data-otc-payment-amount></label>' ;";
     echo "    row.querySelector('[data-otc-payment-method]').value = nextPaymentMethod;";
     echo "    paymentRows.appendChild(row);";
     echo "    bindPaymentRow(row);";
@@ -1264,31 +1394,11 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  addPaymentButton.addEventListener('click', addPaymentRow);";
     echo "  bindPaymentRow(paymentRows.querySelector('[data-otc-payment-row]'));";
     echo "  updatePaymentAddButton();";
-    echo "  form.addEventListener('submit', async (event) => {";
+    echo "  const submitOrder = async (orderData) => {";
-    echo "    event.preventDefault();";
     echo "    let submissionSucceeded = false;";
-    echo "    if (!updateFormState()) { return; }";
+    echo "    const originalBtnText = confirmationSubmit.innerHTML;";
-    echo "    const products = productInputs";
+    echo "    confirmationSubmit.innerHTML = '<span class=\"loading\"></span> Wird verarbeitet...';";
-    echo "      .filter((input) => getInputValue(input) > 0)";
+    echo "    confirmationSubmit.disabled = true;";
-    echo "      .map((input) => ({ productId: parseInt(input.dataset.productId || '0', 10), qty: getInputValue(input) }));";
-    echo "    const orderData = {";
-    echo "      products: products,";
-    echo "      totalPrice: parseFloat(totalPriceInput.value || '0') || 0,";
-    echo "      orderDate: orderDateInput ? orderDateInput.value : '',";
-    echo "      payments: Array.from(paymentRows.querySelectorAll('[data-otc-payment-row]')).map((row) => ({ paymentMethod: row.querySelector('[data-otc-payment-method]').value, amount: parseFloat(row.querySelector('[data-otc-payment-amount]').value || '0') || 0 })),";
-    echo "      billing: {";
-    echo "        firstName: getFieldValue(firstNameInput),";
-    echo "        lastName: getFieldValue(lastNameInput),";
-    echo "        street: getFieldValue(streetInput),";
-    echo "        houseNumber: getFieldValue(houseNumberInput),";
-    echo "        zip: getFieldValue(zipInput),";
-    echo "        city: getFieldValue(cityInput)";
-    echo "      }";
-    echo "    };";
-    echo "    const originalBtnText = submitBtn.innerHTML;";
-    echo "    submitBtn.innerHTML = '<span class=\"loading\"></span> Wird verarbeitet...';";
-    echo "    submitBtn.disabled = true;";
-    echo "    submitBtn.classList.add('sg-button--process-inactive');";
     echo "    clearError();";
     echo "    try {";
     echo "      const response = await fetch('/api/otc-order.php', {";
@@ -1303,20 +1413,50 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "          successEl.textContent = result.externalRef ? 'Bestellung erfolgreich erfasst! Bestellnummer: ' + result.externalRef : successDefaultText;";
     echo "          successEl.classList.remove('hidden');";
     echo "        }";
-    echo "        resetForm(true);";
+    echo "        closeConfirmation();";
+    echo "        resetForm();";
+    echo "        toggleOverlay(false);";
     echo "      } else if (errorEl) {";
     echo "        errorEl.textContent = result.error || 'Unbekannter Fehler';";
     echo "        errorEl.classList.remove('hidden');";
+    echo "        closeConfirmation();";
     echo "      }";
     echo "    } catch (error) {";
     echo "      if (errorEl) {";
     echo "        errorEl.textContent = 'Netzwerkfehler: ' + error.message;";
     echo "        errorEl.classList.remove('hidden');";
     echo "      }";
+    echo "      closeConfirmation();";
     echo "    } finally {";
-    echo "      submitBtn.innerHTML = originalBtnText;";
+    echo "      confirmationSubmit.innerHTML = originalBtnText;";
+    echo "      confirmationSubmit.disabled = false;";
     echo "      if (!submissionSucceeded) { updateFormState(); }";
     echo "    }";
+    echo "  };";
+    echo "  form.addEventListener('submit', (event) => {";
+    echo "    event.preventDefault();";
+    echo "    if (!updateFormState()) { return; }";
+    echo "    const products = productInputs";
+    echo "      .filter((input) => getInputValue(input) > 0)";
+    echo "      .map((input) => ({ productId: parseInt(input.dataset.productId || '0', 10), qty: getInputValue(input) }));";
+    echo "    const orderData = {";
+    echo "      products: products,";
+    echo "      orderDate: orderDateInput ? orderDateInput.value : '',";
+    echo "      payments: Array.from(paymentRows.querySelectorAll('[data-otc-payment-row]')).map((row) => ({ paymentMethod: row.querySelector('[data-otc-payment-method]').value, amount: parseFloat(row.querySelector('[data-otc-payment-amount]').value || '0') || 0 })),";
+    echo "      billing: {";
+    echo "        firstName: getFieldValue(firstNameInput),";
+    echo "        lastName: getFieldValue(lastNameInput),";
+    echo "        street: getFieldValue(streetInput),";
+    echo "        houseNumber: getFieldValue(houseNumberInput),";
+    echo "        zip: getFieldValue(zipInput),";
+    echo "        city: getFieldValue(cityInput)";
+    echo "      }";
+    echo "    };";
+    echo "    openConfirmation(orderData);";
+    echo "  });";
+    echo "  confirmationStage.addEventListener('click', (event) => {";
+    echo "    if (event.target.closest('[data-otc-confirmation-cancel]')) { closeConfirmation(); return; }";
+    echo "    if (event.target.closest('[data-otc-confirmation-submit]') && pendingOrderData) { submitOrder(pendingOrderData); }";
     echo "  });";
     echo "  updateFormState();";
     echo "})();";

modules/system/naurua-erp-cron.php

@@ -3,6 +3,8 @@ declare(strict_types=1);
 
 require_once __DIR__ . '/../shared/db.php';
 require_once __DIR__ . '/../erp/lager/forecast.php';
+require_once __DIR__ . '/../erp/import-integration/shopify-webhook-worker.php';
+require_once __DIR__ . '/../erp/import-integration/shopify-delta-run.php';
 
 if (PHP_SAPI !== 'cli') {
     http_response_code(404);
@@ -19,7 +21,26 @@ $env = expand_env_values(parse_env_file(dirname(__DIR__, 2) . '/.env'));
 $pdo = connect_database($env);
 
 try {
+    $reconciliationStartedAt = new DateTimeImmutable('now', new DateTimeZone('Europe/Zurich'));
     $jobs = [
+        'erp.import-integration.shopify_webhook_worker' => static fn (): array => shopify_webhook_worker_run($pdo, $env, 100),
+        'erp.import-integration.shopify_delta_order_import' => static function () use ($pdo, $env, $reconciliationStartedAt): array {
+            $cutoff = shopify_delta_reconciliation_cutoff($pdo);
+            $recoveryOrderGids = shopify_delta_load_pending_order_gids($pdo);
+            $runId = shopify_delta_start_run($pdo, $cutoff, false);
+            try {
+                $result = run_shopify_delta($env, $pdo, $cutoff, false, $recoveryOrderGids);
+                $result['technical_run_id'] = $runId;
+                if (($result['status'] ?? '') === 'done') {
+                    shopify_delta_store_watermark($pdo, $reconciliationStartedAt->format(DATE_ATOM));
+                }
+                shopify_delta_finish_run($pdo, $runId, (string) $result['status'], $result);
+                return $result;
+            } catch (Throwable $error) {
+                shopify_delta_finish_run($pdo, $runId, 'failed', ['status' => 'failed', 'technical_run_id' => $runId], $error);
+                throw $error;
+            }
+        },
         'erp.lager.stock_lot_forecast_refresh' => static fn (): array => run_lager_stock_lot_forecast($pdo),
     ];
     $results = [];

public/api/realtime/bestellungen.php

@@ -1,6 +1,11 @@
 <?php
 declare(strict_types=1);
 
+http_response_code(410);
+header('Content-Type: text/plain; charset=utf-8');
+echo 'Bestellungen-Realtime ist deaktiviert.';
+exit;
+
 require_once __DIR__ . '/../../../modules/shared/db.php';
 require_once __DIR__ . '/../../../modules/shared/auth/service.php';
 require_once __DIR__ . '/../../../modules/erp/bestellungen/service.php';

public/assets/styleguide.upstream.css

@@ -175,6 +175,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-scrollable-card-width: var(--dimension-scrollable-card-width);
+  --layout-scrollable-card-height: var(--dimension-scrollable-card-height);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
@@ -287,6 +289,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-scrollable-card-width: 600px;
+  --dimension-scrollable-card-height: 600px;
   --dimension-content-card-margin-top-desktop: 100px;
   --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;
@@ -656,6 +660,13 @@ section + section {
       color: var(--text-control-default);
     }
 
+    .sg-button--warning {
+      --surface-button-warning: var(--color-signal-red);
+      --text-button-warning: var(--color-font-light);
+      background: var(--surface-button-warning);
+      color: var(--text-button-warning);
+    }
+
     .sg-button--process {
       background: var(--surface-button-process);
       color: var(--text-button-process);
@@ -2096,6 +2107,147 @@ section + section {
       text-decoration: none;
     }
 
+/* Component: File Input */
+.sg-file-input {
+  width: 100%;
+}
+
+.sg-file-input__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  width: 100%;
+}
+
+.sg-file-input__control {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.sg-file-input:focus-within .sg-file-input__trigger {
+  outline: 2px solid var(--text-hyperlink);
+  outline-offset: 2px;
+}
+
+.sg-file-input__trigger {
+  align-self: flex-start;
+}
+
+@media (max-width: 48rem) {
+  .sg-file-input__row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+.sg-file-input--disabled {
+  opacity: var(--disabled-opacity);
+}
+
+.sg-file-input--disabled .sg-file-input__trigger {
+  cursor: not-allowed;
+}
+
+/* ========================================================= */
+/* Patterns: Datei-Upload                                   */
+/* ========================================================= */
+
+.sg-file-upload {
+  --surface-file-upload-dropzone: var(--surface-form-preview);
+  --surface-file-upload-file-item: var(--surface-control-default);
+  --text-file-upload-meta: var(--text-control-disabled);
+  --text-file-upload-error: var(--color-signal-red);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  width: 100%;
+  max-width: var(--layout-input-field-max-width);
+}
+
+.sg-file-upload__status,
+.sg-file-upload__file-meta {
+  margin: var(--spacing-small) 0 0;
+}
+
+.sg-file-upload__dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  width: 100%;
+  padding: var(--spacing-large);
+  background: var(--surface-file-upload-dropzone);
+  border: 1px dashed var(--surface-button-active);
+  border-radius: var(--radius-interaction);
+}
+
+.sg-file-upload__dropzone[data-drag-over="true"] {
+  outline: 2px solid var(--text-hyperlink);
+  outline-offset: 2px;
+}
+
+.sg-file-upload__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sg-file-upload__file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  padding: var(--spacing-small) var(--spacing-large);
+  color: var(--text-control-default);
+  background: var(--surface-file-upload-file-item);
+  border-radius: var(--radius-interaction);
+}
+
+.sg-file-upload__file-name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sg-file-upload__file-meta {
+  color: var(--text-file-upload-meta);
+}
+
+.sg-file-upload__remove {
+  flex: 0 0 auto;
+}
+
+.sg-file-upload__submit {
+  align-self: flex-end;
+}
+
+.sg-file-upload__error {
+  color: var(--text-file-upload-error);
+}
+
+@media (max-width: 48rem) {
+  .sg-file-upload__dropzone {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .sg-file-upload__file {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--spacing-small);
+  }
+}
+
 /* ========================================================= */
 /* Patterns: Portal Header                                   */
 /* ========================================================= */
@@ -5031,3 +5183,38 @@ main {
   }
 }
 
+/* ========================================================= */
+/* Patterns: Scrollable Card                                 */
+/* ========================================================= */
+
+.sg-scrollable-card {
+  display: flex;
+  flex-direction: column;
+  width: var(--layout-scrollable-card-width);
+  max-width: 100%;
+  height: var(--layout-scrollable-card-height);
+  box-sizing: border-box;
+}
+
+.sg-scrollable-card__header,
+.sg-scrollable-card__actions-segment {
+  flex: 0 0 auto;
+}
+
+.sg-scrollable-card__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sg-scrollable-card__actions {
+  display: flex;
+  gap: var(--spacing-small);
+  width: 100%;
+}
+
+.sg-scrollable-card__actions > .sg-button {
+  flex: 1 1 0;
+  min-width: 0;
+}
+

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "3f4ec38",
+  "styleguideCommit": "71734d6",
-  "syncedAtUtc": "2026-09-03T15:57:49Z",
+  "syncedAtUtc": "2026-09-08T09:49:27Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -175,6 +175,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-scrollable-card-width: var(--dimension-scrollable-card-width);
+  --layout-scrollable-card-height: var(--dimension-scrollable-card-height);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
@@ -287,6 +289,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-scrollable-card-width: 600px;
+  --dimension-scrollable-card-height: 600px;
   --dimension-content-card-margin-top-desktop: 100px;
   --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;
@@ -656,6 +660,13 @@ section + section {
       color: var(--text-control-default);
     }
 
+    .sg-button--warning {
+      --surface-button-warning: var(--color-signal-red);
+      --text-button-warning: var(--color-font-light);
+      background: var(--surface-button-warning);
+      color: var(--text-button-warning);
+    }
+
     .sg-button--process {
       background: var(--surface-button-process);
       color: var(--text-button-process);
@@ -2096,6 +2107,147 @@ section + section {
       text-decoration: none;
     }
 
+/* Component: File Input */
+.sg-file-input {
+  width: 100%;
+}
+
+.sg-file-input__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  width: 100%;
+}
+
+.sg-file-input__control {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.sg-file-input:focus-within .sg-file-input__trigger {
+  outline: 2px solid var(--text-hyperlink);
+  outline-offset: 2px;
+}
+
+.sg-file-input__trigger {
+  align-self: flex-start;
+}
+
+@media (max-width: 48rem) {
+  .sg-file-input__row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+.sg-file-input--disabled {
+  opacity: var(--disabled-opacity);
+}
+
+.sg-file-input--disabled .sg-file-input__trigger {
+  cursor: not-allowed;
+}
+
+/* ========================================================= */
+/* Patterns: Datei-Upload                                   */
+/* ========================================================= */
+
+.sg-file-upload {
+  --surface-file-upload-dropzone: var(--surface-form-preview);
+  --surface-file-upload-file-item: var(--surface-control-default);
+  --text-file-upload-meta: var(--text-control-disabled);
+  --text-file-upload-error: var(--color-signal-red);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  width: 100%;
+  max-width: var(--layout-input-field-max-width);
+}
+
+.sg-file-upload__status,
+.sg-file-upload__file-meta {
+  margin: var(--spacing-small) 0 0;
+}
+
+.sg-file-upload__dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  width: 100%;
+  padding: var(--spacing-large);
+  background: var(--surface-file-upload-dropzone);
+  border: 1px dashed var(--surface-button-active);
+  border-radius: var(--radius-interaction);
+}
+
+.sg-file-upload__dropzone[data-drag-over="true"] {
+  outline: 2px solid var(--text-hyperlink);
+  outline-offset: 2px;
+}
+
+.sg-file-upload__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sg-file-upload__file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  padding: var(--spacing-small) var(--spacing-large);
+  color: var(--text-control-default);
+  background: var(--surface-file-upload-file-item);
+  border-radius: var(--radius-interaction);
+}
+
+.sg-file-upload__file-name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sg-file-upload__file-meta {
+  color: var(--text-file-upload-meta);
+}
+
+.sg-file-upload__remove {
+  flex: 0 0 auto;
+}
+
+.sg-file-upload__submit {
+  align-self: flex-end;
+}
+
+.sg-file-upload__error {
+  color: var(--text-file-upload-error);
+}
+
+@media (max-width: 48rem) {
+  .sg-file-upload__dropzone {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .sg-file-upload__file {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--spacing-small);
+  }
+}
+
 /* ========================================================= */
 /* Patterns: Portal Header                                   */
 /* ========================================================= */
@@ -5031,3 +5183,38 @@ main {
   }
 }
 
+/* ========================================================= */
+/* Patterns: Scrollable Card                                 */
+/* ========================================================= */
+
+.sg-scrollable-card {
+  display: flex;
+  flex-direction: column;
+  width: var(--layout-scrollable-card-width);
+  max-width: 100%;
+  height: var(--layout-scrollable-card-height);
+  box-sizing: border-box;
+}
+
+.sg-scrollable-card__header,
+.sg-scrollable-card__actions-segment {
+  flex: 0 0 auto;
+}
+
+.sg-scrollable-card__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sg-scrollable-card__actions {
+  display: flex;
+  gap: var(--spacing-small);
+  width: 100%;
+}
+
+.sg-scrollable-card__actions > .sg-button {
+  flex: 1 1 0;
+  min-width: 0;
+}
+

public/assets/styles.portal.css

@@ -96,6 +96,26 @@ body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) {
   width: 100%;
 }
 
+.sg-lager-mobile-detail-host .sg-card-list-page-drawer {
+  position: static;
+  display: flex;
+  width: 100%;
+  max-width: none;
+  transform: none;
+  box-shadow: none;
+  overflow: visible;
+}
+
+.sg-bestellungen-mobile-detail-host .sg-card-list-page-drawer {
+  position: static;
+  display: flex;
+  width: 100%;
+  max-width: none;
+  transform: none;
+  box-shadow: none;
+  overflow: visible;
+}
+
 .sg-mobile-detail-back-card,
 .sg-mobile-detail-back-card * {
   cursor: pointer;
@@ -117,9 +137,8 @@ body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) {
 }
 
 .sg-otc-order-overlay__panel {
-  width: min(960px, 100%);
+  --layout-scrollable-card-width: min(960px, 100%);
-  max-height: calc(100vh - (2 * var(--spacing-large)));
+  --layout-scrollable-card-height: min(600px, calc(100vh - (2 * var(--spacing-large))));
-  overflow: auto;
 }
 
 .sg-otc-order-overlay__title {
@@ -138,6 +157,19 @@ body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) {
   color: var(--color-signal-red);
 }
 
+.sg-otc-order-overlay [data-otc-order-product] {
+  flex: 0 0 6rem;
+  width: 6rem;
+  max-width: 6rem;
+  margin-left: auto;
+  text-align: right;
+}
+
+.sg-otc-order-overlay .sg-otc-order-product-row .sg-label {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
 .sg-otc-order-overlay .sg-form-sections-card__field-group {
   gap: var(--spacing-small);
 }
@@ -154,6 +186,14 @@ body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) {
 }
 
 @media (max-width: 767px) {
+  .sg-otc-order-overlay [data-otc-order-product] {
+    flex: 1 1 auto;
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    text-align: left;
+  }
+
   .sg-large-table--bestellungen .sg-search-field-row {
     width: min(100%, calc(var(--layout-search-field-width) * 0.75));
   }
@@ -207,7 +247,7 @@ body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) {
 }
 
 .sg-large-table--lager[data-lager-table-key="products"] .sg-large-table__row {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
 }
 
 .sg-large-table--lager[data-lager-table-key="products"] .sg-large-table__cell:last-child {
@@ -230,6 +270,22 @@ body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) {
   color: var(--color-signal-yellow);
 }
 
+.sg-card-list-page-drawer [data-lager-edit-form][hidden],
+.sg-card-list-page-drawer [data-lager-read-view][hidden],
+.sg-card-list-page-drawer [data-lager-drawer-topic="new-lot-form"][hidden],
+.sg-card-list-page-drawer [data-lager-new-lot-notification-wrapper][hidden],
+.sg-card-list-page-drawer [data-lager-open-edit-form][hidden],
+.sg-card-list-page-drawer [data-lager-open-card][hidden] {
+  display: none;
+}
+
+.sg-card-list-page-drawer [data-lager-drawer-topic="new-lot-action"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-small);
+}
+
 .sg-card-list-page-drawer__title {
   color: var(--color-white);
 }