From 677104d4a61a971661712b15e24328143d34c61a Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Sun, 2 Aug 2026 20:21:30 +0200
Subject: [PATCH] =?UTF-8?q?Warenkorb:=20Artikel=20einzeln=20zum=20Kauf=20a?=
 =?UTF-8?q?usw=C3=A4hlen,=20andere=20bleiben=20unverbindlich=20liegen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Jeder Artikel im Warenkorb hat jetzt eine Checkbox "Jetzt kaufen". Nur
angehakte Artikel zählen zur Zwischensumme, zum Versand, zum Gutschein
und zum Checkout — abgewählte Artikel bleiben sichtbar (leicht
abgedunkelt, mit "Bleibt im Warenkorb, wird noch nicht gekauft"-Hinweis)
im Warenkorb liegen, ohne mitgekauft zu werden. Die Auswahl wird pro
Artikel gespeichert (localStorage) und bleibt bis zur nächsten Änderung
bestehen. Der Checkout übernimmt automatisch nur die ausgewählten
Artikel.

Verifiziert per Puppeteer: Abwählen eines Artikels reduziert Summe/
Rechnungsliste sofort korrekt, Checkout zeigt nur den ausgewählten
Artikel, keine Konsolenfehler.
---
 src/i18n/ui.ts                     |  4 ++++
 src/pages/ch/checkout/index.astro  |  6 ++++--
 src/pages/ch/warenkorb/index.astro | 29 +++++++++++++++++++-------
 src/pages/checkout/index.astro     |  6 ++++--
 src/pages/en/checkout/index.astro  |  6 ++++--
 src/pages/en/warenkorb/index.astro | 29 +++++++++++++++++++-------
 src/pages/fr/checkout/index.astro  |  6 ++++--
 src/pages/fr/warenkorb/index.astro | 29 +++++++++++++++++++-------
 src/pages/warenkorb/index.astro    | 29 +++++++++++++++++++-------
 src/scripts/cart.ts                | 33 +++++++++++++++++++++++++-----
 src/styles/global.css              | 32 +++++++++++++++++++++++++++++
 11 files changed, 168 insertions(+), 41 deletions(-)

diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 35bda35..278f046 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -152,6 +152,7 @@ export const ui = {
       discount: "Rabatt", mengenrabatt: (p: string) => `Mengenrabatt -${p}%`,
       mengenrabattTier: (ab: string, p: string) => `ab ${ab} Stück -${p}%`,
       couponLabel: "🎟️ Gutscheincode", couponPlaceholder: "Code eingeben", couponApply: "Einlösen", couponRemove: "Entfernen",
+      buyNow: "Jetzt kaufen", keptInCart: "Bleibt im Warenkorb, wird noch nicht gekauft",
       couponInvalid: "Code ungültig oder abgelaufen.", couponApplied: (code: string) => `Gutschein „${code}" eingelöst`,
     },
     checkout: {
@@ -333,6 +334,7 @@ export const ui = {
       discount: "Discount", mengenrabatt: (p: string) => `Bulk discount -${p}%`,
       mengenrabattTier: (ab: string, p: string) => `from ${ab} pcs -${p}%`,
       couponLabel: "🎟️ Coupon code", couponPlaceholder: "Enter code", couponApply: "Apply", couponRemove: "Remove",
+      buyNow: "Buy now", keptInCart: "Stays in cart, not purchased yet",
       couponInvalid: "Code invalid or expired.", couponApplied: (code: string) => `Coupon "${code}" applied`,
     },
     checkout: {
@@ -514,6 +516,7 @@ export const ui = {
       discount: "Rabatt", mengenrabatt: (p: string) => `Mengerabatt -${p}%`,
       mengenrabattTier: (ab: string, p: string) => `ab ${ab} Stuck -${p}%`,
       couponLabel: "🎟️ Gutschy-Code", couponPlaceholder: "Code igäh", couponApply: "Ilöse", couponRemove: "Ewägmache",
+      buyNow: "Jetzt chaufe", keptInCart: "Blibt im Warenchorb, wird no nid chauft",
       couponInvalid: "Code ungültig oder abgloffe.", couponApplied: (code: string) => `Gutschy „${code}" iglöst`,
     },
     checkout: {
@@ -695,6 +698,7 @@ export const ui = {
       discount: "Remise", mengenrabatt: (p: string) => `Remise de quantité -${p}%`,
       mengenrabattTier: (ab: string, p: string) => `dès ${ab} pièces -${p}%`,
       couponLabel: "🎟️ Code promo", couponPlaceholder: "Entrer le code", couponApply: "Valider", couponRemove: "Retirer",
+      buyNow: "Acheter maintenant", keptInCart: "Reste dans le panier, pas encore acheté",
       couponInvalid: "Code invalide ou expiré.", couponApplied: (code: string) => `Code promo « ${code} » appliqué`,
     },
     checkout: {
diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro
index 612f79d..5673e51 100644
--- a/src/pages/ch/checkout/index.astro
+++ b/src/pages/ch/checkout/index.astro
@@ -147,7 +147,7 @@ const t = useTranslations(lang);
   window.__checkoutVars = { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang, discountLabel, couponInvalid, couponAppliedTemplate, couponRemoveLabel, klarnaConnectLabel, klarnaConnectingLabel, klarnaConnectedLabel, bankHolderLabel, bankIbanLabel, bankBicLabel, bankBankNameLabel, bankPlaceholderLabel };
 </script>
 <script type="module">
-  import { getCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon } from "../../../scripts/cart";
+  import { getCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon, istAusgewaehlt } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
   import { products } from "../../../data/products";
   import { berechneVersandkosten } from "../../../data/versand";
@@ -158,7 +158,9 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
 
   const summary = document.getElementById("checkout-summary");
   const landSelect = document.getElementById("land");
-  const cart = getCart();
+  // Nur die im Warenkorb ausgewählten Artikel werden hier bestellt — abgewählte bleiben im
+  // Warenkorb liegen und tauchen im Checkout gar nicht erst auf.
+  const cart = getCart().filter(istAusgewaehlt);
   const subtotal = cartTotal();
   let currentTotal = 0;
 
diff --git a/src/pages/ch/warenkorb/index.astro b/src/pages/ch/warenkorb/index.astro
index 68f9bf4..180fef9 100644
--- a/src/pages/ch/warenkorb/index.astro
+++ b/src/pages/ch/warenkorb/index.astro
@@ -57,18 +57,18 @@ const t = useTranslations(lang);
   </section>
 </Layout>
 
-<script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, freeLabel: t.checkout.free, cartLang: lang, mengenrabattTemplate: t.cart.mengenrabatt("__P__"), couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove }}>
+<script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, freeLabel: t.checkout.free, cartLang: lang, mengenrabattTemplate: t.cart.mengenrabatt("__P__"), couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove, buyNowLabel: t.cart.buyNow, keptInCartLabel: t.cart.keptInCart }}>
   // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
-  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel };
+  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel, buyNowLabel, keptInCartLabel };
 </script>
 <script type="module">
-  import { getCart, updateQuantity, removeFromCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon } from "../../../scripts/cart";
+  import { getCart, updateQuantity, removeFromCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon, istAusgewaehlt, setAusgewaehlt } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
   import { getProduct, products } from "../../../data/products";
   import { berechneVersandkosten } from "../../../data/versand";
 import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt";
 
-  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel } = window.__cartVars;
+  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel, buyNowLabel, keptInCartLabel } = window.__cartVars;
   const landSelect = document.getElementById("cart-land");
 
   function render() {
@@ -98,13 +98,17 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
         ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
         : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
       const mengenBadge = mengenProzent > 0 ? `<div class="small mengenrabatt-badge">${mengenrabattTemplate.replace("__P__", mengenProzent)}</div>` : "";
+      const ausgewaehlt = istAusgewaehlt(i);
+      const keptBadge = !ausgewaehlt ? `<div class="small kept-in-cart-badge">🕓 ${keptInCartLabel}</div>` : "";
       return `
-      <div class="cart-item">
+      <div class="cart-item ${ausgewaehlt ? "" : "deselected"}">
+        <input type="checkbox" class="buy-toggle" data-slug="${i.slug}" ${ausgewaehlt ? "checked" : ""} aria-label="${buyNowLabel}" title="${buyNowLabel}" />
         ${thumb}
         <div class="info">
           <strong>${i.name}</strong>
           <div class="small">${formatPrice(zeilenpreis / i.menge, cartLang)} ${perItemLabel}</div>
           ${mengenBadge}
+          ${keptBadge}
         </div>
         <div class="qty-controls">
           <button data-action="dec" data-slug="${i.slug}" aria-label="−">−</button>
@@ -117,15 +121,19 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
     `;
     }).join("");
 
