Refactor booking-form: Add compatibility fallback, functional state updates, memoized calculations, and treatment reconciliation

Config: Caddy Log-Level auf INFO setzen
Unterdrückt WARN-Meldungen für normale Live-Subscription disconnects
2025-10-08 18:17:59 +02:00 · 2025-10-08 12:57:41 +02:00 · 2025-10-08 11:24:41 +02:00 · 2025-10-08 11:24:03 +02:00 · 2025-10-08 11:13:59 +02:00 · 2025-10-07 14:15:17 +02:00
24 changed files with 1023 additions and 161 deletions
--- a/1
+++ b/1
@@ -40,6 +40,7 @@ stargirlnails.de {
    log {
        output file /var/log/caddy/access.log
        format json
        level INFO
    }
    # Favicon-Konfiguration (innerhalb der Hauptdomain)
--- a/index.html
+++ b/index.html
@@ -3,7 +3,13 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#ec4899" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Stargirlnails" />
    <title>Stargirlnails Kiel - Terminbuchung</title>
  </head>
  <body>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "quests-template-basic",
  "private": true,
-  "version": "0.0.0",
+  "version": "0.1.4",
  "type": "module",
  "scripts": {
    "check:types": "tsc --noEmit",
--- a/public/icons/README.md
+++ b/public/icons/README.md
@@ -0,0 +1,45 @@
 # PWA Icons Required
 This directory must contain the following icon files for proper PWA installation on iOS and Android devices:
 ## Required Icon Files
 ### Android Icons
 - **icon-192x192.png** (192×192 pixels)
  - Used for Android home screen and app drawer
  - Should have transparent background or match theme color
  - Include safe zone padding for maskable icons (40px margin)
 - **icon-512x512.png** (512×512 pixels)
  - Used for Android splash screens and high-resolution displays
  - Should have transparent background or match theme color
  - Include safe zone padding for maskable icons (102px margin)
 ### iOS Icon
 - **apple-touch-icon.png** (180×180 pixels)
  - Used for iOS home screen
  - Should NOT have transparent background (iOS adds its own rounded corners)
  - Fill entire canvas with brand colors/logo
  - iOS automatically applies rounded corners and shadow
 ## Design Guidelines
 1. **Brand consistency**: Use Stargirlnails logo and brand colors
 2. **Theme color**: Primary pink (#ec4899) matches manifest theme_color
 3. **Contrast**: Ensure icon is visible on various backgrounds
 4. **Simplicity**: Icons should be recognizable at small sizes
 5. **No text**: Avoid small text that becomes unreadable when scaled
 ## Testing
 After adding icons:
 - Test on Android: Check home screen icon appearance
 - Test on iOS Safari: Add to home screen and verify icon quality
 - Validate with Lighthouse PWA audit
 ## Placeholder
 Until actual icons are created, you can use a favicon.png (if available) or generate placeholder icons using tools like:
 - https://realfavicongenerator.net/
 - https://www.pwabuilder.com/imageGenerator
--- a/public/icons/apple-touch-icon.png
+++ b/public/icons/apple-touch-icon.png
--- a/public/icons/icon-192x192.png
+++ b/public/icons/icon-192x192.png
--- a/public/icons/icon-512x512.png
+++ b/public/icons/icon-512x512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,32 @@
 {
  "name": "Stargirlnails Kiel - Terminbuchung",
  "short_name": "Stargirlnails",
  "description": "Online Terminbuchung für Nagelstudio Stargirlnails in Kiel",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ec4899",
  "orientation": "portrait",
  "lang": "de",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ]
 }
--- a/server-dist/index.js
+++ b/server-dist/index.js
@@ -55,6 +55,9 @@ if (process.env.NODE_ENV === 'production') {
    app.use('/assets/*', serveStatic({ root: './dist' }));
 }
 app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
 app.use('/AGB.pdf', serveStatic({ path: './public/AGB.pdf' }));
 app.use('/icons/*', serveStatic({ root: './public' }));
 app.use('/manifest.json', serveStatic({ path: './public/manifest.json' }));
 app.route("/rpc", rpcApp);
 app.route("/caldav", caldavApp);
 app.get("/*", clientEntry);
--- a/server-dist/lib/email-templates.js
+++ b/server-dist/lib/email-templates.js
@@ -28,13 +28,17 @@ async function renderBrandedEmail(title, bodyHtml) {
    const domain = process.env.DOMAIN || 'localhost:5173';
    const protocol = domain.includes('localhost') ? 'http' : 'https';
    const homepageUrl = `${protocol}://${domain}`;
    const instagramProfile = process.env.INSTAGRAM_PROFILE;
    const tiktokProfile = process.env.TIKTOK_PROFILE;
    const companyName = process.env.COMPANY_NAME || 'Stargirlnails Kiel';
    return `
  <div style="font-family: Arial, sans-serif; color: #0f172a; background:#fdf2f8; padding:24px;">
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:640px; margin:0 auto; background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06)">
      <tr>
        <td style="padding:24px 24px 0 24px; text-align:center;">
-          ${logo ? `<img src="${logo}" alt="Stargirlnails" style="width:120px; height:auto; display:inline-block;" />` : `<div style=\"font-size:24px\">💅</div>`}
+          ${logo ? `<img src="${logo}" alt="${companyName}" style="width:120px; height:auto; display:inline-block;" />` : `<div style=\"font-size:24px\">💅</div>`}
-          <h1 style="margin:16px 0 0 0; font-size:22px; color:#db2777;">${title}</h1>
+          <div style="margin:16px 0 4px 0; font-size:16px; font-weight:600; color:#64748b;">${companyName}</div>
          <h1 style="margin:0; font-size:22px; color:#db2777;">${title}</h1>
        </td>
      </tr>
      <tr>
@@ -46,6 +50,29 @@ async function renderBrandedEmail(title, bodyHtml) {
          <div style="text-align:center; margin-bottom:16px;">
            <a href="${homepageUrl}" style="display: inline-block; background-color: #db2777; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 14px;">Zur Website</a>
          </div>
          ${(instagramProfile || tiktokProfile) ? `
          <div style="text-align:center; margin-bottom:16px;">
            <p style="font-size:14px; color:#64748b; margin:0 0 8px 0;">Folge uns auf Social Media:</p>
            <div style="display:inline-block;">
              ${instagramProfile ? `
              <a href="${instagramProfile}" target="_blank" rel="noopener noreferrer" style="display:inline-block; margin:0 6px; background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color:white; padding:10px 20px; text-decoration:none; border-radius:20px; font-size:14px; font-weight:600;">
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:6px;">
                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                </svg>
                Instagram
              </a>
              ` : ''}
              ${tiktokProfile ? `
              <a href="${tiktokProfile}" target="_blank" rel="noopener noreferrer" style="display:inline-block; margin:0 6px; background:#000000; color:white; padding:10px 20px; text-decoration:none; border-radius:20px; font-size:14px; font-weight:600;">
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:6px;">
                  <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                </svg>
                TikTok
              </a>
              ` : ''}
            </div>
          </div>
          ` : ''}
          <div style="font-size:12px; color:#64748b; text-align:center;">
            &copy; ${new Date().getFullYear()} Stargirlnails Kiel • Professional Nail Care
          </div>
@@ -256,3 +283,35 @@ export async function renderAdminRescheduleExpiredHTML(params) {
  `;
    return renderBrandedEmail("Abgelaufene Terminänderungsvorschläge", inner);
 }
 export async function renderCustomerMessageHTML(params) {
    const { customerName, message, appointmentDate, appointmentTime, treatmentName } = params;
    const formattedDate = appointmentDate ? formatDateGerman(appointmentDate) : null;
    const domain = process.env.DOMAIN || 'localhost:5173';
    const protocol = domain.includes('localhost') ? 'http' : 'https';
    const legalUrl = `${protocol}://${domain}/legal`;
    const ownerName = process.env.OWNER_NAME || 'Stargirlnails Kiel';
    const inner = `
    <p>Hallo ${customerName},</p>
    ${(appointmentDate && appointmentTime && treatmentName) ? `
    <div style="background-color: #f8fafc; border-left: 4px solid #db2777; padding: 16px; margin: 20px 0; border-radius: 4px;">
      <p style="margin: 0; font-weight: 600; color: #db2777;">📅 Zu deinem Termin:</p>
      <ul style="margin: 8px 0 0 0; color: #475569; list-style: none; padding: 0;">
        <li><strong>Behandlung:</strong> ${treatmentName}</li>
        <li><strong>Datum:</strong> ${formattedDate}</li>
        <li><strong>Uhrzeit:</strong> ${appointmentTime}</li>
      </ul>
    </div>
    ` : ''}
    <div style="background-color: #fef9f5; border-left: 4px solid #f59e0b; padding: 16px; margin: 20px 0; border-radius: 4px;">
      <p style="margin: 0; font-weight: 600; color: #f59e0b;">💬 Nachricht von ${ownerName}:</p>
      <div style="margin: 12px 0 0 0; color: #475569; white-space: pre-wrap; line-height: 1.6;">${message.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
    </div>
    <p>Bei Fragen oder Anliegen kannst du einfach auf diese E-Mail antworten – wir helfen dir gerne weiter!</p>
    <div style="background-color: #f8fafc; border-left: 4px solid #3b82f6; padding: 16px; margin: 20px 0; border-radius: 4px;">
      <p style="margin: 0; font-weight: 600; color: #3b82f6;">📋 Rechtliche Informationen:</p>
      <p style="margin: 8px 0 12px 0; color: #475569;">Weitere Informationen findest du in unserem <a href="${legalUrl}" style="color: #3b82f6; text-decoration: underline;">Impressum und Datenschutz</a>.</p>
    </div>
    <p>Liebe Grüße,<br/>${ownerName}</p>
  `;
    return renderBrandedEmail("Nachricht zu deinem Termin", inner);
 }
--- a/server-dist/lib/email.js
+++ b/server-dist/lib/email.js
@@ -97,28 +97,33 @@ export async function sendEmail(params) {
        console.warn("Resend API key not configured. Skipping email send.");
        return { success: false };
    }
    const payload = {
        from: params.from || DEFAULT_FROM,
        to: Array.isArray(params.to) ? params.to : [params.to],
        subject: params.subject,
        text: params.text,
        html: params.html,
        cc: params.cc ? (Array.isArray(params.cc) ? params.cc : [params.cc]) : undefined,
        bcc: params.bcc ? (Array.isArray(params.bcc) ? params.bcc : [params.bcc]) : undefined,
        reply_to: params.replyTo ? (Array.isArray(params.replyTo) ? params.replyTo : [params.replyTo]) : undefined,
        attachments: params.attachments,
    };
    console.log(`Sending email via Resend: to=${JSON.stringify(payload.to)}, subject="${params.subject}"`);
    const response = await fetch("https://api.resend.com/emails", {
        method: "POST",
        headers: {
            "Authorization": `Bearer ${RESEND_API_KEY}`,
            "Content-Type": "application/json",
        },
-        body: JSON.stringify({
+        body: JSON.stringify(payload),
            from: params.from || DEFAULT_FROM,
            to: Array.isArray(params.to) ? params.to : [params.to],
            subject: params.subject,
            text: params.text,
            html: params.html,
            cc: params.cc ? (Array.isArray(params.cc) ? params.cc : [params.cc]) : undefined,
            bcc: params.bcc ? (Array.isArray(params.bcc) ? params.bcc : [params.bcc]) : undefined,
            attachments: params.attachments,
        }),
    });
    if (!response.ok) {
        const body = await response.text().catch(() => "");
        console.error("Resend send error:", response.status, body);
        return { success: false };
    }
    const responseData = await response.json().catch(() => ({}));
    console.log("Resend email sent successfully:", responseData);
    return { success: true };
 }
 export async function sendEmailWithAGB(params) {
--- a/server-dist/routes/client-entry.js
+++ b/server-dist/routes/client-entry.js
@@ -24,5 +24,5 @@ export function clientEntry(c) {
            cssFiles = ["/assets/index-RdX4PbOO.css"];
        }
    }
-    return c.html(_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { content: "width=device-width, initial-scale=1", name: "viewport" }), _jsx("title", { children: "Stargirlnails Kiel" }), _jsx("link", { rel: "icon", type: "image/png", href: "/favicon.png" }), cssFiles && cssFiles.map((css) => (_jsx("link", { rel: "stylesheet", href: css }, css))), process.env.NODE_ENV === 'production' ? (_jsx("script", { src: jsFile, type: "module" })) : (_jsxs(_Fragment, { children: [_jsx("script", { src: "/@vite/client", type: "module" }), _jsx("script", { src: jsFile, type: "module" })] }))] }), _jsx("body", { children: _jsx("div", { id: "root" }) })] }));
+    return c.html(_jsxs("html", { lang: "de", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { content: "width=device-width, initial-scale=1", name: "viewport" }), _jsx("meta", { name: "theme-color", content: "#ec4899" }), _jsx("meta", { name: "apple-mobile-web-app-capable", content: "yes" }), _jsx("meta", { name: "apple-mobile-web-app-status-bar-style", content: "default" }), _jsx("meta", { name: "apple-mobile-web-app-title", content: "Stargirlnails" }), _jsx("title", { children: "Stargirlnails Kiel" }), _jsx("link", { rel: "icon", type: "image/png", href: "/favicon.png" }), _jsx("link", { rel: "apple-touch-icon", href: "/icons/apple-touch-icon.png" }), _jsx("link", { rel: "manifest", href: "/manifest.json" }), cssFiles && cssFiles.map((css) => (_jsx("link", { rel: "stylesheet", href: css }, css))), process.env.NODE_ENV === 'production' ? (_jsx("script", { src: jsFile, type: "module" })) : (_jsxs(_Fragment, { children: [_jsx("script", { src: "/@vite/client", type: "module" }), _jsx("script", { src: jsFile, type: "module" })] }))] }), _jsx("body", { children: _jsx("div", { id: "root" }) })] }));
 }
