From 094edaaf391e465b38705ea291b69298f32967c4 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Sun, 2 Aug 2026 17:56:21 +0200
Subject: [PATCH] Versandkosten-System (Pflichtenheft Punkt 9) + kritischen
 Warenkorb/Checkout-Bug behoben
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Neu:
- Produkte können eigene Versandkosten je Land (DE/AT/CH/LU) bekommen, gelten nur bei
  Einzelkauf (genau 1 Stück von 1 Produkt)
- Versandkosten-Staffel nach Warenwert je Land, von VanVan im Adminbereich bearbeitbar
  (neuer Bereich "Versandkosten-Staffel"), greift bei mehreren Produkten/Stück
- Versandkostenfrei ab 75 € gilt immer, unabhängig von Einzelkauf/Staffel
- Checkout berechnet und zeigt jetzt die echten Versandkosten live beim Länderwechsel an

Kritischer Bugfix (unabhängig vom neuen Feature entdeckt):
- Warenkorb- und Checkout-Skripte haben "import" innerhalb von define:vars-Skripten benutzt,
  was Astro als IIFE rendert (kein ES-Modul) — das hat in der echten Live-Version die ganze
  Zeit zu "Cannot use import statement outside a module" geführt, wodurch Warenkorb und
  Checkout praktisch nie funktioniert haben. Behoben durch Trennung: define:vars-Skript setzt
  nur Werte auf window, separates <script type="module"> mit den echten Imports liest sie aus.
  Mit echtem End-to-End-Test verifiziert (Artikel in Warenkorb legen, Land wechseln, Summe
  prüfen) statt nur Screenshot.
---
 public/admin/config.yml            | 51 +++++++++++++++++++++
 src/content/versandstaffel.json    | 22 +++++++++
 src/data/products.ts               |  5 ++
 src/data/versand.ts                | 73 ++++++++++++++++++++++++++++++
 src/pages/ch/checkout/index.astro  | 36 +++++++++++----
 src/pages/ch/warenkorb/index.astro |  6 +++
 src/pages/checkout/index.astro     | 39 ++++++++++++----
 src/pages/en/checkout/index.astro  | 36 +++++++++++----
 src/pages/en/warenkorb/index.astro |  6 +++
 src/pages/fr/checkout/index.astro  | 36 +++++++++++----
 src/pages/fr/warenkorb/index.astro |  6 +++
 src/pages/warenkorb/index.astro    |  6 +++
 12 files changed, 282 insertions(+), 40 deletions(-)
 create mode 100644 src/content/versandstaffel.json
 create mode 100644 src/data/versand.ts

diff --git a/public/admin/config.yml b/public/admin/config.yml
index 4a4fffa..8292a55 100644
--- a/public/admin/config.yml
+++ b/public/admin/config.yml
@@ -92,6 +92,16 @@ collections:
           - { label: Bestseller, value: bestseller }
           - { label: "Im Sale", value: sale }
           - { label: Handgemacht, value: handgemacht }
+      - label: "🚚 Eigene Versandkosten (nur für Einzelkauf dieses Produkts)"
+        name: versand
+        widget: object
+        required: false
+        hint: "Gilt NUR, wenn jemand genau 1 Stück von genau diesem Produkt kauft. Bei mehreren Produkten/Stück im Warenkorb gilt automatisch die allgemeine Versandkosten-Staffel (siehe eigener Bereich 'Versandkosten-Staffel' im Menü links). Leer lassen = Staffel gilt auch beim Einzelkauf."
+        fields:
+          - { label: "Deutschland (€)", name: de, widget: number, value_type: float, step: 0.01, required: false }
+          - { label: "Österreich (€)", name: at, widget: number, value_type: float, step: 0.01, required: false }
+          - { label: "Schweiz (€)", name: ch, widget: number, value_type: float, step: 0.01, required: false }
+          - { label: "Luxemburg (€)", name: lu, widget: number, value_type: float, step: 0.01, required: false }
 
   - name: categories
     label: Kategorien
@@ -147,3 +157,44 @@ collections:
               - { label: Englisch, name: en, widget: string }
               - { label: "Schweizerdeutsch", name: ch, widget: string }
               - { label: Französisch, name: fr, widget: string }
