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/hero.tsx

@@ -3,6 +3,7 @@
 import { motion, useReducedMotion, type Variants } from "motion/react";
 import { Container, LinkButton } from "@/components/ui";
 import { ContentImage } from "@/components/content-image";
+import { HoneycombPattern } from "@/components/honeycomb";
 import { useI18n } from "@/i18n/i18n-provider";
 
 const itemContainerVariants: Variants = {
@@ -45,7 +46,7 @@ export function Hero({
     // weiter unten bleibt unveraendert, der laeuft unabhaengig davon.
     <section className="relative">
       {video ? (
-        <div className="relative h-[78vh] min-h-[520px] w-full overflow-hidden">
+        <div className="relative h-[82vh] min-h-[560px] w-full overflow-hidden">
           {/* Standbild als eigene Ebene UNTER dem Video statt im
               poster-Attribut. poster nimmt nur eine fertige URL und laedt die
               hochgeladene Datei damit in voller gespeicherter Groesse (bis
@@ -55,7 +56,7 @@ export function Hero({
               Bildschirm, WebP statt JPEG, und mit "priority" als erstes
               angefordert. Das Video liegt darueber und ist transparent, bis es
               eigene Bilddaten hat — der Uebergang ist deshalb nicht sichtbar. */}
-          <div className="absolute inset-0">
+          <div className="motion-drift absolute inset-0 animate-[wh-drift_26s_ease-in-out_infinite_alternate]">
             <ContentImage
               src={image}
               alt=""
@@ -94,15 +95,19 @@ export function Hero({
           />
         </div>
       ) : (
-        <ContentImage
-          src={image}
-          alt=""
-          tone="forest"
-          className="h-[78vh] min-h-[520px] w-full"
-          label="Bienenstand im Morgenlicht · Altenmünster"
-          rounded={false}
-          priority
-        />
+        <div className="relative h-[82vh] min-h-[560px] w-full overflow-hidden">
+          <div className="motion-drift absolute inset-0 animate-[wh-drift_26s_ease-in-out_infinite_alternate]">
+            <ContentImage
+              src={image}
+              alt=""
+              tone="forest"
+              className="h-full w-full"
+              label="Bienenstand im Morgenlicht · Altenmünster"
+              rounded={false}
+              priority
+            />
+          </div>
+        </div>
       )}
       {/* Gleichmaessige Abdunklung ueber die gesamte Flaeche — noetig, weil
           redaktionell gepflegtes Bild-/Videomaterial (z.B. helle Etiketten,
@@ -110,6 +115,8 @@ export function Hero({
           unlesbar machen kann. Der gerichtete Verlauf darunter verstaerkt das
           gezielt dort, wo die Textspalte tatsaechlich sitzt (unten links). */}
       <div className="absolute inset-0 bg-forest/25" />
+      {/* Wabenraster ueber der rechten Bildhaelfte — die Marke im ersten Blick. */}
+      <HoneycombPattern className="text-honey-pale/[0.12] hidden md:block" size={34} fade="right" />
       {/* Senkrecht auf schmalen Schirmen, waagerecht ab md.
 
           Der frueher hier stehende to-tr-Verlauf liess die Textspalte auf
@@ -127,7 +134,7 @@ export function Hero({
       <div className="absolute inset-0 flex items-center bg-gradient-to-t from-forest/85 via-forest/70 to-forest/10 md:bg-gradient-to-r md:from-forest/85 md:via-forest/70 md:to-transparent">
         <Container>
           <motion.div
-            className="max-w-xl text-cream"
+            className="max-w-2xl text-cream"
             initial={shouldReduceMotion ? false : "hidden"}
             animate="visible"
             variants={itemContainerVariants}
@@ -138,18 +145,23 @@ export function Hero({
             >
               {location}
             </motion.p>
-            <motion.h1 data-reveal="" variants={itemVariants} className="text-4xl md:text-6xl leading-tight">
+            <motion.h1
+              data-reveal=""
+              variants={itemVariants}
+              className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-[0.95] tracking-[-0.02em]"
+            >
               {t.footer.tagline}
             </motion.h1>
-            <motion.p data-reveal="" variants={itemVariants} className="mt-6 text-cream/85 max-w-md leading-relaxed">
+            <motion.p data-reveal="" variants={itemVariants} className="mt-8 text-lg text-cream/85 max-w-md leading-relaxed">
               {intro}
             </motion.p>
             <motion.div data-reveal="" variants={itemVariants} className="mt-10 flex flex-wrap gap-4">
-              <LinkButton href="/shop">{t.home.hero.ctaPrimary}</LinkButton>
+              <LinkButton href="/shop" variant="accent">
+                {t.home.hero.ctaPrimary}
+              </LinkButton>
               <LinkButton
                 href="/imkerei"
-                variant="secondary"
-                className="!border-cream !text-cream hover:!bg-cream hover:!text-forest"
+                variant="inverted"
               >
                 {t.home.hero.ctaSecondary}
               </LinkButton>
@@ -160,6 +172,14 @@ export function Hero({
           </motion.div>
         </Container>
       </div>
+      {/* Scroll-Hinweis: ein Tropfen loest sich aus einer Wabe. Rein
+          dekorativ; bei reduzierter Bewegung steht er still. */}
+      <div aria-hidden="true" className="pointer-events-none absolute bottom-8 left-1/2 hidden -translate-x-1/2 flex-col items-center md:flex">
+        <svg viewBox="0 0 24 26" className="h-6 w-6 text-honey-pale/80" fill="none">
+          <polygon points="12,1 22.4,7 22.4,19 12,25 1.6,19 1.6,7" stroke="currentColor" strokeWidth="1.2" />
+        </svg>
+        <span className="motion-drip -mt-1 block h-2.5 w-2 rounded-b-full rounded-t-[40%] bg-honey animate-[wh-drip_2.6s_var(--ease-arrive)_infinite]" />
+      </div>
     </section>
   );
 }