@bigz-app/booking-widget 0.3.6 → 0.3.8

package/dist/booking-widget.js

@@ -6946,7 +6946,7 @@
       // Convert double underscores to HTML underline tags for React Markdown
       return markdown.replace(/__([^_]+)__/g, "<u>$1</u>");
   };
-  const IconCheck$1 = ({ size = 16, color = "#10b981" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$2("polyline", { points: "20 6 9 17 4 12" }) }));
+  const IconCheck$2 = ({ size = 16, color = "#10b981" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$2("polyline", { points: "20 6 9 17 4 12" }) }));
   const IconWave$1 = ({ size = 20, color = "#0ea5e9" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$2("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$2("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$2("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
   function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect, }) {
       if (!isOpen || !eventType)
@@ -6993,7 +6993,7 @@
                                               fontSize: "16px",
                                               lineHeight: "1.6",
                                               color: "var(--bw-text-color)",
-                                          }, children: [u$2("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$2(IconCheck$1, { size: 16, color: "var(--bw-success-color)" }) }), u$2("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (u$2("div", { style: {
+                                          }, children: [u$2("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$2(IconCheck$2, { size: 16, color: "var(--bw-success-color)" }) }), u$2("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (u$2("div", { style: {
                           marginBottom: "24px",
                           color: "var(--bw-text-muted)",
                           fontSize: "16px",
@@ -7302,7 +7302,7 @@
   // Custom minimal SVG icons (Lucide-style)
   const IconClock = ({ size = 16, color = "#10b981" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$2("circle", { cx: "12", cy: "12", r: "10" }), u$2("polyline", { points: "12 6 12 12 16 14" })] }));
   const IconCalendar = ({ size = 16, color = "#3b82f6" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$2("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), u$2("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), u$2("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), u$2("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }));
-  const IconCheck = ({ size = 16, color = "#10b981" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$2("polyline", { points: "20 6 9 17 4 12" }) }));
+  const IconCheck$1 = ({ size = 16, color = "#10b981" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$2("polyline", { points: "20 6 9 17 4 12" }) }));
   // Wave icon for booking action
   const IconWave = ({ size = 20, color = "#0ea5e9" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$2("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$2("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$2("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
   // Loading skeleton component that matches the actual design
@@ -7766,7 +7766,7 @@
                                                                       color: "var(--bw-text-muted)",
                                                                       position: "relative",
                                                                       maxWidth: "100%",
-                                                                  }, children: [u$2("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$2(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), u$2("span", { style: {
+                                                                  }, children: [u$2("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$2(IconCheck$1, { size: 16, color: "var(--bw-success-color)" }) }), u$2("span", { style: {
                                                                               textOverflow: "ellipsis",
                                                                               overflow: "hidden",
                                                                               whiteSpace: "nowrap",
@@ -9196,6 +9196,110 @@
 
   var reactStripe_umdExports = reactStripe_umd.exports;
 
+  // Component for bookings fully covered by gift cards (no Stripe payment needed)
+  function GiftCardOnlyBooking({ config, eventDetails, formData, discountCode, giftCards, onSuccess, onError, }) {
+      const [isLoading, setIsLoading] = d$1(false);
+      const [error, setError] = d$1(null);
+      const handleBooking = async () => {
+          setIsLoading(true);
+          setError(null);
+          try {
+              // Create booking directly without Stripe payment
+              const requestData = {
+                  eventInstanceId: config.eventInstanceId || eventDetails.id,
+                  organizationId: config.organizationId,
+                  participants: formData.participants.filter((p) => p.name?.trim()),
+                  discountCode: discountCode?.code,
+                  giftCardCodes: giftCards.map((gc) => gc.code),
+                  customerName: formData.customerName?.trim(),
+                  customerEmail: formData.customerEmail?.trim(),
+                  customerPhone: formData.customerPhone?.trim(),
+                  comment: formData.comment?.trim(),
+                  paymentMethod: "gift_card",
+              };
+              const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-gift-card-booking"), {
+                  method: "POST",
+                  headers: createApiHeaders(config),
+                  body: JSON.stringify(createRequestBody(config, requestData)),
+              });
+              const data = await response.json();
+              if (response.ok) {
+                  onSuccess({
+                      booking: data.booking,
+                      order: data.order,
+                      giftCardRedemptions: data.giftCardRedemptions,
+                  });
+              }
+              else {
+                  setError(data.error || "Fehler beim Erstellen der Buchung");
+                  onError(data.error || "Fehler beim Erstellen der Buchung");
+              }
+          }
+          catch (err) {
+              setError(err.message || "Fehler beim Erstellen der Buchung");
+              onError(err.message || "Fehler beim Erstellen der Buchung");
+          }
+          finally {
+              setIsLoading(false);
+          }
+      };
+      const totalGiftCardAmount = giftCards.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0);
+      return (u$2("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: [u$2("div", { style: {
+                      backgroundColor: "var(--bw-success-color)15",
+                      border: "1px solid var(--bw-success-color)40",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "var(--bw-spacing)",
+                  }, children: [u$2("div", { style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "8px",
+                              marginBottom: "8px",
+                              color: "var(--bw-success-color)",
+                              fontFamily: "var(--bw-font-family)",
+                              fontWeight: "600",
+                          }, children: "\uD83C\uDF81 Vollst\u00E4ndig durch Gutschein(e) gedeckt" }), u$2("div", { style: {
+                              fontSize: "var(--bw-font-size)",
+                              color: "var(--bw-text-muted)",
+                              fontFamily: "var(--bw-font-family)",
+                          }, children: ["Gutschein-Guthaben: ", formatCurrency(totalGiftCardAmount)] })] }), error && (u$2("div", { style: {
+                      backgroundColor: "var(--bw-error-color)15",
+                      border: "1px solid var(--bw-error-color)40",
+                      borderRadius: "var(--bw-border-radius)",
+                      padding: "var(--bw-spacing)",
+                      color: "var(--bw-error-color)",
+                      fontSize: "var(--bw-font-size)",
+                      fontFamily: "var(--bw-font-family)",
+                  }, children: ["\u26A0\uFE0F ", error] })), u$2("button", { type: "button", onClick: handleBooking, disabled: isLoading, style: {
+                      width: "100%",
+                      padding: "12px 24px",
+                      backgroundColor: "var(--bw-highlight-color)",
+                      color: "#fff",
+                      border: "none",
+                      borderRadius: "var(--bw-border-radius)",
+                      fontSize: "var(--bw-font-size)",
+                      fontWeight: "600",
+                      cursor: isLoading ? "not-allowed" : "pointer",
+                      opacity: isLoading ? 0.6 : 1,
+                      transition: "all 0.2s ease",
+                      fontFamily: "var(--bw-font-family)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: "8px",
+                  }, children: isLoading ? (u$2(k$3, { children: [u$2("div", { style: {
+                                  width: "16px",
+                                  height: "16px",
+                                  border: "2px solid #fff",
+                                  borderTopColor: "transparent",
+                                  borderRadius: "50%",
+                                  animation: "spin 1s linear infinite",
+                              } }), "Buchung wird erstellt..."] })) : ("Mit Gutschein buchen") }), u$2("style", { children: `
+				@keyframes spin {
+					from { transform: rotate(0deg); }
+					to { transform: rotate(360deg); }
+				}
+			` })] }));
+  }
   const spinner$1 = (borderColor) => (u$2("div", { style: {
           width: "auto",
           height: "auto",
@@ -9212,7 +9316,7 @@
               borderRadius: "50%",
           } }) }));
   // Inner component that uses the Stripe hooks
-  function PaymentFormInner({ config, eventDetails, formData, totalAmount, discountCode, onSuccess, onError, }) {
+  function PaymentFormInner({ config, eventDetails, formData, totalAmount, discountCode, giftCards, onSuccess, onError, }) {
       const stripe = reactStripe_umdExports.useStripe();
       const elements = reactStripe_umdExports.useElements();
       const [isLoading, setIsLoading] = d$1(false);
@@ -9343,7 +9447,7 @@
 			` })] }));
   }
   // Main PaymentForm component that handles payment intent creation and Elements wrapper
-  function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, }) {
+  function PaymentForm({ config, eventDetails, formData, totalAmount, discountCode, giftCards, onSuccess, onError, systemConfig, stripePromise, stripeAppearance, }) {
       const [clientSecret, setClientSecret] = d$1(null);
       const [paymentIntentId, setPaymentIntentId] = d$1(null);
       const [isCreatingPaymentIntent, setIsCreatingPaymentIntent] = d$1(false);
@@ -9439,6 +9543,7 @@
                       currency: "eur",
                       participants: formData.participants.filter((p) => p.name?.trim()),
                       discountCode: discountCode?.code,
+                      giftCardCodes: giftCards?.map((gc) => gc.code) || [],
                       customerName: formData.customerName?.trim(),
                       customerEmail: formData.customerEmail?.trim(),
                       customerPhone: formData.customerPhone?.trim(),
@@ -9500,8 +9605,21 @@
           formData.customerName,
           totalAmount,
           discountCode,
+          giftCards,
           config,
       ]);
+      // Calculate total gift card coverage
+      const totalGiftCardAmount = giftCards?.reduce((sum, gc) => sum + (gc.balanceToUse || gc.discountAmount || 0), 0) || 0;
+      const baseTotal = eventDetails?.price
+          ? eventDetails.price * (formData.participants?.filter((p) => p.name?.trim()).length || 0)
+          : 0;
+      const discountAmount = discountCode?.discountAmount || 0;
+      const amountAfterDiscount = Math.max(0, baseTotal - discountAmount);
+      const isFullyCoveredByGiftCards = totalGiftCardAmount >= amountAfterDiscount && amountAfterDiscount > 0;
+      // If gift cards fully cover the payment, show a simplified booking button
+      if (isFullyCoveredByGiftCards && totalAmount <= 0) {
+          return (u$2(GiftCardOnlyBooking, { config: config, eventDetails: eventDetails, formData: formData, discountCode: discountCode, giftCards: giftCards || [], onSuccess: onSuccess, onError: onError }));
+      }
       // Show loading state while creating payment intent
       if (isCreatingPaymentIntent || !clientSecret) {
           return (u$2("div", { style: {
@@ -9535,7 +9653,7 @@
               clientSecret,
               appearance: stripeAppearance || { theme: "stripe" },
               locale: config.locale || "de",
-          }, children: u$2(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: (result) => {
+          }, children: u$2(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, giftCards: giftCards, onSuccess: (result) => {
                   // Clear persisted PI data on successful payment
                   clearPersistedPaymentIntent();
                   setPaymentIntentId(null);
@@ -9740,6 +9858,222 @@
                   }, children: children }))] }));
   }
 
+  // Icons
+  const IconTicket = ({ size = 20, color = "currentColor" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$2("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), u$2("path", { d: "M13 5v2" }), u$2("path", { d: "M13 17v2" }), u$2("path", { d: "M13 11v2" })] }));
+  const IconGift = ({ size = 20, color = "currentColor" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$2("rect", { x: "3", y: "8", width: "18", height: "4", rx: "1" }), u$2("path", { d: "M12 8v13" }), u$2("path", { d: "M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" }), u$2("path", { d: "M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" })] }));
+  const IconCheck = ({ size = 16, color = "currentColor" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$2("polyline", { points: "20 6 9 17 4 12" }) }));
+  const IconX = ({ size = 16, color = "currentColor" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), u$2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+  const IconSpinner = ({ size = 16, color = "currentColor" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: "spin 1s linear infinite" }, children: u$2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
+  function VoucherInput({ config, orderValue, eventInstanceId, customerEmail, onVoucherValidated, appliedVouchers, onRemoveVoucher, disabled = false, }) {
+      const [inputValue, setInputValue] = d$1("");
+      const [isLoading, setIsLoading] = d$1(false);
+      const [error, setError] = d$1(null);
+      const [isExpanded, setIsExpanded] = d$1(false);
+      // Check if a discount code is already applied (only one allowed)
+      const hasDiscountCode = appliedVouchers.some((v) => v.type === "discount");
+      const validateVoucher = q$2(async (code) => {
+          if (!code.trim()) {
+              setError(null);
+              return;
+          }
+          // Check if code is already applied
+          if (appliedVouchers.some((v) => v.code.toUpperCase() === code.toUpperCase())) {
+              setError("Dieser Code wurde bereits angewendet");
+              return;
+          }
+          setIsLoading(true);
+          setError(null);
+          try {
+              const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/validate-voucher"), {
+                  method: "POST",
+                  headers: createApiHeaders(config),
+                  body: JSON.stringify(createRequestBody(config, {
+                      code: code.trim(),
+                      orderValue: orderValue,
+                      eventInstanceId: eventInstanceId,
+                      customerEmail: customerEmail,
+                  })),
+              });
+              const data = await response.json();
+              if (data.valid && data.voucher) {
+                  // Check if trying to add a second discount code
+                  if (data.voucher.type === "discount" && hasDiscountCode) {
+                      setError("Es kann nur ein Rabattcode verwendet werden");
+                      onVoucherValidated(null, "Es kann nur ein Rabattcode verwendet werden");
+                      return;
+                  }
+                  onVoucherValidated(data.voucher);
+                  setInputValue("");
+                  setError(null);
+              }
+              else {
+                  setError(data.error || "Code nicht gefunden oder ungültig");
+                  onVoucherValidated(null, data.error);
+              }
+          }
+          catch (err) {
+              const errorMsg = "Fehler beim Validieren des Codes";
+              setError(errorMsg);
+              onVoucherValidated(null, errorMsg);
+          }
+          finally {
+              setIsLoading(false);
+          }
+      }, [
+          config,
+          orderValue,
+          eventInstanceId,
+          customerEmail,
+          appliedVouchers,
+          hasDiscountCode,
+          onVoucherValidated,
+      ]);
+      const handleSubmit = () => {
+          if (inputValue.trim() && !isLoading && !disabled) {
+              validateVoucher(inputValue);
+          }
+      };
+      const handleKeyDown = (e) => {
+          if (e.key === "Enter") {
+              e.preventDefault();
+              if (inputValue.trim() && !isLoading && !disabled) {
+                  validateVoucher(inputValue);
+              }
+          }
+      };
+      const inputStyle = {
+          flex: 1,
+          padding: "10px 12px",
+          backgroundColor: "var(--bw-background-color)",
+          border: "1px solid var(--bw-border-color)",
+          borderRadius: "var(--bw-border-radius)",
+          color: "var(--bw-text-color)",
+          fontSize: "var(--bw-font-size)",
+          fontFamily: "var(--bw-font-family)",
+          outline: "none",
+          transition: "all 0.2s ease",
+          textTransform: "uppercase",
+      };
+      const buttonStyle = {
+          padding: "10px 16px",
+          backgroundColor: "var(--bw-highlight-color)",
+          border: "none",
+          borderRadius: "var(--bw-border-radius)",
+          color: "#fff",
+          fontSize: "var(--bw-font-size)",
+          fontFamily: "var(--bw-font-family)",
+          fontWeight: "600",
+          cursor: disabled || isLoading ? "not-allowed" : "pointer",
+          opacity: disabled || isLoading ? 0.6 : 1,
+          transition: "all 0.2s ease",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          minWidth: "100px",
+      };
+      const appliedVoucherStyle = {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "10px 12px",
+          backgroundColor: "var(--bw-surface-color)",
+          border: "1px solid var(--bw-border-color)",
+          borderRadius: "var(--bw-border-radius)",
+          marginBottom: "8px",
+      };
+      const removeButtonStyle = {
+          background: "none",
+          border: "none",
+          padding: "4px",
+          cursor: "pointer",
+          color: "var(--bw-error-color)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "50%",
+          transition: "background-color 0.2s ease",
+      };
+      return (u$2("div", { style: {
+              backgroundColor: "var(--bw-surface-color)",
+              border: "1px solid var(--bw-border-color)",
+              borderRadius: "var(--bw-border-radius)",
+              overflow: "hidden",
+          }, children: [u$2("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), style: {
+                      width: "100%",
+                      padding: "var(--bw-spacing)",
+                      backgroundColor: "transparent",
+                      border: "none",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      color: "var(--bw-text-color)",
+                      fontFamily: "var(--bw-font-family)",
+                      fontSize: "var(--bw-font-size)",
+                      fontWeight: "500",
+                  }, children: [u$2("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [u$2(IconTicket, { size: 18, color: "var(--bw-highlight-color)" }), "Rabattcode oder Gutschein", appliedVouchers.length > 0 && (u$2("span", { style: {
+                                      backgroundColor: "var(--bw-highlight-color)",
+                                      color: "#fff",
+                                      padding: "2px 8px",
+                                      borderRadius: "12px",
+                                      fontSize: "12px",
+                                      fontWeight: "600",
+                                  }, children: appliedVouchers.length }))] }), u$2("span", { style: {
+                              transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                              transition: "transform 0.2s ease",
+                          }, children: "\u25BC" })] }), isExpanded && (u$2("div", { style: { padding: "0 var(--bw-spacing) var(--bw-spacing)" }, children: [appliedVouchers.length > 0 && (u$2("div", { style: { marginBottom: "12px" }, children: appliedVouchers.map((voucher) => (u$2("div", { style: appliedVoucherStyle, children: [u$2("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [voucher.type === "discount" ? (u$2(IconTicket, { size: 18, color: "var(--bw-success-color)" })) : (u$2(IconGift, { size: 18, color: "var(--bw-success-color)" })), u$2("div", { children: [u$2("div", { style: {
+                                                          fontFamily: "var(--bw-font-family)",
+                                                          fontSize: "var(--bw-font-size)",
+                                                          fontWeight: "600",
+                                                          color: "var(--bw-text-color)",
+                                                          display: "flex",
+                                                          alignItems: "center",
+                                                          gap: "6px",
+                                                      }, children: [u$2("span", { style: { fontFamily: "monospace" }, children: voucher.code }), u$2(IconCheck, { size: 14, color: "var(--bw-success-color)" })] }), u$2("div", { style: {
+                                                          fontFamily: "var(--bw-font-family)",
+                                                          fontSize: "12px",
+                                                          color: "var(--bw-success-color)",
+                                                      }, children: [voucher.type === "discount"
+                                                              ? `−${formatCurrency(voucher.discountAmount)} Rabatt`
+                                                              : `−${formatCurrency(voucher.balanceToUse || voucher.discountAmount)} Gutschein`, voucher.type === "giftCard" &&
+                                                              voucher.remainingBalance !== undefined &&
+                                                              voucher.remainingBalance > 0 && (u$2("span", { style: { color: "var(--bw-text-muted)", marginLeft: "8px" }, children: ["(Rest: ", formatCurrency(voucher.remainingBalance), ")"] }))] })] })] }), u$2("button", { type: "button", onClick: () => onRemoveVoucher(voucher.code), style: removeButtonStyle, title: "Entfernen", children: u$2(IconX, { size: 16 }) })] }, voucher.code))) })), u$2("div", { style: { display: "flex", gap: "8px" }, children: [u$2("input", { type: "text", value: inputValue, onChange: (e) => {
+                                      setInputValue(e.target.value.toUpperCase());
+                                      setError(null);
+                                  }, onKeyDown: handleKeyDown, placeholder: hasDiscountCode
+                                      ? "Gutscheincode eingeben..."
+                                      : "Rabatt- oder Gutscheincode eingeben...", style: inputStyle, disabled: disabled || isLoading, onFocus: (e) => {
+                                      e.target.style.borderColor = "var(--bw-highlight-color)";
+                                      e.target.style.boxShadow = "0 0 0 2px var(--bw-highlight-color)33";
+                                  }, onBlur: (e) => {
+                                      e.target.style.borderColor = "var(--bw-border-color)";
+                                      e.target.style.boxShadow = "none";
+                                  } }), u$2("button", { type: "button", onClick: handleSubmit, style: buttonStyle, disabled: disabled || isLoading || !inputValue.trim(), children: isLoading ? (u$2(IconSpinner, { size: 16, color: "#fff" })) : (u$2(k$3, { children: [u$2(IconCheck, { size: 16 }), "Einl\u00F6sen"] })) })] }), error && (u$2("div", { style: {
+                              marginTop: "8px",
+                              padding: "8px 12px",
+                              backgroundColor: "var(--bw-error-color)15",
+                              border: "1px solid var(--bw-error-color)40",
+                              borderRadius: "var(--bw-border-radius)",
+                              color: "var(--bw-error-color)",
+                              fontSize: "var(--bw-font-size)",
+                              fontFamily: "var(--bw-font-family)",
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "8px",
+                          }, children: [u$2(IconX, { size: 16 }), error] })), hasDiscountCode && (u$2("div", { style: {
+                              marginTop: "8px",
+                              fontSize: "12px",
+                              color: "var(--bw-text-muted)",
+                              fontFamily: "var(--bw-font-family)",
+                          }, children: "\uD83D\uDCA1 Es wurde bereits ein Rabattcode angewendet. Du kannst weitere Gutscheine hinzuf\u00FCgen." }))] })), u$2("style", { children: `
+				@keyframes spin {
+					from { transform: rotate(0deg); }
+					to { transform: rotate(360deg); }
+				}
+			` })] }));
+  }
+
   // Form schemas
   const participantSchema = objectType({
       name: stringType().min(1, "Name ist erforderlich"),
@@ -9759,6 +10093,10 @@
   const IconWarning = ({ size = 48, color = "var(--bw-error-color)" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$2("circle", { cx: "12", cy: "12", r: "10" }), u$2("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), u$2("circle", { cx: "12", cy: "16", r: "1" })] }));
   const IconMoney = ({ size = 20, color = "var(--bw-text-muted)" }) => (u$2("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$2("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }), u$2("circle", { cx: "12", cy: "12", r: "4" }), u$2("line", { x1: "2", y1: "10", x2: "2", y2: "14" }), u$2("line", { x1: "22", y1: "10", x2: "22", y2: "14" })] }));
   function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError, onBackToEventInstances, onBackToEventTypes, selectedEventType, selectedEventInstance, isOpen, onClose, systemConfig, }) {
+      // New voucher system - supports multiple gift cards + one discount code
+      const [appliedVouchers, setAppliedVouchers] = d$1([]);
+      const [voucherError, setVoucherError] = d$1(null);
+      // Legacy state for backward compatibility
       const [discountCode, setDiscountCode] = d$1(null);
       const [discountLoading, setDiscountLoading] = d$1(false);
       const [discountError, setDiscountError] = d$1(null);
@@ -9772,28 +10110,66 @@
           },
       });
       const watchedParticipants = form.watch("participants");
-      const watchedDiscountCode = form.watch("discountCode");
+      form.watch("discountCode");
       const watchedCustomerName = form.watch("customerName");
       const watchedCustomerEmail = form.watch("customerEmail");
       const customerNameError = form.formState.errors.customerName;
       const customerEmailError = form.formState.errors.customerEmail;
       const watchedAcceptTerms = form.watch("acceptTerms");
-      // Calculate total amount and deposit amount
-      const calculateTotal = () => {
+      // Calculate base total before any discounts
+      const calculateBaseTotal = q$2(() => {
           if (!eventDetails)
               return 0;
-          const baseTotal = eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length;
-          return discountCode ? discountCode.newTotal : baseTotal;
-      };
+          return eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length;
+      }, [eventDetails, watchedParticipants]);
+      // Calculate total discount from all applied vouchers
+      const calculateTotalDiscount = q$2(() => {
+          return appliedVouchers.reduce((total, voucher) => {
+              if (voucher.type === "discount") {
+                  return total + voucher.discountAmount;
+              }
+              else if (voucher.type === "giftCard") {
+                  return total + (voucher.balanceToUse || voucher.discountAmount);
+              }
+              return total;
+          }, 0);
+      }, [appliedVouchers]);
+      // Calculate total amount after discounts
+      const calculateTotal = q$2(() => {
+          const baseTotal = calculateBaseTotal();
+          const totalDiscount = calculateTotalDiscount();
+          return Math.max(0, baseTotal - totalDiscount);
+      }, [calculateBaseTotal, calculateTotalDiscount]);
       const calculateDeposit = () => {
           if (!eventDetails || !eventDetails.deposit)
               return 0;
           const participantCount = watchedParticipants.filter((p) => p.name.trim()).length;
           return eventDetails.deposit * participantCount;
       };
+      const baseTotal = calculateBaseTotal();
+      const totalDiscount = calculateTotalDiscount();
       const totalAmount = calculateTotal();
       const depositAmount = calculateDeposit();
-      const paymentAmount = depositAmount > 0 ? depositAmount : totalAmount;
+      // If there's a deposit, we pay the deposit; otherwise we pay the total after discounts
+      const paymentAmount = depositAmount > 0 ? Math.max(0, depositAmount - totalDiscount) : totalAmount;
+      // Get discount code for legacy compatibility
+      const appliedDiscountCode = appliedVouchers.find((v) => v.type === "discount");
+      // Get gift cards
+      const appliedGiftCards = appliedVouchers.filter((v) => v.type === "giftCard");
+      // Voucher handlers
+      const handleVoucherValidated = q$2((voucher, error) => {
+          if (error) {
+              setVoucherError(error);
+              return;
+          }
+          if (voucher) {
+              setAppliedVouchers((prev) => [...prev, voucher]);
+              setVoucherError(null);
+          }
+      }, []);
+      const handleRemoveVoucher = q$2((code) => {
+          setAppliedVouchers((prev) => prev.filter((v) => v.code !== code));
+      }, []);
       // Form validation helper
       const isFormValid = () => {
           const participantCount = watchedParticipants.filter((p) => p.name.trim()).length;
@@ -9807,48 +10183,51 @@
           const hasAcceptedTerms = watchedAcceptTerms === true;
           return validParticipants && participantsWithinLimit && hasName && hasEmail && hasAcceptedTerms;
       };
-      // Validate discount codes
+      // Re-validate vouchers when participant count changes (affects order value)
       y$1(() => {
-          const validateDiscountCode = async (code) => {
-              if (!code.trim() || !eventDetails) {
-                  setDiscountCode(null);
-                  setDiscountError(null);
-                  return;
-              }
-              setDiscountLoading(true);
-              setDiscountError(null);
-              try {
-                  const baseTotal = eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length;
-                  const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/validate-discount"), {
-                      method: "POST",
-                      headers: createApiHeaders(config),
-                      body: JSON.stringify(createRequestBody(config, {
-                          code: code.trim(),
-                          orderValue: baseTotal,
-                      })),
-                  });
-                  const data = await response.json();
-                  if (data.valid) {
-                      setDiscountCode(data.discountCode);
+          // When participants change, we need to recalculate voucher amounts
+          // For now, we'll clear vouchers if the order value changes significantly
+          // In a production app, you might want to re-validate each voucher
+          if (appliedVouchers.length > 0) {
+              // Recalculate discount amounts based on new order value
+              const newBaseTotal = eventDetails?.price
+                  ? eventDetails.price * watchedParticipants.filter((p) => p.name.trim()).length
+                  : 0;
+              // Update voucher amounts (simplified - in production, re-validate via API)
+              setAppliedVouchers((prev) => prev.map((voucher) => {
+                  if (voucher.type === "discount") {
+                      let newDiscountAmount = 0;
+                      if (voucher.discountType === "percentage") {
+                          newDiscountAmount = Math.round((newBaseTotal * (voucher.discountValue || 0)) / 10000);
+                      }
+                      else {
+                          newDiscountAmount = voucher.discountValue || 0;
+                      }
+                      newDiscountAmount = Math.min(newDiscountAmount, newBaseTotal);
+                      return {
+                          ...voucher,
+                          discountAmount: newDiscountAmount,
+                          newTotal: newBaseTotal - newDiscountAmount,
+                      };
                   }
-                  else {
-                      setDiscountCode(null);
-                      setDiscountError(data.error);
+                  else if (voucher.type === "giftCard") {
+                      // Gift card balance stays the same, but amount to use might change
+                      const remainingAfterDiscount = newBaseTotal -
+                          prev
+                              .filter((v) => v.type === "discount")
+                              .reduce((sum, v) => sum + v.discountAmount, 0);
+                      const balanceToUse = Math.min(voucher.currentBalance || 0, Math.max(0, remainingAfterDiscount));
+                      return {
+                          ...voucher,
+                          balanceToUse,
+                          remainingBalance: (voucher.currentBalance || 0) - balanceToUse,
+                          discountAmount: balanceToUse,
+                      };
                   }
-              }
-              catch (err) {
-                  setDiscountError("Fehler beim Validieren des Rabattcodes");
-                  setDiscountCode(null);
-              }
-              finally {
-                  setDiscountLoading(false);
-              }
-          };
-          const timer = setTimeout(() => {
-              validateDiscountCode(watchedDiscountCode || "");
-          }, 500);
-          return () => clearTimeout(timer);
-      }, [watchedDiscountCode, watchedParticipants, eventDetails, config]);
+                  return voucher;
+              }));
+          }
+      }, [watchedParticipants, eventDetails]);
       // Helper functions
       const addParticipant = () => {
           const currentParticipants = form.getValues("participants");
@@ -10003,7 +10382,7 @@
                                                   color: "var(--bw-text-color)",
                                                   fontWeight: "500",
                                                   fontFamily: "var(--bw-font-family)",
-                                              }, children: [formatCurrency(eventDetails.price), " pro Person"] })] })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$2("form", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$2("div", { style: {
+                                              }, children: [formatCurrency(eventDetails.price), " pro Person"] })] })] })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$2("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$2("div", { style: {
                                           backgroundColor: "var(--bw-surface-color)",
                                           border: `1px solid var(--bw-border-color)`,
                                           backdropFilter: "blur(4px)",
@@ -10148,7 +10527,7 @@
                                                           color: "var(--bw-error-color)",
                                                           fontSize: "var(--bw-font-size)",
                                                           fontFamily: "var(--bw-font-family)",
-                                                      }, children: ["Maximal ", eventDetails.availableSpots, " Pl\u00E4tze verf\u00FCgbar."] }))] })] }), u$2("div", { style: {
+                                                      }, children: ["Maximal ", eventDetails.availableSpots, " Pl\u00E4tze verf\u00FCgbar."] }))] })] }), u$2(VoucherInput, { config: config, orderValue: baseTotal, eventInstanceId: eventDetails?.id, customerEmail: watchedCustomerEmail, onVoucherValidated: handleVoucherValidated, appliedVouchers: appliedVouchers, onRemoveVoucher: handleRemoveVoucher, disabled: !eventDetails }), u$2("div", { style: {
                                           backgroundColor: "var(--bw-surface-color)",
                                           border: `1px solid var(--bw-border-color)`,
                                           backdropFilter: "blur(4px)",
@@ -10247,7 +10626,7 @@
                                                                   color: "var(--bw-text-color)",
                                                                   fontWeight: "500",
                                                                   fontFamily: "var(--bw-font-family)",
-                                                              }, children: formatCurrency(eventDetails.deposit || 0) })] })), discountCode && (u$2(k$3, { children: [u$2("div", { style: {
+                                                              }, children: formatCurrency(eventDetails.deposit || 0) })] })), appliedVouchers.length > 0 && (u$2(k$3, { children: [u$2("div", { style: {
                                                                   display: "flex",
                                                                   justifyContent: "space-between",
                                                                   alignItems: "center",
@@ -10256,20 +10635,31 @@
                                                                           fontFamily: "var(--bw-font-family)",
                                                                       }, children: "Zwischensumme:" }), u$2("span", { style: {
                                                                           color: "var(--bw-text-muted)",
-                                                                          textDecoration: "line-through",
+                                                                          textDecoration: totalDiscount > 0 ? "line-through" : "none",
                                                                           fontFamily: "var(--bw-font-family)",
-                                                                      }, children: formatCurrency(eventDetails.price *
-                                                                          watchedParticipants.filter((p) => p.name.trim()).length) })] }), u$2("div", { style: {
+                                                                      }, children: formatCurrency(baseTotal) })] }), appliedDiscountCode && (u$2("div", { style: {
                                                                   display: "flex",
                                                                   justifyContent: "space-between",
                                                                   alignItems: "center",
                                                               }, children: [u$2("span", { style: {
                                                                           color: "var(--bw-success-color)",
                                                                           fontFamily: "var(--bw-font-family)",
-                                                                      }, children: "Rabatt:" }), u$2("span", { style: {
+                                                                          fontSize: "var(--bw-font-size)",
+                                                                      }, children: ["Rabatt (", appliedDiscountCode.code, "):"] }), u$2("span", { style: {
                                                                           color: "var(--bw-success-color)",
                                                                           fontFamily: "var(--bw-font-family)",
-                                                                      }, children: ["-", formatCurrency(discountCode.discountAmount)] })] })] })), u$2("div", { style: {
+                                                                      }, children: ["-", formatCurrency(appliedDiscountCode.discountAmount)] })] })), appliedGiftCards.map((giftCard) => (u$2("div", { style: {
+                                                                  display: "flex",
+                                                                  justifyContent: "space-between",
+                                                                  alignItems: "center",
+                                                              }, children: [u$2("span", { style: {
+                                                                          color: "var(--bw-success-color)",
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          fontSize: "var(--bw-font-size)",
+                                                                      }, children: ["Gutschein (", giftCard.code, "):"] }), u$2("span", { style: {
+                                                                          color: "var(--bw-success-color)",
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                      }, children: ["-", formatCurrency(giftCard.balanceToUse || giftCard.discountAmount)] })] }, giftCard.code)))] })), u$2("div", { style: {
                                                           borderTop: `1px solid var(--bw-border-color)`,
                                                           paddingTop: "12px",
                                                       }, children: [depositAmount > 0 && (u$2("div", { style: {
@@ -10342,7 +10732,15 @@
                                                           fontFamily: "var(--bw-font-family)",
                                                           borderBottom: "2px solid var(--bw-highlight-color)",
                                                           paddingBottom: 4,
-                                                      }, children: "Zahlung" }), u$2(PaymentForm, { config: config, eventDetails: eventDetails, formData: form.getValues(), totalAmount: paymentAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, stripePromise: stripePromise, stripeAppearance: stripeAppearance })] }));
+                                                      }, children: "Zahlung" }), u$2(PaymentForm, { config: config, eventDetails: eventDetails, formData: form.getValues(), totalAmount: paymentAmount, discountCode: appliedDiscountCode ? {
+                                                          id: appliedDiscountCode.id,
+                                                          code: appliedDiscountCode.code,
+                                                          description: appliedDiscountCode.description || undefined,
+                                                          type: appliedDiscountCode.discountType || "percentage",
+                                                          value: appliedDiscountCode.discountValue || 0,
+                                                          discountAmount: appliedDiscountCode.discountAmount,
+                                                          newTotal: appliedDiscountCode.newTotal,
+                                                      } : null, giftCards: appliedGiftCards, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, stripePromise: stripePromise, stripeAppearance: stripeAppearance })] }));
                                       })()] })] }), u$2("style", { children: `
                     .booking-widget-container *,
                     .booking-widget-container *::before,
@@ -11369,137 +11767,155 @@
 						font-size: 1.1rem !important;
 					}
 				}
-			` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Termin-Auswahl", children: [u$2("p", { className: "bw-event-instance-title", children: selectedEventType?.name }), u$2("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: u$2("div", { style: {
-                                  display: "flex",
-                                  flexDirection: "column",
-                                  gap: "20px",
-                              }, children: monthYearGroups.map(({ key, label, events, minPrice }) => {
-                                  const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
-                                  return (u$2(Accordion, { title: label, priceInfo: u$2("div", { style: {
-                                              fontSize: "1rem",
-                                              backgroundColor: monthPriceDisplayInfo
-                                                  ? monthPriceDisplayInfo.backgroundColor
-                                                  : "#14532d",
-                                              color: monthPriceDisplayInfo ? monthPriceDisplayInfo.textColor : "#4ade80",
-                                              fontWeight: 500,
-                                              marginLeft: "auto",
-                                              padding: "4px 8px",
-                                              borderRadius: "var(--bw-border-radius-small)",
-                                              border: monthPriceDisplayInfo ? "none" : undefined,
-                                              boxShadow: monthPriceDisplayInfo
-                                                  ? "0 2px 4px rgba(0, 0, 0, 0.2)"
-                                                  : undefined,
-                                          }, children: `ab ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: u$2("div", { style: {
-                                              display: "flex",
-                                              flexDirection: "column",
-                                              gap: "12px",
-                                              paddingTop: "12px",
-                                          }, children: events.map((event) => {
-                                              const availableSpots = event.maxParticipants - event.participantCount;
-                                              const isFullyBooked = availableSpots === 0;
-                                              const startDate = new Date(event.startTime);
-                                              const isPastEvent = today.toISOString() >= startDate.toISOString();
-                                              return (u$2("div", { className: "bw-event-instance-card", style: {
-                                                      position: "relative",
-                                                      cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
-                                                          ? "pointer"
-                                                          : "not-allowed",
-                                                      border: "1px solid var(--bw-border-color)",
-                                                      backgroundColor: "var(--bw-surface-color)",
-                                                      borderRadius: "var(--bw-border-radius)",
-                                                      padding: "16px 20px",
-                                                      transition: "all 0.2s ease",
-                                                      opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
-                                                      filter: isFullyBooked || isPastEvent ? "grayscale(40%)" : "none",
-                                                      fontFamily: "var(--bw-font-family)",
-                                                  }, onClick: () => {
-                                                      if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
-                                                          handleEventInstanceSelect(event);
-                                                      }
-                                                  }, onMouseEnter: (e) => {
-                                                      if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
-                                                          e.currentTarget.style.transform = "scale(1.02)";
-                                                          e.currentTarget.style.backgroundColor =
-                                                              "var(--bw-surface-muted, rgba(59, 130, 246, 0.1))";
-                                                      }
-                                                  }, onMouseLeave: (e) => {
-                                                      if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
-                                                          e.currentTarget.style.transform = "scale(1)";
-                                                          e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
-                                                      }
-                                                  }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { style: {
-                                                              position: "absolute",
-                                                              top: 0,
-                                                              left: 0,
-                                                              width: "100%",
-                                                              height: "100%",
-                                                              backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
-                                                              borderRadius: "var(--bw-border-radius)",
-                                                              display: "flex",
-                                                              alignItems: "center",
-                                                              justifyContent: "center",
-                                                          }, children: u$2("div", { style: {
-                                                                  width: "32px",
-                                                                  height: "32px",
-                                                                  color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
-                                                                  animation: "spin 1s linear infinite",
-                                                                  fontSize: "32px",
-                                                              }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), u$2("div", { style: {
-                                                              display: "flex",
-                                                              justifyContent: "space-between",
-                                                              width: "100%",
-                                                              alignItems: "start",
-                                                              gap: "12px",
-                                                              marginBottom: "4px",
-                                                          }, children: [u$2("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$2("div", { className: "bw-event-instance-datebox", style: {
-                                                                              fontSize: "var(--bw-font-size)",
-                                                                              transition: "all 0.2s ease",
-                                                                              borderRadius: "var(--bw-border-radius-small)",
-                                                                              borderTop: `4px solid var(--bw-border-color)`,
-                                                                              border: "1px solid var(--bw-border-color)",
-                                                                              width: "40px",
-                                                                              height: "40px",
-                                                                              display: "flex",
-                                                                              alignItems: "center",
-                                                                              justifyContent: "center",
-                                                                              fontWeight: "bold",
-                                                                              color: "var(--bw-text-color)",
-                                                                              backgroundColor: "var(--bw-background-color)",
-                                                                          }, children: startDate.getDate() }), u$2("div", { style: {
-                                                                              fontSize: "var(--bw-font-size)",
-                                                                              color: "var(--bw-text-color)",
-                                                                              display: "flex",
-                                                                              flexDirection: "column",
-                                                                              alignItems: "start",
-                                                                              justifyContent: "start",
-                                                                              lineHeight: "1.2",
-                                                                          }, children: [u$2("div", { children: [u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
-                                                                                          formatWeekday(event.endTime) && (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), u$2("div", { children: formatWeekday(event.startTime) ===
-                                                                                      formatWeekday(event.endTime) ? (u$2(k$3, { children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime) })] })) : (u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), u$2("span", { style: {
-                                                                              fontSize: "12px",
-                                                                              fontWeight: 400,
-                                                                              color: "var(--bw-text-muted)",
-                                                                              marginLeft: "6px",
-                                                                              background: "var(--bw-background-muted)",
-                                                                              whiteSpace: "nowrap",
-                                                                          }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), u$2("div", { className: "bw-event-instance-price", style: {
-                                                                      textAlign: "right",
-                                                                      display: "flex",
-                                                                      flexDirection: "column",
-                                                                      alignItems: "end",
-                                                                  }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { className: "bw-event-instance-title", style: {
-                                                              fontSize: "var(--bw-font-size)",
-                                                              fontWeight: "600",
-                                                              color: "var(--bw-text-color)",
-                                                              lineHeight: "1.25",
-                                                              margin: "0 0 2px 0",
-                                                              display: "flex",
-                                                              alignItems: "center",
-                                                              gap: "8px",
-                                                              maxWidth: "230px",
-                                                          }, children: event.name }))] }, event.id));
-                                          }) }) }, key));
-                              }) }) })] })] }));
+			` }), u$2(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `${selectedEventType?.name}`, children: u$2("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: u$2("div", { style: {
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: "20px",
+                          }, children: monthYearGroups.map(({ key, label, events, minPrice, year }, idx) => {
+                              const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
+                              return (u$2(k$3, { children: [idx > 0 && monthYearGroups[idx - 1].year !== year && (u$2("div", { style: {
+                                              height: 1,
+                                              backgroundColor: "var(--bw-border-color)",
+                                              margin: "4px 0",
+                                          } })), u$2(Accordion, { title: label, priceInfo: u$2("div", { style: {
+                                                  fontSize: "1rem",
+                                                  backgroundColor: monthPriceDisplayInfo
+                                                      ? monthPriceDisplayInfo.backgroundColor
+                                                      : "#14532d",
+                                                  color: monthPriceDisplayInfo
+                                                      ? monthPriceDisplayInfo.textColor
+                                                      : "#4ade80",
+                                                  fontWeight: 500,
+                                                  marginLeft: "auto",
+                                                  padding: "4px 8px",
+                                                  borderRadius: "var(--bw-border-radius-small)",
+                                                  border: monthPriceDisplayInfo ? "none" : undefined,
+                                                  boxShadow: monthPriceDisplayInfo
+                                                      ? "0 2px 4px rgba(0, 0, 0, 0.2)"
+                                                      : undefined,
+                                              }, children: `ab ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: u$2("div", { style: {
+                                                  display: "flex",
+                                                  flexDirection: "column",
+                                                  gap: "12px",
+                                                  paddingTop: "12px",
+                                              }, children: events.map((event) => {
+                                                  const availableSpots = event.maxParticipants - event.participantCount;
+                                                  const isFullyBooked = availableSpots === 0;
+                                                  const startDate = new Date(event.startTime);
+                                                  const isPastEvent = today.toISOString() >= startDate.toISOString();
+                                                  return (u$2("div", { className: "bw-event-instance-card", style: {
+                                                          position: "relative",
+                                                          cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
+                                                              ? "pointer"
+                                                              : "not-allowed",
+                                                          border: "1px solid var(--bw-border-color)",
+                                                          backgroundColor: "var(--bw-surface-color)",
+                                                          borderRadius: "var(--bw-border-radius)",
+                                                          padding: "16px 20px",
+                                                          transition: "all 0.2s ease",
+                                                          opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
+                                                          filter: isFullyBooked || isPastEvent ? "grayscale(40%)" : "none",
+                                                          fontFamily: "var(--bw-font-family)",
+                                                      }, onClick: () => {
+                                                          if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
+                                                              handleEventInstanceSelect(event);
+                                                          }
+                                                      }, onMouseEnter: (e) => {
+                                                          if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
+                                                              e.currentTarget.style.transform = "scale(1.02)";
+                                                              e.currentTarget.style.backgroundColor =
+                                                                  "var(--bw-surface-muted, rgba(59, 130, 246, 0.1))";
+                                                          }
+                                                      }, onMouseLeave: (e) => {
+                                                          if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
+                                                              e.currentTarget.style.transform = "scale(1)";
+                                                              e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
+                                                          }
+                                                      }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (u$2("div", { style: {
+                                                                  position: "absolute",
+                                                                  top: 0,
+                                                                  left: 0,
+                                                                  width: "100%",
+                                                                  height: "100%",
+                                                                  backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
+                                                                  borderRadius: "var(--bw-border-radius)",
+                                                                  display: "flex",
+                                                                  alignItems: "center",
+                                                                  justifyContent: "center",
+                                                              }, children: u$2("div", { style: {
+                                                                      width: "32px",
+                                                                      height: "32px",
+                                                                      color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
+                                                                      animation: "spin 1s linear infinite",
+                                                                      fontSize: "32px",
+                                                                  }, children: spinner() }) })), u$2(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), u$2(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), u$2("div", { style: {
+                                                                  display: "flex",
+                                                                  justifyContent: "space-between",
+                                                                  width: "100%",
+                                                                  alignItems: "start",
+                                                                  gap: "12px",
+                                                                  marginBottom: "4px",
+                                                              }, children: [u$2("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [u$2("div", { className: "bw-event-instance-datebox", style: {
+                                                                                  fontSize: "var(--bw-font-size)",
+                                                                                  transition: "all 0.2s ease",
+                                                                                  borderRadius: "var(--bw-border-radius-small)",
+                                                                                  borderTop: `4px solid var(--bw-border-color)`,
+                                                                                  border: "1px solid var(--bw-border-color)",
+                                                                                  width: "40px",
+                                                                                  height: "40px",
+                                                                                  display: "flex",
+                                                                                  alignItems: "center",
+                                                                                  justifyContent: "center",
+                                                                                  fontWeight: "bold",
+                                                                                  color: "var(--bw-text-color)",
+                                                                                  backgroundColor: "var(--bw-background-color)",
+                                                                              }, children: startDate.getDate() }), u$2("div", { style: {
+                                                                                  fontSize: "var(--bw-font-size)",
+                                                                                  color: "var(--bw-text-color)",
+                                                                                  display: "flex",
+                                                                                  flexDirection: "column",
+                                                                                  alignItems: "start",
+                                                                                  justifyContent: "start",
+                                                                                  lineHeight: "1.2",
+                                                                              }, children: [u$2("div", { children: [u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
+                                                                                              formatWeekday(event.endTime) && (u$2(k$3, { children: [u$2("span", { style: {
+                                                                                                          color: "var(--bw-text-muted)",
+                                                                                                          fontSize: "14px",
+                                                                                                      }, children: " - " }), u$2("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), u$2("div", { children: formatWeekday(event.startTime) ===
+                                                                                          formatWeekday(event.endTime) ? (u$2(k$3, { children: [u$2("span", { style: {
+                                                                                                      color: "var(--bw-text-muted)",
+                                                                                                      fontSize: "14px",
+                                                                                                  }, children: formatTime(event.startTime) }), u$2("span", { style: {
+                                                                                                      color: "var(--bw-text-muted)",
+                                                                                                      fontSize: "14px",
+                                                                                                  }, children: " - " }), u$2("span", { style: {
+                                                                                                      color: "var(--bw-text-muted)",
+                                                                                                      fontSize: "14px",
+                                                                                                  }, children: formatTime(event.endTime) })] })) : (u$2("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), u$2("span", { style: {
+                                                                                  fontSize: "12px",
+                                                                                  fontWeight: 400,
+                                                                                  color: "var(--bw-text-muted)",
+                                                                                  marginLeft: "6px",
+                                                                                  background: "var(--bw-background-muted)",
+                                                                                  whiteSpace: "nowrap",
+                                                                              }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), u$2("div", { className: "bw-event-instance-price", style: {
+                                                                          textAlign: "right",
+                                                                          display: "flex",
+                                                                          flexDirection: "column",
+                                                                          alignItems: "end",
+                                                                      }, children: u$2(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (u$2("h4", { className: "bw-event-instance-title", style: {
+                                                                  fontSize: "var(--bw-font-size)",
+                                                                  fontWeight: "600",
+                                                                  color: "var(--bw-text-color)",
+                                                                  lineHeight: "1.25",
+                                                                  margin: "0 0 2px 0",
+                                                                  display: "flex",
+                                                                  alignItems: "center",
+                                                                  gap: "8px",
+                                                                  maxWidth: "230px",
+                                                              }, children: event.name }))] }, event.id));
+                                              }) }) })] }, key));
+                          }) }) }) })] }));
   }
 
   // Loading skeleton component for NextEventsPreview