+
+  - name: versandkosten
+    label: "🚚 Versandkosten-Staffel"
+    files:
+      - name: staffel
+        label: "Versandkosten-Staffel nach Warenwert"
+        file: src/content/versandstaffel.json
+        description: >
+          Gilt automatisch im Warenkorb/an der Kasse, sobald jemand mehrere Produkte oder
+          mehrere Stück kauft (bei genau 1 Stück von 1 Produkt gilt stattdessen der eigene
+          Versandpreis am Produkt, falls dort einer eingetragen ist). Ab 75 € Warenwert ist der
+          Versand immer kostenlos, unabhängig von dieser Tabelle.
+        fields:
+          - label: Deutschland
+            name: de
+            widget: list
+            summary: "ab {{fields.abWarenwert}} € → {{fields.kosten}} €"
+            fields:
+              - { label: "Ab Warenwert (€)", name: abWarenwert, widget: number, value_type: float, step: 0.01 }
+              - { label: "Versandkosten (€)", name: kosten, widget: number, value_type: float, step: 0.01 }
+          - label: Österreich
+            name: at
+            widget: list
+            summary: "ab {{fields.abWarenwert}} € → {{fields.kosten}} €"
+            fields:
+              - { label: "Ab Warenwert (€)", name: abWarenwert, widget: number, value_type: float, step: 0.01 }
+              - { label: "Versandkosten (€)", name: kosten, widget: number, value_type: float, step: 0.01 }
+          - label: Schweiz
+            name: ch
+            widget: list
+            summary: "ab {{fields.abWarenwert}} € → {{fields.kosten}} €"
+            fields:
+              - { label: "Ab Warenwert (€)", name: abWarenwert, widget: number, value_type: float, step: 0.01 }
+              - { label: "Versandkosten (€)", name: kosten, widget: number, value_type: float, step: 0.01 }
+          - label: Luxemburg
+            name: lu
+            widget: list
+            summary: "ab {{fields.abWarenwert}} € → {{fields.kosten}} €"
+            fields:
+              - { label: "Ab Warenwert (€)", name: abWarenwert, widget: number, value_type: float, step: 0.01 }
+              - { label: "Versandkosten (€)", name: kosten, widget: number, value_type: float, step: 0.01 }
diff --git a/src/content/versandstaffel.json b/src/content/versandstaffel.json
new file mode 100644
index 0000000..da3cbfa
--- /dev/null
+++ b/src/content/versandstaffel.json
@@ -0,0 +1,22 @@
+{
+  "de": [
+    { "abWarenwert": 0, "kosten": 4.95 },
+    { "abWarenwert": 25, "kosten": 3.95 },
+    { "abWarenwert": 50, "kosten": 2.95 }
+  ],
+  "at": [
+    { "abWarenwert": 0, "kosten": 6.95 },
+    { "abWarenwert": 25, "kosten": 5.95 },
+    { "abWarenwert": 50, "kosten": 4.95 }
+  ],
+  "ch": [
+    { "abWarenwert": 0, "kosten": 9.95 },
+    { "abWarenwert": 25, "kosten": 8.95 },
+    { "abWarenwert": 50, "kosten": 7.95 }
+  ],
+  "lu": [
+    { "abWarenwert": 0, "kosten": 6.95 },
+    { "abWarenwert": 25, "kosten": 5.95 },
+    { "abWarenwert": 50, "kosten": 4.95 }
+  ]
+}
diff --git a/src/data/products.ts b/src/data/products.ts
index 96f8607..7887e47 100644
--- a/src/data/products.ts
+++ b/src/data/products.ts
@@ -29,6 +29,11 @@ export interface Product {
   lieferzeit?: string;
   badges: Badge[];
   bilder?: string[]; // Pfade zu Produktfotos, von VanVan im Admin-Bereich hochgeladen
+  // Eigene Versandkosten je Land — gelten NUR, wenn genau 1 Stück dieses einen Produkts
+  // gekauft wird (Einzelkauf). Bei mehreren Produkten/Stückzahlen greift stattdessen die
+  // Versandkosten-Staffel (siehe src/data/versand.ts). Optional, damit Bestandsprodukte ohne
+  // diese Angabe nicht kaputtgehen — dann greift automatisch die Staffel als Rückfalllösung.
+  versand?: { de?: number; at?: number; ch?: number; lu?: number };
 }
 
 const modules = import.meta.glob("/src/content/products/*.json", { eager: true }) as Record<