+    // Nur ausgewählte Artikel fließen in Rechnung/Zwischensumme/Versand/Checkout ein — abgewählte
+    // bleiben sichtbar im Warenkorb liegen (leicht abgedunkelt), ohne mitgekauft zu werden.
+    const ausgewaehlteZeilen = zeilen.filter(({ item: i }) => istAusgewaehlt(i));
+
     // Rechnungs-Übersicht in der Zusammenfassung — dieselbe Positionsliste wie im Warenkorb
     // links, nur kompakt als "Beleg" (Menge × Name → Zeilenpreis), passend zum Checkout.
-    document.getElementById("summary-items").innerHTML = zeilen.map(({ item: i, zeilenpreis }) =>
+    document.getElementById("summary-items").innerHTML = ausgewaehlteZeilen.map(({ item: i, zeilenpreis }) =>
       `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(zeilenpreis, cartLang)}</span></div>`
     ).join("");
 
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
-    const shipping = berechneVersandkosten(landSelect.value, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
+    const shipping = berechneVersandkosten(landSelect.value, ausgewaehlteZeilen.map(({ item: i }) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
     const coupon = appliedCoupon();
     const discount = couponDiscount(subtotal);
     const total = Math.max(0, subtotal - discount) + shipping;
@@ -164,6 +172,13 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
         render();
       });
     });
+
+    itemsEl.querySelectorAll(".buy-toggle").forEach((el) => {
+      el.addEventListener("change", (e) => {
+        setAusgewaehlt(e.currentTarget.dataset.slug, e.currentTarget.checked);
+        render();
+      });
+    });
   }
 
   document.getElementById("coupon-apply").addEventListener("click", () => {
diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro
index 5fb3144..f293fe9 100644
--- a/src/pages/checkout/index.astro
+++ b/src/pages/checkout/index.astro
@@ -150,7 +150,7 @@ const t = useTranslations(lang);
   window.__checkoutVars = { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang, discountLabel, couponInvalid, couponAppliedTemplate, couponRemoveLabel, klarnaConnectLabel, klarnaConnectingLabel, klarnaConnectedLabel, bankHolderLabel, bankIbanLabel, bankBicLabel, bankBankNameLabel, bankPlaceholderLabel };
 </script>
 <script type="module">
-  import { getCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon } from "../../scripts/cart";
+  import { getCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon, istAusgewaehlt } from "../../scripts/cart";
   import { formatPrice } from "../../i18n/format";
   import { products } from "../../data/products";
   import { berechneVersandkosten } from "../../data/versand";
@@ -161,7 +161,9 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../data/bankverbi
 
   const summary = document.getElementById("checkout-summary");
   const landSelect = document.getElementById("land");
-  const cart = getCart();
+  // Nur die im Warenkorb ausgewählten Artikel werden hier bestellt — abgewählte bleiben im
+  // Warenkorb liegen und tauchen im Checkout gar nicht erst auf.
+  const cart = getCart().filter(istAusgewaehlt);
   const subtotal = cartTotal();
   let currentTotal = 0;
 
diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro
index c1946e4..8b4df00 100644
--- a/src/pages/en/checkout/index.astro
+++ b/src/pages/en/checkout/index.astro
@@ -147,7 +147,7 @@ const t = useTranslations(lang);
   window.__checkoutVars = { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang, discountLabel, couponInvalid, couponAppliedTemplate, couponRemoveLabel, klarnaConnectLabel, klarnaConnectingLabel, klarnaConnectedLabel, bankHolderLabel, bankIbanLabel, bankBicLabel, bankBankNameLabel, bankPlaceholderLabel };
 </script>
 <script type="module">
-  import { getCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon } from "../../../scripts/cart";
+  import { getCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon, istAusgewaehlt } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
   import { products } from "../../../data/products";
   import { berechneVersandkosten } from "../../../data/versand";
@@ -158,7 +158,9 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
 
   const summary = document.getElementById("checkout-summary");
   const landSelect = document.getElementById("land");
-  const cart = getCart();
+  // Nur die im Warenkorb ausgewählten Artikel werden hier bestellt — abgewählte bleiben im
+  // Warenkorb liegen und tauchen im Checkout gar nicht erst auf.
+  const cart = getCart().filter(istAusgewaehlt);
   const subtotal = cartTotal();
   let currentTotal = 0;
 
diff --git a/src/pages/en/warenkorb/index.astro b/src/pages/en/warenkorb/index.astro
index 18c4f8c..a70cefb 100644
--- a/src/pages/en/warenkorb/index.astro
+++ b/src/pages/en/warenkorb/index.astro
@@ -57,18 +57,18 @@ const t = useTranslations(lang);
   </section>
 </Layout>
 
-<script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, freeLabel: t.checkout.free, cartLang: lang, mengenrabattTemplate: t.cart.mengenrabatt("__P__"), couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove }}>
+<script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, freeLabel: t.checkout.free, cartLang: lang, mengenrabattTemplate: t.cart.mengenrabatt("__P__"), couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove, buyNowLabel: t.cart.buyNow, keptInCartLabel: t.cart.keptInCart }}>
   // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
