feat(shop): show sale badge and strikethrough price on discounted products

Products with compareAtPrice set now show a "-XX%" badge over the
image plus a struck-through original price, wherever price is
displayed (shop grid, homepage spotlight, cart line items). Also
switched the "inkl. MwSt. zzgl. Versand" rows on Pricing.tsx and
ProductSpotlight from items-center to items-baseline — with a large
price next to small disclosure text, center alignment left the
small text visibly floating above the price's bottom edge.

app/cart/components/CartContent.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { useCart, removeFromCart, setQuantity } from "../../lib/cart";
 import { useProducts } from "../../lib/products";
-import { formatPrice } from "../../lib/format";
+import { formatPrice, discountPercent } from "../../lib/format";
 import { Reveal } from "../../components/Reveal";
 import { VersandModal } from "../../components/VersandModal";
 import { FreeShippingBanner } from "./FreeShippingBanner";
@@ -96,7 +96,9 @@ export function CartContent({
               have had room for a real 2-column layout at Tablet widths
               anyway). */}
           <Reveal className="w-full lg:flex-1 flex flex-col gap-6 items-start bg-bg-base border border-border rounded-md p-6 md:p-8">
-            {items.map(({ entry, product }, i) => (
+            {items.map(({ entry, product }, i) => {
+              const discount = discountPercent(product.price, product.compareAtPrice);
+              return (
               <div key={product.id} className="w-full">
                 {i > 0 && <div className="h-px bg-border w-full mb-6" />}
                 <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 items-start sm:items-center w-full">
@@ -114,6 +116,9 @@ export function CartContent({
                     <div className="flex flex-col gap-0.5 items-start">
                       <p className="text-label text-text-muted">Einzelpreis</p>
                       <p className="flex items-baseline gap-1.5">
+                        {discount !== null && (
+                          <span className="text-label text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</span>
+                        )}
                         <span className="font-bold text-body-sm text-text-primary">{formatPrice(product.price)}</span>
                         <span className="text-label text-text-muted">inkl. MwSt.</span>
                       </p>
@@ -147,7 +152,8 @@ export function CartContent({
                   </div>
                 </div>
               </div>
-            ))}
+              );
+            })}
 
             <div className="h-px bg-border w-full" />