diff --git a/src/data/versand.ts b/src/data/versand.ts
new file mode 100644
index 0000000..3ba7dc6
--- /dev/null
+++ b/src/data/versand.ts
@@ -0,0 +1,73 @@
+// Versandkosten-Logik. Regeln (mit dem Nutzer am 02.08.2026 abgestimmt):
+// 1. Warenkorb-Gesamtwert >= 75 € → Versand immer kostenlos, egal wie viele Produkte/Stück.
+// 2. Genau 1 Stück von genau 1 Produkt im Warenkorb → der am Produkt selbst hinterlegte
+//    Versandpreis für das Zielland gilt (falls hinterlegt, sonst Fallback auf die Staffel).
+// 3. Alles andere (mehrere Produkte und/oder mehrere Stück) → Versandkosten-Staffel nach
+//    Gesamt-Warenwert für das Zielland (src/content/versandstaffel.json), von VanVan im
+//    Adminbereich bearbeitbar.
+
+import type { Product } from "./products";
+
+export type CountryCode = "de" | "at" | "ch" | "lu";
+
+export interface VersandStufe {
+  abWarenwert: number;
+  kosten: number;
+}
+
+export interface Versandstaffel {
+  de: VersandStufe[];
+  at: VersandStufe[];
+  ch: VersandStufe[];
+  lu: VersandStufe[];
+}
+
+// @ts-ignore -- JSON-Import, zur Build-Zeit von Astro/Vite aufgelöst
+import versandstaffelRaw from "../content/versandstaffel.json";
+export const versandstaffel = versandstaffelRaw as Versandstaffel;
+
+export const FREE_SHIPPING_FROM = 75;
+
+function tierLookup(land: CountryCode, warenwert: number): number {
+  const stufen = versandstaffel[land] ?? [];
+  const sortiert = [...stufen].sort((a, b) => a.abWarenwert - b.abWarenwert);
+  let kosten = sortiert[0]?.kosten ?? 0;
+  for (const s of sortiert) {
+    if (warenwert >= s.abWarenwert) kosten = s.kosten;
+  }
+  return kosten;
+}
+
+export interface MinimalCartItem {
+  slug: string;
+  preis: number;
+  menge: number;
+}
+
+/**
+ * Berechnet die Versandkosten für einen Warenkorb in ein bestimmtes Land.
+ * `alleProdukte` wird gebraucht, um bei Einzelkäufen den produktspezifischen Versandpreis
+ * nachzuschlagen (die Cart-Items selbst kennen nur slug/preis/menge, keine Versanddaten).
+ */
+export function berechneVersandkosten(
+  land: CountryCode,
+  items: MinimalCartItem[],
+  alleProdukte: Product[]
+): number {
+  if (items.length === 0) return 0;
+
+  const warenwert = items.reduce((sum, i) => sum + i.preis * i.menge, 0);
+  if (warenwert >= FREE_SHIPPING_FROM) return 0;
+
+  const gesamtmenge = items.reduce((sum, i) => sum + i.menge, 0);
+  const istEinzelkauf = items.length === 1 && gesamtmenge === 1;
+
+  if (istEinzelkauf) {
+    const produkt = alleProdukte.find((p) => p.slug === items[0].slug);
+    const eigenerPreis = produkt?.versand?.[land];
+    if (typeof eigenerPreis === "number") return eigenerPreis;
+    // Kein eigener Versandpreis hinterlegt -> Staffel als Rückfalllösung
+  }
+
+  return tierLookup(land, warenwert);
+}
diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro
index 336d8f2..66fdc60 100644
--- a/src/pages/ch/checkout/index.astro
+++ b/src/pages/ch/checkout/index.astro
@@ -32,10 +32,10 @@ const t = useTranslations(lang);
         <div>
           <label for="land">{t.checkout.country}</label>
           <select id="land">
-            <option selected>Schwiz</option>
-            <option>Dütschland</option>
-            <option>Öschterrych</option>
-            <option>Luxemburg</option>
+            <option value="ch" selected>Schwiz</option>
+            <option value="de">Dütschland</option>
+            <option value="at">Öschterrych</option>
+            <option value="lu">Luxemburg</option>
           </select>
         </div>
 
@@ -74,19 +74,35 @@ const t = useTranslations(lang);
 </Layout>
 
 <script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/ch/checkout/danke/", checkoutLang: lang }}>
+  // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
+  window.__checkoutVars = { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang };
+</script>
+<script type="module">
   import { getCart, cartTotal } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
+  import { products } from "../../../data/products";
+  import { berechneVersandkosten } from "../../../data/versand";
+
+  const { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang } = window.__checkoutVars;
 
   const summary = document.getElementById("checkout-summary");
+  const landSelect = document.getElementById("land");
   const cart = getCart();
   const subtotal = cartTotal();
-  const shipping = cart.length === 0 ? 0 : subtotal >= 75 ? 0 : 4.95;
 