-  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel };
+  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel, buyNowLabel, keptInCartLabel };
 </script>
 <script type="module">
-  import { getCart, updateQuantity, removeFromCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon } from "../../../scripts/cart";
+  import { getCart, updateQuantity, removeFromCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon, istAusgewaehlt, setAusgewaehlt } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
   import { getProduct, products } from "../../../data/products";
   import { berechneVersandkosten } from "../../../data/versand";
 import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt";
 
-  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel } = window.__cartVars;
+  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel, buyNowLabel, keptInCartLabel } = window.__cartVars;
   const landSelect = document.getElementById("cart-land");
 
   function render() {
@@ -98,13 +98,17 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
         ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
         : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
       const mengenBadge = mengenProzent > 0 ? `<div class="small mengenrabatt-badge">${mengenrabattTemplate.replace("__P__", mengenProzent)}</div>` : "";
+      const ausgewaehlt = istAusgewaehlt(i);
+      const keptBadge = !ausgewaehlt ? `<div class="small kept-in-cart-badge">🕓 ${keptInCartLabel}</div>` : "";
       return `
-      <div class="cart-item">
+      <div class="cart-item ${ausgewaehlt ? "" : "deselected"}">
+        <input type="checkbox" class="buy-toggle" data-slug="${i.slug}" ${ausgewaehlt ? "checked" : ""} aria-label="${buyNowLabel}" title="${buyNowLabel}" />
         ${thumb}
         <div class="info">
           <strong>${i.name}</strong>
           <div class="small">${formatPrice(zeilenpreis / i.menge, cartLang)} ${perItemLabel}</div>
           ${mengenBadge}
+          ${keptBadge}
         </div>
         <div class="qty-controls">
           <button data-action="dec" data-slug="${i.slug}" aria-label="−">−</button>
@@ -117,15 +121,19 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
     `;
     }).join("");
 
+    // Nur ausgewählte Artikel fließen in Rechnung/Zwischensumme/Versand/Checkout ein — abgewählte
+    // bleiben sichtbar im Warenkorb liegen (leicht abgedunkelt), ohne mitgekauft zu werden.
+    const ausgewaehlteZeilen = zeilen.filter(({ item: i }) => istAusgewaehlt(i));
+
     // Rechnungs-Übersicht in der Zusammenfassung — dieselbe Positionsliste wie im Warenkorb
     // links, nur kompakt als "Beleg" (Menge × Name → Zeilenpreis), passend zum Checkout.
