fix: Preis-/Datumsformat an Kunden-Locale anpassen, Produktgalerie-LCP verbessern

- format.ts: formatPrice/formatDate/formatDateTime/formatMonthYear nehmen
  jetzt ein optionales Locale-Argument (Default "de" fuer unveraenderte
  Aufrufer wie Rechnungen/Admin) und formatieren fuer "en" als en-GB statt
  hart codiert als de-DE -- englischsprachige Kundschaft sah bisher trotz
  gewaehlter Sprache "9,90 €" und "10. Mai 2026" statt "€9.90"/"10 May 2026".
  Alle kundenseitigen Aufrufer (Produktseite, Warenkorb, Checkout, Bestell-
  verfolgung, Konto-Bestellungen, Ernten-/Chargenseiten, Live-Suchvorschlaege,
  Bestell-/Versand-E-Mails) reichen jetzt die aktive Locale durch.
- en.ts: openCart/shippingWithCount/shippingLabel pluralisieren "item(s)"
  jetzt korrekt (vorher z.B. "Open cart, 1 items").
- product-gallery.tsx: Haupt- und Vorschaubilder nutzen jetzt next/image
  statt <img> (hochgeladene Produktfotos sind immer same-origin unter
  /uploads/..., brauchen also keine remotePatterns-Konfiguration wie der
  entfernte Kommentar behauptete) -- Hauptbild mit priority/responsivem
  sizes, da es auf der Produktseite das wahrscheinlichste LCP-Element ist.
- content-image.tsx: neue optionale priority-Prop; hero.tsx setzt sie fuer
  das Startseiten-Hero-Bild (ebenfalls LCP-Kandidat).
- Sticky-Mobile-CTA-Leiste und useCartStock-Polling gegengeprueft: bereits
  korrekt (pb-28-Platzreservierung bzw. Fetch nur bei Warenkorb-Aenderung
  ohne Intervall) -- keine Aenderung noetig.

Verifiziert: tsc --noEmit clean, pnpm test (142/142 gruen), pnpm build erfolgreich.

src/components/product-gallery.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRef, useState, type TouchEvent } from "react";
+import Image from "next/image";
 import { PlaceholderImage } from "@/components/placeholder-image";
 
 // Mindest-Wischstrecke in Pixeln, ab der ein Touch-Wisch als Bildwechsel
@@ -62,13 +63,25 @@ export function ProductGallery({ images, productName, description }: ProductGall
   return (
     <div>
       <div
-        className="aspect-[4/3] overflow-hidden touch-pan-y"
+        className="relative aspect-[4/3] overflow-hidden touch-pan-y"
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
       >
         {isImageSlide(active) ? (
-          // eslint-disable-next-line @next/next/no-img-element -- externe Bildquelle noch unbekannt, next/image braucht dafuer eine feste remotePatterns-Konfiguration.
-          <img src={active.src} alt={mainImageAlt} className="w-full h-full object-cover" draggable={false} />
+          // Hochgeladene Produktbilder liegen immer same-origin unter
+          // /uploads/... (siehe uploads.ts/isValidUploadPath) — next/image
+          // braucht dafuer KEINEN remotePatterns-Eintrag (nur externe
+          // Bildquellen brauchen den), siehe auch content-image.tsx. Als
+          // wahrscheinlichstes LCP-Element der Produktseite mit "priority"
+          // geladen, statt erst beim Scannen des Bild-Tags entdeckt zu werden.
+          <Image
+            src={active.src}
+            alt={mainImageAlt}
+            fill
+            sizes="(min-width: 768px) 50vw, 100vw"
+            priority
+            className="object-cover"
+          />
         ) : (
           <PlaceholderImage tone={active.tone} label={active.label} className="w-full h-full" />
         )}
@@ -82,13 +95,12 @@ export function ProductGallery({ images, productName, description }: ProductGall
               onClick={() => setActiveIndex(index)}
               aria-label={`${isImageSlide(slide) ? `Produktbild ${index + 1}` : slide.label} – Bild ${index + 1} von ${slides.length} anzeigen`}
               aria-current={index === activeIndex}
-              className={`aspect-square overflow-hidden border-2 transition-colors ${
+              className={`relative aspect-square overflow-hidden border-2 transition-colors ${
                 index === activeIndex ? "border-forest" : "border-transparent hover:border-ink/20"
               }`}
             >
               {isImageSlide(slide) ? (
-                // eslint-disable-next-line @next/next/no-img-element -- s.o.
-                <img src={slide.src} alt="" className="w-full h-full object-cover" />
+                <Image src={slide.src} alt="" fill sizes="120px" className="object-cover" />
               ) : (
                 <PlaceholderImage tone={slide.tone} label={slide.label} className="w-full h-full" />
               )}