Fix ICS calendar issues and improve email template code quality

- Fix ATTENDEE mailto to use customerEmail instead of customerName
- Add icsEscape helper for proper RFC 5545 text escaping
- Calculate ICS duration from treatments array instead of separate param
- Add renderTreatmentList helper to reduce code duplication in email templates

Caddyfile

@@ -40,6 +40,7 @@ stargirlnails.de {
     log {
         output file /var/log/caddy/access.log
         format json
+        level INFO
     }
 
     # Favicon-Konfiguration (innerhalb der Hauptdomain)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "quests-template-basic",
   "private": true,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "check:types": "tsc --noEmit",

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);

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);
+}

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) {

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" }) })] }));
 }

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.`
+        };
+    }),
 };

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,
 };

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,
+});

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>
   );
 }

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>

src/server/lib/email-templates.ts

@@ -8,6 +8,27 @@ function formatDateGerman(dateString: string): string {
   return `${day}.${month}.${year}`;
 }
 
+// Helper function to render treatment list HTML
+function renderTreatmentList(
+  treatments: Array<{id: string; name: string; duration: number; price: number}>,
+  options: { showPrices: boolean } = { showPrices: true }
+): string {
+  const totalDuration = treatments.reduce((sum, t) => sum + t.duration, 0);
+  const totalPrice = treatments.reduce((sum, t) => sum + t.price, 0);
+  
+  const treatmentItems = treatments.map(t => 
+    options.showPrices 
+      ? `<li><strong>${t.name}</strong> - ${t.duration} Min - ${t.price.toFixed(2)} €</li>`
+      : `<li>${t.name} - ${t.duration} Min - ${t.price.toFixed(2)} €</li>`
+  ).join('');
+  
+  const totalLine = options.showPrices
+    ? `<li style="border-top: 1px solid #e2e8f0; margin-top: 8px; padding-top: 8px;"><strong>Gesamt:</strong> ${totalDuration} Min - ${totalPrice.toFixed(2)} €</li>`
+    : `<li style="font-weight: 600; margin-top: 4px;">Gesamt: ${totalDuration} Min - ${totalPrice.toFixed(2)} €</li>`;
+  
+  return `${treatmentItems}${totalLine}`;
+}
+
 let cachedLogoDataUrl: string | null = null;
 
 async function getLogoDataUrl(): Promise<string | null> {
@@ -86,8 +107,8 @@ async function renderBrandedEmail(title: string, bodyHtml: string): Promise<stri
   </div>`;
 }
 