-    document.getElementById("summary-items").innerHTML = zeilen.map(({ item: i, zeilenpreis }) =>
+    document.getElementById("summary-items").innerHTML = ausgewaehlteZeilen.map(({ item: i, zeilenpreis }) =>
       `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(zeilenpreis, cartLang)}</span></div>`
     ).join("");
 
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
-    const shipping = berechneVersandkosten(landSelect.value, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
+    const shipping = berechneVersandkosten(landSelect.value, ausgewaehlteZeilen.map(({ item: i }) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
     const coupon = appliedCoupon();
     const discount = couponDiscount(subtotal);
     const total = Math.max(0, subtotal - discount) + shipping;
@@ -164,6 +172,13 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
         render();
       });
     });
+
+    itemsEl.querySelectorAll(".buy-toggle").forEach((el) => {
+      el.addEventListener("change", (e) => {
+        setAusgewaehlt(e.currentTarget.dataset.slug, e.currentTarget.checked);
+        render();
+      });
+    });
   }
 
   document.getElementById("coupon-apply").addEventListener("click", () => {
diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro
index 3d3d80e..665d8d2 100644
--- a/src/pages/fr/checkout/index.astro
+++ b/src/pages/fr/checkout/index.astro
@@ -147,7 +147,7 @@ const t = useTranslations(lang);
   window.__checkoutVars = { freeLabel, totalLabel, shippingLabel, emptyCartAlert, thankYouPath, checkoutLang, discountLabel, couponInvalid, couponAppliedTemplate, couponRemoveLabel, klarnaConnectLabel, klarnaConnectingLabel, klarnaConnectedLabel, bankHolderLabel, bankIbanLabel, bankBicLabel, bankBankNameLabel, bankPlaceholderLabel };
 </script>
 <script type="module">
-  import { getCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon } from "../../../scripts/cart";
+  import { getCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon, istAusgewaehlt } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
   import { products } from "../../../data/products";
   import { berechneVersandkosten } from "../../../data/versand";
@@ -158,7 +158,9 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
 
   const summary = document.getElementById("checkout-summary");
   const landSelect = document.getElementById("land");
-  const cart = getCart();
+  // Nur die im Warenkorb ausgewählten Artikel werden hier bestellt — abgewählte bleiben im
+  // Warenkorb liegen und tauchen im Checkout gar nicht erst auf.
+  const cart = getCart().filter(istAusgewaehlt);
   const subtotal = cartTotal();
   let currentTotal = 0;
 
diff --git a/src/pages/fr/warenkorb/index.astro b/src/pages/fr/warenkorb/index.astro
index 20892d6..c4fe210 100644
--- a/src/pages/fr/warenkorb/index.astro
+++ b/src/pages/fr/warenkorb/index.astro
@@ -57,18 +57,18 @@ const t = useTranslations(lang);
   </section>
 </Layout>
 
-<script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, freeLabel: t.checkout.free, cartLang: lang, mengenrabattTemplate: t.cart.mengenrabatt("__P__"), couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove }}>
+<script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, freeLabel: t.checkout.free, cartLang: lang, mengenrabattTemplate: t.cart.mengenrabatt("__P__"), couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove, buyNowLabel: t.cart.buyNow, keptInCartLabel: t.cart.keptInCart }}>
   // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
-  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel };
+  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel, buyNowLabel, keptInCartLabel };
 </script>
 <script type="module">
-  import { getCart, updateQuantity, removeFromCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon } from "../../../scripts/cart";
+  import { getCart, updateQuantity, removeFromCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon, istAusgewaehlt, setAusgewaehlt } from "../../../scripts/cart";
   import { formatPrice } from "../../../i18n/format";
   import { getProduct, products } from "../../../data/products";
   import { berechneVersandkosten } from "../../../data/versand";
 import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt";
 
-  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel } = window.__cartVars;
+  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel, buyNowLabel, keptInCartLabel } = window.__cartVars;
   const landSelect = document.getElementById("cart-land");
 
   function render() {
@@ -98,13 +98,17 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
         ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
         : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
       const mengenBadge = mengenProzent > 0 ? `<div class="small mengenrabatt-badge">${mengenrabattTemplate.replace("__P__", mengenProzent)}</div>` : "";
+      const ausgewaehlt = istAusgewaehlt(i);
+      const keptBadge = !ausgewaehlt ? `<div class="small kept-in-cart-badge">🕓 ${keptInCartLabel}</div>` : "";
       return `
-      <div class="cart-item">
+      <div class="cart-item ${ausgewaehlt ? "" : "deselected"}">
+        <input type="checkbox" class="buy-toggle" data-slug="${i.slug}" ${ausgewaehlt ? "checked" : ""} aria-label="${buyNowLabel}" title="${buyNowLabel}" />
         ${thumb}
         <div class="info">
           <strong>${i.name}</strong>
           <div class="small">${formatPrice(zeilenpreis / i.menge, cartLang)} ${perItemLabel}</div>
           ${mengenBadge}
+          ${keptBadge}
         </div>
         <div class="qty-controls">
           <button data-action="dec" data-slug="${i.slug}" aria-label="−">−</button>
@@ -117,15 +121,19 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
     `;
     }).join("");
 
