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/kontakt/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Container, SectionHeading } from "@/components/ui";
+import { HoneycombPattern, HexMark } from "@/components/honeycomb";
 import { ScrollReveal } from "@/components/scroll-reveal";
 import { getCompanyInfo } from "@/lib/company-info";
 import { getLocale } from "@/i18n/locale";
@@ -19,34 +20,56 @@ export default async function KontaktPage() {
   const company = await getCompanyInfo();
   return (
     <div className="py-20">
-      <Container className="max-w-2xl">
+      <Container className="max-w-5xl">
         <ScrollReveal>
           <SectionHeading level="h1" eyebrow={t.kontaktPage.eyebrow} title={t.kontaktPage.title} />
         </ScrollReveal>
 
-        <ScrollReveal delay={0.1} className="mt-10 space-y-2 text-ink/75">
-          <p>{company.name}</p>
-          <p>{company.address.street}</p>
-          <p>
-            {company.address.zip} {company.address.city}
-          </p>
-          <p className="pt-4">
-            <a href={`mailto:${company.email}`} className="text-forest underline">
-              {company.email}
-            </a>
-          </p>
-          {/* Ohne gepflegte Nummer entfaellt die Zeile ganz. Eine
-              Platzhalternummer waere schlimmer als keine: sie sieht nach
-              einem Kontaktweg aus, an dessen Ende niemand abnimmt. */}
-          {company.phone ? <p>{company.phone}</p> : null}
-        </ScrollReveal>
+        <div className="mt-12 grid gap-6 md:grid-cols-5">
+          {/* Kontaktkarte auf Wabenraster: die E-Mail ist der Hauptweg und
+              steht deshalb gross in Serifenschrift. */}
+          <ScrollReveal delay={0.1} className="md:col-span-3">
+            <div className="relative h-full overflow-hidden bg-forest px-8 py-10 text-cream md:px-10">
+              <HoneycombPattern className="text-honey-light/[0.1]" size={24} fade="right" />
+              <div className="relative">
+                <a
+                  href={`mailto:${company.email}`}
+                  className="group inline-flex items-center gap-3 font-serif text-3xl md:text-4xl text-cream"
+                >
+                  <span className="link-draw pb-1">{company.email}</span>
+                  <svg
+                    aria-hidden="true"
+                    viewBox="0 0 24 24"
+                    className="h-5 w-5 text-honey-light transition-transform duration-300 ease-[var(--ease-arrive)] group-hover:translate-x-1"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.6"
+                  >
+                    <path d="M4 12h15M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                </a>
+                {/* Ohne gepflegte Nummer entfaellt die Zeile ganz. Eine
+                    Platzhalternummer waere schlimmer als keine: sie sieht nach
+                    einem Kontaktweg aus, an dessen Ende niemand abnimmt. */}
+                {company.phone ? <p className="mt-4 text-lg text-cream/85 tabular-nums">{company.phone}</p> : null}
+                <address className="mt-10 not-italic text-cream/75 leading-relaxed">
+                  <span className="block text-cream">{company.name}</span>
+                  {company.address.street}
+                  <br />
+                  {company.address.zip} {company.address.city}
+                </address>
+              </div>
+            </div>
+          </ScrollReveal>
 
-        <ScrollReveal delay={0.18} className="mt-12 border-t border-ink/10 pt-8">
-          <h2 className="text-lg text-forest">{t.kontaktPage.pickupHeading}</h2>
-          <p className="mt-2 text-sm text-ink/65 leading-relaxed">
-            {t.kontaktPage.pickupText}
-          </p>
-        </ScrollReveal>
+          <ScrollReveal delay={0.18} className="md:col-span-2">
+            <div className="h-full border border-honey/30 bg-honey/[0.06] px-8 py-10">
+              <HexMark className="h-4 w-4 text-honey-dark" />
+              <h2 className="mt-5 text-2xl text-forest">{t.kontaktPage.pickupHeading}</h2>
+              <p className="mt-3 text-ink/70 leading-relaxed">{t.kontaktPage.pickupText}</p>
+            </div>
+          </ScrollReveal>
+        </div>
       </Container>
     </div>
   );