feat(ui): Startseite mutiger gestaltet

- Hero: deutlich groessere Headline, langsam atmendes Bild, Wabenraster,
  Honigtropfen als Scroll-Hinweis, Hauptaktion in Honig
- "Sechs Schritte" als Weg: eine Honiglinie fuellt sich beim Scrollen und
  laesst die Waben der Schritte nacheinander aufleuchten (waagerecht ab lg,
  senkrecht auf dem Handy; reduzierte Bewegung: sofort gefuellt)
- Philosophie mit Waben statt Nummern, Verantwortung als geteiltes Layout
  mit mitlaufender Ueberschrift
- Bilder mit versetztem Honigrahmen, Wabenraster auf dunklen Flaechen,
  grosse Anfuehrungszeichen bei den Kundenstimmen
- Knopf-Varianten "inverted"/"accent" fuer dunkle Flaechen ersetzen
  !-Overrides, die den Fuell-Effekt ausgehebelt haetten
- Fix: Ueberschrift der Kundenstimmen war Waldgruen auf Waldgruen

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

src/components/home-sections-a.tsx

@@ -1,4 +1,5 @@
-import { Container, SectionHeading, LinkButton } from "@/components/ui";
+import { Container, SectionHeading, LinkButton, FramedMedia } from "@/components/ui";
+import { HoneycombPattern, HexMark } from "@/components/honeycomb";
 import { ScrollReveal } from "@/components/scroll-reveal";
 import { ContentImage } from "@/components/content-image";
 import { ProductCard, TasteScale, AddToCartButton } from "@/components/product-card";
@@ -55,17 +56,19 @@ export async function OriginStory() {
   );
   const facts = parseListSimple(content["home.originStory.facts"]);
   return (
-    <section className="py-24 bg-cream/60">
-      <Container className="grid md:grid-cols-2 gap-12 items-center">
+    <section className="py-28 bg-cream/60">
+      <Container className="grid md:grid-cols-2 gap-16 lg:gap-24 items-center">
         <ScrollReveal>
-          <ContentImage
-            src={content["home.originStory.image"] || null}
-            alt=""
-            tone="forest"
-            className="aspect-[4/5] w-full"
-            label={t.home.originStory.eyebrow}
-            sizes="(min-width: 768px) 50vw, 100vw"
-          />
+          <FramedMedia>
+            <ContentImage
+              src={content["home.originStory.image"] || null}
+              alt=""
+              tone="forest"
+              className="aspect-[4/5] w-full"
+              label={t.home.originStory.eyebrow}
+              sizes="(min-width: 768px) 50vw, 100vw"
+            />
+          </FramedMedia>
         </ScrollReveal>
         <ScrollReveal delay={0.1}>
           <SectionHeading
@@ -74,9 +77,12 @@ export async function OriginStory() {
           />
           <p className="mt-6 text-ink/75 leading-relaxed">{content["home.originStory.paragraph1"]}</p>
           <p className="mt-4 text-ink/75 leading-relaxed">{content["home.originStory.paragraph2"]}</p>
-          <ul className="mt-6 space-y-1 text-sm text-ink/70">
+          <ul className="mt-8 grid gap-2.5 text-sm text-ink/75 sm:grid-cols-2">
             {facts.map((fact) => (
-              <li key={fact}>{fact}</li>
+              <li key={fact} className="flex items-start gap-2.5">
+                <HexMark className="mt-1.5 h-2 w-2 flex-shrink-0 text-honey" />
+                {fact}
+              </li>
             ))}
           </ul>
           <LinkButton href="/herkunft" variant="secondary" className="mt-8">
@@ -108,11 +114,10 @@ export async function Philosophy() {
           {items.map((item, i) => (
             <ScrollReveal key={item.title} delay={i * 0.08}>
               <div className={`border-t border-ink/15 pt-6 ${i % 2 === 1 ? "lg:mt-10" : ""}`}>
-                <span className="font-serif text-3xl text-honey-dark">
-                  {String(i + 1).padStart(2, "0")}
-                </span>
-                <h3 className="mt-3 text-lg text-forest">{item.title}</h3>
-                <p className="mt-2 text-sm text-ink/65 leading-relaxed">
+                {/* Wabe statt "01"-Nummer: die vier Punkte sind gleichrangig, keine Reihenfolge. */}
+                <HexMark filled={i % 2 === 0} className="h-5 w-5 text-honey" />
+                <h3 className="mt-4 text-2xl text-forest">{item.title}</h3>
+                <p className="mt-3 text-sm text-ink/70 leading-relaxed">
                   {item.text}
                 </p>
               </div>
@@ -133,8 +138,9 @@ export async function ProductSpotlight({ product }: { product: HoneySpotlightPro
   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">
+    <section className="relative overflow-hidden py-28 bg-forest text-cream">
+      <HoneycombPattern className="text-honey-light/[0.08]" size={28} fade="right" />
+      <Container className="relative grid md:grid-cols-2 gap-14 lg:gap-24 items-center">
         <ScrollReveal>
           <ContentImage
             src={product.images[0] ?? null}
@@ -149,7 +155,7 @@ export async function ProductSpotlight({ product }: { product: HoneySpotlightPro
           <p className="tracking-wide-caps text-xs text-honey-light mb-3">
             {product.harvest.type} {product.harvest.year}
           </p>
-          <h2 className="text-3xl md:text-4xl">{product.name}</h2>
+          <h2 className="text-5xl md:text-6xl leading-[1] tracking-[-0.015em]">{product.name}</h2>
           <p className="mt-4 text-cream/75 leading-relaxed">
             {t.home.productSpotlight.description}
           </p>
@@ -178,19 +184,20 @@ 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, locale)}</dd>
+              <dd className="font-serif text-2xl text-cream tabular-nums">
+                {formatPrice(product.priceCents, product.currency, locale)}
+              </dd>
             </div>
           </dl>
 
           <div className="mt-10 flex flex-wrap gap-4">
             <LinkButton
               href={`/honig/${product.slug}`}
-              variant="secondary"
-              className="!border-cream !text-cream hover:!bg-cream hover:!text-forest"
+              variant="inverted"
             >
               {t.home.productSpotlight.cta}
             </LinkButton>
-            <AddToCartButton product={product} />
+            <AddToCartButton product={product} variant="accent" />
           </div>
         </ScrollReveal>
       </Container>