+    // Nur ausgewählte Artikel fließen in Rechnung/Zwischensumme/Versand/Checkout ein — abgewählte
+    // bleiben sichtbar im Warenkorb liegen (leicht abgedunkelt), ohne mitgekauft zu werden.
+    const ausgewaehlteZeilen = zeilen.filter(({ item: i }) => istAusgewaehlt(i));
+
     // Rechnungs-Übersicht in der Zusammenfassung — dieselbe Positionsliste wie im Warenkorb
     // links, nur kompakt als "Beleg" (Menge × Name → Zeilenpreis), passend zum Checkout.
-    document.getElementById("summary-items").innerHTML = zeilen.map(({ item: i, zeilenpreis }) =>
+    document.getElementById("summary-items").innerHTML = ausgewaehlteZeilen.map(({ item: i, zeilenpreis }) =>
       `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(zeilenpreis, cartLang)}</span></div>`
     ).join("");
 
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
-    const shipping = berechneVersandkosten(landSelect.value, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
+    const shipping = berechneVersandkosten(landSelect.value, ausgewaehlteZeilen.map(({ item: i }) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
     const coupon = appliedCoupon();
     const discount = couponDiscount(subtotal);
     const total = Math.max(0, subtotal - discount) + shipping;
@@ -164,6 +172,13 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../../data/rabatt
         render();
       });
     });
+
+    itemsEl.querySelectorAll(".buy-toggle").forEach((el) => {
+      el.addEventListener("change", (e) => {
+        setAusgewaehlt(e.currentTarget.dataset.slug, e.currentTarget.checked);
+        render();
+      });
+    });
   }
 
   document.getElementById("coupon-apply").addEventListener("click", () => {
diff --git a/src/pages/warenkorb/index.astro b/src/pages/warenkorb/index.astro
index ebeb2f9..54f697d 100644
--- a/src/pages/warenkorb/index.astro
+++ b/src/pages/warenkorb/index.astro
@@ -57,18 +57,18 @@ const t = useTranslations(lang);
   </section>
 </Layout>
 
-<script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, freeLabel: t.checkout.free, cartLang: lang, mengenrabattTemplate: t.cart.mengenrabatt("__P__"), couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove }}>
+<script define:vars={{ freeShipFrom: 75, removeLabel: t.cart.remove, perItemLabel: t.cart.perItem, remainingTemplate: t.cart.remaining("__V__"), freeShippingText: t.cart.freeShipping, freeLabel: t.checkout.free, cartLang: lang, mengenrabattTemplate: t.cart.mengenrabatt("__P__"), couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove, buyNowLabel: t.cart.buyNow, keptInCartLabel: t.cart.keptInCart }}>
   // WICHTIG: define:vars-Skripte laufen als IIFE, keine "import"-Anweisungen möglich.
-  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel };
+  window.__cartVars = { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel, buyNowLabel, keptInCartLabel };
 </script>
 <script type="module">
-  import { getCart, updateQuantity, removeFromCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon } from "../../scripts/cart";
+  import { getCart, updateQuantity, removeFromCart, cartTotal, appliedCoupon, couponDiscount, setCouponCode, clearCoupon, istAusgewaehlt, setAusgewaehlt } from "../../scripts/cart";
   import { formatPrice } from "../../i18n/format";
   import { getProduct, products } from "../../data/products";
   import { berechneVersandkosten } from "../../data/versand";
 import { effektiverZeilenpreis, mengenrabattProzent } from "../../data/rabatt";
 
