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

@@ -55,9 +55,10 @@ export default async function AktuellesPage() {
 
       <Section tone="plain">
         {posts.length === 0 ? (
-          <p className="text-lg text-anouma-plum">
-            Hier erscheinen bald die ersten Neuigkeiten — schau gerne wieder vorbei.
-          </p>
+          <div className="rounded-3xl bg-anouma-cream-light p-8 text-center sm:p-10">
+            <p className="font-serif text-xl font-medium text-anouma-plum">Hier erscheinen bald die ersten Neuigkeiten</p>
+            <p className="mt-2 text-base leading-relaxed text-anouma-plum/90">Schau gerne wieder vorbei.</p>
+          </div>
         ) : (
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
             {posts.map((post, i) => (

app/(frontend)/angebote/page.tsx

@@ -19,7 +19,7 @@ import { siteConfig } from "@/lib/site";
 export const dynamic = "force-dynamic";
 
 const FALLBACK_DESCRIPTION =
-  "Prozessbegleitung, Doula-Begleitung, Kindergruppen und Singkreise — die Angebote von Anouma im Überblick.";
+  "Prozessbegleitung, Doula-Begleitung, Kindergruppen und Singkreise – die Angebote von Anouma im Überblick.";
 
 export async function generateMetadata(): Promise<Metadata> {
   const [intro, seoSettings] = await Promise.all([getAngeboteIntroGlobal(), getSEOSettingsGlobal()]);
@@ -170,7 +170,7 @@ export default async function AngebotePage() {
 
       <CTA
         title="Unsicher, welcher Raum passt?"
-        lead="Melde dich gerne für ein unverbindliches Kennenlerngespräch — gemeinsam schauen wir, was dein Anliegen gerade braucht."
+        lead="Melde dich gerne für ein unverbindliches Kennenlerngespräch – gemeinsam schauen wir, was dein Anliegen gerade braucht."
       />
     </>
   );

app/(frontend)/angebote/singkreise/page.tsx

@@ -53,7 +53,7 @@ export default async function SingkreisePage() {
 
       <CTA
         title="Deine Stimme erklingen lassen"
-        lead="Ob offen für alle, für Schwangere oder für Mamas mit Baby — melde dich, wenn du einen Kreis besuchen möchtest."
+        lead="Ob offen für alle, für Schwangere oder für Mamas mit Baby – melde dich, wenn du einen Kreis besuchen möchtest."
       />
     </>
   );

app/(frontend)/auth/verify-email/[token]/page.tsx

@@ -21,6 +21,7 @@ export default async function VerifyEmailPage({ params }: Args) {
         eyebrow="Konto"
         title={verified ? "E-Mail-Adresse bestätigt" : "Bestätigung fehlgeschlagen"}
         crumbs={[{ title: "E-Mail bestätigen" }]}
+        compact
       />
       <Section tone="plain">
         <div className="mx-auto max-w-md text-center">

app/(frontend)/datenschutz/page.tsx

@@ -21,7 +21,7 @@ export default async function DatenschutzPage() {
   const contact = await getContactGlobal();
   return (
     <>
-      <PageHeader title="Datenschutzerklärung" crumbs={[{ title: "Datenschutz" }]} />
+      <PageHeader title="Datenschutzerklärung" crumbs={[{ title: "Datenschutz" }]} compact />
       <Section tone="plain">
         <div className="mx-auto max-w-2xl space-y-8">
           <PlaceholderNote>
@@ -33,9 +33,9 @@ export default async function DatenschutzPage() {
           <div>
             <h2 className="font-serif text-2xl font-medium text-anouma-plum">Verantwortliche Stelle</h2>
             <p className="mt-4 leading-relaxed text-anouma-plum">
-              [Platzhalter — Vor- und Nachname]
+              [Platzhalter – Vor- und Nachname]
               <br />
-              [Platzhalter — Anschrift]
+              [Platzhalter – Anschrift]
               <br />
               E-Mail: {contact.email}
             </p>
@@ -48,7 +48,7 @@ export default async function DatenschutzPage() {
             <p className="mt-4 leading-relaxed text-anouma-plum">
               Beim Besuch dieser Website werden aus technischen Gründen automatisch Informationen
               erfasst, die dein Browser übermittelt (z. B. IP-Adresse, Datum und Uhrzeit des
-              Zugriffs). [Platzhalter — Details zum verwendeten Hosting-Anbieter ergänzen.]
+              Zugriffs). [Platzhalter – Details zum verwendeten Hosting-Anbieter ergänzen.]
             </p>
           </div>
 

app/(frontend)/impressionen/page.tsx

@@ -10,7 +10,7 @@ import { JsonLd, webPageJsonLd } from "@/lib/seo/jsonld";
 
 export const dynamic = "force-dynamic";
 
-const DESCRIPTION = "Bildeindrücke aus der Arbeit von Anouma — Natur, Gemeinschaft und gemeinsame Räume.";
+const DESCRIPTION = "Bildeindrücke aus der Arbeit von Anouma – Natur, Gemeinschaft und gemeinsame Räume.";
 
 export async function generateMetadata(): Promise<Metadata> {
   return buildMetadata({ title: "Impressionen", description: DESCRIPTION, path: "/impressionen" });
@@ -36,11 +36,11 @@ export default async function ImpressionenPage() {
       <PageHeader
         eyebrow="Impressionen"
         title="Einblicke in gemeinsame Räume"
-        lead="Diese Galerie ist als Platzhalter-System angelegt — echte Fotografien lassen sich hier später direkt einsetzen, ohne das Layout zu verändern."
+        lead="Diese Galerie ist als Platzhalter-System angelegt – echte Fotografien lassen sich hier später direkt einsetzen, ohne das Layout zu verändern."
         crumbs={[{ title: "Impressionen" }]}
       />
       <Section tone="plain">
-        <div className="grid auto-rows-[14rem] grid-cols-2 gap-4 sm:grid-cols-4">
+        <div className="grid auto-rows-[10rem] grid-cols-2 gap-4 sm:auto-rows-[14rem] sm:grid-cols-4">
           {gallery.map((item, i) => (
             <Reveal key={item.label} delay={Math.min(i * 0.04, 0.3)} className={item.span}>
               <ImagePlaceholder mood={item.mood} label={item.label} shape="soft" className="h-full w-full" />

app/(frontend)/impressum/page.tsx

@@ -23,7 +23,7 @@ export default async function ImpressumPage() {
   const contact = await getContactGlobal();
   return (
     <>
-      <PageHeader title="Impressum" crumbs={[{ title: "Impressum" }]} />
+      <PageHeader title="Impressum" crumbs={[{ title: "Impressum" }]} compact />
       <Section tone="plain">
         <div className="mx-auto max-w-2xl space-y-8">
           <PlaceholderNote>
@@ -35,11 +35,11 @@ export default async function ImpressumPage() {
           <div>
             <h2 className="font-serif text-2xl font-medium text-anouma-plum">Angaben gemäß § 5 TMG</h2>
             <p className="mt-4 leading-relaxed text-anouma-plum">
-              [Platzhalter — Vor- und Nachname]
+              [Platzhalter – Vor- und Nachname]
               <br />
-              [Platzhalter — Straße und Hausnummer]
+              [Platzhalter – Straße und Hausnummer]
               <br />
-              [Platzhalter — PLZ und Ort]
+              [Platzhalter – PLZ und Ort]
             </p>
           </div>
 
@@ -61,7 +61,7 @@ export default async function ImpressumPage() {
               Umsatzsteuer-Identifikationsnummer
             </h2>
             <p className="mt-4 leading-relaxed text-anouma-plum">
-              [Platzhalter — sofern vorhanden, gemäß § 27 a Umsatzsteuergesetz]
+              [Platzhalter – sofern vorhanden, gemäß § 27 a Umsatzsteuergesetz]
             </p>
           </div>
 
@@ -70,7 +70,7 @@ export default async function ImpressumPage() {
               Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV
             </h2>
             <p className="mt-4 leading-relaxed text-anouma-plum">
-              [Platzhalter — Vor- und Nachname, Anschrift wie oben]
+              [Platzhalter – Vor- und Nachname, Anschrift wie oben]
             </p>
           </div>
 

app/(frontend)/kontakt/page.tsx

@@ -50,6 +50,9 @@ export default async function KontaktPage() {
         title={contact.title || "Ich freue mich, von dir zu hören"}
         lead={contact.lead}
         crumbs={[{ title: "Kontakt" }]}
+        blobTone="sage"
+        blobPosition="top-left"
+        compact
       />
 
       <Section tone="plain">

app/(frontend)/konto/layout.tsx

@@ -44,12 +44,12 @@ export default async function KontoLayout({ children }: { children: ReactNode })
               <Link
                 key={item.href}
                 href={item.href}
-                className="whitespace-nowrap rounded-full px-4 py-2.5 text-sm font-medium text-anouma-plum transition-colors hover:bg-white lg:rounded-2xl"
+                className="flex min-h-11 items-center whitespace-nowrap rounded-full px-4 text-sm font-medium text-anouma-plum transition-colors hover:bg-white lg:rounded-2xl"
               >
                 {item.title}
               </Link>
             ))}
-            <LogoutButton className="whitespace-nowrap rounded-full px-4 py-2.5 text-left text-sm font-medium text-anouma-plum/70 transition-colors hover:bg-white lg:rounded-2xl" />
+            <LogoutButton className="flex min-h-11 items-center whitespace-nowrap rounded-full px-4 text-left text-sm font-medium text-anouma-plum/70 transition-colors hover:bg-white lg:rounded-2xl" />
           </nav>
           <div className="min-w-0">{children}</div>
         </div>

app/(frontend)/konto/page.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { getCurrentCustomer } from "@/lib/auth/customer";
 import { getCustomerBookings } from "@/lib/booking/queries";
 import { BookingCard } from "@/components/booking/BookingCard";
+import { ArrowLink } from "@/components/ArrowLink";
 
 export const metadata: Metadata = { title: "Mein Konto" };
 
@@ -61,9 +61,7 @@ export default async function KontoOverviewPage() {
 
       {past.length > 0 && (
         <div>
-          <Link href="/konto/termine" className="text-sm font-medium text-anouma-mauve-dark underline underline-offset-4">
-            Alle Termine (inkl. vergangene) ansehen →
-          </Link>
+          <ArrowLink href="/konto/termine">Alle Termine (inkl. vergangene) ansehen</ArrowLink>
         </div>
       )}
     </div>

app/(frontend)/konto/profil/page.tsx

@@ -14,7 +14,7 @@ export default async function KontoProfilPage() {
       <div className="mt-6 rounded-3xl bg-white p-6">
         <ProfileForm id={customer.id} name={customer.name} phone={customer.phone ?? ""} />
         <p className="mt-6 text-xs text-anouma-plum/60">
-          E-Mail: {customer.email} — für eine Änderung der E-Mail-Adresse melde dich bitte direkt bei Anna.
+          E-Mail: {customer.email} – für eine Änderung der E-Mail-Adresse melde dich bitte direkt bei Anna.
         </p>
       </div>
     </div>

app/(frontend)/login/page.tsx

@@ -20,7 +20,7 @@ export default async function LoginPage() {
 
   return (
     <>
-      <PageHeader eyebrow="Konto" title="Anmelden" crumbs={[{ title: "Anmelden" }]} />
+      <PageHeader eyebrow="Konto" title="Anmelden" crumbs={[{ title: "Anmelden" }]} compact />
       <Section tone="plain">
         <div className="mx-auto max-w-md">
           <Suspense>

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."
         }
       />
     </>

app/(frontend)/registrieren/page.tsx

@@ -24,6 +24,7 @@ export default async function RegisterPage() {
         title="Konto erstellen"
         lead="Mit einem Konto kannst du Termine anfragen und behältst alle deine Buchungen im Blick."
         crumbs={[{ title: "Konto erstellen" }]}
+        compact
       />
       <Section tone="plain">
         <div className="mx-auto max-w-md">

app/(frontend)/termin-buchen/page.tsx

@@ -98,7 +98,7 @@ export default async function TerminBuchenPage() {
             title="Allgemeine Anfrage"
             lead={
               bookableOffers.length > 0
-                ? "Für einen konkreten Termin wähle oben ein Angebot — hier kannst du auch einfach eine allgemeine Nachricht schreiben."
+                ? "Für einen konkreten Termin wähle oben ein Angebot – hier kannst du auch einfach eine allgemeine Nachricht schreiben."
                 : undefined
             }
             align="left"

app/(frontend)/termine/[slug]/page.tsx

@@ -126,6 +126,8 @@ export default async function EventDetailPage({ params }: Args) {
         eyebrow={categoryLabel}
         title={event.title}
         crumbs={[{ title: "Termine", href: "/termine" }, { title: event.title }]}
+        blobTone="mauve"
+        blobPosition="top-left"
       />
       <Section tone="plain">
         <div className="grid gap-14 lg:grid-cols-[1fr_0.8fr]">

app/(frontend)/termine/page.tsx

@@ -3,6 +3,7 @@ import { PageHeader } from "@/components/PageHeader";
 import { Section } from "@/components/Section";
 import { Reveal } from "@/components/Reveal";
 import { EventTeaserCard } from "@/components/EventTeaserCard";
+import { ArrowLink } from "@/components/ArrowLink";
 import { getAllEvents } from "@/lib/payload/content";
 import { buildMetadata } from "@/lib/seo/metadata";
 import { getSiteUrl } from "@/lib/seo/config";
@@ -32,14 +33,21 @@ export default async function TerminePage() {
         title="Aktuelle Termine"
         lead="Ein Überblick über anstehende Kreise, Begleitungen und Veranstaltungen."
         crumbs={[{ title: "Termine" }]}
+        blobTone="mauve"
+        blobPosition="top-left"
       />
 
       <Section tone="plain">
         {upcoming.length === 0 ? (
-          <p className="text-lg text-anouma-plum">
-            Aktuell sind keine Termine geplant — schau gerne bald wieder vorbei oder melde dich
-            direkt über die <a href="/kontakt" className="underline underline-offset-4">Kontaktseite</a>.
-          </p>
+          <div className="rounded-3xl bg-anouma-cream-light p-8 text-center sm:p-10">
+            <p className="font-serif text-xl font-medium text-anouma-plum">Aktuell sind keine Termine geplant</p>
+            <p className="mt-2 text-base leading-relaxed text-anouma-plum/90">
+              Schau gerne bald wieder vorbei, oder melde dich direkt – ich freue mich von dir zu hören.
+            </p>
+            <div className="mt-5 flex justify-center">
+              <ArrowLink href="/kontakt">Zur Kontaktseite</ArrowLink>
+            </div>
+          </div>
         ) : (
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
             {upcoming.map((event, i) => (