feat(ui): Seite "Fuer Unternehmen" mit Leben - Glaeser, Biene, Zielgruppen

- Hero: Titel gross auf dem Bienenfoto, darunter "Fuer ..." mit
  wechselnder Zielgruppe (Unternehmen, Kanzleien, Praxen, Hotels,
  Agenturen, Handwerksbetriebe - die Woerter aus dem Untertitel), eine
  Biene fliegt durchs Bild, Knopf springt zur Anfrage.
- Die drei Pakete wieder als Karten, jetzt mit gezeichnetem Honigglas:
  Klassik mit Banderole, Geschenk im Karton mit Schleife, Individuell mit
  Stift und Funkeln. Beim Hover hebt sich das Glas, die Schleife wippt.
  Ein Klick springt zum Formular und waehlt das Paket dort vor
  (?paket=, nur bekannte Schluessel).
- Anfrage: links Ueberschrift und das Glaeser-Foto (mitlaufend, leichte
  Parallaxe), rechts das Formular.

Neu im Woerterbuch nur Ueberschrift, Knopftext und die Zielgruppenliste;
keine neuen Aussagen. Dunkelmodus und reduzierte Bewegung beruecksichtigt.

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

src/app/unternehmen/page.tsx

@@ -1,12 +1,17 @@
 import type { Metadata } from "next";
-import { Container, SectionHeading } from "@/components/ui";
+import Link from "next/link";
+import { Container, SectionHeading, LinkButton, FramedMedia } 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";
+import { BeeFlight } from "@/components/bee";
+import { ParallaxMedia } from "@/components/parallax-media";
+import { AudienceCycle } from "@/components/audience-cycle";
+import { PackageJar, type PackageKey } from "@/components/package-jar";
 import { getLocale } from "@/i18n/locale";
 import { getDictionary } from "@/i18n/get-dictionary";