--- a/server-dist/rpc/bookings.js
+++ b/server-dist/rpc/bookings.js
@@ -3,7 +3,7 @@ import { z } from "zod";
 import { randomUUID } from "crypto";
 import { createKV } from "../lib/create-kv.js";
 import { sendEmail, sendEmailWithAGBAndCalendar, sendEmailWithInspirationPhoto } from "../lib/email.js";
-import { renderBookingPendingHTML, renderBookingConfirmedHTML, renderBookingCancelledHTML, renderAdminBookingNotificationHTML, renderBookingRescheduleProposalHTML, renderAdminRescheduleAcceptedHTML, renderAdminRescheduleDeclinedHTML } from "../lib/email-templates.js";
+import { renderBookingPendingHTML, renderBookingConfirmedHTML, renderBookingCancelledHTML, renderAdminBookingNotificationHTML, renderBookingRescheduleProposalHTML, renderAdminRescheduleAcceptedHTML, renderAdminRescheduleDeclinedHTML, renderCustomerMessageHTML } from "../lib/email-templates.js";
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
 import { checkBookingRateLimit } from "../lib/rate-limiter.js";
@@ -745,4 +745,63 @@ export const router = {
            }
        };
    }),
    // Admin sendet Nachricht an Kunden
    sendCustomerMessage: os
        .input(z.object({
        sessionId: z.string(),
        bookingId: z.string(),
        message: z.string().min(1, "Nachricht darf nicht leer sein").max(5000, "Nachricht ist zu lang (max. 5000 Zeichen)"),
    }))
        .handler(async ({ input }) => {
        await assertOwner(input.sessionId);
        const booking = await kv.getItem(input.bookingId);
        if (!booking)
            throw new Error("Buchung nicht gefunden");
        // Check if booking has customer email
        if (!booking.customerEmail) {
            throw new Error("Diese Buchung hat keine E-Mail-Adresse. Bitte kontaktiere den Kunden telefonisch.");
        }
        // Check if booking is in the future
        const today = new Date().toISOString().split("T")[0];
        const bookingDate = booking.appointmentDate;
        if (bookingDate < today) {
            throw new Error("Nachrichten können nur für zukünftige Termine gesendet werden.");
        }
        // Get treatment name for context
        const treatment = await treatmentsKV.getItem(booking.treatmentId);
        const treatmentName = treatment?.name || "Behandlung";
        // Prepare email with Reply-To header
        const ownerName = process.env.OWNER_NAME || "Stargirlnails Kiel";
        const emailFrom = process.env.EMAIL_FROM || "Stargirlnails <no-reply@stargirlnails.de>";
        const replyToEmail = process.env.ADMIN_EMAIL;
        const formattedDate = formatDateGerman(bookingDate);
        const html = await renderCustomerMessageHTML({
            customerName: booking.customerName,
            message: input.message,
            appointmentDate: bookingDate,
            appointmentTime: booking.appointmentTime,
            treatmentName: treatmentName,
        });
        const textContent = `Hallo ${booking.customerName},\n\nZu deinem Termin:\nBehandlung: ${treatmentName}\nDatum: ${formattedDate}\nUhrzeit: ${booking.appointmentTime}\n\nNachricht von ${ownerName}:\n${input.message}\n\nBei Fragen oder Anliegen kannst du einfach auf diese E-Mail antworten – wir helfen dir gerne weiter!\n\nLiebe Grüße,\n${ownerName}`;
        // Send email with BCC to admin for monitoring
        // Note: Not using explicit 'from' or 'replyTo' to match behavior of other system emails
        console.log(`Sending customer message to ${booking.customerEmail} for booking ${input.bookingId}`);
        console.log(`Email config: from=${emailFrom}, replyTo=${replyToEmail}, bcc=${replyToEmail}`);
        const emailResult = await sendEmail({
            to: booking.customerEmail,
            subject: `Nachricht zu deinem Termin am ${formattedDate}`,
            text: textContent,
            html: html,
            bcc: replyToEmail ? [replyToEmail] : undefined,
        });
        if (!emailResult.success) {
            console.error(`Failed to send customer message to ${booking.customerEmail}`);
            throw new Error("E-Mail konnte nicht versendet werden. Bitte überprüfe die E-Mail-Konfiguration oder versuche es später erneut.");
        }
        console.log(`Successfully sent customer message to ${booking.customerEmail}`);
        return {
            success: true,
            message: `Nachricht wurde erfolgreich an ${booking.customerEmail} gesendet.`
        };
    }),
 };