-  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel } = window.__cartVars;
+  const { freeShipFrom, removeLabel, perItemLabel, remainingTemplate, freeShippingText, freeLabel, cartLang, mengenrabattTemplate, couponInvalid, couponAppliedTemplate, couponRemoveLabel, buyNowLabel, keptInCartLabel } = window.__cartVars;
   const landSelect = document.getElementById("cart-land");
 
   function render() {
@@ -98,13 +98,17 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../data/rabatt";
         ? `<img class="thumb product-photo" src="${foto}" alt="${i.name}" loading="lazy" />`
         : `<div class="img-placeholder thumb" role="img" aria-label="${i.name}"></div>`;
       const mengenBadge = mengenProzent > 0 ? `<div class="small mengenrabatt-badge">${mengenrabattTemplate.replace("__P__", mengenProzent)}</div>` : "";
+      const ausgewaehlt = istAusgewaehlt(i);
+      const keptBadge = !ausgewaehlt ? `<div class="small kept-in-cart-badge">🕓 ${keptInCartLabel}</div>` : "";
       return `
-      <div class="cart-item">
+      <div class="cart-item ${ausgewaehlt ? "" : "deselected"}">
+        <input type="checkbox" class="buy-toggle" data-slug="${i.slug}" ${ausgewaehlt ? "checked" : ""} aria-label="${buyNowLabel}" title="${buyNowLabel}" />
         ${thumb}
         <div class="info">
           <strong>${i.name}</strong>
           <div class="small">${formatPrice(zeilenpreis / i.menge, cartLang)} ${perItemLabel}</div>
           ${mengenBadge}
+          ${keptBadge}
         </div>
         <div class="qty-controls">
           <button data-action="dec" data-slug="${i.slug}" aria-label="−">−</button>
@@ -117,15 +121,19 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../data/rabatt";
     `;
     }).join("");
 
+    // Nur ausgewählte Artikel fließen in Rechnung/Zwischensumme/Versand/Checkout ein — abgewählte
+    // bleiben sichtbar im Warenkorb liegen (leicht abgedunkelt), ohne mitgekauft zu werden.
+    const ausgewaehlteZeilen = zeilen.filter(({ item: i }) => istAusgewaehlt(i));
+
     // Rechnungs-Übersicht in der Zusammenfassung — dieselbe Positionsliste wie im Warenkorb
     // links, nur kompakt als "Beleg" (Menge × Name → Zeilenpreis), passend zum Checkout.
-    document.getElementById("summary-items").innerHTML = zeilen.map(({ item: i, zeilenpreis }) =>
+    document.getElementById("summary-items").innerHTML = ausgewaehlteZeilen.map(({ item: i, zeilenpreis }) =>
       `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(zeilenpreis, cartLang)}</span></div>`
     ).join("");
 
     const subtotal = cartTotal();
     const remaining = Math.max(0, freeShipFrom - subtotal);
-    const shipping = berechneVersandkosten(landSelect.value, cart.map((i) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
+    const shipping = berechneVersandkosten(landSelect.value, ausgewaehlteZeilen.map(({ item: i }) => ({ slug: i.slug, preis: i.preis, menge: i.menge })), products);
     const coupon = appliedCoupon();
     const discount = couponDiscount(subtotal);
     const total = Math.max(0, subtotal - discount) + shipping;
@@ -164,6 +172,13 @@ import { effektiverZeilenpreis, mengenrabattProzent } from "../../data/rabatt";
         render();
       });
     });