-export async function renderBookingPendingHTML(params: { name: string; date: string; time: string; statusUrl?: string }) {
+export async function renderBookingPendingHTML(params: { name: string; date: string; time: string; statusUrl?: string; treatments: Array<{id: string; name: string; duration: number; price: number}> }) {
-  const { name, date, time, statusUrl } = params;
+  const { name, date, time, statusUrl, treatments } = params;
   const formattedDate = formatDateGerman(date);
   const domain = process.env.DOMAIN || 'localhost:5173';
   const protocol = domain.includes('localhost') ? 'http' : 'https';
@@ -96,6 +117,12 @@ export async function renderBookingPendingHTML(params: { name: string; date: str
   const inner = `
     <p>Hallo ${name},</p>
     <p>wir haben deine Anfrage für <strong>${formattedDate}</strong> um <strong>${time}</strong> erhalten.</p>
+    <div style="background-color: #f8fafc; border-left: 4px solid #db2777; padding: 16px; margin: 20px 0; border-radius: 4px;">
+      <p style="margin: 0 0 8px 0; font-weight: 600; color: #db2777;">💅 Deine Behandlungen:</p>
+      <ul style="margin: 0; color: #475569; list-style: none; padding: 0;">
+        ${renderTreatmentList(treatments, { showPrices: true })}
+      </ul>
+    </div>
     <p>Wir bestätigen deinen Termin in Kürze. Du erhältst eine weitere E-Mail, sobald der Termin bestätigt ist.</p>
     ${statusUrl ? `
     <div style="background-color: #fef9f5; border-left: 4px solid #f59e0b; padding: 16px; margin: 20px 0; border-radius: 4px;">
@@ -113,8 +140,8 @@ export async function renderBookingPendingHTML(params: { name: string; date: str
   return renderBrandedEmail("Deine Terminanfrage ist eingegangen", inner);
 }
 
-export async function renderBookingConfirmedHTML(params: { name: string; date: string; time: string; cancellationUrl?: string; reviewUrl?: string }) {
+export async function renderBookingConfirmedHTML(params: { name: string; date: string; time: string; cancellationUrl?: string; reviewUrl?: string; treatments: Array<{id: string; name: string; duration: number; price: number}> }) {
-  const { name, date, time, cancellationUrl, reviewUrl } = params;
+  const { name, date, time, cancellationUrl, reviewUrl, treatments } = params;
   const formattedDate = formatDateGerman(date);
   const domain = process.env.DOMAIN || 'localhost:5173';
   const protocol = domain.includes('localhost') ? 'http' : 'https';
@@ -123,6 +150,12 @@ export async function renderBookingConfirmedHTML(params: { name: string; date: s
   const inner = `
     <p>Hallo ${name},</p>
     <p>wir haben deinen Termin am <strong>${formattedDate}</strong> um <strong>${time}</strong> bestätigt.</p>
+    <div style="background-color: #f8fafc; border-left: 4px solid #db2777; padding: 16px; margin: 20px 0; border-radius: 4px;">
+      <p style="margin: 0 0 8px 0; font-weight: 600; color: #db2777;">💅 Deine Behandlungen:</p>
+      <ul style="margin: 0; color: #475569; list-style: none; padding: 0;">
+        ${renderTreatmentList(treatments, { showPrices: true })}
+      </ul>
+    </div>
     <p>Wir freuen uns auf dich!</p>
     <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;">📋 Wichtiger Hinweis:</p>
@@ -152,8 +185,8 @@ export async function renderBookingConfirmedHTML(params: { name: string; date: s
   return renderBrandedEmail("Termin bestätigt", inner);
 }
 
-export async function renderBookingCancelledHTML(params: { name: string; date: string; time: string }) {
+export async function renderBookingCancelledHTML(params: { name: string; date: string; time: string; treatments: Array<{id: string; name: string; duration: number; price: number}> }) {
-  const { name, date, time } = params;
+  const { name, date, time, treatments } = params;
   const formattedDate = formatDateGerman(date);
   const domain = process.env.DOMAIN || 'localhost:5173';
   const protocol = domain.includes('localhost') ? 'http' : 'https';
@@ -162,6 +195,12 @@ export async function renderBookingCancelledHTML(params: { name: string; date: s
   const inner = `
     <p>Hallo ${name},</p>
     <p>dein Termin am <strong>${formattedDate}</strong> um <strong>${time}</strong> wurde abgesagt.</p>
+    <div style="background-color: #f8fafc; border-left: 4px solid #db2777; padding: 16px; margin: 20px 0; border-radius: 4px;">
+      <p style="margin: 0 0 8px 0; font-weight: 600; color: #db2777;">💅 Abgesagte Behandlungen:</p>
+      <ul style="margin: 0; color: #475569; list-style: none; padding: 0;">
+        ${renderTreatmentList(treatments, { showPrices: true })}
+      </ul>
+    </div>
     <p>Bitte buche einen neuen Termin. Bei Fragen helfen wir 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>
@@ -176,13 +215,14 @@ export async function renderAdminBookingNotificationHTML(params: {
   name: string; 
   date: string; 
   time: string; 
-  treatment: string;
+  treatments: Array<{id: string; name: string; duration: number; price: number}>;
   phone: string;
   notes?: string;
   hasInspirationPhoto: boolean;
 }) {
-  const { name, date, time, treatment, phone, notes, hasInspirationPhoto } = params;
+  const { name, date, time, treatments, phone, notes, hasInspirationPhoto } = params;
   const formattedDate = formatDateGerman(date);
+  
   const inner = `
     <p>Hallo Admin,</p>
     <p>eine neue Buchungsanfrage ist eingegangen:</p>
@@ -191,7 +231,11 @@ export async function renderAdminBookingNotificationHTML(params: {
       <ul style="margin: 8px 0 0 0; color: #475569; list-style: none; padding: 0;">
         <li><strong>Name:</strong> ${name}</li>
         <li><strong>Telefon:</strong> ${phone}</li>
-        <li><strong>Behandlung:</strong> ${treatment}</li>
+        <li><strong>Behandlungen:</strong>
+          <ul style="margin: 4px 0 0 0; list-style: none; padding: 0 0 0 16px;">
+            ${renderTreatmentList(treatments, { showPrices: false })}
+          </ul>
+        </li>
         <li><strong>Datum:</strong> ${formattedDate}</li>
         <li><strong>Uhrzeit:</strong> ${time}</li>
         ${notes ? `<li><strong>Notizen:</strong> ${notes}</li>` : ''}
@@ -347,3 +391,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);
+}
+

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
@@ -28,15 +29,27 @@ function formatDateForICS(date: string, time: string): string {
   return `${year}${month}${day}T${hours}${minutes}00`;
 }
 
+// Helper function to escape text values for ICS files (RFC 5545)
+function icsEscape(text: string): string {
+  return text
+    .replace(/\\/g, '\\\\')  // Backslash must be escaped first
+    .replace(/;/g, '\\;')    // Semicolon
+    .replace(/,/g, '\\,')    // Comma
+    .replace(/\n/g, '\\n');  // Newline
+}
+
 // Helper function to create ICS (iCalendar) file content
 function createICSFile(params: {
   date: string; // YYYY-MM-DD
   time: string; // HH:MM
-  durationMinutes: number;
   customerName: string;
-  treatmentName: string;
+  customerEmail?: string;
+  treatments: Array<{id: string; name: string; duration: number; price: number}>;
 }): string {
-  const { date, time, durationMinutes, customerName, treatmentName } = params;
+  const { date, time, customerName, customerEmail, treatments } = params;
+  
+  // Calculate duration from treatments
+  const durationMinutes = treatments.reduce((sum, t) => sum + t.duration, 0);
   
   // Calculate start and end times in Europe/Berlin timezone
   const dtStart = formatDateForICS(date, time);
@@ -56,6 +69,17 @@ function createICSFile(params: {
   const now = new Date();
   const dtstamp = now.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
   
+  // Build treatments list for SUMMARY and DESCRIPTION
+  const treatmentNames = icsEscape(treatments.map(t => t.name).join(', '));
+  const totalDuration = treatments.reduce((sum, t) => sum + t.duration, 0);
+  const totalPrice = treatments.reduce((sum, t) => sum + t.price, 0);
+  
+  const treatmentDetails = treatments.map(t => 
+    `${icsEscape(t.name)} (${t.duration} Min, ${t.price.toFixed(2)} EUR)`
+  ).join('\\n');
+  
+  const description = `Behandlungen:\\n${treatmentDetails}\\n\\nGesamt: ${totalDuration} Min, ${totalPrice.toFixed(2)} EUR\\n\\nTermin bei Stargirlnails Kiel`;
+  
   // ICS content
   const icsContent = [
     'BEGIN:VCALENDAR',
@@ -68,11 +92,11 @@ function createICSFile(params: {
     `DTSTAMP:${dtstamp}`,
     `DTSTART;TZID=Europe/Berlin:${dtStart}`,
     `DTEND;TZID=Europe/Berlin:${dtEnd}`,
-    `SUMMARY:${treatmentName} - Stargirlnails Kiel`,
+    `SUMMARY:${treatmentNames} - Stargirlnails Kiel`,
-    `DESCRIPTION:Termin für ${treatmentName} bei Stargirlnails Kiel`,
+    `DESCRIPTION:${description}`,
     'LOCATION:Stargirlnails Kiel',
     `ORGANIZER;CN=Stargirlnails Kiel:mailto:${process.env.EMAIL_FROM?.match(/<(.+)>/)?.[1] || 'no-reply@stargirlnails.de'}`,
-    `ATTENDEE;CN=${customerName};RSVP=TRUE:mailto:${customerName}`,
+    ...(customerEmail ? [`ATTENDEE;CN=${customerName};RSVP=TRUE:mailto:${customerEmail}`] : []),
     'STATUS:CONFIRMED',
     'SEQUENCE:0',
     'BEGIN:VALARM',
@@ -130,22 +154,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 +182,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 };
 }
 
@@ -178,9 +210,9 @@ export async function sendEmailWithAGBAndCalendar(
   calendarParams: {
     date: string;
     time: string;
-    durationMinutes: number;
     customerName: string;
-    treatmentName: string;
+    customerEmail?: string;
+    treatments: Array<{id: string; name: string; duration: number; price: number}>;
   }
 ): Promise<{ success: boolean }> {
   const agbBase64 = await getAGBPDFBase64();

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()
     };
@@ -316,12 +363,18 @@ const create = os
         name: input.customerName, 
         date: input.appointmentDate, 
         time: input.appointmentTime,
-        statusUrl: bookingUrl 
+        statusUrl: bookingUrl,
+        treatments: input.treatments
       });
+      
+      const treatmentsText = input.treatments.map(t => `- ${t.name} (${t.duration} Min, ${t.price.toFixed(2)} €)`).join('\n');
+      const totalDuration = input.treatments.reduce((sum, t) => sum + t.duration, 0);
+      const totalPrice = input.treatments.reduce((sum, t) => sum + t.price, 0);
+      
       await sendEmail({
       to: input.customerEmail,
       subject: "Deine Terminanfrage ist eingegangen",
-      text: `Hallo ${input.customerName},\n\nwir haben deine Anfrage für ${formattedDate} um ${input.appointmentTime} erhalten. Wir bestätigen deinen Termin in Kürze. Du erhältst eine weitere E-Mail, sobald der Termin bestätigt ist.\n\nTermin-Status ansehen: ${bookingUrl}\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
+      text: `Hallo ${input.customerName},\n\nwir haben deine Anfrage für ${formattedDate} um ${input.appointmentTime} erhalten.\n\nBehandlungen:\n${treatmentsText}\n\nGesamt: ${totalDuration} Min, ${totalPrice.toFixed(2)} €\n\nWir bestätigen deinen Termin in Kürze. Du erhältst eine weitere E-Mail, sobald der Termin bestätigt ist.\n\nTermin-Status ansehen: ${bookingUrl}\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
         html,
       }).catch(() => {});
     })();
@@ -330,27 +383,26 @@ const create = os
     void (async () => {
       if (!process.env.ADMIN_EMAIL) return;
       
-      // Get treatment name from KV
-      const allTreatments = await treatmentsKV.getAllItems();
-      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,
+        treatments: input.treatments,
         phone: input.customerPhone || "Nicht angegeben",
         notes: input.notes,
         hasInspirationPhoto: !!input.inspirationPhoto
       });
 
       const homepageUrl = generateUrl();
+      const treatmentsText = input.treatments.map(t => `  - ${t.name} (${t.duration} Min, ${t.price.toFixed(2)} €)`).join('\n');
+      const totalDuration = input.treatments.reduce((sum, t) => sum + t.duration, 0);
+      const totalPrice = input.treatments.reduce((sum, t) => sum + t.price, 0);
       
       const adminText = `Neue Buchungsanfrage eingegangen:\n\n` +
         `Name: ${input.customerName}\n` +
         `Telefon: ${input.customerPhone || "Nicht angegeben"}\n` +
-        `Behandlung: ${treatmentName}\n` +
+        `Behandlungen:\n${treatmentsText}\n` +
+        `Gesamt: ${totalDuration} Min, ${totalPrice.toFixed(2)} €\n` +
         `Datum: ${formatDateGerman(input.appointmentDate)}\n` +
         `Uhrzeit: ${input.appointmentTime}\n` +
         `${input.notes ? `Notizen: ${input.notes}\n` : ''}` +
@@ -427,40 +479,48 @@ const updateStatus = os
           date: booking.appointmentDate, 
           time: booking.appointmentTime,
           cancellationUrl: bookingUrl, // Now points to booking status page
-          reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`)
+          reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`),
+          treatments: booking.treatments
         });
         
-        // Get treatment information for ICS file
+        const treatmentsText = booking.treatments.map(t => `- ${t.name} (${t.duration} Min, ${t.price.toFixed(2)} €)`).join('\n');
-        const allTreatments = await treatmentsKV.getAllItems();
+        const totalDuration = booking.treatments.reduce((sum, t) => sum + t.duration, 0);
-        const treatment = allTreatments.find(t => t.id === booking.treatmentId);
+        const totalPrice = booking.treatments.reduce((sum, t) => sum + t.price, 0);
-        const treatmentName = treatment?.name || "Behandlung";
-        // Use bookedDurationMinutes if available, otherwise fallback to treatment duration
-        const treatmentDuration = booking.bookedDurationMinutes || treatment?.duration || 60;
         
         if (booking.customerEmail) {
         await sendEmailWithAGBAndCalendar({
           to: booking.customerEmail,
           subject: "Dein Termin wurde bestätigt - AGB im Anhang",
-          text: `Hallo ${booking.customerName},\n\nwir haben deinen Termin am ${formattedDate} um ${booking.appointmentTime} bestätigt.\n\nWichtiger Hinweis: Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.\n\nTermin-Status ansehen und verwalten: ${bookingUrl}\nFalls du den Termin stornieren möchtest, kannst du das über den obigen Link tun.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nBis bald!\nStargirlnails Kiel`,
+          text: `Hallo ${booking.customerName},\n\nwir haben deinen Termin am ${formattedDate} um ${booking.appointmentTime} bestätigt.\n\nBehandlungen:\n${treatmentsText}\n\nGesamt: ${totalDuration} Min, ${totalPrice.toFixed(2)} €\n\nWichtiger Hinweis: Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.\n\nTermin-Status ansehen und verwalten: ${bookingUrl}\nFalls du den Termin stornieren möchtest, kannst du das über den obigen Link tun.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nBis bald!\nStargirlnails Kiel`,
           html,
           bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
         }, {
           date: booking.appointmentDate,
           time: booking.appointmentTime,
-          durationMinutes: treatmentDuration,
           customerName: booking.customerName,
-          treatmentName: treatmentName
+          customerEmail: booking.customerEmail,
+          treatments: booking.treatments
         });
         }
       } else if (input.status === "cancelled") {
         const formattedDate = formatDateGerman(booking.appointmentDate);
         const homepageUrl = generateUrl();
-        const html = await renderBookingCancelledHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime });
+        const html = await renderBookingCancelledHTML({ 
+          name: booking.customerName, 
+          date: booking.appointmentDate, 
+          time: booking.appointmentTime,
+          treatments: booking.treatments
+        });
+        
+        const treatmentsText = booking.treatments.map(t => `- ${t.name} (${t.duration} Min, ${t.price.toFixed(2)} €)`).join('\n');
+        const totalDuration = booking.treatments.reduce((sum, t) => sum + t.duration, 0);
+        const totalPrice = booking.treatments.reduce((sum, t) => sum + t.price, 0);
+        
         if (booking.customerEmail) {
         await sendEmail({
           to: booking.customerEmail,
           subject: "Dein Termin wurde abgesagt",
-          text: `Hallo ${booking.customerName},\n\nleider wurde dein Termin am ${formattedDate} um ${booking.appointmentTime} abgesagt. Bitte buche einen neuen Termin.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
+          text: `Hallo ${booking.customerName},\n\nleider wurde dein Termin am ${formattedDate} um ${booking.appointmentTime} abgesagt.\n\nBehandlungen:\n${treatmentsText}\n\nGesamt: ${totalDuration} Min, ${totalPrice.toFixed(2)} €\n\nBitte buche einen neuen Termin.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
           html,
           bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
         });
@@ -504,11 +564,21 @@ const remove = os
       try {
         const formattedDate = formatDateGerman(booking.appointmentDate);
         const homepageUrl = generateUrl();
-        const html = await renderBookingCancelledHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime });
+        const html = await renderBookingCancelledHTML({ 
+          name: booking.customerName, 
+          date: booking.appointmentDate, 
+          time: booking.appointmentTime,
+          treatments: booking.treatments
+        });
+        
+        const treatmentsText = booking.treatments.map(t => `- ${t.name} (${t.duration} Min, ${t.price.toFixed(2)} €)`).join('\n');
+        const totalDuration = booking.treatments.reduce((sum, t) => sum + t.duration, 0);
+        const totalPrice = booking.treatments.reduce((sum, t) => sum + t.price, 0);
+        
         await sendEmail({
           to: booking.customerEmail,
           subject: "Dein Termin wurde abgesagt",
-          text: `Hallo ${booking.customerName},\n\nleider wurde dein Termin am ${formattedDate} um ${booking.appointmentTime} abgesagt. Bitte buche einen neuen Termin.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
+          text: `Hallo ${booking.customerName},\n\nleider wurde dein Termin am ${formattedDate} um ${booking.appointmentTime} abgesagt.\n\nBehandlungen:\n${treatmentsText}\n\nGesamt: ${totalDuration} Min, ${totalPrice.toFixed(2)} €\n\nBitte buche einen neuen Termin.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nLiebe Grüße\nStargirlnails Kiel`,
           html,
           bcc: process.env.ADMIN_EMAIL ? [process.env.ADMIN_EMAIL] : undefined,
         });
@@ -524,7 +594,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 +627,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;
@@ -611,20 +689,24 @@ const createManual = os
             date: input.appointmentDate,
             time: input.appointmentTime,
             cancellationUrl: bookingUrl,
-            reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`)
+            reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`),
+            treatments: input.treatments
           });
 
+          const treatmentsText = input.treatments.map(t => `- ${t.name} (${t.duration} Min, ${t.price.toFixed(2)} €)`).join('\n');
+          const totalPrice = input.treatments.reduce((sum, t) => sum + t.price, 0);
+
         await sendEmailWithAGBAndCalendar({
           to: input.customerEmail!,
           subject: "Dein Termin wurde bestätigt - AGB im Anhang",
-          text: `Hallo ${input.customerName},\n\nwir haben deinen Termin am ${formattedDate} um ${input.appointmentTime} bestätigt.\n\nWichtiger Hinweis: Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.\n\nTermin-Status ansehen und verwalten: ${bookingUrl}\nFalls du den Termin stornieren möchtest, kannst du das über den obigen Link tun.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nBis bald!\nStargirlnails Kiel`,
+          text: `Hallo ${input.customerName},\n\nwir haben deinen Termin am ${formattedDate} um ${input.appointmentTime} bestätigt.\n\nBehandlungen:\n${treatmentsText}\n\nGesamt: ${totalDuration} Min, ${totalPrice.toFixed(2)} €\n\nWichtiger Hinweis: Die Allgemeinen Geschäftsbedingungen (AGB) findest du im Anhang dieser E-Mail. Bitte lies sie vor deinem Termin durch.\n\nTermin-Status ansehen und verwalten: ${bookingUrl}\nFalls du den Termin stornieren möchtest, kannst du das über den obigen Link tun.\n\nRechtliche Informationen: ${generateUrl('/legal')}\nZur Website: ${homepageUrl}\n\nBis bald!\nStargirlnails Kiel`,
           html,
         }, {
             date: input.appointmentDate,
             time: input.appointmentTime,
-            durationMinutes: treatment.duration,
             customerName: input.customerName,
-            treatmentName: treatment.name
+            customerEmail: input.customerEmail,
+            treatments: input.treatments
           });
         } catch (e) {
           console.error("Email send failed for manual booking:", e);
@@ -695,8 +777,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 +799,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 +813,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 +848,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);
@@ -783,29 +871,37 @@ export const router = {
           time: updated.appointmentTime,
           cancellationUrl: generateUrl(`/booking/${bookingAccessToken.token}`),
           reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`),
+          treatments: updated.treatments,
         });
+        
+        const treatmentsText = updated.treatments.map(t => `- ${t.name} (${t.duration} Min, ${t.price.toFixed(2)} €)`).join('\n');
+        const totalPrice = updated.treatments.reduce((sum, t) => sum + t.price, 0);
+        
         await sendEmailWithAGBAndCalendar({
           to: updated.customerEmail,
           subject: "Terminänderung bestätigt",
-          text: `Hallo ${updated.customerName}, dein neuer Termin ist am ${formatDateGerman(updated.appointmentDate)} um ${updated.appointmentTime}.`,
+          text: `Hallo ${updated.customerName}, dein neuer Termin ist am ${formatDateGerman(updated.appointmentDate)} um ${updated.appointmentTime}.\n\nBehandlungen:\n${treatmentsText}\n\nGesamt: ${duration} Min, ${totalPrice.toFixed(2)} €`,
           html,
         }, {
           date: updated.appointmentDate,
           time: updated.appointmentTime,
-          durationMinutes: duration,
           customerName: updated.customerName,
-          treatmentName: (await treatmentsKV.getItem(updated.treatmentId))?.name || "Behandlung",
+          customerEmail: updated.customerEmail,
+          treatments: updated.treatments,
         }).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,
@@ -832,23 +928,38 @@ export const router = {
       // Notify customer that original stays
       if (booking.customerEmail) {
         const bookingAccessToken = await queryClient.cancellation.createToken({ bookingId: booking.id });
+        
+        const treatmentsText = booking.treatments.map(t => `- ${t.name} (${t.duration} Min, ${t.price.toFixed(2)} €)`).join('\n');
+        const totalDuration = booking.treatments.reduce((sum, t) => sum + t.duration, 0);
+        const totalPrice = booking.treatments.reduce((sum, t) => sum + t.price, 0);
+        
         await sendEmail({
           to: booking.customerEmail,
           subject: "Terminänderung abgelehnt",
-          text: `Du hast den Vorschlag zur Terminänderung abgelehnt. Dein ursprünglicher Termin am ${formatDateGerman(booking.appointmentDate)} um ${booking.appointmentTime} bleibt bestehen.`,
+          text: `Du hast den Vorschlag zur Terminänderung abgelehnt. Dein ursprünglicher Termin am ${formatDateGerman(booking.appointmentDate)} um ${booking.appointmentTime} bleibt bestehen.\n\nBehandlungen:\n${treatmentsText}\n\nGesamt: ${totalDuration} Min, ${totalPrice.toFixed(2)} €`,
-          html: await renderBookingConfirmedHTML({ name: booking.customerName, date: booking.appointmentDate, time: booking.appointmentTime, cancellationUrl: generateUrl(`/booking/${bookingAccessToken.token}`), reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`) }),
+          html: await renderBookingConfirmedHTML({ 
+            name: booking.customerName, 
+            date: booking.appointmentDate, 
+            time: booking.appointmentTime, 
+            cancellationUrl: generateUrl(`/booking/${bookingAccessToken.token}`), 
+            reviewUrl: generateUrl(`/review/${bookingAccessToken.token}`),
+            treatments: booking.treatments
+          }),
         }).catch(() => {});
       }
 
       // 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 +1022,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.`
