Add calendar-based booking system: accounts, availability, admin calendar

- Customer accounts (separate auth collection) with /konto area
- Availability + AvailabilityOverrides collections driving real slot calculation
- BookingRequests with race-safe confirmation (Postgres advisory lock + transaction)
- Booking emails (request received, admin notify, confirmed, rejected, alternative proposed/accepted, cancelled)
- Confirmed online bookings auto-create a private linked video-call Event
- Custom Payload admin calendar view (month grid + day schedule)
- Wired booking widget into offer pages and /termin-buchen

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

@@ -2,8 +2,12 @@ import type { Metadata } from "next";
 import { PageHeader } from "@/components/PageHeader";
 import { Section, SectionHeading } from "@/components/Section";
 import { ContactForm } from "@/components/ContactForm";
+import { AngebotCard } from "@/components/AngebotCard";
 import { Reveal } from "@/components/Reveal";
 import { getBookingGlobal, getContactGlobal } from "@/lib/payload/globals";
+import { getOffers } from "@/lib/payload/content";
+import { moodForOffer } from "@/lib/angebote";
+import { mediaUrl } from "@/lib/payload/media";
 
 export const dynamic = "force-dynamic";
 
@@ -16,7 +20,8 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default async function TerminBuchenPage() {
-  const [booking, contact] = await Promise.all([getBookingGlobal(), getContactGlobal()]);
+  const [booking, contact, offers] = await Promise.all([getBookingGlobal(), getContactGlobal(), getOffers()]);
+  const bookableOffers = offers.filter((offer) => offer.bookable);
 
   return (
     <>
@@ -27,6 +32,25 @@ export default async function TerminBuchenPage() {
         crumbs={[{ title: "Termin buchen" }]}
       />
 
+      {bookableOffers.length > 0 && (
+        <Section tone="plain">
+          <SectionHeading eyebrow="Angebot auswählen" title="Wofür möchtest du einen Termin?" />
+          <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {bookableOffers.map((offer, i) => (
+              <Reveal key={offer.slug} delay={i * 0.08}>
+                <AngebotCard
+                  href={`/angebote/${offer.slug}`}
+                  title={offer.title}
+                  tagline={offer.shortDescription}
+                  mood={moodForOffer(offer)}
+                  imageSrc={mediaUrl(offer.image, "card")}
+                />
+              </Reveal>
+            ))}
+          </div>
+        </Section>
+      )}
+
       {booking.steps && booking.steps.length > 0 && (
         <Section tone="cream">
           <SectionHeading eyebrow="Ablauf" title="So findest du zu deinem Termin" />
@@ -46,7 +70,15 @@ export default async function TerminBuchenPage() {
 
       <Section tone="plain">
         <div className="mx-auto max-w-xl">
-          <SectionHeading title="Nachricht senden" align="left" />
+          <SectionHeading
+            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."
+                : undefined
+            }
+            align="left"
+          />
           <div className="mt-10">
             <ContactForm
               toEmail={contact.email}