+
+    itemsEl.querySelectorAll(".buy-toggle").forEach((el) => {
+      el.addEventListener("change", (e) => {
+        setAusgewaehlt(e.currentTarget.dataset.slug, e.currentTarget.checked);
+        render();
+      });
+    });
   }
 
   document.getElementById("coupon-apply").addEventListener("click", () => {
diff --git a/src/scripts/cart.ts b/src/scripts/cart.ts
index e3f4348..21aeb34 100644
--- a/src/scripts/cart.ts
+++ b/src/scripts/cart.ts
@@ -10,6 +10,16 @@ export interface CartItem {
   name: string;
   preis: number;
   menge: number;
+  // Ob dieser Artikel gerade gekauft werden soll oder nur "im Warenkorb liegen bleibt" für
+  // später. Fehlt das Feld (ältere, bereits gespeicherte Warenkörbe), gilt es als ausgewählt —
+  // siehe istAusgewaehlt().
+  ausgewaehlt?: boolean;
+}
+
+/** true, sofern nicht explizit auf false gesetzt — hält ältere localStorage-Warenkörbe ohne
+ *  dieses Feld weiterhin vollständig "ausgewählt" (kein Verhaltensbruch für Bestandsbesucher). */
+export function istAusgewaehlt(item: CartItem): boolean {
+  return item.ausgewaehlt !== false;
 }
 
 const KEY = "vandiy_cart_v1";
@@ -54,18 +64,31 @@ export function removeFromCart(slug: string) {
   saveCart(getCart().filter((i) => i.slug !== slug));
 }
 
+/** Legt fest, ob ein Artikel jetzt gekauft werden soll (true) oder nur im Warenkorb liegen
+ *  bleibt, ohne mitgekauft zu werden (false) — z.B. wenn man sich noch nicht sicher ist. */
+export function setAusgewaehlt(slug: string, ausgewaehlt: boolean) {
+  const cart = getCart();
+  const item = cart.find((i) => i.slug === slug);
+  if (item) item.ausgewaehlt = ausgewaehlt;
+  saveCart(cart);
+}
+
 export function cartCount(): number {
   return getCart().reduce((sum, i) => sum + i.menge, 0);
 }
 
 // Zwischensumme inkl. Produkt-Rabatt (Prozent/Betrag) UND Mengenrabatt-Staffel — schaut sich
 // dafür live die aktuellen Produktdaten an (nicht den bei addToCart gespeicherten Preis), damit
-// ein nachträglich geänderter/abgelaufener Rabatt sich sofort korrekt auswirkt.
+// ein nachträglich geänderter/abgelaufener Rabatt sich sofort korrekt auswirkt. Zählt NUR
+// Artikel, die gerade zum Kauf ausgewählt sind — abgewählte Artikel bleiben im Warenkorb liegen,
+// fließen aber nicht in Summe/Checkout ein.
 export function cartTotal(): number {
-  return getCart().reduce((sum, i) => {
-    const produkt = getProduct(i.slug);
-    return sum + (produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis);
-  }, 0);
+  return getCart()
+    .filter(istAusgewaehlt)
+    .reduce((sum, i) => {
+      const produkt = getProduct(i.slug);
+      return sum + (produkt ? effektiverZeilenpreis(produkt, i.menge) : i.menge * i.preis);
+    }, 0);
 }
 
 const COUPON_KEY = "vandiy_coupon_v1";
diff --git a/src/styles/global.css b/src/styles/global.css
index 0b49113..39b35e0 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -872,6 +872,38 @@ a:focus-visible, button:focus-visible {
 }
 .cart-item:hover { background: rgba(244, 241, 247, 0.02); }
 .cart-item:last-child { border-bottom: none; }
+
+/* Checkbox "jetzt kaufen" — abgewählte Artikel bleiben sichtbar im Warenkorb liegen, zählen aber
+   nicht mehr zur Summe/zum Checkout, bis sie wieder angehakt werden. */
+.cart-item .buy-toggle {
+  appearance: none;
+  width: 21px;
+  height: 21px;
+  border-radius: 6px;
+  border: 2px solid rgba(244, 241, 247, 0.3);
+  flex-shrink: 0;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
+}
+.cart-item .buy-toggle::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  clip-path: polygon(14% 44%, 0 65%, 45% 100%, 100% 16%, 80% 0%, 43% 68%);
+  transform: scale(0);
+  transition: transform 0.15s var(--ease);
+  background: #08181c;
+}
+.cart-item .buy-toggle:checked {
+  border-color: var(--c-accent);
+  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hover));
+}
+.cart-item .buy-toggle:checked::before { transform: scale(1); }
+.cart-item.deselected { opacity: 0.55; }
+.cart-item.deselected:hover { opacity: 0.8; }
+.kept-in-cart-badge { color: var(--c-text-muted); margin-top: 0.15rem; }
 .cart-item .thumb {
   width: 76px;
   height: 76px;