feat(ui): Markenseiten Herkunft, Imkerei, Unternehmen, Kontakt

- Herkunft: atmendes Titelbild mit Wabenraster, Ueberschrift als Karte,
  die ins Bild ragt; Aspekte als Liste mit Waben
- Imkerei: Bild mit Honigrahmen, erster Absatz als Einstieg
- Fuer Unternehmen: Pakete als Karten mit Waben-Wasserzeichen, das beim
  Hover einrueckt; Anfrage mit mitlaufender Ueberschrift neben dem Formular
- Kontakt: E-Mail gross auf Wald-Karte mit Wabenraster, Abholung daneben

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

src/app/unternehmen/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Container, SectionHeading } from "@/components/ui";
+import { HoneycombPattern } from "@/components/honeycomb";
 import { ContentImage } from "@/components/content-image";
 import { BusinessInquiryForm } from "@/components/business-inquiry-form";
 import { ScrollReveal } from "@/components/scroll-reveal";
@@ -22,14 +23,20 @@ export default async function UnternehmenPage() {
   const image = await getContentValue("unternehmen.image", locale);
   return (
     <div>
-      <ContentImage
-        src={image || null}
-        alt={t.unternehmenPage.eyebrow}
-        tone="honey"
-        className="h-[45vh] min-h-[320px] w-full"
-        label={t.unternehmenPage.eyebrow}
-        priority
-      />
+      <div className="relative h-[50vh] min-h-[340px] w-full overflow-hidden">
+        <div className="motion-drift absolute inset-0 animate-[wh-drift_26s_ease-in-out_infinite_alternate]">
+          <ContentImage
+            src={image || null}
+            alt={t.unternehmenPage.eyebrow}
+            tone="honey"
+            className="h-full w-full"
+            label={t.unternehmenPage.eyebrow}
+            rounded={false}
+            priority
+          />
+        </div>
+        <HoneycombPattern className="text-cream/[0.14]" size={30} fade="right" />
+      </div>
       <Container className="py-20">
         <ScrollReveal>
           <SectionHeading
@@ -40,19 +47,36 @@ export default async function UnternehmenPage() {
           />
         </ScrollReveal>
 
-        <div className="mt-14 grid sm:grid-cols-3 gap-8">
+        <div className="mt-14 grid sm:grid-cols-3 gap-6">
           {t.unternehmenPage.packages.map((pkg, i) => (
-            <ScrollReveal key={pkg.key} delay={i * 0.08} className="border border-ink/10 p-8">
-              <h3 className="text-lg text-forest">{pkg.title}</h3>
-              <p className="mt-2 text-sm text-ink/65">{pkg.text}</p>
+            <ScrollReveal key={pkg.key} delay={i * 0.08}>
+              <div className="group relative h-full overflow-hidden border border-ink/10 bg-background p-8 transition-[transform,border-color,box-shadow] duration-500 ease-[var(--ease-arrive)] hover:-translate-y-1 hover:border-honey/60 hover:shadow-[0_22px_40px_-24px_rgba(184,138,68,0.45)]">
+                {/* Grosses Sechseck als Wasserzeichen, das beim Hover einrueckt. */}
+                <svg
+                  viewBox="0 0 24 26"
+                  aria-hidden="true"
+                  className="absolute -right-6 -top-6 h-28 w-28 text-honey/15 transition-transform duration-700 ease-[var(--ease-arrive)] group-hover:-translate-x-2 group-hover:translate-y-2 group-hover:rotate-12"
+                >
+                  <polygon points="12,1 22.4,7 22.4,19 12,25 1.6,19 1.6,7" fill="currentColor" />
+                </svg>
+                <h3 className="relative text-2xl text-forest">{pkg.title}</h3>
+                <p className="relative mt-3 text-sm text-ink/70 leading-relaxed">{pkg.text}</p>
+              </div>
             </ScrollReveal>
           ))}
         </div>
 
-        <ScrollReveal className="mt-20 max-w-2xl">
-          <h2 className="text-2xl text-forest mb-8">{t.unternehmenPage.inquiryHeading}</h2>
-          <BusinessInquiryForm turnstileSiteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} />
-        </ScrollReveal>
+        {/* Geteilt: die Ueberschrift laeuft neben dem langen Formular mit. */}
+        <div className="mt-24 grid gap-10 lg:grid-cols-12 lg:gap-16">
+          <ScrollReveal className="lg:col-span-4">
+            <h2 className="text-4xl leading-tight text-forest lg:sticky lg:top-32">
+              {t.unternehmenPage.inquiryHeading}
+            </h2>
+          </ScrollReveal>
+          <ScrollReveal className="lg:col-span-8">
+            <BusinessInquiryForm turnstileSiteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} />
+          </ScrollReveal>
+        </div>
       </Container>
     </div>
   );