diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..69f2792
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,10 @@
+node_modules
+.next
+.env
+.env.local
+.env.*.local
+coverage
+.DS_Store
+*.log
+npm-debug.log*
+.prisma
diff --git a/.env.local.example b/.env.local.example
new file mode 100644
index 0000000..1625885
--- /dev/null
+++ b/.env.local.example
@@ -0,0 +1,39 @@
+# Beds24 API (v2) — each house has its own separate Beds24 account/login,
+# so each needs its own invite code exchanged for its own refresh token:
+# 1. Log into that house's Beds24 account: Settings > Account > Apps/API >
+#    "Generate invite code" (scopes: inventory, later also "bookings")
+# 2. Exchange once: curl -H "code: <invite-code>" https://api.beds24.com/v2/authentication/setup
+# 3. Paste the returned "refreshToken" value below.
+BEDS24_REFRESH_TOKEN_HERDWEG=your_beds24_refresh_token_for_herdweg
+BEDS24_REFRESH_TOKEN_SCHOENAICHER=your_beds24_refresh_token_for_schoenaicher
+
+# Stripe (one account per house)
+NEXT_PUBLIC_BASE_URL=https://www.BB-Apartment.de
+STRIPE_ACCOUNT_HERDWEWEG=acct_xxxxxxxxxxxxxxxx
+STRIPE_ACCOUNT_SCHOENAICHER=acct_xxxxxxxxxxxxxxxx
+STRIPE_SECRET_KEY_HERDWEWEG=sk_test_xxxxxxxxxxxxxxxx
+STRIPE_SECRET_KEY_SCHOENAICHER=sk_test_xxxxxxxxxxxxxxxx
+STRIPE_WEBHOOK_SECRET_HERDWEWEG=whsec_xxxxxxxxxxxxxxxx
+STRIPE_WEBHOOK_SECRET_SCHOENAICHER=whsec_xxxxxxxxxxxxxxxx
+
+# Database (used by Next.js and n8n)
+DATABASE_URL=postgresql://bbapartment:changeme@postgres:5432/bb_apartment
+POSTGRES_USER=bbapartment
+POSTGRES_PASSWORD=changeme
+POSTGRES_DB=bb_apartment
+
+# n8n
+N8N_BASIC_AUTH_USER=admin
+N8N_BASIC_AUTH_PASSWORD=changeme
+N8N_WEBHOOK_URL=https://n8n.bb-apartment.de/
+
+# SMTP (own server) — used by the contact form (/api/contact) and, later,
+# booking confirmation emails. Without these set, contact messages are just
+# logged to the server console instead of sent (useful for local dev).
+SMTP_HOST=mail.your-server.de
+SMTP_PORT=587
+SMTP_USER=your_smtp_user
+SMTP_PASSWORD=your_smtp_password
+SMTP_FROM=noreply@bb-apartment.de
+# Inbox that receives contact form submissions (defaults to info@bb-apartment.de)
+CONTACT_INBOX_EMAIL=info@bb-apartment.de
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
new file mode 100644
index 0000000..b7be1c5
--- /dev/null
+++ b/DEPLOYMENT.md
@@ -0,0 +1,157 @@
+# Deployment-Anleitung (Docker)
+
+Diese Anleitung beschreibt, wie die BB-Apartment-Website auf einem eigenen Server per Docker deployt wird. Das Projekt bringt bereits ein fertiges `Dockerfile` und `docker-compose.yml` mit.
+
+## 1. Voraussetzungen auf dem Server
+
+Docker & Docker Compose installieren (falls noch nicht vorhanden), z. B. auf Debian/Ubuntu:
+
+```bash
+curl -fsSL https://get.docker.com | sh
+sudo usermod -aG docker $USER
+```
+
+## 2. Code auf den Server bringen
+
+Git ist **nicht zwingend erforderlich** – es gibt mehrere gleichwertige Wege:
+
+### Option A: Mit Git (am einfachsten für spätere Updates)
+
+```bash
+git clone <dein-repo-url> bb-apartment-website
+cd bb-apartment-website
+```
+
+Updates später einfach per `git pull` (siehe Abschnitt "Updates einspielen").
+
+### Option B: Ohne Git – Dateien direkt kopieren (rsync/scp)
+
+Von deinem lokalen Rechner aus, z. B. per `rsync`:
+
+```bash
+rsync -avz --exclude 'node_modules' --exclude '.next' --exclude '.git' \
+  ./bb-apartment-website/ \
+  user@dein-server:/pfad/zu/bb-apartment-website/
+```
+
+Alternativ per `scp` oder einem SFTP-Programm (z. B. FileZilla) den kompletten Ordner hochladen. `.env.local` am besten separat/sicher übertragen oder direkt auf dem Server neu anlegen (Schritt 3), statt sie mitzukopieren.
+
+### Option C: Docker-Image lokal bauen und übertragen
+
+Falls der Server gar keinen Zugriff auf den Quellcode/Registry haben soll:
+
+```bash
+# Lokal bauen und als Datei exportieren
+docker build -t bb-apartment-website .
+docker save bb-apartment-website | gzip > bb-apartment.tar.gz
+
+# Auf den Server kopieren und laden
+scp bb-apartment.tar.gz user@dein-server:/tmp/
+ssh user@dein-server "gunzip -c /tmp/bb-apartment.tar.gz | docker load"
+```
+
+Auf dem Server dann in Schritt 4 `docker compose up -d` **ohne** `--build` verwenden, da das Image schon vorhanden ist (ggf. `image: bb-apartment-website` statt `build:` im `docker-compose.yml` für den `nextjs`-Service eintragen).
+
+### Option D: Docker Registry (Docker Hub, GitHub Container Registry, ...)
+
+Lokal bauen → Image in eine Registry pushen → auf dem Server nur pullen. Praktisch bei häufigeren Updates über mehrere Server hinweg, aber etwas mehr initiales Setup (Registry-Zugang einrichten).
+
+---
+
+Für die restliche Anleitung wird der einfachste Fall (Git) angenommen – bei den anderen Optionen einfach `git pull` in Schritt "Updates einspielen" durch dein jeweiliges Kopier-/Pull-Verfahren ersetzen.
+
+## 3. `.env.local` mit echten Werten anlegen
+
+Diese Datei liegt **nicht** im Git-Repo (enthält Secrets). Auf dem Server einmalig erstellen:
+
+```bash
+cp .env.local.example .env.local
+nano .env.local   # alle Platzhalter durch echte Werte ersetzen
+```
+
+Wichtig einzutragen:
+
+- **Beds24**: `BEDS24_REFRESH_TOKEN_HERDWEG` und `BEDS24_REFRESH_TOKEN_SCHOENAICHER` (je Haus ein eigener Zugang, siehe README für die Anleitung zum Beschaffen des Tokens)
+- **Stripe**: Account-IDs, Secret Keys und Webhook-Secrets für **beide** Häuser
+- **Datenbank**: `DATABASE_URL` / `POSTGRES_USER` / `POSTGRES_PASSWORD` / `POSTGRES_DB`
+- **SMTP**: Zugangsdaten für den Versand der Kontaktformular-Mails
+- **`NEXT_PUBLIC_BASE_URL`**: die echte Domain, z. B. `https://www.bb-apartment.de`
+- **`N8N_*`**: Zugangsdaten für die n8n-Automatisierung (Buchungsbestätigungen etc.)
+
+## 4. Container bauen und starten
+
+```bash
+docker compose up -d --build
+```
+
+Das startet automatisch:
+
+- **Next.js** (Port 3000) – die eigentliche Website
+- **PostgreSQL** – Datenbank für Buchungen
+- **n8n** (Port 5678) – Automatisierungen
+
+### Falls Port 3000 (oder 5678) auf dem Server schon belegt ist
+
+Der Container selbst lauscht intern immer auf Port 3000 (bzw. 5678 bei n8n) — nur der **Host-Port** (die linke Seite von `"3000:3000"` in `docker-compose.yml`) muss angepasst werden. Das ist bereits über Umgebungsvariablen konfigurierbar.
+
+Wichtig: Docker Compose liest diese Variablen für die `ports:`-Zuordnung aus einer Datei namens **`.env`** (nicht `.env.local`!) im selben Ordner wie `docker-compose.yml`, oder aus der Shell-Umgebung. Eine Datei `.env` mit folgendem Inhalt anlegen:
+
+```bash
+cat > .env <<'EOF'
+NEXTJS_HOST_PORT=8080
+N8N_HOST_PORT=8679
+EOF
+```
+
+Dann wie gewohnt starten:
+
+```bash
+docker compose up -d --build
+```
+
+Die Website ist danach unter `http://localhost:8080` erreichbar (bzw. dem von dir gewählten Port). Der Reverse Proxy (siehe Schritt 7) muss dann auf diesen Port statt auf 3000 zeigen.
+
+Alternativ – ohne `.env`-Datei – geht es auch einmalig inline:
+
+```bash
+NEXTJS_HOST_PORT=8080 docker compose up -d --build
+```
+
+## 5. Datenbank-Migration einmalig ausführen
+
+```bash
+docker compose exec nextjs npx prisma migrate deploy
+```
+
+## 6. Prüfen, ob alles läuft
+
+```bash
+docker compose ps
+docker compose logs -f nextjs
+curl http://localhost:3000   # bzw. der Port aus deiner .env, falls angepasst
+```
+
+## 7. Reverse Proxy (Domain + HTTPS)
+
+Das Compose-Setup exponiert Next.js nur auf einem HTTP-Port (Standard 3000) ohne SSL. Für die echte Domain braucht es einen Reverse Proxy (nginx, Caddy o. ä.) davor, der z. B. `www.bb-apartment.de` → `localhost:3000` (bzw. den gewählten Host-Port) weiterleitet und das SSL-Zertifikat (Let's Encrypt) terminiert.
+
+## Updates einspielen
+
+```bash
+git pull
+docker compose up -d --build           # bei Bedarf gezielt nur einen Service: docker compose up -d --build nextjs
+docker compose exec nextjs npx prisma migrate deploy   # nur falls sich das DB-Schema geändert hat
+```
+
+## Fehlersuche
+
+```bash
+docker compose logs -f nextjs      # Next.js-Logs live verfolgen
+docker compose logs -f postgres    # Datenbank-Logs
+docker compose restart nextjs      # Einzelnen Service neu starten
+docker compose down                # Alles stoppen (Daten in Volumes bleiben erhalten)
+```
+
+## Hinweise zu Beds24-Rate-Limits
+
+Die Website cached Beds24-Anfragen serverseitig (5 Minuten bis 1 Stunde, je nach Endpunkt), um innerhalb der Beds24-Anfragelimits zu bleiben. Nach Änderungen in Beds24 (z. B. Mindestaufenthalt, Preise) kann es daher bis zu einer Stunde dauern, bis diese auf der Website sichtbar sind. Details siehe Kommentare in `src/lib/beds24.ts`.
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..47fd24c
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,42 @@
+FROM node:20-alpine AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci --legacy-peer-deps
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+
+RUN npx prisma generate
+RUN npm run build
+
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/.prisma ./node_modules/.prisma
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]
diff --git a/README.md b/README.md
index e215bc4..df5b747 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,145 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# BB-Apartment Website
 
-## Getting Started
+Zweisprachige (DE/EN), buchungsfähige Website für BB-Apartment mit Next.js, Tailwind CSS, Beds24-Integration, Stripe-Zahlung und n8n-Automatisierung.
 
-First, run the development server:
+## Technologie-Stack
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+- **Framework:** Next.js 14 (App Router, TypeScript)
+- **Styling:** Tailwind CSS
+- **Internationalisierung:** next-intl (Deutsch/Englisch)
+- **Zahlungen:** Stripe Checkout (Anzahlung) + Stripe Billing (monatliche Rechnungen) + Stripe Customer Portal
+- **PMS:** Beds24 API
+- **Workflows:** n8n (Self-Hosted)
+- **Datenbank:** PostgreSQL (via Prisma)
+- **Deployment:** Docker Compose auf eigenem Server
+
+## Projektstruktur
+
+```
+app/[locale]/           # Öffentliche Seiten (i18n-Routing)
+app/api/                # API-Endpunkte (Beds24, Stripe, Portal)
+components/             # React-Komponenten
+messages/               # Übersetzungsdateien (de.json, en.json)
+prisma/                 # Prisma Schema
+public/images/          # Bilder & Logo
+src/config/             # Apartment-Konfiguration & Preislogik
+src/lib/                # API-Clients (Beds24, Stripe, Prisma)
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Lokal entwickeln
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+1. Abhängigkeiten installieren:
+   ```bash
+   npm install
+   ```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+2. Umgebungsvariablen kopieren und ausfüllen:
+   ```bash
+   cp .env.local.example .env.local
+   ```
 
-## Learn More
+3. Datenbank migrieren (lokale Postgres oder Docker):
+   ```bash
+   npx prisma migrate dev
+   ```
 
-To learn more about Next.js, take a look at the following resources:
+4. Dev-Server starten:
+   ```bash
+   npm run dev
+   ```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+   Die Seite ist unter `http://localhost:3000/de` bzw. `http://localhost:3000/en` erreichbar.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Produktiv-Deployment (Docker Compose)
 
