feat(ui): Leerer Warenkorb zeigt verfuegbare Honige

Bisher stand dort nur ein Satz und ein Knopf zum Shop. Jetzt steht der
Hinweis als Spalte links, daneben bis zu zwei aktuell verfuegbare
Produkte (Honig zuerst) - dasselbe Muster wie "Aktuelle Ernte" auf der
Startseite. Nutzt die bereits geladenen availableProducts.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

src/app/warenkorb/warenkorb-content.tsx

@@ -56,6 +56,9 @@ export function WarenkorbContent({
   const crossSellProducts = availableProducts
     .filter((product) => !cartProductIds.has(product.id))
     .slice(0, CROSS_SELL_LIMIT);
+  // Fuer den leeren Warenkorb: Honig zuerst, sonst was gerade verfuegbar ist.
+  const honeyFirst = availableProducts.filter((product) => product.category === "HONIG");
+  const emptyCartSuggestions = (honeyFirst.length > 0 ? honeyFirst : availableProducts).slice(0, 2);
 
   // Siehe checkout-form.tsx: ohne diese Weiche flackert kurz die
   // "leer"-Meldung auf, bevor der Cart-Store aus localStorage nachliest.
@@ -69,12 +72,23 @@ export function WarenkorbContent({
         <SectionHeading title={t.cartPage.title} />
 
         {items.length === 0 ? (
-          <div className="mt-14">
-            <p className="text-ink/70">{t.cart.empty}</p>
-            <LinkButton href="/shop" className="mt-6">
+          // Leerer Warenkorb ist kein Endpunkt: daneben stehen die aktuell
+          // verfuegbaren Honige, statt nur eines Satzes und eines Knopfs.
+          <div className="mt-14 grid gap-12 lg:grid-cols-12 lg:gap-16">
+            <div className="lg:col-span-4">
+              <p className="font-serif text-2xl leading-snug text-forest">{t.cart.empty}</p>
+              <LinkButton href="/shop" variant="secondary" className="mt-6">
                 {t.cartPage.goToShop}
               </LinkButton>
             </div>
+            {emptyCartSuggestions.length > 0 ? (
+              <div className="grid grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2 lg:col-span-8">
+                {emptyCartSuggestions.map((product, index) => (
+                  <ProductCard key={product.id} product={product} index={index} />
+                ))}
+              </div>
+            ) : null}
+          </div>
         ) : (
           <div className="mt-14 grid lg:grid-cols-3 gap-14">
             <div className="lg:col-span-2 divide-y divide-ink/10 border-y border-ink/10">