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/content-image.tsx

@@ -10,6 +10,10 @@ interface ContentImageProps {
   tone?: "forest" | "cream" | "honey";
   label?: string;
   sizes?: string;
+  /** Fuer das wahrscheinlichste LCP-Bild einer Seite (z.B. Startseiten-Hero)
+   *  true setzen — laedt das Bild mit hoher Prioritaet ohne Lazy-Loading,
+   *  statt es erst beim Scannen weiter unten im Dokument zu entdecken. */
+  priority?: boolean;
 }
 
 /**
@@ -29,6 +33,7 @@ export function ContentImage({
   tone = "forest",
   label,
   sizes = "100vw",
+  priority = false,
 }: ContentImageProps) {
   if (!src) {
     return <PlaceholderImage tone={tone} className={className} label={label} />;
@@ -41,7 +46,7 @@ export function ContentImage({
   const descriptiveAlt = label ? `${alt} – ${label}` : alt;
   return (
     <div className={`relative overflow-hidden ${className}`}>
-      <Image src={src} alt={descriptiveAlt} fill sizes={sizes} className="object-cover" />
+      <Image src={src} alt={descriptiveAlt} fill sizes={sizes} priority={priority} className="object-cover" />
     </div>
   );
 }

src/components/hero.tsx

@@ -51,6 +51,7 @@ export function Hero({
         tone="forest"
         className="h-[78vh] min-h-[520px] w-full"
         label="Bienenstand im Morgenlicht · Altenmünster"
+        priority
       />
       <div className="absolute inset-0 flex items-center bg-gradient-to-t from-forest/70 via-forest/10 to-transparent">
         <Container>

src/components/home-sections-a.tsx

@@ -128,7 +128,8 @@ type HoneySpotlightProduct = ProductWithRelations & {
 };
 
 export async function ProductSpotlight({ product }: { product: HoneySpotlightProduct }) {
-  const t = getDictionary(await getLocale());
+  const locale = await getLocale();
+  const t = getDictionary(locale);
   return (
     <section className="py-24 bg-forest text-cream">
       <Container className="grid md:grid-cols-2 gap-14 items-center">
@@ -162,7 +163,7 @@ export async function ProductSpotlight({ product }: { product: HoneySpotlightPro
           <dl className="mt-8 grid grid-cols-2 gap-4 text-sm text-cream/70">
             <div>
               <dt className="text-cream/65">{t.home.productSpotlight.harvest}</dt>
-              <dd>{formatDate(product.harvest.harvestDate)}</dd>
+              <dd>{formatDate(product.harvest.harvestDate, locale)}</dd>
             </div>
             <div>
               <dt className="text-cream/65">{t.home.productSpotlight.batch}</dt>
@@ -174,7 +175,7 @@ export async function ProductSpotlight({ product }: { product: HoneySpotlightPro
             </div>
             <div>
               <dt className="text-cream/65">{t.home.productSpotlight.price}</dt>
-              <dd>{formatPrice(product.priceCents, product.currency)}</dd>
+              <dd>{formatPrice(product.priceCents, product.currency, locale)}</dd>
             </div>
           </dl>
 

src/components/product-card.tsx

@@ -173,7 +173,7 @@ export function ProductCard({
   /** Optional — nur die Shop-Uebersicht laedt Bewertungen gebuendelt fuer das ganze Raster. */
   reviewSummary?: { average: number | null; count: number };
 }) {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const stock = product.inventory?.quantity ?? 0;
 
   return (
@@ -229,11 +229,11 @@ export function ProductCard({
         <div className="mt-2 flex items-center justify-between">
           <span className="text-sm text-ink/65">{product.weightGrams} g</span>
           <span className="text-base text-forest">
-            {formatPrice(product.priceCents, product.currency)}
+            {formatPrice(product.priceCents, product.currency, locale)}
           </span>
         </div>
         <p className="text-xs text-ink/65">
-          {formatPricePerKg(product.pricePerKgCents, product.currency)}
+          {formatPricePerKg(product.pricePerKgCents, product.currency, locale)}
         </p>
         {stock > 0 ? (
           <AddToCartButton product={product} variant="secondary" className="mt-4" />

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" />
               )}

src/components/site-chrome.tsx

@@ -393,7 +393,7 @@ export function Header({ companyName }: { companyName: string }) {
 }
 
 export function CartDrawer() {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const isOpen = useCartStore((s) => s.isOpen);
   const closeCart = useCartStore((s) => s.closeCart);
   const items = useCartStore((s) => s.items);
@@ -499,7 +499,7 @@ export function CartDrawer() {
                           </div>
                         </div>
                         <p className="text-sm text-ink">
-                          {formatPrice(item.priceCents * item.quantity)}
+                          {formatPrice(item.priceCents * item.quantity, "EUR", locale)}
                         </p>
                       </li>
                     );
@@ -512,7 +512,7 @@ export function CartDrawer() {
               <div className="border-t border-ink/10 p-6 space-y-4">
                 <div className="flex justify-between text-sm">
                   <span>{t.cart.subtotal}</span>
-                  <span>{formatPrice(total)}</span>
+                  <span>{formatPrice(total, "EUR", locale)}</span>
                 </div>
                 <LinkButton href="/checkout" onClick={closeCart} className="w-full">
                   {t.cart.checkout}

src/components/sticky-add-to-cart-bar.tsx

@@ -25,7 +25,7 @@ export function StickyAddToCartBar({
   product: ProductWithRelations;
   inStock: boolean;
 }) {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const addItem = useCartStore((s) => s.addItem);
   const [justAdded, setJustAdded] = useState(false);
 
@@ -37,7 +37,7 @@ export function StickyAddToCartBar({
       <div className="flex items-center gap-4">
         <div className="min-w-0 flex-1">
           <p className="truncate text-sm text-ink">{product.name}</p>
-          <p className="text-sm text-forest">{formatPrice(product.priceCents, product.currency)}</p>
+          <p className="text-sm text-forest">{formatPrice(product.priceCents, product.currency, locale)}</p>
         </div>
         {inStock ? (
           <Button