--- a/server-dist/rpc/index.js
+++ b/server-dist/rpc/index.js
@@ -7,6 +7,7 @@ import { router as cancellation } from "./cancellation.js";
 import { router as legal } from "./legal.js";
 import { router as gallery } from "./gallery.js";
 import { router as reviews } from "./reviews.js";
 import { router as social } from "./social.js";
 export const router = {
    demo,
    treatments,
@@ -17,4 +18,5 @@ export const router = {
    legal,
    gallery,
    reviews,
    social,
 };
--- a/server-dist/rpc/social.js
+++ b/server-dist/rpc/social.js
@@ -0,0 +1,10 @@
 import { os } from "@orpc/server";
 const getSocialMedia = os.handler(async () => {
    return {
        tiktokProfile: process.env.TIKTOK_PROFILE,
        instagramProfile: process.env.INSTAGRAM_PROFILE,
    };
 });
 export const router = os.router({
    getSocialMedia,
 });
--- a/src/client/app.tsx
+++ b/src/client/app.tsx
@@ -16,6 +16,7 @@ import BookingStatusPage from "@/client/components/booking-status-page";
 import ReviewSubmissionPage from "@/client/components/review-submission-page";
 import LegalPage from "@/client/components/legal-page";
 import { ProfileLanding } from "@/client/components/profile-landing";
 import { PWAInstallPrompt } from "@/client/components/pwa-install-prompt";
 function App() {
  const { user, isLoading, isOwner } = useAuth();
@@ -36,10 +37,15 @@ function App() {
  // Handle booking status page
  const path = window.location.pathname;
  const PwaPrompt = <PWAInstallPrompt />;
  if (path.startsWith('/booking/')) {
    const token = path.split('/booking/')[1];
    if (token) {
-      return <BookingStatusPage token={token} />;
+      return <>
        {PwaPrompt}
        <BookingStatusPage token={token} />
      </>;
    }
  }
@@ -47,7 +53,10 @@ function App() {
  if (path.startsWith('/review/')) {
    const token = path.split('/review/')[1];
    if (token) {
-      return <ReviewSubmissionPage token={token} />;
+      return <>
        {PwaPrompt}
        <ReviewSubmissionPage token={token} />
      </>;
    }
  }
@@ -381,6 +390,9 @@ function App() {
        )}
      </main>
      {/* PWA Installation Prompt for iOS */}
      <PWAInstallPrompt hidden={isMobileMenuOpen} />
      {/* Footer */}
      <footer className="bg-white border-t border-pink-100 mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
--- a/src/client/components/admin-bookings.tsx
+++ b/src/client/components/admin-bookings.tsx
@@ -7,6 +7,8 @@ export function AdminBookings() {
  const [selectedPhoto, setSelectedPhoto] = useState<string>("");
  const [showPhotoModal, setShowPhotoModal] = useState(false);
  const [showCancelConfirm, setShowCancelConfirm] = useState<string | null>(null);
  const [showMessageModal, setShowMessageModal] = useState<string | null>(null);
  const [messageText, setMessageText] = useState<string>("");
  const [successMsg, setSuccessMsg] = useState<string>("");
  const [errorMsg, setErrorMsg] = useState<string>("");
@@ -49,6 +51,19 @@ export function AdminBookings() {
    })
  );
  const { mutate: sendMessage, isPending: isSendingMessage } = useMutation(
    queryClient.bookings.sendCustomerMessage.mutationOptions({
      onSuccess: () => {
        setSuccessMsg("Nachricht wurde erfolgreich gesendet.");
        setShowMessageModal(null);
        setMessageText("");
      },
      onError: (error: any) => {
        setErrorMsg(error?.message || "Fehler beim Senden der Nachricht.");
      }
    })
  );
  const getTreatmentName = (treatmentId: string) => {
     return treatments?.find(t => t.id === treatmentId)?.name || "Unbekannte Behandlung";
  };
@@ -83,6 +98,35 @@ export function AdminBookings() {
    setSelectedPhoto("");
  };
  const openMessageModal = (bookingId: string) => {
    setShowMessageModal(bookingId);
    setMessageText("");
  };
  const closeMessageModal = () => {
    setShowMessageModal(null);
    setMessageText("");
  };
  const handleSendMessage = () => {
    if (!showMessageModal || !messageText.trim()) {
      setErrorMsg("Bitte gib eine Nachricht ein.");
      return;
    }
    sendMessage({
      sessionId: localStorage.getItem("sessionId") || "",
      bookingId: showMessageModal,
      message: messageText.trim(),
    });
  };
  // Check if booking is in the future
  const isFutureBooking = (appointmentDate: string) => {
    const today = new Date().toISOString().split("T")[0];
    return appointmentDate >= today;
  };
  const filteredBookings = bookings?.filter(booking => 
    selectedDate ? booking.appointmentDate === selectedDate : true
  ).sort((a, b) => {
@@ -251,45 +295,57 @@ export function AdminBookings() {
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                  <div className="flex space-x-2">
+                  <div className="flex flex-col space-y-2">
-                    {booking.status === "pending" && (
+                    <div className="flex space-x-2">
-                      <>
+                      {booking.status === "pending" && (
                        <>
                          <button
                            onClick={() => updateBookingStatus({ sessionId: localStorage.getItem("sessionId") || "", id: booking.id, status: "confirmed" })}
                            className="text-green-600 hover:text-green-900"
                          >
                            Confirm
                          </button>
                          <button
                            onClick={() => setShowCancelConfirm(booking.id)}
                            className="text-red-600 hover:text-red-900"
                          >
                            Cancel
                          </button>
                        </>
                      )}
                      {booking.status === "confirmed" && (
                        <>
                          <button
                            onClick={() => updateBookingStatus({ sessionId: localStorage.getItem("sessionId") || "", id: booking.id, status: "completed" })}
                            className="text-blue-600 hover:text-blue-900"
                          >
                            Complete
                          </button>
                          <button
                            onClick={() => setShowCancelConfirm(booking.id)}
                            className="text-red-600 hover:text-red-900"
                          >
                            Cancel
                          </button>
                        </>
                      )}
                      {(booking.status === "cancelled" || booking.status === "completed") && (
                        <button
                          onClick={() => updateBookingStatus({ sessionId: localStorage.getItem("sessionId") || "", id: booking.id, status: "confirmed" })}
                          className="text-green-600 hover:text-green-900"
                        >
-                          Confirm
+                          Reactivate
                        </button>
-                        <button
+                      )}
-                          onClick={() => setShowCancelConfirm(booking.id)}
+                    </div>
-                          className="text-red-600 hover:text-red-900"
+                    {/* Show message button for future bookings with email */}
-                        >
+                    {isFutureBooking(booking.appointmentDate) && booking.customerEmail && (
                          Cancel
                        </button>
                      </>
                    )}
                    {booking.status === "confirmed" && (
                      <>
                        <button
                          onClick={() => updateBookingStatus({ sessionId: localStorage.getItem("sessionId") || "", id: booking.id, status: "completed" })}
                          className="text-blue-600 hover:text-blue-900"
                        >
                          Complete
                        </button>
                        <button
                          onClick={() => setShowCancelConfirm(booking.id)}
                          className="text-red-600 hover:text-red-900"
                        >
                          Cancel
                        </button>
                      </>
                    )}
                    {(booking.status === "cancelled" || booking.status === "completed") && (
                      <button
-                        onClick={() => updateBookingStatus({ sessionId: localStorage.getItem("sessionId") || "", id: booking.id, status: "confirmed" })}
+                        onClick={() => openMessageModal(booking.id)}
-                        className="text-green-600 hover:text-green-900"
+                        className="text-pink-600 hover:text-pink-900 text-left"
                        title="Nachricht an Kunden senden"
                      >
-                        Reactivate
+                        💬 Nachricht
                      </button>
                    )}
                  </div>
@@ -369,6 +425,87 @@ export function AdminBookings() {
          </div>
        </div>
      )}
      {/* Message Modal */}
      {showMessageModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium text-gray-900">Nachricht an Kunden senden</h3>
              <button
                onClick={closeMessageModal}
                className="text-gray-400 hover:text-gray-600 text-2xl"
                disabled={isSendingMessage}
              >
                ×
              </button>
            </div>
            {(() => {
              const booking = bookings?.find(b => b.id === showMessageModal);
              if (!booking) return null;
              return (
                <div className="mb-4 bg-gray-50 p-4 rounded-md">
                  <p className="text-sm text-gray-700">
                    <strong>Kunde:</strong> {booking.customerName}
                  </p>
                  <p className="text-sm text-gray-700">
                    <strong>E-Mail:</strong> {booking.customerEmail}
                  </p>
                  <p className="text-sm text-gray-700">
                    <strong>Termin:</strong> {new Date(booking.appointmentDate).toLocaleDateString()} um {booking.appointmentTime}
                  </p>
                  <p className="text-sm text-gray-700">
                    <strong>Behandlung:</strong> {getTreatmentName(booking.treatmentId)}
                  </p>
                </div>
              );
            })()}
            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Deine Nachricht
              </label>
              <textarea
                value={messageText}
                onChange={(e) => setMessageText(e.target.value)}
                placeholder="Schreibe hier deine Nachricht an den Kunden..."
                rows={6}
                maxLength={5000}
                className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
                disabled={isSendingMessage}
              />
              <p className="text-xs text-gray-500 mt-1">
                {messageText.length} / 5000 Zeichen
              </p>
            </div>
            <div className="bg-blue-50 border-l-4 border-blue-400 p-3 mb-4">
              <p className="text-sm text-blue-700">
                💡 <strong>Hinweis:</strong> Der Kunde kann direkt auf diese E-Mail antworten. Die Antwort geht an die in den Einstellungen hinterlegte Admin-E-Mail-Adresse.
              </p>
            </div>
            <div className="flex space-x-3">
              <button
                onClick={handleSendMessage}
                disabled={isSendingMessage || !messageText.trim()}
                className="flex-1 bg-pink-600 text-white py-2 px-4 rounded-md hover:bg-pink-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed"
              >
                {isSendingMessage ? "Wird gesendet..." : "Nachricht senden"}
              </button>
              <button
                onClick={closeMessageModal}
                disabled={isSendingMessage}
                className="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300 transition-colors disabled:bg-gray-100 disabled:cursor-not-allowed"
              >
                Abbrechen
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
 }
--- a/src/client/components/booking-form.tsx
+++ b/src/client/components/booking-form.tsx
@@ -1,9 +1,12 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { queryClient } from "@/client/rpc-client";
 // Feature flag for multi-treatments availability API compatibility
 const USE_MULTI_TREATMENTS_AVAILABILITY = false;
 export function BookingForm() {
-  const [selectedTreatment, setSelectedTreatment] = useState("");
+  const [selectedTreatments, setSelectedTreatments] = useState<Array<{id: string, name: string, duration: number, price: number}>>([]);
  const [customerName, setCustomerName] = useState("");
  const [customerEmail, setCustomerEmail] = useState("");
  const [customerPhone, setCustomerPhone] = useState("");
@@ -62,29 +65,80 @@ export function BookingForm() {
    queryClient.treatments.live.list.experimental_liveOptions()
  );
-  // Dynamische Verfügbarkeitsabfrage für das gewählte Datum und die Behandlung
+  // Comment 3: Compute total duration and price once per render
  const totalDuration = useMemo(
    () => selectedTreatments.reduce((sum, t) => sum + t.duration, 0),
    [selectedTreatments]
  );
  const totalPrice = useMemo(
    () => selectedTreatments.reduce((sum, t) => sum + t.price, 0),
    [selectedTreatments]
  );
  // Comment 1: Dynamische Verfügbarkeitsabfrage mit Kompatibilitäts-Fallback
  const availabilityQueryInput = USE_MULTI_TREATMENTS_AVAILABILITY
    ? { date: appointmentDate, treatmentIds: selectedTreatments.map(t => t.id) }
    : { date: appointmentDate, treatmentId: selectedTreatments[0]?.id ?? "" };
  const availabilityQueryEnabled = USE_MULTI_TREATMENTS_AVAILABILITY
    ? !!appointmentDate && selectedTreatments.length > 0
    : !!appointmentDate && selectedTreatments.length > 0;
  const { data: availableTimes, isLoading, isFetching, error } = useQuery({
    ...queryClient.recurringAvailability.getAvailableTimes.queryOptions({ 
-      input: {
+      input: availabilityQueryInput as any
        date: appointmentDate, 
        treatmentId: selectedTreatment 
      }
    }),
-    enabled: !!appointmentDate && !!selectedTreatment
+    enabled: availabilityQueryEnabled
  });
  const { mutate: createBooking, isPending } = useMutation(
    queryClient.bookings.create.mutationOptions()
  );
-  const selectedTreatmentData = treatments?.find((t) => t.id === selectedTreatment);
+  // Comment 2: Handle treatment checkbox toggle with functional state updates
-
+  const handleTreatmentToggle = (treatment: {id: string, name: string, duration: number, price: number}) => {
-  // Clear selectedTime when treatment changes
+    setSelectedTreatments((prev) => {
-  const handleTreatmentChange = (treatmentId: string) => {
+      const isSelected = prev.some(t => t.id === treatment.id);
-    setSelectedTreatment(treatmentId);
+      
      if (isSelected) {
        // Remove from selection
        return prev.filter(t => t.id !== treatment.id);
      } else if (prev.length < 3) {
        // Add to selection (only if limit not reached)
        return [...prev, {
          id: treatment.id,
          name: treatment.name,
          duration: treatment.duration,
          price: treatment.price
        }];
      }
      // Return unchanged if limit reached
      return prev;
    });
    // Clear selected time when treatments change
    setSelectedTime("");
  };
  // Comment 4: Reconcile selectedTreatments when treatments list changes
  useEffect(() => {
    if (!treatments) return;
    setSelectedTreatments((prev) => {
      const validTreatments = prev.filter((selected) =>
        treatments.some((t) => t.id === selected.id)
      );
      // Only update state if something changed to avoid unnecessary re-renders
      if (validTreatments.length !== prev.length) {
        return validTreatments;
      }
      return prev;
    });
  }, [treatments]);
  // Clear selectedTime when it becomes invalid
  useEffect(() => {
    if (selectedTime && availableTimes && !availableTimes.includes(selectedTime)) {
@@ -173,7 +227,7 @@ export function BookingForm() {
    setErrorMessage(""); // Clear any previous error messages
    // console.log("Form submitted with data:", {
-    //   selectedTreatment,
+    //   selectedTreatments,
    //   customerName,
    //   customerEmail,
    //   customerPhone,
@@ -182,8 +236,12 @@ export function BookingForm() {
    //   agbAccepted
    // });
-    if (!selectedTreatment || !customerName || !customerEmail || !customerPhone || !appointmentDate || !selectedTime) {
+    if (selectedTreatments.length === 0 || !customerName || !customerEmail || !customerPhone || !appointmentDate || !selectedTime) {
-      setErrorMessage("Bitte fülle alle erforderlichen Felder aus.");
+      if (selectedTreatments.length === 0) {
        setErrorMessage("Bitte wähle mindestens eine Behandlung aus.");
      } else {
        setErrorMessage("Bitte fülle alle erforderlichen Felder aus.");
      }
      return;
    }
    if (!agbAccepted) {
@@ -198,7 +256,7 @@ export function BookingForm() {
    // Email validation now handled in backend before booking creation
    const appointmentTime = selectedTime;
    // console.log("Creating booking with data:", {
-    //   treatmentId: selectedTreatment,
+    //   treatments: selectedTreatments,
    //   customerName,
    //   customerEmail,
    //   customerPhone,
@@ -209,7 +267,7 @@ export function BookingForm() {
    // });
    createBooking(
      {
-        treatmentId: selectedTreatment,
+        treatments: selectedTreatments,
        customerName,
        customerEmail,
        customerPhone,
@@ -220,7 +278,7 @@ export function BookingForm() {
      },
      {
        onSuccess: () => {
-          setSelectedTreatment("");
+          setSelectedTreatments([]);
          setCustomerName("");
          setCustomerEmail("");
          setCustomerPhone("");
@@ -265,24 +323,65 @@ export function BookingForm() {
      <form onSubmit={handleSubmit} className="space-y-6">
        {/* Treatment Selection */}
        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
+          <div className="flex justify-between items-center mb-2">
-            Behandlung auswählen *
+            <label className="block text-sm font-medium text-gray-700">
-          </label>
+              Behandlungen auswählen (1-3) *
-          <select
+            </label>
-            value={selectedTreatment}
+            <span className="text-sm text-gray-600">
-            onChange={(e) => handleTreatmentChange(e.target.value)}
+              {selectedTreatments.length} von 3 ausgewählt
-            className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
+            </span>
-            required
+          </div>
-          >
+          
-            <option value="">Wähle eine Behandlung</option>
+          {/* Checkbox List Container */}
-            {treatments?.map((treatment) => (
+          <div className="max-h-96 overflow-y-auto border border-gray-300 rounded-md p-3 space-y-2" aria-label="Wähle bis zu 3 Behandlungen">
-              <option key={treatment.id} value={treatment.id}>
+            {treatments?.map((treatment) => {
-                {treatment.name} - {(treatment.price / 100).toFixed(2)} € ({treatment.duration} Min)
+              const isSelected = selectedTreatments.some(t => t.id === treatment.id);
-              </option>
+              const isDisabled = selectedTreatments.length >= 3 && !isSelected;
-            ))}
+              
-          </select>
+              return (
-          {selectedTreatmentData && (
+                <div key={treatment.id} className="flex items-start space-x-3">
-            <p className="mt-2 text-sm text-gray-600">{selectedTreatmentData.description}</p>
+                  <input
                    type="checkbox"
                    id={`treatment-${treatment.id}`}
                    checked={isSelected}
                    disabled={isDisabled}
                    onChange={() => handleTreatmentToggle({
                      id: treatment.id,
                      name: treatment.name,
                      duration: treatment.duration,
                      price: treatment.price
                    })}
                    className="h-4 w-4 text-pink-600 border-gray-300 rounded flex-shrink-0 mt-1"
                  />
                  <label htmlFor={`treatment-${treatment.id}`} className={`flex-1 text-sm cursor-pointer ${isDisabled ? 'text-gray-400' : 'text-gray-700'}`}>
                    {treatment.name} - {treatment.duration} Min - {(treatment.price / 100).toFixed(2)} €
                  </label>
                </div>
              );
            })}
          </div>
          {/* Treatment Descriptions */}
          {selectedTreatments.length > 0 && (
            <div className="mt-3 space-y-2">
              {selectedTreatments.map((selectedTreatment) => {
                const fullTreatment = treatments?.find(t => t.id === selectedTreatment.id);
                return fullTreatment ? (
                  <p key={selectedTreatment.id} className="text-sm text-gray-600">
                    <span className="font-medium">{fullTreatment.name}:</span> {fullTreatment.description}
                  </p>
                ) : null;
              })}
            </div>
          )}
          {/* Live Calculation Display */}
          {selectedTreatments.length > 0 && (
            <div className="mt-3 bg-pink-50 border border-pink-200 rounded-lg p-4">
              <p className="font-semibold text-pink-700">
                📊 Gesamt: {totalDuration} Min | {(totalPrice / 100).toFixed(2)} €
              </p>
            </div>
          )}
        </div>
@@ -350,7 +449,7 @@ export function BookingForm() {
              value={selectedTime}
              onChange={(e) => setSelectedTime(e.target.value)}
              className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
-              disabled={!appointmentDate || !selectedTreatment || isLoading || isFetching}
+              disabled={!appointmentDate || selectedTreatments.length === 0 || isLoading || isFetching}
              required
            >
              <option value="">Zeit auswählen</option>
@@ -360,23 +459,23 @@ export function BookingForm() {
                </option>
              ))}
            </select>
-            {appointmentDate && selectedTreatment && isLoading && (
+            {appointmentDate && selectedTreatments.length > 0 && isLoading && (
              <p className="mt-2 text-sm text-gray-500">
                Lade verfügbare Zeiten...
              </p>
            )}
-            {appointmentDate && selectedTreatment && error && (
+            {appointmentDate && selectedTreatments.length > 0 && error && (
              <p className="mt-2 text-sm text-red-500">
                Fehler beim Laden der verfügbaren Zeiten. Bitte versuche es erneut.
              </p>
            )}
-            {appointmentDate && selectedTreatment && !isLoading && !isFetching && !error && (!availableTimes || availableTimes.length === 0) && (
+            {appointmentDate && selectedTreatments.length > 0 && !isLoading && !isFetching && !error && (!availableTimes || availableTimes.length === 0) && (
              <p className="mt-2 text-sm text-gray-500">
                Keine verfügbaren Zeiten für dieses Datum. Bitte wähle ein anderes Datum.
              </p>
            )}
-            {selectedTreatmentData && (
+            {selectedTreatments.length > 0 && (
-              <p className="mt-1 text-xs text-gray-500">Dauer: {selectedTreatmentData.duration} Minuten</p>
+              <p className="mt-1 text-xs text-gray-500">Gesamtdauer: {totalDuration} Minuten</p>
            )}
          </div>
        </div>
--- a/src/client/components/pwa-install-prompt.tsx
+++ b/src/client/components/pwa-install-prompt.tsx
@@ -0,0 +1,187 @@
 import { useEffect, useState } from 'react';
 interface BeforeInstallPromptEvent extends Event {
  prompt: () => Promise<void>;
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
 }
 declare global {
  interface Navigator { standalone?: boolean }
  interface WindowEventMap {
    beforeinstallprompt: BeforeInstallPromptEvent;
  }
 }
 const LAST_SHOWN_KEY = 'pwaInstallPrompt_lastShown';
 const ANDROID_DISMISSED_KEY = 'pwaInstallPrompt_androidDismissed';
 function isIOS(): boolean {
  if (typeof navigator === 'undefined') return false;
  const ua = navigator.userAgent || '';
  const iOS = /iPhone|iPad|iPod/i.test(ua);
  const iPadOS13Plus = /Macintosh/.test(ua) && 'ontouchend' in document;
  return iOS || iPadOS13Plus;
 }
 function isSafari(): boolean {
  const ua = navigator.userAgent || '';
  const isSafari = /Safari/i.test(ua) && !/CriOS|FxiOS|EdgiOS/i.test(ua);
  return isSafari;
 }
 function isStandalone(): boolean {
  const navStandalone = (navigator as any)?.standalone === true;
  const mm = typeof window !== 'undefined' && window.matchMedia
    ? window.matchMedia('(display-mode: standalone)').matches
    : false;
  return Boolean(navStandalone || mm);
 }
 export function PWAInstallPrompt({ hidden = false }: { hidden?: boolean }) {
  if (hidden) return null;
  const [show, setShow] = useState(false);
  const [promptType, setPromptType] = useState<'ios' | 'android' | null>(null);
  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
  const [initialized, setInitialized] = useState(false);
  useEffect(() => {
    // Only run on client
    if (typeof window === 'undefined') return;
    // Check if already in standalone mode
    if (isStandalone()) {
      setInitialized(true);
      return;
    }
    // Handle iOS
    const isIOSDevice = isIOS() && isSafari();
    if (isIOSDevice) {
      let lastShown = 0;
      try {
        lastShown = Number(localStorage.getItem(LAST_SHOWN_KEY) || 0);
      } catch {}
      const oneWeek = 7 * 24 * 60 * 60 * 1000;
      const shouldShow = !lastShown || Date.now() - lastShown > oneWeek;
      if (shouldShow) {
        setPromptType('ios');
        setShow(true);
      }
      setInitialized(true);
      return;
    }
    // Handle Android (beforeinstallprompt)
    const handleBeforeInstall = (e: BeforeInstallPromptEvent) => {
      e.preventDefault();
      // Check if user has dismissed Android prompt before
      let dismissed = false;
      try {
        dismissed = localStorage.getItem(ANDROID_DISMISSED_KEY) === 'true';
      } catch {}
      if (!dismissed) {
        setDeferredPrompt(e);
        setPromptType('android');
        setShow(true);
      }
    };
    window.addEventListener('beforeinstallprompt', handleBeforeInstall);
    setInitialized(true);
    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstall);
    };
  }, []);
  const dismiss = () => {
    if (promptType === 'ios') {
      try { localStorage.setItem(LAST_SHOWN_KEY, String(Date.now())); } catch {}
    } else if (promptType === 'android') {
      try { localStorage.setItem(ANDROID_DISMISSED_KEY, 'true'); } catch {}
    }
    setShow(false);
  };
  const handleAndroidInstall = async () => {
    if (!deferredPrompt) return;
    try {
      await deferredPrompt.prompt();
      const choiceResult = await deferredPrompt.userChoice;
      if (choiceResult.outcome === 'accepted') {
        console.log('PWA installation accepted');
      }
      setDeferredPrompt(null);
      setShow(false);
    } catch (error) {
      console.error('Error during PWA installation:', error);
    }
  };
  if (!initialized || !show || !promptType) return null;
  return (
    <div
      role="dialog"
      aria-label={promptType === 'android' ? 'PWA Installation' : 'PWA Installation Anleitung'}
      className="fixed bottom-0 left-0 right-0 z-50 px-4 pb-4"
      style={{ paddingBottom: `max(env(safe-area-inset-bottom), 1rem)` }}
    >
      <div className="relative max-w-3xl mx-auto rounded-xl shadow-lg bg-gradient-to-r from-pink-500 to-purple-600 text-white p-4 sm:p-6">
        <button aria-label="Hinweis schließen" onClick={dismiss} className="absolute top-2 right-2 text-white/90 hover:text-white text-2xl leading-none">×</button>
        {promptType === 'android' ? (
          // Android: Direct install button
          <div className="flex items-center gap-4">
            <div className="text-3xl">📱</div>
            <div className="flex-1">
              <h3 className="text-lg sm:text-xl font-bold mb-2">App installieren</h3>
              <p className="text-white/90 mb-3">
                Installiere Stargirlnails als App für schnellen Zugriff direkt vom Startbildschirm!
              </p>
              <div className="flex gap-2">
                <button
                  onClick={handleAndroidInstall}
                  className="bg-white text-pink-600 px-4 py-2 rounded-lg font-semibold hover:bg-pink-50 transition-colors"
                >
                  Jetzt installieren
                </button>
                <button
                  onClick={dismiss}
                  className="bg-white/20 text-white px-4 py-2 rounded-lg font-semibold hover:bg-white/30 transition-colors"
                >
                  Später
                </button>
              </div>
            </div>
          </div>
        ) : (
          // iOS: Manual instructions
          <div className="flex items-start gap-3">
            <div className="text-2xl">📱</div>
            <div className="flex-1">
              <h3 className="text-lg sm:text-xl font-bold mb-2">App installieren</h3>
              <p className="text-white/90 mb-2">So installierst du Stargirlnails als App auf deinem iPhone/iPad:</p>
              <ol className="list-decimal pl-5 space-y-1 text-white/95">
                <li>Öffne diese Seite in Safari (nicht Chrome oder andere Browser).</li>
                <li>Tippe auf das Teilen-Symbol (□↑) unten in der Mitte.</li>
                <li>Scrolle nach unten und wähle „Zum Home-Bildschirm".</li>
                <li>Tippe auf „Hinzufügen".</li>
              </ol>
              <p className="mt-3 text-sm text-white/90">✨ Schneller Zugriff, keine App-Store-Installation nötig, automatische Updates.</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
 }
 export default PWAInstallPrompt;
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -63,6 +63,8 @@ if (process.env.NODE_ENV === 'production') {
 }
 app.use('/favicon.png', serveStatic({ path: './public/favicon.png' }));
 app.use('/AGB.pdf', serveStatic({ path: './public/AGB.pdf' }));
 app.use('/icons/*', serveStatic({ root: './public' }));
 app.use('/manifest.json', serveStatic({ path: './public/manifest.json' }));
 app.route("/rpc", rpcApp);
 app.route("/caldav", caldavApp);
--- a/src/server/lib/email-templates.ts
+++ b/src/server/lib/email-templates.ts
@@ -33,14 +33,16 @@ async function renderBrandedEmail(title: string, bodyHtml: string): Promise<stri
  const instagramProfile = process.env.INSTAGRAM_PROFILE;
  const tiktokProfile = process.env.TIKTOK_PROFILE;
  const companyName = process.env.COMPANY_NAME || 'Stargirlnails Kiel';
  return `
  <div style="font-family: Arial, sans-serif; color: #0f172a; background:#fdf2f8; padding:24px;">
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="max-width:640px; margin:0 auto; background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06)">
      <tr>
        <td style="padding:24px 24px 0 24px; text-align:center;">
-          ${logo ? `<img src="${logo}" alt="Stargirlnails" style="width:120px; height:auto; display:inline-block;" />` : `<div style=\"font-size:24px\">💅</div>`}
+          ${logo ? `<img src="${logo}" alt="${companyName}" style="width:120px; height:auto; display:inline-block;" />` : `<div style=\"font-size:24px\">💅</div>`}
-          <h1 style="margin:16px 0 0 0; font-size:22px; color:#db2777;">${title}</h1>
+          <div style="margin:16px 0 4px 0; font-size:16px; font-weight:600; color:#64748b;">${companyName}</div>
          <h1 style="margin:0; font-size:22px; color:#db2777;">${title}</h1>
        </td>
      </tr>
      <tr>
@@ -58,12 +60,18 @@ async function renderBrandedEmail(title: string, bodyHtml: string): Promise<stri
            <div style="display:inline-block;">
              ${instagramProfile ? `
              <a href="${instagramProfile}" target="_blank" rel="noopener noreferrer" style="display:inline-block; margin:0 6px; background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color:white; padding:10px 20px; text-decoration:none; border-radius:20px; font-size:14px; font-weight:600;">
-                📷 Instagram
+                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:6px;">
                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                </svg>
                Instagram
              </a>
              ` : ''}
              ${tiktokProfile ? `
              <a href="${tiktokProfile}" target="_blank" rel="noopener noreferrer" style="display:inline-block; margin:0 6px; background:#000000; color:white; padding:10px 20px; text-decoration:none; border-radius:20px; font-size:14px; font-weight:600;">
-                🎵 TikTok
+                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24" style="vertical-align:middle; margin-right:6px;">
                  <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                </svg>
                TikTok
              </a>
              ` : ''}
            </div>
@@ -339,3 +347,43 @@ export async function renderAdminRescheduleExpiredHTML(params: {
  return renderBrandedEmail("Abgelaufene Terminänderungsvorschläge", inner);
 }
 export async function renderCustomerMessageHTML(params: {
  customerName: string;
  message: string;
  appointmentDate?: string;
  appointmentTime?: string;
  treatmentName?: string;
 }) {
  const { customerName, message, appointmentDate, appointmentTime, treatmentName } = params;
  const formattedDate = appointmentDate ? formatDateGerman(appointmentDate) : null;
  const domain = process.env.DOMAIN || 'localhost:5173';
  const protocol = domain.includes('localhost') ? 'http' : 'https';
  const legalUrl = `${protocol}://${domain}/legal`;
  const ownerName = process.env.OWNER_NAME || 'Stargirlnails Kiel';
  const inner = `
    <p>Hallo ${customerName},</p>
    ${(appointmentDate && appointmentTime && treatmentName) ? `
    <div style="background-color: #f8fafc; border-left: 4px solid #db2777; padding: 16px; margin: 20px 0; border-radius: 4px;">
      <p style="margin: 0; font-weight: 600; color: #db2777;">📅 Zu deinem Termin:</p>
      <ul style="margin: 8px 0 0 0; color: #475569; list-style: none; padding: 0;">
        <li><strong>Behandlung:</strong> ${treatmentName}</li>
        <li><strong>Datum:</strong> ${formattedDate}</li>
        <li><strong>Uhrzeit:</strong> ${appointmentTime}</li>
      </ul>
    </div>
    ` : ''}
    <div style="background-color: #fef9f5; border-left: 4px solid #f59e0b; padding: 16px; margin: 20px 0; border-radius: 4px;">
      <p style="margin: 0; font-weight: 600; color: #f59e0b;">💬 Nachricht von ${ownerName}:</p>
      <div style="margin: 12px 0 0 0; color: #475569; white-space: pre-wrap; line-height: 1.6;">${message.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
    </div>
    <p>Bei Fragen oder Anliegen kannst du einfach auf diese E-Mail antworten – wir helfen dir gerne weiter!</p>
    <div style="background-color: #f8fafc; border-left: 4px solid #3b82f6; padding: 16px; margin: 20px 0; border-radius: 4px;">
      <p style="margin: 0; font-weight: 600; color: #3b82f6;">📋 Rechtliche Informationen:</p>
      <p style="margin: 8px 0 12px 0; color: #475569;">Weitere Informationen findest du in unserem <a href="${legalUrl}" style="color: #3b82f6; text-decoration: underline;">Impressum und Datenschutz</a>.</p>
    </div>
    <p>Liebe Grüße,<br/>${ownerName}</p>
  `;
  return renderBrandedEmail("Nachricht zu deinem Termin", inner);
 }
--- a/src/server/lib/email.ts
+++ b/src/server/lib/email.ts
@@ -6,6 +6,7 @@ type SendEmailParams = {
  from?: string;
  cc?: string | string[];
  bcc?: string | string[];
  replyTo?: string | string[];
  attachments?: Array<{
    filename: string;
    content: string; // base64 encoded
@@ -130,22 +131,27 @@ export async function sendEmail(params: SendEmailParams): Promise<{ success: boo
    return { success: false };
  }
  const payload = {
    from: params.from || DEFAULT_FROM,
    to: Array.isArray(params.to) ? params.to : [params.to],
    subject: params.subject,
    text: params.text,
    html: params.html,
    cc: params.cc ? (Array.isArray(params.cc) ? params.cc : [params.cc]) : undefined,
    bcc: params.bcc ? (Array.isArray(params.bcc) ? params.bcc : [params.bcc]) : undefined,
    reply_to: params.replyTo ? (Array.isArray(params.replyTo) ? params.replyTo : [params.replyTo]) : undefined,
    attachments: params.attachments,
  };
  console.log(`Sending email via Resend: to=${JSON.stringify(payload.to)}, subject="${params.subject}"`);
  const response = await fetch("https://api.resend.com/emails", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${RESEND_API_KEY}`,
      "Content-Type": "application/json",
    },
-    body: JSON.stringify({
+    body: JSON.stringify(payload),
      from: params.from || DEFAULT_FROM,
      to: Array.isArray(params.to) ? params.to : [params.to],
      subject: params.subject,
      text: params.text,
      html: params.html,
      cc: params.cc ? (Array.isArray(params.cc) ? params.cc : [params.cc]) : undefined,
      bcc: params.bcc ? (Array.isArray(params.bcc) ? params.bcc : [params.bcc]) : undefined,
      attachments: params.attachments,
    }),
  });
  if (!response.ok) {
@@ -153,6 +159,9 @@ export async function sendEmail(params: SendEmailParams): Promise<{ success: boo
    console.error("Resend send error:", response.status, body);
    return { success: false };
  }
  const responseData = await response.json().catch(() => ({}));
  console.log("Resend email sent successfully:", responseData);
  return { success: true };
 }
--- a/src/server/routes/client-entry.tsx
+++ b/src/server/routes/client-entry.tsx
@@ -30,12 +30,18 @@ export function clientEntry(c: Context<BlankEnv>) {
  }
  return c.html(
-    <html lang="en">
+    <html lang="de">
      <head>
        <meta charSet="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta name="theme-color" content="#ec4899" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content="Stargirlnails" />
        <title>Stargirlnails Kiel</title>
        <link rel="icon" type="image/png" href="/favicon.png" />
        <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
        <link rel="manifest" href="/manifest.json" />
        {cssFiles && cssFiles.map((css: string) => (
          <link key={css} rel="stylesheet" href={css} />
        ))}
--- a/src/server/rpc/bookings.ts
+++ b/src/server/rpc/bookings.ts
@@ -3,7 +3,7 @@ import { z } from "zod";
 import { randomUUID } from "crypto";
 import { createKV } from "../lib/create-kv.js";
 import { sendEmail, sendEmailWithAGB, sendEmailWithAGBAndCalendar, sendEmailWithInspirationPhoto } from "../lib/email.js";
-import { renderBookingPendingHTML, renderBookingConfirmedHTML, renderBookingCancelledHTML, renderAdminBookingNotificationHTML, renderBookingRescheduleProposalHTML, renderAdminRescheduleAcceptedHTML, renderAdminRescheduleDeclinedHTML } from "../lib/email-templates.js";
+import { renderBookingPendingHTML, renderBookingConfirmedHTML, renderBookingCancelledHTML, renderAdminBookingNotificationHTML, renderBookingRescheduleProposalHTML, renderAdminRescheduleAcceptedHTML, renderAdminRescheduleDeclinedHTML, renderCustomerMessageHTML } from "../lib/email-templates.js";
 import { router as rootRouter } from "./index.js";
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
@@ -44,7 +44,7 @@ function isDateInTimeOffPeriod(date: string, periods: TimeOffPeriod[]): boolean
 async function validateBookingAgainstRules(
  date: string,
  time: string,
-  treatmentDuration: number
+  totalDuration: number
 ): Promise<void> {
  // Parse date to get day of week
  const [year, month, day] = date.split('-').map(Number);
@@ -69,7 +69,7 @@ async function validateBookingAgainstRules(
  // Check if booking time falls within any rule's time span
  const bookingStartMinutes = parseTime(time);
-  const bookingEndMinutes = bookingStartMinutes + treatmentDuration;
+  const bookingEndMinutes = bookingStartMinutes + totalDuration;
  const isWithinRules = matchingRules.some(rule => {
    const ruleStartMinutes = parseTime(rule.startTime);
@@ -88,7 +88,7 @@ async function validateBookingAgainstRules(
 async function checkBookingConflicts(
  date: string,
  time: string,
-  treatmentDuration: number,
+  totalDuration: number,
  excludeBookingId?: string
 ): Promise<void> {
  const allBookings = await kv.getAllItems();
@@ -99,10 +99,10 @@ async function checkBookingConflicts(
  );
  const bookingStartMinutes = parseTime(time);
-  const bookingEndMinutes = bookingStartMinutes + treatmentDuration;
+  const bookingEndMinutes = bookingStartMinutes + totalDuration;
-  // Cache treatment durations by ID to avoid N+1 lookups
+  // Cache treatment durations by ID to avoid N+1 lookups (for backward compatibility with old bookings)
-  const uniqueTreatmentIds = [...new Set(dateBookings.map(booking => booking.treatmentId))];
+  const uniqueTreatmentIds = [...new Set(dateBookings.filter(b => b.treatmentId).map(booking => booking.treatmentId!))];
  const treatmentDurationMap = new Map<string, number>();
  for (const treatmentId of uniqueTreatmentIds) {
@@ -112,10 +112,21 @@ async function checkBookingConflicts(
  // Check for overlaps with existing bookings
  for (const existingBooking of dateBookings) {
-    // Use cached duration or fallback to bookedDurationMinutes if available
+    let existingDuration: number;
-    let existingDuration = treatmentDurationMap.get(existingBooking.treatmentId) || 60;
+    
-    if (existingBooking.bookedDurationMinutes) {
+    // Handle both new bookings with treatments array and old bookings with treatmentId
-      existingDuration = existingBooking.bookedDurationMinutes;
+    if (existingBooking.treatments && existingBooking.treatments.length > 0) {
      // New format: calculate duration from treatments array
      existingDuration = existingBooking.treatments.reduce((sum, t) => sum + t.duration, 0);
    } else if (existingBooking.treatmentId) {
      // Old format: use cached duration or fallback to bookedDurationMinutes if available
      existingDuration = treatmentDurationMap.get(existingBooking.treatmentId) || 60;
      if (existingBooking.bookedDurationMinutes) {
        existingDuration = existingBooking.bookedDurationMinutes;
      }
    } else {
      // Fallback for bookings without treatment info
      existingDuration = existingBooking.bookedDurationMinutes || 60;
    }
    const existingStartMinutes = parseTime(existingBooking.appointmentTime);
@@ -128,8 +139,22 @@ async function checkBookingConflicts(
  }
 }
 // Reusable treatments array schema with duplicate validation
 const TreatmentsArraySchema = z.array(z.object({
  id: z.string(),
  name: z.string(),
  duration: z.number().positive(),
  price: z.number().nonnegative(),
 }))
  .min(1, "Mindestens eine Behandlung muss ausgewählt werden")
  .max(3, "Maximal 3 Behandlungen können ausgewählt werden")
  .refine(list => {
    const ids = list.map(t => t.id);
    return ids.length === new Set(ids).size;
  }, { message: "Doppelte Behandlungen sind nicht erlaubt" });
 const CreateBookingInputSchema = z.object({
-  treatmentId: z.string(),
+  treatments: TreatmentsArraySchema,
  customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
  customerEmail: z.string().email("Ungültige E-Mail-Adresse"),
  customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein").optional(),
@@ -141,7 +166,12 @@ const CreateBookingInputSchema = z.object({
 const BookingSchema = z.object({
  id: z.string(),
-  treatmentId: z.string(),
+  treatments: z.array(z.object({
    id: z.string(),
    name: z.string(),
    duration: z.number().positive(),
    price: z.number().nonnegative()
  })),
  customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
  customerEmail: z.string().email("Ungültige E-Mail-Adresse").optional(),
  customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein").optional(),
@@ -150,10 +180,12 @@ const BookingSchema = z.object({
  status: z.enum(["pending", "confirmed", "cancelled", "completed"]),
  notes: z.string().optional(),
  inspirationPhoto: z.string().optional(), // Base64 encoded image data
  bookedDurationMinutes: z.number().optional(), // Snapshot of treatment duration at booking time
  createdAt: z.string(),
  // DEPRECATED: slotId is no longer used for validation, kept for backward compatibility
  slotId: z.string().optional(),
  // DEPRECATED: treatmentId and bookedDurationMinutes kept for backward compatibility
  treatmentId: z.string().optional(),
  bookedDurationMinutes: z.number().optional(),
 });
 type Booking = z.output<typeof BookingSchema>;
@@ -272,31 +304,46 @@ const create = os
        throw new Error("Du hast bereits eine Buchung für dieses Datum. Bitte wähle einen anderen Tag oder storniere zuerst.");
      }
    }
-    // Get treatment duration for validation
+    // Validate all treatments exist and snapshot them from KV
-    const treatment = await treatmentsKV.getItem(input.treatmentId);
+    const snapshottedTreatments = [] as Array<{id: string; name: string; duration: number; price: number}>;
-    if (!treatment) {
+    for (const inputTreatment of input.treatments) {
-      throw new Error("Behandlung nicht gefunden.");
+      const treatment = await treatmentsKV.getItem(inputTreatment.id);
      if (!treatment) {
        throw new Error(`Behandlung "${inputTreatment.name}" nicht gefunden.`);
      }
      // Verify snapshot data matches current treatment data
      if (treatment.name !== inputTreatment.name || treatment.duration !== inputTreatment.duration || treatment.price !== inputTreatment.price) {
        throw new Error(`Behandlungsdaten für "${inputTreatment.name}" stimmen nicht überein. Bitte lade die Seite neu.`);
      }
      snapshottedTreatments.push({ id: treatment.id, name: treatment.name, duration: treatment.duration, price: treatment.price });
    }
    const totalDuration = snapshottedTreatments.reduce((sum, t) => sum + t.duration, 0);
    // Validate booking time against recurring rules
    await validateBookingAgainstRules(
      input.appointmentDate,
      input.appointmentTime,
-      treatment.duration
+      totalDuration
    );
    // Check for booking conflicts
    await checkBookingConflicts(
      input.appointmentDate,
      input.appointmentTime,
-      treatment.duration
+      totalDuration
    );
    const id = randomUUID();
    const booking = { 
      id, 
-      ...input, 
+      treatments: snapshottedTreatments,
-      bookedDurationMinutes: treatment.duration, // Snapshot treatment duration
+      customerName: input.customerName,
      customerEmail: input.customerEmail,
      customerPhone: input.customerPhone,
      appointmentDate: input.appointmentDate,
      appointmentTime: input.appointmentTime,
      notes: input.notes,
      inspirationPhoto: input.inspirationPhoto,
      status: "pending" as const,
      createdAt: new Date().toISOString()
    };
@@ -330,16 +377,14 @@ const create = os
    void (async () => {
      if (!process.env.ADMIN_EMAIL) return;
-      // Get treatment name from KV
+      // Build treatment list string
-      const allTreatments = await treatmentsKV.getAllItems();
+      const treatmentsList = input.treatments.map(t => `${t.name} (${t.duration} Min, ${t.price.toFixed(2)} €)`).join(', ');
      const treatment = allTreatments.find(t => t.id === input.treatmentId);
      const treatmentName = treatment?.name || "Unbekannte Behandlung";
      const adminHtml = await renderAdminBookingNotificationHTML({
        name: input.customerName,
        date: input.appointmentDate,
        time: input.appointmentTime,
-        treatment: treatmentName,
+        treatment: treatmentsList,
        phone: input.customerPhone || "Nicht angegeben",
        notes: input.notes,
        hasInspirationPhoto: !!input.inspirationPhoto
@@ -350,7 +395,7 @@ const create = os
      const adminText = `Neue Buchungsanfrage eingegangen:\n\n` +
        `Name: ${input.customerName}\n` +
        `Telefon: ${input.customerPhone || "Nicht angegeben"}\n` +
-        `Behandlung: ${treatmentName}\n` +
+        `Behandlungen: ${treatmentsList}\n` +
        `Datum: ${formatDateGerman(input.appointmentDate)}\n` +
        `Uhrzeit: ${input.appointmentTime}\n` +
        `${input.notes ? `Notizen: ${input.notes}\n` : ''}` +
@@ -431,11 +476,12 @@ const updateStatus = os
        });
        // Get treatment information for ICS file
-        const allTreatments = await treatmentsKV.getAllItems();
+        const treatmentName = booking.treatments && booking.treatments.length > 0
-        const treatment = allTreatments.find(t => t.id === booking.treatmentId);
+          ? booking.treatments.map(t => t.name).join(', ')
-        const treatmentName = treatment?.name || "Behandlung";
+          : "Behandlung";
-        // Use bookedDurationMinutes if available, otherwise fallback to treatment duration
+        const treatmentDuration = booking.treatments && booking.treatments.length > 0
-        const treatmentDuration = booking.bookedDurationMinutes || treatment?.duration || 60;
+          ? booking.treatments.reduce((sum, t) => sum + t.duration, 0)
          : (booking.bookedDurationMinutes || 60);
        if (booking.customerEmail) {
        await sendEmailWithAGBAndCalendar({
@@ -524,7 +570,7 @@ const remove = os
 const createManual = os
  .input(z.object({
    sessionId: z.string(),
-    treatmentId: z.string(),
+    treatments: TreatmentsArraySchema,
    customerName: z.string().min(2, "Name muss mindestens 2 Zeichen lang sein"),
    customerEmail: z.string().email("Ungültige E-Mail-Adresse").optional(),
    customerPhone: z.string().min(5, "Telefonnummer muss mindestens 5 Zeichen lang sein").optional(),
@@ -557,37 +603,45 @@ const createManual = os
      }
    }
-    // Get treatment duration for validation
+    // Validate all treatments exist and snapshot them from KV
-    const treatment = await treatmentsKV.getItem(input.treatmentId);
+    const snapshottedTreatments = [] as Array<{id: string; name: string; duration: number; price: number}>;
-    if (!treatment) {
+    for (const inputTreatment of input.treatments) {
-      throw new Error("Behandlung nicht gefunden.");
+      const treatment = await treatmentsKV.getItem(inputTreatment.id);
      if (!treatment) {
        throw new Error(`Behandlung "${inputTreatment.name}" nicht gefunden.`);
      }
      // Verify snapshot data matches current treatment data
      if (treatment.name !== inputTreatment.name || treatment.duration !== inputTreatment.duration || treatment.price !== inputTreatment.price) {
        throw new Error(`Behandlungsdaten für "${inputTreatment.name}" stimmen nicht überein. Bitte lade die Seite neu.`);
      }
      snapshottedTreatments.push({ id: treatment.id, name: treatment.name, duration: treatment.duration, price: treatment.price });
    }
    const totalDuration = snapshottedTreatments.reduce((sum, t) => sum + t.duration, 0);
    // Validate booking time against recurring rules
    await validateBookingAgainstRules(
      input.appointmentDate,
      input.appointmentTime,
-      treatment.duration
+      totalDuration
    );
    // Check for booking conflicts
    await checkBookingConflicts(
      input.appointmentDate,
      input.appointmentTime,
-      treatment.duration
+      totalDuration
    );
    const id = randomUUID();
    const booking = {
      id,
-      treatmentId: input.treatmentId,
+      treatments: snapshottedTreatments,
      customerName: input.customerName,
      customerEmail: input.customerEmail,
      customerPhone: input.customerPhone,
      appointmentDate: input.appointmentDate,
      appointmentTime: input.appointmentTime,
      notes: input.notes,
      bookedDurationMinutes: treatment.duration,
      status: "confirmed" as const,
      createdAt: new Date().toISOString()
    } as Booking;
@@ -622,9 +676,9 @@ const createManual = os
        }, {
            date: input.appointmentDate,
            time: input.appointmentTime,
-            durationMinutes: treatment.duration,
+            durationMinutes: totalDuration,
            customerName: input.customerName,
-            treatmentName: treatment.name
+            treatmentName: input.treatments.map(t => t.name).join(', ')
          });
        } catch (e) {
          console.error("Email send failed for manual booking:", e);
@@ -695,8 +749,10 @@ export const router = {
      if (!booking) throw new Error("Booking not found");
      if (booking.status !== "confirmed") throw new Error("Nur bestätigte Termine können umgebucht werden.");
-      const treatment = await treatmentsKV.getItem(booking.treatmentId);
+      // Calculate total duration from treatments array
-      if (!treatment) throw new Error("Behandlung nicht gefunden.");
+      const totalDuration = booking.treatments && booking.treatments.length > 0
        ? booking.treatments.reduce((sum, t) => sum + t.duration, 0)
        : (booking.bookedDurationMinutes || 60);
      // Validate grid and not in past
      const appointmentMinutes = parseTime(input.proposedTime);
@@ -715,8 +771,8 @@ export const router = {
        }
      }
-      await validateBookingAgainstRules(input.proposedDate, input.proposedTime, booking.bookedDurationMinutes || treatment.duration);
+      await validateBookingAgainstRules(input.proposedDate, input.proposedTime, totalDuration);
-      await checkBookingConflicts(input.proposedDate, input.proposedTime, booking.bookedDurationMinutes || treatment.duration, booking.id);
+      await checkBookingConflicts(input.proposedDate, input.proposedTime, totalDuration, booking.id);
      // Invalidate and create new reschedule token via cancellation router
      const res = await queryClient.cancellation.createRescheduleToken({
@@ -729,13 +785,16 @@ export const router = {
      // Send proposal email to customer
      if (booking.customerEmail) {
        const treatmentName = booking.treatments && booking.treatments.length > 0
          ? booking.treatments.map(t => t.name).join(', ')
          : "Behandlung";
        const html = await renderBookingRescheduleProposalHTML({
          name: booking.customerName,
          originalDate: booking.appointmentDate,
          originalTime: booking.appointmentTime,
          proposedDate: input.proposedDate,
          proposedTime: input.proposedTime,
-          treatmentName: (await treatmentsKV.getItem(booking.treatmentId))?.name || "Behandlung",
+          treatmentName: treatmentName,
          acceptUrl,
          declineUrl,
          expiresAt: res.expiresAt,
@@ -761,8 +820,9 @@ export const router = {
      if (!booking) throw new Error("Booking not found");
      if (booking.status !== "confirmed") throw new Error("Buchung ist nicht mehr in bestätigtem Zustand.");
-      const treatment = await treatmentsKV.getItem(booking.treatmentId);
+      const duration = booking.treatments && booking.treatments.length > 0
-      const duration = booking.bookedDurationMinutes || treatment?.duration || 60;
+        ? booking.treatments.reduce((sum, t) => sum + t.duration, 0)
        : (booking.bookedDurationMinutes || 60);
      // Re-validate slot to ensure still available
      await validateBookingAgainstRules(proposal.proposed.date, proposal.proposed.time, duration);
@@ -784,6 +844,9 @@ export const router = {
          cancellationUrl: generateUrl(`/booking/${bookingAccessToken.token}`),
          reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`),
        });
        const treatmentName = updated.treatments && updated.treatments.length > 0
          ? updated.treatments.map(t => t.name).join(', ')
          : "Behandlung";
        await sendEmailWithAGBAndCalendar({
          to: updated.customerEmail,
          subject: "Terminänderung bestätigt",
@@ -794,18 +857,21 @@ export const router = {
          time: updated.appointmentTime,
          durationMinutes: duration,
          customerName: updated.customerName,
-          treatmentName: (await treatmentsKV.getItem(updated.treatmentId))?.name || "Behandlung",
+          treatmentName: treatmentName,
        }).catch(() => {});
      }
      if (process.env.ADMIN_EMAIL) {
        const treatmentName = updated.treatments && updated.treatments.length > 0
          ? updated.treatments.map(t => t.name).join(', ')
          : "Behandlung";
        const adminHtml = await renderAdminRescheduleAcceptedHTML({
          customerName: updated.customerName,
          originalDate: proposal.original.date,
          originalTime: proposal.original.time,
          newDate: updated.appointmentDate,
          newTime: updated.appointmentTime,
-          treatmentName: (await treatmentsKV.getItem(updated.treatmentId))?.name || "Behandlung",
+          treatmentName: treatmentName,
        });
        await sendEmail({
          to: process.env.ADMIN_EMAIL,
@@ -842,13 +908,16 @@ export const router = {
      // Notify admin
      if (process.env.ADMIN_EMAIL) {
        const treatmentName = booking.treatments && booking.treatments.length > 0
          ? booking.treatments.map(t => t.name).join(', ')
          : "Behandlung";
        const html = await renderAdminRescheduleDeclinedHTML({
          customerName: booking.customerName,
          originalDate: proposal.original.date,
          originalTime: proposal.original.time,
          proposedDate: proposal.proposed.date!,
          proposedTime: proposal.proposed.time!,
-          treatmentName: (await treatmentsKV.getItem(booking.treatmentId))?.name || "Behandlung",
+          treatmentName: treatmentName,
          customerEmail: booking.customerEmail,
          customerPhone: booking.customerPhone,
        });
@@ -911,4 +980,75 @@ export const router = {
        }
      };
    }),
  // Admin sendet Nachricht an Kunden
  sendCustomerMessage: os
    .input(z.object({
      sessionId: z.string(),
      bookingId: z.string(),
      message: z.string().min(1, "Nachricht darf nicht leer sein").max(5000, "Nachricht ist zu lang (max. 5000 Zeichen)"),
    }))
    .handler(async ({ input }) => {
      await assertOwner(input.sessionId);
      const booking = await kv.getItem(input.bookingId);
      if (!booking) throw new Error("Buchung nicht gefunden");
      // Check if booking has customer email
      if (!booking.customerEmail) {
        throw new Error("Diese Buchung hat keine E-Mail-Adresse. Bitte kontaktiere den Kunden telefonisch.");
      }
      // Check if booking is in the future
      const today = new Date().toISOString().split("T")[0];
      const bookingDate = booking.appointmentDate;
      if (bookingDate < today) {
        throw new Error("Nachrichten können nur für zukünftige Termine gesendet werden.");
      }
      // Get treatment name for context
      const treatmentName = booking.treatments && booking.treatments.length > 0
        ? booking.treatments.map(t => t.name).join(', ')
        : "Behandlung";
      // Prepare email with Reply-To header
      const ownerName = process.env.OWNER_NAME || "Stargirlnails Kiel";
      const emailFrom = process.env.EMAIL_FROM || "Stargirlnails <no-reply@stargirlnails.de>";
      const replyToEmail = process.env.ADMIN_EMAIL;
      const formattedDate = formatDateGerman(bookingDate);
      const html = await renderCustomerMessageHTML({
        customerName: booking.customerName,
        message: input.message,
        appointmentDate: bookingDate,
        appointmentTime: booking.appointmentTime,
        treatmentName: treatmentName,
      });
      const textContent = `Hallo ${booking.customerName},\n\nZu deinem Termin:\nBehandlung: ${treatmentName}\nDatum: ${formattedDate}\nUhrzeit: ${booking.appointmentTime}\n\nNachricht von ${ownerName}:\n${input.message}\n\nBei Fragen oder Anliegen kannst du einfach auf diese E-Mail antworten – wir helfen dir gerne weiter!\n\nLiebe Grüße,\n${ownerName}`;
      // Send email with BCC to admin for monitoring
      // Note: Not using explicit 'from' or 'replyTo' to match behavior of other system emails
      console.log(`Sending customer message to ${booking.customerEmail} for booking ${input.bookingId}`);
      console.log(`Email config: from=${emailFrom}, replyTo=${replyToEmail}, bcc=${replyToEmail}`);
      const emailResult = await sendEmail({
        to: booking.customerEmail,
        subject: `Nachricht zu deinem Termin am ${formattedDate}`,
        text: textContent,
        html: html,
        bcc: replyToEmail ? [replyToEmail] : undefined,
      });
      if (!emailResult.success) {
        console.error(`Failed to send customer message to ${booking.customerEmail}`);
        throw new Error("E-Mail konnte nicht versendet werden. Bitte überprüfe die E-Mail-Konfiguration oder versuche es später erneut.");
      }
      console.log(`Successfully sent customer message to ${booking.customerEmail}`);
      return { 
        success: true, 
        message: `Nachricht wurde erfolgreich an ${booking.customerEmail} gesendet.`
      };
    }),
 };
Author	SHA1	Message	Date
elpatron	d153aad8b3	Refactor booking-form: Add compatibility fallback, functional state updates, memoized calculations, and treatment reconciliation	2025-10-08 18:17:59 +02:00
elpatron	94e269697a	Config: Caddy Log-Level auf INFO setzen Unterdrückt WARN-Meldungen für normale Live-Subscription disconnects	2025-10-08 12:57:41 +02:00
elpatron	ad79531f33	Release v0.1.4 Features: - Admin kann Nachrichten an Kunden senden - Email-System mit BCC an Admin - UI: Nachricht-Button und Modal - HTML-Escaping für sichere Nachrichtenanzeige - Detailliertes Logging	2025-10-08 11:24:41 +02:00
elpatron	db1a401230	Build: Update server-dist artifacts for v0.1.4	2025-10-08 11:24:03 +02:00
elpatron	cceb4d4e60	Feature: Admin kann Nachrichten an Kunden senden - Neues Email-Template für Kundennachrichten - RPC-Funktion sendCustomerMessage für zukünftige Termine - UI: Nachricht-Button und Modal in Admin-Buchungen - Email mit BCC an Admin für Monitoring - HTML-Escaping für sichere Nachrichtenanzeige - Detailliertes Logging für Debugging	2025-10-08 11:13:59 +02:00
elpatron	ca20516080	v0.1.3	2025-10-07 14:15:17 +02:00
elpatron	f2963ca951	Android PWA-Installationshinweis mit direktem Install-Button hinzugefügt	2025-10-07 13:57:28 +02:00
elpatron	8aea5bb400	Verbesserungen für PWA-Installations-Prompt: Mobile-Menü-Überlappung behoben, iOS safe-area Unterstützung, localStorage-Fehlerbehandlung und erweiterte standalone-Erkennung	2025-10-07 13:41:03 +02:00
elpatron	14d0c2f9c3	Add PWA manifest and apple-touch-icon meta tag	2025-10-07 13:12:31 +02:00
elpatron	eb9ddc535f	Add static serving for /icons/* and manifest.json	2025-10-07 12:58:36 +02:00
elpatron	8fa17f58c9	Add PWA icons (192x192, 512x512, apple-touch-icon)	2025-10-07 12:46:17 +02:00
elpatron	92ed7a2c93	feat: Firmenname aus .env in E-Mail-Titeln anzeigen - COMPANY_NAME wird aus .env gelesen - Wird in separater Zeile über dem eigentlichen Titel angezeigt - Format: Firmenname (grau, kleiner) + Titel (pink, größer) - Fallback auf 'Stargirlnails Kiel' wenn nicht gesetzt	2025-10-07 10:50:50 +02:00
elpatron	ce644c31e1	feat: Offizielle Social-Media-Icons in E-Mails - Ersetze Emojis (📷 🎵) durch offizielle SVG-Icons - Gleiche Icons wie auf der Startseite (Instagram & TikTok) - Inline SVG für bessere Darstellung in E-Mail-Clients - Icons sind 16x16px mit margin-right für besseren Abstand	2025-10-07 10:44:30 +02:00