-  summary.innerHTML = `
-    ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
-    <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
-    <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
-  `;
+  function renderSummary() {
+    const land = landSelect.value;
+    const shipping = cart.length === 0 ? 0 : berechneVersandkosten(land, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
+
+    summary.innerHTML = `
+      ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
+      <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
+      <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
+    `;
+  }
+
+  renderSummary();
+  landSelect.addEventListener("change", renderSummary);
 
   document.getElementById("checkout-form").addEventListener("submit", (e) => {
     e.preventDefault();
diff --git a/src/pages/ch/warenkorb/index.astro b/src/pages/ch/warenkorb/index.astro
index 9fedc87..7cd52c8 100644
--- a/src/pages/ch/warenkorb/index.astro
+++ b/src/pages/ch/warenkorb/index.astro
@@ -39,9 +39,15 @@ const t = useTranslations(lang);
 </Layout>
 
 <script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, cartLang: lang }}>
+  // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
+  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang };
+</script>
+<script type="module">
   import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
 
+  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang } = window.__cartVars;
+
   function render() {
     const cart = getCart();
     const empty = document.getElementById("cart-empty");
diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro
index d9761bd..d00ed7a 100644
--- a/src/pages/checkout/index.astro
+++ b/src/pages/checkout/index.astro
@@ -32,10 +32,10 @@ const t = useTranslations(lang);
         <div>
           <label for="land">{t.checkout.country}</label>
           <select id="land">
-            <option>Deutschland</option>
-            <option>Österreich</option>
-            <option>Schweiz</option>
-            <option>Luxemburg</option>
+            <option value="de">Deutschland</option>
+            <option value="at">Österreich</option>
+            <option value="ch">Schweiz</option>
+            <option value="lu">Luxemburg</option>
           </select>
         </div>
 
@@ -74,19 +74,38 @@ const t = useTranslations(lang);
 </Layout>
 
 <script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/checkout/danke/", checkoutLang: lang }}>
+  // WICHTIG: define:vars-Skripte werden von Astro in ein IIFE gepackt (kein ES-Modul) — echte
+  // `import`-Anweisungen würden hier zur Laufzeit mit "Cannot use import statement outside a
+  // module" fehlschlagen. Deshalb hier nur die vom Server gerenderten Werte auf window ablegen,
+  // die eigentliche Logik läuft im separaten <script type="module"> darunter.
+  window.__checkoutVars = { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang };
+</script>
+<script type="module">
   import { getCart, cartTotal } from "../../scripts/cart";
   import { formatPrice } from "../../i18n/format";
+  import { products } from "../../data/products";
+  import { berechneVersandkosten } from "../../data/versand";
+
+  const { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang } = window.__checkoutVars;
 
   const summary = document.getElementById("checkout-summary");
+  const landSelect = document.getElementById("land");
   const cart = getCart();
   const subtotal = cartTotal();
-  const shipping = cart.length === 0 ? 0 : subtotal >= 75 ? 0 : 4.95;
 
-  summary.innerHTML = `
-    ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
-    <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
-    <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
-  `;
+  function renderSummary() {
+    const land = landSelect.value;
+    const shipping = cart.length === 0 ? 0 : berechneVersandkosten(land, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
+
+    summary.innerHTML = `
+      ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
+      <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
+      <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
+    `;
+  }
+
+  renderSummary();
+  landSelect.addEventListener("change", renderSummary);
 
   document.getElementById("checkout-form").addEventListener("submit", (e) => {
     e.preventDefault();
diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro
index 9282205..6e2517f 100644
--- a/src/pages/en/checkout/index.astro
+++ b/src/pages/en/checkout/index.astro
@@ -32,10 +32,10 @@ const t = useTranslations(lang);
         <div>
           <label for="land">{t.checkout.country}</label>
           <select id="land">
-            <option>Germany</option>
-            <option>Austria</option>
-            <option>Switzerland</option>
-            <option>Luxembourg</option>
+            <option value="de">Germany</option>
+            <option value="at">Austria</option>
+            <option value="ch">Switzerland</option>
+            <option value="lu">Luxembourg</option>
           </select>
         </div>
 
@@ -74,19 +74,35 @@ const t = useTranslations(lang);
 </Layout>
 
 <script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/en/checkout/danke/", checkoutLang: lang }}>
+  // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
+  window.__checkoutVars = { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang };
+</script>
+<script type="module">
   import { getCart, cartTotal } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
+  import { products } from "../../../data/products";
+  import { berechneVersandkosten } from "../../../data/versand";
+
+  const { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang } = window.__checkoutVars;
 
   const summary = document.getElementById("checkout-summary");
+  const landSelect = document.getElementById("land");
   const cart = getCart();
   const subtotal = cartTotal();
-  const shipping = cart.length === 0 ? 0 : subtotal >= 75 ? 0 : 4.95;
 
-  summary.innerHTML = `
-    ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
-    <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
-    <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
-  `;
+  function renderSummary() {
+    const land = landSelect.value;
+    const shipping = cart.length === 0 ? 0 : berechneVersandkosten(land, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
+
+    summary.innerHTML = `
+      ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
+      <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
+      <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
+    `;
+  }
+
+  renderSummary();
+  landSelect.addEventListener("change", renderSummary);
 
   document.getElementById("checkout-form").addEventListener("submit", (e) => {
     e.preventDefault();
diff --git a/src/pages/en/warenkorb/index.astro b/src/pages/en/warenkorb/index.astro
index c81fe70..06dd5d6 100644
--- a/src/pages/en/warenkorb/index.astro
+++ b/src/pages/en/warenkorb/index.astro
@@ -39,9 +39,15 @@ const t = useTranslations(lang);
 </Layout>
 
 <script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, cartLang: lang }}>
+  // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
+  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang };
+</script>
+<script type="module">
   import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
 
+  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang } = window.__cartVars;
+
   function render() {
     const cart = getCart();
     const empty = document.getElementById("cart-empty");
diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro
index b645afc..f03fdc1 100644
--- a/src/pages/fr/checkout/index.astro
+++ b/src/pages/fr/checkout/index.astro
@@ -32,10 +32,10 @@ const t = useTranslations(lang);
         <div>
           <label for="land">{t.checkout.country}</label>
           <select id="land">
-            <option>Allemagne</option>
-            <option>Autriche</option>
-            <option>Suisse</option>
-            <option>Luxembourg</option>
+            <option value="de">Allemagne</option>
+            <option value="at">Autriche</option>
+            <option value="ch">Suisse</option>
+            <option value="lu">Luxembourg</option>
           </select>
         </div>
 
@@ -74,19 +74,35 @@ const t = useTranslations(lang);
 </Layout>
 
 <script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/fr/checkout/danke/", checkoutLang: lang }}>
+  // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
+  window.__checkoutVars = { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang };
+</script>
+<script type="module">
   import { getCart, cartTotal } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
+  import { products } from "../../../data/products";
+  import { berechneVersandkosten } from "../../../data/versand";
+
+  const { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang } = window.__checkoutVars;
 
   const summary = document.getElementById("checkout-summary");
+  const landSelect = document.getElementById("land");
   const cart = getCart();
   const subtotal = cartTotal();
-  const shipping = cart.length === 0 ? 0 : subtotal >= 75 ? 0 : 4.95;
 
-  summary.innerHTML = `
-    ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
-    <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
-    <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
-  `;
+  function renderSummary() {
+    const land = landSelect.value;
+    const shipping = cart.length === 0 ? 0 : berechneVersandkosten(land, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
+
+    summary.innerHTML = `
+      ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
+      <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
+      <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
+    `;
+  }
+
+  renderSummary();
+  landSelect.addEventListener("change", renderSummary);
 
   document.getElementById("checkout-form").addEventListener("submit", (e) => {
     e.preventDefault();
diff --git a/src/pages/fr/warenkorb/index.astro b/src/pages/fr/warenkorb/index.astro
index 0c5319b..0ba74e9 100644
--- a/src/pages/fr/warenkorb/index.astro
+++ b/src/pages/fr/warenkorb/index.astro
@@ -39,9 +39,15 @@ const t = useTranslations(lang);
 </Layout>
 
 <script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, cartLang: lang }}>
+  // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
+  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang };
+</script>
+<script type="module">
   import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
 
+  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang } = window.__cartVars;
+
   function render() {
     const cart = getCart();
     const empty = document.getElementById("cart-empty");
diff --git a/src/pages/warenkorb/index.astro b/src/pages/warenkorb/index.astro
index 22e4f79..9fe448b 100644
--- a/src/pages/warenkorb/index.astro
+++ b/src/pages/warenkorb/index.astro
@@ -39,9 +39,15 @@ const t = useTranslations(lang);
 </Layout>
 
 <script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, cartLang: lang }}>
+  // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
+  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang };
+</script>
+<script type="module">
   import { getCart, updateQuantity, removeFromCart, cartTotal } from "../../scripts/cart";
   import { formatPrice } from "../../i18n/format";
 
+  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, cartLang } = window.__cartVars;
+
   function render() {
     const cart = getCart();
     const empty = document.getElementById("cart-empty");