-import { getContentValue } from "@/lib/content";
+import { getContentValues } from "@/lib/content";
 
 export async function generateMetadata(): Promise<Metadata> {
   const t = getDictionary(await getLocale());
@@ -17,47 +22,119 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-export default async function UnternehmenPage() {
+export default async function UnternehmenPage(props: PageProps<"/unternehmen">) {
   const locale = await getLocale();
   const t = getDictionary(locale);
-  const image = await getContentValue("unternehmen.image", locale);
+  const tu = t.unternehmenPage;
+  const { paket } = await props.searchParams;
+  // Nur bekannte Pakete uebernehmen — der Wert landet als Vorauswahl im Formular.
+  const selected = tu.packages.find((p) => p.key === paket)?.key;
+  const content = await getContentValues(["unternehmen.image", "home.businessTeaser.image"], locale);
+
   return (
     <div>
-      <div className="relative h-[50vh] min-h-[340px] w-full overflow-hidden">
+      {/* Hero: Titel auf dem Foto, die Zielgruppen wechseln, eine Biene fliegt durchs Bild. */}
-        <div className="motion-drift absolute inset-0 animate-[wh-drift_26s_ease-in-out_infinite_alternate]">
+      <section className="relative isolate flex min-h-[72vh] items-end overflow-hidden bg-forest text-cream">
+        <div className="motion-drift absolute inset-0 -z-10 animate-[wh-drift_26s_ease-in-out_infinite_alternate]">
           <ContentImage
-            src={image || null}
+            src={content["unternehmen.image"] || null}
-            alt={t.unternehmenPage.eyebrow}
+            alt={tu.eyebrow}
-            tone="honey"
+            tone="forest"
             className="h-full w-full"
-            label={t.unternehmenPage.eyebrow}
+            label={tu.eyebrow}
             rounded={false}
             priority
           />
         </div>
-        <HoneycombPattern className="text-cream/[0.14]" size={30} fade="right" />
+        <div aria-hidden="true" className="absolute inset-0 -z-10 bg-gradient-to-t from-forest via-forest/65 to-forest/10" />
-      </div>
+        <HoneycombPattern className="-z-10 text-cream/[0.1]" size={30} fade="right" />
-      <Container className="py-20">
+        <BeeFlight className="!absolute inset-x-0 top-[18%] h-32 md:h-44" />
-        <ScrollReveal>
+        <Container className="relative pb-16 pt-40 md:pb-20">
-          <SectionHeading
+          <ScrollReveal>
-            level="h1"
+            <h1 className="max-w-3xl font-serif text-5xl leading-[1.02] text-cream text-balance md:text-7xl">{tu.title}</h1>
-            title={t.unternehmenPage.title}
+            <AudienceCycle className="mt-6 text-xl text-cream/85 md:text-2xl" prefix={tu.forLabel} items={tu.audiences} />
-            subtitle={t.unternehmenPage.subtitle}
+            <LinkButton href="#anfrage" variant="accent" className="mt-10">
-          />
+              {tu.inquiryHeading}
-        </ScrollReveal>
+            </LinkButton>
+          </ScrollReveal>
+        </Container>
+      </section>
 
-        {/* Geteilt: die Ueberschrift laeuft neben dem langen Formular mit. */}
+      {/* Pakete als gezeichnete Glaeser — ein Klick waehlt das Paket im Formular vor. */}
-        <div className="mt-24 grid gap-10 lg:grid-cols-12 lg:gap-16">
+      <section className="relative overflow-hidden py-24 md:py-28">
-          <ScrollReveal className="lg:col-span-4">
+        <HoneycombPattern className="text-honey/[0.07]" size={24} fade="radial" />
-            <h2 className="text-4xl leading-tight text-heading lg:sticky lg:top-32">
+        <Container className="relative">
-              {t.unternehmenPage.inquiryHeading}
+          <ScrollReveal>
-            </h2>
+            <SectionHeading title={tu.packagesHeading} align="center" className="mx-auto" />
           </ScrollReveal>
-          <ScrollReveal className="lg:col-span-8">
+          <div className="mt-16 grid gap-8 md:grid-cols-3">
-            <BusinessInquiryForm turnstileSiteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} />
+            {tu.packages.map((pkg, i) => (
+              <ScrollReveal key={pkg.key} delay={i * 0.1}>
+                <Link
+                  href={`/unternehmen?paket=${pkg.key}#anfrage`}
+                  className={`group flex h-full flex-col items-center rounded-lg border bg-background px-8 pb-8 pt-10 text-center transition-[transform,border-color,box-shadow] duration-500 ease-[var(--ease-arrive)] hover:-translate-y-1 hover:border-honey/60 hover:shadow-[0_24px_44px_-28px_rgba(184,138,68,0.55)] motion-reduce:transition-none ${
+                    selected === pkg.key ? "border-honey" : "border-ink/10"
+                  }`}
+                >
+                  <PackageJar variant={pkg.key as PackageKey} className="h-40 w-32 md:h-56 md:w-44" />
+                  <h3 className="mt-6 font-serif text-3xl text-heading">{pkg.title}</h3>
+                  <p className="mt-2 text-ink/70">{pkg.text}</p>
+                  <span className="mt-auto inline-flex items-center gap-2 pt-6 text-sm tracking-wide-caps text-honey-dark">
+                    {tu.packageCta}
+                    <svg
+                      viewBox="0 0 24 24"
+                      className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1 motion-reduce:transition-none"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.6"
+                      aria-hidden="true"
+                    >
+                      <path d="M4 12h15M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                  </span>
+                </Link>
+              </ScrollReveal>
+            ))}
+          </div>
+        </Container>
+      </section>
+
+      {/* Anfrage: links Ueberschrift und Glaeser-Foto, die mitlaufen; rechts das Formular. */}
+      <section id="anfrage" className="scroll-mt-24 bg-surface/60 py-24">
+        <Container className="grid gap-12 lg:grid-cols-12 lg:gap-16">
+          <div className="lg:col-span-5">
+            <div className="lg:sticky lg:top-32">
+              <ScrollReveal>
+                <h2 className="text-4xl leading-tight text-heading md:text-5xl">{tu.inquiryHeading}</h2>
+                <p className="mt-4 max-w-sm text-ink/70">{tu.subtitle}</p>
+              </ScrollReveal>
+              <ScrollReveal delay={0.1} className="mt-10 hidden lg:block">
+                <FramedMedia>
+                  <ParallaxMedia className="rounded-lg">
+                    <ContentImage
+                      src={content["home.businessTeaser.image"] || null}
+                      alt=""
+                      tone="honey"
+                      className="aspect-[4/3] w-full"
+                      label={tu.eyebrow}
+                      sizes="(min-width: 1024px) 34vw, 100vw"
+                    />
+                  </ParallaxMedia>
+                </FramedMedia>
+              </ScrollReveal>
+            </div>
+          </div>
+          <ScrollReveal className="lg:col-span-7">
+            {/* key: bei Wechsel der Vorauswahl (Klick auf eine Paketkarte) neu aufbauen,
+                sonst bliebe die zuvor gewaehlte Option aktiv. */}
+            <BusinessInquiryForm
+              key={selected ?? "default"}
+              defaultPackage={selected}
+              turnstileSiteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
+            />
           </ScrollReveal>
-        </div>
+        </Container>
-      </Container>
+      </section>
     </div>
   );
 }

src/components/audience-cycle.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+
+const INTERVAL_MS = 2200;
+
+/**
+ * "Für Kanzleien" — "Für Praxen" — ...: die Zielgruppe wechselt im Takt und
+ * rollt von unten herein. Screenreader lesen die ganze Liste auf einmal;
+ * bei reduzierter Bewegung steht die Liste still und vollstaendig da.
+ */
+export function AudienceCycle({
+  prefix,
+  items,
+  className = "",
+}: {
+  prefix: string;
+  items: string[];
+  className?: string;
+}) {
+  const reduceMotion = useReducedMotion();
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    if (reduceMotion || items.length < 2) return;
+    const id = window.setInterval(() => setIndex((i) => (i + 1) % items.length), INTERVAL_MS);
+    return () => window.clearInterval(id);
+  }, [reduceMotion, items.length]);
+
+  if (reduceMotion) {
+    return (
+      <p className={className}>
+        {prefix} {items.join(", ")}
+      </p>
+    );
+  }
+
+  return (
+    <p className={className}>
+      <span className="sr-only">
+        {prefix} {items.join(", ")}
+      </span>
+      <span aria-hidden="true">
+        {prefix}{" "}
+        <span className="relative inline-flex overflow-hidden align-bottom">
+          <AnimatePresence mode="wait" initial={false}>
+            <motion.span
+              key={items[index]}
+              initial={{ y: "100%", opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: "-100%", opacity: 0 }}
+              transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
+              className="inline-block font-serif italic text-honey-pale"
+            >
+              {items[index]}
+            </motion.span>
+          </AnimatePresence>
+        </span>
+      </span>
+    </p>
+  );
+}