+      };
+    }),
 };

src/server/rpc/recurring-availability.ts

@@ -272,7 +272,12 @@ const getAvailableTimes = os
   .input(
     z.object({
       date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
-      treatmentId: z.string(),
+      treatmentIds: z.array(z.string())
+        .min(1, "Mindestens eine Behandlung muss ausgewählt werden")
+        .max(3, "Maximal 3 Behandlungen können ausgewählt werden")
+        .refine(list => {
+          return list.length === new Set(list).size;
+        }, { message: "Doppelte Behandlungen sind nicht erlaubt" }),
     })
   )
   .handler(async ({ input }) => {
@@ -287,13 +292,22 @@ const getAvailableTimes = os
         return [];
       }
       
-      // Get treatment duration
+      // Get multiple treatments and calculate total duration
-      const treatment = await treatmentsKV.getItem(input.treatmentId);
+      const treatments = await Promise.all(
-      if (!treatment) {
+        input.treatmentIds.map(id => treatmentsKV.getItem(id))
-        throw new Error("Behandlung nicht gefunden.");
+      );
+      
+      // Validate that all treatments exist
+      const missingTreatments = treatments
+        .map((t, i) => t ? null : input.treatmentIds[i])
+        .filter(id => id !== null);
+      
+      if (missingTreatments.length > 0) {
+        throw new Error(`Behandlung(en) nicht gefunden: ${missingTreatments.join(', ')}`);
       }
       
-      const treatmentDuration = treatment.duration;
+      // Calculate total duration by summing all treatment durations
+      const treatmentDuration = treatments.reduce((sum, t) => sum + (t?.duration || 0), 0);
       
       // Parse the date to get day of week
       const [year, month, day] = input.date.split('-').map(Number);
@@ -344,36 +358,38 @@ const getAvailableTimes = os
         ['pending', 'confirmed', 'completed'].includes(booking.status)
       );
       
-      // Optimize treatment duration lookup with Map caching
+      // Build cache only for legacy treatmentId bookings
-      const uniqueTreatmentIds = [...new Set(dateBookings.map(booking => booking.treatmentId))];
+      const legacyTreatmentIds = [...new Set(dateBookings.filter(b => b.treatmentId).map(b => b.treatmentId as string))];
       const treatmentDurationMap = new Map<string, number>();
       
-      for (const treatmentId of uniqueTreatmentIds) {
+      // Only build cache if there are legacy bookings
-        const treatment = await treatmentsKV.getItem(treatmentId);
+      if (legacyTreatmentIds.length > 0) {
-        treatmentDurationMap.set(treatmentId, treatment?.duration || 60);
+        for (const id of legacyTreatmentIds) {
-      }
+          const t = await treatmentsKV.getItem(id);
-      
+          treatmentDurationMap.set(id, t?.duration || 60);
-      // Get treatment durations for all bookings using the cached map
+        }
-      const bookingTreatments = new Map();
-      for (const booking of dateBookings) {
-        // Use bookedDurationMinutes if available, otherwise fallback to treatment duration
-        const duration = booking.bookedDurationMinutes || treatmentDurationMap.get(booking.treatmentId) || 60;
-        bookingTreatments.set(booking.id, duration);
       }
       
       // Filter out booking conflicts
       const availableTimesFiltered = availableTimes.filter(slotTime => {
         const slotStartMinutes = parseTime(slotTime);
-        const slotEndMinutes = slotStartMinutes + treatmentDuration;
+        const slotEndMinutes = slotStartMinutes + treatmentDuration; // total from selected treatments
         
-        // Check if this slot overlaps with any existing booking
         const hasConflict = dateBookings.some(booking => {
-          const bookingStartMinutes = parseTime(booking.appointmentTime);
+          let bookingDuration: number;
-          const bookingDuration = bookingTreatments.get(booking.id) || 60;
+          if (booking.treatments && booking.treatments.length > 0) {
-          const bookingEndMinutes = bookingStartMinutes + bookingDuration;
+            bookingDuration = booking.treatments.reduce((sum: number, t: { duration: number }) => sum + t.duration, 0);
+          } else if (booking.bookedDurationMinutes) {
+            bookingDuration = booking.bookedDurationMinutes;
+          } else if (booking.treatmentId) {
+            bookingDuration = treatmentDurationMap.get(booking.treatmentId) || 60;
+          } else {
+            bookingDuration = 60;
+          }
           
-          // Check overlap: slotStart < bookingEnd && slotEnd > bookingStart
+          const bookingStart = parseTime(booking.appointmentTime);
-          return slotStartMinutes < bookingEndMinutes && slotEndMinutes > bookingStartMinutes;
+          const bookingEnd = bookingStart + bookingDuration;
+          return slotStartMinutes < bookingEnd && slotEndMinutes > bookingStart;
         });
         
         return !hasConflict;