diff --git a/src/app/unternehmen/page.tsx b/src/app/unternehmen/page.tsx
index 9f40da8..70c921b 100644
--- a/src/app/unternehmen/page.tsx
+++ b/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">
-        <div className="motion-drift absolute inset-0 animate-[wh-drift_26s_ease-in-out_infinite_alternate]">
+      {/* Hero: Titel auf dem Foto, die Zielgruppen wechseln, eine Biene fliegt durchs Bild. */}
+      <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}
-            alt={t.unternehmenPage.eyebrow}
-            tone="honey"
+            src={content["unternehmen.image"] || null}
+            alt={tu.eyebrow}
+            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>
-      <Container className="py-20">
-        <ScrollReveal>
-          <SectionHeading
-            level="h1"
-            title={t.unternehmenPage.title}
-            subtitle={t.unternehmenPage.subtitle}
-          />
-        </ScrollReveal>
+        <div aria-hidden="true" className="absolute inset-0 -z-10 bg-gradient-to-t from-forest via-forest/65 to-forest/10" />
+        <HoneycombPattern className="-z-10 text-cream/[0.1]" size={30} fade="right" />
+        <BeeFlight className="!absolute inset-x-0 top-[18%] h-32 md:h-44" />
+        <Container className="relative pb-16 pt-40 md:pb-20">
+          <ScrollReveal>
+            <h1 className="max-w-3xl font-serif text-5xl leading-[1.02] text-cream text-balance md:text-7xl">{tu.title}</h1>
+            <AudienceCycle className="mt-6 text-xl text-cream/85 md:text-2xl" prefix={tu.forLabel} items={tu.audiences} />
+            <LinkButton href="#anfrage" variant="accent" className="mt-10">
+              {tu.inquiryHeading}
+            </LinkButton>
+          </ScrollReveal>
+        </Container>
+      </section>
 
-        {/* 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-heading lg:sticky lg:top-32">
-              {t.unternehmenPage.inquiryHeading}
-            </h2>
+      {/* Pakete als gezeichnete Glaeser — ein Klick waehlt das Paket im Formular vor. */}
+      <section className="relative overflow-hidden py-24 md:py-28">
+        <HoneycombPattern className="text-honey/[0.07]" size={24} fade="radial" />
+        <Container className="relative">
+          <ScrollReveal>
+            <SectionHeading title={tu.packagesHeading} align="center" className="mx-auto" />
           </ScrollReveal>
-          <ScrollReveal className="lg:col-span-8">
-            <BusinessInquiryForm turnstileSiteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} />
+          <div className="mt-16 grid gap-8 md:grid-cols-3">
+            {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>
   );
 }
diff --git a/src/components/audience-cycle.tsx b/src/components/audience-cycle.tsx
new file mode 100644
index 0000000..89ad3f3
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/business-inquiry-form.tsx b/src/components/business-inquiry-form.tsx
index a2f91c0..2846b56 100644
--- a/src/components/business-inquiry-form.tsx
+++ b/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
diff --git a/src/components/package-jar.tsx b/src/components/package-jar.tsx
new file mode 100644
index 0000000..e3625fa
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/i18n/dictionaries/de.ts b/src/i18n/dictionaries/de.ts
index 2747d5d..f958134 100644
--- a/src/i18n/dictionaries/de.ts
+++ b/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",
diff --git a/src/i18n/dictionaries/en.ts b/src/i18n/dictionaries/en.ts
index 93a0def..a41d94d 100644
--- a/src/i18n/dictionaries/en.ts
+++ b/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",
diff --git a/src/i18n/dictionary-type.ts b/src/i18n/dictionary-type.ts
index 2c764c8..53e0d88 100644
--- a/src/i18n/dictionary-type.ts
+++ b/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;