fix(404): match /bestellbestaetigung's testimonial-band fixes, shrink band height

Same fixed-height + -inset-1 treatment as page-bestellbestaetigung's
own testimonial band, and the same class of top-edge boundary
artifact turned up in 404-testimonial-photo.jpg too (invisible in a
downscaled preview, visible once object-cover scales it up in the
browser) — re-cropped 15px further down to clear it.

Also shrunk both pages' testimonial band from h-[20rem]/24rem to
h-[14rem]/16rem — the taller version left too much empty vertical
space around the 3-line quote.

feat(cart): show the -XX% sale badge on cart line-item photos too

Same badge already used in the shop grid/spotlight/todo-cards
pricing panel, now also on /cart's product thumbnails when that
item has a compareAtPrice set.

app/bestellbestaetigung/components/BestellbestaetigungContent.tsx

@@ -249,7 +249,7 @@ export function BestellbestaetigungContent() {
           identical height regardless of how many lines the quote wraps
           to (a min-height alone lets whichever column has more content
           stretch the row past what the other side visually fills). */}
-      <Reveal className="relative w-full flex items-stretch h-[20rem] md:h-[24rem] bg-bg-muted overflow-hidden">
+      <Reveal className="relative w-full flex items-stretch h-[14rem] md:h-[16rem] bg-bg-muted overflow-hidden">
         <div className="relative w-full md:w-[45%] shrink-0">
           {/* -inset-1, not inset-0 — this section fades in via Reveal's
               y:28→0 transform; a plain inset-0 image can leave a

app/cart/components/CartContent.tsx

@@ -104,6 +104,11 @@ export function CartContent({
                 <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 items-start sm:items-center w-full">
                   <div className="relative size-[9.375rem] shrink-0 rounded-sm overflow-hidden">
                     <Image src={product.image} alt={product.name} fill sizes="150px" className="object-cover" />
+                    {discount !== null && (
+                      <span className="absolute top-2 left-2 rounded-full bg-brand px-2 py-0.5 text-label font-bold text-text-primary">
+                        -{discount}%
+                      </span>
+                    )}
                   </div>
                   <div className="flex flex-col gap-[0.625rem] items-start flex-1 min-w-0 w-full">
                     <p

app/not-found.tsx

@@ -165,22 +165,27 @@ export default function NotFound() {
 
         {/* Testimonial band — photo bleeds to the viewport edge, gradient
             fade into bg-base on its trailing edge instead of a hard cut,
-            same idea as page-bestellbestaetigung's photo+quote pattern.
-            404-testimonial-photo.jpg is cropped directly from the actual
-            mockup pixels (mockups/einfach-produktiv_mockup_404.png) rather
-            than reusing an unrelated existing asset — same real-photo
-            extraction convention the Figma rebuild used, just done on the
-            flat mockup image instead of in Figma. */}
-        <Reveal className="relative w-full flex items-stretch min-h-[16rem] bg-bg-muted overflow-hidden">
+            same idea as page-bestellbestaetigung's photo+quote pattern
+            (see that page's own comment for the fixed-h-/-inset-1
+            reasoning — a min-height alone lets whichever column has more
+            content stretch the row past what the other side visually
+            fills, and a plain inset-0 image can show a hairline gap at
+            the container edge). 404-testimonial-photo.jpg is cropped
+            directly from the actual mockup pixels
+            (mockups/einfach-produktiv_mockup_404.png) rather than
+            reusing an unrelated existing asset — same real-photo
+            extraction convention the Figma rebuild used, just done on
+            the flat mockup image instead of in Figma. */}
+        <Reveal className="relative w-full flex items-stretch h-[14rem] md:h-[16rem] bg-bg-muted overflow-hidden">
           <div className="relative w-full md:w-[45%] shrink-0">
             <img
               alt=""
               src="/404-testimonial-photo.jpg"
-              className="absolute inset-0 w-full h-full object-cover"
+              className="absolute -inset-1 w-[calc(100%+0.5rem)] h-[calc(100%+0.5rem)] object-cover"
             />
             <div className="hidden md:block absolute inset-y-0 right-0 w-40 bg-gradient-to-l from-bg-muted to-transparent" />
           </div>
-          <div className="flex-1 flex flex-col justify-center gap-3 px-8 md:px-16 py-12">
+          <div className="flex-1 flex flex-col justify-center gap-3 px-8 md:px-16 py-6">
             <p
               className="font-semibold text-h-section text-text-primary leading-[1.3] max-w-[28rem]"
               style={{ fontFamily: "var(--font-lora)" }}