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)/angebote/[slug]/page.tsx

@@ -5,10 +5,12 @@ import { Section } from "@/components/Section";
 import { ImagePlaceholder } from "@/components/ImagePlaceholder";
 import { RichText } from "@/components/RichText";
 import { CTA } from "@/components/CTA";
+import { BookingWidget } from "@/components/booking/BookingWidget";
 import { getOfferBySlug } from "@/lib/payload/content";
 import { moodForOffer } from "@/lib/angebote";
 import { mediaAlt, mediaUrl } from "@/lib/payload/media";
 import { OFFER_CATEGORIES } from "@/collections/Offers";
+import { getCurrentCustomer } from "@/lib/auth/customer";
 
 export const dynamic = "force-dynamic";
 
@@ -30,6 +32,7 @@ export default async function OfferDetailPage({ params }: Args) {
   if (!offer) notFound();
 
   const categoryLabel = OFFER_CATEGORIES.find((c) => c.value === offer.category)?.label;
+  const customer = offer.bookable ? await getCurrentCustomer() : null;
 
   return (
     <>
@@ -54,13 +57,39 @@ export default async function OfferDetailPage({ params }: Args) {
       </div>
       <Section tone="plain">
         <div className="mx-auto max-w-2xl">
+          {(offer.price || offer.durationMinutes) && (
+            <div className="mb-8 flex flex-wrap gap-6 rounded-2xl bg-anouma-cream-light p-5 text-sm">
+              {offer.price && (
+                <div>
+                  <span className="block text-xs font-medium uppercase tracking-wide text-anouma-plum/60">Preis</span>
+                  <span className="text-base text-anouma-plum">{offer.price}</span>
+                </div>
+              )}
+              {offer.durationMinutes && (
+                <div>
+                  <span className="block text-xs font-medium uppercase tracking-wide text-anouma-plum/60">Dauer</span>
+                  <span className="text-base text-anouma-plum">{offer.durationMinutes} Minuten</span>
+                </div>
+              )}
+            </div>
+          )}
           <RichText data={offer.description} />
         </div>
       </Section>
-      <CTA
-        title="Interesse geweckt?"
-        lead={`Melde dich gerne für ein unverbindliches Gespräch zu „${offer.title}“.`}
-      />
+
+      {offer.bookable ? (
+        <Section tone="cream">
+          <div className="mx-auto max-w-3xl">
+            <h2 className="mb-6 text-center font-serif text-3xl font-medium text-anouma-plum">Termin auswählen</h2>
+            <BookingWidget offerSlug={offer.slug!} isLoggedIn={Boolean(customer)} />
+          </div>
+        </Section>
+      ) : (
+        <CTA
+          title="Interesse geweckt?"
+          lead={`Melde dich gerne für ein unverbindliches Gespräch zu „${offer.title}“.`}
+        />
+      )}
     </>
   );
 }