-## Deploy on Vercel
+1. `.env.local` auf dem Server mit echten Werten befüllen.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+2. Container starten:
+   ```bash
+   docker compose up -d --build
+   ```
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+   Dies startet:
+   - Next.js App auf Port 3000
+   - PostgreSQL
+   - n8n auf Port 5678
+
+3. Erste Datenbank-Migration im Container ausführen:
+   ```bash
+   docker compose exec nextjs npx prisma migrate deploy
+   ```
+
+## Wichtige API-Endpunkte
+
+- `GET /api/availability?apartmentSlug=...&start=YYYY-MM-DD&end=YYYY-MM-DD`  
+  Verfügbarkeit und Preis (inkl. Rabatt/Anzahlung)
+- `POST /api/checkout-session`  
+  Stripe Checkout für Anzahlung erstellen
+- `POST /api/portal-session`  
+  Stripe Customer Portal für Rechnungen/Adresse
+- `POST /api/webhooks/stripe`  
+  Stripe Webhook Empfänger
+- `GET /api/rooms`  
+  Apartment-Informationen aus Beds24
+
+## Konfiguration
+
+### Apartments
+
+Die 8 Apartments mit Beds24 Property-/Room-IDs sind in `src/config/apartments.ts` hinterlegt:
+
+- **Herdweg** (Property-ID `121184`): 4 Apartments
+- **Schönaicher Straße** (Property-ID `36159`): 4 Apartments
+
+### Preise & Anzahlung
+
+Rabattstaffel und Anzahlungshöhe sind in `src/config/apartments.ts` (`bookingConfig`) zentral konfigurierbar:
+
+- Mindestaufenthalt: 20 Tage
+- Standard-Rabatte: 30 Nächte = 5%, 60 Nächte = 10%, 90 Nächte = 15%
+- Anzahlung: 20% der Gesamtkosten
+
+### Stripe
+
+Pro Haus wird ein separates Stripe-Konto verwendet. Die API-Keys und Webhook-Secrets müssen in `.env.local` hinterlegt werden.
+
+### Beds24
+
+Die Anbindung nutzt **Beds24 API v2** (Token-Auth), siehe Kommentare in `src/lib/beds24.ts`.
+
+**Jedes Haus hat einen eigenen, separaten Beds24-Zugang** (eigener Login, nicht nur eine eigene Unterkunft innerhalb eines Accounts) — analog zu den pro Haus getrennten Stripe-Konten. Es werden daher zwei Invite-Codes/Refresh-Tokens benötigt:
+
+1. In **jedem** der beiden Beds24-Konten: Settings → Account → Apps/API → "Generate invite code" (Scope `inventory`, später auch `bookings` für automatische Buchungsanlage).
+2. Jeden Code einmalig gegen einen Refresh-Token tauschen:
+   ```bash
+   curl -H "code: <invite-code>" https://api.beds24.com/v2/authentication/setup
+   ```
+3. Die zurückgegebenen `refreshToken`-Werte als `BEDS24_REFRESH_TOKEN_HERDWEG` bzw. `BEDS24_REFRESH_TOKEN_SCHOENAICHER` in `.env.local` hinterlegen.
+
+Jeder Refresh-Token bleibt gültig, solange er mindestens alle 30 Tage einmal genutzt wird (passiert automatisch bei jedem Seitenaufruf mit Verfügbarkeitsprüfung für das jeweilige Haus). Ohne konfigurierten Token liefert der jeweilige Endpunkt Mock-Daten für die Entwicklung.
+
+**Wichtig:** Die genaue Feldstruktur der Antwort von `/inventory/rooms/offers` und `/properties` wurde anhand der offiziellen Beds24-Dokumentation modelliert, aber noch nicht gegen einen echten Account verifiziert. Nach Eintragen der echten Tokens unbedingt einmal `/api/rooms` aufrufen und mit der Swagger-UI (https://beds24.com/api/v2/#/) abgleichen, ob Feldnamen wie `maxPeople`/`minNights` exakt passen.
+
+## Nächste Schritte / Offene Punkte
+
+- Für beide Häuser je einen echten Beds24-Refresh-Token hinterlegen und Antwortstruktur gegen Swagger-UI verifizieren
+- Stripe API-Keys & Webhooks für beide Häuser konfigurieren
+- n8n-Workflows für Buchungsbestätigung, Beds24-Buchungsanlage und monatliche Rechnungen bauen
+- E-Mail-Vorlagen (Deutsch/Englisch) finalisieren
+- Haus-/Apartment-Adressen vervollständigen
+- Optional: 3D-Rundgänge (Insta360) und KI-Assistent (OpenRouter) nach Go-Live
+
+### Geplant: Monatliche Zahlweise (zurückgestellt)
+
+Entscheidung: **Option A – automatisch per Stripe Subscription Schedule**, Monatsrate = (Gesamtpreis − Anzahlung) ÷ Anzahl Monate, gleichmäßig verteilt.
+
+Umsetzungsschritte, sobald wir weitermachen:
+1. Bei der Anzahlungs-Checkout-Session `payment_intent_data.setup_future_usage: "off_session"` setzen, um die Karte zu speichern (inkl. klarer Einwilligungs-Formulierung für den Gast).
+2. Nach erfolgreicher Anzahlung (Webhook `checkout.session.completed`) automatisch einen Stripe **Subscription Schedule** mit fester Phasenzahl (= Aufenthaltsmonate) und `end_behavior: "cancel"` anlegen.
+3. Prisma-Schema um `stripeSubscriptionScheduleId` / `stripeSubscriptionId` auf `Booking` erweitern.
+4. Webhook um `invoice.paid` / `invoice.payment_failed` erweitern (Status-Update + Benachrichtigung bei Fehlschlag).
+5. Optional später: SEPA-Lastschrift als zusätzliche Zahlmethode ergänzen.
+
+## Lizenz
+
+Privat – alle Rechte vorbehalten.
diff --git a/app/[locale]/apartments/[apartmentSlug]/page.tsx b/app/[locale]/apartments/[apartmentSlug]/page.tsx
new file mode 100644
index 0000000..1220252
--- /dev/null
+++ b/app/[locale]/apartments/[apartmentSlug]/page.tsx
@@ -0,0 +1,209 @@
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { getApartmentBySlug, getHouseById, bookingConfig } from "@/src/config/apartments";
+import { getEffectiveMinStay } from "@/src/lib/beds24";
+import { tomorrowDateString } from "@/src/lib/date";
+import { Bed, Bath, Users, Calendar, Check, Wind, Sofa, Wifi, WashingMachine, Tv } from "lucide-react";
+import { BookingForm } from "@/components/ui/BookingForm";
+import { ImageGallery } from "@/components/ui/ImageGallery";
+import Link from "next/link";
+
+export async function generateMetadata({
+  params: { locale, apartmentSlug },
+}: {
+  params: { locale: string; apartmentSlug: string };
+}) {
+  const apartment = getApartmentBySlug(apartmentSlug);
+  if (!apartment) return { title: "Not Found" };
+
+  const t = await getTranslations({ locale, namespace: "metadata" });
+  return {
+    title: `${apartment.nameEn} - ${t("title")}`,
+    description: apartment.descriptionEn || t("description"),
+  };
+}
+
+export default async function ApartmentPage({
+  params: { locale, apartmentSlug },
+}: {
+  params: { locale: string; apartmentSlug: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "apartment" });
+  const apartment = getApartmentBySlug(apartmentSlug);
+  const house = apartment ? getHouseById(apartment.houseId) : undefined;
+
+  if (!apartment || !house) notFound();
+
+  // Real, effective minimum stay for this apartment as of "tomorrow" — this
+  // combines Beds24's room-level minimum with whatever the currently active
+  // rate/price plan requires (the higher of the two wins), so it reflects
+  // what a guest could actually book, not just the room's base setting.
+  // The BookingForm re-fetches this whenever the guest picks a different
+  // check-in date, since it can vary by season.
+  const minStayNights = await getEffectiveMinStay(
+    apartment.houseId,
+    apartment.beds24PropertyId,
+    apartment.beds24RoomId,
+    tomorrowDateString(),
+    bookingConfig.minStayNights
+  );
+
+  const displayName = locale === "de" ? apartment.name : apartment.nameEn;
+  const displayDescription =
+    locale === "de" ? apartment.description : apartment.descriptionEn;
+  const displayFloor = locale === "de" ? apartment.floor : apartment.floorEn;
+  const amenities =
+    locale === "de" ? apartment.amenities : apartment.amenitiesEn;
+  const houseName = locale === "de" ? house.name : house.nameEn;
+
+  const hasAmenity = (keys: string[]) =>
+    amenities.some((a) => keys.some((k) => a.toLowerCase().includes(k.toLowerCase())));
+
+  // Apartment-specific highlights (excludes "Fully furnished", already shown elsewhere)
+  const specificHighlights = [
+    hasAmenity(["Klimaanlage", "Air conditioning"]) && {
+      icon: Wind,
+      title: locale === "de" ? "Klimaanlage" : "Air conditioning",
+    },
+    hasAmenity(["Waschmaschine", "Washing machine"]) && {
+      icon: WashingMachine,
+      title: locale === "de" ? "Eigene Waschmaschine" : "In-unit Washer",
+    },
+    hasAmenity(["WLAN", "WiFi"]) && {
+      icon: Wifi,
+      title: locale === "de" ? "High-Speed WLAN" : "High-Speed WiFi",
+    },
+    hasAmenity(["TV"]) && {
+      icon: Tv,
+      title: "Smart TV",
+    },
+  ].filter(Boolean) as { icon: typeof Wind; title: string }[];
+
+  return (
+    <div className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="mb-6">
+          <Link
+            href={`/${locale}/houses/${house.slug}`}
+            className="text-brand-green-dark hover:text-brand-green"
+          >
+            ← {houseName}
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-12">
+          <ImageGallery
+            images={apartment.images.length > 0 ? apartment.images : ["/images/placeholder.jpg"]}
+            alt={displayName}
+          />
+          <div>
+            <h1 className="text-4xl font-bold mb-2">{displayName}</h1>
+            <p className="text-brand-grey mb-6">{houseName} • {displayFloor}</p>
+            
+            {displayDescription && (
+              <p className="text-brand-grey leading-relaxed mb-6">
+                {displayDescription}
+              </p>
+            )}
+
+            <div className="grid grid-cols-2 gap-4 mb-8">
+              <div className="flex items-center gap-3 p-4 bg-brand-grey-soft rounded-xl">
+                <Users className="w-5 h-5 text-brand-green" />
+                <div>
+                  <p className="text-sm text-brand-grey">{t("guests")}</p>
+                  <p className="font-semibold">{apartment.maxGuests}</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 p-4 bg-brand-grey-soft rounded-xl">
+                <Calendar className="w-5 h-5 text-brand-green" />
+                <div>
+                  <p className="text-sm text-brand-grey">{t("minStay")}</p>
+                  <p className="font-semibold">{minStayNights} {t("nights")}</p>
+                </div>
+              </div>
+              {amenities.some((a) =>
+                ["Klimaanlage", "Air conditioning"].includes(a)
+              ) && (
+                <div className="flex items-center gap-3 p-4 bg-brand-green/10 rounded-xl border border-brand-green/20 col-span-2 sm:col-span-1">
+                  <Wind className="w-5 h-5 text-brand-green" />
+                  <div>
+                    <p className="text-sm text-brand-grey">
+                      {locale === "de" ? "Klimaanlage" : "Air conditioning"}
+                    </p>
+                    <p className="font-semibold text-brand-green-dark">
+                      {locale === "de" ? "Vorhanden" : "Available"}
+                    </p>
+                  </div>
+                </div>
+              )}
+              <div className="flex items-center gap-3 p-4 bg-brand-green/10 rounded-xl border border-brand-green/20">
+                <Sofa className="w-5 h-5 text-brand-green" />
+                <div>
+                  <p className="text-sm text-brand-grey">
+                    {locale === "de" ? "Vollmöbliert" : "Fully furnished"}
+                  </p>
+                  <p className="font-semibold text-brand-green-dark">
+                    {locale === "de" ? "Ja" : "Yes"}
+                  </p>
+                </div>
+              </div>
+              {apartment.bedrooms && (
+                <div className="flex items-center gap-3 p-4 bg-brand-grey-soft rounded-xl">
+                  <Bed className="w-5 h-5 text-brand-green" />
+                  <div>
+                    <p className="text-sm text-brand-grey">{locale === "de" ? "Schlafzimmer" : "Bedrooms"}</p>
+                    <p className="font-semibold">{apartment.bedrooms}</p>
+                  </div>
+                </div>
+              )}
+              {apartment.bathrooms && (
+                <div className="flex items-center gap-3 p-4 bg-brand-grey-soft rounded-xl">
+                  <Bath className="w-5 h-5 text-brand-green" />
+                  <div>
+                    <p className="text-sm text-brand-grey">{locale === "de" ? "Bäder" : "Bathrooms"}</p>
+                    <p className="font-semibold">{apartment.bathrooms}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <BookingForm apartment={apartment} locale={locale} minStayNights={minStayNights} />
+          </div>
+        </div>
+
+        {specificHighlights.length > 0 && (
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-5 mb-12">
+            {specificHighlights.map((highlight, index) => {
+              const Icon = highlight.icon;
+              return (
+                <div
+                  key={index}
+                  className="flex flex-col items-center text-center gap-4 p-6 bg-white rounded-2xl border-2 border-brand-green/20 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all"
+                >
+                  <div className="p-4 bg-brand-green rounded-2xl text-white shadow-sm">
+                    <Icon className="w-9 h-9" />
+                  </div>
+                  <p className="font-bold text-brand-grey-dark text-lg leading-tight">
+                    {highlight.title}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        <div className="bg-brand-grey-soft rounded-2xl p-8">
+          <h2 className="text-2xl font-bold mb-6">{t("features")}</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {amenities.map((amenity, index) => (
+              <div key={index} className="flex items-center gap-3">
+                <Check className="w-5 h-5 text-brand-green flex-shrink-0" />
+                <span className="text-brand-grey-dark">{amenity}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/booking-success/page.tsx b/app/[locale]/booking-success/page.tsx
new file mode 100644
index 0000000..c9fc869
--- /dev/null
+++ b/app/[locale]/booking-success/page.tsx
@@ -0,0 +1,45 @@
+import { getTranslations } from "next-intl/server";
+import { CheckCircle } from "lucide-react";
+import Link from "next/link";
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "metadata" });
+  return {
+    title: `${t("title")} - Buchung erfolgreich`,
+    description: t("description"),
+  };
+}
+
+export default function BookingSuccessPage({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const isDe = locale === "de";
+
+  return (
+    <div className="py-16">
+      <div className="max-w-2xl mx-auto px-4 text-center">
+        <CheckCircle className="w-16 h-16 text-brand-green mx-auto mb-6" />
+        <h1 className="text-4xl font-bold mb-4">
+          {isDe ? "Anzahlung erfolgreich!" : "Deposit successful!"}
+        </h1>
+        <p className="text-brand-grey text-lg mb-8">
+          {isDe
+            ? "Vielen Dank für Ihre Buchung. Sie erhalten in Kürze eine Bestätigungs-E-Mail. Die monatlichen Rechnungen werden Ihnen über das Kundenportal zur Verfügung gestellt."
+            : "Thank you for your booking. You will receive a confirmation email shortly. Monthly invoices will be available through the customer portal."}
+        </p>
+        <Link
+          href={`/${locale}`}
+          className="inline-block bg-brand-green text-white font-semibold px-8 py-4 rounded-full hover:bg-brand-green-dark transition-colors"
+        >
+          {isDe ? "Zurück zur Startseite" : "Back to home"}
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/contact/page.tsx b/app/[locale]/contact/page.tsx
new file mode 100644
index 0000000..070f745
--- /dev/null
+++ b/app/[locale]/contact/page.tsx
@@ -0,0 +1,114 @@
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { Mail, Phone, MapPin } from "lucide-react";
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "contact" });
+  return {
+    title: t("title"),
+    description: t("description"),
+  };
+}
+
+export default function ContactPage({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = useTranslations("contact");
+
+  return (
+    <div className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold mb-4">{t("title")}</h1>
+          <p className="text-brand-grey text-lg max-w-2xl mx-auto">
+            {t("description")}
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <div className="bg-brand-grey-soft rounded-2xl p-8">
+            <h2 className="text-2xl font-bold mb-6">
+              {locale === "de" ? "Kontaktdaten" : "Contact Details"}
+            </h2>
+            <div className="space-y-6">
+              <div className="flex items-start gap-4">
+                <Mail className="w-6 h-6 text-brand-green mt-1" />
+                <div>
+                  <p className="font-semibold">{t("email")}</p>
+                  <a href="mailto:info@bb-apartment.de" className="text-brand-grey">
+                    info@bb-apartment.de
+                  </a>
+                </div>
+              </div>
+              <div className="flex items-start gap-4">
+                <Phone className="w-6 h-6 text-brand-green mt-1" />
+                <div>
+                  <p className="font-semibold">{t("phone")}</p>
+                  <p className="text-brand-grey">+49 (0) 7031 7631132</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-4">
+                <MapPin className="w-6 h-6 text-brand-green mt-1" />
+                <div>
+                  <p className="font-semibold">{locale === "de" ? "Adresse" : "Address"}</p>
+                  <p className="text-brand-grey">
+                    BB-Apartment<br />
+                    Böblingen<br />
+                    Deutschland
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-2xl p-8 border border-brand-grey-soft shadow-sm">
+            <h2 className="text-2xl font-bold mb-6">
+              {locale === "de" ? "Nachricht senden" : "Send a message"}
+            </h2>
+            <form className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+                  {t("name")}
+                </label>
+                <input
+                  type="text"
+                  className="w-full px-4 py-3 rounded-xl border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+                  {t("email")}
+                </label>
+                <input
+                  type="email"
+                  className="w-full px-4 py-3 rounded-xl border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+                  {t("message")}
+                </label>
+                <textarea
+                  rows={5}
+                  className="w-full px-4 py-3 rounded-xl border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
+                />
+              </div>
+              <button
+                type="submit"
+                className="w-full bg-brand-green text-white font-semibold px-8 py-4 rounded-full hover:bg-brand-green-dark transition-colors"
+              >
+                {t("send")}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
new file mode 100644
index 0000000..ea408e8
--- /dev/null
+++ b/app/[locale]/error.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center px-4 text-center">
+      <h2 className="text-2xl font-bold text-brand-grey-dark mb-4">
+        Etwas ist schiefgelaufen.
+      </h2>
+      <p className="text-brand-grey mb-8 max-w-md">
+        {error.message ||
+          "Beim Laden der Seite ist ein Fehler aufgetreten. Bitte versuche es erneut."}
+      </p>
+      <button
+        onClick={reset}
+        className="px-6 py-3 bg-brand-green text-white rounded-xl font-medium hover:bg-brand-green-dark transition-colors"
+      >
+        Erneut versuchen
+      </button>
+    </div>
+  );
+}
diff --git a/app/[locale]/houses/[houseSlug]/page.tsx b/app/[locale]/houses/[houseSlug]/page.tsx
new file mode 100644
index 0000000..a704536
--- /dev/null
+++ b/app/[locale]/houses/[houseSlug]/page.tsx
@@ -0,0 +1,206 @@
+import { notFound } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { getHouseBySlug } from "@/src/config/apartments";
+import { ApartmentCard } from "@/components/ui/ApartmentCard";
+import { HouseHighlights } from "@/components/ui/HouseHighlights";
+import { MapPin, Home, Car, Clock, Navigation } from "lucide-react";
+import Image from "next/image";
+
+export async function generateMetadata({
+  params: { locale, houseSlug },
+}: {
+  params: { locale: string; houseSlug: string };
+}) {
+  const house = getHouseBySlug(houseSlug);
+  if (!house) return { title: "Not Found" };
+
+  const t = await getTranslations({ locale, namespace: "metadata" });
+  return {
+    title: `${house.nameEn} - ${t("title")}`,
+    description: house.descriptionEn,
+  };
+}
+
+export default function HousePage({
+  params: { locale, houseSlug },
+}: {
+  params: { locale: string; houseSlug: string };
+}) {
+  const t = useTranslations("houses");
+  const house = getHouseBySlug(houseSlug);
+
+  if (!house) notFound();
+
+  const displayName = locale === "de" ? house.name : house.nameEn;
+  const displayDescription =
+    locale === "de" ? house.description : house.descriptionEn;
+  const displayCountry = locale === "de" ? house.country : house.countryEn;
+
+  return (
+    <div className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="relative h-80 md:h-96 rounded-2xl overflow-hidden mb-12">
+          <Image
+            src={house.images[0] || "/images/placeholder.jpg"}
+            alt={displayName}
+            fill
+            className="object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+          <div className="absolute bottom-0 left-0 p-8 text-white">
+            <h1 className="text-4xl font-bold mb-2 text-white">{displayName}</h1>
+            <div className="flex items-center gap-2 text-white/90">
+              <MapPin className="w-5 h-5" />
+              <span>
+                {house.address}, {house.zipCode} {house.city}, {displayCountry}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+          <div className="lg:col-span-2">
+            <h2 className="text-2xl font-bold mb-4">
+              {t("overview")}
+            </h2>
+            <p className="text-brand-grey leading-relaxed mb-8">
+              {displayDescription}
+            </p>
+
+            <HouseHighlights house={house} locale={locale} />
+
+            <h2 className="text-2xl font-bold mb-6">
+              {t("apartments")}
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {house.apartments.map((apartment) => (
+                <ApartmentCard
+                  key={apartment.id}
+                  apartment={apartment}
+                  locale={locale}
+                />
+              ))}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-8 h-fit">
+            <div className="bg-brand-grey-soft rounded-2xl p-8 h-fit">
+              <div className="flex items-center gap-3 mb-4">
+                <Home className="w-6 h-6 text-brand-green" />
+                <h3 className="text-xl font-bold">{displayName}</h3>
+              </div>
+              <p className="text-brand-grey text-sm mb-4">
+                {house.apartments.length} {locale === "de" ? "Apartments" : "Apartments"}
+              </p>
+              <div className="text-sm text-brand-grey">
+                <p className="mb-2">
+                  <strong>{locale === "de" ? "Adresse:" : "Address:"}</strong> {house.address}
+                </p>
+                <p>
+                  <strong>{locale === "de" ? "Stadt:" : "City:"}</strong> {house.zipCode} {house.city}
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-2xl border border-brand-grey-soft shadow-sm p-6 h-fit">
+              <div className="flex items-center gap-2 mb-4">
+                <Navigation className="w-5 h-5 text-brand-green" />
+                <h2 className="text-lg font-bold">
+                  {locale === "de" ? "Lage & Entfernungen" : "Location & Distances"}
+                </h2>
+              </div>
+
+              <div className="flex flex-col gap-3 mb-4">
+                {house.id === "herdweg" ? (
+                  <>
+                    <a
+                      href="https://www.google.com/maps/dir/Herdweg+71,+71032+Böblingen/Panzer+Kaserne+Böblingen"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-3 p-3 bg-brand-green text-white rounded-xl hover:bg-brand-green-dark transition-colors"
+                    >
+                      <Car className="w-5 h-5 shrink-0" />
+                      <div>
+                        <p className="font-bold text-sm">
+                          {locale === "de" ? "Panzer Kaserne – gleiche Straße" : "Panzer Kaserne – Same Street"}
+                        </p>
+                        <p className="text-sm text-white/85">
+                          {locale === "de" ? "Kein Abbiegen nötig" : "Zero turns needed"}
+                        </p>
+                      </div>
+                    </a>
+                    <a
+                      href="https://www.google.com/maps/dir/Herdweg+71,+71032+Böblingen/Böblingen+Zentrum"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-3 p-3 bg-brand-green/10 rounded-xl hover:bg-brand-green/20 transition-colors"
+                    >
+                      <Clock className="w-5 h-5 text-brand-green shrink-0" />
+                      <div>
+                        <p className="font-bold text-brand-grey-dark text-sm">
+                          {locale === "de" ? "Stadtzentrum Böblingen" : "Böblingen City Center"}
+                        </p>
+                        <p className="text-sm text-brand-grey">5–8 min</p>
+                      </div>
+                    </a>
+                  </>
+                ) : (
+                  <>
+                    <a
+                      href="https://www.google.com/maps/dir/Schönaicher+Straße+26,+71032+Böblingen/Daimler+Werk+Sindelfingen"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-3 p-3 bg-brand-green/10 rounded-xl hover:bg-brand-green/20 transition-colors"
+                    >
+                      <Car className="w-5 h-5 text-brand-green shrink-0" />
+                      <div>
+                        <p className="font-bold text-brand-grey-dark text-sm">
+                          {locale === "de" ? "Daimler Werk Sindelfingen" : "Daimler Plant Sindelfingen"}
+                        </p>
+                        <p className="text-sm text-brand-grey">10–15 min</p>
+                      </div>
+                    </a>
+                    <a
+                      href="https://www.google.com/maps/dir/Schönaicher+Straße+26,+71032+Böblingen/Böblingen+Zentrum"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-3 p-3 bg-brand-green/10 rounded-xl hover:bg-brand-green/20 transition-colors"
+                    >
+                      <Clock className="w-5 h-5 text-brand-green shrink-0" />
+                      <div>
+                        <p className="font-bold text-brand-grey-dark text-sm">
+                          {locale === "de" ? "Stadtzentrum Böblingen" : "Böblingen City Center"}
+                        </p>
+                        <p className="text-sm text-brand-grey">&lt; 5 min</p>
+                      </div>
+                    </a>
+                  </>
+                )}
+              </div>
+
+              <div className="relative w-full h-48 rounded-xl overflow-hidden border border-brand-grey-soft">
+                <iframe
+                  src={`https://maps.google.com/maps?q=${encodeURIComponent(`${house.address}, ${house.zipCode} ${house.city}`)}&z=15&output=embed`}
+                  width="100%"
+                  height="100%"
+                  style={{ border: 0 }}
+                  allowFullScreen
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                  title={displayName}
+                  className="grayscale-[20%] hover:grayscale-0 transition-all duration-500"
+                />
+              </div>
+              <p className="text-xs text-brand-grey mt-3 text-center">
+                {locale === "de"
+                  ? "Karte ist interaktiv – klicken Sie auf einen Ort, um die Route zu planen."
+                  : "Map is interactive – click a destination to plan the route."}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/houses/page.tsx b/app/[locale]/houses/page.tsx
new file mode 100644
index 0000000..73f4058
--- /dev/null
+++ b/app/[locale]/houses/page.tsx
@@ -0,0 +1,168 @@
+import { getTranslations } from "next-intl/server";
+import { houses, allApartments, getHouseById, bookingConfig } from "@/src/config/apartments";
+import { getAvailability, getEffectiveMinStay } from "@/src/lib/beds24";
+import { calculatePrice } from "@/src/lib/pricing";
+import { nightsBetween, parseDateOnly } from "@/src/lib/date";
+import { HouseCard } from "@/components/ui/HouseCard";
+import { AvailabilitySearchBar } from "@/components/ui/AvailabilitySearchBar";
+import { AvailableApartmentCard } from "@/components/ui/AvailableApartmentCard";
+import { NoAvailabilityContact } from "@/components/ui/NoAvailabilityContact";
+import Link from "next/link";
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "home" });
+  return {
+    title: t("houses.title"),
+    description: `${t("houses.title")} – ${t("houses.subtitle")}`,
+  };
+}
+
+export default async function HousesPage({
+  params: { locale },
+  searchParams,
+}: {
+  params: { locale: string };
+  searchParams: { arrival?: string; departure?: string; months?: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "home" });
+  const tSearch = await getTranslations({ locale, namespace: "houses.search" });
+
+  const { arrival, departure } = searchParams;
+  const hasSearch = Boolean(arrival && departure);
+
+  if (hasSearch && arrival && departure) {
+    const nights = nightsBetween(arrival, departure);
+
+    const results = await Promise.all(
+      allApartments.map(async (apartment) => {
+        const house = getHouseById(apartment.houseId)!;
+        try {
+          const [availability, minStayNights] = await Promise.all([
+            getAvailability({
+              houseId: apartment.houseId,
+              propertyId: apartment.beds24PropertyId,
+              roomId: apartment.beds24RoomId,
+              start: arrival,
+              end: departure,
+            }),
+            getEffectiveMinStay(
+              apartment.houseId,
+              apartment.beds24PropertyId,
+              apartment.beds24RoomId,
+              arrival,
+              bookingConfig.minStayNights
+            ),
+          ]);
+          const minStayValid = nights > 0 && nights >= minStayNights;
+          const price = calculatePrice(availability.price, nights, availability.currency);
+          return {
+            apartment,
+            house,
+            available: availability.available,
+            minStayValid,
+            pricePerNight: price.basePricePerNight,
+            currency: price.currency,
+          };
+        } catch {
+          return {
+            apartment,
+            house,
+            available: false,
+            minStayValid: false,
+            pricePerNight: undefined,
+            currency: undefined,
+          };
+        }
+      })
+    );
+
+    results.sort((a, b) => {
+      const aOk = a.available && a.minStayValid;
+      const bOk = b.available && b.minStayValid;
+      return aOk === bOk ? 0 : aOk ? -1 : 1;
+    });
+
+    const anyAvailable = results.some((r) => r.available && r.minStayValid);
+
+    return (
+      <div className="py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-8">
+            <h1 className="text-4xl font-bold mb-4">{tSearch("resultsTitle")}</h1>
+            <p className="text-brand-grey text-lg">
+              {tSearch("resultsSubtitle")}: {parseDateOnly(arrival).toLocaleDateString(locale === "de" ? "de-DE" : "en-US")} –{" "}
+              {parseDateOnly(departure).toLocaleDateString(locale === "de" ? "de-DE" : "en-US")}
+            </p>
+          </div>
+
+          <AvailabilitySearchBar
+            locale={locale}
+            defaultArrival={arrival}
+            defaultMonths={searchParams.months ? Number(searchParams.months) : undefined}
+          />
+
+          {!anyAvailable && (
+            <div className="mb-12">
+              <p className="text-center text-brand-grey mb-8">{tSearch("noResults")}</p>
+              <NoAvailabilityContact
+                locale={locale}
+                context={`${locale === "de" ? "Gewünschter Zeitraum" : "Requested dates"}: ${arrival} – ${departure}`}
+              />
+            </div>
+          )}
+
+          {anyAvailable && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
+              {results.map(({ apartment, house, available, minStayValid, pricePerNight, currency }) => (
+                <AvailableApartmentCard
+                  key={apartment.id}
+                  apartment={apartment}
+                  house={house}
+                  locale={locale}
+                  available={available}
+                  minStayValid={minStayValid}
+                  pricePerNight={pricePerNight}
+                  currency={currency}
+                  arrival={arrival}
+                  departure={departure}
+                />
+              ))}
+            </div>
+          )}
+
+          <div className="text-center">
+            <Link
+              href={`/${locale}/houses`}
+              className="text-brand-green-dark font-medium hover:text-brand-green"
+            >
+              {tSearch("showAllHouses")}
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold mb-4">{t("houses.title")}</h1>
+          <p className="text-brand-grey text-lg">{t("houses.subtitle")}</p>
+        </div>
+
+        <AvailabilitySearchBar locale={locale} />
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {houses.map((house) => (
+            <HouseCard key={house.id} house={house} locale={locale} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/imprint/page.tsx b/app/[locale]/imprint/page.tsx
new file mode 100644
index 0000000..834dd11
--- /dev/null
+++ b/app/[locale]/imprint/page.tsx
@@ -0,0 +1,90 @@
+import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "footer" });
+  return {
+    title: t("imprint"),
+  };
+}
+
+export default function ImprintPage({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const isDe = locale === "de";
+
+  return (
+    <div className="py-16">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h1 className="text-4xl font-bold mb-8">
+          {isDe ? "Impressum" : "Imprint"}
+        </h1>
+        <div className="prose prose-lg max-w-none">
+          <p className="text-brand-grey mb-8">
+            {isDe
+              ? "Angaben gemäß § 5 TMG"
+              : "Information according to § 5 TMG"}
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Angaben zum Anbieter" : "Provider Information"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            <strong>
+              {isDe ? "Grundstücksgemeinschaft Allami / Allawy" : "Allami / Allawy Property Community"}
+            </strong>
+            <br />
+            Forchenweg 1
+            <br />
+            71063 Sindelfingen
+            <br />
+            {isDe ? "Deutschland" : "Germany"}
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Vertreten durch" : "Represented by"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            Ali Allawy
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Kontakt" : "Contact"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            E-Mail: info@bb-apartment.de
+            <br />
+            {isDe ? "Telefon:" : "Phone:"} 07031 7631132
+            <br />
+            {isDe ? "Web:" : "Web:"} www.BB-Apartment.de
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Verantwortlich für den Inhalt" : "Responsible for Content"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            Ali Allawy
+            <br />
+            Forchenweg 1
+            <br />
+            71063 Sindelfingen
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Hinweis" : "Note"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            {isDe
+              ? "EU-Streitschlichtung: Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit. Unsere E-Mail-Adresse finden Sie oben im Impressum. Wir sind nicht verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen."
+              : "EU Dispute Resolution: The European Commission provides a platform for online dispute resolution (ODR). Our email address can be found above in the imprint. We are not obligated to participate in dispute resolution proceedings before a consumer arbitration board."}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
new file mode 100644
index 0000000..ebcf93d
--- /dev/null
+++ b/app/[locale]/layout.tsx
@@ -0,0 +1,81 @@
+import { ReactNode } from "react";
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages, getTranslations } from "next-intl/server";
+import { notFound } from "next/navigation";
+import { locales, Locale } from "@/i18n";
+import "../globals.css";
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
+import localFont from "next/font/local";
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "metadata" });
+
+  return {
+    metadataBase: new URL("https://bb-apartment.de"),
+    title: {
+      template: `%s | ${t("title")}`,
+      default: t("title"),
+    },
+    description: t("description"),
+    alternates: {
+      canonical: `/${locale}`,
+      languages: {
+        "de-DE": "/de",
+        "en-US": "/en",
+        "x-default": "/de",
+      },
+    },
+    openGraph: {
+      type: "website",
+      locale: locale === "de" ? "de_DE" : "en_US",
+      url: `https://bb-apartment.de/${locale}`,
+      siteName: "BB-Apartment",
+      title: t("title"),
+      description: t("description"),
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("title"),
+      description: t("description"),
+    },
+    robots: {
+      index: true,
+      follow: true,
+    },
+  };
+}
+
+const geistSans = localFont({
+  src: "../fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+
+export default async function LocaleLayout({
+  children,
+  params: { locale },
+}: {
+  children: ReactNode;
+  params: { locale: string };
+}) {
+  if (!locales.includes(locale as Locale)) notFound();
+
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale} className={geistSans.variable}>
+      <body className="antialiased min-h-screen flex flex-col bg-white text-brand-grey-dark">
+        <NextIntlClientProvider messages={messages} locale={locale}>
+          <Header locale={locale} />
+          <main className="flex-grow pt-20">{children}</main>
+          <Footer />
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
new file mode 100644
index 0000000..ef266f4
--- /dev/null
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,133 @@
+import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
+import { houses } from "@/src/config/apartments";
+import { Hero } from "@/components/ui/Hero";
+import { HouseCard } from "@/components/ui/HouseCard";
+import { BookingBanner } from "@/components/ui/BookingBanner";
+import { Impressions } from "@/components/ui/Impressions";
+import { ArrowRight, MapPin, Shield, Clock, Wind, Home, CreditCard } from "lucide-react";
+import Link from "next/link";
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "metadata" });
+  return {
+    title: t("title"),
+    description: t("description"),
+  };
+}
+
+export default function HomePage({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = useTranslations("home");
+
+  const features = [
+    {
+      icon: Clock,
+      text: t("features.longStay"),
+    },
+    {
+      icon: MapPin,
+      text: t("features.location"),
+    },
+    {
+      icon: Wind,
+      text: t("features.airConditioning"),
+    },
+    {
+      icon: Home,
+      text: t("features.furnished"),
+    },
+    {
+      icon: CreditCard,
+      text: t("features.payment"),
+    },
+  ];
+
+  return (
+    <div>
+      <Hero
+        title={t("hero.title")}
+        subtitle={t("hero.subtitle")}
+        description={t("hero.description")}
+        cta={t("hero.cta")}
+        ctaHref={`/${locale}/houses`}
+      />
+
+      <BookingBanner locale={locale} />
+
+      <section className="py-20 bg-brand-grey-soft/50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <p className="text-brand-green font-semibold mb-2 uppercase tracking-wider text-sm">{t("houses.subtitle")}</p>
+            <h2 className="text-4xl font-bold mb-4 text-brand-grey-dark">{t("houses.title")}</h2>
+            <div className="w-20 h-1 bg-brand-green mx-auto rounded-full" />
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            {houses.map((house) => (
+              <HouseCard key={house.id} house={house} locale={locale} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Impressions
+        title={t("impressions.title")}
+        subtitle={t("impressions.subtitle")}
+      />
+
+      <section className="py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <p className="text-brand-green font-semibold mb-2 uppercase tracking-wider text-sm">{t("features.title")}</p>
+            <h2 className="text-4xl font-bold mb-4 text-brand-grey-dark">{t("features.title")}</h2>
+            <div className="w-20 h-1 bg-brand-green mx-auto rounded-full" />
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
+            {features.map((feature, index) => {
+              const Icon = feature.icon;
+              return (
+                <div
+                  key={index}
+                  className="group p-6 md:p-8 bg-white rounded-2xl shadow-md border-2 border-brand-green/20 hover:bg-brand-green hover:border-brand-green hover:-translate-y-2 transition-all duration-300 flex flex-col items-center text-center"
+                >
+                  <div className="p-4 bg-brand-green/10 rounded-2xl mb-5 group-hover:bg-white/20 transition-colors">
+                    <Icon className="w-8 h-8 text-brand-green group-hover:text-white transition-colors" />
+                  </div>
+                  <p className="text-brand-grey-dark font-bold text-lg leading-snug group-hover:text-white transition-colors">{feature.text}</p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      <section className="relative py-24 overflow-hidden">
+        <div className="absolute inset-0 bg-brand-green" />
+        <div className="absolute inset-0 bg-[url('/images/cta-bg.jpg')] opacity-10 bg-cover bg-center" />
+        <div className="relative z-10 max-w-4xl mx-auto px-4 text-center">
+          <Shield className="w-12 h-12 text-white/80 mx-auto mb-6" />
+          <h2 className="text-4xl font-bold mb-6 text-white">
+            {t("ctaSection.title")}
+          </h2>
+          <p className="text-xl mb-10 text-white/90 max-w-2xl mx-auto">
+            {t("ctaSection.description")}
+          </p>
+          <Link
+            href={`/${locale}/houses`}
+            className="inline-flex items-center gap-2 bg-white text-brand-green-dark font-semibold px-8 py-4 rounded-2xl hover:bg-brand-grey-soft hover:shadow-lg hover:-translate-y-0.5 transition-all"
+          >
+            {t("ctaSection.cta")}
+            <ArrowRight className="w-5 h-5" />
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/app/[locale]/privacy/page.tsx b/app/[locale]/privacy/page.tsx
new file mode 100644
index 0000000..8e1c8f0
--- /dev/null
+++ b/app/[locale]/privacy/page.tsx
@@ -0,0 +1,95 @@
+import { getTranslations } from "next-intl/server";
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: "footer" });
+  return {
+    title: t("privacy"),
+  };
+}
+
+export default function PrivacyPage({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const isDe = locale === "de";
+
+  return (
+    <div className="py-16">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h1 className="text-4xl font-bold mb-8">
+          {isDe ? "Datenschutzerklärung" : "Privacy Policy"}
+        </h1>
+        <div className="prose prose-lg max-w-none">
+          <p className="text-brand-grey mb-8">
+            {isDe
+              ? "Der Schutz Ihrer personenbezogenen Daten ist uns wichtig. Wir verarbeiten Ihre Daten nur, wenn dies technisch oder zur Vertragsabwicklung erforderlich ist."
+              : "The protection of your personal data is important to us. We only process your data when this is technically necessary or required for contract processing."}
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Verantwortlicher" : "Controller"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            <strong>
+              {isDe ? "Grundstücksgemeinschaft Allami / Allawy" : "Allami / Allawy Property Community"}
+            </strong>
+            <br />
+            Forchenweg 1
+            <br />
+            71063 Sindelfingen
+            <br />
+            {isDe ? "Deutschland" : "Germany"}
+            <br />
+            <br />
+            {isDe ? "Vertreten durch:" : "Represented by:"} Ali Allawy
+            <br />
+            E-Mail: info@bb-apartment.de
+            <br />
+            {isDe ? "Telefon:" : "Phone:"} 07031 7631132
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Keine Cookies & kein Tracking" : "No Cookies & No Tracking"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            {isDe
+              ? "Diese Website verwendet keine Cookies, Tracking-Tools, Analyse-Dienste oder Werbe-Technologien. Wir speichern keine personenbezogenen Daten zu Marketing- oder Profiling-Zwecken."
+              : "This website does not use cookies, tracking tools, analytics services or advertising technologies. We do not store personal data for marketing or profiling purposes."}
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Server-Logfiles" : "Server Log Files"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            {isDe
+              ? "Unser Hosting-Anbieter erhebt automatisch technische Daten (z. B. Browsertyp, IP-Adresse, Uhrzeit der Anfrage), die für die technische Bereitstellung und Sicherheit der Website erforderlich sind. Diese Daten werden automatisch gelöscht und nicht mit anderen Datenquellen zusammengeführt."
+              : "Our hosting provider automatically collects technical data (e.g. browser type, IP address, time of request) required for the technical provision and security of the website. This data is automatically deleted and not merged with other data sources."}
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Kontaktanfragen" : "Contact Inquiries"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            {isDe
+              ? "Wenn Sie uns per E-Mail oder Kontaktformular kontaktieren, speichern wir die von Ihnen freiwillig übermittelten Daten ausschließlich zur Bearbeitung Ihrer Anfrage. Eine Weitergabe an Dritte erfolgt nicht."
+              : "If you contact us by email or contact form, we store the data you voluntarily provide solely for the purpose of processing your inquiry. This data is not passed on to third parties."}
+          </p>
+
+          <h2 className="text-2xl font-bold mb-4">
+            {isDe ? "Ihre Rechte" : "Your Rights"}
+          </h2>
+          <p className="text-brand-grey mb-6">
+            {isDe
+              ? "Sie haben das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung sowie Widerspruch gegen die Verarbeitung Ihrer personenbezogenen Daten. Bitte wenden Sie sich dazu an info@bb-apartment.de."
+              : "You have the right to access, rectification, erasure, restriction of processing and objection to the processing of your personal data. Please contact info@bb-apartment.de for this."}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/api/availability/route.ts b/app/api/availability/route.ts
new file mode 100644
index 0000000..ee702d2
--- /dev/null
+++ b/app/api/availability/route.ts
@@ -0,0 +1,103 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAvailability, getEffectiveMinStay } from "@/src/lib/beds24";
+import { calculatePrice } from "@/src/lib/pricing";
+import { getApartmentBySlug, bookingConfig } from "@/src/config/apartments";
+import { nightsBetween, addDays } from "@/src/lib/date";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const apartmentSlug = searchParams.get("apartmentSlug");
+    const start = searchParams.get("start");
+    const end = searchParams.get("end");
+
+    if (!apartmentSlug || !start || !end) {
+      return NextResponse.json(
+        { error: "Missing required parameters: apartmentSlug, start, end" },
+        { status: 400 }
+      );
+    }
+
+    const apartment = getApartmentBySlug(apartmentSlug);
+    if (!apartment) {
+      return NextResponse.json(
+        { error: "Apartment not found" },
+        { status: 404 }
+      );
+    }
+
+    const nights = nightsBetween(start, end);
+
+    if (nights <= 0) {
+      return NextResponse.json(
+        { error: "End date must be after start date" },
+        { status: 400 }
+      );
+    }
+
+    const minStayNights = await getEffectiveMinStay(
+      apartment.houseId,
+      apartment.beds24PropertyId,
+      apartment.beds24RoomId,
+      start,
+      bookingConfig.minStayNights
+    );
+    const minStayValid = nights >= minStayNights;
+
+    const availability = await getAvailability({
+      houseId: apartment.houseId,
+      propertyId: apartment.beds24PropertyId,
+      roomId: apartment.beds24RoomId,
+      start,
+      end,
+    });
+
+    // Fetch Beds24's own short-stay rate for the same arrival date, purely to
+    // display a genuine "savings vs. short-term rate" figure — this never
+    // changes the actual price charged (see calculatePrice()).
+    let referenceNightlyRate: number | undefined;
+    if (availability.available && nights > bookingConfig.referenceStayNights) {
+      try {
+        const reference = await getAvailability({
+          houseId: apartment.houseId,
+          propertyId: apartment.beds24PropertyId,
+          roomId: apartment.beds24RoomId,
+          start,
+          end: addDays(start, bookingConfig.referenceStayNights),
+        });
+        if (reference.available) {
+          referenceNightlyRate = reference.price;
+        }
+      } catch (referenceError) {
+        console.error("Reference price lookup failed:", referenceError);
+      }
+    }
+
+    const price = calculatePrice(
+      availability.price,
+      nights,
+      availability.currency,
+      referenceNightlyRate
+    );
+
+    return NextResponse.json({
+      apartmentSlug,
+      start,
+      end,
+      nights,
+      available: availability.available,
+      minStayValid,
+      minStayNights,
+      maxGuests: apartment.maxGuests,
+      price,
+    });
+  } catch (error) {
+    console.error("Availability API error:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch availability" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/checkout-session/route.ts b/app/api/checkout-session/route.ts
new file mode 100644
index 0000000..0246dfa
--- /dev/null
+++ b/app/api/checkout-session/route.ts
@@ -0,0 +1,162 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getStripe, getStripeAccountId } from "@/src/lib/stripe";
+import { prisma } from "@/src/lib/prisma";
+import { getApartmentBySlug, bookingConfig } from "@/src/config/apartments";
+import { getAvailability, getEffectiveMinStay } from "@/src/lib/beds24";
+import { calculatePrice } from "@/src/lib/pricing";
+import { nightsBetween } from "@/src/lib/date";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const {
+      apartmentSlug,
+      start,
+      end,
+      guestEmail,
+      guestName,
+      successUrl,
+      cancelUrl,
+    } = body;
+
+    if (!apartmentSlug || !start || !end || !guestEmail || !guestName) {
+      return NextResponse.json(
+        { error: "Missing required booking parameters" },
+        { status: 400 }
+      );
+    }
+
+    const apartment = getApartmentBySlug(apartmentSlug);
+    if (!apartment) {
+      return NextResponse.json(
+        { error: "Apartment not found" },
+        { status: 404 }
+      );
+    }
+
+    const startDate = new Date(start);
+    const endDate = new Date(end);
+    const nights = nightsBetween(start, end);
+
+    const minStayNights = await getEffectiveMinStay(
+      apartment.houseId,
+      apartment.beds24PropertyId,
+      apartment.beds24RoomId,
+      start,
+      bookingConfig.minStayNights
+    );
+
+    if (nights < minStayNights) {
+      return NextResponse.json(
+        { error: `Minimum stay is ${minStayNights} nights` },
+        { status: 400 }
+      );
+    }
+
+    const availability = await getAvailability({
+      houseId: apartment.houseId,
+      propertyId: apartment.beds24PropertyId,
+      roomId: apartment.beds24RoomId,
+      start,
+      end,
+    });
+
+    if (!availability.available) {
+      return NextResponse.json(
+        { error: "Apartment not available for selected dates" },
+        { status: 409 }
+      );
+    }
+
+    const price = calculatePrice(availability.price, nights, availability.currency);
+    const depositAmount = Math.round(price.depositAmount * 100); // cents
+
+    const stripe = getStripe(apartment.houseId);
+    const accountId = getStripeAccountId(apartment.houseId);
+
+    // Create or update Stripe customer
+    let customer;
+    const existingCustomers = await stripe.customers.list({
+      email: guestEmail,
+      limit: 1,
+    });
+
+    if (existingCustomers.data.length > 0) {
+      customer = existingCustomers.data[0];
+    } else {
+      customer = await stripe.customers.create({
+        email: guestEmail,
+        name: guestName,
+      });
+    }
+
+    const bookingReference = `BB-${Date.now()}-${Math.random().toString(36).substring(2, 7).toUpperCase()}`;
+
+    // Create pending booking in database
+    await prisma.booking.create({
+      data: {
+        bookingReference,
+        apartmentSlug,
+        houseId: apartment.houseId,
+        beds24PropertyId: apartment.beds24PropertyId,
+        beds24RoomId: apartment.beds24RoomId,
+        guestEmail,
+        guestName,
+        checkIn: startDate,
+        checkOut: endDate,
+        nights,
+        totalAmount: price.totalAfterDiscount,
+        depositAmount: price.depositAmount,
+        currency: price.currency,
+        status: "pending",
+        stripeAccountId: accountId,
+        stripeCustomerId: customer.id,
+      },
+    });
+
+    const session = await stripe.checkout.sessions.create({
+      customer: customer.id,
+      payment_method_types: ["card"],
+      line_items: [
+        {
+          price_data: {
+            currency: price.currency.toLowerCase(),
+            product_data: {
+              name: `Anzahlung Apartment ${apartment.name}`,
+              description: `Aufenthalt: ${start} bis ${end} (${nights} Nächte)`,
+            },
+            unit_amount: depositAmount,
+          },
+          quantity: 1,
+        },
+      ],
+      mode: "payment",
+      success_url: successUrl || `${process.env.NEXT_PUBLIC_BASE_URL}/de/booking-success?reference=${bookingReference}`,
+      cancel_url: cancelUrl || `${process.env.NEXT_PUBLIC_BASE_URL}/de/apartments/${apartmentSlug}`,
+      metadata: {
+        bookingReference,
+        apartmentSlug,
+        houseId: apartment.houseId,
+      },
+    });
+
+    await prisma.booking.update({
+      where: { bookingReference },
+      data: { stripeCheckoutSessionId: session.id },
+    });
+
+    return NextResponse.json({
+      sessionId: session.id,
+      bookingReference,
+      url: session.url,
+    });
+  } catch (error) {
+    console.error("Checkout session error:", error);
+    return NextResponse.json(
+      { error: "Failed to create checkout session" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/contact/route.ts b/app/api/contact/route.ts
new file mode 100644
index 0000000..01e92c4
--- /dev/null
+++ b/app/api/contact/route.ts
@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from "next/server";
+import { sendContactMessage } from "@/src/lib/mail";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { name, email, message, context } = await request.json();
+
+    if (!email || !message) {
+      return NextResponse.json(
+        { error: "Missing required fields: email, message" },
+        { status: 400 }
+      );
+    }
+
+    await sendContactMessage({ name, email, message, context });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Contact API error:", error);
+    return NextResponse.json(
+      { error: "Failed to send message" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/min-stay/route.ts b/app/api/min-stay/route.ts
new file mode 100644
index 0000000..ab1494b
--- /dev/null
+++ b/app/api/min-stay/route.ts
@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getEffectiveMinStay } from "@/src/lib/beds24";
+import { getApartmentBySlug, bookingConfig } from "@/src/config/apartments";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const apartmentSlug = searchParams.get("apartmentSlug");
+    const arrival = searchParams.get("arrival");
+
+    if (!apartmentSlug || !arrival) {
+      return NextResponse.json(
+        { error: "Missing required parameters: apartmentSlug, arrival" },
+        { status: 400 }
+      );
+    }
+
+    const apartment = getApartmentBySlug(apartmentSlug);
+    if (!apartment) {
+      return NextResponse.json(
+        { error: "Apartment not found" },
+        { status: 404 }
+      );
+    }
+
+    const minStayNights = await getEffectiveMinStay(
+      apartment.houseId,
+      apartment.beds24PropertyId,
+      apartment.beds24RoomId,
+      arrival,
+      bookingConfig.minStayNights
+    );
+
+    return NextResponse.json({ apartmentSlug, arrival, minStayNights });
+  } catch (error) {
+    console.error("Min-stay API error:", error);
+    return NextResponse.json(
+      { error: "Failed to determine minimum stay" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/portal-session/route.ts b/app/api/portal-session/route.ts
new file mode 100644
index 0000000..a25f8b9
--- /dev/null
+++ b/app/api/portal-session/route.ts
@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getStripe } from "@/src/lib/stripe";
+import { prisma } from "@/src/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { bookingReference, email } = await request.json();
+
+    if (!bookingReference || !email) {
+      return NextResponse.json(
+        { error: "Missing bookingReference or email" },
+        { status: 400 }
+      );
+    }
+
+    const booking = await prisma.booking.findUnique({
+      where: { bookingReference },
+    });
+
+    if (!booking || booking.guestEmail !== email || !booking.stripeCustomerId) {
+      return NextResponse.json(
+        { error: "Booking not found" },
+        { status: 404 }
+      );
+    }
+
+    const stripe = getStripe(booking.houseId);
+
+    const session = await stripe.billingPortal.sessions.create({
+      customer: booking.stripeCustomerId,
+      return_url: `${process.env.NEXT_PUBLIC_BASE_URL}/de`,
+    });
+
+    return NextResponse.json({ url: session.url });
+  } catch (error) {
+    console.error("Portal session error:", error);
+    return NextResponse.json(
+      { error: "Failed to create portal session" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/rooms/route.ts b/app/api/rooms/route.ts
new file mode 100644
index 0000000..ed5828b
--- /dev/null
+++ b/app/api/rooms/route.ts
@@ -0,0 +1,38 @@
+import { NextResponse } from "next/server";
+import { getRoomInfo } from "@/src/lib/beds24";
+import { allApartments } from "@/src/config/apartments";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    const rooms = await Promise.all(
+      allApartments.map(async (apartment) => {
+        const info = await getRoomInfo(
+          apartment.houseId,
+          apartment.beds24PropertyId,
+          apartment.beds24RoomId
+        );
+        return {
+          slug: apartment.slug,
+          beds24RoomId: apartment.beds24RoomId,
+          beds24PropertyId: apartment.beds24PropertyId,
+          name: apartment.name,
+          nameEn: apartment.nameEn,
+          beds24Name: info.name,
+          maxGuests: info.maxGuests,
+          minStay: info.minStay,
+          currency: info.currency,
+        };
+      })
+    );
+
+    return NextResponse.json({ rooms });
+  } catch (error) {
+    console.error("Rooms API error:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch rooms" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/webhooks/stripe/route.ts b/app/api/webhooks/stripe/route.ts
new file mode 100644
index 0000000..a2ea071
--- /dev/null
+++ b/app/api/webhooks/stripe/route.ts
@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from "next/server";
+import { headers } from "next/headers";
+import Stripe from "stripe";
+import { getStripe, getStripeWebhookSecret } from "@/src/lib/stripe";
+import { prisma } from "@/src/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(request: NextRequest) {
+  const payload = await request.text();
+  const headerPayload = await headers();
+  const signature = headerPayload.get("stripe-signature") || "";
+
+  // Determine which Stripe account this webhook belongs to
+  // Stripe sends the account ID in the Stripe-Account header for Connect
+  const accountId = headerPayload.get("stripe-account") || "";
+  let houseId: string;
+
+  if (process.env.STRIPE_ACCOUNT_HERDWEWEG && accountId === process.env.STRIPE_ACCOUNT_HERDWEWEG) {
+    houseId = "herdweg";
+  } else if (process.env.STRIPE_ACCOUNT_SCHOENAICHER && accountId === process.env.STRIPE_ACCOUNT_SCHOENAICHER) {
+    houseId = "schoenaicher";
+  } else {
+    // If no account header, try to infer from event metadata (not available in signature verification)
+    // For now, we'll try both secrets. In production, use separate webhook endpoints or account headers.
+    return NextResponse.json(
+      { error: "Could not determine Stripe account" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const stripe = getStripe(houseId);
+    const webhookSecret = getStripeWebhookSecret(houseId);
+    const event = stripe.webhooks.constructEvent(payload, signature, webhookSecret);
+
+    // Deduplicate events
+    const existingEvent = await prisma.stripeEvent.findUnique({
+      where: { eventId: event.id },
+    });
+    if (existingEvent) {
+      return NextResponse.json({ received: true });
+    }
+
+    await prisma.stripeEvent.create({
+      data: {
+        eventId: event.id,
+        accountId,
+        type: event.type,
+        payload: JSON.stringify(event),
+      },
+    });
+
+    if (event.type === "checkout.session.completed") {
+      const session = event.data.object as Stripe.Checkout.Session;
+      const bookingReference = session.metadata?.bookingReference;
+
+      if (bookingReference) {
+        await prisma.booking.update({
+          where: { bookingReference },
+          data: {
+            status: "deposit_paid",
+            stripePaymentIntentId: session.payment_intent as string,
+          },
+        });
+
+        // TODO: Trigger n8n workflow to create booking in Beds24
+        console.log(`Deposit paid for booking ${bookingReference}`);
+      }
+    }
+
+    return NextResponse.json({ received: true });
+  } catch (error) {
+    console.error("Stripe webhook error:", error);
+    return NextResponse.json(
+      { error: "Webhook verification failed" },
+      { status: 400 }
+    );
+  }
+}
diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 0000000..1769883
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html>
+      <body className="min-h-screen flex flex-col items-center justify-center px-4 text-center bg-white text-brand-grey-dark">
+        <h2 className="text-2xl font-bold mb-4">Ein unerwarteter Fehler ist aufgetreten.</h2>
+        <p className="text-brand-grey mb-8">{error.message}</p>
+        <button
+          onClick={reset}
+          className="px-6 py-3 bg-brand-green text-white rounded-xl font-medium hover:bg-brand-green-dark transition-colors"
+        >
+          Erneut versuchen
+        </button>
+      </body>
+    </html>
+  );
+}
diff --git a/app/global-error.tsx b/app/global-error.tsx
new file mode 100644
index 0000000..68335cc
--- /dev/null
+++ b/app/global-error.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html>
+      <body className="min-h-screen flex flex-col items-center justify-center px-4 text-center bg-white text-brand-grey-dark">
+        <h2 className="text-2xl font-bold mb-4">Ein kritischer Fehler ist aufgetreten.</h2>
+        <p className="text-brand-grey mb-8">{error.message}</p>
+        <button
+          onClick={() => reset()}
+          className="px-6 py-3 bg-brand-green text-white rounded-xl font-medium hover:bg-brand-green-dark transition-colors"
+        >
+          Erneut versuchen
+        </button>
+      </body>
+    </html>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index 13d40b8..bfd707d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,20 +4,15 @@
 
 :root {
   --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --foreground: #2c2c2c;
+  --brand-green: #7cb342;
+  --brand-green-dark: #558b2f;
+  --brand-grey: #4a4a4a;
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
 }
 
 @layer utilities {
@@ -25,3 +20,12 @@ body {
     text-wrap: balance;
   }
 }
+
+@layer base {
+  h1, h2, h3, h4, h5, h6 {
+    @apply text-brand-grey-dark font-semibold;
+  }
+  a {
+    @apply text-brand-green-dark hover:text-brand-green transition-colors;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index a36cde0..549e25f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,35 +1,5 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import { ReactNode } from "react";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return children;
 }
diff --git a/app/page.tsx b/app/page.tsx
deleted file mode 100644
index 433c8aa..0000000
--- a/app/page.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}
diff --git a/app/robots.ts b/app/robots.ts
new file mode 100644
index 0000000..0eb7c72
--- /dev/null
+++ b/app/robots.ts
@@ -0,0 +1,11 @@
+import { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: "https://bb-apartment.de/sitemap.xml",
+  };
+}
diff --git a/app/sitemap.ts b/app/sitemap.ts
new file mode 100644
index 0000000..c20bd64
--- /dev/null
+++ b/app/sitemap.ts
@@ -0,0 +1,50 @@
+import { MetadataRoute } from "next";
+import { houses } from "@/src/config/apartments";
+
+const baseUrl = "https://bb-apartment.de";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const locales = ["de", "en"];
+
+  const staticRoutes: MetadataRoute.Sitemap = [
+    { url: baseUrl, lastModified: new Date() },
+    ...locales.map((locale) => ({
+      url: `${baseUrl}/${locale}`,
+      lastModified: new Date(),
+    })),
+    ...locales.map((locale) => ({
+      url: `${baseUrl}/${locale}/houses`,
+      lastModified: new Date(),
+    })),
+    ...locales.map((locale) => ({
+      url: `${baseUrl}/${locale}/contact`,
+      lastModified: new Date(),
+    })),
+    ...locales.map((locale) => ({
+      url: `${baseUrl}/${locale}/imprint`,
+      lastModified: new Date(),
+    })),
+    ...locales.map((locale) => ({
+      url: `${baseUrl}/${locale}/privacy`,
+      lastModified: new Date(),
+    })),
+  ];
+
+  const houseRoutes: MetadataRoute.Sitemap = houses.flatMap((house) =>
+    locales.map((locale) => ({
+      url: `${baseUrl}/${locale}/houses/${house.slug}`,
+      lastModified: new Date(),
+    }))
+  );
+
+  const apartmentRoutes: MetadataRoute.Sitemap = houses.flatMap((house) =>
+    house.apartments.flatMap((apartment) =>
+      locales.map((locale) => ({
+        url: `${baseUrl}/${locale}/apartments/${apartment.slug}`,
+        lastModified: new Date(),
+      }))
+    )
+  );
+
+  return [...staticRoutes, ...houseRoutes, ...apartmentRoutes];
+}
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
new file mode 100644
index 0000000..20bcfcd
--- /dev/null
+++ b/components/layout/Footer.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import {
+  Home,
+  MapPin,
+  Mail,
+  Phone,
+  Globe,
+  Shield,
+  ArrowRight,
+} from "lucide-react";
+
+export function Footer() {
+  const t = useTranslations("footer");
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="relative bg-brand-grey-dark text-white overflow-hidden">
+      <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-brand-green via-brand-green-light to-brand-green" />
+      <div className="absolute -top-24 -right-24 w-64 h-64 bg-brand-green/10 rounded-full blur-3xl" />
+      <div className="absolute -bottom-32 -left-32 w-80 h-80 bg-brand-green/10 rounded-full blur-3xl" />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+          <div className="space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="p-2.5 bg-brand-green rounded-xl">
+                <Home className="w-6 h-6 text-white" />
+              </div>
+              <h3 className="text-xl font-bold">{t("brandTitle")}</h3>
+            </div>
+            <p className="text-brand-grey-light text-sm leading-relaxed">
+              {t("welcome")}
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 text-brand-green-light mb-2">
+              <MapPin className="w-5 h-5" />
+              <h3 className="text-lg font-bold text-white">{t("locationsTitle")}</h3>
+            </div>
+            <div className="space-y-4 text-sm">
+              <a
+                href="https://maps.google.com/?q=Herdweg+71+Böblingen"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <span className="font-semibold text-white">{t("herdwegName")}</span>
+                <br />
+                {t("herdwegAddress")}
+              </a>
+              <a
+                href="https://maps.google.com/?q=Schönaicher+Straße+26+Böblingen"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <span className="font-semibold text-white">{t("schoenaicherName")}</span>
+                <br />
+                {t("schoenaicherAddress")}
+              </a>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 text-brand-green-light mb-2">
+              <Phone className="w-5 h-5" />
+              <h3 className="text-lg font-bold text-white">{t("contactTitle")}</h3>
+            </div>
+            <div className="space-y-3 text-sm">
+              <a
+                href={`mailto:${t("email")}`}
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <Mail className="w-4 h-4 text-brand-green" />
+                {t("email")}
+              </a>
+              <a
+                href={`tel:${t("phone").replace(/\s/g, "")}`}
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <Phone className="w-4 h-4 text-brand-green" />
+                {t("phone")}
+              </a>
+              <a
+                href={`https://${t("web")}`}
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <Globe className="w-4 h-4 text-brand-green" />
+                {t("web")}
+              </a>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 text-brand-green-light mb-2">
+              <Shield className="w-5 h-5" />
+              <h3 className="text-lg font-bold text-white">{t("legalTitle")}</h3>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Link
+                href="/imprint"
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light hover:translate-x-1 transition-all text-sm"
+              >
+                <ArrowRight className="w-4 h-4 text-brand-green" />
+                {t("imprint")}
+              </Link>
+              <Link
+                href="/privacy"
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light hover:translate-x-1 transition-all text-sm"
+              >
+                <ArrowRight className="w-4 h-4 text-brand-green" />
+                {t("privacy")}
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="relative mt-14 pt-8 border-t border-brand-grey/30 text-center text-brand-grey-light text-sm">
+          © {currentYear} BB-Apartment. {t("rights")}
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
new file mode 100644
index 0000000..d5acdbc
--- /dev/null
+++ b/components/layout/Header.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { usePathname } from "next/navigation";
+import { LanguageSwitcher } from "./LanguageSwitcher";
+import { Menu, X } from "lucide-react";
+import { useState, useEffect } from "react";
+
+export function Header({ locale }: { locale: string }) {
+  const t = useTranslations("navigation");
+  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
+  const showSolid = !isHome || scrolled;
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+
+    handleScroll();
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const navLinks = [
+    { href: `/${locale}`, label: t("home") },
+    { href: `/${locale}/houses`, label: t("houses") },
+    { href: `/${locale}/contact`, label: t("contact") },
+  ];
+
+  return (
+    <header
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 border-b ${
+        showSolid
+          ? "bg-white/95 backdrop-blur-md border-brand-grey-soft shadow-sm"
+          : "bg-transparent border-transparent"
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div
+          className={`flex items-center justify-between transition-all duration-300 ${
+            showSolid ? "h-20" : "h-28"
+          }`}
+        >
+          <Link href={`/${locale}`} className="flex items-center gap-3">
+            <div
+              className={`relative overflow-hidden rounded-lg transition-all duration-300 ${
+                showSolid ? "w-12 h-12" : "w-24 h-24"
+              }`}
+            >
+              <Image
+                src="/images/logo.jpg"
+                alt="BB-Apartment"
+                fill
+                className="object-cover"
+              />
+            </div>
+            <span
+              className={`text-xl font-bold transition-colors duration-300 ${
+                showSolid ? "text-brand-grey-dark" : "text-white"
+              }`}
+            >
+              BB-Apartment
+            </span>
+          </Link>
+
+          <nav className="hidden md:flex items-center gap-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`font-medium transition-colors duration-300 ${
+                  showSolid
+                    ? "text-brand-grey hover:text-brand-green"
+                    : "text-white/90 hover:text-white"
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+            <LanguageSwitcher locale={locale} scrolled={showSolid} />
+            <Link
+              href={`/${locale}/houses`}
+              className={`font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 ${
+                showSolid
+                  ? "bg-brand-green text-white hover:bg-brand-green-dark shadow-sm"
+                  : "bg-white text-brand-green-dark hover:bg-brand-grey-soft"
+              }`}
+            >
+              {t("bookNow")}
+            </Link>
+          </nav>
+
+          <div className="md:hidden flex items-center gap-4">
+            <LanguageSwitcher locale={locale} scrolled={showSolid} />
+            <Link
+              href={`/${locale}/houses`}
+              className="hidden sm:inline-flex font-semibold px-4 py-2 rounded-xl bg-brand-green text-white hover:bg-brand-green-dark transition-colors text-sm"
+            >
+              {t("bookNow")}
+            </Link>
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className={`p-2 transition-colors duration-300 ${
+                showSolid ? "text-brand-grey-dark" : "text-white"
+              }`}
+              aria-label="Toggle menu"
+            >
+              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {mobileMenuOpen && (
+        <div className="md:hidden bg-white border-t border-brand-grey-soft">
+          <nav className="flex flex-col px-4 py-4 gap-4">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setMobileMenuOpen(false)}
+                className="text-brand-grey hover:text-brand-green font-medium transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+            <Link
+              href={`/${locale}/houses`}
+              onClick={() => setMobileMenuOpen(false)}
+              className="inline-flex items-center justify-center gap-2 bg-brand-green text-white font-semibold px-4 py-3 rounded-xl hover:bg-brand-green-dark transition-colors"
+            >
+              {t("bookNow")}
+            </Link>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}
diff --git a/components/layout/LanguageSwitcher.tsx b/components/layout/LanguageSwitcher.tsx
new file mode 100644
index 0000000..0e29dc0
--- /dev/null
+++ b/components/layout/LanguageSwitcher.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { locales } from "@/i18n";
+
+export function LanguageSwitcher({
+  locale,
+  scrolled = false,
+}: {
+  locale: string;
+  scrolled?: boolean;
+}) {
+  const pathname = usePathname();
+  const strippedPath = pathname.replace(`/${locale}`, "") || "/";
+
+  return (
+    <div
+      className={`flex items-center gap-1 rounded-full p-1 transition-colors duration-300 ${
+        scrolled ? "bg-brand-grey-soft" : "bg-white/10"
+      }`}
+    >
+      {locales.map((l) => (
+        <Link
+          key={l}
+          href={`/${l}${strippedPath}`}
+          className={`px-3 py-1 rounded-full text-sm font-medium transition-colors duration-300 ${
+            l === locale
+              ? "bg-brand-green text-white"
+              : scrolled
+                ? "text-brand-grey hover:text-brand-green-dark"
+                : "text-white/80 hover:text-white"
+          }`}
+        >
+          {l.toUpperCase()}
+        </Link>
+      ))}
+    </div>
+  );
+}
diff --git a/components/ui/ApartmentCard.tsx b/components/ui/ApartmentCard.tsx
new file mode 100644
index 0000000..b29972e
--- /dev/null
+++ b/components/ui/ApartmentCard.tsx
@@ -0,0 +1,70 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Apartment } from "@/src/config/apartments";
+import { Users, ArrowRight, Wind } from "lucide-react";
+
+interface ApartmentCardProps {
+  apartment: Apartment;
+  locale: string;
+}
+
+export function ApartmentCard({ apartment, locale }: ApartmentCardProps) {
+  const displayName = locale === "de" ? apartment.name : apartment.nameEn;
+  const displayFloor = locale === "de" ? apartment.floor : apartment.floorEn;
+  const hasAc = apartment.amenities.some((a) => a.toLowerCase().includes("klimaanlage"));
+
+  return (
+    <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-brand-grey-soft hover:shadow-lg transition-shadow">
+      <div className="relative h-48">
+        <Image
+          src={apartment.images[0] || "/images/placeholder.jpg"}
+          alt={displayName}
+          fill
+          className="object-cover"
+        />
+        <div
+          className={`absolute top-3 right-3 flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1.5 rounded-full backdrop-blur-sm ${
+            hasAc ? "bg-brand-green/90 text-white" : "bg-white/90 text-brand-grey"
+          }`}
+          title={
+            hasAc
+              ? locale === "de"
+                ? "Klimaanlage vorhanden"
+                : "Air conditioning available"
+              : locale === "de"
+              ? "Keine Klimaanlage"
+              : "No air conditioning"
+          }
+        >
+          <Wind className={`w-3.5 h-3.5 ${hasAc ? "" : "opacity-40"}`} />
+          {hasAc
+            ? locale === "de"
+              ? "Klimaanlage"
+              : "AC"
+            : locale === "de"
+            ? "Keine Klimaanlage"
+            : "No AC"}
+        </div>
+      </div>
+      <div className="p-5">
+        <h3 className="text-xl font-bold mb-1 text-brand-grey-dark">
+          {displayName}
+        </h3>
+        <p className="text-brand-grey-light text-sm mb-4">{displayFloor}</p>
+        <div className="flex items-center gap-2 text-sm text-brand-grey mb-4">
+          <Users className="w-4 h-4 text-brand-green" />
+          <span>
+            {apartment.maxGuests} {locale === "de" ? "Gäste" : "guests"}
+          </span>
+        </div>
+        <Link
+          href={`/${locale}/apartments/${apartment.slug}`}
+          className="inline-flex items-center gap-2 text-brand-green-dark font-medium hover:text-brand-green transition-colors"
+        >
+          {locale === "de" ? "Details ansehen" : "View details"}
+          <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/AvailabilitySearchBar.tsx b/components/ui/AvailabilitySearchBar.tsx
new file mode 100644
index 0000000..ccf0093
--- /dev/null
+++ b/components/ui/AvailabilitySearchBar.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Calendar, ArrowRight } from "lucide-react";
+import { tomorrowDateString, addMonths } from "@/src/lib/date";
+
+interface AvailabilitySearchBarProps {
+  locale: string;
+  defaultArrival?: string;
+  defaultMonths?: number;
+}
+
+export function AvailabilitySearchBar({
+  locale,
+  defaultArrival,
+  defaultMonths,
+}: AvailabilitySearchBarProps) {
+  const t = useTranslations("houses.search");
+  const router = useRouter();
+  const [arrival, setArrival] = useState(defaultArrival || tomorrowDateString());
+  const [months, setMonths] = useState(defaultMonths || 3);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const departure = addMonths(arrival, months);
+    const searchParams = new URLSearchParams({
+      arrival,
+      departure,
+      months: String(months),
+    });
+    router.push(`/${locale}/houses?${searchParams.toString()}`);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="bg-white rounded-2xl shadow-lg border border-brand-grey-soft/80 p-6 md:p-8 mb-12"
+    >
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-end">
+        <div className="space-y-2">
+          <label
+            htmlFor="search-arrival"
+            className="flex items-center gap-2 text-sm font-bold text-brand-grey-dark"
+          >
+            <Calendar className="w-4 h-4 text-brand-green" />
+            {t("arrival")}
+          </label>
+          <input
+            id="search-arrival"
+            type="date"
+            required
+            lang={locale === "de" ? "de-DE" : "en-US"}
+            value={arrival}
+            min={tomorrowDateString()}
+            onChange={(e) => setArrival(e.target.value)}
+            className="w-full px-4 py-3 rounded-xl border-2 border-brand-grey-soft/60 bg-brand-grey-soft/20 text-brand-grey-dark focus:outline-none focus:ring-2 focus:ring-brand-green focus:border-transparent transition-all"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label htmlFor="search-months" className="block text-sm font-bold text-brand-grey-dark">
+            {t("stayMonths")}
+          </label>
+          <input
+            id="search-months"
+            type="number"
+            min={1}
+            max={24}
+            required
+            value={months}
+            onChange={(e) => setMonths(Number(e.target.value))}
+            className="w-full px-4 py-3 text-center rounded-xl border-2 border-brand-grey-soft/60 bg-brand-grey-soft/20 text-brand-grey-dark focus:outline-none focus:ring-2 focus:ring-brand-green focus:border-transparent transition-all"
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="inline-flex items-center justify-center gap-2 bg-brand-green text-white font-bold px-6 py-3 rounded-xl hover:bg-brand-green-dark hover:shadow-lg transition-all"
+        >
+          {t("checkAvailability")}
+          <ArrowRight className="w-5 h-5" />
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/components/ui/AvailableApartmentCard.tsx b/components/ui/AvailableApartmentCard.tsx
new file mode 100644
index 0000000..bd8a95f
--- /dev/null
+++ b/components/ui/AvailableApartmentCard.tsx
@@ -0,0 +1,102 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Apartment, House } from "@/src/config/apartments";
+import { formatPrice } from "@/src/lib/pricing";
+import { CheckCircle2, XCircle, Users, MapPin, ArrowRight } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+interface AvailableApartmentCardProps {
+  apartment: Apartment;
+  house: House;
+  locale: string;
+  available: boolean;
+  minStayValid: boolean;
+  pricePerNight?: number;
+  currency?: string;
+  arrival: string;
+  departure: string;
+}
+
+export function AvailableApartmentCard({
+  apartment,
+  house,
+  locale,
+  available,
+  minStayValid,
+  pricePerNight,
+  currency,
+  arrival,
+  departure,
+}: AvailableApartmentCardProps) {
+  const t = useTranslations("houses.search");
+  const displayName = locale === "de" ? apartment.name : apartment.nameEn;
+  const houseName = locale === "de" ? house.name : house.nameEn;
+  const canBook = available && minStayValid;
+
+  return (
+    <div
+      className={`bg-white rounded-2xl overflow-hidden shadow-sm border transition-shadow ${
+        canBook
+          ? "border-brand-grey-soft hover:shadow-lg"
+          : "border-brand-grey-soft opacity-70"
+      }`}
+    >
+      <div className="relative h-48">
+        <Image
+          src={apartment.images[0] || "/images/placeholder.jpg"}
+          alt={displayName}
+          fill
+          className={`object-cover ${canBook ? "" : "grayscale"}`}
+        />
+        <div
+          className={`absolute top-3 right-3 flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1.5 rounded-full backdrop-blur-sm ${
+            canBook ? "bg-brand-green/90 text-white" : "bg-white/90 text-brand-grey"
+          }`}
+        >
+          {canBook ? (
+            <CheckCircle2 className="w-3.5 h-3.5" />
+          ) : (
+            <XCircle className="w-3.5 h-3.5" />
+          )}
+          {canBook ? t("available") : !minStayValid ? t("minStayNotMet") : t("notAvailable")}
+        </div>
+      </div>
+      <div className="p-5">
+        <h3 className="text-lg font-bold mb-1 text-brand-grey-dark">{displayName}</h3>
+        <div className="flex items-center gap-1.5 text-sm text-brand-grey mb-3">
+          <MapPin className="w-4 h-4 text-brand-green" />
+          <span>{houseName}</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm text-brand-grey mb-1">
+          <Users className="w-4 h-4 text-brand-green" />
+          <span>
+            {apartment.maxGuests} {locale === "de" ? "Gäste" : "guests"}
+          </span>
+        </div>
+        {canBook && pricePerNight !== undefined && (
+          <p className="text-lg font-bold text-brand-green-dark mb-4">
+            {formatPrice(pricePerNight, currency)}{" "}
+            <span className="text-sm font-normal text-brand-grey">/ {t("perNight")}</span>
+          </p>
+        )}
+
+        {canBook ? (
+          <Link
+            href={`/${locale}/apartments/${apartment.slug}?checkin=${arrival}&checkout=${departure}`}
+            className="inline-flex items-center justify-center gap-2 w-full bg-brand-green text-white font-semibold px-4 py-3 rounded-xl hover:bg-brand-green-dark transition-colors"
+          >
+            {t("bookThis")}
+            <ArrowRight className="w-4 h-4" />
+          </Link>
+        ) : (
+          <Link
+            href={`/${locale}/apartments/${apartment.slug}`}
+            className="inline-flex items-center justify-center gap-2 w-full bg-brand-grey-soft text-brand-grey-dark font-semibold px-4 py-3 rounded-xl hover:bg-brand-grey-soft/70 transition-colors"
+          >
+            {locale === "de" ? "Details ansehen" : "View details"}
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/BookingBanner.tsx b/components/ui/BookingBanner.tsx
new file mode 100644
index 0000000..5a89b24
--- /dev/null
+++ b/components/ui/BookingBanner.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Calendar, ArrowRight } from "lucide-react";
+import { tomorrowDateString, addMonths } from "@/src/lib/date";
+
+interface BookingBannerProps {
+  locale: string;
+}
+
+export function BookingBanner({ locale }: BookingBannerProps) {
+  const t = useTranslations("home.bookingBanner");
+  const router = useRouter();
+  const [arrival, setArrival] = useState(tomorrowDateString());
+  const [months, setMonths] = useState(3);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const departure = addMonths(arrival, months);
+    const searchParams = new URLSearchParams({
+      arrival,
+      departure,
+      months: String(months),
+    });
+    router.push(`/${locale}/houses?${searchParams.toString()}`);
+  };
+
+  return (
+    <section className="relative z-20 -mt-16 mb-24">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+        <form
+          onSubmit={handleSubmit}
+          className="bg-white rounded-3xl shadow-2xl shadow-brand-grey-dark/15 border border-brand-grey-soft/80 overflow-hidden"
+        >
+          <div className="h-1.5 w-full bg-gradient-to-r from-brand-green via-brand-green-light to-brand-green" />
+          <div className="p-8 md:p-10">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-end">
+              <div className="space-y-3">
+                <label
+                  htmlFor="booking-arrival"
+                  className="flex items-center gap-2 text-base font-bold text-brand-grey-dark"
+                >
+                  <Calendar className="w-5 h-5 text-brand-green" />
+                  {t("arrival")}
+                </label>
+                <div className="relative">
+                  <input
+                    id="booking-arrival"
+                    type="date"
+                    required
+                    value={arrival}
+                    min={tomorrowDateString()}
+                    onChange={(e) => setArrival(e.target.value)}
+                    className="w-full pl-4 pr-4 py-4 text-lg rounded-xl border-2 border-brand-grey-soft/60 bg-brand-grey-soft/20 text-brand-grey-dark focus:outline-none focus:ring-2 focus:ring-brand-green focus:border-transparent transition-all"
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <label
+                  htmlFor="booking-months"
+                  className="block text-base font-bold text-brand-grey-dark"
+                >
+                  {t("stayMonths")}
+                </label>
+                <div className="relative">
+                  <input
+                    id="booking-months"
+                    type="number"
+                    min={1}
+                    max={24}
+                    required
+                    value={months}
+                    onChange={(e) => setMonths(Number(e.target.value))}
+                    className="w-full px-4 py-4 text-lg text-center rounded-xl border-2 border-brand-grey-soft/60 bg-brand-grey-soft/20 text-brand-grey-dark focus:outline-none focus:ring-2 focus:ring-brand-green focus:border-transparent transition-all"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                className="inline-flex items-center justify-center gap-3 bg-brand-green text-white text-lg font-bold px-8 py-4 rounded-xl hover:bg-brand-green-dark hover:shadow-xl hover:-translate-y-1 transition-all"
+              >
+                {t("checkAvailability")}
+                <ArrowRight className="w-6 h-6" />
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+}
diff --git a/components/ui/BookingForm.tsx b/components/ui/BookingForm.tsx
new file mode 100644
index 0000000..2741e9e
--- /dev/null
+++ b/components/ui/BookingForm.tsx
@@ -0,0 +1,392 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Apartment } from "@/src/config/apartments";
+import { addDays } from "@/src/lib/date";
+import { Calendar, Users } from "lucide-react";
+
+interface BookingFormProps {
+  apartment: Apartment;
+  locale: string;
+  /** Initial value (probed server-side for "tomorrow") — kept up to date
+   * client-side via /api/min-stay whenever the guest changes the check-in
+   * date, since the effective minimum stay can vary by season/rate. */
+  minStayNights: number;
+}
+
+export function BookingForm({ apartment, locale, minStayNights: initialMinStayNights }: BookingFormProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [start, setStart] = useState(searchParams.get("checkin") || "");
+  const [end, setEnd] = useState(searchParams.get("checkout") || "");
+  const [guestName, setGuestName] = useState("");
+  const [guestEmail, setGuestEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [attemptedSubmit, setAttemptedSubmit] = useState(false);
+  const [minStayNights, setMinStayNights] = useState(initialMinStayNights);
+  const [minStayLoading, setMinStayLoading] = useState(false);
+  const [price, setPrice] = useState<{
+    nights: number;
+    basePricePerNight: number;
+    totalAfterDiscount: number;
+    depositAmount: number;
+    discountPercent: number;
+    minStayValid: boolean;
+    available: boolean;
+  } | null>(null);
+
+  const t = (key: string) => {
+    const translations: Record<string, Record<string, string>> = {
+      de: {
+        checkIn: "Anreise",
+        checkOut: "Abreise",
+        guests: "Gäste",
+        name: "Name",
+        email: "E-Mail",
+        calculate: "Preis berechnen",
+        bookNow: "Jetzt anzahlungspflichtig buchen",
+        minStay: "Mindestaufenthalt",
+        nights: "Nächte",
+        discount: "Ersparnis ggü. Kurzzeitpreis (bereits enthalten)",
+        total: "Gesamt",
+        deposit: "Anzahlung",
+        unavailable: "Nicht verfügbar",
+        loading: "Wird geladen...",
+        needsCalculation: "Bitte zuerst den Preis berechnen.",
+        needsNameAndEmail: "Bitte Name und E-Mail-Adresse eingeben, um fortzufahren.",
+        needsName: "Bitte Namen eingeben, um fortzufahren.",
+        needsEmail: "Bitte E-Mail-Adresse eingeben, um fortzufahren.",
+      },
+      en: {
+        checkIn: "Check-in",
+        checkOut: "Check-out",
+        guests: "Guests",
+        name: "Name",
+        email: "Email",
+        calculate: "Calculate price",
+        bookNow: "Book with deposit",
+        minStay: "Minimum stay",
+        nights: "nights",
+        discount: "Savings vs. short-term rate (already included)",
+        total: "Total",
+        deposit: "Deposit",
+        unavailable: "Not available",
+        loading: "Loading...",
+        needsCalculation: "Please calculate the price first.",
+        needsNameAndEmail: "Please enter your name and email address to continue.",
+        needsName: "Please enter your name to continue.",
+        needsEmail: "Please enter your email address to continue.",
+      },
+    };
+    return translations[locale]?.[key] || key;
+  };
+
+  // Re-fetch the real, effective minimum stay whenever the check-in date
+  // changes — Beds24's active rate (which can override the room's base
+  // minimum) may require a different length of stay depending on the season.
+  useEffect(() => {
+    if (!start) return;
+    let cancelled = false;
+    setMinStayLoading(true);
+
+    fetch(`/api/min-stay?apartmentSlug=${apartment.slug}&arrival=${start}`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (!cancelled && typeof data.minStayNights === "number") {
+          setMinStayNights(data.minStayNights);
+          setEnd((currentEnd) =>
+            currentEnd && currentEnd < addDays(start, data.minStayNights) ? "" : currentEnd
+          );
+        }
+      })
+      .catch(() => {
+        /* keep previous value on error */
+      })
+      .finally(() => {
+        if (!cancelled) setMinStayLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [start, apartment.slug]);
+
+  async function calculatePrice() {
+    if (!start || !end) return;
+    setLoading(true);
+    setError("");
+
+    try {
+      const res = await fetch(
+        `/api/availability?apartmentSlug=${apartment.slug}&start=${start}&end=${end}`
+      );
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to calculate price");
+      }
+
+      setPrice(data.price);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+      setPrice(null);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleBooking() {
+    if (!price || !guestName || !guestEmail) {
+      setAttemptedSubmit(true);
+      return;
+    }
+    setAttemptedSubmit(false);
+    setLoading(true);
+    setError("");
+
+    try {
+      const res = await fetch("/api/checkout-session", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          apartmentSlug: apartment.slug,
+          start,
+          end,
+          guestName,
+          guestEmail,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to create checkout session");
+      }
+
+      if (data.url) {
+        router.push(data.url);
+      } else {
+        throw new Error("No checkout URL returned");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-2xl p-6 border border-brand-grey-soft shadow-sm">
+      <h3 className="text-xl font-bold mb-1">
+        {locale === "de" ? "Buchungsanfrage" : "Booking request"}
+      </h3>
+      <p className="text-sm text-brand-grey mb-4">
+        {t("minStay")}:{" "}
+        <span className="font-semibold text-brand-grey-dark">
+          {minStayLoading
+            ? locale === "de"
+              ? "wird geprüft..."
+              : "checking..."
+            : `${minStayNights} ${t("nights")}`}
+        </span>
+      </p>
+
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <div>
+          <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+            {t("checkIn")}
+          </label>
+          <div className="relative">
+            <Calendar className="absolute left-3 top-3 w-4 h-4 text-brand-grey-light" />
+            <input
+              type="date"
+              lang={locale === "de" ? "de-DE" : "en-US"}
+              value={start}
+              onChange={(e) => {
+                setStart(e.target.value);
+                // The checkout date's validity (and the min-stay value shown
+                // below) is re-checked by the useEffect above once we know
+                // the real minimum stay for this new check-in date.
+                setPrice(null);
+              }}
+              className="w-full pl-9 pr-3 py-2 rounded-lg border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
+            />
+          </div>
+          <p className="text-xs text-brand-grey-light mt-1">
+            {start
+              ? new Intl.DateTimeFormat(locale === "de" ? "de-DE" : "en-US", {
+                  dateStyle: "medium",
+                }).format(new Date(`${start}T00:00:00`))
+              : locale === "de"
+              ? "Format: TT.MM.JJJJ"
+              : "Format: MM/DD/YYYY"}
+          </p>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+            {t("checkOut")}
+          </label>
+          <div className="relative">
+            <Calendar className="absolute left-3 top-3 w-4 h-4 text-brand-grey-light" />
+            <input
+              type="date"
+              lang={locale === "de" ? "de-DE" : "en-US"}
+              value={end}
+              min={start ? addDays(start, minStayNights) : undefined}
+              onChange={(e) => {
+                setEnd(e.target.value);
+                setPrice(null);
+              }}
+              className="w-full pl-9 pr-3 py-2 rounded-lg border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
+            />
+          </div>
+          <p className="text-xs text-brand-grey-light mt-1">
+            {end
+              ? new Intl.DateTimeFormat(locale === "de" ? "de-DE" : "en-US", {
+                  dateStyle: "medium",
+                }).format(new Date(`${end}T00:00:00`))
+              : locale === "de"
+              ? "Format: TT.MM.JJJJ"
+              : "Format: MM/DD/YYYY"}
+          </p>
+        </div>
+      </div>
+
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+          {t("guests")}
+        </label>
+        <div className="relative">
+          <Users className="absolute left-3 top-3 w-4 h-4 text-brand-grey-light" />
+          <input
+            type="number"
+            min={1}
+            max={apartment.maxGuests}
+            defaultValue={1}
+            className="w-full pl-9 pr-3 py-2 rounded-lg border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
+          />
+        </div>
+      </div>
+
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+          {t("name")}
+        </label>
+        <input
+          type="text"
+          value={guestName}
+          onChange={(e) => {
+            setGuestName(e.target.value);
+            if (e.target.value) setAttemptedSubmit(false);
+          }}
+          className={`w-full px-3 py-2 rounded-lg border focus:ring-1 outline-none ${
+            attemptedSubmit && !guestName
+              ? "border-red-400 focus:border-red-500 focus:ring-red-400"
+              : "border-brand-grey-soft focus:border-brand-green focus:ring-brand-green"
+          }`}
+        />
+      </div>
+
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+          {t("email")}
+        </label>
+        <input
+          type="email"
+          value={guestEmail}
+          onChange={(e) => {
+            setGuestEmail(e.target.value);
+            if (e.target.value) setAttemptedSubmit(false);
+          }}
+          className={`w-full px-3 py-2 rounded-lg border focus:ring-1 outline-none ${
+            attemptedSubmit && !guestEmail
+              ? "border-red-400 focus:border-red-500 focus:ring-red-400"
+              : "border-brand-grey-soft focus:border-brand-green focus:ring-brand-green"
+          }`}
+        />
+      </div>
+
+      <button
+        onClick={calculatePrice}
+        disabled={!start || !end || loading}
+        className={`w-full mb-4 text-white font-semibold py-3 rounded-full transition-colors disabled:opacity-50 ${
+          attemptedSubmit && !price
+            ? "bg-red-500 hover:bg-red-600 ring-2 ring-red-300"
+            : "bg-brand-grey hover:bg-brand-grey-dark"
+        }`}
+      >
+        {loading ? t("loading") : t("calculate")}
+      </button>
+
+      {price && (
+        <div className="bg-brand-grey-soft rounded-xl p-4 mb-4">
+          <div className="flex justify-between mb-2">
+            <span className="text-brand-grey">
+              {price.nights} {t("nights")}
+            </span>
+            <span className="font-medium">
+              {new Intl.NumberFormat("de-DE", {
+                style: "currency",
+                currency: "EUR",
+              }).format(price.totalAfterDiscount)}
+            </span>
+          </div>
+          {price.discountPercent > 0 && (
+            <div className="flex justify-between mb-2 text-brand-green">
+              <span>{t("discount")}</span>
+              <span>{price.discountPercent}%</span>
+            </div>
+          )}
+          <div className="flex justify-between text-lg font-bold text-brand-grey-dark">
+            <span>{t("deposit")}</span>
+            <span>
+              {new Intl.NumberFormat("de-DE", {
+                style: "currency",
+                currency: "EUR",
+              }).format(price.depositAmount)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {error && (
+        <div className="bg-red-50 text-red-600 rounded-lg p-3 mb-4 text-sm">
+          {error}
+        </div>
+      )}
+
+      <button
+        onClick={handleBooking}
+        disabled={loading}
+        className={`w-full font-semibold py-3 rounded-full transition-colors disabled:opacity-50 ${
+          price && guestName && guestEmail
+            ? "bg-brand-green text-white hover:bg-brand-green-dark"
+            : "bg-brand-grey-soft text-brand-grey-dark hover:bg-brand-grey-soft/70"
+        }`}
+      >
+        {loading ? t("loading") : t("bookNow")}
+      </button>
+
+      {!loading && (!price || !guestName || !guestEmail) && (
+        <p
+          className={`text-lg font-semibold rounded-lg px-4 py-3 mt-3 text-center ${
+            attemptedSubmit
+              ? "bg-red-50 text-red-600 border-2 border-red-300"
+              : "bg-brand-green/10 text-brand-green-dark"
+          }`}
+        >
+          {!price
+            ? t("needsCalculation")
+            : !guestName && !guestEmail
+            ? t("needsNameAndEmail")
+            : !guestName
+            ? t("needsName")
+            : t("needsEmail")}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/components/ui/Hero.tsx b/components/ui/Hero.tsx
new file mode 100644
index 0000000..5eead49
--- /dev/null
+++ b/components/ui/Hero.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import Image from "next/image";
+
+interface HeroProps {
+  title: string;
+  subtitle: string;
+  description: string;
+  cta: string;
+  ctaHref: string;
+}
+
+const heroImages = [
+  { src: "/images/heroshots/MKE_1996.JPG", alt: "BB-Apartment Hero 1" },
+  { src: "/images/heroshots/MKE_1959.JPG", alt: "BB-Apartment Hero 2" },
+  { src: "/images/heroshots/MKE_1974.jpg", alt: "BB-Apartment Hero 3" },
+];
+
+export function Hero({ title, subtitle, description, cta, ctaHref }: HeroProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveIndex((prev) => (prev + 1) % heroImages.length);
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <section className="relative -mt-20 pt-20 h-screen flex items-center justify-center overflow-hidden">
+      <div className="absolute inset-0 z-0">
+        {heroImages.map((image, index) => (
+          <div
+            key={image.src}
+            className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
+              index === activeIndex ? "opacity-100" : "opacity-0"
+            }`}
+          >
+            <Image
+              src={image.src}
+              alt={image.alt}
+              fill
+              className="object-cover"
+              priority={index === 0}
+            />
+          </div>
+        ))}
+        <div className="absolute inset-0 bg-black/20" />
+      </div>
+
+      <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 text-center text-white">
+        <p className="text-lg md:text-xl text-brand-green-light mb-4 font-medium tracking-wide uppercase">
+          {subtitle}
+        </p>
+        <h1 className="text-5xl md:text-7xl font-bold mb-10 text-white tracking-tight">
+          {title}
+        </h1>
+        {description && (
+          <p className="text-lg md:text-2xl text-white/90 mb-10 max-w-3xl mx-auto leading-relaxed">
+            {description}
+          </p>
+        )}
+        <Link
+          href={ctaHref}
+          className="inline-flex items-center gap-2 bg-brand-green text-white font-semibold px-8 py-4 rounded-2xl text-lg hover:bg-brand-green-dark hover:shadow-lg hover:-translate-y-0.5 transition-all"
+        >
+          {cta}
+        </Link>
+      </div>
+
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex gap-2">
+        {heroImages.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => setActiveIndex(index)}
+            className={`w-2.5 h-2.5 rounded-full transition-all ${
+              index === activeIndex
+                ? "bg-white scale-110"
+                : "bg-white/50 hover:bg-white/80"
+            }`}
+            aria-label={`Zum Hero-Bild ${index + 1} wechseln`}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/components/ui/HouseCard.tsx b/components/ui/HouseCard.tsx
new file mode 100644
index 0000000..b54df0f
--- /dev/null
+++ b/components/ui/HouseCard.tsx
@@ -0,0 +1,98 @@
+import Link from "next/link";
+import Image from "next/image";
+import { House } from "@/src/config/apartments";
+import { MapPin, Home, ArrowRight, Wind, Car, Bus, Sofa } from "lucide-react";
+
+interface HouseCardProps {
+  house: House;
+  locale: string;
+}
+
+export function HouseCard({ house, locale }: HouseCardProps) {
+  const displayName = locale === "de" ? house.name : house.nameEn;
+  const displayDescription =
+    locale === "de" ? house.description : house.descriptionEn;
+  const displayCountry = locale === "de" ? house.country : house.countryEn;
+
+  return (
+    <div className="group h-full bg-white rounded-3xl overflow-hidden shadow-sm border border-brand-grey-soft hover:shadow-2xl hover:shadow-brand-grey-dark/10 hover:-translate-y-2 transition-all duration-300 flex flex-col">
+      <div className="relative h-72 overflow-hidden flex-shrink-0">
+        <Image
+          src={house.images[0] || "/images/placeholder.jpg"}
+          alt={displayName}
+          fill
+          className="object-cover group-hover:scale-105 transition-transform duration-500"
+        />
+        <div className="absolute top-4 left-4">
+          <span className="inline-flex items-center gap-1.5 bg-white/90 backdrop-blur-sm text-brand-green-dark text-sm font-semibold px-3 py-1.5 rounded-full">
+            <Home className="w-4 h-4" />
+            {house.apartments.length} {locale === "de" ? "Apartments" : "Apartments"}
+          </span>
+        </div>
+      </div>
+      <div className="p-7 flex flex-col flex-grow">
+        <h3 className="text-2xl font-bold mb-3 text-brand-grey-dark group-hover:text-brand-green transition-colors">
+          {displayName}
+        </h3>
+        <div className="flex flex-wrap gap-2 mb-4">
+          {house.id === "herdweg" ? (
+            <>
+              <span className="inline-flex items-center gap-2 text-sm font-bold text-white bg-brand-green px-3 py-1.5 rounded-full shadow-sm">
+                <Car className="w-5 h-5 flex-shrink-0" />
+                <div className="flex flex-col leading-tight">
+                  <span>
+                    {locale === "de" ? "Gleiche Straße wie Panzer Kaserne" : "Same Street as Panzer Kaserne"}
+                  </span>
+                  <span className="text-xs font-medium text-white/85">
+                    {locale === "de" ? "Kein Abbiegen nötig" : "Zero turns needed"}
+                  </span>
+                </div>
+              </span>
+              <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
+                <Wind className="w-4 h-4" />
+                {locale === "de" ? "Klimaanlage" : "Air conditioning"}
+              </span>
+            </>
+          ) : (
+            <>
+              <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
+                <MapPin className="w-4 h-4" />
+                {locale === "de" ? "Nahe Stadtzentrum" : "Close to city center"}
+              </span>
+              <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
+                <Wind className="w-4 h-4" />
+                {locale === "de" ? "Klimaanlage" : "Air conditioning"}
+              </span>
+            </>
+          )}
+          {house.id === "herdweg" && (
+            <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
+              <Bus className="w-4 h-4" />
+              {locale === "de" ? "Bus in der Nähe" : "Bus nearby"}
+            </span>
+          )}
+          <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
+            <Sofa className="w-4 h-4" />
+            {locale === "de" ? "Vollmöbliert" : "Fully furnished"}
+          </span>
+        </div>
+        <p className="text-brand-grey mb-5 leading-relaxed flex-grow">
+          {displayDescription}
+        </p>
+        <div className="flex items-center gap-2 text-sm text-brand-grey mb-6">
+          <MapPin className="w-4 h-4 text-brand-green" />
+          <span>
+            {house.city}, {displayCountry}
+          </span>
+        </div>
+        <Link
+          href={`/${locale}/houses/${house.slug}`}
+          className="mt-auto inline-flex items-center justify-center gap-2 w-full bg-brand-green text-white font-semibold px-6 py-3.5 rounded-2xl hover:bg-brand-green-dark hover:shadow-lg transition-all"
+        >
+          {locale === "de" ? "Mehr erfahren" : "Learn more"}
+          <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/HouseHighlights.tsx b/components/ui/HouseHighlights.tsx
new file mode 100644
index 0000000..198d411
--- /dev/null
+++ b/components/ui/HouseHighlights.tsx
@@ -0,0 +1,96 @@
+import { Wind, Car, Bus, MapPin, Sofa } from "lucide-react";
+import { House } from "@/src/config/apartments";
+
+interface HouseHighlightsProps {
+  house: House;
+  locale: string;
+}
+
+export function HouseHighlights({ house, locale }: HouseHighlightsProps) {
+  const isHerdweg = house.id === "herdweg";
+
+  const highlights = isHerdweg
+    ? [
+        {
+          icon: Car,
+          title: locale === "de" ? "Gleiche Straße wie Panzer Kaserne" : "Same Street as Panzer Kaserne",
+          text: locale === "de" ? "Kein Abbiegen nötig" : "Zero turns needed",
+          highlight: true,
+        },
+        {
+          icon: Bus,
+          title: locale === "de" ? "Bushaltestelle" : "Bus stop",
+          text: locale === "de" ? "In der Nähe" : "Nearby",
+        },
+        {
+          icon: Wind,
+          title: locale === "de" ? "Klimaanlage" : "Air conditioning",
+          text: locale === "de" ? "In den meisten Apartments" : "In most apartments",
+        },
+        {
+          icon: Sofa,
+          title: locale === "de" ? "Vollmöbliert" : "Fully furnished",
+          text: locale === "de" ? "Alle Apartments" : "All apartments",
+        },
+      ]
+    : [
+        {
+          icon: MapPin,
+          title: locale === "de" ? "Stadtzentrum" : "City center",
+          text: locale === "de" ? "Nahe gelegen" : "Close by",
+        },
+        {
+          icon: Car,
+          title: locale === "de" ? "Daimler Werk Sindelfingen" : "Daimler plant Sindelfingen",
+          text: locale === "de" ? "Leicht erreichbar" : "Easy to reach",
+        },
+        {
+          icon: Wind,
+          title: locale === "de" ? "Klimaanlage" : "Air conditioning",
+          text: locale === "de" ? "In allen Apartments" : "In all apartments",
+        },
+        {
+          icon: Sofa,
+          title: locale === "de" ? "Vollmöbliert" : "Fully furnished",
+          text: locale === "de" ? "Alle Apartments" : "All apartments",
+        },
+      ];
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 mb-12">
+      {highlights.map((highlight, index) => {
+        const Icon = highlight.icon;
+        return (
+          <div
+            key={index}
+            className={`flex flex-col items-center text-center gap-4 p-6 rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all ${
+              highlight.highlight
+                ? "bg-brand-green border-2 border-brand-green text-white"
+                : "bg-white border-2 border-brand-green/20"
+            }`}
+          >
+            <div
+              className={`p-4 rounded-2xl shadow-sm ${
+                highlight.highlight ? "bg-white text-brand-green" : "bg-brand-green text-white"
+              }`}
+            >
+              <Icon className="w-9 h-9" />
+            </div>
+            <div>
+              <p
+                className={`font-bold text-xl leading-tight mb-1 ${
+                  highlight.highlight ? "text-white" : "text-brand-grey-dark"
+                }`}
+              >
+                {highlight.title}
+              </p>
+              <p className={`text-base font-medium ${highlight.highlight ? "text-white/90" : "text-brand-grey"}`}>
+                {highlight.text}
+              </p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/ui/ImageGallery.tsx b/components/ui/ImageGallery.tsx
new file mode 100644
index 0000000..a8291bf
--- /dev/null
+++ b/components/ui/ImageGallery.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface ImageGalleryProps {
+  images: string[];
+  alt: string;
+}
+
+export function ImageGallery({ images, alt }: ImageGalleryProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const hasImages = images.length > 0;
+
+  const handlePrevious = () => {
+    setActiveIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+  };
+
+  const handleNext = () => {
+    setActiveIndex((prev) => (prev + 1) % images.length);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="relative h-80 md:h-[500px] rounded-2xl overflow-hidden bg-brand-grey-soft">
+        {hasImages && (
+          <Image
+            src={images[activeIndex]}
+            alt={`${alt} - ${activeIndex + 1}`}
+            fill
+            className="object-cover"
+          />
+        )}
+        {images.length > 1 && (
+          <>
+            <button
+              onClick={handlePrevious}
+              className="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 rounded-full hover:bg-white transition-colors"
+              aria-label="Vorheriges Bild"
+            >
+              <ChevronLeft className="w-5 h-5 text-brand-grey-dark" />
+            </button>
+            <button
+              onClick={handleNext}
+              className="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 rounded-full hover:bg-white transition-colors"
+              aria-label="Nächstes Bild"
+            >
+              <ChevronRight className="w-5 h-5 text-brand-grey-dark" />
+            </button>
+            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
+              {images.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => setActiveIndex(index)}
+                  className={`w-2 h-2 rounded-full transition-all ${
+                    index === activeIndex
+                      ? "bg-white scale-110"
+                      : "bg-white/50 hover:bg-white/80"
+                  }`}
+                  aria-label={`Zu Bild ${index + 1} wechseln`}
+                />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+
+      {images.length > 1 && (
+        <div className="flex gap-3 overflow-x-auto pb-2">
+          {images.map((image, index) => (
+            <button
+              key={image}
+              onClick={() => setActiveIndex(index)}
+              className={`relative w-20 h-20 flex-shrink-0 rounded-xl overflow-hidden ${
+                index === activeIndex
+                  ? "ring-2 ring-brand-green"
+                  : "ring-2 ring-transparent opacity-70 hover:opacity-100"
+              }`}
+            >
+              <Image
+                src={image}
+                alt={`${alt} - Vorschau ${index + 1}`}
+                fill
+                className="object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/ui/Impressions.tsx b/components/ui/Impressions.tsx
new file mode 100644
index 0000000..1624972
--- /dev/null
+++ b/components/ui/Impressions.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+
+const tilePools = [
+  [
+    "/images/houses/herdweg/impressions/11.png",
+    "/images/houses/herdweg/impressions/MKE_1986.JPG",
+    "/images/houses/herdweg/impressions/MKE_2042.JPG",
+  ],
+  [
+    "/images/houses/herdweg/impressions/MKE_1974.jpg",
+    "/images/houses/herdweg/impressions/MKE_2027.jpg",
+  ],
+  [
+    "/images/houses/herdweg/impressions/MKE_2030.jpg",
+    "/images/houses/herdweg/impressions/MKE_2034.JPG",
+  ],
+  [
+    "/images/houses/herdweg/impressions/MKE_2037.jpg",
+    "/images/houses/herdweg/impressions/MKE_2038.JPG",
+  ],
+];
+
+function nextFromPool(pool: string[], exclude: string) {
+  const filtered = pool.filter((src) => src !== exclude);
+  if (filtered.length === 0) return pool[0];
+  return filtered[Math.floor(Math.random() * filtered.length)];
+}
+
+interface ImpressionsTileProps {
+  pool: string[];
+  initialSrc: string;
+  className?: string;
+}
+
+function ImpressionsTile({ pool, initialSrc, className = "" }: ImpressionsTileProps) {
+  const [current, setCurrent] = useState(initialSrc);
+  const [visible, setVisible] = useState(true);
+
+  const rotate = useCallback(() => {
+    setVisible(false);
+    setTimeout(() => {
+      setCurrent((prev) => nextFromPool(pool, prev));
+      setVisible(true);
+    }, 700);
+  }, [pool]);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+
+    const schedule = () => {
+      const delay = 6000 + Math.random() * 6000;
+      timeout = setTimeout(() => {
+        rotate();
+        schedule();
+      }, delay);
+    };
+
+    schedule();
+    return () => clearTimeout(timeout);
+  }, [rotate]);
+
+  return (
+    <div
+      className={`relative overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow ${className}`}
+    >
+      <Image
+        src={current}
+        alt="Impression"
+        fill
+        className={`object-cover transition-all duration-700 ease-in-out ${
+          visible
+            ? "opacity-100 translate-x-0"
+            : "opacity-0 -translate-x-8"
+        }`}
+        sizes="(max-width: 768px) 100vw, 33vw"
+      />
+    </div>
+  );
+}
+
+interface ImpressionsProps {
+  title: string;
+  subtitle: string;
+}
+
+export function Impressions({ title, subtitle }: ImpressionsProps) {
+  return (
+    <section className="py-24 bg-brand-grey-soft/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <p className="text-brand-green font-semibold mb-2 uppercase tracking-wider text-sm">
+            {subtitle}
+          </p>
+          <h2 className="text-4xl font-bold mb-4 text-brand-grey-dark">
+            {title}
+          </h2>
+          <div className="w-20 h-1 bg-brand-green mx-auto rounded-full" />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[220px]">
+          <ImpressionsTile
+            pool={tilePools[0]}
+            initialSrc={tilePools[0][0]}
+            className="md:col-span-2 md:row-span-2"
+          />
+          <ImpressionsTile pool={tilePools[1]} initialSrc={tilePools[1][0]} />
+          <ImpressionsTile pool={tilePools[2]} initialSrc={tilePools[2][0]} />
+          <ImpressionsTile
+            pool={tilePools[3]}
+            initialSrc={tilePools[3][0]}
+            className="md:col-span-3"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/ui/NoAvailabilityContact.tsx b/components/ui/NoAvailabilityContact.tsx
new file mode 100644
index 0000000..a7d7bd4
--- /dev/null
+++ b/components/ui/NoAvailabilityContact.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useState } from "react";
+import { Mail, Send, CheckCircle2 } from "lucide-react";
+
+interface NoAvailabilityContactProps {
+  locale: string;
+  /** e.g. the searched arrival/departure dates, sent along for context. */
+  context?: string;
+}
+
+export function NoAvailabilityContact({ locale, context }: NoAvailabilityContactProps) {
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [sent, setSent] = useState(false);
+
+  const isDe = locale === "de";
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email || !message) return;
+    setLoading(true);
+    setError("");
+
+    try {
+      const res = await fetch("/api/contact", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, message, context }),
+      });
+
+      if (!res.ok) {
+        throw new Error("Failed to send message");
+      }
+
+      setSent(true);
+    } catch {
+      setError(
+        isDe
+          ? "Ihre Nachricht konnte nicht gesendet werden. Bitte versuchen Sie es erneut oder schreiben Sie uns direkt an info@bb-apartment.de."
+          : "Your message could not be sent. Please try again or email us directly at info@bb-apartment.de."
+      );
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (sent) {
+    return (
+      <div className="bg-brand-green/10 border-2 border-brand-green/30 rounded-2xl p-8 text-center max-w-xl mx-auto">
+        <CheckCircle2 className="w-10 h-10 text-brand-green mx-auto mb-3" />
+        <h3 className="text-xl font-bold text-brand-grey-dark mb-2">
+          {isDe ? "Nachricht gesendet!" : "Message sent!"}
+        </h3>
+        <p className="text-brand-grey">
+          {isDe
+            ? "Danke für Ihre Anfrage. Wir melden uns so schnell wie möglich bei Ihnen."
+            : "Thank you for reaching out. We'll get back to you as soon as possible."}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white border-2 border-brand-grey-soft rounded-2xl p-8 max-w-xl mx-auto">
+      <div className="flex items-center gap-3 mb-2">
+        <Mail className="w-6 h-6 text-brand-green" />
+        <h3 className="text-xl font-bold text-brand-grey-dark">
+          {isDe ? "Kein passendes Apartment gefunden?" : "Can't find what you're looking for?"}
+        </h3>
+      </div>
+      <p className="text-brand-grey mb-6">
+        {isDe
+          ? "Schreiben Sie uns kurz Ihre Wunschtermine und Anforderungen — wir melden uns persönlich bei Ihnen, auch für individuelle Anfragen oder Wartelisten."
+          : "Tell us your preferred dates and requirements — we'll get back to you personally, including for custom requests or waitlists."}
+      </p>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+            {isDe ? "E-Mail" : "Email"}
+          </label>
+          <input
+            type="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full px-4 py-3 rounded-xl border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-brand-grey-dark mb-1">
+            {isDe ? "Ihre Nachricht" : "Your message"}
+          </label>
+          <textarea
+            required
+            rows={5}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder={
+              isDe
+                ? "z.B. gewünschter Zeitraum, Anzahl Personen, besondere Wünsche..."
+                : "e.g. preferred dates, number of guests, special requests..."
+            }
+            className="w-full px-4 py-3 rounded-xl border border-brand-grey-soft focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none"
+          />
+        </div>
+
+        {error && (
+          <div className="bg-red-50 text-red-600 rounded-lg p-3 text-sm">{error}</div>
+        )}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="inline-flex items-center justify-center gap-2 w-full bg-brand-green text-white font-semibold px-8 py-4 rounded-full hover:bg-brand-green-dark transition-colors disabled:opacity-50"
+        >
+          {loading ? (isDe ? "Wird gesendet..." : "Sending...") : isDe ? "Nachricht senden" : "Send message"}
+          <Send className="w-4 h-4" />
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..2ca6653
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,70 @@
+version: "3.8"
+
+services:
+  postgres:
+    image: postgres:16-alpine
+    container_name: bb-apartment-postgres
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER:-bbapartment}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-changeme}
+      POSTGRES_DB: ${POSTGRES_DB:-bb_apartment}
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    networks:
+      - bb-apartment-network
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-bbapartment} -d ${POSTGRES_DB:-bb_apartment}"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  nextjs:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: bb-apartment-nextjs
+    env_file:
+      - .env.local
+    environment:
+      DATABASE_URL: postgresql://${POSTGRES_USER:-bbapartment}:${POSTGRES_PASSWORD:-changeme}@postgres:5432/${POSTGRES_DB:-bb_apartment}
+    ports:
+      - "${NEXTJS_HOST_PORT:-3000}:3000"
+    depends_on:
+      postgres:
+        condition: service_healthy
+    networks:
+      - bb-apartment-network
+
+  n8n:
+    image: n8nio/n8n:latest
+    container_name: bb-apartment-n8n
+    env_file:
+      - .env.local
+    environment:
+      - N8N_BASIC_AUTH_ACTIVE=true
+      - N8N_BASIC_AUTH_USER=${N8N_BASIC_AUTH_USER:-admin}
+      - N8N_BASIC_AUTH_PASSWORD=${N8N_BASIC_AUTH_PASSWORD:-changeme}
+      - WEBHOOK_URL=${N8N_WEBHOOK_URL:-https://n8n.bb-apartment.de/}
+      - DB_TYPE=postgresdb
+      - DB_POSTGRESDB_HOST=postgres
+      - DB_POSTGRESDB_PORT=5432
+      - DB_POSTGRESDB_DATABASE=${POSTGRES_DB:-bb_apartment}
+      - DB_POSTGRESDB_USER=${POSTGRES_USER:-bbapartment}
+      - DB_POSTGRESDB_PASSWORD=${POSTGRES_PASSWORD:-changeme}
+    volumes:
+      - n8n-data:/home/node/.n8n
+    ports:
+      - "${N8N_HOST_PORT:-5678}:5678"
+    depends_on:
+      postgres:
+        condition: service_healthy
+    networks:
+      - bb-apartment-network
+
+volumes:
+  postgres-data:
+  n8n-data:
+
+networks:
+  bb-apartment-network:
+    driver: bridge
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..be3a6e8
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,29 @@
+declare module "*.css" {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.webp" {
+  const content: string;
+  export default content;
+}
diff --git a/i18n.ts b/i18n.ts
new file mode 100644
index 0000000..d52c13d
--- /dev/null
+++ b/i18n.ts
@@ -0,0 +1,17 @@
+import { getRequestConfig } from "next-intl/server";
+import { notFound } from "next/navigation";
+
+export const locales = ["de", "en"] as const;
+export type Locale = (typeof locales)[number];
+export const defaultLocale: Locale = "de";
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  const locale = await requestLocale;
+
+  if (!locale || !locales.includes(locale as Locale)) notFound();
+
+  return {
+    locale: locale as string,
+    messages: (await import(`./messages/${locale}.json`)).default,
+  };
+});
diff --git a/messages/de.json b/messages/de.json
new file mode 100644
index 0000000..2adfeaa
--- /dev/null
+++ b/messages/de.json
@@ -0,0 +1,115 @@
+{
+  "metadata": {
+    "title": "BB-Apartment – Willkommen zu Hause",
+    "description": "Moderne Apartments für längere Aufenthalte in Böblingen. 8 Apartments in 2 Häusern. Ideal für Ingenieure und Angehörige der US Army."
+  },
+  "navigation": {
+    "home": "Startseite",
+    "houses": "Häuser",
+    "contact": "Kontakt",
+    "bookNow": "Jetzt buchen"
+  },
+  "home": {
+    "hero": {
+      "title": "BB-Apartment",
+      "subtitle": "Willkommen zu Hause",
+      "description": "",
+      "cta": "Apartments entdecken"
+    },
+    "houses": {
+      "title": "Unsere Häuser",
+      "subtitle": "Wählen Sie zwischen zwei Standorten in Böblingen"
+    },
+    "impressions": {
+      "title": "Impressionen",
+      "subtitle": "Einblicke in BB-Apartment"
+    },
+    "features": {
+      "title": "Warum BB-Apartment?",
+      "longStay": "Langzeitaufenthalte (1–12+ Monate)",
+      "location": "US-Militärbasen & Firmen",
+      "airConditioning": "Klimaanlage",
+      "furnished": "Vollmöbliert & sofort bezugsfertig",
+      "payment": "Flexible Zahlung per Karte oder Rechnung"
+    },
+    "quickStats": {
+      "apartments": {
+        "title": "8 Apartments",
+        "subtitle": "in 2 Häusern in Böblingen"
+      },
+      "stay": {
+        "title": "Langzeitaufenthalte",
+        "subtitle": "ab 20 Nächten buchbar"
+      }
+    },
+    "ctaSection": {
+      "title": "Steht Ihre Versetzung nach Stuttgart an oder planen Sie einen längeren Geschäftsaufenthalt?",
+      "description": "Finden Sie Ihre Premium-Home-Base in Böblingen. Fordern Sie noch heute Ihr maßgeschneidertes Angebot an.",
+      "cta": "Angebot anfordern"
+    },
+    "bookingBanner": {
+      "arrival": "Anreise",
+      "stayMonths": "Aufenthaltsmonate",
+      "checkAvailability": "Verfügbarkeit prüfen",
+      "bookNow": "Jetzt buchen"
+    }
+  },
+  "houses": {
+    "overview": "Übersicht",
+    "apartments": "Apartments",
+    "viewApartment": "Apartment ansehen",
+    "book": "Buchen",
+    "search": {
+      "arrival": "Anreise",
+      "stayMonths": "Aufenthaltsmonate",
+      "checkAvailability": "Verfügbarkeit prüfen",
+      "resultsTitle": "Verfügbare Apartments",
+      "resultsSubtitle": "Ergebnisse für Ihre Anreise",
+      "available": "Verfügbar",
+      "notAvailable": "Nicht verfügbar",
+      "minStayNotMet": "Mindestaufenthalt nicht erreicht",
+      "bookThis": "Jetzt anfragen",
+      "perNight": "pro Nacht",
+      "showAllHouses": "Alle Häuser ansehen",
+      "noResults": "Für diesen Zeitraum ist derzeit kein Apartment verfügbar. Bitte versuchen Sie andere Daten."
+    }
+  },
+  "apartment": {
+    "from": "ab",
+    "perNight": "pro Nacht",
+    "minStay": "Mindestaufenthalt",
+    "nights": "Nächte",
+    "guests": "Gäste",
+    "features": "Ausstattung",
+    "gallery": "Galerie",
+    "location": "Lage",
+    "bookNow": "Jetzt anfragen",
+    "notFound": "Apartment nicht gefunden"
+  },
+  "contact": {
+    "title": "Kontakt",
+    "description": "Schreiben Sie uns – wir melden uns schnellstmöglich.",
+    "name": "Name",
+    "email": "E-Mail",
+    "message": "Nachricht",
+    "send": "Senden",
+    "phone": "Telefon"
+  },
+  "footer": {
+    "rights": "Alle Rechte vorbehalten.",
+    "imprint": "Impressum",
+    "privacy": "Datenschutz",
+    "welcome": "Willkommen zu Hause. Komfortable Apartments für längere Aufenthalte in Böblingen.",
+    "brandTitle": "BB-Apartment",
+    "locationsTitle": "Standorte",
+    "herdwegName": "Herdweg",
+    "herdwegAddress": "Herdweg 71, 71032 Böblingen",
+    "schoenaicherName": "Schönaicher Straße",
+    "schoenaicherAddress": "Schönaicher Straße 26, 71032 Böblingen",
+    "contactTitle": "Kontakt",
+    "email": "info@bb-apartment.de",
+    "phone": "+49 (0) 7031 7631132",
+    "web": "www.BB-Apartment.de",
+    "legalTitle": "Rechtliches"
+  }
+}
diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 0000000..3a6d061
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,115 @@
+{
+  "metadata": {
+    "title": "BB-Apartment – Welcome Home",
+    "description": "Modern apartments for longer stays in Böblingen. 8 apartments in 2 houses. Ideal for engineers and US Army affiliates."
+  },
+  "navigation": {
+    "home": "Home",
+    "houses": "Houses",
+    "contact": "Contact",
+    "bookNow": "Book now"
+  },
+  "home": {
+    "hero": {
+      "title": "BB-Apartment",
+      "subtitle": "Welcome Home",
+      "description": "",
+      "cta": "Discover apartments"
+    },
+    "houses": {
+      "title": "Our Houses",
+      "subtitle": "Choose between two locations in Böblingen"
+    },
+    "impressions": {
+      "title": "Impressions",
+      "subtitle": "A glimpse of BB-Apartment"
+    },
+    "features": {
+      "title": "Why BB-Apartment?",
+      "longStay": "Extended Stays (1–12+ Months)",
+      "location": "US Military Bases & Corporate",
+      "airConditioning": "Air conditioning",
+      "furnished": "Fully furnished & ready to move in",
+      "payment": "Flexible Payment by Card or invoice"
+    },
+    "quickStats": {
+      "apartments": {
+        "title": "8 Apartments",
+        "subtitle": "in 2 houses in Böblingen"
+      },
+      "stay": {
+        "title": "Long-term stays",
+        "subtitle": "bookable from 20 nights"
+      }
+    },
+    "ctaSection": {
+      "title": "PCSing to Stuttgart or traveling for business?",
+      "description": "Find your premium home base in Böblingen. Request your custom quote today.",
+      "cta": "Request a Quote"
+    },
+    "bookingBanner": {
+      "arrival": "Arrival",
+      "stayMonths": "Stay months",
+      "checkAvailability": "Check availability",
+      "bookNow": "Book now"
+    }
+  },
+  "houses": {
+    "overview": "Overview",
+    "apartments": "Apartments",
+    "viewApartment": "View apartment",
+    "book": "Book",
+    "search": {
+      "arrival": "Arrival",
+      "stayMonths": "Stay months",
+      "checkAvailability": "Check availability",
+      "resultsTitle": "Available Apartments",
+      "resultsSubtitle": "Results for your arrival",
+      "available": "Available",
+      "notAvailable": "Not available",
+      "minStayNotMet": "Minimum stay not met",
+      "bookThis": "Request now",
+      "perNight": "per night",
+      "showAllHouses": "View all houses",
+      "noResults": "No apartments are available for this period right now. Please try different dates."
+    }
+  },
+  "apartment": {
+    "from": "from",
+    "perNight": "per night",
+    "minStay": "Minimum stay",
+    "nights": "nights",
+    "guests": "guests",
+    "features": "Amenities",
+    "gallery": "Gallery",
+    "location": "Location",
+    "bookNow": "Request now",
+    "notFound": "Apartment not found"
+  },
+  "contact": {
+    "title": "Contact",
+    "description": "Write us – we will get back to you as soon as possible.",
+    "name": "Name",
+    "email": "Email",
+    "message": "Message",
+    "send": "Send",
+    "phone": "Phone"
+  },
+  "footer": {
+    "rights": "All rights reserved.",
+    "imprint": "Imprint",
+    "privacy": "Privacy",
+    "welcome": "Welcome home. Comfortable apartments for longer stays in Böblingen.",
+    "brandTitle": "BB-Apartment",
+    "locationsTitle": "Locations",
+    "herdwegName": "Herdweg",
+    "herdwegAddress": "Herdweg 71, 71032 Böblingen",
+    "schoenaicherName": "Schönaicher Straße",
+    "schoenaicherAddress": "Schönaicher Straße 26, 71032 Böblingen",
+    "contactTitle": "Contact",
+    "email": "info@bb-apartment.de",
+    "phone": "+49 (0)7031 7631132",
+    "web": "www.BB-Apartment.de",
+    "legalTitle": "Legal"
+  }
+}
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..4fb64f0
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,12 @@
+import createMiddleware from "next-intl/middleware";
+import { locales, defaultLocale } from "./i18n";
+
+export default createMiddleware({
+  locales,
+  defaultLocale,
+  localePrefix: "always",
+});
+
+export const config = {
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};
diff --git a/next.config.mjs b/next.config.mjs
index 4678774..aaff793 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,14 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+import createNextIntlPlugin from "next-intl/plugin";
 
-export default nextConfig;
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "standalone",
+  images: {
+    unoptimized: true,
+  },
+  allowedDevOrigins: ["127.0.0.1"],
+};
+
+const withNextIntl = createNextIntlPlugin("./i18n.ts");
+
+export default withNextIntl(nextConfig);
diff --git a/package-lock.json b/package-lock.json
index b0899e3..5fa2a81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,19 @@
       "name": "bb-apartment-website",
       "version": "0.1.0",
       "dependencies": {
+        "@prisma/client": "^5.22.0",
+        "lucide-react": "^0.460.0",
         "next": "14.2.35",
+        "next-intl": "^3.26.5",
+        "nodemailer": "^9.0.5",
+        "prisma": "^5.22.0",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "stripe": "^22.4.0"
       },
       "devDependencies": {
         "@types/node": "^20",
+        "@types/nodemailer": "^8.0.1",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "eslint": "^8",
@@ -133,6 +140,66 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.6.tgz",
+      "integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/intl-localematcher": "0.6.2",
+        "decimal.js": "^10.4.3",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/ecma402-abstract/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.2.tgz",
+      "integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
+      "integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.4.tgz",
+      "integrity": "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/icu-skeleton-parser": "1.8.16",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.16.tgz",
+      "integrity": "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz",
+      "integrity": "sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -498,6 +565,69 @@
         "node": ">=14"
       }
     },
+    "node_modules/@prisma/client": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.22.0.tgz",
+      "integrity": "sha512-M0SVXfyHnQREBKxCgyo7sffrKttwE6R8PMq330MIUF0pTwjUhLbW84pFDlf06B27XyCR++VtjugEnIHdr07SVA==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=16.13"
+      },
+      "peerDependencies": {
+        "prisma": "*"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/debug": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.22.0.tgz",
+      "integrity": "sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/engines": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.22.0.tgz",
+      "integrity": "sha512-UNjfslWhAt06kVL3CjkuYpHAWSO6L4kDCVPegV6itt7nD1kSJavd3vhgAEhjglLJJKEdJ7oIqDJ+yHk6qO8gPA==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "5.22.0",
+        "@prisma/engines-version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
+        "@prisma/fetch-engine": "5.22.0",
+        "@prisma/get-platform": "5.22.0"
+      }
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2.tgz",
+      "integrity": "sha512-2PTmxFR2yHW/eB3uqWtcgRcgAbG1rwG9ZriSvQw+nnb7c4uCr3RAcGMb6/zfE88SKlC1Nj2ziUvc96Z379mHgQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/fetch-engine": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.22.0.tgz",
+      "integrity": "sha512-bkrD/Mc2fSvkQBV5EpoFcZ87AvOgDxbG99488a5cexp5Ccny+UM6MAe/UFkUC0wLYD9+9befNOqGiIJhhq+HbA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "5.22.0",
+        "@prisma/engines-version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
+        "@prisma/get-platform": "5.22.0"
+      }
+    },
+    "node_modules/@prisma/get-platform": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.22.0.tgz",
+      "integrity": "sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "5.22.0"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -550,12 +680,22 @@
       "version": "20.19.43",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.43.tgz",
       "integrity": "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/nodemailer": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-8.0.1.tgz",
+      "integrity": "sha512-PxpaInm8V1JQDd4j0ds5HfvWQk8JupS1C0Picb96QJsrrRDjBH+DlK7L4ZdNSqNULhiZRQHc40nLVShaGxXAMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -1867,6 +2007,12 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "license": "MIT"
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2778,7 +2924,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -3200,6 +3345,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intl-messageformat": {
+      "version": "10.7.18",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.18.tgz",
+      "integrity": "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/icu-messageformat-parser": "2.11.4",
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -3897,6 +4054,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/lucide-react": {
+      "version": "0.460.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz",
+      "integrity": "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4024,6 +4190,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/next": {
       "version": "14.2.35",
       "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz",
@@ -4074,6 +4249,27 @@
         }
       }
     },
+    "node_modules/next-intl": {
+      "version": "3.26.5",
+      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-3.26.5.tgz",
+      "integrity": "sha512-EQlCIfY0jOhRldiFxwSXG+ImwkQtDEfQeSOEQp6ieAGSLWGlgjdb/Ck/O7wMfC430ZHGeUKVKax8KGusTPKCgg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "^0.5.4",
+        "negotiator": "^1.0.0",
+        "use-intl": "^3.26.5"
+      },
+      "peerDependencies": {
+        "next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -4131,6 +4327,15 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/nodemailer": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-9.0.5.tgz",
+      "integrity": "sha512-wvjiKvjczmsN7U/8006JOdXubgBk2XFAbioDMbT+sM7cPs0QrhJTa6KBRX7P5REGGkDcLUz/EarWidb8G8C1jQ==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4664,6 +4869,25 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prisma": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.22.0.tgz",
+      "integrity": "sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/engines": "5.22.0"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=16.13"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.3"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5434,6 +5658,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stripe": {
+      "version": "22.4.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-22.4.0.tgz",
+      "integrity": "sha512-LVJ+tcSYeqOSnXr3i+Kz2tZ7y0crLLdP2uwD/4wccrmEVyn0g/Heo0pF7as7rxS/sOjJzrb1lxgZY0Y0Dx1pSA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -5837,7 +6078,7 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unrs-resolver": {
@@ -5888,6 +6129,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-intl": {
+      "version": "3.26.5",
+      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-3.26.5.tgz",
+      "integrity": "sha512-OdsJnC/znPvHCHLQH/duvQNXnP1w0hPfS+tkSi3mAbfjYBGh4JnyfdwkQBfIVf7t8gs9eSX/CntxUMvtKdG2MQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "^2.2.0",
+        "intl-messageformat": "^10.5.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 4dcdacc..dbe264f 100644
--- a/package.json
+++ b/package.json
@@ -9,18 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@prisma/client": "^5.22.0",
+    "lucide-react": "^0.460.0",
+    "next": "14.2.35",
+    "next-intl": "^3.26.5",
+    "nodemailer": "^9.0.5",
+    "prisma": "^5.22.0",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.35"
+    "stripe": "^22.4.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
+    "@types/nodemailer": "^8.0.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.35",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.35"
+    "typescript": "^5"
   }
 }
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
new file mode 100644
index 0000000..3f612ab
--- /dev/null
+++ b/prisma/schema.prisma
@@ -0,0 +1,65 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Booking {
+  id              String   @id @default(cuid())
+  bookingReference String  @unique
+  apartmentSlug   String
+  houseId         String
+  beds24PropertyId String
+  beds24RoomId    String
+  guestEmail      String
+  guestName       String
+  checkIn         DateTime
+  checkOut        DateTime
+  nights          Int
+  totalAmount     Decimal  @db.Decimal(10, 2)
+  depositAmount   Decimal  @db.Decimal(10, 2)
+  currency        String   @default("EUR")
+  status          String   @default("pending") // pending, deposit_paid, confirmed, cancelled
+  
+  // Stripe mapping (per house account)
+  stripeAccountId String
+  stripeCustomerId String?
+  stripeCheckoutSessionId String?
+  stripePaymentIntentId String?
+  
+  createdAt       DateTime @default(now())
+  updatedAt       DateTime @updatedAt
+  
+  invoices        Invoice[]
+}
+
+model Invoice {
+  id              String   @id @default(cuid())
+  bookingId       String
+  booking         Booking  @relation(fields: [bookingId], references: [id], onDelete: Cascade)
+  
+  invoiceNumber   String   @unique
+  amount          Decimal  @db.Decimal(10, 2)
+  currency        String   @default("EUR")
+  dueDate         DateTime
+  status          String   @default("pending") // pending, paid, overdue, cancelled
+  
+  // Stripe invoice mapping
+  stripeInvoiceId String?
+  stripeInvoiceUrl String?
+  
+  createdAt       DateTime @default(now())
+  updatedAt       DateTime @updatedAt
+}
+
+model StripeEvent {
+  id              String   @id @default(cuid())
+  eventId         String   @unique
+  accountId       String
+  type            String
+  payload         String
+  processedAt     DateTime @default(now())
+}
diff --git a/public/images/cta-bg.jpg b/public/images/cta-bg.jpg
new file mode 100644
index 0000000..e86ead3
Binary files /dev/null and b/public/images/cta-bg.jpg differ
diff --git a/public/images/hero-bg.jpg b/public/images/hero-bg.jpg
new file mode 100644
index 0000000..a6e9c32
Binary files /dev/null and b/public/images/hero-bg.jpg differ
diff --git a/public/images/heroshots/MKE_1959.JPG b/public/images/heroshots/MKE_1959.JPG
new file mode 100644
index 0000000..5cd5e54
Binary files /dev/null and b/public/images/heroshots/MKE_1959.JPG differ
diff --git a/public/images/heroshots/MKE_1974.jpg b/public/images/heroshots/MKE_1974.jpg
new file mode 100644
index 0000000..bf46c77
Binary files /dev/null and b/public/images/heroshots/MKE_1974.jpg differ
diff --git a/public/images/heroshots/MKE_1996.JPG b/public/images/heroshots/MKE_1996.JPG
new file mode 100644
index 0000000..31f2ddf
Binary files /dev/null and b/public/images/heroshots/MKE_1996.JPG differ
diff --git a/public/images/houses/herdweg/1og.jpg b/public/images/houses/herdweg/1og.jpg
new file mode 100644
index 0000000..5cd5e54
Binary files /dev/null and b/public/images/houses/herdweg/1og.jpg differ
diff --git a/public/images/houses/herdweg/apartments/1og/MKE_1958.jpg b/public/images/houses/herdweg/apartments/1og/MKE_1958.jpg
new file mode 100644
index 0000000..6139a50
Binary files /dev/null and b/public/images/houses/herdweg/apartments/1og/MKE_1958.jpg differ
diff --git a/public/images/houses/herdweg/apartments/1og/MKE_1960.JPG b/public/images/houses/herdweg/apartments/1og/MKE_1960.JPG
new file mode 100644
index 0000000..c58c226
Binary files /dev/null and b/public/images/houses/herdweg/apartments/1og/MKE_1960.JPG differ
diff --git a/public/images/houses/herdweg/apartments/1og/MKE_1962.JPG b/public/images/houses/herdweg/apartments/1og/MKE_1962.JPG
new file mode 100644
index 0000000..9f05707
Binary files /dev/null and b/public/images/houses/herdweg/apartments/1og/MKE_1962.JPG differ
diff --git a/public/images/houses/herdweg/apartments/1og/MKE_1965.jpg b/public/images/houses/herdweg/apartments/1og/MKE_1965.jpg
new file mode 100644
index 0000000..f07930e
Binary files /dev/null and b/public/images/houses/herdweg/apartments/1og/MKE_1965.jpg differ
diff --git a/public/images/houses/herdweg/apartments/1og/MKE_1967.JPG b/public/images/houses/herdweg/apartments/1og/MKE_1967.JPG
new file mode 100644
index 0000000..df5c6fe
Binary files /dev/null and b/public/images/houses/herdweg/apartments/1og/MKE_1967.JPG differ
diff --git a/public/images/houses/herdweg/apartments/1og/MKE_1974.jpg b/public/images/houses/herdweg/apartments/1og/MKE_1974.jpg
new file mode 100644
index 0000000..bf46c77
Binary files /dev/null and b/public/images/houses/herdweg/apartments/1og/MKE_1974.jpg differ
diff --git a/public/images/houses/herdweg/apartments/1og/MKE_1990.JPG b/public/images/houses/herdweg/apartments/1og/MKE_1990.JPG
new file mode 100644
index 0000000..47f837d
Binary files /dev/null and b/public/images/houses/herdweg/apartments/1og/MKE_1990.JPG differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_1994.jpg b/public/images/houses/herdweg/apartments/dg/MKE_1994.jpg
new file mode 100644
index 0000000..b45ffc7
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_1994.jpg differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_1995.JPG b/public/images/houses/herdweg/apartments/dg/MKE_1995.JPG
new file mode 100644
index 0000000..5dc695b
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_1995.JPG differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_1996.JPG b/public/images/houses/herdweg/apartments/dg/MKE_1996.JPG
new file mode 100644
index 0000000..31f2ddf
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_1996.JPG differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_1997.jpg b/public/images/houses/herdweg/apartments/dg/MKE_1997.jpg
new file mode 100644
index 0000000..0b4bd7a
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_1997.jpg differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_1998.jpg b/public/images/houses/herdweg/apartments/dg/MKE_1998.jpg
new file mode 100644
index 0000000..43e389e
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_1998.jpg differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_1999.JPG b/public/images/houses/herdweg/apartments/dg/MKE_1999.JPG
new file mode 100644
index 0000000..bdb686c
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_1999.JPG differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_2000.jpg b/public/images/houses/herdweg/apartments/dg/MKE_2000.jpg
new file mode 100644
index 0000000..805269e
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_2000.jpg differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_2001.jpg b/public/images/houses/herdweg/apartments/dg/MKE_2001.jpg
new file mode 100644
index 0000000..83c5164
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_2001.jpg differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_2002.jpg b/public/images/houses/herdweg/apartments/dg/MKE_2002.jpg
new file mode 100644
index 0000000..e50c2bf
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_2002.jpg differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_2003.JPG b/public/images/houses/herdweg/apartments/dg/MKE_2003.JPG
new file mode 100644
index 0000000..7cbbca5
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_2003.JPG differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_2004.jpg b/public/images/houses/herdweg/apartments/dg/MKE_2004.jpg
new file mode 100644
index 0000000..a9e2024
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_2004.jpg differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_2011.jpg b/public/images/houses/herdweg/apartments/dg/MKE_2011.jpg
new file mode 100644
index 0000000..edfba7e
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_2011.jpg differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_2013.JPG b/public/images/houses/herdweg/apartments/dg/MKE_2013.JPG
new file mode 100644
index 0000000..1537883
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_2013.JPG differ
diff --git a/public/images/houses/herdweg/apartments/dg/MKE_2015.JPG b/public/images/houses/herdweg/apartments/dg/MKE_2015.JPG
new file mode 100644
index 0000000..46a7c26
Binary files /dev/null and b/public/images/houses/herdweg/apartments/dg/MKE_2015.JPG differ
diff --git a/public/images/houses/herdweg/apartments/eg/MKE_1958.jpg b/public/images/houses/herdweg/apartments/eg/MKE_1958.jpg
new file mode 100644
index 0000000..6139a50
Binary files /dev/null and b/public/images/houses/herdweg/apartments/eg/MKE_1958.jpg differ
diff --git a/public/images/houses/herdweg/apartments/eg/MKE_1960.JPG b/public/images/houses/herdweg/apartments/eg/MKE_1960.JPG
new file mode 100644
index 0000000..c58c226
Binary files /dev/null and b/public/images/houses/herdweg/apartments/eg/MKE_1960.JPG differ
diff --git a/public/images/houses/herdweg/apartments/eg/MKE_1962.JPG b/public/images/houses/herdweg/apartments/eg/MKE_1962.JPG
new file mode 100644
index 0000000..9f05707
Binary files /dev/null and b/public/images/houses/herdweg/apartments/eg/MKE_1962.JPG differ
diff --git a/public/images/houses/herdweg/apartments/eg/MKE_1965.jpg b/public/images/houses/herdweg/apartments/eg/MKE_1965.jpg
new file mode 100644
index 0000000..f07930e
Binary files /dev/null and b/public/images/houses/herdweg/apartments/eg/MKE_1965.jpg differ
diff --git a/public/images/houses/herdweg/apartments/eg/MKE_1967.JPG b/public/images/houses/herdweg/apartments/eg/MKE_1967.JPG
new file mode 100644
index 0000000..df5c6fe
Binary files /dev/null and b/public/images/houses/herdweg/apartments/eg/MKE_1967.JPG differ
diff --git a/public/images/houses/herdweg/apartments/eg/MKE_1974.jpg b/public/images/houses/herdweg/apartments/eg/MKE_1974.jpg
new file mode 100644
index 0000000..bf46c77
Binary files /dev/null and b/public/images/houses/herdweg/apartments/eg/MKE_1974.jpg differ
diff --git a/public/images/houses/herdweg/apartments/eg/MKE_1990.JPG b/public/images/houses/herdweg/apartments/eg/MKE_1990.JPG
new file mode 100644
index 0000000..47f837d
Binary files /dev/null and b/public/images/houses/herdweg/apartments/eg/MKE_1990.JPG differ
diff --git a/public/images/houses/herdweg/apartments/ug/20210501_120501_001.jpg b/public/images/houses/herdweg/apartments/ug/20210501_120501_001.jpg
new file mode 100644
index 0000000..1454a0c
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/20210501_120501_001.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/20210501_120659.jpg b/public/images/houses/herdweg/apartments/ug/20210501_120659.jpg
new file mode 100644
index 0000000..681e3d4
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/20210501_120659.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/20210501_120720.jpg b/public/images/houses/herdweg/apartments/ug/20210501_120720.jpg
new file mode 100644
index 0000000..918c682
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/20210501_120720.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/20210501_120732.jpg b/public/images/houses/herdweg/apartments/ug/20210501_120732.jpg
new file mode 100644
index 0000000..b2276fa
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/20210501_120732.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/20210501_120740.jpg b/public/images/houses/herdweg/apartments/ug/20210501_120740.jpg
new file mode 100644
index 0000000..cd9fa7c
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/20210501_120740.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/20210501_120759.jpg b/public/images/houses/herdweg/apartments/ug/20210501_120759.jpg
new file mode 100644
index 0000000..a8680c5
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/20210501_120759.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0012.jpg b/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0012.jpg
new file mode 100644
index 0000000..356346c
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0012.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0014.jpg b/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0014.jpg
new file mode 100644
index 0000000..b47f29f
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0014.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0015.jpg b/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0015.jpg
new file mode 100644
index 0000000..cf4925b
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0015.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0016.jpg b/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0016.jpg
new file mode 100644
index 0000000..4293877
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/IMG-20201022-WA0016.jpg differ
diff --git a/public/images/houses/herdweg/apartments/ug/MKE_2572.JPG b/public/images/houses/herdweg/apartments/ug/MKE_2572.JPG
new file mode 100644
index 0000000..698ef95
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/MKE_2572.JPG differ
diff --git a/public/images/houses/herdweg/apartments/ug/MKE_2576.JPG b/public/images/houses/herdweg/apartments/ug/MKE_2576.JPG
new file mode 100644
index 0000000..d2b16ce
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/MKE_2576.JPG differ
diff --git a/public/images/houses/herdweg/apartments/ug/MKE_2577.JPG b/public/images/houses/herdweg/apartments/ug/MKE_2577.JPG
new file mode 100644
index 0000000..dc5f06d
Binary files /dev/null and b/public/images/houses/herdweg/apartments/ug/MKE_2577.JPG differ
diff --git a/public/images/houses/herdweg/dg.jpg b/public/images/houses/herdweg/dg.jpg
new file mode 100644
index 0000000..c58c226
Binary files /dev/null and b/public/images/houses/herdweg/dg.jpg differ
diff --git a/public/images/houses/herdweg/eg.jpg b/public/images/houses/herdweg/eg.jpg
new file mode 100644
index 0000000..52fdbaf
Binary files /dev/null and b/public/images/houses/herdweg/eg.jpg differ
diff --git a/public/images/houses/herdweg/exterior/MKE_1955.JPG b/public/images/houses/herdweg/exterior/MKE_1955.JPG
new file mode 100644
index 0000000..52fdbaf
Binary files /dev/null and b/public/images/houses/herdweg/exterior/MKE_1955.JPG differ
diff --git a/public/images/houses/herdweg/exterior/Main.png b/public/images/houses/herdweg/exterior/Main.png
new file mode 100644
index 0000000..4d77a03
Binary files /dev/null and b/public/images/houses/herdweg/exterior/Main.png differ
diff --git a/public/images/houses/herdweg/impressions/11.png b/public/images/houses/herdweg/impressions/11.png
new file mode 100644
index 0000000..2a5a7d9
Binary files /dev/null and b/public/images/houses/herdweg/impressions/11.png differ
diff --git a/public/images/houses/herdweg/impressions/MKE_1974.jpg b/public/images/houses/herdweg/impressions/MKE_1974.jpg
new file mode 100644
index 0000000..bf46c77
Binary files /dev/null and b/public/images/houses/herdweg/impressions/MKE_1974.jpg differ
diff --git a/public/images/houses/herdweg/impressions/MKE_1986.JPG b/public/images/houses/herdweg/impressions/MKE_1986.JPG
new file mode 100644
index 0000000..2f06acc
Binary files /dev/null and b/public/images/houses/herdweg/impressions/MKE_1986.JPG differ
diff --git a/public/images/houses/herdweg/impressions/MKE_2027.jpg b/public/images/houses/herdweg/impressions/MKE_2027.jpg
new file mode 100644
index 0000000..184d551
Binary files /dev/null and b/public/images/houses/herdweg/impressions/MKE_2027.jpg differ
diff --git a/public/images/houses/herdweg/impressions/MKE_2030.jpg b/public/images/houses/herdweg/impressions/MKE_2030.jpg
new file mode 100644
index 0000000..a7748b0
Binary files /dev/null and b/public/images/houses/herdweg/impressions/MKE_2030.jpg differ
diff --git a/public/images/houses/herdweg/impressions/MKE_2034.JPG b/public/images/houses/herdweg/impressions/MKE_2034.JPG
new file mode 100644
index 0000000..e86ead3
Binary files /dev/null and b/public/images/houses/herdweg/impressions/MKE_2034.JPG differ
diff --git a/public/images/houses/herdweg/impressions/MKE_2037.jpg b/public/images/houses/herdweg/impressions/MKE_2037.jpg
new file mode 100644
index 0000000..3ab54b7
Binary files /dev/null and b/public/images/houses/herdweg/impressions/MKE_2037.jpg differ
diff --git a/public/images/houses/herdweg/impressions/MKE_2038.JPG b/public/images/houses/herdweg/impressions/MKE_2038.JPG
new file mode 100644
index 0000000..cb8ebb5
Binary files /dev/null and b/public/images/houses/herdweg/impressions/MKE_2038.JPG differ
diff --git a/public/images/houses/herdweg/impressions/MKE_2042.JPG b/public/images/houses/herdweg/impressions/MKE_2042.JPG
new file mode 100644
index 0000000..7899c26
Binary files /dev/null and b/public/images/houses/herdweg/impressions/MKE_2042.JPG differ
diff --git a/public/images/houses/herdweg/ug.jpg b/public/images/houses/herdweg/ug.jpg
new file mode 100644
index 0000000..2ddc4ac
Binary files /dev/null and b/public/images/houses/herdweg/ug.jpg differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-links/01.png b/public/images/houses/schoenaicher/apartments/dg-links/01.png
new file mode 100644
index 0000000..212be99
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-links/01.png differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-links/11.png b/public/images/houses/schoenaicher/apartments/dg-links/11.png
new file mode 100644
index 0000000..2a5a7d9
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-links/11.png differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-links/12.png b/public/images/houses/schoenaicher/apartments/dg-links/12.png
new file mode 100644
index 0000000..6d59ecf
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-links/12.png differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-links/13.png b/public/images/houses/schoenaicher/apartments/dg-links/13.png
new file mode 100644
index 0000000..6a2d6de
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-links/13.png differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-links/30.png b/public/images/houses/schoenaicher/apartments/dg-links/30.png
new file mode 100644
index 0000000..cbb290a
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-links/30.png differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0081.JPG b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0081.JPG
new file mode 100644
index 0000000..efe5461
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0081.JPG differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0085.JPG b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0085.JPG
new file mode 100644
index 0000000..4d33648
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0085.JPG differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0088.JPG b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0088.JPG
new file mode 100644
index 0000000..aa5d929
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0088.JPG differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0089.JPG b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0089.JPG
new file mode 100644
index 0000000..d1dd3d9
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0089.JPG differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0092.JPG b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0092.JPG
new file mode 100644
index 0000000..0aad6e6
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0092.JPG differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0095.JPG b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0095.JPG
new file mode 100644
index 0000000..b5d36cc
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0095.JPG differ
diff --git a/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0096.JPG b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0096.JPG
new file mode 100644
index 0000000..658ed7b
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/dg-rechts/MKE_0096.JPG differ
diff --git a/public/images/houses/schoenaicher/apartments/og-links/05.png b/public/images/houses/schoenaicher/apartments/og-links/05.png
new file mode 100644
index 0000000..363f7d2
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-links/05.png differ
diff --git a/public/images/houses/schoenaicher/apartments/og-links/10.png b/public/images/houses/schoenaicher/apartments/og-links/10.png
new file mode 100644
index 0000000..377bd0c
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-links/10.png differ
diff --git a/public/images/houses/schoenaicher/apartments/og-links/32.png b/public/images/houses/schoenaicher/apartments/og-links/32.png
new file mode 100644
index 0000000..4c3bf21
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-links/32.png differ
diff --git a/public/images/houses/schoenaicher/apartments/og-links/33.png b/public/images/houses/schoenaicher/apartments/og-links/33.png
new file mode 100644
index 0000000..256f0a3
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-links/33.png differ
diff --git a/public/images/houses/schoenaicher/apartments/og-links/34.png b/public/images/houses/schoenaicher/apartments/og-links/34.png
new file mode 100644
index 0000000..664c11d
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-links/34.png differ
diff --git a/public/images/houses/schoenaicher/apartments/og-rechts/302367ba-466f-45f5-b84c-e25dcc3b9117.jpg b/public/images/houses/schoenaicher/apartments/og-rechts/302367ba-466f-45f5-b84c-e25dcc3b9117.jpg
new file mode 100644
index 0000000..7093885
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-rechts/302367ba-466f-45f5-b84c-e25dcc3b9117.jpg differ
diff --git a/public/images/houses/schoenaicher/apartments/og-rechts/3b41e1cb-c192-409c-a10b-1aa6f71453f8.jpg b/public/images/houses/schoenaicher/apartments/og-rechts/3b41e1cb-c192-409c-a10b-1aa6f71453f8.jpg
new file mode 100644
index 0000000..1c5264d
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-rechts/3b41e1cb-c192-409c-a10b-1aa6f71453f8.jpg differ
diff --git a/public/images/houses/schoenaicher/apartments/og-rechts/432488b9-7208-4580-8651-386690303d8e.avif b/public/images/houses/schoenaicher/apartments/og-rechts/432488b9-7208-4580-8651-386690303d8e.avif
new file mode 100644
index 0000000..46d2bac
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-rechts/432488b9-7208-4580-8651-386690303d8e.avif differ
diff --git a/public/images/houses/schoenaicher/apartments/og-rechts/c34fcaf7-c9c3-4203-b794-d7afd898627b.jpg b/public/images/houses/schoenaicher/apartments/og-rechts/c34fcaf7-c9c3-4203-b794-d7afd898627b.jpg
new file mode 100644
index 0000000..117c36b
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-rechts/c34fcaf7-c9c3-4203-b794-d7afd898627b.jpg differ
diff --git a/public/images/houses/schoenaicher/apartments/og-rechts/d9b463cc-f921-44cc-9d18-34c6c89d41d7.jpg b/public/images/houses/schoenaicher/apartments/og-rechts/d9b463cc-f921-44cc-9d18-34c6c89d41d7.jpg
new file mode 100644
index 0000000..a497946
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-rechts/d9b463cc-f921-44cc-9d18-34c6c89d41d7.jpg differ
diff --git a/public/images/houses/schoenaicher/apartments/og-rechts/e24cd0a0-d72d-409e-91b2-02355b630284.jpg b/public/images/houses/schoenaicher/apartments/og-rechts/e24cd0a0-d72d-409e-91b2-02355b630284.jpg
new file mode 100644
index 0000000..925d225
Binary files /dev/null and b/public/images/houses/schoenaicher/apartments/og-rechts/e24cd0a0-d72d-409e-91b2-02355b630284.jpg differ
diff --git a/public/images/houses/schoenaicher/dg-links.jpg b/public/images/houses/schoenaicher/dg-links.jpg
new file mode 100644
index 0000000..212be99
Binary files /dev/null and b/public/images/houses/schoenaicher/dg-links.jpg differ
diff --git a/public/images/houses/schoenaicher/dg-rechts.jpg b/public/images/houses/schoenaicher/dg-rechts.jpg
new file mode 100644
index 0000000..efe5461
Binary files /dev/null and b/public/images/houses/schoenaicher/dg-rechts.jpg differ
diff --git a/public/images/houses/schoenaicher/exterior/Main.jpg b/public/images/houses/schoenaicher/exterior/Main.jpg
new file mode 100644
index 0000000..f3e141d
Binary files /dev/null and b/public/images/houses/schoenaicher/exterior/Main.jpg differ
diff --git a/public/images/houses/schoenaicher/hero.jpg b/public/images/houses/schoenaicher/hero.jpg
new file mode 100644
index 0000000..2e26a84
Binary files /dev/null and b/public/images/houses/schoenaicher/hero.jpg differ
diff --git a/public/images/houses/schoenaicher/og-links.jpg b/public/images/houses/schoenaicher/og-links.jpg
new file mode 100644
index 0000000..d557035
Binary files /dev/null and b/public/images/houses/schoenaicher/og-links.jpg differ
diff --git a/public/images/houses/schoenaicher/og-rechts.jpg b/public/images/houses/schoenaicher/og-rechts.jpg
new file mode 100644
index 0000000..2ec43ab
Binary files /dev/null and b/public/images/houses/schoenaicher/og-rechts.jpg differ
diff --git a/public/images/logo.jpg b/public/images/logo.jpg
new file mode 100755
index 0000000..58ee9ad
Binary files /dev/null and b/public/images/logo.jpg differ
diff --git a/public/images/placeholder.jpg b/public/images/placeholder.jpg
new file mode 100644
index 0000000..0ad3864
Binary files /dev/null and b/public/images/placeholder.jpg differ
diff --git a/src/config/apartments.ts b/src/config/apartments.ts
new file mode 100644
index 0000000..e3f1f85
--- /dev/null
+++ b/src/config/apartments.ts
@@ -0,0 +1,307 @@
+export interface Apartment {
+  id: string;
+  slug: string;
+  name: string;
+  nameEn: string;
+  beds24RoomId: string;
+  beds24PropertyId: string;
+  houseId: string;
+  floor: string;
+  floorEn: string;
+  maxGuests: number;
+  sizeSqm?: number;
+  bedrooms?: number;
+  bathrooms?: number;
+  description?: string;
+  descriptionEn?: string;
+  amenities: string[];
+  amenitiesEn: string[];
+  tourUrl?: string;
+  tourProvider?: string;
+  images: string[];
+}
+
+export interface House {
+  id: string;
+  slug: string;
+  name: string;
+  nameEn: string;
+  address: string;
+  city: string;
+  zipCode: string;
+  country: string;
+  countryEn: string;
+  description: string;
+  descriptionEn: string;
+  stripeAccountId: string;
+  beds24PropertyId: string;
+  images: string[];
+  apartments: Apartment[];
+}
+
+export const houses: House[] = [
+  {
+    id: "herdweg",
+    slug: "bb-apartment-herdweg",
+    name: "BB-Apartment Herdweg",
+    nameEn: "BB-Apartment Herdweg",
+    address: "Herdweg 71",
+    city: "Böblingen",
+    zipCode: "71032",
+    country: "Deutschland",
+    countryEn: "Germany",
+    description:
+      "Willkommen in Ihrer ruhigen Premium-Home-Base in Böblingen. Das Haus wurde für längere Aufenthalte konzipiert und bietet vier vollmöblierte Apartments mit allem, was Sie für einen sofortigen Einzug benötigen. Ideal für Personal der USAG Stuttgart, das Komfort und einen völlig stressfreien Alltag sucht. Alle Apartments liegen in der Nähe einer Bushaltestelle.",
+    descriptionEn:
+      "Welcome to your quiet, premium home base in Böblingen. Designed for extended stays, this house offers four fully furnished apartments with everything you need to settle in immediately. Ideal for USAG Stuttgart personnel looking for comfort and a completely stress-free daily routine. All apartments are close to a bus stop.",
+    stripeAccountId: process.env.STRIPE_ACCOUNT_HERDWEWEG || "",
+    beds24PropertyId: "121184",
+    images: [
+      "/images/houses/herdweg/exterior/Main.png",
+      "/images/houses/herdweg/exterior/MKE_1955.JPG",
+      "/images/houses/herdweg/impressions/MKE_2027.jpg",
+      "/images/houses/herdweg/impressions/MKE_2030.jpg",
+      "/images/houses/herdweg/impressions/MKE_2034.JPG",
+      "/images/houses/herdweg/impressions/MKE_2037.jpg",
+    ],
+    apartments: [
+      {
+        id: "herdweg-ug",
+        slug: "herdweg-ug",
+        name: "Herdweg UG",
+        nameEn: "Herdweg Ground Floor",
+        beds24RoomId: "272541",
+        beds24PropertyId: "121184",
+        houseId: "herdweg",
+        floor: "Untergeschoss",
+        floorEn: "Ground Floor",
+        maxGuests: 2,
+        amenities: ["Küche", "Bad", "WLAN", "TV", "Waschmaschine", "Vollmöbliert"],
+        amenitiesEn: ["Kitchen", "Bathroom", "WiFi", "TV", "Washing machine", "Fully furnished"],
+        images: [
+          "/images/houses/herdweg/apartments/ug/20210501_120501_001.jpg",
+          "/images/houses/herdweg/apartments/ug/20210501_120659.jpg",
+          "/images/houses/herdweg/apartments/ug/20210501_120720.jpg",
+          "/images/houses/herdweg/apartments/ug/20210501_120732.jpg",
+          "/images/houses/herdweg/apartments/ug/20210501_120740.jpg",
+          "/images/houses/herdweg/apartments/ug/20210501_120759.jpg",
+          "/images/houses/herdweg/apartments/ug/IMG-20201022-WA0012.jpg",
+          "/images/houses/herdweg/apartments/ug/IMG-20201022-WA0014.jpg",
+          "/images/houses/herdweg/apartments/ug/IMG-20201022-WA0015.jpg",
+          "/images/houses/herdweg/apartments/ug/IMG-20201022-WA0016.jpg",
+          "/images/houses/herdweg/apartments/ug/MKE_2572.JPG",
+          "/images/houses/herdweg/apartments/ug/MKE_2576.JPG",
+          "/images/houses/herdweg/apartments/ug/MKE_2577.JPG",
+        ],
+      },
+      {
+        id: "herdweg-eg",
+        slug: "herdweg-eg",
+        name: "Herdweg EG",
+        nameEn: "Herdweg 1st Floor",
+        beds24RoomId: "278806",
+        beds24PropertyId: "121184",
+        houseId: "herdweg",
+        floor: "Erdgeschoss",
+        floorEn: "1st Floor",
+        maxGuests: 2,
+        amenities: ["Küche", "Bad", "WLAN", "TV", "Waschmaschine", "Klimaanlage", "Vollmöbliert"],
+        amenitiesEn: ["Kitchen", "Bathroom", "WiFi", "TV", "Washing machine", "Air conditioning", "Fully furnished"],
+        images: [
+          "/images/houses/herdweg/apartments/eg/MKE_1958.jpg",
+          "/images/houses/herdweg/apartments/eg/MKE_1960.JPG",
+          "/images/houses/herdweg/apartments/eg/MKE_1962.JPG",
+          "/images/houses/herdweg/apartments/eg/MKE_1965.jpg",
+          "/images/houses/herdweg/apartments/eg/MKE_1967.JPG",
+          "/images/houses/herdweg/apartments/eg/MKE_1974.jpg",
+          "/images/houses/herdweg/apartments/eg/MKE_1990.JPG",
+        ],
+      },
+      {
+        id: "herdweg-1og",
+        slug: "herdweg-1og",
+        name: "Herdweg 1.OG",
+        nameEn: "Herdweg 2nd Floor",
+        beds24RoomId: "284177",
+        beds24PropertyId: "121184",
+        houseId: "herdweg",
+        floor: "1. Obergeschoss",
+        floorEn: "2nd Floor",
+        maxGuests: 2,
+        amenities: ["Küche", "Bad", "WLAN", "TV", "Waschmaschine", "Klimaanlage", "Vollmöbliert"],
+        amenitiesEn: ["Kitchen", "Bathroom", "WiFi", "TV", "Washing machine", "Air conditioning", "Fully furnished"],
+        images: [
+          "/images/houses/herdweg/apartments/1og/MKE_1958.jpg",
+          "/images/houses/herdweg/apartments/1og/MKE_1960.JPG",
+          "/images/houses/herdweg/apartments/1og/MKE_1962.JPG",
+          "/images/houses/herdweg/apartments/1og/MKE_1965.jpg",
+          "/images/houses/herdweg/apartments/1og/MKE_1967.JPG",
+          "/images/houses/herdweg/apartments/1og/MKE_1974.jpg",
+          "/images/houses/herdweg/apartments/1og/MKE_1990.JPG",
+        ],
+      },
+      {
+        id: "herdweg-dg",
+        slug: "herdweg-dg",
+        name: "Herdweg DG",
+        nameEn: "Herdweg Top Floor",
+        beds24RoomId: "284178",
+        beds24PropertyId: "121184",
+        houseId: "herdweg",
+        floor: "Dachgeschoss",
+        floorEn: "Top Floor",
+        maxGuests: 2,
+        amenities: ["Küche", "Bad", "WLAN", "TV", "Waschmaschine", "Klimaanlage", "Vollmöbliert"],
+        amenitiesEn: ["Kitchen", "Bathroom", "WiFi", "TV", "Washing machine", "Air conditioning", "Fully furnished"],
+        images: [
+          "/images/houses/herdweg/apartments/dg/MKE_1994.jpg",
+          "/images/houses/herdweg/apartments/dg/MKE_1995.JPG",
+          "/images/houses/herdweg/apartments/dg/MKE_1996.JPG",
+          "/images/houses/herdweg/apartments/dg/MKE_1997.jpg",
+          "/images/houses/herdweg/apartments/dg/MKE_1998.jpg",
+          "/images/houses/herdweg/apartments/dg/MKE_1999.JPG",
+          "/images/houses/herdweg/apartments/dg/MKE_2000.jpg",
+          "/images/houses/herdweg/apartments/dg/MKE_2001.jpg",
+          "/images/houses/herdweg/apartments/dg/MKE_2002.jpg",
+          "/images/houses/herdweg/apartments/dg/MKE_2003.JPG",
+          "/images/houses/herdweg/apartments/dg/MKE_2004.jpg",
+          "/images/houses/herdweg/apartments/dg/MKE_2011.jpg",
+          "/images/houses/herdweg/apartments/dg/MKE_2013.JPG",
+          "/images/houses/herdweg/apartments/dg/MKE_2015.JPG",
+        ],
+      },
+    ],
+  },
+  {
+    id: "schoenaicher",
+    slug: "bb-apartment-schoenaicher-strasse",
+    name: "BB-Apartment Schönaicher Straße",
+    nameEn: "BB-Apartment Schönaicher Straße",
+    address: "Schönaicher Straße 26",
+    city: "Böblingen",
+    zipCode: "71032",
+    country: "Deutschland",
+    countryEn: "Germany",
+    description:
+      "Zentrales Haus mit vier charmanten Apartments für Geschäftsreisende und längere Aufenthalte. Nahe dem Stadtzentrum, das Daimler Werk in Sindelfingen ist leicht zu erreichen. Alle Apartments liegen in der Nähe einer Bushaltestelle.",
+    descriptionEn:
+      "Central house with four charming apartments for business travelers and longer stays. Close to the city center, the Daimler plant in Sindelfingen is easily reachable. All apartments are close to a bus stop.",
+    stripeAccountId: process.env.STRIPE_ACCOUNT_SCHOENAICHER || "",
+    beds24PropertyId: "36159",
+    images: ["/images/houses/schoenaicher/exterior/Main.jpg"],
+    apartments: [
+      {
+        id: "schoenaicher-dg-links",
+        slug: "schoenaicher-dg-links",
+        name: "DG links",
+        nameEn: "Top Floor Left",
+        beds24RoomId: "83525",
+        beds24PropertyId: "36159",
+        houseId: "schoenaicher",
+        floor: "Dachgeschoss links",
+        floorEn: "Top Floor Left",
+        maxGuests: 2,
+        amenities: ["Küche", "Bad", "WLAN", "TV", "Waschmaschine", "Klimaanlage", "Vollmöbliert"],
+        amenitiesEn: ["Kitchen", "Bathroom", "WiFi", "TV", "Washing machine", "Air conditioning", "Fully furnished"],
+        images: [
+          "/images/houses/schoenaicher/apartments/dg-links/01.png",
+          "/images/houses/schoenaicher/apartments/dg-links/11.png",
+          "/images/houses/schoenaicher/apartments/dg-links/12.png",
+          "/images/houses/schoenaicher/apartments/dg-links/13.png",
+          "/images/houses/schoenaicher/apartments/dg-links/30.png",
+        ],
+      },
+      {
+        id: "schoenaicher-dg-rechts",
+        slug: "schoenaicher-dg-rechts",
+        name: "DG rechts",
+        nameEn: "Top Floor Right",
+        beds24RoomId: "83524",
+        beds24PropertyId: "36159",
+        houseId: "schoenaicher",
+        floor: "Dachgeschoss rechts",
+        floorEn: "Top Floor Right",
+        maxGuests: 2,
+        amenities: ["Küche", "Bad", "WLAN", "TV", "Waschmaschine", "Klimaanlage", "Vollmöbliert"],
+        amenitiesEn: ["Kitchen", "Bathroom", "WiFi", "TV", "Washing machine", "Air conditioning", "Fully furnished"],
+        images: [
+          "/images/houses/schoenaicher/apartments/dg-rechts/MKE_0081.JPG",
+          "/images/houses/schoenaicher/apartments/dg-rechts/MKE_0085.JPG",
+          "/images/houses/schoenaicher/apartments/dg-rechts/MKE_0088.JPG",
+          "/images/houses/schoenaicher/apartments/dg-rechts/MKE_0089.JPG",
+          "/images/houses/schoenaicher/apartments/dg-rechts/MKE_0092.JPG",
+          "/images/houses/schoenaicher/apartments/dg-rechts/MKE_0095.JPG",
+          "/images/houses/schoenaicher/apartments/dg-rechts/MKE_0096.JPG",
+        ],
+      },
+      {
+        id: "schoenaicher-og-links",
+        slug: "schoenaicher-og-links",
+        name: "OG links",
+        nameEn: "Upper Floor Left",
+        beds24RoomId: "83660",
+        beds24PropertyId: "36159",
+        houseId: "schoenaicher",
+        floor: "Obergeschoss links",
+        floorEn: "Upper Floor Left",
+        maxGuests: 2,
+        amenities: ["Küche", "Bad", "WLAN", "TV", "Waschmaschine", "Klimaanlage", "Vollmöbliert"],
+        amenitiesEn: ["Kitchen", "Bathroom", "WiFi", "TV", "Washing machine", "Air conditioning", "Fully furnished"],
+        images: [
+          "/images/houses/schoenaicher/apartments/og-links/05.png",
+          "/images/houses/schoenaicher/apartments/og-links/10.png",
+          "/images/houses/schoenaicher/apartments/og-links/32.png",
+          "/images/houses/schoenaicher/apartments/og-links/33.png",
+          "/images/houses/schoenaicher/apartments/og-links/34.png",
+        ],
+      },
+      {
+        id: "schoenaicher-og-rechts",
+        slug: "schoenaicher-og-rechts",
+        name: "OG rechts",
+        nameEn: "Upper Floor Right",
+        beds24RoomId: "83659",
+        beds24PropertyId: "36159",
+        houseId: "schoenaicher",
+        floor: "Obergeschoss rechts",
+        floorEn: "Upper Floor Right",
+        maxGuests: 2,
+        amenities: ["Küche", "Bad", "WLAN", "TV", "Waschmaschine", "Klimaanlage", "Vollmöbliert"],
+        amenitiesEn: ["Kitchen", "Bathroom", "WiFi", "TV", "Washing machine", "Air conditioning", "Fully furnished"],
+        images: [
+          "/images/houses/schoenaicher/apartments/og-rechts/302367ba-466f-45f5-b84c-e25dcc3b9117.jpg",
+          "/images/houses/schoenaicher/apartments/og-rechts/3b41e1cb-c192-409c-a10b-1aa6f71453f8.jpg",
+          "/images/houses/schoenaicher/apartments/og-rechts/432488b9-7208-4580-8651-386690303d8e.avif",
+          "/images/houses/schoenaicher/apartments/og-rechts/c34fcaf7-c9c3-4203-b794-d7afd898627b.jpg",
+          "/images/houses/schoenaicher/apartments/og-rechts/d9b463cc-f921-44cc-9d18-34c6c89d41d7.jpg",
+          "/images/houses/schoenaicher/apartments/og-rechts/e24cd0a0-d72d-409e-91b2-02355b630284.jpg",
+        ],
+      },
+    ],
+  },
+];
+
+export const allApartments = houses.flatMap((house) => house.apartments);
+
+export const bookingConfig = {
+  minStayNights: 20,
+  depositPercent: 20,
+  // Reference stay length (nights) used purely to display a genuine, real
+  // "savings vs. short-term rate" comparison. This does NOT add any further
+  // discount on top of the Beds24 price — it only compares two real Beds24
+  // rates (the requested long stay vs. this short reference stay) so any
+  // savings shown are truthful and backed by Beds24's own pricing rules.
+  referenceStayNights: 7,
+};
+
+export function getHouseBySlug(slug: string): House | undefined {
+  return houses.find((house) => house.slug === slug);
+}
+
+export function getApartmentBySlug(slug: string): Apartment | undefined {
+  return allApartments.find((apartment) => apartment.slug === slug);
+}
+
+export function getHouseById(id: string): House | undefined {
+  return houses.find((house) => house.id === id);
+}
diff --git a/src/lib/beds24.ts b/src/lib/beds24.ts
new file mode 100644
index 0000000..fa04e7a
--- /dev/null
+++ b/src/lib/beds24.ts
@@ -0,0 +1,503 @@
+/**
+ * Beds24 API v2 client.
+ *
+ * IMPORTANT: Each house (Herdweg, Schönaicher Straße) has its own, separate
+ * Beds24 account/login (not just a separate property within one account) —
+ * same pattern as the per-house Stripe accounts in `src/lib/stripe.ts`.
+ * That means every house needs its own invite code / refresh token.
+ *
+ * Auth flow per house (see https://wiki.beds24.com/index.php/OTAs:_How_to_connect_to_Beds24_using_API_V2):
+ * 1. Log into that house's Beds24 account: Settings > Account > Apps/API > "Generate invite code"
+ *    (scopes: inventory, later also "bookings" for automated booking creation)
+ * 2. Exchange the invite code once for a long-life refresh token:
+ *    curl -H "code: <invite-code>" https://api.beds24.com/v2/authentication/setup
+ * 3. Store the returned `refreshToken` as BEDS24_REFRESH_TOKEN_HERDWEG /
+ *    BEDS24_REFRESH_TOKEN_SCHOENAICHER in .env.local (see .env.local.example).
+ *
+ * At runtime we exchange each house's refresh token for a short-lived access
+ * token (GET /authentication/token, header `refreshToken`) and cache it in
+ * memory per house until shortly before it expires.
+ *
+ * NOTE: The exact response shape of /inventory/rooms/offers and /properties below
+ * is modeled from Beds24's published API docs but has not been verified against a
+ * live account. Once the refresh tokens are configured, double check the response
+ * in the Swagger UI (https://beds24.com/api/v2/#/) and adjust the parsing below if
+ * field names differ.
+ */
+
+import { parseDateOnly, nightsBetween, addDays as addDaysToDateString } from "@/src/lib/date";
+
+const BEDS24_API_BASE = "https://api.beds24.com/v2";
+
+export interface Beds24AvailabilityParams {
+  houseId: string;
+  propertyId: string;
+  roomId: string;
+  start: string; // YYYY-MM-DD
+  end: string; // YYYY-MM-DD
+  numAdults?: number;
+}
+
+export interface Beds24AvailabilityResponse {
+  roomId: string;
+  available: boolean;
+  price: number; // per night
+  currency: string;
+}
+
+export interface Beds24RoomInfo {
+  roomId: string;
+  name: string;
+  maxGuests: number;
+  minStay: number;
+  currency: string;
+}
+
+function getRefreshTokenEnvVar(houseId: string): string {
+  if (houseId === "herdweg") return "BEDS24_REFRESH_TOKEN_HERDWEG";
+  if (houseId === "schoenaicher") return "BEDS24_REFRESH_TOKEN_SCHOENAICHER";
+  throw new Error(`No Beds24 refresh token configured for house: ${houseId}`);
+}
+
+function getRefreshToken(houseId: string): string | undefined {
+  return process.env[getRefreshTokenEnvVar(houseId)];
+}
+
+const accessTokenCache = new Map<string, { token: string; expiresAt: number }>();
+
+async function getAccessToken(houseId: string): Promise<string> {
+  const refreshToken = getRefreshToken(houseId);
+  if (!refreshToken) {
+    throw new Error(
+      `${getRefreshTokenEnvVar(houseId)} is not configured for house: ${houseId}`
+    );
+  }
+
+  const cached = accessTokenCache.get(houseId);
+  if (cached && cached.expiresAt > Date.now()) {
+    return cached.token;
+  }
+
+  const response = await fetch(`${BEDS24_API_BASE}/authentication/token`, {
+    method: "GET",
+    headers: { refreshToken },
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Beds24 authentication error for house ${houseId}: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const data: { token: string; expiresIn: number } = await response.json();
+
+  // Refresh a minute early to avoid using a token that expires mid-request.
+  accessTokenCache.set(houseId, {
+    token: data.token,
+    expiresAt: Date.now() + Math.max(data.expiresIn - 60, 30) * 1000,
+  });
+
+  return data.token;
+}
+
+async function beds24Get<T>(
+  houseId: string,
+  path: string,
+  searchParams: Record<string, string | number | boolean | undefined>,
+  revalidateSeconds = 300
+): Promise<T> {
+  const token = await getAccessToken(houseId);
+
+  const url = new URL(`${BEDS24_API_BASE}${path}`);
+  Object.entries(searchParams).forEach(([key, value]) => {
+    if (value !== undefined) url.searchParams.set(key, String(value));
+  });
+
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: { token },
+    // Beds24 explicitly asks integrators to cache rather than call in real time
+    // for every page view; 5 minutes keeps us well within their rate limits
+    // (longer for data that changes rarely, e.g. rate/min-stay lookups).
+    next: { revalidate: revalidateSeconds },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Beds24 API error: ${response.status} ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+async function fetchOffer(
+  houseId: string,
+  propertyId: string,
+  roomId: string,
+  arrival: string,
+  departure: string,
+  numAdults: number,
+  revalidateSeconds?: number
+): Promise<{ price: number; currency: string } | null> {
+  const data = await beds24Get<{
+    data: Array<{
+      roomId: number;
+      propertyId: number;
+      offers?: Array<{ offerId: number; price: number; currency: string }>;
+    }>;
+  }>(
+    houseId,
+    "/inventory/rooms/offers",
+    {
+      propertyId,
+      roomId,
+      arrival,
+      departure,
+      numAdults,
+    },
+    revalidateSeconds
+  );
+
+  const room = data.data?.find((r) => String(r.roomId) === String(roomId));
+  const offer = room?.offers?.[0];
+  return offer ? { price: offer.price, currency: offer.currency } : null;
+}
+
+// Beds24's /inventory/rooms/offers endpoint rejects any request spanning
+// 100+ nights with a generic "Invalid departure" (code 2001) error — verified
+// empirically (99 nights works, 100 doesn't; undocumented, likely an
+// internal limitation on their end). Since this site's whole business model
+// is long-term stays (1–12+ months), we work around it by splitting longer
+// stays into consecutive chunks of at most this many nights each, querying
+// each separately, and summing the results.
+const MAX_NIGHTS_PER_OFFER_REQUEST = 90;
+
+export async function getAvailability(
+  params: Beds24AvailabilityParams
+): Promise<Beds24AvailabilityResponse> {
+  // Fallback: if no refresh token is configured for this house, return mock data
+  // for development.
+  if (!getRefreshToken(params.houseId)) {
+    return {
+      roomId: params.roomId,
+      available: true,
+      price: 85,
+      currency: "EUR",
+    };
+  }
+
+  const nights = Math.max(nightsBetween(params.start, params.end), 1);
+
+  if (nights > MAX_NIGHTS_PER_OFFER_REQUEST) {
+    return getAvailabilityInChunks(params, nights);
+  }
+
+  const offer = await fetchOffer(
+    params.houseId,
+    params.propertyId,
+    params.roomId,
+    params.start,
+    params.end,
+    params.numAdults ?? 1
+  );
+
+  if (!offer) {
+    // No offer can mean the room is genuinely booked/blocked, OR that this
+    // exact stay length doesn't satisfy the active rate's own minimum stay
+    // (which can be higher than the room's base minStay — see
+    // getEffectiveMinStay() below). Either way, it's not bookable as-is.
+    return {
+      roomId: params.roomId,
+      available: false,
+      price: 0,
+      currency: "EUR",
+    };
+  }
+
+  // The offers endpoint returns the total price for the requested date range,
+  // not a per-night rate — divide back down to per-night for our pricing logic.
+  return {
+    roomId: params.roomId,
+    available: true,
+    price: offer.price / nights,
+    currency: offer.currency,
+  };
+}
+
+async function getAvailabilityInChunks(
+  params: Beds24AvailabilityParams,
+  totalNights: number
+): Promise<Beds24AvailabilityResponse> {
+  let cursor = params.start;
+  let remaining = totalNights;
+  let totalPrice = 0;
+  let currency = "EUR";
+
+  while (remaining > 0) {
+    const chunkNights = Math.min(remaining, MAX_NIGHTS_PER_OFFER_REQUEST);
+    const chunkEnd = addDaysToDateString(cursor, chunkNights);
+
+    const offer = await fetchOffer(
+      params.houseId,
+      params.propertyId,
+      params.roomId,
+      cursor,
+      chunkEnd,
+      params.numAdults ?? 1
+    );
+
+    if (!offer) {
+      // Any unavailable/unpriceable chunk makes the whole stay unbookable.
+      return {
+        roomId: params.roomId,
+        available: false,
+        price: 0,
+        currency: "EUR",
+      };
+    }
+
+    totalPrice += offer.price;
+    currency = offer.currency;
+    cursor = chunkEnd;
+    remaining -= chunkNights;
+  }
+
+  return {
+    roomId: params.roomId,
+    available: true,
+    price: totalPrice / totalNights,
+    currency,
+  };
+}
+
+/**
+ * Determines the REAL, effective minimum stay (in nights) for a booking
+ * starting on `arrival`, verified empirically against actual bookability.
+ *
+ * IMPORTANT LESSON LEARNED: Beds24's `/inventory/fixedPrices` only lists ONE
+ * rate row per property in practice, tied to a single roomId — but the same
+ * rate's restrictions (e.g. a 20-night minimum) can still apply to OTHER
+ * rooms in that property too (Beds24 shares/syncs rate rules across rooms
+ * internally without exposing that link via this endpoint). So
+ * `fixedPrices` alone is NOT a reliable source of truth for a given room's
+ * effective minimum stay — it can under-report it.
+ *
+ * The only reliable way to know for sure is to ask
+ * GET /inventory/rooms/offers whether a priced offer actually exists for a
+ * given stay length — that's the real, ground-truth answer a guest would
+ * get. We use `fixedPrices` (if any) purely as an informed first guess to
+ * minimize the number of probes, then verify/binary-search from there.
+ */
+export async function getEffectiveMinStay(
+  houseId: string,
+  propertyId: string,
+  roomId: string,
+  arrival: string,
+  fallback: number,
+  // Kept comfortably below Beds24's undocumented ~99-night ceiling on
+  // /inventory/rooms/offers (see MAX_NIGHTS_PER_OFFER_REQUEST) — realistic
+  // minimum-stay values are always far below this anyway.
+  maxNightsToProbe = 95
+): Promise<number> {
+  if (!getRefreshToken(houseId)) {
+    return fallback;
+  }
+
+  try {
+    // NOTE: each specific "does an offer exist at N nights" probe below is
+    // cached independently by its own URL. A too-long cache window (we used
+    // to use 6 hours) can then make different probes go stale at different
+    // times, so if the host changes the minimum stay mid-window, some probes
+    // reflect the old value and some the new one — producing inconsistent,
+    // "flickering" results. A too-short window (we briefly tried 5 minutes)
+    // instead risks burning through Beds24's rate/credit limit under real
+    // traffic, since a single lookup can cost several requests. 60 minutes
+    // is the agreed middle ground: config changes show up within an hour,
+    // while normal browsing stays well within Beds24's limits.
+    const revalidateSeconds = 60 * 60; // 1 hour
+
+    const [roomInfo, fixedPrices] = await Promise.all([
+      getRoomInfo(houseId, propertyId, roomId, revalidateSeconds),
+      beds24Get<{
+        data: Array<{
+          roomId: number;
+          firstNight: string;
+          lastNight: string;
+          minNights?: number;
+        }>;
+      }>(houseId, "/inventory/fixedPrices", { propertyId }, revalidateSeconds),
+    ]);
+
+    const floor = Math.max(roomInfo.minStay, 1);
+
+    // Any rate (on any room of this property) whose validity range covers
+    // `arrival` gives us an informed guess of what the real minimum might
+    // be — even though Beds24 doesn't reliably tell us it also applies to
+    // THIS room, it's usually right and saves most of the probing below.
+    const arrivalDate = parseDateOnly(arrival);
+    const candidateMinNights = (fixedPrices.data || [])
+      .filter((rate) => {
+        const first = parseDateOnly(rate.firstNight);
+        const last = parseDateOnly(rate.lastNight);
+        return arrivalDate >= first && arrivalDate <= last;
+      })
+      .map((rate) => rate.minNights ?? 0);
+
+    const informedGuess = Math.max(floor, ...candidateMinNights, 0);
+
+    const hasOfferAt = async (nights: number) =>
+      Boolean(
+        await fetchOffer(
+          houseId,
+          propertyId,
+          roomId,
+          arrival,
+          addDaysToDateString(arrival, nights),
+          1,
+          revalidateSeconds
+        )
+      );
+
+    // Fast path: the informed guess is correct (this covers the common case
+    // in just one extra call).
+    if (informedGuess > floor && (await hasOfferAt(informedGuess))) {
+      // Make sure it's really the minimum, not just *a* valid stay length —
+      // if the floor itself doesn't work but something between floor and
+      // the guess does, binary-search that narrower range.
+      if (!(await hasOfferAt(floor))) {
+        let low = floor + 1;
+        let high = informedGuess - 1;
+        let found = informedGuess;
+        while (low <= high) {
+          const mid = Math.floor((low + high) / 2);
+          if (await hasOfferAt(mid)) {
+            found = mid;
+            high = mid - 1;
+          } else {
+            low = mid + 1;
+          }
+        }
+        return found;
+      }
+      return floor;
+    }
+
+    // Otherwise fall back to a full binary search between the room's floor
+    // and a generous upper bound.
+    if (await hasOfferAt(floor)) {
+      return floor;
+    }
+
+    let low = floor + 1;
+    let high = maxNightsToProbe;
+    if (!(await hasOfferAt(high))) {
+      return Math.max(informedGuess, fallback);
+    }
+
+    let found: number | null = null;
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      if (await hasOfferAt(mid)) {
+        found = mid;
+        high = mid - 1;
+      } else {
+        low = mid + 1;
+      }
+    }
+
+    return found ?? fallback;
+  } catch (error) {
+    console.error("Failed to determine effective min stay from Beds24:", error);
+    return fallback;
+  }
+}
+
+export async function getRoomInfo(
+  houseId: string,
+  propertyId: string,
+  roomId: string,
+  revalidateSeconds = 300
+): Promise<Beds24RoomInfo> {
+  if (!getRefreshToken(houseId)) {
+    return {
+      roomId,
+      name: "Apartment",
+      maxGuests: 2,
+      minStay: 20,
+      currency: "EUR",
+    };
+  }
+
+  const data = await beds24Get<{
+    data: Array<{
+      id: number;
+      currency: string;
+      roomTypes: Array<{
+        id: number;
+        name: string;
+        maxPeople?: number;
+        minStay?: number;
+      }>;
+    }>;
+  }>(
+    houseId,
+    "/properties",
+    {
+      propertyId,
+      includeAllRooms: true,
+    },
+    revalidateSeconds
+  );
+
+  const property = data.data?.find((p) => String(p.id) === String(propertyId));
+  const room = property?.roomTypes?.find((r) => String(r.id) === String(roomId));
+
+  if (!room) {
+    throw new Error("Room not found in Beds24");
+  }
+
+  return {
+    roomId,
+    name: room.name,
+    maxGuests: room.maxPeople ?? 2,
+    minStay: room.minStay ?? 20,
+    currency: property?.currency ?? "EUR",
+  };
+}
+
+/**
+ * Convenience wrapper around getRoomInfo() that only returns the minimum
+ * stay (in nights) as configured for this specific room in Beds24, falling
+ * back to `bookingConfig.minStayNights` if Beds24 is unreachable or the room
+ * can't be found — so the rest of the app never has to worry about errors
+ * here.
+ */
+export async function getMinStayNights(
+  houseId: string,
+  propertyId: string,
+  roomId: string,
+  fallback: number
+): Promise<number> {
+  try {
+    const info = await getRoomInfo(houseId, propertyId, roomId);
+    return info.minStay;
+  } catch (error) {
+    console.error("Failed to fetch min stay from Beds24, using fallback:", error);
+    return fallback;
+  }
+}
+
+export async function getBeds24CancellationPolicy(
+  houseId: string,
+  propertyId: string
+): Promise<string> {
+  if (!getRefreshToken(houseId)) {
+    return "Stornierungsbedingungen werden aus Beds24 übernommen.";
+  }
+
+  const data = await beds24Get<{
+    data: Array<{ id: number; policies?: { cancellation?: string } }>;
+  }>(houseId, "/properties", { propertyId });
+
+  const property = data.data?.find((p) => String(p.id) === String(propertyId));
+  return property?.policies?.cancellation || "";
+}
diff --git a/src/lib/date.ts b/src/lib/date.ts
new file mode 100644
index 0000000..0da0fb6
--- /dev/null
+++ b/src/lib/date.ts
@@ -0,0 +1,50 @@
+/**
+ * Date-only ("YYYY-MM-DD") helpers.
+ *
+ * IMPORTANT: Never use `date.toISOString().split("T")[0]` to format a
+ * date-only string — `toISOString()` converts to UTC first, which silently
+ * shifts the calendar day backward by one for anyone in a positive UTC
+ * offset timezone (all of Central Europe, i.e. our actual guests/hosts).
+ * E.g. local midnight Sept 21 in Germany (UTC+2) becomes "2026-09-20" once
+ * converted to UTC. Always use the local-time helpers below instead.
+ */
+
+/** Parses a "YYYY-MM-DD" string as local midnight (not UTC midnight). */
+export function parseDateOnly(dateStr: string): Date {
+  const [year, month, day] = dateStr.split("-").map(Number);
+  return new Date(year, month - 1, day);
+}
+
+/** Formats a Date using its LOCAL date components (no UTC conversion). */
+export function formatDateOnly(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+export function addDays(dateStr: string, days: number): string {
+  const date = parseDateOnly(dateStr);
+  date.setDate(date.getDate() + days);
+  return formatDateOnly(date);
+}
+
+export function addMonths(dateStr: string, months: number): string {
+  const date = parseDateOnly(dateStr);
+  date.setMonth(date.getMonth() + months);
+  return formatDateOnly(date);
+}
+
+/** Tomorrow's date (local), as a "YYYY-MM-DD" string. */
+export function tomorrowDateString(): string {
+  const date = new Date();
+  date.setDate(date.getDate() + 1);
+  return formatDateOnly(date);
+}
+
+/** Number of nights between two "YYYY-MM-DD" strings. */
+export function nightsBetween(startStr: string, endStr: string): number {
+  const start = parseDateOnly(startStr);
+  const end = parseDateOnly(endStr);
+  return Math.round((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+}
diff --git a/src/lib/mail.ts b/src/lib/mail.ts
new file mode 100644
index 0000000..83304b4
--- /dev/null
+++ b/src/lib/mail.ts
@@ -0,0 +1,63 @@
+import nodemailer from "nodemailer";
+
+export interface ContactMessage {
+  email: string;
+  message: string;
+  name?: string;
+  /** Optional context, e.g. the search dates that had no availability. */
+  context?: string;
+}
+
+function getTransport() {
+  const { SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASSWORD } = process.env;
+  if (!SMTP_HOST || !SMTP_USER || !SMTP_PASSWORD) {
+    return null;
+  }
+
+  return nodemailer.createTransport({
+    host: SMTP_HOST,
+    port: Number(SMTP_PORT) || 587,
+    secure: Number(SMTP_PORT) === 465,
+    auth: {
+      user: SMTP_USER,
+      pass: SMTP_PASSWORD,
+    },
+  });
+}
+
+export async function sendContactMessage(data: ContactMessage): Promise<void> {
+  const transport = getTransport();
+  const to = process.env.CONTACT_INBOX_EMAIL || "info@bb-apartment.de";
+  const from = process.env.SMTP_FROM || "noreply@bb-apartment.de";
+
+  const subject = `Neue Kontaktanfrage von ${data.name || data.email}`;
+  const text = [
+    data.context ? `Kontext: ${data.context}` : null,
+    `Name: ${data.name || "-"}`,
+    `E-Mail: ${data.email}`,
+    "",
+    data.message,
+  ]
+    .filter(Boolean)
+    .join("\n");
+
+  if (!transport) {
+    // No SMTP configured yet (development) — log instead of failing so the
+    // form still "works" locally.
+    console.log("[contact] SMTP not configured, would have sent:", {
+      to,
+      from,
+      subject,
+      text,
+    });
+    return;
+  }
+
+  await transport.sendMail({
+    to,
+    from,
+    replyTo: data.email,
+    subject,
+    text,
+  });
+}
diff --git a/src/lib/pricing.ts b/src/lib/pricing.ts
new file mode 100644
index 0000000..addfecc
--- /dev/null
+++ b/src/lib/pricing.ts
@@ -0,0 +1,67 @@
+import { bookingConfig } from "@/src/config/apartments";
+
+export interface PriceCalculation {
+  nights: number;
+  basePricePerNight: number;
+  baseTotal: number;
+  /** Genuine savings vs. a short-term Beds24 rate, for display only — NOT an
+   * additional deduction. The charged amount (`totalAfterDiscount`) always
+   * equals `baseTotal`, i.e. exactly what Beds24 quoted for this stay. */
+  discountPercent: number;
+  discountAmount: number;
+  totalAfterDiscount: number;
+  depositAmount: number;
+  currency: string;
+}
+
+/**
+ * Calculates the real price to charge for a stay, taken as-is from Beds24
+ * (`basePricePerNight` already reflects Beds24's own length-of-stay rates —
+ * we no longer apply any extra discount on our side).
+ *
+ * If `referenceNightlyRate` is provided (the real Beds24 rate for a short
+ * reference stay, see `bookingConfig.referenceStayNights`), we additionally
+ * compute a truthful "you save X% vs. short-term rate" figure purely for
+ * display — this never changes the actual charged total.
+ */
+export function calculatePrice(
+  basePricePerNight: number,
+  nights: number,
+  currency: string = "EUR",
+  referenceNightlyRate?: number
+): PriceCalculation {
+  const baseTotal = basePricePerNight * nights;
+  const totalAfterDiscount = baseTotal; // this IS the real amount to charge
+  const depositAmount = (totalAfterDiscount * bookingConfig.depositPercent) / 100;
+
+  let discountPercent = 0;
+  let discountAmount = 0;
+  if (referenceNightlyRate && referenceNightlyRate > basePricePerNight) {
+    discountPercent = Math.round(
+      (1 - basePricePerNight / referenceNightlyRate) * 100
+    );
+    discountAmount = (referenceNightlyRate - basePricePerNight) * nights;
+  }
+
+  return {
+    nights,
+    basePricePerNight,
+    baseTotal,
+    discountPercent,
+    discountAmount,
+    totalAfterDiscount,
+    depositAmount,
+    currency,
+  };
+}
+
+export function validateMinStay(nights: number): boolean {
+  return nights >= bookingConfig.minStayNights;
+}
+
+export function formatPrice(amount: number, currency: string = "EUR"): string {
+  return new Intl.NumberFormat("de-DE", {
+    style: "currency",
+    currency,
+  }).format(amount);
+}
diff --git a/src/lib/prisma.ts b/src/lib/prisma.ts
new file mode 100644
index 0000000..ef41cd7
--- /dev/null
+++ b/src/lib/prisma.ts
@@ -0,0 +1,9 @@
+import { PrismaClient } from "@prisma/client";
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient();
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
diff --git a/src/lib/stripe.ts b/src/lib/stripe.ts
new file mode 100644
index 0000000..c356025
--- /dev/null
+++ b/src/lib/stripe.ts
@@ -0,0 +1,43 @@
+import Stripe from "stripe";
+import { getHouseById } from "@/src/config/apartments";
+
+export function getStripe(houseId: string): Stripe {
+  const house = getHouseById(houseId);
+  if (!house) {
+    throw new Error(`House not found: ${houseId}`);
+  }
+
+  const accountKey =
+    houseId === "herdweg"
+      ? process.env.STRIPE_SECRET_KEY_HERDWEWEG
+      : process.env.STRIPE_SECRET_KEY_SCHOENAICHER;
+
+  if (!accountKey) {
+    throw new Error(`Stripe secret key not configured for house: ${houseId}`);
+  }
+
+  return new Stripe(accountKey, {
+    apiVersion: "2026-07-29.dahlia",
+  });
+}
+
+export function getStripeWebhookSecret(houseId: string): string {
+  const secret =
+    houseId === "herdweg"
+      ? process.env.STRIPE_WEBHOOK_SECRET_HERDWEWEG
+      : process.env.STRIPE_WEBHOOK_SECRET_SCHOENAICHER;
+
+  if (!secret) {
+    throw new Error(`Stripe webhook secret not configured for house: ${houseId}`);
+  }
+
+  return secret;
+}
+
+export function getStripeAccountId(houseId: string): string {
+  const house = getHouseById(houseId);
+  if (!house) {
+    throw new Error(`House not found: ${houseId}`);
+  }
+  return house.stripeAccountId;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d43da91..0a1892f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -5,13 +5,31 @@ const config: Config = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       colors: {
+        brand: {
+          green: "#7CB342",
+          "green-dark": "#558B2F",
+          "green-light": "#AED581",
+          grey: "#4A4A4A",
+          "grey-dark": "#2C2C2C",
+          "grey-light": "#9E9E9E",
+          "grey-soft": "#F5F5F5",
+          white: "#FFFFFF",
+        },
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
+      fontFamily: {
+        sans: ["var(--font-geist-sans)", "system-ui", "sans-serif"],
+      },
+      borderRadius: {
+        xl: "1rem",
+        "2xl": "1.5rem",
+      },
     },
   },
   plugins: [],