src/components/business-inquiry-form.tsx

@@ -24,7 +24,14 @@ type Status = "idle" | "loading" | "success" | "error";
  * Server Component und reichen ihn als Prop weiter. Diese Datei folgt jetzt
  * demselben Muster.
  */
-export function BusinessInquiryForm({ turnstileSiteKey }: { turnstileSiteKey?: string }) {
+export function BusinessInquiryForm({
+  turnstileSiteKey,
+  defaultPackage,
+}: {
+  turnstileSiteKey?: string;
+  /** Vorauswahl, wenn man ueber eine Paketkarte der Seite kommt. */
+  defaultPackage?: string;
+}) {
   const { t } = useI18n();
   const [status, setStatus] = useState<Status>("idle");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -97,7 +104,7 @@ export function BusinessInquiryForm({ turnstileSiteKey }: { turnstileSiteKey?: s
               key={p.key}
               className="group relative flex cursor-pointer flex-col border border-ink/20 bg-background p-4 transition-colors duration-300 hover:border-ink/40 has-[:checked]:border-heading has-[:checked]:bg-forest/[0.04] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-honey-dark"
             >
-              <input type="radio" name="package" value={p.key} defaultChecked={i === 0} className="sr-only" />
+              <input type="radio" name="package" value={p.key} defaultChecked={defaultPackage ? p.key === defaultPackage : i === 0} className="sr-only" />
               <span className="flex items-center justify-between gap-3">
                 <span className="font-serif text-xl text-heading">{p.title}</span>
                 <span

src/components/package-jar.tsx

@@ -0,0 +1,76 @@
+/**
+ * Gezeichnetes Honigglas je Firmenpaket — im Strich des Logos:
+ * - KLASSIK: Glas mit Firmenbanderole
+ * - GESCHENK: Glas im Karton mit Schleife
+ * - INDIVIDUELL: Glas mit frei gestaltetem Etikett, Stift und Funkeln
+ * Liegt in einer Karte mit "group": beim Hover hebt sich das Glas, die
+ * Schleife wippt, das Funkeln leuchtet auf (reduzierte Bewegung: still).
+ * Farben ueber Rollen-Variablen, damit es hell und dunkel traegt.
+ */
+export type PackageKey = "KLASSIK" | "GESCHENK" | "INDIVIDUELL";
+
+const LINE = "var(--color-heading)";
+
+export function PackageJar({ variant, className = "h-44 w-36" }: { variant: PackageKey; className?: string }) {
+  return (
+    <svg viewBox="0 0 120 150" className={className} aria-hidden="true">
+      {/* Glas, hebt sich beim Hover */}
+      <g className="transition-transform duration-500 ease-[var(--ease-arrive)] group-hover:-translate-y-2 group-hover:-rotate-2 motion-reduce:transition-none [transform-box:fill-box] origin-bottom">
+        <rect x="32" y="14" width="56" height="16" rx="3" fill="var(--color-forest)" stroke={LINE} strokeWidth="1.4" />
+        <path d="M26 44c0-8 6-14 14-14h40c8 0 14 6 14 14v70c0 10-8 18-18 18H44c-10 0-18-8-18-18z" fill="#C9A468" fillOpacity="0.92" stroke={LINE} strokeWidth="1.5" />
+        {/* Glanzlicht */}
+        <path d="M34 50v48" stroke="#FAF8F3" strokeOpacity="0.55" strokeWidth="3" strokeLinecap="round" />
+        {/* Etikett */}
+        <rect
+          x="36"
+          y="62"
+          width="48"
+          height="40"
+          rx="2"
+          fill="#FAF8F3"
+          stroke={variant === "INDIVIDUELL" ? "var(--color-honey-deep)" : "#24352B"}
+          strokeWidth="1.1"
+          strokeDasharray={variant === "INDIVIDUELL" ? "3 2.5" : undefined}
+        />
+        <polygon points="60,70 65,73 65,79 60,82 55,79 55,73" fill="none" stroke="#B88A44" strokeWidth="1.2" />
+        <path d="M46 88h28M50 94h20" stroke="#24352B" strokeWidth="1.1" strokeLinecap="round" opacity="0.6" />
+
+        {/* Firmenbanderole (Klassik) */}
+        {variant === "KLASSIK" ? (
+          <g>
+            <rect x="25.5" y="104" width="69" height="11" fill="var(--color-honey-deep)" />
+            <path d="M40 109.5h40" stroke="#FAF8F3" strokeWidth="1.2" strokeLinecap="round" strokeDasharray="5 3" />
+          </g>
+        ) : null}
+      </g>
+
+      {/* Geschenk: Karton VOR dem Glas (das Glas schaut oben heraus), Band
+          senkrecht, Schleife auf der Kartonkante — sie wippt beim Hover. */}
+      {variant === "GESCHENK" ? (
+        <g>
+          <rect x="10" y="98" width="100" height="46" rx="3" fill="var(--color-surface)" stroke={LINE} strokeWidth="1.4" />
+          <path d="M10 108h100" stroke={LINE} strokeWidth="1" opacity="0.45" />
+          <rect x="54" y="98" width="12" height="46" fill="var(--color-honey-deep)" />
+          <g className="origin-center transition-transform duration-500 ease-[var(--ease-arrive)] group-hover:rotate-12 motion-reduce:transition-none [transform-box:fill-box]">
+            <path d="M60 98c-8-10-20-8-18-1 2 6 12 4 18 1zM60 98c8-10 20-8 18-1-2 6-12 4-18 1z" fill="var(--color-honey-deep)" stroke={LINE} strokeWidth="1" />
+            <circle cx="60" cy="98" r="3" fill="var(--color-honey-deep)" stroke={LINE} strokeWidth="1" />
+          </g>
+        </g>
+      ) : null}
+
+      {/* Stift und Funkeln (Individuell) */}
+      {variant === "INDIVIDUELL" ? (
+        <g>
+          <g className="transition-transform duration-500 ease-[var(--ease-arrive)] group-hover:-translate-x-1 group-hover:translate-y-1 motion-reduce:transition-none">
+            <path d="M92 118 110 96l5 4-18 22-7 2z" fill="var(--color-surface)" stroke={LINE} strokeWidth="1.3" strokeLinejoin="round" />
+            <path d="M106 100l5 4" stroke={LINE} strokeWidth="1" />
+          </g>
+          <g className="text-honey opacity-60 transition-[opacity,transform] duration-500 group-hover:scale-125 group-hover:opacity-100 motion-reduce:transition-none [transform-box:fill-box] origin-center">
+            <path d="M16 36l2 5 5 2-5 2-2 5-2-5-5-2 5-2z" fill="currentColor" />
+            <path d="M100 30l1.4 3.4 3.4 1.4-3.4 1.4-1.4 3.4-1.4-3.4-3.4-1.4 3.4-1.4z" fill="currentColor" />
+          </g>
+        </g>
+      ) : null}
+    </svg>
+  );
+}

src/i18n/dictionaries/de.ts

@@ -149,6 +149,10 @@ export const de: Dictionary = {
       { key: "INDIVIDUELL", title: "Individuell", text: "Komplett individuelles Design" },
     ],
     inquiryHeading: "Anfrage senden",
+    forLabel: "Für",
+    audiences: ["Unternehmen", "Kanzleien", "Praxen", "Hotels", "Agenturen", "Handwerksbetriebe"],
+    packagesHeading: "Drei Wege, Honig zu verschenken.",
+    packageCta: "Dieses Paket anfragen",
   },
   businessInquiryForm: {
     companyLabel: "Unternehmen",

src/i18n/dictionaries/en.ts

@@ -149,6 +149,10 @@ export const en: Dictionary = {
       { key: "INDIVIDUELL", title: "Custom", text: "Fully custom design" },
     ],
     inquiryHeading: "Send an Inquiry",
+    forLabel: "For",
+    audiences: ["companies", "law firms", "medical practices", "hotels", "agencies", "trade businesses"],
+    packagesHeading: "Three ways to give honey.",
+    packageCta: "Ask for this package",
   },
   businessInquiryForm: {
     companyLabel: "Company",

src/i18n/dictionary-type.ts

@@ -171,6 +171,10 @@ export interface Dictionary {
     subtitle: string;
     packages: { key: string; title: string; text: string }[];
     inquiryHeading: string;
+    forLabel: string;
+    audiences: string[];
+    packagesHeading: string;
+    packageCta: string;
   };
   businessInquiryForm: {
     companyLabel: string;