From d0feaacd4cfea21737a72931f622aab92394b115 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Sun, 2 Aug 2026 20:27:27 +0200
Subject: [PATCH] =?UTF-8?q?Warenkorb:=20Trennlinie=20zwischen=20Artikeln?=
 =?UTF-8?q?=20als=20flie=C3=9Fender=20Verlauf=20mit=20Knopf-Ornament=20sta?=
 =?UTF-8?q?tt=20Strichen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die vorherige gestrichelte Linie wirkte noch zu "einfach nur Striche".
Jetzt fließt ein sanfter, an den Rändern ausblendender Verlauf in den
drei Marken-Farben (wie der Karten-Rand der Seite) über die volle
Breite, mit einem kleinen glänzenden Knopf in der Mitte — eine dezente
Anspielung auf's Nähen/Basteln, passend zur Marke, ohne aufdringlich zu
wirken.

Verifiziert per Puppeteer-Screenshot mit zwei Artikeln im Warenkorb.
---
 src/styles/global.css | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index f93f914..3ed3570 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -872,24 +872,39 @@ a:focus-visible, button:focus-visible {
 }
 .cart-item:hover { background: rgba(244, 241, 247, 0.02); }
 
-/* Trennung zwischen Warenkorb-Positionen als kleine "Naht" statt einer nüchternen grauen Linie
-   — zweifarbiger Verlaufs-Stich (Marken-Akzent + Lila), passt zum "Bastelbedarf"-Charme, bleibt
-   aber dezent und ruhig genug für den professionellen Rest der Seite. */
+/* Trennung zwischen Warenkorb-Positionen als kleines "Knopf an der Naht"-Detail statt einer
+   nüchternen Linie — fließender Verlauf in den drei Marken-Farben (wie der Karten-Rand der
+   Seite), mit einem kleinen glänzenden Knopf in der Mitte als Anspielung auf's Nähen/Basteln.
+   Bleibt dezent (schmal, sanftes Leuchten) statt aufdringlich. */
 .cart-item:not(:last-child)::after {
   content: "";
   position: absolute;
   left: 0.4rem;
   right: 0.4rem;
   bottom: 0;
-  height: 2px;
-  border-radius: 1px;
-  background: repeating-linear-gradient(
+  height: 1.5px;
+  background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--c-accent) 75%, transparent) 0 9px,
-    color-mix(in srgb, var(--c-purple-glow) 75%, transparent) 9px 18px,
-    transparent 18px 26px
+    transparent,
+    var(--c-accent) 15%,
+    var(--c-purple-glow) 50%,
+    var(--c-sale) 85%,
+    transparent
   );
-  opacity: 0.55;
+  opacity: 0.75;
+}
+.cart-item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: -4px;
+  z-index: 1;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  background: radial-gradient(circle at 35% 30%, #fff, var(--c-accent) 45%, var(--c-purple-glow) 100%);
+  box-shadow: 0 0 9px 2px color-mix(in srgb, var(--c-purple-glow) 55%, transparent);
 }
 
 /* Checkbox "jetzt kaufen" — abgewählte Artikel bleiben sichtbar im Warenkorb liegen, zählen aber