Redesign: warmer, more editorial visual pass; remove stray em dashes

Replaces em dashes with en dashes across all hardcoded copy, emails, and
seed content, then reworks the site's visual language so it reads as
deliberately designed rather than assembled from generic components:

- New ArrowLink component replaces ad hoc "Mehr erfahren ->" links and
  ghost buttons; one shared FormField (TextField/TextAreaField) replaces
  7 near-duplicate field styles across every form
- Navbar loses its glassmorphism blur for a solid warm background, gets a
  subtle active-link underline and a softer, warmer mega-menu
- PageHeader supports per-page blob tone/position and a compact mode
  instead of an identical band on every interior page
- Homepage: the core offer is featured large instead of four equal cards,
  the philosophy section gets a single calmer accent blob, blog teasers
  now show their cover image like the real /aktuelles page does
- Booking calendar and widget: 44px touch targets throughout (month nav,
  day cells, time slots, cancel action), a visible "today" ring, and
  responsive padding so the calendar isn't cramped on small screens
- Quieter, warmer empty states on /termine and /aktuelles

No functional changes: all interaction logic (nav menus, forms, booking,
CMS data fetching) is untouched, only markup and styling.

app/(frontend)/page.tsx

@@ -2,9 +2,11 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { Hero } from "@/components/Hero";
 import { Button } from "@/components/Button";
+import { ArrowLink } from "@/components/ArrowLink";
 import { Section, SectionHeading } from "@/components/Section";
 import { AngebotCard } from "@/components/AngebotCard";
 import { ImagePlaceholder } from "@/components/ImagePlaceholder";
+import { OrganicBlob } from "@/components/OrganicBlob";
 import { RichText } from "@/components/RichText";
 import { CTA } from "@/components/CTA";
 import { Reveal } from "@/components/Reveal";
@@ -29,7 +31,7 @@ export async function generateMetadata(): Promise<Metadata> {
     fallbackDescription: () =>
       home.heroSupporting ||
       seoSettings.defaultDescription ||
-      "Prozessbegleitung, Doula-Begleitung, Kindergruppen und Singkreise — Räume für Verbindung mit dir selbst, miteinander und mit der Natur.",
+      "Prozessbegleitung, Doula-Begleitung, Kindergruppen und Singkreise – Räume für Verbindung mit dir selbst, miteinander und mit der Natur.",
     fallbackImage: home.heroImage,
     defaultOgImage: seoSettings.defaultOgImage,
   });
@@ -53,6 +55,8 @@ export default async function Home() {
     getUpcomingEvents(3),
   ]);
   const groups = groupOffersByCategory(offers);
+  const featuredGroup = groups.find((g) => g.category === "prozessbegleitung");
+  const remainingGroups = featuredGroup ? groups.filter((g) => g !== featuredGroup) : groups;
   const siteUrl = await getSiteUrl();
 
   return (
@@ -73,9 +77,9 @@ export default async function Home() {
         actions={
           <>
             <Button href="/termin-buchen">Termin buchen</Button>
-            <Button href="/angebote" variant="secondary">
+            <ArrowLink href="/angebote" size="base" className="self-center">
               Angebote entdecken
-            </Button>
+            </ArrowLink>
           </>
         }
       >
@@ -89,24 +93,39 @@ export default async function Home() {
         <SectionHeading
           eyebrow="Angebote"
           title="Räume, die zu deinem Weg passen"
-          lead="Von persönlicher Prozessbegleitung über Doula-Begleitung bis zu Kinder- und Singkreisen — jedes Angebot ist ein eigener, geschützter Raum."
+          lead="Von persönlicher Prozessbegleitung über Doula-Begleitung bis zu Kinder- und Singkreisen – jedes Angebot ist ein eigener, geschützter Raum."
         />
-        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          {groups.map((group, i) => {
-            const isSingle = group.offers.length === 1;
-            const first = group.offers[0];
-            return (
-              <Reveal key={group.category} delay={i * 0.08}>
-                <AngebotCard
-                  href={isSingle ? `/angebote/${first.slug}` : group.href}
-                  title={group.label}
-                  tagline={isSingle ? first.shortDescription : `${group.offers.length} Angebote`}
-                  mood={moodForOffer(first)}
-                  imageSrc={mediaUrl(first.image, "card")}
-                />
-              </Reveal>
-            );
-          })}
+        <div className="mt-14 space-y-6">
+          {/* Prozessbegleitung ist das Kernangebot – bekommt deshalb den größeren, ersten Platz statt eines gleichwertigen 4er-Rasters. */}
+          {featuredGroup && (
+            <Reveal>
+              <AngebotCard
+                href={featuredGroup.offers.length === 1 ? `/angebote/${featuredGroup.offers[0].slug}` : featuredGroup.href}
+                title={featuredGroup.label}
+                tagline={featuredGroup.offers.length === 1 ? featuredGroup.offers[0].shortDescription : `${featuredGroup.offers.length} Angebote`}
+                mood={moodForOffer(featuredGroup.offers[0])}
+                imageSrc={mediaUrl(featuredGroup.offers[0].image, "card")}
+                size="large"
+              />
+            </Reveal>
+          )}
+          <div className="grid gap-6 sm:grid-cols-3">
+            {remainingGroups.map((group, i) => {
+              const isSingle = group.offers.length === 1;
+              const first = group.offers[0];
+              return (
+                <Reveal key={group.category} delay={i * 0.08}>
+                  <AngebotCard
+                    href={isSingle ? `/angebote/${first.slug}` : group.href}
+                    title={group.label}
+                    tagline={isSingle ? first.shortDescription : `${group.offers.length} Angebote`}
+                    mood={moodForOffer(first)}
+                    imageSrc={mediaUrl(first.image, "card")}
+                  />
+                </Reveal>
+              );
+            })}
+          </div>
         </div>
       </Section>
 
@@ -141,9 +160,7 @@ export default async function Home() {
                 </div>
               )}
               <div className="mt-8">
-                <Button href="/ueber-mich" variant="ghost">
-                  Mehr über mich lesen →
-                </Button>
+                <ArrowLink href="/ueber-mich">Mehr über mich lesen</ArrowLink>
               </div>
             </Reveal>
           </div>
@@ -151,24 +168,27 @@ export default async function Home() {
       )}
 
       {home.values && home.values.length > 0 && (
-        <Section tone="mauve">
-          <SectionHeading
-            eyebrow={home.valuesEyebrow ?? undefined}
-            title={home.valuesTitle || "Philosophie"}
-            align="center"
-            className="mx-auto text-anouma-cream-light [&_h2]:text-anouma-cream-light [&_p]:text-anouma-cream-light/90"
-          />
-          <div className="mt-16 grid gap-10 sm:grid-cols-3">
-            {home.values.map((wert, i) => (
-              <Reveal key={wert.id ?? wert.title} delay={i * 0.1} className="text-center">
-                <p className="font-serif text-sm font-medium uppercase tracking-[0.2em] text-white/85">
-                  {wert.title}
-                </p>
-                <p className="mt-4 text-balance font-serif text-2xl leading-snug italic">
-                  „{wert.quote}“
-                </p>
-              </Reveal>
-            ))}
+        <Section tone="mauve" className="relative overflow-hidden">
+          <OrganicBlob tone="sage" className="-left-24 top-1/2 h-96 w-96 -translate-y-1/2 opacity-20" />
+          <div className="relative">
+            <SectionHeading
+              eyebrow={home.valuesEyebrow ?? undefined}
+              title={home.valuesTitle || "Philosophie"}
+              align="center"
+              className="mx-auto text-anouma-cream-light [&_h2]:text-anouma-cream-light [&_p]:text-anouma-cream-light/90"
+            />
+            <div className="mt-16 grid gap-10 sm:grid-cols-3">
+              {home.values.map((wert, i) => (
+                <Reveal key={wert.id ?? wert.title} delay={i * 0.1} className="text-center">
+                  <p className="font-serif text-sm font-medium uppercase tracking-[0.2em] text-white/85">
+                    {wert.title}
+                  </p>
+                  <p className="mt-4 text-balance font-serif text-2xl leading-snug italic">
+                    „{wert.quote}“
+                  </p>
+                </Reveal>
+              ))}
+            </div>
           </div>
         </Section>
       )}
@@ -177,9 +197,7 @@ export default async function Home() {
         <Section tone="warm">
           <div className="flex flex-wrap items-end justify-between gap-6">
             <SectionHeading eyebrow="Termine" title="Aktuelle Termine" className="mb-0" />
-            <Button href="/termine" variant="ghost">
-              Alle Termine →
-            </Button>
+            <ArrowLink href="/termine">Alle Termine</ArrowLink>
           </div>
           <div className="mt-12 grid gap-6 sm:grid-cols-3">
             {events.map((event, i) => (
@@ -195,23 +213,31 @@ export default async function Home() {
         <Section tone="cream">
           <div className="flex flex-wrap items-end justify-between gap-6">
             <SectionHeading eyebrow="Aktuelles" title="Neuigkeiten und Inspiration" className="mb-0" />
-            <Button href="/aktuelles" variant="ghost">
-              Alle Neuigkeiten →
-            </Button>
+            <ArrowLink href="/aktuelles">Alle Neuigkeiten</ArrowLink>
           </div>
           <div className="mt-12 grid gap-6 sm:grid-cols-3">
             {posts.map((post, i) => (
               <Reveal key={post.slug} delay={i * 0.08}>
-                <Link href={`/aktuelles/${post.slug}`} className="block rounded-3xl bg-background p-7">
-                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum">
+                <Link href={`/aktuelles/${post.slug}`} className="group block">
+                  <div className="relative aspect-[4/3] w-full overflow-hidden rounded-3xl">
+                    <ImagePlaceholder
+                      mood="sand"
+                      label={post.title}
+                      src={mediaUrl(post.coverImage, "card")}
+                      alt={mediaAlt(post.coverImage) ?? post.title}
+                      shape="soft"
+                      className="h-full w-full transition-transform duration-700 group-hover:scale-[1.03]"
+                    />
+                  </div>
+                  <p className="mt-4 text-xs font-medium uppercase tracking-[0.18em] text-anouma-plum/70">
                     {new Date(post.publishDate ?? post.createdAt).toLocaleDateString("de-DE", {
                       day: "2-digit",
                       month: "long",
                       year: "numeric",
                     })}
                   </p>
-                  <h3 className="mt-3 font-serif text-xl font-medium text-anouma-plum">{post.title}</h3>
-                  <p className="mt-3 text-sm leading-relaxed text-anouma-plum">{post.teaser}</p>
+                  <h3 className="mt-2 font-serif text-xl font-medium text-anouma-plum">{post.title}</h3>
+                  <p className="mt-2 text-sm leading-relaxed text-anouma-plum/90">{post.teaser}</p>
                 </Link>
               </Reveal>
             ))}
@@ -228,13 +254,8 @@ export default async function Home() {
             </Reveal>
           ))}
         </div>
-        <div className="mt-10 text-center">
-          <Link
-            href="/impressionen"
-            className="text-sm font-medium text-anouma-mauve-dark underline underline-offset-4"
-          >
-            Alle Impressionen ansehen
-          </Link>
+        <div className="mt-10 flex justify-center">
+          <ArrowLink href="/impressionen">Alle Impressionen ansehen</ArrowLink>
         </div>
       </Section>
 
@@ -242,7 +263,7 @@ export default async function Home() {
         title={home.ctaTitle || "Kennenlernen & Termine vereinbaren"}
         lead={
           home.ctaLead ||
-          "Ich freue mich, von dir zu hören — schreib mir oder buche direkt ein unverbindliches Kennenlerngespräch."
+          "Ich freue mich, von dir zu hören – schreib mir oder buche direkt ein unverbindliches Kennenlerngespräch."
         }
       />
     </>